万物识别-中文镜像实操手册：Gradio界面自定义CSS与多语言标签支持改造-育师

万物识别-中文镜像实操手册：Gradio界面自定义CSS与多语言标签支持改造

1. 环境准备与快速上手

万物识别-中文-通用领域镜像是一个基于cv_resnest101_general_recognition算法构建的智能识别工具，预装了完整的运行环境并封装了推理代码。这个镜像能够识别图像中的各种物体，并支持中文标签输出，非常适合中文用户使用。

1.1 环境配置说明

本镜像采用了高性能的现代深度学习配置，具体环境如下：

组件	版本
Python	3.11
PyTorch	2.5.0+cu124
CUDA / cuDNN	12.4 / 9.x
ModelScope	默认
代码位置	`/root/UniRec`

1.2 快速启动服务

镜像启动后，首先需要进入工作目录并激活环境：

cd /root/UniRec conda activate torch25

激活环境后，启动Gradio服务：

python general_recognition.py

服务启动成功后，会显示一个本地访问地址，通常为http://127.0.0.1:6006。

2. Gradio界面自定义改造

2.1 为什么需要界面自定义

默认的Gradio界面虽然功能完整，但在实际使用中可能会遇到一些问题：界面风格单一、缺乏个性化、多语言支持有限等。通过自定义CSS和多语言标签支持，我们可以让界面更加美观、易用，同时提升用户体验。

2.2 自定义CSS样式改造

首先，我们来看如何为Gradio界面添加自定义CSS样式。在general_recognition.py文件中，找到Gradio界面初始化部分，添加CSS自定义代码：

import gradio as gr # 自定义CSS样式 custom_css = """ /* 主容器样式 */ .container { max-width: 1200px; margin: 0 auto; padding: 20px; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); } /* 标题样式 */ .title { text-align: center; color: #2c3e50; font-size: 2.5em; margin-bottom: 30px; font-weight: bold; text-shadow: 2px 2px 4px rgba(0,0,0,0.1); } /* 上传区域样式 */ .upload-box { border: 3px dashed #3498db; border-radius: 10px; padding: 30px; text-align: center; background-color: rgba(255,255,255,0.8); transition: all 0.3s ease; } .upload-box:hover { border-color: #2980b9; background-color: rgba(255,255,255,0.95); } /* 按钮样式 */ .button-primary { background: linear-gradient(45deg, #3498db, #2980b9); border: none; color: white; padding: 12px 24px; border-radius: 8px; font-size: 1.1em; font-weight: bold; cursor: pointer; transition: all 0.3s ease; } .button-primary:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(52, 152, 219, 0.4); } /* 结果展示样式 */ .result-box { background: white; border-radius: 10px; padding: 20px; margin-top: 20px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); border-left: 5px solid #3498db; } """ # 在Gradio界面中应用自定义CSS with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as demo: # 界面组件定义...

2.3 多语言标签支持实现

为了让界面支持多语言，我们可以创建一个语言配置文件，并在Gradio界面中动态切换语言：

# 多语言配置 language_config = { "zh": { "title": "万物识别 - 智能图像识别系统", "upload_label": "上传图片", "recognize_btn": "开始识别", "result_label": "识别结果", "loading_text": "识别中，请稍候...", "error_text": "识别失败，请重试" }, "en": { "title": "Universal Recognition - Intelligent Image Recognition", "upload_label": "Upload Image", "recognize_btn": "Start Recognition", "result_label": "Recognition Results", "loading_text": "Recognizing, please wait...", "error_text": "Recognition failed, please try again" } } # 当前语言设置 current_lang = "zh" def create_interface(lang="zh"): """创建多语言界面""" texts = language_config[lang] with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as demo: gr.Markdown(f"# {texts['title']}", elem_classes="title") with gr.Row(): with gr.Column(): image_input = gr.Image( label=texts['upload_label'], type="filepath", elem_classes="upload-box" ) recognize_btn = gr.Button( texts['recognize_btn'], elem_classes="button-primary" ) with gr.Column(): output_text = gr.Textbox( label=texts['result_label'], lines=5, elem_classes="result-box" ) # 语言切换按钮 lang_btn = gr.Radio( choices=["中文", "English"], value="中文", label="语言/Language", interactive=True ) # 语言切换回调 def change_language(lang_choice): global current_lang if lang_choice == "中文": current_lang = "zh" else: current_lang = "en" return create_interface(current_lang) lang_btn.change(change_language, inputs=lang_btn, outputs=demo) # 识别功能实现 recognize_btn.click( fn=recognize_image, inputs=image_input, outputs=output_text, api_name="recognize" ) return demo

3. 完整改造代码示例

下面是一个完整的Gradio界面改造示例，包含自定义CSS和多语言支持：

