DeOldify Web界面汉化教程：修改前端i18n配置支持中英文双语切换

DeOldify Web界面汉化教程修改前端i18n配置支持中英文双语切换1. 为什么需要汉化DeOldify界面如果你用过DeOldify这个黑白照片上色工具可能会发现它的Web界面默认是英文的。对于很多国内用户来说满屏的英文按钮和提示用起来总感觉有点隔阂。特别是当你想要推荐给不太懂技术的朋友或者同事使用时一个中文界面能大大降低他们的使用门槛。想象一下这个场景你帮家里的长辈修复老照片他们看着全是英文的界面可能会问“这个按钮是干什么的”“上传图片点哪里”。这时候如果界面是中文的你只需要说“点那个‘选择文件’的按钮”一切就简单多了。今天我要分享的就是如何给DeOldify的Web界面加上中文支持让它能在中英文之间自由切换。整个过程不需要你懂前端框架也不需要复杂的代码修改跟着步骤一步步来半小时内就能搞定。2. 准备工作找到关键文件在开始修改之前我们需要先找到DeOldify项目中负责界面语言的文件。这个文件通常被称为“国际化配置文件”专业术语叫i18ninternationalization的缩写i和n之间有18个字母。2.1 定位项目目录首先你需要知道DeOldify服务安装在哪里。根据你提供的文档项目目录应该是/root/cv_unet_image-colorization/进入这个目录看看里面有什么cd /root/cv_unet_image-colorization ls -la你会看到类似这样的结构cv_unet_image-colorization/ ├── app.py # 主程序文件 ├── requirements.txt # 依赖包列表 ├── static/ # 静态文件CSS、JS、图片等 ├── templates/ # HTML模板文件 ├── i18n/ # 语言配置文件这个可能不存在需要创建 └── ...2.2 理解Web界面结构DeOldify的Web界面通常是用Flask或Gradio这样的Python Web框架搭建的。我们需要找到显示文字的地方HTML模板文件在templates/目录下通常是index.html或app.htmlPython后端代码在app.py或类似的主程序文件中JavaScript文件在static/js/目录下不过很多现代Web应用都使用i18n框架来管理多语言。如果DeOldify没有内置这个功能我们就需要自己添加。3. 创建双语配置文件既然DeOldify原版可能没有多语言支持我们就从零开始搭建。这个方法适用于大多数基于Python的Web应用。3.1 创建语言文件目录首先创建存放语言文件的目录mkdir -p /root/cv_unet_image-colorization/i18n cd /root/cv_unet_image-colorization/i18n3.2 创建英文语言文件创建en.json文件这是英文界面的文字定义{ app_title: Image Colorization Service, upload_area_title: Click or drag image here to upload, upload_area_subtitle: Supports JPG, PNG, JPEG, BMP, TIFF, WEBP, url_input_placeholder: Enter image URL address, colorize_from_url: Colorize from URL, start_colorize: Start Colorization, original_image: Original Image, colored_result: Colored Result, save_image: Save Image, processing: Processing..., upload_success: Image uploaded successfully, colorize_success: Colorization completed, error_no_image: Please upload an image first, error_upload_failed: Upload failed, error_colorize_failed: Colorization failed, file_too_large: File size exceeds limit (max 50MB), invalid_format: Unsupported image format, waiting_model: Model is loading, please wait..., estimated_time: Estimated time: {seconds} seconds, download: Download, reset: Reset, language: Language, english: English, chinese: Chinese }3.3 创建中文语言文件创建zh.json文件这是中文界面的文字定义{ app_title: 图像上色服务, upload_area_title: 点击或拖拽图片到这里上传, upload_area_subtitle: 支持 JPG、PNG、JPEG、BMP、TIFF、WEBP 格式, url_input_placeholder: 输入图片URL地址, colorize_from_url: 从URL上色, start_colorize: 开始上色, original_image: 原始图片, colored_result: 上色结果, save_image: 保存图片, processing: 处理中..., upload_success: 图片上传成功, colorize_success: 上色完成, error_no_image: 请先上传图片, error_upload_failed: 上传失败, error_colorize_failed: 上色失败, file_too_large: 文件过大最大50MB, invalid_format: 不支持的图片格式, waiting_model: 模型加载中请稍候..., estimated_time: 预计时间{seconds}秒, download: 下载, reset: 重置, language: 语言, english: 英文, chinese: 中文 }4. 修改后端代码支持多语言现在我们需要修改Python后端代码让它能够读取这些语言文件并根据用户选择显示对应的语言。4.1 修改app.py文件找到/root/cv_unet_image-colorization/app.py文件在文件开头添加以下代码import json import os # 添加多语言支持 class I18n: def __init__(self): self.languages {} self.current_lang en # 默认英文 self.load_languages() def load_languages(self): 加载所有语言文件 i18n_dir os.path.join(os.path.dirname(__file__), i18n) if not os.path.exists(i18n_dir): os.makedirs(i18n_dir) # 加载英文 en_file os.path.join(i18n_dir, en.json) if os.path.exists(en_file): with open(en_file, r, encodingutf-8) as f: self.languages[en] json.load(f) else: # 默认英文文本 self.languages[en] { app_title: Image Colorization Service, start_colorize: Start Colorization, # ... 其他英文文本 } # 加载中文 zh_file os.path.join(i18n_dir, zh.json) if os.path.exists(zh_file): with open(zh_file, r, encodingutf-8) as f: self.languages[zh] json.load(f) def set_language(self, lang): 设置当前语言 if lang in self.languages: self.current_lang lang return True return False def get(self, key, defaultNone): 获取当前语言的文本 lang_dict self.languages.get(self.current_lang, {}) return lang_dict.get(key, default) # 创建全局i18n实例 i18n I18n()4.2 添加语言切换接口在app.py中找到路由定义的部分通常有app.route装饰器的地方添加以下路由app.route(/api/set_language, methods[POST]) def set_language(): 设置界面语言 data request.get_json() lang data.get(lang, en) if i18n.set_language(lang): return jsonify({ success: True, message: fLanguage switched to {lang} }) else: return jsonify({ success: False, message: fUnsupported language: {lang} }), 400 app.route(/api/get_texts, methods[GET]) def get_texts(): 获取当前语言的所有文本 lang request.args.get(lang, en) i18n.set_language(lang) # 返回当前语言的所有文本 texts i18n.languages.get(lang, {}) return jsonify({ success: True, texts: texts, current_lang: lang })4.3 修改主页面路由找到返回HTML页面的路由通常是/或/ui修改它以便将语言文本传递给前端app.route(/ui) def ui(): Web界面 # 获取语言参数默认为英文 lang request.args.get(lang, en) if lang not in [en, zh]: lang en i18n.set_language(lang) # 准备传递给模板的文本 template_texts { app_title: i18n.get(app_title, Image Colorization Service), upload_area_title: i18n.get(upload_area_title, Click or drag image here to upload), upload_area_subtitle: i18n.get(upload_area_subtitle, Supports JPG, PNG, JPEG, BMP, TIFF, WEBP), url_input_placeholder: i18n.get(url_input_placeholder, Enter image URL address), colorize_from_url: i18n.get(colorize_from_url, Colorize from URL), start_colorize: i18n.get(start_colorize, Start Colorization), original_image: i18n.get(original_image, Original Image), colored_result: i18n.get(colored_result, Colored Result), save_image: i18n.get(save_image, Save Image), language: i18n.get(language, Language), english: i18n.get(english, English), chinese: i18n.get(chinese, Chinese), current_lang: lang } return render_template(index.html, **template_texts)5. 修改前端HTML模板现在我们需要修改HTML模板文件让它能够显示中文并且支持语言切换。5.1 找到HTML模板文件通常模板文件在templates/index.html或templates/app.html。我们以index.html为例!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title{{ app_title }}/title link relstylesheet href{{ url_for(static, filenamecss/style.css) }} style /* 添加一些样式 */ .language-switcher { position: absolute; top: 20px; right: 20px; z-index: 1000; } .lang-btn { padding: 5px 15px; margin: 0 5px; border: 1px solid #ccc; background: white; cursor: pointer; border-radius: 4px; } .lang-btn.active { background: #007bff; color: white; border-color: #007bff; } .lang-btn:hover { background: #f8f9fa; } /style /head body !-- 语言切换器 -- div classlanguage-switcher button classlang-btn {% if current_lang en %}active{% endif %} onclickswitchLanguage(en) {{ english }} /button button classlang-btn {% if current_lang zh %}active{% endif %} onclickswitchLanguage(zh) {{ chinese }} /button /div div classcontainer h1{{ app_title }}/h1 !-- 上传区域 -- div classupload-area iduploadArea div classupload-icon/div div classupload-text div classupload-title{{ upload_area_title }}/div div classupload-subtitle{{ upload_area_subtitle }}/div /div input typefile idfileInput accept.jpg,.jpeg,.png,.bmp,.tiff,.webp styledisplay: none; /div !-- URL输入 -- div classurl-section input typetext idurlInput placeholder{{ url_input_placeholder }} button idurlBtn{{ colorize_from_url }}/button /div !-- 开始按钮 -- button idcolorizeBtn classprimary-btn {{ start_colorize }} /button !-- 结果显示 -- div classresult-section div classimage-container div classimage-box h3{{ original_image }}/h3 img idoriginalImage src altOriginal /div div classimage-box h3{{ colored_result }}/h3 img idcoloredImage src altColored button iddownloadBtn styledisplay: none; {{ save_image }} /button /div /div /div !-- 状态提示 -- div idstatusMessage classstatus-message/div /div script // 当前语言 let currentLang {{ current_lang }}; // 语言切换函数 function switchLanguage(lang) { if (lang currentLang) return; // 发送请求切换语言 fetch(/api/set_language, { method: POST, headers: { Content-Type: application/json, }, body: JSON.stringify({ lang: lang }) }) .then(response response.json()) .then(data { if (data.success) { // 刷新页面以应用新语言 window.location.href /ui?lang${lang}; } else { alert(Language switch failed: data.message); } }) .catch(error { console.error(Error:, error); alert(Failed to switch language); }); } // 页面加载时获取所有文本备用方案 window.addEventListener(DOMContentLoaded, function() { // 如果页面没有正确显示文本尝试从API获取 const elements document.querySelectorAll([data-i18n]); if (elements.length 0) { fetch(/api/get_texts?lang${currentLang}) .then(response response.json()) .then(data { if (data.success) { elements.forEach(element { const key element.getAttribute(data-i18n); if (data.texts[key]) { element.textContent data.texts[key]; } }); } }); } }); // 原有的上传和上色逻辑保持不变 document.getElementById(uploadArea).addEventListener(click, function() { document.getElementById(fileInput).click(); }); // ... 其他原有的JavaScript代码 /script /body /html5.2 添加动态文本更新可选增强如果你想要更流畅的语言切换体验不刷新页面可以添加以下JavaScript代码// 动态更新页面文本 function updatePageTexts(lang) { fetch(/api/get_texts?lang${lang}) .then(response response.json()) .then(data { if (data.success) { // 更新所有有data-i18n属性的元素 document.querySelectorAll([data-i18n]).forEach(element { const key element.getAttribute(data-i18n); if (data.texts[key]) { if (element.tagName INPUT element.type ! button) { element.placeholder data.texts[key]; } else { element.textContent data.texts[key]; } } }); // 更新按钮状态 document.querySelectorAll(.lang-btn).forEach(btn { btn.classList.remove(active); if (btn.getAttribute(data-lang) lang) { btn.classList.add(active); } }); currentLang lang; localStorage.setItem(preferred_language, lang); } }); } // 修改HTML给需要国际化的元素添加data-i18n属性 // 例如h1>cd /root/cv_unet_image-colorization ./scripts/restart.sh或者使用supervisorctlsupervisorctl restart cv-unet-colorization6.2 访问中文界面打开浏览器访问中文界面http://你的服务器IP:7860/ui?langzh你应该能看到界面标题变成图像上色服务上传区域显示中文提示按钮显示中文文本语言切换按钮显示英文/中文6.3 测试语言切换点击英文按钮页面应该刷新并显示英文界面。再点击中文按钮又切换回中文。如果一切正常你会看到类似这样的界面┌─────────────────────────────────────┐ │ 图像上色服务 │ │ ️ 语言切换[中文] [English] │ ├─────────────────────────────────────┤ │ │ │ ┌─────────────────────────────┐ │ │ │ │ │ │ │ 点击或拖拽图片到这里上传 │ │ │ │ 支持 JPG、PNG、JPEG... │ │ │ └─────────────────────────────┘ │ │ │ │ [输入图片URL地址] │ │ [从URL上色] │ │ │ │ [开始上色] │ │ │ │ ┌──────────┐ ┌──────────┐ │ │ │ 原始图片 │ │ 上色结果 │ │ │ │ │ │ │ │ │ └──────────┘ └──────────┘ │ └─────────────────────────────────────┘6.4 常见问题排查如果汉化没有生效可以按以下步骤排查问题1页面还是显示英文# 检查服务是否重启成功 supervisorctl status cv-unet-colorization # 查看日志是否有错误 tail -f /root/cv_unet_image-colorization/logs/error.log问题2语言切换按钮无效# 检查API接口是否正常 curl http://localhost:7860/api/get_texts?langzh # 应该返回JSON格式的中文文本问题3部分文本没有翻译检查zh.json文件中是否包含了所有需要的键值对确保每个英文文本都有对应的中文翻译。7. 扩展功能记住用户语言偏好为了让用户体验更好我们可以添加记住用户语言偏好的功能。这样用户下次访问时界面会自动显示他们上次选择的语言。7.1 修改后端代码在app.py中添加Cookie支持from flask import make_response app.route(/ui) def ui(): Web界面 # 首先尝试从Cookie获取语言偏好 lang request.cookies.get(preferred_language, en) # 然后尝试从URL参数获取优先级更高 url_lang request.args.get(lang) if url_lang in [en, zh]: lang url_lang # 设置语言 i18n.set_language(lang) # 准备文本同前 template_texts { app_title: i18n.get(app_title, Image Colorization Service), # ... 其他文本 current_lang: lang } # 创建响应并设置Cookie response make_response(render_template(index.html, **template_texts)) response.set_cookie(preferred_language, lang, max_age30*24*60*60) # 30天有效期 return response app.route(/api/set_language, methods[POST]) def set_language(): 设置界面语言 data request.get_json() lang data.get(lang, en) if i18n.set_language(lang): response jsonify({ success: True, message: fLanguage switched to {lang} }) # 设置Cookie response.set_cookie(preferred_language, lang, max_age30*24*60*60) return response else: return jsonify({ success: False, message: fUnsupported language: {lang} }), 4007.2 修改前端JavaScript更新语言切换函数使其在切换语言后设置Cookiefunction switchLanguage(lang) { if (lang currentLang) return; fetch(/api/set_language, { method: POST, headers: { Content-Type: application/json, }, body: JSON.stringify({ lang: lang }) }) .then(response response.json()) .then(data { if (data.success) { // 设置本地存储 localStorage.setItem(preferred_language, lang); // 如果支持动态更新就更新文本 if (window.updatePageTexts) { updatePageTexts(lang); } else { // 否则刷新页面 window.location.href /ui?lang${lang}; } } else { alert(Language switch failed: data.message); } }); } // 页面加载时检查语言偏好 window.addEventListener(DOMContentLoaded, function() { // 首先检查URL参数 const urlParams new URLSearchParams(window.location.search); const urlLang urlParams.get(lang); // 然后检查本地存储 const storedLang localStorage.getItem(preferred_language); // 最后检查Cookie由后端设置 // 优先级URL参数 本地存储 Cookie 默认英文 let preferredLang en; if (urlLang [en, zh].includes(urlLang)) { preferredLang urlLang; } else if (storedLang [en, zh].includes(storedLang)) { preferredLang storedLang; } // 如果当前语言不是偏好语言且不是从URL参数来的就切换 if (preferredLang ! currentLang !urlLang) { switchLanguage(preferredLang); } });8. 添加更多语言支持如果你需要支持更多语言比如日语、韩语等只需要8.1 创建新的语言文件例如添加日语支持创建ja.json{ app_title: 画像彩色化サービス, upload_area_title: クリックまたは画像をここにドラッグしてアップロード, upload_area_subtitle: JPG、PNG、JPEG、BMP、TIFF、WEBPをサポート, start_colorize: 彩色を開始, // ... 其他日语翻译 }8.2 更新后端代码在app.py的I18n类中添加日语支持def load_languages(self): 加载所有语言文件 i18n_dir os.path.join(os.path.dirname(__file__), i18n) # 支持的语言列表 supported_langs [en, zh, ja] # 添加ja for lang in supported_langs: lang_file os.path.join(i18n_dir, f{lang}.json) if os.path.exists(lang_file): with open(lang_file, r, encodingutf-8) as f: self.languages[lang] json.load(f)8.3 更新前端界面在HTML中添加日语切换按钮button classlang-btn {% if current_lang ja %}active{% endif %} onclickswitchLanguage(ja) 日本語 /button9. 总结与建议通过以上步骤我们成功为DeOldify图像上色服务添加了中英文双语支持。整个过程可以分为几个关键点9.1 主要步骤回顾创建语言配置文件在i18n/目录下创建en.json和zh.json分别存储英文和中文的界面文本修改后端代码在app.py中添加I18n类管理语言切换逻辑并添加相关的API接口修改前端模板更新HTML文件使用模板变量显示文本并添加语言切换按钮测试与调试重启服务测试中英文切换是否正常增强用户体验添加Cookie和本地存储记住用户的语言偏好9.2 实际应用建议在实际使用中你可能会遇到一些具体情况这里给出几点建议对于个人使用如果你只是自己用直接设置默认语言为中文即可可以简化代码去掉语言切换按钮只保留中文界面对于团队使用如果团队中有外国同事保留双语切换功能可以考虑根据浏览器语言自动选择界面语言对于公开服务建议保留多语言支持提升用户体验可以添加更多语言如日语、韩语等考虑使用专业的i18n库如Flask-Babel9.3 可能遇到的问题和解决方案问题添加新文本后界面不更新解决方案清除浏览器缓存或者给静态文件添加版本号问题某些特殊字符显示乱码解决方案确保所有文件都使用UTF-8编码在Python文件中添加# -*- coding: utf-8 -*-问题语言切换后部分文本还是英文解决方案检查zh.json文件中是否有对应的翻译确保键名完全一致9.4 进一步优化方向如果你想让汉化更加完善可以考虑动态加载语言文件不需要重启服务就能添加新语言翻译管理界面提供一个Web界面来管理和编辑翻译自动翻译集成翻译API自动翻译缺失的文本社区贡献让用户提交翻译改进像开源项目一样汉化一个工具不仅仅是技术工作更是让技术更贴近用户的过程。当你看到家人朋友能够轻松使用你汉化后的工具时那种成就感是实实在在的。希望这个教程能帮你更好地使用和分享DeOldify这个强大的图像上色工具。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。