CLIP-GmP-ViT-L-14步骤详解：Gradio界面添加下载按钮导出匹配结果-Seo优化-合肥市网站建设公司

CLIP-GmP-ViT-L-14步骤详解：Gradio界面添加下载按钮导出匹配结果

如果你用过CLIP模型来匹配图片和文字，可能会遇到一个问题：计算出的相似度分数，只能看，不能存。每次都得手动截图或者复制粘贴，特别麻烦。今天，我就来教你一个实用的技巧——给CLIP-GmP-ViT-L-14的Gradio界面加一个下载按钮，一键导出所有匹配结果。

CLIP-GmP-ViT-L-14是一个经过特殊微调（他们叫几何参数化，简称GmP）的CLIP模型，在ImageNet和ObjectNet这类标准测试集上，准确率能达到90%左右，效果相当不错。它自带的Gradio网页界面用起来很方便，可以算单张图和一段文字的相似度，也能让一张图去匹配多个文字描述，然后按匹配度高低排个序。

但美中不足的是，它缺了个“保存结果”的功能。想象一下，你测试了10组不同的文字描述，得到了10个匹配分数，难道要一个个手抄下来吗？这显然不高效。所以，我们来给它“打个补丁”，让这个好用的工具变得更加完美。

1. 先看看我们改了什么

在动手之前，我们先明确目标。原始的Gradio界面运行后，你上传图片，输入文本，它会给你返回一个相似度分数（比如0.85），或者一个排序好的列表。我们的目标是在这个结果旁边，增加一个明显的“下载结果”按钮。

点击这个按钮，浏览器会自动下载一个.txt文本文件。这个文件里会清晰地记录下你本次操作的所有信息：你上传的图片文件名、你输入的所有文本描述、以及模型计算出的每一个对应的相似度分数。格式整洁，一目了然，方便你后续整理、报告或者进一步分析。

整个修改过程不涉及复杂的模型推理代码，我们只专注于前端交互和结果导出这个“最后一公里”的问题。

2. 修改前的准备工作

在开始修改代码之前，请确保你的CLIP-GmP-ViT-L-14项目已经可以正常运行。

按照项目说明，进入项目目录并启动服务：

cd /root/CLIP-GmP-ViT-L-14 ./start.sh

用浏览器打开http://localhost:7860，你应该能看到原始的界面。先熟悉一下单图单文和批量检索两个功能标签页，感受一下缺少导出功能的不便。确认环境正常后，使用停止脚本关闭服务：

./stop.sh

现在，我们可以安心地修改源代码了。建议你先备份一下原来的app.py文件：

cp /root/CLIP-GmP-ViT-L-14/app.py /root/CLIP-GmP-ViT-L-14/app.py.backup

这样，万一修改过程中出现问题，我们可以随时恢复。

3. 一步步修改Gradio应用代码

我们需要修改的项目主文件是/root/CLIP-GmP-ViT-L-14/app.py。我们将分步骤，为两个主要功能添加下载支持。

3.1 理解原始界面布局

用编辑器打开app.py文件。你会看到，Gradio通过gr.Blocks()创建界面，里面主要用gr.TabbedInterface组织了两个标签页：

单图单文相似度计算：对应函数process_single。
批量检索：对应函数process_batch。

我们的任务就是修改这两个函数，让它们不仅返回原本的显示内容（比如分数或列表），还能额外返回一个可供下载的文件。

3.2 为“单图单文”功能添加下载

首先找到process_single(image, text)这个函数。它原本的逻辑是：接收一张图片和一段文本，调用模型计算相似度，然后返回一个格式化的字符串，比如“相似度: 0.872”。

我们要做的是：

在函数内部，生成一个包含本次操作详细信息的字符串。
将这个字符串临时保存为一个文本文件。
让函数除了返回原来的结果字符串，再返回这个文件。

修改后的函数核心部分看起来会是这样：

def process_single(image, text): # ... 原有的图片预处理和模型推理代码 ... similarity_score = ... # 计算得到的分数 # 原有的返回结果 result_text = f"相似度: {similarity_score:.3f}" # --- 新增：创建可下载文件 --- # 1. 生成详细报告文本 from datetime import datetime timestamp = datetime.now().strftime("%Y-%m-%d %H:%M:%S") report_content = f"""CLIP-GmP-ViT-L-14 匹配结果报告 生成时间: {timestamp} ==================== 操作模式: 单图单文匹配 图片文件: {image.name if hasattr(image, 'name') else '上传图片'} 查询文本: \"{text}\" 匹配相似度: {similarity_score:.6f} """ # 2. 将报告写入临时文件 import tempfile import os with tempfile.NamedTemporaryFile(mode='w', suffix='.txt', delete=False) as f: f.write(report_content) temp_file_path = f.name # 同时返回原始结果和文件路径 return result_text, temp_file_path

