AI 中文实践智能体

`:\n> - `

`: topic list grouped by level, select level dropdown maybe. Also active topic. \n> - `

`: \n> - `

`: current level/topic, scenario.\n> - `

`\n> - `

` chips\n> - `

` textarea, buttons 🎤/🔊, send\n> - `

` maybe hidden drawer or side panel.\n> - `

` \n> - CSS with variables, responsive.\n> - JS:\n> - data array levels topics. Actually provided list has typo \"土会交往\" for level6; keep as given? Could correct to \"社会交往\"? The user provided \"土会交往\" likely typo. We should maybe use as provided or correct? Since based on standard, correct is \"社会交往\" maybe but user input says \"土会交往\" (maybe OCR). We can preserve? Might display. Better correct? The user explicitly gave list including \"土会交往\" but likely they'd prefer accurate. I can use the list as given, maybe fix obvious \"土会交往\" to \"社会交往\" and \"体活动\" to \"集体活动\"? Wait list includes \"体活动\" and \"土会交往\" possibly typos. In standard, level3 topics: \"出行经历\",\"课程情况\",\"集体活动\",\"节日习俗\",\"教育\",\"职业\" likely; user wrote \"体活动\" missing \"集\". Level6 \"土会交往\" should be \"社会交往\". We should use the given list but correct obvious typos? The prompt says based on 《标准》话题列表. Maybe we should include corrected topics. Hmm. The user might compare. But delivering accurate list better. I can use corrected list: level3 \"集体活动\", level6 \"社会交往\". Should I mention? Might not need. The code can include as provided? If we correct, it's okay.\n> \n> Need generate default questions per topic. For \"一级\" etc. Use level number.\n> \n> Potential issue: HTML contains lots of code; final answer only. Need maybe include instructions in response. Could output the HTML file content as code block. But user said \"输出html网页项目\"; they likely want code. We'll provide the HTML code in a code block. Could also mention save as `index.html`. Since they want output.\n> \n> Need perhaps include a \"AI实践智能体设计.pdf\" reference but I can't see. I'll design common interactions: chat bubbles, default questions chips, memory drawer, model settings, voice.\n> \n> Let's design elaborate UI.\n> \n> Detailed CSS:\n> - fonts: system, \"Noto Sans SC\", \"PingFang SC\".\n> - background #f5f7fb\n> - header dark gradient #2b3a55 to #1d2b3f.\n> - sidebar white, border radius, shadows.\n> - chat bubbles: user right blue, AI left white with border.\n> - chips: pill buttons.\n> - composer sticky bottom.\n> - memory panel sliding from right with overlay.\n> - modal overlay.\n> \n> HTML structure:\n> \n> ```\n> \n>

\n> \n>

\n>

个人信息一级

\n>

\n> \n> \n> \n> \n>

\n>

... \n>

\n> ```\n> \n> Need maybe use SVG icons? Emoji okay.\n> \n> JS implementation detail:\n> \n> Data and state:\n> ```\n> const levels = [...];\n> const state = {\n> currentLevel: '1',\n> currentTopic: '个人信息',\n> currentLevelName: '一级',\n> history: [],\n> memory: { turns:0, corrections:[], newWords:[], userMessages:[] },\n> config: { baseUrl:'https://api.openai.com/v1', apiKey:'', model:'gpt-4o-mini', temperature:0.7, systemPrompt:'', openingMessage:'', questions:[] },\n> isDemoMode: false? maybe auto\n> };\n> ```\n> \n> Initialize:\n> - populate level select with levels.\n> - render topics for selected level, select first topic.\n> - load config and memory from localStorage.\n> - create system prompt based on level/topic.\n> - add opening AI message.\n> - render quick questions.\n> \n> Functions:\n> - `selectLevel(level)` set state, render topics, select first.\n> - `selectTopic(topic)` set currentTopic, reset conversation? Should ask confirm if resets? We'll just reset history and memory for new topic.\n> - `switchTopic(level, topic)`: update header, scenario, reset chat, add opening.\n> - `generateSystemPrompt(level, topic)`: returns detailed prompt.\n> - `generateOpening(level, topic)`: returns opening text.\n> - `generateQuestions(level, topic)`: returns array of 3 strings.\n> - `addMessage(role, content)`: create div.\n> - `renderMessages()` maybe maintain DOM.\n> - `sendMessage()`: get input, add user message, history, memory; call `respondToUser` with history plus system prompt. \n> - `callLLM(messages)`: if config.apiKey, fetch completions. Else demo response. Need likely async.\n> - `demoResponse(userText)`: produce simple AI response based on topic and level. Could use template:\n> - if user asks? We can just say \"很有意思！关于{topic}，我还想问：{question}\" plus maybe simple echo. Keep not too complex. For demo mode, use Math.random to choose from responses. Need maybe not seem too fake but okay.\n> - `quickAsk(question)`: set input then send? Use add user message \"question\" and call LLM? Actually when user clicks a quick question chip, we can send that as user's first message. Or send a hidden instruction? Better: chip text = question, onclick sends it as user message.\n> - `readAloud(text)`: speechSynthesis with zh-CN.\n> - `startVoice()`: webkitSpeechRecognition / SpeechRecognition with lang zh-CN, onresult set input.\n> - `openMemoryDrawer()`: render memory details.\n> - Memory render: turns, user messages, corrections, newWords, and maybe \"导出 JSON\".\n> - `saveMemory()`: localStorage.\n> - Settings modal: fields; save config; update state.\n> - `resetChat()`: clear messages except maybe opening? clear memory? We'll do reset current topic.\n> \n> Need handle long chat scroll.\n> \n> Language model API integration: \n> ```\n> async function callLLM(messages) {\n> if (!state.config.apiKey) return demoResponse(...);\n> const res = await fetch(`${state.config.baseUrl.replace(/\\/$/,'')}/chat/completions`, {\n> method:'POST',\n> headers:{'Content-Type':'application/json','Authorization':`Bearer ${state.config.apiKey}`},\n> body: JSON.stringify({model: state.config.model, messages, temperature: state.config.temperature})\n> });\n> if(!res.ok) throw new Error(...);\n> const data = await res.json();\n> return data.choices[0].message.content;\n> }\n> ```\n> But some providers like DeepSeek base URL is `https://api.deepseek.com/v1` or `https://api.deepseek.com`; same route. If base URL lacks `/v1`, user enters as desired. We'll normalize.\n> \n> Messages system: we need include system prompt + history. State.history can include role user/assistant. \n> `const apiMessages = [{role:'system', content: getSystemPrompt()}, ...history]`.\n> \n> Potential issue: user might want to modify system prompt. Save in config. On topic switch, auto regenerate. We might have an editable textarea in settings showing system prompt; user can edit. But if we want `config.systemPrompt` default blank => generated. We'll provide a \"重置\" prompt button.\n> \n> Default questions generation function:\n> Let's create mapping by level:\n> ```\n> function generateQuestions(level, topic){\n> const qs = {\n> 1:[`你喜欢${topic}吗？为什么？`,`你经常做什么和${topic}有关的事？`,`请简单介绍一下${topic}。`],\n> 2:[`你和家人/朋友常聊${topic}吗？`,`请说说你最近一次和${topic}有关的安排。`,`你觉得${topic}怎么样？`],\n> ...\n> }\n> return qs[level] || qs[1];\n> }\n> ```\n> But nuance for \"个人信息\" level1: \"你喜欢个人信息吗\" weird. Could special-case certain topics? We can add a map for common topics:\n> - 个人信息: [\"你叫什么名字？\",\"你今年多大？\",\"你住在哪个城市？\"]\n> - 日常起居: [\"你每天几点起床？\",\"你早上一般做什么？\",\"你晚上几点睡觉？\"]\n> - 饮食: [\"你喜欢吃什么菜？\",\"你早餐一般吃什么？\",\"你喝咖啡还是茶？\"]\n> - 交通: [\"你每天怎么去学校/上班？\",\"你喜欢坐地铁还是公交车？\",\"你骑过自行车吗？\"]\n> - 兴趣爱好: [\"你有什么爱好？\",\"你周末喜欢做什么？\",\"你喜欢运动吗？\"]\n> For level 2:\n> - 基本社交: [\"你见到朋友怎么打招呼？\",\"你会邀请朋友来家里吗？\",\"你常用什么社交软件？\"]\n> - 家庭生活: [\"你家有几口人？\",\"你和家人一起做什么？\",\"你常和父母聊天吗？\"]\n> - 学习安排: [\"你每天学习多长时间中文？\",\"你用什么方法学中文？\",\"你周末有学习计划吗？\"]\n> - 购物: [\"你常去哪儿买东西？\",\"你网上购物多吗？\",\"你买东西会讲价吗？\"]\n> - 用餐: [\"你常去餐厅吃饭吗？\",\"你喜欢中餐还是西餐？\",\"你会用筷子吗？\"]\n> - 个人感受: [\"你今天感觉怎么样？\",\"什么事情让你开心？\",\"你最近有压力吗？\"]\n> Level3:\n> - 出行经历: [\"你去过哪些地方旅行？\",\"你最难忘的一次出行是什么？\",\"旅行时你最喜欢做什么？\"]\n> - 课程情况: [\"你现在在上什么课？\",\"你最喜欢哪门课？为什么？\",\"你觉得哪门课最难？\"]\n> - 集体活动: [\"你参加过什么集体活动？\",\"你喜欢参加集体活动吗？\",\"你们班常组织活动吗？\"]\n> - 节日习俗: [\"你国家最重要的节日是什么？\",\"春节和你们国家的节日有什么不同？\",\"你庆祝节日时吃什么？\"]\n> - 教育: [\"你觉得什么样的教育是好教育？\",\"你国家的教育制度怎么样？\",\"你最喜欢的老师是谁？\"]\n> - 职业: [\"你以后想做什么工作？\",\"你父母的职业是什么？\",\"你觉得什么职业最有意思？\"]\n> Level4:\n> - 社区生活: [\"你住的小区怎么样？\",\"你和邻居关系好吗？\",\"社区里有什么设施？\"]\n> - 健康状况: [\"你最近身体怎么样？\",\"你每天睡几个小时？\",\"你常锻炼身体吗？\"]\n> - 校园生活: [\"你的学校大吗？\",\"你课后常参加什么活动？\",\"你最喜欢学校的哪个地方？\"]\n> - 日常办公: [\"你工作时常用电脑吗？\",\"你习惯在家办公还是在办公室？\",\"你怎么安排每天的工作？\"]\n> - 动物: [\"你喜欢什么动物？\",\"你养过宠物吗？\",\"你觉得动物园好不好？\"]\n> - 植物: [\"你喜欢种花草吗？\",\"你家里有植物吗？\",\"你去过植物园吗？\"]\n> Level5:\n> - 人际关系: [\"你觉得朋友之间最重要的是什么？\",\"你怎么认识新朋友？\",\"你和朋友吵过架吗？\"]\n> - 生活方式: [\"你的生活方式健康吗？\",\"你理想的生活是什么样的？\",\"你和父母的作息一样吗？\"]\n> - 学习方法: [\"你有什么好的学习方法？\",\"学中文时你怎么记生词？\",\"你更喜欢自学还是上课？\"]\n> - 自然环境: [\"你觉得你城市的环境怎么样？\",\"我们应该怎么保护环境？\",\"你喜欢去大自然吗？\"]\n> - 社会现象: [\"你最近关注什么社会现象？\",\"你对社交媒体怎么看？\",\"你身边有志愿者活动吗？\"]\n> Level6:\n> - 社会交往: [\"在社交场合，你遇到矛盾会怎么办？\",\"你怎样维护和同事的关系？\",\"你觉得网络社交和现实社交一样吗？\"]\n> - 公司事务: [\"你了解公司一般怎么开会吗？\",\"如果你和同事意见不同会怎么办？\",\"你觉得领导应该怎么做？\"]\n> - 矛盾纷争: [\"如果朋友误会你，你会怎么做？\",\"你怎么处理人与人之间的矛盾？\",\"你觉得沟通能解决所有矛盾吗？\"]\n> - 社会新闻: [\"你最近看了什么新闻？\",\"你常看哪方面的新闻？\",\"你觉得新闻真实重要吗？\"]\n> - 中外比较: [\"你觉得中国和你的国家有什么不同？\",\"在饮食方面，你的国家和中国有什么差异？\",\"你更适应哪种生活方式？\"]\n> Level7:\n> - 社交礼仪: [\"在正式场合应该注意哪些礼仪？\",\"你们国家的社交礼仪有什么特点？\",\"如果你迟到了会怎么解释？\"]\n> - 科学技术: [\"你觉得人工智能会改变教育吗？\",\"你常使用哪些科技产品？\",\"科学技术给你带来什么方便？\"]\n> - 文艺: [\"你喜欢什么类型的文艺作品？\",\"你看过中国的电影吗？\",\"你更喜欢小说还是电影？\"]\n> - 体育: [\"你喜欢看什么体育比赛？\",\"你平时参加什么运动？\",\"体育运动对你有什么帮助？\"]\n> - 心理情感: [\"你压力大的时候会怎么做？\",\"你怎么保持积极情绪？\",\"你会和朋友分享心情吗？\"]\n> - 专业课程: [\"你的专业是什么？\",\"你为什么选择这个专业？\",\"你最喜欢的专业课是什么？\"]\n> Level8:\n> - 语言文字: [\"你学中文遇到的最大困难是什么？\",\"你觉得汉字难吗？\",\"语言和文化有什么关系？\"]\n> - 政治经济: [\"你关注经济新闻吗？\",\"你觉得经济发展对普通人有什么影响？\",\"你了解中国的经济政策吗？\"]\n> - 法律事务: [\"你了解哪些法律常识？\",\"在你的国家，法律如何保护消费者？\",\"你觉得法律和道德有什么不同？\"]\n> - 哲学: [\"你思考过人生的意义吗？\",\"你读过哲学方面的书吗？\",\"你觉得幸福是什么？\"]\n> - 历史: [\"你喜欢历史吗？\",\"你了解中国的哪些历史？\",\"历史对今天的生活有什么影响？\"]\n> Level9:\n> - 学术研究: [\"你做过学术研究吗？\",\"你觉得学术研究最重要的是什么？\",\"你关注过哪些学术问题？\"]\n> - 政策法规: [\"你了解哪些公共政策？\",\"政策法规如何影响留学生活？\",\"你关注过教育政策吗？\"]\n> - 商业贸易: [\"你了解国际贸易吗？\",\"电子商务给商业带来什么变化？\",\"你做过生意吗？\"]\n> - 国际事务: [\"你关注哪些国际新闻？\",\"国际合作对世界有什么意义？\",\"你怎么看气候变化等全球问题？\"]\n> \n> This is good. Could incorporate in code as `topicQuestionMap`. If no specific map, fallback to level templates.\n> \n> But generating system prompt? Could include:\n> ```\n> 你是一位经验丰富的国际中文教育口语陪练，严格依据《国际中文教育中文水平等级标准》进行教学设计。\n> 当前学生等级：${levelName}（${level}级）\n> 当前话题：${topic}\n> 教学要求：\n> 1. 使用适合该等级的词汇和语法，避免超纲过多。\n> 2. 围绕话题进行互动提问，每次只问一个问题。\n> 3. 如果学生句子有语法错误，先重复正确句子，再简要指出。\n> 4. 对难词可提供拼音或英文解释。\n> 5. 保持友好、鼓励。\n> 6. 用中文回答，必要时可补充英文。\n> ```\n> Maybe ask model to be concise.\n> \n> Opening:\n> ```\n> 你好！我是你的中文口语陪练 🎓\n> 今天的话题是【${topic}】（${levelName}）。\n> 你可以点击下面的问题开始，也可以直接输入你想说的话。\n> ```\n> Good.\n> \n> Demo response function: It should be somewhat educational:\n> ```\n> function demoResponse(userText){\n> const t = state.currentTopic;\n> const qs = state.config.questions;\n> const reply = [\n> `你说得很好！关于“${t}”，我还想再问你：${qs[Math.floor(Math.random()*qs.length)]}`,\n> `我明白了。${qs[...]}`,\n> `有意思！你能再说说为什么吗？`\n> ];\n> return reply[Math.floor(Math.random()*reply.length)];\n> }\n> ```\n> Maybe not use too many random questions. Good.\n> \n> But if user config API, actual model used.\n> \n> Need voice input. Web Speech API only in Chrome. We'll implement with fallback toast.\n> \n> Need TTS. Use speechSynthesis.\n> \n> Memory: maybe `state.memory.userMessages` push user text. `state.memory.turns++`. Could also add `corrections` via simple local check? We can implement a basic correction heuristic? Not necessary. But the \"评估\" action can call LLM for correction. For demo, if no API key, we can generate a generic evaluation:\n> - \"评估反馈：你的表达很自然。建议多使用完整句子。继续加油！\"\n> We'll add an \"评估\" button in chat header maybe or as an action button below last AI message. Maybe action buttons in composer: 📝 评估, 🧠 记忆. The prompt says \"动作\" component. We can include buttons for voice,朗读,评估,记忆,导出. Good.\n> \n> Let's implement action bar maybe above composer: `动作：🎤 语音输入 | 🔊 朗读最后回复 | 📝 评估 | 🧠 记忆 | 🧹 新对话`.\n> \n> Actually composer already has voice and speak. Add evaluation button.\n> \n> Need maybe include \"默认三个提问\" chips under messages.\n> \n> Let's create complete code. Need be mindful of HTML escaping in JS template literals. Use plain JS. The code will be long. We need output in final. Could include no markdown? We can wrap in ```html. The code can be copy-pasted.\n> \n> Let's write meticulously.\n> \n> Pseudo JS:\n> \n> ```\n> const LEVELS = [ ... correct list ... ];\n> \n> const topicQuestionMap = { ... };\n> \n> const state = { ... };\n> \n> const els = {};\n> \n> document.addEventListener('DOMContentLoaded', init);\n> \n> function init(){\n> els = {...};\n> loadConfig();\n> loadMemory();\n> populateLevelSelect();\n> renderTopics();\n> bindEvents();\n> applyConfigUI();\n> }\n> ```\n> \n> Need ensure first load: state.currentLevel='1', currentTopic= first topic of level 1. Then `setActiveTopic(topic, false)` maybe.\n> \n> `renderTopics()`:\n> - get topics for current level.\n> - innerHTML buttons; active class if currentTopic.\n> - each button text topic.\n> \n> `setActiveTopic(topic, reset=true)`:\n> - state.currentTopic = topic;\n> - update header;\n> - generate questions and opening maybe if reset. But on initial, no messages.\n> - save memory current topic.\n> - if reset `startConversation`.\n> \n> `startConversation()`:\n> - state.history = [];\n> - state.memory.turns = 0; state.memory.userMessages = []; state.memory.corrections=[]; state.memory.newWords = [];\n> - clear messages.\n> - generate config.questions = generateDefaultQuestions(...) (unless overwritten? maybe always dynamic)\n> - config.openingMessage = generateOpening(...) or from settings? User can edit opening in settings. But if we auto generate each topic, maybe editable system prompt/opening in settings? Could allow. But the planning component includes prompt, opening, default three questions. We can display these in settings modal, with fields: system prompt, opening message, default questions (textareas). On topic change, auto regenerate unedited.\n> - addMessage('assistant', opening);\n> - renderQuickQuestions().\n> \n> Need if user opens settings, we show current systemPrompt, openingMessage, questions. Save edits to state.config. But if level/topic change, maybe regenerate. It's okay.\n> \n> Memory save/load: We'll store `memory` but conversation history maybe not. Use localStorage.\n> \n> Important: `localStorage` may fail in sandbox? fine.\n> \n> `addMessage(role, content)`:\n> - state.history.push({role, content});\n> - append to messages. Use `textContent` for user? But maybe include HTML. We'll use textContent to avoid XSS, but newlines? Could set innerText. `div.innerText = content`. Good.\n> \n> Auto scroll.\n> \n> `renderQuickQuestions()`:\n> - container.innerHTML = state.config.questions.map((q,i)=>``).join('');\n> - bind clicks.\n> \n> `toggleMemoryDrawer(open)`.\n> \n> `openSettings()` set values.\n> \n> `saveSettings()` read fields.\n> \n> `callLLM`:\n> ```\n> async function getAIResponse(userText){\n> const system = state.config.systemPrompt || generateSystemPrompt();\n> const messages = [{role:'system', content: system}, ...state.history.slice(-20)];\n> // If no apiKey, demo\n> if (!state.config.apiKey) return demoResponse(userText);\n> try { ... } catch { toast('模型调用失败，已切换演示回复'); return demoResponse(userText); }\n> }\n> ```\n> \n> Need ensure system prompt is up-to-date before call. On topic change regenerate. User might edit; use state.config.systemPrompt.\n> \n> `sendMessage()`:\n> - const text = input.value.trim(); if empty return.\n> - addMessage('user', text);\n> - state.memory.userMessages.push(text);\n> - state.memory.turns += 1;\n> - show typing indicator.\n> - const reply = await getAIResponse(text);\n> - remove typing indicator; addMessage('assistant', reply);\n> - if auto speak maybe not.\n> - input.value=''\n> \n> `handleQuickAsk(q)`:\n> - input.value = q; sendMessage(); or addMessage user then call.\n> \n> `evaluateLast()`:\n> - if no user messages? toast.\n> - If API key, build messages: system evaluation prompt + history; call model.\n> - Else demo evaluation.\n> - Add evaluation as AI message maybe with \"📝 评估反馈：...\"\n> - Update memory.corrections push.\n> Implementation: \n> ```\n> async function evaluate(){\n> const userMsgs = state.history.filter(m=>m.role==='user');\n> if(!userMsgs.length){ toast('请先进行对话'); return; }\n> const lastUser = userMsgs[userMsgs.length-1].content;\n> let feedback;\n> if(state.config.apiKey) {\n> const sys = `你是国际中文教育评估专家。请根据《国际中文教育中文水平等级标准》${state.currentLevelName}水平，对学生的句子进行简短反馈：先肯定，再指出1-2个语法或词汇问题（如无问题就说表达自然），最后给一个更地道的说法。用中文，不超过100字。`;\n> const messages=[{role:'system', content:sys},{role:'user',content:lastUser}];\n> feedback = await callOpenAI(messages);\n> } else {\n> feedback = `【模拟评估】你说得很好！建议多使用完整的句子，并注意“了”“的”等虚词。继续加油！`;\n> }\n> addMessage('assistant', `📝 评估反馈：${feedback}`);\n> state.memory.corrections.push({input:lastUser, feedback});\n> }\n> ```\n> But `callOpenAI` may throw. We'll wrap.\n> \n> `speakLastAI()`:\n> - get last assistant message text; speechSynthesis.\n> \n> `clearChat()`:\n> - confirm? reset current topic.\n> \n> `exportMemory()`:\n> - create blob JSON state.memory; download.\n> \n> Need implement `callOpenAI(messages)` separate:\n> ```\n> async function callOpenAI(messages, temp=state.config.temperature){\n> const base = state.config.baseUrl.replace(/\\/$/,'');\n> const endpoint = `${base}/chat/completions`;\n> const resp = await fetch(endpoint, { ...});\n> if(!resp.ok){ const err = await resp.text(); throw new Error(err); }\n> const data = await resp.json();\n> return data.choices[0].message.content.trim();\n> }\n> ```\n> Need note some base URLs include `/v1` already. Good.\n> \n> Potential CORS: browser may block. We can mention that API calls from browser may need CORS. But not problem. Could also use proxy? No. We'll add note in settings: \"请确保 API 服务允许浏览器跨域访问，或使用兼容网关\". Good.\n> \n> Need maybe include temperature.\n> \n> Now craft topicQuestionMap for all topics to be accurate as above.\n> \n> Let's write final HTML. It will be large. We need avoid errors.\n> \n> Let's start writing final. Ensure code uses `const LEVELS = [...]` with corrected list. Need maybe include `level` string \"1\" etc.\n> \n> Implement CSS carefully.\n> \n> Let's produce final response with concise intro then code block. Need not overly verbose. But maybe user expects just HTML.\n> \n> Let's ensure no syntax errors in JS. We'll be meticulous.\n> \n> Possible issues:\n> - When using template literals inside HTML script, okay.\n> - Use `innerHTML` with question strings. If topic contains characters like `<`? no.\n> - In `topicQuestionMap` use keys exactly as topic names. For level6 \"社会交往\" instead of \"土会交往\". \n> - For level3 \"集体活动\" instead of \"体活动\".\n> \n> Let's draft code.\n> \n> Need include `lang=\"zh-CN\"` in HTML.\n> \n> Full code below in final. But before final, let's maybe run mental check.\n> \n> The topic data:\n> ```\n> const LEVELS = [\n> {level:\"1\", name:\"一级\", topics:[\"个人信息\",\"日常起居\",\"饮食\",\"交通\",\"兴趣爱好\"]},\n> ...\n> {level:\"6\", name:\"六级\", topics:[\"社会交往\",\"公司事务\",\"矛盾纷争\",\"社会新闻\",\"中外比较\"]},\n> ...\n> ]\n> ```\n> \n> Question map:\n> ```\n> const topicQuestions = {\n> \"个人信息\": [\"你叫什么名字？\",\"你今年多大？\",\"你住在哪个城市？\"],\n> ...\n> }\n> ```\n> \n> Generate:\n> ```\n> function generateQuestions(level, topic){\n> if(topicQuestions[topic]) return topicQuestions[topic].slice();\n> const l = parseInt(level);\n> const templates = {\n> 1:[`你喜欢${topic}吗？为什么？`,`你经常做什么和${topic}有关的事？`,`请简单介绍一下${topic}。`],\n> ...\n> };\n> return (templates[level]||templates[1]).map(s=>s.replaceAll('${topic}', topic));\n> }\n> ```\n> But if using `replaceAll('${topic}', topic)`. In template string, `${topic}` inside backticks will attempt interpolation. Need escape: use string concatenation or avoid template literal. We can use array of functions:\n> ```\n> 1: [\n> (t)=>`你喜欢${t}吗？为什么？`,\n> (t)=>`你经常做什么和${t}有关的事？`,\n> ...\n> ]\n> ```\n> Then return templates[level].map(fn=>fn(topic)).\n> Good.\n> \n> Need `generateSystemPrompt(levelName, level, topic)`: use template literal.\n> \n> `generateOpening(levelName, topic)`: returns.\n> \n> `init`:\n> ```\n> els.levelSelect.innerHTML = LEVELS.map(l=>``).join('');\n> els.levelSelect.value = state.currentLevel;\n> renderTopics();\n> if (!state.config.openingMessage) state.config.openingMessage = generateOpening(...);\n> if (!state.config.systemPrompt) state.config.systemPrompt = generateSystemPrompt(...);\n> if (!state.config.questions.length) state.config.questions = generateQuestions(...);\n> startConversation(false?) \n> ```\n> But startConversation will generate. Let's manage:\n> - state has `config.questions` array.\n> - In `init`, load from localStorage may have questions. But we want auto per topic. Simpler: on every topic select, regenerate system prompt, opening, questions and overwrite state config. Settings can still show them. If user edits system prompt, and changes topic, will regenerate and lose edits. That's okay.\n> - In `startConversation`, set `state.config.questions = generateQuestions(...)`, `openingMessage = generateOpening(...)`, `systemPrompt = generateSystemPrompt(...)`. This may overwrite user edits. Accept.\n> \n> - `loadConfig` and `loadMemory` before populate. In `loadConfig`, if saved config exists, set. But then later `startConversation` may overwrite. So maybe don't load system prompt/opening questions? We'll still load API settings.\n> \n> State:\n> ```\n> const state = {\n> currentLevel: '1',\n> currentTopic: '个人信息',\n> currentLevelName: '一级',\n> history: [],\n> config: {\n> baseUrl:'https://api.openai.com/v1',\n> apiKey:'',\n> model:'gpt-4o-mini',\n> temperature:0.7,\n> systemPrompt:'',\n> openingMessage:'',\n> questions:[]\n> },\n> memory: { turns:0, userMessages:[], corrections:[], newWords:[] }\n> };\n> ```\n> \n> `loadConfig` only loads baseUrl, apiKey, model, temp maybe. Not prompt.\n> \n> `startConversation` sets prompts.\n> \n> Could include settings textarea for system prompt, opening, questions. After `startConversation`, call `syncSettingsFields()` if modal open? not necessary. We'll set when opening modal.\n> \n> `openSettings()`:\n> ```\n> els.settingBaseUrl.value = state.config.baseUrl;\n> ...\n> els.settingSystemPrompt.value = state.config.systemPrompt || generateSystemPrompt(...);\n> els.settingOpening.value = state.config.openingMessage || generateOpening(...);\n> els.settingQuestions.value = state.config.questions.join('\\n');\n> ```\n> \n> `saveSettings()`:\n> ```\n> state.config.baseUrl = ...;\n> state.config.apiKey = ...;\n> state.config.model = ...;\n> state.config.temperature = parseFloat(...);\n> state.config.systemPrompt = els.settingSystemPrompt.value.trim();\n> state.config.openingMessage = els.settingOpening.value.trim();\n> state.config.questions = els.settingQuestions.value.split('\\n').map(s=>s.trim()).filter(Boolean).slice(0,3);\n> localStorage.setItem('aiChineseConfig', JSON.stringify({ baseUrl, apiKey, model, temperature }));\n> toast('设置已保存');\n> close modal;\n> renderQuickQuestions(); maybe also update opening? We might not want to re-add opening. We'll only update questions.\n> ```\n> If questions length zero, fallback generated.\n> \n> Need `renderQuickQuestions` from state.config.questions.\n> \n> `saveMemory`:\n> ```\n> localStorage.setItem('aiChineseMemory', JSON.stringify(state.memory));\n> ```\n> On `loadMemory` set.\n> \n> But localStorage may have old memory with topic? we can load. On topic change memory resets.\n> \n> Memory drawer content:\n> ```\n> els.memoryContent.innerHTML = `\n>

🧠 当前记忆

\n>

等级：${state.currentLevelName} 话题：${state.currentTopic}

\n>

对话轮数：${state.memory.turns}

\n>

🗣️ 学生发言

\n>

${escapeHtml(m)}

\n>

📝 评估记录

\n> ...\n> `;\n> ```\n> Need `escapeHtml` for safety.\n> \n> Use `escapeHtml` for any `innerHTML` with user content.\n> \n> When `addMessage`, can use `innerText` so safe. For chips, innerHTML with escapeHtml.\n> \n> Implement `toast(msg)`.\n> \n> Voice:\n> ```\n> function startVoice() {\n> const SR = window.SpeechRecognition || window.webkitSpeechRecognition;\n> if(!SR){ toast('当前浏览器不支持语音识别，请使用 Chrome'); return; }\n> const rec = new SR();\n> rec.lang='zh-CN';\n> rec.interimResults=false;\n> rec.onresult = e => { els.userInput.value = e.results[0][0].transcript; };\n> rec.onerror = e => toast('语音识别错误: '+e.error);\n> rec.start();\n> }\n> ```\n> \n> TTS:\n> ```\n> function speak(text) {\n> if(!window.speechSynthesis) return;\n> const u = new SpeechSynthesisUtterance(text);\n> u.lang='zh-CN';\n> u.rate=0.9;\n> speechSynthesis.cancel();\n> speechSynthesis.speak(u);\n> }\n> ```\n> \n> Need handle send button.\n> \n> Now, the final output may be large. Let's produce code block.\n> \n> But before final, let's maybe think if there is any requirement \"结合 AI 智能体的组成要素：大模型、规划（提示词，开场白，默认三个提问）、记忆、动作。\" The webpage should explicitly show these elements. We can include in settings modal with tabs or fields for planning; memory drawer shows memory; actions as buttons. Big model config in settings modal. Good.\n> \n> Potential additions:\n> - In header maybe \"大模型: 演示模式/已连接\" indicator.\n> - Top actions include \"🧠 记忆\" \"⚙️ 大模型\". Good.\n> \n> We can also include \"规划\" label in settings. The modal should include \"规划（提示词 / 开场白 / 默认提问）\" section.\n> \n> Let's refine settings modal content:\n> ```\n>

