Spaces:

FinalYearProjectAY2526
/

FurryChat.ai

Running

App Files Files Community

Andrewbluebird commited on Nov 22, 2025

Commit

17d2409

verified ·

1 Parent(s): 6298ac4

Manual changes saved

Browse files

Files changed (1) hide show

index.html +421 -86

index.html CHANGED Viewed

@@ -1,11 +1,10 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>FurryChat.ai - Introduction</title>
-<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
     <script src="https://cdn.tailwindcss.com"></script>
     <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
     <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
@@ -149,8 +148,7 @@
     </style>
 </head>
 <body class="bg-gray-50">
-    <!-- Renamed to IntroPage.html -->
-<!-- Hero Section with Vanta.js Background -->
     <div id="vanta-bg" class="absolute top-0 left-0 w-full h-screen z-0"></div>
     <div class="relative z-10">
@@ -167,100 +165,106 @@
                     <a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">Pricing</a>
                     <a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">About</a>
                 </div>
-                    <a href="SignIn.html" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors">
-                    Login
-</a>
-</div>
         </nav>
-        <!-- Hero Section -->
-        <section class="py-20 px-4 relative">
-            <div class="container mx-auto text-center">
-                <h1 class="text-5xl md:text-6xl font-bold mb-6 text-gray-800">Where <span class="text-blue-600">Furry Friends</span> Come to Life</h1>
-                <p class="text-xl md:text-2xl text-gray-600 max-w-4xl mx-auto mb-10">
-                    AI-powered roleplay with your favorite anthropomorphic characters. Create, chat, and bond with your digital furry companions.
-                </p>
-                <div class="flex flex-col md:flex-row justify-center gap-4">
-                        <a href="SignIn.html" class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-lg font-semibold transition-colors">
-                        Login
-                    </a>
-<a href="#" class="bg-white hover:bg-gray-100 text-gray-800 px-8 py-3 rounded-lg font-semibold border border-gray-200 transition-colors">
-                        Meet Our Characters
-                    </a>
-                </div>
-                <div class="mt-12 max-w-md mx-auto bg-white p-6 rounded-lg shadow-sm">
-                    <h3 class="text-lg font-medium text-center mb-4">Get updates via WhatsApp (HK)</h3>
-                    <div class="flex">
-                        <select class="bg-gray-100 border border-gray-300 text-gray-700 py-2 px-3 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
-                            <option>+852</option>
-                        </select>
-                        <input type="tel" placeholder="Phone number" class="flex-1 border border-gray-300 rounded-r-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" pattern="[0-9]{8}">
                     </div>
-                    <button class="w-full mt-4 bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-4 rounded-lg transition-colors">
-                        Subscribe via WhatsApp
-                    </button>
                 </div>
-</div>
-        </section>
-        <!-- Featured Characters -->
-        <section class="py-16 px-4">
-            <div class="container mx-auto">
-                <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Meet Our <span class="text-blue-600">Furry Pals</span></h2>
-                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
-<!-- Character 1 -->
-                    <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow">
-                        <img src="http://static.photos/animals/640x360/1" alt="Luna the Wolf" class="w-full h-48 object-cover">
-                        <div class="p-6">
-                            <h3 class="text-xl font-bold mb-2 text-gray-800">Luna the Wolf</h3>
-                            <p class="text-gray-600 mb-4">Mystical and wise, Luna guides with ancestral knowledge.</p>
-                            <a href="#" class="inline-block text-blue-600 hover:text-blue-700 font-medium">Chat with Luna →</a>
                         </div>
-                    </div>
-                    <!-- Character 2 -->
-                    <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow">
-                        <img src="http://static.photos/animals/640x360/2" alt="Rex the Fox" class="w-full h-48 object-cover">
-                        <div class="p-6">
-                            <h3 class="text-xl font-bold mb-2 text-gray-800">Rex the Fox</h3>
-                            <p class="text-gray-600 mb-4">Clever and playful, Rex always has a trick up his sleeve.</p>
-                            <a href="#" class="inline-block text-blue-600 hover:text-blue-700 font-medium">Chat with Rex →</a>
                         </div>
-                    </div>
-</div>
-            </div>
-        </section>
-        <!-- Features Section (changed from Chat section) -->
-<section class="py-16 px-4">
-            <div class="container mx-auto">
-                <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Amazing <span class="text-blue-600">Features</span></h2>
-                <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
-                    <div class="text-center">
-                        <div class="bg-blue-100 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
-                            <i data-feather="cpu" class="text-blue-600 w-8 h-8"></i>
                         </div>
-                        <h3 class="text-xl font-semibold mb-2">Advanced AI</h3>
-                        <p class="text-gray-600">Our characters learn and remember your preferences for more natural conversations.</p>
                     </div>
-                    <div class="text-center">
-                        <div class="bg-blue-100 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
-                            <i data-feather="sliders" class="text-blue-600 w-8 h-8"></i>
                         </div>
-                        <h3 class="text-xl font-semibold mb-2">Customization</h3>
-                        <p class="text-gray-600">Create your own furry character with unique traits and personality.</p>
-                    </div>
-                    <div class="text-center">
-                        <div class="bg-blue-100 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
-                            <i data-feather="globe" class="text-blue-600 w-8 h-8"></i>
                         </div>
-                        <h3 class="text-xl font-semibold mb-2">Multi-platform</h3>
-                        <p class="text-gray-600">Chat anywhere, anytime - web, mobile, and desktop apps available.</p>
                     </div>
                 </div>
             </div>
