12 KiB
12 KiB
🎮 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 modeswallow= 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
- Quick Toggle - Click the blue button for instant switch
- Check Status - Always visible in the tab (no need to refresh page)
- Conversation Continues - Switching languages preserves history
- Mood Still Works - Use mood system with any language
- Global Setting - One toggle affects all servers/DMs
- 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! 🎉