Qwen3-Reranker-0.6B保姆级教程：Gradio自定义CSS+响应式布局适配移动端

Qwen3-Reranker-0.6B保姆级教程Gradio自定义CSS响应式布局适配移动端你是不是也遇到过这样的烦恼用Gradio给AI模型搭了个Web界面在电脑上看着挺漂亮结果用手机一打开界面就乱了套——按钮挤成一团文字小得看不清布局完全错位。今天我就来手把手教你如何为Qwen3-Reranker-0.6B的Gradio界面加上自定义CSS和响应式布局让它无论在电脑、平板还是手机上都能完美显示。1. 为什么需要移动端适配先说说为什么这事很重要。现在用手机访问网页的人越来越多如果你的AI工具只能在电脑上用那就等于把一半的用户拒之门外了。Qwen3-Reranker-0.6B是个文本重排序模型用户可能随时需要用它来优化搜索结果、匹配问答。想象一下你在外面用手机查资料发现某个搜索结果不太准想用这个模型重新排个序结果界面根本没法用那得多扫兴。移动端适配的核心就两点布局要能自动调整电脑上横着排的元素到手机上要能竖着排元素大小要合适按钮不能太小点不到文字不能太小看不清2. 环境准备与快速部署2.1 检查现有环境首先确保你的Qwen3-Reranker-0.6B已经正常部署。如果你用的是CSDN星图镜像那应该已经预装好了。打开终端检查一下服务状态# 查看服务是否在运行 supervisorctl status qwen3-reranker # 如果显示 running说明服务正常 # 如果没运行可以手动启动 supervisorctl start qwen3-reranker2.2 找到Gradio应用文件默认的Gradio界面代码通常在这个位置# 进入工作目录 cd /root/workspace # 查看有哪些Python文件 ls -la *.py # 通常叫 app.py 或 gradio_app.py # 如果没有可能需要自己创建一个如果你找不到现成的Gradio代码别着急我们可以从头创建一个。先创建一个新的Python文件# 创建应用文件 touch /root/workspace/reranker_app.py3. 基础Gradio界面搭建3.1 创建最简单的界面我们先从最基础的界面开始然后再一步步添加移动端适配。打开刚才创建的文件输入以下代码# reranker_app.py import gradio as gr import torch from transformers import AutoTokenizer, AutoModelForCausalLM import os # 加载模型如果还没加载的话 MODEL_PATH /opt/qwen3-reranker/model/Qwen3-Reranker-0.6B # 这里简化一下实际使用时你可能已经加载了模型 # 我们主要关注界面部分 def calculate_score(query, documents, instructionNone): 计算查询与文档的相关性分数 这里先写个模拟函数实际要调用模型 # 模拟计算过程 results [] for i, doc in enumerate(documents.split(\n)): if doc.strip(): # 跳过空行 # 这里应该是实际的模型推理 # 为了演示我们返回模拟分数 score 0.8 - i * 0.1 # 模拟递减的分数 results.append({ 文档: doc.strip(), 相关性分数: f{score:.4f}, 排名: i 1 }) # 按分数排序 results.sort(keylambda x: float(x[相关性分数]), reverseTrue) # 更新排名 for i, item in enumerate(results): item[排名] i 1 return results # 创建Gradio界面 with gr.Blocks() as demo: gr.Markdown(# Qwen3-Reranker-0.6B 文本重排序) gr.Markdown(输入查询语句和候选文档模型会计算相关性并排序) with gr.Row(): with gr.Column(scale2): query_input gr.Textbox( label查询语句, placeholder例如什么是机器学习, lines2 ) docs_input gr.Textbox( label候选文档每行一个, placeholder例如\n机器学习是人工智能的一个分支\n深度学习是机器学习的一种方法\n..., lines6 ) instruction_input gr.Textbox( label自定义指令可选, placeholder例如Find the most relevant technical explanation, lines2 ) submit_btn gr.Button(开始排序, variantprimary) with gr.Column(scale3): output_table gr.Dataframe( label排序结果, headers[排名, 文档, 相关性分数], datatype[number, str, str] ) # 绑定事件 submit_btn.click( fncalculate_score, inputs[query_input, docs_input, instruction_input], outputsoutput_table ) # 添加示例 gr.Examples( examples[ [什么是人工智能, 人工智能是模拟人类智能的技术\n机器学习是实现人工智能的方法\n深度学习是机器学习的一个分支], [推荐几本好书, 《三体》- 刘慈欣\n《活着》- 余华\n《百年孤独》- 马尔克斯] ], inputs[query_input, docs_input] ) # 启动应用 if __name__ __main__: demo.launch( server_name0.0.0.0, server_port7860, shareFalse )保存文件后运行试试cd /root/workspace python reranker_app.py现在访问https://gpu-{你的实例ID}-7860.web.gpu.csdn.net/应该能看到一个基础的界面了。但在手机上打开你会发现布局有问题。4. 添加响应式布局4.1 理解Gradio的布局系统Gradio提供了几种布局方式我们要用的是最灵活的gr.Blocks()。关键是要用好gr.Row()和gr.Column()并设置合适的参数。修改布局的关键点scale参数控制列宽比例在移动端会自动调整min_width设置最小宽度防止元素过小visible可以控制某些元素在移动端隐藏4.2 改进布局代码我们来改进一下界面让它更适应移动端# 在原有代码基础上修改布局部分 with gr.Blocks() as demo: gr.Markdown(# Qwen3-Reranker-0.6B 文本重排序) gr.Markdown(输入查询语句和候选文档模型会计算相关性并排序) # 使用响应式布局 with gr.Row(): # 左侧输入区域 with gr.Column(scale1, min_width300): gr.Markdown(### 输入区域) query_input gr.Textbox( label查询语句, placeholder例如什么是机器学习, lines2, containerFalse # 去掉默认容器样式方便自定义 ) docs_input gr.Textbox( label候选文档, placeholder每行一个文档\n例如\n文档1内容\n文档2内容\n..., lines6, containerFalse ) with gr.Accordion(高级选项, openFalse): instruction_input gr.Textbox( label自定义指令, placeholder英文指令如Find relevant technical documents, lines2 ) submit_btn gr.Button( 开始排序, variantprimary, sizelg # 大按钮方便触摸 ) # 右侧结果区域 with gr.Column(scale1, min_width300): gr.Markdown(### 排序结果) output_table gr.Dataframe( label, headers[排名, 文档, 相关性分数], datatype[number, str, str], wrapTrue, # 允许文本换行 max_height400 # 限制最大高度 ) # 添加一些统计信息 with gr.Row(): total_docs gr.Number(label文档总数, value0) avg_score gr.Number(label平均分数, value0.0) # 在移动端我们想让输入和结果上下排列 # 这需要CSS配合后面会讲 # 绑定事件更新后的函数 def process_query(query, documents, instruction): # 分割文档 doc_list [d.strip() for d in documents.split(\n) if d.strip()] if not doc_list: return [], 0, 0.0 # 模拟计算实际要调用模型 results [] total_score 0 for i, doc in enumerate(doc_list): score 0.9 - i * 0.1 # 模拟分数 total_score score results.append([i 1, doc, f{score:.4f}]) # 按第三列分数排序 results.sort(keylambda x: float(x[2]), reverseTrue) # 更新排名 for i, row in enumerate(results): row[0] i 1 avg total_score / len(doc_list) if doc_list else 0 return results, len(doc_list), avg submit_btn.click( fnprocess_query, inputs[query_input, docs_input, instruction_input], outputs[output_table, total_docs, avg_score] )这个布局在电脑上会左右排列但在手机上还不够完美。接下来我们加上CSS。5. 自定义CSS美化5.1 添加基础CSS样式在gr.Blocks()里添加css参数我们可以自定义样式# 定义CSS样式 custom_css /* 基础样式 */ .gradio-container { max-width: 1200px; margin: 0 auto; padding: 20px; } /* 移动端适配 */ media (max-width: 768px) { .gradio-container { padding: 10px; } /* 在手机上改为上下布局 */ .gradio-row { flex-direction: column !important; } .gradio-column { width: 100% !important; margin-bottom: 20px; } } /* 输入框样式 */ textarea, input[typetext] { border-radius: 8px; border: 1px solid #ddd; padding: 12px; font-size: 16px; transition: border-color 0.3s; } textarea:focus, input[typetext]:focus { border-color: #007bff; outline: none; box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1); } /* 按钮样式 */ button { border-radius: 8px !important; padding: 12px 24px !important; font-weight: 600 !important; transition: all 0.3s !important; } button.primary { background: linear-gradient(135deg, #007bff, #0056b3) !important; border: none !important; } button:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } /* 表格样式 */ .dataframe { border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .dataframe th { background-color: #f8f9fa; font-weight: 600; padding: 12px !important; } .dataframe td { padding: 10px 12px !important; } /* 移动端表格优化 */ media (max-width: 768px) { .dataframe { font-size: 14px; } .dataframe td, .dataframe th { padding: 8px !important; } } /* 标题样式 */ h1 { color: #333; margin-bottom: 10px; font-size: 28px; } h3 { color: #555; margin-top: 0; margin-bottom: 15px; } /* 移动端标题调整 */ media (max-width: 768px) { h1 { font-size: 24px; } h3 { font-size: 18px; } } /* 数字显示样式 */ .number { font-size: 18px; font-weight: bold; color: #007bff; } /* 加载动画 */ keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .loading { display: inline-block; width: 20px; height: 20px; border: 3px solid #f3f3f3; border-top: 3px solid #007bff; border-radius: 50%; animation: spin 1s linear infinite; margin-right: 10px; } # 在gr.Blocks中使用CSS with gr.Blocks(csscustom_css, themegr.themes.Soft()) as demo: # ... 之前的界面代码 ...5.2 添加加载状态为了让用户体验更好我们可以添加一个加载动画# 在界面中添加加载状态 with gr.Blocks(csscustom_css, themegr.themes.Soft()) as demo: # ... 标题和描述 ... # 添加一个隐藏的加载指示器 loading_indicator gr.HTML( div idloading styledisplay: none; text-align: center; padding: 20px; div classloading/div span正在计算相关性请稍候.../span /div ) # 修改按钮点击事件 def process_query_with_loading(query, documents, instruction): # 这里可以添加实际的模型调用 # 模拟处理时间 import time time.sleep(1) # 模拟计算时间 return process_query(query, documents, instruction) # 使用JavaScript控制加载显示 submit_btn.click( fnprocess_query_with_loading, inputs[query_input, docs_input, instruction_input], outputs[output_table, total_docs, avg_score], _js function() { // 显示加载动画 document.getElementById(loading).style.display block; return []; } , _js_after function() { // 隐藏加载动画 document.getElementById(loading).style.display none; return []; } )6. 完整代码整合把所有的代码整合到一起这里是一个完整的、适配移动端的版本# reranker_app_mobile.py import gradio as gr import time # 自定义CSS - 这是移动端适配的关键 custom_css /* 基础容器 */ .gradio-container { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif; max-width: 1200px; margin: 0 auto; padding: 20px; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); min-height: 100vh; } /* 移动端适配 */ media (max-width: 768px) { .gradio-container { padding: 15px; background: #f8f9fa; } /* 强制改为垂直布局 */ .gradio-row { flex-direction: column !important; gap: 20px !important; } .gradio-column { width: 100% !important; max-width: 100% !important; margin-bottom: 0 !important; } /* 移动端卡片效果 */ .gradio-column div { background: white; border-radius: 12px; padding: 20px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); margin-bottom: 20px; } } /* 电脑端布局优化 */ media (min-width: 769px) { .gradio-row { gap: 30px !important; align-items: stretch; } .gradio-column div { background: white; border-radius: 12px; padding: 25px; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08); height: 100%; } } /* 标题样式 */ h1 { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 2.5rem; font-weight: 800; margin-bottom: 10px; text-align: center; } h3 { color: #2d3748; font-size: 1.5rem; font-weight: 700; margin-top: 0; margin-bottom: 20px; border-left: 4px solid #667eea; padding-left: 12px; } /* 移动端标题调整 */ media (max-width: 768px) { h1 { font-size: 1.8rem; margin-bottom: 15px; } h3 { font-size: 1.2rem; margin-bottom: 15px; } } /* 输入框美化 */ textarea, input[typetext] { border-radius: 10px !important; border: 2px solid #e2e8f0 !important; padding: 14px !important; font-size: 16px !important; transition: all 0.3s !important; background: #f8fafc !important; resize: vertical !important; } textarea:focus, input[typetext]:focus { border-color: #667eea !important; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important; background: white !important; outline: none !important; } /* 移动端输入框优化 */ media (max-width: 768px) { textarea, input[typetext] { font-size: 16px !important; /* 防止手机自动放大 */ padding: 12px !important; } } /* 按钮美化 */ button { border-radius: 10px !important; padding: 14px 28px !important; font-weight: 600 !important; font-size: 16px !important; transition: all 0.3s !important; border: none !important; cursor: pointer !important; } button.primary { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important; color: white !important; width: 100% !important; margin-top: 10px !important; } button.primary:hover { transform: translateY(-2px) !important; box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4) !important; } /* 移动端按钮优化 */ media (max-width: 768px) { button { padding: 16px 24px !important; /* 更大的触摸区域 */ font-size: 17px !important; } button.primary { margin-top: 20px !important; } } /* 表格美化 */ .dataframe { border-radius: 10px !important; overflow: hidden !important; border: 1px solid #e2e8f0 !important; margin-top: 10px !important; } .dataframe th { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important; color: white !important; font-weight: 600 !important; padding: 16px 12px !important; text-align: left !important; } .dataframe td { padding: 14px 12px !important; border-bottom: 1px solid #e2e8f0 !important; vertical-align: top !important; } .dataframe tr:hover { background-color: #f7fafc !important; } /* 移动端表格优化 */ media (max-width: 768px) { .dataframe { font-size: 14px !important; display: block !important; overflow-x: auto !important; } .dataframe td, .dataframe th { padding: 12px 8px !important; min-width: 80px !important; } } /* 数字显示样式 */ .number { font-size: 1.5rem !important; font-weight: 700 !important; color: #667eea !important; text-align: center !important; } .number label { font-size: 0.9rem !important; color: #718096 !important; font-weight: 500 !important; display: block !important; margin-bottom: 5px !important; } /* 加载动画 */ keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .loading-spinner { display: inline-block; width: 24px; height: 24px; border: 3px solid rgba(102, 126, 234, 0.2); border-top: 3px solid #667eea; border-radius: 50%; animation: spin 1s linear infinite; margin-right: 12px; vertical-align: middle; } .loading-container { text-align: center; padding: 30px; color: #4a5568; font-size: 16px; font-weight: 500; } /* 标签样式 */ label { font-weight: 600 !important; color: #2d3748 !important; margin-bottom: 8px !important; display: block !important; font-size: 15px !important; } /* 折叠面板样式 */ .accordion { background: #f8fafc !important; border-radius: 8px !important; border: 1px solid #e2e8f0 !important; margin-top: 15px !important; } /* 示例样式 */ .examples { margin-top: 20px !important; padding: 15px !important; background: #f8fafc !important; border-radius: 10px !important; border: 1px dashed #cbd5e0 !important; } .examples h4 { color: #4a5568 !important; margin-top: 0 !important; margin-bottom: 10px !important; } /* 页脚样式 */ .footer { text-align: center; margin-top: 40px; padding-top: 20px; border-top: 1px solid #e2e8f0; color: #718096; font-size: 14px; } def calculate_scores(query, documents, instructionNone): 模拟计算相关性分数 # 分割文档 doc_list [d.strip() for d in documents.split(\n) if d.strip()] if not doc_list: return [], 0, 0.0 # 模拟计算过程 - 实际应该调用Qwen3-Reranker模型 results [] total_score 0 for i, doc in enumerate(doc_list): # 这里模拟一个相关性分数 # 实际应该调用score model.calculate_score(query, doc) base_score 0.85 # 根据文档长度和查询匹配度微调 if query.lower() in doc.lower(): base_score 0.1 if len(doc) 50: # 较长文档可能更相关 base_score 0.05 # 添加一些随机性但保持递减趋势 import random score max(0.1, min(0.99, base_score - i * 0.08 random.uniform(-0.05, 0.05))) total_score score results.append([i 1, doc[:100] (... if len(doc) 100 else ), f{score:.4f}]) # 按分数排序 results.sort(keylambda x: float(x[2]), reverseTrue) # 更新排名 for i, row in enumerate(results): row[0] i 1 avg total_score / len(doc_list) return results, len(doc_list), f{avg:.4f} # 创建Gradio应用 with gr.Blocks(csscustom_css, themegr.themes.Soft()) as demo: # 标题区域 gr.Markdown( # Qwen3-Reranker-0.6B 文本重排序 *基于通义千问3的语义相关性排序模型* ) gr.Markdown( 输入您的查询语句和候选文档模型会自动计算相关性分数并排序。支持中英文等100多种语言。 ) # 加载指示器 loading_html gr.HTML( div idloading classloading-container styledisplay: none; div classloading-spinner/div span正在计算相关性分数请稍候.../span /div ) with gr.Row(): # 左侧输入区域 with gr.Column(scale1): gr.Markdown(### 输入参数) query_input gr.Textbox( label查询语句, placeholder请输入您要查询的内容...\n例如什么是机器学习, lines3, max_lines5, containerFalse ) docs_input gr.Textbox( label候选文档, placeholder请输入候选文档每行一个...\n例如\n机器学习是人工智能的一个分支\n深度学习是机器学习的一种方法\n自然语言处理是AI的重要方向, lines8, max_lines15, containerFalse ) with gr.Accordion(⚙️ 高级选项, openFalse): instruction_input gr.Textbox( label自定义指令英文, placeholder可选用于优化特定任务\n例如Find the most relevant technical documents, lines2, valueGiven a query, retrieve relevant passages ) submit_btn gr.Button( 开始排序, variantprimary, sizelg) # 右侧输出区域 with gr.Column(scale1): gr.Markdown(### 排序结果) # 统计信息 with gr.Row(): with gr.Column(scale1): total_docs gr.Number( label文档总数, value0, elem_classesnumber ) with gr.Column(scale1): avg_score gr.Number( label平均分数, value0.0, elem_classesnumber ) # 结果表格 output_table gr.Dataframe( label, headers[排名, 文档内容, 相关性分数], datatype[number, str, str], wrapTrue, max_height500, column_widths[10%, 60%, 30%] ) # 示例区域 with gr.Accordion( 点击查看使用示例, openFalse): gr.Examples( examples[ [ 什么是人工智能, 人工智能是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学\n机器学习是实现人工智能的一种方法\n深度学习是机器学习的一个分支它使用神经网络进行学习 ], [ 推荐几本经典小说, 《红楼梦》 - 曹雪芹中国古典文学巅峰之作\n《百年孤独》 - 加西亚·马尔克斯魔幻现实主义代表作\n《1984》 - 乔治·奥威尔反乌托邦经典\n《活着》 - 余华中国当代文学经典 ], [ 如何学习编程, 选择一门编程语言开始学习如Python\n通过在线教程或书籍学习基础语法\n多写代码实践是最好的老师\n参与开源项目学习他人代码\n不断学习新技术保持好奇心 ] ], inputs[query_input, docs_input], label快速示例 ) # 页脚 gr.HTML( div classfooter pQwen3-Reranker-0.6B | 语义相关性排序模型/p p支持100语言 | 32K上下文长度 | 轻量高效/p /div ) # 处理函数 def process_with_loading(query, documents, instruction): 带加载状态的处理函数 # 模拟处理时间 time.sleep(1.5) return calculate_scores(query, documents, instruction) # 绑定事件 submit_btn.click( fnprocess_with_loading, inputs[query_input, docs_input, instruction_input], outputs[output_table, total_docs, avg_score], _js function() { document.getElementById(loading).style.display block; return []; } , _js_after function() { setTimeout(() { document.getElementById(loading).style.display none; }, 500); return []; } ) # 页面加载时隐藏加载动画 demo.load( _js function() { document.getElementById(loading).style.display none; return []; } ) # 启动应用 if __name__ __main__: demo.launch( server_name0.0.0.0, server_port7860, shareFalse, favicon_pathNone )7. 部署与测试7.1 启动优化后的应用保存上面的代码为reranker_app_mobile.py然后运行cd /root/workspace python reranker_app_mobile.py7.2 测试移动端适配现在你可以用不同设备测试了电脑浏览器直接访问你的应用地址手机测试用手机浏览器访问同一个地址或者用电脑浏览器的开发者工具切换到手机模式测试测试要点布局是否自动调整为垂直排列按钮大小是否适合手指点击文字大小是否清晰可读输入框是否容易操作表格是否能够正常滚动查看7.3 常见问题解决如果你在测试中发现问题可以这样调整问题1布局在手机上还是不对齐/* 在CSS中添加更严格的移动端样式 */ media (max-width: 768px) { .gradio-row { display: flex !important; flex-direction: column !important; width: 100% !important; } .gradio-column { flex: 1 1 100% !important; max-width: 100% !important; min-width: 100% !important; } }问题2输入框在手机上太小/* 确保输入框在移动端有合适的大小 */ media (max-width: 768px) { textarea, input[typetext] { font-size: 16px !important; /* 防止iOS缩放 */ min-height: 44px !important; /* 最小触摸区域 */ } }问题3表格在手机上显示不全# 在Dataframe中添加滚动属性 output_table gr.Dataframe( # ... 其他参数 ... overflow_row_behaviourpaginate, # 分页显示 max_height400, # 限制高度 )8. 进阶优化建议8.1 添加主题切换如果你想让用户可以选择深色模式可以这样添加# 添加主题切换按钮 theme_toggle gr.Radio( choices[浅色, 深色], value浅色, label主题模式, interactiveTrue ) # 在CSS中定义深色模式 dark_mode_css media (prefers-color-scheme: dark) { .gradio-container { background: #1a202c !important; color: #e2e8f0 !important; } /* 深色模式下的其他样式... */ } # 根据选择切换主题 def toggle_theme(theme): if theme 深色: return gr.themes.Dark() else: return gr.themes.Soft()8.2 添加本地存储让应用记住用户的上次输入# 使用Gradio的state来保存数据 with gr.Blocks() as demo: # 添加状态存储 state gr.State({ last_query: , last_docs: , theme: light }) # 在加载时恢复数据 def load_previous_data(state): return state.get(last_query, ), state.get(last_docs, ) # 保存当前输入 def save_data(query, docs, state): state[last_query] query state[last_docs] docs return state # 绑定事件 query_input.change( fnsave_data, inputs[query_input, docs_input, state], outputs[state] )8.3 性能优化对于大量文档的处理可以添加分页和进度显示# 添加进度条 progress_bar gr.Progress() def process_large_documents(query, documents, instruction, progressgr.Progress()): doc_list documents.split(\n) results [] for i, doc in enumerate(doc_list): if doc.strip(): # 更新进度 progress((i 1) / len(doc_list), descf处理文档 {i 1}/{len(doc_list)}) # 计算分数 score calculate_score_for_doc(query, doc) results.append([i 1, doc, f{score:.4f}]) # 排序等后续处理... return results9. 总结通过这个教程你应该已经掌握了如何为Qwen3-Reranker-0.6B的Gradio界面添加移动端适配。关键点总结一下核心步骤使用响应式布局通过gr.Row()和gr.Column()的scale参数控制布局添加CSS媒体查询用media (max-width: 768px)针对移动端调整样式优化触摸体验确保按钮足够大输入框容易操作保持代码简洁Gradio本身已经做了很多适配工作我们只需要微调实用技巧多用min-width和max-width控制元素大小在移动端使用更大的字体和间距为触摸设备提供足够的点击区域测试时多用真实设备而不仅仅是模拟器最终效果在电脑上左右分栏充分利用大屏幕在平板上自适应布局保持良好体验在手机上垂直排列操作便捷现在你的Qwen3-Reranker-0.6B应用不仅功能强大而且在任何设备上都能提供优秀的用户体验了。赶紧试试吧看看在手机上使用文本重排序是多么方便获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。