Hugging Face's logo

Spaces:
jjmandog
/
ccx
Running

App Files Community
ccx / index.html
jjmandog's picture
jjmandog
I can’t create my own responses to customers only the ones you show ! Please fix this - Follow Up Deployment
24754bc verified
Raw
History Blame Contribute Delete
67.5 kB
d mm<!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 src="https://cdn.jsdelivr.net/npm/@rvcjs/core@latest/dist/rvc.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/@okada-tts/web@latest/dist/okada.min.js"></script>
 <script>
 tailwind.config = {
 theme: {
 extend: {
 colors: {
 iosbg: '#f2f2f7',
 iosdark: '#1c1c1e',
 accent: '#0a84ff',
 accent2: '#5e5ce6',
 }
 }
 }
 }
 </script>
 <style>
 /* iOS-like transitions and scrolling */
 body {
 -webkit-tap-highlight-color: transparent;
 -webkit-overflow-scrolling: touch;
 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
 }
.screen {
 display: none;
 opacity: 0;
 transition: opacity 0.3s ease;
 }
.screen.active {
 display: block;
 opacity: 1;
 }
/* Custom iOS-like scrollbars */
 ::-webkit-scrollbar {
 width: 6px;
 }
::-webkit-scrollbar-track {
 background: transparent;
 }
::-webkit-scrollbar-thumb {
 background: rgba(0,0,0,0.15);
 border-radius: 3px;
 }
/* iOS-like switch */
 .ios-switch {
 position: relative;
 display: inline-block;
 width: 52px;
 height: 32px;
 }
.ios-switch input {
 opacity: 0;
 width: 0;
 height: 0;
 }
.ios-slider {
 position: absolute;
 cursor: pointer;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background-color: #e9e9ea;
 transition: .4s;
 border-radius: 16px;
 }
.ios-slider:before {
 position: absolute;
 content: "";
 height: 28px;
 width: 28px;
 left: 2px;
 bottom: 2px;
 background-color: white;
 transition: .4s;
 border-radius: 50%;
 box-shadow: 0 1px 3px rgba(0,0,0,0.3);
 }
input:checked + .ios-slider {
 background-color: #32d74b;
 }
input:checked + .ios-slider:before {
 transform: translateX(20px);
 }
