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 画像アナライザーを構築するのは非常に簡単です。さまざまなアプリを作成できます。これはほんの一例です。この記事がお役に立ち、有益な情報になれば幸いです。ぜひ、下のコメント欄でフィードバックをお寄せください。 ありがとうございました。また次の記事でお会いしましょう！ :)

Read My Blog

Read My Stories

このオーディオは、ストーリーの元の言語で制作されています。

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

About Author

コメント

ラベル

この記事は

Related Stories

フォーラムからフィードへ: ソーシャルメディアアルゴリズムがデジタルインタラクションを形作る仕組み

タップして稼ぐ：テレグラムはソラナより先に次の100億人の暗号通貨ユーザーを獲得する可能性がある

HackerNoon ライティングコンテストで優勝したいですか? #crypto-api コンテスト優勝者のおすすめはこちら

ユニークなエコシステムを支えるビットコインUTXOのモデル

フォーラムからフィードへ: ソーシャルメディアアルゴリズムがデジタルインタラクションを形作る仕組み

タップして稼ぐ：テレグラムはソラナより先に次の100億人の暗号通貨ユーザーを獲得する可能性がある

HackerNoon ライティングコンテストで優勝したいですか? #crypto-api コンテスト優勝者のおすすめはこちら

ユニークなエコシステムを支えるビットコインUTXOのモデル

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps