使用 BridgeTower 和 Streamlit 构建 AI 驱动的图片搜索应用

学习如何使用 BridgeTower、Streamlit 和 Hugging Face Transformers 构建 AI 驱动的图片搜索应用。一步步带您上手多模态 AI。

Bhavishya Pandit

已更新 2026年10月6日 · 7分钟阅读

使用 AI 探索

ChatGPT Claude Perplexity

作为一名生成式 AI 工程师，我始终把紧跟最新工具与技术放在首位，通过持续阅读与探索来了解新进展。最近，我读到微软研究人员的一篇论文，介绍了BridgeTower 模型，它简化了视觉与语言能力的整合，使多模态任务更易于实现。

在本指南中，我将向您展示如何使用来自Hugging Face Transformers 库的 BridgeTower 构建一个简单而强大的图文检索系统。本教程对初学者友好，将带您完成以下步骤：

安装所需库。
使用 BridgeTower 处理图片与文本。
为图片与文本生成向量表示（embedding）。
使用余弦相似度比较这些向量表示。

在本教程结束时，您将拥有一个可运行的系统，能够有效将图片与文本查询进行匹配，充分展示多模态 AI的强大与简洁。

什么是 BridgeTower？

BridgeTower 模型在论文 BridgeTower: Building Bridges Between Encoders in Vision-Language Representative Learning（作者：Xiao Xu 等）中进行了阐释，旨在提升视觉与语言模型的协同工作方式。

想象一个需要同时理解图片与文本描述的任务，例如“a dog running in a park（狗在公园里奔跑）”。

通常，模型会分别使用视觉与语言编码器来处理图片和文本。BridgeTower 模型在这些编码器与跨模态编码器（将视觉与语言融合）之间加入了一座“桥”，让它们在每一步都能更好地交互。

来源

例如，在处理狗的图片时，视觉编码器可能会检测到狗的形状与运动；与此同时，语言编码器理解“running”和“dog”。

这座“桥”让两类信息能够更细致地交互，帮助模型更有效地关联视觉与文本线索。因此，在图像描述或视觉问答等任务中，模型表现更好，同时无需大量额外计算或造成延迟。

应用目录结构

我们将保持整洁有序。您的项目目录应如下所示：

/image-search-app/
│
├── app.py          # Frontend (Streamlit UI)
├── search.py       # Backend logic (embeddings & similarity search)
├── images/         # Directory for uploaded images
│   ├── image1.jpg
│   ├── image2.png
│   ├── image3.jpeg
│
└── requirements.txt  # Python dependencies

app.py：负责前端与用户交互。
search.py：包含生成向量表示与执行检索的逻辑。
images/：存放上传的图片文件。
requirements.txt：列出所需的库。

环境与安装

在编写代码之前，先完成环境配置，确保开发与测试顺利进行。请按以下步骤操作：

1. 安装依赖

首先确保已安装 Python（建议 3.7 或更高版本）。然后在终端运行以下命令安装必要的库：

pip install torch transformers streamlit Pillow

torch：用于构建与运行 Bridgetower 模型的深度学习框架。
transformers：提供如 Bridgetower 等预训练模型，实现高效的文本与图像处理。
streamlit：轻量级 Web 框架，用于为应用创建交互式用户界面。
Pillow：图像处理库，用于处理图片上传与尺寸调整。

2. 准备示例图片

为了测试应用，请将一些示例图片放入/images目录。请确保这些图片为以下受支持格式：JPG、PNG或JPEG，这些格式通用且与大多数库兼容。

请使用多样化的图片，以确保模型能根据文本查询准确检索匹配结果。

BridgeTower 核心逻辑解析

应用的核心功能分为两个主要组件：后端（search.py）与前端（app.py）。每个组件都对应用的顺畅运行至关重要。

后端逻辑（search.py）

此文件包含文本与图像向量表示及检索机制的逻辑。

1. 导入库

from transformers import BridgeTowerProcessor, BridgeTowerForImageAndTextRetrieval
from PIL import Image
import torch.nn.functional as F
import os

BridgeTowerProcessor：用于将数据（图片与文本）按 BridgeTower 模型所需的正确格式进行准备的工具类。它会执行文本分词与图像预处理等任务。
BridgeTowerForImageAndTextRetrieval：专为图文检索任务设计的预训练 BridgeTower 模型类，可基于文本查询搜索最相关图片，或反之。
PIL（Python Imaging Library）用于图像处理。在此处用于打开与处理图像（例如：调整大小、裁剪），再将其输入模型。
torch.nn.functional提供多种函数，如激活函数（ReLU、softmax）、损失函数（交叉熵等）及张量运算。常用于 PyTorch 神经网络开发。
os用于与操作系统交互。可用于读取文件、检查目录与处理路径（例如定位图片或模型权重）。

