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」
占ってみたい方、今週末のサイフラで展示します！
2024-07-26 Fri Night
