Deploy actual React-style frontend with FastAPI backend

app.py

@@ -1,9 +1,17 @@
-import gradio as gr
+#!/usr/bin/env python3
+"""
+Hugging Face Spaces deployment for Roleplay Chat Box
+Serves the React-style frontend with FastAPI backend
+"""
+
 import os
 import sys
-import asyncio
+import uvicorn
+from fastapi import FastAPI, Request, HTTPException
+from fastapi.staticfiles import StaticFiles
+from fastapi.responses import FileResponse, HTMLResponse
+from fastapi.middleware.cors import CORSMiddleware
 import logging
-from typing import List, Tuple, Optional
 
 # Setup logging
 logging.basicConfig(level=logging.INFO)
@@ -13,238 +21,130 @@ logger = logging.getLogger(__name__)
 backend_path = os.path.join(os.path.dirname(os.path.abspath(__file__)), 'backend')
 sys.path.insert(0, backend_path)
 
+# Import your existing REST server components
+try:
+    from backend.models.character_manager import CharacterManager
+    from backend.config import settings
+    logger.info("✅ Backend modules imported successfully")
+except ImportError as e:
+    logger.error(f"❌ Failed to import backend: {e}")
+    # Create a minimal fallback
+    class CharacterManager:
+        def __init__(self):
+            self.initialized = False
+        async def initialize(self):
+            self.initialized = True
+        async def get_response(self, character, message, history):
+            return f"[{character.upper()}]: I received your message: {message}"
+
+# Create FastAPI app
+app = FastAPI(title="Roleplay Chat Box", description="AI Roleplay Chat with Multiple Characters")
+
+# Add CORS middleware
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
 # Global character manager
 character_manager = None
-models_loaded = False
 
-def initialize_models():
-    """Initialize the character manager"""
-    global character_manager, models_loaded
-    
-    if models_loaded:
-        return "✅ Models already loaded!"
-    
+@app.on_event("startup")
+async def startup_event():
+    """Initialize the character manager on startup"""
+    global character_manager
     try:
-        from backend.models.character_manager import CharacterManager
-        
         character_manager = CharacterManager()
+        await character_manager.initialize()
+        logger.info("✅ Character manager initialized")
+    except Exception as e:
+        logger.error(f"❌ Failed to initialize character manager: {e}")
+        character_manager = CharacterManager()  # Fallback
+
+# API Routes (matching your existing REST API)
+@app.post("/api/chat")
+async def chat_endpoint(request: Request):
+    """Chat endpoint matching your original REST API"""
+    try:
+        data = await request.json()
+        character_id = data.get('character', 'moses')
+        message = data.get('message', '')
+        history = data.get('history', [])
         
-        # Initialize synchronously 
-        loop = asyncio.new_event_loop()
-        asyncio.set_event_loop(loop)
-        loop.run_until_complete(character_manager.initialize())
+        if not character_manager:
+            raise HTTPException(status_code=500, detail="Character manager not initialized")
+            
+        # Get response from character
+        response = await character_manager.get_response(character_id, message, history)
         
-        models_loaded = True
-        logger.info("✅ Character models initialized successfully!")
-        return "✅ Models loaded successfully!"
+        return {
+            "success": True,
+            "response": response,
+            "character": character_id
+        }
         
     except Exception as e:
