Hugging Face's logo

Spaces:
sagarproa
/
sagar
Running

App Files Community
sagarproa commited on
Commit
6a06e47
·
verified ·
1 Parent(s): 6331bd8

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +357 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Sagar
3
- emoji: 📈
4
- colorFrom: green
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: sagar
3
+ emoji: 🐳
4
+ colorFrom: purple
5
  colorTo: purple
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,357 @@
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>Chess Move Analyzer</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
9
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/chess.js/0.10.2/chess.js"></script>
10
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/chessboard-js/1.0.0/chessboard-1.0.0.min.js"></script>
11
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chessboard-js/1.0.0/chessboard-1.0.0.min.css">
12
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
13
+ <style>
14
+ .highlight {
15
+ box-shadow: inset 0 0 3px 3px yellow;
16
+ }
17
+ .legal-move {
18
+ background: radial-gradient(rgba(20, 85, 30, 0.5) 19%, rgba(0, 0, 0, 0) 20%);
19
+ pointer-events: auto;
20
+ }
21
+ .arrow {
22
+ position: absolute;
23
+ z-index: 10;
24
+ opacity: 0.8;
25
+ }
26
+ .evaluation-bar {
27
+ height: 300px;
28
+ width: 30px;
29
+ background: linear-gradient(to top, #000000, #ffffff);
30
+ position: relative;
31
+ }
32
+ .evaluation-marker {
33
+ position: absolute;
34
+ width: 100%;
35
+ height: 2px;
36
+ background-color: red;
37
+ }
38
+ .move-history {
39
+ max-height: 300px;
40
+ overflow-y: auto;
41
+ }
42
+ .best-move {
43
+ background-color: rgba(76, 175, 80, 0.3);
44
+ }
45
+ .custom-arrow {
46
+ position: absolute;
47
+ width: 0;
48
+ height: 0;
49
+ border-left: 10px solid transparent;
50
+ border-right: 10px solid transparent;
51
+ border-bottom: 15px solid rgba(0, 0, 255, 0.5);
52
+ transform-origin: center;
53
+ pointer-events: none;
54
+ }
55
+ .blink {
56
+ animation: blink 1s ease-in-out infinite;
57
+ }
58
+ @keyframes blink {
59
+ 0% { opacity: 1; }
60
+ 50% { opacity: 0.5; }
61
+ 100% { opacity: 1; }
62
+ }
63
+ .best-square {
64
+ box-shadow: inset 0 0 3px 3px rgba(0, 255, 0, 0.7);
65
+ }
66
+ </style>
67
+ </head>
68
+ <body class="bg-gray-100 min-h-screen">
69
+ <div class="container mx-auto py-8 px-4">
70
+ <header class="text-center mb-8">
71
+ <h1 class="text-4xl font-bold text-gray-800 mb-2">Chess Move Analyzer</h1>
72
+ <p class="text-lg text-gray-600">Edit, analyze, and find the best moves for any chess position</p>
73
+ </header>
74
+
75
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
76
+ <!-- Left Panel - Controls and Input -->
77
+ <div class="bg-white rounded-lg shadow-md p-6">
78
+ <h2 class="text-xl font-semibold mb-4 text-gray-800">Position Setup</h2>
79
+
80
+ <div class="mb-6">
81
+ <label class="block text-sm font-medium text-gray-700 mb-2">Load Position</label>
82
+ <div class="flex space-x-2">
83
+ <button id="loadStartPos" class="flex-1 bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded transition">
84
+ <i class="fas fa-chess-board mr-2"></i>Start Position
85
+ </button>
86
+ <button id="clearBoard" class="flex-1 bg-gray-500 hover:bg-gray-600 text-white py-2 px-4 rounded transition">
87
+ <i class="fas fa-trash-alt mr-2"></i>Clear Board
88
+ </button>
89
+ </div>
90
+ </div>
91
+
92
+ <div class="mb-6">
93
+ <label class="block text-sm font-medium text-gray-700 mb-2">Import/Export</label>
94
+ <div class="flex space-x-2 mb-2">
95
+ <button id="importFEN" class="flex-1 bg-green-500 hover:bg-green-600 text-white py-2 px-4 rounded transition">
96
+ <i class="fas fa-file-import mr-2"></i>Import FEN
97
+ </button>
98
+ <button id="exportFEN" class="flex-1 bg-purple-500 hover:bg-purple-600 text-white py-2 px-4 rounded transition">
99
+ <i class="fas fa-file-export mr-2"></i>Export FEN
100
+ </button>
101
+ </div>
102
+ <div class="flex space-x-2">
103
+ <button id="importPGN" class="flex-1 bg-green-500 hover:bg-green-600 text-white py-2 px-4 rounded transition">
104
+ <i class="fas fa-file-import mr-2"></i>Import PGN
105
+ </button>
106
+ <button id="exportPGN" class="flex-1 bg-purple-500 hover:bg-purple-600 text-white py-2 px-4 rounded transition">
107
+ <i class="fas fa-file-export mr-2"></i>Export PGN
108
+ </button>
109
+ </div>
110
+ </div>
111
+
112
+ <div class="mb-6">
113
+ <label for="fenInput" class="block text-sm font-medium text-gray-700 mb-2">FEN String</label>
114
+ <div class="flex">
115
+ <input type="text" id="fenInput" class="flex-1 border border-gray-300 rounded-l px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Enter FEN...">
116
+ <button id="loadFEN" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-r transition">
117
+ <i class="fas fa-check"></i>
118
+ </button>
119
+ </div>
120
+ </div>
121
+
122
+ <div class="mb-6">
123
+ <label for="pgnInput" class="block text-sm font-medium text-gray-700 mb-2">PGN Moves</label>
124
+ <textarea id="pgnInput" rows="4" class="w-full border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Enter PGN..."></textarea>
125
+ <button id="loadPGN" class="mt-2 bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded transition w-full">
126
+ <i class="fas fa-check mr-2"></i>Load PGN
127
+ </button>
128
+ </div>
129
+
130
+ <div class="mb-6">
131
+ <label class="block text-sm font-medium text-gray-700 mb-2">Game Navigation</label>
132
+ <div class="flex justify-between">
133
+ <button id="prevMove" class="bg-gray-200 hover:bg-gray-300 text-gray-800 py-2 px-4 rounded transition">
134
+ <i class="fas fa-arrow-left"></i> Previous
135
+ </button>
136
+ <button id="nextMove" class="bg-gray-200 hover:bg-gray-300 text-gray-800 py-2 px-4 rounded transition">
137
+ Next <i class="fas fa-arrow-right"></i>
138
+ </button>
139
+ <button id="firstMove" class="bg-gray-200 hover:bg-gray-300 text-gray-800 py-2 px-4 rounded transition">
140
+ <i class="fas fa-fast-backward"></i> First
141
+ </button>
142
+ <button id="lastMove" class="bg-gray-200 hover:bg-gray-300 text-gray-800 py-2 px-4 rounded transition">
143
+ Last <i class="fas fa-fast-forward"></i>
144
+ </button>
145
+ </div>
146
+ </div>
147
+
148
+ <div class="mb-6">
149
+ <label class="block text-sm font-medium text-gray-700 mb-2">Analysis Tools</label>
150
+ <div class="flex space-x-2">
151
+ <button id="analyzeBtn" class="flex-1 bg-indigo-500 hover:bg-indigo-600 text-white py-2 px-4 rounded transition">
152
+ <i class="fas fa-brain mr-2"></i>Analyze
153
+ </button>
154
+ <button id="hintBtn" class="flex-1 bg-teal-500 hover:bg-teal-600 text-white py-2 px-4 rounded transition">
155
+ <i class="fas fa-lightbulb mr-2"></i>Hint
156
+ </button>
157
+ </div>
158
+ </div>
159
+
160
+ <div class="mb-6">
161
+ <label class="block text-sm font-medium text-gray-700 mb-2">Board Options</label>
162
+ <div class="flex items-center space-x-4">
163
+ <div class="flex items-center">
164
+ <input type="checkbox" id="showLegalMoves" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" checked>
165
+ <label for="showLegalMoves" class="ml-2 block text-sm text-gray-700">Legal Moves</label>
166
+ </div>
167
+ <div class="flex items-center">
168
+ <input type="checkbox" id="flipBoard" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
169
+ <label for="flipBoard" class="ml-2 block text-sm text-gray-700">Flip Board</label>
170
+ </div>
171
+ </div>
172
+ </div>
173
+ </div>
174
+
175
+ <!-- Center Panel - Chessboard -->
176
+ <div class="bg-white rounded-lg shadow-md p-6 flex flex-col items-center">
177
+ <h2 class="text-xl font-semibold mb-4 text-gray-800">Chessboard</h2>
178
+ <div id="board" style="width: 400px; height: 400px;"></div>
179
+
180
+ <div class="mt-4 w-full">
181
+ <div class="flex justify-between items-center mb-2">
182
+ <span class="text-sm font-medium text-gray-700">Evaluation</span>
183
+ <span id="evalScore" class="text-sm font-medium text-gray-700">0.00</span>
184
+ </div>
185
+ <div class="evaluation-bar relative mx-auto">
186
+ <div id="evalMarker" class="evaluation-marker"></div>
187
+ </div>
188
+ </div>
189
+ </div>
190
+
191
+ <!-- Right Panel - Analysis and Move History -->
192
+ <div class="bg-white rounded-lg shadow-md p-6">
193
+ <h2 class="text-xl font-semibold mb-4 text-gray-800">Analysis & Moves</h2>
194
+
195
+ <div class="mb-6">
196
+ <h3 class="text-lg font-medium text-gray-700 mb-2">Best Move</h3>
197
+ <div id="bestMoveContainer" class="bg-gray-100 p-4 rounded hidden">
198
+ <div class="flex items-center">
199
+ <span class="font-bold text-green-600 mr-2">Best:</span>
200
+ <span id="bestMove" class="font-mono"></span>
201
+ <span id="bestMoveEval" class="ml-auto font-mono"></span>
202
+ </div>
203
+ <div id="bestMoveExplanation" class="text-sm text-gray-600 mt-2"></div>
204
+ </div>
205
+ </div>
206
+
207
+ <div class="mb-6">
208
+ <h3 class="text-lg font-medium text-gray-700 mb-2">Top Moves</h3>
209
+ <div id="topMovesContainer" class="space-y-2">
210
+ <div class="text-center text-gray-500">Analyze position to see top moves</div>
211
+ </div>
212
+ </div>
213
+
214
+ <div>
215
+ <h3 class="text-lg font-medium text-gray-700 mb-2">Move History</h3>
216
+ <div id="moveHistory" class="move-history bg-gray-100 p-3 rounded max-h-60 overflow-y-auto">
217
+ <div class="text-center text-gray-500">No moves yet</div>
218
+ </div>
219
+ </div>
220
+ </div>
221
+ </div>
222
+ </div>
223
+
224
+ <!-- Modal for FEN/PGN input -->
225
+ <div id="inputModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
226
+ <div class="bg-white rounded-lg p-6 w-full max-w-md">
227
+ <h3 id="modalTitle" class="text-xl font-semibold mb-4"></h3>
228
+ <textarea id="modalInput" class="w-full border border-gray-300 rounded px-3 py-2 mb-4 focus:outline-none focus:ring-2 focus:ring-blue-500" rows="5"></textarea>
229
+ <div class="flex justify-end space-x-2">
230
+ <button id="modalCancel" class="bg-gray-300 hover:bg-gray-400 text-gray-800 py-2 px-4 rounded transition">
231
+ Cancel
232
+ </button>
233
+ <button id="modalConfirm" class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded transition">
234
+ Confirm
235
+ </button>
236
+ </div>
237
+ </div>
238
+ </div>
239
+
240
+ <script>
241
+ // Initialize chess.js and chessboard.js
242
+ const game = new Chess();
243
+ let board = null;
244
+ let currentFEN = game.fen();
245
+ let moveHistory = [];
246
+ let analysisResults = null;
247
+ let arrows = [];
248
+ let currentMoveIndex = -1;
249
+ let bestMoveFrom = '';
250
+ let bestMoveTo = '';
251
+
252
+ // Initialize the board
253
+ function initBoard() {
254
+ const boardConfig = {
255
+ position: 'start',
256
+ draggable: true,
257
+ onDragStart: onDragStart,
258
+ onDrop: onDrop,
259
+ onSnapEnd: onSnapEnd,
260
+ pieceTheme: 'https://cdnjs.cloudflare.com/ajax/libs/chessboard-js/1.0.0/img/chesspieces/wikipedia/{piece}.png',
261
+ orientation: 'white',
262
+ showNotation: true
263
+ };
264
+
265
+ board = Chessboard('board', boardConfig);
266
+ }
267
+
268
+ // Update the board position
269
+ function updateBoard() {
270
+ board.position(game.fen());
271
+ currentFEN = game.fen();
272
+ updateMoveHistory();
273
+ updateEvalBar(0);
274
+ clearAnalysis();
275
+ clearHighlights();
276
+ }
277
+
278
+ // Clear all highlights
279
+ function clearHighlights() {
280
+ $('.square-55d63').removeClass('best-square highlight legal-move');
281
+ }
282
+
283
+ // Handle drag start
284
+ function onDragStart(source, piece, position, orientation) {
285
+ // Don't allow dragging if it's not the player's turn
286
+ if ((game.turn() === 'w' && piece.search(/^b/) !== -1) ||
287
+ (game.turn() === 'b' && piece.search(/^w/) !== -1)) {
288
+ return false;
289
+ }
290
+
291
+ // Highlight legal moves
292
+ if ($('#showLegalMoves').is(':checked')) {
293
+ highlightLegalMoves(source);
294
+ }
295
+ }
296
+
297
+ // Highlight legal moves for a piece
298
+ function highlightLegalMoves(source) {
299
+ // Clear previous highlights
300
+ $('.square-55d63').removeClass('highlight legal-move');
301
+
302
+ // Highlight source square
303
+ $(`#board .square-${source}`).addClass('highlight');
304
+
305
+ // Highlight legal moves
306
+ const moves = game.moves({
307
+ square: source,
308
+ verbose: true
309
+ });
310
+
311
+ for (const move of moves) {
312
+ $(`#board .square-${move.to}`).addClass('legal-move');
313
+ }
314
+ }
315
+
316
+ // Handle piece drop
317
+ function onDrop(source, target) {
318
+ // Try to make the move
319
+ const move = game.move({
320
+ from: source,
321
+ to: target,
322
+ promotion: 'q' // Always promote to queen for simplicity
323
+ });
324
+
325
+ // Illegal move
326
+ if (move === null) return 'snapback';
327
+
328
+ // Update the board
329
+ updateBoard();
330
+
331
+ // Clear highlights
332
+ clearHighlights();
333
+ }
334
+
335
+ // Handle snap end
336
+ function onSnapEnd() {
337
+ board.position(game.fen());
338
+ }
339
+
340
+ // Update move history display
341
+ function updateMoveHistory() {
342
+ const history = game.history({ verbose: true });
343
+ moveHistory = history;
344
+ currentMoveIndex = history.length - 1;
345
+
346
+ const moveHistoryElement = $('#moveHistory');
347
+ moveHistoryElement.empty();
348
+
349
+ if (history.length === 0) {
350
+ moveHistoryElement.append('<div class="text-center text-gray-500">No moves yet</div>');
351
+ return;
352
+ }
353
+
354
+ const movesList = $('<div class="grid grid-cols-2 gap-1"></div>');
355
+
356
+ for (let i = 0; i < history
357
+ </html>