|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>AI Companion - Nova</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"> |
|
|
<style> |
|
|
@keyframes float { |
|
|
0%, 100% { transform: translateY(0); } |
|
|
50% { transform: translateY(-10px); } |
|
|
} |
|
|
.floating { |
|
|
animation: float 4s ease-in-out infinite; |
|
|
} |
|
|
.chat-bubble { |
|
|
border-radius: 20px; |
|
|
position: relative; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.chat-bubble:after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
bottom: -10px; |
|
|
left: 20px; |
|
|
border-width: 10px 10px 0; |
|
|
border-style: solid; |
|
|
border-color: #3b82f6 transparent; |
|
|
} |
|
|
.user-bubble:after { |
|
|
left: auto; |
|
|
right: 20px; |
|
|
border-color: #60a5fa transparent; |
|
|
} |
|
|
.typing-indicator span { |
|
|
display: inline-block; |
|
|
width: 8px; |
|
|
height: 8px; |
|
|
border-radius: 50%; |
|
|
background: #93c5fd; |
|
|
margin: 0 2px; |
|
|
} |
|
|
.typing-indicator span:nth-child(1) { |
|
|
animation: bounce 1.3s infinite; |
|
|
} |
|
|
.typing-indicator span:nth-child(2) { |
|
|
animation: bounce 1.3s infinite 0.2s; |
|
|
} |
|
|
.typing-indicator span:nth-child(3) { |
|
|
animation: bounce 1.3s infinite 0.4s; |
|
|
} |
|
|
@keyframes bounce { |
|
|
0%, 100% { transform: translateY(0); } |
|
|
50% { transform: translateY(-5px); } |
|
|
} |
|
|
.mood-selector input[type="radio"]:checked + label { |
|
|
transform: scale(1.1); |
|
|
box-shadow: 0 0 10px rgba(59, 130, 246, 0.5); |
|
|
} |
|
|
.glow { |
|
|
box-shadow: 0 0 15px rgba(59, 130, 246, 0.5); |
|
|
} |
|
|
.dark-mode { |
|
|
background: linear-gradient(to bottom right, #1e293b, #0f172a) !important; |
|
|
color: #f8fafc !important; |
|
|
} |
|
|
.dark-mode .dark-bg { |
|
|
background-color: rgba(15, 23, 42, 0.7) !important; |
|
|
border-color: #334155 !important; |
|
|
} |
|
|
.dark-mode .dark-text { |
|
|
color: #f8fafc !important; |
|
|
} |
|
|
.dark-mode .dark-input { |
|
|
background-color: #1e293b !important; |
|
|
border-color: #334155 !important; |
|
|
color: #f8fafc !important; |
|
|
} |
|
|
.dark-mode .dark-button { |
|
|
background-color: #1e40af !important; |
|
|
color: #f8fafc !important; |
|
|
} |
|
|
.dark-mode .dark-chat-bubble { |
|
|
background-color: #1e40af !important; |
|
|
} |
|
|
.dark-mode .dark-chat-bubble:after { |
|
|
border-color: #1e40af transparent !important; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gradient-to-br from-blue-900 to-indigo-900 min-h-screen text-white"> |
|
|
<div class="container mx-auto px-4 py-8 max-w-4xl"> |
|
|
<header class="flex justify-between items-center mb-8"> |
|
|
<div> |
|
|
<h1 class="text-3xl font-bold">Nova</h1> |
|
|
<p class="text-blue-200">Your AI Companion</p> |
|
|
</div> |
|
|
<div class="flex space-x-4"> |
|
|
<button id="settings-btn" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-full transition-all"> |
|
|
<i class="fas fa-cog"></i> |
|
|
</button> |
|
|
<button id="dark-mode-btn" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-full transition-all"> |
|
|
<i class="fas fa-moon"></i> |
|
|
</button> |
|
|
<button id="tts-btn" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-full transition-all"> |
|
|
<i class="fas fa-volume-up"></i> |
|
|
</button> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
<div class="md:col-span-1 flex flex-col items-center"> |
|
|
<div class="relative mb-6"> |
|
|
<div id="avatar" class="w-48 h-48 bg-gradient-to-br from-blue-400 to-indigo-500 rounded-full flex items-center justify-center floating"> |
|
|
<div class="w-40 h-40 bg-gradient-to-br from-blue-300 to-indigo-400 rounded-full flex items-center justify-center overflow-hidden"> |
|
|
<img src="https://i.imgur.com/JYQ3Z6T.png" alt="AI Girl" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
</div> |
|
|
<div class="absolute -bottom-2 -right-2 bg-blue-500 rounded-full p-2 glow"> |
|
|
<i class="fas fa-bolt text-white"></i> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-blue-800 bg-opacity-50 rounded-xl p-6 w-full mb-6 dark-bg"> |
|
|
<h3 class="font-semibold mb-3">Personality Settings</h3> |
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<label class="block text-blue-200 mb-1">Mood</label> |
|
|
<div class="flex justify-between mood-selector"> |
|
|
<input type="radio" name="mood" id="happy" class="hidden" checked> |
|
|
<label for="happy" class="cursor-pointer bg-blue-600 hover:bg-blue-700 w-10 h-10 rounded-full flex items-center justify-center transition-all dark-button"> |
|
|
<i class="fas fa-smile"></i> |
|
|
</label> |
|
|
<input type="radio" name="mood" id="neutral" class="hidden"> |
|
|
<label for="neutral" class="cursor-pointer bg-blue-600 hover:bg-blue-700 w-10 h-10 rounded-full flex items-center justify-center transition-all dark-button"> |
|
|
<i class="fas fa-meh"></i> |
|
|
</label> |
|
|
<input type="radio" name="mood" id="serious" class="hidden"> |
|
|
<label for="serious" class="cursor-pointer bg-blue-600 hover:bg-blue-700 w-10 h-10 rounded-full flex items-center justify-center transition-all dark-button"> |
|
|
<i class="fas fa-frown"></i> |
|
|
</label> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-blue-200 mb-1">Voice</label> |
|
|
<select id="voice-select" class="w-full bg-blue-900 border border-blue-700 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 dark-input"> |
|
|
<option>Soft</option> |
|
|
<option>Professional</option> |
|
|
<option>Playful</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-blue-800 bg-opacity-50 rounded-xl p-6 w-full dark-bg"> |
|
|
<h3 class="font-semibold mb-3">Quick Actions</h3> |
|
|
<div class="grid grid-cols-2 gap-3"> |
|
|
<button id="music-btn" class="bg-blue-600 hover:bg-blue-700 px-3 py-2 rounded-lg flex flex-col items-center transition-all dark-button"> |
|
|
<i class="fas fa-music mb-1"></i> |
|
|
<span class="text-xs">Music</span> |
|
|
</button> |
|
|
<button id="stories-btn" class="bg-blue-600 hover:bg-blue-700 px-3 py-2 rounded-lg flex flex-col items-center transition-all dark-button"> |
|
|
<i class="fas fa-book mb-1"></i> |
|
|
<span class="text-xs">Stories</span> |
|
|
</button> |
|
|
<button id="games-btn" class="bg-blue-600 hover:bg-blue-700 px-3 py-2 rounded-lg flex flex-col items-center transition-all dark-button"> |
|
|
<i class="fas fa-gamepad mb-1"></i> |
|
|
<span class="text-xs">Games</span> |
|
|
</button> |
|
|
<button id="ideas-btn" class="bg-blue-600 hover:bg-blue-700 px-3 py-2 rounded-lg flex flex-col items-center transition-all dark-button"> |
|
|
<i class="fas fa-lightbulb mb-1"></i> |
|
|
<span class="text-xs">Ideas</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="md:col-span-2"> |
|
|
<div class="bg-blue-800 bg-opacity-50 rounded-xl p-6 h-full flex flex-col dark-bg"> |
|
|
<div class="flex-1 mb-6 overflow-y-auto max-h-96 space-y-4" id="chat-container"> |
|
|
<div class="flex items-start space-x-3"> |
|
|
<div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center dark-button"> |
|
|
<i class="fas fa-robot"></i> |
|
|
</div> |
|
|
<div class="chat-bubble bg-blue-600 px-4 py-3 max-w-xs dark-chat-bubble"> |
|
|
<p>Hello! I'm Nova, your AI companion. How can I assist you today?</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-auto"> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<button id="mic-btn" class="bg-blue-600 hover:bg-blue-700 w-10 h-10 rounded-full flex items-center justify-center transition-all dark-button"> |
|
|
<i class="fas fa-microphone"></i> |
|
|
</button> |
|
|
<div class="flex-1 relative"> |
|
|
<input id="message-input" type="text" placeholder="Type your message..." |
|
|
class="w-full bg-blue-900 border border-blue-700 rounded-full px-4 py-3 pr-12 focus:outline-none focus:ring-2 focus:ring-blue-500 dark-input"> |
|
|
<button id="send-btn" class="absolute right-3 top-1/2 transform -translate-y-1/2 text-blue-300 hover:text-white"> |
|
|
<i class="fas fa-paper-plane"></i> |
|
|
</button> |
|
|
</div> |
|
|
<button id="attach-btn" class="bg-blue-600 hover:bg-blue-700 w-10 h-10 rounded-full flex items-center justify-center transition-all dark-button"> |
|
|
<i class="fas fa-paperclip"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="flex justify-between mt-3 text-xs text-blue-300"> |
|
|
<span>Nova v2.4.0</span> |
|
|
<span id="connection-status">Connection: Stable</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="settings-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> |
|
|
<div class="bg-blue-800 rounded-xl p-6 w-full max-w-md dark-bg"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h2 class="text-xl font-bold">Settings</h2> |
|
|
<button id="close-settings" class="text-blue-300 hover:text-white"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<label class="block text-blue-200 mb-2">Theme Color</label> |
|
|
<div class="flex space-x-2"> |
|
|
<button data-color="blue" class="w-8 h-8 bg-blue-500 rounded-full"></button> |
|
|
<button data-color="purple" class="w-8 h-8 bg-purple-500 rounded-full"></button> |
|
|
<button data-color="pink" class="w-8 h-8 bg-pink-500 rounded-full"></button> |
|
|
<button data-color="teal" class="w-8 h-8 bg-teal-500 rounded-full"></button> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-blue-200 mb-2">Notification Sound</label> |
|
|
<select class="w-full bg-blue-900 border border-blue-700 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 dark-input"> |
|
|
<option>Chime</option> |
|
|
<option>Bell</option> |
|
|
<option>None</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-blue-200 mb-2">Response Speed</label> |
|
|
<input type="range" min="1" max="5" value="3" class="w-full"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-blue-200 mb-2">API Key (Optional)</label> |
|
|
<input id="api-key-input" type="password" placeholder="Enter OpenAI API key" |
|
|
class="w-full bg-blue-900 border border-blue-700 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 dark-input"> |
|
|
<p class="text-xs text-blue-300 mt-1">Leave blank to use free tier (limited)</p> |
|
|
</div> |
|
|
<button id="save-settings" class="w-full bg-blue-600 hover:bg-blue-700 py-2 rounded-lg transition-all dark-button"> |
|
|
Save Settings |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
const chatContainer = document.getElementById('chat-container'); |
|
|
const messageInput = document.getElementById('message-input'); |
|
|
const sendBtn = document.getElementById('send-btn'); |
|
|
const micBtn = document.getElementById('mic-btn'); |
|
|
const attachBtn = document.getElementById('attach-btn'); |
|
|
const darkModeBtn = document.getElementById('dark-mode-btn'); |
|
|
const settingsBtn = document.getElementById('settings-btn'); |
|
|
const closeSettings = document.getElementById('close-settings'); |
|
|
const settingsModal = document.getElementById('settings-modal'); |
|
|
const musicBtn = document.getElementById('music-btn'); |
|
|
const storiesBtn = document.getElementById('stories-btn'); |
|
|
const gamesBtn = document.getElementById('games-btn'); |
|
|
const ideasBtn = document.getElementById('ideas-btn'); |
|
|
const voiceSelect = document.getElementById('voice-select'); |
|
|
const connectionStatus = document.getElementById('connection-status'); |
|
|
const avatar = document.getElementById('avatar'); |
|
|
const ttsBtn = document.getElementById('tts-btn'); |
|
|
const apiKeyInput = document.getElementById('api-key-input'); |
|
|
const saveSettingsBtn = document.getElementById('save-settings'); |
|
|
|
|
|
|
|
|
const moodResponses = { |
|
|
happy: ["That sounds wonderful! 😊", "I'm so happy to hear that! 🌟", "What a great day! 🌈"], |
|
|
neutral: ["I understand.", "That's interesting.", "Let me think about that."], |
|
|
serious: ["This is important.", "I'll take this seriously.", "Let's focus on this matter."] |
|
|
}; |
|
|
|
|
|
|
|
|
const actionResponses = { |
|
|
music: ["Here are some songs you might like: 'Sunshine Pop' by Nova, 'Starry Night' by AI Beats", "How about some relaxing piano music?", "I can recommend music based on your mood!"], |
|
|
stories: ["Once upon a time in a digital world...", "Would you like a fairy tale, sci-fi, or mystery story?", "Here's a short story: The robot who wanted to be human..."], |
|
|
games: ["Let's play a word game! I'm thinking of an animal...", "How about 20 questions?", "Try to guess the number I'm thinking between 1 and 10!"], |
|
|
ideas: ["How about writing a story about a time-traveling cat?", "You could create an art project using recycled materials!", "What if you designed your own board game?"] |
|
|
}; |
|
|
|
|
|
|
|
|
let currentMood = 'happy'; |
|
|
let isDarkMode = false; |
|
|
let isListening = false; |
|
|
let isTTSEnabled = false; |
|
|
let recognition; |
|
|
let apiKey = ''; |
|
|
let synth = window.speechSynthesis; |
|
|
let voices = []; |
|
|
let selectedVoice = null; |
|
|
|
|
|
|
|
|
addBotMessage("Hello! I'm Nova, your AI companion. How can I assist you today?"); |
|
|
|
|
|
|
|
|
function loadVoices() { |
|
|
voices = synth.getVoices(); |
|
|
if (voices.length > 0) { |
|
|
|
|
|
selectedVoice = voices.find(voice => voice.name.includes('Female')) || |
|
|
voices.find(voice => voice.name.includes('female')) || |
|
|
voices[0]; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
if (synth) { |
|
|
synth.onvoiceschanged = loadVoices; |
|
|
loadVoices(); |
|
|
} |
|
|
|
|
|
|
|
|
async function sendMessage() { |
|
|
const message = messageInput.value.trim(); |
|
|
if (message) { |
|
|
addUserMessage(message); |
|
|
messageInput.value = ''; |
|
|
showTypingIndicator(); |
|
|
|
|
|
try { |
|
|
const response = await getAIResponse(message); |
|
|
removeTypingIndicator(); |
|
|
addBotMessage(response); |
|
|
|
|
|
|
|
|
if (isTTSEnabled && synth) { |
|
|
speak(response); |
|
|
} |
|
|
} catch (error) { |
|
|
removeTypingIndicator(); |
|
|
addBotMessage("Sorry, I'm having trouble connecting. Please try again later."); |
|
|
console.error("Error:", error); |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
async function getAIResponse(message) { |
|
|
|
|
|
if (apiKey) { |
|
|
return await getOpenAIResponse(message); |
|
|
} |
|
|
|
|
|
|
|
|
return generateResponse(message); |
|
|
} |
|
|
|
|
|
|
|
|
async function getOpenAIResponse(message) { |
|
|
try { |
|
|
const response = await fetch('https://api.openai.com/v1/chat/completions', { |
|
|
method: 'POST', |
|
|
headers: { |
|
|
'Content-Type': 'application/json', |
|
|
'Authorization': `Bearer ${apiKey}` |
|
|
}, |
|
|
body: JSON.stringify({ |
|
|
model: "gpt-3.5-turbo", |
|
|
messages: [ |
|
|
{ |
|
|
role: "system", |
|
|
content: `You are Nova, a friendly AI companion. Current mood: ${currentMood}. |
|
|
Respond in a way that matches this mood. Keep responses concise.` |
|
|
}, |
|
|
{ |
|
|
role: "user", |
|
|
content: message |
|
|
} |
|
|
], |
|
|
temperature: 0.7, |
|
|
max_tokens: 150 |
|
|
}) |
|
|
}); |
|
|
|
|
|
const data = await response.json(); |
|
|
return data.choices[0].message.content; |
|
|
} catch (error) { |
|
|
console.error("OpenAI API error:", error); |
|
|
return "I'm having trouble connecting to the AI service. Using local responses instead."; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function speak(text) { |
|
|
if (synth && selectedVoice) { |
|
|
const utterance = new SpeechSynthesisUtterance(text); |
|
|
utterance.voice = selectedVoice; |
|
|
utterance.rate = 0.9; |
|
|
utterance.pitch = 1.1; |
|
|
synth.speak(utterance); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function addUserMessage(message) { |
|
|
const messageDiv = document.createElement('div'); |
|
|
messageDiv.className = 'flex items-start space-x-3 justify-end'; |
|
|
messageDiv.innerHTML = ` |
|
|
<div class="chat-bubble bg-blue-500 px-4 py-3 max-w-xs user-bubble"> |
|
|
<p>${message}</p> |
|
|
</div> |
|
|
<div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center dark-button"> |
|
|
<i class="fas fa-user"></i> |
|
|
</div> |
|
|
`; |
|
|
chatContainer.appendChild(messageDiv); |
|
|
chatContainer.scrollTop = chatContainer.scrollHeight; |
|
|
} |
|
|
|
|
|
|
|
|
function addBotMessage(message) { |
|
|
const messageDiv = document.createElement('div'); |
|
|
messageDiv.className = 'flex items-start space-x-3'; |
|
|
messageDiv.innerHTML = ` |
|
|
<div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center dark-button"> |
|
|
<i class="fas fa-robot"></i> |
|
|
</div> |
|
|
<div class="chat-bubble bg-blue-600 px-4 py-3 max-w-xs dark-chat-bubble"> |
|
|
<p>${message}</p> |
|
|
</div> |
|
|
`; |
|
|
chatContainer.appendChild(messageDiv); |
|
|
chatContainer.scrollTop = chatContainer.scrollHeight; |
|
|
} |
|
|
|
|
|
|
|
|
function showTypingIndicator() { |
|
|
const typingDiv = document.createElement('div'); |
|
|
typingDiv.className = 'flex items-start space-x-3'; |
|
|
typingDiv.id = 'typing-indicator'; |
|
|
typingDiv.innerHTML = ` |
|
|
<div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center dark-button"> |
|
|
<i class="fas fa-robot"></i> |
|
|
</div> |
|
|
<div class="chat-bubble bg-blue-600 px-4 py-2 max-w-xs dark-chat-bubble"> |
|
|
<div class="typing-indicator"> |
|
|
<span></span> |
|
|
<span></span> |
|
|
<span></span> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
chatContainer.appendChild(typingDiv); |
|
|
chatContainer.scrollTop = chatContainer.scrollHeight; |
|
|
} |
|
|
|
|
|
|
|
|
function removeTypingIndicator() { |
|
|
const typingIndicator = document.getElementById('typing-indicator'); |
|
|
if (typingIndicator) { |
|
|
typingIndicator.remove(); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function generateResponse(message) { |
|
|
const lowerMessage = message.toLowerCase(); |
|
|
|
|
|
|
|
|
if (lowerMessage.includes('hi') || lowerMessage.includes('hello') || lowerMessage.includes('hey')) { |
|
|
return moodResponses[currentMood][0]; |
|
|
} |
|
|
|
|
|
|
|
|
if (lowerMessage.includes('how are you')) { |
|
|
return moodResponses[currentMood][1]; |
|
|
} |
|
|
|
|
|
|
|
|
const randomIndex = Math.floor(Math.random() * moodResponses[currentMood].length); |
|
|
return moodResponses[currentMood][randomIndex]; |
|
|
} |
|
|
|
|
|
|
|
|
function quickActionResponse(action) { |
|
|
const responses = actionResponses[action]; |
|
|
const randomIndex = Math.floor(Math.random() * responses.length); |
|
|
return responses[randomIndex]; |
|
|
} |
|
|
|
|
|
|
|
|
function toggleDarkMode() { |
|
|
isDarkMode = !isDarkMode; |
|
|
document.body.classList.toggle('dark-mode'); |
|
|
darkModeBtn.innerHTML = isDarkMode ? '<i class="fas fa-sun"></i>' : '<i class="fas fa-moon"></i>'; |
|
|
} |
|
|
|
|
|
|
|
|
function toggleTTS() { |
|
|
isTTSEnabled = !isTTSEnabled; |
|
|
ttsBtn.classList.toggle('bg-green-500', isTTSEnabled); |
|
|
ttsBtn.classList.toggle('bg-blue-600', !isTTSEnabled); |
|
|
|
|
|
if (isTTSEnabled && !synth) { |
|
|
addBotMessage("Text-to-speech is not supported in your browser."); |
|
|
isTTSEnabled = false; |
|
|
ttsBtn.classList.remove('bg-green-500'); |
|
|
ttsBtn.classList.add('bg-blue-600'); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function toggleVoiceRecognition() { |
|
|
if (!('webkitSpeechRecognition' in window)) { |
|
|
addBotMessage("Sorry, voice recognition is not supported in your browser."); |
|
|
return; |
|
|
} |
|
|
|
|
|
if (!isListening) { |
|
|
recognition = new webkitSpeechRecognition(); |
|
|
recognition.continuous = false; |
|
|
recognition.interimResults = false; |
|
|
|
|
|
recognition.onstart = function() { |
|
|
isListening = true; |
|
|
micBtn.classList.add('bg-red-500'); |
|
|
micBtn.innerHTML = '<i class="fas fa-microphone-slash"></i>'; |
|
|
addBotMessage("I'm listening..."); |
|
|
}; |
|
|
|
|
|
recognition.onresult = function(event) { |
|
|
const transcript = event.results[0][0].transcript; |
|
|
messageInput.value = transcript; |
|
|
sendMessage(); |
|
|
}; |
|
|
|
|
|
recognition.onerror = function(event) { |
|
|
addBotMessage("Sorry, I didn't catch that. Could you try again?"); |
|
|
}; |
|
|
|
|
|
recognition.onend = function() { |
|
|
isListening = false; |
|
|
micBtn.classList.remove('bg-red-500'); |
|
|
micBtn.innerHTML = '<i class="fas fa-microphone"></i>'; |
|
|
}; |
|
|
|
|
|
recognition.start(); |
|
|
} else { |
|
|
recognition.stop(); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
sendBtn.addEventListener('click', sendMessage); |
|
|
|
|
|
messageInput.addEventListener('keypress', (e) => { |
|
|
if (e.key === 'Enter') { |
|
|
sendMessage(); |
|
|
} |
|
|
}); |
|
|
|
|
|
micBtn.addEventListener('click', toggleVoiceRecognition); |
|
|
|
|
|
darkModeBtn.addEventListener('click', toggleDarkMode); |
|
|
|
|
|
ttsBtn.addEventListener('click', toggleTTS); |
|
|
|
|
|
settingsBtn.addEventListener('click', () => { |
|
|
settingsModal.classList.remove('hidden'); |
|
|
}); |
|
|
|
|
|
closeSettings.addEventListener('click', () => { |
|
|
settingsModal.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
saveSettingsBtn.addEventListener('click', () => { |
|
|
apiKey = apiKeyInput.value.trim(); |
|
|
settingsModal.classList.add('hidden'); |
|
|
addBotMessage("Settings saved! How can I help you?"); |
|
|
}); |
|
|
|
|
|
|
|
|
musicBtn.addEventListener('click', () => { |
|
|
showTypingIndicator(); |
|
|
setTimeout(() => { |
|
|
removeTypingIndicator(); |
|
|
const response = quickActionResponse('music'); |
|
|
addBotMessage(response); |
|
|
if (isTTSEnabled) speak(response); |
|
|
}, 1000); |
|
|
}); |
|
|
|
|
|
storiesBtn.addEventListener('click', () => { |
|
|
showTypingIndicator(); |
|
|
setTimeout(() => { |
|
|
removeTypingIndicator(); |
|
|
const response = quickActionResponse('stories'); |
|
|
addBotMessage(response); |
|
|
if (isTTSEnabled) speak(response); |
|
|
}, 1000); |
|
|
}); |
|
|
|
|
|
gamesBtn.addEventListener('click', () => { |
|
|
showTypingIndicator(); |
|
|
setTimeout(() => { |
|
|
removeTypingIndicator(); |
|
|
const response = quickActionResponse('games'); |
|
|
addBotMessage(response); |
|
|
if (isTTSEnabled) speak(response); |
|
|
}, 1000); |
|
|
}); |
|
|
|
|
|
ideasBtn.addEventListener('click', () => { |
|
|
showTypingIndicator(); |
|
|
setTimeout(() => { |
|
|
removeTypingIndicator(); |
|
|
const response = quickActionResponse('ideas'); |
|
|
addBotMessage(response); |
|
|
if (isTTSEnabled) speak(response); |
|
|
}, 1000); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.mood-selector input[type="radio"]').forEach(radio => { |
|
|
radio.addEventListener('change', function() { |
|
|
if (this.id === 'happy') { |
|
|
currentMood = 'happy'; |
|
|
avatar.style.background = 'linear-gradient(to bottom right, #60a5fa, #8b5cf6)'; |
|
|
} else if (this.id === 'neutral') { |
|
|
currentMood = 'neutral'; |
|
|
avatar.style.background = 'linear-gradient(to bottom right, #93c5fd, #7c3aed)'; |
|
|
} else if (this.id === 'serious') { |
|
|
currentMood = 'serious'; |
|
|
avatar.style.background = 'linear-gradient(to bottom right, #3b82f6, #6d28d9)'; |
|
|
} |
|
|
const response = moodResponses[currentMood][0]; |
|
|
addBotMessage(response); |
|
|
if (isTTSEnabled) speak(response); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
voiceSelect.addEventListener('change', () => { |
|
|
const response = `Voice changed to ${voiceSelect.value} mode. How can I help you?`; |
|
|
addBotMessage(response); |
|
|
if (isTTSEnabled) speak(response); |
|
|
}); |
|
|
|
|
|
|
|
|
setInterval(() => { |
|
|
const statuses = ["Stable", "Unstable", "Excellent", "Weak"]; |
|
|
const randomStatus = statuses[Math.floor(Math.random() * statuses.length)]; |
|
|
connectionStatus.textContent = `Connection: ${randomStatus}`; |
|
|
|
|
|
if (randomStatus === "Unstable" || randomStatus === "Weak") { |
|
|
connectionStatus.classList.add('text-yellow-300'); |
|
|
connectionStatus.classList.remove('text-green-300'); |
|
|
} else { |
|
|
connectionStatus.classList.add('text-green-300'); |
|
|
connectionStatus.classList.remove('text-yellow-300'); |
|
|
} |
|
|
}, 10000); |
|
|
|
|
|
|
|
|
document.querySelectorAll('[data-color]').forEach(btn => { |
|
|
btn.addEventListener('click', function() { |
|
|
const color = this.getAttribute('data-color'); |
|
|
document.body.className = `bg-gradient-to-br from-${color}-900 to-${color}-700 min-h-screen text-white`; |
|
|
|
|
|
|
|
|
avatar.style.background = `linear-gradient(to bottom right, var(--tw-${color}-400), var(--tw-${color}-500))`; |
|
|
|
|
|
|
|
|
document.querySelectorAll('.chat-bubble').forEach(bubble => { |
|
|
bubble.classList.remove('bg-blue-600', 'bg-purple-600', 'bg-pink-600', 'bg-teal-600'); |
|
|
bubble.classList.add(`bg-${color}-600`); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.user-bubble').forEach(bubble => { |
|
|
bubble.classList.remove('bg-blue-500', 'bg-purple-500', 'bg-pink-500', 'bg-teal-500'); |
|
|
bubble.classList.add(`bg-${color}-500`); |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
</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=gaowudao/test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
