Hugging Face's logo

Spaces:
00Boobs00
/
anycoder-4996a77b
Running

App Files
00Boobs00 commited on
Commit
350951f
·
verified ·
1 Parent(s): 9e4a329

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +756 -19
index.html CHANGED
@@ -1,19 +1,756 @@
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>Studio Workflow Engine</title>
7
+
8
+ <!-- Import Google Fonts: Inter -->
9
+ <link rel="preconnect" href="https://fonts.googleapis.com">
10
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Fira+Code:wght@400;500&display=swap" rel="stylesheet">
12
+
13
+ <!-- Import FontAwesome for Icons -->
14
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
15
+
16
+ <style>
17
+ :root {
18
+ /* Theme Colors - Gradio Soft Theme (Emerald/Teal) */
19
+ --primary-hue: 16;
20
+ --primary: #10b981;
21
+ --primary-hover: #059669;
22
+ --secondary: #f1f5f9;
23
+ --secondary-hover: #e2e8f0;
24
+ --accent: #0f172a;
25
+
26
+ --bg-body: #f9fafb;
27
+ --bg-surface: #ffffff;
28
+ --bg-sidebar: #ffffff;
29
+
30
+ --border-color: #e2e8f0;
31
+ --text-main: #1f2937;
32
+ --text-muted: #64748b;
33
+
34
+ --radius-md: 0.5rem;
35
+ --radius-lg: 0.75rem;
36
+
37
+ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
38
+ --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
39
+ --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
40
+ }
41
+
42
+ * {
43
+ box-sizing: border-box;
44
+ margin: 0;
45
+ padding: 0;
46
+ }
47
+
48
+ body {
49
+ font-family: 'Inter', sans-serif;
50
+ background-color: var(--bg-body);
51
+ color: var(--text-main);
52
+ line-height: 1.5;
53
+ height: 100vh;
54
+ display: flex;
55
+ flex-direction: column;
56
+ }
57
+
58
+ /* --- Header --- */
59
+ header {
60
+ background: linear-gradient(90deg, #f0fdf4 0%, #ecfeff 100%);
61
+ border-bottom: 1px solid #ccfbf1;
62
+ padding: 1.5rem 2rem;
63
+ text-align: center;
64
+ box-shadow: var(--shadow-sm);
65
+ flex-shrink: 0;
66
+ }
67
+
68
+ header h1 {
69
+ font-size: 1.5rem;
70
+ font-weight: 700;
71
+ color: var(--accent);
72
+ margin-bottom: 0.25rem;
73
+ }
74
+
75
+ header p {
76
+ color: var(--text-muted);
77
+ font-size: 1.1em;
78
+ }
79
+
80
+ .anycoder-link {
81
+ display: inline-block;
82
+ margin-top: 0.75rem;
83
+ background-color: var(--primary);
84
+ color: white;
85
+ padding: 0.5rem 1rem;
86
+ border-radius: var(--radius-md);
87
+ text-decoration: none;
88
+ font-weight: 600;
89
+ font-size: 0.9em;
90
+ box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
91
+ transition: background-color 0.2s;
92
+ }
93
+
94
+ .anycoder-link:hover {
95
+ background-color: var(--primary-hover);
96
+ }
97
+
98
+ /* --- Main Layout --- */
99
+ .app-container {
100
+ display: flex;
101
+ flex: 1;
102
+ overflow: hidden; /* Prevent body scroll, scroll panels instead */
103
+ }
104
+
105
+ /* --- Sidebar --- */
106
+ aside {
107
+ width: 320px;
108
+ background-color: var(--bg-sidebar);
109
+ border-right: 1px solid var(--border-color);
110
+ padding: 1.5rem;
111
+ overflow-y: auto;
112
+ display: flex;
113
+ flex-direction: column;
114
+ gap: 1.5rem;
115
+ flex-shrink: 0;
116
+ }
117
+
118
+ .panel-title {
119
+ font-size: 1.1rem;
120
+ font-weight: 600;
121
+ margin-bottom: 1rem;
122
+ display: flex;
123
+ align-items: center;
124
+ gap: 0.5rem;
125
+ }
126
+
127
+ .control-group {
128
+ display: flex;
129
+ flex-direction: column;
130
+ gap: 0.75rem;
131
+ }
132
+
133
+ /* Radio Buttons Styling */
134
+ .radio-option {
135
+ display: flex;
136
+ align-items: center;
137
+ padding: 0.75rem;
138
+ border: 1px solid var(--border-color);
139
+ border-radius: var(--radius-md);
140
+ cursor: pointer;
141
+ transition: all 0.2s;
142
+ }
143
+
144
+ .radio-option:hover {
145
+ background-color: var(--secondary);
146
+ }
147
+
148
+ .radio-option.active {
149
+ border-color: var(--primary);
150
+ background-color: #ecfdf5;
151
+ color: var(--primary);
152
+ font-weight: 500;
153
+ }
154
+
155
+ .radio-icon {
156
+ margin-right: 0.75rem;
157
+ width: 20px;
158
+ text-align: center;
159
+ }
160
+
161
+ input[type="radio"] {
162
+ display: none;
163
+ }
164
+
165
+ /* Accordion */
166
+ .accordion {
167
+ border: 1px solid var(--border-color);
168
+ border-radius: var(--radius-md);
169
+ overflow: hidden;
170
+ }
171
+
172
+ .accordion-header {
173
+ background-color: var(--secondary);
174
+ padding: 0.75rem 1rem;
175
+ cursor: pointer;
176
+ font-weight: 500;
177
+ display: flex;
178
+ justify-content: space-between;
179
+ align-items: center;
180
+ user-select: none;
181
+ }
182
+
183
+ .accordion-content {
184
+ padding: 1rem;
185
+ display: none; /* Hidden by default */
186
+ background-color: var(--bg-surface);
187
+ border-top: 1px solid var(--border-color);
188
+ }
189
+
190
+ .accordion.open .accordion-content {
191
+ display: block;
192
+ }
193
+
194
+ .accordion-header i {
195
+ transition: transform 0.2s;
196
+ }
197
+
198
+ .accordion.open .accordion-header i {
199
+ transform: rotate(180deg);
200
+ }
201
+
202
+ /* Slider */
203
+ .slider-container {
204
+ margin-bottom: 1rem;
205
+ }
206
+
207
+ .slider-label {
208
+ display: flex;
209
+ justify-content: space-between;
210
+ font-size: 0.9rem;
211
+ margin-bottom: 0.5rem;
212
+ color: var(--text-muted);
213
+ }
214
+
215
+ input[type="range"] {
216
+ width: 100%;
217
+ cursor: pointer;
218
+ accent-color: var(--primary);
219
+ }
220
+
221
+ .readout {
222
+ background: var(--secondary);
223
+ padding: 0.5rem;
224
+ border-radius: var(--radius-md);
225
+ text-align: center;
226
+ font-family: 'Fira Code', monospace;
227
+ font-weight: 600;
228
+ }
229
+
230
+ .guide-list {
231
+ list-style: none;
232
+ font-size: 0.9rem;
233
+ color: var(--text-muted);
234
+ }
235
+
236
+ .guide-list li {
237
+ margin-bottom: 0.5rem;
238
+ padding-left: 1rem;
239
+ position: relative;
240
+ }
241
+
242
+ .guide-list li::before {
243
+ content: "•";
244
+ color: var(--primary);
245
+ position: absolute;
246
+ left: 0;
247
+ font-weight: bold;
248
+ }
249
+
250
+ /* --- Main Content Area --- */
251
+ main {
252
+ flex: 1;
253
+ padding: 2rem;
254
+ overflow-y: auto;
255
+ display: flex;
256
+ flex-direction: column;
257
+ gap: 2rem;
258
+ max-width: 1600px;
259
+ margin: 0 auto;
260
+ width: 100%;
261
+ }
262
+
263
+ .workspace-grid {
264
+ display: grid;
265
+ grid-template-columns: 1fr 1fr;
266
+ gap: 2rem;
267
+ height: 100%;
268
+ }
269
+
270
+ .column {
271
+ display: flex;
272
+ flex-direction: column;
273
+ gap: 1rem;
274
+ }
275
+
276
+ /* Code Editor Styling */
277
+ .editor-container {
278
+ flex: 1;
279
+ display: flex;
280
+ flex-direction: column;
281
+ border: 1px solid var(--border-color);
282
+ border-radius: var(--radius-lg);
283
+ background-color: var(--bg-surface);
284
+ box-shadow: var(--shadow-sm);
285
+ min-height: 400px;
286
+ }
287
+
288
+ .editor-header {
289
+ padding: 0.75rem 1rem;
290
+ border-bottom: 1px solid var(--border-color);
291
+ background-color: #f8fafc;
292
+ border-radius: var(--radius-lg) var(--radius-lg) 0 0;
293
+ font-weight: 600;
294
+ color: var(--text-muted);
295
+ font-size: 0.9rem;
296
+ display: flex;
297
+ justify-content: space-between;
298
+ align-items: center;
299
+ }
300
+
301
+ textarea.code-input {
302
+ flex: 1;
303
+ width: 100%;
304
+ border: none;
305
+ padding: 1rem;
306
+ font-family: 'Fira Code', monospace;
307
+ font-size: 0.95rem;
308
+ resize: none;
309
+ outline: none;
310
+ background-color: var(--bg-surface);
311
+ color: var(--text-main);
312
+ border-radius: 0 0 var(--radius-lg) var(--radius-lg);
313
+ line-height: 1.6;
314
+ }
315
+
316
+ textarea.code-input::placeholder {
317
+ color: #cbd5e1;
318
+ }
319
+
320
+ /* Buttons */
321
+ .btn-row {
322
+ display: flex;
323
+ gap: 1rem;
324
+ }
325
+
326
+ .btn {
327
+ display: inline-flex;
328
+ align-items: center;
329
+ justify-content: center;
330
+ padding: 0.75rem 1.5rem;
331
+ border-radius: var(--radius-md);
332
+ font-weight: 600;
333
+ cursor: pointer;
334
+ transition: all 0.2s;
335
+ border: 1px solid transparent;
336
+ font-size: 1rem;
337
+ gap: 0.5rem;
338
+ }
339
+
340
+ .btn-primary {
341
+ background-color: var(--primary);
342
+ color: white;
343
+ box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
344
+ }
345
+
346
+ .btn-primary:hover {
347
+ background-color: var(--primary-hover);
348
+ transform: translateY(-1px);
349
+ }
350
+
351
+ .btn-secondary {
352
+ background-color: white;
353
+ border-color: var(--border-color);
354
+ color: var(--text-main);
355
+ }
356
+
357
+ .btn-secondary:hover {
358
+ background-color: var(--secondary);
359
+ border-color: #cbd5e1;
360
+ }
361
+
362
+ /* Status Log */
363
+ .status-log {
364
+ background-color: #f8fafc;
365
+ border: 1px solid var(--border-color);
366
+ border-radius: var(--radius-md);
367
+ padding: 1rem;
368
+ margin-bottom: 1rem;
369
+ min-height: 80px;
370
+ color: var(--text-muted);
371
+ font-size: 0.95rem;
372
+ }
373
+
374
+ .status-log h3 {
375
+ font-size: 1rem;
376
+ color: var(--text-main);
377
+ margin-bottom: 0.5rem;
378
+ }
379
+
380
+ .status-log ul {
381
+ padding-left: 1.25rem;
382
+ }
383
+
384
+ .status-log strong {
385
+ color: var(--accent);
386
+ }
387
+
388
+ /* Examples */
389
+ .examples-section {
390
+ margin-top: 1rem;
391
+ }
392
+
393
+ .chips {
394
+ display: flex;
395
+ flex-wrap: wrap;
396
+ gap: 0.5rem;
397
+ }
398
+
399
+ .chip {
400
+ background-color: white;
401
+ border: 1px solid var(--border-color);
402
+ padding: 0.4rem 0.8rem;
403
+ border-radius: 2rem;
404
+ font-size: 0.85rem;
405
+ cursor: pointer;
406
+ transition: all 0.2s;
407
+ color: var(--text-muted);
408
+ }
409
+
410
+ .chip:hover {
411
+ border-color: var(--primary);
412
+ color: var(--primary);
413
+ background-color: #f0fdf4;
414
+ }
415
+
416
+ /* Download Button */
417
+ .download-btn {
418
+ width: 100%;
419
+ margin-top: 1rem;
420
+ display: none; /* Hidden initially */
421
+ text-decoration: none;
422
+ }
423
+
424
+ .download-btn.visible {
425
+ display: inline-flex;
426
+ }
427
+
428
+ /* Responsive */
429
+ @media (max-width: 1024px) {
430
+ .workspace-grid {
431
+ grid-template-columns: 1fr;
432
+ }
433
+ aside {
434
+ width: 100%;
435
+ border-right: none;
436
+ border-bottom: 1px solid var(--border-color);
437
+ height: auto;
438
+ max-height: 300px;
439
+ }
440
+ }
441
+ </style>
442
+ </head>
443
+ <body>
444
+
445
+ <header>
446
+ <h1>🔄 Studio Workflow Engine</h1>
447
+ <p>Professional Review, Revise, Refactor, and Iteration Tool</p>
448
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">
449
+ Built with anycoder
450
+ </a>
451
+ </header>
452
+
453
+ <div class="app-container">
454
+ <!-- Sidebar -->
455
+ <aside>
456
+ <div class="panel-title">🛠️ Control Panel</div>
457
+
458
+ <div class="control-group">
459
+ <label style="font-weight: 500; font-size: 0.9rem;">Operation Mode</label>
460
+
461
+ <label class="radio-option active" onclick="setMode('Review')">
462
+ <span class="radio-icon"><i class="fas fa-check-circle"></i></span>
463
+ <input type="radio" name="operation" value="Review" checked>
464
+ Review
465
+ </label>
466
+
467
+ <label class="radio-option" onclick="setMode('Revise')">
468
+ <span class="radio-icon"><i class="fas fa-pen-nib"></i></span>
469
+ <input type="radio" name="operation" value="Revise">
470
+ Revise
471
+ </label>
472
+
473
+ <label class="radio-option" onclick="setMode('Refactor')">
474
+ <span class="radio-icon"><i class="fas fa-cogs"></i></span>
475
+ <input type="radio" name="operation" value="Refactor">
476
+ Refactor
477
+ </label>
478
+
479
+ <label class="radio-option" onclick="setMode('Iterate')">
480
+ <span class="radio-icon"><i class="fas fa-rocket"></i></span>
481
+ <input type="radio" name="operation" value="Iterate">
482
+ Iterate
483
+ </label>
484
+ </div>
485
+
486
+ <div class="accordion open" id="settingsAccordion">
487
+ <div class="accordion-header" onclick="toggleAccordion()">
488
+ <span>⚙️ Advanced Settings</span>
489
+ <i class="fas fa-chevron-down"></i>
490
+ </div>
491
+ <div class="accordion-content">
492
+ <div class="slider-container">
493
+ <div class="slider-label">
494
+ <span>Creativity Level</span>
495
+ <span id="creativityValue">0.5</span>
496
+ </div>
497
+ <input type="range" id="creativitySlider" min="0" max="1" step="0.1" value="0.5" oninput="updateCreativity(this.value)">
498
+ </div>
499
+
500
+ <div style="margin-bottom: 0.5rem; font-size: 0.9rem; font-weight: 500;">Current Iteration</div>
501
+ <div class="readout" id="iterationDisplay">0</div>
502
+ </div>
503
+ </div>
504
+
505
+ <div class="panel-title">📚 Workflow Guide</div>
506
+ <ul class="guide-list">
507
+ <li><strong>Review:</strong> Analyze syntax and structure.</li>
508
+ <li><strong>Revise:</strong> Improve phrasing and tone.</li>
509
+ <li><strong>Refactor:</strong> Optimize code structure.</li>
510
+ <li><strong>Iterate:</strong> Create a new version copy.</li>
511
+ </ul>
512
+ </aside>
513
+
514
+ <!-- Main Content -->
515
+ <main>
516
+ <div class="workspace-grid">
517
+ <!-- Input Column -->
518
+ <div class="column">
519
+ <div class="editor-container">
520
+ <div class="editor-header">
521
+ <span>Input Source</span>
522
+ <i class="fas fa-code"></i>
523
+ </div>
524
+ <textarea id="inputCode" class="code-input" placeholder="# Paste your code or text here..." spellcheck="false"></textarea>
525
+ </div>
526
+
527
+ <div class="btn-row">
528
+ <button class="btn btn-secondary" style="flex: 1" onclick="clearWorkspace()">
529
+ <i class="fas fa-trash-alt"></i> Clear Workspace
530
+ </button>
531
+ <button class="btn btn-primary" style="flex: 2" onclick="runWorkflow()">
532
+ <i class="fas fa-play"></i> Execute Workflow
533
+ </button>
534
+ </div>
535
+
536
+ <div class="examples-section">
537
+ <div style="font-size: 0.9rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--text-muted);">💡 Quick Start Examples</div>
538
+ <div class="chips">
539
+ <div class="chip" onclick="loadExample('code')">Python Code Sample</div>
540
+ <div class="chip" onclick="loadExample('text')">Poor Grammar Text</div>
541
+ <div class="chip" onclick="loadExample('js')">Legacy JS Code</div>
542
+ </div>
543
+ </div>
544
+ </div>
545
+
546
+ <!-- Output Column -->
547
+ <div class="column">
548
+ <div id="statusLog" class="status-log">
549
+ <em>*Ready to process...*</em>
550
+ </div>
551
+
552
+ <div class="editor-container" style="flex: 1;">
553
+ <div class="editor-header">
554
+ <span>Result Output</span>
555
+ <i class="fas fa-laptop-code"></i>
556
+ </div>
557
+ <textarea id="outputCode" class="code-input" readonly spellcheck="false"></textarea>
558
+ </div>
559
+
560
+ <a id="downloadBtn" class="btn btn-secondary download-btn" href="#" download>
561
+ <i class="fas fa-download"></i> <span>Download Result</span>
562
+ </a>
563
+ </div>
564
+ </div>
565
+ </main>
566
+ </div>
567
+
568
+ <script>
569
+ // State
570
+ let state = {
571
+ iteration: 0,
572
+ creativity: 0.5,
573
+ mode: 'Review'
574
+ };
575
+
576
+ // DOM Elements
577
+ const els = {
578
+ input: document.getElementById('inputCode'),
579
+ output: document.getElementById('outputCode'),
580
+ status: document.getElementById('statusLog'),
581
+ iterationDisplay: document.getElementById('iterationDisplay'),
582
+ creativitySlider: document.getElementById('creativitySlider'),
583
+ creativityValue: document.getElementById('creativityValue'),
584
+ downloadBtn: document.getElementById('downloadBtn'),
585
+ radioOptions: document.querySelectorAll('.radio-option')
586
+ };
587
+
588
+ // UI Interactions
589
+ function setMode(mode) {
590
+ state.mode = mode;
591
+
592
+ // Visual update for radios
593
+ els.radioOptions.forEach(opt => {
594
+ const input = opt.querySelector('input');
595
+ if(input.value === mode) {
596
+ opt.classList.add('active');
597
+ input.checked = true;
598
+ } else {
599
+ opt.classList.remove('active');
600
+ }
601
+ });
602
+ }
603
+
604
+ function updateCreativity(val) {
605
+ state.creativity = parseFloat(val);
606
+ els.creativityValue.textContent = val;
607
+ }
608
+
609
+ function toggleAccordion() {
610
+ document.getElementById('settingsAccordion').classList.toggle('open');
611
+ }
612
+
613
+ function loadExample(type) {
614
+ if (type === 'code') {
615
+ els.input.value = "def hello():\n print('Hello World')\n return True";
616
+ setMode('Review');
617
+ } else if (type === 'text') {
618
+ els.input.value = "this is a poorly written sentence. it needs help. the flow is bad.";
619
+ setMode('Revise');
620
+ } else if (type === 'js') {
621
+ els.input.value = "var x = 10;\nvar y = 20;\nvar result = x + y;\nreturn result;";
622
+ setMode('Refactor');
623
+ }
624
+ // Clear previous output
625
+ els.output.value = "";
626
+ els.status.innerHTML = "<em>*Example loaded. Ready to process...*</em>";
627
+ els.downloadBtn.classList.remove('visible');
628
+ }
629
+
630
+ function clearWorkspace() {
631
+ els.input.value = "";
632
+ els.output.value = "";
633
+ els.status.innerHTML = "<em>*Ready to process...*</em>";
634
+ els.downloadBtn.classList.remove('visible');
635
+ state.iteration = 0;
636
+ updateIterationUI();
637
+ setMode('Review');
638
+ updateCreativity(0.5);
639
+ els.creativitySlider.value = 0.5;
640
+ }
641
+
642
+ function updateIterationUI() {
643
+ els.iterationDisplay.textContent = state.iteration;
644
+ }
645
+
646
+ // --- Core Logic ---
647
+
648
+ async function runWorkflow() {
649
+ const content = els.input.value.trim();
650
+
651
+ // Validation
652
+ if (!content) {
653
+ els.status.innerHTML = `<div style="color: #ef4444; font-weight: 600;"><i class="fas fa-exclamation-triangle"></i> Input cannot be empty. Please enter text or code to proceed.</div>`;
654
+ return;
655
+ }
656
+
657
+ // Simulate Loading/Processing
658
+ const originalBtnText = document.querySelector('.btn-primary').innerHTML;
659
+ const runBtn = document.querySelector('.btn-primary');
660
+ runBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Processing...';
661
+ runBtn.disabled = true;
662
+
663
+ // Calculate delay based on creativity (mimicking Python delay logic)
664
+ const delay = Math.min(300 + (state.creativity * 500), 2000);
665
+
666
+ await new Promise(r => setTimeout(r, delay));
667
+
668
+ let result = "";
669
+ let statusMsg = "";
670
+ let downloadFilename = "result.txt";
671
+ const timestamp = new Date().toLocaleString();
672
+
673
+ // Operations Logic
674
+ if (state.mode === "Review") {
675
+ statusMsg = `
676
+ <h3>✅ Review Complete</h3>
677
+ <ul>
678
+ <li><strong>Status:</strong> Pass</li>
679
+ <li><strong>Time:</strong> ${timestamp}</li>
680
+ <li><strong>Analysis:</strong> Syntax looks valid.</li>
681
+ <li><strong>Suggestion:</strong> Consider adding docstrings and type hints.</li>
682
+ </ul>
683
+ `;
684
+ result = `# REVIEW LOG [${timestamp}]\n# Status: Pass\n# Note: Code structure is solid.\n\n${content}`;
685
+ downloadFilename = "review_log.py";
686
+
687
+ } else if (state.mode === "Revise") {
688
+ statusMsg = `
689
+ <h3>✍️ Revision Complete</h3>
690
+ <ul>
691
+ <li><strong>Tone:</strong> Professional</li>
692
+ <li><strong>Grammar:</strong> Corrected</li>
693
+ <li><strong>Flow:</strong> Optimized</li>
694
+ </ul>
695
+ `;
696
+ // Simple capitalize logic simulation
697
+ const sentences = content.split('. ');
698
+ const revised = sentences.map(s => {
699
+ const trimmed = s.trim();
700
+ return trimmed ? trimmed.charAt(0).toUpperCase() + trimmed.slice(1) : '';
701
+ });
702
+ result = revised.join('. ');
703
+ downloadFilename = "revised_text.txt";
704
+
705
+ } else if (state.mode === "Refactor") {
706
+ statusMsg = `
707
+ <h3>⚙️ Refactoring Complete</h3>
708
+ <ul>
709
+ <li><strong>Optimization:</strong> Applied</li>
710
+ <li><strong>Complexity:</strong> Reduced</li>
711
+ <li><strong>Style:</strong> Modernized</li>
712
+ </ul>
713
+ `;
714
+ result = content.replace(/var /g, "let ").replace(/ /g, " ");
715
+ result = `# REFACTORED VERSION [${timestamp}]\n# Optimized for performance\n${result}`;
716
+ downloadFilename = "refactored_code.js";
717
+
718
+ } else if (state.mode === "Iterate") {
719
+ state.iteration += 1;
720
+ updateIterationUI();
721
+
722
+ statusMsg = `
723
+ <h3>🚀 Iteration ${state.iteration} Generated</h3>
724
+ <ul>
725
+ <li><strong>Creativity Level:</strong> ${state.creativity.toFixed(2)}</li>
726
+ <li><strong>Action:</strong> Created new version based on feedback.</li>
727
+ </ul>
728
+ `;
729
+ result = `# --- ITERATION ${state.iteration} ---\n# Generated at ${timestamp}\n# Creativity: ${state.creativity}\n${content}`;
730
+ downloadFilename = `iteration_${state.iteration}.py`;
731
+ }
732
+
733
+ // Update UI
734
+ els.output.value = result;
735
+ els.status.innerHTML = statusMsg;
736
+
737
+ // Setup Download
738
+ setupDownload(result, downloadFilename);
739
+
740
+ // Reset Button
741
+ runBtn.innerHTML = originalBtnText;
742
+ runBtn.disabled = false;
743
+ }
744
+
745
+ function setupDownload(content, filename) {
746
+ const blob = new Blob([content], { type: 'text/plain' });
747
+ const url = URL.createObjectURL(blob);
748
+
749
+ els.downloadBtn.href = url;
750
+ els.downloadBtn.download = filename;
751
+ els.downloadBtn.querySelector('span').textContent = `📥 Download ${filename}`;
752
+ els.downloadBtn.classList.add('visible');
753
+ }
754
+ </script>
755
+ </body>
756
+ </html>