Erstelle eine KI-gestützte Bildersuch-App mit BridgeTower und Streamlit

Als Gen-AI-Engineer ist es mir wichtig, immer auf dem neuesten Stand zu bleiben – durch kontinuierliches Lesen und Ausprobieren neuer Technologien. Kürzlich bin ich auf ein Paper von Microsoft-Forschenden gestoßen, das BridgeTower, ein Modell, vorstellt, das die Integration von Bild- und Sprachfähigkeiten vereinfacht und multimodale Aufgaben deutlich leichter umsetzbar macht.

In diesem Guide zeige ich dir, wie du ein einfaches, aber leistungsfähiges Image-Text-Retrieval-System mit BridgeTower aus der Hugging Face Transformers-Bibliothek baust. Das Tutorial ist einsteigerfreundlich und führt dich durch folgende Schritte:

• Einrichtung der benötigten Bibliotheken.
• Verarbeitung von Bildern und Text mit BridgeTower.
• Erzeugung von Embeddings für Bilder und Text.
• Vergleich dieser Embeddings per Kosinusähnlichkeit.

Am Ende dieses Tutorials hast du ein voll funktionsfähiges System, das Bilder mit Textabfragen verlässlich abgleicht – ein praktischer Beleg für die Leistungsfähigkeit und Einfachheit von multimodaler KI.

Was ist BridgeTower?

Das BridgeTower-Modell, wie im Paper BridgeTower: Building Bridges Between Encoders in Vision-Language Representative Learning von Xiao Xu und anderen beschrieben, verbessert das Zusammenspiel von Bild- und Sprachmodellen.

Stell dir eine Aufgabe vor, bei der das Modell sowohl ein Bild als auch eine Textbeschreibung verstehen muss, etwa „ein Hund, der im Park rennt“.

Typischerweise verarbeitet das Modell Bild und Text getrennt über Vision- und Language-Encoder. BridgeTower fügt eine „Brücke“ zwischen diesen Encodern und dem Cross-Modal-Encoder (der Bild und Sprache zusammenführt) hinzu, sodass sie bei jedem Schritt besser miteinander interagieren.

Quelle

Während der Bildverarbeitung erkennt der Vision-Encoder zum Beispiel Form und Bewegung des Hundes. Gleichzeitig versteht der Language-Encoder Begriffe wie „rennt“ und „Hund“.

Die Brücke ermöglicht, dass diese Informationen eng verzahnt werden. So kann das Modell visuelle und textliche Hinweise effektiver verknüpfen. Dadurch verbessert sich die Leistung bei Aufgaben wie Bildbeschreibung oder Question Answering – ohne erheblichen Mehraufwand bei der Berechnung oder Einbußen bei der Geschwindigkeit.

App-Ordnerstruktur

Wir halten alles übersichtlich und sauber. Dein Projektverzeichnis sollte so aussehen:

/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: Steuert das Frontend und die Interaktionen mit den Nutzenden.
• search.py: Enthält die Logik zur Erzeugung von Embeddings und zur Suche.
• images/: Speichert hochgeladene Bilddateien.
• requirements.txt: Listet die benötigten Bibliotheken.

Setup und Installation

Bevor wir in den Code einsteigen, richten wir die Umgebung ein, damit Entwicklung und Tests reibungslos laufen. Folge diesen Schritten:

1. Abhängigkeiten installieren

Stelle sicher, dass Python installiert ist (empfohlen ab Version 3.7). Führe dann im Terminal folgenden Befehl aus, um die benötigten Bibliotheken zu installieren:

pip install torch transformers streamlit Pillow

• torch: Das Deep-Learning-Framework, das für Aufbau und Ausführung des BridgeTower-Modells genutzt wird.
• transformers: Stellt vortrainierte Modelle wie BridgeTower für effiziente Text- und Bildverarbeitung bereit.
• streamlit: Ein schlankes Web-Framework, um eine interaktive Benutzeroberfläche für die App zu erstellen.
• Pillow: Bibliothek zur Bildverarbeitung, z. B. für Uploads und Größenanpassung.

2. Beispielbilder vorbereiten

Lege zum Testen der Anwendung einige Beispielbilder im Verzeichnis /images ab. Achte darauf, dass die Bilder in unterstützten Formaten wie JPG, PNG oder JPEG vorliegen – diese sind weit verbreitet und mit den meisten Bibliotheken kompatibel.

Nutze eine Vielfalt an Motiven, damit das Modell treffsichere Treffer zur Textabfrage finden kann.

BridgeTower: Kernlogik erklärt

Die Kernfunktionalität der Anwendung besteht aus zwei Hauptkomponenten: dem Backend (search.py) und dem Frontend (app.py). Beide sind entscheidend, damit die App reibungslos läuft.

Backend-Logik (search.py)

Diese Datei enthält die Logik für Text- und Bild-Embeddings sowie den Suchmechanismus.

1. Bibliotheken importieren

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

• BridgeTowerProcessor: Hilfsklasse, die Daten (Bilder und Text) in das passende Format für BridgeTower bringt. Sie übernimmt z. B. Tokenisierung für Text und Preprocessing für Bilder.
• BridgeTowerForImageAndTextRetrieval: Vortrainierte BridgeTower-Modellklasse speziell für Image-Text-Retrieval – also die Suche nach dem relevantesten Bild zu einer Textabfrage (oder umgekehrt).
• PIL (Python Imaging Library) dient zur Bildverarbeitung. Hier wird sie genutzt, um Bilder zu öffnen und zu bearbeiten (z. B. Größe zuschneiden/anpassen), bevor sie ins Modell gehen.
• torch.nn.functional stellt diverse Funktionen bereit, z. B. Aktivierungsfunktionen (ReLU, Softmax), Loss-Funktionen (Cross-Entropy etc.) und Operationen auf Tensoren – oft genutzt bei neuronalen Netzen in PyTorch.
• os dient zur Interaktion mit dem Betriebssystem, z. B. zum Lesen von Dateien, Prüfen von Verzeichnissen und Pfadverwaltung (etwa zum Auffinden von Bildern oder Modellgewichten).

