Update app.py

app.py

@@ -258,179 +258,168 @@ video_examples = [["Explain the video in detail.", "videos/2.mp4"]]
 pdf_examples = [["examples/sample-doc.pdf"]]
 
 css = """
-/* Main App Styling */
-body, .gradio-container {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-  background: #09090b;
-  color: #f4f4f5;
-}
-.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;
+:root {
+  --input-focus: #2d8cf0;
+  --font-color: #323232;
+  --font-color-sub: #666;
+  --bg-color: beige;
+  --main-color: black;
+  --form-bg: lightblue;
 }
 
-/* Header within the card */
-.card-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding-bottom: 0.5em;
-  border-bottom: 1px solid rgba(113, 113, 122, 0.5);
+body, .gradio-container {
+  font-family: 'Arial Rounded MT Bold', 'Helvetica Rounded', Arial, sans-serif;
+  background-color: var(--bg-color);
 }
-.card-header .title {
-  font-size: 1.25em;
-  font-weight: 600;
-  color: #d4d4d8;
+
+/* Main Form/Card Styling */
+.retro-form {
+  padding: 20px;
+  background: var(--form-bg);
+  gap: 20px;
+  border-radius: 5px;
+  border: 2px solid var(--main-color);
+  box-shadow: 4px 4px var(--main-color);
 }
-.status-indicator {
-  width: 0.6em;
-  height: 0.6em;
-  border-radius: 50%;
-  background-color: #22c55e;
-  animation: pulse 2s infinite;
+
+/* Title Styling */
+.form-title {
+  color: var(--font-color);
+  font-weight: 900;
+  font-size: 20px;
+  margin-bottom: 25px;
+  text-align: center;
 }
-@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
 
-/* Textbox and Input Areas */
+/* Input/Textbox Styling */
 .gr-textbox, .gr-file {
-  background: transparent !important;
-  border: none !important;
-  box-shadow: none !important;
-  padding: 0 !important;
+  border-radius: 5px !important;
+  border: 2px solid var(--main-color) !important;
+  background-color: var(--bg-color) !important;
+  box-shadow: 4px 4px var(--main-color) !important;
 }
 textarea, input[type=text] {
-  color: #f4f4f5 !important;
-  background: transparent !important;
-  font-size: 1em !important;
-  line-height: 1.6 !important;
-  padding: 1em 0 !important;
-}
-.gr-label > .label-text {
-  color: #a1a1aa !important;
-  font-weight: 500 !important;
-  margin-bottom: 0.25rem !important;
+  font-size: 15px !important;
+  font-weight: 600 !important;
+  color: var(--font-color) !important;
+  padding: 5px 10px !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;
+.gr-textbox:focus-within, .gr-file:focus-within {
+  border: 2px solid var(--input-focus) !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;
+.gr-label > .label-text {
+  font-weight: 900 !important;
+  color: var(--font-color) !important;
+  margin-bottom: 0.5rem !important;
 }
 
-/* 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;
+/* Button Styling */
+.gr-button {
+  border-radius: 5px !important;
+  border: 2px solid var(--main-color) !important;
+  background-color: var(--bg-color) !important;
+  box-shadow: 4px 4px var(--main-color) !important;
+  font-size: 17px !important;
+  font-weight: 600 !important;
+  color: var(--font-color) !important;
+  cursor: pointer !important;
+  transition: all 0.1s ease-in-out !important;
 }
-.secondary-btn:hover {
-  color: #d4d4d8 !important;
-  background-color: rgba(63, 63, 70, 0.5) !important;
+.gr-button:active {
+  box-shadow: 0px 0px var(--main-color) !important;
+  transform: translate(3px, 3px) !important;
 }
 
 /* Tabs Styling */
-.tab-nav { border-bottom: 1px solid rgba(113, 113, 122, 0.5); }
+.tab-nav {
+    gap: 0.5rem;
+}
 .tab-nav > button {
-    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;
+    border: 2px solid var(--main-color) !important;
+    box-shadow: 4px 4px var(--main-color) !important;
+    background: lightcyan !important; /* Slightly different for inactive */
 }
 .tab-nav > button.selected {
-    color: #60a5fa !important;
-    border-bottom: 2px solid #60a5fa !important;
+    background: var(--bg-color) !important;
+}
+.tab-nav > button:active {
+    box-shadow: 0px 0px var(--main-color) !important;
+    transform: translate(3px, 3px) !important;
 }
 
-/* Accordion Styling */
+/* Accordion & Slider Styling */
 .gr-accordion {
-    border: 1px solid rgba(113, 113, 122, 0.5) !important;
-    border-radius: 0.75em !important;
-    background: rgba(39, 39, 42, 0.4) !important;
+    border: 2px solid var(--main-color) !important;
+    box-shadow: 4px 4px var(--main-color) !important;
+    background-color: lightcyan !important;
+    border-radius: 5px !important;
 }
-.gr-accordion > .label-wrap {
-    color: #a1a1aa !important;
-    font-weight: 500 !important;
+.gr-slider {
+    border: 2px solid var(--main-color) !important;
+    box-shadow: 4px 4px var(--main-color) !important;
+    background-color: var(--bg-color) !important;
 }
+
 .page-info {
     text-align: center;
-    color: #a1a1aa;
-    font-weight: 500;
+    font-weight: 900;
+    color: var(--font-color);
+    padding-top: 1rem;
+}
+
+/* Image/Video Preview */
+.gr-image, .gr-video {
+    border: 2px solid var(--main-color) !important;
+    background-color: var(--bg-color) !important;
+    box-shadow: 4px 4px var(--main-color) !important;
+    border-radius: 5px !important;
 }
 """
 
 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**")
+    gr.Markdown("# **Qwen3-VL-Processor**", elem_classes="form-title")
     
-    with gr.Row(equal_height=False):
+    with gr.Row(equal_height=False, variant='panel'):
         # --- 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)
+        with gr.Column(scale=2, min_width=400, elem_classes="retro-form"):
+            gr.Markdown("### INPUT", elem_classes="form-title")
+
+            with gr.Tabs():
+                with gr.TabItem("Image"):
+                    image_query = gr.Textbox(label="Query", placeholder="Describe the image...")
+                    image_upload = gr.Image(type="pil", label="Image Upload")
+                    image_submit = gr.Button("Analyze Image")
+                    gr.Examples(examples=image_examples, inputs=[image_query, image_upload])
+                
+                with gr.TabItem("Video"):
+                    video_query = gr.Textbox(label="Query", placeholder="Summarize the video...")
+                    video_upload = gr.Video(label="Video Upload")
+                    video_submit = gr.Button("Analyze Video")
+                    gr.Examples(examples=video_examples, inputs=[video_query, video_upload])
+
+                with gr.TabItem("PDF"):
+                    pdf_query = gr.Textbox(label="Query", placeholder="Extract key points...")
+                    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("◀ Prev")
+                        next_page_btn = gr.Button("Next ▶")
+                    page_info = gr.HTML('<div class="page-info">No file loaded</div>')
+                    pdf_submit = gr.Button("Analyze PDF")
+
+            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")
+        with gr.Column(scale=3, min_width=500, elem_classes="retro-form"):
+            gr.Markdown("### RESULT", elem_classes="form-title")
+            output = gr.Textbox(label="Raw Output Stream", interactive=False, lines=15)
+            markdown_output = gr.Markdown(label="Formatted Output")
 
     # Event handlers
     image_submit.click(