如何搭建自己的网站平台,法律咨询东莞网站建设,深圳创业园,深圳公司网站建立智能写作引导系统前端设计总结
一、系统概述
智能写作引导系统是融合人工智能与前端交互的创新写作辅助工具#xff0c;旨在为用户提供实时灵感激发与写作指导#xff0c;提升智慧教学与创作效率。 二、系统功能模块划分
1. 顶部工具栏模块
提供总控操作。包括结构分析入…智能写作引导系统前端设计总结
一、系统概述
智能写作引导系统是融合人工智能与前端交互的创新写作辅助工具旨在为用户提供实时灵感激发与写作指导提升智慧教学与创作效率。 二、系统功能模块划分
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);}
}功能说明
切换自动总结开关允许用户自由控制自动结构更新行为。
