Update app.py

app.py

@@ -27,7 +27,8 @@ def process_image(image, temperature):
     Send image to vLLM endpoint and stream the response.
     """
     if image is None:
-        return "Please upload an image first."
+        yield "Please upload an image first.", ""
+        return
     
     # Convert image to base64
     b64_image = image_to_base64(image)
@@ -75,12 +76,12 @@ def process_image(image, temperature):
                         content = delta.get('content', '')
                         if content:
                             accumulated_response += content
-                            yield accumulated_response
+                            yield accumulated_response, accumulated_response
                 except json.JSONDecodeError:
                     continue
                     
     except Exception as e:
-        yield f"Error: {str(e)}"
+        yield f"Error: {str(e)}", f"Error: {str(e)}"
 
 
 # Build the Gradio Interface
@@ -98,11 +99,12 @@ with gr.Blocks(title="📖 Image OCR", theme=gr.themes.Soft()) as demo:
     )
     
     with gr.Row():
-        with gr.Column(scale=1):
+        with gr.Column():
             image_input = gr.Image(
                 type="pil",
                 label="🖼️ Upload Image",
-                sources=["upload", "clipboard"]
+                sources=["upload", "clipboard"],
+                height=400
             )
             temperature = gr.Slider(
                 minimum=0.1,
@@ -114,23 +116,25 @@ with gr.Blocks(title="📖 Image OCR", theme=gr.themes.Soft()) as demo:
             submit_btn = gr.Button("Extract Text", variant="primary")
             clear_btn = gr.Button("Clear", variant="secondary")
         
-        with gr.Column(scale=2):
+        with gr.Column():
             output_text = gr.Markdown(
-                label="📄 Extracted Text",
-                value="<div style='min-height: 400px; padding: 10px; border: 1px solid #e0e0e0; border-radius: 4px; background-color: #f9f9f9;'><em>Extracted text will appear here...</em></div>"
+                label="📄 Extracted Text (Rendered)",
+                value="<div style='min-height: 400px; padding: 10px; border: 1px solid #e0e0e0; border-radius: 4px; background-color: #f9f9f9;'><em>Extracted text will appear here...</em></div>",
+                height=500
             )
     
     with gr.Row():
-        raw_output = gr.Textbox(
-            label="Raw Output",
-            placeholder="Raw text will appear here...",
-            lines=10,
-            show_copy_button=True
-        )
+        with gr.Column():
+            raw_output = gr.Textbox(
+                label="Raw Markdown Output",
+                placeholder="Raw text will appear here...",
+                lines=15,
+                show_copy_button=True
+            )
     
     # Event handlers
     submit_btn.click(
-        fn=lambda img, temp: (process_image(img, temp), process_image(img, temp)),
+        fn=process_image,
         inputs=[image_input, temperature],
         outputs=[output_text, raw_output]
     )