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