| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> |
| <title>ADI Fun Spaces</title> |
| <style> |
| :root { |
| color-scheme: dark; |
| --bg: #070a0f; |
| --panel: #141922; |
| --panel-2: #10151d; |
| --line: #2c3543; |
| --text: #f7f9fc; |
| --muted: #aab4c3; |
| --accent: #12b981; |
| --accent-2: #f97316; |
| --blue: #38bdf8; |
| } |
| * { box-sizing: border-box; } |
| body { |
| margin: 0; |
| background: var(--bg); |
| color: var(--text); |
| font: 15px/1.45 system-ui, -apple-system, Segoe UI, sans-serif; |
| } |
| header { |
| border-bottom: 1px solid var(--line); |
| background: #0b1018; |
| } |
| .wrap { |
| width: min(1180px, calc(100vw - 32px)); |
| margin: 0 auto; |
| } |
| .hero { |
| min-height: 220px; |
| display: grid; |
| align-content: center; |
| gap: 14px; |
| padding: 34px 0; |
| } |
| h1 { |
| margin: 0; |
| font-size: clamp(32px, 6vw, 64px); |
| line-height: 1; |
| letter-spacing: 0; |
| } |
| .lede { |
| max-width: 760px; |
| margin: 0; |
| color: var(--muted); |
| font-size: 17px; |
| } |
| .toolbar { |
| display: flex; |
| gap: 10px; |
| flex-wrap: wrap; |
| align-items: center; |
| padding: 18px 0 8px; |
| } |
| input, select { |
| min-height: 42px; |
| border: 1px solid var(--line); |
| border-radius: 8px; |
| background: #0d121a; |
| color: var(--text); |
| padding: 0 12px; |
| font: inherit; |
| } |
| input { flex: 1 1 300px; } |
| select { flex: 0 0 190px; } |
| .grid { |
| display: grid; |
| grid-template-columns: repeat(4, minmax(0, 1fr)); |
| gap: 14px; |
| padding: 16px 0 38px; |
| } |
| .card { |
| display: grid; |
| grid-template-rows: auto auto 1fr auto; |
| min-height: 320px; |
| padding: 16px; |
| border: 1px solid var(--line); |
| border-radius: 8px; |
| background: var(--panel); |
| } |
| .meta { |
| display: flex; |
| justify-content: space-between; |
| gap: 8px; |
| margin-bottom: 12px; |
| color: var(--muted); |
| font-size: 13px; |
| } |
| .emoji { |
| width: 38px; |
| height: 38px; |
| display: inline-grid; |
| place-items: center; |
| border-radius: 8px; |
| background: var(--panel-2); |
| border: 1px solid var(--line); |
| font-size: 22px; |
| } |
| h2 { |
| margin: 0 0 8px; |
| font-size: 20px; |
| line-height: 1.15; |
| letter-spacing: 0; |
| } |
| p { margin: 0; } |
| .body { |
| display: grid; |
| gap: 10px; |
| color: var(--muted); |
| } |
| .remix { |
| color: #d8ffe9; |
| border-left: 3px solid var(--accent); |
| padding-left: 10px; |
| } |
| .actions { |
| display: flex; |
| gap: 8px; |
| margin-top: 16px; |
| } |
| a { |
| color: inherit; |
| text-decoration: none; |
| } |
| .button { |
| min-height: 40px; |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| padding: 0 12px; |
| border-radius: 8px; |
| background: var(--accent); |
| color: #03120c; |
| font-weight: 900; |
| flex: 1; |
| } |
| .button.secondary { |
| background: #202833; |
| color: var(--text); |
| border: 1px solid var(--line); |
| font-weight: 750; |
| } |
| .tag { |
| color: var(--blue); |
| white-space: nowrap; |
| } |
| footer { |
| border-top: 1px solid var(--line); |
| color: var(--muted); |
| padding: 18px 0 28px; |
| } |
| @media (max-width: 1040px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } |
| @media (max-width: 780px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } |
| @media (max-width: 560px) { |
| .grid { grid-template-columns: 1fr; } |
| select { flex: 1 1 100%; } |
| } |
| </style> |
| </head> |
| <body> |
| <header> |
| <div class="wrap hero"> |
| <h1>ADI Fun Spaces</h1> |
| <p class="lede">A launcher for playful Hugging Face demos we want in the ADI orbit: music, comics, image illusions, webcam vision, chess, coding, and sound experiments.</p> |
| </div> |
| </header> |
|
|
| <main class="wrap"> |
| <section class="toolbar"> |
| <input id="search" placeholder="Search by name, category, or remix idea" /> |
| <select id="category"> |
| <option value="all">All categories</option> |
| <option>Music</option> |
| <option>Images</option> |
| <option>Code</option> |
| <option>Vision</option> |
| <option>Games</option> |
| </select> |
| </section> |
|
|
| <section class="grid" id="grid"></section> |
| </main> |
|
|
| <footer> |
| <div class="wrap">These cards open the original Hugging Face Spaces. ADI remix notes are our own launch ideas.</div> |
| </footer> |
|
|
| <script> |
| const spaces = [ |
| { |
| name: "Arpeggiator", |
| emoji: "🎛️", |
| category: "Music", |
| url: "https://huggingface.co/spaces/stereoDrift/arpeggiator", |
| description: "Hand-controlled arpeggiator, drum machine, and visualizer.", |
| remix: "ADI remix: gesture-controlled prompt music with model-generated chord progressions." |
| }, |
| { |
| name: "DeepSite v4", |
| emoji: "🐳", |
| category: "Code", |
| url: "https://huggingface.co/spaces/enzostvs/deepsite", |
| description: "Generate applications by describing what you want to build.", |
| remix: "ADI remix: one-click Space generator tuned for your ADI demos and house style." |
| }, |
| { |
| name: "SmolVLM realtime WebGPU", |
| emoji: "⚡", |
| category: "Vision", |
| url: "https://huggingface.co/spaces/webml-community/smolvlm-realtime-webgpu", |
| description: "Ask questions about your webcam view using browser-side WebGPU.", |
| remix: "ADI remix: visual assistant mode for screenshots, workbench views, and device status." |
| }, |
| { |
| name: "MusicGen", |
| emoji: "🎵", |
| category: "Music", |
| url: "https://huggingface.co/spaces/facebook/MusicGen", |
| description: "Generate music from a text description and optional melody.", |
| remix: "ADI remix: theme-song generator for every model release and Space launch." |
| }, |
| { |
| name: "IllusionDiffusion", |
| emoji: "👁️", |
| category: "Images", |
| url: "https://huggingface.co/spaces/AP123/IllusionDiffusion", |
| description: "Generate high-quality illusion artwork from prompts and patterns.", |
| remix: "ADI remix: hidden-word launch art for ADI, Qwen, GGUF, and theLAB." |
| }, |
| { |
| name: "AI Comic Factory", |
| emoji: "🦸", |
| category: "Images", |
| url: "https://huggingface.co/spaces/jbilcke-hf/ai-comic-factory", |
| description: "Create AI comics from a single story prompt.", |
| remix: "ADI remix: model-debugging comics from build logs and runtime errors." |
| }, |
| { |
| name: "Chess LLM", |
| emoji: "♟️", |
| category: "Games", |
| url: "https://huggingface.co/spaces/mlabonne/chessllm", |
| description: "Play chess between language models.", |
| remix: "ADI remix: prompt-strategy chess where each move explains its reasoning." |
| }, |
| { |
| name: "ace-step-jam", |
| emoji: "🎧", |
| category: "Music", |
| url: "https://huggingface.co/spaces/victor/ace-step-jam", |
| description: "Describe a song and let AI write and produce it.", |
| remix: "ADI remix: build-log-to-song generator for every successful deploy." |
| } |
| ]; |
| |
| const grid = document.querySelector("#grid"); |
| const search = document.querySelector("#search"); |
| const category = document.querySelector("#category"); |
| |
| function render() { |
| const term = search.value.trim().toLowerCase(); |
| const cat = category.value; |
| grid.innerHTML = ""; |
| spaces |
| .filter(space => cat === "all" || space.category === cat) |
| .filter(space => !term || [space.name, space.category, space.description, space.remix].join(" ").toLowerCase().includes(term)) |
| .forEach(space => { |
| const card = document.createElement("article"); |
| card.className = "card"; |
| card.innerHTML = ` |
| <div class="meta"><span class="emoji">${space.emoji}</span><span class="tag">${space.category}</span></div> |
| <h2>${space.name}</h2> |
| <div class="body"> |
| <p>${space.description}</p> |
| <p class="remix">${space.remix}</p> |
| </div> |
| <div class="actions"> |
| <a class="button" href="${space.url}" target="_blank" rel="noreferrer">Open Space</a> |
| <a class="button secondary" href="${space.url}/tree/main" target="_blank" rel="noreferrer">Files</a> |
| </div> |
| `; |
| grid.appendChild(card); |
| }); |
| } |
| |
| search.addEventListener("input", render); |
| category.addEventListener("change", render); |
| render(); |
| </script> |
| </body> |
| </html> |
|
|
