-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
304 lines (286 loc) · 20.5 KB
/
Copy pathindex.html
File metadata and controls
304 lines (286 loc) · 20.5 KB
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
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Visual Physiology Database</title>
<meta name="description" content="Decoding the Genotype-Phenotype Map of Vision through open-source databases and machine learning.">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/lucide@latest"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: {
50: '#f0f9ff',
100: '#e0f2fe',
500: '#0ea5e9',
600: '#0284c7',
900: '#0c4a6e',
},
dark: '#0f172a'
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
mono: ['Fira Code', 'monospace'],
}
}
}
}
</script>
</head>
<body class="bg-slate-50 text-slate-900 font-sans antialiased selection:bg-primary-500 selection:text-white">
<!-- Navigation -->
<nav class="sticky top-0 z-50 bg-white/80 backdrop-blur-md border-b border-slate-200">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16 items-center">
<div class="flex items-center gap-2">
<i data-lucide="dna" class="text-primary-600 w-8 h-8"></i>
<span class="font-bold text-xl tracking-tight text-slate-900">Visual Physiology DB</span>
</div>
<div class="hidden lg:flex gap-6">
<a href="#projects" class="text-sm font-medium text-slate-600 hover:text-primary-600 transition-colors">Projects</a>
<a href="#mission" class="text-sm font-medium text-slate-600 hover:text-primary-600 transition-colors">Mission</a>
<a href="#publications" class="text-sm font-medium text-slate-600 hover:text-primary-600 transition-colors">Publications</a>
<a href="vpod.html" class="text-sm font-medium text-primary-600 hover:text-primary-800 transition-colors">VPOD</a>
<a href="https://visphys.eemb.ucsb.edu/" target="_blank" class="text-sm font-medium text-primary-600 hover:text-primary-800 transition-colors">Explorer</a>
<a href="optics.html" class="text-sm font-medium text-primary-600 hover:text-primary-800 transition-colors">OPTICS</a>
</div>
<div class="flex gap-4">
<a href="https://github.com/VisualPhysiologyDB" target="_blank" class="text-slate-500 hover:text-slate-900 transition-colors">
<i data-lucide="github" class="w-6 h-6"></i>
</a>
</div>
</div>
</div>
</nav>
<!-- Hero Section -->
<header class="relative overflow-hidden bg-dark text-white pt-24 pb-32">
<div class="absolute inset-0 overflow-hidden pointer-events-none">
<div class="absolute -top-1/2 -right-1/2 w-full h-full bg-gradient-to-b from-primary-900/40 to-transparent rounded-full blur-3xl transform rotate-12 opacity-60"></div>
<div class="absolute -bottom-1/2 -left-1/2 w-full h-full bg-gradient-to-t from-primary-600/20 to-transparent rounded-full blur-3xl transform -rotate-12 opacity-60"></div>
</div>
<div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
Decoding the Genotype-Phenotype<br>Map of Vision
</h1>
<p class="mt-4 max-w-2xl mx-auto text-xl text-slate-300 mb-10">
An open-source ecosystem curating visual physiology data and applying machine learning approaches to predict opsin phenotypes directly from amino-acid sequences.
</p>
<div class="flex flex-col sm:flex-row justify-center gap-4">
<a href="#projects" class="inline-flex items-center justify-center px-8 py-3.5 border border-transparent text-base font-medium rounded-lg text-white bg-primary-600 hover:bg-primary-500 shadow-lg shadow-primary-600/30 transition-all hover:-translate-y-0.5">
Explore Our Tools
</a>
</div>
</div>
</header>
<!-- Projects Section -->
<section id="projects" class="py-24 bg-slate-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold text-slate-900 tracking-tight">Tools & Data Resources</h2>
<p class="mt-4 text-lg text-slate-600 max-w-2xl mx-auto">Open-source datasets, interfaces, and computational tools developed by the Visual Physiology DB organization.</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
<!-- VPOD Card -->
<a href="vpod.html" class="block group">
<div class="bg-white rounded-2xl p-8 shadow-sm border border-slate-200 hover:shadow-xl hover:border-primary-200 transition-all h-full relative overflow-hidden">
<div class="absolute top-0 right-0 w-32 h-32 bg-primary-50 rounded-bl-full -z-10 group-hover:scale-110 transition-transform"></div>
<div class="w-14 h-14 bg-primary-100 text-primary-600 rounded-xl flex items-center justify-center mb-6">
<i data-lucide="database" class="w-7 h-7"></i>
</div>
<h3 class="text-2xl font-bold text-slate-900 mb-3 flex items-center gap-2">
VPOD <span class="text-xs font-medium bg-slate-100 text-slate-600 px-2 py-1 rounded-full">v1.3</span>
</h3>
<p class="text-slate-600 mb-6 leading-relaxed">
The <strong>Visual Physiology Opsin Database</strong> is a newly compiled database containing 1,714 unique opsin genotypes and corresponding λ<sub>max</sub> phenotypes collected across all animals from 120+ publications.
</p>
<div class="flex items-center text-primary-600 font-medium group-hover:translate-x-1 transition-transform">
View Database Details <i data-lucide="arrow-right" class="w-4 h-4 ml-1"></i>
</div>
</div>
</a>
<!-- VPOD Explorer Card -->
<a href="https://visphys.eemb.ucsb.edu/" target="_blank" class="block group">
<div class="bg-white rounded-2xl p-8 shadow-sm border border-slate-200 hover:shadow-xl hover:border-primary-200 transition-all h-full relative overflow-hidden">
<div class="absolute top-0 right-0 w-32 h-32 bg-primary-50 rounded-bl-full -z-10 group-hover:scale-110 transition-transform"></div>
<div class="w-14 h-14 bg-primary-100 text-primary-600 rounded-xl flex items-center justify-center mb-6">
<i data-lucide="search" class="w-7 h-7"></i>
</div>
<h3 class="text-2xl font-bold text-slate-900 mb-3 flex items-center gap-2">
VPOD Explorer <span class="text-xs font-medium bg-emerald-50 text-emerald-700 px-2 py-1 rounded-full">Interactive</span>
</h3>
<p class="text-slate-600 mb-6 leading-relaxed">
An interactive web version of VPOD for searching records, applying filters, exporting queried data, and suggesting new entries for curator review.
</p>
<p class="text-sm text-slate-500 mb-6 leading-relaxed">
Use the GitHub database for versioned files, notebooks, and reproducible local workflows; use the Explorer when you want to query and download data directly in the browser.
</p>
<div class="flex items-center text-primary-600 font-medium group-hover:translate-x-1 transition-transform">
Open Explorer <i data-lucide="external-link" class="w-4 h-4 ml-1"></i>
</div>
</div>
</a>
<!-- OPTICS Card -->
<a href="optics.html" class="block group">
<div class="bg-white rounded-2xl p-8 shadow-sm border border-slate-200 hover:shadow-xl hover:border-primary-200 transition-all h-full relative overflow-hidden">
<div class="absolute top-0 right-0 w-32 h-32 bg-primary-50 rounded-bl-full -z-10 group-hover:scale-110 transition-transform"></div>
<div class="w-14 h-14 bg-primary-100 text-primary-600 rounded-xl flex items-center justify-center mb-6">
<i data-lucide="eye" class="w-7 h-7"></i>
</div>
<h3 class="text-2xl font-bold text-slate-900 mb-3 flex items-center gap-2">
OPTICS <span class="text-xs font-medium bg-slate-100 text-slate-600 px-2 py-1 rounded-full">v1.3</span>
</h3>
<p class="text-slate-600 mb-6 leading-relaxed">
The <strong>Opsin Phenotype Tool for Inference of Color Sensitivity</strong> uses machine learning models trained on VPOD to predict λ<sub>max</sub> from unaligned sequences and map feature importance to 3D structures.
</p>
<div class="flex items-center text-primary-600 font-medium group-hover:translate-x-1 transition-transform">
View Tool <i data-lucide="arrow-right" class="w-4 h-4 ml-1"></i>
</div>
</div>
</a>
</div>
</div>
</section>
<!-- Mission Section -->
<section id="mission" class="py-24 bg-white border-t border-slate-100">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold text-slate-900 tracking-tight">Mission & Roadmap</h2>
<p class="mt-4 text-lg text-slate-600 max-w-3xl mx-auto">
VisualPhysiologyDB is building an open-source ecosystem for connecting light-sensitive genes, physiological phenotypes, ecological context, and predictive models of light sensitivity.
</p>
</div>
<div class="grid lg:grid-cols-[1.2fr_0.8fr] gap-8 mb-10">
<div class="bg-slate-50 rounded-2xl p-8 border border-slate-200">
<div class="flex items-center gap-3 mb-5">
<div class="w-12 h-12 bg-primary-100 text-primary-600 rounded-xl flex items-center justify-center">
<i data-lucide="compass" class="w-6 h-6"></i>
</div>
<h3 class="text-2xl font-bold text-slate-900">Long-term Vision</h3>
</div>
<div class="space-y-4 text-slate-600 leading-relaxed">
<p>
Our goal is to make visual and light-interaction phenotypes accessible, computable, and reusable across scales: from individual amino-acid substitutions to ecological communities and environmental sequence datasets.
</p>
<p>
The project began with VPOD, which organizes opsin genotype-phenotype data for spectral sensitivity, and OPTICS, which uses VPOD-trained models to predict opsin spectral sensitivity from sequence. Future development will broaden this ecosystem into a more general visual physiology resource for sensory ecology, molecular evolution, biodiversity science, and AI-enabled genotype-phenotype prediction.
</p>
</div>
</div>
<div class="bg-dark rounded-2xl p-8 text-white shadow-xl">
<div class="flex items-center gap-3 mb-6">
<div class="w-12 h-12 bg-white/10 text-primary-500 rounded-xl flex items-center justify-center">
<i data-lucide="sparkles" class="w-6 h-6"></i>
</div>
<h3 class="text-2xl font-bold">Guiding Focus</h3>
</div>
<ul class="space-y-5 text-slate-300">
<li class="flex items-start gap-3">
<i data-lucide="unlock" class="w-5 h-5 text-primary-500 mt-0.5 flex-shrink-0"></i>
<span>Open licensing, transparent provenance, and reusable datasets.</span>
</li>
<li class="flex items-start gap-3">
<i data-lucide="workflow" class="w-5 h-5 text-primary-500 mt-0.5 flex-shrink-0"></i>
<span>Reproducible workflows that connect gene discovery, phenotype prediction, and ecological analysis.</span>
</li>
<li class="flex items-start gap-3">
<i data-lucide="users" class="w-5 h-5 text-primary-500 mt-0.5 flex-shrink-0"></i>
<span>Contributor pathways for data submission, issue reporting, feature requests, and community-developed workflows.</span>
</li>
</ul>
</div>
</div>
<div class="grid md:grid-cols-2 gap-8">
<div class="bg-slate-50 rounded-2xl p-8 border border-slate-200">
<h3 class="text-xl font-bold text-slate-900 mb-6 flex items-center gap-2">
<i data-lucide="list-checks" class="w-5 h-5 text-primary-600"></i> Near-term Priorities
</h3>
<ul class="space-y-4 text-slate-600">
<li class="flex gap-3"><span class="text-primary-600 font-bold">1.</span><span>Improve VPOD data structure, documentation, validation, and versioning.</span></li>
<li class="flex gap-3"><span class="text-primary-600 font-bold">2.</span><span>Improve OPTICS usability, batch prediction, uncertainty reporting, and quality control.</span></li>
<li class="flex gap-3"><span class="text-primary-600 font-bold">3.</span><span>Develop OPTICS-Community workflows for predicting light-sensitivity landscapes from species lists, community matrices, and environmental sequence datasets.</span></li>
<li class="flex gap-3"><span class="text-primary-600 font-bold">4.</span><span>Provide benchmark workflows, tutorials, example datasets, and standardized outputs for reproducible research.</span></li>
</ul>
</div>
<div class="bg-slate-50 rounded-2xl p-8 border border-slate-200">
<h3 class="text-xl font-bold text-slate-900 mb-6 flex items-center gap-2">
<i data-lucide="telescope" class="w-5 h-5 text-primary-600"></i> Longer-term Goals
</h3>
<ul class="space-y-4 text-slate-600">
<li class="flex gap-3"><span class="text-primary-600 font-bold">1.</span><span>Expand beyond λ<sub>max</sub> to additional opsin and light-interaction phenotypes, including kinetics, chromophore effects, expression context, and assay metadata.</span></li>
<li class="flex gap-3"><span class="text-primary-600 font-bold">2.</span><span>Incorporate ecological and environmental metadata such as habitat, depth, light environment, diel activity, and community composition.</span></li>
<li class="flex gap-3"><span class="text-primary-600 font-bold">3.</span><span>Support community-level and ecosystem-level summaries of predicted light sensitivity.</span></li>
<li class="flex gap-3"><span class="text-primary-600 font-bold">4.</span><span>Improve interoperability with biodiversity databases, sequence repositories, workflow managers, Galaxy, and downstream modeling tools.</span></li>
</ul>
</div>
</div>
</div>
</section>
<!-- Publications Section -->
<section id="publications" class="py-24 bg-white border-t border-slate-100">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold text-slate-900 tracking-tight">Recent Publications</h2>
</div>
<div class="space-y-6">
<div class="p-6 bg-slate-50 rounded-xl border border-slate-200 hover:border-primary-300 transition-colors">
<div class="flex items-start gap-4">
<div class="mt-1 bg-white p-2 rounded-lg border border-slate-200 shadow-sm text-primary-600">
<i data-lucide="book-open" class="w-5 h-5"></i>
</div>
<div>
<h4 class="font-bold text-slate-900 mb-2 text-lg">Accessible and Robust Machine Learning Approaches to Improve the Opsin Genotype-Phenotype Map</h4>
<p class="text-slate-600 font-serif leading-relaxed text-sm mb-3">
Seth A. Frazer & Todd H. Oakley. <em>Molecular Biology & Evolution</em>, 2026.06.23
</p>
<a href="https://doi.org/10.1093/molbev/msag138" target="_blank" class="inline-flex items-center text-sm font-medium text-primary-600 hover:text-primary-800">
Read the Publication! <i data-lucide="external-link" class="w-3 h-3 ml-1"></i>
</a>
</div>
</div>
</div>
<div class="p-6 bg-slate-50 rounded-xl border border-slate-200 hover:border-primary-300 transition-colors">
<div class="flex items-start gap-4">
<div class="mt-1 bg-white p-2 rounded-lg border border-slate-200 shadow-sm text-primary-600">
<i data-lucide="book-open" class="w-5 h-5"></i>
</div>
<div>
<h4 class="font-bold text-slate-900 mb-2 text-lg">Discovering genotype-phenotype relationships with machine learning and the Visual Physiology Opsin Database (VPOD)</h4>
<p class="text-slate-600 font-serif leading-relaxed text-sm mb-3">
Seth A. Frazer, Mahdi Baghbanzadeh, Ali Rahnavard, Keith A. Crandall, & Todd H Oakley. <em>GigaScience</em>, 2024.09.01.
</p>
<a href="https://doi.org/10.1093/gigascience/giae073" target="_blank" class="inline-flex items-center text-sm font-medium text-primary-600 hover:text-primary-800">
Read the Publication! <i data-lucide="external-link" class="w-3 h-3 ml-1"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-dark py-12 border-t border-slate-800">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<div class="flex items-center justify-center gap-2 mb-6">
<i data-lucide="dna" class="text-primary-500 w-6 h-6"></i>
<span class="font-bold text-xl tracking-tight text-white">Visual Physiology DB</span>
</div>
<p class="text-slate-400 text-sm mb-6 max-w-md mx-auto">
Maintained by:<br>Seth A. Frazer (seth.frazer@embl.de) & Todd H. Oakley (oakley@ucsb.edu) <br>
EMBL Heidelberg & University of California Santa Barbara
</p>
<div class="flex justify-center gap-6">
<a href="https://github.com/VisualPhysiologyDB" class="text-slate-400 hover:text-white transition-colors">
<span class="sr-only">GitHub</span>
<i data-lucide="github" class="w-6 h-6"></i>
</a>
</div>
</div>
</footer>
<script>
lucide.createIcons();
</script>
</body>
</html>