Update app.py

app.py

@@ -1,6 +1,7 @@
 """
-NWFWO Practice - Gradio MCP app for ChatGPT
+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
 """
@@ -11,7 +12,7 @@ from typing import Optional
 import gradio as gr
 
 
-# ---- 1. Data model for the "game state" ----
+# ---- 1. Data model for the “game state” ----
 
 @dataclass
 class NWFWOExample:
@@ -23,9 +24,16 @@ class NWFWOExample:
     explanation: Optional[str] = None
 
 
-# ---- 2. Core tool logic: check the learner's guess ----
+# ---- 2. Core tool logic: check the learner’s guess ----
 
-@gr.mcp.tool()  # exposes the function as an MCP tool to ChatGPT / MCP clients
+@gr.mcp.tool(
+    _meta={
+        # Tell ChatGPT which widget template to use for this tool
+        "openai/outputTemplate": "ui://widget/nwfwo-practice-card.html",
+        "openai/resultCanProduceWidget": True,
+        "openai/widgetAccessible": True,
+    }
+)
 def check_nwfwo(
     transliteration: str,
     correct_nwfwo: str,
@@ -70,7 +78,7 @@ def check_nwfwo(
     return result
 
 
-# ---- 3. Normal Gradio UI (handy while you're developing) ----
+# ---- 3. Normal Gradio UI (handy while you’re developing) ----
 
 def local_check_ui(transliteration, correct_nwfwo, user_guess, explanation):
     res = check_nwfwo(
@@ -128,6 +136,16 @@ with gr.Blocks() as demo:
         outputs=[result_box],
     )
 
+    # ---- (NEW) 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)",
+        language="html",
+        visible=False,
+    )
+    # Call the resource once on load; enough to register it.
+    demo.load(fn=lambda: nwfwo_html_card(), inputs=None, outputs=widget_preview)
+
 
 # ---- 4. HTML UI card resource for ChatGPT App ----
 
@@ -156,8 +174,8 @@ def nwfwo_html_card():
         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 isCorrect   = output.is_correct;
+        const feedback    = output.feedback   || "";
         const explanation = output.explanation || "";
 
         let badge = "";
@@ -214,6 +232,13 @@ def nwfwo_html_card():
     }
 
     render();
+
+    // Good practice: re-render when ChatGPT updates tool globals
+    window.addEventListener("openai:set_globals", (event) => {
+        if (event.detail && event.detail.globals && event.detail.globals.toolOutput) {
+            render();
+        }
+    }, { passive: true });
     </script>
     """
     return html
@@ -222,8 +247,4 @@ def nwfwo_html_card():
 # ---- 5. Main entrypoint ----
 
 if __name__ == "__main__":
-    # On Hugging Face Spaces, you don't need to set port/host manually.
-    # mcp_server=True exposes the MCP endpoint (on /gradio_api/mcp/ in Spaces).
-    demo.launch(
-        mcp_server=True,
-    )
+    demo.launch(mcp_server=True)