De zéro à l'analyseur d'images AI en 5 minutes : guide du débutant

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 !

Visitez ma chaîne YouTube

Premiers pas avec le projet IDX

La première étape est assez simple. Nous devons ouvrir le site Web idx.google.com . Si vous n'êtes pas encore inscrit, vous devez d'abord vous inscrire, puis vous pourrez voir l'écran ci-dessous.

1. Choisissez un modèle : je choisirai le modèle API Gemini.

   
   

2. Nommez votre projet : je l'appellerai "test 2024".

   
   

3. Sélectionnez Environnement : je choisirai "Vite", qui est un environnement d'application Web JavaScript.

   
   

4. 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 https://aistudio.google.com/app/apikey , et récupérez-y votre clé. Si vous souhaitez des instructions détaillées sur la façon d'obtenir une clé API , veuillez regarder une autre vidéo sur le projet IDX.

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 :

1. Changez le nom de l'application : je l'appellerai "AI Image Analyzer".

   
   

2. 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>

3. Ajoutez un champ de saisie pour télécharger des images. Ligne 15

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

4. 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 :

1. 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)));

2. 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 ! :)