miku-discord/readmes/WEB_UI_VISUAL_GUIDE.md

# Web UI Visual Guide - Language Mode Toggle

## Tab Navigation

```
[Server Management] [Actions] [Status] [⚙️ LLM Settings] [🎨 Image Generation] [📊 Autonomous Stats] [💬 Chat with LLM] [📞 Voice Call]
                                                    ↑
                                            NEW TAB ADDED HERE
```

## LLM Settings Tab Layout

```
┌─────────────────────────────────────────────────────────────────┐
│ ⚙️ Language Model Settings                                       │
│ Configure language model behavior and language mode.             │
└─────────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────────┐
│ 🌐 Language Mode                                    (BLUE HEADER) │
│ 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 (trained for Japanese)      │ │
│ │ • Responds entirely in Japanese                             │ │
│ └─────────────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────────┐
│ 📊 Current Status                                                │
│                                                                   │
│ Language Mode:        English                                    │
│ Active Model:         llama3.1                                   │
│ Available Languages:  English, 日本語 (Japanese)                │
│                                                                   │
│ ┌─────────────────────────────────────────────────────────────┐ │
│ │ 🔄 Refresh Status                                          │ │
│ └─────────────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────────┐
│ ℹ️ How Language Mode Works          (ORANGE ACCENT)             │
│                                                                   │
│ • English mode uses your default text model for English responses│
│ • Japanese mode switches to Swallow and responds only in 日本語 │
│ • All personality traits, mood system, and features work in     │
│   both modes                                                     │
│ • Language mode is global - affects all servers and DMs         │
│ • Conversation history is preserved across language switches    │
└─────────────────────────────────────────────────────────────────┘
```

## Color Scheme

```
🔵 BLUE (#4a7bc9, #61dafb)
   - Primary toggle button background
   - Header text for main sections
   - Active/highlighted elements

🔶 ORANGE (#ff9800)
   - Information panel accent
   - Educational/help content

⚫ DARK (#1a1a1a, #2a2a2a)
   - Background colors for sections
   - Content areas

⚪ TEXT (#fff, #aaa, #61dafb)
   - White: Main text
   - Gray: Descriptions/secondary text
   - Cyan: Headers/emphasis
```

## Button States

### Toggle Language Button
```
Normal State:
┌──────────────────────────────────────────────────┐
│ 🔄 Toggle Language (English ↔ Japanese)         │
└──────────────────────────────────────────────────┘
Background: #4a7bc9 (Blue)
Border: 2px solid #61dafb (Cyan)
Text: White, Bold, 1rem

On Hover:
└──────────────────────────────────────────────────┘
(Standard hover effects apply)

On Click:
POST /language/toggle
→ Updates UI
→ Shows notification: "Miku is now speaking in JAPANESE!" ✅
```

### Refresh Status Button
```
Normal State:
┌──────────────────────────────────────────────────┐
│ 🔄 Refresh Status                               │
└──────────────────────────────────────────────────┘
Standard styling (gray background, white text)
```

## Dynamic Updates

### When Language is English
```
Current Language: English                          (white text)
Active Model:     llama3.1                        (white text)
```

### When Language is Japanese
```
Current Language: 日本語 (Japanese)                (cyan text)
Active Model:     swallow                         (white text)
```

### Notification (Bottom-Right)
```
┌────────────────────────────────────────────┐
│ ✅ Miku is now speaking in JAPANESE!       │
│                                            │
│ [Appears for 3-5 seconds then fades]     │
└────────────────────────────────────────────┘
```

## Responsive Behavior

### Desktop (Wide Screen)
```
All elements side-by-side
Buttons at full width (20rem)
Three columns in info section
```

### Tablet/Mobile (Narrow Screen)
```
Sections stack vertically
Buttons adjust width
Text wraps appropriately
Info lists adapt
```

## User Interaction Flow

```
1. User opens Web UI
   └─> Page loads
       └─> refreshLanguageStatus() called
           └─> Fetches /language endpoint
               └─> Updates display with current language

2. User clicks "Toggle Language" button
   └─> toggleLanguageMode() called
       └─> Sends POST to /language/toggle
           └─> Server updates LANGUAGE_MODE
               └─> Returns new language info
                   └─> JS updates display:
                       - current-language-display
                       - status-language
                       - status-model
                   └─> Shows notification: "Miku is now speaking in [X]!"

3. User sends message to Miku
   └─> query_llama() checks globals.LANGUAGE_MODE
       └─> If "japanese":
           - Uses swallow model
           - Loads miku_prompt_jp.txt
           └─> Response in 日本語

4. User clicks "Refresh Status"
   └─> refreshLanguageStatus() called (same as step 1)
       └─> Updates display with current server language
```

## Integration with Other UI Elements

The LLM Settings tab sits between:
- **Status Tab** (tab3) - Shows DM logs, last prompt
- **LLM Settings Tab** (tab4) - NEW! Language toggle
- **Image Generation Tab** (tab5) - ComfyUI controls

All tabs are independent and don't affect each other.

## Accessibility

✅ Large clickable buttons (0.6rem padding + 1rem font)
✅ Clear color contrast (blue on dark background)
✅ Descriptive labels and explanations
✅ Real-time status updates
✅ Error notifications if API fails
✅ Keyboard accessible (standard HTML elements)
✅ Tooltips on hover (browser default)

## Performance

- Uses async/await for non-blocking operations
- Caches API calls where appropriate
- No infinite loops or memory leaks
- Console logging for debugging
- Error handling with user notifications

## Testing Checklist

- [ ] Tab button appears between Status and Image Generation
- [ ] Click tab - content loads correctly
- [ ] Current language displays as "English"
- [ ] Current model displays as "llama3.1"
- [ ] Click toggle button - changes to "日本語 (Japanese)"
- [ ] Model changes to "swallow"
- [ ] Notification appears: "Miku is now speaking in JAPANESE!"
- [ ] Click toggle again - changes back to "English"
- [ ] Refresh page - status persists (from server)
- [ ] Refresh Status button updates from server
- [ ] Responsive on mobile/tablet
- [ ] No console errors