Merge pull request #261 from tegnike/develop

本番リリース

.env

@@ -144,3 +144,6 @@ NEXT_PUBLIC_SYSTEM_PROMPT=""
 
 # Selected VRM
 NEXT_PUBLIC_SELECTED_VRM_PATH=""
+
+# Whether to include timestamp in user message (true or false)
+NEXT_PUBLIC_INCLUDE_TIMESTAMP_IN_USER_MESSAGE=""

.env.example

@@ -135,3 +135,6 @@ NEXT_PUBLIC_SYSTEM_PROMPT=""
 
 # Selected VRM
 NEXT_PUBLIC_SELECTED_VRM_PATH=""
+
+# Whether to include timestamp in user message (true or false)
+NEXT_PUBLIC_INCLUDE_TIMESTAMP_IN_USER_MESSAGE=""

README.md

@@ -39,6 +39,20 @@
 
 [![今日からあなたもAITuberデベロッパー｜ニケちゃん](https://github.com/tegnike/aituber-kit/assets/35606144/a958f505-72f9-4665-ab6c-b57b692bb166)](https://note.com/nike_cha_n/n/ne98acb25e00f)
 
+## ⚠️ セキュリティに関する重要な注意事項
+
+このリポジトリは、個人利用やローカル環境での開発はもちろん、適切なセキュリティ対策を施した上での商用利用も想定しています。ただし、Web環境にデプロイする際は以下の点にご注意ください：
+
+- **APIキーの取り扱い**: バックエンドサーバーを経由してAIサービス（OpenAI, Anthropic等）やTTSサービスのAPIを呼び出す仕様となっているため、APIキーの適切な管理が必要です。
+
+### 本番環境での利用について
+
+本番環境で利用する場合は、以下のいずれかの対応を推奨します：
+
+1. **バックエンドサーバーの実装**: APIキーの管理をサーバーサイドで行い、クライアントからの直接的なAPIアクセスを避ける
+2. **利用者への適切な説明**: 各利用者が自身のAPIキーを使用する場合は、セキュリティ上の注意点について説明する
+3. **アクセス制限の実装**: 必要に応じて、適切な認証・認可の仕組みを実装する
+
 ## 開発環境
 
 このプロジェクトは以下の環境で開発されています：
@@ -84,7 +98,7 @@ npm run dev
 
 ### 使用方法
 
-1. 設定画面で各種LLMのAPIキーを入力します。
+1. 設定画面で選択したLLMのAPIキーを入力します。
    - OpenAI
    - Anthropic
    - Google Gemini
@@ -108,6 +122,7 @@ npm run dev
    - ElevenLabs: 様々な言語の選択が可能です。APIキーの入力が必要です。
    - OpenAI: APIキーの入力が必要です。
    - Azure OpenAI: APIキーの入力が必要です。
+   - にじボイス: APIキーの入力が必要です。
 5. 入力フォームからキャラクターと会話を開始します。マイク入力も可能です。
 
 ## AITuber配信
@@ -302,77 +317,3 @@ npm run dev
 
 - [ロゴの利用規約](./docs/logo_licence.md)
 - [VRMモデルの利用規約](./docs/vrm_licence.md)
-
-## コントリビューター用TIPS
-
-### 新しい言語の追加方法
-
-新しい言語をプロジェクトに追加するには、以下の手順に従ってください。
-
-1. **言語ファイルの追加**:
-
-   - `locales` ディレクトリに新しい言語のディレクトリを作成し、その中に `translation.json` ファイルを作成します。
-   - 例: `locales/fr/translation.json` (フランス語の場合)
-
-2. **翻訳の追加**:
-
-   - `translation.json` ファイルに、既存の言語ファイルを参考にして翻訳を追加します。
-
-3. **言語設定の更新**:
-
-   - `src/lib/i18n.js` ファイルを開き、`resources` オブジェクトに新しい言語を追加します。
-
-   ```javascript:src/lib/i18n.js
-   resources: {
-     ...,
-     fr: {  // 新しい言語コード
-       translation: require("../../locales/fr/translation.json"),
-     },
-   },
-   ```
-
-4. **言語選択オプションの追加**:
-
-   - ユーザーが言語を選択できるように、UIの適切な部分（例えば設定画面の言語選択ドロップダウン）に新しい言語オプションを追加します。
-
-   ```typescript:src/components/settings.tsx
-   <select>
-     ...,
-     <option value="FR">フランス語 - French</option>
-   </select>
-   ```
-
-5. **テスト**:
-   - 新しい言語でアプリケーションが正しく表示されるかテストします。
-
-これで新しい言語のサポートがプロジェクトに追加されます。
-
-#### 音声言語コードの追加
-
-- 音声言語コードの対応も追加する必要があります。
-- `Introduction` コンポーネント内の `getVoiceLanguageCode` 関数に新しい言語コードを追加します。
-
-```typescript:nike-ChatVRM/src/components/introduction.tsx
-const getVoiceLanguageCode = (selectLanguage: string) => {
-  switch (selectLanguage) {
-    case 'JP':
-      return 'ja-JP';
-    case 'EN':
-      return 'en-US';
-    case 'ZH':
-      return 'zh-TW';
-    case 'zh-TW':
-      return 'zh-TW';
-    case 'KO':
-      return 'ko-KR';
-    case 'FR':
-      return 'fr-FR';
-    default:
-      return 'ja-JP';
-  }
-}
-```
-
-#### READMEの追加
-
-- 新しい言語のREADME (`README_fr.md`), ロゴ利用規約 (`logo_licence_fr.md`), VRMモデル利用規約 (`vrm_licence_fr.md`) を `docs` ディレクトリに追加してください。

docs/README_en.md

@@ -40,6 +40,20 @@ I've written a detailed usage guide in the article below:
 
 [![You are AITuber Developer from Today | Nike-chan](https://github.com/tegnike/aituber-kit/assets/35606144/a958f505-72f9-4665-ab6c-b57b692bb166)](https://note.com/nike_cha_n/n/ne98acb25e00f)
 
+## ⚠️ Important Security Notice
+
+This repository is designed for personal use, local development, and commercial use with appropriate security measures. However, please note the following points when deploying to a web environment:
+
+- **API Key Handling**: Since the specification requires API calls to AI services (OpenAI, Anthropic, etc.) and TTS services through a backend server, proper management of API keys is necessary.
+
+### Regarding Production Environment Usage
+
+When using in a production environment, we recommend one of the following approaches:
+
+1. **Backend Server Implementation**: Manage API keys on the server side and avoid direct API access from clients
+2. **Proper User Instructions**: When users use their own API keys, explain the security considerations
+3. **Access Control Implementation**: Implement appropriate authentication and authorization mechanisms as needed
+
 ## Development Environment
 
 This project is developed in the following environment:
@@ -109,6 +123,7 @@ npm run dev
    - ElevenLabs: Various language selection is possible. Please enter the API key.
    - OpenAI: API key is required.
    - Azure OpenAI: API key is required.
+   - Nijivoice: API key is required.
 5. Start conversing with the character from the input form. Microphone input is also possible.
 
 ## AITuber Streaming
@@ -303,82 +318,3 @@ From version v2.0.0, this project adopts a **custom license**.
 
 - [Logo Usage Agreement](./logo_licence_en.md)
 - [VRM Model Usage Agreement](./vrm_licence_en.md)
-
-## Tips for Contributors
-
-### How to Add a New Language
-
-To add a new language to the project, follow these steps:
-
-1. **Add Language File**:
-
-   - Create a new language directory in the `locales` directory and create a `translation.json` file inside it.
-   - Example: `locales/fr/translation.json` (for French)
-
-2. **Add Translations**:
-
-   - Add translations to the `translation.json` file, referring to existing language files.
-
-3. **Update Language Settings**:
-
-   - Open the `src/lib/i18n.js` file and add the new language to the `resources` object.
-
-   ```javascript:src/lib/i18n.js
-   resources: {
-     ...,
-     fr: {  // New language code
-       translation: require("../../locales/fr/translation.json"),
-     },
-   },
-   ```
-
-4. **Add Language Selection Option**:
-
-   - Add a new language option to the appropriate part of the UI (e.g., language selection dropdown in the settings screen) so users can select the language.
-
-   ```typescript:src/components/settings.tsx
-   <select>
-     ...,
-     <option value="FR">French - Français</option>
-   </select>
-   ```
-
-5. **Test**:
-   - Test if the application displays correctly in the new language.
-
-This will add support for the new language to the project.
-
-#### Adding Voice Language Code
-
-- You also need to add support for the voice language code.
-- Add the new language code to the `getVoiceLanguageCode` function in the `Introduction` component.
-
-```typescript:nike-ChatVRM/src/components/introduction.tsx
-const getVoiceLanguageCode = (selectLanguage: string) => {
-  switch (selectLanguage) {
-    case 'JP':
-      return 'ja-JP';
-    case 'EN':
-      return 'en-US';
-    case 'ZH':
-      return 'zh-TW';
-    case 'zh-TW':
-      return 'zh-TW';
-    case 'KO':
-      return 'ko-KR';
-    case 'FR':
-      return 'fr-FR';
-    default:
-      return 'ja-JP';
-  }
-}
-```
-
-#### Adding README
-
-- Add a new language README (`README_fr.md`), logo usage terms (`logo_licence_fr.md`), and VRM model usage terms (`vrm_licence_fr.md`) to the `docs` directory.
-
-```
-
-
-```

docs/README_ko.md

@@ -40,6 +40,20 @@
 
 [![오늘부터 당신도 AITuber 개발자｜니케짱](https://github.com/tegnike/aituber-kit/assets/35606144/a958f505-72f9-4665-ab6c-b57b692bb166)](https://note.com/nike_cha_n/n/ne98acb25e00f)
 
+## ⚠️ 보안에 관한 중요 주의사항
+
+이 저장소는 개인 사용과 로컬 환경에서의 개발은 물론, 적절한 보안 대책을 마련한 상태에서의 상업적 사용도 고려하고 있습니다. 단, 웹 환경에 배포할 때는 다음 사항에 주의해 주시기 바랍니다:
+
+- **API 키 취급**: 백엔드 서버를 통해 AI 서비스(OpenAI, Anthropic 등)와 TTS 서비스의 API를 호출하는 사양이므로, API 키의 적절한 관리가 필요합니다.
+
+### 프로덕션 환경에서의 사용에 대하여
+
+프로덕션 환경에서 사용할 경우, 다음 중 하나의 대응을 권장합니다:
+
+1. **백엔드 서버 구현**: API 키 관리를 서버 사이드에서 수행하여 클라이언트로부터의 직접적인 API 접근을 피하기
+2. **사용자에 대한 적절한 설명**: 각 사용자가 자신의 API 키를 사용하는 경우, 보안상의 주의사항에 대해 설명하기
+3. **접근 제한 구현**: 필요에 따라 적절한 인증・인가 메커니즘을 구현하기
+
 ## 개발 환경
 
 이 프로젝트는 다음과 같은 환경에서 개발되었습니다:
@@ -109,6 +123,7 @@ npm run dev
    - ElevenLabs: 다양한 언어 선택이 가능합니다. API 키를 입력하세요.
    - OpenAI: API 키가 필요합니다.
    - Azure OpenAI: API 키가 필요합니다.
+   - Nijivoice: API 키가 필요합니다.
 5. 입력 양식에서 캐릭터와 대화를 시작합니다. 마이크 입력도 가능합니다.
 
 ## AITuber 스트리밍

docs/README_zh.md

@@ -39,6 +39,20 @@
 
 [![今天成為AITuber開發者 | Nike-chan](https://github.com/tegnike/aituber-kit/assets/35606144/a958f505-72f9-4665-ab6c-b57b692bb166)](https://note.com/nike_cha_n/n/ne98acb25e00f)
 
+## ⚠️ 安全性相關重要注意事項
+
+本存儲庫不僅考慮個人使用和本地環境開發，還考慮在採取適當安全措施的情況下進行商業使用。但是，在部署到Web環境時，請注意以下幾點：
+
+- **API密鑰的處理**: 由於系統設計需要通過後端服務器調用AI服務（如OpenAI、Anthropic等）和TTS服務的API，因此需要適當管理API密鑰。
+
+### 關於生產環境的使用
+
+在生產環境中使用時，建議採取以下其中一種方案：
+
+1. **實現後端服務器**: 在服務器端管理API密鑰，避免客戶端直接訪問API
+2. **向用戶提供適當說明**: 當用戶使用自己的API密鑰時，需要說明安全注意事項
+3. **實現訪問限制**: 根據需要實現適當的身份驗證和授權機制
+
 ## 開發環境
 
 此項目在以下環境中開發：
@@ -108,6 +122,7 @@ npm run dev
    - ElevenLabs：支持多種語言選擇。需要輸入API密鑰。
    - OpenAI：需要API密鑰。
    - Azure OpenAI：需要API密鑰。
+   - Nijivoice：需要API密鑰。
 5. 從輸入表單開始與角色對話。也可以使用麥克風輸入。
 
 ## AITuber直播

locales/en/translation.json

@@ -75,7 +75,7 @@
   "StyleBertVITS2Info": "Using Style-Bert-VITS2. It supports only Japanese, English, and Chinese. If using a local API, you need to download and launch the app that suits your environment from the site below. Please also set up an API key if necessary.",
   "SpeakerSelection": "Speaker Selection",
   "IncludeTimestampInUserMessage": "Include timestamp in user message",
-  "IncludeTimestampInUserMessageInfo": "Including a timestamp in user messages allows AI to generate responses considering time. Please include the following text in the system prompt.\n\n「The user input may be requested with a timestamp. This represents the time at the request, so please generate a response considering that time.」",
+  "IncludeTimestampInUserMessageInfo": "By including timestamps in user messages, the AI can generate responses while considering the time.\nPlease include the following text in your system prompt:\n\n\"User input may include [timestamp]. This represents the UTC time at the moment of the request, so please generate responses considering this timestamp.\"",
   "GoogleTTSInfo": "Using Google Cloud Text-to-Speech. It supports multiple languages.",
   "AuthFileInstruction": "Obtain the authentication JSON file below and place it in the root folder of the repository as 'credentials.json'.",
   "LanguageModelURL": "Select the language model from the URL below.",
@@ -197,5 +197,6 @@
     "useCurrentSystemPrompt": "Use AITuberKit system prompt",
     "userInputTitle": "Send user input",
     "userInputDescription": "The message sent is processed the same as when input from the AITuberKit input form. If multiple messages are sent, they are processed in order. The AI model and voice model are the ones selected in the AITuberKit settings. The system prompt and conversation history are the values set in AITuberKit."
-  }
+  },
+  "CannotUseVoice": "Realtime API mode or Audio mode is enabled, so voice settings are not required."
 }

locales/ja/translation.json

@@ -76,7 +76,7 @@
   "SpeakerSelection": "ボイスタイプ選択",
   "EnglishToJapanese": "英単語を日本語で読み上げる",
   "IncludeTimestampInUserMessage": "ユーザー発言にタイムスタンプを含める",
-  "IncludeTimestampInUserMessageInfo": "ユーザー発言にタイムスタンプを含めることで、AIが時間を考慮して応答を生成できるようになります。\n以下のような文章をシステムプロンプトに含めてください。\n\n「ユーザー入力が [timestamp] 付きでリクエストされる場合があります。これはリクエスト時点の時刻を表しているので、その時刻を考慮したうえで回答を生成してください。」",
+  "IncludeTimestampInUserMessageInfo": "ユーザー発言にタイムスタンプを含めることで、AIが時間を考慮して応答を生成できるようになります。\n以下のような文章をシステムプロンプトに含めてください。\n\n「ユーザー入力が [timestamp] 付きでリクエストされる場合があります。これはリクエスト時点のUTCタイムゾーンの時刻を表しているので、その時刻を考慮したうえで回答を生成してください。」",
   "GoogleTTSInfo": "Google Cloud Text-to-Speechを使用しています。多言語に対応可能です。",
   "AuthFileInstruction": "認証用のJSONファイルを下記から取得し、リポジトリのルートフォルダに credentials.json という名称で配置してください。",
   "LanguageModelURL": "言語モデルは下記のURLから選択してください。",
@@ -198,5 +198,6 @@
     "useCurrentSystemPrompt": "AITuberKitのシステムプロンプトを利用する",
     "userInputTitle": "ユーザー入力を送信する",
     "userInputDescription": "送信したメッセージはAITuberKitの入力フォームから入力された場合と同じ処理がされます。複数送信した場合は順番に処理されます。\nAIモデルおよび音声モデルはAITuberKitの設定で選択したものが使用されます。\nシステムプロンプトや会話履歴はAITuberKitの値が使用されます。"
-  }
+  },
+  "CannotUseVoice": "リアルタイムAPIモード または オーディオモードが有効の場合、\n音声設定は不要です。"
 }

locales/ko/translation.json

@@ -75,7 +75,7 @@
   "StyleBertVITS2Info": "Style-Bert-VITS2를 사용하고 있습니다. 일본어, 영어, 중국어만 지원됩니다. 로컬 API를 사용하는 경우 아래 사이트에서 환경에 맞는 앱을 다운로드하고 실행해야 합니다. 필요한 경우 API 키도 설정해 주세요.",
   "SpeakerSelection": "보이스 타입 선택",
   "IncludeTimestampInUserMessage": "사용자 발언에 타임스탬프 포함",
-  "IncludeTimestampInUserMessageInfo": "사용자 발언에 타임스탬프를 포함하면 AI가 시간을 고려하여 응답을 생성할 수 있습니다.\n다음과 같은 문장을 시스템 프롬프트에 포함해 주세요.\n\n「사용자 입력이 [timestamp]가 포함된 요청인 경우가 있습니다. 이는 요청 시점의 시각을 나타내므로, 해당 시각을 고려하여 답변을 생성해 주세요.」",
+  "IncludeTimestampInUserMessageInfo": "사용자 발언에 타임스탬프를 포함하면 AI가 시간을 고려하여 응답을 생성할 수 있습니다.\n다음과 같은 문장을 시스템 프롬프트에 포함해 주세요.\n\n「사용자 입력에 [timestamp]가 포함되어 요청되는 경우가 있습니다. 이는 요청 시점의 UTC 타임존 시각을 나타내므로, 해당 시각을 고려하여 응답을 생성해 주세요.」",
   "GoogleTTSInfo": "Google Cloud Text-to-Speech를 사용합니다. 다국어 지원이 가능합니다.",
   "AuthFileInstruction": "인증용 JSON 파일을 아래에서 얻어 리포지토리 루트 폴더에 credentials.json이라는 이름으로 배치하십시오.",
   "LanguageModelURL": "언어 모델은 아래 URL에서 선택하십시오.",
@@ -197,5 +197,6 @@
     "useCurrentSystemPrompt": "AITuberKit의 시스템 프롬프트를 사용하기",
     "userInputTitle": "사용자 입력 보내기",
     "userInputDescription": "보낸 메시지는 AITuberKit의 입력 폼에서 입력한 경우와 동일한 처리가 됩니다. 여러 메시지를 보낸 경우 순서대로 처리됩니다.\nAI 모델과 음성 모델은 AITuberKit의 설정에서 선택한 것이 사용됩니다.\n시스템 프롬프트와 대화 기록은 AITuberKit의 값이 사용됩니다."
-  }
+  },
+  "CannotUseVoice": "리얼타임 API 모드 또는 오디오 모드가 활성화된 경우, 음성 설정은 필요하지 않습니다."
 }