2024-05-23
AI活用、画像が読めるAPIを使って、年齢、性別、職業、ラッキーアイテムを推測してもらうアプリ「うらなうかがみさん」を作りました。


AIへの質問は画像に添えて「この画像の人物の年齢、性別、職業とラッキーアイテムをラフな占い師っぽい感じで回答してね」と書いただけ。割といい感じに回答してくれました。

具体的なプログラムはこんな感じです。 divtext.textContent = cnt + "人、見えました。年齢、性別、職業とラッキーアイテムを占ってみます!"; const imgbin = canvas2jpeg(res.image); const prompt = "この画像の人物の年齢、性別、職業とラッキーアイテムをラフな占い師っぽい感じで回答してね"; const param = { imgbin, prompt }; fetchCBOR("/api/imagerecog", param).then(res => { console.log(res); divtext.textContent = res + " (powered by GPT4o/OpenAI)"; }); ブラウザ上で動くAIライブラリ、MediaPipeのFaceMeshを使って、人数の把握をし、変化があった時にAIへリクエストを投げています。(参考、リアルとサイバーをつなぐAI技術、MediaPipeのFaceMeshを使ってリアルタイム顔形状認識


「code4fukui/uranaukagami」

うらなうかがみさんはオープンソース。OpenAI社のAPIキーを取得して、設定すれば動かせます。

サーバーを使うとできることが広がって楽しいWebアプリ。よりシンプルに開発できる serveWeb.js/wsutil を準備しました。 import { serveWeb } from "https://code4fukui.github.io/wsutil/serveWeb.js"; import { fetchImageRecog } from "https://code4fukui.github.io/openai-imagerecog/fetchImageRecog.js" serveWeb(async (param, req, path, conn) => { if (path == "/api/imagerecog") { const res = await fetchImageRecog(param.imgbin, param.prompt); return res; } return null; }); API処理用関数をパラメータにserveWebを呼ぶだけ、staticディレクトリ内が静的コンテンツとする、スタンダードなAPIサーバー付きのサーバーサイドアプリのできあがり!


「CyberFriday」

占ってみたい方、今週末のサイフラで展示します!

Tweet
クリエイティブ・コモンズ・ライセンス
本ブログの記事や写真は「Creative Commons — CC BY 4.0」の下に提供します。記事内で紹介するプログラムや作品は、それぞれに記載されたライセンスを参照ください。
CC BY / @taisukef / アイコン画像 / プロフィール画像 / 「一日一創」画像 / RSS