| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>HuggingFaceBio Carbon-500M Draft Model</title> |
| <link rel="stylesheet" href="/assets/style.css"> |
| <style> |
| |
| .dna-a { color: #22c55e; font-weight: bold; } |
| .dna-c { color: #3b82f6; font-weight: bold; } |
| .dna-g { color: #eab308; font-weight: bold; } |
| .dna-t { color: #ef4444; font-weight: bold; } |
| .dna-n { color: #94a3b8; font-style: italic; } |
| |
| |
| .meta-text { color: #888888; font-weight: normal; font-style: italic; } |
| |
| |
| .brand-banner-link { |
| display: block; |
| text-decoration: none; |
| width: 100%; |
| margin-bottom: 1rem; |
| } |
| .brand-banner { |
| width: 100%; |
| height: auto; |
| display: block; |
| border-radius: 12px; |
| box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02); |
| transition: transform 0.2s ease, box-shadow 0.2s ease; |
| } |
| .brand-banner:hover { |
| transform: translateY(-1px); |
| box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06); |
| } |
| .header-navigation { |
| display: flex; |
| gap: 1.5rem; |
| justify-content: center; |
| align-items: center; |
| flex-wrap: wrap; |
| margin-bottom: 2rem; |
| font-size: 0.9rem; |
| color: #64748b; |
| } |
| .header-navigation a { |
| color: #3b82f6; |
| text-decoration: none; |
| font-weight: 500; |
| } |
| .header-navigation a:hover { |
| text-decoration: underline; |
| } |
| .nav-separator { |
| color: #cbd5e1; |
| } |
| </style> |
| </head> |
| <body> |
| <div class="container"> |
| <header> |
| <a href="https://huggingface.co/HuggingFaceBio/Carbon-500M" target="_blank" class="brand-banner-link"> |
| <img src="/assets/carbon-500m-banner.png" alt="Carbon-500M Autoregressive Genomic Foundation Model" class="brand-banner"> |
| </a> |
|
|
| <div class="header-navigation"> |
| <span><a href="https://huggingface.co/docs/transformers.js/index" target="_blank">🤗 transformers.js v4.2.0</a></span> |
| <span class="nav-separator">•</span> |
| <a href="https://huggingface.co/HuggingFaceBio/Carbon-3B/resolve/main/tech-report.pdf" target="_blank">📄 Technical Report</a> |
| <span class="nav-separator">•</span> |
| <a href="https://huggingface.co/spaces/HuggingFaceBio/carbon-demo" target="_blank">🧬 Full 3B/8B Pipeline Demo</a> |
| </div> |
| </header> |
|
|
| <main> |
| <div id="status-panel" class="card"> |
| <h3>System Status</h3> |
| <div id="status-message">Initializing application...</div> |
| <div class="progress-bar-container"> |
| <div id="progress-bar" class="progress-bar"></div> |
| </div> |
| </div> |
|
|
| <div class="card"> |
| <label for="dna-input"><strong>Input Seed Sequence (DNA):</strong></label> |
| <div class="input-hint">The model automatically wraps your sequence in a <dna> tag for the hybrid 6-mer tokenizer.</div> |
| <textarea id="dna-input" rows="3" placeholder="e.g., ATGCTAGCTAGCTAGCTAGC">ATGCTAGCTAGCTAGCTAGC</textarea> |
|
|
| <div class="settings-grid"> |
| <div> |
| <label for="max-tokens">Max New Tokens</label> |
| <input type="number" id="max-tokens" value="16" min="1" max="128"> |
| </div> |
| <div> |
| <label for="temperature">Temperature</label> |
| <input type="number" id="temperature" value="0.7" step="0.1" min="0.1" max="1.5"> |
| </div> |
| <div> |
| <label for="execution-device">Device Target</label> |
| <input type="text" id="execution-device" value="webgpu" readonly style="cursor: default;"> |
| </div> |
| <div> |
| <label for="execution-dtype">Quantization</label> |
| <select id="execution-dtype"> |
| <option selected value="fp16">fp16</option> |
| <option value="q4f16">q4f16</option> |
| </select> |
| </div> |
| </div> |
| <button id="generateBtn" disabled>Generate Sequence</button> |
| </div> |
|
|
| <div class="card output-card"> |
| <h3>Generated Output</h3> |
| <pre id="output-display">Output will appear here after generation...</pre> |
| </div> |
| </main> |
| </div> |
|
|
| <script type="module" src="/assets/app.js"></script> |
| </body> |
| </html> |
