Suche nach Bedeutung, nicht nach Metadaten: Semantische Bildfilterung mit 4D.Vector

Ihre Benutzer denken nicht in Dateinamen oder Ordnerhierarchien. Sie denken in Ideen.

• „Ein mit Aquarellfarben gemalter Roboter“.
• „Ein sonniger Strand voller Farben.“
• „Etwas, das sich wie die Mona Lisa anfühlt… aber aus der Zukunft.“

Es spielt keine Rolle, ob diese Idee aus einem Bild, einem Kundenauftrag, einer E-Mail oder einem 4D Write Pro Dokument stammt – die Herausforderung ist dieselbe: Wie liefern Sie Ergebnisse, die der Absicht entsprechen, nicht nur den Schlüsselwörtern?

Mit 4D.Vector und dem 4D AI Kit kann Ihre Anwendung endlich einen Sinn für Bedeutung finden. In diesem Beitrag veranschaulichen wir dies anhand der semantischen Bildähnlichkeitssuche. Und hier ist der Schlüssel: Wir arbeiten nicht wirklich mit Rohbildern – wir arbeiten mit ihren Beschreibungen. Derselbe Ansatz funktioniert für jede Art von Textdaten in Ihrer Anwendung.

DEMO_AI_Vector_ImageSearch

Warum Vektoren + KI alles verändern

Die herkömmliche Suche hat nur eine Aufgabe: genaue Begriffe zu finden. Aber Ihre Benutzer wissen nicht immer, welchen genauen Begriff sie verwenden sollen. Sie beschreiben Dinge. Sie drücken ihre Absicht aus. Sie denken in einer verworrenen, schönen, menschlichen Sprache.

Damit die Suche so funktioniert, wie Ihre Benutzer denken, brauchen Sie mehr als nur den Abgleich von Zeichenfolgen. Man muss sie verstehen – und genau hier kommen die Vektoreinbettungen ins Spiel.

Was genau ist also eine Einbettung?

Eine Einbettung ist die Art und Weise, wie Sie unordentliche, unstrukturierte Eingaben – einen Satz, eine Aufforderung oder ein Bild – in einen strukturierten Zahlenvektor umwandeln. Es ist nicht nur eine Liste von Token oder Schlüsselwörtern. Es ist ein mathematischer Schnappschuss der Bedeutung.

Wenn Sie den Satz „ein mit Aquarellfarben gemalter Roboter“ an das Modell text-embedding-ada-002 von OpenAI senden, werden einige hundert Fließkommawerte zurückgegeben. Jeder von ihnen fängt etwas ein: das Thema, die Stimmung, den Stil, die semantischen Beziehungen, die in dieser Aufforderung enthalten sind. Ähnliche Ausdrücke ergeben ähnliche Vektoren. Unähnliche Sätze? Sie landen weiter auseinander.

Stellen Sie sich das so vor, dass Sie die Bedeutung auf einer Landkarte platzieren. Je näher sich zwei Sätze in diesem hochdimensionalen Raum befinden, desto ähnlicher sind sie – unabhängig vom Wortlaut. Dies ist die Grundlage für die Erstellung von Suchen, Empfehlungen, Clustern und Kategorisierungen auf der Grundlage von Bedeutungen.

Ein echter Anwendungsfall: Bildsuche nach Bedeutung

Auf unserer Demo-Seite können Sie die Benutzer semantisch suchen lassen. Sie geben eine Eingabeaufforderung ein oder wählen eine aus einer Liste aus, und Ihre Anwendung gibt Bilder zurück, die danach geordnet sind, wie gut sie der Idee entsprechen.

Die Benutzeroberfläche ist absichtlich minimalistisch:

• Ein Textfeld für benutzerdefinierte Eingabeaufforderungen
• Ein Dropdown-Menü mit vordefinierten Eingabeaufforderungen

• Eine Matrix, die Bilder anzeigt, sortiert nach Ähnlichkeit mit der Aufforderung

Der Clou: Wir vektorisieren die Rohbilder nicht. Stattdessen wird jedes Bild vonOpenAIVision von AIKit analysiert, das eine Beschriftung und Beschreibung in natürlicher Sprache generiert. Diese Beschreibung wird dann in einen 4D.Vector eingebettet und gespeichert.

Auf diese Weise wird alles auf der Ebene der Bedeutung und nicht der Pixel verglichen.

Hinweis: In diesem Beispiel wird 4D Qodly Pro verwendet, aber die gleiche Logik gilt auch für Standard 4D Formulare. Tatsächlich läuft der gesamte Code innerhalb von 4D Methoden und Funktionen. Der einzige Unterschied besteht darin, wie Sie die Ergebnisse anzeigen möchten – in einem klassischen 4D Formular oder auf einer Qodly Seite.

Wie Sie den Vektor erzeugen

Wenn jemand eine Eingabeaufforderung eingibt und auf„Benutzerdefinierte Eingabeaufforderung verwenden“ klickt, führt 4D die Funktion calculate() aus der Klasse VectorManagement aus:

exposed shared Function calculate($prompt : Text) : cs.PicturesSelection

