Create app.py

app.py

@@ -0,0 +1,226 @@
+"""
+NWFWO Practice – Gradio MCP app for ChatGPT
+
+This file does two things:
+1) Runs a normal Gradio web app (for debugging in your browser)
+2) Exposes an MCP server + HTML UI card for ChatGPT Apps
+"""
+
+import gradio as gr
+from dataclasses import dataclass
+
+
+# ---- 1. Data model for the “game state” ----
+
+@dataclass
+class NWFWOExample:
+    # A short scenario or sentence in the foreign language (transliterated)
+    transliteration: str
+    # The correct NWFWO answer (what the learner should guess)
+    correct_nwfwo: str
+    # Optional: explanation to show after checking
+    explanation: str | None = None
+
+
+# ---- 2. Core tool logic: check the learner’s guess ----
+
+@gr.mcp.tool()  # this exposes the function as an MCP tool to ChatGPT
+def check_nwfwo(
+    transliteration: str,
+    correct_nwfwo: str,
+    user_guess: str,
+    explanation: str | None = None,
+):
+    """
+    Simple checker for NWFWO practice.
+
+    Arguments (ChatGPT will send these as JSON):
+    - transliteration: the foreign sentence/word in transliteration
+    - correct_nwfwo: the correct NWFWO answer
+    - user_guess: what the learner typed or selected
+    - explanation: optional teacher explanation
+
+    Returns: a dict that ChatGPT AND the UI card can use.
+    """
+    norm_correct = correct_nwfwo.strip().lower()
+    norm_guess = user_guess.strip().lower()
+
+    is_correct = norm_guess == norm_correct
+
+    # Build friendly feedback
+    if is_correct:
+        feedback = "✅ Correct! Your NWFWO matches the target."
+    else:
+        feedback = (
+            "❌ Not quite. Compare your NWFWO with the correct one "
+            "and think about which sounds or letters changed."
+        )
+
+    result = {
+        "transliteration": transliteration,
+        "correct_nwfwo": correct_nwfwo,
+        "user_guess": user_guess,
+        "is_correct": is_correct,
+        "feedback": feedback,
+        "explanation": explanation
+        or "This NWFWO shows how the foreign writing maps to the native word.",
+    }
+
+    return result
+
+
+# ---- 3. Normal Gradio UI (handy while you’re developing) ----
+
+def local_check_ui(transliteration, correct_nwfwo, user_guess, explanation):
+    res = check_nwfwo(
+        transliteration=transliteration,
+        correct_nwfwo=correct_nwfwo,
+        user_guess=user_guess,
+        explanation=explanation,
+    )
+    return (
+        f"Transliteration: {res['transliteration']}\n"
+        f"Your NWFWO: {res['user_guess']}\n"
+        f"Correct NWFWO: {res['correct_nwfwo']}\n\n"
+        f"{res['feedback']}\n\n"
+        f"Explanation: {res['explanation']}"
+    )
+
+
+with gr.Blocks() as demo:
+    gr.Markdown("## NWFWO Practice – Local Debug UI")
+
+    with gr.Row():
+        with gr.Column():
+            transliteration_box = gr.Textbox(
+                label="Transliteration (foreign text written in your script)",
+                value="salaam",
+            )
+            correct_nwfwo_box = gr.Textbox(
+                label="Correct NWFWO",
+                value="salaam",
+            )
+            user_guess_box = gr.Textbox(
+                label="Your guess NWFWO",
+                value="salam",
+            )
+            explanation_box = gr.Textbox(
+                label="Explanation (optional)",
+                value="This example shows how long vs short vowels work.",
+            )
+            btn = gr.Button("Check")
+
+        with gr.Column():
+            result_box = gr.Textbox(
+                label="Result",
+                lines=8,
+            )
+
+    btn.click(
+        local_check_ui,
+        inputs=[transliteration_box, correct_nwfwo_box, user_guess_box, explanation_box],
+        outputs=[result_box],
+    )
+
+
+# ---- 4. HTML UI card resource for ChatGPT App ----
+
+@gr.mcp.resource(
+    "ui://widget/nwfwo-practice-card.html",
+    mime_type="text/html+skybridge",
+)
+def nwfwo_html_card():
+    """
+    This HTML will appear as a card inside ChatGPT when this tool runs.
+
+    It can read:
+    - window.openai.toolInput  (what ChatGPT sent into the tool)
+    - window.openai.toolOutput (what our Python tool returned)
+    """
+    html = r"""
+    <div id="nwfwo-card-root"></div>
+    <script>
+    const root = document.getElementById("nwfwo-card-root");
+
+    function render() {
+        const input  = (window.openai && window.openai.toolInput)  || {};
+        const output = (window.openai && window.openai.toolOutput) || {};
+
+        const transliteration = input.transliteration || output.transliteration || "salaam";
+        const userGuess       = input.user_guess      || output.user_guess      || "salam";
+        const correctNwfwo    = input.correct_nwfwo   || output.correct_nwfwo   || "salaam";
+
+        const isCorrect  = output.is_correct;
+        const feedback   = output.feedback   || "";
+        const explanation = output.explanation || "";
+
+        let badge = "";
+        if (typeof isCorrect === "boolean") {
+            badge = isCorrect
+              ? '<span style="padding:4px 8px;border-radius:999px;background:#d4edda;">Correct</span>'
+              : '<span style="padding:4px 8px;border-radius:999px;background:#f8d7da;">Try again</span>';
+        }
+
+        root.innerHTML = `
+          <div style="
+              border-radius:16px;
+              border:1px solid #ddd;
+              padding:16px;
+              font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+              max-width: 500px;
+          ">
+            <div style="font-size:14px;color:#666;margin-bottom:4px;">
+                NWFWO Practice
+            </div>
+            <div style="font-size:18px;font-weight:600;margin-bottom:12px;">
+                Transliteration
+            </div>
+            <div style="padding:8px 12px;border-radius:12px;background:#f5f5f5;margin-bottom:12px;">
+                ${transliteration}
+            </div>
+
+            <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;">
+                <div>
+                    <div style="font-size:14px;color:#666;">Your NWFWO</div>
+                    <div style="font-size:16px;">${userGuess}</div>
+                </div>
+                <div>
+                    <div style="font-size:14px;color:#666;">Target NWFWO</div>
+                    <div style="font-size:16px;font-weight:600;">${correctNwfwo}</div>
+                </div>
+            </div>
+
+            <div style="margin-bottom:8px;">
+                ${badge}
+            </div>
+
+            <div style="font-size:14px;margin-top:8px;border-top:1px solid #eee;padding-top:8px;">
+                <div style="font-weight:600;margin-bottom:4px;">Feedback</div>
+                <div>${feedback}</div>
+            </div>
+
+            <div style="font-size:13px;color:#555;margin-top:8px;">
+                <div style="font-weight:600;margin-bottom:4px;">Explanation</div>
+                <div>${explanation}</div>
+            </div>
+          </div>
+        `;
+    }
+
+    render();
+    </script>
+    """
+    return html
+
+
+# ---- 5. Main entrypoint ----
+
+if __name__ == "__main__":
+    # This launches:
+    # - a browser-accessible Gradio UI for local testing
+    # - an MCP server (on /mcp) for ChatGPT to connect to
+    demo.launch(
+        server_name="0.0.0.0",
+        server_port=7860,
+        mcp_server=True,
+    )