Update app.py

app.py

@@ -4,27 +4,37 @@ 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
+
+MVP behaviour:
+- ChatGPT passes in:
+  - transliteration: foreign sentence (clue)
+  - correct_nwfwo: natural translation in native language (clue)
+  - explanation: literal native sentence that follows the foreign info flow (correct order)
+  - user_guess: learner's attempt at ordering the native words to match that flow
+- This tool compares the word order and returns feedback + data for the widget.
 """
 
 from dataclasses import dataclass
-from typing import Optional
+from typing import Optional, List
 
 import gradio as gr
 
 
-# ---- 1. Data model for the “game state” ----
+# ---- 1. Data model (kept for future extension, not essential for MVP) ----
 
 @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
+    # Foreign sentence (text or transliteration)
+    foreign_original: str
+    # Natural translation in the native language
+    native_natural: str
+    # Literal native sentence that follows the foreign word order
+    native_literal_from_foreign: str
+    # Optional explanation / note
     explanation: Optional[str] = None
 
 
-# ---- 2. Core tool logic: check the learner’s guess ----
+# ---- 2. Core tool logic: word-order practice ----
 
 @gr.mcp.tool(
     _meta={
@@ -41,38 +51,88 @@ def check_nwfwo(
     explanation: Optional[str] = None,
 ):
     """
-    Simple checker for NWFWO practice.
+    Word-order practice for listening support.
+
+    Parameters (as ChatGPT should use them):
+
+    - transliteration:
+        foreign sentence (A1), shown as a clue.
+    - correct_nwfwo:
+        natural translation in the learner's native language (B1), shown as a clue.
+    - explanation:
+        literal native sentence that follows the foreign word order (A2).
+        This is the CORRECT target order the learner should try to match.
+    - user_guess:
+        learner's attempt at ordering the native words to match that foreign flow.
+
+    Behaviour:
+    - Split the correct literal sentence and user guess into tokens.
+    - Compare position-by-position.
+    - Return counts and per-position matches plus the sentences for display.
+    """
 
-    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
+    # Rename for clarity
+    foreign_original = transliteration or ""
+    native_natural = correct_nwfwo or ""
+    native_literal_from_foreign = explanation or ""
+    user_order_native_literal = user_guess or ""
 
-    Returns: a dict that ChatGPT AND the UI card can use.
-    """
-    norm_correct = correct_nwfwo.strip().lower()
-    norm_guess = user_guess.strip().lower()
+    # Tokenise (simple space split MVP – ChatGPT should format inputs cleanly)
+    def tokenize(s: str) -> List[str]:
+        # Minimal normalisation: strip and split on whitespace
+        return [t for t in s.strip().split() if t]
 
-    is_correct = norm_guess == norm_correct
+    correct_tokens = tokenize(native_literal_from_foreign)
+    user_tokens = tokenize(user_order_native_literal)
 
-    # Build friendly feedback
-    if is_correct:
-        feedback = "✅ Correct! Your NWFWO matches the target."
-    else:
+    max_len = max(len(correct_tokens), len(user_tokens)) if correct_tokens or user_tokens else 0
+
+    matches_by_index: List[bool] = []
+    for i in range(max_len):
+        c = correct_tokens[i] if i < len(correct_tokens) else None
+        u = user_tokens[i] if i < len(user_tokens) else None
+        matches_by_index.append(c is not None and u is not None and c.lower() == u.lower())
+
+    num_correct = sum(1 for m in matches_by_index if m)
+    total_positions = len(correct_tokens)
+
+    if total_positions == 0:
         feedback = (
-            "❌ Not quite. Compare your NWFWO with the correct one "
-            "and think about which sounds or letters changed."
+            "I couldn't see any words in the 'correct literal' sentence. "
+            "Make sure explanation contains the literal native sentence to follow."
         )