Diese beginnt damit, dass sie Ihren OpenAI API-Schlüssel aus dem Speicher holt (Storage.OpenAI.key) – der im ersten Eingabefeld auf der Registerkarte Info eingegeben werden sollte. Wenn Sie das übersprungen und trotzdem auf Benutzerdefinierte Eingabeaufforderung verwenden geklickt haben, erscheint ein Modal, das Sie auffordert, Ihren Schlüssel einzugeben, bevor Sie fortfahren:

If (Storage.OpenAI.key#"")
	$apiKey:=Storage.OpenAI.key
Else 
	$apiModal:=Web Form.setApiKeyModal
	$apiModal.show()
End if 

Hinweis: In diesem Beispiel wird OpenAI für KI-Operationen verwendet, aber Sie können jeden OpenAI-kompatiblen Anbieter verwenden – sogar ein lokales Modell mit Ollama. Wir verwenden hier OpenAI, weil es einfach einzurichten ist und keine lokale Installation erfordert. Wenn Sie mitmachen wollen, können Sie hier einen OpenAI-Schlüssel anfordern: .

Als nächstes rufen Sie die Funktion generateVector() innerhalb der Klasse AIManagement auf:

var $vector := cs.AIManagement.new($apiKey).generateVector($prompt)

Was passiert hier?

Sie verwenden OpenAIs text-embedding-ada-002 Modell – optimiert für kurzen Text – um die Eingabeaufforderung in einen hochdimensionalen Vektor zu verwandeln. Mit der Methode .create() werden der Prompt und das text-embedding-ada-002-Modell als Anfrage an OpenAI gesendet und eine JSON-Struktur mit dem Vektor zurückgegeben. Dieser Vektor wird dann in ein 4D.Vector Objekt eingewickelt, wodurch wir etwas erhalten, das wir nativ in 4D vergleichen und sortieren können.

property clientAI : Object

Class constructor($openAIKey : Text)
  This.clientAI := cs.AIKit.OpenAI.new($openAIKey)

Function generateVector($text : Text) : 4D.Vector
  var $model := "text-embedding-ada-002"
  var $result := This.clientAI.embeddings.create($text; $model)
  return $result.vector

An diesem Punkt haben Sie die Eingabeaufforderung des Benutzers in ein strukturiertes Format übersetzt, das 4D für den semantischen Vergleich nutzen kann.

Von der Eingabeaufforderung zu geordneten Ergebnissen

Mit Ihrem Vektor in der Hand vergleichen Sie ihn nun mit allen in der Datenbank gespeicherten Bildbeschreibungsvektoren:

var $pictureList := This._calculateVectors($vector)

Und in _calculateVectors passiert Folgendes:

For each ($picture; $pictureList)
  $picture.cosineSimilarity := $vector.cosineSimilarity($picture.vector)
  $picture.dotSimilarity := $vector.dotSimilarity($picture.vector)
  $picture.euclideanDistance := $vector.euclideanDistance($picture.vector)
  $picture.save()
End for each 

Jedes Ähnlichkeitsmaß gibt Ihnen ein anderes Objektiv:

• DieCosinus-Ähnlichkeit misst, wie sehr zwei Vektoren in dieselbe Richtung zeigen. Ideal für das Ranking semantischer Ähnlichkeit.
• Das Punktprodukt berücksichtigt sowohl die Richtung als auch den Betrag. Es ist nützlich, wenn Sie berücksichtigen möchten, wie „stark“ zwei Vektoren übereinstimmen.
• Dereuklidische Abstand ist der reine Abstand zwischen zwei Punkten im Raum. Je kleiner der Abstand ist, desto ähnlicher sind sie sich.

Wenn Sie mit der Vektormathematik in 4D noch nicht vertraut sind, erfahren Sie im ersten Blog-Beitrag dieser Serie, wie Sie Vektoren mit diesen Methoden erstellen und vergleichen und wann Sie sie einsetzen sollten.

Sobald alle Ähnlichkeitswerte berechnet und in den Bildelementen gespeichert sind, sortieren Sie nach Kosinusähnlichkeit und geben die Ergebnisse zurück:

return $pictureList.orderBy("cosineSimilarity desc")

Das bedeutet, dass die konzeptionell relevantesten Bilder zuerst erscheinen, unabhängig von ihrem Dateinamen, ihrer Beschreibung oder ihren Metadaten.

Was passiert, wenn der Benutzer eine vordefinierte Eingabeaufforderung auswählt?

Wenn jemand eine Eingabeaufforderung aus dem Dropdown-Menü auswählt und auf Ausgewählte Eingabeaufforderung verwendenklickt , überspringen Sie den Schritt des Einbettens vollständig:

exposed shared Function calculateWithSelectedPrompt($prompt : cs.PromptsEntity) : cs.PicturesSelection
  var $pictureList:=This._calculateVectors($prompt.Vector)
  return $pictureList.orderBy("cosineSimilarity desc")

Es ist kein zusätzlicher OpenAI-Aufruf erforderlich – der Vektor des Prompts ist bereits in der Datenbank gespeichert. Sie verwenden einfach die 4D.Vector wieder, die in der Prompts-Datenklasse gespeichert wurde, als der Prompt zum ersten Mal erstellt wurde.

Genau wie Bildbeschreibungen wird jeder Prompt einmal vektorisiert und dann zur Wiederverwendung gespeichert. Das bedeutet für Sie:

• Kein API-Aufruf → Sofortige Ergebnisse, keine Netzwerkverzögerung

• Keine Token-Kosten → Budgetfreundlicher, insbesondere bei Skalierung

• Funktioniert offline → Alles läuft lokal, keine Abhängigkeit von einem externen Dienst

VOM BILD-UPLOAD ZUR VEKTORISIERTEN BESCHREIBUNG

Wenn jemand ein Bild hochlädt, betten Sie die Pixel nicht ein. Stattdessen beschreiben Sie das Bild mit OpenAI Vision und betten diese Beschreibung ein.

In der Funktion vectorizeImageDescription sind zwei Eingabeaufforderungen definiert: eine für eine kurze Bildunterschrift und eine für eine ausführlichere Beschreibung. Beide sind so gestaltet, dass sie einzelne, fließende Sätze zurückgeben, die für Einbettungen optimiert sind:

// --- Prompts (single, fluent, embedding-friendly) ---
$captionPrompt:="You are a precise visual captioner. "+\
	"Write one short, clear English sentence (12–20 words) that summarizes the main subject of the image. "+\
	"Keep it straightforward and descriptive, not poetic. Output only the sentence."

$descriptionPrompt:="You are a detailed scene describer. "+\
	"Write a longer English paragraph (80–150 words) that expands on the caption. "+\
	"Include context, secondary elements (icons, arrows, checklists, text, logos), and atmosphere so nothing important is missed. "+\
	"Avoid repeating the caption verbatim. Output only the description."

// --- Get caption ---
$caption:=$client.chat.vision.create($imageData).prompt($captionPrompt).choice.message.text
	
// --- Get description ---
$description:=$client.chat.vision.create($imageData).prompt($descriptionPrompt).choice.message.text

// --- Save entity ---
$pictureEntity:=ds.Pictures.new()
$pictureEntity.picture:=$imageToUpload.picture
$pictureEntity.prompt:=$caption
$pictureEntity.description:=$description
$pictureEntity.vector:=cs.AIManagement.new($apiKey).generateVector($description+$caption)
$status:=$pictureEntity.save()

Was Sie in der Benutzeroberfläche sehen

Sobald der Vergleich abgeschlossen ist, wird Ihre Matrix sofort aktualisiert. Die Bilder werden nach ihrem Ähnlichkeitsgrad geordnet.

• Sie suchen nach: „ein Aquarell eines Roboters“ – und sehen Bilder mit weichen Texturen und Roboterformen:

• Sie wechseln zu: „eine lebhafte und sonnige Strandszene mit bunten Elementen“ – und erhalten eine völlig andere, aber ebenso relevante Ergebnismenge:

Ob eingegeben oder hochgeladen, Sie vergleichen immer Ideen – nicht Pixel, nicht Dateinamen.

Was Sie als Entwickler davon haben

Die Verwendung von Vektoren mit KI bringt einen echten, unmittelbaren Nutzen für Ihre 4D-Anwendungen:

• Bessere Suche: Lassen Sie Benutzer nach Bedeutung suchen, nicht nach Schlüsselwörtern. Keine Tags, keine Filter – nur relevante Ergebnisse.

• Eigene Logik: Alles läuft innerhalb von 4D. Sie brauchen keine externen Suchmaschinen oder Tools von Drittanbietern.

• Wiederverwendbare Muster: Funktioniert für Bilder, Dokumente, Produkte, Tickets – alles, was Sie nach Konzepten vergleichen möchten.

• Geringe Einrichtung, große Wirkung: Mit nur wenigen Zeilen Code erhalten Sie Ranking, Filterung und Empfehlungen auf Basis von KI.

• Billiger und schneller: Einmal einbetten, den Vektor speichern, immer wieder verwenden. Keine wiederholten API-Aufrufe oder Token-Kosten.

• KI-fähige Grundlage: Sie fügen nicht nur eine Suche hinzu, sondern schaffen die Grundlage für Chatbots, Empfehlungen und intelligentere Arbeitsabläufe.

Mit 4D.Vector und dem 4D AI Kit müssen Sie keine Intelligenz aufbauen – Sie können sie einfach einbauen.

Abschließende Überlegungen

Sie fügen Ihrer Anwendung keine KI hinzu – Sie bauen Intelligenz in Ihre Kernlogik ein.

Mit 4D.Vector und dem 4D AI Kit geben Sie Ihrer App die Fähigkeit, Absichten zu verstehen, nicht nur Eingaben. Um Bedeutung zu erkennen, nicht nur Übereinstimmungen.

Die Tools sind bereit. Der Code ist leicht. Der Wert ist real. Alles, was Sie jetzt brauchen, ist eine Eingabeaufforderung.