Update app.py

app.py

@@ -91,32 +91,69 @@ def infer(image):
     return Image.fromarray(annotated_img), result_text
 
 # ========== Gradio UI ==========
-custom_css = """
-body {
-    background-color: #e6f2ff;
-}
-.gradio-container {
-    border-radius: 12px;
-    padding: 20px;
-    border: 2px solid #007acc;
-}
-.gr-input, .gr-output {
-    border: 1px solid #007acc;
-    border-radius: 10px;
-}
-"""
-
-demo = gr.Interface(
-    fn=infer,
-    inputs=gr.Image(type="pil", label="Upload Image"),
-    outputs=[
-        gr.Image(type="pil", label="Annotated Image"),
-        gr.Textbox(label="Detected Text and Classification")
-    ],
-    title="Text Detection and Classification",
-    description="Application detects text from images and classify into Handwritten/Computerized Text",
-    theme="soft",
-    css=custom_css
-)
+with gr.Blocks(
+    title="Text Type Classifier",
+    css="""
+        body {
+            background-color: #C0C0C0 !important;
+        }
+        .outer-box {
+            border: 8px solid black;
+            border-radius: 16px;
+            padding: 24px;
+            background-color: white;
+        }
+        .gr-box {
+            border: 6px solid #0288d1 !important;
+            border-radius: 12px;
+            padding: 16px;
+            background-color: white;
+            box-shadow: 0px 2px 10px rgba(0,0,0,0.1);
+        }
+        .gr-button {
+            background-color: #0288d1 !important;
+            color: white !important;
+            font-weight: bold;
+            border-radius: 8px;
+            margin-top: 10px;
+        }
+        .gr-button:hover {
+            background-color: #01579b !important;
+        }
+    """
+) as demo:
+
+    with gr.Column(elem_classes=["outer-box"]):
+
+        gr.Markdown(
+            """
+            <div style="text-align: center;">
+                <h1><strong>Handwritten vs Computerized Text Classifier</strong></h1>
+            </div>
+            """,
+            elem_classes=["gr-box"]
+        )
+
+        with gr.Row():
+            with gr.Column():
+                image_input = gr.Image(label="Upload Image", type="numpy", elem_classes=["gr-box"])
+                submit_btn = gr.Button("Process Image", elem_classes=["gr-box", "gr-button"])
+                clear_btn = gr.Button("Clear", elem_classes=["gr-box", "gr-button"])
+
+            with gr.Column():
+                image_output = gr.Image(label="Annotated Output", type="numpy", elem_classes=["gr-box"])
+                text_output = gr.Textbox(label="Detected Results", lines=10, elem_classes=["gr-box"])
+
+        submit_btn.click(
+            fn=infer,
+            inputs=image_input,
+            outputs=[image_output, text_output]
+        )
+
+        clear_btn.click(
+            fn=lambda: (None, None, ""),
+            inputs=[],
+            outputs=[image_input, image_output, text_output]
+        )
 
 demo.launch()