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

NuxtHub で作る生成 AI アプリケーション Seiya KONNO - Z1 team, UNIBA
INC. | 2024/11/05 きいてくれ NIGHT

アンケート - Vue.js 使ったことある人 - Nuxt を使ったことがある人 - Cloudflare Workers
を使ったことがある人 - （Next.js / React を使っている人）

アジェンダ 1. NuxtHub とは 2. 作ったアプリのデモ 3. どうやって作ったか 4. 作ってみての課題
5. 質疑応答

NuxtHub とは Nuxt アプリを Cloudflare 上にホスティングするための仕組み - コマンドラインツール - Nuxt
用モジュール - 管理用ダッシュボード紛らわしいけどいずれも NuxtHub と呼ばれてるので文脈で判断。Cloudflare 憑依型ホスティングサービス。

NuxtHub とはこれを使うとフルスタックの Nuxt アプリが簡単にデプロイできる！ - Cloudflare Workers - SQL
Database (Cloudflare D1) - File Storage (Cloudflare R2) - Key-Value Storage - Workers AI - Vector Database 上記の機能を連携済みの Cloudflare アカウントに自動でプロビジョニング、 NuxtHub モジュールが提供する API 経由で操作。

作ったアプリのデモ入力したプロンプトに基づいて生成 AI を使って画像を生成するアプリ https://nuxthub-ai-image-generator.nuxt.dev/

どうやって作ったか: UI 編 - Nuxt UI + Tailwind CSS を使って
UI を構築 - ここはふつうの Nuxt アプリを作る感覚で OK - 一般的な UI を作る場合は Nuxt UI が速い安い旨い - https://ui.nuxt.com/getting-started

どうやって作ったか: 画像生成編 - フロントエンドに入力されたプロンプトをサーバに送信 - hubAI() に学習モデルとプロンプトを渡して画像生成 - 今回使ったモデルは @cf/black-forest-labs/flux-1-schnell
- 指定するパラメータが少なくて楽 - バリエーションを出すのは不向きっぽい - 生成した画像をホスティングするために hubBlob() を使って R2 に保存

どうやって作ったか: 画像生成編

どうやって作ったか: プロンプト生成編 - せっかくなのでプロンプトも生成 AI で作ってみる - こちらも hubAI() を使ってテキスト生成モデルとプロンプトを指定
- プロンプトはあらかじめ組み込んでおいたものを使用する

どうやって作ったか: プロンプト生成編

どうやって作ったか: プロンプト生成編 - パラメータのチューニングをしないと生成されるプロンプトに偏りが出た - 猫のプロントばかり出る - 今回調整したのは以下のパラメータ - top_k
を増やす - top_p も増やす - temperature を上げる - 上げすぎるとめちゃくちゃな文章が生成されてしまうので 1 ぐらいに抑えた

どうやって作ったか: 保存編 - プロンプトと画像のパスを D1 にデータを保存 - 画像ファイル自体は R2 に保存済みのためパスのみ格納
- SQL で INSERT 文でも良いが今回は Drizzle ORM を使ってみた - Type Safe なのがうれしい

どうやって作ったか: 保存編保存用のコード取り出し用のコード

どうやって作ったか: ローカル開発＆デプロイ編 - ローカル開発は miniflare がランタイムとして起動 - ローカル用に別途開発環境を準備しなくても勝手にやってくれる - D1,
R2, AI の動作もシミュレート - Nuxt DevTools がとても強力 - DB, KV, R2 に保存された値の参照・書き換えも可能 - NuxtHub のダッシュボードで GitHub repo を紐づけで自動デプロイ - push するごとにビルドしてユニークな URL を生成 - main ブランチに push で本番反映

作ってみての課題 - 画像生成モデルが日本語のプロンプトを正しく取り扱えなかった - Flux-1-schnell モデルの限界？ - 画風のタッチを指定するプロンプトが英語だったから？ - 他のモデルなら日本語を取り扱えるかも
- https://developers.cloudflare.com/workers-ai/models/ - 最近追加されたマイグレーション機能が正しく動かなかった - ローカル環境からリモート接続でマイグレーションで対応

Any Question?

- 何か思いついたら懇親会で質問してください！ - ソースコードも公開しときます - https://github.com/nulltask/nuxthub-ai-image-generator

Thank You.

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

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

Seiya Konno

More Decks by Seiya Konno

Other Decks in Programming

Featured

Transcript