Hugging Face's logo

Spaces:
JayStormX8
/
bottleneck-remover
Running

App Files Community
JayStormX8 commited on
Commit
a3fb002
·
verified ·
1 Parent(s): 069e800

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +780 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Bottleneck Remover
3
- emoji: 🚀
4
- colorFrom: indigo
5
- colorTo: indigo
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: bottleneck-remover
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: pink
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,780 @@
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>Bottleneck Solver - AI-Powered Workflow Optimization</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
+ @keyframes fadeIn {
11
+ from { opacity: 0; transform: translateY(20px); }
12
+ to { opacity: 1; transform: translateY(0); }
13
+ }
14
+
15
+ .fade-in {
16
+ animation: fadeIn 0.6s ease-out forwards;
17
+ }
18
+
19
+ .gradient-bg {
20
+ background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
21
+ }
22
+
23
+ .solution-card {
24
+ transition: all 0.3s ease;
25
+ }
26
+
27
+ .solution-card:hover {
28
+ transform: translateY(-5px);
29
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
30
+ }
31
+
32
+ .typewriter {
33
+ overflow: hidden;
34
+ border-right: .15em solid #6e8efb;
35
+ white-space: nowrap;
36
+ margin: 0 auto;
37
+ letter-spacing: .15em;
38
+ animation:
39
+ typing 3.5s steps(40, end),
40
+ blink-caret .75s step-end infinite;
41
+ }
42
+
43
+ @keyframes typing {
44
+ from { width: 0 }
45
+ to { width: 100% }
46
+ }
47
+
48
+ @keyframes blink-caret {
49
+ from, to { border-color: transparent }
50
+ 50% { border-color: #6e8efb; }
51
+ }
52
+
53
+ .modal {
54
+ transition: opacity 0.3s ease, transform 0.3s ease;
55
+ }
56
+
57
+ .modal-content {
58
+ transform: translateY(-20px);
59
+ transition: transform 0.3s ease;
60
+ }
61
+
62
+ .modal.active {
63
+ opacity: 1;
64
+ pointer-events: auto;
65
+ }
66
+
67
+ .modal.active .modal-content {
68
+ transform: translateY(0);
69
+ }
70
+
71
+ .ai-thinking {
72
+ position: relative;
73
+ height: 60px;
74
+ width: 60px;
75
+ }
76
+
77
+ .ai-thinking-dot {
78
+ position: absolute;
79
+ width: 10px;
80
+ height: 10px;
81
+ background: #6e8efb;
82
+ border-radius: 50%;
83
+ animation: aiThinking 1.5s infinite ease-in-out;
84
+ }
85
+
86
+ .ai-thinking-dot:nth-child(1) {
87
+ top: 0;
88
+ left: 25px;
89
+ animation-delay: 0s;
90
+ }
91
+
92
+ .ai-thinking-dot:nth-child(2) {
93
+ top: 10px;
94
+ left: 10px;
95
+ animation-delay: 0.2s;
96
+ }
97
+
98
+ .ai-thinking-dot:nth-child(3) {
99
+ top: 25px;
100
+ left: 0;
101
+ animation-delay: 0.4s;
102
+ }
103
+
104
+ .ai-thinking-dot:nth-child(4) {
105
+ top: 45px;
106
+ left: 10px;
107
+ animation-delay: 0.6s;
108
+ }
109
+
110
+ .ai-thinking-dot:nth-child(5) {
111
+ top: 55px;
112
+ left: 25px;
113
+ animation-delay: 0.8s;
114
+ }
115
+
116
+ .ai-thinking-dot:nth-child(6) {
117
+ top: 45px;
118
+ left: 45px;
119
+ animation-delay: 1s;
120
+ }
121
+
122
+ .ai-thinking-dot:nth-child(7) {
123
+ top: 25px;
124
+ left: 55px;
125
+ animation-delay: 1.2s;
126
+ }
127
+
128
+ .ai-thinking-dot:nth-child(8) {
129
+ top: 10px;
130
+ left: 45px;
131
+ animation-delay: 1.4s;
132
+ }
133
+
134
+ @keyframes aiThinking {
135
+ 0%, 100% {
136
+ transform: scale(0.8);
137
+ opacity: 0.5;
138
+ }
139
+ 50% {
140
+ transform: scale(1.2);
141
+ opacity: 1;
142
+ }
143
+ }
144
+
145
+ .toast {
146
+ position: fixed;
147
+ bottom: 20px;
148
+ right: 20px;
149
+ background: #4f46e5;
150
+ color: white;
151
+ padding: 12px 24px;
152
+ border-radius: 8px;
153
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
154
+ transform: translateY(100px);
155
+ opacity: 0;
156
+ transition: all 0.3s ease;
157
+ z-index: 1000;
158
+ }
159
+
160
+ .toast.show {
161
+ transform: translateY(0);
162
+ opacity: 1;
163
+ }
164
+
165
+ .api-key-badge {
166
+ position: fixed;
167
+ bottom: 20px;
168
+ left: 20px;
169
+ background: rgba(255, 255, 255, 0.9);
170
+ border: 1px solid #e5e7eb;
171
+ border-radius: 8px;
172
+ padding: 8px 12px;
173
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
174
+ display: flex;
175
+ align-items: center;
176
+ z-index: 100;
177
+ }
178
+ </style>
179
+ </head>
180
+ <body class="min-h-screen bg-gray-50">
181
+ <!-- API Key Modal -->
182
+ <div id="apiKeyModal" class="modal fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 opacity-0 pointer-events-none z-50">
183
+ <div class="modal-content bg-white rounded-lg shadow-xl p-8 max-w-md w-full">
184
+ <div class="flex items-center mb-6">
185
+ <i class="fas fa-key text-purple-500 text-2xl mr-3"></i>
186
+ <h2 class="text-2xl font-bold text-gray-800">Enter Your DeepSeek API Key</h2>
187
+ </div>
188
+
189
+ <p class="text-gray-600 mb-6">To use AI-powered bottleneck solving, please provide your DeepSeek API key. We don't store your key - it's only used for this session.</p>
190
+
191
+ <div class="mb-6">
192
+ <label for="apiKeyInput" class="block text-sm font-medium text-gray-700 mb-2">API Key</label>
193
+ <input type="password" id="apiKeyInput" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-purple-500 focus:border-purple-500" placeholder="sk-xxxxxxxxxxxxxxxx">
194
+ <p class="text-xs text-gray-500 mt-2">Get your API key from <a href="https://platform.deepseek.com" target="_blank" class="text-purple-600 hover:underline">DeepSeek Platform</a></p>
195
+ </div>
196
+
197
+ <div class="flex justify-end space-x-3">
198
+ <button id="cancelApiKeyBtn" class="px-4 py-2 rounded-lg border border-gray-300 text-gray-700 hover:bg-gray-100 transition">Cancel</button>
199
+ <button id="saveApiKeyBtn" class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-2 rounded-lg font-medium transition">Save & Continue</button>
200
+ </div>
201
+ </div>
202
+ </div>
203
+
204
+ <!-- API Key Badge -->
205
+ <div id="apiKeyBadge" class="api-key-badge hidden">
206
+ <span class="text-sm font-medium text-gray-700 mr-2">API Key: <span id="apiKeyPreview"></span></span>
207
+ <button id="changeApiKeyBtn" class="text-xs text-purple-600 hover:text-purple-800">Change</button>
208
+ </div>
209
+
210
+ <!-- Toast Notification -->
211
+ <div id="toast" class="toast">
212
+ <div class="flex items-center">
213
+ <i class="fas fa-info-circle mr-2"></i>
214
+ <span id="toastMessage"></span>
215
+ </div>
216
+ </div>
217
+
218
+ <!-- Main Content -->
219
+ <div class="gradient-bg text-white py-12 px-4">
220
+ <div class="max-w-4xl mx-auto text-center">
221
+ <h1 class="text-4xl md:text-5xl font-bold mb-4">Bottleneck Solver</h1>
222
+ <p class="text-xl md:text-2xl mb-8">AI-powered workflow optimization to boost your productivity</p>
223
+
224
+ <div class="bg-white rounded-lg shadow-xl p-6 max-w-2xl mx-auto">
225
+ <div class="flex items-center mb-4">
226
+ <i class="fas fa-tachometer-alt text-purple-500 text-2xl mr-3"></i>
227
+ <h2 class="text-2xl font-semibold text-gray-800">What's slowing you down?</h2>
228
+ </div>
229
+
230
+ <div class="relative">
231
+ <textarea id="bottleneckInput" rows="3" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-purple-500 focus:border-purple-500 text-gray-700" placeholder="Describe your bottleneck (e.g. 'Too many meetings interrupting deep work', 'Manual data entry taking too long')"></textarea>
232
+ <div class="absolute right-3 bottom-3">
233
+ <button id="solveBtn" class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-2 rounded-lg font-medium transition duration-300 flex items-center">
234
+ <i class="fas fa-lightbulb mr-2"></i> Solve It
235
+ </button>
236
+ </div>
237
+ </div>
238
+
239
+ <div class="mt-4 text-left">
240
+ <button id="useAiToggle" class="text-sm text-purple-600 hover:text-purple-800 flex items-center">
241
+ <span id="aiToggleIcon" class="inline-block w-5 h-5 rounded-full border-2 border-purple-500 mr-2 flex items-center justify-center">
242
+ <i class="fas fa-check text-xs text-purple-500"></i>
243
+ </span>
244
+ Use AI-powered analysis (DeepSeek)
245
+ </button>
246
+ </div>
247
+ </div>
248
+ </div>
249
+ </div>
250
+
251
+ <div id="loadingSection" class="hidden max-w-2xl mx-auto my-12 text-center">
252
+ <div class="inline-block p-6 bg-white rounded-lg shadow-lg">
253
+ <div class="flex flex-col items-center justify-center">
254
+ <div class="ai-thinking mb-4">
255
+ <div class="ai-thinking-dot"></div>
256
+ <div class="ai-thinking-dot"></div>
257
+ <div class="ai-thinking-dot"></div>
258
+ <div class="ai-thinking-dot"></div>
259
+ <div class="ai-thinking-dot"></div>
260
+ <div class="ai-thinking-dot"></div>
261
+ <div class="ai-thinking-dot"></div>
262
+ <div class="ai-thinking-dot"></div>
263
+ </div>
264
+ <span class="text-xl font-medium text-gray-700">DeepSeek AI is analyzing your bottleneck...</span>
265
+ <p class="text-gray-500 mt-2">This may take a few moments</p>
266
+ </div>
267
+ </div>
268
+ </div>
269
+
270
+ <div id="resultsSection" class="hidden max-w-4xl mx-auto my-12 px-4">
271
+ <div class="bg-white rounded-lg shadow-xl p-8 mb-8">
272
+ <div class="flex items-center mb-6">
273
+ <i class="fas fa-stream text-purple-500 text-3xl mr-4"></i>
274
+ <h2 class="text-3xl font-bold text-gray-800">Your Bottleneck Analysis</h2>
275
+ <span id="aiBadge" class="ml-auto bg-purple-100 text-purple-800 text-xs font-medium px-2.5 py-0.5 rounded-full flex items-center">
276
+ <i class="fas fa-robot text-purple-500 mr-1"></i> AI-Powered
277
+ </span>
278
+ </div>
279
+
280
+ <div id="bottleneckDisplay" class="mb-8 p-4 bg-gray-100 rounded-lg">
281
+ <p class="text-lg text-gray-700 italic">"<span id="userBottleneckText"></span>"</p>
282
+ </div>
283
+
284
+ <div class="mb-8">
285
+ <div class="flex items-center mb-4">
286
+ <i class="fas fa-chart-line text-purple-500 text-2xl mr-3"></i>
287
+ <h3 class="text-xl font-semibold text-gray-800">Root Cause</h3>
288
+ </div>
289
+ <p id="rootCause" class="text-gray-700 ml-10"></p>
290
+ </div>
291
+
292
+ <div>
293
+ <div class="flex items-center mb-4">
294
+ <i class="fas fa-bolt text-purple-500 text-2xl mr-3"></i>
295
+ <h3 class="text-xl font-semibold text-gray-800">Streamlined Solutions</h3>
296
+ </div>
297
+ <div id="solutionsContainer" class="grid md:grid-cols-2 gap-6"></div>
298
+ </div>
299
+ </div>
300
+
301
+ <div class="text-center mt-8">
302
+ <button id="newBottleneckBtn" class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-3 rounded-lg font-medium transition duration-300 inline-flex items-center">
303
+ <i class="fas fa-redo mr-2"></i> Solve Another Bottleneck
304
+ </button>
305
+ </div>
306
+ </div>
307
+
308
+ <div class="max-w-4xl mx-auto px-4 py-12">
309
+ <div class="bg-white rounded-lg shadow-xl p-8">
310
+ <h2 class="text-2xl font-bold text-center text-gray-800 mb-6">Common Bottlenecks & Solutions</h2>
311
+ <div class="grid md:grid-cols-3 gap-6">
312
+ <div class="solution-card bg-gray-50 p-6 rounded-lg border border-gray-200">
313
+ <div class="text-purple-500 text-3xl mb-4">
314
+ <i class="fas fa-calendar-times"></i>
315
+ </div>
316
+ <h3 class="font-semibold text-lg mb-2">Meeting Overload</h3>
317
+ <p class="text-gray-600 mb-3">Too many meetings interrupting workflow</p>
318
+ <ul class="text-sm text-gray-700 space-y-1">
319
+ <li><i class="fas fa-check-circle text-green-500 mr-2"></i> Implement no-meeting days</li>
320
+ <li><i class="fas fa-check-circle text-green-500 mr-2"></i> Set strict time limits</li>
321
+ <li><i class="fas fa-check-circle text-green-500 mr-2"></i> Require clear agendas</li>
322
+ </ul>
323
+ </div>
324
+
325
+ <div class="solution-card bg-gray-50 p-6 rounded-lg border border-gray-200">
326
+ <div class="text-purple-500 text-3xl mb-4">
327
+ <i class="fas fa-tasks"></i>
328
+ </div>
329
+ <h3 class="font-semibold text-lg mb-2">Task Switching</h3>
330
+ <p class="text-gray-600 mb-3">Constant context switching reducing productivity</p>
331
+ <ul class="text-sm text-gray-700 space-y-1">
332
+ <li><i class="fas fa-check-circle text-green-500 mr-2"></i> Time blocking technique</li>
333
+ <li><i class="fas fa-check-circle text-green-500 mr-2"></i> Pomodoro method</li>
334
+ <li><i class="fas fa-check-circle text-green-500 mr-2"></i> Single-tasking focus</li>
335
+ </ul>
336
+ </div>
337
+
338
+ <div class="solution-card bg-gray-50 p-6 rounded-lg border border-gray-200">
339
+ <div class="text-purple-500 text-3xl mb-4">
340
+ <i class="fas fa-database"></i>
341
+ </div>
342
+ <h3 class="font-semibold text-lg mb-2">Manual Processes</h3>
343
+ <p class="text-gray-600 mb-3">Repetitive manual work wasting time</p>
344
+ <ul class="text-sm text-gray-700 space-y-1">
345
+ <li><i class="fas fa-check-circle text-green-500 mr-2"></i> Automate with Zapier/IFTTT</li>
346
+ <li><i class="fas fa-check-circle text-green-500 mr-2"></i> Create templates</li>
347
+ <li><i class="fas fa-check-circle text-green-500 mr-2"></i> Use keyboard shortcuts</li>
348
+ </ul>
349
+ </div>
350
+ </div>
351
+ </div>
352
+ </div>
353
+
354
+ <footer class="bg-gray-800 text-white py-8">
355
+ <div class="max-w-4xl mx-auto px-4 text-center">
356
+ <p class="mb-4">Bottleneck Solver - AI-powered workflow optimization</p>
357
+ <div class="flex justify-center space-x-4 mb-4">
358
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter text-xl"></i></a>
359
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin text-xl"></i></a>
360
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-github text-xl"></i></a>
361
+ </div>
362
+ <p class="text-sm text-gray-400">© 2023 Bottleneck Solver. All rights reserved.</p>
363
+ </div>
364
+ </footer>
365
+
366
+ <script>
367
+ document.addEventListener('DOMContentLoaded', function() {
368
+ // DOM Elements
369
+ const solveBtn = document.getElementById('solveBtn');
370
+ const newBottleneckBtn = document.getElementById('newBottleneckBtn');
371
+ const bottleneckInput = document.getElementById('bottleneckInput');
372
+ const loadingSection = document.getElementById('loadingSection');
373
+ const resultsSection = document.getElementById('resultsSection');
374
+ const userBottleneckText = document.getElementById('userBottleneckText');
375
+ const rootCause = document.getElementById('rootCause');
376
+ const solutionsContainer = document.getElementById('solutionsContainer');
377
+ const apiKeyModal = document.getElementById('apiKeyModal');
378
+ const apiKeyInput = document.getElementById('apiKeyInput');
379
+ const saveApiKeyBtn = document.getElementById('saveApiKeyBtn');
380
+ const cancelApiKeyBtn = document.getElementById('cancelApiKeyBtn');
381
+ const useAiToggle = document.getElementById('useAiToggle');
382
+ const aiToggleIcon = document.getElementById('aiToggleIcon');
383
+ const aiBadge = document.getElementById('aiBadge');
384
+ const toast = document.getElementById('toast');
385
+ const toastMessage = document.getElementById('toastMessage');
386
+ const apiKeyBadge = document.getElementById('apiKeyBadge');
387
+ const apiKeyPreview = document.getElementById('apiKeyPreview');
388
+ const changeApiKeyBtn = document.getElementById('changeApiKeyBtn');
389
+
390
+ // State
391
+ let useAi = true;
392
+ let deepSeekApiKey = localStorage.getItem('deepSeekApiKey') || '';
393
+
394
+ // Initialize UI based on stored API key
395
+ if (deepSeekApiKey) {
396
+ updateApiKeyBadge();
397
+ }
398
+
399
+ // Event Listeners
400
+ solveBtn.addEventListener('click', solveBottleneck);
401
+ newBottleneckBtn.addEventListener('click', resetForm);
402
+ bottleneckInput.addEventListener('keypress', function(e) {
403
+ if (e.key === 'Enter' && !e.shiftKey) {
404
+ e.preventDefault();
405
+ solveBottleneck();
406
+ }
407
+ });
408
+ saveApiKeyBtn.addEventListener('click', saveApiKey);
409
+ cancelApiKeyBtn.addEventListener('click', closeApiKeyModal);
410
+ useAiToggle.addEventListener('click', toggleAiUsage);
411
+ changeApiKeyBtn.addEventListener('click', showApiKeyModal);
412
+
413
+ // Functions
414
+ function solveBottleneck() {
415
+ const bottleneck = bottleneckInput.value.trim();
416
+ if (!bottleneck) {
417
+ showToast('Please describe your bottleneck first');
418
+ return;
419
+ }
420
+
421
+ // Check if we need API key for AI analysis
422
+ if (useAi && !deepSeekApiKey) {
423
+ showApiKeyModal();
424
+ return;
425
+ }
426
+
427
+ // Show loading state
428
+ bottleneckInput.disabled = true;
429
+ solveBtn.disabled = true;
430
+ solveBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Solving...';
431
+ loadingSection.classList.remove('hidden');
432
+
433
+ if (useAi) {
434
+ // Use AI analysis
435
+ analyzeWithAI(bottleneck);
436
+ } else {
437
+ // Use predefined solutions
438
+ setTimeout(() => {
439
+ showResults(bottleneck, false);
440
+ }, 1500);
441
+ }
442
+ }
443
+
444
+ async function analyzeWithAI(bottleneck) {
445
+ try {
446
+ const response = await fetch('https://api.deepseek.com/v1/chat/completions', {
447
+ method: 'POST',
448
+ headers: {
449
+ 'Content-Type': 'application/json',
450
+ 'Authorization': `Bearer ${deepSeekApiKey}`
451
+ },
452
+ body: JSON.stringify({
453
+ model: "deepseek-chat",
454
+ messages: [
455
+ {
456
+ role: "system",
457
+ content: `You are a productivity expert specialized in identifying workflow bottlenecks and providing actionable solutions.
458
+ Analyze the user's bottleneck, identify the root cause, and provide 4 specific solutions with brief descriptions.
459
+ Format the response as JSON with the following structure:
460
+ {
461
+ "rootCause": "Detailed analysis of the root cause...",
462
+ "solutions": [
463
+ {
464
+ "title": "Solution 1",
465
+ "description": "Detailed description...",
466
+ "icon": "font-awesome-icon-class"
467
+ },
468
+ ... (3 more solutions)
469
+ ]
470
+ }
471
+ Use appropriate Font Awesome icons for each solution. Keep the response concise but insightful.`
472
+ },
473
+ {
474
+ role: "user",
475
+ content: bottleneck
476
+ }
477
+ ],
478
+ temperature: 0.7,
479
+ max_tokens: 1000
480
+ })
481
+ });
482
+
483
+ if (!response.ok) {
484
+ const errorData = await response.json();
485
+ throw new Error(errorData.error?.message || `API request failed with status ${response.status}`);
486
+ }
487
+
488
+ const data = await response.json();
489
+
490
+ // Extract the AI response content
491
+ const aiResponseContent = data.choices[0].message.content;
492
+
493
+ // Parse the JSON response from the AI
494
+ let aiResponse;
495
+ try {
496
+ aiResponse = JSON.parse(aiResponseContent);
497
+ } catch (e) {
498
+ // If parsing fails, try to extract JSON from markdown code blocks
499
+ const jsonMatch = aiResponseContent.match(/```json([\s\S]*?)```/);
500
+ if (jsonMatch) {
501
+ aiResponse = JSON.parse(jsonMatch[1].trim());
502
+ } else {
503
+ throw new Error("AI response format is invalid");
504
+ }
505
+ }
506
+
507
+ showResults(bottleneck, true, aiResponse);
508
+ } catch (error) {
509
+ console.error('AI analysis failed:', error);
510
+ showToast(`AI analysis failed: ${error.message}. Falling back to standard solutions.`);
511
+ showResults(bottleneck, false);
512
+ }
513
+ }
514
+
515
+ function showResults(bottleneck, isAiGenerated, aiResponse = null) {
516
+ loadingSection.classList.add('hidden');
517
+ resultsSection.classList.remove('hidden');
518
+
519
+ // Reset button state
520
+ bottleneckInput.disabled = false;
521
+ solveBtn.disabled = false;
522
+ solveBtn.innerHTML = '<i class="fas fa-lightbulb mr-2"></i> Solve It';
523
+
524
+ // Display user's bottleneck
525
+ userBottleneckText.textContent = bottleneck;
526
+
527
+ // Show AI badge if AI was used
528
+ aiBadge.style.display = isAiGenerated ? 'flex' : 'none';
529
+
530
+ if (isAiGenerated && aiResponse) {
531
+ // Display AI-generated analysis
532
+ rootCause.textContent = aiResponse.rootCause;
533
+
534
+ // Display solutions
535
+ solutionsContainer.innerHTML = '';
536
+ aiResponse.solutions.forEach((solution, index) => {
537
+ const solutionCard = document.createElement('div');
538
+ solutionCard.className = `solution-card bg-white p-6 rounded-lg border border-gray-200 fade-in`;
539
+ solutionCard.style.animationDelay = `${index * 0.1}s`;
540
+
541
+ solutionCard.innerHTML = `
542
+ <div class="flex items-start mb-4">
543
+ <div class="bg-purple-100 p-3 rounded-full mr-4">
544
+ <i class="fas ${solution.icon || 'fa-lightbulb'} text-purple-600 text-xl"></i>
545
+ </div>
546
+ <div>
547
+ <h3 class="font-semibold text-lg text-gray-800">${solution.title}</h3>
548
+ <p class="text-gray-600">${solution.description}</p>
549
+ </div>
550
+ </div>
551
+ `;
552
+
553
+ solutionsContainer.appendChild(solutionCard);
554
+ });
555
+ } else {
556
+ // Use predefined solutions
557
+ let bottleneckType = 'default';
558
+ const lowerBottleneck = bottleneck.toLowerCase();
559
+
560
+ if (lowerBottleneck.includes('meeting') || lowerBottleneck.includes('discussion')) {
561
+ bottleneckType = 'meeting';
562
+ } else if (lowerBottleneck.includes('task') || lowerBottleneck.includes('switch') || lowerBottleneck.includes('focus')) {
563
+ bottleneckType = 'task';
564
+ } else if (lowerBottleneck.includes('manual') || lowerBottleneck.includes('repetitive') || lowerBottleneck.includes('data entry')) {
565
+ bottleneckType = 'manual';
566
+ }
567
+
568
+ // Sample solutions database
569
+ const solutionsDatabase = {
570
+ 'meeting': {
571
+ rootCause: "Excessive meetings often stem from lack of clear communication protocols and undefined decision-making processes, leading to unnecessary discussions.",
572
+ solutions: [
573
+ {
574
+ title: "Meeting Audit",
575
+ description: "Review all recurring meetings and cancel those without clear objectives or outcomes.",
576
+ icon: "fa-calendar-check"
577
+ },
578
+ {
579
+ title: "Async Alternatives",
580
+ description: "Replace status meetings with async updates via Slack or email for non-critical communication.",
581
+ icon: "fa-comments"
582
+ },
583
+ {
584
+ title: "Strict Time Boxing",
585
+ description: "Implement 25-minute meetings (default calendar setting) to force focus and efficiency.",
586
+ icon: "fa-stopwatch"
587
+ },
588
+ {
589
+ title: "Decision-First Approach",
590
+ description: "Require meeting requests to specify what decision needs to be made, reducing discussion-only meetings.",
591
+ icon: "fa-check-circle"
592
+ }
593
+ ]
594
+ },
595
+ 'task': {
596
+ rootCause: "Frequent task switching creates cognitive load and reduces deep work capacity by constantly resetting mental context.",
597
+ solutions: [
598
+ {
599
+ title: "Time Blocking",
600
+ description: "Schedule specific blocks for different types of work (creative, admin, communication).",
601
+ icon: "fa-clock"
602
+ },
603
+ {
604
+ title: "Theme Days",
605
+ description: "Dedicate entire days to specific types of work (e.g., Monday for planning, Tuesday for creative work).",
606
+ icon: "fa-calendar-day"
607
+ },
608
+ {
609
+ title: "Focus Sessions",
610
+ description: "Use 90-minute uninterrupted focus sessions with strict no-interruption rules.",
611
+ icon: "fa-brain"
612
+ },
613
+ {
614
+ title: "Task Batching",
615
+ description: "Group similar small tasks together (emails, calls, admin) into designated time slots.",
616
+ icon: "fa-tasks"
617
+ }
618
+ ]
619
+ },
620
+ 'manual': {
621
+ rootCause: "Manual processes persist due to initial setup costs of automation and lack of documentation about repetitive tasks.",
622
+ solutions: [
623
+ {
624
+ title: "Automation Audit",
625
+ description: "Document all repetitive tasks and identify automation opportunities (Zapier, scripts, macros).",
626
+ icon: "fa-robot"
627
+ },
628
+ {
629
+ title: "Template Library",
630
+ description: "Create templates for frequent documents, emails, and reports to eliminate recreation.",
631
+ icon: "fa-file-alt"
632
+ },
633
+ {
634
+ title: "Shortcut Training",
635
+ description: "Master keyboard shortcuts for all frequently used software to reduce mouse dependency.",
636
+ icon: "fa-keyboard"
637
+ },
638
+ {
639
+ title: "Process Documentation",
640
+ description: "Document step-by-step procedures to identify redundancy and optimization points.",
641
+ icon: "fa-book"
642
+ }
643
+ ]
644
+ },
645
+ 'default': {
646
+ rootCause: "The bottleneck appears to stem from unclear priorities, lack of systems, or undefined workflows in this area.",
647
+ solutions: [
648
+ {
649
+ title: "5 Whys Analysis",
650
+ description: "Ask 'why' five times to drill down to the root cause of the bottleneck.",
651
+ icon: "fa-question"
652
+ },
653
+ {
654
+ title: "Process Mapping",
655
+ description: "Visually map out the current workflow to identify redundancy and delays.",
656
+ icon: "fa-project-diagram"
657
+ },
658
+ {
659
+ title: "Constraint Identification",
660
+ description: "Apply Theory of Constraints to find the single biggest limiting factor.",
661
+ icon: "fa-search"
662
+ },
663
+ {
664
+ title: "Benchmarking",
665
+ description: "Research how others have solved similar bottlenecks in your industry.",
666
+ icon: "fa-chart-bar"
667
+ }
668
+ ]
669
+ }
670
+ };
671
+
672
+ const solutionData = solutionsDatabase[bottleneckType];
673
+
674
+ // Display root cause
675
+ rootCause.textContent = solutionData.rootCause;
676
+
677
+ // Display solutions
678
+ solutionsContainer.innerHTML = '';
679
+ solutionData.solutions.forEach((solution, index) => {
680
+ const solutionCard = document.createElement('div');
681
+ solutionCard.className = `solution-card bg-white p-6 rounded-lg border border-gray-200 fade-in`;
682
+ solutionCard.style.animationDelay = `${index * 0.1}s`;
683
+
684
+ solutionCard.innerHTML = `
685
+ <div class="flex items-start mb-4">
686
+ <div class="bg-purple-100 p-3 rounded-full mr-4">
687
+ <i class="fas ${solution.icon} text-purple-600 text-xl"></i>
688
+ </div>
689
+ <div>
690
+ <h3 class="font-semibold text-lg text-gray-800">${solution.title}</h3>
691
+ <p class="text-gray-600">${solution.description}</p>
692
+ </div>
693
+ </div>
694
+ `;
695
+
696
+ solutionsContainer.appendChild(solutionCard);
697
+ });
698
+ }
699
+
700
+ // Scroll to results
701
+ resultsSection.scrollIntoView({ behavior: 'smooth' });
702
+ }
703
+
704
+ function resetForm() {
705
+ bottleneckInput.value = '';
706
+ bottleneckInput.disabled = false;
707
+ solveBtn.disabled = false;
708
+ solveBtn.innerHTML = '<i class="fas fa-lightbulb mr-2"></i> Solve It';
709
+ resultsSection.classList.add('hidden');
710
+
711
+ // Scroll back to input
712
+ window.scrollTo({ top: 0, behavior: 'smooth' });
713
+ }
714
+
715
+ function showApiKeyModal() {
716
+ apiKeyModal.classList.add('active');
717
+ apiKeyInput.value = deepSeekApiKey;
718
+ }
719
+
720
+ function closeApiKeyModal() {
721
+ apiKeyModal.classList.remove('active');
722
+ }
723
+
724
+ function saveApiKey() {
725
+ const key = apiKeyInput.value.trim();
726
+ if (!key) {
727
+ showToast('Please enter your API key');
728
+ return;
729
+ }
730
+
731
+ deepSeekApiKey = key;
732
+ localStorage.setItem('deepSeekApiKey', key);
733
+ closeApiKeyModal();
734
+ updateApiKeyBadge();
735
+
736
+ // If there was text in the input, solve it now
737
+ if (bottleneckInput.value.trim()) {
738
+ solveBottleneck();
739
+ }
740
+ }
741
+
742
+ function updateApiKeyBadge() {
743
+ if (deepSeekApiKey) {
744
+ apiKeyBadge.classList.remove('hidden');
745
+ apiKeyPreview.textContent = `${deepSeekApiKey.substring(0, 4)}...${deepSeekApiKey.substring(deepSeekApiKey.length - 4)}`;
746
+ } else {
747
+ apiKeyBadge.classList.add('hidden');
748
+ }
749
+ }
750
+
751
+ function toggleAiUsage() {
752
+ useAi = !useAi;
753
+ if (useAi) {
754
+ aiToggleIcon.innerHTML = '<i class="fas fa-check text-xs text-purple-500"></i>';
755
+ aiToggleIcon.classList.add('border-purple-500');
756
+ aiToggleIcon.classList.remove('border-gray-400');
757
+
758
+ // Check if we have an API key
759
+ if (!deepSeekApiKey) {
760
+ showApiKeyModal();
761
+ }
762
+ } else {
763
+ aiToggleIcon.innerHTML = '';
764
+ aiToggleIcon.classList.remove('border-purple-500');
765
+ aiToggleIcon.classList.add('border-gray-400');
766
+ }
767
+ }
768
+
769
+ function showToast(message) {
770
+ toastMessage.textContent = message;
771
+ toast.classList.add('show');
772
+
773
+ setTimeout(() => {
774
+ toast.classList.remove('show');
775
+ }, 3000);
776
+ }
777
+ });
778
+ </script>
779
+ <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=JayStormX8/bottleneck-remover" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
780
+ </html>