Replace this block with a image placeholder

IntroPage.html

@@ -156,10 +156,10 @@
         <nav class="bg-white bg-opacity-90 backdrop-blur-sm shadow-sm py-4 px-6">
             <div class="container mx-auto flex justify-between items-center">
                 <div class="flex items-center space-x-2">
-                    <i data-feather="message-circle" class="text-blue-600"></i>
+                    <img src="http://static.photos/animals/200x200/1" alt="FurryChat Logo" class="w-8 h-8 rounded-full">
                     <span class="text-xl font-bold text-gray-800">FurryChat.ai</span>
                 </div>
-                <div class="hidden md:flex space-x-8">
+<div class="hidden md:flex space-x-8">
                     <a href="IntroPage.html" class="text-gray-600 hover:text-blue-600 transition-colors">Home</a>
                     <a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">Features</a>
                     <a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">Pricing</a>

SignIn.html

@@ -18,10 +18,10 @@
         <nav class="bg-white bg-opacity-90 backdrop-blur-sm shadow-sm py-4 px-6">
             <div class="container mx-auto flex justify-between items-center">
                 <div class="flex items-center space-x-2">
-                    <i data-feather="message-circle" class="text-blue-600"></i>
+                    <img src="http://static.photos/animals/200x200/1" alt="FurryChat Logo" class="w-8 h-8 rounded-full">
                     <span class="text-xl font-bold text-gray-800">FurryChat.ai</span>
                 </div>
-                <div class="hidden md:flex space-x-8">
+<div class="hidden md:flex space-x-8">
                     <a href="IntroPage.html" class="text-gray-600 hover:text-blue-600 transition-colors">Home</a>
 <a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">Features</a>
                     <a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">Pricing</a>

SignUp.html

@@ -18,10 +18,10 @@
         <nav class="bg-white bg-opacity-90 backdrop-blur-sm shadow-sm py-4 px-6">
             <div class="container mx-auto flex justify-between items-center">
                 <div class="flex items-center space-x-2">
-                    <i data-feather="message-circle" class="text-blue-600"></i>
+                    <img src="http://static.photos/animals/200x200/1" alt="FurryChat Logo" class="w-8 h-8 rounded-full">
                     <span class="text-xl font-bold text-gray-800">FurryChat.ai</span>
                 </div>
-                <div class="hidden md:flex space-x-8">
+<div class="hidden md:flex space-x-8">
                     <a href="IntroPage.html" class="text-gray-600 hover:text-blue-600 transition-colors">Home</a>
 <a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">Features</a>
                     <a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">Pricing</a>

index.html

@@ -12,10 +12,6 @@
     <script src="https://unpkg.com/feather-icons"></script>
     <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
     <script src="https://unpkg.com/three@0.132.2/build/three.min.js"></script>
-    <script src="https://unpkg.com/@react-three/fiber@7.0.24/dist/react-three-fiber.js"></script>
-    <script src="https://unpkg.com/@react-three/drei@8.0.2/dist/drei.umd.js"></script>
-    <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
-    <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
     <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
     <style>
         .chat-container {
@@ -31,6 +27,71 @@
             from { opacity: 0; transform: translateY(10px); }
             to { opacity: 1; transform: translateY(0); }
         }
+        
+        /* Enhanced Audio Player Styles */
+        .message-audio {
+            margin-top: 10px;
+            padding: 8px;
+            background: #f8fafc;
+            border-radius: 8px;
+            border: 1px solid #e5e7eb;
+        }
+        
+        .message-audio audio {
+            width: 100%;
+            height: 32px;
+            border-radius: 4px;
+        }
+        
+        .audio-indicator {
+            display: inline-block;
+            background: #3b82f6;
+            color: white;
+            padding: 2px 6px;
+            border-radius: 4px;
+            font-size: 10px;
+            margin-left: 8px;
+            font-weight: 600;
+        }
+        
+        .message-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 4px;
+        }
+        
+        .message-sender {
+            font-weight: 600;
+            color: #374151;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+        }
+        
+        .message-timestamp {
+            font-size: 11px;
+            color: #6b7280;
+        }
+        
+        .bot-message {
+            background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+            border-left: 4px solid #3b82f6;
+        }
+        
+        .user-message {
+            background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
+            border-right: 4px solid #1d4ed8;
+        }
+        
+        .chat-welcome {
+            background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
+            border: 1px solid #a7f3d0;
+            border-radius: 12px;
+            padding: 20px;
+            margin-bottom: 20px;
+        }
+        
         .typing-indicator {
             display: inline-flex;
             align-items: center;
@@ -76,75 +137,68 @@
             border-radius: 10px;
         }
         
-        .animation-controls {
-            background: rgba(255, 255, 255, 0.9);
-            padding: 15px;
-            border-radius: 10px;
-            margin-top: 10px;
-            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+        .loading-spinner {
+            border: 3px solid #f3f3f3;
+            border-top: 3px solid #3b82f6;
+            border-radius: 50%;
+            width: 30px;
+            height: 30px;
+            animation: spin 1s linear infinite;
+            margin: 20px auto;
         }
         
-        .animation-buttons {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 8px;
-            margin-top: 10px;
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
         }
         
-        .animation-btn {
-            flex: 1;
-            min-width: 80px;
-            padding: 8px 12px;
-            background: #3b82f6;
+        /* Notification styles */
+        .notification {
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            padding: 15px 25px;
+            border-radius: 10px;
+            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+            z-index: 1000;
+            animation: slideIn 0.3s ease-out;
             color: white;
-            border: none;
-            border-radius: 6px;
-            cursor: pointer;
-            transition: all 0.3s;
-            font-size: 12px;
-            font-weight: 500;
-        }
-        
-        .animation-btn:hover {
-            background: #2563eb;
+            font-weight: 600;
+            max-width: 400px;
+            word-wrap: break-word;
         }
         
-        .animation-btn.active {
-            background: #1d4ed8;
-        }
+        .notification-success { background: #2ecc71; }
+        .notification-error { background: #e74c3c; }
+        .notification-warning { background: #f39c12; }
+        .notification-info { background: #3498db; }
         
-        .upload-section {
-            background: rgba(255, 255, 255, 0.9);
-            padding: 15px;
-            border-radius: 10px;
-            margin-top: 10px;
-            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+        .notification-content {
+            display: flex;
+            align-items: center;
+            gap: 10px;
         }
         
-        .upload-btn {
-            display: block;
-            width: 100%;
-            padding: 10px;
-            background: #10b981;
-            color: white;
-            border: none;
-            border-radius: 8px;
-            font-weight: bold;
-            cursor: pointer;
-            transition: all 0.3s;
-            margin-top: 10px;
+        @keyframes slideIn {
+            from { transform: translateX(100%); opacity: 0; }
+            to { transform: translateX(0); opacity: 1; }
         }
         
-        .upload-btn:hover {
-            background: #059669;
+        @keyframes slideOut {
+            from { transform: translateX(0); opacity: 1; }
+            to { transform: translateX(100%); opacity: 0; }
         }
         
-        .model-info {
-            margin-top: 10px;
-            font-size: 12px;
-            text-align: center;
-            color: #6b7280;
+        /* Status indicators */
+        .status-dot {
+            display: inline-block;
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            margin-right: 6px;
         }
+        .status-online { background-color: #10b981; }
+        .status-offline { background-color: #ef4444; }
     </style>
 </head>
 <body class="bg-gray-50">
@@ -156,10 +210,10 @@
         <nav class="bg-white bg-opacity-90 backdrop-blur-sm shadow-sm py-4 px-6">
             <div class="container mx-auto flex justify-between items-center">
                 <div class="flex items-center space-x-2">
-                    <i data-feather="message-circle" class="text-blue-600"></i>
+                    <img src="http://static.photos/animals/200x200/1" alt="FurryChat Logo" class="w-8 h-8 rounded-full">
                     <span class="text-xl font-bold text-gray-800">FurryChat.ai</span>
                 </div>
-                <div class="hidden md:flex space-x-8">
+<div class="hidden md:flex space-x-8">
                     <a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">Home</a>
                     <a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">Features</a>
                     <a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">Pricing</a>
@@ -176,7 +230,7 @@
             <!-- Combined Avatar and Chat Window -->
             <div class="max-w-4xl mx-auto bg-white rounded-xl shadow-lg overflow-hidden" data-aos="fade-up">
                 <!-- Combined Header with Avatar and Chat Info -->
-                <div class="bg-gradient-to-r from-blue-600 to-purple-600 p-6 text-white">
+                <div class="bg-gradient-to-r from-blue-600 to-blue-700 p-6 text-white">
                     <div class="flex items-center space-x-4">
                         <!-- 3D Avatar Container -->
                         <div class="w-16 h-16 bg-white bg-opacity-20 rounded-lg overflow-hidden">
@@ -185,62 +239,48 @@
                         <div>
                             <h2 class="text-xl font-semibold">Sancia</h2>
                             <p class="text-blue-100 text-sm">The Free-to-try furry AI</p>
+                            <div id="tts-status" class="text-xs opacity-80 mt-1">
+                                <span class="status-dot status-online"></span>
+                                <span>TTS: Initializing...</span>
+                            </div>
                         </div>
                     </div>
                 </div>
 
                 <!-- Combined Chat Container -->
                 <div class="flex" style="height: 500px;">
-                    <!-- 3D Avatar Side Panel -->
-                    <div class="w-1/3 bg-gray-100 border-r border-gray-200 flex flex-col">
-                        <!-- 3D Model Viewer -->
-                        <div class="flex-1 p-4">
+                    <!-- 3D Avatar Side Panel (Now full width, clean) -->
+                    <div class="w-1/3 bg-gray-100 border-r border-gray-200">
+                        <!-- 3D Model Viewer - Full panel, no extra elements -->
+                        <div class="h-full p-4">
                             <model-viewer 
                                 id="model-viewer"
                                 src=""
-                                alt="A 3D model"
+                                alt="Sancia Furry Avatar"
                                 auto-rotate
                                 camera-controls
                                 shadow-intensity="1"
                                 environment-image="neutral"
                                 exposure="1">
+                                <div class="loading-spinner" id="model-loading"></div>
                             </model-viewer>
                         </div>
-                        
-                        <!-- Upload Section -->
-                        <div class="upload-section">
-                            <h3 class="font-semibold text-gray-800 mb-2">Upload 3D Model</h3>
-                            <input type="file" id="model-upload" accept=".glb,.gltf" style="display: none;">
-                            <button class="upload-btn" id="upload-btn">Choose 3D Model File</button>
-                            <p class="model-info" id="model-info">No model loaded. Supported formats: .glb, .gltf</p>
-                        </div>
-                        
-                        <!-- Animation Controls -->
-                        <div class="animation-controls" id="animation-controls" style="display: none;">
-                            <h3 class="font-semibold text-gray-800 mb-2">Test Animation Controls</h3>
-                            <div class="animation-buttons" id="animation-buttons">
-                                <!-- Animation buttons will be added dynamically -->
-                            </div>
-                        </div>
+                        <!-- No TTS status bar here anymore -->
                     </div>
                     
                     <!-- Chat Container -->
                     <div class="w-2/3 flex flex-col">
                         <div class="chat-container p-4 bg-gray-50 flex-1" id="chat-messages">
-                            <!-- Welcome message -->
-                            <div class="message bg-white rounded-lg p-4 shadow-sm mb-4 ml-auto" data-aos="fade-left">
-                                <p class="text-gray-800">Hello! I'm Sancia, Free to try Furry AI. What topics would you like to talk with?</p>
-                                <p class="text-gray-800">(Pro tip: Sign up or Log in FurryChat.ai to get access to huge collection of community made AI Furries and make and customize your own AI Furry)</p>
-                                <span class="text-xs text-gray-500 block mt-1">Just now</span>
-                            </div>
+                            <!-- Welcome message area -->
+                            <div id="welcome-container"></div>
                             
                             <!-- Sample conversation starters -->
-                            <div class="grid grid-cols-1 gap-2 mb-4">
+                            <div class="grid grid-cols-1 gap-2 mb-4 mt-4">
                                 <button class="suggestion-btn bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg p-3 text-sm transition-colors" data-message="What can you do?">
                                     <i data-feather="help-circle" class="w-4 h-4 inline mr-1"></i> What can you do?
                                 </button>
                                 <button class="suggestion-btn bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg p-3 text-sm transition-colors" data-message="Tell me about you">
-                                    <i data-feather="smile" class="w-4 h-4 inline mr-1"></i> Tell me a joke
+                                    <i data-feather="smile" class="w-4 h-4 inline mr-1"></i> Tell me about yourself
                                 </button>
                                 <button class="suggestion-btn bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg p-3 text-sm transition-colors" data-message="How does AI Furry work?">
                                     <i data-feather="code" class="w-4 h-4 inline mr-1"></i> How does AI Furry work?
@@ -261,7 +301,6 @@
                     </div>
                 </div>
             </div>
-
         </div>
 
         <!-- Footer -->
@@ -324,7 +363,7 @@
         });
         feather.replace();
         
-        // Initialize Vanta.js background
+        // Initialize Vanta.js background with blue color
         VANTA.GLOBE({
             el: "#vanta-bg",
             mouseControls: true,
@@ -339,313 +378,332 @@
             size: 0.8
         });
 
-        // Initialize 3D Avatar
-        function initAvatar() {
-            const canvas = document.getElementById('avatar-canvas');
-            const mainCanvas = document.getElementById('avatar-canvas-main');
-            
-            // Create React component for small avatar in header
-            const SmallAvatar = () => {
-                return React.createElement(
-                    ReactThreeFiber.Canvas,
-                    {
-                        camera: { position: [0, 0, 2], fov: 60 },
-                        style: { height: '100%', width: '100%' }
-                    },
-                    React.createElement(
-                        ReactThreeFiber.Suspense,
-                        { fallback: null },
-                        React.createElement(
-                            ReactThreeFiber.mesh,
-                            { rotation: [0.5, 0.5, 0] },
-                            React.createElement(
-                                ReactThreeDrei.BoxGeometry,
-                                { args: [0.8, 0.8, 0.8] }
-                            ),
-                            React.createElement(
-                                ReactThreeFiber.meshStandardMaterial,
-                                { color: '#ffffff' }
-                            )
-                        ),
-                        React.createElement(
-                            ReactThreeFiber.ambientLight,
-                            { intensity: 0.7 }
-                        ),
-                        React.createElement(
-                            ReactThreeFiber.pointLight,
-                            { position: [2, 2, 2], intensity: 0.8 }
-                        )
-                    )
-                );
-            };
-
-            // Create React component for main avatar
-            const MainAvatar = () => {
-                return React.createElement(
-                    ReactThreeFiber.Canvas,
-                    {
-                        camera: { position: [0, 0, 3], fov: 75 },
-                        style: { height: '100%', width: '100%' }
-                    },
-                    React.createElement(
-                        ReactThreeFiber.Suspense,
-                        { fallback: null },
-                        React.createElement(
-                            ReactThreeFiber.mesh,
-                            { rotation: [0, 0, 0] },
-                            React.createElement(
-                                ReactThreeDrei.BoxGeometry,
-                                { args: [1, 1, 1] }
-                            ),
-                            React.createElement(
-                                ReactThreeFiber.meshStandardMaterial,
-                                { color: '#3b82f6' }
-                            )
-                        ),
-                        React.createElement(
-                            ReactThreeFiber.ambientLight,
-                            { intensity: 0.5 }
-                        ),
-                        React.createElement(
-                            ReactThreeFiber.pointLight,
-                            { position: [5, 5, 5], intensity: 1 }
-                        ),
-                        React.createElement(
-                            ReactThreeFiber.pointLight,
-                            { position: [-5, -5, -5], intensity: 0.5 }
-                        )
-                    )
-                );
-            };
+        // TTS State - TTS is always enabled by default
+        let ttsEnabled = true;
+        let ttsSupported = false;
+        let selectedVoice = 'default'; // Always use default voice
 
-            // Render both avatars
-            ReactDOM.render(React.createElement(SmallAvatar), canvas);
-            ReactDOM.render(React.createElement(MainAvatar), mainCanvas);
-        }
-
-        // Initialize avatar after page load
-        setTimeout(initAvatar, 100);
-
-        // 3D Model Viewer Functionality
-        document.addEventListener('DOMContentLoaded', function() {
-            const modelViewer = document.getElementById('model-viewer');
-            const uploadBtn = document.getElementById('upload-btn');
-            const modelUpload = document.getElementById('model-upload');
-            const modelInfo = document.getElementById('model-info');
-            const animationControls = document.getElementById('animation-controls');
-            const animationButtons = document.getElementById('animation-buttons');
+        // Utility functions
+        function showNotification(message, type = 'info') {
+            const existingNotification = document.querySelector('.notification');
+            if (existingNotification) {
+                existingNotification.remove();
+            }
             
-            let currentAnimations = [];
+            const notification = document.createElement('div');
+            notification.className = `notification notification-${type}`;
             
-            // Handle file upload
-            uploadBtn.addEventListener('click', function() {
-                modelUpload.click();
-            });
+            const featherIcon = type === 'success' ? 'check-circle' : 
+                               type === 'error' ? 'alert-circle' : 
+                               type === 'warning' ? 'alert-triangle' : 'info';
             
-            modelUpload.addEventListener('change', function(e) {
-                const file = e.target.files[0];
-                if (file) {
-                    const url = URL.createObjectURL(file);
-                    modelViewer.src = url;
-                    modelInfo.textContent = `Loaded: ${file.name}`;
-                    
-                    // Reset animation state
-                    currentAnimations = [];
-                    animationControls.style.display = 'none';
-                    animationButtons.innerHTML = '';
-                    
-                    // Check for animations after model loads
-                    modelViewer.addEventListener('load', function() {
-                        checkForAnimations();
-                    });
-                }
-            });
+            notification.innerHTML = `
+                <div class="notification-content">
+                    <i data-feather="${featherIcon}"></i>
+                    <span>${message}</span>
+                </div>
+            `;
             
-            // Check if the model has animations
-            function checkForAnimations() {
-                // This is a simplified approach - in a real implementation,
-                // you would need to access the Three.js scene and check for animations
-                // For now, we'll simulate this with a timeout
-                
-                setTimeout(() => {
-                    // Simulate finding animations
-                    const availableAnimations = ['Idle', 'Wave', 'Jump', 'Dance'];
-                    
-                    if (availableAnimations.length > 0) {
-                        currentAnimations = availableAnimations;
-                        setupAnimationControls(availableAnimations);
-                    } else {
-                        // No animations found
-                    }
-                }, 1000);
-            }
+            document.body.appendChild(notification);
+            feather.replace();
             
-            // Set up animation control buttons
-            function setupAnimationControls(animations) {
-                animationControls.style.display = 'block';
-                animationButtons.innerHTML = '';
+            const duration = type === 'error' ? 5000 : 4000;
+            setTimeout(() => {
+                notification.style.animation = 'slideOut 0.3s ease-out forwards';
+                setTimeout(() => notification.remove(), 300);
+            }, duration);
+        }
+        
+        function escapeHtml(text) {
+            const div = document.createElement('div');
+            div.textContent = text;
+            return div.innerHTML;
+        }
+
+        // SIMPLIFIED TTS INITIALIZATION - No user controls needed
+        async function initializeTTS() {
+            try {
+                console.log('🚀 Initializing TTS System...');
                 
-                animations.forEach(animation => {
-                    const button = document.createElement('button');
-                    button.classList.add('animation-btn');
-                    button.textContent = animation;
-                    button.addEventListener('click', () => {
-                        playAnimation(animation);
-                        
-                        // Update active state
-                        document.querySelectorAll('.animation-btn').forEach(btn => {
-                            btn.classList.remove('active');
-                        });
-                        button.classList.add('active');
-                    });
-                    
-                    animationButtons.appendChild(button);
-                });
+                // Check TTS health
+                const ttsResponse = await fetch('/api/tts/info');
+                const ttsInfo = await ttsResponse.json();
                 
-                // Add stop button
-                const stopButton = document.createElement('button');
-                stopButton.classList.add('animation-btn');
-                stopButton.textContent = 'Stop';
-                stopButton.addEventListener('click', () => {
-                    stopAnimation();
-                    
-                    // Remove active state from all buttons
-                    document.querySelectorAll('.animation-btn').forEach(btn => {
-                        btn.classList.remove('active');
-                    });
-                });
+                console.log(`📊 TTS Info:`, ttsInfo);
+                
+                ttsSupported = ttsInfo.tts_available === true;
+                
+                if (ttsSupported) {
+                    console.log(`✅ TTS: ${ttsInfo.tts_engine} - Ready`);
+                    updateTTSStatus('ready');
+                } else {
+                    console.error('❌ TTS not available on server');
+                    updateTTSStatus('unavailable');
+                }
                 
-                animationButtons.appendChild(stopButton);
+            } catch (error) {
+                console.error('❌ TTS initialization failed:', error);
+                updateTTSStatus('error');
             }
             
-            // Play animation
-            function playAnimation(animationName) {
-                // In a real implementation, this would use Three.js AnimationMixer
-                // For this demo, we'll simulate the behavior
+            // ALWAYS load welcome message (even if TTS fails)
+            await loadWelcomeMessage();
+        }
+
+        // Update TTS status display (only in header now)
+        function updateTTSStatus(status) {
+            const statusElement = document.getElementById('tts-status');
+            
+            if (status === 'ready') {
+                statusElement.innerHTML = `<span class="status-dot status-online"></span>TTS: Ready`;
+            } else if (status === 'unavailable') {
+                statusElement.innerHTML = `<span class="status-dot status-offline"></span>TTS: Unavailable`;
+            } else if (status === 'error') {
+                statusElement.innerHTML = `<span class="status-dot status-offline"></span>TTS: Error`;
+            } else {
+                statusElement.innerHTML = `<span class="status-dot status-offline"></span>TTS: ${status}`;
+            }
+        }
+
+        // RELIABLE welcome message loading
+        async function loadWelcomeMessage() {
+            try {
+                console.log('📥 Loading welcome message...');
                 
-                console.log(`Playing animation: ${animationName}`);
+                // Give backend a moment to be ready
+                await new Promise(resolve => setTimeout(resolve, 1000));
                 
-                // In a real implementation, you would:
-                // 1. Get the animation clip by name
-                // 2. Create an AnimationMixer if it doesn't exist
-                // 3. Play the animation
+                const response = await fetch('/api/welcome');
+                const data = await response.json();
+                
+                if (data.status === 'success' && data.message) {
+                    const welcomeContainer = document.getElementById('welcome-container');
+                    const hasAudio = data.has_audio && data.audio_url;
+                    
+                    console.log(`🎯 Welcome loaded. Has audio: ${hasAudio}`);
+                    
+                    // Create welcome message
+                    const welcomeHTML = `
+                        <div class="chat-welcome" data-aos="fade-right">
+                            <div class="message-header">
+                                <div class="message-sender">
+                                    <i data-feather="smile" class="w-4 h-4"></i>
+                                    Sancia
+                                    ${hasAudio ? '<span class="audio-indicator"><i data-feather="volume-2" class="w-3 h-3"></i> TTS</span>' : ''}
+                                </div>
+                                <div class="message-timestamp">Just now</div>
+                            </div>
+                            <div class="message-content">${data.message.replace(/\n/g, '<br>')}</div>
+                            ${hasAudio ? `
+                                <div class="message-audio">
+                                    <audio controls preload="auto">
+                                        <source src="${data.audio_url}" type="audio/wav">
+                                        Your browser does not support audio playback.
+                                    </audio>
+                                    <div class="text-xs text-gray-500 mt-1 flex items-center">
+                                        <i data-feather="headphones" class="w-3 h-3 mr-1"></i>
+                                        Click play to hear the welcome message
+                                    </div>
+                                </div>
+                            ` : ''}
+                        </div>
+                    `;
+                    
+                    welcomeContainer.innerHTML = welcomeHTML;
+                    feather.replace();
+                    
+                }
+            } catch (error) {
+                console.error('❌ Failed to load welcome:', error);
+                // Fallback welcome message
+                document.getElementById('welcome-container').innerHTML = `
+                    <div class="chat-welcome">
+                        <div class="message-header">
+                            <div class="message-sender">
+                                <i data-feather="smile" class="w-4 h-4"></i>
+                                Sancia
+                            </div>
+                            <div class="message-timestamp">Just now</div>
+                        </div>
+                        <div class="message-content">
+                            (Seems something wrong just happended, please visit the page later)
+                        </div>
+                    </div>
+                `;
+                feather.replace();
             }
+        }
+
+        // 3D Model Viewer
+        document.addEventListener('DOMContentLoaded', function() {
+            const modelViewer = document.getElementById('model-viewer');
+            const modelLoading = document.getElementById('model-loading');
             
-            // Stop animation
-            function stopAnimation() {
-                // In a real implementation, this would stop the AnimationMixer
-                
-                console.log("Animation stopped");
+            async function loadSpecificModel() {
+                try {
+                    modelLoading.style.display = 'block';
+                    
+                    const response = await fetch('/api/model');
+                    const data = await response.json();
+                    
+                    if (data.status === 'success') {
+                        const modelUrl = '/api/model/file';
+                        modelViewer.src = modelUrl;
+                        
+                        modelViewer.addEventListener('load', function() {
+                            modelLoading.style.display = 'none';
+                        });
+                    } else {
+                        console.error('Failed to load model:', data.error);
+                        modelLoading.style.display = 'none';
+                    }
+                } catch (error) {
+                    console.error('Error loading model:', error);
+                    modelLoading.style.display = 'none';
+                }
             }
+            
+            loadSpecificModel();
         });
 
-        // Chat functionality with better error handling
+        // Chat functionality
         document.addEventListener('DOMContentLoaded', function() {
             const chatMessages = document.getElementById('chat-messages');
             const userInput = document.getElementById('user-input');
             const sendBtn = document.getElementById('send-btn');
 
-            // Test API connection on load
-            testAPIConnection();
-
-            async function testAPIConnection() {
-                try {
-                    const response = await fetch('/api/test');
-                    const data = await response.json();
-                    console.log('API test:', data);
-                } catch (error) {
-                    console.error('API test failed:', error);
-                }
-            }
+            // Initialize TTS (auto-enabled)
+            initializeTTS();
 
-            function handleKeyPress(event) {
-                if (event.key === 'Enter') {
+            // Event Listeners
+            sendBtn.addEventListener('click', sendMessage);
+            userInput.addEventListener('keypress', function(e) {
+                if (e.key === 'Enter') {
                     sendMessage();
                 }
-            }
+            });
+            
+            // Suggestion buttons
+            document.querySelectorAll('.suggestion-btn').forEach(button => {
+                button.addEventListener('click', function() {
+                    userInput.value = this.getAttribute('data-message');
+                    sendMessage();
+                });
+            });
 
             async function sendMessage() {
                 const message = userInput.value.trim();
                 if (!message) return;
 
-                // Add user message to chat
-                addMessage(message, 'user');
+                // Add user message
+                addUserMessage(message);
                 userInput.value = '';
                 sendBtn.disabled = true;
 
                 try {
-                    console.log('Sending message to API...');
+                    console.log('📤 Sending to AI...');
                     
                     const response = await fetch('/api/chat', {
                         method: 'POST',
-                        headers: {
-                            'Content-Type': 'application/json',
-                        },
+                        headers: {'Content-Type': 'application/json'},
                         body: JSON.stringify({ 
                             message: message,
-                            conversation_history: [] 
+                            voice: selectedVoice // Always use default
                         })
                     });
 
-                    console.log('Response status:', response.status);
-                    
-                    // Check if response is JSON
-                    const contentType = response.headers.get('content-type');
-                    if (!contentType || !contentType.includes('application/json')) {
-                        const text = await response.text();
-                        console.error('Non-JSON response:', text.substring(0, 200));
-                        throw new Error('Server returned HTML instead of JSON. Check the API endpoint.');
-                    }
-
                     const data = await response.json();
-                    console.log('Response data:', data);
-
+                    
                     if (response.ok) {
-                        addMessage(data.response, 'bot');
+                        // Add bot response with audio player
+                        addBotMessage(data.response, data.audio_url);
                     } else {
-                        addMessage(`Error: ${data.error || 'Unknown error'}`, 'bot');
+                        addBotMessage(`Error: ${data.error || 'Unknown error'}`, null);
                     }
                 } catch (error) {
-                    console.error('Network error:', error);
-                    addMessage(`Network error: ${error.message}`, 'bot');
+                    console.error('❌ Network error:', error);
+                    addBotMessage(`Network error: ${error.message}`, null);
                 } finally {
                     sendBtn.disabled = false;
                     userInput.focus();
                 }
             }
 
-            function addMessage(text, sender) {
+            function addUserMessage(text) {
                 const messageDiv = document.createElement('div');
+                messageDiv.className = 'message user-message rounded-lg p-4 shadow-sm mb-4 ml-auto';
                 
-                if (sender === 'user') {
-                    messageDiv.className = 'message bg-blue-100 rounded-lg p-4 shadow-sm mb-4 ml-auto';
-                    messageDiv.innerHTML = `
-                        <p class="text-blue-800">${text}</p>
-                        <span class="text-xs text-blue-600 block mt-1">${new Date().toLocaleTimeString()}</span>
-                    `;
-                } else {
-                    messageDiv.className = 'message bg-white rounded-lg p-4 shadow-sm mb-4 mr-auto';
-                    messageDiv.innerHTML = `
-                        <p class="text-gray-800">${text}</p>
-                        <span class="text-xs text-gray-500 block mt-1">${new Date().toLocaleTimeString()}</span>
+                const timestamp = new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
+                
+                messageDiv.innerHTML = `
+                    <div class="message-header">
+                        <div class="message-sender">
+                            <i data-feather="user" class="w-4 h-4"></i>
+                            You
+                        </div>
+                        <div class="message-timestamp">${timestamp}</div>
+                    </div>
+                    <div class="message-content">${escapeHtml(text)}</div>
+                `;
+                
+                chatMessages.appendChild(messageDiv);
+                chatMessages.scrollTop = chatMessages.scrollHeight;
+                feather.replace();
+            }
+
+            function addBotMessage(text, audioUrl) {
+                const messageDiv = document.createElement('div');
+                messageDiv.className = 'message bot-message rounded-lg p-4 shadow-sm mb-4 mr-auto';
+                
+                const timestamp = new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
+                
+                let audioHTML = '';
+                if (audioUrl) {
+                    audioHTML = `
+                        <div class="message-audio">
+                            <audio controls>
+                                <source src="${audioUrl}" type="audio/wav">
+                                Your browser does not support audio playback.
+                            </audio>
+                            <div class="text-xs text-gray-500 mt-1 flex items-center">
+                                <i data-feather="headphones" class="w-3 h-3 mr-1"></i>
+                                Click play to hear the response
+                            </div>
+                        </div>
                     `;
                 }
                 
+                messageDiv.innerHTML = `
+                    <div class="message-header">
+                        <div class="message-sender">
+                            <i data-feather="smile" class="w-4 h-4"></i>
+                            Sancia
+                            ${audioUrl ? '<span class="audio-indicator"><i data-feather="volume-2" class="w-3 h-3"></i> TTS</span>' : ''}
+                        </div>
+                        <div class="message-timestamp">${timestamp}</div>
+                    </div>
+                    <div class="message-content">${escapeHtml(text)}</div>
+                    ${audioHTML}
+                `;
+                
                 chatMessages.appendChild(messageDiv);
                 chatMessages.scrollTop = chatMessages.scrollHeight;
+                feather.replace();
+                
+                // Auto-play if TTS is enabled and we have audio
+                if (ttsEnabled && audioUrl) {
+                    setTimeout(() => {
+                        const audioElement = messageDiv.querySelector('audio');
+                        if (audioElement) {
+                            audioElement.play().catch(e => {
+                                console.log('Auto-play prevented:', e);
+                            });
+                        }
+                    }, 500);
+                }
             }
 
-            // Event listeners
-            sendBtn.addEventListener('click', sendMessage);
-            userInput.addEventListener('keypress', handleKeyPress);
-            
-            // Suggestion buttons functionality
-            document.querySelectorAll('.suggestion-btn').forEach(button => {
-                button.addEventListener('click', function() {
-                    userInput.value = this.getAttribute('data-message');
-                    sendMessage();
-                });
-            });
+            console.log('🚀 Chat system ready with auto-TTS');
         });
     </script>
 </body>