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:**
```html
<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:**
```html
<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()`
```javascript
async function refreshLanguageStatus() {
  // Fetches current language mode from /language endpoint
  // Updates UI elements with current language and model
}
```

#### `toggleLanguageMode()`
```javascript
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:**
```javascript
document.addEventListener('DOMContentLoaded', function() {
  loadStatus();
  loadServers();
  loadLastPrompt();
  loadLogs();
  checkEvilModeStatus();
  checkBipolarModeStatus();
  checkGPUStatus();
  refreshFigurineSubscribers();
  loadProfilePictureMetadata();
  ...
});
```

**After:**
```javascript
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`
```json
{
  "language_mode": "english",
  "available_languages": ["english", "japanese"],
  "current_model": "llama3.1"
}
```

### POST `/language/toggle`
```json
{
  "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