554 測定値

ゼロから 5 分で AI 画像分析ツールを構築する: 初心者向けガイド

に Vladislav Guzey4m2024/07/01

長すぎる; 読むには

この記事では、AI 画像アナライザーの構築方法を説明します。Project IDX と Gemini API を使用します。すべてクラウド上で行われるため、何も設定する必要はありません。API キーを取得する必要があるため、アプリケーションは最初は動作しません。

featured image - ゼロから 5 分で AI 画像分析ツールを構築する: 初心者向けガイド

AI 画像アナライザーの構築方法を知りたいですか? それなら、この記事を最後まで読んでください! AI アナライザーツールの構築方法を本当に簡単に紹介します。そのため、事前の知識はほとんど必要ありません。手順を追って説明し、Project IDX と Gemini API を使用します。つまり、何も設定する必要はありません。すべてクラウド上で行われます。準備ができたら、始めましょう!

私のYouTubeチャンネルをご覧ください

プロジェクトIDXを始める

最初のステップはとても簡単です。ウェブサイトを開く必要がありますidx.google.comまだ登録していない場合は、まず登録してください。登録すると、以下の画面が表示されます。

テンプレートを選択: Gemini API テンプレートを選択します。
プロジェクトに名前を付けます: 「test 2024」と呼びます。
環境の選択: JavaScript Web アプリケーション環境である「Vite」を選択します。
プロジェクトを作成します。[作成] ボタンを押します。

数分後、IDX がすべてを作成し、テンプレートファイルが表示されます。このファイルは自由に変更できます。

テンプレートの変更

これは index.html ファイルです。好きなように変更できますが、まずはこれを見てみましょう。初期テンプレートには必要なものがほぼすべて含まれています。このテンプレートは Gemini 1.5 フラッシュモデルを使用しているため、これで十分です。

APIキーの取得

ご覧のとおり、最初にAPIキーを取得する必要があるため、アプリケーションは最初は動作しません。Webサイトにアクセスしてください。 https://aistudio.google.com/app/apikey 、そこでキーを取得してください。APIキーを取得する方法の詳細な手順については、Project IDX に関する別のビデオをご覧ください。

キーを取得したら、それをコピーしてmain.jsファイルに移動します。プレースホルダーを API キーに置き換えます。

アプリケーションのテスト

アプリケーションが動作しているかどうか確認してみましょう。「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; });

アプリケーションは、以下のスクリーンショットのようになります。