Update app.py

app.py

@@ -258,218 +258,178 @@ video_examples = [["Explain the video in detail.", "videos/2.mp4"]]
 pdf_examples = [["examples/sample-doc.pdf"]]
 
 css = """
-:root {
-  --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;
-}
-
+/* Main App Styling */
 body, .gradio-container {
-  font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;
-  background-color: #f0e4d4;
-  color: var(--ui-dark);
-}
-
-/* Header Styles */
-#app-header h1 {
-  font-size: 2.5rem;
-  font-weight: 700;
-  color: var(--ui-dark);
-  text-align: center;
-  padding: 1.5rem 0;
-}
-
-/* Main Layout Styles */
-.gradio-container .gr-panel {
-    background-color: transparent !important;
-    border: none !important;
-    box-shadow: none !important;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  background: #09090b;
+  color: #f4f4f5;
 }
-#main-row {
-    justify-content: center;
-    gap: 4rem;
-    padding: 2rem;
+.gradio-container { padding: 1.5em; }
+
+/* Main Chat Container / Card Style */
+.chat-container {
+  border-radius: 1.25em;
+  background: linear-gradient(135deg, rgba(39, 39, 42, 0.8), rgba(9, 9, 11, 0.9));
+  border: 1px solid rgba(113, 113, 122, 0.5);
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  backdrop-filter: blur(20px);
+  padding: 1em 1.5em;
+  gap: 1.5rem;
 }
 
-/* Card Styles */
-.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);
+/* Header within the card */
+.card-header {
   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);
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 0.5em;
+  border-bottom: 1px solid rgba(113, 113, 122, 0.5);
 }
-.pixar-card:hover {
-  transform: translateY(-0.5em) rotate(-1deg);
-  box-shadow: 0.8em 0.8em 0 var(--ui-dark);
+.card-header .title {
+  font-size: 1.25em;
+  font-weight: 600;
+  color: #d4d4d8;
 }
-#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;
+.status-indicator {
+  width: 0.6em;
+  height: 0.6em;
+  border-radius: 50%;
+  background-color: #22c55e;
+  animation: pulse 2s infinite;
 }
+@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
 
-/* Button Styles */
-.gr-button {
-  border: 0.2em solid var(--ui-dark) !important;
-  border-radius: 1em !important;
-  padding: 0.5em !important;
-  cursor: pointer !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: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 {
-  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.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-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;
+/* Textbox and Input Areas */
+.gr-textbox, .gr-file {
+  background: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+  padding: 0 !important;
 }
 textarea, input[type=text] {
+  color: #f4f4f5 !important;
   background: transparent !important;
-  color: var(--ui-dark) !important;
-  font-family: inherit !important;
-  font-weight: 600 !important;
+  font-size: 1em !important;
+  line-height: 1.6 !important;
+  padding: 1em 0 !important;
 }
 .gr-label > .label-text {
-  font-size: 1.1em !important;
-  font-weight: 700 !important;
-  color: var(--ui-dark) !important;
-  margin-bottom: 0.5rem !important;
+  color: #a1a1aa !important;
+  font-weight: 500 !important;
+  margin-bottom: 0.25rem !important;
 }
-.gr-image, .gr-video {
-  border-radius: 0.6em !important;
-  border: 0.2em solid var(--ui-dark) !important;
+
+/* Primary "Submit" Button */
+.submit-btn {
+  padding: 0.75em !important;
+  background: linear-gradient(to right, #2563eb, #3b82f6) !important;
+  border: none !important;
+  border-radius: 0.75em !important;
+  color: white !important;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
+  transition: all 0.2s ease !important;
+}
+.submit-btn:hover {
+  background: linear-gradient(to right, #3b82f6, #60a5fa) !important;
+  transform: scale(1.05);
+  box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.25) !important;
 }
 
-/* Tabs Styles */
-.tab-nav {
-    justify-content: center;
-    gap: 0.5rem;
-    margin-bottom: 1rem;
+/* Secondary Buttons (PDF Nav) */
+.secondary-btn {
+  padding: 0.625em !important;
+  background: rgba(39, 39, 42, 0.4) !important;
+  border: 1px solid rgba(63, 63, 70, 0.5) !important;
+  border-radius: 0.75em !important;
+  color: #a1a1aa !important;
+  transition: all 0.2s ease !important;
+}
+.secondary-btn:hover {
+  color: #d4d4d8 !important;
+  background-color: rgba(63, 63, 70, 0.5) !important;
 }
+
+/* Tabs Styling */
+.tab-nav { border-bottom: 1px solid rgba(113, 113, 122, 0.5); }
 .tab-nav > button {
-    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;
+    background: transparent !important;
+    border: none !important;
+    color: #a1a1aa !important;
+    font-weight: 500 !important;
+    border-bottom: 2px solid transparent !important;
+    border-radius: 0 !important;
+    padding: 0.75rem !important;
 }
 .tab-nav > button.selected {
-    background: var(--ui-blue) !important;
-    color: var(--ui-cream) !important;
-    box-shadow: 0.2em 0.2em 0 var(--ui-dark);
-    transform: translateY(-0.1em);
+    color: #60a5fa !important;
+    border-bottom: 2px solid #60a5fa !important;
 }
 
-/* Advanced Options Accordion */
+/* Accordion Styling */
 .gr-accordion {
-  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;
+    border: 1px solid rgba(113, 113, 122, 0.5) !important;
+    border-radius: 0.75em !important;
+    background: rgba(39, 39, 42, 0.4) !important;
 }
 .gr-accordion > .label-wrap {
-    color: var(--ui-dark) !important;
-    font-weight: 700 !important;
+    color: #a1a1aa !important;
+    font-weight: 500 !important;
 }
 .page-info {
     text-align: center;
-    font-weight: 700;
-    font-size: 1.1em;
-    margin-top: 1rem;
+    color: #a1a1aa;
+    font-weight: 500;
 }
 """
 
 with gr.Blocks(css=css, theme=gr.themes.Base()) as demo:
     pdf_state = gr.State(value=get_initial_pdf_state())
