| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Rohan - 3D AI Assistant</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> |
| <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/loaders/GLTFLoader.min.js"></script> |
| <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.min.js"></script> |
| <style> |
| #model-container { |
| width: 300px; |
| height: 300px; |
| margin: 0 auto; |
| position: relative; |
| } |
| |
| #model-viewer { |
| width: 100%; |
| height: 100%; |
| background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%); |
| border-radius: 50%; |
| overflow: hidden; |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); |
| } |
| |
| .chat-container { |
| height: 400px; |
| overflow-y: auto; |
| scrollbar-width: thin; |
| } |
| |
| .chat-container::-webkit-scrollbar { |
| width: 6px; |
| } |
| |
| .chat-container::-webkit-scrollbar-thumb { |
| background-color: rgba(156, 163, 175, 0.5); |
| border-radius: 3px; |
| } |
| |
| .user-message { |
| animation: fadeIn 0.3s ease; |
| } |
| |
| .ai-message { |
| animation: fadeIn 0.5s ease; |
| } |
| |
| @keyframes fadeIn { |
| from { opacity: 0; transform: translateY(10px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
| |
| .input-container { |
| box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.05); |
| } |
| |
| .status-indicator { |
| transition: all 0.3s ease; |
| } |
| |
| .typing .status-indicator { |
| animation: pulse 1.5s infinite; |
| } |
| |
| @keyframes pulse { |
| 0%, 100% { opacity: 0.5; } |
| 50% { opacity: 1; } |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 min-h-screen flex flex-col"> |
| <div class="container mx-auto px-4 py-8 flex-1 flex flex-col max-w-3xl"> |
| |
| <header class="text-center mb-8"> |
| <h1 class="text-4xl font-bold text-indigo-600 mb-2">Rohan</h1> |
| <p class="text-gray-600">Your 3D AI assistant</p> |
| </header> |
|
|
| |
| <div class="mb-8 flex flex-col items-center"> |
| <div id="model-container"> |
| <div id="model-viewer"></div> |
| </div> |
| <div class="mt-4 text-center"> |
| <div class="status-indicator inline-block w-3 h-3 rounded-full bg-green-500 mr-2"></div> |
| <span class="text-gray-600 status-text">Ready to help you</span> |
| </div> |
| </div> |
|
|
| |
| <div class="chat-container bg-white rounded-lg shadow-md p-4 mb-4 flex-1"> |
| <div class="ai-message flex mb-4"> |
| <div class="flex-shrink-0 mr-3"> |
| <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center"> |
| <i class="fas fa-robot text-indigo-500"></i> |
| </div> |
| </div> |
| <div class="bg-indigo-50 rounded-lg p-3 max-w-[85%]"> |
| <p class="text-gray-800">Namaste! I'm Rohan, your 3D AI assistant. How can I help you today?</p> |
| </div> |
| </div> |
| <div id="chat-messages"></div> |
| </div> |
|
|
| |
| <div class="input-container bg-white rounded-lg shadow-md p-4"> |
| <form id="chat-form" class="flex"> |
| <input |
| type="text" |
| id="user-input" |
| placeholder="Ask me anything..." |
| class="flex-1 border border-gray-300 rounded-l-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent" |
| autocomplete="off" |
| > |
| <button |
| type="submit" |
| class="bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-6 rounded-r-lg transition duration-200" |
| > |
| Send |
| </button> |
| </form> |
| <div class="mt-2 flex justify-between text-xs text-gray-500"> |
| <span>Try: "weather in Delhi" or "what's 20% of 150?"</span> |
| <span id="typing-indicator" class="hidden"> |
| <i class="fas fa-circle-notch fa-spin mr-1"></i> Rohan is typing... |
| </span> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| document.addEventListener('DOMContentLoaded', function() { |
| |
| const container = document.getElementById('model-viewer'); |
| const scene = new THREE.Scene(); |
| const camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000); |
| const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); |
| renderer.setSize(container.clientWidth, container.clientHeight); |
| container.appendChild(renderer.domElement); |
| |
| |
| const ambientLight = new THREE.AmbientLight(0xffffff, 0.6); |
| scene.add(ambientLight); |
| |
| const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8); |
| directionalLight.position.set(1, 1, 1); |
| scene.add(directionalLight); |
| |
| |
| const controls = new THREE.OrbitControls(camera, renderer.domElement); |
| controls.enableZoom = false; |
| controls.enablePan = false; |
| controls.maxPolarAngle = Math.PI * 0.6; |
| controls.minPolarAngle = Math.PI * 0.4; |
| controls.maxAzimuthAngle = Math.PI * 0.2; |
| controls.minAzimuthAngle = -Math.PI * 0.2; |
| |
| |
| camera.position.z = 2; |
| |
| |
| const loader = new THREE.GLTFLoader(); |
| const modelUrl = 'https://cdn.jsdelivr.net/gh/mrdoob/three.js@r128/examples/models/gltf/Parrot.glb'; |
| |
| |
| |
| loader.load( |
| modelUrl, |
| function(gltf) { |
| const model = gltf.scene; |
| model.scale.set(0.02, 0.02, 0.02); |
| model.position.y = -0.5; |
| scene.add(model); |
| |
| |
| function animate() { |
| requestAnimationFrame(animate); |
| model.rotation.y += 0.005; |
| controls.update(); |
| renderer.render(scene, camera); |
| } |
| animate(); |
| }, |
| undefined, |
| function(error) { |
| console.error('Error loading 3D model:', error); |
| |
| const geometry = new THREE.SphereGeometry(1, 32, 32); |
| const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); |
| const sphere = new THREE.Mesh(geometry, material); |
| scene.add(sphere); |
| |
| function animate() { |
| requestAnimationFrame(animate); |
| sphere.rotation.y += 0.01; |
| renderer.render(scene, camera); |
| } |
| animate(); |
| } |
| ); |
| |
| |
| const chatForm = document.getElementById('chat-form'); |
| const userInput = document.getElementById('user-input'); |
| const chatMessages = document.getElementById('chat-messages'); |
| const typingIndicator = document.getElementById('typing-indicator'); |
| const statusText = document.querySelector('.status-text'); |
| const statusIndicator = document.querySelector('.status-indicator'); |
| |
| |
| function setStatus(status, text) { |
| statusIndicator.className = `status-indicator inline-block w-3 h-3 rounded-full mr-2 ${status}`; |
| statusText.textContent = text; |
| |
| if (status === 'typing') { |
| statusIndicator.classList.add('typing'); |
| } else { |
| statusIndicator.classList.remove('typing'); |
| } |
| } |
| |
| |
| function addMessage(content, isUser) { |
| const messageDiv = document.createElement('div'); |
| messageDiv.className = `${isUser ? 'user-message' : 'ai-message'} flex mb-4 ${isUser ? 'justify-end' : ''}`; |
| |
| messageDiv.innerHTML = ` |
| ${isUser ? '' : ` |
| <div class="flex-shrink-0 mr-3"> |
| <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center"> |
| <i class="fas fa-robot text-indigo-500"></i> |
| </div> |
| </div> |
| `} |
| <div class="${isUser ? 'bg-indigo-100' : 'bg-indigo-50'} rounded-lg p-3 max-w-[85%]"> |
| <p class="text-gray-800">${content}</p> |
| </div> |
| ${isUser ? ` |
| <div class="flex-shrink-0 ml-3"> |
| <div class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center"> |
| <i class="fas fa-user text-gray-500"></i> |
| </div> |
| </div> |
| ` : ''} |
| `; |
| |
| chatMessages.appendChild(messageDiv); |
| chatMessages.scrollTop = chatMessages.scrollHeight; |
| } |
| |
| |
| function getAIResponse(message) { |
| return new Promise((resolve) => { |
| setTimeout(() => { |
| const lowerMsg = message.toLowerCase(); |
| |
| if (lowerMsg.includes('weather') || lowerMsg.includes('temperature')) { |
| const location = message.replace(/weather|temperature|in|at/gi, '').trim(); |
| resolve(`The weather in ${location || "your location"} is pleasant today! Around 30°C with moderate humidity.`); |
| } |
| else if (lowerMsg.includes('hi') || lowerMsg.includes('hello') || lowerMsg.includes('namaste')) { |
| resolve("Namaste! How can I assist you today?"); |
| } |
| else if (lowerMsg.includes('how are you')) { |
| resolve("I'm doing great, dhanyavaad for asking! What can I do for you?"); |
| } |
| else if (lowerMsg.includes('thank') || lowerMsg.includes('dhanyavaad')) { |
| resolve("You're most welcome! Let me know if you need anything else."); |
| } |
| else if (lowerMsg.includes('+') || lowerMsg.includes('-') || lowerMsg.includes('*') || lowerMsg.includes('/') || lowerMsg.includes('math') || lowerMsg.includes('%')) { |
| try { |
| const result = eval(message.replace(/[^-()\d/*+.]/g, '')); |
| resolve(`The answer is ${result}.`); |
| } catch { |
| resolve("I couldn't calculate that. Could you please rephrase your math question?"); |
| } |
| } |
| else if (lowerMsg.includes('time')) { |
| const now = new Date(); |
| resolve(`The current time is ${now.toLocaleTimeString()}.`); |
| } |
| else if (lowerMsg.includes('india') || lowerMsg.includes('bharat')) { |
| resolve("India is a beautiful country with diverse culture, languages, and traditions. It's known for its rich history, delicious food, and warm hospitality!"); |
| } |
| else { |
| resolve(`I understand you're asking about "${message}". Here's what I found: This is a simulated response. In a real app, I'd provide a detailed answer to your question.`); |
| } |
| }, 1500); |
| }); |
| } |
| |
| |
| chatForm.addEventListener('submit', async function(e) { |
| e.preventDefault(); |
| const message = userInput.value.trim(); |
| |
| if (!message) return; |
| |
| |
| addMessage(message, true); |
| userInput.value = ''; |
| |
| |
| setStatus('bg-yellow-500 typing', 'Thinking...'); |
| typingIndicator.classList.remove('hidden'); |
| |
| |
| try { |
| const response = await getAIResponse(message); |
| |
| |
| typingIndicator.classList.add('hidden'); |
| |
| |
| if (response.includes('Namaste') || response.includes('welcome') || response.includes('pleasant')) { |
| setStatus('bg-green-500', 'Happy to help!'); |
| } else if (response.includes('understand') || response.includes('rephrase') || response.includes('think')) { |
| setStatus('bg-blue-500', 'Processing...'); |
| } else if (response.includes('couldn\'t') || response.includes('sorry')) { |
| setStatus('bg-red-500', 'Having trouble'); |
| } else { |
| setStatus('bg-green-500', 'Ready to help'); |
| } |
| |
| |
| addMessage(response, false); |
| } catch (error) { |
| typingIndicator.classList.add('hidden'); |
| setStatus('bg-red-500', 'Error occurred'); |
| addMessage("Something went wrong. Please try again.", false); |
| console.error(error); |
| } |
| }); |
| |
| |
| userInput.focus(); |
| |
| |
| window.addEventListener('resize', function() { |
| camera.aspect = 1; |
| camera.updateProjectionMatrix(); |
| renderer.setSize(container.clientWidth, container.clientHeight); |
| }); |
| }); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=m-Kairo/chatbot" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
