Hugging Face's logo

Spaces:
jjmandog
/
dd
Running

App Files Community
jjmandog commited on
Commit
6d17ade
·
verified ·
1 Parent(s): 44f2094

Recode the ui. There’s random text and I want everything organized to where I click on the button and it takes me to where I want to go - Initial Deployment

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