update

app.py

@@ -223,7 +223,7 @@ custom_css = """
 }
 """
 
-# Create the Gradio interface
+# Create the Gradio interface with proper component initialization
 with gr.Blocks(
     theme=gr.themes.Monochrome(
         primary_hue="indigo",
@@ -233,20 +233,20 @@ with gr.Blocks(
     css=custom_css
 ) as demo:
     
-    # Define these variables first so they can be used by the example loading function
+    # Define states (invisible components to store values)
     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"):
+    # Main container (using Column with elem_classes instead of Box)
+    with gr.Column(elem_classes="main-container"):
         # Header
-        with gr.Box(elem_classes="header"):
+        with gr.Column(elem_classes="header"):
             gr.Markdown(
                 """
                 # TinyV - Answer Verification Tool
                 
-                Verify if model-generated answers are correct compared to ground truth.
+                Verify if model-generated answers are semantically correct compared to ground truth, even with formatting differences
                 """
             )
         
@@ -254,13 +254,14 @@ with gr.Blocks(
         with gr.Row(equal_height=True):
             # Left column - Inputs
             with gr.Column(scale=3):
-                with gr.Box(elem_classes="panel"):
+                # Using Column as a panel
+                with gr.Column(elem_classes="panel"):
                     gr.Markdown("### Input", elem_classes="label")
                     
                     question = gr.Textbox(
                         lines=3, 
                         label="Question", 
-                        placeholder="Enter the problem or question here...",
+                        placeholder="Enter the mathematical problem or question here...",
                         elem_classes="input-field"
                     )
                     
@@ -285,7 +286,7 @@ with gr.Blocks(
             
             # Right column - Result
             with gr.Column(scale=2):
-                with gr.Box(elem_classes="panel"):
+                with gr.Column(elem_classes="panel"):
                     gr.Markdown("### Verification Result", elem_classes="label")
                     result = gr.Textbox(
                         placeholder="The verification result will appear here...", 
@@ -295,26 +296,27 @@ with gr.Blocks(
         
         # Examples section
         gr.Markdown("### Examples", elem_classes="label")
-        with gr.Box(elem_classes="examples-container"):
-            for i, ex in enumerate(EXAMPLES):
-                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]
-                )
-                # Also run verification when example is loaded
-                btn.click(
-                    fn=verify_answer,
-                    inputs=[question, ground_truth, model_answer, temperature, top_p, max_tokens],
-                    outputs=result
-                )
+        with gr.Column(elem_classes="examples-container"):
+            with gr.Row():
+                for i, ex in enumerate(EXAMPLES):
+                    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]
+                    )
+                    # Also run verification when example is loaded
+                    btn.click(
+                        fn=verify_answer,
+                        inputs=[question, ground_truth, model_answer, temperature, top_p, max_tokens],
+                        outputs=result
+                    )
         
         # 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)")
-                max_tokens_slider = gr.Slider(1, 128, value=1, step=1, label="Max Tokens")
+                max_tokens_slider = gr.Slider(1, 128, value=2, step=1, label="Max Tokens")
                 
                 # Connect sliders to state values
                 temp_slider.change(lambda x: x, inputs=[temp_slider], outputs=[temperature])
@@ -335,7 +337,7 @@ with gr.Blocks(
                     model_answer="Paris is the capital of France.",
                     temperature=0.3,
                     top_p=0.95,
-                    max_tokens=1,
+                    max_tokens=2,
                     api_name="/verify_answer"
                 )
                 print(result)
@@ -346,7 +348,7 @@ with gr.Blocks(
         # Footer
         gr.Markdown(
             """
-            Powered by TinyV-1.5B model. This tool verifies semantic equivalence between answers.
+            Powered by TinyV-1.5B model. This tool verifies semantic equivalence between answers, allowing for different formatting, ordering, notation, and phrasing.
             """,
             elem_classes="footer"
         )