目录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 CSS3Flex布局响应式提供现代化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值越高生成越具创造性最大Token512~16384默认6144限制生成长度Top P0~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?affUP4F注册并获取免费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){consturlhttps://api.aigc.bar/v1/chat/completions;constpayload{model,messages:promptMessages,temperature,max_tokens,top_p,stream:true};constresponseawaitfetch(url,{method:POST,headers:{Content-Type:application/json,Authorization:Bearer${apiKey}},body:JSON.stringify(payload)});constreaderresponse.body.getReader();constdecodernewTextDecoder();letbuffer;while(true){const{done,value}awaitreader.read();if(done)break;bufferdecoder.decode(value,{stream:true});constlinesbuffer.split(\n);bufferlines.pop();for(constlineoflines){if(line.startsWith(data: )){constdataline.slice(6);if(data[DONE])continue;constparsedJSON.parse(data);constdeltaparsed.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密钥请点击页面中的“获取密钥”按钮或直接访问 此网站 注册免费账户。