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