Update app.py

app.py

@@ -258,12 +258,148 @@ video_examples = [["Explain the video in detail.", "videos/2.mp4"]]
 pdf_examples = [["examples/sample-doc.pdf"]]
 
 css = """
-.submit-btn { background-color: #2980b9 !important; color: white !important; }
-.submit-btn:hover { background-color: #3498db !important; }
-.canvas-output { border: 2px solid #4682B4; border-radius: 10px; padding: 20px; }
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;900&display=swap');
+
+:root {
+  --bg-main: #ffd6e7;
+  --bg-card: #ff66a3;
+  --bg-header: #ffffff;
+  --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);
+}
+
+body, .gradio-container {
+    font-family: 'Montserrat', sans-serif;
+    background-color: var(--bg-main);
+    color: var(--color-text);
+}
+
+h1 {
+    font-size: 2.5rem !important;
+    font-weight: 900 !important;
+    text-align: center;
+    margin-bottom: 2rem !important;
+    color: var(--color-text);
+}
+
+.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);
+}
+
+.gr-block.gr-box {
+    border: none !important;
+}
+
+.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;
+}
+
+.tabs > .tab-nav > button.selected {
+    background: var(--bg-card) !important;
+    color: white !important;
+}
+
+.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;
+}
+.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;
+    background: var(--bg-button-primary-hover) !important;
+}
+.gr-button.submit-btn:hover {
+    background: var(--bg-button-primary-hover) !important;
+}
+.gr-button:active {
+    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;
+}
+.canvas-output:hover {
+    translate: -3px -3px;
+    box-shadow: 9px 9px 0 var(--color-border);
+}
+.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 */
+}
+
+textarea, input[type="text"], input[type="file"] {
+    width: 100%;
+    padding: 10px;
+    border: 3px solid var(--color-border) !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;
+}
+
+.gr-accordion {
+    border: 3px solid var(--color-border) !important;
+    background: rgba(255, 255, 255, 0.3) !important;
+}
+
+.gr-image, .gr-video {
+    border: 3px solid var(--color-border) !important;
+    min-height: 290px;
+}
 """
 
-with gr.Blocks(css=css, theme="Respair/Shiki@9.1.0") as demo:
+with gr.Blocks(css=css) as demo:
     pdf_state = gr.State(value=get_initial_pdf_state())
     gr.Markdown("# **Qwen3-VL-Processor**")
     with gr.Row():
@@ -286,10 +422,9 @@ with gr.Blocks(css=css, theme="Respair/Shiki@9.1.0") as demo:
                         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)
+                            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>')
@@ -305,7 +440,7 @@ with gr.Blocks(css=css, theme="Respair/Shiki@9.1.0") as demo:
         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)
+                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)")
 
@@ -342,4 +477,4 @@ with gr.Blocks(css=css, theme="Respair/Shiki@9.1.0") as demo:
     )
 
 if __name__ == "__main__":
-    demo.queue(max_size=50).launch(mcp_server=True, ssr_mode=False, show_error=True)
+    demo.queue(max_size=50).launch(ssr_mode=False, show_error=True)