Update app.py

app.py

@@ -258,58 +258,32 @@ video_examples = [["Explain the video in detail.", "videos/2.mp4"]]
 pdf_examples = [["examples/sample-doc.pdf"]]
 
 css = """
-@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;900&display=swap');
-
 :root {
-  --bg-main: #ffd6e7;
-  --bg-card: #ff66a3;
-  --bg-header: #ffffff;
-  --bg-result: #ffffff;
-  --bg-tab-active: #ff66a3;
-  --bg-advanced: rgba(255, 255, 255, 0.3);
-  --bg-uploader: rgba(255, 255, 255, 0.4);
-  --bg-button-primary: #4ade80;
-  --bg-button-primary-hover: #1ac2ff;
-  --bg-button-secondary: #fde047;
-  --bg-button-secondary-hover: #f97316;
-  --color-border: #000000;
-  --color-text: #000000;
-  --color-text-button: #000000;
-  --color-text-header: #000000;
-}
-
-.dark {
-  --bg-main: #2c132c;
-  --bg-card: #592659;
-  --bg-header: #1a1a1a;
-  --bg-result: #2a2a2a;
-  --bg-tab-active: #7f397f;
-  --bg-advanced: rgba(0, 0, 0, 0.3);
-  --bg-uploader: rgba(0, 0, 0, 0.4);
-  --color-text: #f0f0f0;
-  --color-text-header: #f0f0f0;
+  --ui-blue: #5c99e2;
+  --ui-blue-shadow: #3b76c0;
+  --ui-green: #61c470;
+  --ui-green-shadow: #45a253;
+  --ui-red: #e65e5e;
+  --ui-red-shadow: #c14242;
+  --ui-cream: #f5f1e8;
+  --ui-cream-shadow: #c7c1b5;
+  --ui-dark: #4d4c4a;
+  --button-press-depth: 0.15em;
 }
 
 body, .gradio-container {
-  font-family: 'Montserrat', sans-serif;
-  background-color: var(--bg-main);
-  color: var(--color-text);
-  transition: background-color 0.3s ease;
+  font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;
+  background-color: #f0e4d4;
+  color: var(--ui-dark);
 }
 
 /* Header Styles */
-#app-header {
-  background: var(--bg-header);
-  padding: 2rem;
-  border-bottom: 3px solid var(--color-border);
-  color: var(--color-text-header);
-  transition: background-color 0.3s ease, color 0.3s ease;
-}
 #app-header h1 {
   font-size: 2.5rem;
-  font-weight: 900;
-  margin: 0;
+  font-weight: 700;
+  color: var(--ui-dark);
   text-align: center;
+  padding: 1.5rem 0;
 }
 
 /* Main Layout Styles */
@@ -319,141 +293,137 @@ body, .gradio-container {
     box-shadow: none !important;
 }
 #main-row {
+    justify-content: center;
     gap: 4rem;
     padding: 2rem;
 }
 
 /* Card Styles */
-.card {
-  font-family: 'Montserrat', sans-serif;
-  translate: -6px -6px;
-  background: var(--bg-card);
-  border: 3px solid var(--color-border);
-  box-shadow: 12px 12px 0 var(--color-border);
-  transition: all 0.2s ease;
-  width: 100%;
-}
-.card:hover {
-  translate: -3px -3px;
-  box-shadow: 9px 9px 0 var(--color-border);
+.pixar-card {
+  background-color: var(--ui-cream);
+  border-radius: 1.5em;
+  padding: 1.2em;
+  border: 0.2em solid var(--ui-dark);
+  box-shadow: 0.6em 0.6em 0 var(--ui-dark);
+  display: flex;
+  flex-direction: column;
+  transition:
+    transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
+    box-shadow 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
-
-.card-header {
-  font-size: 14px;
-  font-weight: 900;
-  width: 100%;
-  background: var(--bg-header);
-  padding: 8px 12px;
-  color: var(--color-text-header);
-  border-bottom: 3px solid var(--color-border);
+.pixar-card:hover {
+  transform: translateY(-0.5em) rotate(-1deg);
+  box-shadow: 0.8em 0.8em 0 var(--ui-dark);
 }
-.card-content {
-  padding: 1.5rem;
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--color-text);
+#input-card { min-width: 400px; max-width: 500px; }
+#output-card { min-width: 400px; max-width: 600px; }
+
+.card-title {
+    font-size: 1.5em;
+    font-weight: 700;
+    color: var(--ui-dark);
+    margin-bottom: 1em;
+    text-align: center;
 }
 
 /* Button Styles */
 .gr-button {
-  padding: 8px 16px !important;
-  border: 3px solid var(--color-border) !important;
-  box-shadow: 4px 4px 0 var(--color-border) !important;
-  font-weight: 900 !important;
-  transition: all 0.15s ease !important;
+  border: 0.2em solid var(--ui-dark) !important;
+  border-radius: 1em !important;
+  padding: 0.5em !important;
   cursor: pointer !important;
-  font-size: 14px !important;
-  color: var(--color-text-button) !important;
-  background: var(--bg-button-secondary) !important;
-  border-radius: 0 !important;
+  box-shadow:
+    0 var(--button-press-depth) 0 var(--ui-blue-shadow),
+    0 0.4em 0 var(--ui-dark) !important;
+  transition:
+    transform 0.1s ease,
+    box-shadow 0.1s ease !important;
+  font-family: inherit !important;
+  font-weight: 700 !important;
+  font-size: 1.1em !important;
+  color: var(--ui-dark) !important;
+  background: var(--ui-blue) !important;
 }
-.gr-button.submit-btn {
-  background: var(--bg-button-primary) !important;
-}
-.gr-button:hover {
-  transform: translate(2px, 2px);
-  box-shadow: 2px 2px 0 var(--color-border) !important;
+.gr-button:active {
+  transform: translateY(var(--button-press-depth));
+  box-shadow:
+    0 0 0 var(--ui-blue-shadow),
+    0 var(--button-press-depth) 0 var(--ui-dark) !important;
 }
-.gr-button.submit-btn:hover {
-  background: var(--bg-button-primary-hover) !important;
+.gr-button.submit-btn {
+  background: var(--ui-green) !important;
+  box-shadow:
+    0 var(--button-press-depth) 0 var(--ui-green-shadow),
+    0 0.4em 0 var(--ui-dark) !important;
 }
-.gr-button:active {
-  transform: translate(4px, 4px);
-  box-shadow: 0 0 0 var(--color-border) !important;
+.gr-button.submit-btn:active {
+    box-shadow:
+    0 0 0 var(--ui-green-shadow),
+    0 var(--button-press-depth) 0 var(--ui-dark) !important;
 }
 
 /* Form & Input Styles */
-.gr-input, .gr-textarea, .gr-dropdown, .gr-textbox, .gr-file {
-  border: 3px solid var(--color-border) !important;
-  background: var(--bg-result) !important;
-  color: var(--color-text) !important;
-  font-weight: 600 !important;
-  font-family: 'Montserrat', sans-serif !important;
-  font-size: 14px !important;
-  box-sizing: border-box !important;
-  border-radius: 0 !important;
+.gr-input, .gr-textbox, .gr-file {
+  background-color: #d8d2c6 !important;
+  border-radius: 1em !important;
+  padding: 0.8em !important;
+  border: 0.2em solid var(--ui-dark) !important;
+  box-shadow: inset 0.2em 0.2em 0 #b3ac9f !important;
 }
-textarea, input[type=text], input[type=email], input[type=password] {
-  color: var(--color-text) !important;
-  background: var(--bg-result) !important;
+textarea, input[type=text] {
+  background: transparent !important;
+  color: var(--ui-dark) !important;
+  font-family: inherit !important;
+  font-weight: 600 !important;
 }
 .gr-label > .label-text {
-  font-weight: 900 !important;
-  color: var(--color-text) !important;
+  font-size: 1.1em !important;
+  font-weight: 700 !important;
+  color: var(--ui-dark) !important;
   margin-bottom: 0.5rem !important;
 }
+.gr-image, .gr-video {
+  border-radius: 0.6em !important;
+  border: 0.2em solid var(--ui-dark) !important;
+}
 
 /* Tabs Styles */
+.tab-nav {
+    justify-content: center;
+    gap: 0.5rem;
+    margin-bottom: 1rem;
+}
 .tab-nav > button {
-    font-family: 'Montserrat', sans-serif !important;
-    font-size: 14px !important;
-    font-weight: 900 !important;
-    background: var(--bg-header) !important;
-    color: var(--color-text-header) !important;
-    border-bottom: 3px solid var(--color-border) !important;
-    border-right: 3px solid var(--color-border) !important;
-    border-top: none !important;
-    border-left: none !important;
-    transition: background-color 0.3s ease !important;
-    border-radius: 0 !important;
+    border: 0.2em solid var(--ui-dark) !important;
+    border-radius: 1em !important;
+    font-weight: 700 !important;
+    background: var(--ui-cream-shadow) !important;
+    color: var(--ui-dark) !important;
+    transition: all 0.2s ease !important;
 }
 .tab-nav > button.selected {
-    background: var(--bg-tab-active) !important;
-    color: white !important;
+    background: var(--ui-blue) !important;
+    color: var(--ui-cream) !important;
+    box-shadow: 0.2em 0.2em 0 var(--ui-dark);
+    transform: translateY(-0.1em);
 }
 
 /* Advanced Options Accordion */
 .gr-accordion {
-  background: var(--bg-advanced) !important;
-  padding: 1rem;
-  border: 3px solid var(--color-border) !important;
-  margin-top: 1rem;
-  border-radius: 0 !important;
+  border: 0.2em solid var(--ui-dark) !important;
+  border-radius: 1em !important;
+  background: #d8d2c6 !important;
+  box-shadow: inset 0.2em 0.2em 0 #b3ac9f !important;
 }
 .gr-accordion > .label-wrap {
-  font-weight: 900 !important;
-  color: var(--color-text) !important;
-}
-
-/* Slider Styles */
-.gr-slider {
-  background: var(--bg-uploader) !important;
-  border: 3px solid var(--color-border) !important;
-}
-.gr-slider input[type=range]::-webkit-slider-thumb {
-  background: var(--bg-button-secondary) !important;
-  border: 3px solid var(--color-border) !important;
-}
-.gr-slider input[type=range]::-moz-range-thumb {
-  background: var(--bg-button-secondary) !important;
-  border: 3px solid var(--color-border) !important;
+    color: var(--ui-dark) !important;
+    font-weight: 700 !important;
 }
-
-/* PDF Viewer Styles */
 .page-info {
-  text-align: center;
-  font-weight: 900;
-  padding-top: 10px;
+    text-align: center;
+    font-weight: 700;
+    font-size: 1.1em;
+    margin-top: 1rem;
 }
 """
 
