2 7月 8:58 am

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

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

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

プロジェクトIDXを始める

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

プロジェクトIDXを始める

テンプレートを選択: 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 に関する別のビデオをご覧ください。

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

APIキーの取得

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

アプリケーションが動作しているかどうか確認してみましょう。「Go」を押して、Gemini が返す結果を確認します。

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

ご覧のとおり、Gemini は写真の中にあるものを理解し、この種のパンを焼くためのレシピをいくつか提案します。このアプリケーションはすでにサーバー上にあるため、リンクを共有したり、ブラウザでこのアプリケーションを開いたりすることができます。

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

URL はまだ美しくありませんが、すべてが機能していることは確認でき、このリンクをパートナーや同僚と共有できます。

画像アップロード機能の追加

AI 画像アナライザーを完成させるには、独自の画像を追加できるようにする必要があります。テンプレートにいくつか調整を加えてみましょう。まずは index.html ファイルです。

アプリケーション名を変更します。「AI Image Analyzer」と呼びます。
HTML を削除します。定義済みの画像を削除します。14 行目から 27 行目まで。

画像をアップロードするための入力フィールドを追加します。15行目

入力名のプロンプト値を「この画像について何でも質問してください」に変更します。

結果の HTML は以下の図のようになります。

結果のHTML

JavaScriptの更新

ファイルを読み取るためのJavaScriptコードを定義する必要があります。 メイン.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;
   });

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

AI画像アナライザー