Update app.py

app.py

@@ -59,198 +59,119 @@ def load_image_from_file(file_path):
     else:
         raise FileNotFoundError(f"Image file not found: {file_path}")
 # Custom CSS
+# Custom CSS
 custom_css = """
 <style>
     body {
-        background: linear-gradient(135deg, #1a1c2c, #4a4e69, #9a8c98);
         font-family: 'Arial', sans-serif;
-        color: #f2e9e4;
+        background-color: #f0f3f7;
         margin: 0;
         padding: 0;
-        min-height: 100vh;
-    }
-    #app-header {
-        text-align: center;
-        background: rgba(255, 255, 255, 0.1);
-        padding: 30px;
-        border-radius: 20px;
-        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
-        position: relative;
-        overflow: hidden;
-        margin: 20px auto;
-        max-width: 800px;
     }
-    #app-header::before {
-        content: "";
-        position: absolute;
-        top: -50%;
-        left: -50%;
-        width: 200%;
-        height: 200%;
-        background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
-        animation: shimmer 15s infinite linear;
+    .container {
+        max-width: 1200px;
+        margin: 0 auto;
+        padding: 20px;
     }
-    @keyframes shimmer {
-        0% { transform: rotate(0deg); }
-        100% { transform: rotate(360deg); }
+    .header {
+        background-color: #2c3e50;
+        color: white;
+        padding: 20px 0;
+        text-align: center;
     }
-    #app-header h1 {
-        color: #f2e9e4;
+    .header h1 {
+        margin: 0;
         font-size: 2.5em;
-        margin-bottom: 15px;
-        text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
     }
-    #app-header p {
-        font-size: 1.2em;
-        color: #c9ada7;
-    }
-    .concept-container {
+    .main-content {
         display: flex;
-        justify-content: center;
-        gap: 20px;
+        justify-content: space-between;
         margin-top: 30px;
-        flex-wrap: wrap;
-    }
-    .concept {
-        position: relative;
-        transition: transform 0.3s, box-shadow 0.3s;
-        border-radius: 15px;
-        overflow: hidden;
-        background: rgba(255, 255, 255, 0.1);
-        box-shadow: 0 5px 15px rgba(0,0,0,0.2);
-        width: 150px;
-        height: 150px;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-    }
-    .concept:hover {
-        transform: translateY(-10px) rotate(3deg);
-        box-shadow: 0 15px 30px rgba(0,0,0,0.4);
     }
-    .concept-emoji {
-        font-size: 60px;
-        margin-bottom: 10px;
+    .input-section, .output-section {
+        width: 48%;
+        background-color: white;
+        border-radius: 8px;
+        padding: 20px;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     }
-    .concept-description {
-        background-color: rgba(110, 72, 170, 0.8);
+    .gr-button {
+        background-color: #27ae60;
         color: white;
-        padding: 10px;
-        font-size: 0.9em;
-        text-align: center;
-        width: 100%;
-        position: absolute;
-        bottom: 0;
-    }
-    .artifact {
-        position: absolute;
-        background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
-        border-radius: 50%;
-        opacity: 0.5;
-        pointer-events: none;
-    }
-    .artifact.large {
-        width: 400px;
-        height: 400px;
-        top: -100px;
-        left: -200px;
-        animation: float 20s infinite ease-in-out;
-    }
-    .artifact.medium {
-        width: 300px;
-        height: 300px;
-        bottom: -150px;
-        right: -150px;
-        animation: float 15s infinite ease-in-out reverse;
-    }
-    .artifact.small {
-        width: 150px;
-        height: 150px;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        animation: pulse 5s infinite alternate;
-    }
-    @keyframes float {
-        0%, 100% { transform: translateY(0) rotate(0deg); }
-        50% { transform: translateY(-20px) rotate(10deg); }
+        border: none;
+        padding: 10px 20px;
+        border-radius: 5px;
+        cursor: pointer;
+        transition: background-color 0.3s;
     }
-    @keyframes pulse {
-        0% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
-        100% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.8; }
-    }
-    /* Gradio component styling */
-    .gr-box {
-        background-color: rgba(255, 255, 255, 0.1) !important;
-        border: 1px solid rgba(255, 255, 255, 0.2) !important;
+    .gr-button:hover {
+        background-color: #2ecc71;
     }
-    .gr-input, .gr-button {
-        background-color: rgba(255, 255, 255, 0.1) !important;
-        color: #f2e9e4 !important;
-        border: 1px solid rgba(255, 255, 255, 0.2) !important;
+    .examples-section {
+        margin-top: 30px;
+        background-color: white;
+        border-radius: 8px;
+        padding: 20px;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     }
-    .gr-button:hover {
-        background-color: rgba(255, 255, 255, 0.2) !important;
+    .examples-section h3 {
+        margin-top: 0;
+        color: #2c3e50;
     }
-    .gr-form {
-        background-color: transparent !important;
+    .footer {
+        text-align: center;
+        margin-top: 30px;
+        color: #7f8c8d;
     }
 </style>
 """
 
 # Custom HTML
 custom_html = """
-<div id="app-header">
-    <div class="artifact large"></div>
-    <div class="artifact medium"></div>
-    <div class="artifact small"></div>
-    <h1>Visual Math Problem Solver</h1>
-    <p>Upload an image of a math problem, and I'll try to solve it step by step!</p>
-    <div class="concept-container">
-        <div class="concept">
-            <div class="concept-emoji">🧮</div>
-            <div class="concept-description">Problem Solving</div>
-        </div>
-        <div class="concept">
-            <div class="concept-emoji">📷</div>
-            <div class="concept-description">Image Recognition</div>
-        </div>
-        <div class="concept">
-            <div class="concept-emoji">🤖</div>
-            <div class="concept-description">AI-Powered</div>
+<div class="container">
+    <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>
+    <div class="main-content">
+        <div class="input-section">
+            <h2>Upload Your Math Problem</h2>
+            {input_image}
+            {submit_btn}
         </div>
-        <div class="concept">
-            <div class="concept-emoji">📝</div>
-            <div class="concept-description">Step-by-Step</div>
+        <div class="output-section">
+            <h2>Solution</h2>
+            {output_text}
         </div>
     </div>
+    <div class="examples-section">
+        <h3>Try These Examples</h3>
+        {examples}
+    </div>
+    <div class="footer">
+        <p>Powered by Gradio and AI - Created for educational purposes</p>
+    </div>
 </div>
 """
 
-
 # Create the Gradio interface
 with gr.Blocks(css=custom_css) as iface:
-    gr.HTML(custom_html)
-    with gr.Row():
-        with gr.Column(scale=1):
-            input_image = gr.Image(type="pil", label="Upload Math Problem Image")
-            submit_btn = gr.Button("Solve Problem")
-        with gr.Column(scale=1):
-            output_text = gr.Textbox(label="Solution", lines=10)
-    
+    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,
+        )
+
     submit_btn.click(fn=solve_math_problem, inputs=input_image, outputs=output_text)
-    
-    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,
-    )
 
 # Launch the app
 iface.launch()