2. 加载模型与处理器

processor = BridgeTowerProcessor.from_pretrained("BridgeTower/bridgetower-base-itm-mlm")
model = BridgeTowerForImageAndTextRetrieval.from_pretrained("BridgeTower/bridgetower-base-itm-mlm")
device = torch.device("cuda" if torch.cuda.is_available() else "cpu")
model.to(device)

这将初始化用于生成向量表示的模型与处理器。

3. 查找最佳匹配

def image_search(query, image_dir):
   image_files = [os.path.join(image_dir, img) for img in os.listdir(image_dir) if img.lower().endswith(('jpg', 'jpeg', 'png'))]
   scores = {}

   for img_path in image_files:
       image = Image.open(img_path).convert("RGB")
       encoding = processor(text=query, images=image, return_tensors="pt").to(device)
       outputs = model(**encoding)
       scores[img_path] = outputs.logits[0, 1].item()

   best_match = max(scores, key=scores.get)
   return best_match

工作原理：

函数image_search会处理文本查询，并使用模型生成其向量表示。
对每张图片进行处理，生成其对应的向量表示。
使用模型输出的 logits对向量进行比较。
计算余弦相似度，比较文本与图像的向量表示。
将相似度最高的图片识别并返回为最佳匹配。

前端界面（app.py）

该文件使用 Streamlit 提供友好的用户界面。

1. 导入库

import streamlit as st
from search import search_best_match
import os

2. 构建界面

st.title("🖼️ AI-Powered Image Search App")
uploaded_files = st.file_uploader("Upload images", accept_multiple_files=True, type=['jpg', 'jpeg', 'png'])

image_folder = 'images'
os.makedirs(image_folder, exist_ok=True)

if uploaded_files: 
    for uploaded_file in uploaded_files:
        with open(os.path.join(image_folder, uploaded_file.name), 'wb') as f:
            f.write(uploaded_file.getbuffer())
        st.image(uploaded_file, caption="Uploaded Image", use_column_width=True)

用户可以上传多张图片。图片会保存至 images/ 文件夹并显示。

3. 添加搜索查询

query = st.text_input("Enter your search query:")

if query and uploaded_files:
    best_match, score = search_best_match(image_folder, query)
    st.write("### Most Relevant Image:")
    st.image(best_match, caption=f"Score: {score:.4f}", use_column_width=True)

用户输入搜索查询。应用会检索最佳匹配图片并展示。

完整实现：构建 BridgeTower + Streamlit 图片搜索应用

1. search.py - 后端逻辑

from transformers import BridgeTowerProcessor, BridgeTowerForImageAndTextRetrieval
from PIL import Image
import torch
import torch.nn.functional as F
import os

# Load Bridgetower processor and model
processor = BridgeTowerProcessor.from_pretrained("BridgeTower/bridgetower-base-itm-mlm")
model = BridgeTowerForImageAndTextRetrieval.from_pretrained("BridgeTower/bridgetower-base-itm-mlm")

# Search for the best matching image
def image_search(query, image_dir):
   image_files = [os.path.join(image_dir, img) for img in os.listdir(image_dir) if img.lower().endswith(('jpg', 'jpeg', 'png'))]
   scores = {}

   for img_path in image_files:
       image = Image.open(img_path).convert("RGB")
       encoding = processor(text=query, images=image, return_tensors="pt").to(device)
       outputs = model(**encoding)
       scores[img_path] = outputs.logits[0, 1].item()

   best_match = max(scores, key=scores.get)
   return best_match

2. app.py - Streamlit 界面

import streamlit as st
from search import image_search
import os

# Title of the app
st.title("🖼️ Image Search Application with BridgeTower")

# Image upload section
uploaded_files = st.file_uploader("Upload your images", accept_multiple_files=True, type=['jpg', 'jpeg', 'png'])

# Create image folder if not exists
image_folder = 'images'
os.makedirs(image_folder, exist_ok=True)

if uploaded_files:
    for uploaded_file in uploaded_files:
        with open(os.path.join(image_folder, uploaded_file.name), 'wb') as f:
            f.write(uploaded_file.getbuffer())
        st.image(uploaded_file, caption="Uploaded Image", use_column_width=True)

# Text input for query
query = st.text_input("Enter your search query:")

# Display search results
if query and uploaded_files:
    best_match, score = image_search(image_folder, query)
    st.write("### Most Relevant Image:")
    st.image(best_match, caption=f"Similarity Score: {score:.4f}", use_column_width=True)