Hugging Face's logo

Spaces:
Rithikadroid
/
nqueensproblemvisualizer-com
Running

App Files Community
Rithikadroid commited on
Commit
07aa1d4
·
verified ·
1 Parent(s): ef26e8a

make nxn chessboard which can change (1-8)

Browse files

i need a n-queens problem visualizer, with it's space tree, and solutions - Initial Deployment

Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +373 -18
  3. prompts.txt +2 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Nqueensproblemvisualizer Com
3
- emoji: 📈
4
- colorFrom: yellow
5
- colorTo: red
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: nqueensproblemvisualizer-com
3
+ emoji: 🐳
4
+ colorFrom: red
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,374 @@
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>N-Queens Problem Visualizer</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
9
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://unpkg.com/feather-icons"></script>
12
+ <style>
13
+ .chess-board {
14
+ display: grid;
15
+ aspect-ratio: 1/1;
16
+ border: 2px solid #333;
17
+ }
18
+
19
+ .chess-cell {
20
+ display: flex;
21
+ justify-content: center;
22
+ align-items: center;
23
+ position: relative;
24
+ }
25
+
26
+ .queen {
27
+ color: #dc2626;
28
+ font-size: 80%;
29
+ }
30
+
31
+ .conflict {
32
+ background-color: rgba(239, 68, 68, 0.3) !important;
33
+ }
34
+
35
+ .solution-node {
36
+ transition: all 0.3s ease;
37
+ cursor: pointer;
38
+ }
39
+
40
+ .solution-node:hover {
41
+ transform: scale(1.05);
42
+ }
43
+
44
+ .tree-container {
45
+ max-height: 60vh;
46
+ overflow-y: auto;
47
+ }
48
+
49
+ .active-solution {
50
+ border: 2px solid #3b82f6;
51
+ box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
52
+ }
53
+ </style>
54
+ </head>
55
+ <body class="bg-gray-50 min-h-screen">
56
+ <div class="container mx-auto px-4 py-8">
57
+ <header class="text-center mb-8" data-aos="fade-down">
58
+ <h1 class="text-3xl md:text-4xl font-bold text-gray-800 mb-2">N-Queens Problem Visualizer</h1>
59
+ <p class="text-gray-600">Place N queens on an N×N chessboard so that no two queens threaten each other</p>
60
+ </header>
61
+
62
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
63
+ <!-- Left Column: Controls and Chessboard -->
64
+ <div class="space-y-6">
65
+ <div class="bg-white rounded-lg shadow-md p-6" data-aos="fade-right">
66
+ <h2 class="text-xl font-semibold mb-4 flex items-center">
67
+ <i data-feather="sliders" class="mr-2"></i> Configuration
68
+ </h2>
69
+
70
+ <div class="mb-4">
71
+ <label class="block text-sm font-medium text-gray-700 mb-2">Board Size (N)</label>
72
+ <div class="flex items-center space-x-4">
73
+ <input type="range" min="1" max="8" value="4" class="w-full" id="boardSizeSlider">
74
+ <span class="text-lg font-medium w-8 text-center" id="boardSizeValue">4</span>
75
+ </div>
76
+ </div>
77
+
78
+ <div class="flex space-x-3">
79
+ <button id="solveBtn" class="flex-1 bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md flex items-center justify-center">
80
+ <i data-feather="play" class="mr-2"></i> Solve
81
+ </button>
82
+ <button id="resetBtn" class="flex-1 bg-gray-200 hover:bg-gray-300 text-gray-800 py-2 px-4 rounded-md flex items-center justify-center">
83
+ <i data-feather="refresh-cw" class="mr-2"></i> Reset
84
+ </button>
85
+ </div>
86
+ </div>
87
+
88
+ <div class="bg-white rounded-lg shadow-md p-6" data-aos="fade-right" data-aos-delay="100">
89
+ <h2 class="text-xl font-semibold mb-4 flex items-center">
90
+ <i data-feather="grid" class="mr-2"></i> Chessboard
91
+ </h2>
92
+
93
+ <div class="flex justify-center">
94
+ <div id="chessboardContainer" class="w-full max-w-md"></div>
95
+ </div>
96
+ </div>
97
+ </div>
98
+
99
+ <!-- Right Column: Solutions and Space Tree -->
100
+ <div class="space-y-6">
101
+ <div class="bg-white rounded-lg shadow-md p-6" data-aos="fade-left">
102
+ <h2 class="text-xl font-semibold mb-4 flex items-center">
103
+ <i data-feather="list" class="mr-2"></i> Solutions
104
+ <span id="solutionsCount" class="ml-2 bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">0 found</span>
105
+ </h2>
106
+
107
+ <div id="solutionsContainer" class="grid grid-cols-2 sm:grid-cols-3 gap-3 max-h-60 overflow-y-auto"></div>
108
+ </div>
109
+
110
+ <div class="bg-white rounded-lg shadow-md p-6" data-aos="fade-left" data-aos-delay="100">
111
+ <h2 class="text-xl font-semibold mb-4 flex items-center">
112
+ <i data-feather="git-branch" class="mr-2"></i> Search Space Tree
113
+ </h2>
114
+
115
+ <div id="treeContainer" class="tree-container bg-gray-100 p-4 rounded-md">
116
+ <div id="treeVisualization" class="relative"></div>
117
+ </div>
118
+ </div>
119
+ </div>
120
+ </div>
121
+ </div>
122
+
123
+ <script>
124
+ // Initialize libraries
125
+ document.addEventListener('DOMContentLoaded', function() {
126
+ AOS.init();
127
+ feather.replace();
128
+
129
+ // Initialize the chessboard
130
+ const boardSizeSlider = document.getElementById('boardSizeSlider');
131
+ const boardSizeValue = document.getElementById('boardSizeValue');
132
+ const chessboardContainer = document.getElementById('chessboardContainer');
133
+ const solutionsContainer = document.getElementById('solutionsContainer');
134
+ const solutionsCount = document.getElementById('solutionsCount');
135
+ const treeVisualization = document.getElementById('treeVisualization');
136
+ const solveBtn = document.getElementById('solveBtn');
137
+ const resetBtn = document.getElementById('resetBtn');
138
+
139
+ let currentSize = 4;
140
+ let solutions = [];
141
+ let currentSolutionIndex = -1;
142
+
143
+ // Create the initial chessboard
144
+ createChessboard(currentSize);
145
+
146
+ // Event listeners
147
+ boardSizeSlider.addEventListener('input', function() {
148
+ currentSize = parseInt(this.value);
149
+ boardSizeValue.textContent = currentSize;
150
+ createChessboard(currentSize);
151
+ clearSolutions();
152
+ });
153
+
154
+ solveBtn.addEventListener('click', function() {
155
+ solveNQueens(currentSize);
156
+ });
157
+
158
+ resetBtn.addEventListener('click', function() {
159
+ createChessboard(currentSize);
160
+ clearSolutions();
161
+ });
162
+
163
+ function createChessboard(size) {
164
+ chessboardContainer.innerHTML = '';
165
+ const board = document.createElement('div');
166
+ board.className = 'chess-board';
167
+ board.style.gridTemplateColumns = `repeat(${size}, 1fr)`;
168
+ board.style.gridTemplateRows = `repeat(${size}, 1fr)`;
169
+
170
+ for (let row = 0; row < size; row++) {
171
+ for (let col = 0; col < size; col++) {
172
+ const cell = document.createElement('div');
173
+ cell.className = `chess-cell ${(row + col) % 2 === 0 ? 'bg-gray-100' : 'bg-gray-300'}`;
174
+ cell.dataset.row = row;
175
+ cell.dataset.col = col;
176
+ board.appendChild(cell);
177
+ }
178
+ }
179
+
180
+ chessboardContainer.appendChild(board);
181
+ }
182
+
183
+ function solveNQueens(n) {
184
+ solutions = [];
185
+ currentSolutionIndex = -1;
186
+ clearSolutions();
187
+
188
+ // Solve using backtracking
189
+ const board = Array(n).fill().map(() => Array(n).fill(0));
190
+ solveNQueensUtil(board, 0, n);
191
+
192
+ // Display solutions count
193
+ solutionsCount.textContent = `${solutions.length} found`;
194
+
195
+ // Display solutions
196
+ if (solutions.length > 0) {
197
+ displaySolutions();
198
+ displaySearchTree(n);
199
+ showSolution(0); // Show first solution by default
200
+ } else {
201
+ solutionsContainer.innerHTML = '<p class="text-gray-500 text-center col-span-full">No solutions found</p>';
202
+ treeVisualization.innerHTML = '<p class="text-gray-500 text-center">No search tree to display</p>';
203
+ }
204
+ }
205
+
206
+ function solveNQueensUtil(board, col, n) {
207
+ if (col >= n) {
208
+ // Found a solution
209
+ const solution = [];
210
+ for (let i = 0; i < n; i++) {
211
+ for (let j = 0; j < n; j++) {
212
+ if (board[i][j] === 1) {
213
+ solution.push(j);
214
+ }
215
+ }
216
+ }
217
+ solutions.push(solution);
218
+ return;
219
+ }
220
+
221
+ for (let i = 0; i < n; i++) {
222
+ if (isSafe(board, i, col, n)) {
223
+ board[i][col] = 1;
224
+ solveNQueensUtil(board, col + 1, n);
225
+ board[i][col] = 0; // backtrack
226
+ }
227
+ }
228
+ }
229
+
230
+ function isSafe(board, row, col, n) {
231
+ // Check row on left side
232
+ for (let i = 0; i < col; i++) {
233
+ if (board[row][i] === 1) return false;
234
+ }
235
+
236
+ // Check upper diagonal on left side
237
+ for (let i = row, j = col; i >= 0 && j >= 0; i--, j--) {
238
+ if (board[i][j] === 1) return false;
239
+ }
240
+
241
+ // Check lower diagonal on left side
242
+ for (let i = row, j = col; i < n && j >= 0; i++, j--) {
243
+ if (board[i][j] === 1) return false;
244
+ }
245
+
246
+ return true;
247
+ }
248
+
249
+ function displaySolutions() {
250
+ solutionsContainer.innerHTML = '';
251
+
252
+ solutions.forEach((solution, index) => {
253
+ const solutionElement = document.createElement('div');
254
+ solutionElement.className = 'solution-node bg-white border rounded-md p-2 text-center cursor-pointer';
255
+ solutionElement.innerHTML = `
256
+ <div class="text-sm font-medium">Solution ${index + 1}</div>
257
+ <div class="text-xs text-gray-500">[${solution.join(', ')}]</div>
258
+ `;
259
+
260
+ solutionElement.addEventListener('click', () => {
261
+ showSolution(index);
262
+ });
263
+
264
+ solutionsContainer.appendChild(solutionElement);
265
+ });
266
+ }
267
+
268
+ function showSolution(index) {
269
+ // Remove active class from all solutions
270
+ document.querySelectorAll('.solution-node').forEach(node => {
271
+ node.classList.remove('active-solution', 'bg-blue-50');
272
+ });
273
+
274
+ // Add active class to selected solution
275
+ document.querySelectorAll('.solution-node')[index].classList.add('active-solution', 'bg-blue-50');
276
+
277
+ currentSolutionIndex = index;
278
+ renderBoardWithSolution(solutions[index]);
279
+ }
280
+
281
+ function renderBoardWithSolution(solution) {
282
+ const cells = document.querySelectorAll('.chess-cell');
283
+ const n = solution.length;
284
+
285
+ // Clear the board
286
+ cells.forEach(cell => {
287
+ cell.innerHTML = '';
288
+ cell.classList.remove('conflict');
289
+ });
290
+
291
+ // Place queens
292
+ for (let col = 0; col < n; col++) {
293
+ const row = solution[col];
294
+ const cellIndex = row * n + col;
295
+ if (cells[cellIndex]) {
296
+ cells[cellIndex].innerHTML = '<i data-feather="circle" class="queen"></i>';
297
+ }
298
+ }
299
+
300
+ feather.replace();
301
+ }
302
+
303
+ function displaySearchTree(n) {
304
+ treeVisualization.innerHTML = '';
305
+
306
+ // Create a simplified visualization of the search space
307
+ const treeContainer = document.createElement('div');
308
+ treeContainer.className = 'space-y-4';
309
+
310
+ // Add title
311
+ const title = document.createElement('div');
312
+ title.className = 'text-sm font-medium text-gray-700';
313
+ title.textContent = `Search space for ${n}-queens problem`;
314
+ treeContainer.appendChild(title);
315
+
316
+ // Add info about the search
317
+ const info = document.createElement('div');
318
+ info.className = 'text-xs text-gray-500';
319
+ info.innerHTML = `
320
+ <p>• The algorithm uses backtracking to explore possible queen placements</p>
321
+ <p>• Each level represents a column where a queen is being placed</p>
322
+ <p>• Valid placements continue to the next level (column)</p>
323
+ <p>• Invalid placements cause backtracking to previous levels</p>
324
+ `;
325
+ treeContainer.appendChild(info);
326
+
327
+ // Add visualization of the search process
328
+ const visual = document.createElement('div');
329
+ visual.className = 'bg-blue-50 p-3 rounded-md mt-2';
330
+
331
+ const visualContent = document.createElement('div');
332
+ visualContent.className = 'text-xs';
333
+
334
+ if (n <= 4) {
335
+ visualContent.innerHTML = `
336
+ <p class="font-medium mb-1">Search Process:</p>
337
+ <p>1. Start with column 0, try all rows</p>
338
+ <p>2. For each valid placement, move to next column</p>
339
+ <p>3. When a solution is found, record it and backtrack</p>
340
+ <p>4. Continue until all possibilities are explored</p>
341
+ `;
342
+ } else {
343
+ visualContent.innerHTML = `
344
+ <p class="font-medium mb-1">Search Process (simplified):</p>
345
+ <p>The search tree for ${n}-queens is too large to display in detail.</p>
346
+ <p>The algorithm explored ${Math.pow(n, n)} possible placements</p>
347
+ <p>but used constraints to prune invalid branches early.</p>
348
+ `;
349
+ }
350
+
351
+ visual.appendChild(visualContent);
352
+ treeContainer.appendChild(visual);
353
+
354
+ treeVisualization.appendChild(treeContainer);
355
+ }
356
+
357
+ function clearSolutions() {
358
+ solutions = [];
359
+ currentSolutionIndex = -1;
360
+ solutionsContainer.innerHTML = '';
361
+ solutionsCount.textContent = '0 found';
362
+ treeVisualization.innerHTML = '<p class="text-gray-500 text-center">Solve to see search tree</p>';
363
+
364
+ // Clear any queens from the board
365
+ const cells = document.querySelectorAll('.chess-cell');
366
+ cells.forEach(cell => {
367
+ cell.innerHTML = '';
368
+ cell.classList.remove('conflict');
369
+ });
370
+ }
371
+ });
372
+ </script>
373
+ </body>
374
  </html>
prompts.txt ADDED
@@ -0,0 +1,2 @@
 
 
 
1
+ make nxn chessboard which can change (1-8)
2
+ i need a n-queens problem visualizer, with it's space tree, and solutions