\n>

⚙️ 大模型与规划

\n>

API Base URL

\n> ...\n>

🧭 规划

\n> 系统提示词\n> 开场白\n> 默认三个提问（每行一个）\n>

\n>

...\n> ```\n> Maybe fields with emoji.\n> \n> Need maybe memory drawer with close button.\n> \n> Let's ensure CSS handles drawer; use fixed right.\n> \n> Let's produce.\n> \n> One concern: In HTML, if user content contains `` etc, escapeHtml for settings. Fine.\n> \n> Another: in `renderQuickQuestions`, `state.config.questions` may contain HTML; escape.\n> \n> Now final code. Need ensure not use unsupported `replaceAll`? Fine in modern browsers. But we use functions so no.\n> \n> Let's write final code.\n> \n> Potential JS bug: `state.config.questions = generateQuestions(...)` returns array. In settings textarea, `.join('\\n')`. On `saveSettings`, `.split('\\n')...`. Good.\n> \n> `generateQuestions` for default if map missing uses functions object:\n> ```\n> const levelQuestionGenerators = {\n> 1: [\n> t => `你喜欢${t}吗？为什么？`,\n> ...\n> ],\n> ...\n> };\n> ```\n> \n> Need `generateQuestions`:\n> ```\n> function generateQuestions(level, topic) {\n> if (topicQuestions[topic]) return [...topicQuestions[topic]];\n> const gens = levelQuestionGenerators[level] || levelQuestionGenerators['1'];\n> return gens.map(fn => fn(topic));\n> }\n> ```\n> \n> Now `init`:\n> ```\n> function init(){\n> els = {...};\n> loadConfig();\n> loadMemory();\n> populateLevelSelect();\n> renderTopics();\n> bindEvents();\n> updateHeader();\n> startConversation();\n> }\n> ```\n> But `renderTopics` maybe calls `setActiveTopic`? We can set currentTopic maybe from memory or first. Implementation:\n> ```\n> function renderTopics() {\n> const level = LEVELS.find(l=>l.level===state.currentLevel);\n> const topics = level.topics;\n> if (!topics.includes(state.currentTopic)) {\n> state.currentTopic = topics[0];\n> }\n> els.topicList.innerHTML = topics.map(topic=>``).join('');\n> }\n> ```\n> Need `state.currentLevelName = level.name`.\n> \n> But if load memory with currentTopic not in list? Update.\n> \n> `bindEvents`: topicList click delegation:\n> ```\n> els.topicList.addEventListener('click', e=>{\n> const btn = e.target.closest('.topic-item');\n> if(!btn) return;\n> selectTopic(btn.dataset.topic);\n> });\n> ```\n> \n> `selectLevel`: set currentLevel, state.currentLevelName, renderTopics, selectTopic(first topic).\n> But if `renderTopics` sets currentTopic from maybe previous level; then `selectTopic` called on first. Simpler:\n> ```\n> function onLevelChange(e){\n> state.currentLevel = e.target.value;\n> state.currentLevelName = LEVELS.find(l=>l.level===state.currentLevel).name;\n> const topics = getTopics();\n> state.currentTopic = topics[0];\n> renderTopics();\n> startConversation();\n> }\n> ```\n> Need `renderTopics` use currentTopic.\n> \n> `selectTopic(topic)`:\n> ```\n> state.currentTopic = topic;\n> updateHeader();\n> startConversation();\n> ```\n> \n> `updateHeader`:\n> ```\n> els.activeTopic.textContent = state.currentTopic;\n> els.activeLevel.textContent = state.currentLevelName;\n> els.headerTopic.textContent = `${state.currentLevelName}·${state.currentTopic}`;\n> ```\n> \n> `startConversation`:\n> ```\n> state.history = [];\n> state.memory = { turns:0, userMessages:[], corrections:[], newWords:[] };\n> state.config.systemPrompt = generateSystemPrompt(...);\n> state.config.openingMessage = generateOpening(...);\n> state.config.questions = generateQuestions(...);\n> els.messages.innerHTML='';\n> addMessage('assistant', state.config.openingMessage);\n> renderQuickQuestions();\n> saveMemory();\n> ```\n> \n> Need caution: `addMessage` uses `state.history.push`, which we just cleared. Good.\n> \n> `addMessage`:\n> ```\n> function addMessage(role, content) {\n> state.history.push({role, content});\n> const div = document.createElement('div');\n> div.className = `message ${role}`;\n> const bubble = document.createElement('div');\n> bubble.className = 'bubble';\n> bubble.innerText = content;\n> const actions = ...\n> div.appendChild(bubble);\n> if(role === 'assistant') {\n> const acts = document.createElement('div');\n> acts.className = 'msg-actions';\n> acts.innerHTML = '';\n> div.appendChild(acts);\n> }\n> els.messages.appendChild(div);\n> scrollToBottom();\n> }\n> ```\n> Maybe add speech button per assistant bubble. Need event delegation. Use `data-action=\"speak\"`.\n> \n> In `bindEvents`, messages click:\n> ```\n> els.messages.addEventListener('click', e=>{\n> const btn = e.target.closest('.msg-speak');\n> if(btn){ const bubble = btn.closest('.message').querySelector('.bubble'); speak(bubble.innerText); }\n> });\n> ```\n> \n> `renderQuickQuestions`:\n> ```\n> els.quickQuestions.innerHTML = `

