miku-discord/readmes/WEB_UI_LANGUAGE_INTEGRATION.md

Web UI Integration - Japanese Language Mode

Changes Made to bot/static/index.html

1. Tab Navigation Updated (Line ~660)

Added new "⚙️ LLM Settings" tab between Status and Image Generation tabs.

Before:

<button class="tab-button" onclick="switchTab('tab3')">Status</button>
<button class="tab-button" onclick="switchTab('tab4')">🎨 Image Generation</button>
<button class="tab-button" onclick="switchTab('tab5')">📊 Autonomous Stats</button>
<button class="tab-button" onclick="switchTab('tab6')">💬 Chat with LLM</button>
<button class="tab-button" onclick="switchTab('tab7')">📞 Voice Call</button>

After:

<button class="tab-button" onclick="switchTab('tab3')">Status</button>
<button class="tab-button" onclick="switchTab('tab4')">⚙️ LLM Settings</button>
<button class="tab-button" onclick="switchTab('tab5')">🎨 Image Generation</button>
<button class="tab-button" onclick="switchTab('tab6')">📊 Autonomous Stats</button>
<button class="tab-button" onclick="switchTab('tab7')">💬 Chat with LLM</button>
<button class="tab-button" onclick="switchTab('tab8')">📞 Voice Call</button>

2. New LLM Tab Content (Line ~1177)

Inserted complete new tab (tab4) with:

• Language Mode Toggle Section - Blue-highlighted button to switch English ↔ Japanese
• Current Status Display - Shows current language and active model
• Information Panel - Explains how language mode works
• Model Information - Shows which models are used for each language

Features:

• Toggle button with visual feedback
• Real-time status display
• Color-coded sections (blue for active toggle, orange for info)
• Clear explanations of English vs Japanese modes

3. Tab ID Renumbering

All subsequent tabs have been renumbered:

• Old tab4 (Image Generation) → tab5
• Old tab5 (Autonomous Stats) → tab6
• Old tab6 (Chat with LLM) → tab7
• Old tab7 (Voice Call) → tab8

4. JavaScript Functions Added (Line ~2320)

Added two new async functions:

refreshLanguageStatus()

async function refreshLanguageStatus() {
  // Fetches current language mode from /language endpoint
  // Updates UI elements with current language and model
}

toggleLanguageMode()

async function toggleLanguageMode() {
  // Calls /language/toggle endpoint
  // Updates UI to reflect new language mode
  // Shows success notification
}

5. Page Initialization Updated (Line ~1617)

Added language status refresh to DOMContentLoaded event:

Before:

document.addEventListener('DOMContentLoaded', function() {
  loadStatus();
  loadServers();
  loadLastPrompt();
  loadLogs();
  checkEvilModeStatus();
  checkBipolarModeStatus();
  checkGPUStatus();
  refreshFigurineSubscribers();
  loadProfilePictureMetadata();
  ...
});

After:

document.addEventListener('DOMContentLoaded', function() {
  loadStatus();
  loadServers();
  loadLastPrompt();
  loadLogs();
  checkEvilModeStatus();
  checkBipolarModeStatus();
  checkGPUStatus();
  refreshLanguageStatus();  // ← NEW
  refreshFigurineSubscribers();
  loadProfilePictureMetadata();
  ...
});

UI Layout

The new LLM Settings tab includes:

🌐 Language Mode Section

• Toggle Button: Click to switch between English and Japanese
• Visual Indicator: Shows current language in blue
• Color Scheme: Blue for active toggle (matches system theme)

📊 Current Status Section

• Current Language: Displays "English" or "日本語 (Japanese)"
• Active Model: Shows which model is being used
• Available Languages: Lists both English and Japanese
• Refresh Button: Manually update status from server

ℹ️ How Language Mode Works

• Explains English mode behavior
• Explains Japanese mode behavior
• Notes that language is global (all servers/DMs)
• Mentions conversation history is preserved

Button Actions

Toggle Language Button

• Appearance: Blue background, white text, bold font
• Action: Sends POST request to /language/toggle
• Response: Updates UI and shows success notification
• Icon: 🔄 (refresh icon)

Refresh Status Button

• Appearance: Standard button
• Action: Sends GET request to /language
• Response: Updates status display
• Icon: 🔄 (refresh icon)

API Integration

The tab uses the following endpoints:

GET /language

{
  "language_mode": "english",
  "available_languages": ["english", "japanese"],
  "current_model": "llama3.1"
}

POST /language/toggle

{
  "status": "ok",
  "language_mode": "japanese",
  "model_now_using": "swallow",
  "message": "Miku is now speaking in JAPANESE!"
}

User Experience Flow

1. Page Load → Language status is automatically fetched and displayed
2. User Clicks Toggle → Language switches (English ↔ Japanese)
3. UI Updates → Display shows new language and model
4. Notification Appears → "Miku is now speaking in [LANGUAGE]!"
5. All Messages → Miku's responses are in selected language

Styling Details

• Tab Button: Matches existing UI theme (monospace font, dark background)
• Language Section: Blue highlight (#4a7bc9) for primary action
• Status Display: Dark background (#1a1a1a) for contrast
• Info Section: Orange accent (#ff9800) for informational content
• Text Colors: White for main text, cyan (#61dafb) for headers, gray (#aaa) for descriptions

Responsive Design

• Uses flexbox and grid layouts
• Sections stack properly on smaller screens
• Buttons are appropriately sized for clicking
• Text is readable at all screen sizes

Future Enhancements

1. Per-Server Language Settings - Store language preference per server
2. Language Indicator in Status - Show current language in status tab
3. Language-Specific Emojis - Different emojis for each language
4. Auto-Switch on User Language - Detect and auto-switch based on user messages
5. Language History - Show which language was used for each conversation