|
|
|
|
|
// Export all configuration and learning data |
|
|
function exportConfiguration() { |
|
|
const data = { |
|
|
trainingData: trainingData, |
|
|
timestamp: new Date().toISOString(), |
|
|
version: "1.0", |
|
|
aiProfile: "Grok-Style Learning Assistant" |
|
|
}; |
|
|
|
|
|
const blob = new Blob([JSON.stringify(data, null, 2)], {type: 'application/json'}); |
|
|
const url = URL.createObjectURL(blob); |
|
|
|
|
|
const a = document.createElement('a'); |
|
|
a.href = url; |
|
|
a.download = `AI-Call-Assistant-${new Date().toISOString().split('T')[0]}.json`; |
|
|
document.body.appendChild(a); |
|
|
a.click(); |
|
|
document.body.removeChild(a); |
|
|
URL.revokeObjectURL(url); |
|
|
|
|
|
alert("Configuration exported successfully!"); |
|
|
} |
|
|
|
|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>AI Phone 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> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
iosbg: '#f2f2f7', |
|
|
iosdark: '#1c1c1e', |
|
|
accent: '#0a84ff', |
|
|
accent2: '#5e5ce6', |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<style> |
|
|
body { |
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; |
|
|
} |
|
|
|
|
|
.screen { |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.screen.active { |
|
|
display: block; |
|
|
} |
|
|
|
|
|
|
|
|
.toggle-switch { |
|
|
position: relative; |
|
|
display: inline-block; |
|
|
width: 60px; |
|
|
height: 34px; |
|
|
} |
|
|
|
|
|
.toggle-switch input { |
|
|
opacity: 0; |
|
|
width: 0; |
|
|
height: 0; |
|
|
} |
|
|
|
|
|
.slider { |
|
|
position: absolute; |
|
|
cursor: pointer; |
|
|
top: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
bottom: 0; |
|
|
background-color: #ccc; |
|
|
transition: .4s; |
|
|
border-radius: 34px; |
|
|
} |
|
|
|
|
|
.slider:before { |
|
|
position: absolute; |
|
|
content: ""; |
|
|
height: 26px; |
|
|
width: 26px; |
|
|
left: 4px; |
|
|
bottom: 4px; |
|
|
background-color: white; |
|
|
transition: .4s; |
|
|
border-radius: 50%; |
|
|
} |
|
|
|
|
|
input:checked + .slider { |
|
|
background-color: #2196F3; |
|
|
} |
|
|
|
|
|
input:checked + .slider:before { |
|
|
transform: translateX(26px); |
|
|
} |
|
|
|
|
|
|
|
|
.ai-bubble { |
|
|
background: #f1f1f1; |
|
|
border-radius: 5px 15px 15px 5px; |
|
|
padding: 10px 15px; |
|
|
max-width: 85%; |
|
|
margin: 5px 0; |
|
|
} |
|
|
|
|
|
.user-bubble { |
|
|
background: #2196F3; |
|
|
color: white; |
|
|
border-radius: 15px 5px 5px 15px; |
|
|
padding: 10px 15px; |
|
|
max-width: 85%; |
|
|
margin: 5px 0 5px auto; |
|
|
} |
|
|
|
|
|
|
|
|
.simple-btn { |
|
|
background: #2196F3; |
|
|
color: white; |
|
|
border: none; |
|
|
padding: 10px 15px; |
|
|
border-radius: 5px; |
|
|
cursor: pointer; |
|
|
margin: 5px; |
|
|
} |
|
|
|
|
|
|
|
|
.action-btn { |
|
|
background: #4CAF50; |
|
|
color: white; |
|
|
border: none; |
|
|
padding: 10px 15px; |
|
|
border-radius: 5px; |
|
|
cursor: pointer; |
|
|
margin: 5px; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-iosbg dark:bg-iosdark text-gray-900 dark:text-gray-200 min-h-screen"> |
|
|
|
|
|
<div class="fixed top-0 left-0 right-0 h-12 flex items-center px-4 z-50 bg-iosbg dark:bg-iosdark"> |
|
|
<div class="text-left text-sm w-20">9:41</div> |
|
|
<div class="flex-1 flex justify-center"> |
|
|
<i class="fas fa-signal mr-2"></i> |
|
|
<i class="fas fa-wifi mr-2"></i> |
|
|
<i class="fas fa-battery-three-quarters"></i> |
|
|
</div> |
|
|
<div class="w-20 text-right text-xs">100%</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="relative pt-12 max-w-md mx-auto h-screen overflow-hidden"> |
|
|
|
|
|
<div id="homeScreen" class="screen active px-4 pt-4 h-full flex flex-col"> |
|
|
<div class="mt-2"> |
|
|
<h1 class="text-3xl font-bold">Call Assistant</h1> |
|
|
<p class="text-gray-500 dark:text-gray-400 mt-1">AI that answers your calls and learns over time</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-6 bg-white dark:bg-gray-800 rounded-2xl p-5 shadow-sm"> |
|
|
<div class="flex items-center justify-between mb-4"> |
|
|
<div> |
|
|
<h2 class="font-medium">Current Status</h2> |
|
|
<p class="text-gray-500 dark:text-gray-400 text-sm mt-1">Assistant is active</p> |
|
|
</div> |
|
|
<label class="ios-switch"> |
|
|
<input type="checkbox" checked> |
|
|
<span class="ios-slider"></span> |
|
|
</label> |
|
|
</div> |
|
|
|
|
|
<div class="border-t border-gray-200 dark:border-gray-700 pt-4"> |
|
|
<h3 class="font-medium flex items-center"> |
|
|
<i class="fas fa-phone mr-2"></i> Connected Number |
|
|
</h3> |
|
|
<div class="mt-2 flex items-center justify-between"> |
|
|
<span class="text-gray-500 dark:text-gray-400 text-sm font-medium">(562) 228-9429</span> |
|
|
<button class="text-accent text-sm">Change</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-4 flex items-center"> |
|
|
<div class="w-10 h-10 rounded-full bg-accent flex items-center justify-center"> |
|
|
<i class="fas fa-robot text-white"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<h3 class="font-medium">Today's Stats</h3> |
|
|
<p class="text-gray-500 dark:text-gray-400 text-sm">Answered 5 calls, 12 min talk time</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-4 flex gap-3"> |
|
|
<div class="flex-1 bg-gradient-to-br from-accent to-accent2 rounded-2xl p-5 text-white"> |
|
|
<i class="fas fa-comment-alt text-2xl"></i> |
|
|
<h3 class="font-medium mt-3">Smart Replies</h3> |
|
|
<p class="text-white text-opacity-80 text-sm mt-1">Teach the AI how to respond</p> |
|
|
</div> |
|
|
<div class="flex-1 bg-gray-800 dark:bg-gray-700 rounded-2xl p-5 text-white"> |
|
|
<i class="fas fa-history text-2xl"></i> |
|
|
<h3 class="font-medium mt-3">Call History</h3> |
|
|
<p class="text-gray-300 text-sm mt-1">Review previous conversations</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-4 bg-white dark:bg-gray-800 rounded-2xl p-5 flex-1 overflow-hidden flex flex-col"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<h2 class="font-medium">Recent Activity</h2> |
|
|
<button class="text-accent text-sm">See All</button> |
|
|
</div> |
|
|
|
|
|
<div class="mt-3 flex-1 overflow-y-auto space-y-4"> |
|
|
<div class="flex items-start animate-fadeIn"> |
|
|
<div class="w-10 h-10 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center"> |
|
|
<i class="fas fa-phone-alt text-green-600 dark:text-green-400"></i> |
|
|
</div> |
|
|
<div class="ml-3 flex-1"> |
|
|
<div class="flex justify-between"> |
|
|
<h3 class="font-medium">Michael (Work)</h3> |
|
|
<span class="text-xs text-gray-500 dark:text-gray-400">12:45 PM</span> |
|
|
</div> |
|
|
<p class="text-sm text-gray-500 dark:text-gray-400 mt-1">AI Assistant handled call: "Meeting confirmed for tomorrow"</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start animate-fadeIn"> |
|
|
<div class="w-10 h-10 rounded-full bg-purple-100 dark:bg-purple-900 flex items-center justify-center"> |
|
|
<i class="fas fa-phone-alt text-purple-600 dark:text-purple-400"></i> |
|
|
</div> |
|
|
<div class="ml-3 flex-1"> |
|
|
<div class="flex justify-between"> |
|
|
<h3 class="font-medium">Sarah (Spam)</h3> |
|
|
<span class="text-xs text-gray-500 dark:text-gray-400">11:30 AM</span> |
|
|
</div> |
|
|
<p class="text-sm text-gray-500 dark:text-gray-400 mt-1">AI blocked suspected spam call</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start animate-fadeIn"> |
|
|
<div class="w-10 h-10 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center"> |
|
|
<i class="fas fa-phone-alt text-blue-600 dark:text-blue-400"></i> |
|
|
</div> |
|
|
<div class="ml-3 flex-1"> |
|
|
<div class="flex justify-between"> |
|
|
<h3 class="font-medium">Mom</h3> |
|
|
<span class="text-xs text-gray-500 dark:text-gray-400">10:15 AM</span> |
|
|
</div> |
|
|
<p class="text-sm text-gray-500 dark:text-gray-400 mt-1">AI transferred call to you after screening</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start animate-fadeIn"> |
|
|
<div class="w-10 h-10 rounded-full bg-amber-100 dark:bg-amber-900 flex items-center justify-center"> |
|
|
<i class="fas fa-phone-alt text-amber-600 dark:text-amber-400"></i> |
|
|
</div> |
|
|
<div class="ml-3 flex-1"> |
|
|
<div class="flex justify-between"> |
|
|
<h3 class="font-medium">Dr. Smith Clinic</h3> |
|
|
<span class="text-xs text-gray-500 dark:text-gray-400">9:20 AM</span> |
|
|
</div> |
|
|
<p class="text-sm text-gray-500 dark:text-gray-400 mt-1">AI scheduled your appointment for next Monday</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="repliesScreen" class="screen h-full flex flex-col"> |
|
|
<div class="px-4 pt-4"> |
|
|
<div class="flex items-center"> |
|
|
<button class="p-2 rounded-full" onclick="showScreen('homeScreen')"> |
|
|
<i class="fas fa-arrow-left"></i> |
|
|
</button> |
|
|
<h2 class="text-xl font-bold ml-2">Smart Replies</h2> |
|
|
</div> |
|
|
<p class="text-gray-500 dark:text-gray-400 mt-1 ml-12">Customize how AI answers calls</p> |
|
|
</div> |
|
|
|
|
|
<div class="mt-4 px-4 flex-1 overflow-y-auto"> |
|
|
<div class="bg-white dark:bg-gray-800 rounded-2xl p-5 mb-4"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-12 h-12 rounded-full bg-gradient-to-br from-accent to-accent2 flex items-center justify-center"> |
|
|
<i class="fas fa-brain text-white text-xl"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<h3 class="font-medium">AI Learning Mode</h3> |
|
|
<p class="text-gray-500 dark:text-gray-400 text-sm">Improves responses over time</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-4 flex items-center justify-between"> |
|
|
<span>Learning from interactions</span> |
|
|
<label class="ios-switch"> |
|
|
<input type="checkbox" checked> |
|
|
<span class="ios-slider"></span> |
|
|
</label> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-2xl overflow-hidden"> |
|
|
<div class="px-5 pt-4"> |
|
|
<h3 class="font-medium">Custom Response Templates</h3> |
|
|
<p class="text-gray-500 dark:text-gray-400 text-sm mt-1">Set predefined responses</p> |
|
|
</div> |
|
|
|
|
|
<div class="mt-4 space-y-2"> |
|
|
<div class="flex items-center justify-between p-4 hover:bg-gray-100 dark:hover:bg-gray-750 cursor-pointer"> |
|
|
<div> |
|
|
<h4 class="font-medium">Business Calls</h4> |
|
|
<p class="text-sm text-gray-500 dark:text-gray-400 mt-1">"Hello, this is [Your Name]'s assistant..."</p> |
|
|
</div> |
|
|
<i class="fas fa-chevron-right text-gray-400"></i> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center justify-between p-4 hover:bg-gray-100 dark:hover:bg-gray-750 cursor-pointer"> |
|
|
<div> |
|
|
<h4 class="font-medium">Personal Calls</h4> |
|
|
<p class="text-sm text-gray-500 dark:text-gray-400 mt-1">"Hi, this is [Name]'s phone..."</p> |
|
|
</div> |
|
|
<i class="fas fa-chevron-right text-gray-400"></i> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center justify-between p-4 hover:bg-gray-100 dark:hover:bg-gray-750 cursor-pointer"> |
|
|
<div> |
|
|
<h4 class="font-medium">Spam Protection</h4> |
|
|
<p class="text-sm text-gray-500 dark:text-gray-400 mt-1">"Sorry, this number is not accepting calls..."</p> |
|
|
</div> |
|
|
<i class="fas fa-chevron-right text-gray-400"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-2xl mt-4 p-5"> |
|
|
<h3 class="font-medium">Response Style</h3> |
|
|
<div class="mt-4 space-y-4"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<h4 class="font-medium">Formal Tone</h4> |
|
|
<p class="text-gray-500 dark:text-gray-400 text-sm">Professional business language</p> |
|
|
</div> |
|
|
<label class="ios-switch"> |
|
|
<input type="checkbox" checked> |
|
|
<span class="ios-slider"></span> |
|
|
</label> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<h4 class="font-medium">Friendly Tone</h4> |
|
|
<p class="text-gray-500 dark:text-gray-400 text-sm">Casual conversation style</p> |
|
|
</div> |
|
|
<label class="ios-switch"> |
|
|
<input type="checkbox"> |
|
|
<span class="ios-slider"></span> |
|
|
</label> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<h4 class="font-medium">Use My Name</h4> |
|
|
<p class="text-gray-500 dark:text-gray-400 text-sm">"This is [Your Name]'s phone"</p> |
|
|
</div> |
|
|
<label class="ios-switch"> |
|
|
<input type="checkbox" checked> |
|
|
<span class="ios-slider"></span> |
|
|
</label> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="trainingScreen" class="screen h-full flex flex-col"> |
|
|
<div class="px-4 pt-4"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="flex items-center"> |
|
|
<button class="p-2 rounded-full" onclick="showScreen('homeScreen')"> |
|
|
<i class="fas fa-arrow-left"></i> |
|
|
</button> |
|
|
<div class="ml-2"> |
|
|
<h2 class="text-xl font-bold">Train AI</h2> |
|
|
<p class="text-gray-500 dark:text-gray-400 text-sm -mt-1">Linked to (562) 228-9429</p> |
|
|
</div> |
|
|
</div> |
|
|
<button class="text-accent" id="saveTraining">Save</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-4 px-4 flex-1 overflow-hidden flex flex-col"> |
|
|
<div class="bg-white dark:bg-gray-800 rounded-2xl p-5 flex-1 overflow-hidden flex flex-col"> |
|
|
<div class="flex-1 overflow-y-auto pb-4"> |
|
|
<div class="ai-bubble"> |
|
|
<p>How would you like me to respond to calls from your family?</p> |
|
|
</div> |
|
|
|
|
|
<div class="user-bubble mt-4"> |
|
|
<p>Always transfer calls from Mom and Dad to me</p> |
|
|
</div> |
|
|
|
|
|
<div class="ai-bubble mt-4"> |
|
|
<p>Noted! I'll transfer calls from Mom and Dad immediately.</p> |
|
|
<p class="mt-2">For other family members, how should I respond?</p> |
|
|
</div> |
|
|
|
|
|
<div class="user-bubble mt-4"> |
|
|
<p>Ask them for the reason of calling and text me if it's important</p> |
|
|
</div> |
|
|
|
|
|
<div class="ai-bubble mt-4"> |
|
|
<p>Got it. Here's the response I created based on your feedback:</p> |
|
|
<div class="mt-2 bg-blue-50 dark:bg-blue-900 rounded-lg p-3"> |
|
|
<p>"Hello, this is Alex's assistant. Could you let me know what you're calling about? I'll make sure they get your message."</p> |
|
|
</div> |
|
|
<p class="mt-2">Does this work?</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-auto pt-4 border-t border-gray-200 dark:border-gray-700"> |
|
|
<div class="flex gap-2"> |
|
|
<input id="trainingInput" type="text" class="ios-input flex-1" placeholder="Teach your assistant..." onkeypress="handleTrainingKeyPress(event)"> |
|
|
<button class="w-12 h-12 rounded-xl bg-accent flex items-center justify-center text-white" onclick="submitTraining()"> |
|
|
<i class="fas fa-paper-plane"></i> |
|
|
</button> |
|
|
</div> |
|
|
<p class="text-xs text-gray-500 dark:text-gray-400 mt-2 text-center">The AI learns from every interaction</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="fixed bottom-0 left-0 right-0 bg-white shadow-lg p-2 flex justify-center"> |
|
|
<button class="simple-btn" onclick="showScreen('homeScreen')">Home</button> |
|
|
<button class="simple-btn" onclick="showScreen('repliesScreen')">Replies</button> |
|
|
<button class="simple-btn" onclick="showScreen('trainingScreen')">Train AI</button> |
|
|
<button class="simple-btn" onclick="exportConfiguration()">Export</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="fab" onclick="answerCall()"> |
|
|
<i class="fas fa-phone"></i> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
let trainingData = { |
|
|
responses: [], |
|
|
trainedPatterns: {}, |
|
|
dictionProfiles: {}, |
|
|
learningRates: {}, |
|
|
contextMemory: {}, |
|
|
customResponses: { |
|
|
business: '"Hello, this is [Your Name]\'s assistant. How can I help you today?"', |
|
|
personal: '"Hi, this is [Name] calling. How can I help you?"', |
|
|
spam: '"Sorry, this number is not accepting unsolicited calls at this time."', |
|
|
urgent: '"This is urgent, please connect me immediately"' |
|
|
}, |
|
|
|
|
|
humorProfiles: {}, |
|
|
sarcasmDetection: {}, |
|
|
emotionalContext: {}, |
|
|
savedTemplates: [] |
|
|
}; |
|
|
|
|
|
|
|
|
function storeTrainingPattern(pattern, response) { |
|
|
trainingData.trainedPatterns[pattern.toLowerCase()] = response; |
|
|
localStorage.setItem('AI_Training', JSON.stringify(trainingData)); |
|
|
} |
|
|
|
|
|
|
|
|
function showScreen(screenId) { |
|
|
document.querySelectorAll('.screen').forEach(screen => { |
|
|
screen.classList.remove('active'); |
|
|
}); |
|
|
document.getElementById(screenId).classList.add('active'); |
|
|
|
|
|
|
|
|
const tabs = document.querySelectorAll('.fab ~ .fixed button'); |
|
|
tabs.forEach(tab => { |
|
|
const icon = tab.querySelector('i'); |
|
|
const span = tab.querySelector('span'); |
|
|
if (screenId === 'homeScreen' && icon.classList.contains('fa-home')) { |
|
|
tab.classList.add('text-accent'); |
|
|
} else if (screenId === 'repliesScreen' && icon.classList.contains('fa-comment-alt')) { |
|
|
tab.classList.add('text-accent'); |
|
|
} else if (screenId === 'trainingScreen' && icon.classList.contains('fa-graduation-cap')) { |
|
|
tab.classList.add('text-accent'); |
|
|
} else { |
|
|
tab.classList.remove('text-accent'); |
|
|
tab.classList.add('text-gray-500'); |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function simulateAIProgress() { |
|
|
const progressBars = document.querySelectorAll('.progress'); |
|
|
progressBars.forEach(bar => { |
|
|
const width = 70 + Math.floor(Math.random() * 30); |
|
|
bar.style.width = `${width}%`; |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function toggleRecording() { |
|
|
const fab = document.querySelector('.fab'); |
|
|
const icon = fab.querySelector('i'); |
|
|
|
|
|
if (icon.classList.contains('fa-microphone')) { |
|
|
icon.classList.remove('fa-microphone'); |
|
|
icon.classList.add('fa-stop'); |
|
|
fab.style.background = 'linear-gradient(135deg, #ff375f, #ff2d55)'; |
|
|
|
|
|
|
|
|
const notification = document.createElement('div'); |
|
|
notification.innerHTML = ` |
|
|
<div class="fixed top-16 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white px-4 py-2 rounded-full animate-fadeIn"> |
|
|
Recording started |
|
|
</div> |
|
|
`; |
|
|
document.body.appendChild(notification); |
|
|
setTimeout(() => { |
|
|
notification.remove(); |
|
|
}, 2000); |
|
|
} else { |
|
|
icon.classList.remove('fa-stop'); |
|
|
icon.classList.add('fa-microphone'); |
|
|
fab.style.background = 'linear-gradient(135deg, #0a84ff, #5e5ce6)'; |
|
|
|
|
|
|
|
|
simulateAIProgress(); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function answerCall() { |
|
|
const fab = document.querySelector('.fab'); |
|
|
const icon = fab.querySelector('i'); |
|
|
|
|
|
if (icon.classList.contains('fa-phone')) { |
|
|
icon.classList.remove('fa-phone'); |
|
|
icon.classList.add('fa-stop'); |
|
|
fab.style.background = 'linear-gradient(135deg, #32d74b, #30d158)'; |
|
|
|
|
|
|
|
|
const homeScreen = document.getElementById('homeScreen'); |
|
|
const callCard = document.createElement('div'); |
|
|
callCard.className = 'bg-white dark:bg-gray-800 rounded-2xl p-4 mt-4 animate-fadeIn'; |
|
|
callCard.innerHTML = ` |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<h3 class="font-medium">AI answered call</h3> |
|
|
<p class="text-sm text-gray-500 dark:text-gray-400">From: Unknown (New number)</p> |
|
|
</div> |
|
|
<div class="text-green-500"> |
|
|
<i class="fas fa-check-circle text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-3 text-sm"> |
|
|
<p>Call transcript will appear here after completion.</p> |
|
|
</div> |
|
|
`; |
|
|
homeScreen.insertBefore(callCard, homeScreen.children[3]); |
|
|
|
|
|
} else { |
|
|
icon.classList.remove('fa-stop'); |
|
|
icon.classList.add('fa-phone'); |
|
|
fab.style.background = 'linear-gradient(135deg, #0a84ff, #5e5ce6)'; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function saveTraining() { |
|
|
localStorage.setItem('AI_Training', JSON.stringify(trainingData)); |
|
|
|
|
|
|
|
|
const notification = document.createElement('div'); |
|
|
notification.className = 'fixed top-40 left-1/2 transform -translate-x-1/2 bg-gradient-to-r from-green-400 to-blue-500 text-white px-6 py-3 rounded-xl animate-fadeIn z-50 shadow-lg'; |
|
|
notification.innerHTML = ` |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-check-circle mr-2"></i> |
|
|
<span>AI training saved! New responses will be active immediately.</span> |
|
|
</div> |
|
|
`; |
|
|
document.body.appendChild(notification); |
|
|
|
|
|
setTimeout(() => { |
|
|
notification.remove(); |
|
|
showScreen('homeScreen'); |
|
|
}, 3000); |
|
|
|
|
|
|
|
|
const statsElement = document.querySelector('#homeScreen .w-10.h-10 + div p'); |
|
|
statsElement.textContent = `Trained on ${Object.keys(trainingData.trainedPatterns).length} patterns`; |
|
|
} |
|
|
|
|
|
|
|
|
function addAppearAnimations() { |
|
|
document.querySelectorAll('.animate-fadeIn').forEach((el, index) => { |
|
|
el.style.animationDelay = `${index * 0.1}s`; |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function submitTraining() { |
|
|
const input = document.getElementById('trainingInput'); |
|
|
if (input.value.trim() !== '') { |
|
|
trainingData.responses.push(input.value); |
|
|
|
|
|
|
|
|
const chatContainer = document.querySelector('#trainingScreen .flex-1.overflow-y-auto'); |
|
|
const userBubble = document.createElement('div'); |
|
|
userBubble.className = 'user-bubble mt-4 animate-fadeIn'; |
|
|
userBubble.innerHTML = `<p>${input.value}</p>`; |
|
|
chatContainer.appendChild(userBubble); |
|
|
|
|
|
|
|
|
const processed = processTrainingInput(input.value); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
const aiBubble = document.createElement('div'); |
|
|
aiBubble.className = 'ai-bubble mt-4 animate-fadeIn'; |
|
|
|
|
|
if (processed.success) { |
|
|
aiBubble.innerHTML = ` |
|
|
<p>Understood! I'll handle calls that way now.</p> |
|
|
<div class="mt-2 bg-green-50 dark:bg-green-900 rounded-lg p-3"> |
|
|
<h4 class="font-medium">New Response Pattern:</h4> |
|
|
<p class="mt-1"><strong>When caller says:</strong> ${processed.triggerPhrases.join(' OR ')}</p> |
|
|
<p class="mt-1"><strong>I will:</strong> ${processed.response}</p> |
|
|
</div> |
|
|
<p class="mt-2">Would you like to review any other scenarios?</p> |
|
|
`; |
|
|
storeTrainingPattern(processed.triggerPhrases[0], processed.response); |
|
|
} else { |
|
|
aiBubble.innerHTML = ` |
|
|
<p>I think you want me to handle calls differently when:</p> |
|
|
<div class="mt-2 bg-blue-50 dark:bg-blue-900 rounded-lg p-3"> |
|
|
<p>${processed.response}</p> |
|
|
</div> |
|
|
<p class="mt-2">Can you confirm or clarify how you'd like me to respond?</p> |
|
|
`; |
|
|
} |
|
|
|
|
|
chatContainer.appendChild(aiBubble); |
|
|
chatContainer.scrollTop = chatContainer.scrollHeight; |
|
|
}, 800); |
|
|
|
|
|
input.value = ''; |
|
|
} |
|
|
} |
|
|
|
|
|
function handleTrainingKeyPress(e) { |
|
|
if (e.key === 'Enter') { |
|
|
submitTraining(); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function processTrainingInput(inputText) { |
|
|
|
|
|
analyzeDiction(inputText); |
|
|
|
|
|
|
|
|
const context = getCurrentContext(); |
|
|
const patterns = [ |
|
|
|
|
|
/(when|if) (.+?) (then|do|respond with) (.+)/i, |
|
|
|
|
|
/(for|when) (\w+) calls?,? (say|respond) "(.+?)"/i, |
|
|
|
|
|
/(treat|handle) (.+?) (as|like) (\w+)/i, |
|
|
|
|
|
/(make|be) (more|less) (\w+) (when|for) (\w+)/i |
|
|
]; |
|
|
|
|
|
for (const pattern of patterns) { |
|
|
const match = inputText.match(pattern); |
|
|
if (match) { |
|
|
const [, triggerType, trigger, action, response] = match; |
|
|
storeBehaviorPattern(trigger, response, context); |
|
|
|
|
|
return { |
|
|
success: true, |
|
|
triggerPhrases: [trigger], |
|
|
response: enhanceResponse(response, context), |
|
|
context: context |
|
|
}; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
return adaptiveLearning(inputText); |
|
|
} |
|
|
|
|
|
|
|
|
function analyzeDiction(text) { |
|
|
const words = text.toLowerCase().split(/\s+/); |
|
|
const contractions = text.match(/\w+'?\w*/g) || []; |
|
|
|
|
|
|
|
|
if (!trainingData.dictionProfiles.user) { |
|
|
trainingData.dictionProfiles.user = { |
|
|
wordUsage: {}, |
|
|
contractionRate: 0, |
|
|
formalityScore: 0, |
|
|
complexityScore: 0 |
|
|
}; |
|
|
} |
|
|
|
|
|
contractions.forEach(word => { |
|
|
if (word.includes("'")) { |
|
|
trainingData.dictionProfiles.user.contractionRate++; |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
words.forEach(word => { |
|
|
trainingData.dictionProfiles.user.wordUsage[word] = |
|
|
(trainingData.dictionProfiles.user.wordUsage[word] || 0) + 1; |
|
|
}); |
|
|
|
|
|
|
|
|
localStorage.setItem('AI_DictionProfile', JSON.stringify(trainingData.dictionProfiles)); |
|
|
} |
|
|
|
|
|
function interpretTrainingIntent(text) { |
|
|
const lower = text.toLowerCase(); |
|
|
|
|
|
if (lower.includes('family') || lower.includes('mom') || lower.includes('dad')) { |
|
|
return trainingData.customResponses.personal; |
|
|
} |
|
|
else if (lower.includes('work') || lower.includes('business') || lower.includes('colleague')) { |
|
|
return trainingData.customResponses.business; |
|
|
} |
|
|
else if (lower.includes('appointment') || lower.includes('schedule')) { |
|
|
return trainingData.customResponses.appointments; |
|
|
} |
|
|
else if (lower.includes('urgent') || lower.includes('emergency')) { |
|
|
return trainingData.customResponses.urgent; |
|
|
} |
|
|
else if (lower.includes('callback') || lower.includes('call back')) { |
|
|
return trainingData.customResponses.callbacks; |
|
|
} |
|
|
else if (lower.includes('spam') || lower.includes('scam') || lower.includes('block')) { |
|
|
return trainingData.customResponses.spam; |
|
|
} |
|
|
else { |
|
|
return detectNewPattern(text); |
|
|
} |
|
|
} |
|
|
|
|
|
function detectNewPattern(text) { |
|
|
|
|
|
const keywords = text.match(/\b(\w{4,})\b/g) || []; |
|
|
const commands = ['transfer', 'ask', 'tell', 'say', 'respond', 'record']; |
|
|
|
|
|
const action = commands.find(cmd => text.toLowerCase().includes(cmd)) || 'handle'; |
|
|
const context = keywords.filter(w => |
|
|
!commands.includes(w.toLowerCase()) && |
|
|
w.length > 3 |
|
|
).join(', '); |
|
|
|
|
|
return `When call relates to ${context || "this situation"}, I will ${action} accordingly.`; |
|
|
} |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', () => { |
|
|
|
|
|
const savedData = localStorage.getItem('AI_Training'); |
|
|
if (savedData) { |
|
|
trainingData = JSON.parse(savedData); |
|
|
} |
|
|
|
|
|
document.getElementById('saveTraining').addEventListener('click', saveTraining); |
|
|
addAppearAnimations(); |
|
|
simulateAIProgress(); |
|
|
|
|
|
|
|
|
document.querySelectorAll('[onclick^="showScreen"]').forEach(btn => { |
|
|
btn.addEventListener('click', function() { |
|
|
const screenName = this.getAttribute('onclick').match(/'(.*?)'/)[1]; |
|
|
setTimeout(() => { |
|
|
if (screenName === 'trainingScreen') { |
|
|
document.getElementById('trainingInput').focus(); |
|
|
populateTrainingHistory(); |
|
|
} |
|
|
}, 300); |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
|
|
|
function populateTrainingHistory() { |
|
|
const chatContainer = document.querySelector('#trainingScreen .flex-1.overflow-y-auto'); |
|
|
chatContainer.innerHTML = ''; |
|
|
|
|
|
if (trainingData.responses.length === 0) { |
|
|
const welcomeBubble = document.createElement('div'); |
|
|
welcomeBubble.className = 'ai-bubble animate-fadeIn'; |
|
|
welcomeBubble.innerHTML = ` |
|
|
<p>Hi! I'm your call assistant. Teach me how to handle calls by:</p> |
|
|
<ol class="list-decimal pl-5 mt-2 space-y-1"> |
|
|
<li>Setting response templates</li> |
|
|
<li>Training me on specific call types</li> |
|
|
<li>Testing responses in real calls</li> |
|
|
</ol> |
|
|
<p class="mt-2">Try saying something like: "If caller says 'urgent', mark as important"</p> |
|
|
`; |
|
|
chatContainer.appendChild(welcomeBubble); |
|
|
} else { |
|
|
trainingData.responses.forEach(item => { |
|
|
const userBubble = document.createElement('div'); |
|
|
userBubble.className = 'user-bubble mt-4 animate-fadeIn'; |
|
|
userBubble.innerHTML = `<p>${item}</p>`; |
|
|
chatContainer.appendChild(userBubble); |
|
|
}); |
|
|
} |
|
|
} |
|
|
</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=jjmandog/gestst" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
