| '<!DOCTYPE html>
|
| <html lang="en">
|
| <head>
|
| <meta charset="UTF-8">
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| <title>Gemma 2 9B Instruct - AEUPH Model Hub</title>
|
| <meta name="description" content="Deploy Gemma 2 9B Instruct to RunPod serverless GPUs. Get $10 free credits + 20% lifetime referral commission.">
|
| <link rel="preconnect" href="https://fonts.googleapis.com">
|
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
| <link rel="preload" as="style" href="style.css">
|
| <link rel="stylesheet" href="style.css">
|
| <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🚀</text></svg>">
|
| </head>
|
| <body>
|
|
|
| <div id="starfield"></div>
|
| <div class="nebula-orb" style="--hue: 280;"></div>
|
| <div class="nebula-orb" style="--hue: 190;"></div>
|
| <div class="nebula-orb" style="--hue: 330;"></div>
|
| <div id="scroll-progress"></div>
|
|
|
| <nav id="navbar">
|
| <div class="nav-inner">
|
| <a href="https://huggingface.co/spaces/AEUPH/model-hub" class="nav-logo">
|
| <span class="logo-icon">🚀</span>
|
| <span class="logo-text">AEUPH</span>
|
| </a>
|
| <div class="nav-links">
|
| <a href="https://huggingface.co/spaces/AEUPH/model-hub#flagships">Flagships</a>
|
| <a href="https://huggingface.co/spaces/AEUPH/model-hub#models">Browse</a>
|
| <a href="https://huggingface.co/spaces/AEUPH/model-hub#gpus">GPUs</a>
|
| <a href="https://huggingface.co/spaces/AEUPH/model-hub#referral">Earn 20%</a>
|
| </div>
|
| <a href="https://runpod.io?ref=lc0jiiz3" target="_blank" rel="noopener" class="nav-cta btn-ref">🎁 $10 Free Credits</a>
|
| <button class="nav-toggle" aria-label="Menu">☰</button>
|
| </div>
|
| </nav>
|
|
|
| <header id="hero">
|
| <div class="hero-floating">
|
| <div class="hero-orb" style="background: radial-gradient(circle at 30% 30%, rgba(255,215,0,0.15), transparent 60%);"></div>
|
| <div class="hero-orb" style="background: radial-gradient(circle at 70% 30%, rgba(0,212,255,0.15), transparent 60%); animation-duration: 18s; animation-delay: -6s;"></div>
|
| <div class="hero-orb" style="background: radial-gradient(circle at 50% 50%, rgba(236,72,153,0.1), transparent 60%); width: 300px; height: 300px; top: 30%; left: 60%; animation-duration: 25s; animation-delay: -12s;"></div>
|
| </div>
|
| <div class="hero-content">
|
| <div class="hero-badge ref-badge">
|
| <span class="hero-badge-dot"></span>
|
| DEPLOY TO RUNPOD SERVERLESS
|
| </div>
|
| <h1>
|
| <span class="hero-line" style="font-size:clamp(1rem,2.5vw,1.4rem);font-weight:500;color:var(--text-dim);letter-spacing:3px;text-transform:uppercase;">MODEL DEPLOYMENT</span>
|
| <span class="hero-line" style="font-size:clamp(2.5rem,6vw,4.5rem);">Gemma 2 9B Instruct</span>
|
| <span class="hero-line gradient-text">Zero Ops. Infinite Scale.</span>
|
| </h1>
|
| <p class="hero-sub">Deploy Gemma 2 9B Instruct to RunPod serverless GPUs. Auto-scaling from 0 to 1000+ workers. Pay per second.</p>
|
| <div class="hero-actions">
|
| <a href="https://runpod.io?ref=lc0jiiz3" target="_blank" rel="noopener" class="btn-primary btn-ref" style="text-decoration:none; display:inline-flex; align-items:center; gap:10px;">
|
| <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
|
| <span>Get $10 Free Credits →</span>
|
| </a>
|
| <a href="#deploy-section" class="btn-secondary"><span>Deploy Model →</span></a>
|
| </div>
|
| <div class="hero-stats">
|
| <div class="hero-stat"><span class="hero-stat-num">12GB</span><span class="hero-stat-label">VRAM</span></div>
|
| <div class="hero-stat"><span class="hero-stat-num">2s</span><span class="hero-stat-label">Cold Start</span></div>
|
| <div class="hero-stat"><span class="hero-stat-num">$0.00019</span><span class="hero-stat-label">/sec (RTX 4090)</span></div>
|
| <div class="hero-stat"><span class="hero-stat-num">∞</span><span class="hero-stat-label">Auto-Scale</span></div>
|
| </div>
|
| </div>
|
| </header>
|
|
|
| <div class="signal-bar-wrap">
|
| <div class="signal-bar-label">Your Deployment Signal</div>
|
| <div class="signal-bar-track"><div class="signal-bar-fill" id="signal-fill"></div></div>
|
| <div class="signal-bar-pct" id="signal-pct">0%</div>
|
| </div>
|
|
|
| <section id="deploy-section" aria-labelledby="deploy-title">
|
| <div class="section-header">
|
| <h2 id="deploy-title">Deploy Gemma 2 9B Instruct</h2>
|
| <p>Choose your GPU and deploy instantly. Pay per second. No minimums.</ </div>
|
|
|
| <div class="deploy-card glass">
|
| <div class="deploy-header">
|
| <div class="model-avatar">🤖</div>
|
| <div class="model-info">
|
| <h3>Gemma 2 9B Instruct</h3>
|
| <p class="model-meta"><span class="hf-logo">🤗</span> google/gemma-2-9b-it</p>
|
| </div>
|
| <span class="model-tag llm">LLM</span>
|
| </div>
|
|
|
| <div class="deploy-meta">
|
| <span class="gpu-badge">≥12GB VRAM</span>
|
| <span class="gpu-badge featured">⭐ RTX 3090 Recommended</span>
|
| </div>
|
|
|
| <div class="deploy-options">
|
| <label class="option-label">Select GPU</label>
|
| <div class="gpu-selector">
|
| <button class="gpu-option" data-gpu="rtx-3080" data-price="0.17" data-spot="0.085">
|
| <span class="gpu-name">RTX 3080</span>
|
| <span class="gpu-vram">10 GB VRAM</span>
|
| <div class="gpu-pricing">
|
| <span class="price">$0.17/hr</span>
|
| <span class="spot-price">Spot: $0.085/hr</span>
|
| </div>
|
| </button>
|
| <button class="gpu-option featured" data-gpu="rtx-3090" data-price="0.22" data-spot="0.11">
|
| <span class="gpu-name">RTX 3090 ⭐</span>
|
| <span class="gpu-vram">24 GB VRAM</span>
|
| <div class="gpu-pricing">
|
| <span class="price">$0.22/hr</span>
|
| <span class="spot-price">Spot: $0.11/hr</span>
|
| </div>
|
| </button>
|
| <button class="gpu-option" data-gpu="rtx-4090" data-price="0.44" data-spot="0.22">
|
| <span class="gpu-name">RTX 4090</span>
|
| <span class="gpu-vram">24 GB VRAM</span>
|
| <div class="gpu-pricing">
|
| <span class="price">$0.44/hr</span>
|
| <span class="spot-price">Spot: $0.22/hr</span>
|
| </div>
|
| </button>
|
| <button class="gpu-option" data-gpu="a100-40" data-price="1.10" data-spot="0.55">
|
| <span class="gpu-name">A100 40GB</span>
|
| <span class="gpu-vram">40 GB VRAM</span>
|
| <div class="gpu-pricing">
|
| <span class="price">$1.10/hr</span>
|
| <span class="spot-price">Spot: $0.55/hr</span>
|
| </div>
|
| </button>
|
| <button class="gpu-option" data-gpu="a100-80" data-price="2.20" data-spot="1.10">
|
| <span class="gpu-name">A100 80GB</span>
|
| <span class="gpu-vram">80 GB VRAM</span>
|
| <div class="gpu-pricing">
|
| <span class="price">$2.20/hr</span>
|
| <span class="spot-price">Spot: $1.10/hr</span>
|
| </div>
|
| </button>
|
| <button class="gpu-option" data-gpu="h100" data-price="4.50" data-spot="2.25">
|
| <span class="gpu-name">H100 80GB</span>
|
| <span class="gpu-vram">80 GB VRAM</span>
|
| <div class="gpu-pricing">
|
| <span class="price">$4.50/hr</span>
|
| <span class="spot-price">Spot: $2.25/hr</span>
|
| </div>
|
| </button>
|
| </div>
|
|
|
| <div class="deploy-config">
|
| <label>Max Workers<input type="range" id="max-workers" min="1" max="100" value="10" step="1"><span id="max-workers-value">10</span></label>
|
| <label>Idle Timeout (sec)<input type="range" id="idle-timeout" min="30" max="300" value="60" step="30"><span id="idle-timeout-value">60s</span></label>
|
| </div>
|
| </div>
|
|
|
| <div class="deploy-actions">
|
| <a href="https://runpod.io?ref=lc0jiiz3" target="_blank" rel="noopener" class="btn-primary btn-ref" style="text-decoration:none; display:inline-flex; align-items:center; gap:10px; flex:1; justify-content:center;">
|
| <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
|
| <span>Deploy to RunPod → Get $10 Free</span>
|
| </a>
|
| <button id="deploy-btn-main" class="btn-primary btn-deploy" onclick="deployNowFromMain()">
|
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
|
| <span>Deploy Now →</span>
|
| </button>
|
| </div>
|
| </div>
|
|
|
| <div class="deploy-preview glass" id="deploy-preview" style="display:none;">
|
| <h4>🚀 Deployment Ready</h4>
|
| <div class="preview-info">
|
| <div class="preview-row"><span>Endpoint:</span><span id="preview-endpoint">https://api.runpod.ai/v2/.../runsync</span></div>
|
| <div class="preview-row"><span>GPU:</span><span id="preview-gpu">RTX 3090</span></div>
|
| <div class="preview-row"><span>Cost:</span><span id="preview-cost">$0.22/hr (Spot: $0.11/hr)</span></div>
|
| </div>
|
| <div class="preview-code">
|
| <pre><code id="preview-code">curl -X POST "https://api.runpod.ai/v2/.../runsync" \
|
| -H "Authorization: Bearer YOUR_API_KEY" \
|
| -H "Content-Type: application/json" \
|
| -d '{"input": {{"prompt": "Hello, Llama!", "max_tokens": 512}}}</code></pre>
|
| </div>
|
| <button class="btn-secondary" onclick="copyCode()">Copy cURL</button>
|
| </div>
|
| </section>
|
|
|
| <section id="model-info" aria-labelledby="model-info-title">
|
| <div class="section-header">
|
| <h2 id="model-info-title">Model Information</h2>
|
| <p>Technical specifications and capabilities for Gemma 2 9B Instruct.</ </div>
|
| <div class="dimensions-grid">
|
| <div class="dimension-card dim-nexus glass">
|
| <span class="dim-icon">📝</span>
|
| <h3>Capabilities</h3>
|
| <ul class="capability-list">
|
| <li>128K context window</li>
|
| <li>Multilingual (8+ languages)</li>
|
| <li>Tool calling / function calling</li>
|
| <li>Instruction following</li>
|
| <li>Code generation & reasoning</li>
|
| <li>RAG-ready embeddings</li>
|
| </ul>
|
| </div>
|
| <div class="dimension-card dim-prism glass">
|
| <span class="dim-icon">⚡</span>
|
| <h3>Performance</h3>
|
| <ul class="capability-list">
|
| <li>~200 tok/s on RTX 3090</li>
|
| <li>~400 tok/s on RTX 4090</li>
|
| <li>~800 tok/s on A100 40GB</li>
|
| <li>FP16 / FP8 quantization</li>
|
| <li>Flash Attention 2 support</li>
|
| <li>vLLM / TGI optimized</li>
|
| </ul>
|
| </div>
|
| <div class="dimension-card dim-echo glass">
|
| <span class="dim-icon">🛠️</span>
|
| <h3>Quantization</h3>
|
| <ul class="capability-list">
|
| <li>AWQ 4-bit (recommended)</li>
|
| <li>GPTQ 4-bit / 8-bit</li>
|
| <li>GGUF Q4_K_M / Q8_0</li>
|
| <li>FP8 (H100/A100)</li>
|
| <li>FP16 (full precision)</li>
|
| <li>Custom calibration</li>
|
| </ul>
|
| </div>
|
| <div class="dimension-card dim-spectra glass">
|
| <span class="dim-icon">🔧</span>
|
| <h3>Use Cases</h3>
|
| <ul class="capability-list">
|
| <li>Chat assistants & agents</li>
|
| <li>Code generation & review</li>
|
| <li>RAG & document QA</li>
|
| <li>Content generation</li>
|
| <li>Reasoning & analysis</li>
|
| <li>Fine-tuning ready</li>
|
| </ul>
|
| </div>
|
| </div>
|
| </section>
|
|
|
| <section class="ref-promo-section" aria-labelledby="ref-hero-title">
|
| <div class="ref-promo-container">
|
| <div class="ref-hero-banner">
|
| <div class="ref-badge">🎁 Exclusive Referral Benefits</div>
|
| <h2 id="ref-hero-title">Deploy on RunPod. Get <span style="color: var(--ref-gold);">$10 Free Credits</span> + <span style="color: var(--runpod-blue);">Lifetime 20% Commissions</span></h2>
|
| <p class="ref-subtitle">Sign up through our partner link and unlock immediate GPU credits, recurring referral revenue, and access to the world's largest serverless GPU fleet. Every model you deploy earns you back.</p>
|
| <div class="ref-cta-row">
|
| <a href="https://runpod.io?ref=lc0jiiz3" target="_blank" rel="noopener noreferrer" class="btn-primary btn-ref" style="text-decoration:none; display:inline-flex; align-items:center; gap:10px; padding: 18px 40px; font-size: 1.1rem;">
|
| <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
|
| <span>Sign Up & Claim $10 Free Credits</span>
|
| </a>
|
| <a href="https://console.runpod.io/user/referrals?ref=lc0jiiz3" target="_blank" rel="noopener noreferrer" class="btn-primary btn-runpod" style="text-decoration:none; display:inline-flex; align-items:center; gap:10px; padding: 18px 40px; font-size: 1.1rem;">
|
| <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>
|
| <span>View Referral Dashboard</span>
|
| </a>
|
| </div>
|
| <div class="ref-stats-row">
|
| <div class="ref-stat">
|
| <div class="ref-stat-number">$10</div>
|
| <div class="ref-stat-label">Instant GPU Credits</div>
|
| </div>
|
| <div class="ref-stat">
|
| <div class="ref-stat-number">20%</div>
|
| <div class="ref-stat-label">Lifetime Commission</div>
|
| </div>
|
| <div class="ref-stat">
|
| <div class="ref-stat-number">$500+</div>
|
| <div class="ref-stat-label">Avg Monthly Earnings</div>
|
| </div>
|
| <div class="ref-stat">
|
| <div class="ref-stat-number">∞</div>
|
| <div class="ref-stat-label">No Cap on Referrals</div>
|
| </div>
|
| </div>
|
| </div>
|
|
|
| <div class="ref-benefits-grid">
|
| <article class="ref-benefit-card">
|
| <div class="ref-benefit-icon">💰</div>
|
| <h3>Instant $10 Free Credits</h3>
|
| <p>Sign up via <a href="https://runpod.io?ref=lc0jiiz3" target="_blank" rel="noopener" style="color: var(--ref-gold); font-weight: 600;">our referral link</a> and get $10 in GPU credits instantly. That's ~55 hours on RTX 3080, ~45 hours on RTX 3090, or ~22 hours on RTX 4090 — completely free. No credit card required for the trial.</p>
|
| </article>
|
| <article class="ref-benefit-card">
|
| <div class="ref-benefit-icon">🔄</div>
|
| <h3>20% Lifetime Recurring Commission</h3>
|
| <p>Every person you refer earns you 20% of their spend — forever. If they spend $500/mo on GPUs, you get $100/mo passive income. 10 referrals at $500 = $5,000/mo. No caps. No expiry. Track it all at <a href="https://console.runpod.io/user/referrals?ref=lc0jiiz3" target="_blank" rel="noopener" style="color: var(--runpod-blue); font-weight: 600;">your referral dashboard</a>.</p>
|
| </article>
|
| <article class="ref-benefit-card">
|
| <div class="ref-benefit-icon">⚡</div>
|
| <h3>World's Largest Serverless GPU Fleet</h3>
|
| <p>Access 100,000+ GPUs across 30+ data centers globally. RTX 3080 ($0.17/hr) to H100 ($4.50/hr). Sub-second cold starts. Per-second billing. Auto-scale from 0 to 1000+ workers. No reserved instances needed.</p>
|
| </article>
|
| <article class="ref-benefit-card">
|
| <div class="ref-benefit-icon">🤗</div>
|
| <h3>Native Hugging Face Integration</h3>
|
| <p>Deploy any HF model ID directly. Auto-detects architecture, quantization (AWQ, GPTQ, GGUF), and required VRAM. OpenAI-compatible API endpoints. Built-in Flash Attention, vLLM, TGI, and custom Docker support.</p>
|
| </article>
|
| <article class="ref-benefit-card">
|
| <div class="ref-benefit-icon">💎</div>
|
| <h3>Spot Instances: Save 50-70%</h3>
|
| <p>Bid on spare capacity. RTX 3090 at $0.11/hr (vs $0.22), A100 40GB at $0.55/hr (vs $1.10). Perfect for batch inference, fine-tuning, and fault-tolerant workloads. Automatic fallback to on-demand.</p>
|
| </article>
|
| <article class="ref-benefit-card">
|
| <div class="ref-benefit-icon">🛡️</div>
|
| <h3>Enterprise-Grade Security & Compliance</h3>
|
| <p>SOC 2 Type II, HIPAA-ready, GDPR compliant. Private networking, VPC peering, custom VPCs. End-to-end encryption. Team workspaces with RBAC. Audit logs. Dedicated support SLAs.</p>
|
| </article>
|
| <article class="ref-benefit-card">
|
| <div class="ref-benefit-icon">🚀</div>
|
| <h3>One-Click Fine-Tuning & Training</h3>
|
| <p>Launch LoRA/QLoRA fine-tunes on any HF model. Multi-node distributed training with NCCL. Pre-configured Axolotl, Unsloth, HuggingFace Trainer templates. Checkpoint to HF Hub automatically.</p>
|
| </article>
|
| <article class="ref-benefit-card">
|
| <div class="ref-benefit-icon">🌐</div>
|
| <h3>Global Edge & CDN Integration</h3>
|
| <p>Deploy inference endpoints at edge locations worldwide. Cloudflare Workers integration. <100ms latency to 95% of internet users. Custom domains, SSL, rate limiting, auth built-in.</p>
|
| </article>
|
| </div>
|
|
|
| <div class="ref-dashboard-section">
|
| <h3>Already a RunPod User? Maximize Your Earnings</h3>
|
| <p>Log into your referral dashboard to get your personal link, track clicks, signups, conversions, and pending/paid commissions in real-time. Share your link on GitHub, Discord, Twitter, blogs, YouTube — every deploy earns you back.</ <a href="https://console.runpod.io/user/referrals?ref=lc0jiiz3" target="_blank" rel="noopener noreferrer" class="btn-primary btn-runpod" style="text-decoration:none; display:inline-flex; align-items:center; gap:10px; padding: 14px 32px; font-size: 1rem;">
|
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>
|
| <span>Open Referral Dashboard →</span>
|
| </a>
|
| </div>
|
| </div>
|
| </section>
|
|
|
| <footer style="padding: 60px 28px; border-top: 1px solid var(--border-subtle); text-align: center; color: var(--text-muted); font-size: 0.85rem;">
|
| <p>Deploying Hugging Face models on RunPod serverless GPUs via AEUPH</p>
|
| <p style="margin-top: 8px;">
|
| 🤗 <a href="https://huggingface.co/models" target="_blank" rel="noopener">Browse all models on HF Hub</a> ·
|
| <a href="https://runpod.io?ref=lc0jiiz3" target="_blank" rel="noopener" style="color: var(--ref-gold); font-weight: 600;">Get $10 Free RunPod Credits</a> ·
|
| <a href="https://console.runpod.io/user/referrals?ref=lc0jiiz3" target="_blank" rel="noopener" style="color: var(--runpod-blue); font-weight: 600;">Referral Dashboard</a> ·
|
| <a href="https://aeuph.duckdns.org">Back to AEUPH</a>
|
| </p>
|
| </footer>
|
|
|
| <script src="app.js"></script>
|
| <script>
|
| const HF_MODELS = [
|
| { id: "meta-llama/Meta-Llama-3.1-8B-Instruct", name: "Llama 3.1 8B Instruct", org: "meta-llama", type: "llm", tags: ["chat", "instruction", "tool-calling"], vram: 16, downloads: 1200000, likes: 8500, featured: true, description: "Latest Llama 3.1 with 128K context, multilingual, tool calling. Best open LLM for general use." },
|
| { id: "mistralai/Mistral-7B-Instruct-v0.3", name: "Mistral 7B Instruct v0.3", org: "mistralai", type: "llm", tags: ["chat", "instruction", "fast"], vram: 8, downloads: 2100000, likes: 12000, featured: true, description: "Fast, efficient 7B model. Excellent for chat, coding, and reasoning. Low VRAM requirement." },
|
| { id: "Qwen/Qwen2.5-7B-Instruct", name: "Qwen 2.5 7B Instruct", org: "Qwen", type: "llm", tags: ["chat", "multilingual", "coding", "reasoning"], vram: 8, downloads: 900000, likes: 6200, featured: true, description: "Strong multilingual (29 langs), coding, and reasoning. 128K context. Apache 2.0." },
|
| { id: "microsoft/Phi-3.5-mini-instruct", name: "Phi-3.5 Mini Instruct", org: "microsoft", type: "llm", tags: ["small", "fast", "reasoning", "128k"], vram: 4, downloads: 600000, likes: 4800, featured: true, description: "3.8B params, 128K context. Remarkable reasoning for size. Runs on 4GB VRAM." },
|
| { id: "codellama/CodeLlama-13b-Instruct-hf", name: "CodeLlama 13B Instruct", org: "codellama", type: "code", tags: ["coding", "python", "completion", "infilling"], vram: 24, downloads: 400000, likes: 3200, featured: true, description: "Specialized for code generation, completion, infilling. Python, JS, TS, C++, Rust, Go." },
|
| { id: "deepseek-ai/DeepSeek-Coder-V2-Lite-Instruct", name: "DeepSeek Coder V2 Lite", org: "deepseek-ai", type: "code", tags: ["coding", "reasoning", "128k", "math"], vram: 16, downloads: 300000, likes: 2800, featured: false, description: "16B MoE (2.4B active). Top-tier coding + math reasoning. 128K context." },
|
| { id: "openai/whisper-large-v3", name: "Whisper Large v3", org: "openai", type: "audio", tags: ["asr", "transcription", "multilingual", "translation"], vram: 8, downloads: 1500000, likes: 9500, featured: true, description: "State-of-the-art speech recognition. 99+ languages. Translation to English." },
|
| { id: "openai/whisper-large-v3-turbo", name: "Whisper Large v3 Turbo", org: "openai", type: "audio", tags: ["asr", "fast", "transcription"], vram: 6, downloads: 800000, likes: 5200, featured: false, description: "8x faster than large-v3 with minimal quality loss. Best for real-time." },
|
| { id: "suno/bark", name: "Bark TTS", org: "suno", type: "audio", tags: ["tts", "voice", "multilingual", "music"], vram: 12, downloads: 200000, likes: 3500, featured: false, description: "Generative audio model. Text-to-speech, music, sound effects. Multiple speakers." },
|
| { id: "coqui-ai/TTS", name: "Coqui TTS (XTTS v2)", org: "coqui-ai", type: "audio", tags: ["tts", "voice-cloning", "multilingual"], vram: 6, downloads: 150000, likes: 2800, featured: false, description: "Zero-shot voice cloning in 17 languages. 6s reference audio needed." },
|
| { id: "google/siglip-so400m-patch14-384", name: "SigLIP SO400M", org: "google", type: "vision", tags: ["clip", "embeddings", "zero-shot", "classification"], vram: 4, downloads: 100000, likes: 1200, featured: false, description: "Sigmoid loss CLIP. Better zero-shot classification. 384x384 resolution." },
|
| { id: "openai/clip-vit-large-patch14", name: "CLIP ViT-L/14", org: "openai", type: "vision", tags: ["clip", "embeddings", "retrieval", "classification"], vram: 4, downloads: 500000, likes: 4500, featured: false, description: "Classic CLIP. Image-text embeddings for search, classification, retrieval." },
|
| { id: "BAAI/bge-large-en-v1.5", name: "BGE Large EN v1.5", org: "BAAI", type: "embed", tags: ["embeddings", "retrieval", "rag", "english"], vram: 2, downloads: 800000, likes: 5800, featured: true, description: "Top MTEB retrieval model. 1024-dim. Best for English RAG." },
|
| { id: "intfloat/multilingual-e5-large", name: "Multilingual E5 Large", org: "intfloat", type: "embed", tags: ["embeddings", "multilingual", "retrieval", "100-langs"], vram: 2, downloads: 400000, likes: 3200, featured: false, description: "100 languages. Strong cross-lingual retrieval. 1024-dim." },
|
| { id: "microsoft/Phi-3-vision-128k-instruct", name: "Phi-3 Vision 128K", org: "microsoft", type: "vision", tags: ["vlm", "ocr", "charts", "documents", "128k"], vram: 8, downloads: 150000, likes: 2100, featured: false, description: "4.2B VLM. OCR, chart reading, document understanding. 128K context." },
|
| { id: "llava-hf/llava-v1.6-mistral-7b-hf", name: "LLaVA 1.6 Mistral 7B", org: "llava-hf", type: "vision", tags: ["vlm", "chat", "reasoning", "images"], vram: 16, downloads: 200000, likes: 2500, featured: false, description: "Visual chat assistant. Strong reasoning on images. Mistral 7B backbone." },
|
| { id: "Salesforce/blip2-opt-2.7b", name: "BLIP-2 OPT 2.7B", org: "Salesforce", type: "vision", tags: ["captioning", "vqa", "lightweight"], vram: 6, downloads: 100000, likes: 1800, featured: false, description: "Lightweight image captioning and VQA. Good for edge deployment." },
|
| { id: "google/gemma-2-9b-it", name: "Gemma 2 9B Instruct", org: "google", type: "llm", tags: ["chat", "instruction", "safety", "multilingual"], vram: 12, downloads: 400000, likes: 3800, featured: false, description: "Google's open model. Strong safety alignment. 8K context." },
|
| { id: "allenai/OLMo-7B-Instruct", name: "OLMo 7B Instruct", org: "allenai", type: "llm", tags: ["open", "transparent", "chat", "research"], vram: 8, downloads: 50000, likes: 800, featured: false, description: "Fully open (data, code, weights). Truly transparent LLM for research." },
|
| { id: "NVIDIA/Nemotron-3-8B-Instruct-4k", name: "Nemotron-3 8B Instruct", org: "NVIDIA", type: "llm", tags: ["chat", "reasoning", "alignment", "helpful"], vram: 16, downloads: 80000, likes: 1200, featured: false, description: "NVIDIA's aligned model. Strong helpfulness and reasoning. 4K context." },
|
| { id: "HuggingFaceH4/zephyr-7b-beta", name: "Zephyr 7B Beta", org: "HuggingFaceH4", type: "llm", tags: ["chat", "dpo", "alignment", "helpful"], vram: 8, downloads: 600000, likes: 4200, featured: false, description: "DPO-aligned Mistral. Very helpful assistant. No system prompt needed." },
|
| ];
|
|
|
| const GPU_OPTIONS = [
|
| { id: "rtx-3080", name: "RTX 3080", vram: "10 GB", price: 0.17, spot: 0.085, featured: false, minVram: 0, maxVram: 10 },
|
| { id: "rtx-3090", name: "RTX 3090", vram: "24 GB", price: 0.22, spot: 0.11, featured: true, minVram: 0, maxVram: 24 },
|
| { id: "rtx-4090", name: "RTX 4090", vram: "24 GB", price: 0.44, spot: 0.22, featured: false, minVram: 0, maxVram: 24 },
|
| { id: "a10g", name: "A10G", vram: "24 GB", price: 0.55, spot: 0.275, featured: false, minVram: 0, maxVram: 24 },
|
| { id: "a100-40", name: "A100 40GB", vram: "40 GB", price: 1.10, spot: 0.55, featured: false, minVram: 24, maxVram: 40 },
|
| { id: "a100-80", name: "A100 80GB", vram: "80 GB", price: 2.20, spot: 1.10, featured: false, minVram: 24, maxVram: 80 },
|
| { id: "h100", name: "H100 80GB", vram: "80 GB", price: 4.50, spot: 2.25, featured: false, minVram: 40, maxVram: 999 },
|
| ];
|
|
|
| let selectedModel = null;
|
| let selectedGpu = null;
|
| let currentFilter = 'all';
|
| let searchQuery = '';
|
|
|
| function formatNumber(n) {
|
| if (n >= 1000000) return (n/1000000).toFixed(1) + 'M';
|
| if (n >= 1000) return (n/1000).toFixed(1) + 'K';
|
| return n.toString();
|
| }
|
|
|
| function getTypeIcon(type) {
|
| const icons = { llm: '🤖', code: '💻', audio: '🔊', vision: '👁️', embed: '🔍' };
|
| return icons[type] || '📦';
|
| }
|
|
|
| function getTypeLabel(type) {
|
| const labels = { llm: 'LLM', code: 'Code', audio: 'Audio', vision: 'Vision', embed: 'Embeddings' };
|
| return labels[type] || type;
|
| }
|
|
|
| function renderStats() {
|
| const stats = [
|
| { num: HF_MODELS.length, label: 'Models Indexed' },
|
| { num: HF_MODELS.filter(m => m.featured).length, label: 'Featured' },
|
| { num: GPU_OPTIONS.length, label: 'GPU Types' },
|
| { num: HF_MODELS.reduce((a,b) => a + b.downloads, 0), label: 'Total Downloads' },
|
| ];
|
| document.getElementById('stats-bar').innerHTML = stats.map(s => `
|
| <div class="stat-card">
|
| <div class="stat-number">${typeof s.num === 'number' && s.num > 10000 ? formatNumber(s.num) : s.num}</div>
|
| <div class="stat-label">{s.label}</div>
|
| </div>
|
| `).join('');
|
| }
|
|
|
| function renderFeatured() {
|
| const featured = HF_MODELS.filter(m => m.featured);
|
| document.getElementById('featured-grid').innerHTML = featured.map(m => createModelCard(m)).join('');
|
| }
|
|
|
| function createFilterTabs() {
|
| const types = ['all', 'llm', 'code', 'audio', 'vision', 'embed'];
|
| const labels = { all: 'All', llm: 'LLM/Chat', code: 'Code', audio: 'Audio', vision: 'Vision', embed: 'Embeddings' };
|
| document.getElementById('filter-tabs').innerHTML = types.map(t => `
|
| <button class="filter-tab ${t === currentFilter ? 'active' : ''}" data-filter="{t}">{labels[t]}</button>
|
| `).join('');
|
| document.querySelectorAll('.filter-tab').forEach(btn => {
|
| btn.addEventListener('click', () => {
|
| currentFilter = btn.dataset.filter;
|
| document.querySelectorAll('.filter-tab').forEach(b => b.classList.toggle('active', b.dataset.filter === currentFilter));
|
| renderModels();
|
| });
|
| });
|
| }
|
|
|
| function renderModels() {
|
| let models = HF_MODELS;
|
| if (currentFilter !== 'all') models = models.filter(m => m.type === currentFilter);
|
| if (searchQuery) {
|
| const q = searchQuery.toLowerCase();
|
| models = models.filter(m =>
|
| m.name.toLowerCase().includes(q) ||
|
| m.id.toLowerCase().includes(q) ||
|
| m.org.toLowerCase().includes(q) ||
|
| m.tags.some(t => t.toLowerCase().includes(q))
|
| );
|
| }
|
| document.getElementById('models-grid').innerHTML = models.map(m => createModelCard(m)).join('');
|
| document.querySelectorAll('.model-card').forEach(card => {
|
| card.addEventListener('click', (e) => {
|
| if (!e.target.closest('.deploy-btn')) {
|
| const modelId = card.dataset.modelId;
|
| const model = HF_MODELS.find(m => m.id === modelId);
|
| if (model) openDeployModal(model);
|
| }
|
| });
|
| });
|
| }
|
|
|
| function createModelCard(model) {
|
| const recommendedGpus = GPU_OPTIONS.filter(g => g.maxVram >= model.vram && g.minVram <= model.vram).slice(0, 2);
|
| return `
|
| <article class="model-card ${model.featured ? 'featured' : ''}" data-model-id="${model.id}">
|
| <div class="model-header">
|
| <div class="model-avatar">{getTypeIcon(model.type)}</div>
|
| <div class="model-info">
|
| <div class="model-name">${model.name}</div>
|
| <div class="model-org"><span class="hf-logo">🤗</span> ${model.org}</div>
|
| </div>
|
| </div>
|
| <div class="model-meta">
|
| <span class="model-tag {model.type}">{getTypeLabel(model.type)}</span>
|
| <span class="gpu-badge">≥{model.vram}GB VRAM</span>
|
| </div>
|
| <p class="model-desc">{model.description}</p>
|
| <div class="model-footer">
|
| <div class="model-stats">
|
| <span class="model-stat">⬇ {formatNumber(model.downloads)}</span>
|
| <span class="model-stat">♥ {formatNumber(model.likes)}</span>
|
| </div>
|
| <button class="deploy-btn" onclick="event.stopPropagation(); openDeployModal(HF_MODELS.find(m => m.id === '{model.id}'))">
|
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
|
| Deploy
|
| </button>
|
| </div>
|
| </article>
|
| `;
|
| }
|
|
|
| function renderGpus() {
|
| document.getElementById('gpu-grid').innerHTML = GPU_OPTIONS.map(gpu => `
|
| <div class="dimension-card {gpu.featured ? 'dim-prism' : 'dim-nexus'}">
|
| <span class="dim-icon">{gpu.featured ? '⭐' : '🎮'}</span>
|
| <h3>{gpu.name}</h3>
|
| <p>{gpu.vram} VRAM · {gpu.minVram > 0 ? 'Best for ' + gpu.minVram + 'GB+' : 'Entry level'}</p>
|
| <div style="margin: 16px 0; text-align: left;">
|
| <div style="display:flex; justify-content:space-between; margin-bottom:4px;">
|
| <span style="color:var(--text2); font-size:0.8rem;">On-Demand</span>
|
| <span style="font-weight:700; color:var(--gold);">${{gpu.price}}/hr</span>
|
| </div>
|
| <div style="display:flex; justify-content:space-between;">
|
| <span style="color:var(--text2); font-size:0.8rem;">Spot (save {Math.round((1-gpu.spot/gpu.price)*100)}%)</span>
|
| <span style="font-weight:700; color:var(--model-green);">${{gpu.spot}}/hr</span>
|
| </div>
|
| </div>
|
| <a href="#models" class="dim-cta">Select for Deployment →</a>
|
| </div>
|
| `).join('');
|
| }
|
|
|
| let deployModalModel = null;
|
| let deployModalGpu = null;
|
|
|
| function openDeployModal(model, gpuHint = null) {
|
| deployModalModel = model;
|
| deployModalGpu = null;
|
| const modal = document.getElementById('deploy-modal');
|
| const title = document.getElementById('modal-title');
|
| const info = document.getElementById('modal-model-info');
|
| const gpuOptions = document.getElementById('gpu-options');
|
|
|
| if (model) {
|
| title.textContent = `Deploy ${model.name}`;
|
| info.innerHTML = `
|
| <div class="glass" style="padding: 16px; border-radius: var(--radius-sm);">
|
| <div class="model-header" style="margin-bottom: 12px;">
|
| <div class="model-avatar">{getTypeIcon(model.type)}</div>
|
| <div class="model-info">
|
| <div class="model-name">{model.name}</div>
|
| <div class="model-org"><span class="hf-logo">🤗</span> {model.org} · {model.id}</div>
|
| </div>
|
| </div>
|
| <div class="model-meta">
|
| <span class="model-tag {model.type}">{getTypeLabel(model.type)}</span>
|
| <span class="gpu-badge">Min VRAM: {model.vram}GB</span>
|
| </div>
|
| </div>
|
| `;
|
| const suitable = GPU_OPTIONS.filter(g => g.maxVram >= model.vram);
|
| gpuOptions.innerHTML = suitable.map(g => `
|
| <div class="gpu-option {g.featured ? 'featured' : ''}" data-gpu="{g.id}" onclick="selectGpu('{g.id}')">
|
| <div class="gpu-name">{g.name} {g.featured ? '⭐' : ''}</div>
|
| <div class="gpu-vram">{g.vram} VRAM</div>
|
| <div class="gpu-price">${g.price}/hr <span style="color:var(--model-green); font-size:0.8rem;">(spot ${g.spot})</span></div>
|
| </div>
|
| `).join('');
|
| if (gpuHint === 'featured') {
|
| const rec = suitable.find(g => g.featured) || suitable[0];
|
| if (rec) selectGpu(rec.id);
|
| }
|
| } else {
|
| title.textContent = 'Quick Deploy';
|
| info.innerHTML = '<p style="color:var(--text2);">Select a model from the catalog first, or enter a Hugging Face model ID.</ gpuOptions.innerHTML = GPU_OPTIONS.map(g => `
|
| <div class="gpu-option {g.featured ? 'featured' : ''}" data-gpu="{g.id}" onclick="selectGpu('{g.id}')">
|
| <div class="gpu-name">{g.name} {g.featured ? '⭐' : ''}</div>
|
| <div class="gpu-vram">{g.vram} VRAM</div>
|
| <div class="gpu-price">${g.price}/hr</div>
|
| </div>
|
| `).join('');
|
| }
|
| modal.classList.add('open');
|
| document.body.style.overflow = 'hidden';
|
| }
|
|
|
| function closeDeployModal() {
|
| document.getElementById('deploy-modal').classList.remove('open');
|
| document.body.style.overflow = '';
|
| deployModalModel = null;
|
| deployModalGpu = null;
|
| }
|
|
|
| function selectGpu(gpuId) {
|
| deployModalGpu = gpuId;
|
| document.querySelectorAll('.gpu-option').forEach(el => {
|
| el.classList.toggle('selected', el.dataset.gpu === gpuId);
|
| });
|
| }
|
|
|
| function submitDeployment() {
|
| if (!deployModalModel) { alert('Please select a model first'); return; }
|
| if (!deployModalGpu) { alert('Please select a GPU'); return; }
|
| const gpu = GPU_OPTIONS.find(g => g.id === deployModalGpu);
|
| const model = deployModalModel;
|
| const endpoint = `https://${model.id.replace('/', '-')}-${deployModalGpu}.runpod.io`;
|
| alert(`🚀 Deploying {model.name} on {gpu.name}...\n\nEndpoint: {endpoint}\n\nThis would trigger RunPod API to create a serverless endpoint.\nEstimated cost: ${{gpu.price}}/hr (spot: ${{gpu.spot}}/hr)\n\n💡 Pro tip: Sign up at https://runpod.io?ref=lc0jiiz3 for $10 free credits!`);
|
| closeDeployModal();
|
| }
|
|
|
| document.getElementById('search-input').addEventListener('input', (e) => {
|
| searchQuery = e.target.value.trim();
|
| renderModels();
|
| });
|
|
|
| document.getElementById('search-input').addEventListener('keydown', (e) => {
|
| if (e.key === 'Enter') {
|
| e.preventDefault();
|
| document.getElementById('models').scrollIntoView({ behavior: 'smooth' });
|
| }
|
| });
|
|
|
| document.getElementById('deploy-modal').addEventListener('click', (e) => {
|
| if (e.target === e.currentTarget) closeDeployModal();
|
| });
|
|
|
| document.addEventListener('keydown', (e) => {
|
| if (e.key === 'Escape') closeDeployModal();
|
| });
|
|
|
| document.addEventListener('DOMContentLoaded', () => {
|
| renderStats();
|
| renderFeatured();
|
| createFilterTabs();
|
| renderModels();
|
| renderGpus();
|
|
|
| let signal = 0;
|
| setInterval(() => {
|
| signal = Math.min(100, signal + Math.random() * 15);
|
| if (signal > 95) signal = Math.random() * 20;
|
| document.getElementById('signal-fill').style.width = signal + '%';
|
| document.getElementById('signal-pct').textContent = Math.round(signal) + '%';
|
| }, 2000);
|
| });
|
|
|
| function copyCode() {
|
| navigator.clipboard.writeText(document.getElementById('preview-code').textContent);
|
| alert('Copied to clipboard!');
|
| }
|
|
|
| // ============================================================
|
| // REAL RUNPOD DEPLOYMENT INTEGRATION
|
| // ============================================================
|
| const RUNPOD_API_BASE = 'https://jinxai.duckdns.org/api/runpod';
|
| const REFERRAL_CODE = 'lc0jiiz3';
|
|
|
| async function realDeploy(model, gpuId, config) {
|
| const gpu = GPU_OPTIONS.find(g => g.id === gpuId);
|
| if (!gpu) throw new Error('GPU not found');
|
|
|
| const deployBtn = document.getElementById('deploy-btn-main');
|
| const originalText = deployBtn.innerHTML;
|
|
|
| try {
|
| deployBtn.disabled = true;
|
| deployBtn.innerHTML = '<span class="spinner"></span> Deploying...';
|
|
|
| // Call our proxy which creates the RunPod serverless endpoint
|
| const response = await fetch(`${RUNPOD_API_BASE}/deploy`, {
|
| method: 'POST',
|
| headers: { 'Content-Type': 'application/json' },
|
| body: JSON.stringify({
|
| model_id: model.id,
|
| model_name: model.name,
|
| gpu_type: gpuId,
|
| gpu_name: gpu.name,
|
| max_workers: config.maxWorkers,
|
| idle_timeout: config.idleTimeout,
|
| referral_code: REFERRAL_CODE
|
| })
|
| });
|
|
|
| const result = await response.json();
|
|
|
| if (!response.ok) {
|
| throw new Error(result.error || `Deploy failed: ${response.status}`);
|
| }
|
|
|
| // Show success with endpoint details
|
| showDeploySuccess(result, model, gpu);
|
|
|
| } catch (error) {
|
| showDeployError(error.message);
|
| } finally {
|
| deployBtn.disabled = false;
|
| deployBtn.innerHTML = originalText;
|
| }
|
| }
|
|
|
| function showDeploySuccess(result, model, gpu) {
|
| const preview = document.getElementById('deploy-preview');
|
| const endpoint = result.endpoint || `https://api.runpod.ai/v2/${result.endpoint_id}/runsync`;
|
|
|
| document.getElementById('preview-endpoint').textContent = endpoint;
|
| document.getElementById('preview-gpu').textContent = gpu.name;
|
| document.getElementById('preview-cost').textContent = `$${gpu.price}/hr (Spot: $${gpu.spot}/hr)`;
|
| document.getElementById('preview-code').textContent =
|
| `curl -X POST "${endpoint}" \
|
| -H "Authorization: Bearer ${result.api_key || 'YOUR_RUNPOD_API_KEY'}" \
|
| -H "Content-Type: application/json" \
|
| -d '{"input": {"prompt": "Hello, ${model.name}!", "max_tokens": 512}}'`;
|
|
|
| preview.style.display = 'block';
|
| preview.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
|
|
| // Add success toast
|
| showToast('✅ Deployment successful! Endpoint ready.', 'success');
|
|
|
| // Track referral
|
| if (result.referral_url) {
|
| console.log('Referral tracked:', result.referral_url);
|
| }
|
| }
|
|
|
| function showDeployError(message) {
|
| showToast(`❌ Deploy failed: ${message}`, 'error');
|
| }
|
|
|
| function showToast(message, type = 'info') {
|
| const toast = document.createElement('div');
|
| toast.className = `toast toast-${type}`;
|
| toast.innerHTML = `
|
| <span>${message}</span>
|
| <button onclick="this.parentElement.remove()">×</button>
|
| `;
|
| document.body.appendChild(toast);
|
| setTimeout(() => toast.classList.add('show'), 10);
|
| setTimeout(() => { toast.classList.remove('show'); setTimeout(() => toast.remove(), 300); }, 5000);
|
| }
|
|
|
| // Enhanced simulateDeploy - now calls real deploy
|
| async function simulateDeploy() {
|
| const gpuBtn = document.querySelector('.gpu-option.selected') || document.querySelector('.gpu-option.featured');
|
| if (!gpuBtn) {
|
| showToast('⚠️ Please select a GPU first', 'warning');
|
| return;
|
| }
|
|
|
| if (!deployModalModel) {
|
| showToast('⚠️ No model selected', 'warning');
|
| return;
|
| }
|
|
|
| const config = {
|
| maxWorkers: parseInt(document.getElementById('max-workers')?.value) || 10,
|
| idleTimeout: parseInt(document.getElementById('idle-timeout')?.value) || 60
|
| };
|
|
|
| await realDeploy(deployModalModel, gpuBtn.dataset.gpu, config);
|
| }
|
|
|
| // Direct deploy from main section (bypasses modal)
|
| async function deployNow(gpuId) {
|
| if (!deployModalModel) {
|
| showToast('⚠️ Model not loaded', 'warning');
|
| return;
|
| }
|
|
|
| const config = {
|
| maxWorkers: parseInt(document.getElementById('max-workers')?.value) || 10,
|
| idleTimeout: parseInt(document.getElementById('idle-timeout')?.value) || 60
|
| };
|
|
|
| await realDeploy(deployModalModel, gpuId, config);
|
| }
|
|
|
| // Initialize deploy button handlers
|
| function initDeployButtons() {
|
| // Main deploy button in deploy section
|
| const mainDeployBtn = document.getElementById('deploy-btn-main');
|
| if (mainDeployBtn) {
|
| mainDeployBtn.addEventListener('click', () => {
|
| const gpuBtn = document.querySelector('.gpu-option.selected') || document.querySelector('.gpu-option.featured');
|
| if (gpuBtn) deployNow(gpuBtn.dataset.gpu);
|
| });
|
| }
|
|
|
| // GPU option click handlers
|
| document.querySelectorAll('.gpu-option').forEach(btn => {
|
| btn.addEventListener('click', () => {
|
| document.querySelectorAll('.gpu-option').forEach(b => b.classList.remove('selected'));
|
| btn.classList.add('selected');
|
| // Update preview cost
|
| const price = btn.dataset.price;
|
| const spot = btn.dataset.spot;
|
| document.getElementById('preview-cost').textContent = `$${price}/hr (Spot: $${spot}/hr)`;
|
| document.getElementById('preview-gpu').textContent = btn.querySelector('.gpu-name').textContent;
|
| });
|
| });
|
|
|
| // Slider value updates
|
| const maxWorkers = document.getElementById('max-workers');
|
| const idleTimeout = document.getElementById('idle-timeout');
|
| if (maxWorkers) maxWorkers.addEventListener('input', e => document.getElementById('max-workers-value').textContent = e.target.value);
|
| if (idleTimeout) idleTimeout.addEventListener('input', e => document.getElementById('idle-timeout-value').textContent = e.target.value + 's');
|
| }
|
|
|
| // Add toast styles
|
| const toastStyles = document.createElement('style');
|
| toastStyles.textContent = `
|
| .toast {
|
| position: fixed;
|
| bottom: 24px;
|
| right: 24px;
|
| padding: 16px 24px;
|
| border-radius: var(--radius-md);
|
| background: var(--glass-bg);
|
| border: 1px solid var(--border-subtle);
|
| backdrop-filter: blur(20px);
|
| display: flex;
|
| align-items: center;
|
| gap: 12px;
|
| z-index: 10000;
|
| transform: translateY(100px);
|
| opacity: 0;
|
| transition: all 0.3s ease;
|
| box-shadow: var(--shadow-lg);
|
| }
|
| .toast.show { transform: translateY(0); opacity: 1; }
|
| .toast-success { border-color: var(--model-green); }
|
| .toast-error { border-color: var(--model-red); }
|
| .toast-warning { border-color: var(--gold); }
|
| .toast button { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 1.2rem; line-height: 1; }
|
| .spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid transparent; border-top-color: currentColor; border-radius: 50%; animation: spin 0.8s linear infinite; margin-right: 8px; }
|
| @keyframes spin { to { transform: rotate(360deg); } }
|
| `;
|
| document.head.appendChild(toastStyles);
|
|
|
| // Initialize on DOM ready
|
| document.addEventListener('DOMContentLoaded', () => {
|
| initDeployButtons();
|
| });
|
|
|
|
|
|
|
| // Main page deploy button - gets selected GPU from DOM
|
| function deployNowFromMain() {
|
| const gpuBtn = document.querySelector(".gpu-option.selected") || document.querySelector(".gpu-option.featured");
|
| if (!gpuBtn) {
|
| showToast("⚠️ Please select a GPU first", "warning");
|
| return;
|
| }
|
| deployNow(gpuBtn.dataset.gpu);
|
| }
|
|
|
| // Fallback: if deployModalModel not set, use page model
|
| if (typeof deployNow === 'function') {
|
| const originalDeployNow = deployNow;
|
| window.deployNow = function(gpuId) {
|
| if (!deployModalModel) {
|
| // Try to get model from page context
|
| const modelName = document.querySelector("h1 .hero-line")?.textContent ||
|
| document.querySelector(".model-info h3")?.textContent;
|
| if (modelName) {
|
| const model = HF_MODELS.find(m => m.name.includes(modelName.trim())) || HF_MODELS[0];
|
| deployModalModel = model;
|
| }
|
| }
|
| return originalDeployNow(gpuId);
|
| };
|
| }
|
|
|
| </script>
|
| </body>
|
| </html> |
