AI 画像アナライザーの構築方法を知りたいですか? それなら、この記事を最後まで読んでください! AI アナライザー ツールの構築方法を本当に簡単に紹介します。そのため、事前の知識はほとんど必要ありません。手順を追って説明し、Project IDX と Gemini API を使用します。つまり、何も設定する必要はありません。すべてクラウド上で行われます。準備ができたら、始めましょう! https://youtu.be/kBNwTIoYwr8?si=x1eco-nEqgurQ13r&embedable=true 私のYouTubeチャンネルをご覧ください プロジェクトIDXを始める 最初のステップはとても簡単です。ウェブサイトを開く必要があります まだ登録していない場合は、まず登録してください。登録すると、以下の画面が表示されます。 idx.google.com テンプレートを選択: Gemini API テンプレートを選択します。 プロジェクトに名前を付けます: 「test 2024」と呼びます。 環境の選択: JavaScript Web アプリケーション環境である「Vite」を選択します。 プロジェクトを作成します。[作成] ボタンを押します。 数分後、IDX がすべてを作成し、テンプレート ファイルが表示されます。このファイルは自由に変更できます。 テンプレートの変更 これは index.html ファイルです。好きなように変更できますが、まずはこれを見てみましょう。初期テンプレートには必要なものがほぼすべて含まれています。このテンプレートは Gemini 1.5 フラッシュ モデルを使用しているため、これで十分です。 APIキーの取得 ご覧のとおり、最初にAPIキーを取得する必要があるため、アプリケーションは最初は動作しません。Webサイトにアクセスしてください。 そこでキーを取得してください。API の詳細な手順については、Project IDX に関する別のビデオをご覧ください。 、 https://aistudio.google.com/app/apikey キーを取得する方法 キーを取得したら、それをコピーして ファイルに移動します。プレースホルダーを API キーに置き換えます。 main.js アプリケーションのテスト アプリケーションが動作しているかどうか確認してみましょう。「Go」を押して、Gemini が返す結果を確認します。 ご覧のとおり、Gemini は写真の中にあるものを理解し、この種のパンを焼くためのレシピをいくつか提案します。このアプリケーションはすでにサーバー上にあるため、リンクを共有したり、ブラウザでこのアプリケーションを開いたりすることができます。 URL はまだ美しくありませんが、すべてが機能していることは確認でき、このリンクをパートナーや同僚と共有できます。 画像アップロード機能の追加 AI 画像アナライザーを完成させるには、独自の画像を追加できるようにする必要があります。テンプレートにいくつか調整を加えてみましょう。まずは index.html ファイルです。 アプリケーション名を変更します。「AI Image Analyzer」と呼びます。 HTML を削除します。定義済みの画像を削除します。14 行目から 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> 画像をアップロードするための入力フィールドを追加します。15行目 <input type="file" id="fileInput" name="file"> 入力名のプロンプト値を「この画像について何でも質問してください」に変更します。 結果の HTML は以下の図のようになります。 JavaScriptの更新 ファイルを読み取るための JavaScript コードを する必要があります。main.js ファイルを開き、次の変更を加えます。 定義 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))); 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; }); アプリケーションは、以下のスクリーンショットのようになります。 最終テスト 結果を確認しましょう。画像をアップロードし、画像に何が写っているかを尋ねて、「Go」を押します。 私の画像の例。 結果： ご覧のとおり、Gemini API は画像に関するすべてを説明しています。当社の AI 画像アナライザーが機能しています。 結論 以上です。ご覧のとおり、Project IDX と Gemini API を使用して AI 画像アナライザーを構築するのは非常に簡単です。さまざまなアプリを作成できます。これはほんの一例です。この記事がお役に立ち、有益な情報になれば幸いです。ぜひ、下のコメント欄でフィードバックをお寄せください。 ありがとうございました。また次の記事でお会いしましょう！ :)