/* Floating action button */
 .fab {
 position: fixed;
 right: 20px;
 bottom: 20px;
 width: 60px;
 height: 60px;
 background: linear-gradient(135deg, #0a84ff, #5e5ce6);
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 color: white;
 font-size: 22px;
 box-shadow: 0 4px 10px rgba(0,0,0,0.25);
 z-index: 50;
 cursor: pointer;
 }
/* Custom inputs */
 .ios-input {
 background: rgba(118,118,128,0.12);
 border-radius: 10px;
 padding: 8px 12px;
 font-size: 16px;
 width: 100%;
 transition: background 0.2s;
 }
.ios-input:focus {
 background: rgba(118,118,128,0.18);
 outline: none;
 }
/* Chat bubbles */
 .ai-bubble {
 background: rgba(118,118,128,0.12);
 border-top-left-radius: 18px;
 border-top-right-radius: 18px;
 border-bottom-right-radius: 18px;
 padding: 12px 16px;
 max-width: 85%;
 align-self: flex-start;
 }
.user-bubble {
 background: #0a84ff;
 color: white;
 border-top-left-radius: 18px;
 border-top-right-radius: 18px;
 border-bottom-left-radius: 18px;
 padding: 12px 16px;
 max-width: 85%;
 align-self: flex-end;
 }
/* Dynamic animations */
 @keyframes fadeIn {
 from { opacity: 0; transform: translateY(10px); }
 to { opacity: 1; transform: translateY(0); }
 }
.animate-fadeIn {
 animation: fadeIn 0.3s ease-out forwards;
 }
 </style>
</head>
<body class="bg-iosbg dark:bg-iosdark text-gray-900 dark:text-gray-200 min-h-screen">
 <!-- Status Bar -->
 <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>
<!-- Main App Container -->
 <div class="relative pt-12 max-w-md mx-auto h-screen overflow-hidden">
 <!-- Home Screen -->
 <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>
<!-- Status Card -->
 <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">+1 (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>
<!-- Action Cards -->
 <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>
<!-- Recent Activity -->
 <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>
<!-- Configure Replies Screen -->
 <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>
<!-- Call Training Screen -->
 <div id="trainingScreen" 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">Train AI</h2>
 </div>
 <p class="text-gray-500 dark:text-gray-400 mt-1 ml-12">Help your assistant learn</p>
 </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>
<!-- Tab Bar -->
 <div class="fixed bottom-0 left-0 right-0 bg-white dark:bg-iosdark border-t border-gray-200 dark:border-gray-800 max-w-md mx-auto">
 <div class="flex justify-around py-2">
 <button class="py-2 px-4 rounded-xl flex flex-col items-center text-accent" onclick="showScreen('homeScreen')">
 <i class="fas fa-home text-lg"></i>
 <span class="text-xs mt-1">Home</span>
 </button>
 <button class="py-2 px-4 rounded-xl flex flex-col items-center text-gray-500" onclick="showScreen('repliesScreen')">
 <i class="fas fa-comment-alt text-lg"></i>
 <span class="text-xs mt-1">Replies</span>
 </button>
 <button class="py-2 px-4 rounded-xl flex flex-col items-center text-gray-500" onclick="showScreen('trainingScreen')">
 <i class="fas fa-graduation-cap text-lg"></i>
 <span class="text-xs mt-1">Train</span>
 </button>
 <button class="py-2 px-4 rounded-xl flex flex-col items-center text-gray-500" onclick="showScreen('settingsScreen')">
 <i class="fas fa-cog text-lg"></i>
 <span class="text-xs mt-1">Settings</span>
 </button>
 </div>
 </div>
<!-- Settings Screen -->
 <div id="settingsScreen" 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">Voice Settings</h2>
 </div>
 <p class="text-gray-500 dark:text-gray-400 mt-1 ml-12">Customize voice personality</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">
 <h3 class="font-medium">Voice Personality</h3>
<div class="mt-4 space-y-4">
 <div class="flex items-center justify-between">
 <div>
 <h4 class="font-medium">Voice Model</h4>
 <p class="text-gray-500 dark:text-gray-400 text-sm">RVC-based human voice</p>
 </div>
 <select id="voiceModel" class="ios-input">
 <option value="okada-female">OKADA Female</option>
 <option value="okada-male">OKADA Male</option>
 <option value="custom-rvc">Custom RVC</option>
 </select>
 </div>
<div class="flex items-center justify-between">
 <div>
 <h4 class="font-medium">Emotional Tone</h4>
 <p class="text-gray-500 dark:text-gray-400 text-sm">Adjust voice emotions</p>
 </div>
 <select id="voiceTone" class="ios-input">
 <option value="neutral">Neutral</option>
 <option value="friendly">Friendly</option>
 <option value="professional">Professional</option>
 <option value="empathic">Empathic</option>
 </select>
 </div>
<div class="flex items-center justify-between">
 <div>
 <h4 class="font-medium">Speed</h4>
 <p class="text-gray-500 dark:text-gray-400 text-sm">Speech rate</p>
 </div>
 <select id="voiceSpeed" class="ios-input">
 <option value="1.0">Normal</option>
 <option value="0.8">Slow</option>
 <option value="1.2">Fast</option>
 </select>
 </div>
<div class="mt-6">
 <button class="w-full py-3 bg-accent text-white rounded-xl" onclick="testVoiceSettings()">
 Test Voice Settings
 </button>
 </div>
 </div>
 </div>
<div class="bg-white dark:bg-gray-800 rounded-2xl mt-4 p-5">
 <h3 class="font-medium">Advanced RVC Settings</h3>
 <div class="mt-4 space-y-2">
 <div>
 <label class="text-sm text-gray-500 dark:text-gray-400">Pitch Shift</label>
 <input type="range" id="pitchShift" min="-12" max="12" value="0" step="1" class="w-full mt-1">
 <div class="flex justify-between text-xs text-gray-500 mt-1">
 <span>Lower</span>
 <span>Normal</span>
 <span>Higher</span>
 </div>
 </div>
<div class="mt-4">
 <div class="flex justify-between">
 <label class="text-sm">RVC Similarity</label>
 <span id="similarityValue" class="text-sm">85%</span>
 </div>
 <input type="range" id="similarity" min="50" max="100" value="85" step="1" class="w-full mt-1">
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Floating Action Button -->
 <div class="fab" onclick="toggleRecording()">
 <i class="fas fa-microphone"></i>
 </div>
 </div>
<script>
 // Enhanced AI Training Data with Natural Language Learning
 let trainingData = {
 learnedResponses: {
 "business": [
 {
 "input": "car detailing",
 "response": "Thank you for calling [Your Business Name], premium auto detailing specialists. How can we help you today?",
 "tokens": ["car", "detailing"],
 "lastUsed": "2023-11-15T00:00:00.000Z"
 },
 {
 "input": "appointment",
 "response": "For appointments, we have availability this week. Would you prefer a wash & wax ($75), full detail ($150) or ceramic coating ($400)?",
 "tokens": ["appointment"],
 "lastUsed": "2023-11-15T00:00:00.000Z"
 },
 {
 "input": "hours",
 "response": "Our detailing center is open Monday-Friday 8am-6pm, Saturday 9am-4pm. We're closed Sundays.",
 "tokens": ["hours"],
 "lastUsed": "2023-11-15T00:00:00.000Z"
 }
 ]
 },
 customResponses: {
 "business": "Hello, you've reached [Your Business Name] auto detailing. Ask me about our services: basic wash ($35), premium detailing ($150), or ceramic coatings ($400+).",
 "spam": "We don't accept sales calls. Please email us at info@yourbusiness.com for business inquiries."
 },
 phoneNumber: "+1 (562) 228-9429",
 callHandling: {
 transferContacts: ["Mom", "Dad"],
 screenContacts: true,
 spamDetection: true
 },
 personality: {
 tone: "professional",
 useName: true,
 responseSpeed: "normal",
 businessName: "Shine On Auto Detailing",
 services: [
 {name: "Basic Wash", price: "$35", duration: "30 mins"},
 {name: "Deluxe Detail", price: "$150", duration: "3 hours"},
 {name: "Ceramic Coating", price: "$400+", duration: "1-2 days"}
 ]
 }
 };
 // Initialize Natural Language Processing
 const nlp = {
 processInput: function(text) {
 // Enhanced NLP processing
 text = text.toLowerCase().trim();
// Tokenize and clean input
 const tokens = text
 .replace(/[^\w\s]/g, '')
 .split(/\s+/)
 .filter(token => token.length > 2);
// Context detection with weights
 const contextScores = {
 business: ['work', 'job', 'meeting', 'service', 'price', 'appointment', 'business', 'company']
 .filter(word => text.includes(word)).length,
 personal: ['family', 'friend', 'mom', 'dad', 'home', 'personal']
 .filter(word => text.includes(word)).length,
 spam: ['spam', 'block', 'unwanted', 'telemarketer', 'sales', 'offer']
 .filter(word => text.includes(word)).length * 2, // Higher weight
 question: ['what', 'when', 'where', 'how', 'why', 'can you', 'would you', '?']
 .filter(word => text.includes(word)).length
 };
// Determine primary context
 let primaryContext = 'general';
 let maxScore = 0;
 for (const [context, score] of Object.entries(contextScores)) {
 if (score > maxScore) {
 maxScore = score;
 primaryContext = context;
 }
 }
return {
 text,
 tokens,
 context: primaryContext,
 isQuestion: contextScores.question > 0
 };
 },
 learnResponse: function(inputText, preferredResponse) {
 // Tokenize input and learn patterns
 const tokens = inputText.toLowerCase().split(/\s+/);
 const context = this.determineContext(inputText);
if (!trainingData.learnedResponses[context]) {
 trainingData.learnedResponses[context] = [];
 }
trainingData.learnedResponses[context].push({
 input: inputText,
 response: preferredResponse,
 tokens: tokens,
 lastUsed: new Date()
 });
this.saveToLocalStorage();
 return true;
 },
 determineContext: function(text) {
 text = text.toLowerCase();
 if (text.includes('work') || text.includes('business') || text.includes('job')) return 'business';
 if (text.includes('family') || text.includes('mom') || text.includes('dad')) return 'personal';
 if (text.includes('spam') || text.includes('block')) return 'spam';
 return 'general';
 },
 getBestResponse: function(inputText) {
 const context = this.determineContext(inputText);
 const possibleResponses = trainingData.learnedResponses[context] || [];
if (possibleResponses.length === 0) {
 return this.generateDefaultResponse(context);
 }
// Find the most relevant response based on keyword matching
 const inputTokens = inputText.toLowerCase().split(/\s+/);
 let bestMatch = {score: 0, response: possibleResponses[0]};
possibleResponses.forEach(item => {
 let score = 0;
 inputTokens.forEach(token => {
 if (item.tokens.includes(token)) score++;
 });
 if (score > bestMatch.score) {
 bestMatch = {score, response: item};
 }
 });
return bestMatch.response.response || this.generateDefaultResponse(context);
 },
 generateDefaultResponse: function(context) {
 const defaults = {
 business: "Hello! Thank you for calling our auto detailing service. We offer car washes starting at $35 and full detailing for $150. How can we assist you?",
 personal: "Hi, this is [Name]'s phone. I'll get your message to them if it's important.",
spam: "We don't accept sales calls. Please email us at info@yourbusiness.com for business inquiries.",
 general: "I'll connect you with our detailing team. Are you calling about an appointment or would you like service information?"
 };
 return defaults[context] || defaults.general;
 },
 saveToLocalStorage: function() {
 localStorage.setItem('aiCallAssistantTraining', JSON.stringify(trainingData));
 },
 loadFromLocalStorage: function() {
 const savedData = localStorage.getItem('aiCallAssistantTraining');
 if (savedData) {
 trainingData = JSON.parse(savedData);
 }
 }
 };
 // Screen navigation
 function showScreen(screenId) {
 document.querySelectorAll('.screen').forEach(screen => {
 screen.classList.remove('active');
 });
 document.getElementById(screenId).classList.add('active');
// Update tab bar active state
 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');
 }
 });
 }
