Hugging Face's logo

Spaces:
shaike123
/
moreter
Running

App Files Community
shaike123 commited on
Commit
f429cb9
·
verified ·
1 Parent(s): da6a143

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +985 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Moreter
3
- emoji: ⚡
4
- colorFrom: blue
5
- colorTo: blue
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: moreter
3
+ emoji: 🐳
4
+ colorFrom: green
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,985 @@
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>Negotiation Coach - AI Sales Practice</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Inter', sans-serif;
14
+ background-color: #f8fafc;
15
+ }
16
+
17
+ .character-avatar {
18
+ transition: all 0.3s ease;
19
+ filter: grayscale(100%);
20
+ }
21
+
22
+ .character-avatar:hover, .character-avatar.selected {
23
+ filter: grayscale(0%);
24
+ transform: scale(1.05);
25
+ }
26
+
27
+ .typing-indicator span {
28
+ display: inline-block;
29
+ width: 8px;
30
+ height: 8px;
31
+ background-color: #4b5563;
32
+ border-radius: 50%;
33
+ margin: 0 2px;
34
+ animation: bounce 1.4s infinite ease-in-out;
35
+ }
36
+
37
+ .typing-indicator span:nth-child(2) {
38
+ animation-delay: 0.2s;
39
+ }
40
+
41
+ .typing-indicator span:nth-child(3) {
42
+ animation-delay: 0.4s;
43
+ }
44
+
45
+ @keyframes bounce {
46
+ 0%, 60%, 100% { transform: translateY(0); }
47
+ 30% { transform: translateY(-5px); }
48
+ }
49
+
50
+ .message-bubble {
51
+ max-width: 80%;
52
+ border-radius: 1.125rem;
53
+ line-height: 1.25;
54
+ position: relative;
55
+ word-wrap: break-word;
56
+ }
57
+
58
+ .user-message {
59
+ background-color: #3b82f6;
60
+ color: white;
61
+ border-bottom-right-radius: 0.25rem;
62
+ margin-left: auto;
63
+ }
64
+
65
+ .bot-message {
66
+ background-color: #e2e8f0;
67
+ color: #1f2937;
68
+ border-bottom-left-radius: 0.25rem;
69
+ margin-right: auto;
70
+ }
71
+
72
+ .pulse {
73
+ animation: pulse 2s infinite;
74
+ }
75
+
76
+ @keyframes pulse {
77
+ 0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); }
78
+ 70% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); }
79
+ 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
80
+ }
81
+
82
+ .scene-card {
83
+ transition: all 0.3s ease;
84
+ }
85
+
86
+ .scene-card:hover {
87
+ transform: translateY(-5px);
88
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
89
+ }
90
+
91
+ .scene-card.selected {
92
+ border: 2px solid #3b82f6;
93
+ transform: translateY(-5px);
94
+ }
95
+ </style>
96
+ </head>
97
+ <body class="min-h-screen bg-gray-50">
98
+ <div class="container mx-auto px-4 py-8 max-w-6xl">
99
+ <header class="text-center mb-12">
100
+ <h1 class="text-4xl font-bold text-gray-800 mb-2">Negotiation Coach Pro</h1>
101
+ <p class="text-lg text-gray-600">Practice your sales pitch with realistic AI characters</p>
102
+ </header>
103
+
104
+ <div id="app" class="bg-white rounded-xl shadow-lg overflow-hidden">
105
+ <!-- Setup Screen -->
106
+ <div id="setup-screen" class="p-8">
107
+ <div class="mb-10">
108
+ <h2 class="text-2xl font-semibold text-gray-800 mb-4">Select Your Character</h2>
109
+ <div class="grid grid-cols-2 md:grid-cols-5 gap-6">
110
+ <!-- Character 1 -->
111
+ <div class="character-option cursor-pointer text-center" data-character="1">
112
+ <div class="character-avatar rounded-full overflow-hidden mx-auto mb-3 w-24 h-24 border-4 border-gray-200">
113
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sarah - Marketing Director" class="w-full h-full object-cover">
114
+ </div>
115
+ <h3 class="font-medium text-gray-800">Sarah</h3>
116
+ <p class="text-sm text-gray-500">Marketing Director</p>
117
+ </div>
118
+
119
+ <!-- Character 2 -->
120
+ <div class="character-option cursor-pointer text-center" data-character="2">
121
+ <div class="character-avatar rounded-full overflow-hidden mx-auto mb-3 w-24 h-24 border-4 border-gray-200">
122
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="James - CFO" class="w-full h-full object-cover">
123
+ </div>
124
+ <h3 class="font-medium text-gray-800">James</h3>
125
+ <p class="text-sm text-gray-500">CFO</p>
126
+ </div>
127
+
128
+ <!-- Character 3 -->
129
+ <div class="character-option cursor-pointer text-center" data-character="3">
130
+ <div class="character-avatar rounded-full overflow-hidden mx-auto mb-3 w-24 h-24 border-4 border-gray-200">
131
+ <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Priya - Startup Founder" class="w-full h-full object-cover">
132
+ </div>
133
+ <h3 class="font-medium text-gray-800">Priya</h3>
134
+ <p class="text-sm text-gray-500">Startup Founder</p>
135
+ </div>
136
+
137
+ <!-- Character 4 -->
138
+ <div class="character-option cursor-pointer text-center" data-character="4">
139
+ <div class="character-avatar rounded-full overflow-hidden mx-auto mb-3 w-24 h-24 border-4 border-gray-200">
140
+ <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Carlos - IT Manager" class="w-full h-full object-cover">
141
+ </div>
142
+ <h3 class="font-medium text-gray-800">Carlos</h3>
143
+ <p class="text-sm text-gray-500">IT Manager</p>
144
+ </div>
145
+
146
+ <!-- Character 5 -->
147
+ <div class="character-option cursor-pointer text-center" data-character="5">
148
+ <div class="character-avatar rounded-full overflow-hidden mx-auto mb-3 w-24 h-24 border-4 border-gray-200">
149
+ <img src="https://randomuser.me/api/portraits/women/90.jpg" alt="Linda - Small Business Owner" class="w-full h-full object-cover">
150
+ </div>
151
+ <h3 class="font-medium text-gray-800">Linda</h3>
152
+ <p class="text-sm text-gray-500">Small Business Owner</p>
153
+ </div>
154
+ </div>
155
+ </div>
156
+
157
+ <div class="mb-10">
158
+ <h2 class="text-2xl font-semibold text-gray-800 mb-4">Select a Scenario</h2>
159
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
160
+ <!-- Scenario 1 -->
161
+ <div class="scene-card p-6 bg-white rounded-lg border border-gray-200 cursor-pointer" data-scene="1">
162
+ <div class="flex items-center mb-4">
163
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
164
+ <i class="fas fa-briefcase text-blue-600 text-xl"></i>
165
+ </div>
166
+ <h3 class="font-medium text-gray-800">Enterprise Software</h3>
167
+ </div>
168
+ <p class="text-gray-600 text-sm">Sell your SaaS platform to a corporate decision maker who's skeptical about ROI.</p>
169
+ </div>
170
+
171
+ <!-- Scenario 2 -->
172
+ <div class="scene-card p-6 bg-white rounded-lg border border-gray-200 cursor-pointer" data-scene="2">
173
+ <div class="flex items-center mb-4">
174
+ <div class="bg-green-100 p-3 rounded-full mr-4">
175
+ <i class="fas fa-home text-green-600 text-xl"></i>
176
+ </div>
177
+ <h3 class="font-medium text-gray-800">Home Security</h3>
178
+ </div>
179
+ <p class="text-gray-600 text-sm">Convince a homeowner to upgrade to your premium security system package.</p>
180
+ </div>
181
+
182
+ <!-- Scenario 3 -->
183
+ <div class="scene-card p-6 bg-white rounded-lg border border-gray-200 cursor-pointer" data-scene="3">
184
+ <div class="flex items-center mb-4">
185
+ <div class="bg-purple-100 p-3 rounded-full mr-4">
186
+ <i class="fas fa-heart text-purple-600 text-xl"></i>
187
+ </div>
188
+ <h3 class="font-medium text-gray-800">Health Insurance</h3>
189
+ </div>
190
+ <p class="text-gray-600 text-sm">Overcome price objections for a comprehensive health insurance plan.</p>
191
+ </div>
192
+ </div>
193
+ </div>
194
+
195
+ <div class="text-center">
196
+ <button id="start-session" class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-8 rounded-full text-lg transition duration-300 transform hover:scale-105">
197
+ Start Negotiation Session
198
+ </button>
199
+ </div>
200
+ </div>
201
+
202
+ <!-- Chat Screen (Hidden Initially) -->
203
+ <div id="chat-screen" class="hidden h-full flex flex-col">
204
+ <!-- Chat Header -->
205
+ <div class="bg-gray-800 text-white p-4 flex items-center justify-between">
206
+ <div class="flex items-center">
207
+ <img id="current-character-avatar" src="" alt="Character" class="w-10 h-10 rounded-full mr-3">
208
+ <div>
209
+ <h3 id="current-character-name" class="font-medium"></h3>
210
+ <p id="current-scenario" class="text-xs text-gray-300"></p>
211
+ </div>
212
+ </div>
213
+ <div class="flex items-center space-x-3">
214
+ <div class="text-sm bg-gray-700 px-3 py-1 rounded-full">
215
+ <i class="fas fa-microphone mr-1"></i>
216
+ <span id="recording-status">Ready</span>
217
+ </div>
218
+ <button id="end-session" class="text-xs bg-red-500 hover:bg-red-600 px-3 py-1 rounded-full transition">
219
+ <i class="fas fa-times mr-1"></i> End Session
220
+ </button>
221
+ </div>
222
+ </div>
223
+
224
+ <!-- Chat Messages -->
225
+ <div id="chat-messages" class="flex-1 p-6 overflow-y-auto space-y-4" style="max-height: 60vh;">
226
+ <!-- Messages will be inserted here -->
227
+ </div>
228
+
229
+ <!-- Input Area -->
230
+ <div class="border-t border-gray-200 p-4 bg-gray-50">
231
+ <div class="flex items-center">
232
+ <button id="voice-toggle" class="bg-blue-600 text-white p-3 rounded-full mr-3 hover:bg-blue-700 transition pulse">
233
+ <i class="fas fa-microphone text-xl"></i>
234
+ </button>
235
+ <div class="flex-1 relative">
236
+ <input id="text-input" type="text" placeholder="Type your message or speak..." class="w-full border border-gray-300 rounded-full py-3 px-5 pr-12 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
237
+ <button id="send-text" class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-blue-600">
238
+ <i class="fas fa-paper-plane text-xl"></i>
239
+ </button>
240
+ </div>
241
+ </div>
242
+ <div class="mt-3 text-xs text-gray-500 flex justify-between">
243
+ <div>
244
+ <span id="connection-status" class="inline-flex items-center">
245
+ <span class="w-2 h-2 rounded-full bg-green-500 mr-1"></span>
246
+ Connected
247
+ </span>
248
+ </div>
249
+ <div>
250
+ <button id="hint-button" class="text-blue-600 hover:text-blue-800">
251
+ <i class="fas fa-lightbulb mr-1"></i> Get a hint
252
+ </button>
253
+ </div>
254
+ </div>
255
+ </div>
256
+ </div>
257
+
258
+ <!-- Results Screen (Hidden Initially) -->
259
+ <div id="results-screen" class="hidden p-8 text-center">
260
+ <div class="max-w-md mx-auto">
261
+ <div class="bg-green-100 text-green-800 p-4 rounded-full w-24 h-24 flex items-center justify-center mx-auto mb-6">
262
+ <i class="fas fa-trophy text-4xl"></i>
263
+ </div>
264
+ <h2 class="text-2xl font-bold text-gray-800 mb-3">Negotiation Complete!</h2>
265
+ <div class="bg-white rounded-xl shadow-sm p-6 mb-6">
266
+ <div class="grid grid-cols-2 gap-4 text-left mb-4">
267
+ <div>
268
+ <p class="text-sm text-gray-500">Character</p>
269
+ <p id="result-character" class="font-medium"></p>
270
+ </div>
271
+ <div>
272
+ <p class="text-sm text-gray-500">Scenario</p>
273
+ <p id="result-scenario" class="font-medium"></p>
274
+ </div>
275
+ <div>
276
+ <p class="text-sm text-gray-500">Duration</p>
277
+ <p id="result-duration" class="font-medium"></p>
278
+ </div>
279
+ <div>
280
+ <p class="text-sm text-gray-500">Outcome</p>
281
+ <p id="result-outcome" class="font-medium"></p>
282
+ </div>
283
+ </div>
284
+ </div>
285
+
286
+ <div class="bg-white rounded-xl shadow-sm p-6 mb-8 text-left">
287
+ <h3 class="font-semibold text-gray-800 mb-3">Feedback</h3>
288
+ <p id="feedback-text" class="text-gray-600 mb-4"></p>
289
+ <div class="space-y-3">
290
+ <div>
291
+ <p class="text-sm font-medium text-gray-700 mb-1">Strengths</p>
292
+ <ul id="strengths-list" class="text-sm text-gray-600 list-disc pl-5 space-y-1"></ul>
293
+ </div>
294
+ <div>
295
+ <p class="text-sm font-medium text-gray-700 mb-1">Areas to Improve</p>
296
+ <ul id="improvements-list" class="text-sm text-gray-600 list-disc pl-5 space-y-1"></ul>
297
+ </div>
298
+ </div>
299
+ </div>
300
+
301
+ <div class="flex justify-center space-x-4">
302
+ <button id="new-session" class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-full transition">
303
+ <i class="fas fa-redo mr-2"></i> New Session
304
+ </button>
305
+ <button id="view-transcript" class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-2 px-6 rounded-full transition">
306
+ <i class="fas fa-file-alt mr-2"></i> View Transcript
307
+ </button>
308
+ </div>
309
+ </div>
310
+ </div>
311
+ </div>
312
+ </div>
313
+
314
+ <!-- Hint Modal -->
315
+ <div id="hint-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
316
+ <div class="bg-white rounded-xl p-6 max-w-md w-full mx-4">
317
+ <div class="flex justify-between items-center mb-4">
318
+ <h3 class="text-xl font-semibold text-gray-800">Negotiation Hint</h3>
319
+ <button id="close-hint" class="text-gray-500 hover:text-gray-700">
320
+ <i class="fas fa-times"></i>
321
+ </button>
322
+ </div>
323
+ <div id="hint-content" class="text-gray-600 mb-4">
324
+ <!-- Hint content will be inserted here -->
325
+ </div>
326
+ <div class="text-right">
327
+ <button id="next-hint" class="text-blue-600 hover:text-blue-800 text-sm font-medium">
328
+ Next Hint <i class="fas fa-arrow-right ml-1"></i>
329
+ </button>
330
+ </div>
331
+ </div>
332
+ </div>
333
+
334
+ <!-- Transcript Modal -->
335
+ <div id="transcript-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
336
+ <div class="bg-white rounded-xl p-6 max-w-2xl w-full mx-4 max-h-[80vh] flex flex-col">
337
+ <div class="flex justify-between items-center mb-4">
338
+ <h3 class="text-xl font-semibold text-gray-800">Session Transcript</h3>
339
+ <button id="close-transcript" class="text-gray-500 hover:text-gray-700">
340
+ <i class="fas fa-times"></i>
341
+ </button>
342
+ </div>
343
+ <div id="transcript-content" class="overflow-y-auto flex-1 mb-4 space-y-3">
344
+ <!-- Transcript content will be inserted here -->
345
+ </div>
346
+ <div class="border-t border-gray-200 pt-4 flex justify-end">
347
+ <button id="download-transcript" class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-full text-sm">
348
+ <i class="fas fa-download mr-2"></i> Download
349
+ </button>
350
+ </div>
351
+ </div>
352
+ </div>
353
+
354
+ <script>
355
+ document.addEventListener('DOMContentLoaded', function() {
356
+ // DOM Elements
357
+ const setupScreen = document.getElementById('setup-screen');
358
+ const chatScreen = document.getElementById('chat-screen');
359
+ const resultsScreen = document.getElementById('results-screen');
360
+ const chatMessages = document.getElementById('chat-messages');
361
+ const textInput = document.getElementById('text-input');
362
+ const sendText = document.getElementById('send-text');
363
+ const voiceToggle = document.getElementById('voice-toggle');
364
+ const startSession = document.getElementById('start-session');
365
+ const endSession = document.getElementById('end-session');
366
+ const newSession = document.getElementById('new-session');
367
+ const viewTranscript = document.getElementById('view-transcript');
368
+ const hintButton = document.getElementById('hint-button');
369
+ const hintModal = document.getElementById('hint-modal');
370
+ const closeHint = document.getElementById('close-hint');
371
+ const nextHint = document.getElementById('next-hint');
372
+ const hintContent = document.getElementById('hint-content');
373
+ const transcriptModal = document.getElementById('transcript-modal');
374
+ const closeTranscript = document.getElementById('close-transcript');
375
+ const transcriptContent = document.getElementById('transcript-content');
376
+ const downloadTranscript = document.getElementById('download-transcript');
377
+ const recordingStatus = document.getElementById('recording-status');
378
+
379
+ // State variables
380
+ let selectedCharacter = null;
381
+ let selectedScenario = null;
382
+ let isListening = false;
383
+ let recognition;
384
+ let speechSynthesis = window.speechSynthesis;
385
+ let sessionStartTime;
386
+ let messages = [];
387
+ let currentHints = [];
388
+ let currentHintIndex = 0;
389
+
390
+ // Character data
391
+ const characters = {
392
+ 1: {
393
+ name: "Sarah Johnson",
394
+ role: "Marketing Director",
395
+ avatar: "https://randomuser.me/api/portraits/women/44.jpg",
396
+ personality: "Data-driven, focused on ROI and customer acquisition costs. Skeptical of fluffy claims.",
397
+ voice: "UK English Female",
398
+ pitch: 1,
399
+ rate: 1
400
+ },
401
+ 2: {
402
+ name: "James Wilson",
403
+ role: "CFO",
404
+ avatar: "https://randomuser.me/api/portraits/men/32.jpg",
405
+ personality: "All about the numbers. Wants clear cost-benefit analysis and payment flexibility.",
406
+ voice: "US English Male",
407
+ pitch: 0.9,
408
+ rate: 0.9
409
+ },
410
+ 3: {
411
+ name: "Priya Patel",
412
+ role: "Startup Founder",
413
+ avatar: "https://randomuser.me/api/portraits/women/68.jpg",
414
+ personality: "Visionary but cash-strapped. Needs to see how this fits her long-term strategy.",
415
+ voice: "Indian English Female",
416
+ pitch: 1.1,
417
+ rate: 1.1
418
+ },
419
+ 4: {
420
+ name: "Carlos Mendez",
421
+ role: "IT Manager",
422
+ avatar: "https://randomuser.me/api/portraits/men/75.jpg",
423
+ personality: "Technical but overworked. Worried about implementation complexity and support.",
424
+ voice: "Spanish English Male",
425
+ pitch: 1,
426
+ rate: 1
427
+ },
428
+ 5: {
429
+ name: "Linda Thompson",
430
+ role: "Small Business Owner",
431
+ avatar: "https://randomuser.me/api/portraits/women/90.jpg",
432
+ personality: "Practical and hands-on. Needs simple solutions that won't disrupt her daily operations.",
433
+ voice: "Australian English Female",
434
+ pitch: 1,
435
+ rate: 1
436
+ }
437
+ };
438
+
439
+ // Scenario data
440
+ const scenarios = {
441
+ 1: {
442
+ title: "Enterprise Software Sale",
443
+ description: "Sell your SaaS platform to a corporate decision maker",
444
+ product: "Enterprise CRM Software",
445
+ price: "$120,000/year",
446
+ features: [
447
+ "Advanced analytics dashboard",
448
+ "Custom workflow automation",
449
+ "Enterprise-grade security",
450
+ "24/7 dedicated support"
451
+ ],
452
+ objections: [
453
+ "We already have a system that works",
454
+ "This is too expensive for what you're offering",
455
+ "I'm not convinced this will integrate well with our other tools",
456
+ "Our team won't adopt this easily"
457
+ ],
458
+ hints: [
459
+ "Focus on ROI - calculate how much time/money they'll save",
460
+ "Offer a phased implementation plan to reduce risk",
461
+ "Provide case studies from similar companies",
462
+ "Highlight unique features competitors don't have"
463
+ ]
464
+ },
465
+ 2: {
466
+ title: "Home Security System",
467
+ description: "Convince a homeowner to upgrade to premium package",
468
+ product: "UltraSecure Home System",
469
+ price: "$1,499 + $49/month",
470
+ features: [
471
+ "24/7 professional monitoring",
472
+ "Smart home integration",
473
+ "4K cameras with facial recognition",
474
+ "Lifetime equipment warranty"
475
+ ],
476
+ objections: [
477
+ "I already have a basic system that's fine",
478
+ "This seems too expensive for what I need",
479
+ "I'm worried about privacy with all these cameras",
480
+ "Installation sounds disruptive"
481
+ ],
482
+ hints: [
483
+ "Calculate cost per day - less than a cup of coffee for peace of mind",
484
+ "Share crime statistics for their neighborhood",
485
+ "Offer a limited-time discount for signing up today",
486
+ "Highlight insurance premium discounts they may qualify for"
487
+ ]
488
+ },
489
+ 3: {
490
+ title: "Health Insurance Plan",
491
+ description: "Overcome price objections for comprehensive plan",
492
+ product: "Platinum Health Coverage",
493
+ price: "$850/month individual, $2,200/month family",
494
+ features: [
495
+ "$0 deductible option",
496
+ "Access to top-tier hospitals",
497
+ "Alternative therapy coverage",
498
+ "24/7 telehealth services"
499
+ ],
500
+ objections: [
501
+ "I'm healthy and don't need this much coverage",
502
+ "This is way more than I pay now",
503
+ "My current doctor might not be in network",
504
+ "The paperwork looks complicated"
505
+ ],
506
+ hints: [
507
+ "Calculate worst-case scenario costs without this coverage",
508
+ "Highlight preventive care benefits that keep them healthy",
509
+ "Show network directory to prove their doctors are covered",
510
+ "Offer to handle all paperwork for them"
511
+ ]
512
+ }
513
+ };
514
+
515
+ // Initialize speech recognition
516
+ function initSpeechRecognition() {
517
+ recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
518
+ recognition.continuous = true;
519
+ recognition.interimResults = true;
520
+ recognition.lang = 'en-US';
521
+
522
+ recognition.onstart = function() {
523
+ isListening = true;
524
+ recordingStatus.textContent = "Listening...";
525
+ voiceToggle.classList.add('bg-red-600', 'pulse');
526
+ voiceToggle.classList.remove('bg-blue-600');
527
+ voiceToggle.innerHTML = '<i class="fas fa-microphone-slash text-xl"></i>';
528
+ };
529
+
530
+ recognition.onend = function() {
531
+ if (isListening) {
532
+ recognition.start(); // Restart if still supposed to be listening
533
+ }
534
+ };
535
+
536
+ recognition.onresult = function(event) {
537
+ let interimTranscript = '';
538
+ let finalTranscript = '';
539
+
540
+ for (let i = event.resultIndex; i < event.results.length; i++) {
541
+ const transcript = event.results[i][0].transcript;
542
+ if (event.results[i].isFinal) {
543
+ finalTranscript += transcript;
544
+ } else {
545
+ interimTranscript += transcript;
546
+ }
547
+ }
548
+
549
+ textInput.value = finalTranscript || interimTranscript;
550
+
551
+ if (finalTranscript) {
552
+ sendUserMessage(finalTranscript);
553
+ }
554
+ };
555
+
556
+ recognition.onerror = function(event) {
557
+ console.error('Speech recognition error', event.error);
558
+ stopListening();
559
+ recordingStatus.textContent = "Error: " + event.error;
560
+ setTimeout(() => {
561
+ recordingStatus.textContent = "Ready";
562
+ }, 3000);
563
+ };
564
+ }
565
+
566
+ // Initialize speech synthesis
567
+ function speak(text, character) {
568
+ const charData = characters[character];
569
+ const utterance = new SpeechSynthesisUtterance(text);
570
+
571
+ // Set voice characteristics based on character
572
+ utterance.rate = charData.rate;
573
+ utterance.pitch = charData.pitch;
574
+
575
+ // Try to find a matching voice
576
+ const voices = speechSynthesis.getVoices();
577
+ const preferredVoice = voices.find(v => v.name.includes(charData.voice));
578
+ if (preferredVoice) {
579
+ utterance.voice = preferredVoice;
580
+ }
581
+
582
+ // Show typing indicator while speaking
583
+ const typingIndicator = document.createElement('div');
584
+ typingIndicator.className = 'typing-indicator mb-4';
585
+ typingIndicator.innerHTML = '<span></span><span></span><span></span>';
586
+ chatMessages.appendChild(typingIndicator);
587
+
588
+ utterance.onend = function() {
589
+ typingIndicator.remove();
590
+ };
591
+
592
+ speechSynthesis.speak(utterance);
593
+ }
594
+
595
+ // Start listening
596
+ function startListening() {
597
+ if (!recognition) {
598
+ initSpeechRecognition();
599
+ }
600
+
601
+ try {
602
+ recognition.start();
603
+ } catch (e) {
604
+ console.error('Speech recognition start error:', e);
605
+ recordingStatus.textContent = "Error starting mic";
606
+ setTimeout(() => {
607
+ recordingStatus.textContent = "Ready";
608
+ }, 3000);
609
+ }
610
+ }
611
+
612
+ // Stop listening
613
+ function stopListening() {
614
+ if (recognition) {
615
+ recognition.stop();
616
+ }
617
+ isListening = false;
618
+ recordingStatus.textContent = "Ready";
619
+ voiceToggle.classList.remove('bg-red-600', 'pulse');
620
+ voiceToggle.classList.add('bg-blue-600');
621
+ voiceToggle.innerHTML = '<i class="fas fa-microphone text-xl"></i>';
622
+ }
623
+
624
+ // Toggle voice input
625
+ function toggleVoiceInput() {
626
+ if (isListening) {
627
+ stopListening();
628
+ } else {
629
+ startListening();
630
+ }
631
+ }
632
+
633
+ // Add message to chat
634
+ function addMessage(sender, text, isUser = false) {
635
+ const messageDiv = document.createElement('div');
636
+ messageDiv.className = `message-bubble p-4 ${isUser ? 'user-message' : 'bot-message'}`;
637
+ messageDiv.textContent = text;
638
+ chatMessages.appendChild(messageDiv);
639
+
640
+ // Scroll to bottom
641
+ chatMessages.scrollTop = chatMessages.scrollHeight;
642
+
643
+ // Add to transcript
644
+ messages.push({
645
+ sender: isUser ? 'You' : characters[selectedCharacter].name,
646
+ text: text,
647
+ timestamp: new Date().toISOString()
648
+ });
649
+ }
650
+
651
+ // Send user message
652
+ function sendUserMessage(text) {
653
+ if (!text.trim()) return;
654
+
655
+ addMessage('You', text, true);
656
+ textInput.value = '';
657
+
658
+ // Simulate AI response after a delay
659
+ setTimeout(() => {
660
+ generateAIResponse(text);
661
+ }, 1000 + Math.random() * 2000); // Random delay between 1-3 seconds
662
+ }
663
+
664
+ // Generate AI response based on user input
665
+ function generateAIResponse(userInput) {
666
+ const scenario = scenarios[selectedScenario];
667
+ const character = characters[selectedCharacter];
668
+
669
+ // Simple NLP - check for keywords in user input
670
+ const input = userInput.toLowerCase();
671
+
672
+ // Check if user asked about price
673
+ if (input.includes('price') || input.includes('cost') || input.includes('how much')) {
674
+ const responses = [
675
+ `Our ${scenario.product} is priced at ${scenario.price}. I know that's a significant investment, but let me explain the value.`,
676
+ `The total cost is ${scenario.price}. Before you decide, let's discuss how this will actually save you money in the long run.`,
677
+ `It's ${scenario.price}, which I understand is a consideration. But when you factor in the productivity gains, the ROI becomes clear.`
678
+ ];
679
+ const response = responses[Math.floor(Math.random() * responses.length)];
680
+ addMessage(character.name, response);
681
+ speak(response, selectedCharacter);
682
+ return;
683
+ }
684
+
685
+ // Check if user asked about features
686
+ if (input.includes('feature') || input.includes('what does it do') || input.includes('benefit')) {
687
+ const featuresList = scenario.features.map(f => `• ${f}`).join('\n');
688
+ const response = `Here are the key features of our ${scenario.product}:\n${featuresList}\n\nWhich of these would be most valuable for your situation?`;
689
+ addMessage(character.name, response);
690
+ speak(response, selectedCharacter);
691
+ return;
692
+ }
693
+
694
+ // Check if user is agreeing or showing interest
695
+ if (input.includes('yes') || input.includes('agree') || input.includes('interesting') || input.includes('like that')) {
696
+ if (Math.random() > 0.7) { // 30% chance to close the sale
697
+ const closingResponses = [
698
+ "You know what? You've convinced me. Let's move forward with this. Where do I sign?",
699
+ "I have to say, your approach has addressed all my concerns. I'm ready to approve this purchase.",
700
+ "Okay, I'm sold. Let's get the paperwork started."
701
+ ];
702
+ const response = closingResponses[Math.floor(Math.random() * closingResponses.length)];
703
+ addMessage(character.name, response);
704
+ speak(response, selectedCharacter);
705
+
706
+ // End session successfully after a delay
707
+ setTimeout(() => {
708
+ endSessionSuccessfully();
709
+ }, 3000);
710
+ } else {
711
+ const positiveResponses = [
712
+ "That's a good point. I'm starting to see the value here.",
713
+ "Interesting perspective. Tell me more about how this would work in our specific case.",
714
+ "You're making a compelling case. What kind of implementation timeline are we looking at?"
715
+ ];
716
+ const response = positiveResponses[Math.floor(Math.random() * positiveResponses.length)];
717
+ addMessage(character.name, response);
718
+ speak(response, selectedCharacter);
719
+ }
720
+ return;
721
+ }
722
+
723
+ // Default to a random objection or question
724
+ const objections = scenario.objections;
725
+ const randomObjection = objections[Math.floor(Math.random() * objections.length)];
726
+
727
+ const response = `Hmm, ${randomObjection.toLowerCase()} Can you address that concern for me?`;
728
+ addMessage(character.name, response);
729
+ speak(response, selectedCharacter);
730
+ }
731
+
732
+ // Start new session
733
+ function startNewSession() {
734
+ // Get selected character and scenario
735
+ const characterOption = document.querySelector('.character-option.selected');
736
+ const scenarioOption = document.querySelector('.scene-card.selected');
737
+
738
+ if (!characterOption || !scenarioOption) {
739
+ alert('Please select both a character and a scenario');
740
+ return;
741
+ }
742
+
743
+ selectedCharacter = characterOption.dataset.character;
744
+ selectedScenario = scenarioOption.dataset.scene;
745
+
746
+ // Update UI with selected character and scenario
747
+ document.getElementById('current-character-avatar').src = characters[selectedCharacter].avatar;
748
+ document.getElementById('current-character-name').textContent = `${characters[selectedCharacter].name} (${characters[selectedCharacter].role})`;
749
+ document.getElementById('current-scenario').textContent = scenarios[selectedScenario].title;
750
+
751
+ // Switch to chat screen
752
+ setupScreen.classList.add('hidden');
753
+ chatScreen.classList.remove('hidden');
754
+ resultsScreen.classList.add('hidden');
755
+
756
+ // Clear previous messages
757
+ chatMessages.innerHTML = '';
758
+ messages = [];
759
+
760
+ // Start timer
761
+ sessionStartTime = new Date();
762
+
763
+ // Generate opening message
764
+ setTimeout(() => {
765
+ const scenario = scenarios[selectedScenario];
766
+ const character = characters[selectedCharacter];
767
+
768
+ const openingLines = [
769
+ `Thanks for taking the time to discuss your ${scenario.product}. As ${character.role}, I have some specific concerns about how this would work for us.`,
770
+ `I've been reviewing information about your ${scenario.product}. At ${scenario.price}, I need to understand exactly what we're getting.`,
771
+ `Let's talk about your ${scenario.product}. I'm interested but have several questions before we proceed.`
772
+ ];
773
+
774
+ const opening = openingLines[Math.floor(Math.random() * openingLines.length)];
775
+ addMessage(character.name, opening);
776
+ speak(opening, selectedCharacter);
777
+ }, 1500);
778
+ }
779
+
780
+ // End session successfully
781
+ function endSessionSuccessfully() {
782
+ stopListening();
783
+
784
+ // Calculate duration
785
+ const duration = Math.floor((new Date() - sessionStartTime) / 1000);
786
+ const minutes = Math.floor(duration / 60);
787
+ const seconds = duration % 60;
788
+
789
+ // Update results screen
790
+ document.getElementById('result-character').textContent = `${characters[selectedCharacter].name} (${characters[selectedCharacter].role})`;
791
+ document.getElementById('result-scenario').textContent = scenarios[selectedScenario].title;
792
+ document.getElementById('result-duration').textContent = `${minutes}m ${seconds}s`;
793
+ document.getElementById('result-outcome').textContent = "Success - Sale Closed";
794
+ document.getElementById('result-outcome').className = "font-medium text-green-600";
795
+
796
+ // Generate feedback
797
+ document.getElementById('feedback-text').textContent = "Congratulations! You successfully navigated the objections and closed the sale. Here's what worked well:";
798
+
799
+ const strengths = [
800
+ "You addressed pricing concerns effectively",
801
+ "You tailored your pitch to the buyer's specific role",
802
+ "You provided clear value propositions",
803
+ "You built rapport throughout the conversation"
804
+ ];
805
+
806
+ const improvements = [
807
+ "Try to uncover objections earlier in the conversation",
808
+ "Consider using more specific data to support your claims",
809
+ "Practice transitioning more smoothly between topics",
810
+ "Work on your closing techniques to speed up the process"
811
+ ];
812
+
813
+ const strengthsList = document.getElementById('strengths-list');
814
+ const improvementsList = document.getElementById('improvements-list');
815
+
816
+ strengthsList.innerHTML = strengths.slice(0, 2).map(s => `<li>${s}</li>`).join('');
817
+ improvementsList.innerHTML = improvements.slice(0, 2).map(i => `<li>${i}</li>`).join('');
818
+
819
+ // Switch to results screen
820
+ chatScreen.classList.add('hidden');
821
+ resultsScreen.classList.remove('hidden');
822
+ }
823
+
824
+ // End session manually
825
+ function endSessionManually() {
826
+ stopListening();
827
+
828
+ // Calculate duration
829
+ const duration = Math.floor((new Date() - sessionStartTime) / 1000);
830
+ const minutes = Math.floor(duration / 60);
831
+ const seconds = duration % 60;
832
+
833
+ // Update results screen
834
+ document.getElementById('result-character').textContent = `${characters[selectedCharacter].name} (${characters[selectedCharacter].role})`;
835
+ document.getElementById('result-scenario').textContent = scenarios[selectedScenario].title;
836
+ document.getElementById('result-duration').textContent = `${minutes}m ${seconds}s`;
837
+ document.getElementById('result-outcome').textContent = "Practice Ended";
838
+ document.getElementById('result-outcome').className = "font-medium text-blue-600";
839
+
840
+ // Generate feedback
841
+ document.getElementById('feedback-text').textContent = "You ended the session before reaching a conclusion. Here are some observations from your practice:";
842
+
843
+ const strengths = [
844
+ "You asked good probing questions",
845
+ "You demonstrated product knowledge",
846
+ "You maintained professional tone throughout",
847
+ "You listened actively to the buyer's concerns"
848
+ ];
849
+
850
+ const improvements = [
851
+ "Work on handling objections more effectively",
852
+ "Practice transitioning to the close",
853
+ "Try to uncover the real decision criteria earlier",
854
+ "Use more trial closes to gauge interest"
855
+ ];
856
+
857
+ const strengthsList = document.getElementById('strengths-list');
858
+ const improvementsList = document.getElementById('improvements-list');
859
+
860
+ strengthsList.innerHTML = strengths.slice(0, 2).map(s => `<li>${s}</li>`).join('');
861
+ improvementsList.innerHTML = improvements.slice(0, 2).map(i => `<li>${i}</li>`).join('');
862
+
863
+ // Switch to results screen
864
+ chatScreen.classList.add('hidden');
865
+ resultsScreen.classList.remove('hidden');
866
+ }
867
+
868
+ // Show hint
869
+ function showHint() {
870
+ if (!selectedScenario) return;
871
+
872
+ currentHints = [...scenarios[selectedScenario].hints];
873
+ currentHintIndex = 0;
874
+
875
+ hintContent.textContent = currentHints[currentHintIndex];
876
+ hintModal.classList.remove('hidden');
877
+ }
878
+
879
+ // Show next hint
880
+ function showNextHint() {
881
+ currentHintIndex = (currentHintIndex + 1) % currentHints.length;
882
+ hintContent.textContent = currentHints[currentHintIndex];
883
+ }
884
+
885
+ // Show transcript
886
+ function showTranscript() {
887
+ transcriptContent.innerHTML = messages.map(msg => {
888
+ return `<div class="mb-2">
889
+ <div class="flex justify-between items-baseline mb-1">
890
+ <span class="font-medium text-gray-800">${msg.sender}</span>
891
+ <span class="text-xs text-gray-500">${new Date(msg.timestamp).toLocaleTimeString()}</span>
892
+ </div>
893
+ <div class="text-gray-700">${msg.text}</div>
894
+ </div>`;
895
+ }).join('');
896
+
897
+ transcriptModal.classList.remove('hidden');
898
+ }
899
+
900
+ // Download transcript
901
+ function downloadSessionTranscript() {
902
+ const transcriptText = messages.map(msg => {
903
+ return `${msg.sender} (${new Date(msg.timestamp).toLocaleString()}):\n${msg.text}\n\n`;
904
+ }).join('');
905
+
906
+ const blob = new Blob([transcriptText], { type: 'text/plain' });
907
+ const url = URL.createObjectURL(blob);
908
+ const a = document.createElement('a');
909
+ a.href = url;
910
+ a.download = `negotiation-session-${new Date().toISOString().slice(0,10)}.txt`;
911
+ document.body.appendChild(a);
912
+ a.click();
913
+ document.body.removeChild(a);
914
+ URL.revokeObjectURL(url);
915
+ }
916
+
917
+ // Event Listeners
918
+ startSession.addEventListener('click', startNewSession);
919
+ endSession.addEventListener('click', endSessionManually);
920
+ newSession.addEventListener('click', () => {
921
+ resultsScreen.classList.add('hidden');
922
+ setupScreen.classList.remove('hidden');
923
+ });
924
+ viewTranscript.addEventListener('click', showTranscript);
925
+ downloadTranscript.addEventListener('click', downloadSessionTranscript);
926
+
927
+ // Character selection
928
+ document.querySelectorAll('.character-option').forEach(option => {
929
+ option.addEventListener('click', function() {
930
+ document.querySelectorAll('.character-option').forEach(opt => {
931
+ opt.querySelector('.character-avatar').classList.remove('selected', 'border-blue-500');
932
+ });
933
+ this.querySelector('.character-avatar').classList.add('selected', 'border-blue-500');
934
+ });
935
+ });
936
+
937
+ // Scenario selection
938
+ document.querySelectorAll('.scene-card').forEach(card => {
939
+ card.addEventListener('click', function() {
940
+ document.querySelectorAll('.scene-card').forEach(c => {
941
+ c.classList.remove('selected', 'border-blue-500');
942
+ });
943
+ this.classList.add('selected', 'border-blue-500');
944
+ });
945
+ });
946
+
947
+ // Message input
948
+ sendText.addEventListener('click', () => {
949
+ sendUserMessage(textInput.value);
950
+ });
951
+
952
+ textInput.addEventListener('keypress', (e) => {
953
+ if (e.key === 'Enter') {
954
+ sendUserMessage(textInput.value);
955
+ }
956
+ });
957
+
958
+ // Voice input
959
+ voiceToggle.addEventListener('click', toggleVoiceInput);
960
+
961
+ // Hint system
962
+ hintButton.addEventListener('click', showHint);
963
+ closeHint.addEventListener('click', () => {
964
+ hintModal.classList.add('hidden');
965
+ });
966
+ nextHint.addEventListener('click', showNextHint);
967
+
968
+ // Transcript system
969
+ closeTranscript.addEventListener('click', () => {
970
+ transcriptModal.classList.add('hidden');
971
+ });
972
+
973
+ // Initialize speech synthesis voices
974
+ speechSynthesis.onvoiceschanged = function() {
975
+ // Voices are now loaded
976
+ };
977
+
978
+ // Load voices immediately if already available
979
+ if (speechSynthesis.getVoices().length > 0) {
980
+ speechSynthesis.onvoiceschanged();
981
+ }
982
+ });
983
+ </script>
984
+ <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=shaike123/moreter" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
985
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ build a real time natural voice chat for negotiation practice user is the seller and he can pick the mark and the scene from like 5 characters women or man , and he has to smartly convice them to buy or use a product and get the yes for the sale like selling coach practice, should be very realistic and human real time conversation so it will be authantic I'll help you create a real-time voice chat negotiation practice system using the Quasar Framework. We'll use the Web Speech API for voice recognition and synthesis, and implement different character personas for practice