AI

Multimodale KI – Was das ist und ein praktisches Beispiel mit Bright Data

Erfahren Sie, wie Sie mit Bright Data für die Webdatenerfassung eine echte multimodale KI-App erstellen können, mit klaren Anweisungen und praktischen Anwendungsfällen.
10 min lesen
What is Multimodal AI + Examples

In diesem Artikel erfahren Sie:

  • Was multimodale KI ist und warum sie für moderne Anwendungen wichtig ist.
  • Wie Bright Data durch die Erfassung von Webdaten praktische Implementierungen multimodaler KI ermöglicht.
  • Wie Sie mit den Tools von Bright Data eine funktionierende multimodale KI-Anwendung erstellen können – Schritt für Schritt erklärt.

Lassen Sie uns eintauchen!

Was ist multimodale KI?

Multimodale KI bezieht sich auf künstliche Intelligenzsysteme, die mehr als einen Datentyp (oder „Modus“) gleichzeitig verarbeiten, interpretieren und daraus Erkenntnisse generieren können. Dazu gehören Text, Bilder, Video, Audio und strukturierte Daten.
Beispielsweise kann sie ein Foto eines Tellers mit Keksen empfangen und als Antwort ein schriftliches Rezept generieren und umgekehrt.

 What a Multimodal AI workflow looks like
Quelle

Diese Konvergenz ermöglicht weitaus leistungsfähigere und differenziertere Anwendungen, wie zum Beispiel

  • Fortschrittliche Inhaltsanalyse: Verständnis des Kontexts eines Memes durch Analyse sowohl des Bildes als auch seiner Bildunterschrift.
  • Intelligenter E-Commerce: Empfehlung von Produkten durch Analyse des visuellen Stils von Bildern und der textuellen Präferenzen aus Bewertungen.
  • Verbesserte Forschung: Extrahieren von Daten aus wissenschaftlichen Arbeiten, die Diagramme, Grafiken und Text enthalten.

Stellen Sie sich multimodale KI als etwas vor, das Ihrem Computer sowohl Augen als auch Ohren verleiht, sodass er Texte lesen und Bilder betrachten kann.

Warum Bright Data der Schlüssel zum Aufbau multimodaler KI-Anwendungen ist

Die Entwicklung einer multimodalen KI-Anwendung beginnt mit einer entscheidenden Komponente: vielfältigen, hochwertigen und skalierbaren Daten. Hier wird Bright Data zu einem unverzichtbaren Partner.

Bright Data dashboard overview page

Zugang zu vielfältigen Datenquellen

Multimodale KI erfordert eine reichhaltige Versorgung mit verschiedenen Datentypen. Bright Data bietet nahtlosen Zugriff auf Texte, Bilder, Videos und strukturierte Daten aus dem gesamten öffentlichen Web. Ganz gleich, ob Sie Produktbilder und -beschreibungen von E-Commerce-Websites sammeln, Social-Media-Beiträge mit ihren Bildmaterialien analysieren oder Nachrichtenartikel mit eingebetteten Medien sammeln möchten – die Infrastruktur und Tools von Bright Data (wie die Web Scraper API und Datensätze) ermöglichen es Ihnen, all diese Modalitäten in einem einzigen zusammenhängenden Workflow zu erfassen.

Datenqualität auf Unternehmensniveau

KI-Modelle sind nur so gut wie die Daten, mit denen sie trainiert oder gefüttert werden. Bright Data stellt sicher, dass die von Ihnen gesammelten Daten sauber, zuverlässig und genau sind. Durch Funktionen wie automatische IP-Rotation, CAPTCHA-Verarbeitung und JavaScript-Rendering ruft Bright Data vollständige, unblockierte Daten genau so ab, wie sie ein menschlicher Benutzer sehen würde. Diese Qualität ist unverzichtbar für die Entwicklung von KI-Anwendungen, die konsistente, vertrauenswürdige Ergebnisse liefern.

Skalierbarkeit für Produktionsanwendungen

Ein Proof-of-Concept ist eine Sache, eine vollwertige Anwendung eine andere. Das globale Proxy-Netzwerk und die robuste Infrastruktur von Bright Data sind auf Skalierbarkeit ausgelegt. Sie können multimodale Daten aus Tausenden von Quellen gleichzeitig erfassen, ohne sich um Sperren, Verbote oder Ratenbeschränkungen sorgen zu müssen, sodass Ihre KI-Anwendung mit den Anforderungen der Nutzer wachsen kann.

