前の記事

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を！