Hugging Face's logo

Spaces:
xmarva
/
protein-vision
Running

App Files Community
xmarva commited on
Commit
3df6ab0
·
verified ·
1 Parent(s): 8854d90

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +646 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Protein Vision
3
- emoji: 🏆
4
- colorFrom: purple
5
  colorTo: blue
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: protein-vision
3
+ emoji: 🐳
4
+ colorFrom: green
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,646 @@
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>Protein Structure Dashboard</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/3dmol@1.0.0/build/3Dmol-min.js"></script>
10
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
11
+ <style>
12
+ .protein-viewer {
13
+ width: 100%;
14
+ height: 400px;
15
+ background-color: #f8fafc;
16
+ border-radius: 0.5rem;
17
+ }
18
+ .sidebar {
19
+ transition: all 0.3s ease;
20
+ }
21
+ .secondary-chart {
22
+ height: 200px;
23
+ }
24
+ .highlight-card {
25
+ transition: all 0.2s ease;
26
+ }
27
+ .highlight-card:hover {
28
+ transform: translateY(-2px);
29
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
30
+ }
31
+ .dropdown-content {
32
+ display: none;
33
+ position: absolute;
34
+ z-index: 1;
35
+ }
36
+ .dropdown:hover .dropdown-content {
37
+ display: block;
38
+ }
39
+ .tab-content {
40
+ display: none;
41
+ }
42
+ .tab-content.active {
43
+ display: block;
44
+ }
45
+ </style>
46
+ </head>
47
+ <body class="bg-gray-50 text-gray-800">
48
+ <div class="flex h-screen overflow-hidden">
49
+ <!-- Sidebar -->
50
+ <div class="sidebar w-64 bg-blue-900 text-white p-4 hidden md:block">
51
+ <div class="flex items-center mb-8">
52
+ <i class="fas fa-dna text-2xl mr-3"></i>
53
+ <h1 class="text-xl font-bold">ProteinVision</h1>
54
+ </div>
55
+ <nav>
56
+ <div class="mb-6">
57
+ <h3 class="text-xs uppercase tracking-wider text-blue-300 mb-3">Navigation</h3>
58
+ <a href="#" class="flex items-center py-2 px-3 bg-blue-800 rounded-lg mb-1">
59
+ <i class="fas fa-home mr-3"></i>
60
+ Dashboard
61
+ </a>
62
+ <a href="#" class="flex items-center py-2 px-3 hover:bg-blue-800 rounded-lg mb-1">
63
+ <i class="fas fa-search mr-3"></i>
64
+ Protein Explorer
65
+ </a>
66
+ <a href="#" class="flex items-center py-2 px-3 hover:bg-blue-800 rounded-lg mb-1">
67
+ <i class="fas fa-chart-bar mr-3"></i>
68
+ Analysis Tools
69
+ </a>
70
+ <a href="#" class="flex items-center py-2 px-3 hover:bg-blue-800 rounded-lg mb-1">
71
+ <i class="fas fa-book mr-3"></i>
72
+ Documentation
73
+ </a>
74
+ </div>
75
+ <div class="mb-6">
76
+ <h3 class="text-xs uppercase tracking-wider text-blue-300 mb-3">Recent Proteins</h3>
77
+ <a href="#" class="flex items-center py-2 px-3 hover:bg-blue-800 rounded-lg mb-1 text-sm">
78
+ <i class="fas fa-circle text-green-400 mr-3 text-xs"></i>
79
+ Hemoglobin (1HHO)
80
+ </a>
81
+ <a href="#" class="flex items-center py-2 px-3 hover:bg-blue-800 rounded-lg mb-1 text-sm">
82
+ <i class="fas fa-circle text-purple-400 mr-3 text-xs"></i>
83
+ Myoglobin (1MBN)
84
+ </a>
85
+ <a href="#" class="flex items-center py-2 px-3 hover:bg-blue-800 rounded-lg mb-1 text-sm">
86
+ <i class="fas fa-circle text-yellow-400 mr-3 text-xs"></i>
87
+ Insulin (1TRZ)
88
+ </a>
89
+ </div>
90
+ <div class="mb-6">
91
+ <h3 class="text-xs uppercase tracking-wider text-blue-300 mb-3">Data Sources</h3>
92
+ <a href="https://www.rcsb.org" target="_blank" class="flex items-center py-2 px-3 hover:bg-blue-800 rounded-lg mb-1 text-sm">
93
+ <i class="fas fa-database mr-3"></i>
94
+ RCSB PDB
95
+ </a>
96
+ <a href="https://www.uniprot.org" target="_blank" class="flex items-center py-2 px-3 hover:bg-blue-800 rounded-lg mb-1 text-sm">
97
+ <i class="fas fa-database mr-3"></i>
98
+ UniProt
99
+ </a>
100
+ </div>
101
+ </nav>
102
+ </div>
103
+
104
+ <!-- Main Content -->
105
+ <div class="flex-1 overflow-auto">
106
+ <!-- Top Navigation -->
107
+ <header class="bg-white shadow-sm">
108
+ <div class="flex items-center justify-between p-4">
109
+ <div class="flex items-center">
110
+ <button class="md:hidden mr-4 text-gray-600">
111
+ <i class="fas fa-bars text-xl"></i>
112
+ </button>
113
+ <h2 class="text-lg font-semibold">Protein Structure Dashboard</h2>
114
+ </div>
115
+ <div class="flex items-center space-x-4">
116
+ <div class="relative">
117
+ <button class="flex items-center text-gray-600 hover:text-blue-600">
118
+ <i class="fas fa-bell text-xl"></i>
119
+ <span class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">3</span>
120
+ </button>
121
+ </div>
122
+ <div class="dropdown relative">
123
+ <button class="flex items-center">
124
+ <img src="https://ui-avatars.com/api/?name=Researcher&background=4f46e5&color=fff" alt="User" class="w-8 h-8 rounded-full">
125
+ <span class="ml-2 hidden md:inline">Researcher</span>
126
+ <i class="fas fa-chevron-down ml-1 text-xs"></i>
127
+ </button>
128
+ <div class="dropdown-content mt-2 right-0 bg-white shadow-lg rounded-md w-48 py-1">
129
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Profile</a>
130
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Settings</a>
131
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Logout</a>
132
+ </div>
133
+ </div>
134
+ </div>
135
+ </div>
136
+ </header>
137
+
138
+ <!-- Main Dashboard -->
139
+ <main class="p-4 md:p-6">
140
+ <!-- Search and Protein Selection -->
141
+ <div class="bg-white rounded-lg shadow p-4 mb-6">
142
+ <div class="flex flex-col md:flex-row md:items-center md:justify-between">
143
+ <div class="w-full md:w-1/2 mb-4 md:mb-0">
144
+ <label class="block text-sm font-medium text-gray-700 mb-1">Search Protein</label>
145
+ <div class="relative">
146
+ <input type="text" placeholder="Enter PDB ID or protein name..." class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500">
147
+ <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
148
+ </div>
149
+ </div>
150
+ <div class="w-full md:w-1/2 md:pl-4">
151
+ <label class="block text-sm font-medium text-gray-700 mb-1">Compare With</label>
152
+ <div class="relative">
153
+ <input type="text" placeholder="Select another protein..." class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500">
154
+ <i class="fas fa-exchange-alt absolute left-3 top-3 text-gray-400"></i>
155
+ </div>
156
+ </div>
157
+ </div>
158
+ </div>
159
+
160
+ <!-- Current Protein Info -->
161
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
162
+ <div class="highlight-card bg-white rounded-lg shadow p-4">
163
+ <div class="flex items-center">
164
+ <div class="p-3 rounded-full bg-blue-100 text-blue-600 mr-3">
165
+ <i class="fas fa-fingerprint"></i>
166
+ </div>
167
+ <div>
168
+ <p class="text-xs text-gray-500">PDB ID</p>
169
+ <h3 class="font-bold">1HHO</h3>
170
+ </div>
171
+ </div>
172
+ </div>
173
+ <div class="highlight-card bg-white rounded-lg shadow p-4">
174
+ <div class="flex items-center">
175
+ <div class="p-3 rounded-full bg-green-100 text-green-600 mr-3">
176
+ <i class="fas fa-tag"></i>
177
+ </div>
178
+ <div>
179
+ <p class="text-xs text-gray-500">Protein Name</p>
180
+ <h3 class="font-bold">Hemoglobin</h3>
181
+ </div>
182
+ </div>
183
+ </div>
184
+ <div class="highlight-card bg-white rounded-lg shadow p-4">
185
+ <div class="flex items-center">
186
+ <div class="p-3 rounded-full bg-purple-100 text-purple-600 mr-3">
187
+ <i class="fas fa-layer-group"></i>
188
+ </div>
189
+ <div>
190
+ <p class="text-xs text-gray-500">Resolution</p>
191
+ <h3 class="font-bold">2.10 Å</h3>
192
+ </div>
193
+ </div>
194
+ </div>
195
+ <div class="highlight-card bg-white rounded-lg shadow p-4">
196
+ <div class="flex items-center">
197
+ <div class="p-3 rounded-full bg-yellow-100 text-yellow-600 mr-3">
198
+ <i class="fas fa-ruler"></i>
199
+ </div>
200
+ <div>
201
+ <p class="text-xs text-gray-500">Size (kDa)</p>
202
+ <h3 class="font-bold">64.5</h3>
203
+ </div>
204
+ </div>
205
+ </div>
206
+ </div>
207
+
208
+ <!-- Protein Visualization and Charts -->
209
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
210
+ <!-- 3D Viewer -->
211
+ <div class="lg:col-span-2 bg-white rounded-lg shadow p-4">
212
+ <div class="flex justify-between items-center mb-4">
213
+ <h3 class="font-semibold">3D Structure Visualization</h3>
214
+ <div class="flex space-x-2">
215
+ <button class="px-3 py-1 bg-blue-50 text-blue-600 rounded text-sm">
216
+ <i class="fas fa-atom mr-1"></i> Cartoon
217
+ </button>
218
+ <button class="px-3 py-1 bg-gray-100 text-gray-600 rounded text-sm">
219
+ <i class="fas fa-circle mr-1"></i> Surface
220
+ </button>
221
+ <button class="px-3 py-1 bg-gray-100 text-gray-600 rounded text-sm">
222
+ <i class="fas fa-bolt mr-1"></i> Ligand
223
+ </button>
224
+ </div>
225
+ </div>
226
+ <div id="protein-viewer" class="protein-viewer"></div>
227
+ <div class="mt-3 flex justify-between text-sm text-gray-500">
228
+ <span>Hemoglobin (α and β chains)</span>
229
+ <span>Source: RCSB PDB (1HHO)</span>
230
+ </div>
231
+ </div>
232
+
233
+ <!-- Secondary Structure -->
234
+ <div class="bg-white rounded-lg shadow p-4">
235
+ <h3 class="font-semibold mb-4">Secondary Structure</h3>
236
+ <div class="mb-4">
237
+ <canvas id="secondaryChart" class="secondary-chart"></canvas>
238
+ </div>
239
+ <div class="grid grid-cols-3 gap-2 text-center">
240
+ <div class="p-2 bg-blue-50 rounded">
241
+ <p class="text-xs text-blue-600">Alpha Helix</p>
242
+ <p class="font-bold">72%</p>
243
+ </div>
244
+ <div class="p-2 bg-green-50 rounded">
245
+ <p class="text-xs text-green-600">Beta Sheet</p>
246
+ <p class="font-bold">18%</p>
247
+ </div>
248
+ <div class="p-2 bg-purple-50 rounded">
249
+ <p class="text-xs text-purple-600">Coil</p>
250
+ <p class="font-bold">10%</p>
251
+ </div>
252
+ </div>
253
+ </div>
254
+ </div>
255
+
256
+ <!-- Comparison and Detailed Analysis -->
257
+ <div class="bg-white rounded-lg shadow mb-6">
258
+ <div class="border-b border-gray-200">
259
+ <nav class="flex -mb-px">
260
+ <button data-tab="properties" class="tab-button py-4 px-6 text-center border-b-2 font-medium text-sm border-blue-500 text-blue-600">
261
+ <i class="fas fa-chart-pie mr-2"></i>Properties
262
+ </button>
263
+ <button data-tab="sequence" class="tab-button py-4 px-6 text-center border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300">
264
+ <i class="fas fa-align-left mr-2"></i>Sequence
265
+ </button>
266
+ <button data-tab="domains" class="tab-button py-4 px-6 text-center border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300">
267
+ <i class="fas fa-puzzle-piece mr-2"></i>Domains
268
+ </button>
269
+ <button data-tab="interactions" class="tab-button py-4 px-6 text-center border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300">
270
+ <i class="fas fa-handshake mr-2"></i>Interactions
271
+ </button>
272
+ </nav>
273
+ </div>
274
+ <div class="p-4">
275
+ <!-- Properties Tab Content -->
276
+ <div id="properties" class="tab-content active">
277
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
278
+ <div>
279
+ <h4 class="font-medium mb-3">Physicochemical Properties</h4>
280
+ <div class="space-y-3">
281
+ <div>
282
+ <div class="flex justify-between text-sm mb-1">
283
+ <span>Molecular Weight</span>
284
+ <span>64.5 kDa</span>
285
+ </div>
286
+ <div class="w-full bg-gray-200 rounded-full h-2">
287
+ <div class="bg-blue-600 h-2 rounded-full" style="width: 70%"></div>
288
+ </div>
289
+ </div>
290
+ <div>
291
+ <div class="flex justify-between text-sm mb-1">
292
+ <span>Theoretical pI</span>
293
+ <span>6.9</span>
294
+ </div>
295
+ <div class="w-full bg-gray-200 rounded-full h-2">
296
+ <div class="bg-green-600 h-2 rounded-full" style="width: 45%"></div>
297
+ </div>
298
+ </div>
299
+ <div>
300
+ <div class="flex justify-between text-sm mb-1">
301
+ <span>Instability Index</span>
302
+ <span>24.3 (stable)</span>
303
+ </div>
304
+ <div class="w-full bg-gray-200 rounded-full h-2">
305
+ <div class="bg-purple-600 h-2 rounded-full" style="width: 24%"></div>
306
+ </div>
307
+ </div>
308
+ </div>
309
+ </div>
310
+ <div>
311
+ <h4 class="font-medium mb-3">Amino Acid Composition</h4>
312
+ <canvas id="aminoAcidChart"></canvas>
313
+ </div>
314
+ </div>
315
+ </div>
316
+
317
+ <!-- Sequence Tab Content -->
318
+ <div id="sequence" class="tab-content">
319
+ <div class="bg-gray-50 p-4 rounded-lg font-mono text-sm overflow-x-auto">
320
+ <div class="mb-2 text-gray-600">>sp|P69905|HBA_HUMAN Hemoglobin subunit alpha OS=Homo sapiens OX=9606 GN=HBA1 PE=1 SV=2</div>
321
+ <div class="whitespace-pre-wrap">
322
+ MVLSPADKTNVKAAWGKVGAHAGEYGAEALERMFLSFPTTKTYFPHFDLSHGSAQVKGHG
323
+ KKVADALTNAVAHVDDMPNALSALSDLHAHKLRVDPVNFKLLSHCLLVTLAAHLPAEFTP
324
+ AVHASLDKFLASVSTVLTSKYR
325
+ </div>
326
+ </div>
327
+ <div class="mt-4">
328
+ <h4 class="font-medium mb-2">Sequence Features</h4>
329
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-2">
330
+ <div class="bg-blue-50 p-3 rounded text-center">
331
+ <p class="text-xs text-blue-600">Length</p>
332
+ <p class="font-bold">142 aa</p>
333
+ </div>
334
+ <div class="bg-green-50 p-3 rounded text-center">
335
+ <p class="text-xs text-green-600">Helices</p>
336
+ <p class="font-bold">7</p>
337
+ </div>
338
+ <div class="bg-purple-50 p-3 rounded text-center">
339
+ <p class="text-xs text-purple-600">Strands</p>
340
+ <p class="font-bold">0</p>
341
+ </div>
342
+ <div class="bg-yellow-50 p-3 rounded text-center">
343
+ <p class="text-xs text-yellow-600">Turns</p>
344
+ <p class="font-bold">12</p>
345
+ </div>
346
+ </div>
347
+ </div>
348
+ </div>
349
+
350
+ <!-- Domains Tab Content -->
351
+ <div id="domains" class="tab-content">
352
+ <div class="relative h-16 bg-gray-100 rounded-lg mb-4">
353
+ <div class="absolute top-1/2 transform -translate-y-1/2 w-full px-4">
354
+ <div class="relative h-8">
355
+ <div class="absolute left-0 bg-blue-500 h-4 rounded-full" style="width: 15%"></div>
356
+ <div class="absolute left-20 bg-green-500 h-4 rounded-full" style="width: 25%"></div>
357
+ <div class="absolute left-60 bg-purple-500 h-4 rounded-full" style="width: 20%"></div>
358
+ </div>
359
+ </div>
360
+ </div>
361
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
362
+ <div class="border-l-4 border-blue-500 pl-3">
363
+ <h5 class="font-medium">Globin</h5>
364
+ <p class="text-sm text-gray-600">7-138</p>
365
+ <p class="text-xs text-gray-500">PF00042</p>
366
+ </div>
367
+ <div class="border-l-4 border-green-500 pl-3">
368
+ <h5 class="font-medium">Heme binding</h5>
369
+ <p class="text-sm text-gray-600">58-87</p>
370
+ <p class="text-xs text-gray-500">PS01033</p>
371
+ </div>
372
+ <div class="border-l-4 border-purple-500 pl-3">
373
+ <h5 class="font-medium">Oxygen binding</h5>
374
+ <p class="text-sm text-gray-600">92-99</p>
375
+ <p class="text-xs text-gray-500">PS01034</p>
376
+ </div>
377
+ </div>
378
+ </div>
379
+
380
+ <!-- Interactions Tab Content -->
381
+ <div id="interactions" class="tab-content">
382
+ <div class="mb-4">
383
+ <h4 class="font-medium mb-2">Protein-Protein Interactions</h4>
384
+ <div class="bg-gray-50 p-4 rounded-lg">
385
+ <div class="flex items-center mb-2">
386
+ <div class="w-8 h-8 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center mr-3">
387
+ <i class="fas fa-link"></i>
388
+ </div>
389
+ <div>
390
+ <p class="font-medium">HBB_HUMAN</p>
391
+ <p class="text-xs text-gray-600">Hemoglobin subunit beta</p>
392
+ </div>
393
+ </div>
394
+ <div class="flex items-center">
395
+ <div class="w-8 h-8 rounded-full bg-green-100 text-green-600 flex items-center justify-center mr-3">
396
+ <i class="fas fa-link"></i>
397
+ </div>
398
+ <div>
399
+ <p class="font-medium">Heme</p>
400
+ <p class="text-xs text-gray-600">Prosthetic group</p>
401
+ </div>
402
+ </div>
403
+ </div>
404
+ </div>
405
+ <div>
406
+ <h4 class="font-medium mb-2">Binding Sites</h4>
407
+ <div class="grid grid-cols-2 gap-2">
408
+ <div class="bg-blue-50 p-2 rounded text-center">
409
+ <p class="text-xs text-blue-600">Heme binding site</p>
410
+ <p class="font-bold">His87</p>
411
+ </div>
412
+ <div class="bg-green-50 p-2 rounded text-center">
413
+ <p class="text-xs text-green-600">Oxygen binding site</p>
414
+ <p class="font-bold">His58</p>
415
+ </div>
416
+ </div>
417
+ </div>
418
+ </div>
419
+ </div>
420
+ </div>
421
+
422
+ <!-- Comparison Section -->
423
+ <div class="bg-white rounded-lg shadow p-4 mb-6">
424
+ <div class="flex justify-between items-center mb-4">
425
+ <h3 class="font-semibold">Protein Comparison</h3>
426
+ <button class="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm hover:bg-blue-700">
427
+ <i class="fas fa-plus mr-2"></i> Add Protein
428
+ </button>
429
+ </div>
430
+ <div class="overflow-x-auto">
431
+ <table class="min-w-full divide-y divide-gray-200">
432
+ <thead class="bg-gray-50">
433
+ <tr>
434
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Property</th>
435
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Hemoglobin (1HHO)</th>
436
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Myoglobin (1MBN)</th>
437
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Insulin (1TRZ)</th>
438
+ </tr>
439
+ </thead>
440
+ <tbody class="bg-white divide-y divide-gray-200">
441
+ <tr>
442
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Molecular Weight</td>
443
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">64.5 kDa</td>
444
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">17.2 kDa</td>
445
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">5.8 kDa</td>
446
+ </tr>
447
+ <tr>
448
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Resolution</td>
449
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2.10 Å</td>
450
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1.80 Å</td>
451
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1.50 Å</td>
452
+ </tr>
453
+ <tr>
454
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Alpha Helix %</td>
455
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">72%</td>
456
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">75%</td>
457
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">60%</td>
458
+ </tr>
459
+ <tr>
460
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Beta Sheet %</td>
461
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">18%</td>
462
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">0%</td>
463
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">30%</td>
464
+ </tr>
465
+ <tr>
466
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Oligomer State</td>
467
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Tetramer</td>
468
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Monomer</td>
469
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Dimer</td>
470
+ </tr>
471
+ </tbody>
472
+ </table>
473
+ </div>
474
+ </div>
475
+
476
+ <!-- References -->
477
+ <div class="bg-white rounded-lg shadow p-4">
478
+ <h3 class="font-semibold mb-3">References & Data Sources</h3>
479
+ <ul class="space-y-2 text-sm text-gray-600">
480
+ <li class="flex items-start">
481
+ <i class="fas fa-circle text-xs mt-1 mr-2 text-blue-500"></i>
482
+ <span>Berman, H.M., et al. (2000) The Protein Data Bank. Nucleic Acids Research, 28: 235-242.</span>
483
+ </li>
484
+ <li class="flex items-start">
485
+ <i class="fas fa-circle text-xs mt-1 mr-2 text-blue-500"></i>
486
+ <span>UniProt Consortium (2021) UniProt: the universal protein knowledgebase in 2021. Nucleic Acids Research, 49: D480-D489.</span>
487
+ </li>
488
+ <li class="flex items-start">
489
+ <i class="fas fa-circle text-xs mt-1 mr-2 text-blue-500"></i>
490
+ <span>Ferreira, A.M., et al. (2015) Hemoglobin stability and structure. Protein Science, 24: 1234-1246.</span>
491
+ </li>
492
+ </ul>
493
+ </div>
494
+ </main>
495
+ </div>
496
+ </div>
497
+
498
+ <script>
499
+ // Initialize 3D protein viewer
500
+ function initProteinViewer() {
501
+ let viewer = $3Dmol.createViewer("protein-viewer", {
502
+ backgroundColor: "0xf8fafc"
503
+ });
504
+
505
+ // Load hemoglobin structure (1HHO)
506
+ jQuery.ajax({
507
+ url: "https://files.rcsb.org/view/1HHO.pdb",
508
+ success: function(data) {
509
+ let v = viewer;
510
+ v.addModel(data, "pdb");
511
+ v.setStyle({cartoon: {}});
512
+ v.zoomTo();
513
+ v.render();
514
+ v.zoom(0.8, 2000);
515
+ },
516
+ error: function(hdr, status, err) {
517
+ console.error("Failed to load PDB file:", err);
518
+ // Fallback to static image or error message
519
+ document.getElementById("protein-viewer").innerHTML = `
520
+ <div class="flex items-center justify-center h-full text-gray-500">
521
+ <div class="text-center">
522
+ <i class="fas fa-exclamation-triangle text-3xl mb-2"></i>
523
+ <p>Failed to load 3D structure</p>
524
+ </div>
525
+ </div>
526
+ `;
527
+ }
528
+ });
529
+ }
530
+
531
+ // Initialize charts
532
+ function initCharts() {
533
+ // Secondary structure chart
534
+ const secondaryCtx = document.getElementById('secondaryChart').getContext('2d');
535
+ const secondaryChart = new Chart(secondaryCtx, {
536
+ type: 'doughnut',
537
+ data: {
538
+ labels: ['Alpha Helix', 'Beta Sheet', 'Coil'],
539
+ datasets: [{
540
+ data: [72, 18, 10],
541
+ backgroundColor: [
542
+ '#3B82F6',
543
+ '#10B981',
544
+ '#8B5CF6'
545
+ ],
546
+ borderWidth: 0
547
+ }]
548
+ },
549
+ options: {
550
+ cutout: '70%',
551
+ plugins: {
552
+ legend: {
553
+ display: false
554
+ }
555
+ }
556
+ }
557
+ });
558
+
559
+ // Amino acid composition chart
560
+ const aminoAcidCtx = document.getElementById('aminoAcidChart').getContext('2d');
561
+ const aminoAcidChart = new Chart(aminoAcidCtx, {
562
+ type: 'bar',
563
+ data: {
564
+ labels: ['Ala', 'Arg', 'Asn', 'Asp', 'Cys', 'Gln', 'Glu', 'Gly', 'His', 'Ile', 'Leu', 'Lys', 'Met', 'Phe', 'Pro', 'Ser', 'Thr', 'Trp', 'Tyr', 'Val'],
565
+ datasets: [{
566
+ label: 'Count',
567
+ data: [15, 3, 3, 6, 1, 2, 6, 7, 9, 0, 18, 11, 1, 8, 5, 5, 7, 1, 3, 13],
568
+ backgroundColor: '#3B82F6',
569
+ borderWidth: 0,
570
+ borderRadius: 4
571
+ }]
572
+ },
573
+ options: {
574
+ responsive: true,
575
+ plugins: {
576
+ legend: {
577
+ display: false
578
+ }
579
+ },
580
+ scales: {
581
+ y: {
582
+ beginAtZero: true,
583
+ grid: {
584
+ display: false
585
+ }
586
+ },
587
+ x: {
588
+ grid: {
589
+ display: false
590
+ }
591
+ }
592
+ }
593
+ }
594
+ });
595
+ }
596
+
597
+ // Tab functionality
598
+ function setupTabs() {
599
+ const tabButtons = document.querySelectorAll('.tab-button');
600
+
601
+ tabButtons.forEach(button => {
602
+ button.addEventListener('click', () => {
603
+ // Remove active class from all buttons and tabs
604
+ tabButtons.forEach(btn => {
605
+ btn.classList.remove('border-blue-500', 'text-blue-600');
606
+ btn.classList.add('border-transparent', 'text-gray-500');
607
+ });
608
+
609
+ // Add active class to clicked button
610
+ button.classList.remove('border-transparent', 'text-gray-500');
611
+ button.classList.add('border-blue-500', 'text-blue-600');
612
+
613
+ // Hide all tab contents
614
+ document.querySelectorAll('.tab-content').forEach(tab => {
615
+ tab.classList.remove('active');
616
+ });
617
+
618
+ // Show selected tab content
619
+ const tabId = button.getAttribute('data-tab');
620
+ document.getElementById(tabId).classList.add('active');
621
+ });
622
+ });
623
+ }
624
+
625
+ // Mobile menu toggle
626
+ function setupMobileMenu() {
627
+ const mobileMenuButton = document.querySelector('.md\\:hidden');
628
+ const sidebar = document.querySelector('.sidebar');
629
+
630
+ if (mobileMenuButton && sidebar) {
631
+ mobileMenuButton.addEventListener('click', () => {
632
+ sidebar.classList.toggle('hidden');
633
+ });
634
+ }
635
+ }
636
+
637
+ // Initialize everything when DOM is loaded
638
+ document.addEventListener('DOMContentLoaded', function() {
639
+ initProteinViewer();
640
+ initCharts();
641
+ setupTabs();
642
+ setupMobileMenu();
643
+ });
644
+ </script>
645
+ <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=xmarva/protein-vision" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
646
+ </html>