@kenmaroです。
普段は主に秘密計算、準同型暗号などの記事について投稿しています。
秘密計算に関連するまとめの記事に関しては以下をご覧ください。

秘密計算エンジニアを始めて２年半が経った。

秘密計算エンジニアを始めて3年が経った。

忙しい人のために最初に宣伝

この度我々が個人開発する「YorimichiApp」はAndroid版を正式リリースしました。

アンドロイドユーザの方は、ぜひこちらからアプリをダウンロードしてみてください。

また、iOSユーザの方でまだダウンロードしていない人は、ぜひこちらからどうぞ。

また、アプリ紹介のためのランディングページはこちらから。

この記事の概要

この記事は、

この記事の続きとなります。

基本的には、このモックアップで行ったコードを

ここにプッシュしました、というだけです。

簡単ではありますがレポジトリの内容を少しだけ書き留めておきます。

レポジトリの内容

Nextjs, Tensorflowjs　を用いて、
SafieAPIを用いて取得した画像に対して、クライアントサイドで物体検出のAI推論を実行するモックアップです。
取得した画像をCanvasに表示したりするところは多くの場面で使いまわせると思います。
アプリケーションによって、適用するモデルの種類を変えたりすればいろいろな面白いことができそうですね。
また、Tensorflowjsを用いることで、クライアントサイドでAIを使えるため、わざわざPythonなどのバックエンドを構築しなくて良いですし、非常に構成がコンパクトになって良い気がしました。


yarn install
yarn dev

を実行すると、以下の画面が見えます。

FrontCamera

FrontCamera はテストのために、
PCのフロントカメラから動画を取得してCanvasに描画、
その動画のフレームに対してTensorflowjsを用いてクライアントサイドで物体検知を行います。

SafieCamera

SafieCamera の方は、safie APIの画像取得APIを使うことで、
Safie カメラで取得した画像に対して同じようにクライアントサイドで物体検知を行います。

注意点

大体のことはコードをそのまま見てもらえるとそのまま転用できると思いますが、
Safie APIを呼ぶのはバックエンド、つまり　Nextjs において　api/
でAPIを呼ぶ必要があります、そうしないとCOR問題が発生しました。

api/ai_safie.ts

export default async function handler(req: NextApiRequest, res: NextApiResponse) {

    console.log('here1')
    res.setHeader('Content-Type', 'image/jpeg')

    var instance = axios.create({
      'responseType': 'arraybuffer',
      'headers': {
        'Content-Type': 'image/jpeg'
      }
  });

    const tmp = await axios.get('https://openapi.safie.link/v1/devices/xxxxxxxxxxxxxx/image', { // xxxxxxxxxxx にデバイスIDを書く
        headers: {
            Authorization: `Bearer yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy`, // yyyyyyyyyyyy にbaarer トークンを書く

        },
        responseType: "arraybuffer"
    })

    
    console.log('here2')
    console.log(tmp);

    // res.setHeader('Content-Length', tmp.data)
    //res.send(base64Encode(tmp.data))
    res.send(base64Encode(tmp.data))
    res.status(200).end()


}

上の箇所がAPIを読んで画像を取得していること路ですが、2ヶ所のコメントのところに自分のデバイスのID,
及び取得したtokenを記載すると、うまく画像取得ができるかと思います。

最後に

簡単ではありましたが、このように

Nextjs, Tensorflowjs　を用いて、
SafieAPIを用いて取得した画像に対して、クライアントサイドで物体検出のAI推論を実行するモックアップ

を簡単に作った時のコードを公開したので、使いまわせるところは使いまわせたらなと思っています。

今回はこの辺で。

@kenmaro