Hugging Face's logo

Spaces:
chaojie
/
aiboard
Running

App Files Community
chaojie commited on
Commit
ef7a581
·
verified ·
1 Parent(s): ed31040

基于excalidraw构建一个AI画板程序 - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +353 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Aiboard
3
- emoji: 🐢
4
- colorFrom: red
5
- colorTo: gray
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: aiboard
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: blue
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,353 @@
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>AI Drawing Board</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/@excalidraw/excalidraw@0/dist/excalidraw.min.js"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
10
+ <style>
11
+ .drawing-container {
12
+ height: calc(100vh - 180px);
13
+ }
14
+ .ai-suggestion {
15
+ transition: all 0.3s ease;
16
+ }
17
+ .ai-suggestion:hover {
18
+ transform: translateY(-5px);
19
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
20
+ }
21
+ @keyframes pulse {
22
+ 0%, 100% {
23
+ opacity: 1;
24
+ }
25
+ 50% {
26
+ opacity: 0.5;
27
+ }
28
+ }
29
+ .animate-pulse {
30
+ animation: pulse 2s infinite;
31
+ }
32
+ </style>
33
+ </head>
34
+ <body class="bg-gray-100">
35
+ <div class="container mx-auto px-4 py-6">
36
+ <!-- Header -->
37
+ <header class="flex flex-col md:flex-row justify-between items-center mb-6">
38
+ <div class="flex items-center mb-4 md:mb-0">
39
+ <h1 class="text-3xl font-bold text-indigo-700">AI Drawing Board</h1>
40
+ <span class="ml-2 px-2 py-1 bg-indigo-100 text-indigo-800 text-xs font-semibold rounded-full">Beta</span>
41
+ </div>
42
+ <div class="flex space-x-2">
43
+ <button id="save-btn" class="px-4 py-2 bg-white border border-gray-300 rounded-lg shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500">
44
+ Save Drawing
45
+ </button>
46
+ <button id="clear-btn" class="px-4 py-2 bg-white border border-gray-300 rounded-lg shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500">
47
+ Clear Board
48
+ </button>
49
+ <button id="export-btn" class="px-4 py-2 bg-indigo-600 text-white rounded-lg shadow-sm text-sm font-medium hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500">
50
+ Export as PNG
51
+ </button>
52
+ </div>
53
+ </header>
54
+
55
+ <!-- Main Content -->
56
+ <div class="flex flex-col lg:flex-row gap-6">
57
+ <!-- Drawing Canvas -->
58
+ <div class="flex-1 bg-white rounded-xl shadow-md overflow-hidden">
59
+ <div class="p-4 border-b border-gray-200 bg-gray-50">
60
+ <h2 class="text-lg font-medium text-gray-900">Drawing Canvas</h2>
61
+ <p class="text-sm text-gray-500">Draw freely or use AI suggestions</p>
62
+ </div>
63
+ <div id="drawing-container" class="drawing-container"></div>
64
+ </div>
65
+
66
+ <!-- AI Panel -->
67
+ <div class="w-full lg:w-80 bg-white rounded-xl shadow-md overflow-hidden">
68
+ <div class="p-4 border-b border-gray-200 bg-gray-50">
69
+ <h2 class="text-lg font-medium text-gray-900">AI Assistant</h2>
70
+ <p class="text-sm text-gray-500">Get creative suggestions</p>
71
+ </div>
72
+ <div class="p-4 space-y-4">
73
+ <!-- AI Prompt Input -->
74
+ <div>
75
+ <label for="ai-prompt" class="block text-sm font-medium text-gray-700 mb-1">Describe what you want to draw</label>
76
+ <div class="flex">
77
+ <input type="text" id="ai-prompt" class="flex-1 px-3 py-2 border border-gray-300 rounded-l-lg focus:ring-indigo-500 focus:border-indigo-500" placeholder="e.g. a sunset over mountains">
78
+ <button id="generate-btn" class="px-4 py-2 bg-indigo-600 text-white rounded-r-lg hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500">
79
+ Generate
80
+ </button>
81
+ </div>
82
+ </div>
83
+
84
+ <!-- AI Suggestions -->
85
+ <div>
86
+ <h3 class="text-sm font-medium text-gray-700 mb-2">Quick Suggestions</h3>
87
+ <div class="grid grid-cols-2 gap-2">
88
+ <button class="ai-suggestion px-3 py-2 bg-indigo-50 text-indigo-700 text-xs font-medium rounded-lg hover:bg-indigo-100">
89
+ Simple House
90
+ </button>
91
+ <button class="ai-suggestion px-3 py-2 bg-indigo-50 text-indigo-700 text-xs font-medium rounded-lg hover:bg-indigo-100">
92
+ Tree Landscape
93
+ </button>
94
+ <button class="ai-suggestion px-3 py-2 bg-indigo-50 text-indigo-700 text-xs font-medium rounded-lg hover:bg-indigo-100">
95
+ Abstract Art
96
+ </button>
97
+ <button class="ai-suggestion px-3 py-2 bg-indigo-50 text-indigo-700 text-xs font-medium rounded-lg hover:bg-indigo-100">
98
+ Flow Chart
99
+ </button>
100
+ </div>
101
+ </div>
102
+
103
+ <!-- AI Processing -->
104
+ <div id="ai-processing" class="hidden p-4 bg-blue-50 rounded-lg">
105
+ <div class="flex items-center space-x-2 text-blue-700">
106
+ <svg class="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
107
+ <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
108
+ <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
109
+ </svg>
110
+ <span>AI is generating your drawing...</span>
111
+ </div>
112
+ </div>
113
+
114
+ <!-- AI Results -->
115
+ <div id="ai-results" class="space-y-3 hidden">
116
+ <h3 class="text-sm font-medium text-gray-700">AI Suggestions</h3>
117
+ <div class="grid grid-cols-2 gap-2">
118
+ <div class="ai-suggestion p-2 bg-white border border-gray-200 rounded-lg cursor-pointer hover:border-indigo-300">
119
+ <div class="h-20 bg-gray-100 rounded mb-1"></div>
120
+ <p class="text-xs text-gray-600 truncate">Option 1</p>
121
+ </div>
122
+ <div class="ai-suggestion p-2 bg-white border border-gray-200 rounded-lg cursor-pointer hover:border-indigo-300">
123
+ <div class="h-20 bg-gray-100 rounded mb-1"></div>
124
+ <p class="text-xs text-gray-600 truncate">Option 2</p>
125
+ </div>
126
+ <div class="ai-suggestion p-2 bg-white border border-gray-200 rounded-lg cursor-pointer hover:border-indigo-300">
127
+ <div class="h-20 bg-gray-100 rounded mb-1"></div>
128
+ <p class="text-xs text-gray-600 truncate">Option 3</p>
129
+ </div>
130
+ <div class="ai-suggestion p-2 bg-white border border-gray-200 rounded-lg cursor-pointer hover:border-indigo-300">
131
+ <div class="h-20 bg-gray-100 rounded mb-1"></div>
132
+ <p class="text-xs text-gray-600 truncate">Option 4</p>
133
+ </div>
134
+ </div>
135
+ </div>
136
+
137
+ <!-- AI Tools -->
138
+ <div class="pt-4 border-t border-gray-200">
139
+ <h3 class="text-sm font-medium text-gray-700 mb-2">AI Enhancement Tools</h3>
140
+ <div class="space-y-2">
141
+ <button class="w-full flex items-center justify-between px-3 py-2 bg-white border border-gray-200 rounded-lg hover:bg-gray-50">
142
+ <span class="text-sm text-gray-700">Improve Drawing</span>
143
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
144
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
145
+ </svg>
146
+ </button>
147
+ <button class="w-full flex items-center justify-between px-3 py-2 bg-white border border-gray-200 rounded-lg hover:bg-gray-50">
148
+ <span class="text-sm text-gray-700">Add Color Palette</span>
149
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
150
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
151
+ </svg>
152
+ </button>
153
+ <button class="w-full flex items-center justify-between px-3 py-2 bg-white border border-gray-200 rounded-lg hover:bg-gray-50">
154
+ <span class="text-sm text-gray-700">Convert to Diagram</span>
155
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
156
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
157
+ </svg>
158
+ </button>
159
+ </div>
160
+ </div>
161
+ </div>
162
+ </div>
163
+ </div>
164
+
165
+ <!-- Recent Drawings -->
166
+ <div class="mt-8 bg-white rounded-xl shadow-md overflow-hidden">
167
+ <div class="p-4 border-b border-gray-200 bg-gray-50">
168
+ <h2 class="text-lg font-medium text-gray-900">Recent Drawings</h2>
169
+ <p class="text-sm text-gray-500">Your saved creations</p>
170
+ </div>
171
+ <div class="p-4">
172
+ <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
173
+ <div class="relative group">
174
+ <div class="h-32 bg-gray-100 rounded-lg"></div>
175
+ <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-20 rounded-lg flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all duration-200">
176
+ <button class="p-2 bg-white rounded-full shadow-md text-indigo-600 hover:bg-indigo-50">
177
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
178
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" />
179
+ </svg>
180
+ </button>
181
+ </div>
182
+ </div>
183
+ <div class="relative group">
184
+ <div class="h-32 bg-gray-100 rounded-lg"></div>
185
+ <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-20 rounded-lg flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all duration-200">
186
+ <button class="p-2 bg-white rounded-full shadow-md text-indigo-600 hover:bg-indigo-50">
187
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
188
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" />
189
+ </svg>
190
+ </button>
191
+ </div>
192
+ </div>
193
+ <div class="relative group">
194
+ <div class="h-32 bg-gray-100 rounded-lg"></div>
195
+ <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-20 rounded-lg flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all duration-200">
196
+ <button class="p-2 bg-white rounded-full shadow-md text-indigo-600 hover:bg-indigo-50">
197
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
198
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" />
199
+ </svg>
200
+ </button>
201
+ </div>
202
+ </div>
203
+ <div class="relative group">
204
+ <div class="h-32 bg-gray-100 rounded-lg"></div>
205
+ <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-20 rounded-lg flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all duration-200">
206
+ <button class="p-2 bg-white rounded-full shadow-md text-indigo-600 hover:bg-indigo-50">
207
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
208
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" />
209
+ </svg>
210
+ </button>
211
+ </div>
212
+ </div>
213
+ <div class="relative group">
214
+ <div class="h-32 bg-gray-100 rounded-lg"></div>
215
+ <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-20 rounded-lg flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all duration-200">
216
+ <button class="p-2 bg-white rounded-full shadow-md text-indigo-600 hover:bg-indigo-50">
217
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
218
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" />
219
+ </svg>
220
+ </button>
221
+ </div>
222
+ </div>
223
+ <div class="relative flex items-center justify-center h-32 bg-gray-50 border-2 border-dashed border-gray-300 rounded-lg hover:border-gray-400 cursor-pointer">
224
+ <div class="text-center">
225
+ <svg xmlns="http://www.w3.org/2000/svg" class="mx-auto h-8 w-8 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
226
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
227
+ </svg>
228
+ <span class="text-sm text-gray-600">New Drawing</span>
229
+ </div>
230
+ </div>
231
+ </div>
232
+ </div>
233
+ </div>
234
+ </div>
235
+
236
+ <script>
237
+ // Initialize Excalidraw
238
+ const excalidrawWrapper = document.getElementById("drawing-container");
239
+ const { Excalidraw, exportToCanvas } = EXCALIDRAW;
240
+
241
+ let excalidrawAPI = null;
242
+
243
+ const initExcalidraw = async () => {
244
+ excalidrawAPI = new Excalidraw({
245
+ width: excalidrawWrapper.offsetWidth,
246
+ height: excalidrawWrapper.offsetHeight,
247
+ });
248
+
249
+ excalidrawWrapper.appendChild(excalidrawAPI);
250
+
251
+ // Set theme based on system preference
252
+ const isDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
253
+ excalidrawAPI.updateScene({
254
+ appState: { theme: isDark ? "dark" : "light" }
255
+ });
256
+
257
+ // Load any saved data
258
+ const savedData = localStorage.getItem('excalidraw-data');
259
+ if (savedData) {
260
+ excalidrawAPI.updateScene(JSON.parse(savedData));
261
+ }
262
+ };
263
+
264
+ // Event Listeners
265
+ document.getElementById('save-btn').addEventListener('click', () => {
266
+ const sceneData = excalidrawAPI.getSceneData();
267
+ localStorage.setItem('excalidraw-data', JSON.stringify(sceneData));
268
+
269
+ // Show success message
270
+ const saveBtn = document.getElementById('save-btn');
271
+ const originalText = saveBtn.textContent;
272
+ saveBtn.textContent = 'Saved!';
273
+ saveBtn.classList.remove('bg-white');
274
+ saveBtn.classList.add('bg-green-100', 'text-green-800');
275
+
276
+ setTimeout(() => {
277
+ saveBtn.textContent = originalText;
278
+ saveBtn.classList.remove('bg-green-100', 'text-green-800');
279
+ saveBtn.classList.add('bg-white');
280
+ }, 2000);
281
+ });
282
+
283
+ document.getElementById('clear-btn').addEventListener('click', () => {
284
+ if (confirm('Are you sure you want to clear the drawing board?')) {
285
+ excalidrawAPI.resetScene();
286
+ }
287
+ });
288
+
289
+ document.getElementById('export-btn').addEventListener('click', async () => {
290
+ const canvas = await exportToCanvas({
291
+ elements: excalidrawAPI.getSceneElements(),
292
+ appState: excalidrawAPI.getAppState(),
293
+ files: excalidrawAPI.getFiles(),
294
+ });
295
+
296
+ const link = document.createElement('a');
297
+ link.download = 'drawing.png';
298
+ link.href = canvas.toDataURL('image/png');
299
+ link.click();
300
+ });
301
+
302
+ document.getElementById('generate-btn').addEventListener('click', () => {
303
+ const prompt = document.getElementById('ai-prompt').value.trim();
304
+ if (!prompt) {
305
+ alert('Please enter a description for the AI');
306
+ return;
307
+ }
308
+
309
+ // Show processing
310
+ document.getElementById('ai-processing').classList.remove('hidden');
311
+ document.getElementById('ai-results').classList.add('hidden');
312
+
313
+ // Simulate AI processing (in a real app, this would call an API)
314
+ setTimeout(() => {
315
+ document.getElementById('ai-processing').classList.add('hidden');
316
+ document.getElementById('ai-results').classList.remove('hidden');
317
+
318
+ // Update the suggestion boxes with the prompt
319
+ const suggestionBoxes = document.querySelectorAll('#ai-results .ai-suggestion p');
320
+ suggestionBoxes.forEach((box, index) => {
321
+ box.textContent = `${prompt} - Variation ${index + 1}`;
322
+ });
323
+ }, 2000);
324
+ });
325
+
326
+ // Quick suggestion buttons
327
+ document.querySelectorAll('.ai-suggestion').forEach(button => {
328
+ button.addEventListener('click', function() {
329
+ const suggestion = this.textContent.trim();
330
+ document.getElementById('ai-prompt').value = suggestion;
331
+ });
332
+ });
333
+
334
+ // Initialize when DOM is loaded
335
+ document.addEventListener('DOMContentLoaded', () => {
336
+ initExcalidraw();
337
+
338
+ // Watch for window resize
339
+ window.addEventListener('resize', () => {
340
+ if (excalidrawAPI) {
341
+ excalidrawAPI.updateScene({
342
+ appState: {
343
+ ...excalidrawAPI.getAppState(),
344
+ width: excalidrawWrapper.offsetWidth,
345
+ height: excalidrawWrapper.offsetHeight
346
+ }
347
+ });
348
+ }
349
+ });
350
+ });
351
+ </script>
352
+ <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=chaojie/aiboard" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
353
+ </html>