Update app.py

app.py

@@ -71,24 +71,103 @@ def process_answer(img, answer):
 
     return gr.update(visible=False, value=None)
 
-with gr.Blocks() as demo:
-    gr.Markdown(
-        """
-        # 🌔 moondream vl (new)
-        A tiny vision language model. [GitHub](https://github.com/vikhyat/moondream)
-        """
-    )
-    with gr.Row():
-        prompt = gr.Textbox(label="Input", value="Describe this image.", scale=4)
-        submit = gr.Button("Submit")
-    with gr.Row():
-        img = gr.Image(type="pil", label="Upload an Image")
-        with gr.Column():
-            output = gr.Markdown(label="Response")
-            ann = gr.Image(visible=False, label="Annotated Image")
-
-    submit.click(answer_question, [img, prompt], output)
-    prompt.submit(answer_question, [img, prompt], output)
-    output.change(process_answer, [img, output], ann, show_progress=False)
+custom_css = """
+.container {
+    max-width: 900px;
+    margin: auto;
+    padding: 20px;
+}
+
+.header {
+    text-align: center;
+    margin-bottom: 2rem;
+}
+
+.github-link {
+    display: inline-block;
+    padding: 8px 16px;
+    background-color: #24292e;
+    color: white;
+    text-decoration: none;
+    border-radius: 6px;
+    margin-top: 10px;
+}
+
+.github-link:hover {
+    background-color: #2f363d;
+}
+
+.input-section {
+    margin: 20px 0;
+}
+
+.response-section {
+    margin-top: 20px;
+    padding: 20px;
+    border-radius: 8px;
+    background-color: #f8f9fa;
+}
+"""
+
+with gr.Blocks(css=custom_css) as demo:
+    with gr.Column(elem_classes="container"):
+        gr.Markdown(
+            """
+            <div class="header">
+                # 🌔 Moondream VL
+                ### A Tiny Vision Language Model
+                <a href="https://github.com/vikhyat/moondream" class="github-link" target="_blank">
+                    📦 GitHub Repository
+                </a>
+            </div>
+            """,
+            elem_classes="header"
+        )
+        
+        with gr.Column(elem_classes="input-section"):
+            img = gr.Image(
+                type="pil",
+                label="Upload an Image",
+                elem_id="image-upload",
+                height=400
+            )
+            
+            with gr.Row():
+                prompt = gr.Textbox(
+                    label="Your Question",
+                    placeholder="Ask something about the image...",
+                    value="Describe this image.",
+                    scale=4
+                )
+                submit = gr.Button(
+                    "✨ Analyze",
+                    variant="primary",
+                    scale=1
+                )
+
+        with gr.Column(elem_classes="response-section"):
+            output = gr.Markdown(label="AI Response")
+            ann = gr.Image(
+                visible=False,
+                label="Annotated Image"
+            )
+
+        # Event handlers
+        submit.click(
+            answer_question,
+            inputs=[img, prompt],
+            outputs=output
+        )
+        prompt.submit(
+            answer_question,
+            inputs=[img, prompt],
+            outputs=output
+        )
+        output.change(
+            process_answer,
+            inputs=[img, output],
+            outputs=ann,
+            show_progress=False
+        )
 
 demo.queue().launch()