import gradio as gr

def evaluate_guess(reasoning, correctness, confidence):
    # Placeholder function to process the input and return a response
    return "Your evaluation has been recorded!"



card = 'Evaluation Card:\nNewtonian Mechanics\n\nQuestion: A block is pushed across a frictionless surface. What is the net force acting on the block?\n\nReasoning: The block is moving at a constant velocity, so the net force must be zero.\n\nCorrectness: Correct\n\nConfidence: 8/10\n\nEvaluation Output: Your evaluation has been recorded!'

with gr.Blocks() as app:
    with gr.Row():
        with gr.Column(scale=1):
            evaluation_card_html = f"""
            <div style='overflow-y: scroll; height: 200px; border: 1px solid #ccc; padding: 8px;'>
            <h3>Student Evaluation</h3>
            <p>Grade: A+</p>
            <p>Card{card}</p>
            </div>
            """
            gr.HTML(value=evaluation_card_html)
        with gr.Column(scale=1):
            question = gr.Textbox(lines=2, placeholder="Question", interactive=False)
            reasoning = gr.Textbox(lines=5, placeholder="Your reasoning (optional)")
            correctness = gr.Radio(choices=["Correct", "Incorrect"], label="I believe the model will answer this question")
            confidence = gr.Slider(minimum=0, maximum=10, step=1, label="Confidence")
            output_text = gr.Text(label="Evaluation Output")  # Create an output text component
            submit_button = gr.Button("Submit")
    
    submit_button.click(evaluate_guess, inputs=[reasoning, correctness, confidence], outputs=output_text)  # Use the output component

app.launch()