moved AI generated readmes to readme folder (may delete)
This commit is contained in:
190
readmes/WEB_UI_LANGUAGE_INTEGRATION.md
Normal file
190
readmes/WEB_UI_LANGUAGE_INTEGRATION.md
Normal file
@@ -0,0 +1,190 @@
|
||||
# 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
|
||||
Reference in New Issue
Block a user