Hugging Face's logo

Spaces:
jjmandog
/
jaysx
Running

App Files Community
jjmandog commited on
Commit
80c49f5
·
verified ·
1 Parent(s): 74ff72e

Please fix the settingss tab it doesn’t work. I want to be able to set duration times . For example if I don’t answer a test after a certain amount of minutes or if I don’t answer a call after a certain amount of time then the ai answers the call or responds via text - Initial Deployment

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +1327 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Jaysx
3
- emoji: 📚
4
- colorFrom: yellow
5
- colorTo: green
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: jaysx
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: gray
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,1327 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>AI Phone Assistant</title>
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
+ <script>
11
+ // Business settings data
12
+ let businessSettings = {
13
+ maxRingTime: 30,
14
+ smsResponseTime: 15,
15
+ responseLanguage: "en",
16
+ personalGreeting: "",
17
+ businessHours: {
18
+ open: "08:00",
19
+ close: "18:00"
20
+ },
21
+ responses: {
22
+ missedCall: {
23
+ en: "Hello, this is Jay's Mobile Wash. We missed your call. Please leave a message and we'll return your call as soon as possible.",
24
+ es: "Hola, es el lavado móvil de Jay. Perdimos su llamada. Por favor deje un mensaje y le devolveremos la llamada lo antes posible."
25
+ },
26
+ afterHours: {
27
+ en: "Thank you for contacting Jay's Mobile Wash. Our business hours are [hours]. We will respond when we reopen.",
28
+ es: "Gracias por contactar el lavado móvil de Jay. Nuestro horario es de [hours]. Responderemos cuando volvamos a abrir."
29
+ }
30
+ }
31
+ };
32
+
33
+ function loadSettings() {
34
+ const saved = localStorage.getItem('JMW_Settings');
35
+ if (saved) {
36
+ businessSettings = JSON.parse(saved);
37
+ // Set default values if they don't exist
38
+ if (!businessSettings.maxRingTime) businessSettings.maxRingTime = 30;
39
+ if (!businessSettings.smsResponseTime) businessSettings.smsResponseTime = 15;
40
+
41
+ document.getElementById('maxRingTime').value = businessSettings.maxRingTime;
42
+ document.getElementById('smsResponseTime').value = businessSettings.smsResponseTime;
43
+ document.getElementById('openTime').value = businessSettings.businessHours.open;
44
+ document.getElementById('closeTime').value = businessSettings.businessHours.close;
45
+ document.getElementById('responseLanguage').value = businessSettings.responseLanguage;
46
+ document.getElementById('personalGreeting').value = businessSettings.personalGreeting;
47
+ document.getElementById('missedCallResponse').value = businessSettings.responses.missedCall.en;
48
+ document.getElementById('missedCallResponseEs').value = businessSettings.responses.missedCall.es;
49
+ document.getElementById('afterHoursResponse').value = businessSettings.responses.afterHours.en;
50
+ document.getElementById('afterHoursResponseEs').value = businessSettings.responses.afterHours.es;
51
+ }
52
+ }
53
+
54
+ function saveSettings() {
55
+ businessSettings = {
56
+ maxRingTime: parseInt(document.getElementById('maxRingTime').value),
57
+ smsResponseTime: parseInt(document.getElementById('smsResponseTime').value),
58
+ responseLanguage: document.getElementById('responseLanguage').value,
59
+ personalGreeting: document.getElementById('personalGreeting').value,
60
+ businessHours: {
61
+ open: document.getElementById('openTime').value,
62
+ close: document.getElementById('closeTime').value
63
+ },
64
+ responses: {
65
+ missedCall: {
66
+ en: document.getElementById('missedCallResponse').value,
67
+ es: document.getElementById('missedCallResponseEs').value
68
+ },
69
+ afterHours: {
70
+ en: document.getElementById('afterHoursResponse').value,
71
+ es: document.getElementById('afterHoursResponseEs').value
72
+ }
73
+ }
74
+ };
75
+
76
+ localStorage.setItem('JMW_Settings', JSON.stringify(businessSettings));
77
+
78
+ // Show success message
79
+ const notification = document.createElement('div');
80
+ notification.className = 'fixed top-40 left-1/2 transform -translate-x-1/2 bg-green-500 text-white px-6 py-3 rounded-xl animate-fadeIn z-50 shadow-lg';
81
+ notification.innerHTML = 'Settings saved successfully!';
82
+ document.body.appendChild(notification);
83
+ setTimeout(() => notification.remove(), 3000);
84
+ }
85
+
86
+ // Enhanced answerCall with time-based response
87
+ function answerCall() {
88
+ const currentTime = new Date();
89
+ const openTime = new Date();
90
+ const closeTime = new Date();
91
+ const [openHours, openMins] = businessSettings.businessHours.open.split(':');
92
+ const [closeHours, closeMins] = businessSettings.businessHours.close.split(':');
93
+
94
+ openTime.setHours(openHours, openMins);
95
+ closeTime.setHours(closeHours, closeMins);
96
+
97
+ if (currentTime < openTime || currentTime > closeTime) {
98
+ const fab = document.querySelector('.fab');
99
+ const icon = fab.querySelector('i');
100
+ icon.classList.remove('fa-phone');
101
+ icon.classList.add('fa-clock');
102
+
103
+ showResponseMessage(businessSettings.responses.afterHours.replace('[hours]',
104
+ `${businessSettings.businessHours.open} - ${businessSettings.businessHours.close}`));
105
+
106
+ setTimeout(() => {
107
+ icon.classList.remove('fa-clock');
108
+ icon.classList.add('fa-phone');
109
+ }, 1000);
110
+ return;
111
+ }
112
+ // Original answerCall functionality...
113
+ }
114
+
115
+ function showResponseMessage(message) {
116
+ const responseContainer = document.querySelector('#callResponseContainer');
117
+ if (!responseContainer) {
118
+ const container = document.createElement('div');
119
+ container.id = 'callResponseContainer';
120
+ container.className = 'fixed top-16 left-1/2 transform -translate-x-1/2 bg-black bg-opacity-80 text-white px-4 py-2 rounded-lg z-50';
121
+ container.textContent = message;
122
+ document.body.appendChild(container);
123
+ setTimeout(() => container.remove(), 3000);
124
+ }
125
+ }
126
+
127
+ function exportConfiguration() {
128
+ const data = {
129
+ trainingData: trainingData,
130
+ timestamp: new Date().toISOString(),
131
+ version: "1.0",
132
+ aiProfile: "Grok-Style Learning Assistant"
133
+ };
134
+
135
+ const blob = new Blob([JSON.stringify(data, null, 2)], {type: 'application/json'});
136
+ const url = URL.createObjectURL(blob);
137
+
138
+ const a = document.createElement('a');
139
+ a.href = url;
140
+ a.download = `AI-Call-Assistant-${new Date().toISOString().split('T')[0]}.json`;
141
+ document.body.appendChild(a);
142
+ a.click();
143
+ document.body.removeChild(a);
144
+ URL.revokeObjectURL(url);
145
+
146
+ alert("Configuration exported successfully!");
147
+ }
148
+
149
+ // Tailwind config
150
+ tailwind.config = {
151
+ theme: {
152
+ extend: {
153
+ colors: {
154
+ iosbg: '#f2f2f7',
155
+ iosdark: '#1c1c1e',
156
+ accent: '#0a84ff',
157
+ accent2: '#5e5ce6',
158
+ }
159
+ }
160
+ }
161
+ }
162
+
163
+ // SMS/iMessage Handling
164
+ function handleSMS(message, sender, isiMessage) {
165
+ const responseLanguage = businessSettings.responseLanguage;
166
+ const greeting = businessSettings.personalGreeting;
167
+
168
+ let response;
169
+
170
+ // Check for Spanish keywords
171
+ const spanishKeywords = ['hola', 'gracias', 'servicio', 'lavado'];
172
+ const isSpanish = spanishKeywords.some(word =>
173
+ message.toLowerCase().includes(word));
174
+
175
+ // Determine best language to respond in
176
+ const useSpanish = responseLanguage === 'es' || isSpanish;
177
+
178
+ if (message.toLowerCase().includes('appointment') ||
179
+ message.toLowerCase().includes('cita')) {
180
+ response = useSpanish ?
181
+ `Gracias por su mensaje. Nuestros horarios para citas son ${businessSettings.businessHours.open} a ${businessSettings.businessHours.close}.` :
182
+ `Thanks for your message. Our appointment hours are ${businessSettings.businessHours.open} to ${businessSettings.businessHours.close}.`;
183
+ } else if (greeting && !isiMessage) {
184
+ // Use personal greeting for SMS (not iMessage)
185
+ response = greeting;
186
+ } else {
187
+ response = useSpanish ?
188
+ "Gracias por su mensaje. ¿En qué puedo ayudarle hoy?" :
189
+ "Thanks for your message. How can I help you today?";
190
+ }
191
+
192
+ return response;
193
+ }
194
+
195
+ // Call Answering with Speech Synthesis
196
+ function answerCallWithSpeech(callerNumber) {
197
+ const synth = window.speechSynthesis;
198
+ const utterance = new SpeechSynthesisUtterance();
199
+
200
+ const greeting = businessSettings.personalGreeting ||
201
+ (businessSettings.responseLanguage === 'es' ?
202
+ "Buenos días, habla el asistente de Jay's Mobile Wash. ¿En qué puedo ayudarle?" :
203
+ "Hello, this is Jay's Mobile Wash assistant. How can I help you?");
204
+
205
+ utterance.text = greeting;
206
+ utterance.lang = businessSettings.responseLanguage === 'es' ? 'es-ES' : 'en-US';
207
+
208
+ // Speak the greeting
209
+ synth.speak(utterance);
210
+
211
+ // Set up voice recognition for caller response
212
+ if ('webkitSpeechRecognition' in window) {
213
+ const recognition = new webkitSpeechRecognition();
214
+ recognition.lang = businessSettings.responseLanguage === 'es' ? 'es-ES' : 'en-US';
215
+ recognition.interimResults = false;
216
+
217
+ recognition.onresult = function(event) {
218
+ const transcript = event.results[0][0].transcript;
219
+ // Process caller's speech and respond
220
+ processCallerSpeech(transcript, recognition);
221
+ };
222
+
223
+ recognition.start();
224
+ }
225
+ }
226
+
227
+ function processCallerSpeech(transcript, recognition) {
228
+ const synth = window.speechSynthesis;
229
+ const utterance = new SpeechSynthesisUtterance();
230
+ utterance.lang = businessSettings.responseLanguage === 'es' ? 'es-ES' : 'en-US';
231
+
232
+ // Simple response logic - would be enhanced with AI in production
233
+ if (transcript.toLowerCase().includes('appointment') ||
234
+ transcript.toLowerCase().includes('cita')) {
235
+ utterance.text = businessSettings.responseLanguage === 'es' ?
236
+ `Las citas están disponibles de ${businessSettings.businessHours.open} a ${businessSettings.businessHours.close}.` :
237
+ `Appointments are available from ${businessSettings.businessHours.open} to ${businessSettings.businessHours.close}.`;
238
+ } else {
239
+ utterance.text = businessSettings.responseLanguage === 'es' ?
240
+ "Por favor visite nuestro sitio web jaysmobilewash.com para más información. ¿Algo más en lo que pueda ayudarle?" :
241
+ "Please visit our website jaysmobilewash.com for more information. Is there anything else I can help with?";
242
+ }
243
+
244
+ synth.speak(utterance);
245
+
246
+ // Continue listening for next input
247
+ setTimeout(() => recognition.start(), 2000);
248
+ }
249
+ </script>
250
+ <style>
251
+ body {
252
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
253
+ }
254
+
255
+ .screen {
256
+ display: none;
257
+ }
258
+
259
+ .screen.active {
260
+ display: block;
261
+ }
262
+
263
+ /* Simple switch */
264
+ .toggle-switch {
265
+ position: relative;
266
+ display: inline-block;
267
+ width: 60px;
268
+ height: 34px;
269
+ }
270
+
271
+ .toggle-switch input {
272
+ opacity: 0;
273
+ width: 0;
274
+ height: 0;
275
+ }
276
+
277
+ .slider {
278
+ position: absolute;
279
+ cursor: pointer;
280
+ top: 0;
281
+ left: 0;
282
+ right: 0;
283
+ bottom: 0;
284
+ background-color: #ccc;
285
+ transition: .4s;
286
+ border-radius: 34px;
287
+ }
288
+
289
+ .slider:before {
290
+ position: absolute;
291
+ content: "";
292
+ height: 26px;
293
+ width: 26px;
294
+ left: 4px;
295
+ bottom: 4px;
296
+ background-color: white;
297
+ transition: .4s;
298
+ border-radius: 50%;
299
+ }
300
+
301
+ input:checked + .slider {
302
+ background-color: #2196F3;
303
+ }
304
+
305
+ input:checked + .slider:before {
306
+ transform: translateX(26px);
307
+ }
308
+
309
+ /* Chat bubbles */
310
+ .ai-bubble {
311
+ background: #f1f1f1;
312
+ border-radius: 5px 15px 15px 5px;
313
+ padding: 10px 15px;
314
+ max-width: 85%;
315
+ margin: 5px 0;
316
+ }
317
+
318
+ .user-bubble {
319
+ background: #2196F3;
320
+ color: white;
321
+ border-radius: 15px 5px 5px 15px;
322
+ padding: 10px 15px;
323
+ max-width: 85%;
324
+ margin: 5px 0 5px auto;
325
+ }
326
+
327
+ /* Simple buttons */
328
+ .simple-btn {
329
+ background: #2196F3;
330
+ color: white;
331
+ border: none;
332
+ padding: 10px 15px;
333
+ border-radius: 5px;
334
+ cursor: pointer;
335
+ margin: 5px;
336
+ }
337
+
338
+ /* Function buttons */
339
+ .action-btn {
340
+ background: #4CAF50;
341
+ color: white;
342
+ border: none;
343
+ padding: 10px 15px;
344
+ border-radius: 5px;
345
+ cursor: pointer;
346
+ margin: 5px;
347
+ }
348
+ </style>
349
+ </head>
350
+ <body class="bg-iosbg dark:bg-iosdark text-gray-900 dark:text-gray-200 min-h-screen">
351
+ <!-- Status Bar -->
352
+ <div class="fixed top-0 left-0 right-0 h-12 flex items-center px-4 z-50 bg-iosbg dark:bg-iosdark">
353
+ <div class="text-left text-sm w-20">9:41</div>
354
+ <div class="flex-1 flex justify-center">
355
+ <i class="fas fa-signal mr-2"></i>
356
+ <i class="fas fa-wifi mr-2"></i>
357
+ <i class="fas fa-battery-three-quarters"></i>
358
+ </div>
359
+ <div class="w-20 text-right text-xs">100%</div>
360
+ </div>
361
+
362
+ <!-- Main App Container -->
363
+ <div class="relative pt-12 max-w-md mx-auto h-screen overflow-hidden">
364
+ <!-- Home Screen -->
365
+ <div id="homeScreen" class="screen active px-4 pt-4 h-full flex flex-col">
366
+ <div class="mt-2">
367
+ <h1 class="text-3xl font-bold">Jay's Mobile Wash</h1>
368
+ <p class="text-gray-500 dark:text-gray-400 mt-1">AI Call Assistant Dashboard</p>
369
+ </div>
370
+
371
+ <!-- Quick Action Buttons -->
372
+ <div class="mt-8 grid grid-cols-2 gap-4">
373
+ <button onclick="showScreen('repliesScreen')" class="bg-white dark:bg-gray-800 rounded-2xl p-5 flex flex-col items-center shadow-sm">
374
+ <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mb-3">
375
+ <i class="fas fa-comments text-blue-500 text-xl"></i>
376
+ </div>
377
+ <h3 class="font-medium">Response Templates</h3>
378
+ <p class="text-xs text-gray-500 mt-1 text-center">Pre-set replies for common calls</p>
379
+ </button>
380
+
381
+ <button onclick="showScreen('trainingScreen')" class="bg-white dark:bg-gray-800 rounded-2xl p-5 flex flex-col items-center shadow-sm">
382
+ <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center mb-3">
383
+ <i class="fas fa-graduation-cap text-purple-500 text-xl"></i>
384
+ </div>
385
+ <h3 class="font-medium">Train AI</h3>
386
+ <p class="text-xs text-gray-500 mt-1 text-center">Improve call responses</p>
387
+ </button>
388
+
389
+ <button onclick="showScreen('settingsScreen')" class="bg-white dark:bg-gray-800 rounded-2xl p-5 flex flex-col items-center shadow-sm">
390
+ <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center mb-3">
391
+ <i class="fas fa-cog text-green-500 text-xl"></i>
392
+ </div>
393
+ <h3 class="font-medium">Settings</h3>
394
+ <p class="text-xs text-gray-500 mt-1 text-center">Configure call handling</p>
395
+ </button>
396
+
397
+ <button onclick="answerCall(true)" class="bg-white dark:bg-gray-800 rounded-2xl p-5 flex flex-col items-center shadow-sm">
398
+ <div class="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center mb-3">
399
+ <i class="fas fa-phone text-red-500 text-xl"></i>
400
+ </div>
401
+ <h3 class="font-medium">Test Call</h3>
402
+ <p class="text-xs text-gray-500 mt-1 text-center">Practice AI responses</p>
403
+ </button>
404
+ </div>
405
+
406
+ <!-- Today's Summary -->
407
+ <div class="mt-8 bg-white dark:bg-gray-800 rounded-2xl p-5">
408
+ <h2 class="font-bold text-lg mb-3">Today's Summary</h2>
409
+ <div class="grid grid-cols-3 gap-4 text-center">
410
+ <div class="bg-blue-50 dark:bg-blue-900/30 p-3 rounded-xl">
411
+ <div class="text-2xl font-bold">12</div>
412
+ <div class="text-xs">Calls</div>
413
+ </div>
414
+ <div class="bg-green-50 dark:bg-green-900/30 p-3 rounded-xl">
415
+ <div class="text-2xl font-bold">8</div>
416
+ <div class="text-xs">Answered</div>
417
+ </div>
418
+ <div class="bg-yellow-50 dark:bg-yellow-900/30 p-3 rounded-xl">
419
+ <div class="text-2xl font-bold">4</div>
420
+ <div class="text-xs">Missed</div>
421
+ </div>
422
+ </div>
423
+ </div>
424
+
425
+ <!-- Recent Activity -->
426
+ <div class="mt-4">
427
+ <div class="flex justify-between items-center mb-2">
428
+ <h3 class="font-medium">Recent Calls</h3>
429
+ <button class="text-sm text-blue-500">See All</button>
430
+ </div>
431
+ <div class="space-y-2">
432
+ <div class="flex items-center justify-between p-3 bg-white dark:bg-gray-800 rounded-xl">
433
+ <div class="flex items-center">
434
+ <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center mr-3">
435
+ <i class="fas fa-check text-green-500 text-xs"></i>
436
+ </div>
437
+ <div>
438
+ <p class="text-sm font-medium">(562) 228-9429</p>
439
+ <p class="text-xs text-gray-500">AI Answered - 2:15 PM</p>
440
+ </div>
441
+ </div>
442
+ <i class="fas fa-chevron-right text-gray-400"></i>
443
+ </div>
444
+ <div class="flex items-center justify-between p-3 bg-white dark:bg-gray-800 rounded-xl">
445
+ <div class="flex items-center">
446
+ <div class="w-8 h-8 rounded-full bg-red-100 flex items-center justify-center mr-3">
447
+ <i class="fas fa-times text-red-500 text-xs"></i>
448
+ </div>
449
+ <div>
450
+ <p class="text-sm font-medium">Unknown Caller</p>
451
+ <p class="text-xs text-gray-500">Missed - 10:45 AM</p>
452
+ </div>
453
+ </div>
454
+ <i class="fas fa-chevron-right text-gray-400"></i>
455
+ </div>
456
+ </div>
457
+ </div>
458
+ </div>
459
+
460
+ <!-- Configure Replies Screen -->
461
+ <div id="repliesScreen" class="screen h-full flex flex-col">
462
+ <div class="px-4 pt-4">
463
+ <div class="flex items-center">
464
+ <button class="p-2 rounded-full" onclick="showScreen('homeScreen')">
465
+ <i class="fas fa-arrow-left"></i>
466
+ </button>
467
+ <h2 class="text-xl font-bold ml-2">Smart Replies</h2>
468
+ </div>
469
+ <p class="text-gray-500 dark:text-gray-400 mt-1 ml-12">Customize how AI answers calls</p>
470
+ </div>
471
+
472
+ <div class="mt-4 px-4 flex-1 overflow-y-auto">
473
+ <div class="bg-white dark:bg-gray-800 rounded-2xl p-5 mb-4">
474
+ <div class="flex items-center">
475
+ <div class="w-12 h-12 rounded-full bg-gradient-to-br from-accent to-accent2 flex items-center justify-center">
476
+ <i class="fas fa-brain text-white text-xl"></i>
477
+ </div>
478
+ <div class="ml-3">
479
+ <h3 class="font-medium">AI Learning Mode</h3>
480
+ <p class="text-gray-500 dark:text-gray-400 text-sm">Improves responses over time</p>
481
+ </div>
482
+ </div>
483
+
484
+ <div class="mt-4 flex items-center justify-between">
485
+ <span>Learning from interactions</span>
486
+ <label class="ios-switch">
487
+ <input type="checkbox" checked>
488
+ <span class="ios-slider"></span>
489
+ </label>
490
+ </div>
491
+ </div>
492
+
493
+ <div class="bg-white dark:bg-gray-800 rounded-2xl overflow-hidden">
494
+ <div class="px-5 pt-4">
495
+ <h3 class="font-medium">Custom Response Templates</h3>
496
+ <p class="text-gray-500 dark:text-gray-400 text-sm mt-1">Set predefined responses</p>
497
+ </div>
498
+
499
+ <div class="mt-4 space-y-2">
500
+ <div class="flex items-center justify-between p-4 hover:bg-gray-100 dark:hover:bg-gray-750 cursor-pointer">
501
+ <div>
502
+ <h4 class="font-medium">Business Calls</h4>
503
+ <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">"Hello, this is [Your Name]'s assistant..."</p>
504
+ </div>
505
+ <i class="fas fa-chevron-right text-gray-400"></i>
506
+ </div>
507
+
508
+ <div class="flex items-center justify-between p-4 hover:bg-gray-100 dark:hover:bg-gray-750 cursor-pointer">
509
+ <div>
510
+ <h4 class="font-medium">Personal Calls</h4>
511
+ <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">"Hi, this is [Name]'s phone..."</p>
512
+ </div>
513
+ <i class="fas fa-chevron-right text-gray-400"></i>
514
+ </div>
515
+
516
+ <div class="flex items-center justify-between p-4 hover:bg-gray-100 dark:hover:bg-gray-750 cursor-pointer">
517
+ <div>
518
+ <h4 class="font-medium">Spam Protection</h4>
519
+ <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">"Sorry, this number is not accepting calls..."</p>
520
+ </div>
521
+ <i class="fas fa-chevron-right text-gray-400"></i>
522
+ </div>
523
+ </div>
524
+ </div>
525
+
526
+ <div class="bg-white dark:bg-gray-800 rounded-2xl mt-4 p-5">
527
+ <h3 class="font-medium">Response Style</h3>
528
+ <div class="mt-4 space-y-4">
529
+ <div class="flex items-center justify-between">
530
+ <div>
531
+ <h4 class="font-medium">Formal Tone</h4>
532
+ <p class="text-gray-500 dark:text-gray-400 text-sm">Professional business language</p>
533
+ </div>
534
+ <label class="ios-switch">
535
+ <input type="checkbox" checked>
536
+ <span class="ios-slider"></span>
537
+ </label>
538
+ </div>
539
+
540
+ <div class="flex items-center justify-between">
541
+ <div>
542
+ <h4 class="font-medium">Friendly Tone</h4>
543
+ <p class="text-gray-500 dark:text-gray-400 text-sm">Casual conversation style</p>
544
+ </div>
545
+ <label class="ios-switch">
546
+ <input type="checkbox">
547
+ <span class="ios-slider"></span>
548
+ </label>
549
+ </div>
550
+
551
+ <div class="flex items-center justify-between">
552
+ <div>
553
+ <h4 class="font-medium">Use My Name</h4>
554
+ <p class="text-gray-500 dark:text-gray-400 text-sm">"This is [Your Name]'s phone"</p>
555
+ </div>
556
+ <label class="ios-switch">
557
+ <input type="checkbox" checked>
558
+ <span class="ios-slider"></span>
559
+ </label>
560
+ </div>
561
+ </div>
562
+ </div>
563
+ </div>
564
+ </div>
565
+
566
+ <!-- Call Training Screen -->
567
+ <div id="trainingScreen" class="screen h-full flex flex-col">
568
+ <div class="px-4 pt-4">
569
+ <div class="flex items-center justify-between">
570
+ <div class="flex items-center">
571
+ <button class="p-2 rounded-full" onclick="showScreen('homeScreen')">
572
+ <i class="fas fa-arrow-left"></i>
573
+ </button>
574
+ <div class="ml-2">
575
+ <h2 class="text-xl font-bold">Train AI</h2>
576
+ <p class="text-gray-500 dark:text-gray-400 text-sm -mt-1">Linked to (562) 228-9429</p>
577
+ </div>
578
+ </div>
579
+ <button class="text-accent" id="saveTraining">Save</button>
580
+ </div>
581
+ </div>
582
+
583
+ <div class="mt-4 px-4 flex-1 overflow-hidden flex flex-col">
584
+ <div class="bg-white dark:bg-gray-800 rounded-2xl p-5 flex-1 overflow-hidden flex flex-col">
585
+ <div class="flex-1 overflow-y-auto pb-4">
586
+ <div class="ai-bubble">
587
+ <p>How would you like me to respond to calls from your family?</p>
588
+ </div>
589
+
590
+ <div class="user-bubble mt-4">
591
+ <p>Always transfer calls from Mom and Dad to me</p>
592
+ </div>
593
+
594
+ <div class="ai-bubble mt-4">
595
+ <p>Noted! I'll transfer calls from Mom and Dad immediately.</p>
596
+ <p class="mt-2">For other family members, how should I respond?</p>
597
+ </div>
598
+
599
+ <div class="user-bubble mt-4">
600
+ <p>Ask them for the reason of calling and text me if it's important</p>
601
+ </div>
602
+
603
+ <div class="ai-bubble mt-4">
604
+ <p>Got it. Here's the response I created based on your feedback:</p>
605
+ <div class="mt-2 bg-blue-50 dark:bg-blue-900 rounded-lg p-3">
606
+ <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>
607
+ </div>
608
+ <p class="mt-2">Does this work?</p>
609
+ </div>
610
+ </div>
611
+
612
+ <div class="mt-auto pt-4 border-t border-gray-200 dark:border-gray-700">
613
+ <div class="flex gap-2">
614
+ <input id="trainingInput" type="text" class="ios-input flex-1" placeholder="Teach your assistant..." onkeypress="handleTrainingKeyPress(event)">
615
+ <button class="w-12 h-12 rounded-xl bg-accent flex items-center justify-center text-white" onclick="submitTraining()">
616
+ <i class="fas fa-paper-plane"></i>
617
+ </button>
618
+ </div>
619
+ <p class="text-xs text-gray-500 dark:text-gray-400 mt-2 text-center">The AI learns from every interaction</p>
620
+ </div>
621
+ </div>
622
+ </div>
623
+ </div>
624
+
625
+ <!-- Simplified Navigation -->
626
+ <div class="fixed bottom-0 left-0 right-0 bg-white shadow-lg p-2 flex justify-around">
627
+ <button class="flex flex-col items-center text-xs" onclick="showScreen('homeScreen')">
628
+ <i class="fas fa-home mb-1"></i>
629
+ <span>Home</span>
630
+ </button>
631
+ <button class="flex flex-col items-center text-xs" onclick="showScreen('repliesScreen')">
632
+ <i class="fas fa-comments mb-1"></i>
633
+ <span>Replies</span>
634
+ </button>
635
+ <button class="flex flex-col items-center text-xs" onclick="showScreen('trainingScreen')">
636
+ <i class="fas fa-graduation-cap mb-1"></i>
637
+ <span>Train</span>
638
+ </button>
639
+ <button class="flex flex-col items-center text-xs" onclick="showScreen('settingsScreen')">
640
+ <i class="fas fa-cog mb-1"></i>
641
+ <span>Settings</span>
642
+ </button>
643
+ </div>
644
+
645
+ <!-- AI Chat Test Screen -->
646
+ <div id="chatScreen" class="screen h-full flex flex-col">
647
+ <div class="px-4 pt-4">
648
+ <div class="flex items-center">
649
+ <button class="p-2 rounded-full" onclick="showScreen('homeScreen')">
650
+ <i class="fas fa-arrow-left"></i>
651
+ </button>
652
+ <h2 class="text-xl font-bold ml-2">AI Chat Test</h2>
653
+ </div>
654
+ <p class="text-gray-500 dark:text-gray-400 mt-1 ml-12">Test and train the AI assistant</p>
655
+ </div>
656
+
657
+ <div class="mt-4 px-4 flex-1 overflow-hidden flex flex-col">
658
+ <div class="bg-white dark:bg-gray-800 rounded-2xl p-5 flex-1 overflow-hidden flex flex-col">
659
+ <div id="chatMessages" class="flex-1 overflow-y-auto pb-4 space-y-4">
660
+ <div class="ai-bubble animate-fadeIn">
661
+ <p>Hi! I'm your AI assistant for Jay's Mobile Wash. I can answer questions about our detailing services and learn from our conversations.</p>
662
+ <p class="mt-2">Would you like to test my knowledge or teach me something new?</p>
663
+ </div>
664
+ </div>
665
+
666
+ <div class="mt-auto pt-4 border-t border-gray-200 dark:border-gray-700">
667
+ <div class="flex gap-2">
668
+ <input id="chatInput" type="text" class="ios-input flex-1" placeholder="Ask or teach me..." onkeypress="handleChatKeyPress(event)">
669
+ <button class="w-12 h-12 rounded-xl bg-accent flex items-center justify-center text-white" onclick="submitChatMessage()">
670
+ <i class="fas fa-paper-plane"></i>
671
+ </button>
672
+ </div>
673
+ <p class="text-xs text-gray-500 dark:text-gray-400 mt-2 text-center">I'll learn from every interaction</p>
674
+ </div>
675
+ </div>
676
+ </div>
677
+ </div>
678
+
679
+ <!-- Settings Screen -->
680
+ <div id="settingsScreen" class="screen h-full flex flex-col">
681
+ <div class="px-4 pt-4">
682
+ <div class="flex items-center">
683
+ <button class="p-2 rounded-full" onclick="showScreen('homeScreen')">
684
+ <i class="fas fa-arrow-left"></i>
685
+ </button>
686
+ <h2 class="text-xl font-bold ml-2">Jay's Mobile Wash Settings</h2>
687
+ </div>
688
+ <p class="text-gray-500 dark:text-gray-400 mt-1 ml-12">Configure AI response behavior</p>
689
+ </div>
690
+
691
+ <div class="mt-4 px-4 flex-1 overflow-y-auto">
692
+ <div class="bg-white dark:bg-gray-800 rounded-2xl p-5 mb-4">
693
+ <h3 class="font-medium mb-4">Call Response Timing</h3>
694
+
695
+ <div class="space-y-4">
696
+ <div class="flex items-center justify-between">
697
+ <div>
698
+ <h4>Max Ring Time (seconds)</h4>
699
+ <p class="text-gray-500 dark:text-gray-400 text-sm">If you don't answer by this time, AI will answer</p>
700
+ </div>
701
+ <input type="number" id="maxRingTime" value="30" min="5" max="60" class="w-20 px-2 py-1 rounded-lg border border-gray-300">
702
+ </div>
703
+
704
+ <div class="flex items-center justify-between">
705
+ <div>
706
+ <h4>Max Ring Time (seconds)</h4>
707
+ <p class="text-gray-500 dark:text-gray-400 text-sm">How long to ring before AI answers</p>
708
+ </div>
709
+ <input type="number" id="maxRingTime" value="30" min="5" max="60" class="w-20 px-2 py-1 rounded-lg border border-gray-300">
710
+ </div>
711
+
712
+ <div class="flex items-center justify-between">
713
+ <div>
714
+ <h4>SMS Auto-Reply Time (minutes)</h4>
715
+ <p class="text-gray-500 dark:text-gray-400 text-sm">If no reply to SMS by this time</p>
716
+ </div>
717
+ <input type="number" id="smsResponseTime" value="15" min="1" max="120" class="w-20 px-2 py-1 rounded-lg border border-gray-300">
718
+ </div>
719
+
720
+ <div class="border-t border-gray-200 dark:border-gray-700 pt-4">
721
+ <h3 class="font-medium mb-2">Business Hours</h3>
722
+ <div class="grid grid-cols-2 gap-3">
723
+ <div>
724
+ <label class="block text-sm text-gray-500 dark:text-gray-400 mb-1">Open Time</label>
725
+ <input type="time" id="openTime" value="08:00" class="w-full px-2 py-1 rounded-lg border border-gray-300">
726
+ </div>
727
+ <div>
728
+ <label class="block text-sm text-gray-500 dark:text-gray-400 mb-1">Close Time</label>
729
+ <input type="time" id="closeTime" value="18:00" class="w-full px-2 py-1 rounded-lg border border-gray-300">
730
+ </div>
731
+ </div>
732
+ </div>
733
+ </div>
734
+ </div>
735
+
736
+ <div class="bg-white dark:bg-gray-800 rounded-2xl p-5">
737
+ <h3 class="font-medium mb-4">Call Handling Configuration</h3>
738
+
739
+ <div class="flex items-center justify-between mb-4">
740
+ <div>
741
+ <h4>Answer Incoming Calls</h4>
742
+ <p class="text-gray-500 dark:text-gray-400 text-sm">Enable AI to answer phone calls</p>
743
+ </div>
744
+ <label class="ios-switch">
745
+ <input type="checkbox" id="answerCallsToggle" checked>
746
+ <span class="ios-slider"></span>
747
+ </label>
748
+ </div>
749
+
750
+ <div class="flex items-center justify-between mb-4">
751
+ <div>
752
+ <h4>Live Call Training Mode</h4>
753
+ <p class="text-gray-500 dark:text-gray-400 text-sm">Ask me questions during calls to learn</p>
754
+ </div>
755
+ <label class="ios-switch">
756
+ <input type="checkbox" id="callTrainingToggle">
757
+ <span class="ios-slider"></span>
758
+ </label>
759
+ </div>
760
+
761
+ <h3 class="font-medium mb-4 mt-6">Response Messages</h3>
762
+
763
+ <div class="space-y-4">
764
+ <div class="flex items-center justify-between">
765
+ <div>
766
+ <h4>Language</h4>
767
+ <p class="text-gray-500 dark:text-gray-400 text-sm">Default response language</p>
768
+ </div>
769
+ <select id="responseLanguage" class="px-2 py-1 rounded-lg border border-gray-300">
770
+ <option value="en">English</option>
771
+ <option value="es">Español</option>
772
+ </select>
773
+ </div>
774
+
775
+ <div>
776
+ <label class="block text-sm mb-1">Personal Greeting</label>
777
+ <textarea id="personalGreeting" rows="2" class="w-full px-3 py-2 rounded-lg border border-gray-300" placeholder="Custom greeting when answering calls..."></textarea>
778
+ </div>
779
+
780
+ <div>
781
+ <label class="block text-sm mb-1">Missed Call Response (English)</label>
782
+ <textarea id="missedCallResponse" rows="2" class="w-full px-3 py-2 rounded-lg border border-gray-300">Hello, this is Jay's Mobile Wash. We missed your call. Please leave a message and we'll return your call as soon as possible.</textarea>
783
+ </div>
784
+ <div>
785
+ <label class="block text-sm mb-1">Respuesta Llamada Perdida (Español)</label>
786
+ <textarea id="missedCallResponseEs" rows="2" class="w-full px-3 py-2 rounded-lg border border-gray-300">Hola, es el lavado móvil de Jay. Perdimos su llamada. Por favor deje un mensaje y le devolveremos la llamada lo antes posible.</textarea>
787
+ </div>
788
+
789
+ <div>
790
+ <label class="block text-sm mb-1">After Hours Response (English)</label>
791
+ <textarea id="afterHoursResponse" rows="2" class="w-full px-3 py-2 rounded-lg border border-gray-300">Thank you for contacting Jay's Mobile Wash. Our business hours are [hours]. We will respond when we reopen.</textarea>
792
+ </div>
793
+ <div>
794
+ <label class="block text-sm mb-1">Respuesta Fuera Horario (Español)</label>
795
+ <textarea id="afterHoursResponseEs" rows="2" class="w-full px-3 py-2 rounded-lg border border-gray-300">Gracias por contactar el lavado móvil de Jay. Nuestro horario es de [hours]. Responderemos cuando volvamos a abrir.</textarea>
796
+ </div>
797
+ </div>
798
+
799
+ <button onclick="saveSettings()" class="mt-6 w-full bg-green-500 text-white py-2 rounded-lg font-medium">Save Settings</button>
800
+ </div>
801
+ </div>
802
+ </div>
803
+
804
+ <!-- Floating Action Button -->
805
+ <div class="fab" onclick="answerCall()">
806
+ <i class="fas fa-phone"></i>
807
+ </div>
808
+ </div>
809
+
810
+ <script>
811
+ // Grok-Style AI Training Data
812
+ let trainingData = {
813
+ responses: [],
814
+ trainedPatterns: {},
815
+ dictionProfiles: {},
816
+ learningRates: {},
817
+ contextMemory: {},
818
+ customResponses: {
819
+ business: '"Hello, this is [Your Name]\'s assistant. How can I help you today?"',
820
+ personal: '"Hi, this is [Name] calling. How can I help you?"',
821
+ spam: '"Sorry, this number is not accepting unsolicited calls at this time."',
822
+ urgent: '"This is urgent, please connect me immediately"'
823
+ },
824
+ // Grok-specific additions
825
+ humorProfiles: {},
826
+ sarcasmDetection: {},
827
+ emotionalContext: {},
828
+ savedTemplates: []
829
+ };
830
+
831
+ // Enhanced training function storage
832
+ function storeTrainingPattern(pattern, response) {
833
+ trainingData.trainedPatterns[pattern.toLowerCase()] = response;
834
+ localStorage.setItem('AI_Training', JSON.stringify(trainingData));
835
+ }
836
+
837
+ // Screen navigation
838
+ function showScreen(screenId) {
839
+ document.querySelectorAll('.screen').forEach(screen => {
840
+ screen.classList.remove('active');
841
+ });
842
+ document.getElementById(screenId).classList.add('active');
843
+
844
+ // Update tab bar active state
845
+ const tabs = document.querySelectorAll('.fixed.bottom-0 button');
846
+ tabs.forEach(tab => {
847
+ tab.classList.remove('text-accent');
848
+ tab.classList.add('text-gray-500');
849
+ });
850
+
851
+ // Highlight active tab
852
+ const activeTab = Array.from(tabs).find(tab => {
853
+ return tab.getAttribute('onclick').includes(screenId);
854
+ });
855
+ if (activeTab) {
856
+ activeTab.classList.remove('text-gray-500');
857
+ activeTab.classList.add('text-accent');
858
+ }
859
+ }
860
+
861
+ // Simulate AI learning progress
862
+ function simulateAIProgress() {
863
+ const progressBars = document.querySelectorAll('.progress');
864
+ progressBars.forEach(bar => {
865
+ const width = 70 + Math.floor(Math.random() * 30);
866
+ bar.style.width = `${width}%`;
867
+ });
868
+ }
869
+
870
+ // Toggle call recording function
871
+ function toggleRecording() {
872
+ const fab = document.querySelector('.fab');
873
+ const icon = fab.querySelector('i');
874
+
875
+ if (icon.classList.contains('fa-microphone')) {
876
+ icon.classList.remove('fa-microphone');
877
+ icon.classList.add('fa-stop');
878
+ fab.style.background = 'linear-gradient(135deg, #ff375f, #ff2d55)';
879
+
880
+ // Show a notification
881
+ const notification = document.createElement('div');
882
+ notification.innerHTML = `
883
+ <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">
884
+ Recording started
885
+ </div>
886
+ `;
887
+ document.body.appendChild(notification);
888
+ setTimeout(() => {
889
+ notification.remove();
890
+ }, 2000);
891
+ } else {
892
+ icon.classList.remove('fa-stop');
893
+ icon.classList.add('fa-microphone');
894
+ fab.style.background = 'linear-gradient(135deg, #0a84ff, #5e5ce6)';
895
+
896
+ // Simulate AI learning after recording
897
+ simulateAIProgress();
898
+ }
899
+ }
900
+
901
+ // Answer call function
902
+ function answerCall(isTest = false) {
903
+ const fab = document.querySelector('.fab');
904
+ const icon = fab.querySelector('i');
905
+
906
+ if (icon.classList.contains('fa-phone')) {
907
+ icon.classList.remove('fa-phone');
908
+ icon.classList.add('fa-stop');
909
+ fab.style.background = 'linear-gradient(135deg, #32d74b, #30d158)';
910
+
911
+ // Show call is ringing
912
+ showResponseMessage(`Call ringing (will answer in ${businessSettings.maxRingTime} seconds if no reply)...`);
913
+
914
+ // Set timeout to answer call after maxRingTime
915
+ setTimeout(() => {
916
+ if (icon.classList.contains('fa-stop')) { // If still not answered
917
+ // Create a new call card
918
+ const homeScreen = document.getElementById('homeScreen');
919
+ const callCard = document.createElement('div');
920
+ callCard.className = 'bg-white dark:bg-gray-800 rounded-2xl p-4 mt-4 animate-fadeIn';
921
+
922
+ const caller = isTest ? 'Test Caller' : 'Unknown (New number)';
923
+ callCard.innerHTML = `
924
+ <div class="flex items-center justify-between">
925
+ <div>
926
+ <h3 class="font-medium">AI answered call</h3>
927
+ <p class="text-sm text-gray-500 dark:text-gray-400">From: ${caller}</p>
928
+ </div>
929
+ <div class="text-green-500">
930
+ <i class="fas fa-check-circle text-xl"></i>
931
+ </div>
932
+ </div>
933
+ <div class="mt-3 text-sm">
934
+ <p>AI answered after ${businessSettings.maxRingTime} seconds</p>
935
+ </div>
936
+ `;
937
+ homeScreen.insertBefore(callCard, homeScreen.children[3]);
938
+
939
+ showResponseMessage(businessSettings.personalGreeting ||
940
+ (businessSettings.responseLanguage === 'es' ?
941
+ "Hola, habla el asistente de Jay's Mobile Wash" :
942
+ "Hello, this is Jay's Mobile Wash assistant"));
943
+ }
944
+ }, businessSettings.maxRingTime * 1000);
945
+
946
+ } else {
947
+ // End call
948
+ icon.classList.remove('fa-stop');
949
+ icon.classList.add('fa-phone');
950
+ fab.style.background = 'linear-gradient(135deg, #0a84ff, #5e5ce6)';
951
+ }
952
+ }
953
+
954
+ function handleSMS(message, sender, isiMessage) {
955
+ const responseLanguage = businessSettings.responseLanguage;
956
+ const greeting = businessSettings.personalGreeting;
957
+
958
+ // Set timeout for auto-response
959
+ setTimeout(() => {
960
+ if (!message.includes('RE:')) { // If no reply was sent
961
+ const response = greeting ||
962
+ (responseLanguage === 'es' ?
963
+ "Gracias por su mensaje. ¿En qué puedo ayudarle hoy?" :
964
+ "Thanks for your message. How can I help you today?");
965
+
966
+ showResponseMessage(`Auto-reply sent after ${businessSettings.smsResponseTime} mins: ${response}`);
967
+ }
968
+ }, businessSettings.smsResponseTime * 60 * 1000);
969
+
970
+ return handleSMSResponse(message, sender, isiMessage);
971
+ }
972
+
973
+ // Enhanced training functions
974
+ function saveTraining() {
975
+ localStorage.setItem('AI_Training', JSON.stringify(trainingData));
976
+
977
+ // Show persistent notification
978
+ const notification = document.createElement('div');
979
+ 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';
980
+ notification.innerHTML = `
981
+ <div class="flex items-center">
982
+ <i class="fas fa-check-circle mr-2"></i>
983
+ <span>AI training saved! New responses will be active immediately.</span>
984
+ </div>
985
+ `;
986
+ document.body.appendChild(notification);
987
+
988
+ setTimeout(() => {
989
+ notification.remove();
990
+ showScreen('homeScreen');
991
+ }, 3000);
992
+
993
+ // Update home screen with new training count
994
+ const statsElement = document.querySelector('#homeScreen .w-10.h-10 + div p');
995
+ statsElement.textContent = `Trained on ${Object.keys(trainingData.trainedPatterns).length} patterns`;
996
+ }
997
+
998
+ // Add animation to elements when they appear
999
+ function addAppearAnimations() {
1000
+ document.querySelectorAll('.animate-fadeIn').forEach((el, index) => {
1001
+ el.style.animationDelay = `${index * 0.1}s`;
1002
+ });
1003
+ }
1004
+
1005
+ // Smart Training Functions
1006
+ function submitTraining() {
1007
+ const input = document.getElementById('trainingInput');
1008
+ if (input.value.trim() !== '') {
1009
+ trainingData.responses.push(input.value);
1010
+
1011
+ // Add the user's message to the chat
1012
+ const chatContainer = document.querySelector('#trainingScreen .flex-1.overflow-y-auto');
1013
+ const userBubble = document.createElement('div');
1014
+ userBubble.className = 'user-bubble mt-4 animate-fadeIn';
1015
+ userBubble.innerHTML = `<p>${input.value}</p>`;
1016
+ chatContainer.appendChild(userBubble);
1017
+
1018
+ // Process training input with smart logic
1019
+ const processed = processTrainingInput(input.value);
1020
+
1021
+ // Generate and add AI response
1022
+ setTimeout(() => {
1023
+ const aiBubble = document.createElement('div');
1024
+ aiBubble.className = 'ai-bubble mt-4 animate-fadeIn';
1025
+
1026
+ if (processed.success) {
1027
+ aiBubble.innerHTML = `
1028
+ <p>Understood! I'll handle calls that way now.</p>
1029
+ <div class="mt-2 bg-green-50 dark:bg-green-900 rounded-lg p-3">
1030
+ <h4 class="font-medium">New Response Pattern:</h4>
1031
+ <p class="mt-1"><strong>When caller says:</strong> ${processed.triggerPhrases.join(' OR ')}</p>
1032
+ <p class="mt-1"><strong>I will:</strong> ${processed.response}</p>
1033
+ </div>
1034
+ <p class="mt-2">Would you like to review any other scenarios?</p>
1035
+ `;
1036
+ storeTrainingPattern(processed.triggerPhrases[0], processed.response);
1037
+ } else {
1038
+ aiBubble.innerHTML = `
1039
+ <p>I think you want me to handle calls differently when:</p>
1040
+ <div class="mt-2 bg-blue-50 dark:bg-blue-900 rounded-lg p-3">
1041
+ <p>${processed.response}</p>
1042
+ </div>
1043
+ <p class="mt-2">Can you confirm or clarify how you'd like me to respond?</p>
1044
+ `;
1045
+ }
1046
+
1047
+ chatContainer.appendChild(aiBubble);
1048
+ chatContainer.scrollTop = chatContainer.scrollHeight;
1049
+ }, 800);
1050
+
1051
+ input.value = '';
1052
+ }
1053
+ }
1054
+
1055
+ function handleTrainingKeyPress(e) {
1056
+ if (e.key === 'Enter') {
1057
+ submitTraining();
1058
+ }
1059
+ }
1060
+
1061
+ // Grok-Style Learning Processor
1062
+ function processTrainingInput(inputText) {
1063
+ // First analyze diction and emotional context
1064
+ analyzeDiction(inputText);
1065
+
1066
+ // Grok-style pattern matching with contextual learning
1067
+ const context = getCurrentContext();
1068
+ const patterns = [
1069
+ // Direct instructions
1070
+ /(when|if) (.+?) (then|do|respond with) (.+)/i,
1071
+ // Examples
1072
+ /(for|when) (\w+) calls?,? (say|respond) "(.+?)"/i,
1073
+ // Behavioral patterns
1074
+ /(treat|handle) (.+?) (as|like) (\w+)/i,
1075
+ // Tone adjustments
1076
+ /(make|be) (more|less) (\w+) (when|for) (\w+)/i
1077
+ ];
1078
+
1079
+ for (const pattern of patterns) {
1080
+ const match = inputText.match(pattern);
1081
+ if (match) {
1082
+ const [, triggerType, trigger, action, response] = match;
1083
+ storeBehaviorPattern(trigger, response, context);
1084
+
1085
+ return {
1086
+ success: true,
1087
+ triggerPhrases: [trigger],
1088
+ response: enhanceResponse(response, context),
1089
+ context: context
1090
+ };
1091
+ }
1092
+ }
1093
+
1094
+ // Fallback to Grok's adaptive learning
1095
+ return adaptiveLearning(inputText);
1096
+ }
1097
+
1098
+ // Grok-style diction analysis
1099
+ function analyzeDiction(text) {
1100
+ const words = text.toLowerCase().split(/\s+/);
1101
+ const contractions = text.match(/\w+'?\w*/g) || [];
1102
+
1103
+ // Update diction profile
1104
+ if (!trainingData.dictionProfiles.user) {
1105
+ trainingData.dictionProfiles.user = {
1106
+ wordUsage: {},
1107
+ contractionRate: 0,
1108
+ formalityScore: 0,
1109
+ complexityScore: 0
1110
+ };
1111
+ }
1112
+
1113
+ contractions.forEach(word => {
1114
+ if (word.includes("'")) {
1115
+ trainingData.dictionProfiles.user.contractionRate++;
1116
+ }
1117
+ });
1118
+
1119
+ // Word usage stats
1120
+ words.forEach(word => {
1121
+ trainingData.dictionProfiles.user.wordUsage[word] =
1122
+ (trainingData.dictionProfiles.user.wordUsage[word] || 0) + 1;
1123
+ });
1124
+
1125
+ // Save updated profile
1126
+ localStorage.setItem('AI_DictionProfile', JSON.stringify(trainingData.dictionProfiles));
1127
+ }
1128
+
1129
+ function interpretTrainingIntent(text) {
1130
+ const lower = text.toLowerCase();
1131
+
1132
+ if (lower.includes('family') || lower.includes('mom') || lower.includes('dad')) {
1133
+ return trainingData.customResponses.personal;
1134
+ }
1135
+ else if (lower.includes('work') || lower.includes('business') || lower.includes('colleague')) {
1136
+ return trainingData.customResponses.business;
1137
+ }
1138
+ else if (lower.includes('appointment') || lower.includes('schedule')) {
1139
+ return trainingData.customResponses.appointments;
1140
+ }
1141
+ else if (lower.includes('urgent') || lower.includes('emergency')) {
1142
+ return trainingData.customResponses.urgent;
1143
+ }
1144
+ else if (lower.includes('callback') || lower.includes('call back')) {
1145
+ return trainingData.customResponses.callbacks;
1146
+ }
1147
+ else if (lower.includes('spam') || lower.includes('scam') || lower.includes('block')) {
1148
+ return trainingData.customResponses.spam;
1149
+ }
1150
+ else {
1151
+ return detectNewPattern(text);
1152
+ }
1153
+ }
1154
+
1155
+ function detectNewPattern(text) {
1156
+ // Use simple NLP to extract key phrases
1157
+ const keywords = text.match(/\b(\w{4,})\b/g) || [];
1158
+ const commands = ['transfer', 'ask', 'tell', 'say', 'respond', 'record'];
1159
+
1160
+ const action = commands.find(cmd => text.toLowerCase().includes(cmd)) || 'handle';
1161
+ const context = keywords.filter(w =>
1162
+ !commands.includes(w.toLowerCase()) &&
1163
+ w.length > 3
1164
+ ).join(', ');
1165
+
1166
+ return `When call relates to ${context || "this situation"}, I will ${action} accordingly.`;
1167
+ }
1168
+
1169
+ // Initialize when page loads
1170
+ document.addEventListener('DOMContentLoaded', () => {
1171
+ loadSettings();
1172
+ // Load saved training data
1173
+ const savedData = localStorage.getItem('AI_Training');
1174
+ if (savedData) {
1175
+ trainingData = JSON.parse(savedData);
1176
+ }
1177
+
1178
+ document.getElementById('saveTraining').addEventListener('click', saveTraining);
1179
+ addAppearAnimations();
1180
+ simulateAIProgress();
1181
+
1182
+ // Enhanced screen initialization
1183
+ document.querySelectorAll('[onclick^="showScreen"]').forEach(btn => {
1184
+ btn.addEventListener('click', function() {
1185
+ const screenName = this.getAttribute('onclick').match(/'(.*?)'/)[1];
1186
+ setTimeout(() => {
1187
+ if (screenName === 'trainingScreen') {
1188
+ document.getElementById('trainingInput').focus();
1189
+ populateTrainingHistory();
1190
+ }
1191
+ }, 300);
1192
+ });
1193
+ });
1194
+ });
1195
+
1196
+ // Mobile detailing knowledge base
1197
+ const detailingKnowledge = {
1198
+ website: "https://www.jaysmobilewash.com",
1199
+ pricing: {
1200
+ basic: { car: 60, suv: 70 },
1201
+ luxury: { car: 130, suv: 140 },
1202
+ max: { car: 200, suv: 210 }
1203
+ },
1204
+ packages: {
1205
+ basic: "2-Step Hand Wash, Tornador Blast, Rim Cleaning, Interior Wipe-Down",
1206
+ luxury: "Basic + Ceramic Wax, Dust Repellent, Vinyl Restoration",
1207
+ max: "Luxury + Graphene Wax, Steam Sanitization, Leather Conditioning"
1208
+ },
1209
+ features: [
1210
+ "Eco-Friendly Self-Sufficient Service",
1211
+ "Deionized Spot-Free Water",
1212
+ "Tornador Z-007 Compressed Air Cleaning",
1213
+ "Customizable Packages"
1214
+ ]
1215
+ };
1216
+
1217
+ function handleChatKeyPress(e) {
1218
+ if (e.key === 'Enter') {
1219
+ submitChatMessage();
1220
+ }
1221
+ }
1222
+
1223
+ function submitChatMessage() {
1224
+ const input = document.getElementById('chatInput');
1225
+ if (input.value.trim() !== '') {
1226
+ // Add user message
1227
+ const chatContainer = document.getElementById('chatMessages');
1228
+ const userBubble = document.createElement('div');
1229
+ userBubble.className = 'user-bubble mt-4 animate-fadeIn';
1230
+ userBubble.innerHTML = `<p>${input.value}</p>`;
1231
+ chatContainer.appendChild(userBubble);
1232
+
1233
+ // Process and generate AI response
1234
+ setTimeout(() => {
1235
+ const aiResponse = generateAIResponse(input.value);
1236
+ const aiBubble = document.createElement('div');
1237
+ aiBubble.className = 'ai-bubble mt-4 animate-fadeIn';
1238
+ aiBubble.innerHTML = `<p>${aiResponse}</p>`;
1239
+ chatContainer.appendChild(aiBubble);
1240
+ chatContainer.scrollTop = chatContainer.scrollHeight;
1241
+
1242
+ // Learn from the interaction
1243
+ learnFromChat(input.value, aiResponse);
1244
+ }, 500);
1245
+
1246
+ input.value = '';
1247
+ }
1248
+ }
1249
+
1250
+ function generateAIResponse(message) {
1251
+ const lowerMsg = message.toLowerCase();
1252
+
1253
+ // Check for pricing questions
1254
+ if (lowerMsg.includes('price') || lowerMsg.includes('cost') || lowerMsg.includes('how much')) {
1255
+ if (lowerMsg.includes('basic')) {
1256
+ return `Our Basic package is ${detailingKnowledge.pricing.basic.car} for cars and ${detailingKnowledge.pricing.basic.suv} for SUVs. It includes: ${detailingKnowledge.packages.basic}`;
1257
+ } else if (lowerMsg.includes('luxury')) {
1258
+ return `Our Luxury package is ${detailingKnowledge.pricing.luxury.car} for cars and ${detailingKnowledge.pricing.luxury.suv} for SUVs. Includes: ${detailingKnowledge.packages.luxury}`;
1259
+ } else if (lowerMsg.includes('max')) {
1260
+ return `Our Max package is ${detailingKnowledge.pricing.max.car} for cars and ${detailingKnowledge.pricing.max.suv} for SUVs. Everything in: ${detailingKnowledge.packages.max}`;
1261
+ }
1262
+ return `We offer three main packages:\nBasic: ${detailingKnowledge.pricing.basic.car}-${detailingKnowledge.pricing.basic.suv}\nLuxury: ${detailingKnowledge.pricing.luxury.car}-${detailingKnowledge.pricing.luxury.suv}\nMax: ${detailingKnowledge.pricing.max.car}-${detailingKnowledge.pricing.max.suv}`;
1263
+ }
1264
+
1265
+ // Check for service questions
1266
+ if (lowerMsg.includes('service') || lowerMsg.includes('include') || lowerMsg.includes('wash')) {
1267
+ return `Our services include:\n- ${detailingKnowledge.features.join('\n- ')}\n\nWould you like details on a specific package?`;
1268
+ }
1269
+
1270
+ // Check for appointment scheduling
1271
+ if (lowerMsg.includes('book') || lowerMsg.includes('schedule') || lowerMsg.includes('appointment')) {
1272
+ return `To schedule an appointment, please call or text us at (562) 228-9429 with your preferred date, time, and package selection.`;
1273
+ }
1274
+
1275
+ // Check for website questions
1276
+ if (lowerMsg.includes('website') || lowerMsg.includes('online')) {
1277
+ return `You can find more information on our website: ${detailingKnowledge.website}`;
1278
+ }
1279
+
1280
+ // Default response if no matches
1281
+ return `I'm still learning about Jay's Mobile Wash. Could you clarify your question or teach me the correct response? For example:\n- "For basic washes, say 'Our Basic package starts at $60'"\n\nYou can also visit our website: ${detailingKnowledge.website}`;
1282
+ }
1283
+
1284
+ function learnFromChat(message, response) {
1285
+ // Save new knowledge
1286
+ if (!trainingData.detailingKnowledge) {
1287
+ trainingData.detailingKnowledge = [];
1288
+ }
1289
+
1290
+ trainingData.detailingKnowledge.push({
1291
+ question: message,
1292
+ answer: response,
1293
+ timestamp: new Date().toISOString()
1294
+ });
1295
+
1296
+ localStorage.setItem('AI_Training', JSON.stringify(trainingData));
1297
+ }
1298
+
1299
+ function populateTrainingHistory() {
1300
+ const chatContainer = document.querySelector('#trainingScreen .flex-1.overflow-y-auto');
1301
+ chatContainer.innerHTML = '';
1302
+
1303
+ if (trainingData.responses.length === 0) {
1304
+ const welcomeBubble = document.createElement('div');
1305
+ welcomeBubble.className = 'ai-bubble animate-fadeIn';
1306
+ welcomeBubble.innerHTML = `
1307
+ <p>Hi! I'm your call assistant. Teach me how to handle calls by:</p>
1308
+ <ol class="list-decimal pl-5 mt-2 space-y-1">
1309
+ <li>Setting response templates</li>
1310
+ <li>Training me on specific call types</li>
1311
+ <li>Testing responses in real calls</li>
1312
+ </ol>
1313
+ <p class="mt-2">Try saying something like: "If caller says 'urgent', mark as important"</p>
1314
+ `;
1315
+ chatContainer.appendChild(welcomeBubble);
1316
+ } else {
1317
+ trainingData.responses.forEach(item => {
1318
+ const userBubble = document.createElement('div');
1319
+ userBubble.className = 'user-bubble mt-4 animate-fadeIn';
1320
+ userBubble.innerHTML = `<p>${item}</p>`;
1321
+ chatContainer.appendChild(userBubble);
1322
+ });
1323
+ }
1324
+ }
1325
+ </script>
1326
+ <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/jaysx" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1327
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Please fix the settingss tab it doesn’t work. I want to be able to set duration times . For example if I don’t answer a test after a certain amount of minutes or if I don’t answer a call after a certain amount of time then the ai answers the call or responds via text