✨ 默认三个提问

` + state.config.questions.map(q=>``).join('');\n> ```\n> Clicks delegated.\n> \n> Need `clearChat` maybe button. In header maybe \"新对话\". We can add `btnClear` in top-actions. On click `if(confirm('开始新对话并清空当前记忆？')) startConversation();`.\n> \n> Buttons bind:\n> - btnSend click sendMessage\n> - userInput keydown Enter send (shift+enter newline)\n> - btnVoice click startVoice\n> - btnSpeak click speak last AI\n> - btnEval click evaluate\n> - btnMemory click toggle memory drawer\n> - btnSettings click open settings\n> - btnClear click clear conversation\n> - close settings, save settings\n> - close memory\n> \n> Need memory drawer `btnCloseMemory`.\n> \n> Implement `getLastAssistantContent`:\n> ```\n> function getLastAssistantContent() {\n> const arr = state.history.filter(m=>m.role==='assistant');\n> return arr.length ? arr[arr.length-1].content : '';\n> }\n> ```\n> \n> Evaluate function:\n> ```\n> async function evaluate() {\n> const userMsgs = state.history.filter(m=>m.role==='user');\n> if(!userMsgs.length) { toast('请先输入至少一句话'); return; }\n> toast('评估中...');\n> const lastUser = userMsgs[userMsgs.length-1].content;\n> let feedback;\n> try {\n> if(state.config.apiKey){\n> const sys = `你是国际中文教育评估专家。根据《国际中文教育中文水平等级标准》${state.currentLevelName}，请对学生的句子进行简短反馈：先肯定优点，再指出1-2个可改进的语法或词汇问题（若无问题则说表达自然），最后给一个更地道的说法。用中文，不超过120字。`;\n> feedback = await callOpenAI([{role:'system',content:sys},{role:'user',content:lastUser}]);\n> } else {\n> feedback = `【模拟评估】你的表达基本清楚。建议多使用完整句子，并注意“了”“的”等虚词。继续加油！`;\n> }\n> addMessage('assistant', `📝 评估反馈：${feedback}`);\n> state.memory.corrections.push({input:lastUser, feedback});\n> saveMemory();\n> } catch(e) { toast('评估失败：'+e.message); }\n> }\n> ```\n> \n> Call `callOpenAI` if API key. Good.\n> \n> Need `callOpenAI`:\n> ```\n> async function callOpenAI(messages, temp=state.config.temperature) {\n> const base = state.config.baseUrl.replace(/\\/+$/,'');\n> const url = `${base}/chat/completions`;\n> const response = await fetch(url, {\n> method:'POST',\n> headers:{'Content-Type':'application/json','Authorization':'Bearer '+state.config.apiKey},\n> body: JSON.stringify({model: state.config.model, messages, temperature: temp})\n> });\n> if(!response.ok) { const text=await response.text(); throw new Error(`HTTP ${response.status}: ${text.slice(0,200)}`); }\n> const data = await response.json();\n> if(!data.choices || !data.choices[0] || !data.choices[0].message) throw new Error('响应格式错误');\n> return data.choices[0].message.content.trim();\n> }\n> ```\n> \n> `getAIResponse(userText)`:\n> ```\n> async function getAIResponse(userText){\n> if(!state.config.apiKey) return demoResponse(userText);\n> try{\n> const messages = [\n> {role:'system', content: state.config.systemPrompt},\n> ...state.history.slice(-20) // note state.history already includes last user and prior\n> ];\n> const reply = await callOpenAI(messages);\n> return reply;\n> } catch(e) {\n> toast('模型调用失败，已使用演示回复');\n> return demoResponse(userText);\n> }\n> }\n> ```\n> Need careful: `state.history` at call includes new user message? In sendMessage we push before call. Good.\n> \n> `demoResponse`:\n> ```\n> function demoResponse(){\n> const qs = state.config.questions.length ? state.config.questions : generateQuestions(...);\n> const replies = [\n> `我明白你的意思了。关于“${state.currentTopic}”，我还想问：${qs[0]}`,\n> `你说得很好！那么，${qs[1]}`,\n> `有意思！${qs[2]}`,\n> `谢谢你的分享。能不能再说得详细一点？`\n> ];\n> return replies[Math.floor(Math.random()*replies.length)];\n> }\n> ```\n> Maybe avoid repeating same question if just asked. Fine.\n> \n> Need `typingIndicator`:\n> ```\n> function showTyping(){\n> els.typing = document.createElement('div');\n> els.typing.className='message assistant';\n> els.typing.innerHTML='

