Update app.py

app.py

@@ -1,429 +1,431 @@
-import gradio as gr
-from model import (
-    cls_predict,
-    det_predict,
-    seg_predict,
-    ALL_SEG_LABELS,
-    ALL_DET_LABELS,
-    ALL_SEG_COLOR_MAP,
-    ALL_CLS_LABELS
-)
-import os
-import requests
-from PIL import Image
-from io import BytesIO
-import time  # 用于重试
-
-# --- 配置 Logo 和版权信息 ---
-LOGO_PATH = "logo/logo.png"  # 请将您的 Logo 图片存放在此路径
-# 🌟 更新：版权信息仅保留年份和权利声明
-COPYRIGHT_TEXT = "© 2025 All Rights Reserved."
-# COLLABORATION_EMAIL 变量已删除
-SCHOOL_NAME_EN = "School of Information Engineering, Wuhan University of Technology"
-
-# --- 自动下载示例图片逻辑 (嵌入) ---
-
-# 🌟 恢复到用户指定的 COCO ID 列表
-TASK_EXAMPLE_URLS = {
-    "cls": [
-        # 图像分类示例 (val2017)
-        "http://images.cocodataset.org/val2017/000000000285.jpg",  # 猫和键盘 (保留)
-        "http://images.cocodataset.org/val2017/000000000785.jpg",  # 交通灯/汽车/巴士 (保留)
-        "http://images.cocodataset.org/val2017/000000000724.jpg",  # 食物/餐具 (保留)
-        "http://images.cocodataset.org/val2017/000000001584.jpg",  # 多人，多物体 (保留)
-        "http://images.cocodataset.org/train2017/000000001097.jpg",  # 原 cls_5
-    ],
-    "seg": [
-        # 语义分割示例 (val2017)
-        "http://images.cocodataset.org/val2017/000000000139.jpg",  # 街景/汽车 (保留)
-        "http://images.cocodataset.org/val2017/000000000632.jpg",  # 街景/行人 (保留)
-        "http://images.cocodataset.org/val2017/000000000885.jpg",  # 滑板手 (保留)
-        "http://images.cocodataset.org/train2017/000000000267.jpg",  # 原 seg_4
-        "http://images.cocodataset.org/train2017/000000001140.jpg",  # 原 seg_5
-    ],
-    "det": [
-        # 目标检测示例 (val2017)
-        "http://images.cocodataset.org/val2017/000000000785.jpg",  # 交通灯/汽车/巴士 (保留)
-        "http://images.cocodataset.org/val2017/000000001268.jpg",  # 原 det_2
-        "http://images.cocodataset.org/train2017/000000001072.jpg",  # 原 det_3
-        "http://images.cocodataset.org/train2017/000000000119.jpg",  # 原 det_4
-        "http://images.cocodataset.org/train2017/000000000570.jpg",  # 原 det_5
-    ]
-}
-
-# 项目期望的本地路径
-OUTPUT_DIR = "examples"
-
-
-def download_and_save_examples(max_retries=3):
-    """下载示例图片到本地 examples/ 目录，使用任务前缀命名，增加重试机制"""
-    if not os.path.exists(OUTPUT_DIR):
-        os.makedirs(OUTPUT_DIR)
-
-    total_urls = sum(len(urls) for urls in TASK_EXAMPLE_URLS.values())
-    print(f"🚀 检查和下载 {total_urls} 张示例图片...")
-
-    # 迭代所有任务和 URL
-    for prefix, urls in TASK_EXAMPLE_URLS.items():
-        for i, url in enumerate(urls):
-            # 文件名格式：cls_1.jpg, seg_2.jpg, det_3.jpg
-            filename = f"{prefix}_{i + 1}.jpg"
-            filepath = os.path.join(OUTPUT_DIR, filename)
-
-            if os.path.exists(filepath):
-                continue  # 跳过已存在的文件
-
-            for attempt in range(max_retries):
-                try:
-                    # 增加更长的超时时间
-                    response = requests.get(url, stream=True, timeout=15)
-                    response.raise_for_status()
-
-                    image = Image.open(BytesIO(response.content))
-                    image.save(filepath)
-                    print(f"   成功下载并保存: {filename} (尝试 {attempt + 1}/{max_retries})")
-                    break  # 成功则跳出重试循环
-
-                except requests.exceptions.RequestException as e:
-                    print(f"   ⚠️ 下载 {filename} 失败 (尝试 {attempt + 1}/{max_retries}): {e}")
-                    if attempt < max_retries - 1:
-                        time.sleep(2)  # 失败后等待2秒再重试
-                    else:
-                        # 404 错误是 ClientError，意味着 URL 不存在
-                        if '404 Client Error' in str(e):
-                            print(f"❌ 最终下载失败 {filename}: URL {url} 不存在 (404 错误)。")
-                        else:
-                            print(f"❌ 最终下载失败 {filename}: 请检查网络连接或 URL。")
-                        break
-                except Exception as e:
-                    # 图像处理失败 (如 BytesIO 或 PIL 错误)，停止重试
-                    print(f"❌ 图像处理失败 {filename}: {e}")
-                    break
-
-                # 立即执行下载，确保 examples 目录下的文件存在
-
-
-download_and_save_examples()
-
-# 🌟 关键：创建三个独立的示例列表，用于 Gradio Examples 组件
-CLS_EXAMPLES = [[os.path.join(OUTPUT_DIR, f"cls_{i + 1}.jpg")] for i in range(5)]
-SEG_EXAMPLES = [[os.path.join(OUTPUT_DIR, f"seg_{i + 1}.jpg")] for i in range(5)]
-DET_EXAMPLES = [[os.path.join(OUTPUT_DIR, f"det_{i + 1}.jpg")] for i in range(5)]
-
-
-# --- 辅助函数：生成颜色图例 HTML ---
-def generate_legend_html(color_map_dict):
-    """根据颜色映射字典生成 HTML 图例"""
-    html_content = "<div style='max-height: 300px; overflow-y: scroll; padding: 10px; border: 1px solid #ccc; background-color: #f7f7f7; border-radius: 8px;'>"
-    html_content += "<h4 style='margin-top: 0; color: #333;'>🎨 分割颜色图例</h4>"
-
-    if "Error" in color_map_dict:
-        html_content += "<p style='color: red;'>模型加载失败，图例不可用。</p>"
-        return html_content
-
-    for label, hex_color in color_map_dict.items():
-        html_content += f"""
-        <div style='display: flex; align-items: center; margin-bottom: 5px; font-family: sans-serif;'>
-            <div style='width: 15px; height: 15px; background-color: {hex_color}; border: 1px solid #333; margin-right: 10px; border-radius: 3px;'></div>
-            <span style='font-size: 14px; color: #555;'>{label}</span>
-        </div>
-        """
-    html_content += "</div>"
-    return html_content
-
-
-# --- 辅助函数：类别搜索逻辑 ---
-def search_labels(query: str, all_labels) -> str:
-    """
-    在标签列表或字典中搜索给定的查询。
-    all_labels 可以是 list (分类/分割) 或 dict (检测)。
-    """
-    query = query.strip().lower()
-    if not query:
-        return "请输入有效的查询内容。"
-
-    MAX_MATCHES = 10
-
-    # 处理 List (Classification, Segmentation)
-    if isinstance(all_labels, list):
-        found_matches = [label for label in all_labels if query in label.lower()]
-
-        if found_matches:
-            result_list = "\n- ".join(found_matches[:MAX_MATCHES])
-            summary = f"✅ 找到 {len(found_matches)} 个匹配项 (仅显示前 {MAX_MATCHES} 个):"
-            return f"{summary}\n- {result_list}"
-        else:
-            return f"❌ 未找到包含 '{query}' 的类别。"
-
-    # 处理 Dict (Detection)
-    elif isinstance(all_labels, dict):
-        found_matches = {k: v for k, v in all_labels.items() if query in v.lower()}
-
-        if found_matches:
-            result_list = [f"ID {k}: {v}" for k, v in list(found_matches.items())[:MAX_MATCHES]]
-            summary = f"✅ 找到 {len(found_matches)} 个匹配项 (仅显示前 {MAX_MATCHES} 个):"
-            return f"{summary}\n- {result_list}"
-        else:
-            return f"❌ 未找到包含 '{query}' 的类别。"
-
-    return "类别数据格式错误或未加载。"
-
-
-# 🌟 美化 1: Gradio Soft 主题 CSS (背景颜色调整)
-CUSTOM_CSS = """
-/* 整体背景和卡片阴影优化 */
-.gradio-container {
-    background-color: #f7f7f7; /* 调整为柔和的浅灰色背景 */
-    font-family: 'Inter', system-ui, sans-serif;
-}
-/* 卡片和主内容区的美化 */
-.gradio-container > div {
-    border-radius: 12px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* 柔和阴影 */
-    transition: all 0.3s ease;
-}
-
-/* 主标题样式 (用于承载 Logo 和文本) */
-h1 {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 2.2em;
-    color: #333333; /* 深色文字 */
-    padding: 20px 0;
-    margin: 0;
-}
-
-/* 按钮和输入框圆角 */
-.gr-button, .gr-textbox, .gr-number, .gr-image {
-    border-radius: 8px !important;
-}
-
-/* 标签和组件背景 */
-.gradio-container > div:not(.prose):not(.gr-row) {
-    background: white;
-    padding: 15px;
-}
-/* 页脚 Logo 样式 */
-.footer-logo-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-    padding-top: 15px;
-}
-
-/* 页脚图标/链接容器样式 */
-.footer-links {
-    margin-top: 10px;
-    font-size: 14px;
-    color: #555;
-    display: flex;
-    gap: 15px; /* 图标之间的间隔 */
-    align-items: center;
-    /* 确保内容居中 */
-    justify-content: center;
-}
-
-/* 图标样式 */
-.footer-icon {
-    font-size: 18px;
-    vertical-align: middle;
-}
-
-/* 链接颜色 */
-.footer-links a {
-    color: #555;
-    text-decoration: none;
-}
-.footer-links a:hover {
-    color: #333;
-}
-"""
-
-with gr.Blocks(
-        title="AI基础模型视觉任务演示平台",
-) as demo:
-    # 注入 Favicon (网页选项卡图标)
-    gr.HTML(f"""
-        <head>
-            <link rel='icon' type='image/png' href='file/{LOGO_PATH}'/>
-        </head>
-    """, visible=False)
-
-    # 🌟 主标题区域：恢复机器人图标
-    gr.Markdown("<h1>🤖 AI基础模型视觉任务演示平台</h1>")
-    gr.Markdown("---")
-
-    # 🌟 简化功能说明 (只关注使用方法)
-    with gr.Accordion("📚 功能说明"):
-        gr.Markdown("""
-        本平台支持图像分类、语义分割和目标检测三大任务。
-        您可以通过以下步骤使用平台：
-        1. **切换选项卡**：选择您希望执行的 AI 任务。
-        2. **上传或选择图片**：上传您自己的图片或点击下方的示例图片。
-        3. **设置参数**：对于目标检测，调整置信度阈值。
-        4. **点击提交**：点击“提交任务”按钮，查看 AI 分析结果。
-        """)
-
-    # 🌟 新增：数据集介绍
-    with gr.Accordion("📚 基础数据集介绍", open=False):
-        gr.Markdown("""
-        ### 📖 模型训练数据集概览
-
-        | 任务 | 模型 | 数据集 | 类别数 | 简介 |
-        | :--- | :--- | :--- | :--- | :--- |
-        | 图像分类 | ViT | **ImageNet-1K** | 1000 | 包含超过 100 万张图像，是图像识别领域的标准基准。 |
-        | 语义分割 | SegFormer | **ADE20K** | 150 | 专注于场景解析，提供 150 种语义概念的像素级标注。 |
-        | 目标检测 | YOLOv8n | **COCO** | 80 | 最常用的目标检测数据集之一，包含大量物体实例。 |
-        """)
-
-    # 🌟 新增：网络结构介绍
-    with gr.Accordion("🧠 网络结构介绍", open=False):
-        gr.Markdown("""
-        ### 💻 模型架构说明
-
-        1.  **图像分类 (ViT):**
-            * **全称:** Vision Transformer (ViT-Base-Patch16-224)
-            * **特点:** 基于 Transformer 结构，将图像切片后进行序列输入，通过自注意力机制实现全局建模。
-
-        2.  **语义分割 (SegFormer):**
-            * **全称:** Segmentation Transformer
-            * **特点:** 高效的 Transformer 架构，使用轻量级解码器，专注于速度和准确性的平衡。
-
-        3.  **目标检测 (YOLOv8n):**
-            * **全称:** You Only Look Once, Version 8 (Nano)
-            * **特点:** 单阶段检测器，以速度著称，Nano (n) 版本在保持高性能的同时，体积最小。
-        """)
-
-    # --- 任务选项卡 ---
-    with gr.Tabs():
-        # 1. 图像分类 Tab
-        with gr.TabItem("🖼️ 图像分类 (ViT)"):
-            with gr.Row():
-                with gr.Column(scale=1):
-                    cls_input = gr.Image(type='pil', label="输入图像")
-                    cls_button = gr.Button("🚀 提交分类任务")
-                with gr.Column(scale=1):
-                    cls_output = gr.Label(num_top_classes=5, label="分类结果 (前 5)")
-
-            # 🌟 展示所有分类类别列表
-            gr.Markdown("### 🌟 模型支持的全部分类类别 (ImageNet-1K)")
-            cls_category_json = gr.JSON(value=ALL_CLS_LABELS, label="所有类别列表", scale=1)
-
-            # 🌟 查询 UI
-            with gr.Row():
-                cls_search_query = gr.Textbox(label="查询类别", placeholder="Search Class Name (e.g., dog)", scale=3)
-                cls_search_button = gr.Button("🔍 搜索", scale=1)
-            cls_search_output = gr.Markdown("搜索结果将显示在这里。")
-
-            cls_search_button.click(
-                fn=search_labels,
-                inputs=[cls_search_query, cls_category_json],
-                outputs=cls_search_output
-            )
-
-            # 🌟 更新：使用 CLS_EXAMPLES
-            gr.Examples(examples=CLS_EXAMPLES, inputs=[cls_input], label="示例图片")
-            cls_button.click(cls_predict, inputs=cls_input, outputs=cls_output)
-
-        # 2. 语义分割 Tab
-        with gr.TabItem("✂️ 语义分割 (SegFormer)"):
-            with gr.Row():
-                with gr.Column(scale=2):
-                    seg_input = gr.Image(type='pil', label="输入图像")
-                    seg_button = gr.Button("🚀 提交分割任务")
-                with gr.Column(scale=2):
-                    seg_output = gr.Image(type='pil', label="分割结果 (叠加)")
-                with gr.Column(scale=1):
-                    # 🌟 展示图例
-                    gr.HTML(value=generate_legend_html(ALL_SEG_COLOR_MAP), scale=1)
-
-            # 保留完整的类别列表（以 JSON 格式展示，作为额外的参考）
-            gr.Markdown("### 完整类别列表 (JSON)")
-            seg_category_json = gr.JSON(value={f"ID {i}": label for i, label in enumerate(ALL_SEG_LABELS)},
-                                        label="所有类别 JSON")
-
-            # 🌟 查询 UI 提示改为英文
-            with gr.Row():
-                seg_search_query = gr.Textbox(label="查询类别", placeholder="Search Class Name (e.g., road, sky)",
-                                              scale=3)
-                seg_search_button = gr.Button("🔍 搜索", scale=1)
-            seg_search_output = gr.Markdown("搜索结果将显示在这里。")
-
-            seg_search_button.click(
-                fn=search_labels,
-                inputs=[seg_search_query, seg_category_json],
-                outputs=seg_search_output
-            )
-
-            # 🌟 更新：使用 SEG_EXAMPLES
-            gr.Examples(examples=SEG_EXAMPLES, inputs=[seg_input], label="示例图片")
-            seg_button.click(seg_predict, inputs=seg_input, outputs=seg_output)
-
-        # 3. 目标检测 Tab
-        with gr.TabItem("🎯 目标检测 (YOLOv8n)"):
-            with gr.Row():
-                with gr.Column(scale=1):
-                    det_input_image = gr.Image(type='pil', label="输入图像")
-                    det_input_number = gr.Number(
-                        precision=2,
-                        minimum=0.01,
-                        maximum=1,
-                        value=0.30,
-                        label='置信度阈值'
-                    )
-                    det_button = gr.Button("🚀 提交检测任务")
-                with gr.Column(scale=1):
-                    det_output = gr.Image(type='pil', label="检测结果 (边界框)")
-
-            # 🌟 展示目标检测类别列表
-            gr.Markdown("### 🎯 模型支持的检测类别 (COCO)")
-            det_category_json = gr.JSON(value=ALL_DET_LABELS, label="所有类别列表")
-
-            # 🌟 查询 UI 提示改为英文
-            with gr.Row():
-                det_search_query = gr.Textbox(label="查询类别", placeholder="Search Class Name (e.g., bicycle, train)",
-                                              scale=3)
-                det_search_button = gr.Button("🔍 搜索", scale=1)
-            det_search_output = gr.Markdown("搜索结果将显示在这里。")
-
-            det_search_button.click(
-                fn=search_labels,
-                inputs=[det_search_query, det_category_json],
-                outputs=det_search_output
-            )
-
-            # 🌟 更新：使用 DET_EXAMPLES
-            gr.Examples(examples=DET_EXAMPLES, inputs=[det_input_image], label="示例图片")
-            det_button.click(det_predict, inputs=[det_input_image, det_input_number], outputs=det_output)
-
-    # 🌟 添加页脚和 Logo/版权 (使用图标和本地 Logo)
-    gr.HTML(
-        f"""
-        <div class='footer-logo-container'>
-            <div class="footer-links">
-                <p>{COPYRIGHT_TEXT}</p>
-            </div>
-
-            <div class="footer-links">
-
-                <!-- 🌟 学校图标和名称 (添加超链接) -->
-                <span class="footer-icon">🏢</span> 
-                <a href='https://wutinfo.whut.edu.cn/' target='_blank' style='text-decoration: none; color: inherit;'>
-                    <span>{SCHOOL_NAME_EN}</span>
-                </a>
-
-                <!-- 🌟 额外 Logo 位于版权信息之后 -->
-                <img src='file/{LOGO_PATH}' alt='Logo' style='height: 30px; margin-left: 20px;' onerror="this.style.display='none'">
-            </div>
-        </div>
-        """
-    )
-
-if __name__ == "__main__":
-    gr.close_all()
-    print("Launching Gradio demo...")
-    # 🌟 传入 css 参数
+import gradio as gr
+from model import (
+    cls_predict,
+    det_predict,
+    seg_predict,
+    ALL_SEG_LABELS,
+    ALL_DET_LABELS,
+    ALL_SEG_COLOR_MAP,
+    ALL_CLS_LABELS
+)
+import os
+import requests
+from PIL import Image
+from io import BytesIO
+import time  # 用于重试
+
+# --- 配置 Logo 和版权信息 ---
+LOGO_PATH = "logo/logo.png"  # 请将您的 Logo 图片存放在此路径
+# 🌟 更新：版权信息仅保留年份和权利声明，具体内容在 HTML 中处理
+COPYRIGHT_TEXT = "© 2025 All Rights Reserved."
+SCHOOL_NAME_EN = "School of Information Engineering, Wuhan University of Technology"
+
+# --- 自动下载示例图片逻辑 (嵌入) ---
+
+# 🌟 恢复到用户指定的 COCO ID 列表
+TASK_EXAMPLE_URLS = {
+    "cls": [
+        # 图像分类示例 (val2017)
+        "http://images.cocodataset.org/val2017/000000000285.jpg",  # 猫和键盘 (保留)
+        "http://images.cocodataset.org/val2017/000000000785.jpg",  # 交通灯/汽车/巴士 (保留)
+        "http://images.cocodataset.org/val2017/000000000724.jpg",  # 食物/餐具 (保留)
+        "http://images.cocodataset.org/val2017/000000001584.jpg",  # 多人，多物体 (保留)
+        "http://images.cocodataset.org/train2017/000000001097.jpg",  # 原 cls_5
+    ],
+    "seg": [
+        # 语义分割示例 (val2017)
+        "http://images.cocodataset.org/val2017/000000000139.jpg",  # 街景/汽车 (保留)
+        "http://images.cocodataset.org/val2017/000000000632.jpg",  # 街景/行人 (保留)
+        "http://images.cocodataset.org/val2017/000000000885.jpg",  # 滑板手 (保留)
+        "http://images.cocodataset.org/train2017/000000000267.jpg",  # 原 seg_4
+        "http://images.cocodataset.org/train2017/000000001140.jpg",  # 原 seg_5
+    ],
+    "det": [
+        # 目标检测示例 (val2017)
+        "http://images.cocodataset.org/val2017/000000000785.jpg",  # 交通灯/汽车/巴士 (保留)
+        "http://images.cocodataset.org/val2017/000000001268.jpg",  # 原 det_2
+        "http://images.cocodataset.org/train2017/000000001072.jpg",  # 原 det_3
+        "http://images.cocodataset.org/train2017/000000000119.jpg",  # 原 det_4
+        "http://images.cocodataset.org/train2017/000000000570.jpg",  # 原 det_5
+    ]
+}
+
+# 项目期望的本地路径
+OUTPUT_DIR = "examples"
+
+
+def download_and_save_examples(max_retries=3):
+    """下载示例图片到本地 examples/ 目录，使用任务前缀命名，增加重试机制"""
+    if not os.path.exists(OUTPUT_DIR):
+        os.makedirs(OUTPUT_DIR)
+
+    total_urls = sum(len(urls) for urls in TASK_EXAMPLE_URLS.values())
+    print(f"🚀 检查和下载 {total_urls} 张示例图片...")
+
+    # 迭代所有任务和 URL
+    for prefix, urls in TASK_EXAMPLE_URLS.items():
+        for i, url in enumerate(urls):
+            # 文件名格式：cls_1.jpg, seg_2.jpg, det_3.jpg
+            filename = f"{prefix}_{i + 1}.jpg"
+            filepath = os.path.join(OUTPUT_DIR, filename)
+
+            if os.path.exists(filepath):
+                continue  # 跳过已存在的文件
+
+            for attempt in range(max_retries):
+                try:
+                    # 增加更长的超时时间
+                    response = requests.get(url, stream=True, timeout=15)
+                    response.raise_for_status()
+
+                    image = Image.open(BytesIO(response.content))
+                    image.save(filepath)
+                    print(f"   成功下载并保存: {filename} (尝试 {attempt + 1}/{max_retries})")
+                    break  # 成功则跳出重试循环
+
+                except requests.exceptions.RequestException as e:
+                    print(f"   ⚠️ 下载 {filename} 失败 (尝试 {attempt + 1}/{max_retries}): {e}")
+                    if attempt < max_retries - 1:
+                        time.sleep(2)  # 失败后等待2秒再重试
+                    else:
+                        # 404 错误是 ClientError，意味着 URL 不存在
+                        if '404 Client Error' in str(e):
+                            print(f"❌ 最终下载失败 {filename}: URL {url} 不存在 (404 错误)。")
+                        else:
+                            print(f"❌ 最终下载失败 {filename}: 请检查网络连接或 URL。")
+                        break
+                except Exception as e:
+                    # 图像处理失败 (如 BytesIO 或 PIL 错误)，停止重试
+                    print(f"❌ 图像处理失败 {filename}: {e}")
+                    break
+
+                # 立即执行下载，确保 examples 目录下的文件存在
+
+
+download_and_save_examples()
+
+# 🌟 关键：创建三个独立的示例列表，用于 Gradio Examples 组件
+CLS_EXAMPLES = [[os.path.join(OUTPUT_DIR, f"cls_{i + 1}.jpg")] for i in range(5)]
+SEG_EXAMPLES = [[os.path.join(OUTPUT_DIR, f"seg_{i + 1}.jpg")] for i in range(5)]
+DET_EXAMPLES = [[os.path.join(OUTPUT_DIR, f"det_{i + 1}.jpg")] for i in range(5)]
+
+
+# --- 辅助函数：生成颜色图例 HTML ---
+def generate_legend_html(color_map_dict):
+    """根据颜色映射字典生成 HTML 图例"""
+    html_content = "<div style='max-height: 300px; overflow-y: scroll; padding: 10px; border: 1px solid #ccc; background-color: #f7f7f7; border-radius: 8px;'>"
+    html_content += "<h4 style='margin-top: 0; color: #333;'>🎨 分割颜色图例</h4>"
+
+    if "Error" in color_map_dict:
+        html_content += "<p style='color: red;'>模型加载失败，图例不可用。</p>"
+        return html_content
+
+    for label, hex_color in color_map_dict.items():
+        html_content += f"""
+        <div style='display: flex; align-items: center; margin-bottom: 5px; font-family: sans-serif;'>
+            <div style='width: 15px; height: 15px; background-color: {hex_color}; border: 1px solid #333; margin-right: 10px; border-radius: 3px;'></div>
+            <span style='font-size: 14px; color: #555;'>{label}</span>
+        </div>
+        """
+    html_content += "</div>"
+    return html_content
+
+
+# --- 辅助函数：类别搜索逻辑 ---
+def search_labels(query: str, all_labels) -> str:
+    """
+    在标签列表或字典中搜索给定的查询。
+    all_labels 可以是 list (分类/分割) 或 dict (检测)。
+    """
+    query = query.strip().lower()
+    if not query:
+        return "请输入有效的查询内容。"
+
+    MAX_MATCHES = 10
+
+    # 处理 List (Classification, Segmentation)
+    if isinstance(all_labels, list):
+        found_matches = [label for label in all_labels if query in label.lower()]
+
+        if found_matches:
+            result_list = "\n- ".join(found_matches[:MAX_MATCHES])
+            summary = f"✅ 找到 {len(found_matches)} 个匹配项 (仅显示前 {MAX_MATCHES} 个):"
+            return f"{summary}\n- {result_list}"
+        else:
+            return f"❌ 未找到包含 '{query}' 的类别。"
+
+    # 处理 Dict (Detection)
+    elif isinstance(all_labels, dict):
+        found_matches = {k: v for k, v in all_labels.items() if query in v.lower()}
+
+        if found_matches:
+            result_list = [f"ID {k}: {v}" for k, v in list(found_matches.items())[:MAX_MATCHES]]
+            summary = f"✅ 找到 {len(found_matches)} 个匹配项 (仅显示前 {MAX_MATCHES} 个):"
+            return f"{summary}\n- {result_list}"
+        else:
+            return f"❌ 未找到包含 '{query}' 的类别。"
+
+    return "类别数据格式错误或未加载。"
+
+
+# 🌟 美化 1: Gradio Soft 主题 CSS (背景颜色调整)
+CUSTOM_CSS = """
+/* 整体背景和卡片阴影优化 */
+.gradio-container {
+    background-color: #f7f7f7; /* 调整为柔和的浅灰色背景 */
+    font-family: 'Inter', system-ui, sans-serif;
+}
+/* 卡片和主内容区的美化 */
+.gradio-container > div {
+    border-radius: 12px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* 柔和阴影 */
+    transition: all 0.3s ease;
+}
+
+/* 主标题样式 (用于承载 Logo 和文本) */
+h1 {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 2.2em;
+    color: #333333; /* 深色文字 */
+    padding: 20px 0;
+    margin: 0;
+}
+
+/* 按钮和输入框圆角 */
+.gr-button, .gr-textbox, .gr-number, .gr-image {
+    border-radius: 8px !important;
+}
+
+/* 标签和组件背景 */
+.gradio-container > div:not(.prose):not(.gr-row) {
+    background: white;
+    padding: 15px;
+}
+/* 页脚 Logo 样式 */
+.footer-logo-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    padding-top: 15px;
+}
+
+/* 页脚图标/链接容器样式 */
+.footer-links {
+    margin-top: 10px;
+    font-size: 14px;
+    color: #555;
+    display: flex;
+    gap: 15px; /* 图标之间的间隔 */
+    align-items: center;
+    /* 确保内容居中 */
+    justify-content: center;
+}
+
+/* 图标样式 */
+.footer-icon {
+    font-size: 18px;
+    vertical-align: middle;
+}
+
+/* 链接颜色 */
+.footer-links a {
+    color: #555;
+    text-decoration: none;
+}
+.footer-links a:hover {
+    color: #333;
+}
+"""
+
+with gr.Blocks(
+        title="AI基础模型视觉任务演示平台",
+) as demo:
+    # 注入 Favicon (网页选项卡图标)
+    gr.HTML(f"""
+        <head>
+            <link rel='icon' type='image/png' href='file/{LOGO_PATH}'/>
+        </head>
+    """, visible=False)
+
+    # 🌟 主标题区域：恢复机器人图标
+    gr.Markdown("<h1>🤖 AI基础模型视觉任务演示平台</h1>")
+    gr.Markdown("---")
+
+    # 🌟 简化功能说明 (只关注使用方法)
+    with gr.Accordion("📚 功能说明"):
+        gr.Markdown("""
+        本平台支持图像分类、语义分割和目标检测三大任务。
+        您可以通过以下步骤使用平台：
+        1. **切换选项卡**：选择您希望执行的 AI 任务。
+        2. **上传或选择图片**：上传您自己的图片或点击下方的示例图片。
+        3. **设置参数**：对于目标检测，调整置信度阈值。
+        4. **点击提交**：点击“提交任务”按钮，查看 AI 分析结果。
+        """)
+
+    # 🌟 新增：数据集介绍
+    with gr.Accordion("📚 基础数据集介绍", open=False):
+        gr.Markdown("""
+        ### 📖 模型训练数据集概览
+
+        | 任务 | 模型 | 数据集 | 类别数 | 简介 |
+        | :--- | :--- | :--- | :--- | :--- |
+        | 图像分类 | ViT | **ImageNet-1K** | 1000 | 包含超过 100 万张图像，是图像识别领域的标准基准。 |
+        | 语义分割 | SegFormer | **ADE20K** | 150 | 专注于场景解析，提供 150 种语义概念的像素级标注。 |
+        | 目标检测 | YOLOv8n | **COCO** | 80 | 最常用的目标检测数据集之一，包含大量物体实例。 |
+        """)
+
+    # 🌟 新增：网络结构介绍
+    with gr.Accordion("🧠 网络结构介绍", open=False):
+        gr.Markdown("""
+        ### 💻 模型架构说明
+
+        1.  **图像分类 (ViT):**
+            * **全称:** Vision Transformer (ViT-Base-Patch16-224)
+            * **特点:** 基于 Transformer 结构，将图像切片后进行序列输入，通过自注意力机制实现全局建模。
+
+        2.  **语义分割 (SegFormer):**
+            * **全称:** Segmentation Transformer
+            * **特点:** 高效的 Transformer 架构，使用轻量级解码器，专注于速度和准确性的平衡。
+
+        3.  **目标检测 (YOLOv8n):**
+            * **全称:** You Only Look Once, Version 8 (Nano)
+            * **特点:** 单阶段检测器，以速度著称，Nano (n) 版本在保持高性能的同时，体积最小。
+        """)
+
+    # --- 任务选项卡 ---
+    with gr.Tabs():
+        # 1. 图像分类 Tab
+        with gr.TabItem("🖼️ 图像分类 (ViT)"):
+            with gr.Row():
+                with gr.Column(scale=1):
+                    cls_input = gr.Image(type='pil', label="输入图像")
+                    cls_button = gr.Button("🚀 提交分类任务")
+                with gr.Column(scale=1):
+                    cls_output = gr.Label(num_top_classes=5, label="分类结果 (前 5)")
+
+            # 🌟 调整��序：Examples 先于 类别列表/查询 UI
+            gr.Examples(examples=CLS_EXAMPLES, inputs=[cls_input], label="示例图片")
+
+            # 🌟 展示所有分类类别列表
+            gr.Markdown("### 🌟 模型支持的全部分类类别 (ImageNet-1K)")
+            cls_category_json = gr.JSON(value=ALL_CLS_LABELS, label="所有类别列表", scale=1)
+
+            # 🌟 查询 UI
+            with gr.Row():
+                cls_search_query = gr.Textbox(label="查询类别", placeholder="Search Class Name (e.g., dog)", scale=3)
+                cls_search_button = gr.Button("🔍 搜索", scale=1)
+            cls_search_output = gr.Markdown("搜索结果将显示在这里。")
+
+            cls_search_button.click(
+                fn=search_labels,
+                inputs=[cls_search_query, cls_category_json],
+                outputs=cls_search_output
+            )
+
+            cls_button.click(cls_predict, inputs=cls_input, outputs=cls_output)
+
+        # 2. 语义分割 Tab
+        with gr.TabItem("✂️ 语义分割 (SegFormer)"):
+            with gr.Row():
+                with gr.Column(scale=2):
+                    seg_input = gr.Image(type='pil', label="输入图像")
+                    seg_button = gr.Button("🚀 提交分割任务")
+                with gr.Column(scale=2):
+                    seg_output = gr.Image(type='pil', label="分割结果 (叠加)")
+                with gr.Column(scale=1):
+                    # 🌟 展示图例
+                    gr.HTML(value=generate_legend_html(ALL_SEG_COLOR_MAP), scale=1)
+
+            # 🌟 调整顺序：Examples 先于 类别列表/查询 UI
+            gr.Examples(examples=SEG_EXAMPLES, inputs=[seg_input], label="示例图片")
+
+            # 保留完整的类别列表（以 JSON 格式展示，作为额外的参考）
+            gr.Markdown("### 完整类别列表 (JSON)")
+            seg_category_json = gr.JSON(value={f"ID {i}": label for i, label in enumerate(ALL_SEG_LABELS)},
+                                        label="所有类别 JSON")
+
+            # 🌟 查询 UI 提示改为英文
+            with gr.Row():
+                seg_search_query = gr.Textbox(label="查询类别", placeholder="Search Class Name (e.g., road, sky)",
+                                              scale=3)
+                seg_search_button = gr.Button("🔍 搜索", scale=1)
+            seg_search_output = gr.Markdown("搜索结果将显示在这里。")
+
+            seg_search_button.click(
+                fn=search_labels,
+                inputs=[seg_search_query, seg_category_json],
+                outputs=seg_search_output
+            )
+
+            seg_button.click(seg_predict, inputs=seg_input, outputs=seg_output)
+
+        # 3. 目标检测 Tab
+        with gr.TabItem("🎯 目标检测 (YOLOv8n)"):
+            with gr.Row():
+                with gr.Column(scale=1):
+                    det_input_image = gr.Image(type='pil', label="输入图像")
+                    det_input_number = gr.Number(
+                        precision=2,
+                        minimum=0.01,
+                        maximum=1,
+                        value=0.30,
+                        label='置信度阈值'
+                    )
+                    det_button = gr.Button("🚀 提交检测任务")
+                with gr.Column(scale=1):
+                    det_output = gr.Image(type='pil', label="检测结果 (边界框)")
+
+            # 🌟 调整顺序：Examples 先于 类别列表/查询 UI
+            gr.Examples(examples=DET_EXAMPLES, inputs=[det_input_image], label="示例图片")
+
+            # 🌟 展示目标检测类别列表
+            gr.Markdown("### 🎯 模型支持的检测类别 (COCO)")
+            det_category_json = gr.JSON(value=ALL_DET_LABELS, label="所有类别列表")
+
+            # 🌟 查询 UI 提示改为英文
+            with gr.Row():
+                det_search_query = gr.Textbox(label="查询类别", placeholder="Search Class Name (e.g., bicycle, train)",
+                                              scale=3)
+                det_search_button = gr.Button("🔍 搜索", scale=1)
+            det_search_output = gr.Markdown("搜索结果将显示在这里。")
+
+            det_search_button.click(
+                fn=search_labels,
+                inputs=[det_search_query, det_category_json],
+                outputs=det_search_output
+            )
+
+            det_button.click(det_predict, inputs=[det_input_image, det_input_number], outputs=det_output)
+
+    # 🌟 添加页脚和 Logo/版权
+    gr.HTML(
+        f"""
+        <div class='footer-logo-container'>
+            <div class="footer-links">
+                <p>{COPYRIGHT_TEXT}</p>
+            </div>
+
+            <div class="footer-links">
+
+                <!-- 🌟 学校图标和名称 (添加超链接) -->
+                <span class="footer-icon">🏢</span> 
+                <a href='https://wutinfo.whut.edu.cn/' target='_blank' style='text-decoration: none; color: inherit;'>
+                    <span>{SCHOOL_NAME_EN}</span>
+                </a>
+
+                <!-- 🌟 额外 Logo 位于版权信息之后 -->
+                <img src='file/{LOGO_PATH}' alt='Logo' style='height: 30px; margin-left: 20px;' onerror="this.style.display='none'">
+            </div>
+        </div>
+        """
+    )
+
+if __name__ == "__main__":
+    gr.close_all()
+    print("Launching Gradio demo...")
+    # 🌟 传入 css 参数
     demo.launch(share=True, css=CUSTOM_CSS)