Hugging Face's logo

Spaces:
Gyaneshere
/
CodeAnalysis
Running

App Files Community
Gyaneshere commited on
Commit
092c236
·
verified ·
1 Parent(s): 4018d74

updated index.html

Browse files
Files changed (1) hide show
  1. index.html +1373 -19
index.html CHANGED
@@ -1,19 +1,1373 @@
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>Deepsite - AI-Powered Code Analysis Platform</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .gradient-bg {
11
+ background: linear-gradient(135deg, #1e3a8a 0%, #7c3aed 100%);
12
+ }
13
+ .code-block {
14
+ font-family: 'Courier New', monospace;
15
+ background-color: #1e293b;
16
+ color: #f8fafc;
17
+ }
18
+ .sidebar-item:hover .sidebar-tooltip {
19
+ display: block;
20
+ }
21
+ .animate-float {
22
+ animation: float 6s ease-in-out infinite;
23
+ }
24
+ @keyframes float {
25
+ 0% { transform: translateY(0px); }
26
+ 50% { transform: translateY(-20px); }
27
+ 100% { transform: translateY(0px); }
28
+ }
29
+ </style>
30
+ </head>
31
+ <body class="bg-gray-50 min-h-screen">
32
+ <!-- Solution Definition & Architecture Overview -->
33
+ <div class="container mx-auto px-4 py-12 max-w-7xl">
34
+ <div class="gradient-bg text-white rounded-2xl p-8 mb-12 shadow-2xl">
35
+ <h1 class="text-4xl font-bold mb-4">Deepsite Architecture</h1>
36
+ <h2 class="text-2xl font-semibold mb-6">AI-Powered Code Analysis Platform</h2>
37
+
38
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
39
+ <div>
40
+ <h3 class="text-xl font-semibold mb-3">Use Case Strategy</h3>
41
+ <ul class="space-y-3">
42
+ <li class="flex items-start">
43
+ <i class="fas fa-check-circle mt-1 mr-3 text-emerald-300"></i>
44
+ <span>Automated code quality analysis using AI models</span>
45
+ </li>
46
+ <li class="flex items-start">
47
+ <i class="fas fa-check-circle mt-1 mr-3 text-emerald-300"></i>
48
+ <span>Security vulnerability detection in source code</span>
49
+ </li>
50
+ <li class="flex items-start">
51
+ <i class="fas fa-check-circle mt-1 mr-3 text-emerald-300"></i>
52
+ <span>Technical debt visualization and recommendations</span>
53
+ </li>
54
+ </ul>
55
+ </div>
56
+
57
+ <div>
58
+ <h3 class="text-xl font-semibold mb-3">Enterprise Benefits</h3>
59
+ <ul class="space-y-3">
60
+ <li class="flex items-start">
61
+ <i class="fas fa-chart-line mt-1 mr-3 text-amber-300"></i>
62
+ <span>30-50% reduction in code review time</span>
63
+ </li>
64
+ <li class="flex items-start">
65
+ <i class="fas fa-shield-alt mt-1 mr-3 text-amber-300"></i>
66
+ <span>Early detection of security vulnerabilities</span>
67
+ </li>
68
+ <li class="flex items-start">
69
+ <i class="fas fa-money-bill-wave mt-1 mr-3 text-amber-300"></i>
70
+ <span>Reduced technical debt maintenance costs</span>
71
+ </li>
72
+ </ul>
73
+ </div>
74
+ </div>
75
+ </div>
76
+
77
+ <!-- UX/UI Blueprint -->
78
+ <div class="bg-white rounded-2xl shadow-xl p-8 mb-12">
79
+ <h2 class="text-3xl font-bold mb-6 text-gray-800">UX/UI Blueprint</h2>
80
+
81
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-8">
82
+ <div class="lg:col-span-2">
83
+ <h3 class="text-xl font-semibold mb-4 text-gray-700">Dashboard Layout</h3>
84
+ <div class="border-2 border-dashed border-gray-300 rounded-xl p-6 h-96 bg-gradient-to-br from-gray-50 to-gray-100">
85
+ <div class="flex h-full">
86
+ <!-- Sidebar -->
87
+ <div class="w-16 bg-gray-800 rounded-l-lg flex flex-col items-center py-4">
88
+ <div class="mb-8 relative sidebar-item">
89
+ <div class="w-10 h-10 bg-indigo-600 rounded-lg flex items-center justify-center text-white">
90
+ <i class="fas fa-code"></i>
91
+ </div>
92
+ <div class="sidebar-tooltip absolute left-full ml-2 bg-gray-900 text-white px-2 py-1 rounded text-xs whitespace-nowrap hidden">
93
+ Code Analysis
94
+ </div>
95
+ </div>
96
+ <div class="mb-8 relative sidebar-item">
97
+ <div class="w-10 h-10 bg-gray-700 rounded-lg flex items-center justify-center text-gray-300">
98
+ <i class="fas fa-shield-alt"></i>
99
+ </div>
100
+ <div class="sidebar-tooltip absolute left-full ml-2 bg-gray-900 text-white px-2 py-1 rounded text-xs whitespace-nowrap hidden">
101
+ Security Scan
102
+ </div>
103
+ </div>
104
+ <div class="mb-8 relative sidebar-item">
105
+ <div class="w-10 h-10 bg-gray-700 rounded-lg flex items-center justify-center text-gray-300">
106
+ <i class="fas fa-chart-pie"></i>
107
+ </div>
108
+ <div class="sidebar-tooltip absolute left-full ml-2 bg-gray-900 text-white px-2 py-1 rounded text-xs whitespace-nowrap hidden">
109
+ Metrics
110
+ </div>
111
+ </div>
112
+ </div>
113
+
114
+ <!-- Main Content -->
115
+ <div class="flex-1 bg-white rounded-r-lg p-4 flex flex-col">
116
+ <div class="flex justify-between items-center mb-4">
117
+ <h4 class="font-semibold text-gray-700">Code Analysis Report</h4>
118
+ <div class="flex space-x-2">
119
+ <button class="px-3 py-1 bg-indigo-100 text-indigo-700 rounded text-sm">Export</button>
120
+ <button class="px-3 py-1 bg-gray-100 text-gray-700 rounded text-sm">Share</button>
121
+ </div>
122
+ </div>
123
+
124
+ <div class="flex-1 grid grid-cols-3 gap-4">
125
+ <div class="bg-blue-50 rounded-lg p-3 col-span-2">
126
+ <div class="h-6 bg-blue-200 rounded animate-pulse mb-2"></div>
127
+ <div class="h-4 bg-blue-200 rounded animate-pulse w-3/4"></div>
128
+ </div>
129
+ <div class="bg-purple-50 rounded-lg p-3">
130
+ <div class="h-6 bg-purple-200 rounded animate-pulse mb-2"></div>
131
+ <div class="h-4 bg-purple-200 rounded animate-pulse w-1/2"></div>
132
+ </div>
133
+ <div class="bg-green-50 rounded-lg p-3">
134
+ <div class="h-6 bg-green-200 rounded animate-pulse mb-2"></div>
135
+ <div class="h-4 bg-green-200 rounded animate-pulse w-2/3"></div>
136
+ </div>
137
+ <div class="bg-yellow-50 rounded-lg p-3 col-span-3">
138
+ <div class="h-6 bg-yellow-200 rounded animate-pulse mb-2"></div>
139
+ <div class="h-4 bg-yellow-200 rounded animate-pulse w-full"></div>
140
+ </div>
141
+ </div>
142
+ </div>
143
+ </div>
144
+ </div>
145
+ </div>
146
+
147
+ <div>
148
+ <h3 class="text-xl font-semibold mb-4 text-gray-700">Design System</h3>
149
+ <div class="space-y-4">
150
+ <div>
151
+ <p class="text-sm font-medium text-gray-500 mb-1">Primary Colors</p>
152
+ <div class="flex space-x-2">
153
+ <div class="w-12 h-12 rounded-lg bg-indigo-600"></div>
154
+ <div class="w-12 h-12 rounded-lg bg-indigo-500"></div>
155
+ <div class="w-12 h-12 rounded-lg bg-indigo-400"></div>
156
+ </div>
157
+ </div>
158
+ <div>
159
+ <p class="text-sm font-medium text-gray-500 mb-1">Secondary Colors</p>
160
+ <div class="flex space-x-2">
161
+ <div class="w-12 h-12 rounded-lg bg-emerald-500"></div>
162
+ <div class="w-12 h-12 rounded-lg bg-amber-500"></div>
163
+ <div class="w-12 h-12 rounded-lg bg-rose-500"></div>
164
+ </div>
165
+ </div>
166
+ <div>
167
+ <p class="text-sm font-medium text-gray-500 mb-1">Typography</p>
168
+ <div class="space-y-2">
169
+ <p class="text-lg font-bold text-gray-800">Heading 1</p>
170
+ <p class="text-base font-medium text-gray-700">Body Text</p>
171
+ <p class="text-sm text-gray-500">Caption</p>
172
+ </div>
173
+ </div>
174
+ </div>
175
+ </div>
176
+ </div>
177
+
178
+ <div class="bg-gray-50 rounded-xl p-6">
179
+ <h3 class="text-xl font-semibold mb-4 text-gray-700">Accessibility Features</h3>
180
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
181
+ <div class="bg-white p-4 rounded-lg shadow-sm">
182
+ <div class="w-10 h-10 bg-indigo-100 rounded-full flex items-center justify-center text-indigo-600 mb-3">
183
+ <i class="fas fa-eye"></i>
184
+ </div>
185
+ <h4 class="font-medium mb-1">Color Contrast</h4>
186
+ <p class="text-sm text-gray-600">4.5:1 minimum contrast ratio for all text</p>
187
+ </div>
188
+ <div class="bg-white p-4 rounded-lg shadow-sm">
189
+ <div class="w-10 h-10 bg-indigo-100 rounded-full flex items-center justify-center text-indigo-600 mb-3">
190
+ <i class="fas fa-keyboard"></i>
191
+ </div>
192
+ <h4 class="font-medium mb-1">Keyboard Nav</h4>
193
+ <p class="text-sm text-gray-600">Full keyboard navigation support</p>
194
+ </div>
195
+ <div class="bg-white p-4 rounded-lg shadow-sm">
196
+ <div class="w-10 h-10 bg-indigo-100 rounded-full flex items-center justify-center text-indigo-600 mb-3">
197
+ <i class="fas fa-assistive-listening-systems"></i>
198
+ </div>
199
+ <h4 class="font-medium mb-1">Screen Reader</h4>
200
+ <p class="text-sm text-gray-600">ARIA labels and semantic HTML</p>
201
+ </div>
202
+ </div>
203
+ </div>
204
+ </div>
205
+
206
+ <!-- Frontend Engineering -->
207
+ <div class="bg-white rounded-2xl shadow-xl p-8 mb-12">
208
+ <h2 class="text-3xl font-bold mb-6 text-gray-800">Frontend Engineering</h2>
209
+
210
+ <div class="mb-8">
211
+ <h3 class="text-xl font-semibold mb-4 text-gray-700">React/TypeScript Architecture</h3>
212
+ <div class="bg-gray-800 rounded-lg p-4 mb-4">
213
+ <div class="flex items-center text-gray-400 text-sm mb-2">
214
+ <i class="fas fa-folder-open mr-2"></i>
215
+ <span>src/</span>
216
+ </div>
217
+ <div class="ml-6">
218
+ <div class="flex items-center text-gray-400 text-sm mb-1">
219
+ <i class="fas fa-folder mr-2"></i>
220
+ <span>components/</span>
221
+ </div>
222
+ <div class="flex items-center text-gray-400 text-sm mb-1 ml-6">
223
+ <i class="fas fa-file-code mr-2"></i>
224
+ <span>CodeEditor.tsx</span>
225
+ </div>
226
+ <div class="flex items-center text-gray-400 text-sm mb-1 ml-6">
227
+ <i class="fas fa-file-code mr-2"></i>
228
+ <span>AnalysisResults.tsx</span>
229
+ </div>
230
+ <div class="flex items-center text-gray-400 text-sm mb-1 ml-6">
231
+ <i class="fas fa-file-code mr-2"></i>
232
+ <span>SecurityFindings.tsx</span>
233
+ </div>
234
+
235
+ <div class="flex items-center text-gray-400 text-sm mb-1">
236
+ <i class="fas fa-folder mr-2"></i>
237
+ <span>hooks/</span>
238
+ </div>
239
+ <div class="flex items-center text-gray-400 text-sm mb-1 ml-6">
240
+ <i class="fas fa-file-code mr-2"></i>
241
+ <span>useCodeAnalysis.ts</span>
242
+ </div>
243
+
244
+ <div class="flex items-center text-gray-400 text-sm mb-1">
245
+ <i class="fas fa-folder mr-2"></i>
246
+ <span>store/</span>
247
+ </div>
248
+ <div class="flex items-center text-gray-400 text-sm mb-1 ml-6">
249
+ <i class="fas fa-file-code mr-2"></i>
250
+ <span>analysisSlice.ts</span>
251
+ </div>
252
+ </div>
253
+ </div>
254
+
255
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
256
+ <div>
257
+ <h4 class="font-medium mb-2 text-gray-700">State Management</h4>
258
+ <div class="bg-gray-50 p-4 rounded-lg">
259
+ <pre class="text-xs code-block overflow-x-auto p-3 rounded">
260
+ // analysisSlice.ts
261
+ import { createSlice, PayloadAction } from '@reduxjs/toolkit';
262
+
263
+ interface AnalysisState {
264
+ code: string;
265
+ isLoading: boolean;
266
+ results: CodeAnalysisResult | null;
267
+ error: string | null;
268
+ }
269
+
270
+ const initialState: AnalysisState = {
271
+ code: '',
272
+ isLoading: false,
273
+ results: null,
274
+ error: null
275
+ };
276
+
277
+ const analysisSlice = createSlice({
278
+ name: 'analysis',
279
+ initialState,
280
+ reducers: {
281
+ setCode: (state, action: PayloadAction&lt;string&gt;) => {
282
+ state.code = action.payload;
283
+ },
284
+ analyzeCodeStart: (state) => {
285
+ state.isLoading = true;
286
+ state.error = null;
287
+ },
288
+ analyzeCodeSuccess: (state, action: PayloadAction&lt;CodeAnalysisResult&gt;) => {
289
+ state.isLoading = false;
290
+ state.results = action.payload;
291
+ },
292
+ analyzeCodeFailure: (state, action: PayloadAction&lt;string&gt;) => {
293
+ state.isLoading = false;
294
+ state.error = action.payload;
295
+ }
296
+ }
297
+ });
298
+
299
+ export const {
300
+ setCode,
301
+ analyzeCodeStart,
302
+ analyzeCodeSuccess,
303
+ analyzeCodeFailure
304
+ } = analysisSlice.actions;
305
+
306
+ export default analysisSlice.reducer;</pre>
307
+ </div>
308
+ </div>
309
+
310
+ <div>
311
+ <h4 class="font-medium mb-2 text-gray-700">Custom Hook</h4>
312
+ <div class="bg-gray-50 p-4 rounded-lg">
313
+ <pre class="text-xs code-block overflow-x-auto p-3 rounded">
314
+ // useCodeAnalysis.ts
315
+ import { useEffect } from 'react';
316
+ import { useDispatch, useSelector } from 'react-redux';
317
+ import { analyzeCodeStart, analyzeCodeSuccess, analyzeCodeFailure } from '../store/analysisSlice';
318
+ import { RootState } from '../store/store';
319
+ import api from '../services/api';
320
+
321
+ export const useCodeAnalysis = () => {
322
+ const dispatch = useDispatch();
323
+ const { code, isLoading, results, error } = useSelector(
324
+ (state: RootState) => state.analysis
325
+ );
326
+
327
+ const analyzeCode = async () => {
328
+ try {
329
+ dispatch(analyzeCodeStart());
330
+ const response = await api.post('/analyze', { code });
331
+ dispatch(analyzeCodeSuccess(response.data));
332
+ } catch (err) {
333
+ dispatch(analyzeCodeFailure(err.message));
334
+ }
335
+ };
336
+
337
+ return {
338
+ code,
339
+ isLoading,
340
+ results,
341
+ error,
342
+ analyzeCode
343
+ };
344
+ };</pre>
345
+ </div>
346
+ </div>
347
+ </div>
348
+ </div>
349
+
350
+ <div class="mb-8">
351
+ <h3 class="text-xl font-semibold mb-4 text-gray-700">Component Implementation</h3>
352
+
353
+ <div class="bg-gray-50 p-4 rounded-lg mb-6">
354
+ <pre class="text-xs code-block overflow-x-auto p-3 rounded">
355
+ // CodeEditor.tsx
356
+ import React, { useState, useEffect } from 'react';
357
+ import { useDispatch } from 'react-redux';
358
+ import { setCode } from '../store/analysisSlice';
359
+ import MonacoEditor from '@monaco-editor/react';
360
+ import { LoadingSpinner } from './ui/LoadingSpinner';
361
+
362
+ interface CodeEditorProps {
363
+ initialValue?: string;
364
+ language?: string;
365
+ }
366
+
367
+ export const CodeEditor: React.FC&lt;CodeEditorProps&gt; = ({
368
+ initialValue = '',
369
+ language = 'javascript'
370
+ }) => {
371
+ const [value, setValue] = useState(initialValue);
372
+ const dispatch = useDispatch();
373
+
374
+ useEffect(() => {
375
+ const timer = setTimeout(() => {
376
+ dispatch(setCode(value));
377
+ }, 500);
378
+
379
+ return () => clearTimeout(timer);
380
+ }, [value, dispatch]);
381
+
382
+ return (
383
+ &lt;div className="border border-gray-200 rounded-lg overflow-hidden"&gt;
384
+ &lt;div className="bg-gray-800 px-4 py-2 flex justify-between items-center"&gt;
385
+ &lt;span className="text-sm text-gray-300"&gt;{language.toUpperCase()}&lt;/span&gt;
386
+ &lt;button className="text-xs bg-indigo-600 text-white px-2 py-1 rounded"&gt;
387
+ Analyze
388
+ &lt;/button&gt;
389
+ &lt;/div&gt;
390
+ &lt;MonacoEditor
391
+ height="500px"
392
+ language={language}
393
+ theme="vs-dark"
394
+ value={value}
395
+ onChange={(newValue) => setValue(newValue || '')}
396
+ loading={&lt;LoadingSpinner /&gt;}
397
+ options={{
398
+ minimap: { enabled: false },
399
+ fontSize: 14,
400
+ wordWrap: 'on',
401
+ automaticLayout: true
402
+ }}
403
+ /&gt;
404
+ &lt;/div&gt;
405
+ );
406
+ };</pre>
407
+ </div>
408
+
409
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
410
+ <div class="bg-gray-50 p-4 rounded-lg">
411
+ <pre class="text-xs code-block overflow-x-auto p-3 rounded">
412
+ // AnalysisResults.tsx
413
+ import React from 'react';
414
+ import { CodeIssue } from '../types';
415
+ import { IssueSeverityBadge } from './ui/IssueSeverityBadge';
416
+
417
+ interface AnalysisResultsProps {
418
+ issues: CodeIssue[];
419
+ loading?: boolean;
420
+ }
421
+
422
+ export const AnalysisResults: React.FC&lt;AnalysisResultsProps&gt; = ({
423
+ issues,
424
+ loading = false
425
+ }) => {
426
+ if (loading) {
427
+ return &lt;div className="text-center py-8"&gt;Analyzing code...&lt;/div&gt;;
428
+ }
429
+
430
+ if (!issues || issues.length === 0) {
431
+ return &lt;div className="text-center py-8 text-gray-500"&gt;No issues found&lt;/div&gt;;
432
+ }
433
+
434
+ return (
435
+ &lt;div className="space-y-4"&gt;
436
+ {issues.map((issue, index) => (
437
+ &lt;div key={index} className="border border-gray-200 rounded-lg p-4"&gt;
438
+ &lt;div className="flex justify-between items-start mb-2"&gt;
439
+ &lt;h4 className="font-medium"&gt;{issue.message}&lt;/h4&gt;
440
+ &lt;IssueSeverityBadge severity={issue.severity} /&gt;
441
+ &lt;/div&gt;
442
+ &lt;p className="text-sm text-gray-600 mb-2"&gt;
443
+ Line {issue.line}: {issue.codeSnippet}
444
+ &lt;/p&gt;
445
+ &lt;p className="text-xs text-gray-500"&gt;{issue.ruleId}&lt;/p&gt;
446
+ &lt;/div&gt;
447
+ ))}
448
+ &lt;/div&gt;
449
+ );
450
+ };</pre>
451
+ </div>
452
+
453
+ <div class="bg-gray-50 p-4 rounded-lg">
454
+ <pre class="text-xs code-block overflow-x-auto p-3 rounded">
455
+ // SecurityFindings.tsx
456
+ import React from 'react';
457
+ import { SecurityFinding } from '../types';
458
+ import { CveBadge } from './ui/CveBadge';
459
+
460
+ interface SecurityFindingsProps {
461
+ findings: SecurityFinding[];
462
+ }
463
+
464
+ export const SecurityFindings: React.FC&lt;SecurityFindingsProps&gt; = ({
465
+ findings
466
+ }) => {
467
+ return (
468
+ &lt;div className="space-y-4"&gt;
469
+ {findings.map((finding, index) => (
470
+ &lt;div key={index} className="border border-red-200 rounded-lg p-4 bg-red-50"&gt;
471
+ &lt;div className="flex justify-between items-start mb-2"&gt;
472
+ &lt;h4 className="font-medium text-red-800"&gt;{finding.title}&lt;/h4&gt;
473
+ &lt;CveBadge cveId={finding.cveId} /&gt;
474
+ &lt;/div&gt;
475
+ &lt;p className="text-sm text-red-700 mb-2"&gt;{finding.description}&lt;/p&gt;
476
+ &lt;div className="flex space-x-2"&gt;
477
+ &lt;span className="text-xs px-2 py-1 bg-red-100 text-red-800 rounded"&gt;
478
+ Severity: {finding.severity}
479
+ &lt;/span&gt;
480
+ &lt;span className="text-xs px-2 py-1 bg-red-100 text-red-800 rounded"&gt;
481
+ Line: {finding.line}
482
+ &lt;/span&gt;
483
+ &lt;/div&gt;
484
+ &lt;/div&gt;
485
+ ))}
486
+ &lt;/div&gt;
487
+ );
488
+ };</pre>
489
+ </div>
490
+ </div>
491
+ </div>
492
+ </div>
493
+
494
+ <!-- Backend & API Architecture -->
495
+ <div class="bg-white rounded-2xl shadow-xl p-8 mb-12">
496
+ <h2 class="text-3xl font-bold mb-6 text-gray-800">Backend & API Architecture</h2>
497
+
498
+ <div class="mb-8">
499
+ <h3 class="text-xl font-semibold mb-4 text-gray-700">FastAPI Service Structure</h3>
500
+ <div class="bg-gray-800 rounded-lg p-4 mb-4">
501
+ <div class="flex items-center text-gray-400 text-sm mb-2">
502
+ <i class="fas fa-folder-open mr-2"></i>
503
+ <span>app/</span>
504
+ </div>
505
+ <div class="ml-6">
506
+ <div class="flex items-center text-gray-400 text-sm mb-1">
507
+ <i class="fas fa-folder mr-2"></i>
508
+ <span>api/</span>
509
+ </div>
510
+ <div class="flex items-center text-gray-400 text-sm mb-1 ml-6">
511
+ <i class="fas fa-file-code mr-2"></i>
512
+ <span>v1/</span>
513
+ </div>
514
+ <div class="flex items-center text-gray-400 text-sm mb-1 ml-12">
515
+ <i class="fas fa-file-code mr-2"></i>
516
+ <span>endpoints/</span>
517
+ </div>
518
+ <div class="flex items-center text-gray-400 text-sm mb-1 ml-6">
519
+ <i class="fas fa-file-code mr-2"></i>
520
+ <span>dependencies.py</span>
521
+ </div>
522
+
523
+ <div class="flex items-center text-gray-400 text-sm mb-1">
524
+ <i class="fas fa-folder mr-2"></i>
525
+ <span>core/</span>
526
+ </div>
527
+ <div class="flex items-center text-gray-400 text-sm mb-1 ml-6">
528
+ <i class="fas fa-file-code mr-2"></i>
529
+ <span>config.py</span>
530
+ </div>
531
+
532
+ <div class="flex items-center text-gray-400 text-sm mb-1">
533
+ <i class="fas fa-folder mr-2"></i>
534
+ <span>services/</span>
535
+ </div>
536
+ <div class="flex items-center text-gray-400 text-sm mb-1 ml-6">
537
+ <i class="fas fa-file-code mr-2"></i>
538
+ <span>code_analysis.py</span>
539
+ </div>
540
+ </div>
541
+ </div>
542
+
543
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
544
+ <div>
545
+ <h4 class="font-medium mb-2 text-gray-700">Main Application</h4>
546
+ <div class="bg-gray-50 p-4 rounded-lg">
547
+ <pre class="text-xs code-block overflow-x-auto p-3 rounded">
548
+ # main.py
549
+ from fastapi import FastAPI, Depends
550
+ from fastapi.middleware.cors import CORSMiddleware
551
+ from app.api.v1.endpoints import code_analysis, auth
552
+ from app.core.config import settings
553
+
554
+ app = FastAPI(
555
+ title="Deepsite API",
556
+ description="AI-powered code analysis platform",
557
+ version="1.0.0",
558
+ docs_url="/api/docs",
559
+ redoc_url="/api/redoc"
560
+ )
561
+
562
+ # CORS middleware
563
+ app.add_middleware(
564
+ CORSMiddleware,
565
+ allow_origins=settings.BACKEND_CORS_ORIGINS,
566
+ allow_credentials=True,
567
+ allow_methods=["*"],
568
+ allow_headers=["*"],
569
+ )
570
+
571
+ # Include API routers
572
+ app.include_router(
573
+ auth.router,
574
+ prefix="/api/v1/auth",
575
+ tags=["authentication"]
576
+ )
577
+ app.include_router(
578
+ code_analysis.router,
579
+ prefix="/api/v1/analysis",
580
+ tags=["code analysis"],
581
+ dependencies=[Depends(auth.get_current_active_user)]
582
+ )</pre>
583
+ </div>
584
+ </div>
585
+
586
+ <div>
587
+ <h4 class="font-medium mb-2 text-gray-700">Authentication</h4>
588
+ <div class="bg-gray-50 p-4 rounded-lg">
589
+ <pre class="text-xs code-block overflow-x-auto p-3 rounded">
590
+ # auth.py
591
+ from datetime import datetime, timedelta
592
+ from typing import Optional
593
+ from fastapi import Depends, HTTPException, status
594
+ from fastapi.security import OAuth2PasswordBearer
595
+ from jose import JWTError, jwt
596
+ from passlib.context import CryptContext
597
+ from pydantic import BaseModel
598
+ from app.core.config import settings
599
+
600
+ # Password hashing
601
+ pwd_context = CryptContext(schemes=["bcrypt"], deprecated="auto")
602
+ oauth2_scheme = OAuth2PasswordBearer(tokenUrl="token")
603
+
604
+ class Token(BaseModel):
605
+ access_token: str
606
+ token_type: str
607
+
608
+ class TokenData(BaseModel):
609
+ username: Optional[str] = None
610
+
611
+ def verify_password(plain_password: str, hashed_password: str):
612
+ return pwd_context.verify(plain_password, hashed_password)
613
+
614
+ def create_access_token(data: dict, expires_delta: Optional[timedelta] = None):
615
+ to_encode = data.copy()
616
+ if expires_delta:
617
+ expire = datetime.utcnow() + expires_delta
618
+ else:
619
+ expire = datetime.utcnow() + timedelta(minutes=15)
620
+ to_encode.update({"exp": expire})
621
+ encoded_jwt = jwt.encode(
622
+ to_encode,
623
+ settings.SECRET_KEY,
624
+ algorithm=settings.ALGORITHM
625
+ )
626
+ return encoded_jwt
627
+
628
+ async def get_current_user(token: str = Depends(oauth2_scheme)):
629
+ credentials_exception = HTTPException(
630
+ status_code=status.HTTP_401_UNAUTHORIZED,
631
+ detail="Could not validate credentials",
632
+ headers={"WWW-Authenticate": "Bearer"},
633
+ )
634
+ try:
635
+ payload = jwt.decode(
636
+ token,
637
+ settings.SECRET_KEY,
638
+ algorithms=[settings.ALGORITHM]
639
+ )
640
+ username: str = payload.get("sub")
641
+ if username is None:
642
+ raise credentials_exception
643
+ token_data = TokenData(username=username)
644
+ except JWTError:
645
+ raise credentials_exception
646
+
647
+ user = get_user(fake_db, username=token_data.username)
648
+ if user is None:
649
+ raise credentials_exception
650
+ return user</pre>
651
+ </div>
652
+ </div>
653
+ </div>
654
+ </div>
655
+
656
+ <div class="mb-8">
657
+ <h3 class="text-xl font-semibold mb-4 text-gray-700">API Endpoints</h3>
658
+
659
+ <div class="bg-gray-50 p-4 rounded-lg mb-6">
660
+ <pre class="text-xs code-block overflow-x-auto p-3 rounded">
661
+ # endpoints/code_analysis.py
662
+ from fastapi import APIRouter, Depends, HTTPException
663
+ from fastapi import status
664
+ from typing import List
665
+ from app.services.code_analysis import analyze_code
666
+ from app.models.schemas import CodeAnalysisRequest, CodeAnalysisResult
667
+ from app.api.v1.dependencies import get_current_active_user
668
+
669
+ router = APIRouter()
670
+
671
+ @router.post(
672
+ "/",
673
+ response_model=CodeAnalysisResult,
674
+ summary="Analyze code for quality and security issues",
675
+ description="""Analyzes the provided code for:
676
+ - Code quality issues
677
+ - Security vulnerabilities
678
+ - Performance anti-patterns
679
+ - Style violations""",
680
+ response_description="Analysis results with found issues"
681
+ )
682
+ async def analyze_code_endpoint(
683
+ request: CodeAnalysisRequest,
684
+ current_user: str = Depends(get_current_active_user)
685
+ ) -> CodeAnalysisResult:
686
+ try:
687
+ result = await analyze_code(request.code, request.language)
688
+ return result
689
+ except Exception as e:
690
+ raise HTTPException(
691
+ status_code=status.HTTP_422_UNPROCESSABLE_ENTITY,
692
+ detail=f"Error analyzing code: {str(e)}"
693
+ )
694
+
695
+ @router.get(
696
+ "/history/",
697
+ response_model=List[CodeAnalysisResult],
698
+ summary="Get analysis history",
699
+ description="Returns the user's previous code analysis results",
700
+ response_description="List of previous analysis results"
701
+ )
702
+ async def get_analysis_history(
703
+ current_user: str = Depends(get_current_active_user)
704
+ ) -> List[CodeAnalysisResult]:
705
+ # Implementation would query database for user's history
706
+ return []</pre>
707
+ </div>
708
+
709
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
710
+ <div class="bg-gray-50 p-4 rounded-lg">
711
+ <pre class="text-xs code-block overflow-x-auto p-3 rounded">
712
+ # services/code_analysis.py
713
+ from typing import Optional
714
+ from app.models.schemas import CodeAnalysisResult, CodeIssue, SecurityFinding
715
+ from app.integrations.huggingface import query_hf_model
716
+ from app.integrations.sonarqube import analyze_with_sonarqube
717
+
718
+ async def analyze_code(
719
+ code: str,
720
+ language: str = "python"
721
+ ) -> CodeAnalysisResult:
722
+ """Analyze code using multiple analysis methods"""
723
+
724
+ # Initialize result objects
725
+ quality_issues: List[CodeIssue] = []
726
+ security_findings: List[SecurityFinding] = []
727
+
728
+ # 1. Static analysis with SonarQube
729
+ sonar_results = await analyze_with_sonarqube(code, language)
730
+ quality_issues.extend(sonar_results.issues)
731
+
732
+ # 2. AI-powered analysis with HuggingFace
733
+ hf_prompt = f"""
734
+ Analyze this {language} code for quality and security issues:
735
+ {code}
736
+
737
+ Return findings in JSON format with:
738
+ - issue_type (quality|security|performance|style)
739
+ - severity (low|medium|high|critical)
740
+ - message
741
+ - line_number
742
+ - recommendation
743
+ """
744
+
745
+ hf_response = await query_hf_model(
746
+ model="codellama/CodeLlama-34b-Instruct-hf",
747
+ prompt=hf_prompt
748
+ )
749
+
750
+ # Process HF response and add to findings
751
+ if hf_response and hf_response.get("findings"):
752
+ for finding in hf_response["findings"]:
753
+ if finding["issue_type"] == "security":
754
+ security_findings.append(
755
+ SecurityFinding.from_hf_response(finding)
756
+ )
757
+ else:
758
+ quality_issues.append(
759
+ CodeIssue.from_hf_response(finding)
760
+ )
761
+
762
+ return CodeAnalysisResult(
763
+ quality_issues=quality_issues,
764
+ security_findings=security_findings,
765
+ summary=generate_summary(quality_issues, security_findings)
766
+ )</pre>
767
+ </div>
768
+
769
+ <div class="bg-gray-50 p-4 rounded-lg">
770
+ <pre class="text-xs code-block overflow-x-auto p-3 rounded">
771
+ # models/schemas.py
772
+ from pydantic import BaseModel, Field
773
+ from typing import List, Optional
774
+ from enum import Enum
775
+
776
+ class Severity(str, Enum):
777
+ LOW = "low"
778
+ MEDIUM = "medium"
779
+ HIGH = "high"
780
+ CRITICAL = "critical"
781
+
782
+ class CodeIssue(BaseModel):
783
+ rule_id: str = Field(..., example="S100")
784
+ message: str = Field(..., example="Avoid using 'eval' function")
785
+ severity: Severity = Field(..., example="high")
786
+ line: int = Field(..., example=42)
787
+ code_snippet: str = Field(..., example="eval(user_input)")
788
+ category: str = Field(..., example="security")
789
+
790
+ @classmethod
791
+ def from_hf_response(cls, data: dict):
792
+ return cls(
793
+ rule_id=data.get("rule_id", "AI-"+data["issue_type"]),
794
+ message=data["message"],
795
+ severity=data["severity"],
796
+ line=data["line_number"],
797
+ code_snippet=data.get("code_snippet", ""),
798
+ category=data["issue_type"]
799
+ )
800
+
801
+ class SecurityFinding(BaseModel):
802
+ cve_id: Optional[str] = Field(None, example="CVE-2021-1234")
803
+ title: str = Field(..., example="SQL Injection Vulnerability")
804
+ description: str = Field(..., example="User input directly concatenated into SQL query")
805
+ severity: Severity = Field(..., example="critical")
806
+ line: int = Field(..., example=15)
807
+ recommendation: str = Field(..., example="Use parameterized queries")
808
+
809
+ @classmethod
810
+ def from_hf_response(cls, data: dict):
811
+ return cls(
812
+ title=data["message"],
813
+ description=data.get("recommendation", ""),
814
+ severity=data["severity"],
815
+ line=data["line_number"],
816
+ recommendation=data.get("recommendation", "")
817
+ )
818
+
819
+ class CodeAnalysisRequest(BaseModel):
820
+ code: str = Field(..., example="def foo():\n pass")
821
+ language: str = Field("python", example="python")
822
+
823
+ class CodeAnalysisResult(BaseModel):
824
+ quality_issues: List[CodeIssue] = []
825
+ security_findings: List[SecurityFinding] = []
826
+ summary: str = Field(..., example="Found 3 critical issues")</pre>
827
+ </div>
828
+ </div>
829
+ </div>
830
+ </div>
831
+
832
+ <!-- AI/ML Integration -->
833
+ <div class="bg-white rounded-2xl shadow-xl p-8 mb-12">
834
+ <h2 class="text-3xl font-bold mb-6 text-gray-800">AI/ML Integration</h2>
835
+
836
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
837
+ <div>
838
+ <h3 class="text-xl font-semibold mb-4 text-gray-700">HuggingFace Integration</h3>
839
+ <div class="bg-gray-50 p-4 rounded-lg">
840
+ <pre class="text-xs code-block overflow-x-auto p-3 rounded">
841
+ # integrations/huggingface.py
842
+ import os
843
+ from typing import Optional, Dict, Any
844
+ import httpx
845
+ from app.core.config import settings
846
+ from app.core.logging import logger
847
+
848
+ HF_API_URL = "https://api-inference.huggingface.co/models"
849
+ HF_API_KEY = settings.HF_API_KEY
850
+
851
+ async def query_hf_model(
852
+ model: str,
853
+ prompt: str,
854
+ parameters: Optional[Dict[str, Any]] = None
855
+ ) -> Optional[Dict[str, Any]]:
856
+ """Query HuggingFace inference API"""
857
+
858
+ headers = {
859
+ "Authorization": f"Bearer {HF_API_KEY}",
860
+ "Content-Type": "application/json"
861
+ }
862
+
863
+ payload = {
864
+ "inputs": prompt,
865
+ "parameters": parameters or {
866
+ "max_new_tokens": 1024,
867
+ "temperature": 0.7,
868
+ "return_full_text": False
869
+ }
870
+ }
871
+
872
+ try:
873
+ async with httpx.AsyncClient(timeout=30.0) as client:
874
+ response = await client.post(
875
+ f"{HF_API_URL}/{model}",
876
+ headers=headers,
877
+ json=payload
878
+ )
879
+
880
+ if response.status_code == 200:
881
+ return response.json()
882
+ elif response.status_code == 503:
883
+ # Model is loading, wait and retry
884
+ logger.info(f"Model {model} is loading, retrying...")
885
+ await asyncio.sleep(10)
886
+ return await query_hf_model(model, prompt, parameters)
887
+ else:
888
+ logger.error(
889
+ f"HF API error: {response.status_code} - {response.text}"
890
+ )
891
+ return None
892
+
893
+ except Exception as e:
894
+ logger.error(f"Error querying HF API: {str(e)}")
895
+ return None</pre>
896
+ </div>
897
+ </div>
898
+
899
+ <div>
900
+ <h3 class="text-xl font-semibold mb-4 text-gray-700">Model Selection Strategy</h3>
901
+ <div class="bg-gray-50 p-4 rounded-lg">
902
+ <pre class="text-xs code-block overflow-x-auto p-3 rounded">
903
+ # services/model_selector.py
904
+ from enum import Enum
905
+ from typing import Optional, Dict, Any
906
+ from app.integrations.huggingface import query_hf_model
907
+
908
+ class ModelType(str, Enum):
909
+ CODE_ANALYSIS = "code_analysis"
910
+ SECURITY = "security"
911
+ DOCUMENTATION = "documentation"
912
+
913
+ MODEL_MAP = {
914
+ ModelType.CODE_ANALYSIS: "codellama/CodeLlama-34b-Instruct-hf",
915
+ ModelType.SECURITY: "deepset/roberta-base-squad2",
916
+ ModelType.DOCUMENTATION: "bigcode/starcoder"
917
+ }
918
+
919
+ def get_model_for_task(task_type: ModelType) -> str:
920
+ """Get appropriate model for given task type"""
921
+ return MODEL_MAP.get(task_type, MODEL_MAP[ModelType.CODE_ANALYSIS])
922
+
923
+ async def analyze_with_model(
924
+ code: str,
925
+ task_type: ModelType,
926
+ language: str = "python"
927
+ ) -> Optional[Dict[str, Any]]:
928
+ """Analyze code with task-specific model"""
929
+
930
+ model = get_model_for_task(task_type)
931
+ prompt = generate_prompt_for_task(task_type, code, language)
932
+
933
+ parameters = {
934
+ "max_new_tokens": 1024,
935
+ "temperature": 0.5 if task_type == ModelType.SECURITY else 0.7
936
+ }
937
+
938
+ return await query_hf_model(model, prompt, parameters)
939
+
940
+ def generate_prompt_for_task(
941
+ task_type: ModelType,
942
+ code: str,
943
+ language: str
944
+ ) -> str:
945
+ """Generate task-specific prompt"""
946
+
947
+ if task_type == ModelType.SECURITY:
948
+ return f"""Analyze this {language} code for security vulnerabilities:
949
+ {code}
950
+
951
+ Return JSON with:
952
+ - vulnerability_type
953
+ - severity (low/medium/high/critical)
954
+ - description
955
+ - line_number
956
+ - recommendation
957
+ """
958
+ elif task_type == ModelType.DOCUMENTATION:
959
+ return f"""Generate documentation for this {language} code:
960
+ {code}
961
+
962
+ Include:
963
+ - Function description
964
+ - Parameters
965
+ - Return value
966
+ - Usage example
967
+ """
968
+ else: # Default code analysis
969
+ return f"""Analyze this {language} code for quality issues:
970
+ {code}
971
+
972
+ Return JSON with:
973
+ - issue_type (style/performance/bug)
974
+ - severity (low/medium/high)
975
+ - message
976
+ - line_number
977
+ - recommendation
978
+ """</pre>
979
+ </div>
980
+ </div>
981
+ </div>
982
+
983
+ <div class="bg-gray-50 rounded-xl p-6">
984
+ <h3 class="text-xl font-semibold mb-4 text-gray-700">AI Pipeline Architecture</h3>
985
+ <div class="flex justify-center">
986
+ <div class="relative w-full max-w-3xl">
987
+ <!-- AI Pipeline Visualization -->
988
+ <div class="flex flex-col items-center space-y-8">
989
+ <!-- Step 1 -->
990
+ <div class="flex items-center w-full">
991
+ <div class="w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center text-white z-10">
992
+ <i class="fas fa-code"></i>
993
+ </div>
994
+ <div class="ml-4 bg-white p-4 rounded-lg shadow-sm flex-1">
995
+ <h4 class="font-medium">Code Input</h4>
996
+ <p class="text-sm text-gray-600">User submits code for analysis</p>
997
+ </div>
998
+ </div>
999
+
1000
+ <!-- Arrow -->
1001
+ <div class="h-8 w-0.5 bg-indigo-300 ml-6 -my-4"></div>
1002
+
1003
+ <!-- Step 2 -->
1004
+ <div class="flex items-center w-full">
1005
+ <div class="w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center text-white z-10">
1006
+ <i class="fas fa-shield-alt"></i>
1007
+ </div>
1008
+ <div class="ml-4 bg-white p-4 rounded-lg shadow-sm flex-1">
1009
+ <h4 class="font-medium">Static Analysis</h4>
1010
+ <p class="text-sm text-gray-600">SonarQube scans for common issues</p>
1011
+ </div>
1012
+ </div>
1013
+
1014
+ <!-- Arrow -->
1015
+ <div class="h-8 w-0.5 bg-indigo-300 ml-6 -my-4"></div>
1016
+
1017
+ <!-- Step 3 -->
1018
+ <div class="flex items-center w-full">
1019
+ <div class="w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center text-white z-10">
1020
+ <i class="fas fa-brain"></i>
1021
+ </div>
1022
+ <div class="ml-4 bg-white p-4 rounded-lg shadow-sm flex-1">
1023
+ <h4 class="font-medium">AI Analysis</h4>
1024
+ <p class="text-sm text-gray-600">CodeLlama analyzes for complex patterns</p>
1025
+ </div>
1026
+ </div>
1027
+
1028
+ <!-- Arrow -->
1029
+ <div class="h-8 w-0.5 bg-indigo-300 ml-6 -my-4"></div>
1030
+
1031
+ <!-- Step 4 -->
1032
+ <div class="flex items-center w-full">
1033
+ <div class="w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center text-white z-10">
1034
+ <i class="fas fa-chart-bar"></i>
1035
+ </div>
1036
+ <div class="ml-4 bg-white p-4 rounded-lg shadow-sm flex-1">
1037
+ <h4 class="font-medium">Results Aggregation</h4>
1038
+ <p class="text-sm text-gray-600">Combine findings from all sources</p>
1039
+ </div>
1040
+ </div>
1041
+
1042
+ <!-- Arrow -->
1043
+ <div class="h-8 w-0.5 bg-indigo-300 ml-6 -my-4"></div>
1044
+
1045
+ <!-- Step 5 -->
1046
+ <div class="flex items-center w-full">
1047
+ <div class="w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center text-white z-10">
1048
+ <i class="fas fa-file-alt"></i>
1049
+ </div>
1050
+ <div class="ml-4 bg-white p-4 rounded-lg shadow-sm flex-1">
1051
+ <h4 class="font-medium">Report Generation</h4>
1052
+ <p class="text-sm text-gray-600">Create comprehensive report</p>
1053
+ </div>
1054
+ </div>
1055
+ </div>
1056
+ </div>
1057
+ </div>
1058
+ </div>
1059
+ </div>
1060
+
1061
+ <!-- Deployment & Scalability -->
1062
+ <div class="bg-white rounded-2xl shadow-xl p-8 mb-12">
1063
+ <h2 class="text-3xl font-bold mb-6 text-gray-800">Deployment & Scalability</h2>
1064
+
1065
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
1066
+ <div>
1067
+ <h3 class="text-xl font-semibold mb-4 text-gray-700">Docker Configuration</h3>
1068
+ <div class="bg-gray-50 p-4 rounded-lg">
1069
+ <pre class="text-xs code-block overflow-x-auto p-3 rounded">
1070
+ # Dockerfile
1071
+ FROM python:3.9-slim as base
1072
+
1073
+ # Install system dependencies
1074
+ RUN apt-get update && apt-get install -y \
1075
+ build-essential \
1076
+ curl \
1077
+ && rm -rf /var/lib/apt/lists/*
1078
+
1079
+ # Create and activate virtual environment
1080
+ ENV VIRTUAL_ENV=/opt/venv
1081
+ RUN python3 -m venv $VIRTUAL_ENV
1082
+ ENV PATH="$VIRTUAL_ENV/bin:$PATH"
1083
+
1084
+ # Install Python dependencies
1085
+ WORKDIR /app
1086
+ COPY requirements.txt .
1087
+ RUN pip install --no-cache-dir -r requirements.txt
1088
+
1089
+ # Copy application code
1090
+ COPY . .
1091
+
1092
+ # Frontend build stage
1093
+ FROM node:16 as frontend-builder
1094
+ WORKDIR /app/frontend
1095
+ COPY frontend/package.json frontend/package-lock.json ./
1096
+ RUN npm install
1097
+ COPY frontend .
1098
+ RUN npm run build
1099
+
1100
+ # Final production image
1101
+ FROM base as production
1102
+ COPY --from=frontend-builder /app/frontend/dist /app/frontend/dist
1103
+
1104
+ # Set environment variables
1105
+ ENV PYTHONUNBUFFERED=1
1106
+ ENV PORT=8000
1107
+ ENV MODE=production
1108
+
1109
+ # Run application
1110
+ CMD ["uvicorn", "app.main:app", "--host", "0.0.0.0", "--port", "$PORT"]</pre>
1111
+ </div>
1112
+ </div>
1113
+
1114
+ <div>
1115
+ <h3 class="text-xl font-semibold mb-4 text-gray-700">CI/CD Pipeline</h3>
1116
+ <div class="bg-gray-50 p-4 rounded-lg">
1117
+ <pre class="text-xs code-block overflow-x-auto p-3 rounded">
1118
+ # .github/workflows/deploy.yml
1119
+ name: Deploy to HuggingFace Spaces
1120
+
1121
+ on:
1122
+ push:
1123
+ branches: [ main ]
1124
+ pull_request:
1125
+ branches: [ main ]
1126
+
1127
+ jobs:
1128
+ build-and-deploy:
1129
+ runs-on: ubuntu-latest
1130
+ steps:
1131
+ - uses: actions/checkout@v3
1132
+
1133
+ - name: Set up Python
1134
+ uses: actions/setup-python@v4
1135
+ with:
1136
+ python-version: '3.9'
1137
+
1138
+ - name: Install dependencies
1139
+ run: |
1140
+ python -m pip install --upgrade pip
1141
+ pip install -r requirements.txt
1142
+
1143
+ - name: Set up Node.js
1144
+ uses: actions/setup-node@v3
1145
+ with:
1146
+ node-version: '16'
1147
+
1148
+ - name: Build frontend
1149
+ working-directory: ./frontend
1150
+ run: |
1151
+ npm install
1152
+ npm run build
1153
+
1154
+ - name: Configure Docker
1155
+ run: |
1156
+ echo "${{ secrets.HF_TOKEN }}" | docker login \
1157
+ -u ${{ secrets.HF_USERNAME }} \
1158
+ --password-stdin \
1159
+ ghcr.io
1160
+
1161
+ - name: Build and push Docker image
1162
+ run: |
1163
+ docker build -t ghcr.io/${{ secrets.HF_USERNAME }}/deepsite:latest .
1164
+ docker push ghcr.io/${{ secrets.HF_USERNAME }}/deepsite:latest
1165
+
1166
+ - name: Deploy to Spaces
1167
+ uses: huggingface/huggingface_hub@main
1168
+ with:
1169
+ huggingface_token: ${{ secrets.HF_TOKEN }}
1170
+ repo_id: ${{ secrets.HF_USERNAME }}/deepsite
1171
+ space_sdk: docker
1172
+ space_hardware: cpu-basic
1173
+ space_storage: small</pre>
1174
+ </div>
1175
+ </div>
1176
+ </div>
1177
+
1178
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
1179
+ <div>
1180
+ <h3 class="text-xl font-semibold mb-4 text-gray-700">Rate Limiting</h3>
1181
+ <div class="bg-gray-50 p-4 rounded-lg">
1182
+ <pre class="text-xs code-block overflow-x-auto p-3 rounded">
1183
+ # app/api/dependencies.py
1184
+ from fastapi import Depends, Request
1185
+ from fastapi.security import HTTPBearer
1186
+ from fastapi import HTTPException, status
1187
+ from redis import Redis
1188
+ from app.core.config import settings
1189
+
1190
+ security = HTTPBearer()
1191
+ redis = Redis.from_url(settings.REDIS_URL)
1192
+
1193
+ async def rate_limit(
1194
+ request: Request,
1195
+ credentials: str = Depends(security)
1196
+ ) -> None:
1197
+ """Rate limiting middleware"""
1198
+
1199
+ # Get user ID from token
1200
+ try:
1201
+ payload = jwt.decode(
1202
+ credentials.credentials,
1203
+ settings.SECRET_KEY,
1204
+ algorithms=[settings.ALGORITHM]
1205
+ )
1206
+ user_id = payload.get("sub")
1207
+ except JWTError:
1208
+ user_id = request.client.host # Fallback to IP
1209
+
1210
+ # Check rate limit
1211
+ key = f"rate_limit:{user_id}"
1212
+ current = redis.incr(key)
1213
+
1214
+ if current == 1:
1215
+ redis.expire(key, 60) # 1 minute window
1216
+
1217
+ if current > settings.RATE_LIMIT:
1218
+ raise HTTPException(
1219
+ status_code=status.HTTP_429_TOO_MANY_REQUESTS,
1220
+ detail="Too many requests"
1221
+ )</pre>
1222
+ </div>
1223
+ </div>
1224
+
1225
+ <div>
1226
+ <h3 class="text-xl font-semibold mb-4 text-gray-700">HuggingFace Space Config</h3>
1227
+ <div class="bg-gray-50 p-4 rounded-lg">
1228
+ <pre class="text-xs code-block overflow-x-auto p-3 rounded">
1229
+ # README.md
1230
+ ---
1231
+ title: Deepsite
1232
+ emoji: 🚀
1233
+ colorFrom: indigo
1234
+ colorTo: purple
1235
+ sdk: docker
1236
+ app_file: app/main.py
1237
+ pinned: true
1238
+ license: apache-2.0
1239
+
1240
+ # Hardware resources
1241
+ resources:
1242
+ cpu: 2
1243
+ memory: 8Gi
1244
+
1245
+ # Environment variables
1246
+ env:
1247
+ - HF_API_KEY: your_huggingface_api_key
1248
+ - MODE: production
1249
+ - PORT: 8000
1250
+
1251
+ # Health check
1252
+ healthcheck:
1253
+ test: ["CMD", "curl", "-f", "http://localhost:$PORT/api/health"]
1254
+ interval: 30s
1255
+ timeout: 10s
1256
+ retries: 3</pre>
1257
+ </div>
1258
+ </div>
1259
+ </div>
1260
+ </div>
1261
+
1262
+ <!-- Integration Strategy & Maintenance -->
1263
+ <div class="bg-white rounded-2xl shadow-xl p-8">
1264
+ <h2 class="text-3xl font-bold mb-6 text-gray-800">Integration Strategy & Maintenance</h2>
1265
+
1266
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
1267
+ <div>
1268
+ <h3 class="text-xl font-semibold mb-4 text-gray-700">Deployment Steps</h3>
1269
+ <div class="bg-gray-50 p-4 rounded-lg">
1270
+ <ol class="list-decimal pl-5 space-y-2 text-sm text-gray-700">
1271
+ <li>Set up HuggingFace Space with Docker SDK</li>
1272
+ <li>Configure environment variables in Space settings</li>
1273
+ <li>Connect GitHub repository for CI/CD</li>
1274
+ <li>Set up Redis for rate limiting (if needed)</li>
1275
+ <li>Configure custom domain (optional)</li>
1276
+ <li>Enable monitoring and alerts</li>
1277
+ </ol>
1278
+ </div>
1279
+
1280
+ <h3 class="text-xl font-semibold mb-4 text-gray-700 mt-6">Monitoring</h3>
1281
+ <div class="bg-gray-50 p-4 rounded-lg">
1282
+ <ul class="list-disc pl-5 space-y-2 text-sm text-gray-700">
1283
+ <li>Prometheus metrics endpoint at <code>/metrics</code></li>
1284
+ <li>Health check endpoint at <code>/api/health</code></li>
1285
+ <li>Log aggregation with ELK stack</li>
1286
+ <li>Performance monitoring with Grafana</li>
1287
+ </ul>
1288
+ </div>
1289
+ </div>
1290
+
1291
+ <div>
1292
+ <h3 class="text-xl font-semibold mb-4 text-gray-700">Maintenance Plan</h3>
1293
+ <div class="bg-gray-50 p-4 rounded-lg">
1294
+ <div class="space-y-4">
1295
+ <div>
1296
+ <h4 class="font-medium text-gray-700">Weekly</h4>
1297
+ <ul class="list-disc pl-5 text-sm text-gray-700 mt-2">
1298
+ <li>Review error logs and metrics</li>
1299
+ <li>Check for model updates on HuggingFace</li>
1300
+ <li>Verify backup systems</li>
1301
+ </ul>
1302
+ </div>
1303
+
1304
+ <div>
1305
+ <h4 class="font-medium text-gray-700">Monthly</h4>
1306
+ <ul class="list-disc pl-5 text-sm text-gray-700 mt-2">
1307
+ <li>Update dependencies</li>
1308
+ <li>Review rate limit thresholds</li>
1309
+ <li>Test failover procedures</li>
1310
+ </ul>
1311
+ </div>
1312
+
1313
+ <div>
1314
+ <h4 class="font-medium text-gray-700">Quarterly</h4>
1315
+ <ul class="list-disc pl-5 text-sm text-gray-700 mt-2">
1316
+ <li>Security audit</li>
1317
+ <li>Performance benchmark</li>
1318
+ <li>User feedback review</li>
1319
+ </ul>
1320
+ </div>
1321
+ </div>
1322
+ </div>
1323
+ </div>
1324
+ </div>
1325
+
1326
+ <div class="bg-indigo-50 rounded-xl p-6">
1327
+ <h3 class="text-xl font-semibold mb-4 text-indigo-800">Final Integration Strategy</h3>
1328
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
1329
+ <div class="bg-white p-4 rounded-lg shadow-sm">
1330
+ <div class="w-10 h-10 bg-indigo-100 rounded-full flex items-center justify-center text-indigo-600 mb-3">
1331
+ <i class="fas fa-layer-group"></i>
1332
+ </div>
1333
+ <h4 class="font-medium mb-1">Layered Architecture</h4>
1334
+ <p class="text-sm text-gray-600">Clear separation between frontend, backend, and AI components</p>
1335
+ </div>
1336
+ <div class="bg-white p-4 rounded-lg shadow-sm">
1337
+ <div class="w-10 h-10 bg-indigo-100 rounded-full flex items-center justify-center text-indigo-600 mb-3">
1338
+ <i class="fas fa-plug"></i>
1339
+ </div>
1340
+ <h4 class="font-medium mb-1">API-First Design</h4>
1341
+ <p class="text-sm text-gray-600">RESTful interfaces between all components</p>
1342
+ </div>
1343
+ <div class="bg-white p-4 rounded-lg shadow-sm">
1344
+ <div class="w-10 h-10 bg-indigo-100 rounded-full flex items-center justify-center text-indigo-600 mb-3">
1345
+ <i class="fas fa-box-open"></i>
1346
+ </div>
1347
+ <h4 class="font-medium mb-1">Containerized Deployment</h4>
1348
+ <p class="text-sm text-gray-600">Docker containers for easy deployment on HuggingFace Spaces</p>
1349
+ </div>
1350
+ </div>
1351
+ </div>
1352
+ </div>
1353
+ </div>
1354
+
1355
+ <script>
1356
+ // Simple animation for the architecture diagram
1357
+ document.addEventListener('DOMContentLoaded', () => {
1358
+ const architectureSteps = document.querySelectorAll('.flex.items-center.w-full');
1359
+
1360
+ architectureSteps.forEach((step, index) => {
1361
+ step.style.opacity = '0';
1362
+ step.style.transform = 'translateY(20px)';
1363
+ step.style.transition = `all 0.5s ease ${index * 0.2}s`;
1364
+
1365
+ setTimeout(() => {
1366
+ step.style.opacity = '1';
1367
+ step.style.transform = 'translateY(0)';
1368
+ }, 100);
1369
+ });
1370
+ });
1371
+ </script>
1372
+ <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=Boobs00/deepsite-architecture" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1373
+ </html>