品牌网站建设多少钱/网站搜索工具

智能写作引导系统前端设计总结

一、系统概述

智能写作引导系统是融合人工智能与前端交互的创新写作辅助工具，旨在为用户提供实时灵感激发与写作指导，提升智慧教学与创作效率。

---

二、系统功能模块划分

1. 顶部工具栏模块

• 提供总控操作。
• 包括结构分析入口、AI写作助手开关、功能按钮（润色、结构优化、续写、例证、名言警句等）。
• 支持开启“沉浸写作模式”。

2. 左侧文章结构助手区

• 分层UI展示全文结构：
  • 包括主题、段落论点、分论点、例证、段落主旨。
• 实现实时结构分析与更新。

3. 右侧AI写作助手

• 聊天式界面，支持输入、交互、AI建议呈现。
• 提供流式响应（打字机效果）、建议采纳、复制、重新生成等功能。

4. 中央写作编辑区

• 文本编辑功能；
• 支持自动/主动文本选中并触发写作辅助功能；
• 弹窗流式输出推荐内容与理由。

---

三、核心功能实现

1. 文本选择与高亮机制

两种选中模式：

• 自动选中：鼠标悬停按钮时自动选中句子或段落；
• 主动选中：用户鼠标拖选文本后激活辅助功能。

核心变量：

• isUserSelected：标记用户主动选中优先级；
• highlightMode：句子/段落高亮模式；
• highlightRange：高亮文本范围。

核心函数与事件处理：

• handleMouseDown()：清除预测性高亮；
• handleHover()：调用高亮函数；
• handleTextSelection()：应用高亮并存储旧文本；
• highlightSentence()：根据标点推断句子或段落；
• applyHighlight()：用 <span> 添加高亮样式；
• 鼠标相关事件绑定：mouseenter、mouseleave、click、mousedown 等。

---

2. AI写作助手实现

核心特点：

• 即时对话；
• 流式响应；
• 操作集成（一键采纳建议）；
• 上下文感知。

主函数 sendAssistantPrompt() 流程：

1. 校验输入合法；
2. 构造用户消息并加入对话列表；
3. 发送API请求；
4. 接收并流式更新AI返回的消息内容；
5. 完成或异常处理；
6. 使用 Fetch API 和 Server-Sent Events 实现流式更新。

后端逻辑：

• 使用 LangChain 构建 Prompt；
• 注入文章结构与历史对话，生成上下文相关回答。

def generate_chat_response(self, messages: list):dialog_history = "\n".join(f"{msg['role']}: {msg['content']}"for msg in messages[-10:]  # 取最近10条对话)prompt = f"""
你是一名专业的写作辅导助手，请根据对话历史、当前文段、当前文段主旨和文章结构框架，回答用户问题。【对话历史】:
{dialog_history}【当前文段】:
{self.paragraph_text}【当前文段主旨】:
{self.full_topic}【文章结构框架】:
{self.paragraph_topic}请用简洁、专业的语言回复，注意以下几点：
1. 回答要贴近学生实际写作内容；
2. 回应要有逻辑清晰、语言准确；
3. 避免冗长重复，突出重点建议；
4. 如有建议可列条表达。
"""llm = model_to_llm(self.model, self.temperature)try:for chunk in llm.stream(prompt):print(chunk)yield chunkexcept Exception as e:yield f"生成失败: {str(e)}"

左侧文章结构助手设计与实现

设计目标

左侧文章结构助手是智能写作引导系统的核心组件之一，功能包括：

• 实时分析用户输入的文章内容；
• 自动生成并展示文章的结构框架和段落主旨；
• 帮助用户更好地组织和优化文章内容。

---

核心设计理念

• 实时分析：定时检测文本变化并触发结构解析；
• 层次化展示：结构包括标题、主题、子观点、例证、结论；
• 可视化呈现：使用图标与颜色区分结构要素，增强阅读性；
• 交互式操作：提供“刷新”按钮手动更新结构分析。

---

重要变量

currentStructure = {title: "",themes: [],conclusion: ""
}paragraphSummary // 当前段落的主旨摘要// 定时总结相关状态变量
lastUpdatedText: ''               // 上次更新的文本
lastUpdatedTime: 0                // 上次更新时间戳
isWaitingForResponse: false       // 是否等待响应
summaryTimer: null                // 总结定时器
checkTimer: null                  // 检查定时器
paragraphEnd: false               // 是否为段落结束
charCountSinceLastUpdate: 0       // 新增字符数
isSummaryActive: true             // 总结功能是否启用

---

核心方法说明

1. sendSummaryRequest()

async sendSummaryRequest() {if (!this.lastUpdatedText.trim() || this.isWaitingForResponse) return;this.isWaitingForResponse = true;try {const payload = {text: this.lastUpdatedText,isParagraphEnd: this.paragraphEnd,currentStructure: this.currentStructure};const response = await fetch('/api/summarize-text', {method: 'POST',headers: {'Content-Type': 'application/json',},body: JSON.stringify(payload)});if (response.ok) {const data = await response.json();if (data.status === 'ok') {this.currentStructure = data.full_structure;this.paragraphSummary = data.paragraph_summary;this.charCountSinceLastUpdate = 0;this.paragraphEnd = false;}}} catch (error) {console.error('总结请求失败:', error);} finally {this.isWaitingForResponse = false;}
}

功能说明：

• 将当前输入内容发送后端进行结构总结；
• 成功后更新结构信息和段落主旨；
• 避免重复请求，提升效率。

---

2. checkTextUpdates()

function checkTextUpdates() {const newText = getCurrentText();const charDelta = newText.length - lastUpdatedText.length;if (charDelta > 10 || isNewParagraph(newText)) {lastUpdatedText = newText;paragraphEnd = isNewParagraph(newText);sendSummaryRequest();}
}

功能说明：

• 每 3 秒定时触发；
• 若字符增量 > 10 或换行，立即总结；
• 保证响应灵敏且性能稳定。

---

3. toggleSummaryFeature()

function toggleSummaryFeature() {isSummaryActive = !isSummaryActive;if (!isSummaryActive && summaryTimer) {clearInterval(summaryTimer);summaryTimer = null;} else {summaryTimer = setInterval(checkTextUpdates, 3000);}
}

功能说明：

• 切换自动总结开关；
• 允许用户自由控制自动结构更新行为。

---