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 class="page-info">No file loaded</div>'
+        return None, state, '<div style="text-align:center;">No file loaded</div>'
 
     try:
         pages = convert_pdf_to_images(file_path)
         if not pages:
-            return None, state, '<div class="page-info">Could not load file</div>'
+            return None, state, '<div style="text-align:center;">Could not load file</div>'
         
         state["pages"] = pages
         state["total_pages"] = len(pages)
-        page_info_html = f'<div class="page-info">Page 1 / {state["total_pages"]}</div>'
+        page_info_html = f'<div style="text-align:center;">Page 1 / {state["total_pages"]}</div>'
         return pages[0], state, page_info_html
     except Exception as e:
-        return None, state, f'<div class="page-info">Failed to load preview: {e}</div>'
+        return None, state, f'<div style="text-align:center;">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 class="page-info">No file loaded</div>'
+        return None, state, '<div style="text-align:center;">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 class="page-info">Page {new_index + 1} / {total_pages}</div>'
+    page_info_html = f'<div style="text-align:center;">Page {new_index + 1} / {total_pages}</div>'
     
     return image_preview, state, page_info_html
 
@@ -258,168 +258,177 @@ video_examples = [["Explain the video in detail.", "videos/2.mp4"]]
 pdf_examples = [["examples/sample-doc.pdf"]]
 
 css = """
-:root {
-  --input-focus: #2d8cf0;
-  --font-color: #323232;
-  --font-color-sub: #666;
-  --bg-color: beige;
-  --main-color: black;
-  --form-bg: lightblue;
+/* From Uiverse.io by mi-series */
+body {
+    background: #FCEDDA;
+}
+.gradio-container {
+    background: #FCEDDA;
+}
+.container {
+  position: relative;
+  max-width: 500px;
+  width: 100%;
+  background: #FCEDDA;
+  padding: 25px;
+  border-radius: 8px;
+  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
 }
 
-body, .gradio-container {
-  font-family: 'Arial Rounded MT Bold', 'Helvetica Rounded', Arial, sans-serif;
-  background-color: var(--bg-color);
+.container header {
+  font-size: 1.2rem;
+  color: #000;
+  font-weight: 600;
+  text-align: center;
 }
 
-/* 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);
+.container .form {
+  margin-top: 15px;
 }
 
-/* Title Styling */
-.form-title {
-  color: var(--font-color);
-  font-weight: 900;
-  font-size: 20px;
-  margin-bottom: 25px;
-  text-align: center;
+.form .input-box {
+  width: 100%;
+  margin-top: 10px;
 }
 
-/* Input/Textbox Styling */
-.gr-textbox, .gr-file {
-  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;
+.input-box label {
+  color: #000;
 }
-textarea, input[type=text] {
-  font-size: 15px !important;
-  font-weight: 600 !important;
-  color: var(--font-color) !important;
-  padding: 5px 10px !important;
+
+.form :where(.input-box input, .select-box) {
+  position: relative;
+  height: 35px;
+  width: 100%;
+  outline: none;
+  font-size: 1rem;
+  color: #808080;
+  margin-top: 5px;
+  border: 1px solid #EE4E34;
+  border-radius: 6px;
+  padding: 0 15px;
+  background: #FCEDDA;
 }
-.gr-textbox:focus-within, .gr-file:focus-within {
-  border: 2px solid var(--input-focus) !important;
+
+.input-box input:focus {
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
 }
-.gr-label > .label-text {
-  font-weight: 900 !important;
-  color: var(--font-color) !important;
-  margin-bottom: 0.5rem !important;
+
+.form .column {
+  display: flex;
+  column-gap: 15px;
 }
 
-/* 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;
+.form .gender-box {
+  margin-top: 10px;
 }
-.gr-button:active {
-  box-shadow: 0px 0px var(--main-color) !important;
-  transform: translate(3px, 3px) !important;
+
+.form :where(.gender-option, .gender) {
+  display: flex;
+  align-items: center;
+  column-gap: 50px;
+  flex-wrap: wrap;
 }
 
-/* Tabs Styling */
-.tab-nav {
-    gap: 0.5rem;
+.form .gender {
+  column-gap: 5px;
 }
-.tab-nav > button {
-    border: 2px solid var(--main-color) !important;
-    box-shadow: 4px 4px var(--main-color) !important;
-    background: lightcyan !important; /* Slightly different for inactive */
+
+.gender input {
+  accent-color: #EE4E34;
 }
-.tab-nav > button.selected {
-    background: var(--bg-color) !important;
+
+.form :where(.gender input, .gender label) {
+  cursor: pointer;
 }
-.tab-nav > button:active {
-    box-shadow: 0px 0px var(--main-color) !important;
-    transform: translate(3px, 3px) !important;
+
+.gender label {
+  color: #000;
 }
 
-/* Accordion & Slider Styling */
-.gr-accordion {
-    border: 2px solid var(--main-color) !important;
-    box-shadow: 4px 4px var(--main-color) !important;
-    background-color: lightcyan !important;
-    border-radius: 5px !important;
+.address :where(input, .select-box) {
+  margin-top: 10px;
 }
-.gr-slider {
-    border: 2px solid var(--main-color) !important;
-    box-shadow: 4px 4px var(--main-color) !important;
-    background-color: var(--bg-color) !important;
+
+.select-box select {
+  height: 100%;
+  width: 100%;
+  outline: none;
+  border: none;
+  color: #808080;
+  font-size: 1rem;
+  background: #FCEDDA;
 }
 
-.page-info {
-    text-align: center;
-    font-weight: 900;
-    color: var(--font-color);
-    padding-top: 1rem;
+.form button, .submit-btn {
+  height: 40px;
+  width: 100%;
+  color: #000 !important;
+  font-size: 1rem;
+  font-weight: 400;
+  margin-top: 15px;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  background: #EE4E34 !important;
 }
 
-/* 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;
+.form button:hover, .submit-btn:hover {
+  background: #EE3E34 !important;
+}
+.canvas-output {
+    border: 2px solid #EE4E34;
+    border-radius: 10px;
+    padding: 20px;
+    background: #FCEDDA;
 }
 """
 
-with gr.Blocks(css=css, theme=gr.themes.Base()) as demo:
+with gr.Blocks(css=css) as demo:
     pdf_state = gr.State(value=get_initial_pdf_state())
-    gr.Markdown("# **Qwen3-VL-Processor**", elem_classes="form-title")
-    
-    with gr.Row(equal_height=False, variant='panel'):
-        # --- INPUT COLUMN ---
-        with gr.Column(scale=2, min_width=400, elem_classes="retro-form"):
-            gr.Markdown("### INPUT", elem_classes="form-title")
-
+    gr.Markdown("# **Qwen3-VL-Processor**")
+    with gr.Row():
+        with gr.Column(scale=2):
             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")
+                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"):
-                    video_query = gr.Textbox(label="Query", placeholder="Summarize the video...")
-                    video_upload = gr.Video(label="Video Upload")
-                    video_submit = gr.Button("Analyze Video")
+                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"):
-                    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.TabItem("PDF Inference"):
                     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.Column(scale=1):
+                            pdf_query = gr.Textbox(label="Query Input", placeholder="e.g., 'Summarize this document'")
+                            pdf_upload = gr.File(label="Upload PDF", file_types=[".pdf"])
+                            #gr.Examples(examples=pdf_examples, inputs=[pdf_upload])
+                            pdf_submit = gr.Button("Submit", elem_classes="submit-btn")
+                        with gr.Column(scale=1):
+                            pdf_preview_img = gr.Image(label="PDF Preview", height=290)
+                            with gr.Row():
+                                prev_page_btn = gr.Button("◀ Previous")
+                                page_info = gr.HTML('<div style="text-align:center;">No file loaded</div>')
+                                next_page_btn = gr.Button("Next ▶")
 
             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_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)
 
-        # --- OUTPUT COLUMN ---
-        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")
+        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=14, show_copy_button=True)
+                with gr.Accordion("(Result.md)", open=False):
+                    markdown_output = gr.Markdown(label="(Result.Md)")
 
     # Event handlers
     image_submit.click(
@@ -454,4 +463,4 @@ with gr.Blocks(css=css, theme=gr.themes.Base()) as demo:
     )
 
 if __name__ == "__main__":
-    demo.queue(max_size=50).launch(ssr_mode=False, show_error=True)
+    demo.queue(max_size=50).launch(mcp_server=True, ssr_mode=False, show_error=True)