Hugging Face's logo

Spaces:
Fdgg55
/
cube-solver
Running

App Files Community
Fdgg55 commited on
Commit
4c7b4df
·
verified ·
1 Parent(s): 8b4f5b9

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +573 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Cube Solver
3
- emoji: 🐢
4
- colorFrom: purple
5
- colorTo: purple
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: cube-solver
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: green
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,573 @@
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>Rubik's Cube Solver</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/cubing@1/dist/cubing.bundle.js"></script>
10
+ <style>
11
+ .cube-face {
12
+ width: 100px;
13
+ height: 100px;
14
+ display: grid;
15
+ grid-template-columns: repeat(3, 1fr);
16
+ grid-template-rows: repeat(3, 1fr);
17
+ gap: 2px;
18
+ padding: 5px;
19
+ background-color: #333;
20
+ border-radius: 5px;
21
+ }
22
+ .sticker {
23
+ border-radius: 3px;
24
+ display: flex;
25
+ justify-content: center;
26
+ align-items: center;
27
+ font-weight: bold;
28
+ color: rgba(0,0,0,0.5);
29
+ }
30
+ .color-picker {
31
+ display: flex;
32
+ gap: 10px;
33
+ margin-bottom: 20px;
34
+ }
35
+ .color-option {
36
+ width: 30px;
37
+ height: 30px;
38
+ border-radius: 50%;
39
+ cursor: pointer;
40
+ border: 2px solid transparent;
41
+ }
42
+ .color-option.selected {
43
+ border-color: black;
44
+ }
45
+ .move-btn {
46
+ transition: all 0.2s;
47
+ }
48
+ .move-btn:hover {
49
+ transform: scale(1.1);
50
+ }
51
+ .cube-container {
52
+ perspective: 1000px;
53
+ margin: 20px auto;
54
+ }
55
+ #cube3d {
56
+ width: 300px;
57
+ height: 300px;
58
+ margin: 0 auto;
59
+ }
60
+ @keyframes pulse {
61
+ 0% { transform: scale(1); }
62
+ 50% { transform: scale(1.05); }
63
+ 100% { transform: scale(1); }
64
+ }
65
+ .pulse {
66
+ animation: pulse 1.5s infinite;
67
+ }
68
+ </style>
69
+ </head>
70
+ <body class="bg-gray-100 min-h-screen">
71
+ <div class="container mx-auto px-4 py-8">
72
+ <h1 class="text-4xl font-bold text-center text-gray-800 mb-2">Rubik's Cube Solver</h1>
73
+ <p class="text-center text-gray-600 mb-8">Input your scrambled cube and get a solution in 25 moves or fewer</p>
74
+
75
+ <div class="flex flex-col lg:flex-row gap-8">
76
+ <!-- Cube Input Section -->
77
+ <div class="bg-white p-6 rounded-lg shadow-lg flex-1">
78
+ <h2 class="text-2xl font-semibold mb-4 text-gray-700">Input Cube State</h2>
79
+
80
+ <div class="mb-6">
81
+ <h3 class="text-lg font-medium mb-2">Color Picker</h3>
82
+ <div class="color-picker">
83
+ <div class="color-option bg-white selected" data-color="white" title="White"></div>
84
+ <div class="color-option bg-yellow-400" data-color="yellow" title="Yellow"></div>
85
+ <div class="color-option bg-red-500" data-color="red" title="Red"></div>
86
+ <div class="color-option bg-orange-500" data-color="orange" title="Orange"></div>
87
+ <div class="color-option bg-blue-600" data-color="blue" title="Blue"></div>
88
+ <div class="color-option bg-green-600" data-color="green" title="Green"></div>
89
+ </div>
90
+ </div>
91
+
92
+ <div class="grid grid-cols-3 gap-4 mb-6">
93
+ <!-- Up Face -->
94
+ <div>
95
+ <h4 class="text-center mb-1">Up (U)</h4>
96
+ <div class="cube-face" id="up-face">
97
+ <div class="sticker bg-gray-200" data-face="U" data-position="0"></div>
98
+ <div class="sticker bg-gray-200" data-face="U" data-position="1"></div>
99
+ <div class="sticker bg-gray-200" data-face="U" data-position="2"></div>
100
+ <div class="sticker bg-gray-200" data-face="U" data-position="3"></div>
101
+ <div class="sticker bg-yellow-400" data-face="U" data-position="4"></div>
102
+ <div class="sticker bg-gray-200" data-face="U" data-position="5"></div>
103
+ <div class="sticker bg-gray-200" data-face="U" data-position="6"></div>
104
+ <div class="sticker bg-gray-200" data-face="U" data-position="7"></div>
105
+ <div class="sticker bg-gray-200" data-face="U" data-position="8"></div>
106
+ </div>
107
+ </div>
108
+
109
+ <!-- Left, Front, Right, Back Faces -->
110
+ <div class="space-y-4">
111
+ <div>
112
+ <h4 class="text-center mb-1">Left (L)</h4>
113
+ <div class="cube-face" id="left-face">
114
+ <div class="sticker bg-gray-200" data-face="L" data-position="0"></div>
115
+ <div class="sticker bg-gray-200" data-face="L" data-position="1"></div>
116
+ <div class="sticker bg-gray-200" data-face="L" data-position="2"></div>
117
+ <div class="sticker bg-gray-200" data-face="L" data-position="3"></div>
118
+ <div class="sticker bg-orange-500" data-face="L" data-position="4"></div>
119
+ <div class="sticker bg-gray-200" data-face="L" data-position="5"></div>
120
+ <div class="sticker bg-gray-200" data-face="L" data-position="6"></div>
121
+ <div class="sticker bg-gray-200" data-face="L" data-position="7"></div>
122
+ <div class="sticker bg-gray-200" data-face="L" data-position="8"></div>
123
+ </div>
124
+ </div>
125
+ <div>
126
+ <h4 class="text-center mb-1">Front (F)</h4>
127
+ <div class="cube-face" id="front-face">
128
+ <div class="sticker bg-gray-200" data-face="F" data-position="0"></div>
129
+ <div class="sticker bg-gray-200" data-face="F" data-position="1"></div>
130
+ <div class="sticker bg-gray-200" data-face="F" data-position="2"></div>
131
+ <div class="sticker bg-gray-200" data-face="F" data-position="3"></div>
132
+ <div class="sticker bg-green-600" data-face="F" data-position="4"></div>
133
+ <div class="sticker bg-gray-200" data-face="F" data-position="5"></div>
134
+ <div class="sticker bg-gray-200" data-face="F" data-position="6"></div>
135
+ <div class="sticker bg-gray-200" data-face="F" data-position="7"></div>
136
+ <div class="sticker bg-gray-200" data-face="F" data-position="8"></div>
137
+ </div>
138
+ </div>
139
+ </div>
140
+
141
+ <div class="space-y-4">
142
+ <div>
143
+ <h4 class="text-center mb-1">Right (R)</h4>
144
+ <div class="cube-face" id="right-face">
145
+ <div class="sticker bg-gray-200" data-face="R" data-position="0"></div>
146
+ <div class="sticker bg-gray-200" data-face="R" data-position="1"></div>
147
+ <div class="sticker bg-gray-200" data-face="R" data-position="2"></div>
148
+ <div class="sticker bg-gray-200" data-face="R" data-position="3"></div>
149
+ <div class="sticker bg-red-500" data-face="R" data-position="4"></div>
150
+ <div class="sticker bg-gray-200" data-face="R" data-position="5"></div>
151
+ <div class="sticker bg-gray-200" data-face="R" data-position="6"></div>
152
+ <div class="sticker bg-gray-200" data-face="R" data-position="7"></div>
153
+ <div class="sticker bg-gray-200" data-face="R" data-position="8"></div>
154
+ </div>
155
+ </div>
156
+ <div>
157
+ <h4 class="text-center mb-1">Back (B)</h4>
158
+ <div class="cube-face" id="back-face">
159
+ <div class="sticker bg-gray-200" data-face="B" data-position="0"></div>
160
+ <div class="sticker bg-gray-200" data-face="B" data-position="1"></div>
161
+ <div class="sticker bg-gray-200" data-face="B" data-position="2"></div>
162
+ <div class="sticker bg-gray-200" data-face="B" data-position="3"></div>
163
+ <div class="sticker bg-blue-600" data-face="B" data-position="4"></div>
164
+ <div class="sticker bg-gray-200" data-face="B" data-position="5"></div>
165
+ <div class="sticker bg-gray-200" data-face="B" data-position="6"></div>
166
+ <div class="sticker bg-gray-200" data-face="B" data-position="7"></div>
167
+ <div class="sticker bg-gray-200" data-face="B" data-position="8"></div>
168
+ </div>
169
+ </div>
170
+ </div>
171
+ </div>
172
+
173
+ <!-- Down Face -->
174
+ <div class="flex justify-center mb-6">
175
+ <div>
176
+ <h4 class="text-center mb-1">Down (D)</h4>
177
+ <div class="cube-face" id="down-face">
178
+ <div class="sticker bg-gray-200" data-face="D" data-position="0"></div>
179
+ <div class="sticker bg-gray-200" data-face="D" data-position="1"></div>
180
+ <div class="sticker bg-gray-200" data-face="D" data-position="2"></div>
181
+ <div class="sticker bg-gray-200" data-face="D" data-position="3"></div>
182
+ <div class="sticker bg-white" data-face="D" data-position="4"></div>
183
+ <div class="sticker bg-gray-200" data-face="D" data-position="5"></div>
184
+ <div class="sticker bg-gray-200" data-face="D" data-position="6"></div>
185
+ <div class="sticker bg-gray-200" data-face="D" data-position="7"></div>
186
+ <div class="sticker bg-gray-200" data-face="D" data-position="8"></div>
187
+ </div>
188
+ </div>
189
+ </div>
190
+
191
+ <div class="flex flex-col sm:flex-row gap-4 mb-6">
192
+ <button id="randomize-btn" class="bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded-lg transition">
193
+ Randomize Cube
194
+ </button>
195
+ <button id="reset-btn" class="bg-gray-600 hover:bg-gray-700 text-white py-2 px-4 rounded-lg transition">
196
+ Reset to Solved
197
+ </button>
198
+ <button id="solve-btn" class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg font-bold pulse">
199
+ Solve Cube
200
+ </button>
201
+ </div>
202
+
203
+ <div class="mb-6">
204
+ <h3 class="text-lg font-medium mb-2">Or input scramble notation:</h3>
205
+ <div class="flex gap-2">
206
+ <input type="text" id="scramble-input" placeholder="e.g., R U R' U' F2 D B'" class="flex-1 border border-gray-300 rounded-lg px-4 py-2">
207
+ <button id="apply-scramble-btn" class="bg-green-600 hover:bg-green-700 text-white py-2 px-4 rounded-lg">
208
+ Apply
209
+ </button>
210
+ </div>
211
+ </div>
212
+ </div>
213
+
214
+ <!-- Solution Section -->
215
+ <div class="bg-white p-6 rounded-lg shadow-lg flex-1">
216
+ <h2 class="text-2xl font-semibold mb-4 text-gray-700">Solution</h2>
217
+
218
+ <div class="mb-6">
219
+ <h3 class="text-lg font-medium mb-2">3D Cube Visualization</h3>
220
+ <div id="cube3d"></div>
221
+ </div>
222
+
223
+ <div class="mb-6">
224
+ <h3 class="text-lg font-medium mb-2">Solution Moves</h3>
225
+ <div id="solution-moves" class="bg-gray-100 p-4 rounded-lg min-h-20">
226
+ <p class="text-gray-500 italic">Enter your cube state and click "Solve Cube" to get a solution.</p>
227
+ </div>
228
+ </div>
229
+
230
+ <div class="mb-6">
231
+ <h3 class="text-lg font-medium mb-2">Solution Controls</h3>
232
+ <div class="flex flex-wrap gap-2" id="move-buttons">
233
+ <!-- Move buttons will be generated here -->
234
+ </div>
235
+ </div>
236
+
237
+ <div class="flex gap-4">
238
+ <button id="prev-move-btn" class="bg-gray-600 hover:bg-gray-700 text-white py-2 px-4 rounded-lg transition opacity-50 cursor-not-allowed" disabled>
239
+ Previous Move
240
+ </button>
241
+ <button id="next-move-btn" class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg transition opacity-50 cursor-not-allowed" disabled>
242
+ Next Move
243
+ </button>
244
+ <button id="animate-solution-btn" class="bg-green-600 hover:bg-green-700 text-white py-2 px-4 rounded-lg transition opacity-50 cursor-not-allowed" disabled>
245
+ Animate Solution
246
+ </button>
247
+ </div>
248
+ </div>
249
+ </div>
250
+ </div>
251
+
252
+ <script>
253
+ document.addEventListener('DOMContentLoaded', function() {
254
+ // Cube state representation
255
+ const cubeState = {
256
+ U: Array(9).fill('yellow'),
257
+ L: Array(9).fill('orange'),
258
+ F: Array(9).fill('green'),
259
+ R: Array(9).fill('red'),
260
+ B: Array(9).fill('blue'),
261
+ D: Array(9).fill('white')
262
+ };
263
+
264
+ // Color mapping
265
+ const colorMap = {
266
+ white: 'white',
267
+ yellow: 'yellow-400',
268
+ red: 'red-500',
269
+ orange: 'orange-500',
270
+ blue: 'blue-600',
271
+ green: 'green-600'
272
+ };
273
+
274
+ // Current selected color
275
+ let selectedColor = 'white';
276
+
277
+ // Solution moves
278
+ let solutionMoves = [];
279
+ let currentMoveIndex = -1;
280
+
281
+ // 3D Cube visualization
282
+ let cube3d;
283
+
284
+ // Initialize the app
285
+ initColorPicker();
286
+ initStickerClickHandlers();
287
+ initButtons();
288
+ updateCubeVisualization();
289
+ init3DCube();
290
+
291
+ // Initialize color picker
292
+ function initColorPicker() {
293
+ const colorOptions = document.querySelectorAll('.color-option');
294
+ colorOptions.forEach(option => {
295
+ option.addEventListener('click', function() {
296
+ // Remove selected class from all options
297
+ colorOptions.forEach(opt => opt.classList.remove('selected'));
298
+ // Add selected class to clicked option
299
+ this.classList.add('selected');
300
+ // Update selected color
301
+ selectedColor = this.getAttribute('data-color');
302
+ });
303
+ });
304
+ }
305
+
306
+ // Initialize sticker click handlers
307
+ function initStickerClickHandlers() {
308
+ const stickers = document.querySelectorAll('.sticker');
309
+ stickers.forEach(sticker => {
310
+ sticker.addEventListener('click', function() {
311
+ const face = this.getAttribute('data-face');
312
+ const position = parseInt(this.getAttribute('data-position'));
313
+
314
+ // Update cube state
315
+ cubeState[face][position] = selectedColor;
316
+
317
+ // Update sticker color
318
+ this.className = `sticker bg-${colorMap[selectedColor]}`;
319
+
320
+ // Update 3D cube
321
+ update3DCube();
322
+ });
323
+ });
324
+ }
325
+
326
+ // Initialize buttons
327
+ function initButtons() {
328
+ // Randomize button
329
+ document.getElementById('randomize-btn').addEventListener('click', randomizeCube);
330
+
331
+ // Reset button
332
+ document.getElementById('reset-btn').addEventListener('click', resetCube);
333
+
334
+ // Solve button
335
+ document.getElementById('solve-btn').addEventListener('click', solveCube);
336
+
337
+ // Apply scramble button
338
+ document.getElementById('apply-scramble-btn').addEventListener('click', applyScramble);
339
+
340
+ // Solution navigation buttons
341
+ document.getElementById('prev-move-btn').addEventListener('click', prevMove);
342
+ document.getElementById('next-move-btn').addEventListener('click', nextMove);
343
+ document.getElementById('animate-solution-btn').addEventListener('click', animateSolution);
344
+ }
345
+
346
+ // Randomize the cube
347
+ function randomizeCube() {
348
+ const faces = ['U', 'L', 'F', 'R', 'B', 'D'];
349
+ const colors = ['white', 'yellow', 'red', 'orange', 'blue', 'green'];
350
+
351
+ faces.forEach(face => {
352
+ for (let i = 0; i < 9; i++) {
353
+ if (i === 4) continue; // Skip center pieces
354
+ const randomColor = colors[Math.floor(Math.random() * colors.length)];
355
+ cubeState[face][i] = randomColor;
356
+ }
357
+ });
358
+
359
+ updateCubeVisualization();
360
+ update3DCube();
361
+ clearSolution();
362
+ }
363
+
364
+ // Reset the cube to solved state
365
+ function resetCube() {
366
+ cubeState.U.fill('yellow');
367
+ cubeState.L.fill('orange');
368
+ cubeState.F.fill('green');
369
+ cubeState.R.fill('red');
370
+ cubeState.B.fill('blue');
371
+ cubeState.D.fill('white');
372
+
373
+ updateCubeVisualization();
374
+ update3DCube();
375
+ clearSolution();
376
+ }
377
+
378
+ // Update the 2D cube visualization
379
+ function updateCubeVisualization() {
380
+ const faces = ['U', 'L', 'F', 'R', 'B', 'D'];
381
+
382
+ faces.forEach(face => {
383
+ const faceElement = document.getElementById(`${face.toLowerCase()}-face`);
384
+ const stickers = faceElement.querySelectorAll('.sticker');
385
+
386
+ stickers.forEach((sticker, index) => {
387
+ const color = cubeState[face][index];
388
+ sticker.className = `sticker bg-${colorMap[color]}`;
389
+ });
390
+ });
391
+ }
392
+
393
+ // Solve the cube (mock solution for frontend demo)
394
+ function solveCube() {
395
+ // In a real implementation, this would call a backend API with the cube state
396
+ // For this demo, we'll generate a mock solution
397
+
398
+ // Generate a random solution (10-20 moves)
399
+ const moveTypes = ['R', 'L', 'U', 'D', 'F', 'B'];
400
+ const modifiers = ['', "'", '2'];
401
+ const moveCount = 10 + Math.floor(Math.random() * 11);
402
+
403
+ solutionMoves = [];
404
+ for (let i = 0; i < moveCount; i++) {
405
+ const move = moveTypes[Math.floor(Math.random() * moveTypes.length)];
406
+ const modifier = modifiers[Math.floor(Math.random() * modifiers.length)];
407
+ solutionMoves.push(move + modifier);
408
+ }
409
+
410
+ // Display solution
411
+ displaySolution();
412
+
413
+ // Enable solution controls
414
+ document.getElementById('prev-move-btn').classList.remove('opacity-50', 'cursor-not-allowed');
415
+ document.getElementById('prev-move-btn').disabled = false;
416
+ document.getElementById('next-move-btn').classList.remove('opacity-50', 'cursor-not-allowed');
417
+ document.getElementById('next-move-btn').disabled = false;
418
+ document.getElementById('animate-solution-btn').classList.remove('opacity-50', 'cursor-not-allowed');
419
+ document.getElementById('animate-solution-btn').disabled = false;
420
+
421
+ // Reset move index
422
+ currentMoveIndex = -1;
423
+
424
+ // Generate move buttons
425
+ generateMoveButtons();
426
+ }
427
+
428
+ // Display the solution
429
+ function displaySolution() {
430
+ const solutionElement = document.getElementById('solution-moves');
431
+
432
+ if (solutionMoves.length === 0) {
433
+ solutionElement.innerHTML = '<p class="text-gray-500 italic">No solution found or cube is already solved.</p>';
434
+ return;
435
+ }
436
+
437
+ solutionElement.innerHTML = `
438
+ <p class="text-lg font-semibold mb-2">Solution (${solutionMoves.length} moves):</p>
439
+ <div class="flex flex-wrap gap-2">
440
+ ${solutionMoves.map((move, index) =>
441
+ `<span class="move-tag px-3 py-1 rounded-full ${index === currentMoveIndex ? 'bg-blue-100 text-blue-800 border border-blue-300' : 'bg-gray-200 text-gray-800'}">${move}</span>`
442
+ ).join('')}
443
+ </div>
444
+ `;
445
+ }
446
+
447
+ // Generate move buttons
448
+ function generateMoveButtons() {
449
+ const moveButtonsContainer = document.getElementById('move-buttons');
450
+ moveButtonsContainer.innerHTML = '';
451
+
452
+ solutionMoves.forEach((move, index) => {
453
+ const button = document.createElement('button');
454
+ button.textContent = move;
455
+ button.className = 'move-btn bg-gray-200 hover:bg-gray-300 text-gray-800 py-1 px-3 rounded-lg';
456
+ button.addEventListener('click', () => {
457
+ currentMoveIndex = index;
458
+ updateSolutionDisplay();
459
+ // In a real implementation, we would update the cube visualization to this move
460
+ });
461
+ moveButtonsContainer.appendChild(button);
462
+ });
463
+ }
464
+
465
+ // Clear the solution
466
+ function clearSolution() {
467
+ solutionMoves = [];
468
+ currentMoveIndex = -1;
469
+ displaySolution();
470
+
471
+ // Disable solution controls
472
+ document.getElementById('prev-move-btn').classList.add('opacity-50', 'cursor-not-allowed');
473
+ document.getElementById('prev-move-btn').disabled = true;
474
+ document.getElementById('next-move-btn').classList.add('opacity-50', 'cursor-not-allowed');
475
+ document.getElementById('next-move-btn').disabled = true;
476
+ document.getElementById('animate-solution-btn').classList.add('opacity-50', 'cursor-not-allowed');
477
+ document.getElementById('animate-solution-btn').disabled = true;
478
+
479
+ // Clear move buttons
480
+ document.getElementById('move-buttons').innerHTML = '';
481
+ }
482
+
483
+ // Apply scramble notation
484
+ function applyScramble() {
485
+ const scrambleInput = document.getElementById('scramble-input').value.trim();
486
+ if (!scrambleInput) return;
487
+
488
+ // In a real implementation, this would parse the scramble and update the cube state
489
+ // For this demo, we'll just show a message
490
+ alert('Scramble applied! (This is a frontend demo - in a real app, this would update the cube state)');
491
+
492
+ // Clear any existing solution
493
+ clearSolution();
494
+ }
495
+
496
+ // Previous move
497
+ function prevMove() {
498
+ if (currentMoveIndex > -1) {
499
+ currentMoveIndex--;
500
+ updateSolutionDisplay();
501
+ // In a real implementation, we would update the cube visualization
502
+ }
503
+ }
504
+
505
+ // Next move
506
+ function nextMove() {
507
+ if (currentMoveIndex < solutionMoves.length - 1) {
508
+ currentMoveIndex++;
509
+ updateSolutionDisplay();
510
+ // In a real implementation, we would update the cube visualization
511
+ }
512
+ }
513
+
514
+ // Animate solution
515
+ function animateSolution() {
516
+ alert('Animation started! (This is a frontend demo - in a real app, this would animate the solution)');
517
+ }
518
+
519
+ // Update solution display
520
+ function updateSolutionDisplay() {
521
+ const moveTags = document.querySelectorAll('.move-tag');
522
+ moveTags.forEach((tag, index) => {
523
+ if (index === currentMoveIndex) {
524
+ tag.classList.add('bg-blue-100', 'text-blue-800', 'border', 'border-blue-300');
525
+ tag.classList.remove('bg-gray-200', 'text-gray-800');
526
+ } else {
527
+ tag.classList.remove('bg-blue-100', 'text-blue-800', 'border', 'border-blue-300');
528
+ tag.classList.add('bg-gray-200', 'text-gray-800');
529
+ }
530
+ });
531
+ }
532
+
533
+ // Initialize 3D cube
534
+ function init3DCube() {
535
+ const container = document.getElementById('cube3d');
536
+
537
+ // Create a mock 3D cube using a library like Three.js or cubing.js
538
+ // For this demo, we'll just show a placeholder
539
+ container.innerHTML = `
540
+ <div class="flex items-center justify-center h-full bg-gray-200 rounded-lg">
541
+ <p class="text-gray-500">3D Cube Visualization</p>
542
+ </div>
543
+ `;
544
+
545
+ // In a real implementation, we would use Three.js or similar to render an interactive 3D cube
546
+ // For example:
547
+ /*
548
+ const scene = new THREE.Scene();
549
+ const camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
550
+ const renderer = new THREE.WebGLRenderer();
551
+ renderer.setSize(300, 300);
552
+ container.appendChild(renderer.domElement);
553
+
554
+ // Add cube geometry, materials, etc.
555
+ // ...
556
+
557
+ function animate() {
558
+ requestAnimationFrame(animate);
559
+ renderer.render(scene, camera);
560
+ }
561
+ animate();
562
+ */
563
+ }
564
+
565
+ // Update 3D cube
566
+ function update3DCube() {
567
+ // In a real implementation, this would update the 3D cube visualization
568
+ // based on the current cubeState
569
+ }
570
+ });
571
+ </script>
572
+ <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=Fdgg55/cube-solver" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
573
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Create an app that takes a scrambled 3x3 Rubik’s Cube as input and returns a solution in 25 moves or fewer using an efficient solving algorithm (e.g., Kociemba’s algorithm). Requirements: Input: Accept the current cube state via: Facelet color input (using standard 6-color layout) OR move notation (e.g., R U R' U' F2 D B') Output: Display a solution with at most 25 moves Optional: Visualize the cube and animate the solution Technology: Python backend (preferred), use of existing libraries like kociemba, pycuber, or custom solver logic. Frontend with Gradio or Streamlit for interactivity.