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
3.7 KiB
Chat Interface - Quick Start Guide
🚀 Quick Start
Access the Chat Interface
- Open the Miku Control Panel in your browser
- Click on the "💬 Chat with LLM" tab
- 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
- Use Ctrl+Enter for quick sending
- Select model first before uploading images
- Clear history to start fresh conversations
- Toggle system prompt to compare responses
- 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! 🚀