[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_189":190,"_191":192},"routes/_app.x.$handle.$name",{"_104":103,"_38":52,"_112":94,"_33":107,"_13":14,"_113":-5,"_11":114,"_115":116,"_117":118,"_119":120,"_121":122,"_26":-5,"_123":-5,"_124":-5,"_125":31,"_126":127,"_128":66,"_129":-5,"_130":-5,"_131":132},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":-5},"project",{"_50":51,"_38":52,"_45":53,"_54":-5,"_55":31,"_56":57,"_58":57,"_59":60,"_61":-5,"_19":62,"_63":64,"_65":66,"_67":-5,"_68":-5,"_69":70,"_71":72,"_73":-5,"_74":-5,"_75":-5,"_76":-5,"_77":78,"_79":78,"_80":81,"_82":81,"_83":81,"_84":78,"_85":78,"_86":87,"_88":89,"_90":91,"_92":31},"version",5,"changes",[25],"aiChatInfo",{"_20":21,"_22":-5,"_23":-5,"_24":-5},"userId","aiChatMessageId","5479c66e-33e5-4d0b-ba12-d04c2d9c7c18","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle",{"_26":27,"_28":29,"_30":31,"_32":31,"_33":34,"_35":34},"file",{"_36":37,"_38":39,"_40":41,"_42":44,"_45":46,"_47":14,"_48":49,"_30":31},"previous",{"_36":37,"_38":39,"_40":41,"_42":43},"deleted",false,"deletedHere","path","frontend/index.tsx","latestPath","fileId","04804b44-3dc5-11f1-aafa-42b51c65c3df","name","index.tsx","fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useCallback } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport ReactMarkdown from \"https://esm.sh/react-markdown@9.0.1?deps=react@18.2.0,react-dom@18.2.0\";\nimport remarkGfm from \"https://esm.sh/remark-gfm@4.0.0\";\n\nfunction App() {\n const [words, setWords] = useState(\"\");\n const [apiKey, setApiKey] = useState(() => localStorage.getItem(\"openai_key\") || \"\");\n const [script, setScript] = useState(\"\");\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState(\"\");\n const [showKey, setShowKey] = useState(false);\n\n const handleGenerate = useCallback(async () => {\n if (!words.trim()) {\n setError(\"Please enter at least one vocab word.\");\n return;\n }\n if (!apiKey.trim()) {\n setError(\"Please enter your OpenAI API key.\");\n return;\n }\n\n // Save key for convenience\n localStorage.setItem(\"openai_key\", apiKey);\n\n setLoading(true);\n setError(\"\");\n setScript(\"\");\n\n const wordList = words\n .split(/[,，\\n]+/)\n .map((w) => w.trim())\n .filter(Boolean);\n\n try {\n const res = await fetch(\"/api/generate\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ words: wordList, apiKey }),\n });\n const data = await res.json();\n if (data.error) {\n setError(data.error);\n } else {\n setScript(data.script);\n }\n } catch (err) {\n setError(\"Network error. Please try again.\");\n } finally {\n setLoading(false);\n }\n }, [words, apiKey]);\n\n const exampleWords = \"超市, 打折, 新鲜, 付款, 购物袋\";\n\n return (\n

\n {/* Header */}\n

🇨🇳 中文对话生成器

Chinese Conversation Script Generator

\n Enter vocab words → Get a 5-minute 2-person conversation script\n

\n\n {/* API Key Input */}\n

\n \n 🔑 OpenAI API Key\n \n

\n setApiKey(e.target.value)}\n placeholder=\"sk-...\"\n className=\"flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-400 focus:border-transparent outline-none text-sm\"\n />\n setShowKey(!showKey)}\n className=\"px-3 py-2 text-sm bg-gray-100 rounded-lg hover:bg-gray-200 transition\"\n >\n {showKey ? \"Hide\" : \"Show\"}\n \n

Stored locally in your browser. Never sent to our server.

\n\n {/* Vocab Input */}\n

\n \n 📝 Vocab Words (comma or newline separated)\n \n setWords(e.target.value)}\n placeholder={`e.g.\\n${exampleWords}`}\n rows={4}\n className=\"w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-400 focus:border-transparent outline-none text-lg\"\n />\n setWords(exampleWords)}\n className=\"mt-2 text-xs text-red-600 hover:text-red-800 underline\"\n >\n Try example: {exampleWords}\n \n

\n\n {/* Generate Button */}\n \n {loading ? (\n \n \n Generating conversation...\n \n ) : (\n \"🎭 Generate Conversation Script\"\n )}\n \n\n {/* Error */}\n {error && (\n

\n ⚠️ {error}\n

\n )}\n\n {/* Result */}\n {script && (\n

🎬 Conversation Script

\n navigator.clipboard.writeText(script)}\n className=\"text-sm px-3 py-1.5 bg-gray-100 rounded-lg hover:bg-gray-200 transition\"\n >\n 📋 Copy\n \n

\n {script}\n

\n )}\n\n {/* Footer */}\n

