博主智算菩萨，专注于人工智能、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 快速开始步骤

1. 将完整HTML代码保存为.html文件，用浏览器打开。
2. 点击工具栏中的 “获取密钥” 按钮（跳转至 https://api.aigc.bar/register?aff=UP4F 注册并获取免费API密钥）。
3. 将密钥粘贴到 “API 密钥” 输入框，模型名称保持默认的 gemini-2.5-flash-lite（或更换为其他兼容模型）。
4. 在参数面板中选择 文章类型（如“议论文”）和 字数（如“600字左右”），可按需调整温度、风格等。
5. 在下方文本框输入作文题目或具体要求（例如：“以‘诚信’为话题，写一篇议论文”），点击 “生成作文”。
6. AI将流式返回作文内容，右侧显示文体指导；完成后可点击气泡内的“复制”按钮保存文本。

4.2 界面区域划分

区域	主要组件	用户操作
顶部工具栏	API密钥输入框、模型名、获取密钥按钮、写作参数开关	填写密钥、获取密钥、展开/折叠参数面板
参数面板	文体、字数、风格、温度等下拉/输入框	选择本次写作的具体要求
左侧边栏	作品集列表、新写作任务按钮	查看历史作品、新建任务、切换会话
中央区域	对话消息区、文本输入框、生成按钮	查看已生成作文、输入新要求、触发生成
右侧边栏	写作建议卡片	获取当前文体的写作指导
底部状态栏	状态提示文本	了解当前操作状态（生成中/完成/错误）

5. 关键代码解析

5.1 流式生成核心函数

async function callOpenAIStream(promptMessages, onChunk, model, apiKey, temperature, max_tokens, top_p) {
    const url = "https://api.aigc.bar/v1/chat/completions";
    const payload = { model, messages: promptMessages, temperature, max_tokens, top_p, stream: true };
    const response = await fetch(url, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${apiKey}` },
        body: JSON.stringify(payload)
    });
    const reader = response.body.getReader();
    const decoder = new TextDecoder();
    let buffer = '';
    while(true) {
        const { done, value } = await reader.read();
        if(done) break;
        buffer += decoder.decode(value, { stream: true });
        const lines = buffer.split('\n');
        buffer = lines.pop();
        for(const line of lines) {
            if(line.startsWith('data: ')) {
                const data = line.slice(6);
                if(data === '[DONE]') continue;
                const parsed = JSON.parse(data);
                const delta = 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密钥，请点击页面中的“获取密钥”按钮或直接访问 此网站 注册免费账户。