miku-discord/readmes/WEB_UI_USER_GUIDE.md

# 🎮 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!** 🎉