Update app.py

app.py

@@ -44,47 +44,89 @@ def gradio_interface(question, correct_answer):
         "Majority answer": final_answer
     }
 
-# Custom CSS for styling
+# Custom CSS for enhanced design
 custom_css = """
     body {
-        background-color: #f4f7fb;
-        font-family: 'Roboto', sans-serif;
+        background-color: #fafafa;
+        font-family: 'Open Sans', sans-serif;
     }
     .gradio-container {
+        background-color: #ffffff;
+        border: 3px solid #007acc;
         border-radius: 15px;
-        border: 2px solid #e0e4e7;
         padding: 20px;
-        box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
-        background-color: white;
-        max-width: 700px;
-        margin: 0 auto;
+        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
+        max-width: 800px;
+        margin: 50px auto;
     }
-    h1, h2, p {
+    h1 {
+        font-family: 'Poppins', sans-serif;
+        color: #007acc;
+        font-weight: bold;
+        font-size: 32px;
         text-align: center;
+        margin-bottom: 20px;
+    }
+    p {
+        font-family: 'Roboto', sans-serif;
+        font-size: 18px;
         color: #333;
+        text-align: center;
+        margin-bottom: 15px;
     }
     input, textarea {
-        border-radius: 8px;
-        border: 1px solid #ccc;
-        padding: 10px;
+        font-family: 'Montserrat', sans-serif;
         font-size: 16px;
+        padding: 10px;
+        border: 2px solid #007acc;
+        border-radius: 10px;
+        background-color: #f1f8ff;
+        margin-bottom: 15px;
+    }
+    textarea {
+        min-height: 150px;
     }
     .gr-button {
-        background-color: #4caf50;
+        background-color: #007acc;
         color: white;
-        border-radius: 8px;
+        border-radius: 10px;
+        font-size: 18px;
+        font-weight: bold;
         padding: 10px 20px;
-        font-size: 16px;
-        transition: background-color 0.3s;
+        font-family: 'Montserrat', sans-serif;
+        transition: background-color 0.3s ease;
     }
     .gr-button:hover {
-        background-color: #45a049;
+        background-color: #005f99;
     }
     .gr-output {
-        background-color: #f1f1f1;
-        border-radius: 8px;
+        background-color: #e0f7fa;
+        border: 2px solid #007acc;
+        border-radius: 10px;
         padding: 15px;
-        font-size: 14px;
+        font-size: 16px;
+        font-family: 'Roboto', sans-serif;
+        font-weight: bold;
+        color: #00796b;
+    }
+    label {
+        font-family: 'Poppins', sans-serif;
+        font-size: 20px;
+        color: #007acc;
+        font-weight: bold;
+        margin-bottom: 5px;
+        display: inline-block;
+    }
+    #math_question, #correct_answer {
+        background-color: #e6f2ff;
+        color: #333;
+        border-radius: 8px;
+        padding: 12px;
+    }
+    #results {
+        font-family: 'Courier New', Courier, monospace;
+        background-color: #f3f4f6;
+        color: #005f99;
     }
 """
 
@@ -92,13 +134,13 @@ custom_css = """
 interface = gr.Interface(
     fn=gradio_interface,
     inputs=[
-        gr.Textbox(label="Math Question", placeholder="Enter your math question here...", elem_id="math_question"),
-        gr.Textbox(label="Correct Answer", placeholder="Enter the correct answer here...", elem_id="correct_answer"),
+        gr.Textbox(label="🧠 Math Question", placeholder="Enter your math question here...", elem_id="math_question"),
+        gr.Textbox(label="✅ Correct Answer", placeholder="Enter the correct answer here...", elem_id="correct_answer"),
     ],
     outputs=[
-        gr.JSON(label="Results", elem_id="results"),  # Display the results in a JSON format
+        gr.JSON(label="📊 Results", elem_id="results"),  # Display the results in a JSON format
     ],
-    title="Math Question Solver",
+    title="🔢 Math Question Solver",
     description="Enter a math question to get the model prediction and see all generated answers.",
     css=custom_css  # Apply custom CSS
 )