-        logger.error(f"❌ Failed to initialize models: {e}")
-        return f"❌ Failed to load models: {str(e)}"
-
-def get_character_info():
-    """Get character information for display"""
-    return {
-        "moses": {
-            "name": "Moses",
-            "description": "📚 Wise biblical figure offering guidance and wisdom",
-            "avatar": "👨‍🏫"
-        },
-        "samsung_employee": {
-            "name": "Samsung Employee", 
-            "description": "💼 Professional tech support specialist",
-            "avatar": "👨‍💼"
-        },
-        "jinx": {
-            "name": "Jinx",
-            "description": "🎭 Chaotic and energetic character from Arcane", 
-            "avatar": "🔮"
+        logger.error(f"Chat error: {e}")
+        return {
+            "success": False,
+            "error": str(e),
+            "response": "I apologize, but I'm having trouble responding right now. Please try again."
         }
-    }
 
-def chat_with_character(message: str, character_id: str, history: List[Tuple[str, str]]) -> Tuple[List[Tuple[str, str]], str]:
-    """Generate character response and update chat history"""
-    global character_manager, models_loaded
-    
-    # Initialize if needed
-    if not models_loaded:
-        init_result = initialize_models()
-        if "Failed" in init_result:
-            return history + [(message, init_result)], ""
-    
-    if not message.strip():
-        return history, ""
-    
+@app.post("/api/switch-character")
+async def switch_character_endpoint(request: Request):
+    """Switch character endpoint"""
     try:
-        if character_manager is None:
-            return history + [(message, "❌ Character manager not initialized")], ""
-        
-        # Generate response
-        response = character_manager.generate_response(
-            character_id=character_id,
-            user_input=message,
-            max_length=512
-        )
+        data = await request.json()
+        character_id = data.get('character', 'moses')
         
-        # Update history
-        new_history = history + [(message, response)]
-        return new_history, ""
+        # Validate character
+        valid_characters = ['moses', 'samsung_employee', 'jinx']
+        if character_id not in valid_characters:
+            raise HTTPException(status_code=400, detail="Invalid character")
+            
+        return {
+            "success": True,
+            "character": character_id,
+            "message": f"Switched to {character_id}"
+        }
         
     except Exception as e:
-        logger.error(f"Error generating response: {e}")
-        error_response = f"❌ Error: {str(e)}"
-        return history + [(message, error_response)], ""
-
-def get_character_display_html(character_id: str) -> str:
-    """Generate HTML for character display"""
-    char_info = get_character_info()
-    if character_id not in char_info:
-        return "<div>Character not found</div>"
-    
-    info = char_info[character_id]
-    return f"""
-    <div style="text-align: center; padding: 20px; background: linear-gradient(45deg, #667eea 0%, #764ba2 100%); 
-                color: white; border-radius: 15px; margin: 10px;">
-        <div style="font-size: 4rem; margin-bottom: 10px;">{info['avatar']}</div>
-        <h2 style="margin: 10px 0; color: white;">{info['name']}</h2>
-        <p style="margin: 0; opacity: 0.9; font-size: 1.1rem;">{info['description']}</p>
-    </div>
-    """
+        return {"success": False, "error": str(e)}
 
-def create_interface():
-    """Create the main Gradio interface"""
-    
-    # Custom CSS
-    custom_css = """
-    .gradio-container {
-        max-width: 1200px !important;
-    }
-    .character-display {
-        min-height: 200px;
-    }
-    .chat-container {
-        height: 500px;
+@app.get("/api/voice-status")
+async def voice_status():
+    """Voice status endpoint"""
+    return {
+        "available": False,  # Disabled for Spaces deployment
+        "enabled": False
     }
-    """
-    
-    with gr.Blocks(
-        title="🎭 Roleplay Chat Box",
-        theme=gr.themes.Soft(primary_hue="purple"),
-        css=custom_css
-    ) as demo:
-        
-        gr.Markdown("# 🎭 Roleplay Chat Box")
-        gr.Markdown("### Chat with AI characters, each with unique personalities!")
-        
-        with gr.Row():
-            # Character selection column
-            with gr.Column(scale=1):
-                gr.Markdown("## 👥 Choose Character")
-                
-                character_dropdown = gr.Dropdown(
-                    choices=[
-                        ("👨‍🏫 Moses", "moses"),
-                        ("👨‍💼 Samsung Employee", "samsung_employee"), 
-                        ("🔮 Jinx", "jinx")
-                    ],
-                    value="moses",
-                    label="Select Character",
-                    interactive=True
-                )
-                
-                # Character info display
-                character_display = gr.HTML(
-                    value=get_character_display_html("moses"),
-                    elem_classes=["character-display"]
-                )
-                
-                # Update character display when selection changes
-                character_dropdown.change(
-                    fn=get_character_display_html,
-                    inputs=[character_dropdown],
-                    outputs=[character_display]
-                )
-            
-            # Chat column
-            with gr.Column(scale=2):
-                gr.Markdown("## 💬 Chat")
-                
-                chatbot = gr.Chatbot(
-                    height=500,
-                    show_label=False,
-                    elem_classes=["chat-container"]
-                )
-                
-                with gr.Row():
-                    msg_input = gr.Textbox(
-                        placeholder="Type your message here...",
-                        show_label=False,
-                        scale=4,
-                        lines=2
-                    )
-                    
-                    with gr.Column(scale=1):
-                        send_btn = gr.Button("Send 📨", variant="primary")
-                        clear_btn = gr.Button("Clear 🗑️")
-        
-        # Status section
-        with gr.Row():
-            status_display = gr.Textbox(
-                value="Click 'Initialize Models' to start chatting!",
-                label="Status",
-                interactive=False
-            )
-            init_btn = gr.Button("Initialize Models 🚀", variant="secondary")
-        
-        # Event handlers
-        def send_message(message, character_id, history):
-            return chat_with_character(message, character_id, history)
-        
-        def clear_chat():
-            return [], "Chat cleared!"
-        
-        def init_models_handler():
-            return initialize_models()
-        
-        # Button clicks
-        send_btn.click(
-            fn=send_message,
-            inputs=[msg_input, character_dropdown, chatbot],
-            outputs=[chatbot, msg_input]
-        )
-        
-        msg_input.submit(
-            fn=send_message,
-            inputs=[msg_input, character_dropdown, chatbot],
-            outputs=[chatbot, msg_input]
-        )
-        
-        clear_btn.click(
-            fn=clear_chat,
-            outputs=[chatbot, status_display]
-        )
-        
-        init_btn.click(
-            fn=init_models_handler,
-            outputs=[status_display]
+
+# Static file serving
+app.mount("/static", StaticFiles(directory="frontend/static"), name="static")
+
+@app.get("/")
+async def serve_index():
+    """Serve the main React-style frontend"""
+    try:
+        with open("frontend/index.html", "r", encoding="utf-8") as f:
+            content = f.read()
+        return HTMLResponse(content=content)
+    except FileNotFoundError:
+        return HTMLResponse(
+            content="<h1>Frontend not found</h1><p>Please ensure frontend files are properly deployed.</p>",
+            status_code=404
         )
-        
-        # Example interactions
-        gr.Markdown("""
-        ### 💡 Example Conversations
-        - **Moses**: "What is the meaning of wisdom?"
-        - **Samsung Employee**: "Tell me about the latest Samsung phones"
-        - **Jinx**: "I need help with a creative project!"
-        """)
-    
-    return demo
 
+@app.get("/health")
+async def health_check():
+    """Health check endpoint"""
+    return {"status": "healthy", "characters_loaded": character_manager is not None}
+
+# Run the server
 if __name__ == "__main__":
-    # Create and launch the interface
-    demo = create_interface()
-    demo.launch(
-        server_name="0.0.0.0",
-        server_port=7860,
-        show_error=True,
-        share=False
-    )
+    port = int(os.environ.get("PORT", 7860))  # Hugging Face Spaces uses port 7860
+    uvicorn.run(app, host="0.0.0.0", port=port)

frontend/index.html

@@ -0,0 +1,214 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Roleplay Chat</title>
+    <link rel="stylesheet" href="static/css/style.css">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+</head>
+<body>
+    <div class="app-container">
+        <!-- Sidebar for character selection -->
+        <div class="sidebar">
+            <div class="sidebar-header">
+                <h2><i class="fas fa-masks-theater"></i> Characters</h2>
+                <button class="new-chat-btn" onclick="startNewChat()">
+                    <i class="fas fa-plus"></i> New Chat
+                </button>
+            </div>
+            
+            <div class="characters-list">
+                <div class="character-card" data-character="moses">
+                    <div class="character-avatar">
+                        <img src="static/avatars/moses.svg" alt="Moses" onerror="this.src='static/avatars/default.svg'">
+                    </div>
+                    <div class="character-info">
+                        <h3>Moses</h3>
+                        <p>Biblical Prophet</p>
+                    </div>
+                </div>
+                
+                <div class="character-card" data-character="samsung_employee">
+                    <div class="character-avatar">
+                        <img src="static/avatars/samsung.svg" alt="Samsung Employee" onerror="this.src='static/avatars/default.svg'">
+                    </div>
+                    <div class="character-info">
+                        <h3>Samsung Employee</h3>
+                        <p>Tech Expert</p>
+                    </div>
+                </div>
+                
+                <div class="character-card" data-character="jinx">
+                    <div class="character-avatar">
+                        <img src="static/avatars/jinx.svg" alt="Jinx" onerror="this.src='static/avatars/default.svg'">
+                    </div>
+                    <div class="character-info">
+                        <h3>Jinx</h3>
+                        <p>Chaotic Genius</p>
+                    </div>
+                </div>
+            </div>
+            
+            <div class="sidebar-footer">
+                <button class="resources-btn" onclick="showResources()">
+                    <i class="fas fa-book"></i> Resources
+                </button>
+                <button class="settings-btn" onclick="showSettings()">
+                    <i class="fas fa-cog"></i> Settings
+                </button>
+            </div>
+        </div>
+        
+        <!-- Main chat area -->
+        <div class="main-content">
+            <div class="chat-header">
+                <div class="current-character">
+                    <div class="character-avatar-small">
+                        <img id="current-avatar" src="static/avatars/moses.svg" alt="Current Character">
+                    </div>
+                    <div class="character-details">
+                        <h2 id="current-character-name">Moses</h2>
+                        <p id="current-character-desc">Biblical Prophet and Lawgiver</p>
+                    </div>
+                </div>
+                
+                <div class="chat-controls">
+                    <button class="voice-toggle" onclick="toggleVoice()" title="Toggle Voice Output">
+                        <i id="voice-icon" class="fas fa-volume-up"></i>
+                    </button>
+                    <button class="clear-chat" onclick="clearChat()" title="Clear Chat">
+                        <i class="fas fa-trash"></i>
+                    </button>
+                </div>
+            </div>
+            
+            <div class="chat-messages" id="chat-messages">
+                <div class="welcome-message">
+                    <div class="message-avatar">
+                        <img src="static/avatars/moses.svg" alt="Moses">
+                    </div>
+                    <div class="message-content">
+                        <p>Peace be with you, my child. I am Moses, the lawgiver and prophet of the Most High. How may I guide you in righteousness?</p>
+                    </div>
+                </div>
+            </div>
+            
+            <div class="chat-input-container">
+                <div class="typing-indicator" id="typing-indicator" style="display: none;">
+                    <div class="typing-dots">
+                        <span></span>
+                        <span></span>
+                        <span></span>
+                    </div>
+                    <span id="typing-character">Moses</span> is typing...
+                </div>
+                
+                <div class="chat-input-wrapper">
+                    <textarea 
+                        id="message-input" 
+                        placeholder="Message Moses..."
+                        rows="1"
+                        onkeydown="handleKeyPress(event)"
+                        oninput="autoResize(this)"
+                    ></textarea>
+                    <button class="send-button" onclick="sendMessage()" id="send-btn">
+                        <i class="fas fa-paper-plane"></i>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <!-- Resources Modal -->
+    <div class="modal" id="resources-modal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h2>Resources & Architecture</h2>
+                <button class="close-modal" onclick="closeModal('resources-modal')">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+            <div class="modal-body">
+                <div class="resource-section">
+                    <h3>Models Used</h3>
+                    <div class="resource-links">
+                        <a href="https://huggingface.co/Polarium/qwen2-yoda-lora" target="_blank" class="resource-link">
+                            <i class="fab fa-huggingface"></i>
+                            Qwen2 Base Model (Polarium/qwen2-yoda-lora)
+                        </a>
+                        <a href="https://huggingface.co/microsoft/VibeVoice-1.5B" target="_blank" class="resource-link">
+                            <i class="fab fa-microsoft"></i>
+                            VibeVoice-1.5B (Text-to-Speech)
+                        </a>
+                    </div>
+                </div>
+                
+                <div class="resource-section">
+                    <h3>System Architecture</h3>
+                    <div class="architecture-diagram">
+                        <img src="static/diagrams/architecture.png" alt="System Architecture" onerror="this.style.display='none'">
+                    </div>
+                    <div class="architecture-text">
+                        <h4>Components:</h4>
+                        <ul>
+                            <li><strong>Frontend:</strong> HTML/CSS/JS with WebSocket communication</li>
+                            <li><strong>Backend:</strong> FastAPI with character management</li>
+                            <li><strong>Base Model:</strong> Qwen2-7B-Instruct for conversation</li>
+                            <li><strong>LoRA Adapters:</strong> Character-specific fine-tuning</li>
+                            <li><strong>Voice Synthesis:</strong> VibeVoice for audio output</li>
+                        </ul>
+                    </div>
+                </div>
+                
+                <div class="resource-section">
+                    <h3>LoRA Implementation</h3>
+                    <p>Low-Rank Adaptation (LoRA) allows efficient character switching by:</p>
+                    <ul>
+                        <li>Keeping base model frozen</li>
+                        <li>Training small adapter matrices for each character</li>
+                        <li>Switching adapters at inference time</li>
+                        <li>Reducing memory usage by ~90%</li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <!-- Settings Modal -->
+    <div class="modal" id="settings-modal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h2>Settings</h2>
+                <button class="close-modal" onclick="closeModal('settings-modal')">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+            <div class="modal-body">
+                <div class="setting-group">
+                    <label>Voice Output</label>
+                    <input type="checkbox" id="voice-enabled" checked onchange="updateVoiceSetting()">
+                </div>
+                <div class="setting-group">
+                    <label>Response Speed</label>
+                    <select id="response-speed">
+                        <option value="0.5">Slow</option>
+                        <option value="0.7" selected>Normal</option>
+                        <option value="0.9">Fast</option>
+                    </select>
+                </div>
+                <div class="setting-group">
+                    <label>Theme</label>
+                    <select id="theme-select" onchange="changeTheme()">
+                        <option value="dark">Dark</option>
+                        <option value="light">Light</option>
+                    </select>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <script src="static/js/rest_app.js"></script>
+</body>
+</html>

frontend/static/css/style.css

@@ -0,0 +1,700 @@
+:root {
+    --bg-primary: #1a1a1a;
+    --bg-secondary: #2d2d2d;
+    --bg-tertiary: #3a3a3a;
+    --text-primary: #ffffff;
+    --text-secondary: #b3b3b3;
+    --accent-primary: #4a90e2;
+    --accent-secondary: #357abd;
+    --border-color: #404040;
+    --success-color: #28a745;
+    --warning-color: #ffc107;
+    --danger-color: #dc3545;
+    --message-user: #4a90e2;
+    --message-assistant: #2d2d2d;
+    --sidebar-width: 280px;
+}
+
+[data-theme="light"] {
+    --bg-primary: #ffffff;
+    --bg-secondary: #f8f9fa;
+    --bg-tertiary: #e9ecef;
+    --text-primary: #212529;
+    --text-secondary: #6c757d;
+    --accent-primary: #4a90e2;
+    --accent-secondary: #357abd;
+    --border-color: #dee2e6;
+    --message-user: #4a90e2;
+    --message-assistant: #f8f9fa;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    background-color: var(--bg-primary);
+    color: var(--text-primary);
+    height: 100vh;
+    overflow: hidden;
+}
+
+.app-container {
+    display: flex;
+    height: 100vh;
+}
+
+
+
+/* Notification Styles */
+.notification {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    background: linear-gradient(135deg, #4a90e2, #357abd);
+    color: white;
+    padding: 1rem 1.5rem;
+    border-radius: 12px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    z-index: 1000;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    max-width: 400px;
+    animation: slideIn 0.3s ease-out;
+}
+
+.notification.success {
+    background: linear-gradient(135deg, #28a745, #20c997);
+}
+
+.notification.error {
+    background: linear-gradient(135deg, #dc3545, #c82333);
+}
+
+.notification.info {
+    background: linear-gradient(135deg, #17a2b8, #138496);
+}
+
+.notification button {
+    background: none;
+    border: none;
+    color: white;
+    font-size: 1.2rem;
+    cursor: pointer;
+    margin-left: auto;
+    padding: 0;
+    width: 20px;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+@keyframes slideIn {
+    from {
+        transform: translateX(100%);
+        opacity: 0;
+    }
+    to {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
+/* Sidebar Styles */
+.sidebar {
+    width: var(--sidebar-width);
+    background-color: var(--bg-secondary);
+    border-right: 1px solid var(--border-color);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.sidebar-header {
+    padding: 20px;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.sidebar-header h2 {
+    font-size: 18px;
+    font-weight: 600;
+    margin-bottom: 16px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.new-chat-btn {
+    width: 100%;
+    padding: 12px;
+    background-color: var(--accent-primary);
+    color: white;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 14px;
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    transition: background-color 0.2s;
+}
+
+.new-chat-btn:hover {
+    background-color: var(--accent-secondary);
+}
+
+.characters-list {
+    flex: 1;
+    padding: 20px;
+    overflow-y: auto;
+}
+
+.character-card {
+    display: flex;
+    align-items: center;
+    padding: 16px;
+    margin-bottom: 12px;
+    background-color: var(--bg-tertiary);
+    border-radius: 12px;
+    cursor: pointer;
+    transition: all 0.2s;
+    border: 2px solid transparent;
+}
+
+.character-card:hover {
+    background-color: var(--bg-primary);
+    transform: translateY(-2px);
+}
+
+.character-card.active {
+    border-color: var(--accent-primary);
+    background-color: var(--accent-primary);
+    color: white;
+}
+
+.character-avatar {
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    overflow: hidden;
+    margin-right: 12px;
+    flex-shrink: 0;
+}
+
+.character-avatar img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.character-info h3 {
+    font-size: 16px;
+    font-weight: 600;
+    margin-bottom: 4px;
+}
+
+.character-info p {
+    font-size: 13px;
+    color: var(--text-secondary);
+}
+
+.character-card.active .character-info p {
+    color: rgba(255, 255, 255, 0.8);
+}
+
+.sidebar-footer {
+    padding: 20px;
+    border-top: 1px solid var(--border-color);
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.resources-btn, .settings-btn {
+    padding: 12px;
+    background-color: transparent;
+    color: var(--text-secondary);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    transition: all 0.2s;
+}
+
+.resources-btn:hover, .settings-btn:hover {
+    background-color: var(--bg-tertiary);
+    color: var(--text-primary);
+}
+
+/* Main Content Styles */
+.main-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    background-color: var(--bg-primary);
+}
+
+.chat-header {
+    padding: 20px;
+    border-bottom: 1px solid var(--border-color);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: var(--bg-secondary);
+}
+
+.current-character {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.character-avatar-small {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    overflow: hidden;
+}
+
+.character-avatar-small img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.character-details h2 {
+    font-size: 20px;
+    font-weight: 600;
+    margin-bottom: 2px;
+}
+
+.character-details p {
+    font-size: 14px;
+    color: var(--text-secondary);
+}
+
+.chat-controls {
+    display: flex;
+    gap: 12px;
+}
+
+.voice-toggle, .clear-chat {
+    width: 40px;
+    height: 40px;
+    border: none;
+    border-radius: 8px;
+    background-color: var(--bg-tertiary);
+    color: var(--text-primary);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s;
+}
+
+.voice-toggle:hover, .clear-chat:hover {
+    background-color: var(--bg-primary);
+}
+
+.voice-toggle.active {
+    background-color: var(--success-color);
+    color: white;
+}
+
+/* Chat Messages */
+.chat-messages {
+    flex: 1;
+    overflow-y: auto;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+.message {
+    display: flex;
+    gap: 12px;
+    max-width: 80%;
+    animation: fadeIn 0.3s ease-out;
+}
+
+.message.user {
+    align-self: flex-end;
+    flex-direction: row-reverse;
+}
+
+.message-avatar {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    overflow: hidden;
+    flex-shrink: 0;
+}
+
+.message-avatar img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.message-content {
+    background-color: var(--message-assistant);
+    padding: 16px;
+    border-radius: 16px;
+    position: relative;
+}
+
+.message.user .message-content {
+    background-color: var(--message-user);
+    color: white;
+}
+
+.message-content p {
+    margin: 0;
+    line-height: 1.5;
+}
+
+.welcome-message {
+    display: flex;
+    gap: 12px;
+    margin-bottom: 20px;
+    opacity: 0.7;
+}
+
+.welcome-message .message-content {
+    background-color: var(--bg-secondary);
+    border: 1px solid var(--border-color);
+}
+
+/* Chat Input */
+.chat-input-container {
+    padding: 20px;
+    border-top: 1px solid var(--border-color);
+    background-color: var(--bg-secondary);
+}
+
+.typing-indicator {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 12px;
+    font-size: 14px;
+    color: var(--text-secondary);
+}
+
+.typing-dots {
+    display: flex;
+    gap: 4px;
+}
+
+.typing-dots span {
+    width: 6px;
+    height: 6px;
+    background-color: var(--accent-primary);
+    border-radius: 50%;
+    animation: typingDot 1.4s infinite ease-in-out;
+}
+
+.typing-dots span:nth-child(2) {
+    animation-delay: 0.16s;
+}
+
+.typing-dots span:nth-child(3) {
+    animation-delay: 0.32s;
+}
+
+.chat-input-wrapper {
+    display: flex;
+    gap: 12px;
+    align-items: flex-end;
+}
+
+#message-input {
+    flex: 1;
+    min-height: 48px;
+    max-height: 120px;
+    padding: 12px 16px;
+    border: 1px solid var(--border-color);
+    border-radius: 24px;
+    background-color: var(--bg-primary);
+    color: var(--text-primary);
+    font-family: inherit;
+    font-size: 14px;
+    resize: none;
+    outline: none;
+    transition: border-color 0.2s;
+}
+
+#message-input:focus {
+    border-color: var(--accent-primary);
+}
+
+#message-input::placeholder {
+    color: var(--text-secondary);
+}
+
+.send-button {
+    width: 48px;
+    height: 48px;
+    border: none;
+    border-radius: 50%;
+    background-color: var(--accent-primary);
+    color: white;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s;
+}
+
+.send-button:hover {
+    background-color: var(--accent-secondary);
+    transform: scale(1.05);
+}
+
+.send-button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    transform: none;
+}
+
+/* Modal Styles */
+.modal {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 1000;
+    backdrop-filter: blur(4px);
+}
+
+.modal.active {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.modal-content {
+    background-color: var(--bg-secondary);
+    border-radius: 16px;
+    width: 90%;
+    max-width: 600px;
+    max-height: 80vh;
+    overflow: hidden;
+    animation: modalSlideIn 0.3s ease-out;
+}
+
+.modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 24px;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.modal-header h2 {
+    font-size: 20px;
+    font-weight: 600;
+}
+
+.close-modal {
+    width: 32px;
+    height: 32px;
+    border: none;
+    background: none;
+    color: var(--text-secondary);
+    cursor: pointer;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s;
+}
+
+.close-modal:hover {
+    background-color: var(--bg-tertiary);
+    color: var(--text-primary);
+}
+
+.modal-body {
+    padding: 24px;
+    overflow-y: auto;
+    max-height: 60vh;
+}
+
+.resource-section {
+    margin-bottom: 32px;
+}
+
+.resource-section h3 {
+    font-size: 18px;
+    font-weight: 600;
+    margin-bottom: 16px;
+    color: var(--accent-primary);
+}
+
+.resource-links {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.resource-link {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 16px;
+    background-color: var(--bg-tertiary);
+    border-radius: 12px;
+    text-decoration: none;
+    color: var(--text-primary);
+    transition: all 0.2s;
+}
+
+.resource-link:hover {
+    background-color: var(--accent-primary);
+    color: white;
+    transform: translateY(-2px);
+}
+
+.architecture-diagram img {
+    width: 100%;
+    border-radius: 8px;
+    margin: 16px 0;
+}
+
+.architecture-text ul {
+    margin-left: 20px;
+    margin-top: 12px;
+}
+
+.architecture-text li {
+    margin-bottom: 8px;
+    line-height: 1.5;
+}
+
+.setting-group {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16px 0;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.setting-group:last-child {
+    border-bottom: none;
+}
+
+.setting-group label {
+    font-weight: 500;
+}
+
+.setting-group input, .setting-group select {
+    padding: 8px 12px;
+    border: 1px solid var(--border-color);
+    border-radius: 6px;
+    background-color: var(--bg-primary);
+    color: var(--text-primary);
+}
+
+/* Animations */
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes typingDot {
+    0%, 80%, 100% {
+        transform: scale(0);
+        opacity: 0.5;
+    }
+    40% {
+        transform: scale(1);
+        opacity: 1;
+    }
+}
+
+@keyframes modalSlideIn {
+    from {
+        opacity: 0;
+        transform: scale(0.9) translateY(-20px);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1) translateY(0);
+    }
+}
+
+/* Scrollbar Styles */
+.chat-messages::-webkit-scrollbar,
+.modal-body::-webkit-scrollbar {
+    width: 6px;
+}
+
+.chat-messages::-webkit-scrollbar-track,
+.modal-body::-webkit-scrollbar-track {
+    background: var(--bg-secondary);
+}
+
+.chat-messages::-webkit-scrollbar-thumb,
+.modal-body::-webkit-scrollbar-thumb {
+    background: var(--border-color);
+    border-radius: 3px;
+}
+
+.chat-messages::-webkit-scrollbar-thumb:hover,
+.modal-body::-webkit-scrollbar-thumb:hover {
+    background: var(--text-secondary);
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .app-container {
+        flex-direction: column;
+    }
+    
+    .sidebar {
+        width: 100%;
+        height: auto;
+        position: relative;
+    }
+    
+    .characters-list {
+        display: flex;
+        overflow-x: auto;
+        padding: 12px 20px;
+    }
+    
+    .character-card {
+        min-width: 200px;
+        margin-right: 12px;
+        margin-bottom: 0;
+    }
+    
+    .main-content {
+        height: calc(100vh - 200px);
+    }
+    
+    .message {
+        max-width: 95%;
+    }
+}

frontend/static/js/app.js

@@ -0,0 +1,442 @@
+// WebSocket connection
+let ws = null;
+let clientId = generateClientId();
+let currentCharacter = 'moses';
+let conversationHistory = [];
+let voiceEnabled = true;
+
+// Initialize the application
+document.addEventListener('DOMContentLoaded', function() {
+    initializeWebSocket();
+    setupCharacterSelection();
+    setupEventListeners();
+    loadSettings();
+});
+
+function generateClientId() {
+    return 'client_' + Math.random().toString(36).substr(2, 9);
+}
+
+function initializeWebSocket() {
+    const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const wsUrl = `${wsProtocol}//${window.location.host}/ws/${clientId}`;
+    
+    ws = new WebSocket(wsUrl);
+    
+    ws.onopen = function() {
+        console.log('WebSocket connected');
+        updateConnectionStatus(true);
+    };
+    
+    ws.onmessage = function(event) {
+        const data = JSON.parse(event.data);
+        handleWebSocketMessage(data);
+    };
+    
+    ws.onclose = function() {
+        console.log('WebSocket disconnected');
+        updateConnectionStatus(false);
+        
+        // Attempt to reconnect after 3 seconds
+        setTimeout(initializeWebSocket, 3000);
+    };
+    
+    ws.onerror = function(error) {
+        console.error('WebSocket error:', error);
+        updateConnectionStatus(false);
+    };
+}
+
+function updateConnectionStatus(connected) {
+    // You could add a connection indicator in the UI
+    const sendBtn = document.getElementById('send-btn');
+    sendBtn.disabled = !connected;
+}
+
+function handleWebSocketMessage(data) {
+    switch(data.type) {
+        case 'character_switched':
+            console.log(`Switched to character: ${data.character_id}`);
+            break;
+            
+        case 'chat_response':
+            hideTypingIndicator();
+            displayMessage(data.response, 'assistant', data.character_id);
+            
+            // Play audio if available
+            if (data.audio && voiceEnabled) {
+                playAudio(data.audio);
+            }
+            break;
+    }
+}
+
+function setupCharacterSelection() {
+    const characterCards = document.querySelectorAll('.character-card');
+    
+    characterCards.forEach(card => {
+        card.addEventListener('click', function() {
+            const characterId = this.dataset.character;
+            switchCharacter(characterId);
+            
+            // Show enhancement notification
+            showEnhancementNotification(characterId);
+        });
+    });
+    
+    // Set initial character as active
+    setActiveCharacter(currentCharacter);
+}
+
+function showEnhancementNotification(character) {
+    const notifications = {
+        'moses': 'Moses enhanced with 70 examples of divine wisdom and biblical knowledge',
+        'samsung_employee': 'Samsung Employee enhanced with 60 examples of technical expertise',
+        'jinx': 'Jinx enhanced with 60 examples of chaotic personality and emotional depth'
+    };
+    
+    const message = notifications[character] || 'Character enhanced with 5x training data';
+    showNotification(message, 'enhancement');
+}
+
+function showNotification(message, type = 'info') {
+    // Remove existing notifications
+    document.querySelectorAll('.notification').forEach(n => n.remove());
+    
+    const notification = document.createElement('div');
+    notification.className = `notification ${type}`;
+    notification.innerHTML = `
+        <i class="fas fa-star"></i>
+        <span>${message}</span>
+        <button onclick="this.parentElement.remove()">×</button>
+    `;
+    
+    document.body.appendChild(notification);
+    
+    // Auto remove after 5 seconds
+    setTimeout(() => {
+        notification.remove();
+    }, 5000);
+}
+
+function setupEventListeners() {
+    const messageInput = document.getElementById('message-input');
+    const sendBtn = document.getElementById('send-btn');
+    
+    // Send message on button click
+    sendBtn.addEventListener('click', sendMessage);
+    
+    // Auto-resize textarea
+    messageInput.addEventListener('input', function() {
+        autoResize(this);
+    });
+}
+
+function handleKeyPress(event) {
+    if (event.key === 'Enter' && !event.shiftKey) {
+        event.preventDefault();
+        sendMessage();
+    }
+}
+
+function autoResize(textarea) {
+    textarea.style.height = 'auto';
+    textarea.style.height = Math.min(textarea.scrollHeight, 120) + 'px';
+}
+
+function switchCharacter(characterId) {
+    if (currentCharacter === characterId) return;
+    
+    currentCharacter = characterId;
+    setActiveCharacter(characterId);
+    updateChatHeader(characterId);
+    
+    // Send switch message via WebSocket
+    if (ws && ws.readyState === WebSocket.OPEN) {
+        ws.send(JSON.stringify({
+            type: 'switch_character',
+            character_id: characterId
+        }));
+    }
+    
+    // Clear current chat and show welcome message
+    clearChat();
+    showWelcomeMessage(characterId);
+}
+
+function setActiveCharacter(characterId) {
+    const characterCards = document.querySelectorAll('.character-card');
+    
+    characterCards.forEach(card => {
+        card.classList.remove('active');
+        if (card.dataset.character === characterId) {
+            card.classList.add('active');
+        }
+    });
+}
+
+function updateChatHeader(characterId) {
+    const characters = {
+        'moses': {
+            name: 'Moses',
+            description: 'Biblical Prophet and Lawgiver',
+            avatar: 'static/avatars/moses.svg'
+        },
+        'samsung_employee': {
+            name: 'Samsung Employee',
+            description: 'Tech Expert and Product Specialist',
+            avatar: 'static/avatars/samsung.svg'
+        },
+        'jinx': {
+            name: 'Jinx',
+            description: 'Chaotic Genius from Arcane',
+            avatar: 'static/avatars/jinx.svg'
+        }
+    };
+    
+    const character = characters[characterId];
+    if (character) {
+        document.getElementById('current-character-name').textContent = character.name;
+        document.getElementById('current-character-desc').textContent = character.description;
+        document.getElementById('current-avatar').src = character.avatar;
+        document.getElementById('message-input').placeholder = `Message ${character.name}...`;
+        document.getElementById('typing-character').textContent = character.name;
+    }
+}
+
+function sendMessage() {
+    const messageInput = document.getElementById('message-input');
+    const message = messageInput.value.trim();
+    
+    if (!message || !ws || ws.readyState !== WebSocket.OPEN) return;
+    
+    // Display user message
+    displayMessage(message, 'user');
+    
+    // Add to conversation history
+    conversationHistory.push({
+        role: 'user',
+        content: message
+    });
+    
+    // Show typing indicator
+    showTypingIndicator();
+    
+    // Send via WebSocket
+    ws.send(JSON.stringify({
+        type: 'chat_message',
+        text: message,
+        history: conversationHistory.slice(-10), // Keep last 10 messages
+        include_audio: voiceEnabled,
+        timestamp: Date.now()
+    }));
+    
+    // Clear input
+    messageInput.value = '';
+    autoResize(messageInput);
+}
+
+function displayMessage(content, sender, characterId = null) {
+    const chatMessages = document.getElementById('chat-messages');
+    const messageDiv = document.createElement('div');
+    messageDiv.className = `message ${sender}`;
+    
+    let avatarSrc = '';
+    if (sender === 'user') {
+        avatarSrc = 'static/avatars/user.svg';
+    } else {
+        const avatars = {
+            'moses': 'static/avatars/moses.svg',
+            'samsung_employee': 'static/avatars/samsung.svg',
+            'jinx': 'static/avatars/jinx.svg'
+        };
+        avatarSrc = avatars[characterId || currentCharacter];
+    }
+    
+    messageDiv.innerHTML = `
+        <div class="message-avatar">
+            <img src="${avatarSrc}" alt="${sender}" onerror="this.src='static/avatars/default.svg'">
+        </div>
+        <div class="message-content">
+            <p>${escapeHtml(content)}</p>
+        </div>
+    `;
+    
+    chatMessages.appendChild(messageDiv);
+    scrollToBottom();
+    
+    // Add to conversation history for assistant messages
+    if (sender === 'assistant') {
+        conversationHistory.push({
+            role: 'assistant',
+            content: content
+        });
+    }
+}
+
+function showWelcomeMessage(characterId) {
+    const welcomeMessages = {
+        'moses': "Peace be with you, my child. I am Moses, prophet and lawgiver. My character-focused training allows me to embody the wisdom of the Almighty. How may I guide you in righteousness?",
+        'samsung_employee': "Hello! I'm your Samsung technology expert, trained with character-focused learning to provide authentic product knowledge and enthusiasm. What amazing Galaxy features can I share with you today?",
+        'jinx': "*spins around excitedly* Hey there! I'm Jinx - the real me, not some AI pretending! My character-focused training means pure chaotic genius with no boring assistant stuff. Ready for some explosive fun?"
+    };
+    
+    const message = welcomeMessages[characterId];
+    if (message) {
+        displayMessage(message, 'assistant', characterId);
+    }
+}
+
+function showTypingIndicator() {
+    document.getElementById('typing-indicator').style.display = 'flex';
+    scrollToBottom();
+}
+
+function hideTypingIndicator() {
+    document.getElementById('typing-indicator').style.display = 'none';
+}
+
+function scrollToBottom() {
+    const chatMessages = document.getElementById('chat-messages');
+    chatMessages.scrollTop = chatMessages.scrollHeight;
+}
+
+function escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+}
+
+function playAudio(audioData) {
+    if (!voiceEnabled || !audioData) return;
+    
+    try {
+        const audio = new Audio(audioData);
+        audio.play().catch(error => {
+            console.error('Error playing audio:', error);
+        });
+    } catch (error) {
+        console.error('Error creating audio:', error);
+    }
+}
+
+function toggleVoice() {
+    voiceEnabled = !voiceEnabled;
+    const voiceIcon = document.getElementById('voice-icon');
+    const voiceToggle = document.querySelector('.voice-toggle');
+    
+    if (voiceEnabled) {
+        voiceIcon.className = 'fas fa-volume-up';
+        voiceToggle.classList.add('active');
+    } else {
+        voiceIcon.className = 'fas fa-volume-mute';
+        voiceToggle.classList.remove('active');
+    }
+    
+    saveSettings();
+}
+
+function clearChat() {
+    const chatMessages = document.getElementById('chat-messages');
+    chatMessages.innerHTML = '';
+    conversationHistory = [];
+}
+
+function startNewChat() {
+    clearChat();
+    showWelcomeMessage(currentCharacter);
+}
+
+function showResources() {
+    const modal = document.getElementById('resources-modal');
+    modal.classList.add('active');
+}
+
+function showSettings() {
+    const modal = document.getElementById('settings-modal');
+    modal.classList.add('active');
+}
+
+function closeModal(modalId) {
+    const modal = document.getElementById(modalId);
+    modal.classList.remove('active');
+}
+
+function updateVoiceSetting() {
+    const voiceCheckbox = document.getElementById('voice-enabled');
+    voiceEnabled = voiceCheckbox.checked;
+    
+    const voiceToggle = document.querySelector('.voice-toggle');
+    const voiceIcon = document.getElementById('voice-icon');
+    
+    if (voiceEnabled) {
+        voiceToggle.classList.add('active');
+        voiceIcon.className = 'fas fa-volume-up';
+    } else {
+        voiceToggle.classList.remove('active');
+        voiceIcon.className = 'fas fa-volume-mute';
+    }
+    
+    saveSettings();
+}
+
+function changeTheme() {
+    const themeSelect = document.getElementById('theme-select');
+    const theme = themeSelect.value;
+    
+    document.documentElement.setAttribute('data-theme', theme);
+    saveSettings();
+}
+
+function saveSettings() {
+    const settings = {
+        voiceEnabled: voiceEnabled,
+        theme: document.documentElement.getAttribute('data-theme') || 'dark',
+        responseSpeed: document.getElementById('response-speed')?.value || '0.7'
+    };
+    
+    localStorage.setItem('roleplayChatSettings', JSON.stringify(settings));
+}
+
+function loadSettings() {
+    try {
+        const settings = JSON.parse(localStorage.getItem('roleplayChatSettings')) || {};
+        
+        // Load voice setting
+        if (settings.voiceEnabled !== undefined) {
+            voiceEnabled = settings.voiceEnabled;
+            document.getElementById('voice-enabled').checked = voiceEnabled;
+            updateVoiceSetting();
+        }
+        
+        // Load theme
+        if (settings.theme) {
+            document.documentElement.setAttribute('data-theme', settings.theme);
+            document.getElementById('theme-select').value = settings.theme;
+        }
+        
+        // Load response speed
+        if (settings.responseSpeed) {
+            document.getElementById('response-speed').value = settings.responseSpeed;
+        }
+    } catch (error) {
+        console.error('Error loading settings:', error);
+    }
+}
+
+// Close modals when clicking outside
+window.addEventListener('click', function(event) {
+    if (event.target.classList.contains('modal')) {
+        event.target.classList.remove('active');
+    }
+});
+
+// Handle escape key to close modals
+document.addEventListener('keydown', function(event) {
+    if (event.key === 'Escape') {
+        const activeModal = document.querySelector('.modal.active');
+        if (activeModal) {
+            activeModal.classList.remove('active');
+        }
+    }
+});

frontend/static/js/rest_app.js

@@ -0,0 +1,470 @@
+// REST API-based Chat Application
+let currentCharacter = 'moses';
+let conversationHistory = [];
+let voiceEnabled = false; // Disabled by default
+let voiceAvailable = false;
+let currentAudio = null;
+
+// Initialize the application
+document.addEventListener('DOMContentLoaded', function() {
+    setupCharacterSelection();
+    setupEventListeners();
+    loadSettings();
+    checkVoiceStatus();
+    showWelcomeMessage(currentCharacter);
+    updateConnectionStatus(true); // Always connected in REST mode
+});
+
+function setupCharacterSelection() {
+    const characterCards = document.querySelectorAll('.character-card');
+    
+    characterCards.forEach(card => {
+        card.addEventListener('click', function() {
+            const characterId = this.dataset.character;
+            switchCharacter(characterId);
+        });
+    });
+}
+
+function setupEventListeners() {
+    const messageInput = document.getElementById('message-input');
+    const sendButton = document.getElementById('send-btn');
+    
+    messageInput.addEventListener('keydown', handleKeyPress);
+    sendButton.addEventListener('click', sendMessage);
+    
+    // Auto-resize textarea
+    messageInput.addEventListener('input', function() {
+        autoResize(this);
+    });
+}
+
+function handleKeyPress(event) {
+    if (event.key === 'Enter' && !event.shiftKey) {
+        event.preventDefault();
+        sendMessage();
+    }
+}
+
+function autoResize(textarea) {
+    textarea.style.height = 'auto';
+    textarea.style.height = Math.min(textarea.scrollHeight, 120) + 'px';
+}
+
+async function sendMessage() {
+    const messageInput = document.getElementById('message-input');
+    const message = messageInput.value.trim();
+    
+    if (!message) return;
+    
+    // Clear input and show user message
+    messageInput.value = '';
+    autoResize(messageInput);
+    
+    displayMessage(message, 'user');
+    showTypingIndicator();
+    
+    try {
+        // Send REST API request
+        const requestData = {
+            text: message,
+            timestamp: Date.now(),
+            conversation_history: conversationHistory.slice(-4), // Last 4 messages for context
+            include_voice: voiceEnabled && voiceAvailable
+        };
+        
+        console.log('Sending request:', {
+            character: currentCharacter,
+            includeVoice: requestData.include_voice,
+            voiceEnabled: voiceEnabled,
+            voiceAvailable: voiceAvailable
+        });
+        
+        const response = await fetch(`/api/chat/${currentCharacter}`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(requestData)
+        });
+        
+        hideTypingIndicator();
+        
+        if (response.ok) {
+            const data = await response.json();
+            console.log('Response data:', {
+                hasVoiceData: !!data.voice_data,
+                voiceEnabled: voiceEnabled,
+                voiceAvailable: voiceAvailable,
+                voiceDataLength: data.voice_data ? data.voice_data.length : 0
+            });
+            
+            displayMessage(data.response, 'assistant', data.character_id);
+            
+            // Play voice if available
+            if (data.voice_data && voiceEnabled) {
+                console.log('Attempting to play voice...');
+                playVoice(data.voice_data);
+            } else if (!data.voice_data) {
+                console.log('No voice data in response');
+            } else if (!voiceEnabled) {
+                console.log('Voice is disabled');
+            }
+            
+            // Update conversation history
+            conversationHistory.push(
+                { role: 'user', content: message },
+                { role: 'assistant', content: data.response }
+            );
+            
+            // Limit history size
+            if (conversationHistory.length > 20) {
+                conversationHistory = conversationHistory.slice(-20);
+            }
+        } else {
+            const error = await response.text();
+            displayMessage(`Sorry, I encountered an error: ${error}`, 'error');
+        }
+        
+    } catch (error) {
+        hideTypingIndicator();
+        console.error('Error sending message:', error);
+        displayMessage('Sorry, I could not connect to the server. Please try again.', 'error');
+    }
+}
+
+function displayMessage(content, type, characterId = null) {
+    const chatMessages = document.getElementById('chat-messages');
+    const messageDiv = document.createElement('div');
+    messageDiv.className = `message ${type}`;
+    
+    if (type === 'user') {
+        messageDiv.innerHTML = `
+            <div class="message-avatar">
+                <img src="/static/avatars/user.svg" alt="User" onerror="this.src='/static/avatars/default.svg'">
+            </div>
+            <div class="message-content">
+                <div class="message-text">${escapeHtml(content)}</div>
+                <div class="message-time">${new Date().toLocaleTimeString()}</div>
+            </div>
+        `;
+    } else if (type === 'assistant') {
+        const char = characterId || currentCharacter;
+        const charName = getCharacterName(char);
+        
+        messageDiv.innerHTML = `
+            <div class="message-avatar">
+                <img src="/static/avatars/${char}.svg" alt="${charName}" onerror="this.src='/static/avatars/default.svg'">
+            </div>
+            <div class="message-content">
+                <div class="message-text">${escapeHtml(content)}</div>
+                <div class="message-time">${new Date().toLocaleTimeString()}</div>
+            </div>
+        `;
+    } else if (type === 'error') {
+        messageDiv.className = 'message error';
+        messageDiv.innerHTML = `
+            <div class="message-content">
+                <div class="message-text error-text">❌ ${escapeHtml(content)}</div>
+                <div class="message-time">${new Date().toLocaleTimeString()}</div>
+            </div>
+        `;
+    }
+    
+    chatMessages.appendChild(messageDiv);
+    chatMessages.scrollTop = chatMessages.scrollHeight;
+}
+
+function escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+}
+
+function getCharacterName(characterId) {
+    const names = {
+        'moses': 'Moses',
+        'samsung_employee': 'Samsung Employee',
+        'jinx': 'Jinx'
+    };
+    return names[characterId] || 'Character';
+}
+
+function switchCharacter(characterId) {
+    // Update character selection UI
+    document.querySelectorAll('.character-card').forEach(card => {
+        card.classList.remove('active');
+    });
+    
+    document.querySelector(`[data-character="${characterId}"]`).classList.add('active');
+    
+    currentCharacter = characterId;
+    updateCharacterDisplay(characterId);
+    
+    // Clear current chat and show welcome message
+    clearChat();
+    showWelcomeMessage(characterId);
+}
+
+function updateCharacterDisplay(characterId) {
+    const characterInfo = {
+        'moses': {
+            name: 'Moses',
+            description: 'Biblical Prophet and Lawgiver',
+            avatar: '/static/avatars/moses.svg'
+        },
+        'samsung_employee': {
+            name: 'Samsung Employee',
+            description: 'Tech-savvy Corporate Representative',
+            avatar: '/static/avatars/samsung.svg'
+        },
+        'jinx': {
+            name: 'Jinx',
+            description: 'Chaotic Genius from Arcane',
+            avatar: '/static/avatars/jinx.svg'
+        }
+    };
+    
+    const info = characterInfo[characterId];
+    if (info) {
+        document.getElementById('current-character-name').textContent = info.name;
+        document.getElementById('current-character-desc').textContent = info.description;
+        document.getElementById('current-avatar').src = info.avatar;
+        
+        // Update placeholder
+        const messageInput = document.getElementById('message-input');
+        messageInput.placeholder = `Message ${info.name}...`;
+    }
+}
+
+function showWelcomeMessage(characterId) {
+    const welcomeMessages = {
+        'moses': "Peace be with you, my child. I am Moses, prophet and lawgiver. How may I guide you in righteousness?",
+        'samsung_employee': "Hello! I'm your Samsung technology expert, ready to provide authentic product knowledge and enthusiasm. What amazing Galaxy features can I share with you today?",
+        'jinx': "*spins around excitedly* Hey there! I'm Jinx - the real me, not some AI pretending! Pure chaotic genius with no boring assistant stuff. Ready for some explosive fun?"
+    };
+    
+    const message = welcomeMessages[characterId];
+    if (message) {
+        displayMessage(message, 'assistant', characterId);
+    }
+}
+
+function showTypingIndicator() {
+    const indicator = document.getElementById('typing-indicator');
+    const characterName = document.getElementById('typing-character');
+    
+    characterName.textContent = getCharacterName(currentCharacter);
+    indicator.style.display = 'flex';
+}
+
+function hideTypingIndicator() {
+    document.getElementById('typing-indicator').style.display = 'none';
+}
+
+function clearChat() {
+    const chatMessages = document.getElementById('chat-messages');
+    chatMessages.innerHTML = '';
+    conversationHistory = [];
+}
+
+function startNewChat() {
+    clearChat();
+    showWelcomeMessage(currentCharacter);
+}
+
+function updateConnectionStatus(connected) {
+    // In REST API mode, we're always "connected"
+    const indicator = document.querySelector('.connection-status');
+    if (indicator) {
+        indicator.textContent = connected ? 'REST API Connected' : 'Disconnected';
+        indicator.className = connected ? 'connection-status connected' : 'connection-status disconnected';
+    }
+}
+
+function toggleVoice() {
+    if (!voiceAvailable) {
+        showNotification('Voice synthesis is not available on this server', 'error');
+        return;
+    }
+    
+    voiceEnabled = !voiceEnabled;
+    updateVoiceIcon();
+    
+    // Save setting
+    localStorage.setItem('voiceEnabled', voiceEnabled.toString());
+    
+    // Show notification
+    const status = voiceEnabled ? 'enabled' : 'disabled';
+    showNotification(`Voice output ${status}`, 'success');
+}
+
+function loadSettings() {
+    // Load any saved settings
+    const savedCharacter = localStorage.getItem('selectedCharacter');
+    if (savedCharacter && ['moses', 'samsung_employee', 'jinx'].includes(savedCharacter)) {
+        switchCharacter(savedCharacter);
+    }
+    
+    // Load voice setting (default to false)
+    const savedVoiceEnabled = localStorage.getItem('voiceEnabled');
+    voiceEnabled = savedVoiceEnabled === 'true';
+}
+
+function showResources() {
+    document.getElementById('resources-modal').style.display = 'flex';
+}
+
+function showSettings() {
+    document.getElementById('settings-modal').style.display = 'flex';
+}
+
+function closeModal(modalId) {
+    document.getElementById(modalId).style.display = 'none';
+}
+
+function changeTheme() {
+    const theme = document.getElementById('theme-select').value;
+    document.body.className = theme === 'light' ? 'light-theme' : '';
+}
+
+function updateVoiceSetting() {
+    const checkbox = document.getElementById('voice-enabled');
+    if (voiceAvailable) {
+        checkbox.checked = voiceEnabled;
+        checkbox.disabled = false;
+        checkbox.onchange = function() {
+            voiceEnabled = this.checked;
+            updateVoiceIcon();
+            localStorage.setItem('voiceEnabled', voiceEnabled.toString());
+        };
+    } else {
+        checkbox.checked = false;
+        checkbox.disabled = true;
+    }
+}
+
+// Close modals when clicking outside
+window.addEventListener('click', function(event) {
+    const modals = document.querySelectorAll('.modal');
+    modals.forEach(modal => {
+        if (event.target === modal) {
+            modal.style.display = 'none';
+        }
+    });
+});
+
+// Save character selection
+window.addEventListener('beforeunload', function() {
+    localStorage.setItem('selectedCharacter', currentCharacter);
+});
+
+// Voice-related functions
+async function checkVoiceStatus() {
+    try {
+        const response = await fetch('/api/voice/status');
+        if (response.ok) {
+            const data = await response.json();
+            voiceAvailable = data.voice_enabled && data.voice_model_loaded;
+        } else {
+            voiceAvailable = false;
+        }
+    } catch (error) {
+        console.log('Voice status check failed:', error);
+        voiceAvailable = false;
+    }
+    
+    updateVoiceIcon();
+    updateVoiceSetting();
+}
+
+function updateVoiceIcon() {
+    const icon = document.getElementById('voice-icon');
+    const button = icon.closest('.voice-toggle');
+    
+    if (!voiceAvailable) {
+        icon.className = 'fas fa-volume-mute';
+        button.classList.remove('active');
+        button.title = 'Voice synthesis not available';
+    } else if (voiceEnabled) {
+        icon.className = 'fas fa-volume-up';
+        button.classList.add('active');
+        button.title = 'Voice enabled - Click to disable';
+    } else {
+        icon.className = 'fas fa-volume-off';
+        button.classList.remove('active');
+        button.title = 'Voice disabled - Click to enable';
+    }
+}
+
+function playVoice(audioDataUrl) {
+    try {
+        console.log('Playing voice audio, data length:', audioDataUrl.length);
+        console.log('Audio data preview:', audioDataUrl.substring(0, 50));
+        
+        // Stop any currently playing audio
+        if (currentAudio) {
+            currentAudio.pause();
+            currentAudio.currentTime = 0;
+        }
+        
+        // Create and play new audio
+        currentAudio = new Audio(audioDataUrl);
+        
+        // Add event listeners for debugging
+        currentAudio.addEventListener('loadstart', () => console.log('Audio loading started'));
+        currentAudio.addEventListener('canplay', () => console.log('Audio can play'));
+        currentAudio.addEventListener('playing', () => console.log('Audio is playing'));
+        currentAudio.addEventListener('ended', () => console.log('Audio ended'));
+        currentAudio.addEventListener('error', (e) => console.error('Audio error:', e));
+        
+        currentAudio.play().then(() => {
+            console.log('Audio play() succeeded');
+            showNotification('Voice playback started', 'success');
+        }).catch(error => {
+            console.error('Error playing voice:', error);
+            showNotification('Failed to play voice audio: ' + error.message, 'error');
+        });
+    } catch (error) {
+        console.error('Error setting up voice playback:', error);
+        showNotification('Voice playback error: ' + error.message, 'error');
+    }
+}
+
+function showNotification(message, type = 'info') {
+    // Create notification element
+    const notification = document.createElement('div');
+    notification.className = `notification ${type}`;
+    notification.innerHTML = `
+        <i class="fas ${
+            type === 'success' ? 'fa-check-circle' : 
+            type === 'error' ? 'fa-exclamation-circle' : 'fa-info-circle'
+        }"></i>
+        <span>${message}</span>
+        <button onclick="this.parentElement.remove()">
+            <i class="fas fa-times"></i>
+        </button>
+    `;
+    
+    // Add to page
+    document.body.appendChild(notification);
+    
+    // Auto remove after 3 seconds
+    setTimeout(() => {
+        if (notification.parentElement) {
+            notification.remove();
+        }
+    }, 3000);
+}
+
+// Add connection status indicator
+document.addEventListener('DOMContentLoaded', function() {
+    const header = document.querySelector('.chat-header');
+    if (header && !document.querySelector('.connection-status')) {
+        const statusDiv = document.createElement('div');
+        statusDiv.className = 'connection-status connected';
+        statusDiv.textContent = 'REST API Ready';
+        statusDiv.style.cssText = 'font-size: 12px; color: #4CAF50; margin-left: 10px;';
+        header.appendChild(statusDiv);
+    }
+});