moved AI generated readmes to readme folder (may delete)
This commit is contained in:
381
readmes/WEB_UI_USER_GUIDE.md
Normal file
381
readmes/WEB_UI_USER_GUIDE.md
Normal file
@@ -0,0 +1,381 @@
|
||||
# 🎮 Web UI User Guide - Language Toggle
|
||||
|
||||
## Where to Find It
|
||||
|
||||
### Step 1: Open Web UI
|
||||
```
|
||||
http://localhost:8000/static/
|
||||
```
|
||||
|
||||
### Step 2: Find the Tab
|
||||
Look at the tab navigation bar at the top:
|
||||
|
||||
```
|
||||
[Server Management] [Actions] [Status] [⚙️ LLM Settings] [🎨 Image Generation]
|
||||
↑
|
||||
CLICK HERE
|
||||
```
|
||||
|
||||
**The "⚙️ LLM Settings" tab is located:**
|
||||
- Between "Status" tab (on the left)
|
||||
- And "🎨 Image Generation" tab (on the right)
|
||||
|
||||
### Step 3: Click the Tab
|
||||
Click on "⚙️ LLM Settings" to open the language mode settings.
|
||||
|
||||
---
|
||||
|
||||
## What You'll See
|
||||
|
||||
### Main Button
|
||||
|
||||
```
|
||||
┌──────────────────────────────────────────────────┐
|
||||
│ 🔄 Toggle Language (English ↔ Japanese) │
|
||||
└──────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**Button Properties:**
|
||||
- **Background:** Blue (#4a7bc9)
|
||||
- **Border:** 2px solid cyan (#61dafb)
|
||||
- **Text:** White, bold, large font
|
||||
- **Size:** Fills width of section
|
||||
- **Cursor:** Changes to pointer on hover
|
||||
|
||||
---
|
||||
|
||||
## How to Use
|
||||
|
||||
### Step 1: Read Current Language
|
||||
At the top of the tab, you'll see:
|
||||
```
|
||||
Current Language: English
|
||||
```
|
||||
|
||||
### Step 2: Click the Toggle Button
|
||||
```
|
||||
🔄 Toggle Language (English ↔ Japanese)
|
||||
```
|
||||
|
||||
### Step 3: Watch It Change
|
||||
The display will immediately update:
|
||||
- "Current Language" will change
|
||||
- "Active Model" will change
|
||||
- A notification will appear saying:
|
||||
```
|
||||
✅ Miku is now speaking in JAPANESE!
|
||||
```
|
||||
|
||||
### Step 4: Send a Message to Miku
|
||||
Go to Discord and send any message to Miku.
|
||||
She will respond in the selected language!
|
||||
|
||||
---
|
||||
|
||||
## The Tab Layout
|
||||
|
||||
```
|
||||
╔═══════════════════════════════════════════════════════════════╗
|
||||
║ ⚙️ Language Model Settings ║
|
||||
║ Configure language model behavior and language mode. ║
|
||||
╚═══════════════════════════════════════════════════════════════╝
|
||||
|
||||
╔═══════════════════════════════════════════════════════════════╗
|
||||
║ 🌐 Language Mode [BLUE SECTION] ║
|
||||
╠───────────────────────────────────────────────────────────────╣
|
||||
║ Switch Miku between English and Japanese responses. ║
|
||||
║ ║
|
||||
║ Current Language: English ║
|
||||
║ ║
|
||||
║ ┌───────────────────────────────────────────────────────────┐ ║
|
||||
║ │ 🔄 Toggle Language (English ↔ Japanese) │ ║
|
||||
║ └───────────────────────────────────────────────────────────┘ ║
|
||||
║ ║
|
||||
║ English Mode: ║
|
||||
║ • Uses standard Llama 3.1 model ║
|
||||
║ • Responds in English only ║
|
||||
║ ║
|
||||
║ Japanese Mode (日本語): ║
|
||||
║ • Uses Llama 3.1 Swallow model ║
|
||||
║ • Responds entirely in Japanese ║
|
||||
╚═══════════════════════════════════════════════════════════════╝
|
||||
|
||||
╔═══════════════════════════════════════════════════════════════╗
|
||||
║ 📊 Current Status ║
|
||||
╠───────────────────────────────────────────────────────────────╣
|
||||
║ Language Mode: English ║
|
||||
║ Active Model: llama3.1 ║
|
||||
║ Available Languages: English, 日本語 (Japanese) ║
|
||||
║ ║
|
||||
║ ┌───────────────────────────────────────────────────────────┐ ║
|
||||
║ │ 🔄 Refresh Status │ ║
|
||||
║ └───────────────────────────────────────────────────────────┘ ║
|
||||
╚═══════════════════════════════════════════════════════════════╝
|
||||
|
||||
╔═══════════════════════════════════════════════════════════════╗
|
||||
║ ℹ️ How Language Mode Works [ORANGE INFORMATION PANEL] ║
|
||||
╠───────────────────────────────────────────────────────────────╣
|
||||
║ • English mode uses your default text model ║
|
||||
║ • Japanese mode switches to Swallow ║
|
||||
║ • All personality traits work in both modes ║
|
||||
║ • Language mode is global - affects all servers/DMs ║
|
||||
║ • Conversation history is preserved across switches ║
|
||||
╚═══════════════════════════════════════════════════════════════╝
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Button Interactions
|
||||
|
||||
### Click the Toggle Button
|
||||
|
||||
**Before Click:**
|
||||
```
|
||||
Current Language: English
|
||||
Active Model: llama3.1
|
||||
```
|
||||
|
||||
**Click:**
|
||||
```
|
||||
🔄 Toggle Language (English ↔ Japanese)
|
||||
[Sending request to server...]
|
||||
```
|
||||
|
||||
**After Click:**
|
||||
```
|
||||
Current Language: 日本語 (Japanese)
|
||||
Active Model: swallow
|
||||
|
||||
Notification at bottom-right:
|
||||
┌─────────────────────────────────────┐
|
||||
│ ✅ Miku is now speaking in JAPANESE! │
|
||||
│ [fades away after 3 seconds] │
|
||||
└─────────────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Real-World Workflow
|
||||
|
||||
### Scenario: Testing English to Japanese
|
||||
|
||||
**1. Start (English Mode)**
|
||||
```
|
||||
Web UI shows:
|
||||
- Current Language: English
|
||||
- Active Model: llama3.1
|
||||
|
||||
Discord:
|
||||
You: "Hello Miku!"
|
||||
Miku: "Hi there! 🎶 How are you today?"
|
||||
```
|
||||
|
||||
**2. Toggle Language**
|
||||
```
|
||||
Click: 🔄 Toggle Language (English ↔ Japanese)
|
||||
|
||||
Notification: "Miku is now speaking in JAPANESE!"
|
||||
|
||||
Web UI shows:
|
||||
- Current Language: 日本語 (Japanese)
|
||||
- Active Model: swallow
|
||||
```
|
||||
|
||||
**3. Send Message in Japanese**
|
||||
```
|
||||
Discord:
|
||||
You: "こんにちは、ミク！"
|
||||
Miku: "こんにちは！元気ですか？🎶✨"
|
||||
```
|
||||
|
||||
**4. Toggle Back to English**
|
||||
```
|
||||
Click: 🔄 Toggle Language (English ↔ Japanese)
|
||||
|
||||
Notification: "Miku is now speaking in ENGLISH!"
|
||||
|
||||
Web UI shows:
|
||||
- Current Language: English
|
||||
- Active Model: llama3.1
|
||||
```
|
||||
|
||||
**5. Send Message in English Again**
|
||||
```
|
||||
Discord:
|
||||
You: "Hello again!"
|
||||
Miku: "Welcome back! 🎤 What's up?"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Refresh Status Button
|
||||
|
||||
### When to Use
|
||||
- After toggling, if display doesn't update
|
||||
- To sync with server's current setting
|
||||
- To verify language has actually changed
|
||||
|
||||
### How to Click
|
||||
```
|
||||
┌───────────────────────────┐
|
||||
│ 🔄 Refresh Status │
|
||||
└───────────────────────────┘
|
||||
```
|
||||
|
||||
### What It Does
|
||||
- Fetches current language from server
|
||||
- Updates all status displays
|
||||
- Confirms server has the right setting
|
||||
|
||||
---
|
||||
|
||||
## Color Legend
|
||||
|
||||
In the LLM Settings tab:
|
||||
|
||||
🔵 **BLUE** = Active/Primary
|
||||
- Toggle button background
|
||||
- Section borders
|
||||
- Header text
|
||||
|
||||
🔶 **ORANGE** = Information
|
||||
- Information panel accent
|
||||
- Educational content
|
||||
- Help section
|
||||
|
||||
⚫ **DARK** = Background
|
||||
- Section backgrounds
|
||||
- Content areas
|
||||
- Normal display areas
|
||||
|
||||
⚪ **CYAN** = Emphasis
|
||||
- Current language display
|
||||
- Important text
|
||||
- Header highlights
|
||||
|
||||
---
|
||||
|
||||
## Status Display Details
|
||||
|
||||
### Language Mode Row
|
||||
Shows current language:
|
||||
- `English` = Standard llama3.1 responses
|
||||
- `日本語 (Japanese)` = Swallow model responses
|
||||
|
||||
### Active Model Row
|
||||
Shows which model is being used:
|
||||
- `llama3.1` = When in English mode
|
||||
- `swallow` = When in Japanese mode
|
||||
|
||||
### Available Languages Row
|
||||
Always shows:
|
||||
```
|
||||
English, 日本語 (Japanese)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Notifications
|
||||
|
||||
When you toggle the language, a notification appears:
|
||||
|
||||
### English Mode (Toggle From Japanese)
|
||||
```
|
||||
✅ Miku is now speaking in ENGLISH!
|
||||
```
|
||||
|
||||
### Japanese Mode (Toggle From English)
|
||||
```
|
||||
✅ Miku is now speaking in JAPANESE!
|
||||
```
|
||||
|
||||
### Error (If Something Goes Wrong)
|
||||
```
|
||||
❌ Failed to toggle language mode
|
||||
[Check API is running]
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Mobile/Tablet Experience
|
||||
|
||||
On smaller screens:
|
||||
- Tab name may be abbreviated (⚙️ LLM)
|
||||
- Sections stack vertically
|
||||
- Toggle button still full-width
|
||||
- All functionality works the same
|
||||
- Text wraps properly
|
||||
- No horizontal scrolling needed
|
||||
|
||||
---
|
||||
|
||||
## Keyboard Navigation
|
||||
|
||||
The buttons are keyboard accessible:
|
||||
- **Tab** - Navigate between buttons
|
||||
- **Enter** - Activate button
|
||||
- **Shift+Tab** - Navigate backwards
|
||||
|
||||
---
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### Button Doesn't Respond
|
||||
- Check if API server is running
|
||||
- Check browser console for errors (F12)
|
||||
- Try clicking "Refresh Status" first
|
||||
|
||||
### Language Doesn't Change
|
||||
- Make sure you see the notification
|
||||
- Check if Swallow model is available
|
||||
- Look at server logs for errors
|
||||
|
||||
### Status Shows Wrong Language
|
||||
- Click "Refresh Status" button
|
||||
- Wait a moment and refresh page
|
||||
- Check if bot was recently restarted
|
||||
|
||||
### No Notification Appears
|
||||
- Check bottom-right corner of screen
|
||||
- Notification fades after 3 seconds
|
||||
- Check browser console for errors
|
||||
|
||||
---
|
||||
|
||||
## Quick Reference Card
|
||||
|
||||
```
|
||||
LOCATION: ⚙️ LLM Settings tab
|
||||
POSITION: Between Status and Image Generation tabs
|
||||
|
||||
MAIN ACTION: Click blue toggle button
|
||||
RESULT: Switch English ↔ Japanese
|
||||
|
||||
DISPLAY UPDATES:
|
||||
- Current Language: English/日本語
|
||||
- Active Model: llama3.1/swallow
|
||||
|
||||
CONFIRMATION: Green notification appears
|
||||
TESTING: Send message to Miku in Discord
|
||||
|
||||
RESET: Click "Refresh Status" button
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Tips & Tricks
|
||||
|
||||
1. **Quick Toggle** - Click the blue button for instant switch
|
||||
2. **Check Status** - Always visible in the tab (no need to refresh page)
|
||||
3. **Conversation Continues** - Switching languages preserves history
|
||||
4. **Mood Still Works** - Use mood system with any language
|
||||
5. **Global Setting** - One toggle affects all servers/DMs
|
||||
6. **Refresh Button** - Use if UI seems out of sync with server
|
||||
|
||||
---
|
||||
|
||||
## Enjoy!
|
||||
|
||||
Now you can easily switch Miku between English and Japanese! 🎤✨
|
||||
|
||||
**That's it! Have fun!** 🎉
|
||||
Reference in New Issue
Block a user