Update app.py

app.py

@@ -1,4 +1,3 @@
-
 import gradio as gr
 import ctranslate2
 from transformers import AutoTokenizer
@@ -29,8 +28,7 @@ def get_prediction(question):
 
 # Function to parse the prediction to extract the answer and steps
 def parse_prediction(prediction):
-    lines = prediction.strip().split('
-')
+    lines = prediction.strip().split('\n')
     answer = None
     steps = []
     for line in lines:
@@ -44,8 +42,7 @@ def parse_prediction(prediction):
         # If no "Answer:" found, assume last line is the answer
         answer = lines[-1].strip()
         steps = lines[:-1]
-    steps_text = '
-'.join(steps).strip()
+    steps_text = '\n'.join(steps).strip()
     return answer, steps_text
 
 # Function to perform majority voting and get steps
@@ -85,7 +82,93 @@ def gradio_interface(question, correct_answer):
     }
 
 # Custom CSS for enhanced design (unchanged)
-
+custom_css = """
+    body {
+        background-color: #fafafa;
+        font-family: 'Open Sans', sans-serif;
+    }
+    .gradio-container {
+        background-color: #ffffff;
+        border: 3px solid #007acc;
+        border-radius: 15px;
+        padding: 20px;
+        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
+        max-width: 800px;
+        margin: 50px auto;
+    }
+    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 {
+        font-family: 'Montserrat', sans-serif;
+        font-size: 16px;
+        padding: 10px;
+        border: 2px solid #007acc;
+        border-radius: 10px;
+        background-color: #f1f8ff;
+        margin-bottom: 15px;
+    }
+    #math_question, #correct_answer {
+        font-size: 20px;
+        font-family: 'Poppins', sans-serif;
+        font-weight: 500px;
+        color: #007acc;
+        margin-bottom: 5px;
+        display: inline-block;
+    }
+    
+    textarea {
+        min-height: 150px;
+    }
+    .gr-button-primary {
+        background-color: #007acc !important;
+        color: white !important;
+        border-radius: 10px !important;
+        font-size: 18px !important;
+        font-weight: bold !important;
+        padding: 10px 20px !important;
+        font-family: 'Montserrat', sans-serif !important;
+        transition: background-color 0.3s ease !important;
+    }
+    .gr-button-primary:hover {
+        background-color: #005f99 !important;
+    }
+    .gr-button-secondary {
+        background-color: #f44336 !important;
+        color: white !important;
+        border-radius: 10px !important;
+        font-size: 18px !important;
+        font-weight: bold !important;
+        padding: 10px 20px !important;
+        font-family: 'Montserrat', sans-serif !important;
+        transition: background-color 0.3s ease !important;
+    }
+    .gr-button-secondary:hover {
+        background-color: #c62828 !important;
+    }
+    .gr-output {
+        background-color: #e0f7fa;
+        border: 2px solid #007acc;
+        border-radius: 10px;
+        padding: 15px;
+        font-size: 16px;
+        font-family: 'Roboto', sans-serif;
+        font-weight: bold;
+        color: #00796b;
+    }
+"""
 
 # Gradio app setup
 interface = gr.Interface(
@@ -99,11 +182,8 @@ interface = gr.Interface(
     ],
     title="🔢 Math Question Solver",
     description="Enter a math question to get the model's majority-voted answer and steps to solve the problem.",
-  
+    css=custom_css  # Apply custom CSS
 )
 
 if __name__ == "__main__":
     interface.launch()
-
-
-