Hugging Face's logo

Spaces:
jjmandog
/
try
Running

App Files Community
jjmandog commited on
Commit
00b61c3
·
verified ·
1 Parent(s): 142c5c8

undefined - Initial Deployment

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +1519 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Try
3
- emoji: 📈
4
- colorFrom: purple
5
- colorTo: gray
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: try
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: yellow
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,1519 @@
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
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>AI Call Manager</title>
7
+ <script src="https://cdn.tailwindcss.com/3.4.0"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
9
+ <script src="https://sdk.vercel.app/external_api.js"></script> <!-- updated Jitsi URL -->
10
+ <script src="https://cdn.apple-mapkit.com/mk/5.x/mapkit.js"></script>
11
+ <!-- Added Pusher for real-time chat -->
12
+ <script src="https://js.pusher.com/8.2.0/pusher.min.js"></script>
13
+ <style>
14
+ @keyframes pulse-ring {
15
+ 0% { transform: scale(0.33); }
16
+ 80%, 100% { opacity: 0; }
17
+ }
18
+ @keyframes pulse-dot {
19
+ 0% { transform: scale(0.8); }
20
+ 50% { transform: scale(1); }
21
+ 100% { transform: scale(0.8); }
22
+ }
23
+ /* Custom scrollbar */
24
+ .custom-scrollbar::-webkit-scrollbar {
25
+ width: 6px;
26
+ }
27
+ .custom-scrollbar::-webkit-scrollbar-track {
28
+ background: rgba(156, 163, 175, 0.1);
29
+ }
30
+ .custom-scrollbar::-webkit-scrollbar-thumb {
31
+ background: rgba(99, 102, 241, 0.5);
32
+ border-radius: 3px;
33
+ }
34
+ /* Call animation */
35
+ .call-animation {
36
+ position: relative;
37
+ width: 50px;
38
+ height: 50px;
39
+ }
40
+ .call-animation:before {
41
+ content: '';
42
+ position: absolute;
43
+ top: 0;
44
+ left: 0;
45
+ width: 100%;
46
+ height: 100%;
47
+ background-color: rgba(16, 185, 129, 0.5);
48
+ border-radius: 50%;
49
+ animation: pulse-ring 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
50
+ }
51
+ .call-animation:after {
52
+ content: '';
53
+ position: absolute;
54
+ top: 0;
55
+ left: 0;
56
+ width: 100%;
57
+ height: 100%;
58
+ background-color: #10B981;
59
+ border-radius: 50%;
60
+ transform: scale(0.8);
61
+ animation: pulse-dot 1.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite;
62
+ }
63
+ </style>
64
+ </head>
65
+ <body class="bg-gray-100 min-h-screen font-sans">
66
+ <div class="container mx-auto px-4 py-8 max-w-md">
67
+ <!-- Header -->
68
+ <header class="flex justify-between items-center mb-8">
69
+ <h1 class="text-2xl font-bold text-indigo-700">AI Call Manager</h1>
70
+ <div class="flex space-x-2">
71
+ <button id="checkSystemBtn" class="p-2 rounded-full bg-green-100 hover:bg-green-200 transition" title="Check System Status">
72
+ <i class="fas fa-check-circle text-green-600"></i>
73
+ </button>
74
+ <button id="setupHelpBtn" class="p-2 rounded-full bg-blue-100 hover:bg-blue-200 transition" title="Setup Instructions">
75
+ <i class="fas fa-question text-blue-600"></i>
76
+ </button>
77
+ <button id="settingsBtn" class="p-2 rounded-full bg-gray-200 hover:bg-gray-300 transition">
78
+ <i class="fas fa-cog text-gray-600"></i>
79
+ </button>
80
+ <button id="systemTestBtn" class="p-2 rounded-full bg-orange-100 hover:bg-orange-200 transition" title="Test System">
81
+ <i class="fas fa-vial text-orange-600"></i>
82
+ </button>
83
+ </div>
84
+ </header>
85
+
86
+ <!-- Main Dashboard -->
87
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden mb-6">
88
+ <div class="p-6">
89
+ <div class="flex items-center mb-6">
90
+ <div class="call-animation mr-4"></div>
91
+ <div>
92
+ <h2 class="text-lg font-semibold text-gray-800">Call Management</h2>
93
+ <p class="text-sm text-gray-500">Active for: <span class="font-medium phone-number-display">(562) 228-9429</span></p>
94
+ </div>
95
+ </div>
96
+
97
+ <!-- Call Management Section -->
98
+ <div class="space-y-4">
99
+ <div>
100
+ <label class="block text-sm font-medium text-gray-700 mb-1">Answer Calls After</label>
101
+ <select id="callDelay" class="w-full py-2 px-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
102
+ <option value="15">15 seconds</option>
103
+ <option value="30" selected>30 seconds</option>
104
+ <option value="45">45 seconds</option>
105
+ <option value="60">1 minute</option>
106
+ </select>
107
+ </div>
108
+
109
+ <div>
110
+ <label class="flex items-center space-x-3">
111
+ <input type="checkbox" id="enableCallAI" class="rounded h-5 w-5 text-indigo-600 focus:ring-indigo-500" checked>
112
+ <span class="text-sm font-medium text-gray-700">Enable Call AI Assistant</span>
113
+ </label>
114
+ <p class="mt-1 text-xs text-gray-500">AI will answer calls when you're unavailable</p>
115
+ </div>
116
+
117
+ <div id="callSettings" class="pl-8">
118
+ <div class="mt-3">
119
+ <label class="block text-sm font-medium text-gray-700 mb-1">AI Voice</label>
120
+ <select class="w-full py-2 px-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
121
+ <option>American Female (Emma)</option>
122
+ <option>American Male (Brian)</option>
123
+ <option>British Female (Amy)</option>
124
+ </select>
125
+ </div>
126
+
127
+ <div class="mt-3">
128
+ <label class="block text-sm font-medium text-gray-700 mb-1">Default Message</label>
129
+ <textarea id="callGreeting" rows="2" class="w-full py-2 px-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="Hello, I'm unable to take your call right now. Please leave a message or send a text and I'll get back to you soon."></textarea>
130
+ </div>
131
+ </div>
132
+ </div>
133
+ </div>
134
+ </div>
135
+
136
+ <!-- Make a Call Section -->
137
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden mb-6">
138
+ <div class="p-6">
139
+ <div class="flex items-center mb-6">
140
+ <div class="w-12 h-12 flex items-center justify-center bg-blue-100 rounded-full mr-4">
141
+ <i class="fas fa-phone text-blue-600 text-xl"></i>
142
+ </div>
143
+ <div>
144
+ <h2 class="text-lg font-semibold text-gray-800">Make a Call</h2>
145
+ <p class="text-sm text-gray-500">Train AI with interactive calls</p>
146
+ </div>
147
+ </div>
148
+
149
+ <div class="space-y-4">
150
+ <div>
151
+ <label class="block text-sm font-medium text-gray-700 mb-1">Phone Number to Call</label>
152
+ <input type="tel" id="callNumber" class="w-full py-2 px-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="e.g. (562) 228-9429" value="15622289429">
153
+ </div>
154
+
155
+ <div>
156
+ <label class="block text-sm font-medium text-gray-700 mb-1">Call Purpose</label>
157
+ <select id="callPurpose" class="w-full py-2 px-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
158
+ <option value="training">AI Training Session</option>
159
+ <option value="outgoing">Regular Outgoing Call</option>
160
+ </select>
161
+ </div>
162
+
163
+ <div id="trainingOptions" class="pl-4 space-y-3 hidden">
164
+ <label class="flex items-center space-x-3">
165
+ <input type="checkbox" id="enableCallTraining" class="rounded h-4 w-4 text-blue-600 focus:ring-blue-500" checked>
166
+ <span class="text-sm font-medium text-gray-700">Enable Interactive Training</span>
167
+ </label>
168
+ <div>
169
+ <label class="block text-sm font-medium text-gray-700 mb-1">Training Mode</label>
170
+ <select id="callTrainingMode" class="w-full py-2 px-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
171
+ <option value="qa">Q&A Training</option>
172
+ <option value="conversation">Conversation Practice</option>
173
+ <option value="scenario">Scenario Simulation</option>
174
+ </select>
175
+ </div>
176
+ </div>
177
+
178
+ <button id="startCallBtn" class="w-full py-3 px-4 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition flex items-center justify-center space-x-2">
179
+ <i class="fas fa-phone"></i>
180
+ <span>Start Call</span>
181
+ </button>
182
+ </div>
183
+ </div>
184
+ </div>
185
+
186
+ <!-- Text AI Section -->
187
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden mb-6">
188
+ <div class="p-6">
189
+ <div class="flex items-center mb-6">
190
+ <div class="w-12 h-12 flex items-center justify-center bg-purple-100 rounded-full mr-4">
191
+ <i class="fas fa-comment-alt text-purple-600 text-xl"></i>
192
+ </div>
193
+ <div>
194
+ <h2 class="text-lg font-semibold text-gray-800">Text AI Assistant</h2>
195
+ <p class="text-sm text-gray-500">Smart responses & automated replies</p>
196
+ </div>
197
+ </div>
198
+
199
+ <div class="space-y-4">
200
+ <div>
201
+ <label class="flex items-center space-x-3">
202
+ <input type="checkbox" id="enableTextAI" class="rounded h-5 w-5 text-purple-600 focus:ring-purple-500" checked>
203
+ <span class="text-sm font-medium text-gray-700">Enable Text AI Assistant</span>
204
+ </label>
205
+ <p class="mt-1 text-xs text-gray-500">AI will respond to unanswered texts automatically</p>
206
+ </div>
207
+
208
+ <div id="textSettings" class="pl-8 space-y-4">
209
+ <div>
210
+ <label class="block text-sm font-medium text-gray-700 mb-1">Response Style</label>
211
+ <select id="responseStyle" class="w-full py-2 px-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500">
212
+ <option value="professional">Professional</option>
213
+ <option value="friendly" selected>Friendly</option>
214
+ <option value="concise">Concise</option>
215
+ </select>
216
+ </div>
217
+
218
+ <div>
219
+ <label class="block text-sm font-medium text-gray-700 mb-1">Auto-response Delay</label>
220
+ <select id="textDelay" class="w-full py-2 px-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500">
221
+ <option value="1">1 hour</option>
222
+ <option value="2" selected>2 hours</option>
223
+ <option value="4">4 hours</option>
224
+ <option value="6">6 hours</option>
225
+ <option value="12">12 hours</option>
226
+ </select>
227
+ </div>
228
+
229
+ <div class="pt-2">
230
+ <button id="trainAIbtn" class="w-full py-2 px-4 bg-purple-600 hover:bg-purple-700 text-white rounded-lg transition flex items-center justify-center space-x-2">
231
+ <i class="fas fa-brain"></i>
232
+ <span>Train Text AI</span>
233
+ </button>
234
+ </div>
235
+ </div>
236
+ </div>
237
+ </div>
238
+ </div>
239
+
240
+ <!-- Stats Section -->
241
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden mb-6">
242
+ <div class="p-6">
243
+ <h2 class="text-lg font-semibold text-gray-800 mb-4">Usage Statistics</h2>
244
+ <div class="grid grid-cols-2 gap-4">
245
+ <div class="bg-indigo-50 p-3 rounded-lg">
246
+ <p class="text-xs text-indigo-600 font-medium">Calls Managed</p>
247
+ <p class="text-2xl font-bold text-indigo-700" id="callStatsCount">128</p>
248
+ </div>
249
+ <div class="bg-purple-50 p-3 rounded-lg">
250
+ <p class="text-xs text-purple-600 font-medium">Texts Responded</p>
251
+ <p class="text-2xl font-bold text-purple-700" id="textStatsCount">342</p>
252
+ </div>
253
+ <div class="bg-green-50 p-3 rounded-lg">
254
+ <p class="text-xs text-green-600 font-medium">AI Confidence</p>
255
+ <p class="text-2xl font-bold text-green-700">89%</p>
256
+ </div>
257
+ <div class="bg-yellow-50 p-3 rounded-lg">
258
+ <p class="text-xs text-yellow-600 font-medium">Training Cycles</p>
259
+ <p class="text-2xl font-bold text-yellow-700">24</p>
260
+ </div>
261
+ </div>
262
+ </div>
263
+ </div>
264
+
265
+ <!-- Call Log Preview -->
266
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden">
267
+ <div class="p-6">
268
+ <div class="flex justify-between items-center mb-4">
269
+ <h2 class="text-lg font-semibold text-gray-800">Recent Activity</h2>
270
+ <button class="text-xs text-indigo-600 hover:text-indigo-800">View All</button>
271
+ </div>
272
+ <div class="space-y-3 max-h-60 overflow-y-auto custom-scrollbar">
273
+ <div class="flex items-start py-2 border-b border-gray-100">
274
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-red-100 flex items-center justify-center mr-3">
275
+ <i class="fas fa-phone-alt text-red-500"></i>
276
+ </div>
277
+ <div class="flex-1">
278
+ <p class="text-sm font-medium text-gray-800">Missed Call</p>
279
+ <p class="text-xs text-gray-500">From: (562) 555-0134</p>
280
+ <p class="text-xs text-gray-500">14 min ago - AI answered after 30s</p>
281
+ </div>
282
+ </div>
283
+ <div class="flex items-start py-2 border-b border-gray-100">
284
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-green-100 flex items-center justify-center mr-3">
285
+ <i class="fas fa-sms text-green-500"></i>
286
+ </div>
287
+ <div class="flex-1">
288
+ <p class="text-sm font-medium text-gray-800">Text Response</p>
289
+ <p class="text-xs text-gray-500">To: (562) 555-0198</p>
290
+ <p class="text-xs text-gray-500">1 hour ago - AI confidence: 92%</p>
291
+ </div>
292
+ </div>
293
+ <div class="flex items-start py-2 border-b border-gray-100">
294
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center mr-3">
295
+ <i class="fas fa-phone-alt text-blue-500"></i>
296
+ </div>
297
+ <div class="flex-1">
298
+ <p class="text-sm font-medium text-gray-800">AI Call</p>
299
+ <p class="text-xs text-gray-500">With: (562) 555-0163 (2m 43s)</p>
300
+ <p class="text-xs text-gray-500">3 hours ago - Scheduled follow-up</p>
301
+ </div>
302
+ </div>
303
+ </div>
304
+ </div>
305
+ </div>
306
+ </div>
307
+
308
+ <!-- Container for Jitsi meetings (hidden by default) -->
309
+ <div id="jitsi-container" style="display: none;"></div>
310
+
311
+ <!-- Training Modal -->
312
+ <div id="trainingModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 hidden">
313
+ <div class="bg-white rounded-xl shadow-xl w-full max-w-md max-h-screen overflow-y-auto">
314
+ <div class="p-6">
315
+ <div class="flex justify-between items-center mb-4">
316
+ <h3 class="text-lg font-semibold text-gray-900">Train Your Text AI</h3>
317
+ <button id="closeTraining" class="text-gray-500 hover:text-gray-700">
318
+ <i class="fas fa-times"></i>
319
+ </button>
320
+ </div>
321
+
322
+ <div class="space-y-4">
323
+ <div class="p-4 bg-gray-50 rounded-lg">
324
+ <p class="text-sm text-gray-700 mb-2">AI Knowledge Level: <span class="font-medium">Intermediate</span></p>
325
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
326
+ <div class="bg-purple-600 h-2.5 rounded-full" style="width: 65%"></div>
327
+ </div>
328
+ </div>
329
+
330
+ <div>
331
+ <p class="text-sm font-medium text-gray-700 mb-2">Training Mode</p>
332
+ <div class="grid grid-cols-2 gap-2">
333
+ <button class="trainingModeBtn py-2 px-3 border border-gray-300 rounded-lg text-sm font-medium bg-white hover:bg-gray-50" data-mode="qa">Q&A Training</button>
334
+ <button class="trainingModeBtn py-2 px-3 border border-gray-300 rounded-lg text-sm font-medium bg-white hover:bg-gray-50" data-mode="examples">Teach with Examples</button>
335
+ <button class="trainingModeBtn py-2 px-3 border border-gray-300 rounded-lg text-sm font-medium bg-white hover:bg-gray-50" data-mode="keywords">Keyword Responses</button>
336
+ <button class="trainingModeBtn py-2 px-3 border border-gray-300 rounded-lg text-sm font-medium bg-white hover:bg-gray-50" data-mode="prefs">Style Preferences</button>
337
+ </div>
338
+ </div>
339
+
340
+ <!-- Q&A Training Section -->
341
+ <div id="qaTraining" class="trainingSection hidden">
342
+ <div class="space-y-4">
343
+ <div>
344
+ <label class="block text-sm font-medium text-gray-700 mb-1">Question to Teach</label>
345
+ <input type="text" class="w-full py-2 px-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 text-sm" placeholder="E.g. What are your business hours?">
346
+ </div>
347
+ <div>
348
+ <label class="block text-sm font-medium text-gray-700 mb-1">Preferred Response</label>
349
+ <textarea class="w-full py-2 px-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 text-sm" rows="3" placeholder="Our business hours are Monday to Friday, 9am to 5pm PST."></textarea>
350
+ </div>
351
+ <button class="w-full py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg text-sm">
352
+ Add to AI Knowledge
353
+ </button>
354
+ </div>
355
+ </div>
356
+
357
+ <!-- Examples Training Section -->
358
+ <div id="examplesTraining" class="trainingSection hidden">
359
+ <div class="space-y-4">
360
+ <div>
361
+ <label class="block text-sm font-medium text-gray-700 mb-1">Example Conversation</label>
362
+ <textarea class="w-full py-2 px-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 text-sm" rows="5" placeholder="Client: When can I expect my order to arrive?
363
+ You: Your order will ship within 24 hours and typically arrives in 2-3 business days. We'll send tracking information once it's on the way."></textarea>
364
+ </div>
365
+ <button class="w-full py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg text-sm">
366
+ Analyze for Patterns
367
+ </button>
368
+ </div>
369
+ </div>
370
+
371
+ <!-- Keywords Training Section -->
372
+ <div id="keywordsTraining" class="trainingSection hidden">
373
+ <div class="space-y-4">
374
+ <div>
375
+ <label class="block text-sm font-medium text-gray-700 mb-1">Trigger Word/Phrase</label>
376
+ <input type="text" class="w-full py-2 px-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 text-sm" placeholder="E.g. refund, return policy">
377
+ </div>
378
+ <div>
379
+ <label class="block text-sm font-medium text-gray-700 mb-1">Response for This Keyword</label>
380
+ <textarea class="w-full py-2 px-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 text-sm" rows="3" placeholder="Our return policy allows for returns within 30 days of purchase..."></textarea>
381
+ </div>
382
+ <button class="w-full py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg text-sm">
383
+ Add Keyword Response
384
+ </button>
385
+ </div>
386
+ </div>
387
+
388
+ <!-- Preferences Training Section -->
389
+ <div id="prefsTraining" class="trainingSection hidden">
390
+ <div class="space-y-4">
391
+ <div>
392
+ <label class="block text-sm font-medium text-gray-700 mb-1">Communication Style</label>
393
+ <select class="w-full py-2 px-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 text-sm">
394
+ <option>Professional</option>
395
+ <option selected>Friendly</option>
396
+ <option>Concise</option>
397
+ <option>Detailed</option>
398
+ </select>
399
+ </div>
400
+ <div>
401
+ <label class="block text-sm font-medium text-gray-700 mb-1">Common Phrases You Use</label>
402
+ <textarea class="w-full py-2 px-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 text-sm" rows="3" placeholder="E.g. Thanks for reaching out!, Happy to help!, Let me check that for you..."></textarea>
403
+ </div>
404
+ <button class="w-full py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg text-sm">
405
+ Update Preferences
406
+ </button>
407
+ </div>
408
+ </div>
409
+
410
+ <div class="pt-4 border-t border-gray-200">
411
+ <h4 class="text-sm font-medium text-gray-900 mb-2">AI Test Area</h4>
412
+ <div class="mb-2">
413
+ <input type="text" class="w-full py-2 px-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 text-sm" placeholder="Test message for AI to respond to" id="testMessage">
414
+ </div>
415
+ <button onclick="testAIResponse()" class="w-full py-2 bg-gray-200 hover:bg-gray-300 rounded-lg text-sm mb-4">
416
+ Test AI Response
417
+ </button>
418
+ <div id="aiResponse" class="hidden bg-gray-50 p-3 rounded-lg">
419
+ <p class="text-sm text-gray-800">This is where the AI's response would appear based on its current training.</p>
420
+ </div>
421
+ </div>
422
+ </div>
423
+ </div>
424
+ </div>
425
+ </div>
426
+
427
+ <!-- Settings Modal -->
428
+ <div id="settingsModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 hidden">
429
+ <div class="bg-white rounded-xl shadow-xl w-full max-w-md max-h-screen overflow-y-auto">
430
+ <div class="p-6">
431
+ <div class="flex justify-between items-center mb-4">
432
+ <h3 class="text-lg font-semibold text-gray-900">Settings</h3>
433
+ <button id="closeSettings" class="text-gray-500 hover:text-gray-700">
434
+ <i class="fas fa-times"></i>
435
+ </button>
436
+ </div>
437
+
438
+ <div class="space-y-4">
439
+ <div>
440
+ <label class="block text-sm font-medium text-gray-700 mb-1">Your Phone Number</label>
441
+ <input type="tel" class="w-full py-2 px-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 text-sm" value="(562) 228-9429">
442
+ </div>
443
+
444
+ <div>
445
+ <label class="block text-sm font-medium text-gray-700 mb-1">iMessage Integration</label>
446
+ <div class="mt-1 flex items-center">
447
+ <input type="checkbox" id="enableIMessage" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded" checked>
448
+ <label for="enableIMessage" class="ml-2 block text-sm text-gray-700">Enable iPhone Message Handling</label>
449
+ </div>
450
+ <p class="mt-1 text-xs text-gray-500">Verified number: 15622289429</p>
451
+ </div>
452
+
453
+ <div id="imessageSettings" class="pl-6 space-y-3">
454
+ <div>
455
+ <label class="block text-sm font-medium text-gray-700 mb-1">Backup Phone Number</label>
456
+ <input type="tel" class="w-full py-2 px-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 text-sm" placeholder="Optional">
457
+ </div>
458
+ </div>
459
+
460
+ <div>
461
+ <label class="block text-sm font-medium text-gray-700 mb-1">Memory Retention</label>
462
+ <select class="w-full py-2 px-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 text-sm">
463
+ <option>7 days</option>
464
+ <option>14 days</option>
465
+ <option selected>30 days</option>
466
+ <option>90 days</option>
467
+ <option>Indefinitely</option>
468
+ </select>
469
+ <p class="mt-1 text-xs text-gray-500">How long should AI remember conversation history?</p>
470
+ </div>
471
+
472
+ <div>
473
+ <label class="flex items-center space-x-3">
474
+ <input type="checkbox" checked class="rounded h-4 w-4 text-indigo-600 focus:ring-indigo-500">
475
+ <span class="text-sm font-medium text-gray-700">Daily Training Reminders</span>
476
+ </label>
477
+ </div>
478
+
479
+ <div class="pt-4 border-t border-gray-200">
480
+ <h4 class="text-sm font-medium text-gray-900 mb-2">AI Advanced Settings</h4>
481
+ <div class="mb-2">
482
+ <label class="block text-xs font-medium text-gray-700 mb-1">Creativity Level</label>
483
+ <input type="range" min="0" max="10" value="7" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
484
+ <div class="flex justify-between text-xs text-gray-500 px-1">
485
+ <span>Precise</span>
486
+ <span>Balanced</span>
487
+ <span>Creative</span>
488
+ </div>
489
+ </div>
490
+ </div>
491
+
492
+ <div class="flex space-x-3 pt-4">
493
+ <button class="flex-1 py-2 bg-gray-200 hover:bg-gray-300 rounded-lg text-sm">
494
+ Reset Training
495
+ </button>
496
+ <button class="flex-1 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg text-sm">
497
+ Save Settings
498
+ </button>
499
+ </div>
500
+ </div>
501
+ </div>
502
+ </div>
503
+ </div>
504
+
505
+ <script>
506
+ // Jitsi Client Setup
507
+ let jitsiClient;
508
+ let callSocket;
509
+
510
+ async function initializeJitsiClient() {
511
+ try {
512
+ // Initialize Jitsi Meet API client
513
+ jitsiClient = {
514
+ makeCall: async (options) => {
515
+ return new Promise((resolve) => {
516
+ console.log('Initiating Jitsi call to:', options.to);
517
+ const domain = 'meet.jit.si';
518
+ const options = {
519
+ roomName: `call-${Date.now()}`,
520
+ parentNode: document.querySelector('#jitsi-container'),
521
+ userInfo: {
522
+ displayName: 'AI Call Manager'
523
+ }
524
+ };
525
+
526
+ // Create Jitsi Meet API instance
527
+ const api = new JitsiMeetExternalAPI(domain, options);
528
+
529
+ setTimeout(() => resolve({id: `jitsi-${Date.now()}`, api}), 1000);
530
+ });
531
+ }
532
+ };
533
+
534
+ // Use a simple WebSocket connection (you would replace with your own endpoint)
535
+ callSocket = new WebSocket('wss://realtime.trillion.ventures/ws');
536
+ setTimeout(() => {
537
+ if (callSocket.onopen) callSocket.onopen();
538
+ }, 500);
539
+ callSocket.onopen = () => {
540
+ console.log('Connected to Trillion real-time service');
541
+ callSocket.send(JSON.stringify({
542
+ type: 'authenticate',
543
+ token: authToken
544
+ }));
545
+ };
546
+ callSocket.onmessage = handleSocketMessage;
547
+ callSocket.onclose = () => console.log('Disconnected from real-time service');
548
+
549
+ return true;
550
+ } catch (error) {
551
+ console.error("Failed to initialize Trillion client:", error);
552
+ return false;
553
+ }
554
+ }
555
+
556
+ function handleSocketMessage(event) {
557
+ const data = JSON.parse(event.data);
558
+ switch(data.type) {
559
+ case 'call_update':
560
+ updateCallUI(data.status, data.transcript);
561
+ break;
562
+ case 'message':
563
+ console.log("New message:", data.content);
564
+ break;
565
+ case 'call_ended':
566
+ endCallUI(data.callId);
567
+ break;
568
+ }
569
+ }
570
+
571
+ async function sendSMS(to, message) {
572
+ try {
573
+ const response = await fetch('/api/send-sms', {
574
+ method: 'POST',
575
+ headers: {
576
+ 'Content-Type': 'application/json',
577
+ 'Authorization': `Bearer ${localStorage.getItem('authToken')}`
578
+ },
579
+ body: JSON.stringify({ to, message })
580
+ });
581
+
582
+ if (!response.ok) throw new Error('Failed to send SMS');
583
+ return await response.json();
584
+ } catch (error) {
585
+ console.error('SMS send error:', error);
586
+ throw error;
587
+ }
588
+ }
589
+
590
+ // Save call stats when calls are made/ended
591
+ function updateCallStats() {
592
+ const callStats = parseInt(localStorage.getItem('callStats')) || 128;
593
+ localStorage.setItem('callStats', callStats + 1);
594
+ document.querySelector('#callStatsCount').textContent = callStats + 1;
595
+ }
596
+
597
+ // AI Response Generation
598
+ async function generateAIResponse(message, context = {}) {
599
+ try {
600
+ const response = await fetch('/api/generate-ai-response', {
601
+ method: 'POST',
602
+ headers: {
603
+ 'Content-Type': 'application/json',
604
+ 'Authorization': `Bearer ${localStorage.getItem('authToken')}`
605
+ },
606
+ body: JSON.stringify({
607
+ message,
608
+ style: document.getElementById('responseStyle').value,
609
+ context
610
+ })
611
+ });
612
+
613
+ if (!response.ok) throw new Error('AI response failed');
614
+ return await response.json();
615
+ } catch (error) {
616
+ console.error('AI error:', error);
617
+ return { response: "I'm having trouble generating a response right now. Please try again later." };
618
+ }
619
+ }
620
+
621
+ // Toggle settings visibility
622
+ document.getElementById('enableCallAI').addEventListener('change', function() {
623
+ document.getElementById('callSettings').style.display = this.checked ? 'block' : 'none';
624
+ });
625
+
626
+ document.getElementById('enableTextAI').addEventListener('change', function() {
627
+ document.getElementById('textSettings').style.display = this.checked ? 'block' : 'none';
628
+ });
629
+
630
+ document.getElementById('enableIMessage').addEventListener('change', function() {
631
+ document.getElementById('imessageSettings').style.display = this.checked ? 'block' : 'none';
632
+ if (this.checked) {
633
+ connectIMessage();
634
+ }
635
+ });
636
+
637
+ // Training modal
638
+ const trainingModal = document.getElementById('trainingModal');
639
+ const trainBtn = document.getElementById('trainAIbtn');
640
+ const closeTraining = document.getElementById('closeTraining');
641
+
642
+ trainBtn.addEventListener('click', () => {
643
+ trainingModal.classList.remove('hidden');
644
+ showTrainingSection('qa'); // Default to Q&A section
645
+ });
646
+
647
+ closeTraining.addEventListener('click', () => {
648
+ trainingModal.classList.add('hidden');
649
+ });
650
+
651
+ // Settings modal
652
+ const settingsModal = document.getElementById('settingsModal');
653
+ const settingsBtn = document.getElementById('settingsBtn');
654
+ const closeSettings = document.getElementById('closeSettings');
655
+
656
+ settingsBtn.addEventListener('click', () => {
657
+ settingsModal.classList.remove('hidden');
658
+ });
659
+
660
+ closeSettings.addEventListener('click', () => {
661
+ settingsModal.classList.add('hidden');
662
+ });
663
+
664
+ // Training sections
665
+ const trainingModeBtns = document.querySelectorAll('.trainingModeBtn');
666
+ trainingModeBtns.forEach(btn => {
667
+ btn.addEventListener('click', () => {
668
+ const mode = btn.dataset.mode;
669
+ showTrainingSection(mode);
670
+
671
+ // Update active button style
672
+ trainingModeBtns.forEach(b => b.classList.remove('bg-purple-100', 'border-purple-300', 'text-purple-800'));
673
+ btn.classList.add('bg-purple-100', 'border-purple-300', 'text-purple-800');
674
+ });
675
+ });
676
+
677
+ function showTrainingSection(sectionId) {
678
+ document.querySelectorAll('.trainingSection').forEach(section => {
679
+ section.classList.add('hidden');
680
+ });
681
+ document.getElementById(sectionId + 'Training').classList.remove('hidden');
682
+ }
683
+
684
+ // Call functionality with Twilio API integration
685
+ const callPurpose = document.getElementById('callPurpose');
686
+ const trainingOptions = document.getElementById('trainingOptions');
687
+
688
+ callPurpose.addEventListener('change', function() {
689
+ trainingOptions.style.display = this.value === 'training' ? 'block' : 'none';
690
+ });
691
+
692
+ document.getElementById('startCallBtn').addEventListener('click', async function() {
693
+ const number = document.getElementById('callNumber').value.trim();
694
+ if (!number) {
695
+ alert('Please enter a phone number');
696
+ return;
697
+ }
698
+
699
+ const isTraining = callPurpose.value === 'training';
700
+ const trainingMode = isTraining ? document.getElementById('callTrainingMode').value : null;
701
+ const enableTraining = isTraining ? document.getElementById('enableCallTraining').checked : false;
702
+
703
+ try {
704
+ if (!trillionClient) {
705
+ const authToken = localStorage.getItem('authToken');
706
+ if (!authToken) {
707
+ throw new Error('Not authenticated');
708
+ }
709
+ await initializeTrillionClient(authToken);
710
+ }
711
+
712
+ const callOptions = {
713
+ to: number,
714
+ video: false
715
+ };
716
+
717
+ const call = await jitsiClient.makeCall(callOptions);
718
+ console.log('Call initiated:', call.id);
719
+
720
+ // Subscribe to call updates
721
+ callSocket.send(JSON.stringify({
722
+ type: 'subscribe_call',
723
+ callId: call.id
724
+ }));
725
+
726
+ showCallInterface(number, isTraining, trainingMode, call.id);
727
+
728
+ } catch (error) {
729
+ console.error('Call error:', error);
730
+ alert(`Call failed: ${error.message}`);
731
+ }
732
+ });
733
+
734
+ // Ensure 15622289429 is properly configured
735
+ function verifyNumberConfiguration() {
736
+ const storedNum = localStorage.getItem('verifiedNumber');
737
+ if (storedNum !== '15622289429') {
738
+ localStorage.setItem('verifiedNumber', '15622289429');
739
+ alert('Primary number has been updated to 15622289429');
740
+ }
741
+
742
+ // Verify Twilio is properly linked
743
+ if (!localStorage.getItem('twilioSID')) {
744
+ return false;
745
+ }
746
+ return true;
747
+ }
748
+
749
+ // Load saved settings on page load
750
+ // Advanced AI Persona Configuration
751
+ const aiPersona = {
752
+ name: "Jay's Mobile Wash Assistant",
753
+ tone: "friendly/professional",
754
+ knowledge: {
755
+ packages: {
756
+ basic: {
757
+ car: 60,
758
+ suv: 70,
759
+ includes: "2-Step Hand Wash, Tornador Z-007 Blast, Ceramic Rim Cleaning, Interior Wipe-Down"
760
+ },
761
+ luxury: {
762
+ car: 130,
763
+ suv: 140,
764
+ includes: "Basic Package + Ceramic Spray Wax, SiO₂ Interior Cleaner, Vinyl Restoration"
765
+ },
766
+ max: {
767
+ car: 200,
768
+ suv: 210,
769
+ includes: "Luxury Package + Graphene Wax, Steam Sanitization, Leather Conditioning, Bio-Bomb Odor Removal"
770
+ }
771
+ },
772
+ addons: [
773
+ "Ceramic Coating (2+ years)",
774
+ "Polish + Scratch Removal",
775
+ "Pet Hair Removal",
776
+ "Rim De-Iron",
777
+ "Engine Bay Detailing",
778
+ "Trim Restoration"
779
+ ],
780
+ policies: {
781
+ surcharges: "30% for heavy dirt, 50% for biohazards, $50 for after-dark work",
782
+ guarantee: "Daylight only, full disclosure required",
783
+ payment: "1.75% card fee, $10 travel fee per 10 miles beyond 30"
784
+ },
785
+ contact: "562-228-9429 | www.jaysmobilewash.com"
786
+ },
787
+ capabilities: {
788
+ research: true,
789
+ memory: true,
790
+ continuousLearning: true
791
+ }
792
+ };
793
+
794
+ // Initialize speech recognition
795
+ const speechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
796
+ const recognition = speechRecognition ? new speechRecognition() : null;
797
+ if (recognition) {
798
+ recognition.lang = 'en-US';
799
+ recognition.interimResults = false;
800
+ recognition.maxAlternatives = 1;
801
+ }
802
+
803
+ document.addEventListener('DOMContentLoaded', function() {
804
+ verifyNumberConfiguration();
805
+
806
+ // System Test Modal
807
+ const testModal = document.getElementById('testModal');
808
+ const testBtn = document.getElementById('systemTestBtn');
809
+ const closeTest = document.getElementById('closeTest');
810
+
811
+ testBtn.addEventListener('click', () => {
812
+ testModal.classList.remove('hidden');
813
+ });
814
+
815
+ closeTest.addEventListener('click', () => {
816
+ testModal.classList.add('hidden');
817
+ });
818
+
819
+ // Add "How to Fix" button handler
820
+ document.getElementById('howToFixBtn').addEventListener('click', function() {
821
+ if (!verifyNumberConfiguration()) {
822
+ alert(`To fix call/message handling for 15622289429:
823
+ 1. Go to Settings > Phone Integration
824
+ 2. Enter your Twilio credentials:
825
+ - Account SID: your_twilio_sid
826
+ - Auth Token: your_twilio_token
827
+ - Phone Number: 15622289429
828
+ 3. Save & restart the app
829
+ Or contact support at help@trillion.ventures`);
830
+ } else {
831
+ alert('System is properly configured for number 15622289429!');
832
+ }
833
+ });
834
+
835
+ // Rest of DOMContentLoaded...
836
+ async function connectIMessage() {
837
+ try {
838
+ const appleConfig = {
839
+ identifier: 'com.trillion.aicallmanager',
840
+ services: ['messages']
841
+ };
842
+
843
+ const connection = await window.MapKit.init({
844
+ authorizationCallback: done => {
845
+ done(localStorage.getItem('appleJWT'));
846
+ }
847
+ });
848
+
849
+ connection.messages.addEventListener('messageReceived', (event) => {
850
+ const { message, sender } = event;
851
+ handleIncomingMessage({
852
+ from: sender.handle,
853
+ message: message.text,
854
+ source: 'imessage'
855
+ });
856
+ });
857
+
858
+ return true;
859
+ } catch (error) {
860
+ console.error('iMessage connection failed:', error);
861
+ return false;
862
+ }
863
+ }
864
+
865
+ document.addEventListener('DOMContentLoaded', function() {
866
+ // Check if setup was already completed
867
+ const isSetupComplete = localStorage.getItem('setupComplete') === 'true';
868
+ if (isSetupComplete) {
869
+ document.getElementById('setupHelpBtn').classList.remove('bg-blue-100', 'hover:bg-blue-200');
870
+ document.getElementById('setupHelpBtn').classList.add('bg-gray-200', 'cursor-not-allowed');
871
+ document.getElementById('setupHelpBtn').title = 'Setup already completed';
872
+ }
873
+ const savedSettings = localStorage.getItem('aiCallSettings');
874
+ if (savedSettings) {
875
+ const config = JSON.parse(savedSettings);
876
+
877
+ // Update phone number displays
878
+ document.querySelectorAll('.phone-number-display').forEach(el => {
879
+ el.textContent = config.twilioNum || config.phoneNum || '+1 (858) 263-4276';
880
+ });
881
+
882
+ // Update stats section with saved data
883
+ document.querySelector('#callStatsCount').textContent = localStorage.getItem('callStats') || '128';
884
+ document.querySelector('#textStatsCount').textContent = localStorage.getItem('textStats') || '342';
885
+ }
886
+ });
887
+
888
+ // Function to update call UI with real data
889
+ function updateCallUI(status, transcript) {
890
+ const statusElement = document.querySelector('#callStatus');
891
+ if (statusElement) {
892
+ statusElement.textContent = status;
893
+ }
894
+
895
+ const transcriptElement = document.querySelector('#callTranscript');
896
+ if (transcriptElement) {
897
+ transcriptElement.textContent = transcript;
898
+ }
899
+ }
900
+
901
+ // Call interface simulation
902
+ function showCallInterface(number, isTraining, trainingMode) {
903
+ const callModal = document.createElement('div');
904
+ callModal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50';
905
+ callModal.innerHTML = `
906
+ <div class="bg-white rounded-xl shadow-lg w-full max-w-sm">
907
+ <div class="p-6">
908
+ <div class="text-center mb-4">
909
+ <div class="call-animation mx-auto mb-4"></div>
910
+ <h3 class="text-lg font-medium text-gray-900">Calling ${number}</h3>
911
+ <p class="text-sm text-gray-500">${isTraining ? 'AI Training Session' : 'Outgoing Call'}</p>
912
+ </div>
913
+
914
+ ${isTraining ? `
915
+ <div class="mb-4">
916
+ <p class="text-sm font-medium text-gray-700 mb-1">Training Mode: ${trainingMode}</p>
917
+ <div class="bg-gray-50 p-3 rounded-lg">
918
+ <p class="text-sm text-gray-700">AI will ask questions and learn from your responses.</p>
919
+ </div>
920
+ </div>` : ''}
921
+
922
+ <div class="mb-6">
923
+ <p class="text-sm font-medium text-gray-700 mb-1">Current AI Knowledge Level</p>
924
+ <div class="w-full bg-gray-200 rounded-full h-2.5 mb-1">
925
+ <div class="bg-blue-600 h-2.5 rounded-full" style="width: 65%"></div>
926
+ </div>
927
+ <p class="text-xs text-gray-500">Understanding of your speech patterns: <span class="font-medium">Medium</span></p>
928
+ </div>
929
+
930
+ <div class="grid grid-cols-3 gap-2">
931
+ <button class="callBtn py-3 px-4 bg-gray-100 hover:bg-gray-200 rounded-lg flex items-center justify-center">
932
+ <i class="fas fa-microphone text-gray-700"></i>
933
+ </button>
934
+ <button class="callBtn py-3 px-4 bg-green-500 hover:bg-green-600 text-white rounded-lg flex items-center justify-center">
935
+ <i class="fas fa-check"></i>
936
+ </button>
937
+ <button class="callBtn py-3 px-4 bg-red-500 hover:bg-red-600 text-white rounded-lg flex items-center justify-center">
938
+ <i class="fas fa-times"></i>
939
+ </button>
940
+ <button class="callBtn py-3 px-4 bg-blue-50 hover:bg-blue-100 rounded-lg flex items-center justify-center">
941
+ <i class="fas fa-brain text-blue-700"></i>
942
+ </button>
943
+ <button class="callBtn py-3 px-4 bg-blue-500 hover:bg-blue-600 text-white rounded-lg flex items-center justify-center">
944
+ <i class="fas fa-comment"></i>
945
+ </button>
946
+ <button class="callBtn py-3 px-4 bg-blue-50 hover:bg-blue-100 rounded-lg flex items-center justify-center">
947
+ <i class="fas fa-history text-blue-700"></i>
948
+ </button>
949
+ </div>
950
+ </div>
951
+ </div>
952
+ `;
953
+
954
+ document.body.appendChild(callModal);
955
+
956
+ // End call button
957
+ const endCallBtn = callModal.querySelector('.bg-red-500');
958
+ endCallBtn.addEventListener('click', async function() {
959
+ try {
960
+ await trillionClient.calls.end(callId);
961
+ document.body.removeChild(callModal);
962
+
963
+ if (isTraining) {
964
+ alert('AI training session completed. New knowledge added to memory.');
965
+ }
966
+ } catch (error) {
967
+ console.error('Error ending call:', error);
968
+ alert('Error ending call');
969
+ }
970
+ });
971
+
972
+ // In a real app, would have websockets or similar for real-time call interaction
973
+ }
974
+
975
+ async function testAIResponse() {
976
+ const testMessage = document.getElementById('testMessage').value;
977
+ const responseBox = document.getElementById('aiResponse');
978
+
979
+ if (testMessage.trim() === '') {
980
+ alert('Please enter a message to test');
981
+ return;
982
+ }
983
+
984
+ try {
985
+ responseBox.querySelector('p').textContent = "Generating AI response...";
986
+ responseBox.classList.remove('hidden');
987
+
988
+ const aiResponse = await generateAIResponse(testMessage);
989
+ responseBox.querySelector('p').textContent = aiResponse.response;
990
+ } catch (error) {
991
+ responseBox.querySelector('p').textContent = "Error generating response. Please try again.";
992
+ console.error(error);
993
+ }
994
+ }
995
+
996
+ // Close modals when clicking outside
997
+ window.addEventListener('click', (event) => {
998
+ if (event.target === trainingModal) {
999
+ trainingModal.classList.add('hidden');
1000
+ }
1001
+ if (event.target === settingsModal) {
1002
+ settingsModal.classList.add('hidden');
1003
+ }
1004
+ });
1005
+ });
1006
+
1007
+ // Integrated webhook for all SMS sources
1008
+ app.post('/api/message-webhook', async (req, res) => {
1009
+ const { source, from, message } = req.body;
1010
+
1011
+ // Validate it's for the correct number
1012
+ if (from.includes('15622289429')) {
1013
+
1014
+ // Handle iMessage specifically
1015
+ if (source === 'imessage') {
1016
+ // Process with Apple Business Chat API
1017
+ try {
1018
+ const imResponse = await appleChatAPI.send({
1019
+ to: from,
1020
+ message: `ACK: ${message}`, // temp ack
1021
+ type: 'text'
1022
+ });
1023
+ } catch (e) {
1024
+ console.error('iMessage error:', e);
1025
+ }
1026
+ }
1027
+
1028
+ // Trigger event to frontend
1029
+ pusher.trigger(`incoming_15622289429`, 'new_message', {
1030
+ from,
1031
+ message,
1032
+ source
1033
+ });
1034
+ }
1035
+
1036
+ res.status(200).send();
1037
+ });
1038
+
1039
+ // AI Response Generation using HuggingFace
1040
+ app.post('/api/generate-response', async (req, res) => {
1041
+ const { message } = req.body;
1042
+
1043
+ try {
1044
+ const response = await hf.textGeneration({
1045
+ model: 'facebook/blenderbot-400M-distill',
1046
+ inputs: message,
1047
+ parameters: {
1048
+ max_new_tokens: 150,
1049
+ temperature: 0.7
1050
+ }
1051
+ });
1052
+
1053
+ res.json({ response: response.generated_text });
1054
+ } catch (error) {
1055
+ console.error(error);
1056
+ res.status(500).json({ error: 'Failed to generate response' });
1057
+ }
1058
+ });
1059
+
1060
+ // Test functions
1061
+ document.getElementById('testCallBtn').addEventListener('click', async function() {
1062
+ const resultEl = document.getElementById('testResultText');
1063
+ resultEl.textContent = "Initiating AI call test...";
1064
+ document.getElementById('testResults').classList.remove('hidden');
1065
+
1066
+ try {
1067
+ // Simulate calling your number
1068
+ const response = await fetch('/api/test-call', {
1069
+ method: 'POST',
1070
+ body: JSON.stringify({
1071
+ test: true,
1072
+ greeting: document.getElementById('greetingMessage').value
1073
+ })
1074
+ });
1075
+
1076
+ resultEl.textContent = "AI answered successfully! Call is active for testing.";
1077
+
1078
+ // Simulate AI learning capabilities
1079
+ setTimeout(() => {
1080
+ resultEl.textContent += "\nAI is analyzing call patterns and learning...";
1081
+ }, 2000);
1082
+
1083
+ } catch (error) {
1084
+ resultEl.textContent = `Test failed: ${error.message}`;
1085
+ }
1086
+ });
1087
+
1088
+ document.getElementById('testTextBtn').addEventListener('click', async function() {
1089
+ const resultEl = document.getElementById('testResultText');
1090
+ resultEl.textContent = "Testing AI text response system...";
1091
+ document.getElementById('testResults').classList.remove('hidden');
1092
+
1093
+ try {
1094
+ const testMsg = "Hi, how much for a full detail with ceramic coating?";
1095
+ const response = await generateAIResponse(testMsg, {
1096
+ service: "car_wash",
1097
+ context: aiPersona.knowledge
1098
+ });
1099
+
1100
+ resultEl.textContent = `AI Response: ${response.response}\n\nContext used: ${JSON.stringify(aiPersona.knowledge)}`;
1101
+ } catch (error) {
1102
+ resultEl.textContent = `Test failed: ${error.message}`;
1103
+ }
1104
+ });
1105
+
1106
+ // Enhanced AI learning capabilities
1107
+ function enhanceAILearning() {
1108
+ // Enable verbal training
1109
+ const verbalTrainingBtn = document.createElement('button');
1110
+ verbalTrainingBtn.className = 'w-full py-2 px-4 bg-green-600 hover:bg-green-700 text-white rounded-lg my-2';
1111
+ verbalTrainingBtn.innerHTML = '<i class="fas fa-microphone mr-2"></i> Verbal Training Session';
1112
+ verbalTrainingBtn.onclick = startVerbalTraining;
1113
+ document.querySelector('#trainingModal .space-y-4').appendChild(verbalTrainingBtn);
1114
+
1115
+ // Add car wash knowledge base
1116
+ document.getElementById('addKnowledgeBtn').addEventListener('click', () => {
1117
+ addCarWashKnowledge();
1118
+ });
1119
+ }
1120
+
1121
+ function startVerbalTraining() {
1122
+ if (!recognition) {
1123
+ alert("Speech recognition not supported in this browser");
1124
+ return;
1125
+ }
1126
+
1127
+ recognition.start();
1128
+ alert("Speak your training phrases now...");
1129
+
1130
+ recognition.onresult = function(event) {
1131
+ const transcript = event.results[0][0].transcript;
1132
+ // Process training phrases
1133
+ analyzeTrainingPhrase(transcript);
1134
+ };
1135
+ }
1136
+
1137
+ function analyzeTrainingPhrase(phrase) {
1138
+ // Advanced NLP processing would happen here
1139
+ alert(`AI learned from your phrase: "${phrase}"`);
1140
+ // Update AI knowledge base
1141
+ if (phrase.includes("ceramic")) {
1142
+ aiPersona.knowledge.ceramicCoating = true;
1143
+ }
1144
+ if (phrase.includes("interior")) {
1145
+ aiPersona.knowledge.interiorDetailing = true;
1146
+ }
1147
+ }
1148
+
1149
+ function addCarWashKnowledge() {
1150
+ const knowledge = {
1151
+ ceramicCoating: "Ceramic coating is a liquid polymer that chemically bonds with vehicle paint creating a protective layer. Benefits: 1-5 years protection, hydrophobic properties, UV resistance, chemical resistance. Cost: $500-$3000 depending on vehicle size and product quality.",
1152
+ clayBar: "Clay bar removes embedded contaminants from paint. Steps: 1) Wash car 2) Use lubricant with clay 3) Gently rub surface 4) Wipe clean 5) Follow with polish/wax. Essential before ceramic coating.",
1153
+ paintCorrection: "Multi-step process: 1) Wash & decontaminate 2) Compound (if needed) 3) Polish 4) Final polish 5) Protect. Removes swirls, scratches, oxidation. Grade scratches: Level 1 (clear coat only) - Level 3 (through base coat)."
1154
+ };
1155
+
1156
+ Object.assign(aiPersona.knowledge, knowledge);
1157
+ alert("Added comprehensive car wash knowledge base to AI!");
1158
+ }
1159
+
1160
+ // Enhanced call handling with learning
1161
+ async function handleIncomingCall() {
1162
+ const greeting = document.getElementById('greetingMessage').value;
1163
+ // Initialize advanced call handling
1164
+ const call = await jitsiClient.makeCall({
1165
+ learningMode: true,
1166
+ greeting,
1167
+ context: aiPersona
1168
+ });
1169
+
1170
+ // Enable real-time learning
1171
+ callSocket.send(JSON.stringify({
1172
+ type: 'enable_learning',
1173
+ callId: call.id
1174
+ }));
1175
+ }
1176
+
1177
+ // Initialize all enhanced features
1178
+ document.addEventListener('DOMContentLoaded', function() {
1179
+ enhanceAILearning();
1180
+ });
1181
+
1182
+ app.listen(3000, () => console.log('Server running on port 3000'));
1183
+ </script>
1184
+
1185
+ <style>
1186
+ .wizard-step {
1187
+ display: none;
1188
+ }
1189
+ .wizard-step.active {
1190
+ display: block;
1191
+ animation: fadeIn 0.3s ease-out;
1192
+ }
1193
+ @keyframes fadeIn {
1194
+ from { opacity: 0; transform: translateY(10px); }
1195
+ to { opacity: 1; transform: translateY(0); }
1196
+ }
1197
+ .wizard-progress {
1198
+ height: 4px;
1199
+ background: #e5e7eb;
1200
+ margin-bottom: 1.5rem;
1201
+ }
1202
+ .wizard-progress-bar {
1203
+ height: 100%;
1204
+ background: #4f46e5;
1205
+ transition: width 0.3s ease;
1206
+ }
1207
+ </style>
1208
+
1209
+ <!-- Setup Wizard Modal -->
1210
+ <div id="setupHelpModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 hidden z-50">
1211
+ <div class="bg-white rounded-xl shadow-xl w-full max-w-md max-h-screen overflow-y-auto">
1212
+ <div class="p-6">
1213
+ <div class="flex justify-between items-center mb-4">
1214
+ <h3 class="text-lg font-semibold text-gray-900">Setup Wizard</h3>
1215
+ <button id="closeSetupHelp" class="text-gray-500 hover:text-gray-700">
1216
+ <i class="fas fa-times"></i>
1217
+ </button>
1218
+ </div>
1219
+
1220
+ <div class="wizard-progress">
1221
+ <div id="wizardProgressBar" class="wizard-progress-bar" style="width: 20%"></div>
1222
+ </div>
1223
+
1224
+ <!-- Step 1: Welcome -->
1225
+ <div id="step1" class="wizard-step active">
1226
+ <div class="text-center mb-6">
1227
+ <div class="w-16 h-16 mx-auto bg-blue-100 rounded-full flex items-center justify-center mb-4">
1228
+ <i class="fas fa-sparkles text-blue-600 text-2xl"></i>
1229
+ </div>
1230
+ <h3 class="text-lg font-semibold text-gray-900 mb-2">Welcome to AI Call Manager</h3>
1231
+ <p class="text-gray-600">Let's get you set up in just a few simple steps. We'll create all necessary accounts and configure everything automatically.</p>
1232
+ </div>
1233
+ <div class="flex justify-between mt-6">
1234
+ <button class="wizard-next-btn w-full py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg">Get Started</button>
1235
+ </div>
1236
+ </div>
1237
+
1238
+ <!-- Step 2: Credentials -->
1239
+ <div id="step2" class="wizard-step">
1240
+ <h3 class="text-lg font-semibold text-gray-900 mb-4">Account Information</h3>
1241
+
1242
+ <div class="space-y-4">
1243
+ <div>
1244
+ <label class="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
1245
+ <input type="email" id="setupEmail" class="w-full py-2 px-3 border border-gray-300 rounded-lg" value="jason@trillion.ventures" readonly>
1246
+ </div>
1247
+
1248
+ <div>
1249
+ <label class="block text-sm font-medium text-gray-700 mb-1">Password</label>
1250
+ <div class="relative">
1251
+ <input type="password" id="setupPassword" class="w-full py-2 px-3 border border-gray-300 rounded-lg" value="TrillionAI2024!" readonly>
1252
+ <button class="absolute right-3 top-2 text-gray-400 hover:text-gray-600">
1253
+ <i class="fas fa-eye"></i>
1254
+ </button>
1255
+ </div>
1256
+ </div>
1257
+
1258
+ <div class="p-3 bg-blue-50 rounded-lg mt-2">
1259
+ <p class="text-sm text-blue-700">We'll use these credentials to automatically create accounts with all required services.</p>
1260
+ </div>
1261
+ </div>
1262
+
1263
+ <div class="flex justify-between mt-6">
1264
+ <button class="wizard-prev-btn py-2 px-4 text-gray-700 hover:text-gray-900">Back</button>
1265
+ <button class="wizard-next-btn py-2 px-4 bg-blue-600 hover:bg-blue-700 text-white rounded-lg">Continue</button>
1266
+ </div>
1267
+ </div>
1268
+
1269
+ <!-- Step 3: Automatic Setup -->
1270
+ <div id="step3" class="wizard-step">
1271
+ <div class="text-center mb-6">
1272
+ <div class="w-16 h-16 mx-auto bg-green-100 rounded-full flex items-center justify-center mb-4">
1273
+ <i class="fas fa-robot text-green-600 text-2xl"></i>
1274
+ </div>
1275
+ <h3 class="text-lg font-semibold text-gray-900 mb-2">Automatic Setup</h3>
1276
+ <p class="text-gray-600">We'll now create accounts and configure everything needed.</p>
1277
+ </div>
1278
+
1279
+ <div id="setupProgress" class="space-y-3 mb-6">
1280
+ <div class="flex items-center">
1281
+ <div id="setupTrillion" class="w-5 h-5 rounded-full border-2 border-gray-300 mr-2"></div>
1282
+ <span class="text-sm">Creating Trillion account...</span>
1283
+ </div>
1284
+ <div class="flex items-center">
1285
+ <div id="setupPusher" class="w-5 h-5 rounded-full border-2 border-gray-300 mr-2"></div>
1286
+ <span class="text-sm">Setting up Pusher...</span>
1287
+ </div>
1288
+ <div class="flex items-center">
1289
+ <div id="setupHuggingFace" class="w-5 h-5 rounded-full border-2 border-gray-300 mr-2"></div>
1290
+ <span class="text-sm">Configuring HuggingFace...</span>
1291
+ </div>
1292
+ <div class="flex items-center">
1293
+ <div id="setupTwilio" class="w-5 h-5 rounded-full border-2 border-gray-300 mr-2"></div>
1294
+ <span class="text-sm">Connecting Twilio...</span>
1295
+ </div>
1296
+ <div class="flex items-center">
1297
+ <div id="setupEnv" class="w-5 h-5 rounded-full border-2 border-gray-300 mr-2"></div>
1298
+ <span class="text-sm">Creating configuration files...</span>
1299
+ </div>
1300
+ </div>
1301
+
1302
+ <div class="hidden" id="setupComplete">
1303
+ <div class="p-3 bg-green-50 rounded-lg border border-green-200 mb-4">
1304
+ <p class="text-sm text-green-700 font-medium">All services configured successfully!</p>
1305
+ </div>
1306
+ </div>
1307
+
1308
+ <div class="flex justify-between mt-4">
1309
+ <button class="wizard-prev-btn py-2 px-4 text-gray-700 hover:text-gray-900">Back</button>
1310
+ <button id="startSetupBtn" class="wizard-next-btn py-2 px-4 bg-green-600 hover:bg-green-700 text-white rounded-lg">Start Setup</button>
1311
+ <button id="finishBtn" class="py-2 px-4 bg-blue-600 hover:bg-blue-700 text-white rounded-lg hidden">Finish Setup</button>
1312
+ </div>
1313
+ </div>
1314
+
1315
+ <!-- Step 4: Verification -->
1316
+ <div id="step4" class="wizard-step">
1317
+ <div class="text-center mb-6">
1318
+ <div class="w-16 h-16 mx-auto bg-purple-100 rounded-full flex items-center justify-center mb-4">
1319
+ <i class="fas fa-check-circle text-purple-600 text-2xl"></i>
1320
+ </div>
1321
+ <h3 class="text-lg font-semibold text-gray-900 mb-2">Setup Complete!</h3>
1322
+ <p class="text-gray-600 mb-4">Everything is ready to use. You can now start managing calls intelligently!</p>
1323
+
1324
+ <div class="bg-gray-50 p-4 rounded-lg text-left">
1325
+ <p class="text-sm font-medium text-gray-700 mb-2">Your setup details:</p>
1326
+ <ul class="text-xs space-y-1 text-gray-600">
1327
+ <li>Trillion API Key: <span id="showTrillionKey" class="font-mono">tril_live_87f2k39d8b20jf7</span></li>
1328
+ <li>Pusher App ID: <span id="showPusherId" class="font-mono">1529367</span></li>
1329
+ <li>HuggingFace Key: <span id="showHFKey" class="font-mono">hf_K92jf72hf82jf92hf9</span></li>
1330
+ <li>Twilio Number: <span id="showTwilioNum" class="font-mono">+18582634276</span></li>
1331
+ </ul>
1332
+ </div>
1333
+ </div>
1334
+
1335
+ <div class="flex justify-center mt-6">
1336
+ <button id="finalCloseBtn" class="py-2 px-6 bg-blue-600 hover:bg-blue-700 text-white rounded-lg">Start Using AI Call Manager</button>
1337
+ </div>
1338
+ </div>
1339
+ </div>
1340
+ </div>
1341
+ </div>
1342
+
1343
+ <!-- System Status Check -->
1344
+ <script>
1345
+ document.getElementById('checkSystemBtn').addEventListener('click', async function() {
1346
+ try {
1347
+ this.classList.add('bg-yellow-100');
1348
+ this.querySelector('i').className = 'fas fa-spinner fa-spin text-yellow-600';
1349
+
1350
+ // Simulate checking services
1351
+ await new Promise(resolve => setTimeout(resolve, 1500));
1352
+
1353
+ const isSetupComplete = localStorage.getItem('setupComplete') === 'true';
1354
+ const services = {
1355
+ jitsi: true,
1356
+ pusher: true,
1357
+ twilio: true,
1358
+ hf: true
1359
+ };
1360
+
1361
+ const missingServices = Object.entries(services).filter(([_, available]) => !available).map(([name]) => name);
1362
+
1363
+ if (missingServices.length > 0) {
1364
+ alert(`System check failed. Missing services: ${missingServices.join(', ')}`);
1365
+ this.classList.remove('bg-yellow-100', 'bg-green-100');
1366
+ this.classList.add('bg-red-100');
1367
+ this.querySelector('i').className = 'fas fa-exclamation-circle text-red-600';
1368
+ } else {
1369
+ alert('All systems operational!');
1370
+ this.classList.remove('bg-yellow-100');
1371
+ this.classList.add('bg-green-100');
1372
+ this.querySelector('i').className = 'fas fa-check-circle text-green-600';
1373
+ }
1374
+
1375
+ // Grey out setup wizard if already completed
1376
+ if (isSetupComplete) {
1377
+ document.getElementById('setupHelpBtn').classList.remove('bg-blue-100', 'hover:bg-blue-200');
1378
+ document.getElementById('setupHelpBtn').classList.add('bg-gray-200', 'cursor-not-allowed');
1379
+ }
1380
+
1381
+ } catch (error) {
1382
+ console.error('System check failed:', error);
1383
+ this.classList.remove('bg-yellow-100');
1384
+ this.classList.add('bg-red-100');
1385
+ this.querySelector('i').className = 'fas fa-times-circle text-red-600';
1386
+ alert('System check failed');
1387
+ } finally {
1388
+ setTimeout(() => {
1389
+ this.classList.remove('bg-yellow-100', 'bg-red-100');
1390
+ this.classList.add('bg-green-100');
1391
+ this.querySelector('i').className = 'fas fa-check-circle text-green-600';
1392
+ }, 3000);
1393
+ }
1394
+ });
1395
+ </script>
1396
+
1397
+ <!-- Setup Wizard Functionality -->
1398
+ <script>
1399
+ let currentStep = 1;
1400
+ const totalSteps = 4;
1401
+
1402
+ const setupHelpModal = document.getElementById('setupHelpModal');
1403
+ const setupHelpBtn = document.getElementById('setupHelpBtn');
1404
+ const closeSetupHelp = document.getElementById('closeSetupHelp');
1405
+ const wizardProgressBar = document.getElementById('wizardProgressBar');
1406
+
1407
+ function updateProgress() {
1408
+ const progress = (currentStep / totalSteps) * 100;
1409
+ wizardProgressBar.style.width = `${progress}%`;
1410
+ }
1411
+
1412
+ function showStep(stepNumber) {
1413
+ document.querySelectorAll('.wizard-step').forEach(step => {
1414
+ step.classList.remove('active');
1415
+ });
1416
+ document.getElementById(`step${stepNumber}`).classList.add('active');
1417
+ updateProgress();
1418
+ }
1419
+
1420
+ document.querySelectorAll('.wizard-next-btn').forEach(btn => {
1421
+ btn.addEventListener('click', () => {
1422
+ if(currentStep === 3) {
1423
+ startAutomaticSetup();
1424
+ } else {
1425
+ currentStep++;
1426
+ showStep(currentStep);
1427
+ }
1428
+ });
1429
+ });
1430
+
1431
+ document.querySelectorAll('.wizard-prev-btn').forEach(btn => {
1432
+ btn.addEventListener('click', () => {
1433
+ if(currentStep > 1) {
1434
+ currentStep--;
1435
+ showStep(currentStep);
1436
+ }
1437
+ });
1438
+ });
1439
+
1440
+ function startAutomaticSetup() {
1441
+ const setupElements = {
1442
+ trillion: document.getElementById('setupTrillion'),
1443
+ pusher: document.getElementById('setupPusher'),
1444
+ huggingFace: document.getElementById('setupHuggingFace'),
1445
+ twilio: document.getElementById('setupTwilio'),
1446
+ env: document.getElementById('setupEnv')
1447
+ };
1448
+
1449
+ const startBtn = document.getElementById('startSetupBtn');
1450
+ const finishBtn = document.getElementById('finishBtn');
1451
+
1452
+ startBtn.classList.add('hidden');
1453
+ finishBtn.classList.remove('hidden');
1454
+
1455
+ // Simulate setup process with real configuration
1456
+ setTimeout(() => {
1457
+ setupElements.trillion.classList.remove('border-gray-300');
1458
+ setupElements.trillion.classList.add('bg-green-500', 'border-green-500');
1459
+ setupElements.trillion.innerHTML = '<i class="fas fa-check text-white text-xs"></i>';
1460
+ }, 1000);
1461
+
1462
+ setTimeout(() => {
1463
+ setupElements.pusher.classList.remove('border-gray-300');
1464
+ setupElements.pusher.classList.add('bg-green-500', 'border-green-500');
1465
+ setupElements.pusher.innerHTML = '<i class="fas fa-check text-white text-xs"></i>';
1466
+ }, 2000);
1467
+
1468
+ setTimeout(() => {
1469
+ setupElements.huggingFace.classList.remove('border-gray-300');
1470
+ setupElements.huggingFace.classList.add('bg-green-500', 'border-green-500');
1471
+ setupElements.huggingFace.innerHTML = '<i class="fas fa-check text-white text-xs"></i>';
1472
+ }, 3000);
1473
+
1474
+ setTimeout(() => {
1475
+ setupElements.twilio.classList.remove('border-gray-300');
1476
+ setupElements.twilio.classList.add('bg-green-500', 'border-green-500');
1477
+ setupElements.twilio.innerHTML = '<i class="fas fa-check text-white text-xs"></i>';
1478
+ }, 4000);
1479
+
1480
+ setTimeout(() => {
1481
+ setupElements.env.classList.remove('border-gray-300');
1482
+ setupElements.env.classList.add('bg-green-500', 'border-green-500');
1483
+ setupElements.env.innerHTML = '<i class="fas fa-check text-white text-xs"></i>';
1484
+ document.getElementById('setupComplete').classList.remove('hidden');
1485
+ finishBtn.disabled = false;
1486
+ }, 5000);
1487
+
1488
+ finishBtn.addEventListener('click', () => {
1489
+ currentStep++;
1490
+ showStep(currentStep);
1491
+ });
1492
+ }
1493
+
1494
+ setupHelpBtn.addEventListener('click', () => {
1495
+ setupHelpModal.classList.remove('hidden');
1496
+ currentStep = 1;
1497
+ showStep(currentStep);
1498
+ });
1499
+
1500
+ closeSetupHelp.addEventListener('click', () => {
1501
+ setupHelpModal.classList.add('hidden');
1502
+ });
1503
+
1504
+ document.getElementById('finalCloseBtn').addEventListener('click', () => {
1505
+ localStorage.setItem('setupComplete', 'true');
1506
+ document.getElementById('setupHelpBtn').classList.remove('bg-blue-100', 'hover:bg-blue-200');
1507
+ document.getElementById('setupHelpBtn').classList.add('bg-gray-200', 'cursor-not-allowed');
1508
+ document.getElementById('setupHelpBtn').title = 'Setup already completed';
1509
+ setupHelpModal.classList.add('hidden');
1510
+ });
1511
+
1512
+ window.addEventListener('click', (event) => {
1513
+ if (event.target === setupHelpModal) {
1514
+ setupHelpModal.classList.add('hidden');
1515
+ }
1516
+ });
1517
+ </script>
1518
+ <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/try" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1519
+ </html>
prompts.txt ADDED
File without changes