Revised ReadMe and Tutorial Page

oristarium · Dec 16, 2024 · 4af12b1 · 4af12b1
1 parent f8d7e92
commit 4af12b1
Show file tree

Hide file tree

Showing 3 changed files with 225 additions and 44 deletions.
diff --git a/README.id.md b/README.id.md
@@ -0,0 +1,112 @@
+# OrionChat
+
+Baca ini dalam bahasa lain: [English](README.md) | [Indonesia](README.id.md)
+
+<div align="center">
+<img src="https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg" alt="Awesome Badge"/>
+<img src="https://img.shields.io/static/v1?label=%F0%9F%8C%9F&message=If%20Useful&style=style=flat&color=BC4E99" alt="Star Badge"/>
+<a href="https://discord.gg/JgjExyntw4"><img src="https://img.shields.io/discord/733027681184251937.svg?style=flat&label=Join%20Community&color=7289DA" alt="Join Community Badge"/></a>
+<a href="https://twitter.com/oristarium"><img src="https://img.shields.io/twitter/follow/oristarium.svg?style=social" /></a>
+<br>
+
+<i>Alat integrasi OBS yang powerful untuk mengelola chat live stream dengan TTS dan animasi avatar</i>
+
+<a href="https://github.com/oristarium/orionchat/stargazers"><img src="https://img.shields.io/github/stars/oristarium/orionchat" alt="Stars Badge"/></a>
+<a href="https://github.com/oristarium/orionchat/network/members"><img src="https://img.shields.io/github/forks/oristarium/orionchat" alt="Forks Badge"/></a>
+<a href="https://github.com/oristarium/orionchat/pulls"><img src="https://img.shields.io/github/issues-pr/oristarium/orionchat" alt="Pull Requests Badge"/></a>
+<a href="https://github.com/oristarium/orionchat/issues"><img src="https://img.shields.io/github/issues/oristarium/orionchat" alt="Issues Badge"/></a>
+<a href="https://github.com/oristarium/orionchat/graphs/contributors"><img alt="GitHub contributors" src="https://img.shields.io/github/contributors/oristarium/orionchat?color=2b9348"></a>
+<a href="https://github.com/oristarium/orionchat/blob/master/LICENSE"><img src="https://img.shields.io/github/license/oristarium/orionchat?color=2b9348" alt="License Badge"/></a>
+
+</div>
+
+## ✨ Fitur
+
+- 🎮 **Integrasi OBS yang Mudah** - Pengaturan browser source yang sederhana untuk tampilan chat dan avatar TTS
+- 🗣️ **Text-to-Speech** - Dukungan TTS multi-bahasa dengan animasi avatar yang dapat disesuaikan
+- 💬 **Dukungan Multi-Platform** - Bekerja dengan YouTube, TikTok, dan Twitch
+- 🎨 **Avatar yang Dapat Disesuaikan** - Mendukung avatar statis dan animasi
+- 🎯 **Tampilan Chat Real-time** - Tampilkan pesan yang disorot di stream
+- 🔧 **Panel Kontrol** - Antarmuka yang mudah digunakan untuk mengelola semua fitur
+
+## 🚀 Panduan Instalasi & Pengaturan
+
+### Instalasi Windows
+1. Unduh rilis Windows terbaru (file .zip) dari [Halaman Rilis](https://github.com/oristarium/orionchat/releases/latest)
+2. Ekstrak file .zip yang sudah diunduh:
+   - Klik kanan pada file .zip
+   - Pilih "Extract All..."
+   - Pilih lokasi (misalnya Desktop atau Documents)
+   - Klik "Extract"
+3. Buka folder hasil ekstrak dan klik dua kali `orionchat.exe`
+4. Aplikasi akan membuka jendela status yang menunjukkan server berjalan di port 7777
+
+   ![OrionChat Status Window](https://ucarecdn.com/841b9ca8-2d7d-43c6-b440-e8e7e1bc5628/orionchatstatusapp.png)
+
+5. Gunakan tombol copy yang tersedia untuk mendapatkan URL yang diperlukan untuk pengaturan streaming Anda
+6. Biarkan OrionChat tetap berjalan selama streaming
+
+⚠️ Catatan: Saat ini, OrionChat hanya tersedia untuk Windows. Dukungan Mac dan Linux akan segera hadir.
+
+### 🎮 Pengaturan Panel Kontrol di OBS
+1. Di OBS Studio, buka "View" → "Docks" → "Custom Browser Docks..."
+2. Di jendela popup:
+   - Masukkan "OrionChat Control" untuk Nama Dock
+   - Masukkan `http://localhost:7777` untuk URL
+3. Klik "Apply" lalu "Close"
+4. Panel Kontrol akan muncul sebagai jendela yang bisa dipindahkan di OBS
+5. Anda sekarang bisa mengaturnya bersama panel OBS lainnya
+
+### 📺 Menambahkan Source di OBS Studio
+1. Buka OBS Studio
+2. Klik kanan di panel "Sources"
+3. Pilih "Add" → "Browser"
+4. Buat baru dan beri nama (contoh: "OrionChat Display")
+5. Tambahkan source ini satu per satu:
+   - Chat Display: `http://localhost:7777/display` (Lebar: 400, Tinggi: 600)
+   - TTS Avatar: `http://localhost:7777/tts` (Lebar: 300, Tinggi: 300)
+
+### 🎭 Menggunakan dengan VTube Studio
+1. Buka VTube Studio
+2. Klik tombol "+" di pojok kanan bawah untuk menambahkan item baru
+3. Pilih "Web Item"
+4. Tambahkan URL ini satu per satu:
+   - Untuk Chat Display: `http://localhost:7777/display`
+     - Ukuran yang disarankan: 400x600
+   - Untuk TTS Avatar: `http://localhost:7777/tts`
+     - Ukuran yang disarankan: 300x300
+5. Atur posisi dan ukuran web item sesuai kebutuhan di scene Anda
+6. Gunakan dock Panel Kontrol OBS untuk mengatur pengaturan
+
+Catatan: Untuk informasi lebih detail tentang Web Item di VTube Studio, silakan lihat [Wiki resmi VTube Studio](https://github.com/DenchiSoft/VTubeStudio/wiki/Web-Items/).
+
+### 💡 Tips untuk Content Creator
+- Pastikan OrionChat berjalan sebelum memulai OBS atau VTube Studio
+- Uji pengaturan Anda sebelum mulai live
+- Panel Kontrol dapat diakses dari browser manapun di `http://localhost:7777`
+- Sesuaikan pengaturan avatar dan tampilan chat melalui Panel Kontrol
+- Untuk hasil terbaik, biarkan aplikasi tetap berjalan di background selama streaming
+
+### 🔧 Pemecahan Masalah
+- Jika Anda tidak dapat melihat chat atau avatar, pastikan OrionChat sedang berjalan
+- Coba refresh browser source di OBS atau web item di VTube Studio
+- Periksa apakah antivirus Anda memblokir aplikasi
+- Pastikan Anda menggunakan URL yang benar
+- Jika tidak ada yang berhasil, restart OrionChat dan software streaming Anda
+
+## 💖 Dukungan
+
+Suka proyek ini? Silakan dukung kami:
+
+<a href="https://trakteer.id/oristarium">
+  <img src="https://cdn.trakteer.id/images/embed/trbtn-red-1.png" height="40" alt="Dukung kami di Trakteer" />
+</a>
+
+## 📜 Lisensi
+
+Proyek ini dilisensikan di bawah Lisensi MIT - lihat file [LICENSE](LICENSE) untuk detail.
+
+<h3 align="center">Dibuat dengan ❤️ oleh</h3>
+<div align="center">
+<img alt="Oristarium Logo" src="https://ucarecdn.com/87bb45de-4a95-40d7-83c6-73866de942d5/-/crop/5518x2493/1408,2949/-/preview/1000x1000/" width="200"> </img>
+</div> 
diff --git a/README.md b/README.md
@@ -1,3 +1,7 @@
+# OrionChat
+
+Read this in other languages: [English](README.md) | [Indonesia](README.id.md)
+
 <h1 align="center">OrionChat</h1>
 <div align="center">
 <img src="https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg" alt="Awesome Badge"/>
@@ -26,17 +30,66 @@
 - 🎯 **Real-time Chat Display** - Show highlighted messages on stream
 - 🔧 **Control Panel** - User-friendly interface for managing all features
 
-## 🚀 Quick Start
-
-1. Download the latest release for your platform
-2. Run the application
-3. Open OBS and add the following browser sources:
-
-```bash
-Control Panel: http://localhost:7777
-Chat Display: http://localhost:7777/display
-TTS Avatar: http://localhost:7777/tts
-```
+## 🚀 Installation & Setup Guide
+
+### Windows Installation
+1. Download the latest Windows release (.zip file) from our [Releases Page](https://github.com/oristarium/orionchat/releases/latest)
+2. Extract the downloaded .zip file
+3. Open the extracted folder and double-click `orionchat.exe`
+4. The app will open a status window showing the server is running on port 7777
+
+   ![OrionChat Status Window](https://ucarecdn.com/841b9ca8-2d7d-43c6-b440-e8e7e1bc5628/orionchatstatusapp.png)
+
+5. Use the provided copy buttons to get the necessary URLs for your streaming setup
+6. Keep OrionChat running while streaming
+
+⚠️ Note: Currently, OrionChat is only available for Windows. Mac and Linux support coming soon.
+
+### 📺 Control Panel Setup in OBS
+1. In OBS Studio, go to "View" → "Docks" → "Custom Browser Docks..."
+2. In the popup window:
+   - Enter "OrionChat Control" for the Dock Name
+   - Enter `http://localhost:7777` for the URL
+3. Click "Apply" then "Close"
+4. The Control Panel will appear as a dockable window in OBS
+5. You can now arrange it alongside your other OBS panels
+
+### 📺 Adding Sources in OBS Studio
+1. Open OBS Studio
+2. Right-click in the "Sources" panel
+3. Select "Add" → "Browser"
+4. Create new and name it (example: "OrionChat Display")
+5. Add these sources one by one:
+   - Chat Display: `http://localhost:7777/display` (Width: 400, Height: 600)
+   - TTS Avatar: `http://localhost:7777/tts` (Width: 300, Height: 300)
+
+### 🎭 Using with VTube Studio
+1. Open VTube Studio
+2. Click the "+" button in the bottom right to add a new item
+3. Select "Web Item"
+4. Add these URLs one at a time:
+   - For Chat Display: `http://localhost:7777/display`
+     - Recommended size: 400x600
+   - For TTS Avatar: `http://localhost:7777/tts`
+     - Recommended size: 300x300
+5. Position and resize the web items as needed in your scene
+6. Use the OBS Control Panel dock to manage settings
+
+Note: For more detailed information about Web Items in VTube Studio, please refer to the [official VTube Studio Wiki](https://github.com/DenchiSoft/VTubeStudio/wiki/Web-Items/).
+
+### 💡 Tips for Content Creators
+- Make sure OrionChat is running before starting OBS or VTube Studio
+- Test your setup before going live
+- The Control Panel can be accessed from any browser at `http://localhost:7777`
+- Customize your avatar and chat display settings through the Control Panel
+- For best results, keep the application running in the background while streaming
+
+### 🔧 Troubleshooting
+- If you can't see the chat or avatar, make sure OrionChat is running
+- Try refreshing your browser sources in OBS or web widgets in VTube Studio
+- Check if your antivirus is blocking the application
+- Make sure you're using the correct URLs
+- If nothing works, restart OrionChat and your streaming software
 
 ## 📖 Setup Guide
 

diff --git a/assets/tutorial.html b/assets/tutorial.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Chat Tools Tutorial</title>
+    <title>OrionChat Tutorial</title>
     <style>
         body {
             font-family: system-ui, -apple-system, sans-serif;
@@ -60,67 +60,83 @@
 </head>
 <body>
     <div class="container">
-        <h1>Chat Tools Tutorial</h1>
-        <p>This guide will help you set up Chat Tools in OBS for your streaming needs. There are three main components to set up:</p>
+        <h1>OrionChat Tutorial</h1>
+        <p>This guide will help you set up OrionChat for your streaming needs.</p>
 
-        <h2>1. Control Panel Setup</h2>
+        <h2>1. Control Panel Setup in OBS</h2>
         <div class="step">
-            <p>The control panel is where you manage your chat connections and settings.</p>
+            <p>The control panel is where you manage all your OrionChat settings.</p>
             <ol>
-                <li>In OBS, go to View → Docks → Custom Browser Docks</li>
-                <li>Add a new dock with:
+                <li>In OBS Studio, go to "View" → "Docks" → "Custom Browser Docks..."</li>
+                <li>In the popup window, add:
                     <ul>
-                        <li>Dock Name: <code>Chat Tools Control</code></li>
+                        <li>Dock Name: <code>OrionChat Control</code></li>
                         <li>URL: <code>http://localhost:7777</code></li>
                     </ul>
                 </li>
-                <li>Click "Apply" to add the dock to your OBS workspace</li>
+                <li>Click "Apply" then "Close"</li>
+                <li>The Control Panel will appear as a dockable window in OBS</li>
+                <li>You can now arrange it alongside your other OBS panels</li>
             </ol>
         </div>
 
-        <h2>2. Avatar TTS Setup</h2>
+        <h2>2. Adding Sources in OBS Studio</h2>
         <div class="step">
-            <p>The TTS avatar will appear and speak chat messages on your stream.</p>
             <ol>
-                <li>In OBS, add a new Browser source to your scene</li>
-                <li>Configure it with:
+                <li>Open OBS Studio</li>
+                <li>Right-click in the "Sources" panel</li>
+                <li>Select "Add" → "Browser"</li>
+                <li>Create new and name it (example: "OrionChat Display")</li>
+                <li>Add these sources one by one:
                     <ul>
-                        <li>URL: <code>http://localhost:7777/tts</code></li>
-                        <li>Width: 300 (or as needed)</li>
-                        <li>Height: 300 (or as needed)</li>
+                        <li>Chat Display: <code>http://localhost:7777/display</code> (Width: 400, Height: 600)</li>
+                        <li>TTS Avatar: <code>http://localhost:7777/tts</code> (Width: 300, Height: 300)</li>
                     </ul>
                 </li>
-                <li>Position the browser source where you want the avatar to appear</li>
             </ol>
         </div>
 
-        <h2>3. Chat Display Setup</h2>
+        <h2>3. Using with VTube Studio</h2>
         <div class="step">
-            <p>This will show highlighted chat messages on your stream.</p>
             <ol>
-                <li>Add another Browser source to your scene</li>
-                <li>Configure it with:
+                <li>Open VTube Studio</li>
+                <li>Click the "+" button in the bottom right to add a new item</li>
+                <li>Select "Web Item"</li>
+                <li>Add these URLs one at a time:
                     <ul>
-                        <li>URL: <code>http://localhost:7777/display</code></li>
-                        <li>Width: 400 (or as needed)</li>
-                        <li>Height: 600 (or as needed)</li>
+                        <li>For Chat Display: <code>http://localhost:7777/display</code>
+                            <br>Recommended size: 400x600</li>
+                        <li>For TTS Avatar: <code>http://localhost:7777/tts</code>
+                            <br>Recommended size: 300x300</li>
                     </ul>
                 </li>
-                <li>Position the chat display where you want messages to appear</li>
+                <li>Position and resize the web items as needed in your scene</li>
+                <li>Use the OBS Control Panel dock to manage settings</li>
             </ol>
+            <p>For more detailed information about Web Items in VTube Studio, please refer to the <a href="https://github.com/DenchiSoft/VTubeStudio/wiki/Web-Items/" target="_blank">official VTube Studio Wiki</a>.</p>
         </div>
 
+        <h2>Tips for Content Creators</h2>
         <div class="tip">
-            <strong>Tip:</strong> Make sure Chat Tools is running before adding these sources to OBS. The application needs to be running for the sources to work properly.
+            <ul>
+                <li>Make sure OrionChat is running before starting OBS or VTube Studio</li>
+                <li>Test your setup before going live</li>
+                <li>The Control Panel can be accessed from any browser at <code>http://localhost:7777</code></li>
+                <li>Customize your avatar and chat display settings through the Control Panel</li>
+                <li>For best results, keep the application running in the background while streaming</li>
+            </ul>
         </div>
 
-        <h2>Usage Tips</h2>
-        <ul>
-            <li>Use the control panel to connect to your streaming platform</li>
-            <li>You can customize the avatar by clicking the "Avatar Settings" button</li>
-            <li>Select your preferred TTS language from the dropdown menu</li>
-            <li>The chat display will automatically show messages as they come in</li>
-        </ul>
+        <h2>Troubleshooting</h2>
+        <div class="step">
+            <ul>
+                <li>If you can't see the chat or avatar, make sure OrionChat is running</li>
+                <li>Try refreshing your browser sources in OBS or web items in VTube Studio</li>
+                <li>Check if your antivirus is blocking the application</li>
+                <li>Make sure you're using the correct URLs</li>
+                <li>If nothing works, restart OrionChat and your streaming software</li>
+            </ul>
+        </div>
     </div>
 </body>
 </html>