+    else:
+        if num_correct == total_positions:
+            feedback = (
+                f"✅ Great! All {total_positions} positions match the foreign information flow."
+            )
+        elif num_correct == 0:
+            feedback = (
+                "❌ None of the positions match the foreign flow yet. "
+                "Try lining up the verb and time/place words with how they appear in the foreign sentence."
+            )
+        else:
+            feedback = (
+                f"⚠️ You matched {num_correct} out of {total_positions} positions. "
+                "Look at which words moved and how that changes the flow."
+            )
 
     result = {
-        "transliteration": transliteration,
-        "correct_nwfwo": correct_nwfwo,
-        "user_guess": user_guess,
-        "is_correct": is_correct,
+        # Original parameters (so existing callers still see them)
+        "transliteration": foreign_original,
+        "correct_nwfwo": native_natural,
+        "user_guess": user_order_native_literal,
+        "explanation": native_literal_from_foreign,
+        # Semantic fields
+        "foreign_original": foreign_original,
+        "native_natural": native_natural,
+        "native_literal_from_foreign": native_literal_from_foreign,
+        "correct_tokens": correct_tokens,
+        "user_tokens": user_tokens,
+        "matches_by_index": matches_by_index,
+        "num_correct": num_correct,
+        "total_positions": total_positions,
         "feedback": feedback,
-        "explanation": explanation
-        or "This NWFWO shows how the foreign writing maps to the native word.",
     }
 
     return result
@@ -80,63 +140,70 @@ def check_nwfwo(
 
 # ---- 3. Normal Gradio UI (handy while you’re developing) ----
 
-def local_check_ui(transliteration, correct_nwfwo, user_guess, explanation):
+def local_check_ui(foreign_sentence, native_natural, user_order, native_literal):
     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']}"
+        transliteration=foreign_sentence,
+        correct_nwfwo=native_natural,
+        user_guess=user_order,
+        explanation=native_literal,
     )
 
+    # Simple text summary for the debug UI
+    lines = [
+        f"Foreign sentence: {res['foreign_original']}",
+        f"Translation (clue): {res['native_natural']}",
+        "",
+        f"Correct foreign flow in native words: {res['native_literal_from_foreign']}",
+        f"Your order: {' '.join(res['user_tokens'])}",
+        "",
+        f"Positions correct: {res['num_correct']} / {res['total_positions']}",
+        "",
+        f"Feedback: {res['feedback']}",
+    ]
+    return "\n".join(lines)
+
 
 with gr.Blocks() as demo:
-    gr.Markdown("## NWFWO Practice – Local Debug UI")
+    gr.Markdown("## Word Order Practice – Local Debug UI")
 
     with gr.Row():
         with gr.Column():
