Von Null zum KI-Bildanalysator in 5 Minuten: Ein Leitfaden für Anfänger

Möchten Sie wissen, wie man einen KI-Bildanalysator baut? Dann lesen Sie diesen Artikel bis zum Ende! Ich werde Ihnen zeigen, wie man KI-Analysetools ganz einfach baut, sodass Sie fast keine Vorkenntnisse benötigen. Ich werde Sie Schritt für Schritt anleiten und wir werden Project IDX und die Gemini-API verwenden. Das bedeutet, dass Sie nichts einrichten müssen; alles, was wir tun, findet in der Cloud statt. Wenn Sie bereit sind, dann legen wir los!

Besuchen Sie meinen YouTube-Kanal

Erste Schritte mit Project IDX

Der erste Schritt ist ziemlich einfach. Wir müssen die Website öffnen idx.google.com . Wenn Sie sich noch nicht registriert haben, müssen Sie sich zuerst registrieren. Anschließend wird der folgende Bildschirm angezeigt.

1. Wählen Sie eine Vorlage: Ich werde die Gemini-API-Vorlage wählen.

   
   

2. Geben Sie Ihrem Projekt einen Namen: Ich werde es „Test 2024“ nennen.

   
   

3. Umgebung auswählen: Ich wähle „Vite“, eine JavaScript-Web-Anwendungsumgebung.

   
   

4. Projekt erstellen: Klicken Sie auf die Schaltfläche „Erstellen“.

   
   

   

Nach wenigen Minuten erstellt IDX alles für uns und wir sehen unsere Vorlagedateien, die wir nach Belieben ändern können.

Ändern der Vorlage

Dies ist unsere Datei index.html. Wir können sie nach Belieben ändern, aber sehen wir sie uns zunächst einmal an. Die ursprüngliche Vorlage enthält fast alles, was wir brauchen. Diese Vorlage verwendet das Gemini 1.5-Flash-Modell und ist daher für uns mehr als ausreichend.

Einen API-Schlüssel erhalten

Wie Sie sehen, funktioniert die Anwendung zunächst nicht, da wir zuerst einen API-Schlüssel erhalten müssen. Gehen Sie zur Website https://aistudio.google.com/app/apikey , und erhalten Sie dort Ihren Schlüssel. Wenn Sie detaillierte Anweisungen zum Erhalten eines API-Schlüssels wünschen, sehen Sie sich bitte ein weiteres Video über Project IDX an.

Sobald Sie Ihren Schlüssel erhalten haben, kopieren Sie ihn und gehen Sie dann zur Datei main.js. Ersetzen Sie den Platzhalter durch Ihren API-Schlüssel.

Testen der Anwendung

Lassen Sie uns überprüfen, ob unsere Anwendung funktioniert. Drücken Sie „Los“ und sehen Sie, was Gemini uns zurückgibt.

Wie Sie sehen, versteht Gemini, was sich auf dem Bild befindet, und schlägt einige Rezepte zum Backen dieser Art von Gebäck vor. Da diese Anwendung bereits auf dem Server vorhanden ist, können Sie den Link freigeben oder diese Anwendung in Ihrem Browser öffnen.

Die URL sieht noch nicht schön aus, Sie sehen jedoch, dass alles funktioniert, und können diesen Link mit Ihren Partnern oder Mitarbeitern teilen.

Hinzufügen einer Bild-Upload-Funktionalität

Um unseren KI-Bildanalysator fertigzustellen, müssen wir in der Lage sein, unser eigenes Bild hinzuzufügen. Nehmen wir einige Anpassungen an der Vorlage vor; zuerst kommt die Datei index.html:

1. Ändern Sie den Anwendungsnamen: Ich werde es „AI Image Analyzer“ nennen.

   
   

2. HTML löschen: Löschen Sie die vordefinierten Bilder. Zeilen von 14 bis 27.

 <div class="image-picker"> <label class="image-choice"> <input type="radio" checked name="chosen-image" value="/baked_goods_1.jpg"> <img src="/baked_goods_1.jpg"> </label> <label class="image-choice"> <input type="radio" name="chosen-image" value="/baked_goods_2.jpg"> <img src="/baked_goods_2.jpg"> </label> <label class="image-choice"> <input type="radio" name="chosen-image" value="/baked_goods_3.jpg"> <img src="/baked_goods_3.jpg"> </label> </div>

3. Fügen Sie ein Eingabefeld zum Hochladen von Bildern hinzu. Zeile 15

 <input type="file" id="fileInput" name="file">

4. Ändern Sie den Eingabeaufforderungswert für den Eingabenamen in „Stellen Sie alle gewünschten Fragen zu diesem Bild.“

Das resultierende HTML sollte wie im Bild unten aussehen.

Aktualisieren des JavaScript

Wir müssen JavaScript-Code definieren, um unsere Datei zu lesen. Öffnen Sie die Datei main.js und nehmen Sie die folgenden Änderungen vor:

1. Entfernen Sie den Code von Zeile 22 bis 26.

 // Load the image as a base64 string let imageUrl = form.elements.namedItem('chosen-image').value; let imageBase64 = await fetch(imageUrl) .then(r => r.arrayBuffer()) .then(a => Base64.fromByteArray(new Uint8Array(a)));

2. Fügen Sie ab Zeile 22 einen neuen Code hinzu.

 // Load the image as a base64 string const fileInput = document.getElementById('fileInput'); const file = fileInput.files[0]; const imageBase64 = await new Promise((resolve, reject) => { const reader = new FileReader(); reader.readAsDataURL(file); reader.onload = () => { const base64String = reader.result.split(',')[1]; // Extract base64 part resolve(base64String); }; reader.onerror = reject; });

Ihre Anwendung sieht dann wie im Screenshot unten aus.

Abschließende Prüfung

Schauen wir uns das Ergebnis an. Laden Sie ein Bild hoch, fragen Sie, was auf dem Bild zu sehen ist, und drücken Sie „Los“.

Mein Bildbeispiel.

Das Ergebnis:

Wie Sie sehen, erklärt die Gemini-API alles über das Bild. Unser KI-Bildanalysator funktioniert!

Abschluss

Das ist es! Wie Sie sehen, ist es wirklich einfach, mit Project IDX und der Gemini-API einen KI-Bildanalysator zu erstellen. Sie können eine Reihe verschiedener Apps erstellen. Dies ist nur ein Beispiel. Ich hoffe, Sie finden diesen Artikel hilfreich und informativ. Bitte vergessen Sie nicht, Ihr Feedback in den Kommentaren unten mitzuteilen.

Vielen Dank und wir sehen uns in meinen nächsten Artikeln! :)