koko210Serve
bb82b7f146
Features: - Real-time streaming chat interface (ChatGPT-like experience) - Model selection: Text model (fast) or Vision model (image analysis) - System prompt toggle: Chat with Miku's personality or raw LLM - Mood selector: Choose from 14 different emotional states - Full context integration: Uses complete miku_lore.txt, miku_prompt.txt, and miku_lyrics.txt - Conversation memory: Maintains chat history throughout session - Image upload support for vision model - Horizontal scrolling tabs for responsive design - Clear chat history functionality - SSE (Server-Sent Events) for streaming responses - Keyboard shortcuts (Ctrl+Enter to send) Technical changes: - Added POST /chat/stream endpoint in api.py with streaming support - Updated ChatMessage model with mood, conversation_history, and image_data - Integrated context_manager for proper Miku personality context - Added Chat with LLM tab to index.html - Implemented JavaScript streaming client with EventSource-like handling - Added CSS for chat messages, typing indicators, and animations - Made tab navigation horizontally scrollable for narrow viewports
149 lines
3.7 KiB
Markdown
149 lines
3.7 KiB
Markdown
# Chat Interface - Quick Start Guide
|
|
|
|
## 🚀 Quick Start
|
|
|
|
### Access the Chat Interface
|
|
1. Open the Miku Control Panel in your browser
|
|
2. Click on the **"💬 Chat with LLM"** tab
|
|
3. Start chatting!
|
|
|
|
## 📋 Configuration Options
|
|
|
|
### Model Selection
|
|
- **💬 Text Model**: Fast text conversations
|
|
- **👁️ Vision Model**: Image analysis
|
|
|
|
### System Prompt
|
|
- **✅ Use Miku Personality**: Chat with Miku's character
|
|
- **❌ Raw LLM**: Direct LLM without personality
|
|
|
|
## 💡 Common Use Cases
|
|
|
|
### 1. Chat with Miku
|
|
```
|
|
Model: Text Model
|
|
System Prompt: Use Miku Personality
|
|
Message: "Hi Miku! How are you feeling today?"
|
|
```
|
|
|
|
### 2. Test Raw LLM
|
|
```
|
|
Model: Text Model
|
|
System Prompt: Raw LLM
|
|
Message: "Explain quantum physics"
|
|
```
|
|
|
|
### 3. Analyze Images with Miku
|
|
```
|
|
Model: Vision Model
|
|
System Prompt: Use Miku Personality
|
|
Upload: [your image]
|
|
Message: "What do you think of this image?"
|
|
```
|
|
|
|
### 4. Raw Image Analysis
|
|
```
|
|
Model: Vision Model
|
|
System Prompt: Raw LLM
|
|
Upload: [your image]
|
|
Message: "Describe this image in detail"
|
|
```
|
|
|
|
## ⌨️ Keyboard Shortcuts
|
|
- **Ctrl+Enter**: Send message
|
|
|
|
## 🎨 Features
|
|
- ✅ Real-time streaming (like ChatGPT)
|
|
- ✅ Image upload for vision model
|
|
- ✅ Color-coded messages
|
|
- ✅ Timestamps
|
|
- ✅ Typing indicators
|
|
- ✅ Auto-scroll
|
|
- ✅ Clear chat history
|
|
|
|
## 🔧 System Prompts
|
|
|
|
### Text Model with Miku
|
|
- Full Miku personality
|
|
- Current mood awareness
|
|
- Character consistency
|
|
|
|
### Vision Model with Miku
|
|
- Miku analyzing images
|
|
- Cheerful, playful descriptions
|
|
|
|
### No System Prompt
|
|
- Direct LLM responses
|
|
- No character constraints
|
|
|
|
## 📊 Message Types
|
|
|
|
### User Messages (Green)
|
|
- Your input
|
|
- Right-aligned appearance
|
|
|
|
### Assistant Messages (Blue)
|
|
- Miku/LLM responses
|
|
- Left-aligned appearance
|
|
- Streams in real-time
|
|
|
|
### Error Messages (Red)
|
|
- Connection errors
|
|
- Model errors
|
|
- Clear error descriptions
|
|
|
|
## 🎯 Tips
|
|
|
|
1. **Use Ctrl+Enter** for quick sending
|
|
2. **Select model first** before uploading images
|
|
3. **Clear history** to start fresh conversations
|
|
4. **Toggle system prompt** to compare responses
|
|
5. **Wait for streaming** to complete before sending next message
|
|
|
|
## 🐛 Troubleshooting
|
|
|
|
### No response?
|
|
- Check if llama.cpp is running
|
|
- Verify network connection
|
|
- Check browser console
|
|
|
|
### Image not working?
|
|
- Switch to Vision Model
|
|
- Use valid image format (JPG, PNG)
|
|
- Check file size
|
|
|
|
### Slow responses?
|
|
- Vision model is slower than text
|
|
- Wait for streaming to complete
|
|
- Check llama.cpp load
|
|
|
|
## 📝 Examples
|
|
|
|
### Example 1: Personality Test
|
|
**With Miku Personality:**
|
|
> User: "What's your favorite song?"
|
|
> Miku: "Oh, I love so many songs! But if I had to choose, I'd say 'World is Mine' holds a special place in my heart! It really captures that fun, playful energy that I love! ✨"
|
|
|
|
**Without System Prompt:**
|
|
> User: "What's your favorite song?"
|
|
> LLM: "I don't have personal preferences as I'm an AI language model..."
|
|
|
|
### Example 2: Image Analysis
|
|
**With Miku Personality:**
|
|
> User: [uploads sunset image] "What do you see?"
|
|
> Miku: "Wow! What a beautiful sunset! The sky is painted with such gorgeous oranges and pinks! It makes me want to write a song about it! The way the colors blend together is so dreamy and romantic~ 🌅💕"
|
|
|
|
**Without System Prompt:**
|
|
> User: [uploads sunset image] "What do you see?"
|
|
> LLM: "This image shows a sunset landscape. The sky displays orange and pink hues. The sun is setting on the horizon. There are silhouettes of trees in the foreground."
|
|
|
|
## 🎉 Enjoy Chatting!
|
|
|
|
Have fun experimenting with different combinations of:
|
|
- Text vs Vision models
|
|
- With vs Without system prompts
|
|
- Different types of questions
|
|
- Various images (for vision model)
|
|
|
|
The streaming interface makes it feel just like ChatGPT! 🚀
|