-            transliteration_box = gr.Textbox(
-                label="Transliteration (foreign text written in your script)",
-                value="salaam",
+            foreign_box = gr.Textbox(
+                label="Foreign sentence (clue)",
+                value="Tomorrow together rice want-to-eat?",
             )
-            correct_nwfwo_box = gr.Textbox(
-                label="Correct NWFWO",
-                value="salaam",
+            native_natural_box = gr.Textbox(
+                label="Natural translation in your language (clue)",
+                value="Do you want to eat together tomorrow?",
             )
-            user_guess_box = gr.Textbox(
-                label="Your guess NWFWO",
-                value="salam",
+            native_literal_box = gr.Textbox(
+                label="Correct literal native sentence (foreign info flow)",
+                value="Tomorrow together rice want-to-eat?",
             )
-            explanation_box = gr.Textbox(
-                label="Explanation (optional)",
-                value="This example shows how long vs short vowels work.",
+            user_order_box = gr.Textbox(
+                label="Your ordered native sentence (try to follow foreign flow)",
+                value="Tomorrow rice want-to-eat together?",
             )
-            btn = gr.Button("Check")
+            btn = gr.Button("Check order")
 
         with gr.Column():
             result_box = gr.Textbox(
                 label="Result",
-                lines=8,
+                lines=10,
             )
 
     btn.click(
         local_check_ui,
         inputs=[
-            transliteration_box,
-            correct_nwfwo_box,
-            user_guess_box,
-            explanation_box,
+            foreign_box,
+            native_natural_box,
+            user_order_box,
+            native_literal_box,
         ],
         outputs=[result_box],
     )
 
-    # ---- (NEW) wire the MCP resource to a Gradio event ----
+    # ---- wire the MCP resource to a Gradio event ----
     # This makes Gradio actually register the MCP resource.
     widget_preview = gr.Code(
         label="NWFWO widget HTML (for MCP)",
@@ -170,62 +237,117 @@ def nwfwo_html_card():
         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>';
+        const foreignSentence = input.transliteration
+            || output.foreign_original
+            || output.transliteration
+            || "Foreign sentence goes here";
+
+        const nativeNatural = input.correct_nwfwo
+            || output.native_natural
+            || "Natural translation goes here";
+
+        const nativeLiteral = output.native_literal_from_foreign
+            || input.explanation
+            || output.explanation
+            || "Literal native sentence (foreign flow)";
+
+        const userOrder = output.user_tokens && output.user_tokens.length
+            ? output.user_tokens.join(" ")
+            : (input.user_guess || output.user_guess || "");
+
+        const correctTokens = output.correct_tokens || [];
+        const userTokens    = output.user_tokens   || [];
+        const matches       = output.matches_by_index || [];
+        const numCorrect    = output.num_correct ?? 0;
+        const total         = output.total_positions ?? correctTokens.length;
+
+        const rows = [];
+        const maxLen = Math.max(correctTokens.length, userTokens.length);
+        for (let i = 0; i < maxLen; i++) {
+            const c = correctTokens[i] ?? "";
+            const u = userTokens[i] ?? "";
+            const m = matches[i];
+
+            rows.push(`
+                <tr>
+                    <td style="padding:4px 8px; font-size:13px;">${i + 1}</td>
+                    <td style="padding:4px 8px; font-size:13px;">${c}</td>
+                    <td style="padding:4px 8px; font-size:13px;">${u}</td>
+                    <td style="padding:4px 8px; font-size:13px;">
+                        ${m === true ? "✅" : (u ? "❌" : "")}
+                    </td>
+                </tr>
+            `);
         }
 
+        const summaryText = total > 0
+            ? `${numCorrect} / ${total} positions match the foreign information flow.`
+            : "No positions to compare yet – check the literal sentence input.";
+
         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;
+              max-width: 640px;
           ">
             <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
+                Word Order Practice – follow the foreign information flow
             </div>
-            <div style="padding:8px 12px;border-radius:12px;background:#f5f5f5;margin-bottom:12px;">
-                ${transliteration}
+
+            <div style="margin-bottom:12px;">
+                <div style="font-size:13px;color:#666;">Foreign sentence</div>
+                <div style="font-size:17px;font-weight:600;">
+                    ${foreignSentence}
+                </div>
             </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 style="margin-bottom:12px;">
+                <div style="font-size:13px;color:#666;">Translation (clue)</div>
+                <div style="font-size:15px;">
+                    ${nativeNatural}
                 </div>
-                <div>
-                    <div style="font-size:14px;color:#666;">Target NWFWO</div>
-                    <div style="font-size:16px;font-weight:600;">${correctNwfwo}</div>
+            </div>
+
+            <div style="margin-bottom:12px;">
+                <div style="font-size:13px;color:#666;">Foreign flow in your language (correct literal order)</div>
+                <div style="padding:8px 12px;border-radius:12px;background:#f5f5f5;font-size:14px;">
+                    ${nativeLiteral}
                 </div>
             </div>
 
-            <div style="margin-bottom:8px;">
-                ${badge}
+            <div style="margin-bottom:12px;">
+                <div style="font-size:13px;color:#666;">Your order</div>
+                <div style="padding:8px 12px;border-radius:12px;background:#fafafa;font-size:14px;">
+                    ${userOrder || "<span style='color:#999;'>No attempt recorded.</span>"}
+                </div>
             </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 style="margin-bottom:8px;font-size:13px;font-weight:600;">
+                Position-by-position comparison
+            </div>
+            <table style="border-collapse:collapse;width:100%;font-size:13px;">
+                <thead>
+                    <tr>
+                        <th style="text-align:left;padding:4px 8px;">#</th>
+                        <th style="text-align:left;padding:4px 8px;">Correct word</th>
+                        <th style="text-align:left;padding:4px 8px;">Your word</th>
+                        <th style="text-align:left;padding:4px 8px;">Match</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    ${rows.join("")}
+                </tbody>
+            </table>
+
+            <div style="margin-top:8px;font-size:13px;">
+                ${summaryText}
             </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 style="margin-top:4px;font-size:12px;color:#777;">
+                Tip: keep the foreign sentence and the translation in mind, and try to place time, place,
+                and verb in the same order as they appear in the foreign sentence.
             </div>
           </div>
         `;
@@ -233,9 +355,9 @@ def nwfwo_html_card():
 
     render();
 
-    // Good practice: re-render when ChatGPT updates tool globals
+    // Re-render when ChatGPT updates tool globals
     window.addEventListener("openai:set_globals", (event) => {
-        if (event.detail && event.detail.globals && event.detail.globals.toolOutput) {
+        if (event?.detail?.globals?.toolOutput) {
             render();
         }
     }, { passive: true });