Hugging Face's logo

Spaces:
jjmandog
/
weiw
Running

App Files Community
jjmandog commited on
Commit
0aca967
·
verified ·
1 Parent(s): ccba676

undefined - Initial Deployment

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