Voulez-vous savoir comment créer un analyseur d’images IA ? Alors lisez cet article jusqu’à la fin ! Je vais vous montrer comment créer des outils d'analyse d'IA très simplement, de sorte que vous n'avez presque pas besoin d'avoir de connaissances préalables. Je vais vous guider étape par étape et nous utiliserons le projet IDX et l'API Gemini. Cela signifie que vous n'avez rien à configurer ; tout ce que nous ferons est sur le cloud. Si vous êtes prêt, alors commençons !
Premiers pas avec le projet IDX
La première étape est assez simple. Nous devons ouvrir le site Web
Choisissez un modèle : je choisirai le modèle API Gemini.
Nommez votre projet : je l'appellerai "test 2024".
Sélectionnez Environnement : je choisirai "Vite", qui est un environnement d'application Web JavaScript.
Créer le projet : appuyez sur le bouton Créer.
Après quelques minutes, IDX créera tout pour nous et nous verrons nos fichiers modèles, que nous pourrons modifier à notre guise.
Modification du modèle
Ceci est notre fichier index.html. Nous pouvons le modifier comme nous le souhaitons, mais regardons-le d'abord. Le modèle initial contient presque tout ce dont nous avons besoin. Ce modèle utilise le modèle Gemini 1.5-flash, c'est donc plus que suffisant pour nous.
Obtenir une clé API
Comme vous pouvez le constater, l'application ne fonctionne pas au départ car nous devons d'abord obtenir une clé API. Aller sur le site
Une fois que vous avez obtenu votre clé, copiez-la, puis accédez au fichier main.js. Remplacez l'espace réservé par votre clé API.
Tester l'application
Vérifions si notre application fonctionne. Appuyez sur « Go » et voyez ce que Gemini nous renvoie.
Comme vous pouvez le voir, les Gémeaux comprennent ce qu'il y a à l'intérieur de l'image et suggèrent quelques recettes pour préparer ce genre de boulangerie. Puisque cette application est déjà sur le serveur, vous pourrez partager le lien ou ouvrir cette application dans votre navigateur.
L'URL n'est pas encore belle ; cependant, vous pourrez voir que tout fonctionne et vous pourrez partager ce lien avec vos partenaires ou collègues.
Ajout d'une fonctionnalité de téléchargement d'images
Pour compléter notre analyseur d'images IA, nous devons pouvoir ajouter notre propre image. Apportons quelques ajustements au modèle ; le premier est le fichier index.html :
Changez le nom de l'application : je l'appellerai "AI Image Analyzer".
Supprimer le HTML : Supprimez les images prédéfinies. Lignes du 14 au 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>
- Ajoutez un champ de saisie pour télécharger des images. Ligne 15
<input type="file" id="fileInput" name="file">- Remplacez la valeur de l'invite de nom d'entrée par "Demandez tout ce que vous voulez à propos de cette image".
Le HTML résultant devrait ressembler à l’image ci-dessous.
Mise à jour du JavaScript
Nous devons définir du code JavaScript pour lire notre fichier. Ouvrez le fichier main.js et apportez les modifications suivantes :
- Supprimez le code de la ligne 22 à 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)));
- Ajoutez un nouveau code à partir de la ligne 22.
// 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; });
Votre application ressemblera à ceci dans la capture d'écran ci-dessous.
Tests finaux
Vérifions le résultat. Téléchargez une image, demandez ce qu'il y a sur l'image et appuyez sur "Go".
Mon exemple d'image.
Le résultat:
Comme vous pouvez le constater, l'API Gemini explique tout sur l'image. Notre analyseur d'images IA fonctionne !
Conclusion
C'est ça! Comme vous pouvez le voir, il est très simple de créer un analyseur d'images IA à l'aide du projet IDX et de l'API Gemini. Vous pouvez créer de nombreuses applications différentes. Ceci n'est qu'un exemple. J'espère que vous trouverez cet article utile et informatif. N'oubliez pas de partager vos commentaires dans les commentaires ci-dessous.
Merci et à bientôt dans mes prochains articles ! :)
