change ui

app.py

@@ -43,14 +43,14 @@ class OCRUI:
             except Exception as e:
                 return {"error": str(e)}
 
-    def ocr_process(self, image, task, preprocess_method):
+    def ocr_process(self, image, preprocess_method):
         if image is None:
-            return "Please upload an image", "No image provided"
+            return None, "Please upload an image"
 
         # Preprocess image
         processed_img = self.process_image(image, preprocess_method)
         if processed_img is None:
-            return "Image processing failed", "Processing error"
+            return None, "Image processing failed"
 
         # Prepare image for API
         encode_params = [cv2.IMWRITE_JPEG_QUALITY, 50]
@@ -60,13 +60,16 @@ class OCRUI:
         result = asyncio.run(self.send_to_api(img_bytes.tobytes()))
         
         if result is None or "error" in result:
-            return "API call failed", "Error calling OCR service"
+            return None, "API call failed"
             
-        # Format results
-        text_output = f"Task: {task}\nResults:\n{str(result)}"
-        html_output = f"<pre>{text_output}</pre>"
-        
-        return text_output, html_output
+        return result, None  # Return raw JSON for gradio.JSON component
+    
+    
+    def preview_process(self, image, method):
+        """Preview processed image without OCR"""
+        if image is None:
+            return None
+        return self.process_image(image, method)
 
 def create_ui():
     ui = OCRUI()
@@ -76,27 +79,48 @@ def create_ui():
         
         with gr.Row():
             with gr.Column():
-                image_input = gr.Image(type="numpy", label="Input Image")
+                image_input = gr.Image(
+                    type="numpy",
+                    label="Input Image",
+                    height=200,  # Smaller initial height
+                    show_download_button=False,
+                    interactive=True,
+                    container=True,
+                )
                 preprocess_dropdown = gr.Dropdown(
                     choices=["Original", "Fourier", "Morphological", "Adaptive", "Enhanced"],
                     label="Preprocessing Method",
                     value="Original"
                 )
-                task_dropdown = gr.Dropdown(
-                    choices=["Plain OCR", "Format OCR", "Box OCR"],
-                    label="OCR Task",
-                    value="Plain OCR"
-                )
                 process_btn = gr.Button("Process Image")
-                
+
             with gr.Column():
-                text_output = gr.Textbox(label="OCR Results")
-                html_output = gr.HTML(label="Formatted Results")
+                preview_output = gr.Image(
+                    type="numpy",
+                    label="Processed Preview",
+                    height=200,
+                    show_download_button=False,
+                    interactive=False,
+                )
+                json_output = gr.JSON(label="OCR Results")  # Replace text_output
+                status_output = gr.Text(label="Status")     # For error messages
+
+        # Add preview update on image or method change
+        image_input.change(
+            fn=ui.preview_process,
+            inputs=[image_input, preprocess_dropdown],
+            outputs=preview_output
+        )
+        preprocess_dropdown.change(
+            fn=ui.preview_process,
+            inputs=[image_input, preprocess_dropdown],
+            outputs=preview_output
+        )
 
         process_btn.click(
             fn=ui.ocr_process,
-            inputs=[image_input, task_dropdown, preprocess_dropdown],
-            outputs=[text_output, html_output]
+            inputs=[image_input, preprocess_dropdown],
+            outputs=[json_output, status_output]
         )
     
     return demo