当前位置：首页 > ops >正文

山东大学项目实训——基于DeepSeek的智能写作与训练平台（十四）

ops 2025/6/15 14:22:10

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

一、系统概述

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

二、系统功能模块划分

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()` 流程：

校验输入合法；
构造用户消息并加入对话列表；
发送API请求；
接收并流式更新AI返回的消息内容；
完成或异常处理；
使用 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);}
}