';\n> els.messages.appendChild(els.typing);\n> scrollToBottom();\n> }\n> function removeTyping(){ if(els.typing){ els.typing.remove(); els.typing=null; } }\n> ```\n> Need CSS for .typing spans.\n> \n> Now settings modal open:\n> ```\n> function openSettings(){\n> els.cfgBase.value = state.config.baseUrl;\n> ...\n> els.cfgQuestions.value = state.config.questions.join('\\n');\n> els.settingsModal.classList.add('show');\n> }\n> ```\n> Close: remove show.\n> \n> LocalStorage config:\n> ```\n> function loadConfig(){\n> try{\n> const saved = localStorage.getItem('aiChineseConfig');\n> if(saved){\n> const c = JSON.parse(saved);\n> Object.assign(state.config, c);\n> }\n> }catch(e){}\n> }\n> function saveConfig(){ localStorage.setItem('aiChineseConfig', JSON.stringify({baseUrl:...,apiKey:...,model:...,temperature:...})); }\n> ```\n> Do not save prompts? We can save too maybe. But prompts generated on topic. Save system prompt? Could include; but if saved and then topic changes, overwritten. But okay. Save all config fields.\n> \n> Memory:\n> ```\n> function loadMemory(){\n> try{\n> const saved = localStorage.getItem('aiChineseMemory');\n> if(saved){\n> const m = JSON.parse(saved);\n> if(m) state.memory = m;\n> }\n> }catch(e){}\n> }\n> function saveMemory(){ localStorage.setItem('aiChineseMemory', JSON.stringify(state.memory)); }\n> ```\n> But `startConversation` resets memory then saves.\n> \n> Potential issue: On initial load, state.memory.turns maybe from previous conversation; then startConversation resets. Good.\n> \n> Need maybe update memory drawer content when opened.\n> \n> Now final CSS/HTML. Let's craft carefully. The page is responsive:\n> - topbar fixed? maybe sticky.\n> - container flex.\n> - sidebar width 260px.\n> - chat area flex 1.\n> - memory drawer fixed overlay right, width 340px.\n> - modal.\n> \n> Let's write final code in final.\n> \n> Need ensure no markdown errors. We'll wrap in ```html.\n> \n> Let's produce.\n

AI 中文实践智能体

🧠 智能体记忆

⚙️ 大模型与规划