+    gr.Markdown("# **Qwen3-VL-Processor**")
     
-    with gr.Column(elem_id="app-header"):
-        gr.Markdown("# Qwen3-VL-Processor")
-
-    with gr.Row(elem_id="main-row"):
-        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):
+    with gr.Row(equal_height=False):
+        # --- INPUT COLUMN ---
+        with gr.Column(scale=2, min_width=400):
+            with gr.Column(elem_classes="chat-container"):
+                with gr.Row(elem_classes="card-header"):
+                    gr.Markdown("INPUT", elem_classes="title")
+                    gr.HTML('<div class="status-indicator"></div>')
+
+                with gr.Tabs():
+                    with gr.TabItem("Image"):
+                        image_query = gr.Textbox(label="Query", placeholder="Describe the image...", lines=3)
+                        image_upload = gr.Image(type="pil", label="Image Upload")
+                        image_submit = gr.Button("Analyze Image", 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="Summarize the video...", lines=3)
+                        video_upload = gr.Video(label="Video Upload")
+                        video_submit = gr.Button("Analyze Video", 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="Extract key points from the PDF...", lines=3)
+                        pdf_upload = gr.File(label="PDF Upload", file_types=[".pdf"])
+                        pdf_preview_img = gr.Image(label="PDF Preview")
+                        with gr.Row():
+                            prev_page_btn = gr.Button("◀ Previous", elem_classes="secondary-btn")
+                            next_page_btn = gr.Button("Next ▶", elem_classes="secondary-btn")
+                        page_info = gr.HTML('<div class="page-info">No file loaded</div>')
+                        pdf_submit = gr.Button("Analyze PDF", 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)
+
+        # --- OUTPUT COLUMN ---
+        with gr.Column(scale=3, min_width=500):
+            with gr.Column(elem_classes="chat-container"):
+                with gr.Row(elem_classes="card-header"):
+                    gr.Markdown("RESULT", elem_classes="title")
+                output = gr.Textbox(label="Raw Output Stream", interactive=False, lines=15)
                 markdown_output = gr.Markdown(label="Formatted Output")
 
     # Event handlers