app.py

import gradio as gr
from huggingface_hub import InferenceClient
import time

# Initialize the client with your model
client = InferenceClient("zhangchenxu/TinyV-1.5B")

# The prompt template for the LLM verifier
LV_PROMPT = """
You are an AI tasked with identifying false negatives in answer verification. A false negative occurs when a model's answer is essentially correct but is marked as incorrect due to minor discrepancies or formatting issues. Your job is to analyze the given question, ground truth answer, and model answer to determine if the model's answer is actually correct despite appearing different from the ground truth.

<question>{question}</question>

<ground_truth_answer>{ground_truth}</ground_truth_answer>

<model_answer>{model_answer}</model_answer>

Return "True" if the model's answer is correct, otherwise return "False".
"""

# Define our example sets
EXAMPLES = [
    {
        "name": "Order-Insensitive",
        "question": "Determine all real values of $x$ for which $(x+8)^{4}=(2 x+16)^{2}$.",
        "ground_truth": "-6,-8,-10",
        "model_answer": "-10, -8, -6",
        "temp": 0.3,
        "top_p": 0.95,
        "tokens": 1
    },
    {
        "name": "Latex Expression",
        "question": "A bag contains 3 green balls, 4 red balls, and no other balls. Victor removes balls randomly from the bag, one at a time, and places them on a table. Each ball in the bag is equally likely to be chosen each time that he removes a ball. He stops removing balls when there are two balls of the same colour on the table. What is the probability that, when he stops, there is at least 1 red ball and at least 1 green ball on the table?",
        "ground_truth": "$\\frac{4}{7}$",
        "model_answer": "4/7",
        "temp": 0.3,
        "top_p": 0.95,
        "tokens": 1
    },
    {
        "name": "Variable Labeling",
        "question": "If $T=x^{2}+\\frac{1}{x^{2}}$, determine the values of $b$ and $c$ so that $x^{6}+\\frac{1}{x^{6}}=T^{3}+b T+c$ for all non-zero real numbers $x$.",
        "ground_truth": "-3,0",
        "model_answer": "b=-3, c=0",
        "temp": 0.3,
        "top_p": 0.95,
        "tokens": 1
    },
    {
        "name": "Paraphrase",
        "question": "Peter has 8 coins, of which he knows that 7 are genuine and weigh the same, while one is fake and differs in weight, though he does not know whether it is heavier or lighter. Peter has access to a balance scale, which shows which side is heavier but not by how much. For each weighing, Peter must pay Vasya one of his coins before the weighing. If Peter pays with a genuine coin, Vasya will provide an accurate result; if a fake coin is used, Vasya will provide a random result. Peter wants to determine 5 genuine coins and ensure that none of these genuine coins are given to Vasya. Can Peter guaranteedly achieve this?",
        "ground_truth": "Petya can guarantee finding 5 genuine coins.",
        "model_answer": "Yes, Peter can guarantee finding 5 genuine coins while ensuring that none of these genuine coins are paid to Vasya.",
        "temp": 0.3,
        "top_p": 0.95,
        "tokens": 1
    },
    {
        "name": "False Example",
        "question": "What is the tallest mountain in the world?",
        "ground_truth": "Mount Everest is the tallest mountain in the world.",
        "model_answer": "K2 is the tallest mountain on Earth.",
        "temp": 0.3,
        "top_p": 0.95,
        "tokens": 1
    }
]

# 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,
        ground_truth=ground_truth,
        model_answer=model_answer
    )
    
    # Prepare messages for the API
    messages = [{"role": "user", "content": prompt}]
    
    # Initialize response
    response_text = ""
    
    try:
        # Stream the response for better UX
        for message in client.chat_completion(
            messages,
            max_tokens=max_tokens,
            stream=True,
            temperature=temperature,
            top_p=top_p,
        ):
            token = message.choices[0].delta.content
            if token:
                response_text += token
                yield response_text
    except Exception as e:
        yield f"Error: {str(e)}"

# Function to load an example
def load_example(example_index):
    example = EXAMPLES[example_index]
    return (
        example["question"],
        example["ground_truth"],
        example["model_answer"],
        example["temp"],
        example["top_p"],
        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 proper component initialization
with gr.Blocks(
    theme=gr.themes.Monochrome(
        primary_hue="indigo",
        secondary_hue="blue",
        font=[gr.themes.GoogleFont("Inter"), "ui-sans-serif", "system-ui", "sans-serif"]
    ),
    css=custom_css
) as demo:
    
    # 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 (using Column with elem_classes instead of Box)
    with gr.Column(elem_classes="main-container"):
        # Header
        with gr.Column(elem_classes="header"):
            gr.Markdown(
                """
                # TinyV - Answer Verification Tool
                
                Verify if model-generated answers are semantically correct compared to ground truth, even with formatting differences
                """
            )
        
        # Main content area
        with gr.Row(equal_height=True):
            # Left column - Inputs
            with gr.Column(scale=3):
                # 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 mathematical 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
            with gr.Column(scale=2):
                with gr.Column(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("### Examples", elem_classes="label")
        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=2, step=1, label="Max Tokens")
                
                # Connect sliders to state values
                temp_slider.change(lambda x: x, inputs=[temp_slider], outputs=[temperature])
                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])
        
        # API usage in accordion
        with gr.Accordion("API Usage", open=False, elem_classes="accordions-container"):
            gr.Markdown(
                """
                ```python
                from gradio_client import Client
                
                client = Client("zhangchenxu/TinyV")
                result = client.predict(
                    question="What is the capital of France?",
                    ground_truth="The capital of France is Paris.",
                    model_answer="Paris is the capital of France.",
                    temperature=0.3,
                    top_p=0.95,
                    max_tokens=2,
                    api_name="/verify_answer"
                )
                print(result)
                ```
                """
            )
        
        # Footer
        gr.Markdown(
            """
            Powered by TinyV-1.5B model. This tool verifies semantic equivalence between answers, allowing for different formatting, ordering, notation, and phrasing.
            """,
            elem_classes="footer"
        )
    
    # Connect the interface to the verification function
    verify_btn.click(
        fn=verify_answer,
        inputs=[question, ground_truth, model_answer, temperature, top_p, max_tokens],
        outputs=result
    )

# Define the public API
demo.queue()

# Launch the app
if __name__ == "__main__":
    demo.launch()