关键点解释：

tempfile.NamedTemporaryFile：这是Python标准库，用于创建临时文件。delete=False参数很重要，它告诉Python不要自动删除这个文件，因为Gradio需要读取它来提供下载。
报告内容我们包含了时间、模式、文件名（如果可用）、查询文本和精确到小数点后6位的分数，信息很完整。

函数返回值从原来的一个（result_text）变成了两个（result_text, temp_file_path）。因此，我们必须在Gradio界面定义部分也对应地增加一个输出组件。

找到定义单图单文界面的部分，在gr.Interface或gr.Blocks的对应位置，我们需要增加一个gr.File组件来显示下载按钮：

with gr.Tab("单图单文相似度计算"): # ... 原有的图片、文本输入组件 ... image_input = gr.Image(...) text_input = gr.Textbox(...) # ... 原有的输出组件 ... text_output = gr.Textbox(...) # --- 新增：文件输出组件 --- file_output = gr.File(label="下载匹配结果") # 将按钮的点击事件连接到修改后的函数，注意输出列表现在有两个元素 submit_btn.click(fn=process_single, inputs=[image_input, text_input], outputs=[text_output, file_output]) # 输出到文本框和文件

这样，当你运行程序并完成一次单图单文匹配后，结果下方就会出现一个“下载匹配结果”的按钮，点击即可保存报告。

3.3 为“批量检索”功能添加下载

批量检索功能（process_batch）的修改思路类似，但因为它涉及多个文本的排序，报告内容会更丰富。

原始的process_batch函数接收一张图片和一个多行文本框的文本（每行是一个描述），返回一个排序后的列表，格式通常是“1. 文本A: 0.92\n2. 文本B: 0.85...”。

修改步骤：

在函数里，除了生成这个排序列表字符串，还要生成一份详细的报告。
报告里应该列出所有文本描述及其得分，并明确标出排名。
将报告写入临时文件并返回。

修改后的函数部分代码如下：

def process_batch(image, texts): # ... 原有的批量处理逻辑 ... # 假设 results 是一个列表，里面每个元素是 (文本, 分数) sorted_results = sorted(results, key=lambda x: x[1], reverse=True) # 原有的返回结果：格式化列表 result_lines = [] for idx, (text, score) in enumerate(sorted_results, 1): result_lines.append(f"{idx}. {text}: {score:.3f}") result_text = "\n".join(result_lines) # --- 新增：创建可下载文件 --- from datetime import datetime import tempfile timestamp = datetime.now().strftime("%Y-%m-%d %H:%M:%S") report_content = f"""CLIP-GmP-ViT-L-14 批量检索结果报告 生成时间: {timestamp} ==================== 操作模式: 批量图片-文本检索 图片文件: {image.name if hasattr(image, 'name') else '上传图片'} 查询文本总数: {len(sorted_results)} 检索结果（按相似度降序）: """ for idx, (text, score) in enumerate(sorted_results, 1): report_content += f"\n{idx}. 文本: \"{text}\"\n 相似度: {score:.6f}\n" with tempfile.NamedTemporaryFile(mode='w', suffix='.txt', delete=False) as f: f.write(report_content) temp_file_path = f.name return result_text, temp_file_path

同样地，你需要更新批量检索标签页下的输出定义，增加一个gr.File组件，并更新click事件的输出列表。

3.4 处理临时文件清理（可选但推荐）

我们使用delete=False创建的临时文件会一直留在磁盘上。对于长时间运行的服务，这可能会积累大量小文件。一个更优雅的做法是让Gradio在发送文件后清理它。Gradio的gr.File组件可以配合一个返回(file_path,)元组的函数，并支持清理。

不过，为了教程的清晰和简单，我们采用了上述直接返回路径的方法。在实际生产环境中，你可以考虑使用Gradio的gr.components.File的高级特性，或者定期清理/tmp目录。

4. 完整代码示例与部署

为了让你更清楚，这里提供一个修改后的app.py关键部分的结构示例。请注意，这只是一个示例框架，你需要将其整合到你的原始app.py中，并确保模型加载、推理等核心逻辑保持不变。

