index.html

<!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>