Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Dispatch AI — Intelligence at the Speed of Need</title> | |
| <meta name="description" content="Dispatch AI builds small, powerful AI models for mobile and edge devices. Open-source, phone-tested, runs everywhere."> | |
| <link rel="icon" href="brand-assets/favicon/favicon.ico"> | |
| <link rel="apple-touch-icon" href="brand-assets/app/apple-touch-icon-180.png"> | |
| <!-- Fonts --> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --ink: #0A0F1A; | |
| --ink-light: #111827; | |
| --ink-card: #151B2E; | |
| --off-white: #F5F7FA; | |
| --electric-blue: #2E6BFF; | |
| --cyan: #1FE0E6; | |
| --gray: #6B7280; | |
| --gray-light: #9CA3AF; | |
| --border: rgba(46, 107, 255, 0.15); | |
| --glow-blue: rgba(46, 107, 255, 0.3); | |
| --glow-cyan: rgba(31, 224, 230, 0.2); | |
| } | |
| * { margin: 0; padding: 0; box-sizing: border-box; } | |
| body { | |
| font-family: 'Space Grotesk', sans-serif; | |
| background: var(--ink); | |
| color: var(--off-white); | |
| overflow-x: hidden; | |
| line-height: 1.6; | |
| } | |
| .mono { font-family: 'JetBrains Mono', monospace; } | |
| /* ── ANIMATED BACKGROUND ── */ | |
| .bg-grid { | |
| position: fixed; | |
| top: 0; left: 0; | |
| width: 100%; height: 100%; | |
| background-image: | |
| linear-gradient(rgba(46, 107, 255, 0.03) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(46, 107, 255, 0.03) 1px, transparent 1px); | |
| background-size: 50px 50px; | |
| z-index: 0; | |
| pointer-events: none; | |
| } | |
| .bg-glow { | |
| position: fixed; | |
| width: 600px; height: 600px; | |
| border-radius: 50%; | |
| filter: blur(120px); | |
| z-index: 0; | |
| pointer-events: none; | |
| opacity: 0.15; | |
| } | |
| .bg-glow.blue { background: var(--electric-blue); top: -200px; right: -100px; } | |
| .bg-glow.cyan { background: var(--cyan); bottom: -200px; left: -100px; } | |
| /* ── NAVBAR ── */ | |
| nav { | |
| position: fixed; | |
| top: 0; left: 0; right: 0; | |
| z-index: 100; | |
| background: rgba(10, 15, 26, 0.85); | |
| backdrop-filter: blur(20px); | |
| border-bottom: 1px solid var(--border); | |
| padding: 16px 0; | |
| } | |
| nav .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 0 24px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| text-decoration: none; | |
| color: var(--off-white); | |
| font-weight: 700; | |
| font-size: 20px; | |
| letter-spacing: -0.5px; | |
| } | |
| .logo svg { width: 32px; height: 32px; } | |
| .nav-links { | |
| display: flex; | |
| gap: 32px; | |
| list-style: none; | |
| } | |
| .nav-links a { | |
| color: var(--gray-light); | |
| text-decoration: none; | |
| font-size: 15px; | |
| font-weight: 500; | |
| transition: color 0.2s; | |
| } | |
| .nav-links a:hover { color: var(--cyan); } | |
| .nav-cta { | |
| background: var(--electric-blue); | |
| color: white; | |
| padding: 10px 24px; | |
| border-radius: 8px; | |
| text-decoration: none; | |
| font-weight: 600; | |
| font-size: 14px; | |
| transition: all 0.2s; | |
| } | |
| .nav-cta:hover { box-shadow: 0 0 30px var(--glow-blue); transform: translateY(-1px); } | |
| /* ── HERO ── */ | |
| .hero { | |
| position: relative; | |
| z-index: 1; | |
| min-height: 100vh; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| text-align: center; | |
| padding: 120px 24px 80px; | |
| } | |
| .hero-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| background: rgba(46, 107, 255, 0.1); | |
| border: 1px solid var(--border); | |
| padding: 8px 16px; | |
| border-radius: 100px; | |
| font-size: 13px; | |
| color: var(--cyan); | |
| margin-bottom: 32px; | |
| font-family: 'JetBrains Mono', monospace; | |
| } | |
| .hero-badge .dot { | |
| width: 8px; height: 8px; | |
| background: var(--cyan); | |
| border-radius: 50%; | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; transform: scale(1); } | |
| 50% { opacity: 0.5; transform: scale(1.3); } | |
| } | |
| .hero h1 { | |
| font-size: clamp(40px, 7vw, 80px); | |
| font-weight: 700; | |
| line-height: 1.05; | |
| letter-spacing: -2px; | |
| margin-bottom: 24px; | |
| max-width: 900px; | |
| } | |
| .hero h1 .gradient { | |
| background: linear-gradient(135deg, var(--electric-blue), var(--cyan)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .hero p { | |
| font-size: clamp(16px, 2vw, 20px); | |
| color: var(--gray-light); | |
| max-width: 600px; | |
| margin: 0 auto 40px; | |
| } | |
| .hero-buttons { | |
| display: flex; | |
| gap: 16px; | |
| justify-content: center; | |
| flex-wrap: wrap; | |
| } | |
| .btn-primary { | |
| background: var(--electric-blue); | |
| color: white; | |
| padding: 14px 32px; | |
| border-radius: 10px; | |
| text-decoration: none; | |
| font-weight: 600; | |
| font-size: 16px; | |
| transition: all 0.3s; | |
| border: none; | |
| cursor: pointer; | |
| } | |
| .btn-primary:hover { box-shadow: 0 0 40px var(--glow-blue); transform: translateY(-2px); } | |
| .btn-secondary { | |
| background: transparent; | |
| color: var(--off-white); | |
| padding: 14px 32px; | |
| border-radius: 10px; | |
| text-decoration: none; | |
| font-weight: 600; | |
| font-size: 16px; | |
| border: 1px solid var(--border); | |
| transition: all 0.3s; | |
| } | |
| .btn-secondary:hover { border-color: var(--cyan); color: var(--cyan); } | |
| /* ── STATS ── */ | |
| .stats { | |
| position: relative; | |
| z-index: 1; | |
| display: flex; | |
| justify-content: center; | |
| gap: 64px; | |
| padding: 0 24px 80px; | |
| flex-wrap: wrap; | |
| } | |
| .stat { | |
| text-align: center; | |
| } | |
| .stat-number { | |
| font-size: 48px; | |
| font-weight: 700; | |
| background: linear-gradient(135deg, var(--electric-blue), var(--cyan)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .stat-label { | |
| color: var(--gray); | |
| font-size: 14px; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| margin-top: 4px; | |
| } | |
| /* ── SECTION ── */ | |
| section { | |
| position: relative; | |
| z-index: 1; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 80px 24px; | |
| } | |
| .section-title { | |
| font-size: clamp(28px, 4vw, 42px); | |
| font-weight: 700; | |
| text-align: center; | |
| margin-bottom: 16px; | |
| letter-spacing: -1px; | |
| } | |
| .section-subtitle { | |
| color: var(--gray-light); | |
| text-align: center; | |
| max-width: 600px; | |
| margin: 0 auto 60px; | |
| font-size: 18px; | |
| } | |
| /* ── SERVICES GRID ── */ | |
| .services-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); | |
| gap: 24px; | |
| } | |
| .service-card { | |
| background: var(--ink-card); | |
| border: 1px solid var(--border); | |
| border-radius: 16px; | |
| padding: 32px; | |
| transition: all 0.3s; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .service-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; left: 0; right: 0; | |
| height: 2px; | |
| background: linear-gradient(90deg, var(--electric-blue), var(--cyan)); | |
| opacity: 0; | |
| transition: opacity 0.3s; | |
| } | |
| .service-card:hover { | |
| transform: translateY(-4px); | |
| border-color: rgba(46, 107, 255, 0.4); | |
| box-shadow: 0 20px 40px rgba(0,0,0,0.3); | |
| } | |
| .service-card:hover::before { opacity: 1; } | |
| .service-icon { | |
| font-size: 32px; | |
| margin-bottom: 16px; | |
| } | |
| .service-card h3 { | |
| font-size: 18px; | |
| font-weight: 600; | |
| margin-bottom: 8px; | |
| } | |
| .service-card p { | |
| color: var(--gray-light); | |
| font-size: 14px; | |
| } | |
| /* ── MODELS SECTION ── */ | |
| .models-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); | |
| gap: 20px; | |
| } | |
| .model-card { | |
| background: var(--ink-card); | |
| border: 1px solid var(--border); | |
| border-radius: 12px; | |
| padding: 24px; | |
| transition: all 0.3s; | |
| text-decoration: none; | |
| color: inherit; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .model-card:hover { | |
| transform: translateY(-3px); | |
| border-color: var(--cyan); | |
| box-shadow: 0 10px 30px rgba(0,0,0,0.3); | |
| } | |
| .model-tag { | |
| display: inline-block; | |
| font-size: 11px; | |
| font-family: 'JetBrains Mono', monospace; | |
| color: var(--cyan); | |
| background: rgba(31, 224, 230, 0.1); | |
| padding: 4px 8px; | |
| border-radius: 4px; | |
| margin-bottom: 12px; | |
| align-self: flex-start; | |
| } | |
| .model-card h3 { | |
| font-size: 16px; | |
| font-weight: 600; | |
| margin-bottom: 8px; | |
| } | |
| .model-meta { | |
| display: flex; | |
| gap: 16px; | |
| margin-top: auto; | |
| padding-top: 16px; | |
| font-size: 13px; | |
| color: var(--gray); | |
| } | |
| .model-meta span { display: flex; align-items: center; gap: 4px; } | |
| .model-loading { | |
| text-align: center; | |
| padding: 60px; | |
| color: var(--gray); | |
| } | |
| /* ── LICENSE SECTION ── */ | |
| .license-card { | |
| background: var(--ink-card); | |
| border: 1px solid var(--border); | |
| border-radius: 20px; | |
| padding: 48px; | |
| max-width: 800px; | |
| margin: 0 auto; | |
| } | |
| .license-card h3 { | |
| font-size: 22px; | |
| margin-bottom: 24px; | |
| } | |
| .license-activities { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 12px; | |
| margin-top: 24px; | |
| } | |
| .license-activity { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| font-size: 14px; | |
| color: var(--gray-light); | |
| } | |
| .license-activity::before { | |
| content: '▸'; | |
| color: var(--cyan); | |
| } | |
| .license-info { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 20px; | |
| margin-bottom: 32px; | |
| } | |
| .license-info-item .label { | |
| font-size: 12px; | |
| color: var(--gray); | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| } | |
| .license-info-item .value { | |
| font-size: 15px; | |
| color: var(--off-white); | |
| margin-top: 4px; | |
| font-weight: 500; | |
| } | |
| /* ── FOOTER ── */ | |
| footer { | |
| position: relative; | |
| z-index: 1; | |
| border-top: 1px solid var(--border); | |
| padding: 48px 24px 32px; | |
| text-align: center; | |
| } | |
| footer .logo { justify-content: center; margin-bottom: 16px; } | |
| footer p { | |
| color: var(--gray); | |
| font-size: 14px; | |
| } | |
| footer .links { | |
| display: flex; | |
| gap: 24px; | |
| justify-content: center; | |
| margin: 16px 0; | |
| } | |
| footer .links a { | |
| color: var(--gray-light); | |
| text-decoration: none; | |
| font-size: 14px; | |
| transition: color 0.2s; | |
| } | |
| footer .links a:hover { color: var(--cyan); } | |
| /* ── CODE BLOCK ── */ | |
| .code-block { | |
| background: var(--ink-light); | |
| border: 1px solid var(--border); | |
| border-radius: 12px; | |
| padding: 24px; | |
| font-family: 'JetBrains Mono', monospace; | |
| font-size: 14px; | |
| line-height: 1.8; | |
| overflow-x: auto; | |
| max-width: 700px; | |
| margin: 0 auto; | |
| } | |
| .code-block .keyword { color: var(--electric-blue); } | |
| .code-block .string { color: var(--cyan); } | |
| .code-block .comment { color: var(--gray); } | |
| .code-block .number { color: #FFB86C; } | |
| /* ── PHONE FARM SECTION ── */ | |
| .farm-visual { | |
| display: flex; | |
| justify-content: center; | |
| gap: 8px; | |
| flex-wrap: wrap; | |
| max-width: 800px; | |
| margin: 0 auto; | |
| } | |
| .phone-icon { | |
| width: 40px; | |
| height: 70px; | |
| background: var(--ink-card); | |
| border: 1px solid var(--border); | |
| border-radius: 6px; | |
| position: relative; | |
| transition: all 0.3s; | |
| } | |
| .phone-icon::before { | |
| content: ''; | |
| position: absolute; | |
| top: 4px; left: 4px; right: 4px; | |
| height: 50px; | |
| background: linear-gradient(180deg, rgba(46, 107, 255, 0.2), rgba(31, 224, 230, 0.1)); | |
| border-radius: 3px; | |
| } | |
| .phone-icon.active { | |
| border-color: var(--cyan); | |
| box-shadow: 0 0 15px var(--glow-cyan); | |
| } | |
| /* ── RESPONSIVE ── */ | |
| @media (max-width: 768px) { | |
| .nav-links { display: none; } | |
| .stats { gap: 32px; } | |
| .license-activities { grid-template-columns: 1fr; } | |
| .license-card { padding: 32px 24px; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Background --> | |
| <div class="bg-grid"></div> | |
| <div class="bg-glow blue"></div> | |
| <div class="bg-glow cyan"></div> | |
| <!-- Logo SVG (inline for reuse) --> | |
| <svg style="display:none"> | |
| <symbol id="dispatch-logo" viewBox="16 10 80 80"> | |
| <g fill="none" stroke="currentColor" stroke-width="11" stroke-linecap="round" stroke-linejoin="round"> | |
| <path d="M32 21 V79"></path> | |
| <path d="M32 21 H50 C70 21 80 34 80 50 C80 66 70 79 50 79 H32"></path> | |
| </g> | |
| <path d="M47 39 L59 50 L47 61" fill="none" stroke="#1FE0E6" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"></path> | |
| </symbol> | |
| </svg> | |
| <!-- NAVBAR --> | |
| <nav> | |
| <div class="container"> | |
| <a href="/" class="logo"> | |
| <svg><use href="#dispatch-logo"/></svg> | |
| Dispatch AI | |
| </a> | |
| <ul class="nav-links"> | |
| <li><a href="#models">Models</a></li> | |
| <li><a href="#services">Services</a></li> | |
| <li><a href="#phone-farm">Phone Farm</a></li> | |
| <li><a href="#about">About</a></li> | |
| </ul> | |
| <a href="https://huggingface.co/dispatchAI" target="_blank" class="nav-cta">View on HuggingFace →</a> | |
| </div> | |
| </nav> | |
| <!-- HERO --> | |
| <div class="hero"> | |
| <div> | |
| <div class="hero-badge"> | |
| <span class="dot"></span> | |
| 18+ models shipped · 40-phone farm · $0 cost | |
| </div> | |
| <h1> | |
| Intelligence that moves at the<br> | |
| <span class="gradient">speed of need.</span> | |
| </h1> | |
| <p> | |
| We build small, powerful AI models that run on mobile phones and edge devices. | |
| Open-source. Phone-tested. Free for everyone. | |
| </p> | |
| <div class="hero-buttons"> | |
| <a href="#models" class="btn-primary">Explore Models</a> | |
| <a href="https://huggingface.co/dispatchAI" target="_blank" class="btn-secondary">HuggingFace ↗</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- STATS --> | |
| <div class="stats"> | |
| <div class="stat"> | |
| <div class="stat-number" id="stat-models">18</div> | |
| <div class="stat-label">Models Shipped</div> | |
| </div> | |
| <div class="stat"> | |
| <div class="stat-number">40</div> | |
| <div class="stat-label">Phones Testing</div> | |
| </div> | |
| <div class="stat"> | |
| <div class="stat-number">16.3</div> | |
| <div class="stat-label">Tokens/sec</div> | |
| </div> | |
| <div class="stat"> | |
| <div class="stat-number">$0</div> | |
| <div class="stat-label">Cost</div> | |
| </div> | |
| </div> | |
| <!-- MODELS SECTION --> | |
| <section id="models"> | |
| <h2 class="section-title">Models</h2> | |
| <p class="section-subtitle">Every model tested on real Samsung Galaxy S20 FE hardware before shipping.</p> | |
| <div class="models-grid" id="models-grid"> | |
| <div class="model-loading">Loading models from HuggingFace...</div> | |
| </div> | |
| </section> | |
| <!-- SERVICES SECTION --> | |
| <section id="services"> | |
| <h2 class="section-title">What We Do</h2> | |
| <p class="section-subtitle">Licensed AI company based in Sharjah Free Zone, UAE.</p> | |
| <div class="services-grid"> | |
| <div class="service-card"> | |
| <div class="service-icon">🧠</div> | |
| <h3>AI Development Services</h3> | |
| <p>Custom AI model development, re-engineering, and optimization for mobile and edge deployment.</p> | |
| </div> | |
| <div class="service-card"> | |
| <div class="service-icon">⚛️</div> | |
| <h3>Quantum Computing R&D</h3> | |
| <p>Research and development in quantum computing algorithms and quantum-classical hybrid systems.</p> | |
| </div> | |
| <div class="service-card"> | |
| <div class="service-icon">🎓</div> | |
| <h3>AI Training</h3> | |
| <p>Model training, fine-tuning, knowledge distillation, and quantization for production deployment.</p> | |
| </div> | |
| <div class="service-card"> | |
| <div class="service-icon">💻</div> | |
| <h3>Computer Systems Trading</h3> | |
| <p>Trading of computer systems, software, and AI-optimized hardware for edge computing.</p> | |
| </div> | |
| <div class="service-card"> | |
| <div class="service-icon">🔌</div> | |
| <h3>Electronic Components</h3> | |
| <p>Trading of spare parts for electrical and electronic devices, including mobile AI hardware.</p> | |
| </div> | |
| <div class="service-card"> | |
| <div class="service-icon">🎬</div> | |
| <h3>Digital Content Creation</h3> | |
| <p>AI-powered content creation services — text, image, video, and audio generation for digital media.</p> | |
| </div> | |
| <div class="service-card"> | |
| <div class="service-icon">🛒</div> | |
| <h3>E-Commerce</h3> | |
| <p>AI models and tools available through our website for download and commercial use.</p> | |
| </div> | |
| <div class="service-card"> | |
| <div class="service-icon">📱</div> | |
| <h3>Mobile-First AI</h3> | |
| <p>Every model we ship is tested on real phones. If it doesn't run on a Snapdragon, we don't ship it.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- PHONE FARM SECTION --> | |
| <section id="phone-farm"> | |
| <h2 class="section-title">40-Phone Test Farm</h2> | |
| <p class="section-subtitle">Every model is benchmarked on real hardware before it ships to HuggingFace.</p> | |
| <div class="farm-visual" id="farm-visual"> | |
| <!-- 40 phone icons generated by JS --> | |
| </div> | |
| <div style="margin-top: 48px;"> | |
| <div class="code-block"> | |
| <span class="comment"># Dispatch AI model test pipeline</span> | |
| <span class="keyword">from</span> dispatch_ai <span class="keyword">import</span> HermesAgent | |
| agent = <span class="keyword">HermesAgent</span>(config={ | |
| <span class="string">"hf_org"</span>: <span class="string">"dispatchAI"</span>, | |
| <span class="string">"device_target"</span>: <span class="string">"mobile"</span>, | |
| <span class="string">"model_size_budget_mb"</span>: <span class="number">2000</span>, | |
| }) | |
| <span class="comment"># Downloads → Quantizes → Tests on phones → Ships to HF</span> | |
| agent.run(<span class="string">"Build a mobile LLM under 2GB"</span>) | |
| <span class="comment"># ✅ 16.3 tokens/sec on Snapdragon 865</span> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ABOUT / LICENSE SECTION --> | |
| <section id="about"> | |
| <h2 class="section-title">About Dispatch AI</h2> | |
| <p class="section-subtitle">A licensed AI company in Sharjah Research Technology and Innovation Free Zone.</p> | |
| <div class="license-card"> | |
| <h3>📋 Company License</h3> | |
| <div class="license-info"> | |
| <div class="license-info-item"> | |
| <div class="label">Company Name</div> | |
| <div class="value">Dispatch AI (FZE)</div> | |
| </div> | |
| <div class="license-info-item"> | |
| <div class="label">License Number</div> | |
| <div class="value">10818</div> | |
| </div> | |
| <div class="license-info-item"> | |
| <div class="label">Free Zone</div> | |
| <div class="value">SRTI Free Zone, Sharjah</div> | |
| </div> | |
| <div class="license-info-item"> | |
| <div class="label">Address</div> | |
| <div class="value">Block B - B54-092</div> | |
| </div> | |
| <div class="license-info-item"> | |
| <div class="label">Incorporated</div> | |
| <div class="value">December 24, 2025</div> | |
| </div> | |
| <div class="license-info-item"> | |
| <div class="label">Expires</div> | |
| <div class="value">December 23, 2026</div> | |
| </div> | |
| </div> | |
| <h3 style="font-size: 16px; margin-top: 32px;">Licensed Activities</h3> | |
| <div class="license-activities"> | |
| <div class="license-activity">Artificial Intelligence Developing Services</div> | |
| <div class="license-activity">Research & Development in Quantum Computing</div> | |
| <div class="license-activity">Artificial Intelligence Training</div> | |
| <div class="license-activity">Trading of Computer Systems And Software</div> | |
| <div class="license-activity">Trading of Spare Parts of Electrical & Electronic Devices</div> | |
| <div class="license-activity">Digital Content Creation Services</div> | |
| <div class="license-activity">E-Commerce Through Websites</div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- FOOTER --> | |
| <footer> | |
| <a href="/" class="logo"> | |
| <svg><use href="#dispatch-logo"/></svg> | |
| Dispatch AI | |
| </a> | |
| <div class="links"> | |
| <a href="https://huggingface.co/dispatchAI" target="_blank">HuggingFace</a> | |
| <a href="https://dispatchai.ai">dispatchai.ai</a> | |
| <a href="#about">License</a> | |
| <a href="#models">Models</a> | |
| </div> | |
| <p>© 2025 Dispatch AI (FZE) · SRTI Free Zone, Sharjah, UAE · License No. 10818</p> | |
| <p style="margin-top: 8px; font-style: italic;">"The best model is the one that runs."</p> | |
| </footer> | |
| <script> | |
| // ── FETCH MODELS FROM HUGGINGFACE API ── | |
| async function loadModels() { | |
| const grid = document.getElementById('models-grid'); | |
| try { | |
| const resp = await fetch('https://huggingface.co/api/models?author=dispatchAI&limit=50'); | |
| const models = await resp.json(); | |
| // Update stat | |
| document.getElementById('stat-models').textContent = models.length; | |
| if (models.length === 0) { | |
| grid.innerHTML = '<div class="model-loading">No models found.</div>'; | |
| return; | |
| } | |
| grid.innerHTML = models.map(m => { | |
| const size = m.safetensors?.total ? (m.safetensors.total / 1024 / 1024).toFixed(0) + 'MB' : 'GGUF'; | |
| const downloads = (m.downloads || 0).toLocaleString(); | |
| const tags = m.tags || []; | |
| const category = tags.find(t => t.includes('dispatch')) || 'AI Model'; | |
| const pipeline = m.pipeline_tag || 'text-generation'; | |
| return ` | |
| <a href="https://huggingface.co/${m.modelId}" target="_blank" class="model-card"> | |
| <span class="model-tag">${pipeline}</span> | |
| <h3>${m.modelId.replace('dispatchAI/', '')}</h3> | |
| <p style="color: var(--gray-light); font-size: 13px; margin-bottom: 12px;"> | |
| ${m.lastModified ? new Date(m.lastModified).toLocaleDateString() : ''} | |
| </p> | |
| <div class="model-meta"> | |
| <span>⬇ ${downloads}</span> | |
| <span>📦 ${size}</span> | |
| </div> | |
| </a> | |
| `; | |
| }).join(''); | |
| } catch (e) { | |
| grid.innerHTML = '<div class="model-loading">Visit <a href="https://huggingface.co/dispatchAI" style="color: var(--cyan)">huggingface.co/dispatchAI</a></div>'; | |
| } | |
| } | |
| // ── PHONE FARM VISUAL ── | |
| function renderPhoneFarm() { | |
| const farm = document.getElementById('farm-visual'); | |
| for (let i = 0; i < 40; i++) { | |
| const phone = document.createElement('div'); | |
| phone.className = 'phone-icon'; | |
| if (i < 3) phone.classList.add('active'); // First 3 are "testing" | |
| farm.appendChild(phone); | |
| // Animate activation | |
| setTimeout(() => { | |
| phone.classList.add('active'); | |
| }, i * 50); | |
| } | |
| } | |
| // ── INIT ── | |
| loadModels(); | |
| renderPhoneFarm(); | |
| // ── SMOOTH SCROLL ── | |
| document.querySelectorAll('a[href^="#"]').forEach(a => { | |
| a.addEventListener('click', (e) => { | |
| e.preventDefault(); | |
| const target = document.querySelector(a.getAttribute('href')); | |
| if (target) target.scrollIntoView({ behavior: 'smooth' }); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |