# 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! 🚀