2024-07

アプリ

Supabase + Next.jsアプリ開発(3)-認証機能

Supabaseで認証機能を実装してみます。Supabase + Next.jsアプリ開発(1)で紹介した以下のスクリプトでアプリを作ると、デフォルトでauth関係のフォルダとファイルが生成されますので今回はその内容を理解することに注力します。npx create-next-app -e with-supabaseこれでlocalhost:3000にアクセスすると、トップ画面の下方に以下が表示されます。この指示通り、Supabaseのプロジェクトを作り(作成済みのはず)、環境変数を.env.localにコピペしてリスタートすると、トップページが以下のように変わります。最初のユーザー登録をしろ、ということですのでやっていきます。supabaseのプロジェクトサイトに行って、SQL Editorで以下を実行しておきます。これでユーザー登録用のテーブルが準備されます。 select * from auth.users;localhost:3000/loginにアクセスすると、emailとpasswordでのユーザー登録が求められますので入力してSignUpします。すると登録したメールアドレス...
アプリ

Supabase + Next.jsアプリ開発(2)-ベクトルDB

各社の自社機密情報を参照するQ&Aチャットボットのようなアプリを想定します。ChatGPTのAPIを使用するとして、ChatGPTの学習データにはない各社機密情報についての回答をさせるには、RAG(Retrieval-Augmented Generation)という技術が使われます。詳細は割愛しますが、この技術を使うには「機密情報」を「ベクトル化(Embedding)」しておいて、ユーザーの要請に関連する情報をベクトル検索してChatGPTに提示してあげることが必要で、このアプリで使用するDBは「ベクトル」を扱えることが必須要件となります。幸いなことに、PostgreSQLにはpgvectorという拡張機能があり、Supabaseでも利用できるようになっています。このTopicではその辺りの設定について公式サイトを元に解説していきます。前回Topicで作成したSupabaseダッシュボードにて左メニューで「Database」を選択左メニューで「Extensions」を選択「Available extensions」から「vector」を探し、有効化以上の準備だけで「pgvector」が...
アプリ

Supabase + Next.jsアプリ開発(1)

アプリ開発においては、Googleが提供するFirebaseというBaaS(Backend as a Service)が有名ですが、最近Firebase代替を謳うSupabaseというオープンソースの名前をよく聞くようになっていました。Firebaseとの最も大きな違いは、オープンソースであることと、リレーショナルデータベース(RDBMS、SQL)であるPostgreSQLがベースであることが挙げられます(FirebaseのデータベースであるCloud FirestoreはNo SQLです)。一般にNo SQLの方が高速でスケール性が良いと言われますが、複雑なデータ構造には対応できなかったり、データの一貫性を保証しない、などのデメリットもあり、今でもデータベースと言えばRDBMSだろう、という風潮を感じます。というわけで、この際少し本気で勉強してみたいと思います。Supabaseに登録して、まずProjectを作ります。test_projectとしておきます。SQL Editorのページを選択すると右のような画面になりますので、SQLクエリでテーブルを作っていきます。テーブル名をmy_...
画像解析

手話解読アプリの要素技術(2)

アプリのゴールは、スマホカメラで手話を撮影し、汎用AIを使って手指骨格座標取得し、骨格座標を(オリジナル手話用AIモデル)を使って手話トークンに変換し、解読結果を文字情報や音声情報でリアルタイムにユーザーに返す、こととします。このTopicは、骨格座標データから手話トークンを推定するための(オリジナル手話用AIモデル)を構築する流れを紹介します。人物画像から骨格座標データを取得する方法はオープンソースでいくつか提供されていますが、このアプリではiOSに標準搭載されているVisionフレームワークを使っています。手指や体骨格の特徴点座標の取得に関しては以下の公式ビデオで紹介されています。Detect Body and Hand Pose with Vision(WWDC2020)VisionのHand Poseで、手の関節座標を取得できる。同時にBody Poseで骨格座標を取得することができるので、体骨格に対しての相対的な位置関係も取得できる。数フレーム分のデータを集めれば、手の位置、手の形、手の動きをデータ化することができる、と考えられます。なお実際にデータを取得するにはノウハウが必...
画像解析

手話解読アプリの要素技術(1)

受託開発で進めている手話解読アプリを構築する上での核となるアイデアを紹介します。手話を構成する要素としては、表情や口の動き等も欠かせない要素ではありますが、手の位置、手の形、手の動きが最も主要な要素と言えます。そしてこの3つの要素で表される手話最小単位(ここでは「手話トークン」と呼びます)が時間的にどのような順番で現れるかで、単語として、さらには文章としての意味を構成していると考えることができます。手話解読アプリを開発するにあたり、上述の流れを時間的に遡っていく方法で必要な要素技術を定義していくこととします。単語や文章を表現する最小単位を把握し「手話トークン」とする。手話動画から手話トークンに対応する動画を収集する。(手話から切り出していく)手話トークン動画に対して両手の特徴点座標(片手21点、両手42点)を取得する。(手の形とての位置を表すデータ)数フレーム分の上記特徴点座標データを1まとまりとしたデータをインプットとし、アウトプットを手話トークンとして機械学習する。機械学習したモデルをスマホに組み込み、リアルタイムで手話トークン検出する。検出された手話トークンの順番を元に単語や文章...