Fun-ASR-MLT-Nano-2512实操手册Gradio界面国际化i18n中英双语切换开发你是不是也遇到过这样的烦恼一个功能强大的AI工具比如这个支持31种语言的语音识别模型因为界面全是英文团队里不擅长英语的同事用起来总是磕磕绊绊。或者你想把工具分享给更广泛的用户却因为语言门槛把不少人挡在了门外。今天我们就来解决这个问题。我将手把手带你为Fun-ASR-MLT-Nano-2512的Gradio Web界面开发一套完整的中英双语切换功能。这不是简单的文字替换而是一个结构清晰、易于维护的国际化i18n方案。完成后你的用户只需点击一个按钮就能在中文和英文界面间无缝切换大大提升工具的易用性和专业性。1. 项目准备与环境理解在开始动工之前我们先花几分钟了解一下我们要改造的“房子”结构。这能让你在后续开发中清楚地知道每一行代码应该放在哪里为什么要放在那里。Fun-ASR-MLT-Nano-2512项目已经为我们提供了一个可运行的Gradio Web应用。它的核心入口是app.py文件。如果你打开它会看到它定义了网页的布局、组件的交互逻辑并启动了服务。我们的目标是在这个现有的架构上增加语言切换的“神经系统”而不破坏原有的语音识别“心脏”功能。这意味着我们需要分离文本将界面中所有显示给用户看的文字如按钮标签、标题、提示语从代码逻辑中抽离出来。创建字典为每种支持的语言我们先做中英文建立一个“词汇表”字典。动态渲染让Gradio在构建界面时能根据用户选择的语言从对应的“词汇表”里取出文字来显示。状态管理记住用户选择的语言并且在切换时整个界面的文字能立刻刷新。听起来有点抽象别担心跟着下面的步骤你会看到每一步是如何落地的。2. 第一步创建语言资源文件我们首先把界面上所有“活”的文字收集起来放到专门的文件里管理。这是国际化开发的标准做法好处是以后要加个德语、日语支持只需要新增文件不用去代码里大海捞针。在项目根目录下创建一个名为i18n的文件夹i18n是“国际化”的缩写因为i和n之间有18个字母。然后在里面创建两个Python字典文件文件i18n/locales.py# -*- coding: utf-8 -*- 国际化文本字典定义 # 英文文本字典 TEXT_EN { # 页面标题与描述 title: Fun-ASR-MLT-Nano-2512: Multilingual Speech Recognition, description: Upload or record audio, and get transcription in 31 languages., # 输入区域 input_audio_label: Input Audio, input_audio_placeholder: Click to upload OR drag drop audio file..., record_audio_btn: Record Audio, clear_audio_btn: Clear, # 参数设置区域 settings_title: Recognition Settings, language_label: Language, language_placeholder: Auto-detect or select..., enable_itn_label: Enable Inverse Text Normalization (ITN), enable_itn_info: Convert numbers, abbreviations to standard form., # 动作按钮 transcribe_btn: Transcribe, stop_btn: Stop, clear_all_btn: Clear All, # 输出区域 output_text_label: Transcription Result, output_placeholder: The recognized text will appear here..., # 状态与信息 status_ready: Ready. Upload an audio file or record., status_processing: Processing audio..., status_done: Transcription complete!, error_no_audio: Please provide an audio input first., error_processing: Recognition failed. Please try again., # 语言选择器本身 ui_language_label: Language / 语言, } # 中文文本字典 TEXT_ZH { # 页面标题与描述 title: Fun-ASR-MLT-Nano-2512: 多语言语音识别, description: 上传或录制音频可获得支持31种语言的文字转录。, # 输入区域 input_audio_label: 输入音频, input_audio_placeholder: 点击上传 或 拖放音频文件..., record_audio_btn: 录制音频, clear_audio_btn: 清空, # 参数设置区域 settings_title: 识别设置, language_label: 识别语言, language_placeholder: 自动检测 或 选择..., enable_itn_label: 启用文本规整 (ITN), enable_itn_info: 将数字、缩写等转换为标准书写形式。, # 动作按钮 transcribe_btn: 开始识别, stop_btn: 停止, clear_all_btn: 清空全部, # 输出区域 output_text_label: 识别结果, output_placeholder: 识别出的文字将显示在这里..., # 状态与信息 status_ready: 准备就绪。请上传音频文件或开始录制。, status_processing: 正在处理音频..., status_done: 识别完成, error_no_audio: 请先提供音频输入。, error_processing: 识别失败请重试。, # 语言选择器本身 ui_language_label: Language / 语言, } # 语言映射字典方便通过代码获取 LOCALES { en: TEXT_EN, zh: TEXT_ZH }这个文件就像我们项目的“短语手册”。键名如title是代码中引用的标识符值就是对应语言的实际文本。注意我们特意把语言选择器的标签“ui_language_label”设置成中英混合这样无论当前是什么界面语言用户都能看懂这个切换按钮是干什么的。3. 第二步改造主应用文件 (app.py)接下来我们要大修app.py。核心思想是界面不再写死文字而是从一个“当前语言字典”里动态获取。文件app.py(修改后)#!/usr/bin/env python3 # -*- coding: utf-8 -*- Fun-ASR-MLT-Nano-2512 WebUI with i18n (Internationalization) Support. import gradio as gr import os import sys import logging from typing import Dict, Any # --- 新增导入国际化文本 --- sys.path.append(os.path.dirname(os.path.abspath(__file__))) from i18n.locales import LOCALES # 设置日志 logging.basicConfig(levellogging.INFO) logger logging.getLogger(__name__) # --- 新增全局状态存储当前语言 --- # 默认语言为英文 CURRENT_LANG en # 获取当前语言的文本字典 def get_text(key: str) - str: 根据当前语言获取对应的文本 return LOCALES[CURRENT_LANG].get(key, key) # --- 修改语音识别处理函数保持不变 --- def transcribe_audio(audio_path, selected_language, enable_itn): 调用语音识别模型的核心函数。 这里简化表示实际需调用Fun-ASR模型。 if not audio_path: return get_text(error_no_audio) # 模拟处理过程 logger.info(fProcessing audio: {audio_path}, lang: {selected_language}, ITN: {enable_itn}) # 此处应替换为实际的模型调用例如 # from funasr import AutoModel # model AutoModel(model., trust_remote_codeTrue) # result model.generate(input[audio_path], languageselected_language, itnenable_itn) # return result[0][text] # 模拟返回 return f[{get_text(status_done)}] This is a simulated transcription result for demo. # --- 新增语言切换回调函数 --- def switch_language(lang: str): 切换界面语言。 这个函数会更新全局语言状态并返回一个字典 告诉Gradio哪些组件需要更新文本。 global CURRENT_LANG if lang in LOCALES: CURRENT_LANG lang logger.info(fLanguage switched to: {lang}) # 获取新语言下的所有文本 texts LOCALES[CURRENT_LANG] # 返回一个字典键是Gradio组件的引用值是要更新的属性 return { title_component: gr.update(valuetexts[title]), desc_component: gr.update(valuetexts[description]), audio_label: gr.update(labeltexts[input_audio_label]), audio_placeholder: gr.update(placeholdertexts[input_audio_placeholder]), record_btn: gr.update(valuetexts[record_audio_btn]), clear_btn: gr.update(valuetexts[clear_audio_btn]), settings_title_component: gr.update(valuetexts[settings_title]), lang_label: gr.update(labeltexts[language_label]), lang_placeholder: gr.update(placeholdertexts[language_placeholder]), itn_checkbox: gr.update(labeltexts[enable_itn_label], infotexts[enable_itn_info]), transcribe_btn_component: gr.update(valuetexts[transcribe_btn]), stop_btn_component: gr.update(valuetexts[stop_btn]), clear_all_btn_component: gr.update(valuetexts[clear_all_btn]), output_label: gr.update(labeltexts[output_text_label]), output_placeholder: gr.update(placeholdertexts[output_placeholder]), # 语言选择器自己的标签不需要变保持中英混合 } # --- 修改构建Gradio界面 --- def create_ui(): 创建Gradio Web界面所有文本均通过get_text()函数获取。 with gr.Blocks(titleget_text(title), themegr.themes.Soft()) as demo: # 为了在switch_language函数中能引用到组件我们需要声明为全局变量在这个函数作用域内 # 使用gr.State来存储对这些组件的引用并不是标准做法所以我们换一种方式 # 我们将把创建界面和定义更新逻辑放在一起确保回调函数能访问到组件对象。 # 实际上Gradio的依赖注入机制能很好地处理这个问题如下所示。 # 标题和描述 gr.Markdown(f# {get_text(title)}) gr.Markdown(get_text(description)) with gr.Row(): with gr.Column(scale3): # --- 音频输入区域 --- audio_input gr.Audio( labelget_text(input_audio_label), placeholderget_text(input_audio_placeholder), typefilepath, interactiveTrue ) with gr.Row(): audio_record gr.Button(get_text(record_audio_btn), variantsecondary) audio_clear gr.Button(get_text(clear_audio_btn), variantsecondary) # --- 参数设置区域 --- gr.Markdown(f### {get_text(settings_title)}) language_dropdown gr.Dropdown( choices[Auto-detect, 中文, English, 日本語, 한국어, 粤语], valueAuto-detect, labelget_text(language_label), placeholderget_text(language_placeholder), interactiveTrue ) itn_checkbox gr.Checkbox( labelget_text(enable_itn_label), valueTrue, infoget_text(enable_itn_info), interactiveTrue ) with gr.Column(scale2): # --- 操作按钮区域 --- transcribe_btn gr.Button(get_text(transcribe_btn), variantprimary, sizelg) stop_btn gr.Button(get_text(stop_btn), variantstop, sizelg) clear_all_btn gr.Button(get_text(clear_all_btn), variantsecondary, sizelg) # --- 语言切换器 --- # 放在一个显眼但不碍事的位置比如右上角 with gr.Row(): gr.HTML(div styleflex-grow: 1;/div) # 占位符将按钮推到右侧 lang_radio gr.Radio( choices[English, 中文], valueEnglish, labelget_text(ui_language_label), # 标签是中英混合的 interactiveTrue, scale0 ) # --- 输出区域 --- output_text gr.Textbox( labelget_text(output_text_label), placeholderget_text(output_placeholder), lines10, interactiveFalse ) # --- 事件处理 --- # 语音识别处理 transcribe_btn.click( fntranscribe_audio, inputs[audio_input, language_dropdown, itn_checkbox], outputsoutput_text ) # 清空音频 audio_clear.click(fnlambda: None, inputsNone, outputsaudio_input) # 清空全部 clear_all_btn.click( fnlambda: (None, Auto-detect, True, ), inputsNone, outputs[audio_input, language_dropdown, itn_checkbox, output_text] ) # --- 新增语言切换事件 --- # 当语言选择单选按钮变化时调用switch_language函数 # 我们需要将组件的引用传递给回调函数Gradio通过lambda和闭包可以捕获这些组件 def create_lang_switch_callback(audio_input, language_dropdown, itn_checkbox, transcribe_btn, stop_btn, clear_all_btn, output_text): 创建一个闭包其中包含了当前作用域下所有需要更新的组件 def inner(lang_choice): # 将前端的“English”、“中文”映射到语言代码 lang_code en if lang_choice English else zh # 调用切换函数 updates switch_language(lang_code) # 返回更新字典。Gradio会根据字典更新对应的组件。 # 注意这里返回的字典键必须与switch_language函数返回的字典键匹配。 # 为了简化我们让switch_language函数直接返回更新值这里直接返回。 # 但更优雅的方式是让switch_language函数接收组件参数。我们调整一下设计。 # 让我们采用更Gradio的方式使用一个依赖函数来生成更新值。 return updates return inner # 重新设计使用一个函数来响应语言切换并更新所有相关组件 def update_ui_on_language_change(lang_choice): lang_code en if lang_choice English else zh global CURRENT_LANG if lang_code in LOCALES: CURRENT_LANG lang_code texts LOCALES[CURRENT_LANG] # 返回一个元组对应需要更新的所有组件按顺序 return ( texts[title], # 更新Markdown标题Markdown更新需要特殊处理我们用另一个方案 texts[description], texts[input_audio_label], texts[input_audio_placeholder], texts[record_audio_btn], texts[clear_audio_btn], texts[settings_title], texts[language_label], texts[language_placeholder], texts[enable_itn_label], texts[enable_itn_info], texts[transcribe_btn], texts[stop_btn], texts[clear_all_btn], texts[output_text_label], texts[output_placeholder], ) # 由于Gradio的Markdown组件更新value不会重新渲染整个Markdown我们换种方式。 # 我们不再动态更新标题和描述或者使用HTML组件。为了简化演示我们暂时不动态更新标题。 # 或者我们可以用gr.HTML组件来显示标题和描述这样就可以更新了。 # 让我们重构一下使用gr.HTML来显示标题和描述。 return demo # 为了在回调中更新多个不同类型的组件我们需要在创建UI时使用gr.HTML def create_ui_final(): with gr.Blocks(titleFun-ASR Multilingual, themegr.themes.Soft()) as demo: # 使用gr.HTML来显示标题和描述以便动态更新 title_html gr.HTML(fh1{get_text(title)}/h1) desc_html gr.HTML(fp{get_text(description)}/p) with gr.Row(): with gr.Column(scale3): audio_input gr.Audio( labelget_text(input_audio_label), placeholderget_text(input_audio_placeholder), typefilepath ) with gr.Row(): record_btn gr.Button(get_text(record_audio_btn), variantsecondary) clear_btn gr.Button(get_text(clear_audio_btn), variantsecondary) settings_title_html gr.HTML(fh3{get_text(settings_title)}/h3) language_dropdown gr.Dropdown( choices[Auto-detect, 中文, English, 日本語, 한국어, 粤语], valueAuto-detect, labelget_text(language_label), placeholderget_text(language_placeholder) ) itn_checkbox gr.Checkbox( labelget_text(enable_itn_label), valueTrue, infoget_text(enable_itn_info) ) with gr.Column(scale2): transcribe_btn gr.Button(get_text(transcribe_btn), variantprimary, sizelg) stop_btn gr.Button(get_text(stop_btn), variantstop, sizelg) clear_all_btn gr.Button(get_text(clear_all_btn), variantsecondary, sizelg) with gr.Row(): gr.HTML(div styleflex-grow: 1;/div) lang_radio gr.Radio( choices[English, 中文], valueEnglish, labelget_text(ui_language_label), interactiveTrue, scale0 ) output_text gr.Textbox( labelget_text(output_text_label), placeholderget_text(output_placeholder), lines10 ) # 识别功能事件 transcribe_btn.click( transcribe_audio, [audio_input, language_dropdown, itn_checkbox], output_text ) clear_btn.click(lambda: None, None, audio_input) clear_all_btn.click( lambda: (None, Auto-detect, True, ), None, [audio_input, language_dropdown, itn_checkbox, output_text] ) # --- 核心语言切换事件 --- def update_all_texts(lang_choice): 根据选择的语言更新所有界面文本 lang_code en if lang_choice English else zh global CURRENT_LANG CURRENT_LANG lang_code texts LOCALES[CURRENT_LANG] # 返回一个列表按顺序对应需要更新的所有组件的新属性 # gr.update() 用于创建更新字典 return [ gr.update(valuefh1{texts[title]}/h1), # title_html gr.update(valuefp{texts[description]}/p), # desc_html gr.update(labeltexts[input_audio_label], placeholdertexts[input_audio_placeholder]), # audio_input gr.update(valuetexts[record_audio_btn]), # record_btn gr.update(valuetexts[clear_audio_btn]), # clear_btn gr.update(valuefh3{texts[settings_title]}/h3), # settings_title_html gr.update(labeltexts[language_label], placeholdertexts[language_placeholder]), # language_dropdown gr.update(labeltexts[enable_itn_label], infotexts[enable_itn_info]), # itn_checkbox gr.update(valuetexts[transcribe_btn]), # transcribe_btn gr.update(valuetexts[stop_btn]), # stop_btn gr.update(valuetexts[clear_all_btn]), # clear_all_btn gr.update(labeltexts[output_text_label], placeholdertexts[output_placeholder]), # output_text # 语言选择器自己的标签不变 ] # 将语言单选按钮的变化事件绑定到更新函数 lang_radio.change( fnupdate_all_texts, inputslang_radio, outputs[ title_html, desc_html, audio_input, record_btn, clear_btn, settings_title_html, language_dropdown, itn_checkbox, transcribe_btn, stop_btn, clear_all_btn, output_text ] ) return demo if __name__ __main__: # 创建并启动界面 demo create_ui_final() demo.launch( server_name0.0.0.0, server_port7860, shareFalse, debugTrue )这个修改后的app.py是整套功能的核心。它做了以下几件关键事情引入语言包从我们刚创建的locales.py导入LOCALES字典。定义全局状态CURRENT_LANG变量记录当前语言get_text()函数根据当前语言返回对应的文本。重构界面创建所有Gradio组件gr.Audio,gr.Button,gr.Dropdown等的label、placeholder、value等属性不再写死字符串而是调用get_text(key)来获取。实现切换逻辑update_all_texts函数是灵魂。当用户点击语言单选按钮时这个函数被触发。它根据选择更新全局语言状态。从新的语言字典里取出所有文本。返回一个列表列表中的每个元素都是一个gr.update(...)对象精确地告诉Gradio每个组件应该更新成什么新文本。绑定事件通过lang_radio.change(fnupdate_all_texts, ...)将语言按钮的变更事件与我们的更新函数绑定起来。4. 第三步运行与测试代码写完了让我们看看效果。启动服务确保你在项目根目录下然后运行python app.py或者如果你之前用的是后台启动方式cd /root/Fun-ASR-MLT-Nano-2512 nohup python app.py /tmp/funasr_web.log 21 echo $! /tmp/funasr_web.pid访问界面打开浏览器访问http://localhost:7860。测试切换初始界面应该是英文的。在界面右上角你会看到“Language / 语言”的单选按钮默认是“English”。点击选择“中文”。神奇的事情发生了整个页面的标题、描述、按钮文字、输入框提示语全部瞬间变成了中文再切回“English”界面又变回了英文。这个过程是即时且无刷新的用户体验非常流畅。你可以上传一个音频文件测试一下语音识别功能是否在双语界面下都工作正常。5. 总结与进阶思考恭喜你你已经成功为Fun-ASR-MLT-Nano-2512的Web界面加上了中英双语切换功能。我们来回顾一下关键点架构清晰通过i18n/locales.py分离了文本与代码这是国际化的基石。动态渲染app.py中的界面组件文本全部通过get_text()函数动态获取。状态驱动一个全局的CURRENT_LANG变量和强大的update_all_texts回调函数共同驱动了整个界面的语言切换。用户体验切换过程无需刷新页面流畅自然。更进一步 你现在拥有的是一个可扩展的框架。如果你想增加更多语言只需在locales.py的LOCALES字典里添加新的语言键值对如fr: TEXT_FR并在lang_radio组件的choices列表里加上新的选项如“Français”。持久化用户选择可以将用户最后一次选择的语言保存在浏览器的LocalStorage中下次访问时自动应用。这需要用到Gradio的js参数或自定义前端JavaScript。应用到更复杂界面本文展示的是核心原理。对于有大量动态内容、标签页的复杂界面思路是一样的——为所有需要国际化的文本定义键并在回调函数中更新它们。通过这次开发你不仅让一个优秀的语音识别模型变得更加友好也掌握了一套为任何Gradio应用添加多语言支持的通用方法。希望这个“实操手册”对你有所帮助获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。