| import json |
| import os |
| import random |
| import re |
| from typing import Any |
|
|
| import gradio as gr |
| from huggingface_hub import InferenceClient |
|
|
|
|
| MODEL_ID = os.getenv("HF_MODEL_ID", "meta-llama/Llama-3.1-8B-Instruct") |
| HF_TOKEN = os.getenv("HF_TOKEN") |
| TOTAL_ROUNDS = 10 |
| LETTERS = ["A", "B", "C", "D"] |
|
|
| SYSTEM_PROMPT = """You are the game master for "I See", a playful multiple-choice I Spy quiz. |
| Each round has one clue and four possible answers. Exactly one answer is correct. |
| Keep clues short, imaginative, and fair. Keep answers family-friendly and concrete.""" |
|
|
| FALLBACK_ROUNDS = [ |
| { |
| "clue": "I see something that's hollow inside", |
| "answer": "A tree with an empty trunk", |
| "options": [ |
| "A tree with an empty trunk", |
| "A mountain with a doorbell", |
| "A cloud with pockets", |
| "A river that forgot to flow", |
| ], |
| "explanation": "A hollow tree trunk is empty inside.", |
| }, |
| { |
| "clue": "I see something that tells time without saying a word", |
| "answer": "A clock on the wall", |
| "options": [ |
| "A quiet drum", |
| "A clock on the wall", |
| "A sleeping notebook", |
| "A candle in a cup", |
| ], |
| "explanation": "A clock shows time visually.", |
| }, |
| { |
| "clue": "I see something that carries rain above your head", |
| "answer": "An umbrella", |
| "options": [ |
| "A ladder", |
| "A suitcase", |
| "An umbrella", |
| "A mirror", |
| ], |
| "explanation": "An umbrella blocks rain overhead.", |
| }, |
| { |
| "clue": "I see something that opens with teeth but never bites", |
| "answer": "A zipper", |
| "options": [ |
| "A zipper", |
| "A spoon", |
| "A window", |
| "A shoelace", |
| ], |
| "explanation": "A zipper has teeth that join and separate.", |
| }, |
| { |
| "clue": "I see something that gets smaller every time it helps", |
| "answer": "A pencil", |
| "options": [ |
| "A chair", |
| "A pencil", |
| "A plate", |
| "A blanket", |
| ], |
| "explanation": "A pencil gets shorter as it is sharpened and used.", |
| }, |
| ] |
|
|
|
|
| def get_client() -> InferenceClient | None: |
| if not HF_TOKEN: |
| return None |
| return InferenceClient(model=MODEL_ID, token=HF_TOKEN) |
|
|
|
|
| def call_llama(messages: list[dict[str, str]], max_tokens: int = 1800) -> str: |
| client = get_client() |
| if not client: |
| raise RuntimeError("HF_TOKEN is not configured.") |
|
|
| response = client.chat_completion( |
| messages=messages, |
| max_tokens=max_tokens, |
| temperature=0.9, |
| top_p=0.92, |
| ) |
| return response.choices[0].message.content.strip() |
|
|
|
|
| def extract_json(text: str) -> dict[str, Any]: |
| match = re.search(r"\{.*\}", text, flags=re.DOTALL) |
| if not match: |
| raise ValueError("No JSON object found in model response.") |
| return json.loads(match.group(0)) |
|
|
|
|
| def clean_text(value: Any) -> str: |
| return re.sub(r"\s+", " ", str(value)).strip() |
|
|
|
|
| def fallback_round(round_number: int) -> dict[str, Any]: |
| data = dict(FALLBACK_ROUNDS[(round_number - 1) % len(FALLBACK_ROUNDS)]) |
| options = list(data["options"]) |
| random.shuffle(options) |
| data["options"] = options |
| return data |
|
|
|
|
| def validate_round(data: dict[str, Any]) -> dict[str, Any]: |
| clue = clean_text(data["clue"]) |
| answer = clean_text(data["answer"]) |
| options = [clean_text(option) for option in data["options"]] |
| explanation = clean_text(data.get("explanation", "")) |
|
|
| if len(options) != 4 or answer not in options: |
| raise ValueError("Round must have four options and include the answer.") |
|
|
| random.shuffle(options) |
| return { |
| "clue": clue, |
| "answer": answer, |
| "options": options, |
| "explanation": explanation or f"The answer is {answer}.", |
| } |
|
|
|
|
| def generate_game() -> list[dict[str, Any]]: |
| try: |
| model_text = call_llama( |
| [ |
| {"role": "system", "content": SYSTEM_PROMPT}, |
| { |
| "role": "user", |
| "content": ( |
| f"Create all {TOTAL_ROUNDS} rounds for one I See demo game. " |
| "Each round needs a short I Spy-style clue, four answer options, " |
| "one correct answer that appears exactly in options, and one short explanation. " |
| "Use varied everyday objects. Do not repeat correct answers. " |
| "Return only JSON with this exact shape: " |
| '{"rounds":[{"clue":"I see something that...","answer":"An umbrella",' |
| '"options":["An umbrella","A chair","A candle","A spoon"],' |
| '"explanation":"The umbrella keeps rain off you."}]}' |
| ), |
| }, |
| ] |
| ) |
| data = extract_json(model_text) |
| rounds = [validate_round(round_data) for round_data in data["rounds"][:TOTAL_ROUNDS]] |
| if len(rounds) != TOTAL_ROUNDS: |
| raise ValueError("Game must include exactly 10 rounds.") |
| return rounds |
| except Exception: |
| return [fallback_round(round_number) for round_number in range(1, TOTAL_ROUNDS + 1)] |
|
|
|
|
| def option_text(round_data: dict[str, Any], index: int) -> str: |
| option = round_data["options"][index] |
| return f"{LETTERS[index]}\n\n{option}" |
|
|
|
|
| def render_question(state: dict[str, Any] | None) -> tuple[str, str, str, str, str, str, str]: |
| if not state: |
| empty = "Start Game" |
| return "I See", "ROUND 0 / 10", "SCORE: 0", empty, empty, empty, empty |
|
|
| round_data = state["round"] |
| return ( |
| f'## I Spy...\n\n### "{round_data["clue"]}"', |
| f"ROUND {state['round_number']} / {TOTAL_ROUNDS}", |
| f"SCORE: {state['score']}", |
| option_text(round_data, 0), |
| option_text(round_data, 1), |
| option_text(round_data, 2), |
| option_text(round_data, 3), |
| ) |
|
|
|
|
| def start_game() -> tuple[dict[str, Any], str, str, str, str, str, str, str, str]: |
| rounds = generate_game() |
| state = { |
| "round_number": 1, |
| "score": 0, |
| "answered": False, |
| "rounds": rounds, |
| "round": rounds[0], |
| } |
| return state, *render_question(state), "", gr.update(visible=False) |
|
|
|
|
| def choose(index: int, state: dict[str, Any] | None) -> tuple[dict[str, Any] | None, str, str, Any]: |
| if not state: |
| return state, "Start the game first.", "SCORE: 0", gr.update(visible=False) |
|
|
| if state["answered"]: |
| return state, "You already answered this round. Hit Next Round.", f"SCORE: {state['score']}", gr.update(visible=True) |
|
|
| selected = state["round"]["options"][index] |
| answer = state["round"]["answer"] |
| correct = selected == answer |
| state["answered"] = True |
|
|
| if correct: |
| state["score"] += 1 |
| result = f"Correct. The answer is {answer}." |
| else: |
| result = f"Not quite. The answer is {answer}." |
|
|
| explanation = state["round"].get("explanation", "") |
| if explanation: |
| result = f"{result}\n\n{explanation}" |
|
|
| button_label = "Show Results" if state["round_number"] >= TOTAL_ROUNDS else "Next Round" |
| return state, result, f"SCORE: {state['score']}", gr.update(value=button_label, visible=True) |
|
|
|
|
| def next_round(state: dict[str, Any] | None) -> tuple[dict[str, Any] | None, str, str, str, str, str, str, str, str, Any]: |
| if not state: |
| return None, "I See", "ROUND 0 / 10", "SCORE: 0", "Start Game", "Start Game", "Start Game", "Start Game", "", gr.update(visible=False) |
|
|
| if state["round_number"] >= TOTAL_ROUNDS: |
| score = state["score"] |
| message = f"Game complete.\n\nFinal score: {score} / {TOTAL_ROUNDS}" |
| return state, message, "FINISHED", f"SCORE: {score}", "A", "B", "C", "D", "Start a new game to play again.", gr.update(visible=False) |
|
|
| round_number = state["round_number"] + 1 |
| state.update( |
| { |
| "round_number": round_number, |
| "answered": False, |
| "round": state["rounds"][round_number - 1], |
| } |
| ) |
| return state, *render_question(state), "", gr.update(visible=False) |
|
|
|
|
| APP_CSS = """ |
| body, |
| .gradio-container { |
| background: #050505 !important; |
| color: #f7f7f7 !important; |
| } |
| .gradio-container { |
| max-width: 980px !important; |
| min-height: 100vh; |
| padding: 22px 18px 34px !important; |
| font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; |
| } |
| #stage { |
| max-width: 700px; |
| margin: 0 auto; |
| } |
| #title { |
| margin: 0 0 28px; |
| } |
| #title h1 { |
| text-align: center; |
| margin-bottom: 0; |
| font-size: 1.85rem; |
| font-weight: 850; |
| letter-spacing: 0; |
| } |
| #round-pill { |
| text-align: center; |
| width: fit-content; |
| margin: 0 auto 18px; |
| padding: 6px 14px; |
| border: 1px solid #262626; |
| border-radius: 999px; |
| color: #f2f2f2; |
| font-weight: 700; |
| letter-spacing: 0.15em; |
| text-transform: uppercase; |
| font-size: 0.72rem; |
| } |
| #score-pill { |
| text-align: center; |
| color: #f4f4f4; |
| font-weight: 750; |
| letter-spacing: 0.16em; |
| text-transform: uppercase; |
| font-size: 0.8rem; |
| margin: 18px 0 18px; |
| } |
| #question { |
| text-align: center; |
| white-space: pre-line; |
| min-height: 136px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| flex-direction: column; |
| } |
| #question h2 { |
| font-size: clamp(1.8rem, 4vw, 2.7rem); |
| font-style: italic; |
| margin: 0.2rem 0 0.7rem; |
| line-height: 1.05; |
| letter-spacing: 0; |
| } |
| #question h3 { |
| max-width: 760px; |
| margin: 0 auto; |
| color: #f7f7f7; |
| font-size: clamp(1.05rem, 2.1vw, 1.35rem); |
| font-style: italic; |
| line-height: 1.45; |
| font-weight: 800; |
| letter-spacing: 0; |
| } |
| #result { |
| min-height: 92px; |
| text-align: center; |
| white-space: pre-line; |
| color: #d8d8d8; |
| line-height: 1.45; |
| padding-top: 8px; |
| } |
| #controls { |
| max-width: 700px; |
| margin: 0 auto 20px; |
| } |
| #answers { |
| max-width: 700px; |
| margin: 0 auto; |
| } |
| #answers .gr-row { |
| gap: 18px; |
| } |
| #answers button { |
| min-height: 158px; |
| padding: 24px 26px !important; |
| border: 1px solid #2a2a2a !important; |
| border-radius: 22px !important; |
| background: #050505 !important; |
| color: #f7f7f7 !important; |
| box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.015); |
| justify-content: flex-start !important; |
| align-items: flex-start !important; |
| text-align: left !important; |
| white-space: pre-line !important; |
| font-weight: 800 !important; |
| line-height: 1.35 !important; |
| transition: border-color 140ms ease, transform 140ms ease, background 140ms ease; |
| } |
| #answers button:hover { |
| border-color: #f5f5f5 !important; |
| background: #0b0b0b !important; |
| transform: translateY(-1px); |
| } |
| #answers button:active { |
| transform: translateY(0); |
| } |
| #answers button::first-line { |
| font-size: 0.78rem; |
| letter-spacing: 0.14em; |
| } |
| #start, |
| #next { |
| min-height: 52px; |
| } |
| #start button, |
| #next button { |
| border-radius: 999px !important; |
| font-weight: 800 !important; |
| min-height: 52px; |
| background: #ff6a13 !important; |
| border: 0 !important; |
| color: white !important; |
| } |
| #next button { |
| background: #f7f7f7 !important; |
| color: #080808 !important; |
| } |
| #footnote { |
| max-width: 700px; |
| margin: 28px auto 0; |
| text-align: center; |
| color: #8f8f8f; |
| font-size: 0.82rem; |
| } |
| @media (max-width: 680px) { |
| .gradio-container { |
| padding: 18px 12px 28px !important; |
| } |
| #question { |
| min-height: 126px; |
| } |
| #answers .gr-row { |
| flex-direction: column; |
| gap: 12px; |
| } |
| #answers button { |
| min-height: 118px; |
| padding: 20px !important; |
| } |
| } |
| """ |
|
|
|
|
| with gr.Blocks(title="I See", css=APP_CSS) as demo: |
| state = gr.State() |
|
|
| with gr.Column(elem_id="stage"): |
| gr.Markdown("# I See", elem_id="title") |
| round_label = gr.Markdown("ROUND 0 / 10", elem_id="round-pill") |
| question = gr.Markdown("## I Spy...\n\n### Start a game to generate your first question.", elem_id="question") |
| score = gr.Markdown("SCORE: 0", elem_id="score-pill") |
|
|
| with gr.Row(elem_id="controls"): |
| start = gr.Button("Start Game", variant="primary", elem_id="start") |
| next_button = gr.Button("Next Round", visible=False, elem_id="next") |
|
|
| with gr.Column(elem_id="answers"): |
| with gr.Row(): |
| choice_a = gr.Button("A") |
| choice_b = gr.Button("B") |
| with gr.Row(): |
| choice_c = gr.Button("C") |
| choice_d = gr.Button("D") |
|
|
| result = gr.Markdown("", elem_id="result") |
|
|
| gr.Markdown( |
| "Powered by `meta-llama/Llama-3.1-8B-Instruct` on Hugging Face when `HF_TOKEN` is configured.", |
| elem_id="footnote", |
| ) |
|
|
| outputs = [state, question, round_label, score, choice_a, choice_b, choice_c, choice_d, result, next_button] |
| start.click(start_game, outputs=outputs) |
| next_button.click(next_round, inputs=state, outputs=outputs) |
| choice_a.click(lambda current: choose(0, current), inputs=state, outputs=[state, result, score, next_button]) |
| choice_b.click(lambda current: choose(1, current), inputs=state, outputs=[state, result, score, next_button]) |
| choice_c.click(lambda current: choose(2, current), inputs=state, outputs=[state, result, score, next_button]) |
| choice_d.click(lambda current: choose(3, current), inputs=state, outputs=[state, result, score, next_button]) |
|
|
|
|
| if __name__ == "__main__": |
| demo.launch( |
| server_name="0.0.0.0", |
| server_port=int(os.getenv("PORT", "7860")), |
| ) |
|
|