\n View Source\n {\" · \"}\n Built on Val Town\n

\n );\n}\n\nconst root = createRoot(document.getElementById(\"root\")!);\nroot.render();\n","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useCallback } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport ReactMarkdown from \"https://esm.sh/react-markdown@9.0.1?deps=react@18.2.0,react-dom@18.2.0\";\nimport remarkGfm from \"https://esm.sh/remark-gfm@4.0.0\";\n\nfunction App() {\n const [words, setWords] = useState(\"\");\n const [script, setScript] = useState(\"\");\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState(\"\");\n\n const handleGenerate = useCallback(async () => {\n if (!words.trim()) {\n setError(\"Please enter at least one vocab word.\");\n return;\n }\n\n setLoading(true);\n setError(\"\");\n setScript(\"\");\n\n const wordList = words\n .split(/[,，\\n]+/)\n .map((w) => w.trim())\n .filter(Boolean);\n\n try {\n const res = await fetch(\"/api/generate\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ words: wordList }),\n });\n const data = await res.json();\n if (data.error) {\n setError(data.error);\n } else {\n setScript(data.script);\n }\n } catch (err) {\n setError(\"Network error. Please try again.\");\n } finally {\n setLoading(false);\n }\n }, [words]);\n\n const exampleWords = \"超市, 打折, 新鲜, 付款, 购物袋\";\n\n return (\n

\n {/* Header */}\n

🇨🇳 中文对话生成器

Chinese Conversation Script Generator

\n Enter vocab words → Get a 5-minute 2-person conversation script\n

\n\n {/* Vocab Input */}\n

\n\n {/* Generate Button */}\n \n {loading ? (\n \n \n Generating conversation...\n \n ) : (\n \"🎭 Generate Conversation Script\"\n )}\n \n\n {/* Error */}\n {error && (\n

\n ⚠️ {error}\n

\n )}\n\n {/* Result */}\n {script && (\n

🎬 Conversation Script

\n navigator.clipboard.writeText(script)}\n className=\"text-sm px-3 py-1.5 bg-gray-100 rounded-lg hover:bg-gray-200 transition\"\n >\n 📋 Copy\n \n

\n {script}\n

\n )}\n\n {/* Footer */}\n

\n View Source\n {\" · \"}\n Built on Val Town\n

\n );\n}\n\nconst root = createRoot(document.getElementById(\"root\")!);\nroot.render();\n","createdAt",["D",1776805443587],"branchVersion","branchId","e8670240-3dc4-11f1-8543-42b51c65c3df","id","e866a872-3dc4-11f1-8543-42b51c65c3df","chinese-vocab-conversation",["D",1776805134710],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Generate 2-person Chinese conversation scripts from vocab words","imageUrl","08948d3c-72fa-4c43-a8ea-1ec9b7450dd2","pinnedFileId","f3307120-3dc4-11f1-882f-42b51c65c3df","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","019db1d0-4320-765e-984f-fd383e1c531e","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_104":103,"_111":107},"org",{"_104":103,"_105":-5,"_106":107,"_19":62,"_108":109,"_110":31},"branch",{"_13":93,"_38":94,"_50":49,"_95":51,"_96":-5,"_97":-5,"_98":-5,"_99":-5,"_100":-5,"_101":52,"_102":103},"isOwned",7,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","adamsliu13","handle","displayName","avatar","","tier","free","canRestrictVals","profileImageUrl","branchName","adoptOrgId",{"_50":51,"_38":52,"_45":185,"_54":-5,"_55":31,"_56":57,"_58":57,"_59":60,"_61":-5,"_19":62,"_63":64,"_65":66,"_67":-5,"_68":-5,"_69":70,"_71":72,"_73":-5,"_74":-5,"_75":-5,"_76":-5,"_77":78,"_79":78,"_80":81,"_82":81,"_83":81,"_84":78,"_85":78,"_86":186,"_88":187,"_90":188,"_92":31},"tree",[163,166],"files",[163,164,165,166],"counts",{"_153":70,"_154":141,"_155":70,"_156":157,"_158":159},"contents",[133,134],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_50":146,"_38":147,"_36":148,"_137":-5,"_48":49,"_47":149,"_139":66,"_45":150,"_13":70,"_40":151,"_42":-5,"_30":31,"_144":-5,"_33":152},{"_50":135,"_38":136,"_36":64,"_137":-5,"_48":49,"_47":138,"_139":31,"_45":140,"_13":141,"_40":142,"_42":143,"_30":31,"_144":-5,"_33":145},"94c2e1da-3dc5-11f1-855d-42b51c65c3df","main.tsx","parentId",4,"latest",["D",1776805423863],1,"http","import { Hono } from \"npm:hono@4\";\nimport { serveFile, parseVal } from \"https://esm.town/v/std/utils/index.ts\";\n\nconst app = new Hono();\n\napp.onError((err) => Promise.reject(err));\n\napp.get(\"/\", (c) => serveFile(\"/frontend/index.html\", c.req.raw));\napp.get(\"/frontend/*\", (c) => serveFile(c.req.path, c.req.raw));\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\napp.post(\"/api/generate\", async (c) => {\n const { OpenAI } = await import(\"https://esm.town/v/std/openai\");\n const openai = new OpenAI();\n\n const { words } = await c.req.json();\n\n if (!words || !Array.isArray(words) || words.length === 0) {\n return c.json({ error: \"Please provide at least one vocab word.\" }, 400);\n }\n\n const wordList = words.join(\", \");\n\n const prompt = `You are a Chinese language teaching assistant. Create a natural, engaging 5-minute conversation script between two people (小明 Xiǎo Míng and 小红 Xiǎo Hóng) that incorporates ALL of the following Chinese vocabulary words: ${wordList}\n\nRequirements:\n- The conversation should feel natural and have a coherent storyline/topic\n- Each vocab word must appear at least once, highlighted in the dialogue\n- Format each line as: **Speaker:** Chinese text (pinyin) — English translation\n- The conversation should be approximately 30-40 exchanges (to fill ~5 minutes when read aloud)\n- Start with a brief scene description\n- Use a mix of simple and intermediate grammar\n- Bold the target vocab words in the Chinese text using **bold** markdown\n- At the end, provide a \"Vocab Review\" section listing each word with pinyin and definition\n\nMake the conversation interesting, maybe involving a real-life scenario like shopping, traveling, ordering food, visiting a friend, etc. Choose the most natural scenario for the given words.`;\n\n try {\n const completion = await openai.chat.completions.create({\n messages: [\n { role: \"system\", content: \"You are a helpful Chinese language tutor who creates engaging conversation scripts for learners.\" },\n { role: \"user\", content: prompt },\n ],\n model: \"gpt-4o-mini\",\n temperature: 0.8,\n max_tokens: 4000,\n });\n\n const script = completion.choices[0].message.content;\n return c.json({ script });\n } catch (err: any) {\n return c.json({ error: \"Failed to generate conversation: \" + (err.message || String(err)) }, 500);\n }\n});\n\nexport default app.fetch;\n","label",[136],"f687f366-3dc4-11f1-b93b-42b51c65c3df","frontend","deff41f1-6a11-4cbe-a353-05894f42a7c1",2,["D",1776805158229],"directory",[147],"pulls","branches","forks","envVars",{"_160":70,"_162":70},"connections",{"_160":70,"_161":70},"count","unfilledCount","emptyCount",{"_50":146,"_38":147,"_36":148,"_137":-5,"_48":49,"_47":149,"_139":66,"_45":182,"_13":70,"_40":151,"_42":-5,"_30":31,"_144":-5,"_168":183,"_33":184},{"_50":175,"_38":176,"_36":177,"_137":148,"_48":49,"_47":149,"_139":66,"_45":178,"_13":70,"_40":26,"_42":179,"_30":31,"_144":-5,"_168":180,"_33":181},{"_50":171,"_38":39,"_36":37,"_137":148,"_48":49,"_47":14,"_139":66,"_45":172,"_13":141,"_40":41,"_42":44,"_30":31,"_144":-5,"_168":173,"_33":174},{"_50":135,"_38":136,"_36":64,"_137":-5,"_48":49,"_47":138,"_139":31,"_45":167,"_13":141,"_40":142,"_42":143,"_30":31,"_144":-5,"_168":169,"_33":170},["D",1776805423863],"children",[],[136],"a0842e2a-3dc5-11f1-8939-42b51c65c3df",["D",1776805443587],[],[147,39],"f687ce72-3dc4-11f1-b93b-42b51c65c3df","index.html","f687cf12-3dc4-11f1-b93b-42b51c65c3df",["D",1776805158229],"\n\n\n \n \n 中文对话生成器 — Chinese Conversation Generator\n \n \n \n \n\n\n

\n \n\n\n",[],[147,176],["D",1776805158229],[164,165],[147],["D",1776805134710],{"_104":103,"_111":107},{"_104":103,"_105":-5,"_106":107,"_19":62,"_108":109,"_110":31},{"_13":93,"_38":94,"_50":49,"_95":51,"_96":-5,"_97":-5,"_98":-5,"_99":-5,"_100":-5,"_101":52,"_102":103},"ctx",{"_86":-5,"_130":222,"_223":224,"_225":226,"_227":31,"_228":31,"_229":31,"_230":66,"_231":-5,"_232":-7,"_233":-7,"_234":70,"_235":31,"_236":31,"_237":-5,"_238":31,"_239":31,"_240":31,"_241":-5},"ENV",{"_193":194,"_195":196,"_197":94,"_198":199,"_200":201,"_202":203,"_204":205,"_206":207,"_208":209,"_210":211,"_212":213,"_214":215,"_216":217,"_218":219,"_220":221},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","c73f21da490985bff19c279eb0e09db24d688e4f","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v5