import gradio as gr from modelscope.pipelines import pipeline from modelscope.utils.constant import Tasks import cv2 import numpy as np # 初始化模型 model_id = 'iic/cv_resnest101_general_recognition' general_recognition = pipeline(Tasks.general_recognition, model=model_id) # 自定义CSS样式 custom_css = """ /* 主容器样式 */ .gradio-container { max-width: 1200px !important; margin: 0 auto; font-family: 'Microsoft YaHei', sans-serif; } /* 标题样式 */ .title { text-align: center; color: #2c3e50; font-size: 2.5em; margin-bottom: 30px; font-weight: bold; background: linear-gradient(45deg, #3498db, #2c3e50); -webkit-background-clip: text; -webkit-text-fill-color: transparent; padding: 20px; } /* 上传区域样式 */ .upload-box { border: 3px dashed #3498db !important; border-radius: 15px !important; padding: 30px; text-align: center; background-color: rgba(255,255,255,0.9) !important; transition: all 0.3s ease !important; } .upload-box:hover { border-color: #2980b9 !important; background-color: rgba(255,255,255,0.95) !important; transform: scale(1.02); } /* 按钮样式 */ button { background: linear-gradient(45deg, #3498db, #2980b9) !important; border: none !important; color: white !important; padding: 12px 24px !important; border-radius: 8px !important; font-size: 1.1em !important; font-weight: bold !important; transition: all 0.3s ease !important; } button:hover { transform: translateY(-2px) !important; box-shadow: 0 5px 15px rgba(52, 152, 219, 0.4) !important; } /* 结果区域样式 */ .result-box { background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%) !important; border-radius: 15px !important; padding: 25px !important; margin-top: 20px; box-shadow: 0 8px 25px rgba(0,0,0,0.1) !important; border-left: 5px solid #3498db !important; font-size: 1.1em; line-height: 1.6; } /* 语言选择器样式 */ .lang-selector { background: white !important; border-radius: 10px !important; padding: 15px !important; margin-bottom: 20px; box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important; } """ # 多语言配置 language_config = { "zh": { "title": "万物识别 - 智能图像识别系统", "upload_label": "📷 上传需要识别的图片", "recognize_btn": " 开始识别", "result_label": " 识别结果", "loading_text": "⏳ 识别中，请稍候...", "error_text": " 识别失败，请重试", "lang_label": "选择语言" }, "en": { "title": "Universal Recognition - Intelligent Image Recognition", "upload_label": "📷 Upload Image for Recognition", "recognize_btn": " Start Recognition", "result_label": " Recognition Results", "loading_text": "⏳ Recognizing, please wait...", "error_text": " Recognition failed, please try again", "lang_label": "Select Language" } } def recognize_image(img_path): """图像识别函数""" try: result = general_recognition(img_path) # 格式化输出结果 if result and 'output' in result and 'labels' in result['output']: labels = result['output']['labels'] scores = result['output']['scores'] # 构建格式化的结果字符串 formatted_result = "识别结果：\n" for i, (label, score) in enumerate(zip(labels, scores)): confidence = float(score) * 100 formatted_result += f"{i+1}. {label} - 置信度: {confidence:.2f}%\n" return formatted_result else: return "未识别到有效物体" except Exception as e: return f"识别过程中出现错误: {str(e)}" def create_interface(): """创建多语言界面""" current_lang = gr.State("zh") with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as demo: # 语言选择器 with gr.Row(elem_classes="lang-selector"): lang_radio = gr.Radio( choices=["中文", "English"], value="中文", label="选择语言 / Select Language", interactive=True ) # 动态更新界面内容 def update_interface(lang_choice): lang_code = "zh" if lang_choice == "中文" else "en" texts = language_config[lang_code] return [ gr.Markdown.update(value=f"# {texts['title']}", visible=True), gr.Image.update(label=texts['upload_label']), gr.Button.update(value=texts['recognize_btn']), gr.Textbox.update(label=texts['result_label']) ] # 标题 title_md = gr.Markdown(value="# 万物识别 - 智能图像识别系统", elem_classes="title") with gr.Row(): with gr.Column(scale=1): image_input = gr.Image( label=language_config["zh"]["upload_label"], type="filepath", elem_classes="upload-box" ) recognize_btn = gr.Button( language_config["zh"]["recognize_btn"], elem_classes="button-primary" ) with gr.Column(scale=1): output_text = gr.Textbox( label=language_config["zh"]["result_label"], lines=8, elem_classes="result-box" ) # 语言切换回调 lang_radio.change( fn=update_interface, inputs=lang_radio, outputs=[title_md, image_input, recognize_btn, output_text] ) # 识别功能 recognize_btn.click( fn=recognize_image, inputs=image_input, outputs=output_text, api_name="recognize" ) return demo # 启动界面 if __name__ == "__main__": demo = create_interface() demo.launch( server_name="0.0.0.0", server_port=6006, share=False )