Hugging Face's logo

Spaces:
S-Dreamer
/
ai-code-classifier
Running

App Files Community
ai-code-classifier
File size: 26,238 Bytes 
4817f27
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI Code Classifier | Cybersecurity & Software Engineering</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/github-dark.min.css">
    <style>
        body {
            font-family: 'Inter', sans-serif;
            background-color: #22272E;
            color: #ADBAC7;
        }
        .code-font {
            font-family: 'JetBrains Mono', monospace;
        }
        .primary-bg {
            background-color: #2D333B;
        }
        .secondary-color {
            color: #539BF5;
        }
        .secondary-bg {
            background-color: #539BF5;
        }
        .accent-bg {
            background-color: #347D39;
        }
        .syntax-highlight {
            background-color: #2b313a;
            border-radius: 6px;
        }
        .sidebar {
            transition: all 0.3s ease;
        }
        .sidebar-collapsed {
            transform: translateX(-100%);
        }
        .tab-active {
            border-bottom: 2px solid #539BF5;
            color: #539BF5;
        }
        .confidence-bar {
            background: linear-gradient(90deg, #347D39 0%, #539BF5 100%);
        }
    </style>
</head>
<body class="min-h-screen flex flex-col">
    <!-- Header -->
    <header class="primary-bg border-b border-gray-700 py-4 px-6 flex items-center justify-between">
        <div class="flex items-center space-x-4">
            <button id="sidebarToggle" class="text-gray-400 hover:text-white">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                </svg>
            </button>
            <h1 class="text-xl font-semibold secondary-color">AI Code Classifier</h1>
        </div>
        <div class="flex items-center space-x-4">
            <button class="px-4 py-2 rounded-md bg-blue-900/30 text-blue-400 hover:bg-blue-900/50 flex items-center space-x-2">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
                </svg>
                <span>Documentation</span>
            </button>
            <div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center">
                <span class="text-sm font-medium">AI</span>
            </div>
        </div>
    </header>

    <div class="flex flex-1 overflow-hidden">
        <!-- Sidebar -->
        <aside id="sidebar" class="primary-bg border-r border-gray-700 w-64 flex-shrink-0 flex flex-col sidebar">
            <div class="p-4 border-b border-gray-700">
                <h2 class="text-lg font-medium">Navigation</h2>
            </div>
            <nav class="flex-1 overflow-y-auto p-4 space-y-2">
                <a href="#" class="flex items-center space-x-3 p-2 rounded-md bg-blue-900/30 text-blue-400">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                        <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
                    </svg>
                    <span>Dashboard</span>
                </a>
                <a href="#" class="flex items-center space-x-3 p-2 rounded-md hover:bg-gray-700/50 text-gray-400 hover:text-gray-200">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
                    </svg>
                    <span>Code Analysis</span>
                </a>
                <a href="#" class="flex items-center space-x-3 p-2 rounded-md hover:bg-gray-700/50 text-gray-400 hover:text-gray-200">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd" />
                    </svg>
                    <span>Security Findings</span>
                </a>
                <a href="#" class="flex items-center space-x-3 p-2 rounded-md hover:bg-gray-700/50 text-gray-400 hover:text-gray-200">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
                    </svg>
                    <span>History</span>
                </a>
                <a href="#" class="flex items-center space-x-3 p-2 rounded-md hover:bg-gray-700/50 text-gray-400 hover:text-gray-200">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01-.947-2.287c.379-1.561-.734-2.942-2.106-2.106a1.533 1.533 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd" />
                    </svg>
                    <span>Settings</span>
                </a>
            </nav>
            <div class="p-4 border-t border-gray-700">
                <div class="flex items-center space-x-3">
                    <div class="w-10 h-10 rounded-full bg-gray-600 flex items-center justify-center">
                        <span class="text-sm font-medium">U</span>
                    </div>
                    <div>
                        <p class="text-sm font-medium">User Account</p>
                        <p class="text-xs text-gray-400">[email protected]</p>
                    </div>
                </div>
            </div>
        </aside>

        <!-- Main Content -->
        <main class="flex-1 flex flex-col overflow-hidden">
            <div class="border-b border-gray-700">
                <div class="flex space-x-6 px-6">
                    <button class="py-3 px-1 font-medium tab-active">Code Analysis</button>
                    <button class="py-3 px-1 font-medium text-gray-400 hover:text-gray-200">Batch Processing</button>
                    <button class="py-3 px-1 font-medium text-gray-400 hover:text-gray-200">Model Settings</button>
                </div>
            </div>

            <div class="flex-1 overflow-auto p-6">
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                    <!-- Code Input Section -->
                    <div class="primary-bg rounded-lg overflow-hidden border border-gray-700">
                        <div class="p-4 border-b border-gray-700 flex justify-between items-center">
                            <h3 class="font-medium">Input Code</h3>
                            <div class="flex space-x-2">
                                <select class="bg-gray-700 text-gray-300 text-sm rounded px-3 py-1">
                                    <option>JavaScript</option>
                                    <option>Python</option>
                                    <option>PHP</option>
                                    <option>Java</option>
                                    <option>C++</option>
                                    <option>Bash</option>
                                    <option>SQL</option>
                                </select>
                                <button class="bg-gray-700 text-gray-300 text-sm rounded px-3 py-1 hover:bg-gray-600">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
                                        <path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z" clip-rule="evenodd" />
                                    </svg>
                                </button>
                            </div>
                        </div>
                        <div class="p-4">
                            <div id="codeEditor" class="syntax-highlight code-font p-4 rounded min-h-[300px] max-h-[500px] overflow-auto" contenteditable="true">// Enter your code here for analysis
// Example JavaScript code:
function processData(input) {
    // Potential XSS vulnerability
    document.getElementById('output').innerHTML = input;
    
    // SQL injection risk
    const query = `SELECT * FROM users WHERE username = '${input}'`;
    
    // Shell command injection
    const result = execSync(`ls ${input}`);
    
    return result;
}</div>
                        </div>
                        <div class="p-4 border-t border-gray-700 flex justify-between">
                            <div class="flex space-x-2">
                                <button class="px-3 py-1 text-sm rounded bg-gray-700 hover:bg-gray-600 text-gray-300">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 inline mr-1" viewBox="0 0 20 20" fill="currentColor">
                                        <path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z" clip-rule="evenodd" />
                                    </svg>
                                    Load Sample
                                </button>
                                <button class="px-3 py-1 text-sm rounded bg-gray-700 hover:bg-gray-600 text-gray-300">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 inline mr-1" viewBox="0 0 20 20" fill="currentColor">
                                        <path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
                                    </svg>
                                    Upload File
                                </button>
                            </div>
                            <button id="analyzeBtn" class="px-4 py-2 rounded-md secondary-bg text-white hover:bg-blue-600 flex items-center">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
                                    <path fill-rule="evenodd" d="M9.243 3.03a1 1 0 01.727 1.213L9.53 6h2.94l.56-2.243a1 1 0 111.94.486L14.53 6H17a1 1 0 110 2h-2.97l-1 4H15a1 1 0 110 2h-2.47l-.56 2.242a1 1 0 11-1.94-.485L10.47 14H7.53l-.56 2.242a1 1 0 11-1.94-.485L5.47 14H3a1 1 0 110-2h2.97l1-4H5a1 1 0 110-2h2.47l.56-2.243a1 1 0 011.213-.727zM9.03 8l-1 4h2.938l1-4H9.031z" clip-rule="evenodd" />
                                </svg>
                                Analyze Code
                            </button>
                        </div>
                    </div>

                    <!-- Results Section -->
                    <div class="primary-bg rounded-lg overflow-hidden border border-gray-700">
                        <div class="p-4 border-b border-gray-700">
                            <h3 class="font-medium">Analysis Results</h3>
                        </div>
                        <div class="p-4">
                            <div id="resultsContainer" class="min-h-[300px] max-h-[500px] overflow-auto">
                                <div class="text-center py-12 text-gray-500">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mx-auto text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
                                    </svg>
                                    <p class="mt-4">Submit code for analysis to see results</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Model Information -->
                <div class="primary-bg rounded-lg overflow-hidden border border-gray-700 mt-6">
                    <div class="p-4 border-b border-gray-700">
                        <h3 class="font-medium">AI Model Information</h3>
                    </div>
                    <div class="p-4 grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div class="border border-gray-700 rounded-lg p-4">
                            <div class="flex items-center space-x-3 mb-3">
                                <div class="w-10 h-10 rounded-full bg-blue-900/30 flex items-center justify-center">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-400" viewBox="0 0 20 20" fill="currentColor">
                                        <path fill-rule="evenodd" d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z" clip-rule="evenodd" />
                                    </svg>
                                </div>
                                <h4 class="font-medium">replit-code-v1_5-3b</h4>
                            </div>
                            <p class="text-sm text-gray-400">Specialized for code understanding and generation with 3 billion parameters.</p>
                            <div class="mt-3">
                                <span class="text-xs px-2 py-1 rounded bg-blue-900/30 text-blue-400">Code Analysis</span>
                                <span class="text-xs px-2 py-1 rounded bg-blue-900/30 text-blue-400">Syntax</span>
                            </div>
                        </div>
                        <div class="border border-gray-700 rounded-lg p-4">
                            <div class="flex items-center space-x-3 mb-3">
                                <div class="w-10 h-10 rounded-full bg-green-900/30 flex items-center justify-center">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-400" viewBox="0 0 20 20" fill="currentColor">
                                        <path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd" />
                                    </svg>
                                </div>
                                <h4 class="font-medium">Llama-3.1-WhiteRabbitNeo-2-8B</h4>
                            </div>
                            <p class="text-sm text-gray-400">8 billion parameter model fine-tuned for cybersecurity and vulnerability detection.</p>
                            <div class="mt-3">
                                <span class="text-xs px-2 py-1 rounded bg-green-900/30 text-green-400">Security</span>
                                <span class="text-xs px-2 py-1 rounded bg-green-900/30 text-green-400">Vulnerabilities</span>
                            </div>
                        </div>
                        <div class="border border-gray-700 rounded-lg p-4">
                            <div class="flex items-center space-x-3 mb-3">
                                <div class="w-10 h-10 rounded-full bg-purple-900/30 flex items-center justify-center">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-purple-400" viewBox="0 0 20 20" fill="currentColor">
                                        <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
                                    </svg>
                                </div>
                                <h4 class="font-medium">Llama-3.1-WhiteRabbitNeo-2-70B</h4>
                            </div>
                            <p class="text-sm text-gray-400">70 billion parameter model for comprehensive code analysis and classification.</p>
                            <div class="mt-3">
                                <span class="text-xs px-2 py-1 rounded bg-purple-900/30 text-purple-400">Classification</span>
                                <span class="text-xs px-2 py-1 rounded bg-purple-900/30 text-purple-400">Deep Analysis</span>
                            </div>
                        </div>
                    </div>
                    <div class="p-4 border-t border-gray-700 text-sm text-gray-400">
                        <p>Models trained on specialized datasets including Canstralian/Wordlists, Canstralian/CyberExploitDB, Canstralian/pentesting_dataset, and Canstralian/ShellCommands (MIT License).</p>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <script>
        // Initialize syntax highlighting
        document.addEventListener('DOMContentLoaded', (event) => {
            // Toggle sidebar
            const sidebarToggle = document.getElementById('sidebarToggle');
            const sidebar = document.getElementById('sidebar');
            
            sidebarToggle.addEventListener('click', () => {
                sidebar.classList.toggle('sidebar-collapsed');
            });

            // Code analysis button
            const analyzeBtn = document.getElementById('analyzeBtn');
            const resultsContainer = document.getElementById('resultsContainer');
            
            analyzeBtn.addEventListener('click', () => {
                // Simulate analysis
                resultsContainer.innerHTML = `
                    <div class="space-y-4">
                        <div class="border-b border-gray-700 pb-4">
                            <h4 class="font-medium text-lg mb-3">Classification Results</h4>
                            <div class="space-y-3">
                                <div>
                                    <div class="flex justify-between text-sm mb-1">
                                        <span>Security Vulnerability</span>
                                        <span>87%</span>
                                    </div>
                                    <div class="w-full bg-gray-700 rounded-full h-2">
                                        <div class="confidence-bar h-2 rounded-full" style="width: 87%"></div>
                                    </div>
                                </div>
                                <div>
                                    <div class="flex justify-between text-sm mb-1">
                                        <span>Code Quality Issue</span>
                                        <span>65%</span>
                                    </div>
                                    <div class="w-full bg-gray-700 rounded-full h-2">
                                        <div class="confidence-bar h-2 rounded-full" style="width: 65%"></div>
                                    </div>
                                </div>
                                <div>
                                    <div class="flex justify-between text-sm mb-1">
                                        <span>Potential Bug</span>
                                        <span>72%</span>
                                    </div>
                                    <div class="w-full bg-gray-700 rounded-full h-2">
                                        <div class="confidence-bar h-2 rounded-full" style="width: 72%"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="border-b border-gray-700 pb-4">
                            <h4 class="font-medium text-lg mb-3">Detailed Findings</h4>
                            <div class="space-y-4">
                                <div class="p-3 rounded-md bg-red-900/20 border border-red-900/50">
                                    <div class="flex justify-between items-start">
                                        <div>
                                            <span class="font-medium text-red-400">High Severity</span>
                                            <p class="text-sm mt-1">Potential XSS vulnerability detected in line 4: Unsanitized input being written directly to DOM.</p>
                                        </div>
                                        <span class="text-xs px-2 py-1 rounded bg-red-900/30 text-red-400">CWE-79</span>
                                    </div>
                                </div>
                                <div class="p-3 rounded-md bg-yellow-900/20 border border-yellow-900/50">
                                    <div class="flex justify-between items-start">
                                        <div>
                                            <span class="font-medium text-yellow-400">Medium Severity</span>
                                            <p class="text-sm mt-1">SQL injection risk detected in line 7: User input concatenated directly into SQL query.</p>
                                        </div>
                                        <span class="text-xs px-2 py-1 rounded bg-yellow-900/30 text-yellow-400">CWE-89</span>
                                    </div>
                                </div>
                                <div class="p-3 rounded-md bg-orange-900/20 border border-orange-900/50">
                                    <div class="flex justify-between items-start">
                                        <div>
                                            <span class="font-medium text-orange-400">Medium Severity</span>
                                            <p class="text-sm mt-1">Shell command injection detected in line 10: Unsanitized user input used in command execution.</p>
                                        </div>
                                        <span class="text-xs px-2 py-1 rounded bg-orange-900/30 text-orange-400">CWE-78</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div>
                            <h4 class="font-medium text-lg mb-3">Recommendations</h4>
                            <ul class="list-disc list-inside text-sm space-y-2 pl-2">
                                <li>Use DOM text methods (textContent) instead of innerHTML when displaying user input</li>
                                <li>Implement parameterized queries or use an ORM to prevent SQL injection</li>
                                <li>Sanitize all user input before using in shell commands</li>
                                <li>Consider implementing input validation for all external inputs</li>
                            </ul>
                        </div>
                    </div>
                `;
            });

            // Apply syntax highlighting to code editor
            const codeEditor = document.getElementById('codeEditor');
            
            codeEditor.addEventListener('input', () => {
                // In a real implementation, we would use highlight.js here
                // For this demo, we'll just simulate it
                setTimeout(() => {
                    const code = codeEditor.innerText;
                    // This is where we would actually apply syntax highlighting
                    // For now, we'll just keep it simple
                }, 100);
            });
        });
    </script>
<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=S-Dreamer/ai-code-classifier" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>