fft npainting lama国际化支持：多语言界面切换功能开发计划

1. 项目背景与目标

1.1 当前系统现状

fft npainting lama 是一款基于深度学习的图像修复工具，由开发者“科哥”进行二次开发并构建了直观易用的WebUI界面。该系统能够实现图片重绘、瑕疵修复、物品移除等功能，在实际使用中表现出良好的稳定性和修复质量。

目前系统已具备完整的图像处理流程：

支持多种格式上传（PNG/JPG/WEBP）
提供画笔与橡皮擦工具精确标注修复区域
自动推理生成自然融合的结果图像
输出路径清晰可查，便于后续操作

然而，当前版本存在一个显著局限：界面语言仅支持中文。这在一定程度上限制了其在非中文用户群体中的推广和使用体验。

1.2 国际化需求分析

随着AI图像处理技术在全球范围内的普及，越来越多的海外用户开始关注并尝试使用本地化的图像编辑工具。从社区反馈来看，已有部分英文用户表达了对本系统的兴趣，但由于语言障碍导致操作困难，影响了整体使用效率。

因此，推进系统的多语言支持已成为提升用户体验、拓展应用边界的关键一步。

本次开发计划的核心目标是：
为 fft npainting lama WebUI 添加国际化支持，实现中英文界面自由切换，并预留扩展接口以支持未来更多语言。

2. 技术方案设计

2.1 架构选型与框架选择

考虑到当前WebUI基于Gradio构建，而Gradio原生并不直接提供多语言切换能力，我们需要引入外部机制来实现文本内容的动态替换。

最终确定的技术路线如下：

前端层面：利用 Gradio 的自定义HTML组件 + JavaScript 控制语言状态
后端层面：Python 字典结构管理多语言资源文件
状态管理：通过会话级变量保存用户选择的语言偏好
可维护性：采用模块化语言包设计，便于后期新增语种

这种轻量级方案无需重构现有UI结构，同时保证了良好的性能表现和扩展性。

2.2 多语言资源组织方式

我们将所有可翻译文本提取为独立的语言包文件，存储于/locales目录下：

/locales/ ├── zh_CN.json # 中文简体 └── en_US.json # 英文美式

每个语言包采用键值对形式定义：

{ "app_title": "图像修复系统", "tool_brush": "画笔工具", "action_start_repair": "开始修复", "status_upload_prompt": "等待上传图像并标注修复区域..." }

这种方式使得翻译工作可以交由专业人员完成，且不影响代码逻辑。

2.3 界面语言动态加载机制

为了实现实时切换，我们将在页面顶部添加一个语言选择器控件：

language_selector = gr.Dropdown( choices=[("🇨🇳 简体中文", "zh_CN"), ("🇺🇸 English", "en_US")], value="zh_CN", label="界面语言" )

当用户选择新语言时，触发以下流程：

更新会话语言标识
重新渲染所有文本组件
保持当前图像与标注状态不变

关键点在于：语言切换不应中断正在进行的编辑任务。

3. 功能实现步骤

3.1 文本提取与标签化

首先需要对现有界面中的所有静态文本进行梳理和归类。以下是主要文本类别及示例：

类别	示例原文
页面标题	图像修复系统
工具名称	画笔工具、橡皮擦工具
操作按钮	开始修复、清除
状态提示	初始化...、执行推理...
帮助说明	支持拖拽上传、建议分辨率

我们将这些文本统一替换为_(key)函数调用的形式，例如：

gr.Button(_("action_start_repair"))

其中_()是一个全局翻译函数，根据当前语言返回对应译文。

3.2 实现翻译函数

定义核心翻译逻辑：

import json from threading import local # 存储每种语言的词条 _translations = {} # 线程局部变量保存当前语言 _local = local() def load_translations(): for lang in ['zh_CN', 'en_US']: with open(f'locales/{lang}.json', 'r', encoding='utf-8') as f: _translations[lang] = json.load(f) def set_language(lang: str): _local.lang = lang def gettext(key: str) -> str: lang = getattr(_local, 'lang', 'zh_CN') return _translations[lang].get(key, key) # 简写别名 _ = gettext

该函数线程安全，适用于多用户并发场景。

3.3 集成语言切换控件

将语言选择器嵌入主界面顶部，并绑定事件响应：

def on_language_change(choice): lang_code = choice[1] # 获取如 "en_US" set_language(lang_code) # 返回所有需更新的文本组件 return [ gr.update(value=_("app_title")), gr.update(value=_("tool_brush")), gr.update(value=_("action_start_repair")), # ...其他组件 ] language_selector.change( fn=on_language_change, inputs=language_selector, outputs=[ title_text, brush_tool_label, start_button, # ... ] )

通过批量更新输出组件，实现整页语言刷新。

4. 用户体验优化

4.1 切换无感化设计

为了让语言切换更加平滑，我们采取以下措施：

保留上下文状态：不刷新页面或清空图像
渐变过渡效果：使用CSS淡入淡出动画缓解突兀感
默认记忆上次选择：通过浏览器Cookie记录偏好

// 在自定义HTML中注入脚本 document.getElementById('language-select').addEventListener('change', function() { const selectedLang = this.value; // 存储到本地 localStorage.setItem('ui_language', selectedLang); });

后端启动时读取该值作为初始语言。