Wie man mit Bright Data eine multimodale KI-Anwendung erstellt

Lassen Sie uns eine praktische Anwendung erstellen. Dieses Tool verwendet Bright Data, um eine Produktseite zu scrapen, die Bild- und Textdaten zu sammeln und diese dann an ein multimodales KI-Modell (wie GPT-4 Vision) zu senden, um eine strukturierte Analyse zu generieren.

Voraussetzungen

Schritt 1: Einrichten von Bright Data für die multimodale Datenerfassung

Wir verwenden die Web Scraper API von Bright Data aufgrund ihrer Benutzerfreundlichkeit und JavaScript-Rendering-Fähigkeiten, die für die Erfassung moderner, dynamischer Produktseiten entscheidend sind.

  1. Melden Sie sich bei Bright Data Scraper an
  2. Erstellen Sie einen neuen Scraper. In diesem Beispiel nehmen wir eine Beispiel-Produktseite als Ziel.
  3. Geben Sie Ihre Ziel-URL ein
    Enter your Target URL
  4. Kopieren Sie den folgenden JSON-Code und fügen Sie ihn in die „Parsing Instructions“ ein.

Beispiel für die Scraper-Konfiguration (Bright Data UI):

{
  "title": ".product-title",
  "image_url": ".main-product-image img | attr:src",
  "description": ".product-description",
  "price": ".price",
  "specs": ".specifications-table"
}

Schritt 2: Konfigurieren Sie das multimodale KI-Modell

Nachdem Ihre Datenpipeline nun bereit ist, verbinden wir das KI-Gehirn unseres Projekts – das gpt-4-vision -Modell von OpenAI.

Dieses Modell kann sowohl Text als auch Bilder verstehen und eignet sich daher perfekt für unseren multimodalen Anwendungsfall.

1. API-Schlüssel abrufen

Gehen Sie zu Ihrem OpenAI-Dashboard und erstellen Sie einen neuen API-Schlüssel.
Bewahren Sie diesen Schlüssel sicher auf, Sie werden ihn in Kürze in Ihrem Code benötigen.

2. Richten Sie Ihre Entwicklungsumgebung ein

Wir werden dieses Projekt je nach Ihrer Präferenz entweder in Node.js oder Python ausführen.

Öffnen Sie Ihr Terminal in Ihrem Projektordner und installieren Sie dann das offizielle OpenAI SDK:

Für Node.js:

npm init
npm install openai

Für Python:

pip install openai

Sobald die Installation abgeschlossen ist, können Sie im nächsten Schritt Ihre erste Anfrage an das Modell senden.

Screenshot 2026-12-03 085233

Schritt 3: Sammeln Sie Webdaten mit Bright Data

Nachdem unser Modell nun bereit ist, sammeln wir mit Bright Data Daten aus der realen Welt.
In diesem Schritt wird Ihr Projekt zum Leben erweckt. Wir werden Text- und Bilddaten von einer tatsächlichen Produktseite abrufen.

1. Verbindung zur Bright Data API herstellen

Öffnen Sie das Hauptskript Ihres Projekts (z. B. index.js oder main.py) und fügen Sie den folgenden Code hinzu, um eine Verbindung zur Web Scraper API von Bright Data herzustellen.

Node.js-Beispiel:

import fetch from "node-fetch";

const BRIGHTDATA_API_KEY = "YOUR_BRIGHTDATA_API_KEY";
const SCRAPER_ID = "YOUR_SCRAPER_ID";

const response = await fetch(
  `https://api.brightdata.com/datensätze/v3/run?datensatz_id=${SCRAPER_ID}`,
  {
    method: "POST",
    headers: {
      Authorization: `Bearer ${BRIGHTDATA_API_KEY}`,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      url: "https://example.com/product-page", // Durch die tatsächliche Produkt-URL ersetzen
    }),
  }
);

const scrapedData = await response.json();
console.log("Gesammelte multimodale Daten:", scrapedData);

2. Überprüfen Sie Ihre Daten

Sobald Sie dieses Skript ausgeführt haben, sollten Sie strukturierte Produktdaten in Ihrer Konsole sehen.
Sie könnten etwa so aussehen (die Werte unterscheiden sich je nach Ihrer Ziel-URL):

