mT5分类增强版中文-baseWebUI定制：添加历史记录本地存储与JSON导出功能

mT5分类增强版中文-baseWebUI定制添加历史记录本地存储与JSON导出功能1. 项目背景与价值如果你正在使用文本增强工具来处理中文内容可能会遇到一个常见问题每次生成的结果都需要手动复制保存时间一长就找不到之前的工作记录了。特别是当需要处理大量文本时这种重复性的复制粘贴工作既耗时又容易出错。mT5分类增强版中文-base模型是一个强大的文本增强工具它在原有mT5模型基础上使用了大量中文数据进行训练并引入了零样本分类增强技术。这意味着模型不需要额外的训练就能处理各种文本增强任务而且输出稳定性大幅提升。但是原生的Web界面缺少一个关键功能历史记录管理。本文将为你展示如何为这个强大的工具添加本地存储和JSON导出功能让你的文本增强工作更加高效和有序。2. 功能需求分析在开始编码之前我们先明确需要实现哪些功能核心功能需求自动保存每次的文本增强记录包括输入文本和所有生成结果支持查看历史记录能够按时间排序和搜索提供一键导出功能可以将历史记录保存为JSON文件支持清空历史记录释放本地存储空间用户体验需求界面简洁易用与原WebUI风格保持一致操作流程自然不增加用户的学习成本数据存储安全可靠避免意外丢失3. 环境准备与代码结构在开始修改之前确保你已经部署了mT5分类增强版中文-base模型。WebUI的主要文件是webui.py我们将在这个文件中添加新功能。首先备份原始文件cp /root/nlp_mt5_zero-shot-augment_chinese-base/webui.py /root/nlp_mt5_zero-shot-augment_chinese-base/webui.py.backup新的代码结构将在原有功能基础上增加历史记录管理模块。主要修改包括在页面布局中添加历史记录面板实现本地存储功能使用浏览器localStorage添加JSON导出功能完善历史记录的管理界面4. 核心代码实现4.1 本地存储功能实现首先我们需要在JavaScript中实现本地存储功能。在WebUI的HTML模板中添加以下代码// 保存历史记录到本地存储 function saveToHistory(inputText, results, params) { const timestamp new Date().toISOString(); const historyItem { id: Date.now(), // 唯一ID timestamp: timestamp, input: inputText, results: results, params: params }; // 获取现有历史记录 let history JSON.parse(localStorage.getItem(mt5_augment_history) || []); // 添加新记录 history.unshift(historyItem); // 限制历史记录数量最多保存100条 if (history.length 100) { history history.slice(0, 100); } // 保存回本地存储 localStorage.setItem(mt5_augment_history, JSON.stringify(history)); return historyItem; } // 从本地存储加载历史记录 function loadHistory() { return JSON.parse(localStorage.getItem(mt5_augment_history) || []); } // 清空历史记录 function clearHistory() { localStorage.removeItem(mt5_augment_history); return []; }4.2 JSON导出功能实现接下来实现导出功能让用户可以将历史记录保存为JSON文件// 导出历史记录为JSON文件 function exportHistory() { const history loadHistory(); if (history.length 0) { alert(没有历史记录可导出); return; } const dataStr JSON.stringify(history, null, 2); const dataUri data:application/json;charsetutf-8, encodeURIComponent(dataStr); const exportFileDefaultName mt5_augment_history_${new Date().toISOString().slice(0,10)}.json; const linkElement document.createElement(a); linkElement.setAttribute(href, dataUri); linkElement.setAttribute(download, exportFileDefaultName); linkElement.click(); }4.3 历史记录界面集成现在我们需要在WebUI界面中添加历史记录面板。在Gradio界面定义中添加相应的组件import json import gradio as gr from datetime import datetime # 在原有界面基础上添加历史记录组件 with gr.Blocks(titlemT5文本增强 - 带历史记录版) as demo: gr.Markdown(# mT5文本增强服务) # 原有输入输出组件... with gr.Row(): with gr.Column(): input_text gr.Textbox(label输入文本, lines3) num_return_sequences gr.Slider(1, 10, value3, label生成数量) # 其他参数组件... augment_btn gr.Button(开始增强, variantprimary) with gr.Column(): output_text gr.Textbox(label增强结果, lines10) # 新增历史记录面板 with gr.Row(): with gr.Column(): gr.Markdown(## 历史记录) history_output gr.JSON(label历史记录, visibleFalse) history_table gr.Dataframe( headers[时间, 输入文本, 生成数量], datatype[str, str, number], interactiveFalse, label最近操作记录 ) with gr.Row(): export_btn gr.Button(导出JSON, variantsecondary) clear_btn gr.Button(清空历史, variantstop) # 原有处理函数... def augment_text(text, num_return_sequences, max_length, temperature, top_k, top_p): # 原有的文本增强逻辑... results [...] # 获取增强结果 # 保存到历史记录 history_item { timestamp: datetime.now().isoformat(), input: text, results: results, params: { num_return_sequences: num_return_sequences, max_length: max_length, temperature: temperature, top_k: top_k, top_p: top_p } } # 这里需要将历史记录保存到前端实际实现需要通过JavaScript return results, history_item # 连接按钮和函数 augment_btn.click( fnaugment_text, inputs[input_text, num_return_sequences, max_length, temperature, top_k, top_p], outputs[output_text, history_output] )5. 完整集成方案由于Gradio的限制我们需要使用JavaScript来实现完整的历史记录功能。以下是完整的集成方案5.1 修改webui.py文件在webui.py文件中添加自定义JavaScript代码# 在demo.launch()之前添加自定义JS custom_js script // 历史记录管理功能 function setupHistory() { // 初始化历史记录 if (!localStorage.getItem(mt5_augment_history)) { localStorage.setItem(mt5_augment_history, JSON.stringify([])); } // 保存历史记录函数 window.saveToHistory function(inputText, results, params) { const timestamp new Date().toISOString(); const historyItem { id: Date.now(), timestamp: timestamp, input: inputText, results: results, params: params }; let history JSON.parse(localStorage.getItem(mt5_augment_history) || []); history.unshift(historyItem); // 限制最多100条记录 if (history.length 100) { history history.slice(0, 100); } localStorage.setItem(mt5_augment_history, JSON.stringify(history)); updateHistoryDisplay(); return historyItem; }; // 更新历史记录显示 function updateHistoryDisplay() { const history JSON.parse(localStorage.getItem(mt5_augment_history) || []); const tableData history.map(item [ new Date(item.timestamp).toLocaleString(), item.input.length 50 ? item.input.substring(0, 47) ... : item.input, item.params.num_return_sequences || 1 ]); // 更新Gradio组件 if (window.gradio_api) { gradio_api( predict, [JSON.stringify(tableData)], (data) {}, history_table ); } } // 导出功能 window.exportHistory function() { const history JSON.parse(localStorage.getItem(mt5_augment_history) || []); if (history.length 0) { alert(没有历史记录可导出); return; } const dataStr JSON.stringify(history, null, 2); const dataUri data:application/json;charsetutf-8, encodeURIComponent(dataStr); const exportFileDefaultName mt5_augment_history_${new Date().toISOString().slice(0,10)}.json; const linkElement document.createElement(a); linkElement.setAttribute(href, dataUri); linkElement.setAttribute(download, exportFileDefaultName); linkElement.click(); }; // 清空历史 window.clearHistory function() { if (confirm(确定要清空所有历史记录吗此操作不可撤销。)) { localStorage.setItem(mt5_augment_history, JSON.stringify([])); updateHistoryDisplay(); alert(历史记录已清空); } }; // 初始加载时更新显示 setTimeout(updateHistoryDisplay, 1000); } // 页面加载完成后设置历史记录功能 document.addEventListener(DOMContentLoaded, setupHistory); /script # 在demo创建时注入自定义JS demo gr.Blocks(titlemT5文本增强 - 带历史记录版, jscustom_js)5.2 添加历史记录更新函数在Python端添加更新历史记录的函数def update_history_display(): 从前端获取历史记录并格式化显示 # 这个函数主要通过JavaScript实现 # Python端主要负责触发更新 return [] # 连接清空和导出按钮 clear_btn.click( fnlambda: None, inputsNone, outputsNone, jsclearHistory ) export_btn.click( fnlambda: None, inputsNone, outputsNone, jsexportHistory )6. 使用指南与最佳实践6.1 如何使用新功能查看历史记录启动WebUI后你会看到新增的历史记录面板。每次进行文本增强操作后记录会自动保存并显示在表格中。导出历史记录点击导出JSON按钮系统会将所有历史记录保存为一个JSON文件方便你进行后续分析或备份。清空历史记录如果需要释放存储空间可以点击清空历史按钮确认后所有记录将被删除。6.2 最佳实践建议定期导出备份建议每周导出一次历史记录避免意外丢失数据利用历史记录进行分析导出的JSON文件可以用于分析文本增强的效果和模式合理管理存储空间系统自动保留最近100条记录旧的记录会被自动删除6.3 故障排除历史记录不显示检查浏览器是否支持localStorage尝试清除浏览器缓存后重新加载页面导出功能不正常检查浏览器是否阻止了文件下载尝试使用其他浏览器7. 总结通过本文的改造mT5分类增强版中文-base模型的WebUI获得了实用的历史记录管理功能。现在你可以自动保存每次文本增强的操作记录随时查看历史记录了解之前的工作内容一键导出所有记录为JSON文件方便后续分析轻松管理存储空间保持系统运行效率这个改进显著提升了工具的使用体验特别适合需要处理大量文本增强任务的用户。历史记录功能不仅方便回顾和查找还为质量分析和效果评估提供了宝贵的数据支持。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。