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

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

news 2026/3/27 6:43:41

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;charset=utf-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(title="mT5文本增强 - 带历史记录版") as demo: gr.Markdown("# mT5文本增强服务") # 原有输入输出组件... with gr.Row(): with gr.Column(): input_text = gr.Textbox(label="输入文本", lines=3) num_return_sequences = gr.Slider(1, 10, value=3, label="生成数量") # 其他参数组件... augment_btn = gr.Button("开始增强", variant="primary") with gr.Column(): output_text = gr.Textbox(label="增强结果", lines=10) # 新增历史记录面板 with gr.Row(): with gr.Column(): gr.Markdown("## 📋 历史记录") history_output = gr.JSON(label="历史记录", visible=False) history_table = gr.Dataframe( headers=["时间", "输入文本", "生成数量"], datatype=["str", "str", "number"], interactive=False, label="最近操作记录" ) with gr.Row(): export_btn = gr.Button("导出JSON", variant="secondary") clear_btn = gr.Button("清空历史", variant="stop") # 原有处理函数... 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( fn=augment_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;charset=utf-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(title="mT5文本增强 - 带历史记录版", js=custom_js)

5.2 添加历史记录更新函数

在Python端添加更新历史记录的函数：

def update_history_display(): """从前端获取历史记录并格式化显示""" # 这个函数主要通过JavaScript实现 # Python端主要负责触发更新 return [] # 连接清空和导出按钮 clear_btn.click( fn=lambda: None, inputs=None, outputs=None, js="clearHistory" ) export_btn.click( fn=lambda: None, inputs=None, outputs=None, js="exportHistory" )