NuxtHub で作る生成 AI アプリケーション

Transcript

1. NuxtHub で作る生成 AI アプリケーション Seiya KONNO - Z1 team, UNIBA INC. | 2024/11/05 きいてくれ NIGHT
2. アンケート - Vue.js 使ったことある人 - Nuxt を使ったことがある人 - Cloudflare Workers を使ったことがある人 - （Next.js / React を使っている人）
3. アジェンダ 1. NuxtHub とは 2. 作ったアプリのデモ 3. どうやって作ったか 4. 作ってみての課題 5. 質疑応答
4. NuxtHub とは Nuxt アプリを Cloudflare 上にホスティングするための仕組み - コマンドラインツール - Nuxt 用モジュール - 管理用ダッシュボード 紛らわしいけどいずれも NuxtHub と呼ばれてるので文脈で判断。Cloudflare 憑依 型ホスティングサービス。
5. NuxtHub とは これを使うとフルスタックの Nuxt アプリが簡単にデプロイできる！ - Cloudflare Workers - SQL Database (Cloudflare D1) - File Storage (Cloudflare R2) - Key-Value Storage - Workers AI - Vector Database 上記の機能を連携済みの Cloudflare アカウントに自動でプロビジョニング、 NuxtHub モジュールが提供する API 経由で操作。
6. 作ったアプリのデモ 入力したプロンプトに基づいて生成 AI を使って画像を生成するアプリ https://nuxthub-ai-image-generator.nuxt.dev/
7. どうやって作ったか: UI 編 - Nuxt UI + Tailwind CSS を使って UI を構築 - ここはふつうの Nuxt アプリを作る感覚で OK - 一般的な UI を作る場合は Nuxt UI が速い安い旨い - https://ui.nuxt.com/getting-started
8. どうやって作ったか: 画像生成編 - フロントエンドに入力されたプロンプトをサーバに送信 - hubAI() に学習モデルとプロンプトを渡して画像生成 - 今回使ったモデルは @cf/black-forest-labs/flux-1-schnell - 指定するパラメータが少なくて楽 - バリエーションを出すのは不向きっぽい - 生成した画像をホスティングするために hubBlob() を使って R2 に保存
9. どうやって作ったか: 画像生成編
10. どうやって作ったか: プロンプト生成編 - せっかくなのでプロンプトも生成 AI で作ってみる - こちらも hubAI() を使ってテキスト生成モデルとプロンプトを指定 - プロンプトはあらかじめ組み込んでおいたものを使用する
11. どうやって作ったか: プロンプト生成編
12. どうやって作ったか: プロンプト生成編 - パラメータのチューニングをしないと生成されるプロンプトに偏りが出た - 猫のプロントばかり出る - 今回調整したのは以下のパラメータ - top_k を増やす - top_p も増やす - temperature を上げる - 上げすぎるとめちゃくちゃな文章が生成されてしまうので 1 ぐらい に抑えた
13. どうやって作ったか: 保存編 - プロンプトと画像のパスを D1 にデータを保存 - 画像ファイル自体は R2 に保存済みのためパスのみ格納 - SQL で INSERT 文でも良いが今回は Drizzle ORM を使ってみた - Type Safe なのがうれしい
14. どうやって作ったか: 保存編 保存用のコード 取り出し用のコード
15. どうやって作ったか: ローカル開発＆デプロイ編 - ローカル開発は miniflare がランタイムとして起動 - ローカル用に別途開発環境を準備しなくても勝手にやってくれる - D1, R2, AI の動作もシミュレート - Nuxt DevTools がとても強力 - DB, KV, R2 に保存された値の参照・書き換えも可能 - NuxtHub のダッシュボードで GitHub repo を紐づけで自動デプロイ - push するごとにビルドしてユニークな URL を生成 - main ブランチに push で本番反映
16. 作ってみての課題 - 画像生成モデルが日本語のプロンプトを正しく取り扱えなかった - Flux-1-schnell モデルの限界？ - 画風のタッチを指定するプロンプトが英語だったから？ - 他のモデルなら日本語を取り扱えるかも - https://developers.cloudflare.com/workers-ai/models/ - 最近追加されたマイグレーション機能が正しく動かなかった - ローカル環境からリモート接続でマイグレーションで対応
17. Any Question?
18. - 何か思いついたら懇親会で質問してください！ - ソースコードも公開しときます - https://github.com/nulltask/nuxthub-ai-image-generator
19. Thank You.