update

app.py

@@ -69,6 +69,9 @@ EXAMPLES = [
 
 # Verification function
 def verify_answer(question, ground_truth, model_answer, temperature, top_p, max_tokens):
+    if not question or not ground_truth or not model_answer:
+        return "Please fill in all fields: Question, Ground Truth Answer, and Model Answer."
+    
     # Format the prompt with user inputs
     prompt = LV_PROMPT.format(
         question=question,
@@ -110,71 +113,191 @@ def load_example(example_index):
         example["tokens"]
     )
 
+# Custom CSS for better styling
+custom_css = """
+.gradio-container {
+    max-width: 1080px !important;
+    margin: auto !important;
+}
+
+.main-container {
+    background-color: #f9f9f9;
+    border-radius: 10px;
+    padding: 15px;
+    box-shadow: 0 0 5px rgba(0,0,0,0.1);
+}
+
+.header {
+    background: linear-gradient(90deg, #4776E6 0%, #8E54E9 100%);
+    color: white;
+    border-radius: 8px;
+    padding: 20px 30px;
+    margin-bottom: 20px;
+    text-align: center;
+}
+
+.header h1 {
+    font-size: 32px !important;
+    font-weight: 700 !important;
+    margin-bottom: 5px !important;
+}
+
+.header p {
+    font-size: 16px !important;
+    opacity: 0.9;
+}
+
+.example-btn {
+    min-width: 140px !important;
+    margin: 5px !important;
+    background-color: #f0f0f0 !important;
+    border: 1px solid #ddd !important;
+    transition: all 0.3s ease !important;
+}
+
+.example-btn:hover {
+    background-color: #e0e0e0 !important;
+    transform: translateY(-2px) !important;
+    box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
+}
+
+.verify-btn {
+    background: linear-gradient(90deg, #4776E6 0%, #8E54E9 100%) !important;
+    color: white !important;
+    padding: 12px 20px !important;
+    font-size: 16px !important;
+    font-weight: 600 !important;
+    border-radius: 8px !important;
+    transition: all 0.3s ease !important;
+    border: none !important;
+    width: 100% !important;
+    margin-top: 10px !important;
+}
+
+.verify-btn:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 4px 10px rgba(0,0,0,0.2) !important;
+}
+
+.panel {
+    background-color: white;
+    border-radius: 8px;
+    padding: 15px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+    margin-bottom: 15px;
+}
+
+.result-panel {
+    background-color: #f8f9fa;
+    border-left: 4px solid #4776E6;
+    padding: 15px;
+    border-radius: 8px;
+    min-height: 120px;
+}
+
+.label {
+    font-weight: 600;
+    margin-bottom: 5px;
+    color: #444;
+}
+
+.examples-container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    margin-top: 10px;
+    margin-bottom: 20px;
+}
+
+.footer {
+    text-align: center;
+    font-size: 12px;
+    color: #888;
+    margin-top: 20px;
+}
+
+/* Make the accordion look better */
+.accordions-container .label {
+    font-size: 14px !important;
+    font-weight: 600 !important;
+}
+"""
+
 # Create the Gradio interface
 with gr.Blocks(
-    theme=gr.themes.Soft(
-        primary_hue="blue",
+    theme=gr.themes.Monochrome(
+        primary_hue="indigo",
+        secondary_hue="blue",
         font=[gr.themes.GoogleFont("Inter"), "ui-sans-serif", "system-ui", "sans-serif"]
     ),
-    css="""
-    .container { max-width: 1000px; margin: auto; }
-    .example-btn { min-width: 140px; }
-    .title { text-align: center; margin-bottom: 1rem; }
-    .result-box { min-height: 100px; }
-    """
+    css=custom_css
 ) as demo:
-    # Header
-    with gr.Group(elem_classes="container"):
-        gr.Markdown(
-            """
-            # 🧠 TinyV - Answer Verification Tool
-            
-            This tool verifies if a model-generated answer is semantically correct compared to a ground truth answer,
-            even if there are minor differences in formatting or wording.
-            """, 
-            elem_classes="title"
-        )
-        
-        # Define these variables first so they can be used by the example loading function
-        temperature = gr.State(value=0.3)
-        top_p = gr.State(value=0.95)
-        max_tokens = gr.State(value=1)
+    
+    # Define these variables first so they can be used by the example loading function
+    temperature = gr.State(value=0.3)
+    top_p = gr.State(value=0.95)
+    max_tokens = gr.State(value=2)
+    
+    # Main container
+    with gr.Box(elem_classes="main-container"):
+        # Header
+        with gr.Box(elem_classes="header"):
+            gr.Markdown(
+                """
+                # TinyV - Answer Verification Tool
+                
+                Verify if model-generated answers are correct compared to ground truth.
+                """
+            )
         
-        # Main input area
+        # Main content area
         with gr.Row(equal_height=True):
             # Left column - Inputs
-            with gr.Column():
-                question = gr.Textbox(
-                    lines=3, 
-                    label="📘 Question", 
-                    placeholder="Enter the question here..."
-                )
-                ground_truth = gr.Textbox(
-                    lines=3, 
-                    label="✅ Ground Truth Answer", 
-                    placeholder="Enter the correct answer here..."
-                )
-                model_answer = gr.Textbox(
-                    lines=3, 
-                    label="🤖 Model Answer", 
-                    placeholder="Enter the answer to verify here..."
-                )
+            with gr.Column(scale=3):
+                with gr.Box(elem_classes="panel"):
+                    gr.Markdown("### Input", elem_classes="label")
+                    
+                    question = gr.Textbox(
+                        lines=3, 
+                        label="Question", 
+                        placeholder="Enter the problem or question here...",
+                        elem_classes="input-field"
+                    )
+                    
+                    with gr.Row():
+                        with gr.Column(scale=1):
+                            ground_truth = gr.Textbox(
+                                lines=3, 
+                                label="Ground Truth Answer", 
+                                placeholder="Enter the correct answer here...",
+                                elem_classes="input-field"
+                            )
+                            
+                        with gr.Column(scale=1):
+                            model_answer = gr.Textbox(
+                                lines=3, 
+                                label="Model Answer", 
+                                placeholder="Enter the answer to verify here...",
+                                elem_classes="input-field"
+                            )
+                    
+                    verify_btn = gr.Button("Verify Answer", elem_classes="verify-btn")
             
-            # Right column - Result and verification button
-            with gr.Column():
-                verify_btn = gr.Button("✅ Verify Answer", variant="primary", size="lg")
-                result = gr.Textbox(
-                    label="🧾 Verification Result", 
-                    placeholder="Result will appear here...", 
-                    lines=9,
-                    elem_classes="result-box"
-                )
+            # Right column - Result
+            with gr.Column(scale=2):
+                with gr.Box(elem_classes="panel"):
+                    gr.Markdown("### Verification Result", elem_classes="label")
+                    result = gr.Textbox(
+                        placeholder="The verification result will appear here...", 
+                        lines=10,
+                        elem_classes="result-panel"
+                    )
         
         # Examples section
-        gr.Markdown("### 🔍 Try Examples:")
-        with gr.Row() as example_row:
+        gr.Markdown("### Examples", elem_classes="label")
+        with gr.Box(elem_classes="examples-container"):
             for i, ex in enumerate(EXAMPLES):
-                btn = gr.Button(ex["name"], size="sm", elem_classes="example-btn")
+                btn = gr.Button(ex["name"], elem_classes="example-btn")
                 btn.click(
                     fn=lambda idx=i: load_example(idx),
                     outputs=[question, ground_truth, model_answer, temperature, top_p, max_tokens]
@@ -183,12 +306,11 @@ with gr.Blocks(
                 btn.click(
                     fn=verify_answer,
                     inputs=[question, ground_truth, model_answer, temperature, top_p, max_tokens],
-                    outputs=result,
-                    queue=False
+                    outputs=result
                 )
         
-        # Advanced Settings (hidden at the bottom)
-        with gr.Accordion("⚙️ Advanced Settings", open=False):
+        # Advanced Settings in accordion
+        with gr.Accordion("Advanced Settings", open=False, elem_classes="accordions-container"):
             with gr.Row():
                 temp_slider = gr.Slider(0, 1, value=0.3, step=0.1, label="Temperature")
                 top_p_slider = gr.Slider(0.1, 1.0, value=0.95, step=0.05, label="Top-p (nucleus sampling)")
@@ -199,22 +321,10 @@ with gr.Blocks(
                 top_p_slider.change(lambda x: x, inputs=[top_p_slider], outputs=[top_p])
                 max_tokens_slider.change(lambda x: x, inputs=[max_tokens_slider], outputs=[max_tokens])
         
-        # About section
-        with gr.Accordion("ℹ️ About This Tool", open=False):
+        # API usage in accordion
+        with gr.Accordion("API Usage", open=False, elem_classes="accordions-container"):
             gr.Markdown(
                 """
-                ### What This Tool Does
-                
-                This verification tool uses the TinyV-1.5B model to determine if answers are semantically equivalent,
-                even when they have different:
-                
-                - **Formatting** (LaTeX vs. plain text, spacing, etc.)
-                - **Ordering** (e.g., listing items in different orders)
-                - **Phrasing** (paraphrases with the same meaning)
-                - **Variable labeling** (with or without variable names)
-                
-                ### API Usage
-                
                 ```python
                 from gradio_client import Client
                 
@@ -225,13 +335,21 @@ with gr.Blocks(
                     model_answer="Paris is the capital of France.",
                     temperature=0.3,
                     top_p=0.95,
-                    max_tokens=2,
+                    max_tokens=1,
                     api_name="/verify_answer"
                 )
                 print(result)
                 ```
                 """
             )
+        
+        # Footer
+        gr.Markdown(
+            """
+            Powered by TinyV-1.5B model. This tool verifies semantic equivalence between answers.
+            """,
+            elem_classes="footer"
+        )
     
     # Connect the interface to the verification function
     verify_btn.click(