| <!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>Interactive Guide to Protein Language Models</title> |
| |
| |
| |
| |
| |
| |
| |
| |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
| <link rel="preconnect" href="https://fonts.googleapis.com"> |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> |
| <style> |
| body { |
| font-family: 'Inter', sans-serif; |
| background-color: #f8fafc; |
| color: #334155; |
| } |
| .chart-container { |
| position: relative; |
| width: 100%; |
| max-width: 900px; |
| margin-left: auto; |
| margin-right: auto; |
| height: 60vh; |
| max-height: 550px; |
| } |
| .nav-link.active { |
| color: #0ea5e9; |
| font-weight: 600; |
| } |
| .flow-line { |
| position: relative; |
| } |
| .flow-line::after { |
| content: ''; |
| position: absolute; |
| top: 50%; |
| right: -2rem; |
| width: 2rem; |
| height: 2px; |
| background-color: #cbd5e1; |
| transform: translateY(-50%); |
| } |
| .flow-line:last-child::after { |
| display: none; |
| } |
| @media (max-width: 768px) { |
| .flow-line::after { |
| top: 100%; |
| left: 50%; |
| right: auto; |
| width: 2px; |
| height: 2rem; |
| transform: translateX(-50%); |
| } |
| } |
| .recommended-point { |
| animation: pulse 1.5s infinite; |
| } |
| @keyframes pulse { |
| 0%, 100% { transform: scale(1.5); opacity: 1; } |
| 50% { transform: scale(2.5); opacity: 0.7; } |
| } |
| </style> |
| </head> |
| <body class="antialiased"> |
|
|
| |
| <header id="header" class="bg-white/80 backdrop-blur-lg sticky top-0 z-40 w-full border-b border-slate-200"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="flex items-center justify-between h-16"> |
| <div class="flex items-center"> |
| <span class="font-bold text-xl text-slate-800">pLM Navigator</span> |
| </div> |
| <nav class="hidden md:flex items-center space-x-8"> |
| <a href="#hero" class="nav-link text-slate-600 hover:text-sky-500 transition-colors duration-200">Home</a> |
| <a href="#architectures" class="nav-link text-slate-600 hover:text-sky-500 transition-colors duration-200">Architectures</a> |
| <a href="#strategies" class="nav-link text-slate-600 hover:text-sky-500 transition-colors duration-200">Strategies</a> |
| <a href="#cloud" class="nav-link text-slate-600 hover:text-sky-500 transition-colors duration-200">Cloud</a> |
| <a href="#guide" class="nav-link text-slate-600 hover:text-sky-500 transition-colors duration-200">Decision Guide</a> |
| </nav> |
| </div> |
| </div> |
| </header> |
|
|
| <main> |
| |
| <section id="hero" class="py-20 md:py-28 bg-white"> |
| <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> |
| <h1 class="text-4xl md:text-6xl font-bold tracking-tight text-slate-900">A New Era of Protein Engineering</h1> |
| <p class="mt-6 text-lg md:text-xl text-slate-600 max-w-3xl mx-auto">This interactive guide deconstructs the complex world of Protein Language Models (pLMs). Move beyond static reports and explore the architectures, training strategies, and cloud infrastructure defining the future of computational biology.</p> |
| <div class="mt-10"> |
| <a href="#guide" class="bg-sky-500 hover:bg-sky-600 text-white font-bold py-3 px-8 rounded-full transition-transform duration-200 inline-block text-lg">Find Your Strategy</a> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="architectures" class="py-20 md:py-24"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="text-center"> |
| <h2 class="text-3xl md:text-4xl font-bold text-slate-900">Foundational Architectures</h2> |
| <p class="mt-4 text-lg text-slate-600 max-w-3xl mx-auto">From sequence processors to 3D geometric reasoners, the choice of architecture defines a model's capabilities. Explore the core blueprints for protein representation.</p> |
| </div> |
| <div id="architecture-cards" class="mt-16 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| |
| </div> |
| </div> |
| </section> |
| |
| |
| <section id="strategies" class="py-20 md:py-24 bg-white"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="text-center"> |
| <h2 class="text-3xl md:text-4xl font-bold text-slate-900">The Strategy Landscape</h2> |
| <p class="mt-4 text-lg text-slate-600 max-w-3xl mx-auto">Choosing a training or fine-tuning strategy involves a trade-off between resource cost and implementation complexity. Use the interactive chart below to navigate your options. Click any point for full details.</p> |
| </div> |
|
|
| <div class="mt-12 flex flex-col md:flex-row justify-center items-center gap-6 p-4 bg-slate-50 rounded-lg"> |
| <span class="font-semibold">Filter by Type:</span> |
| <div class="flex items-center space-x-4"> |
| <label class="flex items-center space-x-2 cursor-pointer"> |
| <input type="checkbox" id="filter-pretraining" class="strategy-filter h-5 w-5 rounded text-sky-500 focus:ring-sky-500" checked> |
| <span>Pre-training</span> |
| </label> |
| <label class="flex items-center space-x-2 cursor-pointer"> |
| <input type="checkbox" id="filter-finetuning" class="strategy-filter h-5 w-5 rounded text-sky-500 focus:ring-sky-500" checked> |
| <span>Fine-tuning</span> |
| </label> |
| </div> |
| </div> |
|
|
| <div class="mt-8 chart-container"> |
| <canvas id="strategyChart"></canvas> |
| </div> |
| <div class="mt-6 text-center text-sm text-slate-500"> |
| <p>X-Axis: Resource Complexity (Compute/Memory) | Y-Axis: Integration Complexity | Point Size: Data Requirement</p> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="cloud" class="py-20 md:py-24"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="text-center"> |
| <h2 class="text-3xl md:text-4xl font-bold text-slate-900">Blueprint for Cloud Implementation</h2> |
| <p class="mt-4 text-lg text-slate-600 max-w-3xl mx-auto">A robust cloud architecture is key to scalable pLM development. This flowchart shows a typical pipeline on AWS. Click each component to learn more about its role.</p> |
| </div> |
| <div id="aws-flowchart" class="mt-16 flex flex-col md:flex-row justify-center items-center gap-x-8 gap-y-12 flex-wrap"> |
| |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="guide" class="py-20 md:py-24 bg-white"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="text-center"> |
| <h2 class="text-3xl md:text-4xl font-bold text-slate-900">Interactive Decision Guide</h2> |
| <p class="mt-4 text-lg text-slate-600 max-w-3xl mx-auto">Answer three questions about your project to receive a personalized strategy recommendation, highlighted on the chart in the <a href="#strategies" class="text-sky-500 hover:underline">Strategies</a> section.</p> |
| </div> |
|
|
| <div class="mt-12 max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8"> |
| <div> |
| <label for="goal" class="block text-sm font-medium text-slate-700">1. What is your primary goal?</label> |
| <select id="goal" name="goal" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-slate-300 focus:outline-none focus:ring-sky-500 focus:border-sky-500 sm:text-sm rounded-md"> |
| <option value="design">De Novo Design</option> |
| <option value="optimize">Optimize Existing Protein</option> |
| <option value="annotate">Broad Annotation/Features</option> |
| </select> |
| </div> |
| <div> |
| <label for="data" class="block text-sm font-medium text-slate-700">2. What data do you have?</label> |
| <select id="data" name="data" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-slate-300 focus:outline-none focus:ring-sky-500 focus:border-sky-500 sm:text-sm rounded-md"> |
| <option value="sequence">Sequence Only</option> |
| <option value="structure">Sequence + Structures</option> |
| </select> |
| </div> |
| <div> |
| <label for="resources" class="block text-sm font-medium text-slate-700">3. What are your resources?</label> |
| <select id="resources" name="resources" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-slate-300 focus:outline-none focus:ring-sky-500 focus:border-sky-500 sm:text-sm rounded-md"> |
| <option value="low">Limited (Single GPU)</option> |
| <option value="medium">Moderate (GPU Cluster)</option> |
| <option value="high">Extensive (Cloud Budget)</option> |
| </select> |
| </div> |
| </div> |
| <div id="recommendation-box" class="mt-12 max-w-4xl mx-auto bg-sky-50 border-l-4 border-sky-400 p-6 rounded-r-lg hidden"> |
| |
| </div> |
| </div> |
| </section> |
| </main> |
|
|
| |
| <div id="detail-modal" class="fixed inset-0 bg-black bg-opacity-60 z-50 hidden flex items-center justify-center p-4"> |
| <div class="bg-white rounded-lg shadow-2xl w-full max-w-3xl max-h-[90vh] overflow-y-auto"> |
| <div class="sticky top-0 bg-white border-b border-slate-200 p-4 flex justify-between items-center"> |
| <h3 id="modal-title" class="text-xl font-bold text-slate-800"></h3> |
| <button id="close-modal" class="text-slate-500 hover:text-slate-800">×</button> |
| </div> |
| <div id="modal-content" class="p-6"></div> |
| </div> |
| </div> |
|
|
|
|
| <script> |
| document.addEventListener('DOMContentLoaded', () => { |
| |
| |
| const architectureData = [ |
| { |
| name: 'Encoder-Only (BERT-like)', |
| icon: '🧠', |
| description: 'Builds deep contextual understanding of an entire sequence. Excellent for representation and prediction tasks.', |
| examples: 'ESM-2, ProtBERT' |
| }, |
| { |
| name: 'Decoder-Only (GPT-like)', |
| icon: '✍️', |
| description: 'Generates new sequences autoregressively. Ideal for de novo protein design.', |
| examples: 'ProGen, ProGen2' |
| }, |
| { |
| name: 'Encoder-Decoder (T5-like)', |
| icon: '🔄', |
| description: 'Translates between data types (e.g., sequence-to-structure). Highly flexible for diverse tasks.', |
| examples: 'ProtT5, ProstT5' |
| }, |
| { |
| name: 'Graph Neural Networks (GNNs)', |
| icon: '🕸️', |
| description: 'Operates on protein graphs (residues as nodes). Learns from 3D spatial neighborhoods.', |
| examples: 'MIF-ST, GraphQA' |
| }, |
| { |
| name: 'E(3) Equivariant Networks (ENNs)', |
| icon: '✨', |
| description: 'A physically-principled GNN that respects 3D symmetries (rotation/translation). Robust for geometric tasks.', |
| examples: 'EquiPPIS, TransFun' |
| }, |
| { |
| name: 'Generative Diffusion Models', |
| icon: '🌀', |
| description: 'Learns to reverse a noising process to generate high-quality sequences and structures simultaneously.', |
| examples: 'ProteinGenerator, DPLM' |
| } |
| ]; |
| |
| const awsData = [ |
| { name: 'Data Sources', description: 'Primary sources include public databases like UniProt for sequences and the Protein Data Bank (PDB) or AlphaFoldDB for structures.', icon: '📚'}, |
| { name: 'Storage & Management', description: 'AWS offers robust storage solutions. Amazon S3 serves as a scalable data lake, while Amazon FSx for Lustre provides high-performance access for massive datasets. AWS HealthOmics is a purpose-built service for omics data.', icon: '💾'}, |
| { name: 'Training & Orchestration', description: 'Amazon SageMaker is the central platform, providing SageMaker Studio for development, Training Jobs for scalable model training, and Pipelines for workflow orchestration. Compute can be scaled using EC2 GPU (P4/G5) or AWS Trainium instances.', icon: '⚙️'}, |
| { name: 'Deployment & Inference', description: 'Trained models are deployed using SageMaker Real-Time Endpoints, which offer managed, scalable, and secure hosting for on-demand predictions with auto-scaling capabilities.', icon: '🚀'} |
| ]; |
| |
| const strategyData = [ |
| { |
| id: 'mlm', |
| type: 'pretraining', |
| name: 'Sequence-only MLM', |
| details: 'Models like ESM-2 are pre-trained by masking parts of a protein sequence and learning to predict the hidden amino acids. This teaches the model evolutionary patterns from sequence data alone.', |
| x: 3, y: 2, r: 3, |
| aws: 'Pre-training: EC2 Trn1/P4d instances with SageMaker Training Jobs. Data: S3 with optimized access patterns.' |
| }, |
| { |
| id: 'contrastive', |
| type: 'pretraining', |
| name: 'Sequence + Structure Contrastive', |
| details: 'Aligns representations from a sequence model (pLM) and a structure model (pGNN). Teaches the model that a residue\'s sequence context should correspond to its structural context.', |
| x: 4, y: 4, r: 4, |
| aws: 'Data: FSx for Lustre for AlphaFoldDB access. Training: SageMaker Training Job on multi-GPU instances (e.g., p4d.24xlarge).' |
| }, |
| { |
| id: 'token_translation', |
| type: 'pretraining', |
| name: 'Structure Token Translation', |
| details: 'An encoder-decoder model (like ProstT5) learns to "translate" between the amino acid sequence and a discretized 1D representation of the structure (3Di tokens).', |
| x: 4, y: 4, r: 4, |
| aws: 'Data Prep: AWS Batch for running Foldseek at scale. Training: SageMaker Training Jobs. Data: S3 for storing FASTA and 3Di pairs.' |
| }, |
| { |
| id: 'diffusion', |
| type: 'pretraining', |
| name: 'Joint Sequence-Structure Diffusion', |
| details: 'The most advanced generative approach. A diffusion model learns to denoise corrupted sequence/structure pairs, enabling joint co-design of both from scratch.', |
| x: 5, y: 5, r: 3, |
| aws: 'Training: Multi-node training on EC2 P4d/H100 instances. Orchestration: SageMaker Pipelines for multi-step generation/evaluation.' |
| }, |
| { |
| id: 'full_ft', |
| type: 'finetuning', |
| name: 'Full Model Fine-Tuning', |
| details: 'The traditional approach where all or most weights of a pre-trained model are updated on a new, labeled dataset for a specific task (e.g., classification).', |
| x: 3, y: 1, r: 1, |
| aws: 'SageMaker Training Jobs with pre-trained models from Hugging Face. Use ml.g4dn or ml.g5 instances.' |
| }, |
| { |
| id: 'peft', |
| type: 'finetuning', |
| name: 'Parameter-Efficient Fine-Tuning (PEFT)', |
| details: 'A resource-friendly alternative (e.g., using LoRA). Freezes the main model and only trains a small number of "adapter" parameters. Achieves comparable performance with much less VRAM.', |
| x: 1, y: 1, r: 1, |
| aws: 'SageMaker Training Jobs. Can run on smaller GPUs (e.g., ml.g4dn.xlarge) due to lower memory needs.' |
| }, |
| { |
| id: 'inverse_folding', |
| type: 'finetuning', |
| name: 'Inverse Folding', |
| details: 'Given a protein\'s 3D backbone, the model is fine-tuned to predict the most likely amino acid sequence. Central to protein design.', |
| x: 2, y: 3, r: 2, |
| aws: 'Data: FSx for Lustre for structural datasets. Training: SageMaker on GPU instances.' |
| }, |
| { |
| id: 'conditional_gen', |
| type: 'finetuning', |
| name: 'Conditional Generation', |
| details: 'A generative model is fine-tuned to produce sequences that satisfy a certain condition, specified by a "control tag" (e.g., a functional annotation).', |
| x: 4, y: 2, r: 2, |
| aws: 'SageMaker for fine-tuning. Inference endpoints can be used to generate sequences based on input prompts/tags.' |
| } |
| ]; |
| |
| |
| const architectureCardsContainer = document.getElementById('architecture-cards'); |
| const awsFlowchartContainer = document.getElementById('aws-flowchart'); |
| const strategyChartCanvas = document.getElementById('strategyChart'); |
| const modal = document.getElementById('detail-modal'); |
| const modalTitle = document.getElementById('modal-title'); |
| const modalContent = document.getElementById('modal-content'); |
| const closeModalBtn = document.getElementById('close-modal'); |
| const filters = document.querySelectorAll('.strategy-filter'); |
| const guideSelectors = [document.getElementById('goal'), document.getElementById('data'), document.getElementById('resources')]; |
| const recommendationBox = document.getElementById('recommendation-box'); |
| const navLinks = document.querySelectorAll('.nav-link'); |
| const header = document.getElementById('header'); |
| |
| |
| let chartInstance = null; |
| let currentRecommendation = null; |
| |
| |
| function init() { |
| populateArchitectures(); |
| populateAWSFlowchart(); |
| renderStrategyChart(); |
| setupEventListeners(); |
| } |
| |
| |
| function populateArchitectures() { |
| architectureData.forEach(arch => { |
| const card = document.createElement('div'); |
| card.className = 'bg-white p-6 rounded-lg shadow-md border border-slate-200 hover:shadow-xl hover:-translate-y-1 transition-all duration-300 cursor-pointer'; |
| card.innerHTML = ` |
| <div class="flex items-center space-x-4"> |
| <span class="text-4xl">${arch.icon}</span> |
| <h3 class="text-xl font-bold text-slate-800">${arch.name}</h3> |
| </div> |
| <p class="mt-4 text-slate-600">${arch.description}</p> |
| <p class="mt-3 text-sm text-slate-500"><strong>Examples:</strong> ${arch.examples}</p> |
| `; |
| card.onclick = () => showModal(arch.name, `<p>${arch.description}</p><p class="mt-4"><strong>Common Examples:</strong> ${arch.examples}</p>`); |
| architectureCardsContainer.appendChild(card); |
| }); |
| } |
| |
| function populateAWSFlowchart() { |
| awsData.forEach((item, index) => { |
| const element = document.createElement('div'); |
| element.className = 'flex items-center'; |
| element.innerHTML = ` |
| <div class="flow-line bg-white p-4 rounded-lg shadow-md border border-slate-200 hover:shadow-lg hover:border-sky-300 transition-all duration-300 cursor-pointer text-center w-48"> |
| <span class="text-3xl">${item.icon}</span> |
| <h4 class="mt-2 font-semibold text-slate-700">${item.name}</h4> |
| </div> |
| `; |
| element.onclick = () => showModal(`AWS Step: ${item.name}`, `<p>${item.description}</p>`); |
| awsFlowchartContainer.appendChild(element); |
| }); |
| } |
| |
| |
| function getFilteredData() { |
| const showPretraining = document.getElementById('filter-pretraining').checked; |
| const showFinetuning = document.getElementById('filter-finetuning').checked; |
| return strategyData.filter(d => |
| (showPretraining && d.type === 'pretraining') || (showFinetuning && d.type === 'finetuning') |
| ); |
| } |
| |
| function renderStrategyChart() { |
| const data = getFilteredData(); |
| |
| if (chartInstance) { |
| chartInstance.destroy(); |
| } |
| |
| const ctx = strategyChartCanvas.getContext('2d'); |
| chartInstance = new Chart(ctx, { |
| type: 'bubble', |
| data: { |
| datasets: [{ |
| label: 'pLM Strategies', |
| data: data.map(d => ({ |
| x: d.x, |
| y: d.y, |
| r: d.r * 5 + 5, |
| raw: d |
| })), |
| backgroundColor: data.map(d => { |
| if(d.id === currentRecommendation) return '#f59e0b'; |
| return d.type === 'pretraining' ? 'rgba(14, 165, 233, 0.6)' : 'rgba(24, 109, 14, 0.6)'; |
| }), |
| borderColor: data.map(d => { |
| if(d.id === currentRecommendation) return '#b45309'; |
| return d.type === 'pretraining' ? 'rgb(14, 165, 233)' : 'rgb(24, 109, 14)'; |
| }), |
| borderWidth: 2, |
| }] |
| }, |
| options: { |
| responsive: true, |
| maintainAspectRatio: false, |
| onClick: (e, elements) => { |
| if (elements.length > 0) { |
| const dataPoint = elements[0].element.$context.raw.raw; |
| showStrategyModal(dataPoint); |
| } |
| }, |
| scales: { |
| x: { |
| title: { display: true, text: 'Resource Complexity', font: { size: 14 } }, |
| min: 0, |
| max: 6, |
| ticks: { |
| stepSize: 1, |
| callback: (value) => ['', 'Low', 'Medium', 'High', 'Very High', 'Extreme', ''][value] |
| } |
| }, |
| y: { |
| title: { display: true, text: 'Integration Complexity', font: { size: 14 } }, |
| min: 0, |
| max: 6, |
| ticks: { |
| stepSize: 1, |
| callback: (value) => ['', 'Low', 'Medium', 'High', 'Very High', 'Extreme', ''][value] |
| } |
| } |
| }, |
| plugins: { |
| legend: { |
| display: false |
| }, |
| tooltip: { |
| callbacks: { |
| label: function(context) { |
| return context.raw.raw.name; |
| } |
| } |
| } |
| }, |
| animation: { |
| onComplete: () => { |
| if (currentRecommendation) { |
| highlightPoint(currentRecommendation); |
| } |
| } |
| } |
| } |
| }); |
| } |
| |
| function highlightPoint(strategyId) { |
| if (!chartInstance) return; |
| const dataset = chartInstance.data.datasets[0]; |
| const dataIndex = dataset.data.findIndex(p => p.raw.id === strategyId); |
| |
| if (dataIndex !== -1) { |
| const meta = chartInstance.getDatasetMeta(0); |
| const point = meta.data[dataIndex]; |
| if (point) { |
| point.options.radius = point.options.radius * 1.5; |
| point.options.backgroundColor = '#f59e0b'; |
| point.options.borderColor = '#b45309'; |
| chartInstance.update(); |
| } |
| } |
| } |
| |
| |
| |
| function showModal(title, content) { |
| modalTitle.textContent = title; |
| modalContent.innerHTML = content; |
| modal.classList.remove('hidden'); |
| } |
| |
| function showStrategyModal(strategy) { |
| const content = ` |
| <p class="text-slate-600">${strategy.details}</p> |
| <div class="mt-4 pt-4 border-t border-slate-200"> |
| <h4 class="font-semibold text-slate-700">AWS Integration Notes:</h4> |
| <p class="mt-2 text-sm bg-slate-100 p-3 rounded-md font-mono">${strategy.aws}</p> |
| </div> |
| `; |
| showModal(`Strategy: ${strategy.name}`, content); |
| } |
| |
| function hideModal() { |
| modal.classList.add('hidden'); |
| } |
| |
| |
| function setupEventListeners() { |
| closeModalBtn.addEventListener('click', hideModal); |
| modal.addEventListener('click', (e) => { |
| if (e.target === modal) hideModal(); |
| }); |
| |
| filters.forEach(filter => filter.addEventListener('change', renderStrategyChart)); |
| |
| guideSelectors.forEach(selector => selector.addEventListener('change', updateRecommendation)); |
| |
| window.addEventListener('scroll', handleScroll); |
| } |
| |
| |
| function updateRecommendation() { |
| const goal = guideSelectors[0].value; |
| const data = guideSelectors[1].value; |
| const resources = guideSelectors[2].value; |
| |
| let recId = 'peft'; |
| let rationale = ''; |
| |
| if (resources === 'high') { |
| if(goal === 'design') { recId = 'diffusion'; rationale = 'With extensive resources for de novo design, a joint diffusion model is the state-of-the-art approach.'; } |
| else { recId = 'contrastive'; rationale = 'For broad applications with high resources, pre-training a custom, structure-aware model via contrastive learning is optimal.'} |
| } else if (resources === 'medium') { |
| if(goal === 'design') { recId = 'inverse_folding'; rationale = 'For design goals with moderate resources, fine-tuning an inverse folding model is a powerful and feasible strategy.'} |
| else if (data === 'structure') { recId = 'full_ft'; rationale = 'With a GPU cluster, you can afford to fully fine-tune a model on your labeled dataset for maximum task-specific performance.'} |
| else {recId = 'full_ft'; rationale = 'With a GPU cluster, fully fine-tuning a model is a robust choice for optimizing performance on your task.'} |
| } else { |
| if (goal === 'optimize' || goal === 'annotate') { |
| recId = 'peft'; |
| rationale = 'With limited resources, Parameter-Efficient Fine-Tuning (PEFT) is the most effective strategy. It allows you to leverage large models without high computational cost.' |
| } else { |
| recId = 'inverse_folding'; |
| rationale = 'For de novo design on a limited budget, fine-tuning an existing inverse folding model is a targeted and efficient approach.' |
| } |
| } |
| |
| currentRecommendation = recId; |
| |
| recommendationBox.innerHTML = ` |
| <h4 class="font-bold text-sky-800">Recommended Strategy: ${strategyData.find(s => s.id === recId).name}</h4> |
| <p class="mt-2 text-sky-700">${rationale}</p> |
| <p class="mt-3 text-sm text-sky-600">This strategy is now highlighted on the chart above. Click it for more details.</p> |
| `; |
| recommendationBox.classList.remove('hidden'); |
| |
| renderStrategyChart(); |
| setTimeout(() => { |
| document.getElementById('strategies').scrollIntoView({ behavior: 'smooth' }); |
| }, 100); |
| } |
| |
| |
| function handleScroll() { |
| const scrollPosition = window.scrollY + header.offsetHeight + 20; |
| |
| document.querySelectorAll('section').forEach(section => { |
| if (scrollPosition >= section.offsetTop && scrollPosition < section.offsetTop + section.offsetHeight) { |
| const currentId = section.getAttribute('id'); |
| navLinks.forEach(link => { |
| link.classList.toggle('active', link.getAttribute('href') === `#${currentId}`); |
| }); |
| } |
| }); |
| } |
| |
| init(); |
| }); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=agrosman/protein-engineering-strategy" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
|
|
