Nuo nulio iki AI vaizdo analizatoriaus per 5 minutes: vadovas pradedančiajam

Ar norite sužinoti, kaip sukurti AI vaizdo analizatorių? Tada perskaitykite šį straipsnį iki galo! Parodysiu, kaip iš tikrųjų paprastai sukurti AI analizatoriaus įrankius, todėl beveik nereikia turėti jokių išankstinių žinių. Nuvessiu jus žingsnis po žingsnio, o mes naudosime Project IDX ir Gemini API. Tai reiškia, kad jums nereikia nieko nustatyti; viskas, ką darysime, yra debesyje. Jei esate pasiruošę, pradėkime!

Apsilankykite mano „YouTube“ kanale

Darbo su projektu IDX pradžia

Pirmasis žingsnis yra gana paprastas. Turime atidaryti svetainę idx.google.com. Jei dar neužsiregistravote, pirmiausia turite užsiregistruoti, o tada pamatysite žemiau esantį ekraną.

1. Pasirinkite šabloną: pasirinksiu Gemini API šabloną.

2. Pavadinkite savo projektą: pavadinsiu jį „2024 m. bandymu“.

3. Pasirinkite aplinką: pasirinksiu „Vite“, kuri yra „JavaScript“ žiniatinklio programų aplinka.

4. Sukurkite projektą: paspauskite mygtuką Sukurti.

   

Po kelių minučių IDX viską sukurs už mus, o mes pamatysime savo šabloninius failus, kuriuos galėsime keisti kaip norime.

Šablono keitimas

Tai mūsų index.html failas. Galime jį modifikuoti taip, kaip mums patinka, bet pirmiausia pažvelkime į tai. Pradiniame šablone yra beveik viskas, ko mums reikia. Šiame šablone naudojamas Gemini 1,5 blykstės modelis, todėl mums jo daugiau nei pakanka.

API rakto gavimas

Kaip matote, programa iš pradžių neveikia, nes pirmiausia turime gauti API raktą. Eikite į svetainę https://aistudio.google.com/app/apikey, ir gaukite raktą ten. Jei norite išsamių instrukcijų, kaip gauti API raktą, žiūrėkite kitą vaizdo įrašą apie projektą IDX.

Kai gausite raktą, nukopijuokite jį ir eikite į main.js failą. Pakeiskite rezervuotąją vietą savo API raktu.

Programos testavimas

Patikrinkime, ar mūsų programa veikia. Paspauskite „Eiti“ ir pamatysite, ką Dvyniai mums grąžins.

Kaip matote, Dvyniai supranta, kas yra paveikslėlyje, ir siūlo keletą receptų, kaip kepti tokią kepyklėlę. Kadangi ši programa jau yra serveryje, galėsite bendrinti nuorodą arba atidaryti šią programą savo naršyklėje.

URL dar nėra gražus; tačiau pamatysite, kad viskas veikia, ir galėsite pasidalinti šia nuoroda su savo partneriais ar bendradarbiais.

Vaizdo įkėlimo funkcijos pridėjimas

Norėdami užbaigti AI vaizdo analizatorių, turime turėti galimybę pridėti savo vaizdą. Pataisykime šabloną; pirmas yra index.html failas:

1. Pakeiskite programos pavadinimą: pavadinsiu jį „AI vaizdo analizatoriumi“.

2. Ištrinti HTML: ištrinkite iš anksto nustatytus vaizdus. Eilutės nuo 14 iki 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. Pridėkite įvesties lauką vaizdams įkelti. 15 eilutė

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

4. Pakeiskite įvesties pavadinimo raginimo reikšmę į „Klauskite visko, ko norite apie šį vaizdą“.

Gautas HTML turėtų atrodyti taip, kaip paveikslėlyje žemiau.

„JavaScript“ atnaujinimas

Norėdami nuskaityti failą, turime apibrėžti JavaScript kodą. Atidaryk main.js failą ir atlikite šiuos pakeitimus:

1. Pašalinkite kodą iš 22–26 eilutės.

// 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. Pridėkite naują kodą, pradedant nuo 22 eilutės.

// 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;
   });

Toliau pateiktoje ekrano kopijoje jūsų programa atrodys taip.

Galutinis testavimas

Patikrinkime rezultatą. Įkelkite paveikslėlį, paklauskite, kas yra vaizde, ir paspauskite „Eiti“.

Mano paveikslo pavyzdys.

Rezultatas:

Kaip matote, „Gemini“ API paaiškina viską apie vaizdą. Mūsų AI vaizdo analizatorius veikia!

Išvada

Viskas! Kaip matote, sukurti dirbtinio intelekto vaizdų analizatorių naudojant Project IDX ir Gemini API tikrai paprasta. Galite sukurti daugybę skirtingų programų. Tai tik vienas pavyzdys. Tikiuosi, kad šis straipsnis buvo naudingas ir informatyvus. Nepamirškite pasidalinti savo atsiliepimais toliau pateiktuose komentaruose.

Ačiū ir iki pasimatymo kituose mano straipsniuose! 🙂