@@ -464,49 +434,43 @@ with gr.Blocks(css=css, theme=gr.themes.Base()) as demo:
         gr.Markdown("# Qwen3-VL-Processor")
 
     with gr.Row(elem_id="main-row"):
-        with gr.Column(scale=2):
-            with gr.Column(elem_classes="card"):
-                with gr.Group(elem_classes="card-header"):
-                    gr.Markdown("### INPUT")
-                with gr.Group(elem_classes="card-content"):
-                    with gr.Tabs():
-                        with gr.TabItem("Image Inference"):
-                            image_query = gr.Textbox(label="Query Input", placeholder="Enter your query here...")
-                            image_upload = gr.Image(type="pil", label="Image", height=290)
-                            image_submit = gr.Button("Submit", elem_classes="submit-btn")
-                            gr.Examples(examples=image_examples, inputs=[image_query, image_upload])
-                        
-                        with gr.TabItem("Video Inference"):
-                            video_query = gr.Textbox(label="Query Input", placeholder="Enter your query here...")
-                            video_upload = gr.Video(label="Video", height=290)
-                            video_submit = gr.Button("Submit", elem_classes="submit-btn")
-                            gr.Examples(examples=video_examples, inputs=[video_query, video_upload])
-
-                        with gr.TabItem("PDF Inference"):
-                            pdf_query = gr.Textbox(label="Query Input", placeholder="e.g., 'Summarize this document'")
-                            pdf_upload = gr.File(label="Upload PDF", file_types=[".pdf"])
-                            pdf_preview_img = gr.Image(label="PDF Preview", height=280)
-                            with gr.Row():
-                                prev_page_btn = gr.Button("◀ Previous")
-                                page_info = gr.HTML('<div class="page-info">No file loaded</div>')
-                                next_page_btn = gr.Button("Next ▶")
-                            pdf_submit = gr.Button("Submit", elem_classes="submit-btn")
-
-                    with gr.Accordion("Advanced options", open=False):
-                        max_new_tokens = gr.Slider(label="Max new tokens", minimum=1, maximum=MAX_MAX_NEW_TOKENS, step=1, value=DEFAULT_MAX_NEW_TOKENS)
-                        temperature = gr.Slider(label="Temperature", minimum=0.1, maximum=4.0, step=0.1, value=0.6)
-                        top_p = gr.Slider(label="Top-p (nucleus sampling)", minimum=0.05, maximum=1.0, step=0.05, value=0.9)
-                        top_k = gr.Slider(label="Top-k", minimum=1, maximum=1000, step=1, value=50)
-                        repetition_penalty = gr.Slider(label="Repetition penalty", minimum=1.0, maximum=2.0, step=0.05, value=1.2)
-
-        with gr.Column(scale=3):
-            with gr.Column(elem_classes="card"):
-                with gr.Group(elem_classes="card-header"):
-                    gr.Markdown("### RESULT")
-                with gr.Group(elem_classes="card-content"):
-                    output = gr.Textbox(label="Raw Output Stream", interactive=False, lines=15, show_copy_button=True)
-                    with gr.Accordion("(Result.md)", open=False):
-                        markdown_output = gr.Markdown(label="(Result.Md)")
+        with gr.Column(scale=2, elem_id="input-card", elem_classes="pixar-card"):
+            gr.Markdown("### INPUT", elem_classes="card-title")
+            with gr.Tabs():
+                with gr.TabItem("Image"):
+                    image_query = gr.Textbox(label="Query", placeholder="What do you see?...")
+                    image_upload = gr.Image(type="pil", label="Image Input", height=290)
+                    image_submit = gr.Button("Submit", elem_classes="submit-btn")
+                    gr.Examples(examples=image_examples, inputs=[image_query, image_upload])
+                
+                with gr.TabItem("Video"):
+                    video_query = gr.Textbox(label="Query", placeholder="Explain this video...")
+                    video_upload = gr.Video(label="Video Input", height=290)
+                    video_submit = gr.Button("Submit", elem_classes="submit-btn")
+                    gr.Examples(examples=video_examples, inputs=[video_query, video_upload])
+
+                with gr.TabItem("PDF"):
+                    pdf_query = gr.Textbox(label="Query", placeholder="Summarize this document...")
+                    pdf_upload = gr.File(label="Upload PDF", file_types=[".pdf"])
+                    pdf_preview_img = gr.Image(label="PDF Preview", height=280)
+                    with gr.Row():
+                        prev_page_btn = gr.Button("◀ Prev")
+                        next_page_btn = gr.Button("Next ▶")
+                    page_info = gr.HTML('<div class="page-info">No file loaded</div>')
+                    pdf_submit = gr.Button("Submit", elem_classes="submit-btn")
+
+            with gr.Accordion("Advanced Options", open=False):
+                max_new_tokens = gr.Slider(label="Max new tokens", minimum=1, maximum=MAX_MAX_NEW_TOKENS, step=1, value=DEFAULT_MAX_NEW_TOKENS)
+                temperature = gr.Slider(label="Temperature", minimum=0.1, maximum=4.0, step=0.1, value=0.6)
+                top_p = gr.Slider(label="Top-p", minimum=0.05, maximum=1.0, step=0.05, value=0.9)
+                top_k = gr.Slider(label="Top-k", minimum=1, maximum=1000, step=1, value=50)
+                repetition_penalty = gr.Slider(label="Repetition penalty", minimum=1.0, maximum=2.0, step=0.05, value=1.2)
+
+        with gr.Column(scale=3, elem_id="output-card", elem_classes="pixar-card"):
+            gr.Markdown("### RESULT", elem_classes="card-title")
+            output = gr.Textbox(label="Raw Output", interactive=False, lines=15)
+            with gr.Accordion("Formatted Markdown", open=True):
+                markdown_output = gr.Markdown(label="Formatted Output")
 
     # Event handlers
     image_submit.click(