update web vis

app.py

@@ -229,96 +229,35 @@ def process_video(
 
 
 css = """
-#video-display-container {
-    max-height: 100vh;
-}
-#video-display-input {
-    max-height: 80vh;
-}
-#video-display-output {
-    max-height: 80vh;
-}
-#download {
-    height: 62px;
-}
-.title {
-    text-align: center;
-}
-.description {
-    text-align: center;
-}
-.gradio-examples {
-    max-height: 400px;
-    overflow-y: auto;
-}
-.gradio-examples .examples-container {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-    gap: 10px;
-    padding: 10px;
-}
-.gradio-container .gradio-examples .pagination,
-.gradio-container .gradio-examples .pagination button,
-div[data-testid="examples"] .pagination,
-div[data-testid="examples"] .pagination button {
-    font-size: 28px !important;
-    font-weight: bold !important;
-    padding: 15px 20px !important;
-    min-width: 60px !important;
-    height: 60px !important;
-    border-radius: 10px !important;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
-    color: white !important;
-    border: none !important;
-    cursor: pointer !important;
-    margin: 8px !important;
-    display: inline-block !important;
-    box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important;
-    transition: all 0.3s ease !important;
-}
-
-div[data-testid="examples"] .pagination button:not(.active),
-.gradio-container .gradio-examples .pagination button:not(.active) {
-    font-size: 32px !important;
-    font-weight: bold !important;
-    padding: 15px 20px !important;
-    min-width: 60px !important;
-    height: 60px !important;
-    background: linear-gradient(135deg, #8a9cf0 0%, #9a6bb2 100%) !important;
-    opacity: 0.8 !important;
-}
-
-div[data-testid="examples"] .pagination button:hover,
-.gradio-container .gradio-examples .pagination button:hover {
-    background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%) !important;
-    transform: translateY(-2px) !important;
-    box-shadow: 0 6px 12px rgba(0,0,0,0.3) !important;
-    opacity: 1 !important;
-}
-
-div[data-testid="examples"] .pagination button.active,
-.gradio-container .gradio-examples .pagination button.active {
-    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%) !important;
-    box-shadow: 0 4px 8px rgba(17,153,142,0.4) !important;
-    opacity: 1 !important;
-}
-
-button[class*="pagination"],
-button[class*="page"] {
-    font-size: 28px !important;
-    font-weight: bold !important;
-    padding: 15px 20px !important;
-    min-width: 60px !important;
-    height: 60px !important;
-    border-radius: 10px !important;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
-    color: white !important;
-    border: none !important;
-    cursor: pointer !important;
-    margin: 8px !important;
-    box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important;
-    transition: all 0.3s ease !important;
-}
+ #download {
+                height: 118px;
+            }
+            .slider .inner {
+                width: 5px;
+                background: #FFF;
+            }
+            .viewport {
+                aspect-ratio: 4/3;
+            }
+            .tabs button.selected {
+                font-size: 20px !important;
+                color: crimson !important;
+            }
+            h1 {
+                text-align: center;
+                display: block;
+            }
+            h2 {
+                text-align: center;
+                display: block;
+            }
+            h3 {
+                text-align: center;
+                display: block;
+            }
+            .md_feedback li {
+                margin-bottom: 0px !important;
+            }
 """
 
 
@@ -331,36 +270,33 @@ head_html = """
 """
 
 
-
 # description = """Official demo for **DKT **."""
-
 # with gr.Blocks(css=css, title="DKT - Diffusion Knows Transparency", favicon_path="favicon.ico") as demo:
 
 
 with gr.Blocks(css=css, title="DKT", head=head_html) as demo:
     # gr.Markdown(title, elem_classes=["title"])
     """
-
-    <a title="Website" href="https://stable-x.github.io/StableNormal/" target="_blank" rel="noopener noreferrer" style="display: inline-block;">
-            <img src="https://www.obukhov.ai/img/badges/badge-website.svg">
-        </a>
         <a title="arXiv" href="https://arxiv.org/abs/2406.16864" target="_blank" rel="noopener noreferrer" style="display: inline-block;">
             <img src="https://www.obukhov.ai/img/badges/badge-pdf.svg">
         </a>
-        <a title="Social" href="https://x.com/ychngji6" target="_blank" rel="noopener noreferrer" style="display: inline-block;">
-            <img src="https://www.obukhov.ai/img/badges/badge-social.svg" alt="social">
-        </a>
-    
+        
     
     """
 
     gr.Markdown(
-        """
+    """
         # Diffusion Knows Transparency: Repurposing Video Diffusion for Transparent Object Depth and Normal Estimation 
         <p align="center">
+        <a title="Website" href="https://daniellli.github.io/projects/DKT/" target="_blank" rel="noopener noreferrer" style="display: inline-block;">
+            <img src="https://www.obukhov.ai/img/badges/badge-website.svg">
+        </a>
         <a title="Github" href="https://github.com/Daniellli/DKT" target="_blank" rel="noopener noreferrer" style="display: inline-block;">
             <img src="https://img.shields.io/github/stars/Daniellli/DKT?style=social" alt="badge-github-stars">
         </a>
+        <a title="Social" href="https://x.com/xshocng1" target="_blank" rel="noopener noreferrer" style="display: inline-block;">
+            <img src="https://www.obukhov.ai/img/badges/badge-social.svg" alt="social">
+        </a>
     """
     )
     # gr.Markdown(description, elem_classes=["description"])