2. Modell und Prozessor laden

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)

Damit initialisieren wir Prozessor und Modell für die Embeddings.

3. Bestes Match finden

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

So funktioniert es:

1. Die Funktion image_search verarbeitet die Textabfrage und erzeugt deren Embedding mit dem Modell.
2. Anschließend werden alle Bilder verarbeitet, um deren Embeddings zu erzeugen.
3. Die Embeddings werden über die Logits des Modells miteinander verglichen.
4. Kosinusähnlichkeit wird zwischen Text- und Bild-Embeddings berechnet.
5. Das Bild mit dem höchsten Ähnlichkeitswert wird als bestes Match identifiziert und zurückgegeben.

Frontend-Oberfläche (app.py)

Diese Datei nutzt Streamlit, um eine benutzerfreundliche Oberfläche bereitzustellen.

1. Bibliotheken importieren

import streamlit as st
from search import search_best_match
import os

2. Oberfläche erstellen

st.title("🖼️ KI-gestützte Bildersuch-App")
uploaded_files = st.file_uploader("Bilder hochladen", 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="Hochgeladenes Bild", use_column_width=True)

Nutzende können mehrere Bilder hochladen. Bilder werden im Ordner images/ gespeichert und angezeigt.

3. Suchanfrage hinzufügen

query = st.text_input("Gib deine Suchanfrage ein:")

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

Nutzende geben eine Suchanfrage ein. Die App sucht das passendste Bild und zeigt es an.

Komplette Implementierung: BridgeTower- und Streamlit-Bildersuch-App bauen

1. search.py – Backend-Logik

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-Oberfläche

import streamlit as st
from search import image_search
import os

# Title of the app
st.title("🖼️ Bildersuch-Anwendung mit BridgeTower")

# Image upload section
uploaded_files = st.file_uploader("Lade deine Bilder hoch", 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="Hochgeladenes Bild", use_column_width=True)

# Text input for query
query = st.text_input("Gib deine Suchanfrage ein:")

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

3. Anwendung starten

streamlit run app.py

Beispiel: BridgeTower- und Streamlit-App

So sieht die App in Aktion aus! Ein Bild wurde hochgeladen, und der Suchbegriff „cat“ eingegeben. Die App hat Bild und Text analysiert und sie mit dem BridgeTower-Modell abgeglichen.

Sie hat das beste Match gefunden und das passende Katzenbild angezeigt. Das zeigt, wie gut die App Bilder und Text verknüpft, um genaue Ergebnisse zu liefern.

Neugier sollte hier nicht enden. Das Potenzial solcher Anwendungen geht weit über die aktuelle Implementierung hinaus und eröffnet spannende Möglichkeiten für Wachstum und Innovation. Die Optionen, Nutzererlebnis, Performance und Funktionalität zu erweitern, sind vielfältig. Im Folgenden schlage ich einige Verbesserungen vor, die solche Anwendungen auf das nächste Level heben.

Zukünftige Erweiterungen für BridgeTower

Es gibt mehrere Möglichkeiten, die App auszubauen, zum Beispiel:

FAISS-Indexierung für schnellere Bildsuche hinzufügen

Implementiere FAISS-Indexierung, um die Geschwindigkeit der Bildsuche in großen Datensätzen zu erhöhen. So konvertierst du Bilder in Feature-Vektoren, baust einen Index auf und führst schnelle Ähnlichkeitssuchen durch – effizient auch bei wachsendem Datenbestand.

App auf Streamlit Cloud oder AWS bereitstellen

Stelle die App für einen schnellen, einfachen Start auf Streamlit Cloud bereit – ideal, wenn du mit Python und Streamlit arbeitest. Alternativ kannst du sie auf AWS deployen, um mehr Kontrolle, Skalierbarkeit und höhere Lasten zu bewältigen – für bessere Performance, wenn die App wächst.

Echtzeit-Updates für Bild-Uploads implementieren

Richte Echtzeit-Updates ein, damit neue Bilder sofort für alle sichtbar sind – ohne Seiten-Reload. Mit Technologien wie WebSockets oder Socket.IO kannst du Updates direkt an alle verbundenen Nutzer pushen und die Interaktivität der App steigern.

Fazit

Wir haben eine KI-gestützte Bildersuch-Anwendung mit BridgeTower, Streamlit und PyTorch gebaut und gezeigt, wie KI den Umgang mit digitalen Inhalten vereinfachen und verbessern kann.

Sie ist voll funktionsfähig, bietet aber Potenzial für Optimierungen – etwa schnellere Suche durch FAISS-Indexierung, Deployment auf Plattformen wie AWS für Skalierbarkeit und Echtzeit-Updates für ein noch flüssigeres Nutzererlebnis. Dieses Projekt ist eine solide Basis für weitere Innovationen in intelligenten Suchsystemen.

Wenn du tiefer einsteigen möchtest, empfehle ich diese Ressourcen:

• Streamlit Python: Tutorial
• Transformer Models with PyTorch Course
• How to Build User Interfaces For AI Applications Using Streamlit And LangChain Tutorial