\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 📝 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",[18,81],"f687ce72-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",[18,67],"pulls","branches","forks","envVars",{"_190":26,"_192":26},"connections",{"_190":26,"_191":26},"count","unfilledCount","emptyCount",{"_35":165,"_13":18,"_65":92,"_45":-5,"_37":38,"_168":42,"_174":24,"_39":220,"_41":26,"_68":93,"_166":-5,"_69":30,"_169":-5,"_204":221,"_17":222},{"_35":179,"_13":67,"_65":66,"_45":92,"_37":38,"_168":42,"_174":24,"_39":217,"_41":26,"_68":21,"_166":181,"_69":30,"_169":-5,"_204":218,"_17":219},{"_35":173,"_13":81,"_65":80,"_45":92,"_37":38,"_168":85,"_174":24,"_39":214,"_41":176,"_68":82,"_166":177,"_69":30,"_169":-5,"_204":215,"_17":216},{"_35":207,"_13":208,"_65":209,"_45":-5,"_37":38,"_168":130,"_174":24,"_39":210,"_41":26,"_68":21,"_166":211,"_69":30,"_169":-5,"_204":212,"_17":213},{"_35":198,"_13":199,"_65":106,"_45":-5,"_37":38,"_168":200,"_174":24,"_39":201,"_41":42,"_68":202,"_166":203,"_69":30,"_169":-5,"_204":205,"_17":206},"a50c0026-3dc5-11f1-9c55-42b51c65c3df","main.tsx",6,["D",1776805451189],"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\", import.meta.url));\napp.get(\"/frontend/*\", (c) => serveFile(c.req.path, import.meta.url));\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","children",[],[199],"bf024b70-3dc5-11f1-92d8-42b51c65c3df","README.md","bf024c42-3dc5-11f1-92d8-42b51c65c3df",["D",1776805494756],"# 🇨🇳 Chinese Vocab Conversation Generator\n\nEnter a list of Chinese vocabulary words and get a **5-minute, 2-person conversation script** that naturally incorporates all of them.\n\n## How it works\n\n1. Type or paste your Chinese vocab words (comma or newline separated)\n2. Click **Generate** — AI creates a dialogue between 小明 and 小红\n3. Each line includes: Chinese → Pinyin → English translation\n4. Target vocab words are highlighted in the script\n5. A vocab review section is included at the end\n\n## Tech Stack\n\n- **Frontend:** React + Twind (Tailwind)\n- **Backend:** Hono on Val Town\n- **AI:** Val Town's built-in OpenAI (gpt-4o-mini) — no API key needed\n\n```mermaid\ngraph LR\n A[User enters vocab words] --> B[POST /api/generate]\n B --> C[Val Town std/openai]\n C --> D[GPT-4o-mini]\n D --> E[Conversation script]\n E --> F[Rendered with react-markdown]\n```\n",[],[208],["D",1776805443587],[],[18,81],["D",1776805158229],[],[18,67],["D",1776805158229],[194,195],[18],["D",1776805134710],{"_11":12,"_143":72},{"_11":12,"_139":-5,"_71":72,"_31":70,"_140":141,"_142":30},{"_41":130,"_13":16,"_35":38,"_131":95,"_132":-5,"_133":-5,"_134":-5,"_135":-5,"_136":-5,"_137":14,"_138":12},"ctx",{"_55":-5,"_162":260,"_261":262,"_263":264,"_265":30,"_266":30,"_267":30,"_268":24,"_269":-5,"_270":-7,"_271":-7,"_272":26,"_273":30,"_274":30,"_275":-5,"_276":30,"_277":30,"_278":30,"_279":-5},"ENV",{"_231":232,"_233":234,"_235":16,"_236":237,"_238":239,"_240":241,"_242":243,"_244":245,"_246":247,"_248":249,"_250":251,"_252":253,"_254":255,"_256":257,"_258":259},"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"]

History · frontend