目录
- 1. 项目背景与目标
- 2. 系统架构与技术选型
- 2.1 整体架构
- 2.2 关键技术点
- 3. 核心功能详解
- 3.1 文体与字数选择
- 3.2 会话管理
- 3.3 写作指导侧边栏
- 4. 使用流程与界面说明
- 4.1 快速开始步骤
- 4.2 界面区域划分
- 5. 关键代码解析
- 5.1 流式生成核心函数
- 5.2 提示词工程
- 6. 数据持久化与安全
- 6.1 存储机制
- 6.2 API密钥安全
- 7. 扩展与优化方向
- 8. 总结
博主智算菩萨，专注于人工智能、Python编程、音视频处理及UI窗体程序设计等方向。致力于以通俗易懂的方式拆解前沿技术，从零基础入门到高阶实战，陪伴开发者共同成长。目前已开设五大技术专栏，累计发布多篇原创技术文章，深受读者好评。
📌 专栏导航
- 人工智能前沿知识：深度剖析Transformer架构、生成式AI、强化学习、具身智能、神经符号系统、大模型及智能体（Agent）技术，系统性解析AI核心技术体系与前沿趋势。
- Python基础小白编程：从零开始，以保姆式教程讲解变量、数据类型、流程控制、函数等核心语法，配有大量实战代码与避坑指南，真正做到学以致用。
- 机器学习与深度学习：系统化拆解线性模型、决策树、随机森林、梯度提升树、神经网络等算法原理与工程实践，覆盖从公式推导到代码实现的全链路内容。
- 音频、图像与视频处理理论与实战：涵盖FFmpeg多媒体处理、audio_shop开源工具、ComfyUI-WanVideoWrapper视频生成等实用技术，从基础操作到高级应用一应俱全。
- UI窗体程序设计实战：深入讲解UI设计、动态窗体生成、游戏UI框架设计等实战技巧，提供从配置到编码的完整解决方案。
智算菩萨，以代码为经，以算法为纬，在人工智能的星辰大海中，做你前行路上最可靠的导航者。
1. 项目背景与目标
随着大语言模型（LLM）技术日趋成熟，AI辅助写作已成为提升写作效率和质量的重要工具。针对中文写作场景，尤其是学生、教师、自媒体创作者对议论文、记叙文、散文等不同文体的需求，本文设计并实现了一款纯前端中文作文智能体。该工具采用单HTML文件架构，对接OpenAI格式API（默认使用gemini-2.5-flash-lite模型），提供文体选择、字数控制、风格调节、会话管理等功能，并能实时流式生成高质量中文作文。具体资源见https://download.csdn.net/download/nmdbbzcl/92843325
项目主要目标：
- 零后端部署：完全在浏览器中运行，利用localStorage持久化数据。
- 多文体支持：涵盖议论文、说明文、实用类文本、记叙文、散文、小说、诗歌、文言文等8种常见文体。
- 参数灵活调节：字数、温度、Top P等可调，满足不同写作难度与风格需求。
- 写作指导集成：右侧侧边栏动态展示当前文体的写作要点，辅助用户构思。
- 会话管理：支持多篇作品独立保存，随时切换继续创作。
2. 系统架构与技术选型
2.1 整体架构
系统采用经典的三栏布局：左侧会话列表、中央对话区、右侧写作指导栏。所有界面逻辑与API通信均由原生JavaScript实现，不依赖任何前端框架。
| 模块 | 技术实现 | 作用 |
|---|---|---|
| 界面渲染 | HTML5 + CSS3（Flex布局，响应式） | 提供现代化UI，自适应移动端 |
| 流式文本处理 | Fetch API + ReadableStream + marked库 | 实时逐块渲染Markdown格式的作文内容 |
| 会话存储 | localStorage | 保存所有历史对话及元数据，刷新不丢失 |
| API通信 | POST请求至https://api.aigc.bar/v1/chat/completions | 调用OpenAI格式模型，支持流式与非流式 |
| 写作指导动态更新 | 监听文体下拉框，切换对应内容 | 根据文体类型给出针对性写作建议 |
2.2 关键技术点
- 流式生成：通过
response.body.getReader()逐块读取SSE数据，实时更新到对话气泡，大幅提升用户体验。 - Markdown渲染：集成
marked.min.js，将模型返回的富文本（标题、列表、代码块等）渲染为HTML。 - 一键复制：AI生成的作文气泡内含“复制”按钮，点击即可将纯文本复制到剪贴板。
- 自动标题生成：首次用户消息自动截取前40个字符作为会话标题。
3. 核心功能详解
3.1 文体与字数选择
用户必须在参数面板中选择文章类型和字数要求（均为必选项）。系统将这些参数拼接到系统提示中，引导模型生成符合规范的内容。
| 参数 | 可选值 | 说明 |
|---|---|---|
| 文章类型 | 议论文、说明文、实用类文本、记叙文、散文、小说、诗歌、文言文 | 决定文章基调和结构 |
| 字数要求 | 300字、600字、800字、1500字、2000字、3000字 | 控制篇幅，模型尽力遵守 |
| 语言风格 | 平实朴素、生动形象、典雅庄重、幽默风趣、简洁凝练、文艺抒情（可选） | 进一步微调用词倾向 |
| 温度 | 0~2，默认0.85 | 值越高生成越具创造性 |
| 最大Token | 512~16384，默认6144 | 限制生成长度 |
| Top P | 0~1，默认0.95 | 核采样参数，控制词汇多样性 |
3.2 会话管理
系统采用localStorage存储所有会话，数据结构如下：
{"zw_conv_1678901234567_abc":{"messages":[{"role":"user","content":"以“青春”为题写一篇散文","timestamp":"..."},{"role":"assistant","content":"青春，是一首未完的诗……","timestamp":"..."}],"title":"以“青春”为题写一篇散文","lastUpdated":1678901234567}}功能包括：
- 新建任务：清空当前对话，创建新会话。
- 切换会话：点击左侧历史记录，自动加载该会话所有消息。
- 自动保存：每次用户发送消息或AI回复后，立即更新存储。
3.3 写作指导侧边栏
右侧“写作锦囊”区域包含两个卡片：
- 动态写作建议：根据用户选择的文体（如议论文），给出该文体的结构要点、常用手法等。
- 通用技巧：固定展示扣题、层次、修辞等普适性建议。
该功能通过监听genreSelect的change事件实现动态更新，无API调用，纯前端逻辑。
4. 使用流程与界面说明
4.1 快速开始步骤
- 将完整HTML代码保存为
.html文件，用浏览器打开。 - 点击工具栏中的“获取密钥”按钮（跳转至
https://api.aigc.bar/register?aff=UP4F注册并获取免费API密钥）。 - 将密钥粘贴到“API 密钥”输入框，模型名称保持默认的
gemini-2.5-flash-lite（或更换为其他兼容模型）。 - 在参数面板中选择文章类型（如“议论文”）和字数（如“600字左右”），可按需调整温度、风格等。
- 在下方文本框输入作文题目或具体要求（例如：“以‘诚信’为话题，写一篇议论文”），点击“生成作文”。
- AI将流式返回作文内容，右侧显示文体指导；完成后可点击气泡内的“复制”按钮保存文本。
4.2 界面区域划分
| 区域 | 主要组件 | 用户操作 |
|---|---|---|
| 顶部工具栏 | API密钥输入框、模型名、获取密钥按钮、写作参数开关 | 填写密钥、获取密钥、展开/折叠参数面板 |
| 参数面板 | 文体、字数、风格、温度等下拉/输入框 | 选择本次写作的具体要求 |
| 左侧边栏 | 作品集列表、新写作任务按钮 | 查看历史作品、新建任务、切换会话 |
| 中央区域 | 对话消息区、文本输入框、生成按钮 | 查看已生成作文、输入新要求、触发生成 |
| 右侧边栏 | 写作建议卡片 | 获取当前文体的写作指导 |
| 底部状态栏 | 状态提示文本 | 了解当前操作状态（生成中/完成/错误） |
5. 关键代码解析
5.1 流式生成核心函数
asyncfunctioncallOpenAIStream(promptMessages,onChunk,model,apiKey,temperature,max_tokens,top_p){consturl="https://api.aigc.bar/v1/chat/completions";constpayload={model,messages:promptMessages,temperature,max_tokens,top_p,stream:true};constresponse=awaitfetch(url,{method:'POST',headers:{'Content-Type':'application/json','Authorization':`Bearer${apiKey}`},body:JSON.stringify(payload)});constreader=response.body.getReader();constdecoder=newTextDecoder();letbuffer='';while(true){const{done,value}=awaitreader.read();if(done)break;buffer+=decoder.decode(value,{stream:true});constlines=buffer.split('\n');buffer=lines.pop();for(constlineoflines){if(line.startsWith('data: ')){constdata=line.slice(6);if(data==='[DONE]')continue;constparsed=JSON.parse(data);constdelta=parsed.choices[0]?.delta?.content;if(delta)onChunk(delta);}}}}该函数通过流式读取并解析SSE格式数据，每收到一个文本块就调用onChunk回调，实现打字机效果。
5.2 提示词工程
为了确保模型输出符合中文作文规范，系统设计了严格的系统提示和用户提示：
系统提示：
"你是一位资深中文写作导师，擅长撰写各类文体……只输出作文正文，无需额外评价。"用户提示模板：
请根据以下要求创作一篇优秀的中文作文：\n文体：议论文\n字数要求：600字左右\n语言风格倾向：典雅庄重\n作文题目/具体要求：以“青春与奋斗”为题……
这种结构化的提示能有效约束模型的输出格式和内容质量。
6. 数据持久化与安全
6.1 存储机制
所有会话数据均存储在浏览器localStorage中，键名为zw_conversations。同时单独保存zw_lastConvId以记录最后打开的会话。由于存储容量限制（通常5-10MB），适合保存数十个普通长度的作文对话。
6.2 API密钥安全
密钥通过浏览器内存中的变量传递，不存储在任何服务器。用户需自行保管密钥，建议仅在使用时填入，用完可清除。页面不会主动发送密钥至第三方服务。
7. 扩展与优化方向
当前版本已实现完整的中文作文辅助功能，未来可从以下方向迭代：
- 导出功能：支持将生成的作文导出为Markdown、PDF或TXT文件。
- 评分与反馈：接入额外API，对作文进行自动评分并提供修改建议。
- 多模型切换：允许用户自定义API端点，支持私有化部署模型。
- 语音输入：集成浏览器语音识别，方便口述题目。
- 夜间模式：增加主题切换，提升长时间写作的舒适度。
8. 总结
本文介绍的中文作文智能体是一个轻量级、开箱即用的AI写作辅助工具。它结合了大语言模型的强大生成能力与精心设计的交互界面，让用户能够便捷地选择文体、控制字数，并获得针对性的写作指导。通过流式响应与本地存储，提供了流畅的创作体验。开发者可根据需要自由修改HTML代码，适配不同教学或创作场景。完整源代码已在文中附上，欢迎广大教育工作者、学生及开发者试用并改进。
如需获取API密钥，请点击页面中的“获取密钥”按钮或直接访问 此网站 注册免费账户。