{
  "title": "Wireless Noise-Cancelling Headphones",
  "image_url": "https://examplecdn.com/headphones.jpg",
  "description": "Premium-Over-Ear-Kopfhörer mit aktiver Geräuschunterdrückung und 30 Stunden Akkulaufzeit.",
  "price": "$199.99",
  "specs": {
    "battery_life": "30 hours",
    "connectivity": "Bluetooth 5.2",
    "color": "Black"
  }
}

Diese Ausgabe bestätigt, dass Ihre Bright Data-Konfiguration korrekt funktioniert und sowohl Text- als auch Bildeingaben zurückgibt – die perfekte Grundlage für unsere multimodale KI-Analyse.

Schritt 4: Verarbeiten und strukturieren Sie die Daten

Nachdem wir nun unsere Rohproduktdaten aus Bright Data gesammelt haben, ist es an der Zeit, sie für unser multimodales KI-Modell vorzubereiten.
Das Ziel dabei ist, dem Modell alles zu geben, was es braucht: sauberen Text, eine klare Bildreferenz und eine gut strukturierte Eingabeaufforderung, die ihm genau sagt, was es tun soll.

1. Formatieren Sie die Produktdaten

Nehmen wir unsere gescrapten Daten und wandeln sie in eine gut strukturierte Nachricht für das KI-Modell um.

Node.js-Beispiel:

// Angenommen, scrapedData enthält die von Bright Data zurückgegebenen Produktinformationen.
const productAnalysisPrompt = `
Analysieren Sie dieses Produkt und erstellen Sie eine strukturierte Zusammenfassung. Verwenden Sie sowohl das Produktbild als auch die Textdaten.

Produktdetails:
- Titel: ${scrapedData.title}
- Beschreibung: ${scrapedData.description}
- Preis: ${scrapedData.price}
- Spezifikationen: ${JSON.stringify(scrapedData.specs)}

Beantworten Sie bitte anhand des Bildes und des Textes folgende Fragen:
1. Was ist der primäre Anwendungsfall für dieses Produkt?
2. Nennen Sie 3 sichtbare oder beschriebene Hauptmerkmale.
3. Bewerten Sie die wahrgenommene Qualität und den Wert des Produkts.
`;

const imageUrl = scrapedData.image_url;

Was wir hier getan haben:

  • Wir haben alle unsere Textdaten in einer detaillierten Eingabeaufforderung zusammengefasst.
  • Wir haben die Bild-URL separat gespeichert, damit die KI sie visuell verarbeiten kann.

2. Testen Sie Ihre Datenstruktur

Bevor Sie zum KI-Aufruf übergehen, protokollieren Sie Ihre Variablen, um zu überprüfen, ob sie sauber und gültig sind.

console.log("Prompt-Vorschau:", productAnalysisPrompt);
console.log("Bild-URL:", imageUrl);

Wenn alles lesbar aussieht und die Bild-URL mit https:// beginnt, sind Sie bereit für die nächste Phase, in der Sie die Daten in das multimodale KI-Modell einspeisen.

Schritt 5: Daten an das multimodale KI-Modell senden

Jetzt kommt der spannende Teil: Wir senden unsere kombinierten Text- und Bilddaten an das multimodale KI-Modell, um intelligente Erkenntnisse zu erhalten.

Wir verwenden das gpt-4-vision-Modell von OpenAI, das das Bild „sehen” und den Text gleichzeitig „lesen” kann, um eine detaillierte Analyse zu erstellen.

1. Initialisieren Sie den OpenAI-Client

Wir verbinden uns mit der API über das offizielle OpenAI SDK.

Node.js-Beispiel:

import OpenAI from "openai";

const openai = new OpenAI({ apiKey: "YOUR_OPENAI_API_KEY" });

2. Erstellen Sie eine multimodale Anfrage

Als Nächstes senden wir den formatierten Produkttext und die Bild-URL zusammen in einem API-Aufruf.

const completion = await openai.chat.completions.create({
  model: "gpt-4-vision-preview",
  messages: [
    {
      role: "user",
      content: [
        { type: "text", text: productAnalysisPrompt },
        { type: "image_url", image_url: { url: imageUrl } },
      ],
    },
  ],
  max_tokens: 1000,
});

const aiResponse = completion.choices[0].message.content;
console.log("KI Analysis Result:", aiResponse);

3. Interpretieren Sie die Antwort der KI

