Hugging Face's logo

Spaces:
kubodimo0
/
langpal-practice
Running

App Files Community
kubodimo0 commited on
Commit
c7ba073
·
verified ·
1 Parent(s): fa99764

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +343 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Langpal Practice
3
- emoji: 🦀
4
- colorFrom: red
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: langpal-practice
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: red
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,343 @@
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>LinguaTalk - Language Practice App</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=Poppins:wght@300;400;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Poppins', sans-serif;
14
+ background-color: #f8f9fa;
15
+ }
16
+
17
+ .gradient-bg {
18
+ background: linear-gradient(135deg, #6B73FF 0%, #000DFF 100%);
19
+ }
20
+
21
+ .speech-bubble {
22
+ position: relative;
23
+ background: white;
24
+ border-radius: 1rem;
25
+ padding: 1rem;
26
+ margin: 1rem 0;
27
+ box-shadow: 0 2px 5px rgba(0,0,0,0.1);
28
+ }
29
+
30
+ .user-bubble {
31
+ background: #e3f2fd;
32
+ align-self: flex-end;
33
+ }
34
+
35
+ .bot-bubble {
36
+ background: white;
37
+ align-self: flex-start;
38
+ }
39
+
40
+ .recording-animation {
41
+ animation: pulse 1.5s infinite;
42
+ }
43
+
44
+ @keyframes pulse {
45
+ 0% { opacity: 1; }
46
+ 50% { opacity: 0.5; }
47
+ 100% { opacity: 1; }
48
+ }
49
+
50
+ .progress-ring {
51
+ transition: stroke-dashoffset 0.35s;
52
+ transform: rotate(-90deg);
53
+ transform-origin: 50% 50%;
54
+ }
55
+ </style>
56
+ </head>
57
+ <body class="max-w-md mx-auto bg-gray-50 min-h-screen flex flex-col">
58
+ <!-- Header -->
59
+ <header class="gradient-bg text-white p-4 rounded-b-3xl shadow-lg">
60
+ <div class="flex justify-between items-center">
61
+ <button class="p-2 rounded-full bg-white bg-opacity-20">
62
+ <i class="fas fa-bars text-white"></i>
63
+ </button>
64
+ <div class="text-center">
65
+ <h1 class="text-xl font-bold">LinguaTalk</h1>
66
+ <p class="text-xs opacity-80">Conversation Practice</p>
67
+ </div>
68
+ <button class="p-2 rounded-full bg-white bg-opacity-20">
69
+ <i class="fas fa-user text-white"></i>
70
+ </button>
71
+ </div>
72
+
73
+ <div class="mt-4 flex justify-between items-center">
74
+ <div>
75
+ <p class="text-sm opacity-90">Current language:</p>
76
+ <div class="flex items-center mt-1">
77
+ <span class="font-bold">English</span>
78
+ <i class="fas fa-chevron-down ml-2 text-xs"></i>
79
+ </div>
80
+ </div>
81
+ <div class="flex space-x-2">
82
+ <button class="px-3 py-1 bg-white bg-opacity-20 rounded-full text-xs flex items-center">
83
+ <i class="fas fa-trophy mr-1"></i> 125
84
+ </button>
85
+ <button class="px-3 py-1 bg-white bg-opacity-20 rounded-full text-xs flex items-center">
86
+ <i class="fas fa-fire mr-1"></i> 7-day streak
87
+ </button>
88
+ </div>
89
+ </div>
90
+ </header>
91
+
92
+ <!-- Main Content -->
93
+ <main class="flex-1 p-4 overflow-y-auto">
94
+ <!-- Lesson Progress -->
95
+ <div class="bg-white rounded-xl shadow p-4 mb-4">
96
+ <div class="flex justify-between items-center mb-2">
97
+ <h2 class="font-bold text-gray-700">Daily Conversation</h2>
98
+ <span class="text-xs text-blue-500">2/5 completed</span>
99
+ </div>
100
+ <div class="w-full bg-gray-200 rounded-full h-2">
101
+ <div class="bg-blue-500 h-2 rounded-full" style="width: 40%"></div>
102
+ </div>
103
+ </div>
104
+
105
+ <!-- Conversation Area -->
106
+ <div class="bg-white rounded-xl shadow p-4 mb-4">
107
+ <h3 class="font-semibold text-gray-700 mb-3">Practice: Ordering Food</h3>
108
+
109
+ <div class="flex flex-col space-y-2 max-h-96 overflow-y-auto p-2">
110
+ <!-- Bot Message -->
111
+ <div class="flex items-start space-x-2">
112
+ <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center">
113
+ <i class="fas fa-robot text-blue-500 text-sm"></i>
114
+ </div>
115
+ <div class="speech-bubble bot-bubble">
116
+ <p>Hello! Welcome to our restaurant. What would you like to order today?</p>
117
+ <button class="mt-2 text-blue-500 text-xs flex items-center">
118
+ <i class="fas fa-volume-up mr-1"></i> Listen
119
+ </button>
120
+ </div>
121
+ </div>
122
+
123
+ <!-- User Message -->
124
+ <div class="flex items-start space-x-2 justify-end">
125
+ <div class="speech-bubble user-bubble">
126
+ <p>I would like to order a pizza, please.</p>
127
+ <div class="flex justify-between items-center mt-2">
128
+ <span class="text-xs text-green-500 flex items-center">
129
+ <i class="fas fa-check-circle mr-1"></i> 85%
130
+ </span>
131
+ <button class="text-blue-500 text-xs">
132
+ <i class="fas fa-redo"></i>
133
+ </button>
134
+ </div>
135
+ </div>
136
+ <div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center">
137
+ <i class="fas fa-user text-white text-sm"></i>
138
+ </div>
139
+ </div>
140
+
141
+ <!-- Bot Message -->
142
+ <div class="flex items-start space-x-2">
143
+ <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center">
144
+ <i class="fas fa-robot text-blue-500 text-sm"></i>
145
+ </div>
146
+ <div class="speech-bubble bot-bubble">
147
+ <p>Great choice! What size would you like for your pizza?</p>
148
+ <div class="mt-2 flex space-x-2">
149
+ <button class="text-blue-500 text-xs flex items-center">
150
+ <i class="fas fa-volume-up mr-1"></i> Listen
151
+ </button>
152
+ <button class="text-gray-500 text-xs flex items-center">
153
+ <i class="fas fa-lightbulb mr-1"></i> Hint
154
+ </button>
155
+ </div>
156
+ </div>
157
+ </div>
158
+
159
+ <!-- Suggested Responses -->
160
+ <div class="bg-blue-50 rounded-lg p-3 mt-2">
161
+ <p class="text-xs text-gray-600 mb-2">Try saying:</p>
162
+ <div class="flex flex-wrap gap-2">
163
+ <button class="px-3 py-1 bg-white rounded-full text-xs shadow-sm">Medium, please</button>
164
+ <button class="px-3 py-1 bg-white rounded-full text-xs shadow-sm">I'd like a large pizza</button>
165
+ <button class="px-3 py-1 bg-white rounded-full text-xs shadow-sm">Small size is fine</button>
166
+ </div>
167
+ </div>
168
+ </div>
169
+ </div>
170
+
171
+ <!-- Pronunciation Feedback -->
172
+ <div class="bg-white rounded-xl shadow p-4 mb-4">
173
+ <h3 class="font-semibold text-gray-700 mb-3">Pronunciation Feedback</h3>
174
+ <div class="flex items-center justify-between">
175
+ <div class="flex items-center space-x-2">
176
+ <div class="relative">
177
+ <svg class="w-16 h-16">
178
+ <circle
179
+ class="text-gray-200"
180
+ stroke-width="6"
181
+ stroke="currentColor"
182
+ fill="transparent"
183
+ r="30"
184
+ cx="32"
185
+ cy="32"
186
+ />
187
+ <circle
188
+ class="text-green-500 progress-ring"
189
+ stroke-width="6"
190
+ stroke-linecap="round"
191
+ stroke="currentColor"
192
+ fill="transparent"
193
+ r="30"
194
+ cx="32"
195
+ cy="32"
196
+ stroke-dasharray="188.49555921538757"
197
+ stroke-dashoffset="28.274333882308138"
198
+ />
199
+ </svg>
200
+ <span class="absolute inset-0 flex items-center justify-center text-sm font-bold">85%</span>
201
+ </div>
202
+ <div>
203
+ <p class="text-sm font-medium">Good job!</p>
204
+ <p class="text-xs text-gray-500">Focus on "medium" pronunciation</p>
205
+ </div>
206
+ </div>
207
+ <button class="text-blue-500 text-sm flex items-center">
208
+ <i class="fas fa-info-circle mr-1"></i> Details
209
+ </button>
210
+ </div>
211
+ </div>
212
+ </main>
213
+
214
+ <!-- Footer with Recording Controls -->
215
+ <footer class="bg-white border-t border-gray-200 p-4 shadow-lg">
216
+ <div class="flex flex-col items-center">
217
+ <!-- Recording Indicator -->
218
+ <div id="recordingIndicator" class="hidden mb-2 text-red-500 text-sm flex items-center">
219
+ <div class="w-2 h-2 rounded-full bg-red-500 mr-1 recording-animation"></div>
220
+ Recording...
221
+ </div>
222
+
223
+ <!-- Main Recording Button -->
224
+ <button id="recordButton" class="w-16 h-16 rounded-full bg-blue-500 text-white flex items-center justify-center shadow-lg hover:bg-blue-600 transition-all">
225
+ <i class="fas fa-microphone text-xl"></i>
226
+ </button>
227
+
228
+ <!-- Secondary Controls -->
229
+ <div class="flex justify-between w-full mt-4 px-4">
230
+ <button class="p-2 rounded-full bg-gray-100 text-gray-600">
231
+ <i class="fas fa-keyboard"></i>
232
+ </button>
233
+ <button class="p-2 rounded-full bg-gray-100 text-gray-600">
234
+ <i class="fas fa-translate"></i>
235
+ </button>
236
+ <button class="p-2 rounded-full bg-gray-100 text-gray-600">
237
+ <i class="fas fa-question-circle"></i>
238
+ </button>
239
+ </div>
240
+ </div>
241
+ </footer>
242
+
243
+ <script>
244
+ // Toggle recording state
245
+ const recordButton = document.getElementById('recordButton');
246
+ const recordingIndicator = document.getElementById('recordingIndicator');
247
+
248
+ recordButton.addEventListener('click', function() {
249
+ if (recordingIndicator.classList.contains('hidden')) {
250
+ // Start recording
251
+ recordingIndicator.classList.remove('hidden');
252
+ recordButton.innerHTML = '<i class="fas fa-stop text-xl"></i>';
253
+ recordButton.classList.remove('bg-blue-500');
254
+ recordButton.classList.add('bg-red-500');
255
+ } else {
256
+ // Stop recording
257
+ recordingIndicator.classList.add('hidden');
258
+ recordButton.innerHTML = '<i class="fas fa-microphone text-xl"></i>';
259
+ recordButton.classList.remove('bg-red-500');
260
+ recordButton.classList.add('bg-blue-500');
261
+
262
+ // Simulate processing
263
+ setTimeout(() => {
264
+ // Add new user message to conversation
265
+ const conversationArea = document.querySelector('.flex.flex-col.space-y-2');
266
+ const newMessage = document.createElement('div');
267
+ newMessage.className = 'flex items-start space-x-2 justify-end';
268
+ newMessage.innerHTML = `
269
+ <div class="speech-bubble user-bubble">
270
+ <p>Medium, please</p>
271
+ <div class="flex justify-between items-center mt-2">
272
+ <span class="text-xs text-green-500 flex items-center">
273
+ <i class="fas fa-check-circle mr-1"></i> 92%
274
+ </span>
275
+ <button class="text-blue-500 text-xs">
276
+ <i class="fas fa-redo"></i>
277
+ </button>
278
+ </div>
279
+ </div>
280
+ <div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center">
281
+ <i class="fas fa-user text-white text-sm"></i>
282
+ </div>
283
+ `;
284
+ conversationArea.appendChild(newMessage);
285
+
286
+ // Scroll to bottom
287
+ conversationArea.scrollTop = conversationArea.scrollHeight;
288
+
289
+ // Simulate bot response after delay
290
+ setTimeout(() => {
291
+ const botResponse = document.createElement('div');
292
+ botResponse.className = 'flex items-start space-x-2';
293
+ botResponse.innerHTML = `
294
+ <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center">
295
+ <i class="fas fa-robot text-blue-500 text-sm"></i>
296
+ </div>
297
+ <div class="speech-bubble bot-bubble">
298
+ <p>Excellent! Would you like any drinks with that?</p>
299
+ <div class="mt-2 flex space-x-2">
300
+ <button class="text-blue-500 text-xs flex items-center">
301
+ <i class="fas fa-volume-up mr-1"></i> Listen
302
+ </button>
303
+ <button class="text-gray-500 text-xs flex items-center">
304
+ <i class="fas fa-lightbulb mr-1"></i> Hint
305
+ </button>
306
+ </div>
307
+ </div>
308
+ `;
309
+ conversationArea.appendChild(botResponse);
310
+
311
+ // Add new suggested responses
312
+ const suggestedResponses = document.createElement('div');
313
+ suggestedResponses.className = 'bg-blue-50 rounded-lg p-3 mt-2';
314
+ suggestedResponses.innerHTML = `
315
+ <p class="text-xs text-gray-600 mb-2">Try saying:</p>
316
+ <div class="flex flex-wrap gap-2">
317
+ <button class="px-3 py-1 bg-white rounded-full text-xs shadow-sm">Just water, please</button>
318
+ <button class="px-3 py-1 bg-white rounded-full text-xs shadow-sm">I'll have a soda</button>
319
+ <button class="px-3 py-1 bg-white rounded-full text-xs shadow-sm">No drinks, thanks</button>
320
+ </div>
321
+ `;
322
+ conversationArea.appendChild(suggestedResponses);
323
+
324
+ // Scroll to bottom
325
+ conversationArea.scrollTop = conversationArea.scrollHeight;
326
+ }, 1500);
327
+ }, 1000);
328
+ }
329
+ });
330
+
331
+ // Add click handlers for suggested responses
332
+ document.addEventListener('click', function(e) {
333
+ if (e.target.classList.contains('shadow-sm')) {
334
+ // Simulate the user selecting a suggested response
335
+ recordButton.click(); // Start recording
336
+ setTimeout(() => {
337
+ recordButton.click(); // Stop recording
338
+ }, 500);
339
+ }
340
+ });
341
+ </script>
342
+ <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=kubodimo0/langpal-practice" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
343
+ </html>