Hugging Face's logo

Spaces:
nofl
/
deepsitewow
Running

App Files Community
nofl commited on
Commit
df9cfc3
·
verified ·
1 Parent(s): dd71e7d

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +726 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Deepsitewow
3
- emoji: 📉
4
- colorFrom: blue
5
- colorTo: indigo
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: deepsitewow
3
+ emoji: 🐳
4
+ colorFrom: yellow
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,726 @@
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>VSCode AI Coder - Advanced Coding Assistant</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@300;400;500;600&display=swap">
9
+ <link rel="stylesheet" data-name="vs/editor/editor.main" href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.47.0/min/vs/editor/editor.main.min.css">
10
+ <style>
11
+ .gradient-bg {
12
+ background: linear-gradient(135deg, #0f1116 0%, #1a1d25 100%);
13
+ }
14
+ .glassmorphic-card {
15
+ background: rgba(26, 29, 37, 0.7);
16
+ backdrop-filter: blur(8px);
17
+ -webkit-backdrop-filter: blur(8px);
18
+ border: 1px solid rgba(255, 255, 255, 0.08);
19
+ }
20
+ .accent-gradient {
21
+ background: linear-gradient(135deg, #e91e63 0%, #673ab7 100%);
22
+ }
23
+ .accent-border {
24
+ border-image: linear-gradient(135deg, #e91e63 0%, #673ab7 100%);
25
+ border-image-slice: 1;
26
+ }
27
+ .editor-container {
28
+ height: calc(100vh - 82px);
29
+ }
30
+ .file-tree li span:hover {
31
+ background: rgba(255, 255, 255, 0.03);
32
+ }
33
+ .suggestion-bubble {
34
+ position: absolute;
35
+ background: rgba(41, 98, 255, 0.15);
36
+ border-left: 3px solid #673ab7;
37
+ }
38
+ .typing-indicator span {
39
+ display: inline-block;
40
+ width: 8px;
41
+ height: 8px;
42
+ background-color: #673ab7;
43
+ border-radius: 50%;
44
+ animation: typing 1.4s infinite ease-in-out;
45
+ }
46
+ .typing-indicator span:nth-child(2) {
47
+ animation-delay: 0.2s;
48
+ }
49
+ .typing-indicator span:nth-child(3) {
50
+ animation-delay: 0.4s;
51
+ }
52
+ @keyframes typing {
53
+ 0% { transform: translateY(0); }
54
+ 50% { transform: translateY(-5px); }
55
+ 100% { transform: translateY(0); }
56
+ }
57
+ .slide-in {
58
+ animation: slideIn 0.3s ease-out forwards;
59
+ }
60
+ @keyframes slideIn {
61
+ from { transform: translateX(100%); opacity: 0; }
62
+ to { transform: translateX(0); opacity: 1; }
63
+ }
64
+ .file-item:hover {
65
+ background: rgba(255, 255, 255, 0.05);
66
+ }
67
+ .file-item.active {
68
+ background: rgba(41, 98, 255, 0.15);
69
+ border-left: 2px solid #673ab7;
70
+ }
71
+ .hidden {
72
+ display: none !important;
73
+ }
74
+ .toggle-circle {
75
+ transition: all 0.3s ease;
76
+ }
77
+ .toggled .toggle-line:nth-child(1) {
78
+ transform: rotate(45deg) translate(5px, 5px);
79
+ }
80
+ .toggled .toggle-line:nth-child(2) {
81
+ opacity: 0;
82
+ }
83
+ .toggled .toggle-line:nth-child(3) {
84
+ transform: rotate(-45deg) translate(5px, -5px);
85
+ }
86
+ .monaco-editor {
87
+ --vscode-editor-background: #13161d !important;
88
+ }
89
+ .sidebar-content {
90
+ transition: all 0.3s ease;
91
+ }
92
+ #settingsPanel {
93
+ transition: all 0.3s ease;
94
+ right: -288px;
95
+ }
96
+ #settingsPanel.open {
97
+ right: 0;
98
+ }
99
+ </style>
100
+ </head>
101
+ <body class="gradient-bg text-gray-200 font-['Inter'] min-h-screen overflow-hidden">
102
+ <div class="flex h-screen">
103
+ <!-- Left Sidebar - Project Outliner -->
104
+ <div class="w-64 glassmorphic-card border-r border-gray-800 flex flex-col">
105
+ <div class="p-4 border-b border-gray-800">
106
+ <h2 class="text-xl font-['Bebas_Neue'] tracking-wider">PROJECT EXPLORER</h2>
107
+ <div class="relative mt-2">
108
+ <input type="text" placeholder="Search files..." class="w-full bg-gray-900 bg-opacity-50 rounded px-3 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-purple-500">
109
+ </div>
110
+ </div>
111
+
112
+ <div class="overflow-y-auto flex-1 p-2">
113
+ <ul class="file-tree text-sm space-y-1" id="fileTree">
114
+ <li class="file-item rounded px-2 py-1 cursor-pointer flex items-center" data-folder="project">
115
+ <svg class="w-4 h-4 mr-2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
116
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path>
117
+ </svg>
118
+ Project Name
119
+ </li>
120
+ <li class="pl-6">
121
+ <ul class="space-y-1 border-l border-gray-700 pl-3">
122
+ <li class="file-item rounded px-2 py-1 cursor-pointer flex items-center" data-folder="src">
123
+ <svg class="w-4 h-4 mr-2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
124
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
125
+ </svg>
126
+ src
127
+ </li>
128
+ <li class="pl-6">
129
+ <ul class="space-y-1 border-l border-gray-700 pl-3">
130
+ <li class="file-item rounded px-2 py-1 cursor-pointer flex items-center" data-folder="components">
131
+ <svg class="w-4 h-4 mr-2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
132
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
133
+ </svg>
134
+ components
135
+ </li>
136
+ <li class="file-item rounded px-2 py-1 cursor-pointer flex items-center active" data-file="App.jsx">
137
+ <svg class="w-4 h-4 mr-2 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
138
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"></path>
139
+ </svg>
140
+ App.jsx
141
+ </li>
142
+ <li class="file-item rounded px-2 py-1 cursor-pointer flex items-center" data-file="index.css">
143
+ <svg class="w-4 h-4 mr-2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
144
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"></path>
145
+ </svg>
146
+ index.css
147
+ </li>
148
+ </ul>
149
+ </li>
150
+ <li class="file-item rounded px-2 py-1 cursor-pointer flex items-center" data-folder="public">
151
+ <svg class="w-4 h-4 mr-2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
152
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
153
+ </svg>
154
+ public
155
+ </li>
156
+ </ul>
157
+ </li>
158
+ </ul>
159
+ </div>
160
+
161
+ <div class="p-3 border-t border-gray-800">
162
+ <h3 class="text-sm uppercase tracking-wider mb-2">AI CHAT HISTORY</h3>
163
+ <div class="space-y-1" id="chatHistory">
164
+ <div class="text-xs px-2 py-1 rounded hover:bg-gray-800 hover:bg-opacity-30 cursor-pointer">Fix React component error</div>
165
+ <div class="text-xs px-2 py-1 rounded hover:bg-gray-800 hover:bg-opacity-30 cursor-pointer">Optimize API call structure</div>
166
+ <div class="text-xs px-2 py-1 rounded hover:bg-gray-800 hover:bg-opacity-30 cursor-pointer">Explain useState hook</div>
167
+ <div class="text-xs px-2 py-1 rounded hover:bg-gray-800 hover:bg-opacity-30 cursor-pointer">Generate login form</div>
168
+ </div>
169
+ </div>
170
+ </div>
171
+
172
+ <!-- Main Code Editor Area -->
173
+ <div class="flex-1 flex flex-col overflow-hidden">
174
+ <div class="h-10 border-b border-gray-800 flex items-center px-4">
175
+ <div class="flex space-x-1">
176
+ <div class="w-3 h-3 rounded-full bg-red-500"></div>
177
+ <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
178
+ <div class="w-3 h-3 rounded-full bg-green-500"></div>
179
+ </div>
180
+ <div class="ml-4 text-sm" id="activeFile">src/components/App.jsx</div>
181
+ <div class="ml-auto flex items-center space-x-2">
182
+ <div class="text-xs text-gray-500 px-2">Ln 4, Col 12</div>
183
+ <div class="text-xs text-gray-500 px-2">UTF-8</div>
184
+ <div class="text-xs text-gray-500 px-2">JavaScript React</div>
185
+ <button class="p-1 rounded hover:bg-gray-800" id="settingsButton" onclick="toggleSettings()">
186
+ <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
187
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.350 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.370 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
188
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
189
+ </svg>
190
+ </button>
191
+ </div>
192
+ </div>
193
+
194
+ <div class="flex-1 overflow-hidden">
195
+ <div class="editor-container w-full h-full" id="editorContainer"></div>
196
+ </div>
197
+
198
+ <!-- Right Sidebar - AI Chat -->
199
+ <div class="glassmorphic-card border-l border-gray-800 w-80 flex flex-col h-full absolute right-0 top-0" id="chatSidebar">
200
+ <div class="p-3 border-b border-gray-700 flex justify-between items-center">
201
+ <h3 class="font-medium text-purple-300">AI Coding Assistant</h3>
202
+ <div class="flex space-x-2">
203
+ <button class="text-xs accent-gradient px-2 py-1 rounded" onclick="newChat()">New Chat</button>
204
+ <button class="text-xs bg-gray-700 px-2 py-1 rounded" onclick="toggleChatSidebar()">
205
+ <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
206
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
207
+ </svg>
208
+ </button>
209
+ </div>
210
+ </div>
211
+
212
+ <div class="flex-1 overflow-y-auto p-3 space-y-3" id="chatMessages">
213
+ <div class="flex justify-end">
214
+ <div class="bg-blue-900 bg-opacity-30 rounded-lg p-2 max-w-[80%]">
215
+ <div class="text-xs">How can I optimize this React component?</div>
216
+ </div>
217
+ </div>
218
+
219
+ <div class="flex">
220
+ <div class="bg-purple-900 bg-opacity-30 rounded-lg p-2 max-w-[80%]">
221
+ <div class="text-xs mb-1 text-purple-300 font-medium">AI Assistant</div>
222
+ <div class="text-xs">Here are some optimization suggestions for your React counter component:</div>
223
+ <ul class="list-disc list-inside text-xs mt-1 pl-2 space-y-1">
224
+ <li>Use React.memo to prevent unnecessary re-renders</li>
225
+ <li>Implement useCallback for handler functions</li>
226
+ <li>Consider extracting the button into a separate component</li>
227
+ </ul>
228
+ </div>
229
+ </div>
230
+
231
+ <div class="flex justify-end">
232
+ <div class="bg-blue-900 bg-opacity-30 rounded-lg p-2 max-w-[80%]">
233
+ <div class="text-xs">Can you show me the code for using useCallback?</div>
234
+ </div>
235
+ </div>
236
+
237
+ <div class="flex">
238
+ <div class="bg-gray-800 rounded-lg p-2 max-w-[85%] relative" id="aiResponse">
239
+ <div class="text-xs mb-1 text-purple-300 font-medium">AI Assistant</div>
240
+ <pre class="text-xs bg-gray-900 p-2 rounded mt-1 overflow-x-auto" id="codeResponse">
241
+ <span class="text-purple-400">const</span> increment = <span class="text-blue-400">useCallback</span>(() => {
242
+ setCount(<span class="text-yellow-400">prev</span> => prev + <span class="text-yellow-400">1</span>);
243
+ }, []);</pre>
244
+ </div>
245
+ </div>
246
+ </div>
247
+
248
+ <div class="p-2 border-t border-gray-700">
249
+ <div class="relative">
250
+ <input type="text" placeholder="Ask the AI for coding help..." class="w-full bg-gray-800 rounded pl-3 pr-10 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-purple-500" id="chatInput" onkeypress="handleKeyPress(event)">
251
+ <button class="absolute right-2 top-2 bg-purple-600 rounded w-6 h-6 flex items-center justify-center" onclick="sendMessage()">
252
+ <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
253
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5l7 7-7 7M5 5l7 7-7 7"></path>
254
+ </svg>
255
+ </button>
256
+ </div>
257
+ </div>
258
+ </div>
259
+
260
+ <!-- Chat toggle button (floating) -->
261
+ <div class="fixed right-4 bottom-4 w-10 h-10 bg-purple-600 rounded-full flex items-center justify-center shadow-lg cursor-pointer hover:bg-purple-700 transition-colors" id="chatToggleButton" onclick="toggleChatSidebar()">
262
+ <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
263
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
264
+ </svg>
265
+ </div>
266
+ </div>
267
+
268
+ <!-- Right Sidebar - Properties & Settings (Hidden by default) -->
269
+ <div class="w-72 glassmorphic-card border-l border-gray-800 p-4 overflow-y-auto fixed right-0 top-0 h-full z-10" id="settingsPanel">
270
+ <div class="flex justify-between items-center mb-6">
271
+ <h2 class="text-lg font-['Bebas_Neue'] tracking-wider">PROPERTIES & SETTINGS</h2>
272
+ <button class="p-1 rounded hover:bg-gray-800" onclick="toggleSettings()">
273
+ <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
274
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
275
+ </svg>
276
+ </button>
277
+ </div>
278
+
279
+ <div class="mb-6">
280
+ <h3 class="text-sm uppercase tracking-wider mb-3 flex items-center">
281
+ <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
282
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.350 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.370 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
283
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
284
+ </svg>
285
+ AI Configuration
286
+ </h3>
287
+
288
+ <div class="space-y-3 text-sm">
289
+ <div>
290
+ <label class="block text-gray-400 mb-1">AI Model</label>
291
+ <select class="w-full bg-gray-800 rounded px=2 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-purple-500" id="aiModel">
292
+ <option>GPT-4 Turbo</option>
293
+ <option>GPT-4</option>
294
+ <option>Claude 2</option>
295
+ </select>
296
+ </div>
297
+
298
+ <div>
299
+ <label class="block text-gray-400 mb-1">Response Style</label>
300
+ <select class="w-full bg-gray-800 rounded px=2 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-purple-500" id="responseStyle">
301
+ <option>Concise</option>
302
+ <option>Detailed</option>
303
+ <option>Technical</option>
304
+ </select>
305
+ </div>
306
+
307
+ <div>
308
+ <label class="block text-gray-400 mb-1">Code Examples Format</label>
309
+ <select class="w-full bg-gray-800 rounded px=2 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-purple-500" id="codeFormat">
310
+ <option>Show full examples</option>
311
+ <option>Show snippets</option>
312
+ <option>Show explanations only</option>
313
+ </select>
314
+ </div>
315
+
316
+ <div>
317
+ <label class="flex items-center space-x-2">
318
+ <input type="checkbox" class="accent-purple-500" id="inlineSuggestions" checked>
319
+ <span>Show inline suggestions</span>
320
+ </label>
321
+ </div>
322
+ </div>
323
+ </div>
324
+
325
+ <div class="mb-6">
326
+ <h3 class="text-sm uppercase tracking-wider mb-3 flex items-center">
327
+ <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
328
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"></path>
329
+ </svg>
330
+ Code Style Rules
331
+ </h3>
332
+
333
+ <div class="space-y-3 text-sm">
334
+ <div>
335
+ <label class="block text-gray-400 mb-1">Indentation</label>
336
+ <select class="w-full bg-gray-800 rounded px=2 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-purple-500" id="indentation">
337
+ <option>Spaces (2)</option>
338
+ <option>Spaces (4)</option>
339
+ <option>Tabs</option>
340
+ </select>
341
+ </div>
342
+
343
+ <div>
344
+ <label class="block text-gray-400 mb-1">Quote Style</label>
345
+ <select class="w-full bg-gray-800 rounded px=2 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-purple-500" id="quoteStyle">
346
+ <option>Single quotes</option>
347
+ <option>Double quotes</option>
348
+ </select>
349
+ </div>
350
+
351
+ <div>
352
+ <label class="block text-gray-400 mb-1">Semicolon</label>
353
+ <select class="w-full bg-gray-800 rounded px=2 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-purple-500" id="semicolon">
354
+ <option>Include semicolons</option>
355
+ <option>Omit semicolons</option>
356
+ </select>
357
+ </div>
358
+ </div>
359
+ </div>
360
+
361
+ <div>
362
+ <h3 class="text-sm uppercase tracking-wider mb-3 flex items-center">
363
+ <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
364
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
365
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
366
+ </svg>
367
+ UI Theme
368
+ </h3>
369
+
370
+ <div class="space-y-3 text-sm">
371
+ <div class="grid grid-cols-4 gap-2" id="themeColors">
372
+ <div class="h-8 rounded bg-gray-900 border border-gray-700 cursor-pointer" data-theme="dark" onclick="changeTheme('dark')"></div>
373
+ <div class="h-8 rounded bg-indigo-900 border border-indigo-700 cursor-pointer" data-theme="indigo" onclick="changeTheme('indigo')"></div>
374
+ <div class="h-8 rounded bg-purple-900 border border-purple-700 cursor-pointer" data-theme="purple" onclick="changeTheme('purple')"></div>
375
+ <div class="h-8 rounded bg-blue-900 border border-blue-700 cursor-pointer" data-theme="blue" onclick="changeTheme('blue')"></div>
376
+ </div>
377
+
378
+ <div>
379
+ <label class="block text-gray-400 mb-1">Accent Color</label>
380
+ <div class="flex space-x-2" id="accentColors">
381
+ <div class="h-6 w-6 rounded-full bg-pink-500 border border-pink-400 cursor-pointer" data-accent="pink" onclick="changeAccent('pink')"></div>
382
+ <div class="h-6 w-6 rounded-full bg-purple-500 border border-purple-400 cursor-pointer" data-accent="purple" onclick="changeAccent('purple')"></div>
383
+ <div class="h-6 w-6 rounded-full bg-blue-500 border border-blue-400 cursor-pointer" data-accent="blue" onclick="changeAccent('blue')"></div>
384
+ </div>
385
+ </div>
386
+
387
+ <div>
388
+ <label class="block text-gray-400 mb-1">UI Transparency</label>
389
+ <input type="range" min="0" max="100" class="w-full h-1 accent-purple-500" id="uiTransparency" oninput="changeTransparency(this.value)">
390
+ </div>
391
+ </div>
392
+ </div>
393
+ </div>
394
+ </div>
395
+
396
+ <script>
397
+ // Setup Monaco loader
398
+ var require = { paths: { vs: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.47.0/min/vs' }};
399
+ </script>
400
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.47.0/min/vs/loader.min.js"></script>
401
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.47.0/min/vs/editor/editor.main.nls.js"></script>
402
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.47.0/min/vs/editor/editor.main.js"></script>
403
+
404
+ <script>
405
+ let editor;
406
+ let theme = 'vs-dark';
407
+
408
+ // Initialize Monaco Editor
409
+ require(['vs/editor/editor.main'], function() {
410
+ editor = monaco.editor.create(document.getElementById('editorContainer'), {
411
+ value: `import React, { useState } from 'react';\nimport './index.css';\n\nfunction App() {\n const [count, setCount] = useState(0);\n\n const increment = () => {\n setCount(count + 1);\n };\n\n return (\n <div className="app">\n <h1>React Counter</h1>\n <p>Count: {count}</p>\n <button onClick={increment}>\n Increment\n </button>\n </div>\n );\n}`,
412
+ language: 'javascript',
413
+ theme: 'vs-dark',
414
+ automaticLayout: true,
415
+ minimap: { enabled: true },
416
+ scrollBeyondLastLine: false,
417
+ fontSize: 14,
418
+ lineNumbers: 'on',
419
+ roundedSelection: true,
420
+ scrollbar: {
421
+ vertical: 'auto',
422
+ horizontal: 'auto'
423
+ },
424
+ renderWhitespace: 'none',
425
+ wordWrap: 'off',
426
+
427
+ // Custom theming
428
+ 'editor.background': '#13161d',
429
+ 'editor.foreground': '#e1e1e6',
430
+ 'editor.lineHighlightBackground': '#1e1e1e',
431
+ 'editor.lineHighlightBorder': '#1e1e1e',
432
+ 'editorGutter.background': '#13161d',
433
+ 'editorLineNumber.foreground': '#858585',
434
+ 'editorIndentGuide.background': '#252525',
435
+ 'editorIndentGuide.activeBackground': '#353535',
436
+ 'editor.selectionBackground': '#3a3a59',
437
+ 'editor.inactiveSelectionBackground': '#2a2a3a',
438
+ 'editor.selectionHighlightBackground': '#3a3a3a',
439
+ 'editor.selectionHighlightBorder': '#4a4a4a',
440
+ 'editor.wordHighlightBackground': '#57575720',
441
+ 'editor.wordHighlightStrongBackground': '#57575750',
442
+ 'editorWidget.background': '#252526',
443
+ 'editorWidget.border': '#454545',
444
+ 'editorCursor.foreground': '#aeafad',
445
+
446
+ // Syntax highlighting
447
+ 'editor.tokenColorCustomizations': {
448
+ 'textMateRules': [
449
+ {
450
+ 'scope': [
451
+ 'keyword',
452
+ 'storage',
453
+ 'keyword.operator',
454
+ 'keyword.control'
455
+ ],
456
+ 'settings': {
457
+ 'foreground': '#c586c0'
458
+ }
459
+ },
460
+ {
461
+ 'scope': [
462
+ 'variable',
463
+ 'string',
464
+ 'punctuation.definition.string',
465
+ 'string punctuation.section.embedded source'
466
+ ],
467
+ 'settings': {
468
+ 'foreground': '#ce9178'
469
+ }
470
+ },
471
+ {
472
+ 'scope': [
473
+ 'entity.name.function',
474
+ 'meta.require',
475
+ 'support.function.any-method',
476
+ 'variable.function',
477
+ 'support.class.builtin'
478
+ ],
479
+ 'settings': {
480
+ 'foreground': '#dcdcaa'
481
+ }
482
+ },
483
+ {
484
+ 'scope': 'constant.numeric',
485
+ 'settings': {
486
+ 'foreground': '#b5cea8'
487
+ }
488
+ },
489
+ {
490
+ 'scope': 'support.type',
491
+ 'settings': {
492
+ 'foreground': '#569cd6'
493
+ }
494
+ }
495
+ ]
496
+ }
497
+ });
498
+
499
+ // Setup Ctrl+Shift+P command palette
500
+ editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyMod.Shift | monaco.KeyCode.KeyP, function() {
501
+ alert('Command palette would open here');
502
+ });
503
+ });
504
+
505
+ // File Explorer Interaction
506
+ document.querySelectorAll('.file-item').forEach(item => {
507
+ item.addEventListener('click', function() {
508
+ // Remove active class from all items
509
+ document.querySelectorAll('.file-item').forEach(i => i.classList.remove('active'));
510
+
511
+ // Add active class to clicked item
512
+ this.classList.add('active');
513
+
514
+ // Update active file display
515
+ const fileName = this.getAttribute('data-file');
516
+ const folderName = this.getAttribute('data-folder');
517
+
518
+ if (fileName) {
519
+ document.getElementById('activeFile').textContent = `src/components/${fileName}`;
520
+
521
+ // Update the editor with different file content
522
+ if (fileName === 'App.jsx') {
523
+ if (editor) {
524
+ editor.setValue(`import React, { useState } from 'react';\nimport './index.css';\n\nfunction App() {\n const [count, setCount] = useState(0);\n\n const increment = () => {\n setCount(count + 1);\n };\n\n return (\n <div className="app">\n <h1>React Counter</h1>\n <p>Count: {count}</p>\n <button onClick={increment}>\n Increment\n </button>\n </div>\n );\n}`);
525
+ monaco.editor.setModelLanguage(editor.getModel(), 'javascript');
526
+ }
527
+ } else if (fileName === 'index.css') {
528
+ if (editor) {
529
+ editor.setValue(`/* Global styles */\nbody {\n margin: 0;\n padding: 0;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI';\n}\n\n.app {\n text-align: center;\n padding: 20px;\n}\n\nbutton {\n background: #673ab7;\n color: white;\n padding: 10px 20px;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n}`);
530
+ monaco.editor.setModelLanguage(editor.getModel(), 'css');
531
+ }
532
+ }
533
+ }
534
+ });
535
+ });
536
+
537
+ // Chat Functionality
538
+ function sendMessage() {
539
+ const input = document.getElementById('chatInput');
540
+ const message = input.value.trim();
541
+
542
+ if (message) {
543
+ // Add user message
544
+ const chatMessages = document.getElementById('chatMessages');
545
+ const userMessage = document.createElement('div');
546
+ userMessage.className = 'flex justify-end slide-in';
547
+ userMessage.innerHTML = `
548
+ <div class="bg-blue-900 bg-opacity-30 rounded-lg p-2 max-w-[80%]">
549
+ <div class="text-xs">${message}</div>
550
+ </div>
551
+ `;
552
+ chatMessages.appendChild(userMessage);
553
+
554
+ // Clear input
555
+ input.value = '';
556
+
557
+ // Show typing indicator
558
+ const typingIndicator = document.createElement('div');
559
+ typingIndicator.className = 'flex slide-in';
560
+ typingIndicator.innerHTML = `
561
+ <div class="bg-purple-900 bg-opacity-30 rounded-lg p-2 max-w-[80%]">
562
+ <div class="text-xs mb-1 text-purple-300 font-medium">AI Assistant</div>
563
+ <div class="typing-indicator flex space-x-1">
564
+ <span></span>
565
+ <span></span>
566
+ <span></span>
567
+ </div>
568
+ </div>
569
+ `;
570
+ chatMessages.appendChild(typingIndicator);
571
+ chatMessages.scrollTop = chatMessages.scrollHeight;
572
+
573
+ // Simulate AI typing
574
+ setTimeout(() => {
575
+ typingIndicator.remove();
576
+
577
+ const aiResponse = document.createElement('div');
578
+ aiResponse.className = 'flex slide-in';
579
+
580
+ // Simple response logic based on user input
581
+ let responseText = '';
582
+ let responseCode = '';
583
+
584
+ if (message.toLowerCase().includes('usecallback')) {
585
+ responseText = `Here's how to use useCallback in your component:`;
586
+ responseCode = `const increment = useCallback(() => {
587
+ setCount(prev => prev + 1);
588
+ }, []);`;
589
+ } else if (message.toLowerCase().includes('optimize')) {
590
+ responseText = `To optimize your React component:`;
591
+ responseCode = `import React, { useState, useCallback, memo } from 'react';\n\nconst IncrementButton = memo(({ onClick }) => (\n <button onClick={onClick}>Increment</button>\n));\n\nfunction App() {\n const [count, setCount] = useState(0);\n const increment = useCallback(() => {\n setCount(prev => prev + 1);\n }, []);\n \n return (\n <div className="app">\n <h1>Optimized Counter</h1>\n <IncrementButton onClick={increment} />\n </div>\n );\n}`;
592
+ } else {
593
+ responseText = `I can help with React optimization, debugging, and best practices. Ask me specific questions like:
594
+ <ul class="list-disc list-inside mt-1">
595
+ <li>How to fix this React error?</li>
596
+ <li>What's the best way to structure my components?</li>
597
+ <li>Show me an example of using hooks</li>
598
+ </ul>`;
599
+ }
600
+
601
+ aiResponse.innerHTML = `
602
+ <div class="bg-purple-900 bg-opacity-30 rounded-lg p-2 max-w-[80%]">
603
+ <div class="text-xs mb-1 text-purple-300 font-medium">AI Assistant</div>
604
+ <div class="text-xs">${responseText}</div>
605
+ ${responseCode ? `<pre class="text-xs bg-gray-900 p-2 rounded mt-1 overflow-x-auto">${responseCode}</pre>` : ''}
606
+ </div>
607
+ `;
608
+
609
+ chatMessages.appendChild(aiResponse);
610
+ chatMessages.scrollTop = chatMessages.scrollHeight;
611
+
612
+ // If the response includes code, highlight it
613
+ if (responseCode) {
614
+ setTimeout(() => {
615
+ const preElements = document.querySelectorAll('#chatMessages pre');
616
+ preElements.forEach(pre => {
617
+ if (!pre.getAttribute('data-highlighted')) {
618
+ pre.setAttribute('data-highlighted', 'true');
619
+ // In a real app, you would use a syntax highlighter here
620
+ }
621
+ });
622
+ }, 100);
623
+ }
624
+ }, 1500 + Math.random() * 1500);
625
+ }
626
+ }
627
+
628
+ function handleKeyPress(event) {
629
+ if (event.key === 'Enter') {
630
+ sendMessage();
631
+ }
632
+ }
633
+
634
+ function newChat() {
635
+ document.getElementById('chatMessages').innerHTML = '';
636
+ }
637
+
638
+ function toggleChatSidebar() {
639
+ const chatSidebar = document.getElementById('chatSidebar');
640
+ const chatToggleButton = document.getElementById('chatToggleButton');
641
+
642
+ if (chatSidebar.classList.contains('hidden')) {
643
+ chatSidebar.classList.remove('hidden');
644
+ chatToggleButton.classList.add('hidden');
645
+ } else {
646
+ chatSidebar.classList.add('hidden');
647
+ chatToggleButton.classList.remove('hidden');
648
+ }
649
+ }
650
+
651
+ // Settings panel toggle
652
+ function toggleSettings() {
653
+ const settingsPanel = document.getElementById('settingsPanel');
654
+ settingsPanel.classList.toggle('open');
655
+ }
656
+
657
+ // Theme customization
658
+ function changeTheme(theme) {
659
+ const body = document.body;
660
+
661
+ // Remove existing theme classes
662
+ body.classList.remove('theme-dark', 'theme-indigo', 'theme-purple', 'theme-blue');
663
+
664
+ // Add new theme class
665
+ body.classList.add(`theme-${theme}`);
666
+
667
+ // Update UI elements based on theme
668
+ const glassCards = document.querySelectorAll('.glassmorphic-card');
669
+ glassCards.forEach(card => {
670
+ if (theme === 'dark') {
671
+ card.style.background = 'rgba(26, 29, 37, 0.7)';
672
+ } else if (theme === 'indigo') {
673
+ card.style.background = 'rgba(26, 32, 59, 0.7)';
674
+ } else if (theme === 'purple') {
675
+ card.style.background = 'rgba(32, 26, 59, 0.7)';
676
+ } else if (theme === 'blue') {
677
+ card.style.background = 'rgba(26, 38, 59, 0.7)';
678
+ }
679
+ });
680
+
681
+ // Also update Monaco editor theme
682
+ if (editor) {
683
+ monaco.editor.setTheme('vs-dark'); // For now we just keep it dark
684
+ }
685
+ }
686
+
687
+ function changeAccent(color) {
688
+ const accentElements = document.querySelectorAll('.accent-gradient');
689
+
690
+ if (color === 'pink') {
691
+ accentElements.forEach(el => {
692
+ el.style.background = 'linear-gradient(135deg, #e91e63 0%, #673ab7 100%)';
693
+ });
694
+ } else if (color === 'purple') {
695
+ accentElements.forEach(el => {
696
+ el.style.background = 'linear-gradient(135deg, #673ab7 0%, #3f51b5 100%)';
697
+ });
698
+ } else if (color === 'blue') {
699
+ accentElements.forEach(el => {
700
+ el.style.background = 'linear-gradient(135deg, #2196f3 0%, #3f51b5 100%)';
701
+ });
702
+ }
703
+ }
704
+
705
+ function changeTransparency(value) {
706
+ const glassCards = document.querySelectorAll('.glassmorphic-card');
707
+ const opacity = 0.5 + (value / 200); // Range from 0.5 to 1
708
+ glassCards.forEach(card => {
709
+ const currentBg = card.style.backgroundColor || 'rgba(26, 29, 37, 0.7)';
710
+ const newBg = currentBg.replace(/rgba?\(([^)]+)\)/, match => {
711
+ const parts = match.includes('rgba') ?
712
+ match.replace('rgba(', '').replace(')', '').split(',') :
713
+ match.replace('rgb(', '').replace(')', '').split(',');
714
+
715
+ if (parts.length === 4) {
716
+ return `rgba(${parts[0]},${parts[1]},${parts[2]},${opacity})`;
717
+ } else {
718
+ return `rgba(${parts.join(',')},${opacity})`;
719
+ }
720
+ });
721
+ card.style.background = newBg;
722
+ });
723
+ }
724
+ </script>
725
+ <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=nofl/deepsitewow" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
726
+ </html>