おひとり様LLMをしよう！（自作読み上げチャットアプリ偏）

前の記事

https://qiita.com/azsoft-jp/items/7f9544ebd5dc6f82e7c1

## TL;DR

- にじボイス（旧DMMボイス）の読み上げがリーズナブルで精度もいい感じだよ
- GitHub Copilot＋Node.jsで、読み上げ機能付きのチャットアプリを作るよ
- データベースはCloudflare D1、ストレージはCloudflare R2を使うよ
- OpenWebUIとの接続にはCloudflare Tunnelを使うよ
- みんなも推しを錬成しよう！Cloudflare大好き！！



## はじめに
ChatGPTがリリースされたばかりのころ、なりきりチャットが流行りましたね。
今回はおうちLLMになりきりチャットをさせて、好きな声で読み上げてもらうアプリを作っていきます。

## にじボイスAPIについて

https://nijivoice.com/#feature

にじボイスAPIは、AI技術を活用した音声生成プラットフォーム「にじボイス」の高品質な音声生成機能を、APIとして提供するサービスです。多彩なボイスモデルからキャラクターを選択し、テキストを入力するだけで、感情豊かな音声を簡単に生成できます。これにより、ドラマティックなシーンのアフレコや心に響くナレーションなど、幅広い用途で活用可能です。

特徴：
- **多彩なボイスモデル**：さまざまなキャラクターの声を選択可能
- **簡単な操作**：テキスト入力だけで音声生成が可能
- **感情表現**：感情豊かな音声を生成
- **API提供**：システムやアプリケーションへの統合が容易
- **幅広い用途**：アフレコ、ナレーションなど多様なシーンで活用可能



他にも様々な読み上げサービスがありますが、選べる話者が豊富なこと、読み上げが自然であること、1文字あたりのAPI単価が安いことから、今回はにじボイスAPIを採用しました。

気になる方はフリープランに登録すれば、ブラウザで読み上げを試せます。

https://app.nijivoice.com/


## システム構成

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556322/31c6d0f0-eb1a-40e1-9d6f-5a185a74c8b9.png)

以下の内容でアプリを作成しました。
- フロントエンドとバックエンドは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だいすき！！！！！！！！

## コーディング

https://docs.github.com/ja/copilot/about-github-copilot/subscription-plans-for-github-copilot

殆どの作業はCopilot君が行ってくれました。放送大学に入っているのでCopilot Proを使えます。学生バンザイ！

コードがちょっと汚すぎるので人には見せられません。。
今回は自前サーバでの稼働を行います。

## できたもの
こんなんできました。

<iframe width="560" height="315" src="https://www.youtube.com/embed/RZwsI3N4AMA?si=Yzfd-JEkufmICmj0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>


## おわりに
普段はPHPやC#ばかり書いていますが、Copilotのお陰で割と形になるアプリを作ることができました。
これを読んでくれてた方々も、是非何か面白いアプリを作ってみてください。

みなさま、良きLLMを！