| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> |
| <meta name="theme-color" content="#17104d" /> |
| <title>Tiny Aya Global</title> |
| <style> |
| :root { --ink:#f8f7ff; --muted:#c6c1e5; --violet:#8b5cf6; --pink:#ec4899; --panel:rgba(28,21,76,.72); } |
| * { box-sizing:border-box; } |
| body { margin:0; min-height:100vh; color:var(--ink); font:16px/1.55 Inter, ui-sans-serif, system-ui, sans-serif; background:#110c36; } |
| .glow { position:fixed; width:42rem; height:42rem; border-radius:50%; filter:blur(80px); opacity:.35; pointer-events:none; } |
| .glow.a { top:-22rem; left:-12rem; background:#4f46e5; } .glow.b { right:-18rem; bottom:-26rem; background:#db2777; } |
| main { width:min(1080px, calc(100% - 40px)); margin:auto; position:relative; } |
| nav { display:flex; justify-content:space-between; align-items:center; padding:25px 0; color:var(--muted); } |
| .brand { color:var(--ink); font-weight:750; letter-spacing:-.03em; } .badge { border:1px solid rgba(255,255,255,.18); padding:5px 10px; border-radius:999px; font-size:.8rem; } |
| .hero { padding:76px 0 56px; max-width:780px; } |
| .eyebrow { color:#d8b4fe; text-transform:uppercase; letter-spacing:.14em; font-size:.76rem; font-weight:750; } |
| h1 { font-size:clamp(3.2rem,9vw,6.8rem); line-height:.93; letter-spacing:-.075em; margin:14px 0 24px; } |
| h1 span { background:linear-gradient(105deg,#d8b4fe,#f9a8d4); -webkit-background-clip:text; color:transparent; } |
| .lead { color:var(--muted); font-size:1.18rem; max-width:650px; } |
| .actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:29px; } |
| a.button, button { border:0; border-radius:10px; padding:12px 17px; font:inherit; font-weight:700; cursor:pointer; text-decoration:none; } |
| .primary { color:white; background:linear-gradient(110deg,#7c3aed,#db2777); } .secondary { color:var(--ink); background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15); } |
| .stats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:25px 0 58px; } |
| .stat, .card { background:var(--panel); border:1px solid rgba(255,255,255,.11); border-radius:17px; backdrop-filter:blur(14px); } |
| .stat { padding:19px; } .stat strong { display:block; font-size:1.55rem; letter-spacing:-.04em; } .stat small { color:var(--muted); } |
| h2 { margin:0 0 14px; font-size:1.65rem; letter-spacing:-.04em; } |
| .grid { display:grid; grid-template-columns:1.2fr .8fr; gap:18px; padding-bottom:64px; } |
| .card { padding:23px; } .card p { color:var(--muted); margin:0 0 17px; } |
| .prompts { display:grid; gap:9px; } .prompt { text-align:left; color:var(--ink); background:rgba(255,255,255,.06); padding:12px; font-weight:500; display:flex; justify-content:space-between; gap:12px; } |
| .prompt:hover { background:rgba(255,255,255,.13); } .copy { color:#f0abfc; font-size:.8rem; white-space:nowrap; } |
| ul { margin:0; padding-left:20px; color:var(--muted); } li+li { margin-top:10px; } |
| footer { padding:20px 0 36px; border-top:1px solid rgba(255,255,255,.1); color:#a9a3cb; font-size:.86rem; } |
| @media (max-width:700px) { .hero{padding-top:42px}.stats,.grid{grid-template-columns:1fr}.stats{gap:8px} h1{font-size:3.8rem} } |
| </style> |
| </head> |
| <body> |
| <div class="glow a"></div><div class="glow b"></div> |
| <main> |
| <nav><span class="brand">🌍 Tiny Aya Global</span><span class="badge">Static showcase</span></nav> |
| <section class="hero"> |
| <div class="eyebrow">Cohere Labs multilingual model</div> |
| <h1>Language is <span>global.</span></h1> |
| <p class="lead">Explore a compact 3.35B-parameter model designed for strong, balanced language representation across more than 70 languages.</p> |
| <div class="actions"> |
| <a class="button primary" href="https://huggingface.co/spaces/CohereLabs/tiny-aya" target="_blank" rel="noreferrer">Try the official live demo ↗</a> |
| <a class="button secondary" href="https://huggingface.co/CohereLabs/tiny-aya-global" target="_blank" rel="noreferrer">Read the model card ↗</a> |
| </div> |
| </section> |
| <section class="stats" aria-label="Model facts"> |
| <div class="stat"><strong>3.35B</strong><small>parameters</small></div> |
| <div class="stat"><strong>70+</strong><small>languages supported</small></div> |
| <div class="stat"><strong>8K</strong><small>token context length</small></div> |
| </section> |
| <section class="grid"> |
| <div class="card"> |
| <h2>Try a multilingual prompt</h2> |
| <p>Copy an example, then paste it into the official live demo. This Space stays entirely in your browser and does not send prompts anywhere.</p> |
| <div class="prompts"> |
| <button class="prompt" data-prompt="Explica en español qué significa la palabra japonesa 'ikigai' y da un ejemplo práctico."><span>Español · Explain “ikigai”</span><span class="copy">Copy</span></button> |
| <button class="prompt" data-prompt="Résume en français les avantages et limites du télétravail."><span>Français · Summarize remote work</span><span class="copy">Copy</span></button> |
| <button class="prompt" data-prompt="日本の四季について、子ども向けに短く説明してください。"><span>日本語 · Explain four seasons</span><span class="copy">Copy</span></button> |
| <button class="prompt" data-prompt="Tafsiri sentensi hii kwa Kiswahili: Technology can help communities share knowledge."><span>Kiswahili · Translate a sentence</span><span class="copy">Copy</span></button> |
| </div> |
| </div> |
| <div class="card"> |
| <h2>Built for breadth</h2> |
| <ul> |
| <li>Balances representation across European, Indic, East and Southeast Asian, African, and Middle Eastern languages.</li> |
| <li>Designed for conversation, translation, summarization, and cross-lingual tasks.</li> |
| <li>Open research release from Cohere Labs.</li> |
| </ul> |
| </div> |
| </section> |
| <footer>For research and non-commercial use only. Model outputs can be inaccurate. Subject to Cohere's CC-BY-NC license and acceptable-use policy.</footer> |
| </main> |
| <script> |
| document.querySelectorAll('[data-prompt]').forEach((button) => { |
| button.addEventListener('click', async () => { |
| await navigator.clipboard.writeText(button.dataset.prompt); |
| const label = button.querySelector('.copy'); |
| label.textContent = 'Copied!'; |
| setTimeout(() => { label.textContent = 'Copy'; }, 1400); |
| }); |
| }); |
| </script> |
| </body> |
| </html> |
|
|
