前の記事
TL;DR
- にじボイス（旧DMMボイス）の読み上げがリーズナブルで精度もいい感じだよ
- GitHub Copilot＋Node.jsで、読み上げ機能付きのチャットアプリを作るよ
- データベースはCloudflare D1、ストレージはCloudflare R2を使うよ
- OpenWebUIとの接続にはCloudflare Tunnelを使うよ
- みんなも推しを錬成しよう！Cloudflare大好き！！
はじめに
ChatGPTがリリースされたばかりのころ、なりきりチャットが流行りましたね。
今回はおうちLLMになりきりチャットをさせて、好きな声で読み上げてもらうアプリを作っていきます。
にじボイスAPIについて
にじボイスAPIは、AI技術を活用した音声生成プラットフォーム「にじボイス」の高品質な音声生成機能を、APIとして提供するサービスです。多彩なボイスモデルからキャラクターを選択し、テキストを入力するだけで、感情豊かな音声を簡単に生成できます。これにより、ドラマティックなシーンのアフレコや心に響くナレーションなど、幅広い用途で活用可能です。
特徴：
- 多彩なボイスモデル：さまざまなキャラクターの声を選択可能
- 簡単な操作：テキスト入力だけで音声生成が可能
- 感情表現：感情豊かな音声を生成
- API提供：システムやアプリケーションへの統合が容易
- 幅広い用途：アフレコ、ナレーションなど多様なシーンで活用可能
他にも様々な読み上げサービスがありますが、選べる話者が豊富なこと、読み上げが自然であること、1文字あたりのAPI単価が安いことから、今回はにじボイスAPIを採用しました。
気になる方はフリープランに登録すれば、ブラウザで読み上げを試せます。
システム構成
以下の内容でアプリを作成しました。
- フロントエンドとバックエンドはNode.js + Express.jsで作成
- データベースは開発用にローカルのSQLite、本番用にCloudflare D1を使用
- 音声読み上げにはにじボイスAPIを使用
- 取得した読み上げ音声のデータはS3互換ストレージのCloudFlare R2に保管し、ライフサイクルで適当に削除
- バックエンド→OpenWebUI ChatAPIとの通信、ユーザ→フロントエンドとの通信はCloudflare ZeroTrust(Access)を使用
- フロントエンドの認証はCloudflare Accessに任せる（SSO）
- CORS,CSP,レートリミット制限,ペイロード暗号化等の基本的なセキュリティ対策を行う
機能定義
- チャット履歴の保存機能
- システムプロンプトの設定機能
- にじボイスAPIのキャラクタ一覧の表示、タグ別フィルタ
- キャラクターテンプレートの保存（システムプロンプト、読み上げパラメータ）
- テーマ切り替え機能（ライト・ダークモード）
各技術について
Node.js
Node.jsは、ChromeのV8 JavaScriptエンジン上に構築された非同期・イベント駆動型のサーバーサイド環境。軽量かつスケーラブルなアプリケーションの開発に適している。
特徴:
- 非同期I/Oによる高速な処理
- シングルスレッドながらイベントループで効率的な並行処理
- 豊富なNPMパッケージエコシステム
- JavaScriptをフルスタックで利用可能
Express.js
Express.jsは、Node.js向けの軽量なWebアプリケーションフレームワークであり、シンプルなルーティングやミドルウェアを提供する。
特徴:
- 軽量かつ柔軟な設計
- 直感的なルーティングシステム
- 多数のミドルウェアとの互換性
- REST APIやMVCアーキテクチャの構築が容易
Cloudflare ZeroTrust
Cloudflare ZeroTrustは、従来のVPNに代わるゼロトラストセキュリティモデルを提供し、すべてのリクエストを認証・検査することで安全なアクセスを実現する。
特徴:
- ネットワークの境界を問わないゼロトラストセキュリティ
- VPN不要でリモートワークに適応
- IDプロバイダーとの統合によるシングルサインオン（SSO）
- ポリシーベースのアクセス制御
Cloudflare Access
Cloudflare Accessは、特定のアプリやリソースへのアクセスを認証・制御するツールで、ゼロトラストモデルの一部として機能する。
特徴:
- ユーザーごとのアクセス制御（RBAC）
- 主要なIDプロバイダー（Google、Azure ADなど）と統合
- IPアドレス制限やMFAによる強固な認証
- ログ記録と監査機能
Cloudflare D1
Cloudflare D1は、Cloudflare Workersと統合可能なサーバーレスなSQLite互換のデータベースサービス。
特徴:
- SQLite互換でシンプルなデータベース管理
- Cloudflare Workersと統合してサーバーレスアプリを実現
- スケーラブルかつグローバル分散対応
- クエリのレスポンスが高速
Cloudflare R2
Cloudflare R2は、AWS S3互換のオブジェクトストレージで、データ転送費用ゼロの特徴を持つ。
特徴:
- AWS S3互換のAPIを提供
- データ取り出し時の転送料金が無料
- グローバルに分散されたストレージ
- Cloudflare Workersと連携してサーバーレス処理が可能
ちなみにCloudflare関係のサービスに関してはすべて無料枠で構築しています。
Cloudflareだいすき！！！！！！！！
コーディング
殆どの作業はCopilot君が行ってくれました。放送大学に入っているのでCopilot Proを使えます。学生バンザイ！
コードがちょっと汚すぎるので人には見せられません。。
今回は自前サーバでの稼働を行います。
できたもの
こんなんできました。
おわりに
普段はPHPやC#ばかり書いていますが、Copilotのお陰で割と形になるアプリを作ることができました。
これを読んでくれてた方々も、是非何か面白いアプリを作ってみてください。
みなさま、良きLLMを！