Merge pull request #117 from tegnike/develop

本番リリース

.eslintrc.json

@@ -1,3 +1,7 @@
 {
- "extends": "next/core-web-vitals"
+ "extends": ["next/core-web-vitals", "prettier"],
+ "plugins": ["prettier"],
+ "rules": {
+ "prettier/prettier": "error"
+ }
 }

.github/workflows/lint-and-format.yml

@@ -0,0 +1,39 @@
+name: Lint and Format
+
+on:
+ pull_request:
+ types: [opened, synchronize]
+
+jobs:
+ lint-and-format:
+ runs-on: ubuntu-latest
+
+ steps:
+ - name: Checkout repository
+ uses: actions/checkout@v3
+
+ - name: Set up Node.js
+ uses: actions/setup-node@v3
+ with:
+ node-version: '16'
+
+ - name: Install dependencies
+ run: npm install
+
+ - name: Run ESLint
+ run: |
+ npm run lint
+ git add .
+ if ! git diff --exit-code; then
+ echo "ESLint changes detected. Please commit the changes."
+ exit 1
+ fi
+
+ - name: Run Prettier
+ run: |
+ npm run format
+ git add .
+ if ! git diff --exit-code; then
+ echo "Prettier changes detected. Please commit the changes."
+ exit 1
+ fi

.prettierrc.json

@@ -0,0 +1,5 @@
+{
+ "singleQuote": true,
+ "trailingComma": "es5",
+ "semi": false
+}

README.md

@@ -6,6 +6,9 @@
  <a href="https://github.com/tegnike/aituber-kit"><img alt="GitHub Last Commit" src="https://img.shields.io/github/last-commit/tegnike/aituber-kit"></a>
  <a href="https://github.com/tegnike/aituber-kit"><img alt="GitHub Top Language" src="https://img.shields.io/github/languages/top/tegnike/aituber-kit"></a>
  <img alt="GitHub Tag" src="https://img.shields.io/github/v/tag/tegnike/aituber-kit?sort=semver&color=orange">
+</p>
+<p align="center">
+ <a href="https://x.com/tegnike"><img alt="X (Twitter)" src="https://img.shields.io/badge/X-tegnike-1DA1F2?logo=x&style=flat&logoColor=white"/></a>
  <a href="https://discord.gg/T96PTvrs"><img alt="Discord" src="https://img.shields.io/badge/Discord-AITuberKit-7289DA?logo=discord&style=flat&logoColor=white"/></a>
  <a href="https://github.com/sponsors/tegnike"><img alt="GitHub Sponsor" src="https://img.shields.io/badge/Sponsor-GitHub-ea4aaa?style=flat&logo=github"/></a>
 </p>
@@ -22,7 +25,7 @@
 
 1. AIキャラとの対話
 2. AITuber配信
-3. 外部連携モード
+3. 外部連携モード（β版）
 
 下記の記事に詳細な使用方法を記載しました。
 