-        </section>
-<!-- Footer -->
         <footer class="bg-gray-800 text-white mt-16 py-8">
             <div class="container mx-auto px-4">
                 <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
@@ -311,7 +315,338 @@
         </footer>
     </div>
-<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>FurryChat.ai</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
     <script src="https://cdn.tailwindcss.com"></script>
     <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
     <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
     </style>
 </head>
 <body class="bg-gray-50">
+    <!-- Hero Section with Vanta.js Background -->
     <div id="vanta-bg" class="absolute top-0 left-0 w-full h-screen z-0"></div>
     <div class="relative z-10">
                     <a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">Pricing</a>
                     <a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">About</a>
                 </div>
+                <button class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors">
+                    Get Started
+                </button>
+            </div>
         </nav>
+        <!-- Main Content -->
+        <div class="container mx-auto px-4 py-8">
+            <!-- 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="flex items-center space-x-4">
+                        <!-- 3D Avatar Container -->
+                        <div class="w-16 h-16 bg-white bg-opacity-20 rounded-lg overflow-hidden">
+                            <div id="avatar-canvas" style="height: 64px; width: 64px;"></div>
+                        </div>
+                        <div>
+                            <h2 class="text-xl font-semibold">Sancia</h2>
+                            <p class="text-blue-100 text-sm">The Free-to-try furry AI</p>
+                        </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">
+                            <model-viewer
+                                id="model-viewer"
+                                src=""
+                                alt="A 3D model"
+                                auto-rotate
+                                camera-controls
+                                shadow-intensity="1"
+                                environment-image="neutral"
+                                exposure="1">
+                            </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>
                     </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>
+                            <!-- Sample conversation starters -->
+                            <div class="grid grid-cols-1 gap-2 mb-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
+                                </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?
+                                </button>
+                            </div>
                         </div>
+                        <!-- Input Area -->
+                        <div class="border-t border-gray-200 p-4 bg-white">
+                            <div class="flex space-x-2">
+                                <input type="text" id="user-input" placeholder="Type your message here..."
+                                       class="flex-1 border border-gray-300 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
+                                <button id="send-btn" class="bg-blue-600 text-white p-3 rounded-lg hover:bg-blue-700 transition-colors">
+                                    <i data-feather="send" class="w-5 h-5"></i>
+                                </button>
+                            </div>
                         </div>
                     </div>
                 </div>
             </div>
+        </div>
+        <!-- Footer -->
         <footer class="bg-gray-800 text-white mt-16 py-8">
             <div class="container mx-auto px-4">
                 <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
         </footer>
     </div>
+    <script>
+        // Initialize animations and icons
+        AOS.init({
+            duration: 800,
+            easing: 'ease-in-out',
+            once: true
+        });
+        feather.replace();
+        // Initialize Vanta.js background
+        VANTA.GLOBE({
+            el: "#vanta-bg",
+            mouseControls: true,
+            touchControls: true,
+            gyroControls: false,
+            minHeight: 200.00,
+            minWidth: 200.00,
+            scale: 1.00,
+            scaleMobile: 1.00,
+            color: 0x3b82f6,
+            backgroundColor: 0xf8fafc,
+            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 }
+                        )
+                    )
+                );
+            };
+            // 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');
+            let currentAnimations = [];
+            // Handle file upload
+            uploadBtn.addEventListener('click', function() {
+                modelUpload.click();
+            });
+            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();
+                    });
+                }
+            });
+            // 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);
+            }
+            // Set up animation control buttons
+            function setupAnimationControls(animations) {
+                animationControls.style.display = 'block';
+                animationButtons.innerHTML = '';
+                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);
+                });
+                // 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');
+                    });
+                });
+                animationButtons.appendChild(stopButton);
+            }
+            // Play animation
+            function playAnimation(animationName) {
+                // In a real implementation, this would use Three.js AnimationMixer
+                // For this demo, we'll simulate the behavior
+                console.log(`Playing animation: ${animationName}`);
+                // 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
+            }
+            // Stop animation
+            function stopAnimation() {
+                // In a real implementation, this would stop the AnimationMixer
+                console.log("Animation stopped");
+            }
+        });
+        // Chat functionality with better error handling
+        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);
+                }
+            }
+            function handleKeyPress(event) {
+                if (event.key === 'Enter') {
+                    sendMessage();
+                }
+            }
+            async function sendMessage() {
+                const message = userInput.value.trim();
+                if (!message) return;
+                // Add user message to chat
+                addMessage(message, 'user');
+                userInput.value = '';
+                sendBtn.disabled = true;
+                try {
+                    console.log('Sending message to API...');
+                    const response = await fetch('/api/chat', {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                        body: JSON.stringify({
+                            message: message,
+                            conversation_history: []
+                        })
+                    });
+                    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');
+                    } else {
+                        addMessage(`Error: ${data.error || 'Unknown error'}`, 'bot');
+                    }
+                } catch (error) {
+                    console.error('Network error:', error);
+                    addMessage(`Network error: ${error.message}`, 'bot');
+                } finally {
+                    sendBtn.disabled = false;
+                    userInput.focus();
+                }
+            }
+            function addMessage(text, sender) {
+                const messageDiv = document.createElement('div');
+                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>
+                    `;
+                }
+                chatMessages.appendChild(messageDiv);
+                chatMessages.scrollTop = chatMessages.scrollHeight;
+            }
+            // 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();
+                });
+            });
+        });
+    </script>
 </body>
 </html>