Nach der Ausführung erhalten Sie eine strukturierte Analyse, die in etwa wie folgt aussieht:

Das Produkt scheint ein hochwertiger kabelloser Over-Ear-Kopfhörer zu sein, der in erster Linie für Reisende und Berufstätige entwickelt wurde, die in lauten Umgebungen eine Geräuschisolierung benötigen.

Zu den wichtigsten Merkmalen gehören:
1. Aktive Geräuschunterdrückungstechnologie, erkennbar am Design der Ohrmuscheln
2. 30 Stunden Akkulaufzeit, wie in den technischen Daten angegeben
3. Hochwertige mattschwarze Oberfläche, wie auf dem Bild zu sehen

Aufgrund der sichtbaren Materialien und der detaillierten technischen Daten scheint es sich um einen hochwertigen Kopfhörer zu handeln. Der Preis deutet auf eine Positionierung im Premium-Segment hin.

Schritt 6: Ergebnisse verarbeiten und anzeigen

Nachdem das KI-Modell seine Analyse erstellt hat, wollen wir die Ergebnisse nun übersichtlicher organisieren und präsentieren.
Sie können sie in der Konsole einfach halten oder später in einem Web-Dashboard ansprechend darstellen.

1. Formatieren der KI-Antwort

Wir nehmen den vom Modell zurückgegebenen Rohtext und geben ihn übersichtlich aus.

Node.js-Beispiel:

console.log("=== PRODUKTINTELLIGENZANALYSE ===");
console.log(aiResponse);

// (Optional) Speichern Sie die Ausgabe in einer Datei.
import fs from "fs";
fs.writeFileSync("analysis_output.txt", aiResponse);
console.log("Analyse in analysis_output.txt gespeichert");

Wenn Sie die Ergebnisse für die spätere Verwendung zentral speichern möchten, können Sie sie auch in einer Datenbank speichern oder in einem einfachen React-Frontend anzeigen.

2. (Optional) Erstellen Sie eine einfache Webvorschau

Für eine anschaulichere Darstellung können Sie die Ergebnisse über eine lokale Webseite bereitstellen.

Beispiel für einen Mini-Node.js-Server:

import express from "express";
import fs from "fs";

const app = express();
app.get("/", (req, res) => {
  const result = fs.readFileSync("analysis_output.txt", "utf8");
  res.send(`
    <h2>Produktinformationsanalyse</h2>
    <pre>${result}</pre>
  `);
});

app.listen(3000, () =>
  console.log("Server läuft unter http://localhost")
);

Öffnen Sie Ihren Browser und besuchen Sie http://localhost. Dort sehen Sie die Analyse des Modells in einem übersichtlichen Format als Klartext.

Fazit

Multimodale KI stellt einen bedeutenden Fortschritt dar und ermöglicht Anwendungen, die die Welt auf eine reichhaltigere, menschenähnlichere Weise verstehen. Wie wir gezeigt haben, ist der Schlüssel zur Erschließung dieses Potenzials der Zugang zu hochwertigen, vielfältigen und skalierbaren Daten aus der realen Welt.

Erweitern und experimentieren

Sie können dieses Projekt noch weiter ausbauen:

  • Fügen Sie weitere Datenquellen hinzu: Beziehen Sie Bewertungen oder Videos von E-Commerce-Websites für eine tiefergehende Analyse.
  • Integrieren Sie ein Frontend: Zeigen Sie die Ergebnisse der KI in einem übersichtlichen React- oder Next.js-Dashboard an.
  • Automatisieren Sie Berichte: Planen Sie tägliche Scrapes und Analysen für die Überwachung von Konkurrenzprodukten.

Jede Erweiterung, die Sie erstellen, bringt Ihr Projekt einem produktionsreifen KI-Datenintelligenz-Tool näher.

Sind Sie bereit, Ihre KI-Projekte mit den weltweit besten Webdaten voranzutreiben?

  • Melden Sie sich noch heute bei Bright Data an und legen Sie mit kostenlosen Credits los.
  • Experimentieren Sie mit dem Code-Beispiel, probieren Sie es auf verschiedenen Websites aus und entdecken Sie weitere Tools aus dem Arsenal von Bright Data, wie den Data Collector oder vorgefertigte Datensätze.

Beginnen Sie mit der Entwicklung der nächsten Generation intelligenter Anwendungen.