// Simulate AI learning progress
 function simulateAIProgress() {
 const progressBars = document.querySelectorAll('.progress');
 progressBars.forEach(bar => {
 const width = 70 + Math.floor(Math.random() * 30);
 bar.style.width = `${width}%`;
 });
 }
// Toggle call recording function
 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)';
// Show a notification
 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)';
// Simulate AI learning after recording
 simulateAIProgress();
 }
 }
// Add animation to elements when they appear
 function addAppearAnimations() {
 document.querySelectorAll('.animate-fadeIn').forEach((el, index) => {
 el.style.animationDelay = `${index * 0.1}s`;
 });
 }
// Enhanced Training Functions
 function submitTraining() {
 const input = document.getElementById('trainingInput');
 if (input.value.trim() !== '') {
 const userMessage = input.value;
// Add user message to chat
 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>${userMessage}</p>`;
 chatContainer.appendChild(userBubble);
// Process user input and generate AI response
 setTimeout(() => {
 let aiResponse;
 const isTeachingExample = /how should i respond|please reply with|respond with/i.test(userMessage);
if (isTeachingExample) {
 const teachingMatch = userMessage.match(/(how should i respond to|please reply to|respond to) (.*?) (with|by saying) (.*)/i);
 if (teachingMatch) {
 const question = teachingMatch[2];
 const answer = teachingMatch[4];
 nlp.learnResponse(question, answer);
aiResponse = `
 <p>Got it! I've learned this response:</p>
 <div class="mt-2 bg-blue-50 dark:bg-blue-900 rounded-lg p-3">
 <p><strong>When asked:</strong> ${question}</p>
 <p><strong>I'll respond:</strong> ${answer}</p>
 </div>
 <p class="mt-2">I'll use this response pattern for similar questions.</p>
 `;
 } else {
 aiResponse = `
 <div class="ai-bubble mt-4 animate-fadeIn">
 <p>I can learn how to respond! Try phrasing like:</p>
 <div class="mt-2 bg-blue-50 dark:bg-blue-900 rounded-lg p-3">
 <p>"How should I respond to questions about pricing?"</p>
 <p>"Please reply to appointment requests with: 'Would you like morning or afternoon?'"</p>
 </div>
 </div>
 `;
 }
 } else {
 const response = nlp.getBestResponse(userMessage);
 aiResponse = `
 <p>Based on my training, here's how I would respond:</p>
 <div class="mt-2 bg-blue-50 dark:bg-blue-900 rounded-lg p-3">
 <p>${response}</p>
 </div>
 <p class="mt-2">Would you like to:</p>
 `;
 }
const aiBubble = document.createElement('div');
 aiBubble.className = 'ai-bubble mt-4 animate-fadeIn';
 aiBubble.innerHTML = aiResponse;
if (!aiResponse.includes('Try phrasing')) {
 aiBubble.innerHTML += `
 <div class="mt-3 flex gap-2">
 <button class="flex-1 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition"
onclick="acceptResponse(this)">
 Accept <i class="fas fa-check ml-1"></i>
 </button>
 <button class="flex-1 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition"
onclick="editResponse(this)">
 Edit <i class="fas fa-edit ml-1"></i>
 </button>
 <button class="px-3 py-2 bg-accent text-white rounded-lg hover:bg-blue-600 transition"
onclick="playResponse(this)">
 <i class="fas fa-volume-up"></i>
 </button>
 </div>
 `;
 }
chatContainer.appendChild(aiBubble);
 chatContainer.scrollTop = chatContainer.scrollHeight;
 }, 500);
input.value = '';
 }
 }
 function acceptResponse(button) {
 try {
 const responseDiv = button.closest('.ai-bubble').querySelector('div.bg-blue-50');
 if (!responseDiv) throw new Error('Response not found');
let responseText = '';
 // Handle both single p and multi-line responses
 const pTags = responseDiv.querySelectorAll('p');
 if (pTags.length > 1) {
 responseText = Array.from(pTags)
 .filter(p => !p.innerHTML.includes('<strong>'))
 .map(p => p.textContent)
 .join('\n');
 } else {
 responseText = pTags[0].textContent;
 }
const context = nlp.determineContext(responseText);
// If it's a teaching example, find the question too
 const strongTags = responseDiv.querySelectorAll('strong');
 if (strongTags.length >= 2) {
 const question = strongTags[0].nextSibling.textContent.trim();
 const answer = strongTags[1].nextSibling.textContent.trim();
 nlp.learnResponse(question, answer);
 } else {
 trainingData.customResponses[context] = responseText;
 }
nlp.saveToLocalStorage();
button.innerHTML = '<i class="fas fa-check-circle"></i> Saved';
 button.classList.remove('bg-green-500');
 button.classList.add('bg-emerald-600');
 button.disabled = true;
// Disable other buttons
 const buttons = button.closest('.flex').querySelectorAll('button');
 buttons.forEach(btn => {
 if (btn !== button) {
 btn.classList.add('opacity-50', 'cursor-not-allowed');
 btn.disabled = true;
 }
 });
 } catch (error) {
 console.error('Error accepting response:', error);
 alert('There was an error saving this response. Please try again.');
 }
 }
 function editResponse(button) {
 const bubble = button.closest('.ai-bubble');
 const responseDiv = bubble.querySelector('div.bg-blue-50');
 const pTags = responseDiv.querySelectorAll('p');
let currentText = '';
 if (pTags.length > 1) {
 // For teaching examples, combine response
 currentText = Array.from(pTags)
 .filter(p => !p.innerHTML.includes('<strong>'))
 .map(p => p.textContent)
 .join('\n\n');
 } else {
 currentText = pTags[0].textContent;
 }
responseDiv.innerHTML = `
 <textarea class="w-full p-2 rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700"
rows="4">${currentText}</textarea>
 <div class="mt-2 flex justify-end gap-2">
 <button onclick="cancelEdit(this)"
class="px-4 py-1 bg-gray-300 dark:bg-gray-600 text-gray-800 dark:text-gray-200 rounded">
 Cancel
 </button>
 <button onclick="saveEditedResponse(this)"
class="px-4 py-1 bg-accent text-white rounded hover:bg-blue-600 transition">
 Save Changes
 </button>
 </div>
 `;
 }
 function cancelEdit(button) {
 const bubble = button.closest('.ai-bubble');
 const responseDiv = button.closest('.bg-blue-50');
 const originalText = responseDiv.querySelector('textarea').value;
// Re-create the original response display
 if (originalText.includes('\n\n')) {
 responseDiv.innerHTML = originalText.split('\n\n')
 .map(text => `<p>${text}</p>`)
 .join('');
 } else {
 responseDiv.innerHTML = `<p>${originalText}</p>`;
 }
 }
 function saveEditedResponse(button) {
 try {
 const newText = button.closest('.bg-blue-50').querySelector('textarea').value;
 const bubble = button.closest('.ai-bubble');
 const responseDiv = button.closest('.bg-blue-50');
// Determine if this was a teaching example
 const wasTeachingExample = bubble.innerHTML.includes('<strong>When asked:</strong>');
if (wasTeachingExample) {
 // Parse the edited teaching example
 const lines = newText.split('\n');
 if (lines.length >= 2) {
 const question = lines[0].replace('When asked:', '').trim();
 const answer = lines[1].replace('I\'ll respond:', '').trim();
 nlp.learnResponse(question, answer);
 }
 } else {
 // Update regular response
 const context = nlp.determineContext(newText);
 trainingData.customResponses[context] = newText;
 }
nlp.saveToLocalStorage();
// Update display
 if (newText.includes('\n')) {
 responseDiv.innerHTML = newText.split('\n')
 .map(text => `<p>${text}</p>`)
 .join('');
 } else {
 responseDiv.innerHTML = `<p>${newText}</p>`;
 }
// Reset action buttons
 const actionDiv = document.createElement('div');
 actionDiv.className = 'mt-3 flex gap-2';
 actionDiv.innerHTML = `
 <button class="flex-1 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition"
onclick="acceptResponse(this)">
 Accept <i class="fas fa-check ml-1"></i>
 </button>
 <button class="flex-1 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition"
onclick="editResponse(this)">
 Edit <i class="fas fa-edit ml-1"></i>
 </button>
 <button class="px-3 py-2 bg-accent text-white rounded-lg hover:bg-blue-600 transition"
onclick="playResponse(this)">
 <i class="fas fa-volume-up"></i>
 </button>
 `;
 responseDiv.insertAdjacentElement('afterend', actionDiv);
 } catch (error) {
 console.error('Error saving edits:', error);
 alert('There was an error saving your changes. Please try again.');
 }
 }
 function playResponse(button) {
 try {
 const responseDiv = button.closest('.ai-bubble').querySelector('div.bg-blue-50');
 let responseText = '';
if (responseDiv.querySelector('strong')) {
 // For teaching examples
 const pTags = responseDiv.querySelectorAll('p');
 responseText = Array.from(pTags)
 .filter(p => !p.innerHTML.includes('<strong>'))
 .map(p => p.textContent)
 .join(' ');
 } else {
 // For regular responses
 responseText = responseDiv.textContent;
 }
// Simulate voice playback
 button.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
 button.disabled = true;
setTimeout(() => {
 button.innerHTML = '<i class="fas fa-volume-up"></i>';
 button.disabled = false;
 console.log('Would play:', responseText);
 // In a real app: voiceProcessor.speak(responseText).play();
// Show visual feedback
 const bubble = button.closest('.ai-bubble');
 bubble.classList.add('ring-2', 'ring-accent');
 setTimeout(() => {
 bubble.classList.remove('ring-2', 'ring-accent');
 }, 1000);
 }, 1500);
 } catch (error) {
 console.error('Error playing response:', error);
 button.innerHTML = '<i class="fas fa-volume-up"></i>';
 button.disabled = false;
 }
 }
 function handleTrainingKeyPress(e) {
 if (e.key === 'Enter') {
 submitTraining();
 }
 }
 // Voice Processing Functions
 let voiceProcessor = {
 model: 'okada-female',
 tone: 'neutral',
 speed: 1.0,
 pitch: 0,
 similarity: 0.85,
init: function() {
 // Initialize OKADA TTS
 this.tts = new OkadaTTS({
 voice: this.model,
 speed: this.speed,
 pitch: this.pitch
 });
// Initialize RVC
 this.rvc = new RVC({
 similarity: this.similarity,
 pitchShift: this.pitch
 });
 },
speak: function(text) {
 // Process text with OKADA TTS
 const ttsResult = this.tts.synthesize(text, this.tone);
// Apply RVC voice conversion
 return this.rvc.convert(ttsResult);
 },
updateSettings: function() {
 this.model = document.getElementById('voiceModel').value;
 this.tone = document.getElementById('voiceTone').value;
 this.speed = parseFloat(document.getElementById('voiceSpeed').value);
 this.pitch = parseInt(document.getElementById('pitchShift').value);
 this.similarity = parseInt(document.getElementById('similarity').value) / 100;
this.init();
 }
 };
 // Template creation functions
 function showCreateTemplateModal() {
 document.getElementById('templateModal').classList.remove('hidden');
 document.getElementById('templateName').focus();
 }
function hideCreateTemplateModal() {
 document.getElementById('templateModal').classList.add('hidden');
 }
function saveNewTemplate() {
 const name = document.getElementById('templateName').value.trim();
 const triggers = document.getElementById('templateTriggers').value.trim();
 const response = document.getElementById('templateResponse').value.trim();
if (!name || !response) {
 alert('Please provide both a template name and response text');
 return;
 }
// Add to training data
 if (!trainingData.learnedResponses.business) {
 trainingData.learnedResponses.business = [];
 }
trainingData.learnedResponses.business.push({
 input: name,
 response: response,
 tokens: triggers.split(',').map(t => t.trim()),
 lastUsed: new Date()
 });
nlp.saveToLocalStorage();
 hideCreateTemplateModal();
 showScreen('repliesScreen');
// Show success message
 const notification = document.createElement('div');
 notification.className = 'fixed top-16 left-1/2 transform -translate-x-1/2 bg-green-500 text-white px-4 py-2 rounded-full animate-fadeIn z-50';
 notification.textContent = 'Template created successfully!';
 document.body.appendChild(notification);
 setTimeout(() => notification.remove(), 2000);
// Clear form
 document.getElementById('templateName').value = '';
 document.getElementById('templateTriggers').value = '';
 document.getElementById('templateResponse').value = '';
 }
 function testVoiceSettings() {
 voiceProcessor.updateSettings();
 const audio = voiceProcessor.speak("Hello, this is your AI call assistant with new voice settings.");
 audio.play();
 }
 // Update similarity display
 document.getElementById('similarity').addEventListener('input', function() {
 document.getElementById('similarityValue').textContent = this.value + '%';
 });
 function playResponse(button) {
 const responseText = button.parentElement.querySelector('div p').textContent;
 const audio = voiceProcessor.speak(responseText);
 audio.play();
 }
 // Phone Integration with WebRTC
 const phoneHandler = {
 client: null,
 isCallActive: false,
 currentCall: null,
init: function() {
 // Load saved training data
 nlp.loadFromLocalStorage();
// Initialize WebRTC client (simplified)
 this.client = {
 onIncomingCall: (call) => this.handleIncomingCall(call),
 answerCall: (call) => this.answerCall(call),
 endCall: () => this.endCall()
 };
// Check for active call on page load
 this.checkActiveCall();
// Initialize voice processor
 voiceProcessor.init();
 addAppearAnimations();
 },
handleIncomingCall: function(call) {
 this.isCallActive = true;
 this.currentCall = call;
// Update UI to show active call
 showScreen('homeScreen');
 document.querySelector('.fab i').classList.remove('fa-microphone');
 document.querySelector('.fab i').classList.add('fa-phone-alt');
 document.querySelector('.fab').style.background = '#ff375f';
// Show call notification
 const callerInfo = call.callerID || 'Unknown Caller';
 const notification = document.createElement('div');
 notification.className = 'fixed top-16 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white px-4 py-2 rounded-full animate-fadeIn z-50';
 notification.innerHTML = `
 Incoming call from: ${callerInfo}
 <div class="mt-2 flex justify-center gap-4">
 <button onclick="phoneHandler.answerCall()" class="bg-green-500 w-12 h-12 rounded-full flex items-center justify-center">
 <i class="fas fa-phone"></i>
 </button>
 <button onclick="phoneHandler.endCall()" class="bg-red-500 w-12 h-12 rounded-full flex items-center justify-center">
 <i class="fas fa-phone-slash"></i>
 </button>
 </div>
 `;
 document.body.appendChild(notification);
// Auto-screen call if enabled
 if (trainingData.callHandling.screenContacts ||
(!callerInfo && trainingData.callHandling.spamDetection)) {
 setTimeout(() => this.screenCall(), 2000);
 }
 },
screenCall: function() {
 const callerInfo = this.currentCall.callerID || 'Unknown Caller';
 const isSpam = callerInfo === 'Unknown Caller' && trainingData.callHandling.spamDetection;
 const isTransfer = trainingData.callHandling.transferContacts.some(name =>
callerInfo.includes(name));
let response;
 if (isTransfer) {
 response = `Transferring call from ${callerInfo} to you...`;
 this.currentCall.transfer();
 } else if (isSpam) {
 response = trainingData.customResponses.spam || nlp.generateDefaultResponse('spam');
 this.currentCall.reject();
 } else {
 response = nlp.getBestResponse(callerInfo);
 this.currentCall.speakResponse(response);
 }
// Log the interaction
 this.logInteraction(callerInfo, response, isSpam ? 'blocked' : 'screened');
 },
answerCall: function() {
 if (!this.isCallActive) return;
const callerInfo = this.currentCall.callerID || 'Unknown Caller';
 this.currentCall.answer();
// Generate smart greeting
 const greeting = nlp.getBestResponse(`call from ${callerInfo}`);
 this.currentCall.speakResponse(greeting);
// Setup voice recognition for conversation
 this.currentCall.startVoiceRecognition((text) => {
 const response = nlp.getBestResponse(text);
 this.currentCall.speakResponse(response);
// If the response includes transferring, initiate transfer
 if (response.includes('transferring') || response.includes('connecting you')) {
 this.currentCall.transfer();
 }
 });
// Log the answered call
 this.logInteraction(callerInfo, greeting, 'answered');
 },
endCall: function() {
 if (!this.isCallActive) return;
 this.currentCall.hangup();
 this.isCallActive = false;
 this.currentCall = null;
// Reset UI
 document.querySelector('.fab i').classList.remove('fa-phone-alt');
 document.querySelector('.fab i').classList.add('fa-microphone');
 document.querySelector('.fab').style.background = 'linear-gradient(135deg, #0a84ff, #5e5ce6)';
 },
logInteraction: function(caller, response, type) {
 const logEntry = {
 date: new Date(),
 caller,
 response,
 type,
 duration: type === 'answered' ? Math.floor(Math.random() * 120) + 5 : 0
 };
// Add to recent activity
 const activityElement = document.createElement('div');
 activityElement.className = 'flex items-start animate-fadeIn';
 activityElement.innerHTML = `
 <div class="w-10 h-10 rounded-full ${type === 'blocked' ? 'bg-purple-100 dark:bg-purple-900' : 'bg-green-100 dark:bg-green-900'} flex items-center justify-center">
 <i class="fas fa-phone-alt ${type === 'blocked' ? 'text-purple-600 dark:text-purple-400' : 'text-green-600 dark:text-green-400'}"></i>
 </div>
 <div class="ml-3 flex-1">
 <div class="flex justify-between">
 <h3 class="font-medium">${caller}</h3>
 <span class="text-xs text-gray-500 dark:text-gray-400">${logEntry.date.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}</span>
 </div>
 <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
 AI ${type} call: "${response.substring(0, 40)}${response.length > 40 ? '...' : ''}"
 </p>
 </div>
 `;
// Add to top of recent activity
 const activityContainer = document.querySelector('#homeScreen .space-y-4');
 if (activityContainer.firstChild) {
 activityContainer.insertBefore(activityElement, activityContainer.firstChild);
 } else {
 activityContainer.appendChild(activityElement);
 }
 },
checkActiveCall: function() {
 // Simulated check in demo - in real app would check with telephony provider
 const activeCall = false;
 if (activeCall) {
 this.handleIncomingCall({
 callerID: 'Incoming call',
 answer: () => console.log('Call answered'),
 speakResponse: (text) => voiceProcessor.speak(text).play()
 });
 }
 }
 };
 // Initialize when page loads
 document.addEventListener('DOMContentLoaded', () => {
 phoneHandler.init();
// Focus input when training screen opens
 document.querySelectorAll('[onclick^="showScreen"]').forEach(btn => {
 btn.addEventListener('click', function() {
 if (this.getAttribute('onclick').includes('trainingScreen')) {
 setTimeout(() => {
 document.getElementById('trainingInput').focus();
 }, 300);
 }
 });
 });
// Simulate incoming call for demo purposes
 window.simulateCall = function(callerID) {
 phoneHandler.handleIncomingCall({
 callerID: callerID || 'Unknown Caller',
 answer: function() {
console.log('Call answered');
 const audio = voiceProcessor.speak("Hello, this call has been answered by the AI assistant.");
audio.play();
 },
 speakResponse: function(text) {
const audio = voiceProcessor.speak(text);
audio.play();
 },
 reject: function() { console.log('Call rejected'); },
 hangup: function() { console.log('Call ended'); },
 transfer: function() { console.log('Call transferred'); }
 });
 };
 });
 </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/ccx" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>