import gradio as gr import torch from PIL import Image # ... 其他必要的导入，例如你的模型加载代码 ... import tempfile from datetime import datetime # --- 假设你的模型加载和预处理函数在这里 --- # model, preprocess = load_your_model() # def compute_similarity(image, text): ... def process_single(image, text): """处理单图单文匹配，并生成可下载报告""" # 1. 图片预处理和模型推理（使用你的原有代码） # image_tensor = preprocess(Image.fromarray(image)).unsqueeze(0) # text_features = ... # image_features = ... # similarity = ... # 假设 similarity_score 是计算出的标量值 similarity_score = 0.872 # 此处替换为你的实际计算结果 # 2. 原始文本结果 result_text = f"相似度: {similarity_score:.3f}" # 3. 生成报告文件 timestamp = datetime.now().strftime("%Y-%m-%d %H:%M:%S") img_name = image if isinstance(image, str) else (image.name if hasattr(image, 'name') else '上传图片') report_content = f"""CLIP-GmP-ViT-L-14 匹配结果报告 生成时间: {timestamp} ==================== 操作模式: 单图单文匹配 图片文件: {img_name} 查询文本: \"{text}\" 匹配相似度: {similarity_score:.6f} """ with tempfile.NamedTemporaryFile(mode='w', suffix='.txt', delete=False, encoding='utf-8') as f: f.write(report_content) temp_file_path = f.name return result_text, temp_file_path def process_batch(image, texts): """处理批量检索，并生成可下载报告""" # 1. 将多行文本拆分成列表 text_list = [t.strip() for t in texts.split('\n') if t.strip()] # 2. 批量计算相似度（使用你的原有代码） # 假设 results 是列表，元素为 (文本, 分数) results = [] for t in text_list: # score = compute_similarity(image, t) score = 0.9 - (len(t) * 0.01) # 示例假数据，请替换 results.append((t, score)) # 3. 按分数排序 sorted_results = sorted(results, key=lambda x: x[1], reverse=True) # 4. 原始文本结果 result_lines = [f"{idx}. {text}: {score:.3f}" for idx, (text, score) in enumerate(sorted_results, 1)] result_text = "\n".join(result_lines) # 5. 生成报告文件 timestamp = datetime.now().strftime("%Y-%m-%d %H:%M:%S") img_name = image if isinstance(image, str) else (image.name if hasattr(image, 'name') else '上传图片') report_content = f"""CLIP-GmP-ViT-L-14 批量检索结果报告 生成时间: {timestamp} ==================== 操作模式: 批量图片-文本检索 图片文件: {img_name} 查询文本总数: {len(sorted_results)} 检索结果（按相似度降序）: """ for idx, (text, score) in enumerate(sorted_results, 1): report_content += f"\n{idx}. 文本: \"{text}\"\n 相似度: {score:.6f}\n" with tempfile.NamedTemporaryFile(mode='w', suffix='.txt', delete=False, encoding='utf-8') as f: f.write(report_content) temp_file_path = f.name return result_text, temp_file_path # --- 构建Gradio界面 --- with gr.Blocks(title="CLIP-GmP-ViT-L-14 with Export", theme=gr.themes.Soft()) as demo: gr.Markdown("# CLIP-GmP-ViT-L-14 图文匹配工具 (增强版)") gr.Markdown("上传图片并输入文本，计算相似度。**新增结果导出功能**。") with gr.Tab("单图单文相似度计算"): with gr.Row(): with gr.Column(): img_input_single = gr.Image(type="filepath", label="上传图片") text_input_single = gr.Textbox(lines=2, label="输入文本描述", placeholder="请输入一段描述图片的文字...") single_btn = gr.Button("计算相似度", variant="primary") with gr.Column(): text_output_single = gr.Textbox(label="匹配结果", interactive=False) file_output_single = gr.File(label="下载本次匹配报告") single_btn.click(fn=process_single, inputs=[img_input_single, text_input_single], outputs=[text_output_single, file_output_single]) with gr.Tab("批量检索（一图对多文）"): with gr.Row(): with gr.Column(): img_input_batch = gr.Image(type="filepath", label="上传图片") text_input_batch = gr.Textbox(lines=10, label="输入多个文本描述（每行一个）", placeholder="描述1\n描述2\n描述3...") batch_btn = gr.Button("开始批量检索", variant="primary") with gr.Column(): text_output_batch = gr.Textbox(label="检索结果排序", interactive=False) file_output_batch = gr.File(label="下载批量检索报告") batch_btn.click(fn=process_batch, inputs=[img_input_batch, text_input_batch], outputs=[text_output_batch, file_output_batch]) # --- 启动应用 --- if __name__ == "__main__": demo.launch(server_name="0.0.0.0", server_port=7860, share=False)

修改完成后，保存文件，重新启动服务：