|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Aron - Your AI Task 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"> |
|
|
<style> |
|
|
@keyframes pulse { |
|
|
0% { transform: scale(1); } |
|
|
50% { transform: scale(1.05); } |
|
|
100% { transform: scale(1); } |
|
|
} |
|
|
.pulse-animation { |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
.typing-indicator::after { |
|
|
content: '...'; |
|
|
display: inline-block; |
|
|
width: 0; |
|
|
overflow: hidden; |
|
|
vertical-align: bottom; |
|
|
animation: ellipsis steps(4,end) 1.5s infinite; |
|
|
} |
|
|
@keyframes ellipsis { |
|
|
to { width: 1.25em; } |
|
|
} |
|
|
.message-enter { |
|
|
animation: messageEnter 0.3s ease-out; |
|
|
} |
|
|
@keyframes messageEnter { |
|
|
from { transform: translateY(20px); opacity: 0; } |
|
|
to { transform: translateY(0); opacity: 1; } |
|
|
} |
|
|
.task-reminder { |
|
|
border-left: 4px solid #3b82f6; |
|
|
background-color: rgba(59, 130, 246, 0.1); |
|
|
} |
|
|
.wake-word-active { |
|
|
box-shadow: 0 0 20px rgba(59, 130, 246, 0.7); |
|
|
} |
|
|
.voice-wave { |
|
|
position: relative; |
|
|
} |
|
|
.voice-wave::before { |
|
|
content: ""; |
|
|
position: absolute; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
border-radius: 9999px; |
|
|
background: rgba(59, 130, 246, 0.3); |
|
|
animation: voiceWave 1.5s infinite; |
|
|
z-index: -1; |
|
|
} |
|
|
@keyframes voiceWave { |
|
|
0% { transform: scale(1); opacity: 1; } |
|
|
100% { transform: scale(1.5); opacity: 0; } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-100 min-h-screen"> |
|
|
<div class="container mx-auto px-4 py-8 max-w-4xl"> |
|
|
|
|
|
<header class="bg-gradient-to-r from-blue-600 to-indigo-700 text-white rounded-xl shadow-lg p-6 mb-8"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<h1 class="text-3xl font-bold">Aron</h1> |
|
|
<p class="text-blue-100 mt-1">Your intelligent voice assistant for task management</p> |
|
|
</div> |
|
|
<div id="wakeWordIndicator" class="w-16 h-16 bg-white rounded-full flex items-center justify-center shadow-md transition-all duration-300"> |
|
|
<i class="fas fa-robot text-3xl text-blue-600"></i> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> |
|
|
|
|
|
<div class="lg:col-span-1 space-y-6"> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md p-6"> |
|
|
<h2 class="text-xl font-semibold text-gray-800 mb-4">Your Profile</h2> |
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Your Name</label> |
|
|
<input type="text" id="userName" placeholder="Enter your name" |
|
|
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Aron's Voice</label> |
|
|
<select id="voiceSelect" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> |
|
|
<option value="default">Default</option> |
|
|
<option value="male">Male</option> |
|
|
<option value="female">Female</option> |
|
|
</select> |
|
|
</div> |
|
|
<button id="saveProfile" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg transition duration-200"> |
|
|
Save Profile |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md p-6"> |
|
|
<h2 class="text-xl font-semibold text-gray-800 mb-4">Add New Task</h2> |
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Task Name</label> |
|
|
<input type="text" id="taskName" placeholder="What needs to be done?" |
|
|
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Task Time</label> |
|
|
<input type="time" id="taskTime" |
|
|
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Task Date</label> |
|
|
<input type="date" id="taskDate" |
|
|
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Priority</label> |
|
|
<select id="taskPriority" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> |
|
|
<option value="low">Low</option> |
|
|
<option value="medium" selected>Medium</option> |
|
|
<option value="high">High</option> |
|
|
</select> |
|
|
</div> |
|
|
<button id="addTask" class="w-full bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-4 rounded-lg transition duration-200"> |
|
|
Add Task |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="lg:col-span-2 space-y-6"> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md p-6 h-96 flex flex-col"> |
|
|
<div class="flex items-center justify-between border-b pb-3 mb-4"> |
|
|
<h2 class="text-xl font-semibold text-gray-800">Aron Assistant</h2> |
|
|
<div class="flex space-x-2"> |
|
|
<button id="voiceToggle" class="bg-blue-100 hover:bg-blue-200 text-blue-800 p-2 rounded-full transition duration-200"> |
|
|
<i class="fas fa-microphone"></i> |
|
|
</button> |
|
|
<button id="clearChat" class="bg-gray-100 hover:bg-gray-200 text-gray-800 p-2 rounded-full transition duration-200"> |
|
|
<i class="fas fa-trash-alt"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="chatMessages" class="flex-1 overflow-y-auto space-y-3 pr-2"> |
|
|
<div class="message-enter bg-blue-50 rounded-lg p-4 max-w-xs"> |
|
|
<p class="text-gray-800">Hello! I'm Aron, your AI task assistant. You can say "Hey Aron" to wake me up or ask about your tasks.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-4 flex"> |
|
|
<input type="text" id="chatInput" placeholder="Type your message here..." |
|
|
class="flex-1 px-4 py-2 border border-gray-300 rounded-l-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> |
|
|
<button id="sendMessage" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-r-lg transition duration-200"> |
|
|
<i class="fas fa-paper-plane"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md p-6"> |
|
|
<div class="flex items-center justify-between border-b pb-3 mb-4"> |
|
|
<h2 class="text-xl font-semibold text-gray-800">Your Scheduled Tasks</h2> |
|
|
<div class="text-sm text-gray-500" id="currentDateTime"></div> |
|
|
</div> |
|
|
|
|
|
<div id="taskList" class="space-y-3"> |
|
|
<div class="text-center py-8 text-gray-500"> |
|
|
<i class="fas fa-tasks text-4xl mb-2"></i> |
|
|
<p>No tasks scheduled yet. Add your first task!</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="voiceStatus" class="fixed bottom-6 right-6 bg-blue-600 text-white rounded-full p-4 shadow-xl hidden"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<i class="fas fa-microphone"></i> |
|
|
<span>Listening...</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<button id="voiceInteractionBtn" class="fixed bottom-6 left-6 w-16 h-16 bg-blue-600 text-white rounded-full flex items-center justify-center shadow-xl hover:bg-blue-700 transition duration-200 voice-wave"> |
|
|
<i class="fas fa-microphone text-2xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
|
|
const userNameInput = document.getElementById('userName'); |
|
|
const voiceSelect = document.getElementById('voiceSelect'); |
|
|
const saveProfileBtn = document.getElementById('saveProfile'); |
|
|
const taskNameInput = document.getElementById('taskName'); |
|
|
const taskTimeInput = document.getElementById('taskTime'); |
|
|
const taskDateInput = document.getElementById('taskDate'); |
|
|
const taskPrioritySelect = document.getElementById('taskPriority'); |
|
|
const addTaskBtn = document.getElementById('addTask'); |
|
|
const chatMessages = document.getElementById('chatMessages'); |
|
|
const chatInput = document.getElementById('chatInput'); |
|
|
const sendMessageBtn = document.getElementById('sendMessage'); |
|
|
const voiceToggleBtn = document.getElementById('voiceToggle'); |
|
|
const clearChatBtn = document.getElementById('clearChat'); |
|
|
const taskList = document.getElementById('taskList'); |
|
|
const currentDateTime = document.getElementById('currentDateTime'); |
|
|
const voiceStatus = document.getElementById('voiceStatus'); |
|
|
const wakeWordIndicator = document.getElementById('wakeWordIndicator'); |
|
|
const voiceInteractionBtn = document.getElementById('voiceInteractionBtn'); |
|
|
|
|
|
|
|
|
const synth = window.speechSynthesis; |
|
|
let voices = []; |
|
|
let selectedVoice = null; |
|
|
let isListening = false; |
|
|
let isWakeWordDetectionActive = false; |
|
|
let recognition; |
|
|
let continuousRecognition; |
|
|
let userName = ''; |
|
|
let tasks = []; |
|
|
let scheduledReminders = {}; |
|
|
|
|
|
|
|
|
initApp(); |
|
|
|
|
|
function initApp() { |
|
|
|
|
|
loadUserData(); |
|
|
|
|
|
|
|
|
updateDateTime(); |
|
|
setInterval(updateDateTime, 1000); |
|
|
|
|
|
|
|
|
setInterval(checkTaskReminders, 60000); |
|
|
|
|
|
|
|
|
initVoices(); |
|
|
|
|
|
|
|
|
initVoiceRecognition(); |
|
|
initWakeWordDetection(); |
|
|
|
|
|
|
|
|
saveProfileBtn.addEventListener('click', saveUserProfile); |
|
|
addTaskBtn.addEventListener('click', addNewTask); |
|
|
sendMessageBtn.addEventListener('click', sendChatMessage); |
|
|
chatInput.addEventListener('keypress', function(e) { |
|
|
if (e.key === 'Enter') sendChatMessage(); |
|
|
}); |
|
|
voiceToggleBtn.addEventListener('click', toggleVoiceRecognition); |
|
|
clearChatBtn.addEventListener('click', clearChat); |
|
|
voiceInteractionBtn.addEventListener('click', toggleWakeWordDetection); |
|
|
|
|
|
|
|
|
checkTaskReminders(); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
const greeting = userName |
|
|
? `Hello ${userName}, I'm Aron. You can say "Hey Aron" to wake me up or ask about your tasks.` |
|
|
: "Hello, I'm Aron, your AI task assistant. Please set your name in the profile section. You can say 'Hey Aron' to wake me up."; |
|
|
addChatMessage('assistant', greeting); |
|
|
speak(greeting); |
|
|
}, 1000); |
|
|
} |
|
|
|
|
|
function loadUserData() { |
|
|
const savedUser = localStorage.getItem('taskMasterUser'); |
|
|
if (savedUser) { |
|
|
const userData = JSON.parse(savedUser); |
|
|
userNameInput.value = userData.name || ''; |
|
|
voiceSelect.value = userData.voice || 'default'; |
|
|
userName = userData.name || ''; |
|
|
|
|
|
|
|
|
const savedTasks = localStorage.getItem('taskMasterTasks'); |
|
|
if (savedTasks) { |
|
|
tasks = JSON.parse(savedTasks); |
|
|
renderTaskList(); |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
function saveUserProfile() { |
|
|
const name = userNameInput.value.trim(); |
|
|
const voicePref = voiceSelect.value; |
|
|
|
|
|
if (name) { |
|
|
userName = name; |
|
|
localStorage.setItem('taskMasterUser', JSON.stringify({ |
|
|
name: name, |
|
|
voice: voicePref |
|
|
})); |
|
|
|
|
|
addChatMessage('assistant', `Profile saved successfully, ${name}. How can I assist you today?`); |
|
|
speak(`Profile saved successfully, ${name}. How can I assist you today?`); |
|
|
updateSelectedVoice(); |
|
|
} else { |
|
|
addChatMessage('assistant', 'Please enter your name to save your profile.'); |
|
|
speak('Please enter your name to save your profile.'); |
|
|
} |
|
|
} |
|
|
|
|
|
function addNewTask() { |
|
|
const name = taskNameInput.value.trim(); |
|
|
const time = taskTimeInput.value; |
|
|
const date = taskDateInput.value; |
|
|
const priority = taskPrioritySelect.value; |
|
|
|
|
|
if (!name) { |
|
|
addChatMessage('assistant', 'Please enter a task name.'); |
|
|
speak('Please enter a task name.'); |
|
|
return; |
|
|
} |
|
|
|
|
|
if (!time) { |
|
|
addChatMessage('assistant', 'Please select a time for your task.'); |
|
|
speak('Please select a time for your task.'); |
|
|
return; |
|
|
} |
|
|
|
|
|
if (!date) { |
|
|
addChatMessage('assistant', 'Please select a date for your task.'); |
|
|
speak('Please select a date for your task.'); |
|
|
return; |
|
|
} |
|
|
|
|
|
const taskDate = new Date(`${date}T${time}`); |
|
|
const now = new Date(); |
|
|
|
|
|
if (taskDate <= now) { |
|
|
addChatMessage('assistant', 'Please select a future time for your task.'); |
|
|
speak('Please select a future time for your task.'); |
|
|
return; |
|
|
} |
|
|
|
|
|
const task = { |
|
|
id: Date.now(), |
|
|
name: name, |
|
|
date: date, |
|
|
time: time, |
|
|
priority: priority, |
|
|
completed: false, |
|
|
createdAt: new Date().toISOString() |
|
|
}; |
|
|
|
|
|
tasks.push(task); |
|
|
saveTasks(); |
|
|
renderTaskList(); |
|
|
|
|
|
|
|
|
taskNameInput.value = ''; |
|
|
taskTimeInput.value = ''; |
|
|
taskDateInput.value = ''; |
|
|
taskPrioritySelect.value = 'medium'; |
|
|
|
|
|
|
|
|
scheduleTaskReminder(task); |
|
|
|
|
|
addChatMessage('assistant', `Task "${name}" has been added for ${formatDateTime(taskDate)}. I'll remind you when it's time.`); |
|
|
speak(`Task "${name}" has been added for ${formatDateTime(taskDate)}. I'll remind you when it's time.`); |
|
|
} |
|
|
|
|
|
function scheduleTaskReminder(task) { |
|
|
const taskDate = new Date(`${task.date}T${task.time}`); |
|
|
const now = new Date(); |
|
|
const timeUntilTask = taskDate - now; |
|
|
|
|
|
|
|
|
if (scheduledReminders[task.id]) { |
|
|
clearTimeout(scheduledReminders[task.id]); |
|
|
} |
|
|
|
|
|
if (timeUntilTask > 0) { |
|
|
scheduledReminders[task.id] = setTimeout(() => { |
|
|
remindUserAboutTask(task); |
|
|
}, timeUntilTask); |
|
|
} |
|
|
} |
|
|
|
|
|
function remindUserAboutTask(task) { |
|
|
if (userName) { |
|
|
const message = `${userName}, it's time for your scheduled task: "${task.name}". This is a ${task.priority} priority task. Would you like me to help you with anything related to this?`; |
|
|
addChatMessage('assistant', message, true); |
|
|
speak(message); |
|
|
} else { |
|
|
const message = `Reminder: It's time for your task "${task.name}". This is a ${task.priority} priority task. Would you like me to help you with anything related to this?`; |
|
|
addChatMessage('assistant', message, true); |
|
|
speak(message); |
|
|
} |
|
|
|
|
|
|
|
|
task.completed = true; |
|
|
saveTasks(); |
|
|
renderTaskList(); |
|
|
} |
|
|
|
|
|
function checkTaskReminders() { |
|
|
const now = new Date(); |
|
|
tasks.forEach(task => { |
|
|
if (!task.completed) { |
|
|
const taskDate = new Date(`${task.date}T${task.time}`); |
|
|
const timeDiff = taskDate - now; |
|
|
|
|
|
|
|
|
if (timeDiff > 0 && timeDiff <= 300000) { |
|
|
const minutesLeft = Math.floor(timeDiff / 60000); |
|
|
const message = `Just a heads up ${userName ? userName + ',' : ''} your task "${task.name}" is coming up in ${minutesLeft} minute${minutesLeft !== 1 ? 's' : ''}. Would you like to prepare anything in advance?`; |
|
|
addChatMessage('assistant', message, true); |
|
|
speak(message); |
|
|
} |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
function renderTaskList() { |
|
|
if (tasks.length === 0) { |
|
|
taskList.innerHTML = ` |
|
|
<div class="text-center py-8 text-gray-500"> |
|
|
<i class="fas fa-tasks text-4xl mb-2"></i> |
|
|
<p>No tasks scheduled yet. Add your first task!</p> |
|
|
</div> |
|
|
`; |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
const sortedTasks = [...tasks].sort((a, b) => { |
|
|
return new Date(`${a.date}T${a.time}`) - new Date(`${b.date}T${b.time}`); |
|
|
}); |
|
|
|
|
|
let html = ''; |
|
|
sortedTasks.forEach(task => { |
|
|
const taskDate = new Date(`${task.date}T${task.time}`); |
|
|
const now = new Date(); |
|
|
const isPastDue = taskDate < now && !task.completed; |
|
|
|
|
|
html += ` |
|
|
<div class="border rounded-lg p-4 ${isPastDue ? 'border-red-300 bg-red-50' : 'border-gray-200'} ${task.completed ? 'opacity-70' : ''}"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<h3 class="font-medium ${task.completed ? 'line-through text-gray-500' : 'text-gray-800'}">${task.name}</h3> |
|
|
<p class="text-sm ${task.completed ? 'text-gray-400' : 'text-gray-600'}">${formatDateTime(taskDate)}</p> |
|
|
</div> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<span class="px-2 py-1 text-xs rounded-full ${ |
|
|
task.priority === 'high' ? 'bg-red-100 text-red-800' : |
|
|
task.priority === 'medium' ? 'bg-yellow-100 text-yellow-800' : |
|
|
'bg-green-100 text-green-800' |
|
|
}"> |
|
|
${task.priority} |
|
|
</span> |
|
|
<button onclick="completeTask(${task.id})" class="text-green-600 hover:text-green-800"> |
|
|
<i class="fas fa-check"></i> |
|
|
</button> |
|
|
<button onclick="deleteTask(${task.id})" class="text-red-600 hover:text-red-800"> |
|
|
<i class="fas fa-trash-alt"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
${isPastDue && !task.completed ? '<p class="text-xs text-red-600 mt-2">Past due</p>' : ''} |
|
|
</div> |
|
|
`; |
|
|
}); |
|
|
|
|
|
taskList.innerHTML = html; |
|
|
} |
|
|
|
|
|
function completeTask(taskId) { |
|
|
const taskIndex = tasks.findIndex(t => t.id === taskId); |
|
|
if (taskIndex !== -1) { |
|
|
tasks[taskIndex].completed = true; |
|
|
saveTasks(); |
|
|
renderTaskList(); |
|
|
|
|
|
const task = tasks[taskIndex]; |
|
|
const message = `Great job completing your task "${task.name}"! ${userName ? userName + ',' : ''} would you like to add any notes about how it went?`; |
|
|
addChatMessage('assistant', message); |
|
|
speak(message); |
|
|
} |
|
|
} |
|
|
|
|
|
function deleteTask(taskId) { |
|
|
tasks = tasks.filter(t => t.id !== taskId); |
|
|
saveTasks(); |
|
|
renderTaskList(); |
|
|
|
|
|
|
|
|
if (scheduledReminders[taskId]) { |
|
|
clearTimeout(scheduledReminders[taskId]); |
|
|
delete scheduledReminders[taskId]; |
|
|
} |
|
|
|
|
|
addChatMessage('assistant', 'Task has been deleted. Is there anything else you\'d like me to help with?'); |
|
|
speak('Task has been deleted. Is there anything else you\'d like me to help with?'); |
|
|
} |
|
|
|
|
|
function saveTasks() { |
|
|
localStorage.setItem('taskMasterTasks', JSON.stringify(tasks)); |
|
|
} |
|
|
|
|
|
function updateDateTime() { |
|
|
const now = new Date(); |
|
|
currentDateTime.textContent = now.toLocaleString('en-US', { |
|
|
weekday: 'long', |
|
|
month: 'short', |
|
|
day: 'numeric', |
|
|
hour: '2-digit', |
|
|
minute: '2-digit' |
|
|
}); |
|
|
} |
|
|
|
|
|
function formatDateTime(date) { |
|
|
return date.toLocaleString('en-US', { |
|
|
weekday: 'short', |
|
|
month: 'short', |
|
|
day: 'numeric', |
|
|
hour: '2-digit', |
|
|
minute: '2-digit' |
|
|
}); |
|
|
} |
|
|
|
|
|
function initVoices() { |
|
|
|
|
|
synth.onvoiceschanged = function() { |
|
|
voices = synth.getVoices(); |
|
|
|
|
|
updateSelectedVoice(); |
|
|
}; |
|
|
|
|
|
|
|
|
voices = synth.getVoices(); |
|
|
if (voices.length > 0) { |
|
|
updateSelectedVoice(); |
|
|
} |
|
|
} |
|
|
|
|
|
function updateSelectedVoice() { |
|
|
const voicePref = voiceSelect.value; |
|
|
|
|
|
if (voicePref === 'male') { |
|
|
|
|
|
selectedVoice = voices.find(v => v.name.includes('Male')) || |
|
|
voices.find(v => v.lang.includes('en')) || |
|
|
voices[0]; |
|
|
} else if (voicePref === 'female') { |
|
|
|
|
|
selectedVoice = voices.find(v => v.name.includes('Female')) || |
|
|
voices.find(v => v.lang.includes('en')) || |
|
|
voices[0]; |
|
|
} else { |
|
|
|
|
|
selectedVoice = voices.find(v => v.lang.includes('en')) || voices[0]; |
|
|
} |
|
|
} |
|
|
|
|
|
function speak(text) { |
|
|
if (!synth || !selectedVoice) return; |
|
|
|
|
|
const utterance = new SpeechSynthesisUtterance(text); |
|
|
utterance.voice = selectedVoice; |
|
|
utterance.rate = 0.9; |
|
|
utterance.pitch = 1; |
|
|
|
|
|
synth.speak(utterance); |
|
|
} |
|
|
|
|
|
function initVoiceRecognition() { |
|
|
try { |
|
|
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition; |
|
|
if (SpeechRecognition) { |
|
|
recognition = new SpeechRecognition(); |
|
|
recognition.continuous = false; |
|
|
recognition.interimResults = false; |
|
|
recognition.lang = 'en-US'; |
|
|
|
|
|
recognition.onstart = function() { |
|
|
isListening = true; |
|
|
voiceStatus.classList.remove('hidden'); |
|
|
voiceToggleBtn.innerHTML = '<i class="fas fa-microphone-slash"></i>'; |
|
|
voiceToggleBtn.classList.remove('bg-blue-100', 'text-blue-800'); |
|
|
voiceToggleBtn.classList.add('bg-red-100', 'text-red-800'); |
|
|
}; |
|
|
|
|
|
recognition.onend = function() { |
|
|
isListening = false; |
|
|
voiceStatus.classList.add('hidden'); |
|
|
voiceToggleBtn.innerHTML = '<i class="fas fa-microphone"></i>'; |
|
|
voiceToggleBtn.classList.remove('bg-red-100', 'text-red-800'); |
|
|
voiceToggleBtn.classList.add('bg-blue-100', 'text-blue-800'); |
|
|
}; |
|
|
|
|
|
recognition.onresult = function(event) { |
|
|
const transcript = event.results[0][0].transcript; |
|
|
chatInput.value = transcript; |
|
|
sendChatMessage(); |
|
|
}; |
|
|
|
|
|
recognition.onerror = function(event) { |
|
|
console.error('Speech recognition error', event.error); |
|
|
addChatMessage('assistant', 'Sorry, I didn\'t catch that. Could you try again?'); |
|
|
speak('Sorry, I didn\'t catch that. Could you try again?'); |
|
|
}; |
|
|
} else { |
|
|
voiceToggleBtn.disabled = true; |
|
|
voiceToggleBtn.title = 'Voice recognition not supported in your browser'; |
|
|
} |
|
|
} catch (e) { |
|
|
console.error('Error initializing voice recognition:', e); |
|
|
voiceToggleBtn.disabled = true; |
|
|
voiceToggleBtn.title = 'Voice recognition not available'; |
|
|
} |
|
|
} |
|
|
|
|
|
function initWakeWordDetection() { |
|
|
try { |
|
|
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition; |
|
|
if (SpeechRecognition) { |
|
|
continuousRecognition = new SpeechRecognition(); |
|
|
continuousRecognition.continuous = true; |
|
|
continuousRecognition.interimResults = true; |
|
|
continuousRecognition.lang = 'en-US'; |
|
|
|
|
|
continuousRecognition.onresult = function(event) { |
|
|
if (!isWakeWordDetectionActive) return; |
|
|
|
|
|
let interimTranscript = ''; |
|
|
let finalTranscript = ''; |
|
|
|
|
|
for (let i = event.resultIndex; i < event.results.length; i++) { |
|
|
const transcript = event.results[i][0].transcript; |
|
|
if (event.results[i].isFinal) { |
|
|
finalTranscript += transcript; |
|
|
} else { |
|
|
interimTranscript += transcript; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
const combinedTranscript = (interimTranscript + ' ' + finalTranscript).toLowerCase(); |
|
|
if (combinedTranscript.includes('hey aron') || |
|
|
combinedTranscript.includes('hello aron') || |
|
|
combinedTranscript.includes('hi aron')) { |
|
|
|
|
|
|
|
|
wakeWordIndicator.classList.add('wake-word-active'); |
|
|
setTimeout(() => { |
|
|
wakeWordIndicator.classList.remove('wake-word-active'); |
|
|
}, 1000); |
|
|
|
|
|
|
|
|
if (!isListening) { |
|
|
const wakeResponse = userName |
|
|
? `Yes ${userName}? How can I help you?` |
|
|
: "Yes? How can I help you?"; |
|
|
addChatMessage('assistant', wakeResponse); |
|
|
speak(wakeResponse); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
if (recognition) { |
|
|
try { |
|
|
recognition.start(); |
|
|
} catch (e) { |
|
|
console.error('Error starting recognition:', e); |
|
|
} |
|
|
} |
|
|
}, 500); |
|
|
} |
|
|
} |
|
|
}; |
|
|
|
|
|
continuousRecognition.onerror = function(event) { |
|
|
console.error('Wake word detection error:', event.error); |
|
|
}; |
|
|
} |
|
|
} catch (e) { |
|
|
console.error('Error initializing wake word detection:', e); |
|
|
} |
|
|
} |
|
|
|
|
|
function toggleWakeWordDetection() { |
|
|
if (!continuousRecognition) { |
|
|
addChatMessage('assistant', 'Wake word detection is not supported in your browser.'); |
|
|
speak('Wake word detection is not supported in your browser.'); |
|
|
return; |
|
|
} |
|
|
|
|
|
isWakeWordDetectionActive = !isWakeWordDetectionActive; |
|
|
|
|
|
if (isWakeWordDetectionActive) { |
|
|
try { |
|
|
continuousRecognition.start(); |
|
|
voiceInteractionBtn.classList.add('bg-blue-700'); |
|
|
voiceInteractionBtn.innerHTML = '<i class="fas fa-microphone-slash text-2xl"></i>'; |
|
|
addChatMessage('assistant', 'I\'m now listening for "Hey Aron". Try saying it!'); |
|
|
speak('I\'m now listening for "Hey Aron". Try saying it!'); |
|
|
} catch (e) { |
|
|
console.error('Error starting continuous recognition:', e); |
|
|
isWakeWordDetectionActive = false; |
|
|
} |
|
|
} else { |
|
|
continuousRecognition.stop(); |
|
|
voiceInteractionBtn.classList.remove('bg-blue-700'); |
|
|
voiceInteractionBtn.innerHTML = '<i class="fas fa-microphone text-2xl"></i>'; |
|
|
addChatMessage('assistant', 'Wake word detection turned off.'); |
|
|
speak('Wake word detection turned off.'); |
|
|
} |
|
|
} |
|
|
|
|
|
function toggleVoiceRecognition() { |
|
|
if (!recognition) return; |
|
|
|
|
|
if (isListening) { |
|
|
recognition.stop(); |
|
|
} else { |
|
|
try { |
|
|
recognition.start(); |
|
|
addChatMessage('assistant', 'I\'m listening...'); |
|
|
} catch (e) { |
|
|
console.error('Error starting recognition:', e); |
|
|
addChatMessage('assistant', 'Sorry, I couldn\'t start listening. Please try again.'); |
|
|
speak('Sorry, I couldn\'t start listening. Please try again.'); |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
function sendChatMessage() { |
|
|
const message = chatInput.value.trim(); |
|
|
if (!message) return; |
|
|
|
|
|
addChatMessage('user', message); |
|
|
chatInput.value = ''; |
|
|
|
|
|
|
|
|
const typingIndicator = document.createElement('div'); |
|
|
typingIndicator.className = 'bg-blue-50 rounded-lg p-4 max-w-xs'; |
|
|
typingIndicator.innerHTML = '<p class="text-gray-800 typing-indicator">Aron is thinking</p>'; |
|
|
chatMessages.appendChild(typingIndicator); |
|
|
chatMessages.scrollTop = chatMessages.scrollHeight; |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
chatMessages.removeChild(typingIndicator); |
|
|
processUserMessage(message); |
|
|
}, 1500); |
|
|
} |
|
|
|
|
|
function processUserMessage(message) { |
|
|
const lowerMessage = message.toLowerCase(); |
|
|
let response = ''; |
|
|
|
|
|
if (lowerMessage.includes('hello') || lowerMessage.includes('hi')) { |
|
|
response = userName ? `Hello ${userName}! How can I assist you today?` : 'Hello there! How can I assist you today?'; |
|
|
} else if (lowerMessage.includes('your name') || lowerMessage.includes('who are you')) { |
|
|
response = 'I am Aron, your personal voice assistant for task management and reminders.'; |
|
|
} else if (lowerMessage.includes('task') && (lowerMessage.includes('add') || lowerMessage.includes('create'))) { |
|
|
response = 'To add a new task, please fill out the task form on the left. You can specify the task name, time, date, and priority. Or you can tell me now and I\'ll add it for you.'; |
|
|
} else if (lowerMessage.includes('task') && lowerMessage.includes('list')) { |
|
|
if (tasks.length === 0) { |
|
|
response = 'You currently have no scheduled tasks. Would you like to add one?'; |
|
|
} else { |
|
|
const taskCount = tasks.length; |
|
|
const upcomingTasks = tasks.filter(t => !t.completed && new Date(`${t.date}T${t.time}`) > new Date()).length; |
|
|
response = `You have ${taskCount} task${taskCount !== 1 ? 's' : ''} in total, with ${upcomingTasks} upcoming. Check the task list below for details. Would you like me to go through them with you?`; |
|
|
} |
|
|
} else if (lowerMessage.includes('time') || lowerMessage.includes('date')) { |
|
|
const now = new Date(); |
|
|
response = `The current date and time is ${now.toLocaleString('en-US', { |
|
|
weekday: 'long', |
|
|
month: 'long', |
|
|
day: 'numeric', |
|
|
hour: '2-digit', |
|
|
minute: '2-digit' |
|
|
})}. Is there anything time-sensitive you\'d like me to help with?`; |
|
|
} else if (lowerMessage.includes('thank')) { |
|
|
const thanksResponses = [ |
|
|
"You're welcome! Is there anything else I can help you with?", |
|
|
"My pleasure! Let me know if you need anything else.", |
|
|
"Happy to help! What else can I do for you today?" |
|
|
]; |
|
|
response = thanksResponses[Math.floor(Math.random() * thanksResponses.length)]; |
|
|
} else if (lowerMessage.includes('help')) { |
|
|
response = "I can help you with: \n- Adding and managing tasks \n- Setting reminders \n- Answering general questions \n- Providing the current time and date \nJust ask! What would you like help with today?"; |
|
|
} else if (lowerMessage.includes('how are you') || lowerMessage.includes('how\'s it going')) { |
|
|
const moodResponses = [ |
|
|
"I'm just a program, but I'm functioning perfectly well! How about you?", |
|
|
"I don't have feelings, but I'm ready to assist you! How can I help?", |
|
|
"I'm always at your service! What can I do for you today?" |
|
|
]; |
|
|
response = moodResponses[Math.floor(Math.random() * moodResponses.length)]; |
|
|
} else { |
|
|
const fallbackResponses = [ |
|
|
"I'm your task management assistant. I can help you add tasks, set reminders, and answer general questions. What would you like me to do?", |
|
|
"I'm not sure I understand. Could you rephrase that? I can help with tasks, reminders, and general questions.", |
|
|
"Let me think... I believe I can help you better if you ask about tasks, reminders, or general assistance. What would you like to know?" |
|
|
]; |
|
|
response = fallbackResponses[Math.floor(Math.random() * fallbackResponses.length)]; |
|
|
} |
|
|
|
|
|
addChatMessage('assistant', response); |
|
|
speak(response); |
|
|
} |
|
|
|
|
|
function addChatMessage(sender, message, isReminder = false) { |
|
|
const messageDiv = document.createElement('div'); |
|
|
messageDiv.className = `message-enter ${sender === 'user' ? 'ml-auto bg-blue-600 text-white rounded-lg p-4 max-w-xs' : |
|
|
isReminder ? 'task-reminder rounded-lg p-4 max-w-xs' : 'bg-blue-50 rounded-lg p-4 max-w-xs'}`; |
|
|
messageDiv.innerHTML = `<p>${message}</p>`; |
|
|
chatMessages.appendChild(messageDiv); |
|
|
chatMessages.scrollTop = chatMessages.scrollHeight; |
|
|
} |
|
|
|
|
|
function clearChat() { |
|
|
chatMessages.innerHTML = ` |
|
|
<div class="message-enter bg-blue-50 rounded-lg p-4 max-w-xs"> |
|
|
<p class="text-gray-800">Hello! I'm Aron, your AI task assistant. You can say "Hey Aron" to wake me up or ask about your tasks.</p> |
|
|
</div> |
|
|
`; |
|
|
} |
|
|
|
|
|
|
|
|
window.completeTask = completeTask; |
|
|
window.deleteTask = deleteTask; |
|
|
}); |
|
|
</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=meer012/aron" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
