ccmusic-database保姆级教学Gradio界面汉化结果页自定义CSS样式注入你是不是也遇到过这种情况好不容易部署了一个酷炫的AI模型比如这个音乐流派分类系统但打开界面一看——全是英文界面风格也跟你的网站格格不入一股浓浓的“默认模板”味儿。今天我就带你手把手改造这个基于ccmusic-database的音乐流派分类系统。我们不仅要把它从“洋气”的英文界面变成亲切的中文界面还要给它的结果展示页注入自定义的CSS样式让它看起来更专业、更符合你的审美。整个过程不需要你懂复杂的Web开发跟着我做就行。1. 项目准备与环境检查在开始美化之前我们得先确保基础功能是正常的。这个音乐流派分类系统本质上是一个基于Gradio构建的Web应用。1.1 理解项目结构这个系统用了一个挺聪明的思路它把音频信号比如你上传的MP3文件转换成一种叫CQTConstant-Q Transform的频谱图。你可以把它想象成一张音乐的“指纹照片”。然后它用一个在图像识别领域很厉害的模型——VGG19_BN——来“看”这张照片并判断它属于16种音乐流派中的哪一种。项目文件大概长这样你的项目文件夹/ ├── app.py # 主要的Web应用入口我们要修改的就是它 ├── vgg19_bn_cqt/ # 训练好的模型放在这里 │ └── save.pt # 模型文件有466MB ├── examples/ # 一些示例音频可以用来测试 └── plot.py # 训练过程的可视化脚本暂时用不上1.2 快速启动测试打开终端进入项目目录先跑起来看看原版效果# 确保你已经安装了依赖 pip install torch torchvision librosa gradio # 启动应用 python3 app.py然后在浏览器打开http://localhost:7860你应该能看到一个全英文的界面。上传一个MP3或WAV文件点击“Submit”它就会分析并显示结果。如果一切正常你会看到类似这样的结果当然是英文的Symphony (交响乐): 85%Opera (歌剧): 10%Solo (独奏): 3%...还有其他流派好了原版功能确认正常。接下来我们开始“装修”这个界面。2. Gradio界面汉化实战Gradio的界面汉化其实很简单就是找到界面上显示的文字把它们从英文改成中文。这些文字主要分布在几个地方页面标题、输入框标签、按钮文字、结果标签。2.1 备份原始文件改代码之前先备份这是好习惯# 备份原始app.py文件 cp app.py app.py.backup2.2 修改app.py实现汉化用你喜欢的文本编辑器比如VSCode、Sublime甚至记事本也行打开app.py。我们需要修改Gradio的界面配置部分。找到类似下面这样的代码段具体行数可能因版本略有不同# 原始代码可能是这样的示例 import gradio as gr # ... 中间是模型加载和预测函数 ... # 创建界面 iface gr.Interface( fnpredict_function, inputsgr.Audio(typefilepath), outputsgr.Label(num_top_classes5), titleMusic Genre Classification, descriptionUpload an audio file to classify its music genre., examples[[examples/example1.mp3], [examples/example2.wav]] ) iface.launch(server_port7860)我们要修改的是gr.Interface()函数里的title、description等参数。修改后大概是这样# 修改后的代码汉化版 import gradio as gr # ... 中间是模型加载和预测函数这部分不动 ... # 创建界面 - 汉化版 iface gr.Interface( fnpredict_function, # 预测函数不用改 inputsgr.Audio(typefilepath, label上传音频文件), outputsgr.Label(num_top_classes5, label分类结果), title音乐流派自动分类系统, description上传MP3或WAV格式的音频文件系统将自动分析其音乐流派。支持16种流派分类包括交响乐、流行、摇滚等。, examples[[examples/example1.mp3], [examples/example2.wav]], article ## 使用说明 1. **上传音频**点击上传按钮或拖放音频文件支持MP3/WAV格式 2. **开始分析**点击“提交”按钮系统将自动提取音频特征 3. **查看结果**系统将显示最可能的5种流派及其置信度 ## 支持的16种音乐流派 - 古典类交响乐、歌剧、独奏、室内乐 - 流行类流行抒情、成人当代、青少年流行、舞曲流行等 - 摇滚类成人另类摇滚、励志摇滚、软摇滚 - 其他灵魂乐/RB、独立流行、艺术流行、原声流行 ## 技术说明 - 模型架构VGG19_BN CQT特征提取 - 分析时长自动截取前30秒进行分析 - 准确率基于最佳模型VGG19_BNCQT ) iface.launch(server_port7860)主要改动点title从英文标题改为“音乐流派自动分类系统”inputs的label参数改为“上传音频文件”outputs的label参数改为“分类结果”description详细的中文描述新增article参数用Markdown格式添加详细的使用说明和技术信息2.3 汉化预测结果的流派名称如果预测结果显示的还是英文流派名我们还需要修改预测函数返回的结果。在app.py中找到预测函数通常叫predict或类似的名称。找到返回预测结果的地方添加一个流派名称的映射字典# 在预测函数附近添加流派名称映射 GENRE_MAPPING { Symphony: 交响乐, Opera: 歌剧, Solo: 独奏, Chamber: 室内乐, Pop vocal ballad: 流行抒情, Adult contemporary: 成人当代, Teen pop: 青少年流行, Contemporary dance pop: 现代舞曲, Dance pop: 舞曲流行, Classic indie pop: 独立流行, Chamber cabaret art pop: 艺术流行, Soul / RB: 灵魂乐/RB, Adult alternative rock: 成人另类摇滚, Uplifting anthemic rock: 励志摇滚, Soft rock: 软摇滚, Acoustic pop: 原声流行 } # 在预测函数中将英文流派名转换为中文 def predict(audio_path): # ... 原有的音频处理和模型预测代码 ... # 假设predicted_genres是预测结果的字典格式如{Symphony: 0.85, Opera: 0.10, ...} # 将其转换为中文 chinese_results {} for genre_en, prob in predicted_genres.items(): genre_cn GENRE_MAPPING.get(genre_en, genre_en) # 如果映射表中没有保持英文 chinese_results[genre_cn] prob return chinese_results2.4 测试汉化效果保存修改后的app.py重新启动应用python3 app.py刷新浏览器页面现在你应该能看到全中文的界面了。上传一个音频文件测试一下结果也应该显示中文流派名称。3. 自定义CSS样式注入界面汉化完成了但样子还是Gradio的默认样式。接下来我们给它“换皮肤”让结果页面看起来更专业、更美观。3.1 理解Gradio的CSS注入方式Gradio提供了几种添加自定义CSS的方式通过css参数直接在Interface中传入CSS字符串通过theme参数使用预定义的主题通过外部CSS文件更灵活适合复杂的样式我们选择第一种方式因为它最简单直接。3.2 设计结果页的CSS样式我们希望结果页面有这样的效果每个流派用卡片式展示有圆角和阴影概率用进度条直观显示不同概率范围用不同颜色高概率用绿色中等用蓝色低概率用灰色添加一些动画效果让结果显示更平滑在app.py的gr.Interface()调用中添加css参数# 自定义CSS样式 custom_css /* 整体结果容器样式 */ .gradio-container { font-family: Segoe UI, Microsoft YaHei, sans-serif; } /* 结果标签的容器 */ .gr-label { width: 100%; max-width: 600px; margin: 0 auto; } /* 每个流派结果的卡片样式 */ .gr-label .result-item { background: white; border-radius: 12px; padding: 16px 20px; margin-bottom: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); border-left: 5px solid #4CAF50; transition: all 0.3s ease; display: flex; justify-content: space-between; align-items: center; } .gr-label .result-item:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); } /* 流派名称样式 */ .gr-label .genre-name { font-size: 18px; font-weight: 600; color: #333; flex: 1; } /* 概率值样式 */ .gr-label .probability { font-size: 20px; font-weight: 700; color: #2196F3; margin-left: 20px; min-width: 70px; text-align: right; } /* 概率进度条容器 */ .gr-label .progress-container { width: 200px; height: 20px; background-color: #f0f0f0; border-radius: 10px; overflow: hidden; margin-left: 20px; position: relative; } /* 概率进度条 */ .gr-label .progress-bar { height: 100%; border-radius: 10px; transition: width 1s ease-in-out; } /* 不同概率的颜色 */ .gr-label .progress-bar.high { background: linear-gradient(90deg, #4CAF50, #8BC34A); } .gr-label .progress-bar.medium { background: linear-gradient(90deg, #2196F3, #03A9F4); } .gr-label .progress-bar.low { background: linear-gradient(90deg, #9E9E9E, #BDBDBD); } /* 进度条上的百分比文字 */ .gr-label .progress-text { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: #333; } /* 顶部结果的特殊样式 */ .gr-label .result-item:first-child { border-left-color: #FF9800; background: linear-gradient(135deg, #FFF8E1, #FFFFFF); } .gr-label .result-item:first-child .genre-name { color: #FF9800; } .gr-label .result-item:first-child .probability { color: #FF9800; } /* 响应式调整 */ media (max-width: 768px) { .gr-label .result-item { flex-direction: column; align-items: flex-start; } .gr-label .progress-container { width: 100%; margin-left: 0; margin-top: 10px; } .gr-label .probability { margin-left: 0; margin-top: 5px; } } # 然后修改Interface添加css参数 iface gr.Interface( fnpredict_function, inputsgr.Audio(typefilepath, label上传音频文件), outputsgr.Label(num_top_classes5, label分类结果), title音乐流派自动分类系统, description上传MP3或WAV格式的音频文件系统将自动分析其音乐流派。, csscustom_css, # 添加这行 # ... 其他参数不变 ... )3.3 修改预测函数以支持CSS样式光有CSS还不够我们还需要修改预测函数的返回格式让结果能够应用我们的CSS样式。Gradio的Label组件默认只接受字典格式的结果但我们可以通过HTML来增强显示效果。不过这里有个更简单的方法我们可以创建一个自定义的HTML输出。修改预测函数让它返回HTML字符串而不是简单的字典def predict(audio_path): # ... 原有的音频处理和模型预测代码 ... # 假设我们得到了预测结果格式如[(交响乐, 0.85), (歌剧, 0.10), ...] # 按概率从高到低排序取前5个 sorted_results sorted(predicted_items, keylambda x: x[1], reverseTrue)[:5] # 生成HTML内容 html_content div classresults-container for i, (genre, prob) in enumerate(sorted_results): # 确定进度条类别 if prob 0.7: progress_class high elif prob 0.3: progress_class medium else: progress_class low # 计算进度条宽度 progress_width prob * 100 html_content f div classresult-item div classgenre-name{genre}/div div classprobability{prob:.1%}/div div classprogress-container div classprogress-bar {progress_class} stylewidth: {progress_width}%;/div div classprogress-text{prob:.1%}/div /div /div html_content /div return html_content但是Gradio的Label组件可能无法直接渲染HTML。我们可以改用gr.HTML组件作为输出# 修改Interface的输出组件 iface gr.Interface( fnpredict_function, inputsgr.Audio(typefilepath, label上传音频文件), outputsgr.HTML(label分类结果), # 改为HTML组件 title音乐流派自动分类系统, description上传MP3或WAV格式的音频文件系统将自动分析其音乐流派。, csscustom_css, # ... 其他参数 ... )3.4 完整代码示例为了让一切正常工作这里提供一个更完整的修改示例。你需要根据你的app.py原有结构进行调整import gradio as gr import torch import librosa import numpy as np from torchvision import transforms from PIL import Image import torch.nn as nn import torchvision.models as models import tempfile import os # 你的模型加载和预测函数在这里... # 假设你已经有了加载模型和预测的代码 # 流派名称映射 GENRE_MAPPING { Symphony: 交响乐, Opera: 歌剧, Solo: 独奏, Chamber: 室内乐, Pop vocal ballad: 流行抒情, Adult contemporary: 成人当代, Teen pop: 青少年流行, Contemporary dance pop: 现代舞曲, Dance pop: 舞曲流行, Classic indie pop: 独立流行, Chamber cabaret art pop: 艺术流行, Soul / RB: 灵魂乐/RB, Adult alternative rock: 成人另类摇滚, Uplifting anthemic rock: 励志摇滚, Soft rock: 软摇滚, Acoustic pop: 原声流行 } # 自定义CSS custom_css /* 这里放入上面定义的所有CSS样式 */ def predict(audio_path): 预测音频的音乐流派 try: # 这里是你原有的音频处理和模型预测代码 # 假设最终得到了预测概率字典 # 例如{Symphony: 0.85, Opera: 0.10, Solo: 0.03, ...} # 为了示例我们模拟一些数据 # 在实际代码中这里应该是你的模型预测结果 simulated_results { 交响乐: 0.85, 歌剧: 0.10, 独奏: 0.03, 室内乐: 0.01, 流行抒情: 0.005 } # 生成HTML结果 html_content div classresults-container stylemax-width: 800px; margin: 0 auto; h3 styletext-align: center; color: #333; margin-bottom: 24px; 音乐流派分析结果 /h3 for i, (genre, prob) in enumerate(simulated_results.items()): # 确定进度条类别 if prob 0.7: progress_class high bar_color #4CAF50 elif prob 0.3: progress_class medium bar_color #2196F3 else: progress_class low bar_color #9E9E9E # 计算进度条宽度 progress_width prob * 100 # 添加排名图标 rank_icon [, , , 4️⃣, 5️⃣][i] if i 5 else f{i1}️⃣ html_content f div classresult-item style background: white; border-radius: 12px; padding: 16px 20px; margin-bottom: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); border-left: 5px solid {bar_color}; transition: all 0.3s ease; display: flex; justify-content: space-between; align-items: center; div styledisplay: flex; align-items: center; gap: 12px; span stylefont-size: 24px;{rank_icon}/span div div classgenre-name stylefont-size: 18px; font-weight: 600; color: #333; {genre} /div div stylefont-size: 14px; color: #666; margin-top: 4px; 置信度: {prob:.1%} /div /div /div div styledisplay: flex; align-items: center; gap: 20px; div classprobability stylefont-size: 20px; font-weight: 700; color: {bar_color}; {prob:.1%} /div div classprogress-container style width: 200px; height: 20px; background-color: #f0f0f0; border-radius: 10px; overflow: hidden; position: relative; div classprogress-bar {progress_class} style height: 100%; border-radius: 10px; width: {progress_width}%; background: linear-gradient(90deg, {bar_color}, lighten({bar_color}, 20%)); transition: width 1s ease-in-out; /div div classprogress-text style position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: #333; {progress_width:.1f}% /div /div /div /div html_content div styletext-align: center; margin-top: 24px; color: #666; font-size: 14px; 分析完成 ✅ 系统基于前30秒音频进行流派分类 /div /div return html_content except Exception as e: return fdiv stylecolor: red; padding: 20px;分析出错: {str(e)}/div # 创建Gradio界面 iface gr.Interface( fnpredict, inputsgr.Audio(typefilepath, label上传音频文件), outputsgr.HTML(label分类结果), title 音乐流派自动分类系统, description div stylebackground: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 20px; border-radius: 12px; color: white; margin-bottom: 20px; h3 stylemargin-top: 0;✨ 系统简介/h3 p基于VGG19_BN CQT特征的智能音乐流派分类系统支持16种流派识别。/p /div div stylebackground: #f8f9fa; padding: 16px; border-radius: 8px; margin-bottom: 20px; h4 使用步骤/h4 ol listrong上传音频/strong点击上传按钮或拖放MP3/WAV文件/li listrong开始分析/strong点击提交按钮系统自动处理/li listrong查看结果/strong显示Top 5流派预测及概率分布/li /ol /div div styledisplay: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 20px; div stylebackground: #e3f2fd; padding: 12px; border-radius: 8px; strong 古典音乐/strongbr 交响乐、歌剧、独奏、室内乐 /div div stylebackground: #f3e5f5; padding: 12px; border-radius: 8px; strong 流行音乐/strongbr 流行抒情、舞曲流行、青少年流行 /div div stylebackground: #fff3e0; padding: 12px; border-radius: 8px; strong 摇滚音乐/strongbr 成人另类摇滚、励志摇滚、软摇滚 /div div stylebackground: #e8f5e9; padding: 12px; border-radius: 8px; strong 其他流派/strongbr 灵魂乐/RB、独立流行、艺术流行 /div /div , examples[ [examples/example1.mp3], [examples/example2.wav] ], themesoft, # 使用Gradio的soft主题 csscustom_css ) # 启动应用 if __name__ __main__: iface.launch( server_name0.0.0.0, server_port7860, shareFalse )3.5 测试最终效果保存所有修改重新启动应用python3 app.py现在访问http://localhost:7860你会看到一个完全不同的界面全中文界面所有文字都是中文美观的结果展示每个流派用卡片展示带有进度条响应式设计在手机或平板上也能正常显示视觉层次分明高概率的结果用绿色突出显示4. 进阶美化与功能增强如果你想让界面更加个性化这里还有一些进阶技巧4.1 添加加载动画在分析过程中添加一个加载动画提升用户体验# 在预测函数开始时返回加载状态 def predict(audio_path): # 立即返回加载提示 loading_html div styletext-align: center; padding: 40px; div stylefont-size: 24px; margin-bottom: 20px; 分析中.../div div styledisplay: inline-block; width: 50px; height: 50px; border: 5px solid #f3f3f3; border-top: 5px solid #3498db; border-radius: 50%; animation: spin 1s linear infinite;/div style keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /style div stylemargin-top: 20px; color: #666;正在提取音频特征并进行分类分析/div /div # 这里需要Gradio的支持来更新内容 # 实际实现可能需要使用gr.Progress或回调函数4.2 添加主题切换让用户可以选择不同的界面主题# 添加主题CSS themes { light: .gradio-container { background: #ffffff; } .result-item { background: #f8f9fa; } , dark: .gradio-container { background: #1a1a1a; color: #ffffff; } .result-item { background: #2d2d2d; color: #ffffff; } .genre-name { color: #ffffff !important; } , blue: .gradio-container { background: #e3f2fd; } .result-item { background: #bbdefb; } } # 在界面中添加主题选择下拉框 theme_selector gr.Dropdown( choices[light, dark, blue], valuelight, label选择主题 ) # 使用JavaScript动态切换主题 js_code function(theme) { // 移除旧主题 const oldStyle document.getElementById(custom-theme); if (oldStyle) oldStyle.remove(); // 添加新主题 const style document.createElement(style); style.id custom-theme; style.textContent themes[theme]; document.head.appendChild(style); return theme; } 4.3 添加结果导出功能让用户可以导出分析结果# 在HTML结果中添加导出按钮 html_content div styletext-align: center; margin-top: 24px; button onclickexportResults() style background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; padding: 10px 24px; border-radius: 6px; font-size: 16px; cursor: pointer; transition: all 0.3s ease; 导出分析结果 /button script function exportResults() { const results document.querySelector(.results-container).innerText; const blob new Blob([results], {type: text/plain}); const url window.URL.createObjectURL(blob); const a document.createElement(a); a.href url; a.download 音乐流派分析结果.txt; a.click(); window.URL.revokeObjectURL(url); } /script /div 5. 总结与建议通过上面的步骤我们成功将ccmusic-database音乐流派分类系统的Gradio界面进行了全面汉化和美化。整个过程可以分为三个主要阶段5.1 主要成果回顾界面完全汉化从标题、描述到按钮标签全部改为中文让中文用户使用更顺畅结果页样式美化用CSS实现了卡片式布局、彩色进度条、悬停效果让结果显示更直观美观响应式设计确保在不同设备上都能良好显示用户体验提升添加了加载状态、主题切换等增强功能5.2 实际应用建议在实际部署时你还可以考虑性能优化如果访问量较大可以考虑添加缓存机制避免重复分析相同音频使用异步处理避免界面卡顿对模型进行优化提高推理速度功能扩展添加批量上传功能一次分析多个文件支持更多音频格式如FLAC、AAC等添加历史记录功能保存用户的分析记录部署建议使用Docker容器化部署方便迁移和扩展配置Nginx反向代理提高访问安全性添加用户认证如果需要限制访问5.3 遇到的问题与解决在改造过程中你可能会遇到一些问题这里是一些常见问题的解决方法CSS样式不生效检查CSS选择器是否正确Gradio生成的HTML结构可能有所不同中文显示乱码确保Python文件和HTML都使用UTF-8编码界面布局错乱使用浏览器开发者工具检查元素调整CSS样式模型加载慢首次加载需要下载模型可以预先下载好模型文件5.4 进一步学习资源如果你想深入学习Gradio的定制化官方文档Gradio的官方文档非常详细有很多高级功能示例CSS学习MDN Web Docs是学习CSS最好的资源JavaScript交互如果需要更复杂的交互可以学习一些基础的JavaScript这个改造过程不仅适用于ccmusic-database任何基于Gradio的AI应用都可以用类似的方法进行界面定制。关键是理解Gradio的工作原理然后根据需要调整界面元素和样式。现在你的音乐流派分类系统不仅功能强大而且界面友好美观完全可以作为正式产品使用了。试试上传你喜欢的音乐看看它属于什么流派吧获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。
ccmusic-database保姆级教学：Gradio界面汉化+结果页自定义CSS样式注入
ccmusic-database保姆级教学Gradio界面汉化结果页自定义CSS样式注入你是不是也遇到过这种情况好不容易部署了一个酷炫的AI模型比如这个音乐流派分类系统但打开界面一看——全是英文界面风格也跟你的网站格格不入一股浓浓的“默认模板”味儿。今天我就带你手把手改造这个基于ccmusic-database的音乐流派分类系统。我们不仅要把它从“洋气”的英文界面变成亲切的中文界面还要给它的结果展示页注入自定义的CSS样式让它看起来更专业、更符合你的审美。整个过程不需要你懂复杂的Web开发跟着我做就行。1. 项目准备与环境检查在开始美化之前我们得先确保基础功能是正常的。这个音乐流派分类系统本质上是一个基于Gradio构建的Web应用。1.1 理解项目结构这个系统用了一个挺聪明的思路它把音频信号比如你上传的MP3文件转换成一种叫CQTConstant-Q Transform的频谱图。你可以把它想象成一张音乐的“指纹照片”。然后它用一个在图像识别领域很厉害的模型——VGG19_BN——来“看”这张照片并判断它属于16种音乐流派中的哪一种。项目文件大概长这样你的项目文件夹/ ├── app.py # 主要的Web应用入口我们要修改的就是它 ├── vgg19_bn_cqt/ # 训练好的模型放在这里 │ └── save.pt # 模型文件有466MB ├── examples/ # 一些示例音频可以用来测试 └── plot.py # 训练过程的可视化脚本暂时用不上1.2 快速启动测试打开终端进入项目目录先跑起来看看原版效果# 确保你已经安装了依赖 pip install torch torchvision librosa gradio # 启动应用 python3 app.py然后在浏览器打开http://localhost:7860你应该能看到一个全英文的界面。上传一个MP3或WAV文件点击“Submit”它就会分析并显示结果。如果一切正常你会看到类似这样的结果当然是英文的Symphony (交响乐): 85%Opera (歌剧): 10%Solo (独奏): 3%...还有其他流派好了原版功能确认正常。接下来我们开始“装修”这个界面。2. Gradio界面汉化实战Gradio的界面汉化其实很简单就是找到界面上显示的文字把它们从英文改成中文。这些文字主要分布在几个地方页面标题、输入框标签、按钮文字、结果标签。2.1 备份原始文件改代码之前先备份这是好习惯# 备份原始app.py文件 cp app.py app.py.backup2.2 修改app.py实现汉化用你喜欢的文本编辑器比如VSCode、Sublime甚至记事本也行打开app.py。我们需要修改Gradio的界面配置部分。找到类似下面这样的代码段具体行数可能因版本略有不同# 原始代码可能是这样的示例 import gradio as gr # ... 中间是模型加载和预测函数 ... # 创建界面 iface gr.Interface( fnpredict_function, inputsgr.Audio(typefilepath), outputsgr.Label(num_top_classes5), titleMusic Genre Classification, descriptionUpload an audio file to classify its music genre., examples[[examples/example1.mp3], [examples/example2.wav]] ) iface.launch(server_port7860)我们要修改的是gr.Interface()函数里的title、description等参数。修改后大概是这样# 修改后的代码汉化版 import gradio as gr # ... 中间是模型加载和预测函数这部分不动 ... # 创建界面 - 汉化版 iface gr.Interface( fnpredict_function, # 预测函数不用改 inputsgr.Audio(typefilepath, label上传音频文件), outputsgr.Label(num_top_classes5, label分类结果), title音乐流派自动分类系统, description上传MP3或WAV格式的音频文件系统将自动分析其音乐流派。支持16种流派分类包括交响乐、流行、摇滚等。, examples[[examples/example1.mp3], [examples/example2.wav]], article ## 使用说明 1. **上传音频**点击上传按钮或拖放音频文件支持MP3/WAV格式 2. **开始分析**点击“提交”按钮系统将自动提取音频特征 3. **查看结果**系统将显示最可能的5种流派及其置信度 ## 支持的16种音乐流派 - 古典类交响乐、歌剧、独奏、室内乐 - 流行类流行抒情、成人当代、青少年流行、舞曲流行等 - 摇滚类成人另类摇滚、励志摇滚、软摇滚 - 其他灵魂乐/RB、独立流行、艺术流行、原声流行 ## 技术说明 - 模型架构VGG19_BN CQT特征提取 - 分析时长自动截取前30秒进行分析 - 准确率基于最佳模型VGG19_BNCQT ) iface.launch(server_port7860)主要改动点title从英文标题改为“音乐流派自动分类系统”inputs的label参数改为“上传音频文件”outputs的label参数改为“分类结果”description详细的中文描述新增article参数用Markdown格式添加详细的使用说明和技术信息2.3 汉化预测结果的流派名称如果预测结果显示的还是英文流派名我们还需要修改预测函数返回的结果。在app.py中找到预测函数通常叫predict或类似的名称。找到返回预测结果的地方添加一个流派名称的映射字典# 在预测函数附近添加流派名称映射 GENRE_MAPPING { Symphony: 交响乐, Opera: 歌剧, Solo: 独奏, Chamber: 室内乐, Pop vocal ballad: 流行抒情, Adult contemporary: 成人当代, Teen pop: 青少年流行, Contemporary dance pop: 现代舞曲, Dance pop: 舞曲流行, Classic indie pop: 独立流行, Chamber cabaret art pop: 艺术流行, Soul / RB: 灵魂乐/RB, Adult alternative rock: 成人另类摇滚, Uplifting anthemic rock: 励志摇滚, Soft rock: 软摇滚, Acoustic pop: 原声流行 } # 在预测函数中将英文流派名转换为中文 def predict(audio_path): # ... 原有的音频处理和模型预测代码 ... # 假设predicted_genres是预测结果的字典格式如{Symphony: 0.85, Opera: 0.10, ...} # 将其转换为中文 chinese_results {} for genre_en, prob in predicted_genres.items(): genre_cn GENRE_MAPPING.get(genre_en, genre_en) # 如果映射表中没有保持英文 chinese_results[genre_cn] prob return chinese_results2.4 测试汉化效果保存修改后的app.py重新启动应用python3 app.py刷新浏览器页面现在你应该能看到全中文的界面了。上传一个音频文件测试一下结果也应该显示中文流派名称。3. 自定义CSS样式注入界面汉化完成了但样子还是Gradio的默认样式。接下来我们给它“换皮肤”让结果页面看起来更专业、更美观。3.1 理解Gradio的CSS注入方式Gradio提供了几种添加自定义CSS的方式通过css参数直接在Interface中传入CSS字符串通过theme参数使用预定义的主题通过外部CSS文件更灵活适合复杂的样式我们选择第一种方式因为它最简单直接。3.2 设计结果页的CSS样式我们希望结果页面有这样的效果每个流派用卡片式展示有圆角和阴影概率用进度条直观显示不同概率范围用不同颜色高概率用绿色中等用蓝色低概率用灰色添加一些动画效果让结果显示更平滑在app.py的gr.Interface()调用中添加css参数# 自定义CSS样式 custom_css /* 整体结果容器样式 */ .gradio-container { font-family: Segoe UI, Microsoft YaHei, sans-serif; } /* 结果标签的容器 */ .gr-label { width: 100%; max-width: 600px; margin: 0 auto; } /* 每个流派结果的卡片样式 */ .gr-label .result-item { background: white; border-radius: 12px; padding: 16px 20px; margin-bottom: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); border-left: 5px solid #4CAF50; transition: all 0.3s ease; display: flex; justify-content: space-between; align-items: center; } .gr-label .result-item:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); } /* 流派名称样式 */ .gr-label .genre-name { font-size: 18px; font-weight: 600; color: #333; flex: 1; } /* 概率值样式 */ .gr-label .probability { font-size: 20px; font-weight: 700; color: #2196F3; margin-left: 20px; min-width: 70px; text-align: right; } /* 概率进度条容器 */ .gr-label .progress-container { width: 200px; height: 20px; background-color: #f0f0f0; border-radius: 10px; overflow: hidden; margin-left: 20px; position: relative; } /* 概率进度条 */ .gr-label .progress-bar { height: 100%; border-radius: 10px; transition: width 1s ease-in-out; } /* 不同概率的颜色 */ .gr-label .progress-bar.high { background: linear-gradient(90deg, #4CAF50, #8BC34A); } .gr-label .progress-bar.medium { background: linear-gradient(90deg, #2196F3, #03A9F4); } .gr-label .progress-bar.low { background: linear-gradient(90deg, #9E9E9E, #BDBDBD); } /* 进度条上的百分比文字 */ .gr-label .progress-text { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: #333; } /* 顶部结果的特殊样式 */ .gr-label .result-item:first-child { border-left-color: #FF9800; background: linear-gradient(135deg, #FFF8E1, #FFFFFF); } .gr-label .result-item:first-child .genre-name { color: #FF9800; } .gr-label .result-item:first-child .probability { color: #FF9800; } /* 响应式调整 */ media (max-width: 768px) { .gr-label .result-item { flex-direction: column; align-items: flex-start; } .gr-label .progress-container { width: 100%; margin-left: 0; margin-top: 10px; } .gr-label .probability { margin-left: 0; margin-top: 5px; } } # 然后修改Interface添加css参数 iface gr.Interface( fnpredict_function, inputsgr.Audio(typefilepath, label上传音频文件), outputsgr.Label(num_top_classes5, label分类结果), title音乐流派自动分类系统, description上传MP3或WAV格式的音频文件系统将自动分析其音乐流派。, csscustom_css, # 添加这行 # ... 其他参数不变 ... )3.3 修改预测函数以支持CSS样式光有CSS还不够我们还需要修改预测函数的返回格式让结果能够应用我们的CSS样式。Gradio的Label组件默认只接受字典格式的结果但我们可以通过HTML来增强显示效果。不过这里有个更简单的方法我们可以创建一个自定义的HTML输出。修改预测函数让它返回HTML字符串而不是简单的字典def predict(audio_path): # ... 原有的音频处理和模型预测代码 ... # 假设我们得到了预测结果格式如[(交响乐, 0.85), (歌剧, 0.10), ...] # 按概率从高到低排序取前5个 sorted_results sorted(predicted_items, keylambda x: x[1], reverseTrue)[:5] # 生成HTML内容 html_content div classresults-container for i, (genre, prob) in enumerate(sorted_results): # 确定进度条类别 if prob 0.7: progress_class high elif prob 0.3: progress_class medium else: progress_class low # 计算进度条宽度 progress_width prob * 100 html_content f div classresult-item div classgenre-name{genre}/div div classprobability{prob:.1%}/div div classprogress-container div classprogress-bar {progress_class} stylewidth: {progress_width}%;/div div classprogress-text{prob:.1%}/div /div /div html_content /div return html_content但是Gradio的Label组件可能无法直接渲染HTML。我们可以改用gr.HTML组件作为输出# 修改Interface的输出组件 iface gr.Interface( fnpredict_function, inputsgr.Audio(typefilepath, label上传音频文件), outputsgr.HTML(label分类结果), # 改为HTML组件 title音乐流派自动分类系统, description上传MP3或WAV格式的音频文件系统将自动分析其音乐流派。, csscustom_css, # ... 其他参数 ... )3.4 完整代码示例为了让一切正常工作这里提供一个更完整的修改示例。你需要根据你的app.py原有结构进行调整import gradio as gr import torch import librosa import numpy as np from torchvision import transforms from PIL import Image import torch.nn as nn import torchvision.models as models import tempfile import os # 你的模型加载和预测函数在这里... # 假设你已经有了加载模型和预测的代码 # 流派名称映射 GENRE_MAPPING { Symphony: 交响乐, Opera: 歌剧, Solo: 独奏, Chamber: 室内乐, Pop vocal ballad: 流行抒情, Adult contemporary: 成人当代, Teen pop: 青少年流行, Contemporary dance pop: 现代舞曲, Dance pop: 舞曲流行, Classic indie pop: 独立流行, Chamber cabaret art pop: 艺术流行, Soul / RB: 灵魂乐/RB, Adult alternative rock: 成人另类摇滚, Uplifting anthemic rock: 励志摇滚, Soft rock: 软摇滚, Acoustic pop: 原声流行 } # 自定义CSS custom_css /* 这里放入上面定义的所有CSS样式 */ def predict(audio_path): 预测音频的音乐流派 try: # 这里是你原有的音频处理和模型预测代码 # 假设最终得到了预测概率字典 # 例如{Symphony: 0.85, Opera: 0.10, Solo: 0.03, ...} # 为了示例我们模拟一些数据 # 在实际代码中这里应该是你的模型预测结果 simulated_results { 交响乐: 0.85, 歌剧: 0.10, 独奏: 0.03, 室内乐: 0.01, 流行抒情: 0.005 } # 生成HTML结果 html_content div classresults-container stylemax-width: 800px; margin: 0 auto; h3 styletext-align: center; color: #333; margin-bottom: 24px; 音乐流派分析结果 /h3 for i, (genre, prob) in enumerate(simulated_results.items()): # 确定进度条类别 if prob 0.7: progress_class high bar_color #4CAF50 elif prob 0.3: progress_class medium bar_color #2196F3 else: progress_class low bar_color #9E9E9E # 计算进度条宽度 progress_width prob * 100 # 添加排名图标 rank_icon [, , , 4️⃣, 5️⃣][i] if i 5 else f{i1}️⃣ html_content f div classresult-item style background: white; border-radius: 12px; padding: 16px 20px; margin-bottom: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); border-left: 5px solid {bar_color}; transition: all 0.3s ease; display: flex; justify-content: space-between; align-items: center; div styledisplay: flex; align-items: center; gap: 12px; span stylefont-size: 24px;{rank_icon}/span div div classgenre-name stylefont-size: 18px; font-weight: 600; color: #333; {genre} /div div stylefont-size: 14px; color: #666; margin-top: 4px; 置信度: {prob:.1%} /div /div /div div styledisplay: flex; align-items: center; gap: 20px; div classprobability stylefont-size: 20px; font-weight: 700; color: {bar_color}; {prob:.1%} /div div classprogress-container style width: 200px; height: 20px; background-color: #f0f0f0; border-radius: 10px; overflow: hidden; position: relative; div classprogress-bar {progress_class} style height: 100%; border-radius: 10px; width: {progress_width}%; background: linear-gradient(90deg, {bar_color}, lighten({bar_color}, 20%)); transition: width 1s ease-in-out; /div div classprogress-text style position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: #333; {progress_width:.1f}% /div /div /div /div html_content div styletext-align: center; margin-top: 24px; color: #666; font-size: 14px; 分析完成 ✅ 系统基于前30秒音频进行流派分类 /div /div return html_content except Exception as e: return fdiv stylecolor: red; padding: 20px;分析出错: {str(e)}/div # 创建Gradio界面 iface gr.Interface( fnpredict, inputsgr.Audio(typefilepath, label上传音频文件), outputsgr.HTML(label分类结果), title 音乐流派自动分类系统, description div stylebackground: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 20px; border-radius: 12px; color: white; margin-bottom: 20px; h3 stylemargin-top: 0;✨ 系统简介/h3 p基于VGG19_BN CQT特征的智能音乐流派分类系统支持16种流派识别。/p /div div stylebackground: #f8f9fa; padding: 16px; border-radius: 8px; margin-bottom: 20px; h4 使用步骤/h4 ol listrong上传音频/strong点击上传按钮或拖放MP3/WAV文件/li listrong开始分析/strong点击提交按钮系统自动处理/li listrong查看结果/strong显示Top 5流派预测及概率分布/li /ol /div div styledisplay: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 20px; div stylebackground: #e3f2fd; padding: 12px; border-radius: 8px; strong 古典音乐/strongbr 交响乐、歌剧、独奏、室内乐 /div div stylebackground: #f3e5f5; padding: 12px; border-radius: 8px; strong 流行音乐/strongbr 流行抒情、舞曲流行、青少年流行 /div div stylebackground: #fff3e0; padding: 12px; border-radius: 8px; strong 摇滚音乐/strongbr 成人另类摇滚、励志摇滚、软摇滚 /div div stylebackground: #e8f5e9; padding: 12px; border-radius: 8px; strong 其他流派/strongbr 灵魂乐/RB、独立流行、艺术流行 /div /div , examples[ [examples/example1.mp3], [examples/example2.wav] ], themesoft, # 使用Gradio的soft主题 csscustom_css ) # 启动应用 if __name__ __main__: iface.launch( server_name0.0.0.0, server_port7860, shareFalse )3.5 测试最终效果保存所有修改重新启动应用python3 app.py现在访问http://localhost:7860你会看到一个完全不同的界面全中文界面所有文字都是中文美观的结果展示每个流派用卡片展示带有进度条响应式设计在手机或平板上也能正常显示视觉层次分明高概率的结果用绿色突出显示4. 进阶美化与功能增强如果你想让界面更加个性化这里还有一些进阶技巧4.1 添加加载动画在分析过程中添加一个加载动画提升用户体验# 在预测函数开始时返回加载状态 def predict(audio_path): # 立即返回加载提示 loading_html div styletext-align: center; padding: 40px; div stylefont-size: 24px; margin-bottom: 20px; 分析中.../div div styledisplay: inline-block; width: 50px; height: 50px; border: 5px solid #f3f3f3; border-top: 5px solid #3498db; border-radius: 50%; animation: spin 1s linear infinite;/div style keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /style div stylemargin-top: 20px; color: #666;正在提取音频特征并进行分类分析/div /div # 这里需要Gradio的支持来更新内容 # 实际实现可能需要使用gr.Progress或回调函数4.2 添加主题切换让用户可以选择不同的界面主题# 添加主题CSS themes { light: .gradio-container { background: #ffffff; } .result-item { background: #f8f9fa; } , dark: .gradio-container { background: #1a1a1a; color: #ffffff; } .result-item { background: #2d2d2d; color: #ffffff; } .genre-name { color: #ffffff !important; } , blue: .gradio-container { background: #e3f2fd; } .result-item { background: #bbdefb; } } # 在界面中添加主题选择下拉框 theme_selector gr.Dropdown( choices[light, dark, blue], valuelight, label选择主题 ) # 使用JavaScript动态切换主题 js_code function(theme) { // 移除旧主题 const oldStyle document.getElementById(custom-theme); if (oldStyle) oldStyle.remove(); // 添加新主题 const style document.createElement(style); style.id custom-theme; style.textContent themes[theme]; document.head.appendChild(style); return theme; } 4.3 添加结果导出功能让用户可以导出分析结果# 在HTML结果中添加导出按钮 html_content div styletext-align: center; margin-top: 24px; button onclickexportResults() style background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; padding: 10px 24px; border-radius: 6px; font-size: 16px; cursor: pointer; transition: all 0.3s ease; 导出分析结果 /button script function exportResults() { const results document.querySelector(.results-container).innerText; const blob new Blob([results], {type: text/plain}); const url window.URL.createObjectURL(blob); const a document.createElement(a); a.href url; a.download 音乐流派分析结果.txt; a.click(); window.URL.revokeObjectURL(url); } /script /div 5. 总结与建议通过上面的步骤我们成功将ccmusic-database音乐流派分类系统的Gradio界面进行了全面汉化和美化。整个过程可以分为三个主要阶段5.1 主要成果回顾界面完全汉化从标题、描述到按钮标签全部改为中文让中文用户使用更顺畅结果页样式美化用CSS实现了卡片式布局、彩色进度条、悬停效果让结果显示更直观美观响应式设计确保在不同设备上都能良好显示用户体验提升添加了加载状态、主题切换等增强功能5.2 实际应用建议在实际部署时你还可以考虑性能优化如果访问量较大可以考虑添加缓存机制避免重复分析相同音频使用异步处理避免界面卡顿对模型进行优化提高推理速度功能扩展添加批量上传功能一次分析多个文件支持更多音频格式如FLAC、AAC等添加历史记录功能保存用户的分析记录部署建议使用Docker容器化部署方便迁移和扩展配置Nginx反向代理提高访问安全性添加用户认证如果需要限制访问5.3 遇到的问题与解决在改造过程中你可能会遇到一些问题这里是一些常见问题的解决方法CSS样式不生效检查CSS选择器是否正确Gradio生成的HTML结构可能有所不同中文显示乱码确保Python文件和HTML都使用UTF-8编码界面布局错乱使用浏览器开发者工具检查元素调整CSS样式模型加载慢首次加载需要下载模型可以预先下载好模型文件5.4 进一步学习资源如果你想深入学习Gradio的定制化官方文档Gradio的官方文档非常详细有很多高级功能示例CSS学习MDN Web Docs是学习CSS最好的资源JavaScript交互如果需要更复杂的交互可以学习一些基础的JavaScript这个改造过程不仅适用于ccmusic-database任何基于Gradio的AI应用都可以用类似的方法进行界面定制。关键是理解Gradio的工作原理然后根据需要调整界面元素和样式。现在你的音乐流派分类系统不仅功能强大而且界面友好美观完全可以作为正式产品使用了。试试上传你喜欢的音乐看看它属于什么流派吧获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。