@@ -43,6 +46,7 @@ cd aituber-kit
 ```
 
 3. パッケージインストールします。
+
 ```bash
 npm install
 ```
@@ -97,10 +101,11 @@ npm run dev
 4. Youtubeの配信を開始し、キャラクターがコメントに反応するのを確認します。
 5. 会話継続モードをONにすると、コメントが無いときにAIが自ら発言することができます。
 
-## 外部連携モード
+## 外部連携モード（β版）
 
 - WebSocketでサーバーアプリにメッセージを送信して、レスポンスを取得することができます。
 - 上記2つと異なり、フロントアプリで完結しないため少し難易度が高いです。
+- ⚠ メンテナンスできていないため、動かない可能性があります。
 
 ### 使用方法
 
@@ -172,9 +177,12 @@ npm run dev
  <a href="https://github.com/mo0013" title="mo0013">
  <img src="https://github.com/mo0013.png" width="40" height="40" alt="mo0013">
  </a>
+ <a href="https://github.com/tsubouchi" title="tsubouchi">
+ <img src="https://github.com/tsubouchi.png" width="40" height="40" alt="tsubouchi">
+ </a>
 </p>
 
-他、プライベートスポンサー 2 名
+他、プライベートスポンサー 複数名
 
 ## 利用規約
 
@@ -189,14 +197,18 @@ npm run dev
 新しい言語をプロジェクトに追加するには、以下の手順に従ってください。
 
 1. **言語ファイルの追加**:
+
  - `locales` ディレクトリに新しい言語のディレクトリを作成し、その中に `translation.json` ファイルを作成します。
  - 例: `locales/fr/translation.json` (フランス語の場合)
 
 2. **翻訳の追加**:
+
  - `translation.json` ファイルに、既存の言語ファイルを参考にして翻訳を追加します。
 
 3. **言語設定の更新**:
+
  - `src/lib/i18n.js` ファイルを開き、`resources` オブジェクトに新しい言語を追加します。
+
  ```javascript:src/lib/i18n.js
  resources: {
  ...,
@@ -207,7 +219,9 @@ npm run dev
  ```
 
 4. **言語選択オプションの追加**:
+
  - ユーザーが言語を選択できるように、UIの適切な部分（例えば設定画面の言語選択ドロップダウン）に新しい言語オプションを追加します。
+
  ```typescript:src/components/settings.tsx
  <select>
  ...,

docker-compose.yml

@@ -4,7 +4,7 @@ services:
  app:
  build: .
  ports:
- - "3000:3000"
+ - '3000:3000'
  volumes:
  - .:/app
  env_file:

docs/README_en.md

@@ -1,9 +1,13 @@
 <h1 align="center">
  <img style="max-width: 100%;" src="./logo.png">
 </h1>
+
 <p align="center">
  <a href="https://github.com/tegnike/aituber-kit"><img alt="GitHub Last Commit" src="https://img.shields.io/github/last-commit/tegnike/aituber-kit"></a>
  <a href="https://github.com/tegnike/aituber-kit"><img alt="GitHub Top Language" src="https://img.shields.io/github/languages/top/tegnike/aituber-kit"></a>
+</p>
+<p align="center">
+ <a href="https://x.com/tegnike"><img alt="X (Twitter)" src="https://img.shields.io/badge/X-tegnike-1DA1F2?logo=x&style=flat&logoColor=white"/></a>
  <img alt="GitHub Tag" src="https://img.shields.io/github/v/tag/tegnike/aituber-kit?sort=semver&color=orange">
  <a href="https://discord.gg/T96PTvrs"><img alt="Discord" src="https://img.shields.io/badge/Discord-AITuberKit-7289DA?logo=discord&style=flat&logoColor=white"/></a>
  <a href="https://github.com/sponsors/tegnike"><img alt="GitHub Sponsor" src="https://img.shields.io/badge/Sponsor-GitHub-ea4aaa?style=flat&logo=github"/></a>
@@ -20,8 +24,8 @@
 This repository has the following 3 features:
 
 1. Conversation with AI character
-2. AITuber streaming 
-3. External integration mode
+2. AITuber streaming
+3. External integration mode (β version)
 
 I've written a detailed usage guide in the article below:
 
@@ -97,10 +101,11 @@ npm run dev
 4. Start streaming on YouTube and confirm that the character reacts to comments.
 5. Turn on the conversation continuity mode to be able to speak even if there are no comments.
 
-## External Integration Mode
+## External Integration Mode (β version)
 
 - You can send messages to the server app via WebSocket and get a response.
 - Unlike the above two, it does not complete within the front-end app, so the difficulty level is a bit higher.
+- ⚠ This mode is not maintained, so it may not work.
 
 ### Usage
 
@@ -172,9 +177,12 @@ Your support will greatly contribute to the development and improvement of the A
  <a href="https://github.com/mo0013" title="mo0013">
  <img src="https://github.com/mo0013.png" width="40" height="40" alt="mo0013">
  </a>
+ <a href="https://github.com/tsubouchi" title="tsubouchi">
+ <img src="https://github.com/tsubouchi.png" width="40" height="40" alt="tsubouchi">
+ </a>
 </p>
 
-Plus 2 private sponsors
+Plus multiple private sponsors
 
 ## Usage Agreement
 
@@ -189,14 +197,18 @@ Plus 2 private sponsors
 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: {
  ...,
@@ -207,7 +219,9 @@ To add a new language to the project, follow these steps:
  ```
 
 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>
  ...,

docs/README_ko.md

@@ -5,6 +5,9 @@
 <p align="center">
  <a href="https://github.com/tegnike/aituber-kit"><img alt="GitHub Last Commit" src="https://img.shields.io/github/last-commit/tegnike/aituber-kit"></a>
  <a href="https://github.com/tegnike/aituber-kit"><img alt="GitHub Top Language" src="https://img.shields.io/github/languages/top/tegnike/aituber-kit"></a>
+</p>
+<p align="center">
+ <a href="https://x.com/tegnike"><img alt="X (Twitter)" src="https://img.shields.io/badge/X-tegnike-1DA1F2?logo=x&style=flat&logoColor=white"/></a>
  <img alt="GitHub Tag" src="https://img.shields.io/github/v/tag/tegnike/aituber-kit?sort=semver&color=orange">
  <a href="https://discord.gg/T96PTvrs"><img alt="Discord" src="https://img.shields.io/badge/Discord-AITuberKit-7289DA?logo=discord&style=flat&logoColor=white"/></a>
  <a href="https://github.com/sponsors/tegnike"><img alt="GitHub Sponsor" src="https://img.shields.io/badge/Sponsor-GitHub-ea4aaa?style=flat&logo=github"/></a>
@@ -22,7 +25,7 @@
 
 1. AI 캐릭터와 대화
 2. AITuber 스트리밍
-3. 외부 통합 모드
+3. 외부 통합 모드（베타 버전）
 
 아래 기사에 자세한 사용 방법을 작성했습니다.
 
@@ -31,21 +34,25 @@
 ## 공통 사전 준비
 
 1. 리포지토리를 로컬에 클론합니다.
+
 ```bash
 git clone https://github.com/tegnike/aituber-kit.git
 ```
 
 2. 폴더를 엽니다.
+
 ```bash
 cd aituber-kit
 ```
 
 3. 패키지를 설치합니다.
+
 ```bash
 npm install
 ```
 
 4. 개발 모드에서 애플리케이션을 시작합니다.
+
 ```bash
 npm run dev
 ```
@@ -94,10 +101,11 @@ npm run dev
 4. YouTube에서 스트리밍을 시작하고 캐릭터가 댓글에 반응하는지 확인합니다.
 5. 대화 연속 모드를 켜면 댓글이 없어도 AI가 스스로 발언할 수 있습니다.
 
-## 외부 통합 모드
+## 외부 통합 모드（베타 버전）
 
 - WebSocket을 통해 서버 앱에 메시지를 보내고 응답을 받을 수 있습니다.
 - 위의 두 가지와 달리 프론트엔드 앱 내에서 완료되지 않으므로 난이도가 약간 높습니다.
+- ⚠ 이 모드는 지속적으로 유지되지 않으므로 작동하지 않을 수 있습니다.
 
 ### 사용 방법
 
@@ -169,9 +177,12 @@ npm run dev
  <a href="https://github.com/mo0013" title="mo0013">
  <img src="https://github.com/mo0013.png" width="40" height="40" alt="mo0013">
  </a>
+ <a href="https://github.com/tsubouchi" title="tsubouchi">
+ <img src="https://github.com/tsubouchi.png" width="40" height="40" alt="tsubouchi">
+ </a>
 </p>
 
-그 외, 비공개 스폰서 2명
+그 외, 다수의 비공개 스폰서
 
 ## 이용 약관