正直に言うと、猫を扱うこと以外に生成 AI の用途はあるでしょうか? Google の Gemini AI の発表に関する私の 読んだ方は、写真に写っている猫の種類を識別するように求めるテスト プロンプトを見たことがあるかもしれません。 前回の投稿を  API の実際の動作例として、これを適切な Web アプリケーションに変換することにしました。これが私が思いついたものです。 フロントエンド フロントエンドでは、ネイティブ Web プラットフォーム機能を利用して、単純な HTML フォーム フィールドを介してユーザーのカメラにアクセスすることにしました。  タグで を使用すると、デバイスのカメラに直接アクセスできます。 input capture="camera" これを行うにはさらに高度な方法がありますが、手早く簡単に行うには、これで問題なく機能します。さらに良いことに、デスクトップでは単にファイル セレクターとして機能します。 私の考えは、(カメラまたはファイル選択のいずれかを介して) 画像を取得し、画像を表示し、それをバックエンドに送信する方法を提供することでした。信じられないほどシンプルでバニラの JS でも問題ありませんでしたが、私は対話機能のために を使用しました。 Alpine.js まず、HTML は画像の UI、画像を表示する場所、結果を表示する別の場所を提供する必要があります。   <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="app.css"> <title></title> </head> <body> <h2>🐈 Detector</h2> <div x-data="catDetector"> <input type="file" capture="camera" accept="image/*" @change="gotPic" :disabled="working"> <template x-if="imageSrc"> <p> <img :src="imageSrc"> </p> </template> <div x-html="status"></div> </div> <script defer src="https://unpkg.com/alpinejs@3.xx/dist/cdn.min.js"></script> <script src="app.js"></script> </body> </html> さて、JavaScript の話に移りましょう。どのように失敗したかを説明するよりも簡単なので、最初のバージョンを共有することから始めます。最初に必要なのは、ファイルが選択されたとき、または写真が撮影されたときにそれを通知し、それを DOM にレンダリングすることだけでした。  (表示サイズを抑えるために、ここでは共有されていない CSS を少し使用しました。これについては後ほど詳しく説明します。) また、base64 バージョンのファイルをサーバー側のコードに送信する必要がありました。初期バージョンは次のとおりです。   //const IMG_FUNC = 'http://localhost:8787/'; const IMG_FUNC = 'https://catdetector.raymondcamden.workers.dev'; document.addEventListener('alpine:init', () => { Alpine.data('catDetector', () => ({ imageSrc:null, working:false, status:'', async init() { console.log('init'); }, async gotPic(e) { let file = e.target.files[0]; if(!file) return; let reader = new FileReader(); reader.readAsDataURL(file); reader.onload = async e => { this.imageSrc = e.target.result; this.working = true; this.status = '<i>Sending image data to Google Gemini...</i>'; let body = { imgdata:this.imageSrc } let resp = await fetch(IMG_FUNC, { method:'POST', body: JSON.stringify(body) }); let result = await resp.json(); this.working = false; this.status = result.text; } } })) });   メソッドは、  フィールドが イベントを起動するたびに起動されます。使用されるファイル/画像を取得し、データ URL (base64) として読み取り、DOM 内の画像に割り当ててサーバーに送信します。シンプルで素敵ですよね？ gotPic input onchange デスクトップではすべて問題なく動作していましたが、カメラを Samsung S22 Ultra Magnus Extreme 200 Camera Lens Edition (正式名ではありません) に切り替えると、送信するデータが多すぎると Google の API が警告するという問題に遭遇しました。そのとき、私のカメラは 詳細な写真を撮るので、送信する前に画像のサイズを変更する必要があることを思い出しました。 非常に すでに CSS でサイズ変更していましたが、明らかに、それは サイズを変更するのと同じではありません。 ImageKit のサイトで次の優れた記事を見つけました:  この記事では、HTML  要素を使用してサイズ変更を行う方法について説明します。 実際に Javascript で画像のサイズを変更するには? canvas 私はおそらく 10 年近く Canvas を使用していませんでしたが、そのコードをフロントエンドに十分に再利用することができました。   //const IMG_FUNC = 'http://localhost:8787/'; const IMG_FUNC = 'https://catdetector.raymondcamden.workers.dev'; // Resize logic: https://imagekit.io/blog/how-to-resize-image-in-javascript/ const MAX_WIDTH = 400; const MAX_HEIGHT = 400; document.addEventListener('alpine:init', () => { Alpine.data('catDetector', () => ({ imageSrc:null, working:false, status:'', async init() { console.log('init'); }, async gotPic(e) { let file = e.target.files[0]; if(!file) return; let reader = new FileReader(); reader.readAsDataURL(file); reader.onload = async e => { let img = document.createElement('img'); img.onload = async e => { let width = img.width; let height = img.height; if(width > height) { if(width > MAX_WIDTH) { height = height * (MAX_WIDTH / width); width = MAX_WIDTH; } } else { if (height > MAX_HEIGHT) { width = width * (MAX_HEIGHT / height); height = MAX_HEIGHT; } } let canvas = document.createElement('canvas'); canvas.width = width; canvas.height = height; let ctx = canvas.getContext('2d'); ctx.drawImage(img, 0, 0, width, height); this.imageSrc = canvas.toDataURL(file.type); this.working = true; this.status = '<i>Sending image data to Google Gemini...</i>'; let body = { imgdata:this.imageSrc } let resp = await fetch(IMG_FUNC, { method:'POST', body: JSON.stringify(body) }); let result = await resp.json(); this.working = false; this.status = result.text; }; img.src = e.target.result; } } })) }); コードが幅と高さの両方に最大寸法を使用し、同じアスペクト比を維持しながらサイズ変更を正しく処理していることがわかります。繰り返しになりますが、  のブログ投稿に感謝します。 Manu Chaudhary この変更の最終的な結果として、はるかに小さいイメージをバックエンド サービスに送信するようになり、いよいよそれを確認する時が来ました。 バックエンド バックエンドには、  再度使用することにしました。以前に NPM パッケージと私のデモでいくつかの問題が発生したため、少し躊躇していましたが、今回は問題はありませんでした。 を覚えていると思いますが、Google の AI Studio を使用すると、プロンプトからサンプル コードを簡単に出力できるため、私がしなければならなかったのは、それを Cloudflare Worker に組み込むことだけでした。 Cloudflare Workers を 前回の投稿 コード全体は次のとおりです。   const { GoogleGenerativeAI, HarmCategory, HarmBlockThreshold, } = require("@google/generative-ai"); const MODEL_NAME = "gemini-pro-vision"; export default { async fetch(request, env, ctx) { const API_KEY = env.GEMINI_KEY; console.log('begin serverless logic'); const corsHeaders = { "Access-Control-Allow-Origin": "*", "Access-Control-Allow-Methods": "GET,HEAD,POST,OPTIONS", "Access-Control-Max-Age": "86400", }; let { imgdata } = await request.json(); imgdata = imgdata.replace(/data:.*?;base64,/, ''); const genAI = new GoogleGenerativeAI(API_KEY); const model = genAI.getGenerativeModel({ model: MODEL_NAME }); const generationConfig = { temperature: 0.4, topK: 32, topP: 1, maxOutputTokens: 4096, }; const safetySettings = [ { category: HarmCategory.HARM_CATEGORY_HARASSMENT, threshold: HarmBlockThreshold.BLOCK_MEDIUM_AND_ABOVE, }, { category: HarmCategory.HARM_CATEGORY_HATE_SPEECH, threshold: HarmBlockThreshold.BLOCK_MEDIUM_AND_ABOVE, }, { category: HarmCategory.HARM_CATEGORY_SEXUALLY_EXPLICIT, threshold: HarmBlockThreshold.BLOCK_MEDIUM_AND_ABOVE, }, { category: HarmCategory.HARM_CATEGORY_DANGEROUS_CONTENT, threshold: HarmBlockThreshold.BLOCK_MEDIUM_AND_ABOVE, }, ]; const parts = [ {text: "Look at this picture and if you see a cat, return the breed of the cat."}, { inlineData: { mimeType: "image/jpeg", data: imgdata } } ]; console.log('calling google'); const result = await model.generateContent({ contents: [{ role: "user", parts }], generationConfig, safetySettings, }); const response = result.response; let finalResult = { text: response.text() }; return new Response(JSON.stringify(finalResult), { headers: {...corsHeaders}}); }, }; コードの大部分は AI Studio エクスポートからのボイラープレートです。ただし、ワーカーに POST された情報から画像データを取得する点は異なります。特に注意したいのは、次のプロンプトです。   Look at this picture and if you see a cat, return the breed of the cat. 最初は、JSON で結果を取得し、画像が猫でない場合は空の文字列を返すように努めました。しかし、その後、素晴らしいことに気づきました。ジェミニは猫以外の写真を うまく処理しました。みたいな…衝撃的に良い。 非常に 実際、アプリが単に「猫ではありません」と言うだけでなく、それが何であるかを説明してくれるのは本当にありがたかったです。明らかに、このようなアプリケーションには両方のスタイルを採用する余地がありますが、私は Google の詳細で有益な回答をそのままにしました。 さて、お楽しみは結果です。 結果 まずは猫の写真から始めましょう。 まずは、太っていない、ジャバ・ザ・ハットに全く似ていない私のお気に入りの猫、ブタです。  続いてルナちゃんの写真です。この場合、品種は間違っていますが、少なくともそれに近いものです。  さて、Google に変化球を投げてみましょう。  これには 驚きました。この説明は 100% 正確で、正直に言うと、もし私がこの絵を知らずに見ていたら、それをじょうろではなく猫の彫刻だと認識したでしょう。つまり、それはある意味 のことだと思いますが、正直なところ、自分では気づかなかったと思います。 本当に 当然 さあ、完全に夢中になってみましょう:  はい、そうです、Googleです。 AIが生成した猫の画像はどうでしょうか？  それをうまく処理できたと思います。 次...  はい、ビッグフットですよ。考えてみてください、ビッグフットの「研究者」は全員引退して、トレイルカメラを AI に接続するだけで済むかもしれません。  言わなければならないのは、Google がシリーズだけでなく実際のキャラクターも認識していたことに感心しているということですが、公平を期すために言うと、スケルターはかなり独特の見た目をしています。 そして最後に、私は（もちろん不公平ですが）私の猫をジャバと比較したので、それがどのように扱われるかを見てみましょう:  ああ、もう終わったと言いましたが、もちろん犬をテストしなければなりませんでした。  頑張れ、ジェミニ。残念ながら、私はこのデモをライブでホストするつもりはありません（コード前半の Cloudflare の「ライブ」URL は機能しません）が、コードを共有することはできます。

My Blog

Buy Me a Coffee

Read My Stories

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

長すぎる; 読むには

Make resilience your competitive advantage

生成 AI を使用して猫の品種を検出してみた: その様子は次のとおりです

About Author

コメント

ラベル

この記事は

Related Stories

AI の力を解き放つ。最先端技術の体系的レビュー: 概要と序論

目に見えない層: ユーザーインタビューがかけがえのない資産である理由

暗号通貨の成長: 効果的なユーザーペルソナの作成

ユーザー中心の暗号通貨製品の作成: 顧客からのフィードバックの重要性

AI の力を解き放つ。最先端技術の体系的レビュー: 概要と序論

目に見えない層: ユーザーインタビューがかけがえのない資産である理由

暗号通貨の成長: 効果的なユーザーペルソナの作成

ユーザー中心の暗号通貨製品の作成: 顧客からのフィードバックの重要性

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps