app.py

import gradio as gr
import random

questions = [
    {"image": "images/red_circle.png", "sentence": "This is a red circle.", "answer": True},
    {"image": "images/red_circle.png", "sentence": "This is a blue square.", "answer": False},
    {"image": "images/blue_square.png", "sentence": "This is a blue square.", "answer": True},
    {"image": "images/blue_square.png", "sentence": "This is a yellow star.", "answer": False},
    {"image": "images/green_triangle.png", "sentence": "This is a green triangle.", "answer": True},
    {"image": "images/green_triangle.png", "sentence": "This is a red circle.", "answer": False},
    {"image": "images/yellow_star.png", "sentence": "This is a yellow star.", "answer": True},
    {"image": "images/yellow_star.png", "sentence": "This is a green triangle.", "answer": False},
    {"image": "images/red_circle.png", "sentence": "This is a red square.", "answer": False},
    {"image": "images/blue_square.png", "sentence": "This is a blue circle.", "answer": False},
]

score = {"correct": 0, "wrong": 0, "index": 0}

def check_answer(user_answer, correct_answer):
    if score["index"] >= len(questions):
        return "", None, "", "🎉 Game over!", score["correct"], score["wrong"]

    is_correct = str(user_answer) == correct_answer
    if is_correct:
        feedback = "✅ Correct!"
        score["correct"] += 1
    else:
        feedback = "❌ Wrong!"
        score["wrong"] += 1

    score["index"] += 1

    if score["index"] >= len(questions):
        feedback += f" 🎉 Game over! Final score: {score['correct']} correct / {score['wrong']} wrong"
        return "", None, "", feedback, score["correct"], score["wrong"]

    next_q = questions[score["index"]]
    return next_q["sentence"], next_q["image"], str(next_q["answer"]), feedback, score["correct"], score["wrong"]

def reset_game():
    score["correct"] = 0
    score["wrong"] = 0
    score["index"] = 0
    random.shuffle(questions)
    q = questions[0]
    return q["sentence"], q["image"], str(q["answer"]), "", 0, 0

with gr.Blocks() as demo:
    gr.Markdown("## 🎨 True or False Game – Visual Feedback Only")
    sentence = gr.Textbox(label="Sentence", interactive=False)
    image = gr.Image(type="filepath", label="Image")
    correct_answer = gr.Textbox(visible=False)

    with gr.Row():
        btn_true = gr.Button("✅ True")
        btn_false = gr.Button("❌ False")

    result = gr.Textbox(label="Feedback", interactive=False, elem_classes=["feedback-box"])
    score_correct = gr.Number(label="Correct", value=0, interactive=False)
    score_wrong = gr.Number(label="Wrong", value=0, interactive=False)

    btn_true.click(fn=lambda x: check_answer(True, x), inputs=correct_answer,
                   outputs=[sentence, image, correct_answer, result, score_correct, score_wrong])
    btn_false.click(fn=lambda x: check_answer(False, x), inputs=correct_answer,
                    outputs=[sentence, image, correct_answer, result, score_correct, score_wrong])

    demo.load(fn=reset_game,
              outputs=[sentence, image, correct_answer, result, score_correct, score_wrong])

    demo.css = ".feedback-box {font-size: 24px; font-weight: bold; text-align: center; height: 60px;}"
demo.launch()