Update app.py

app.py

@@ -156,20 +156,40 @@ custom_html = """
 
 # Create the Gradio interface
 with gr.Blocks(css=custom_css) as iface:
-    with gr.HTML(custom_html):
-        input_image = gr.Image(type="pil", label="Upload Math Problem Image")
-        submit_btn = gr.Button("Solve Problem", elem_classes=["gr-button"])
-        output_text = gr.Textbox(label="Step-by-step Solution", lines=10)
-        examples = gr.Examples(
-            examples=[
-                os.path.join(os.path.dirname(__file__), "eqn1.png"),
-                os.path.join(os.path.dirname(__file__), "eqn2.png")
-            ],
-            inputs=input_image,
-            outputs=output_text,
-            fn=solve_math_problem,
-            cache_examples=True,
-        )
+    gr.HTML("""
+        <div class="header">
+            <h1>AI Math Equation Solver</h1>
+            <p>Upload an image of a math problem, and our AI will solve it step by step!</p>
+        </div>
+    """)
+    
+    with gr.Row(equal_height=True):
+        with gr.Column():
+            gr.HTML("<h2>Upload Your Math Problem</h2>")
+            input_image = gr.Image(type="pil", label="Upload Math Problem Image")
+            submit_btn = gr.Button("Solve Problem", elem_classes=["gr-button"])
+        
+        with gr.Column():
+            gr.HTML("<h2>Solution</h2>")
+            output_text = gr.Textbox(label="Step-by-step Solution", lines=10)
+    
+    gr.HTML("<h3>Try These Examples</h3>")
+    examples = gr.Examples(
+        examples=[
+            os.path.join(os.path.dirname(__file__), "eqn1.png"),
+            os.path.join(os.path.dirname(__file__), "eqn2.png")
+        ],
+        inputs=input_image,
+        outputs=output_text,
+        fn=solve_math_problem,
+        cache_examples=True,
+    )
+    
+    gr.HTML("""
+        <div class="footer">
+            <p>Powered by Gradio and AI - Created for educational purposes</p>
+        </div>
+    """)
 
     submit_btn.click(fn=solve_math_problem, inputs=input_image, outputs=output_text)