Update app.py

app.py

@@ -102,26 +102,26 @@ def load_and_preview_pdf(file_path: Optional[str]) -> Tuple[Optional[Image.Image
     """
     state = get_initial_pdf_state()
     if not file_path:
-        return None, state, '<div style="text-align:center;">No file loaded</div>'
+        return None, state, '<div class="page-info">No file loaded</div>'
 
     try:
         pages = convert_pdf_to_images(file_path)
         if not pages:
-            return None, state, '<div style="text-align:center;">Could not load file</div>'
+            return None, state, '<div class="page-info">Could not load file</div>'
         
         state["pages"] = pages
         state["total_pages"] = len(pages)
-        page_info_html = f'<div style="text-align:center;">Page 1 / {state["total_pages"]}</div>'
+        page_info_html = f'<div class="page-info">Page 1 / {state["total_pages"]}</div>'
         return pages[0], state, page_info_html
     except Exception as e:
-        return None, state, f'<div style="text-align:center;">Failed to load preview: {e}</div>'
+        return None, state, f'<div class="page-info">Failed to load preview: {e}</div>'
 
 def navigate_pdf_page(direction: str, state: Dict[str, Any]):
     """
     Navigates to the previous or next page in the PDF preview.
     """
     if not state or not state["pages"]:
-        return None, state, '<div style="text-align:center;">No file loaded</div>'
+        return None, state, '<div class="page-info">No file loaded</div>'
 
     current_index = state["current_page_index"]
     total_pages = state["total_pages"]
@@ -136,7 +136,7 @@ def navigate_pdf_page(direction: str, state: Dict[str, Any]):
     state["current_page_index"] = new_index
     
     image_preview = state["pages"][new_index]
-    page_info_html = f'<div style="text-align:center;">Page {new_index + 1} / {total_pages}</div>'
+    page_info_html = f'<div class="page-info">Page {new_index + 1} / {total_pages}</div>'
     
     return image_preview, state, page_info_html
 
@@ -258,191 +258,252 @@ 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@400;600;700;900&display=swap');
+@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;
-  --shadow-card: 12px 12px 0 var(--color-border);
-  --shadow-button: 4px 4px 0 var(--color-border);
+  --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;
 }
 
 body, .gradio-container {
-    font-family: 'Montserrat', sans-serif;
-    background-color: var(--bg-main);
-    color: var(--color-text);
+  font-family: 'Montserrat', sans-serif;
+  background-color: var(--bg-main);
+  color: var(--color-text);
+  transition: background-color 0.3s ease;
 }
 
-h1 {
-    font-size: 2.5rem !important;
-    font-weight: 900 !important;
-    text-align: center;
-    margin-bottom: 2rem !important;
-    color: var(--color-text);
+/* 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;
+  text-align: center;
 }
 
+/* Main Layout Styles */
 .gradio-container .gr-panel {
     background-color: transparent !important;
     border: none !important;
     box-shadow: none !important;
 }
-
-.gr-tabs {
-    translate: -6px -6px;
-    background: var(--bg-card);
-    border: 3px solid var(--color-border);
-    box-shadow: var(--shadow-card);
-    transition: all 0.2s ease;
-}
-.gr-tabs:hover {
-    translate: -3px -3px;
-    box-shadow: 9px 9px 0 var(--color-border);
+#main-row {
+    gap: 4rem;
+    padding: 2rem;
 }
 
-.gr-block.gr-box {
-    border: none !important;
+/* 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%;
 }
-
-.tabs > .tab-nav > button {
-    font-family: 'Montserrat', sans-serif;
-    font-size: 14px !important;
-    font-weight: 900 !important;
-    background: var(--bg-header) !important;
-    color: var(--color-text) !important;
-    border-bottom: 3px solid var(--color-border) !important;
-    transition: background-color 0.3s ease !important;
+.card:hover {
+  translate: -3px -3px;
+  box-shadow: 9px 9px 0 var(--color-border);
 }
 
-.tabs > .tab-nav > button.selected {
-    background: var(--bg-card) !important;
-    color: white !important;
+.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);
+}
+.card-content {
+  padding: 1.5rem;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--color-text);
 }
 
+/* Button Styles */
 .gr-button {
-    padding: 8px 16px;
-    border: 3px solid var(--color-border) !important;
-    box-shadow: var(--shadow-button) !important;
-    font-weight: 900 !important;
-    transition: all 0.15s ease !important;
-    cursor: pointer;
-    font-size: 14px !important;
-    color: var(--color-text) !important;
-    background: var(--bg-button-secondary) !important;
+  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;
+  cursor: pointer !important;
+  font-size: 14px !important;
+  color: var(--color-text-button) !important;
+  background: var(--bg-button-secondary) !important;
 }
 .gr-button.submit-btn {
-    background: var(--bg-button-primary) !important;
+  background: var(--bg-button-primary) !important;
 }
 .gr-button:hover {
-    transform: translate(2px, 2px);
-    box-shadow: 2px 2px 0 var(--color-border) !important;
-    background: var(--bg-button-primary-hover) !important;
+  transform: translate(2px, 2px);
+  box-shadow: 2px 2px 0 var(--color-border) !important;
 }
 .gr-button.submit-btn:hover {
-    background: var(--bg-button-primary-hover) !important;
+  background: var(--bg-button-primary-hover) !important;
 }
 .gr-button:active {
-    transform: translate(4px, 4px);
-    box-shadow: 0 0 0 var(--color-border) !important;
+  transform: translate(4px, 4px);
+  box-shadow: 0 0 0 var(--color-border) !important;
 }
 
-.canvas-output {
-    translate: -6px -6px;
-    background: var(--bg-card);
-    border: 3px solid var(--color-border);
-    box-shadow: var(--shadow-card);
-    transition: all 0.2s ease;
-    padding: 1.5rem;
+/* 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;
 }
-.canvas-output:hover {
-    translate: -3px -3px;
-    box-shadow: 9px 9px 0 var(--color-border);
+textarea, input[type=text], input[type=email], input[type=password] {
+  color: var(--color-text) !important;
+  background: var(--bg-result) !important;
 }
-.canvas-output .gr-markdown h2 {
-    font-size: 14px;
-    font-weight: 900;
-    width: 100%;
-    background: var(--bg-header);
-    padding: 8px 12px;
-    color: var(--color-text);
-    border: 3px solid var(--color-border);
-    margin: -1.5rem -1.5rem 1.5rem -1.5rem; /* Adjust to break out of padding */
+.gr-label > .label-text {
+  font-weight: 900 !important;
+  color: var(--color-text) !important;
+  margin-bottom: 0.5rem !important;
 }
 
-textarea, input[type="text"], input[type="file"] {
-    width: 100%;
-    padding: 10px;
-    border: 3px solid var(--color-border) !important;
+/* Tabs Styles */
+.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) !important;
-    font-weight: 600 !important;
-    font-family: 'Montserrat', sans-serif;
-    font-size: 14px;
-    box-sizing: border-box;
-    border-radius: 0 !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;
+}
+.tab-nav > button.selected {
+    background: var(--bg-tab-active) !important;
+    color: white !important;
 }
 
+/* Advanced Options Accordion */
 .gr-accordion {
-    border: 3px solid var(--color-border) !important;
-    background: rgba(255, 255, 255, 0.3) !important;
+  background: var(--bg-advanced) !important;
+  padding: 1rem;
+  border: 3px solid var(--color-border) !important;
+  margin-top: 1rem;
+}
+.gr-accordion > .label-wrap {
+  font-weight: 900 !important;
+  color: var(--color-text) !important;
 }
 
-.gr-image, .gr-video {
-    border: 3px solid var(--color-border) !important;
-    min-height: 290px;
+/* 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;
+}
+
+/* PDF Viewer Styles */
+.page-info {
+  text-align: center;
+  font-weight: 900;
+  padding-top: 10px;
 }
 """
 
-with gr.Blocks(css=css) as demo:
+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.Row():
+    
+    with gr.Column(elem_id="app-header"):
+        gr.Markdown("# Qwen3-VL-Processor")
+
+    with gr.Row(elem_id="main-row"):
         with gr.Column(scale=2):
-            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"):
-                    with gr.Row():
-                        with gr.Column(scale=1):
+            with gr.Column(elem_classes="card"):
+                with gr.Box(elem_classes="card-header"):
+                    gr.Markdown("### INPUT")
+                with gr.Box(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_submit = gr.Button("Submit", elem_classes="submit-btn")
-                        with gr.Column(scale=1):
                             pdf_preview_img = gr.Image(label="PDF Preview", height=280)
                             with gr.Row():
                                 prev_page_btn = gr.Button("◀ Previous")
-                                page_info = gr.HTML('<div style="text-align:center;">No file loaded</div>')
+                                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.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="canvas-output"):
-                gr.Markdown("## Output")
-                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(elem_classes="card"):
+                with gr.Box(elem_classes="card-header"):
+                    gr.Markdown("### RESULT")
+                with gr.Box(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)")
 
     # Event handlers
     image_submit.click(