build_static.py

"""Emit the static Space: index.html + style.css.

No server, no container. The chart is pre-rendered to SVG here and the numbers
ride along in the page as JSON, so the browser has everything it needs on first
paint. The only script is a few lines to pin the hover box on click.

Usage:
  python3 fetch_data.py      # refresh the numbers
  python3 build_static.py    # rebuild index.html and style.css
"""
from __future__ import annotations

import json
from pathlib import Path

import render

HERE = Path(__file__).parent

# Static hosting serves the page directly, so unlike the Gradio build the click
# handler is just a script — nothing strips it.
PIN_JS = """
(function () {
  "use strict";
  document.addEventListener("click", function (e) {
    if (e.target.closest(".tts-rel")) return;      // logos are links
    var slot = e.target.closest(".tts-slot");
    document.querySelectorAll(".tts-slot.is-pinned").forEach(function (s) {
      if (s !== slot) s.classList.remove("is-pinned");
    });
    if (!slot) return;
    var pinned = slot.classList.toggle("is-pinned");
    if (!pinned && slot.blur) slot.blur();          // else :focus keeps it open
  });
  document.addEventListener("keydown", function (e) {
    if (e.key !== "Escape") return;
    document.querySelectorAll(".tts-slot.is-pinned").forEach(function (s) {
      s.classList.remove("is-pinned");
    });
  });
})();
"""

PAGE_CSS = """
/* the page is the whole document here, not a component inside a framework */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: #ffffff;
  color: #111111;
  font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.tts-page { max-width: 1080px; margin: 0 auto; padding: 26px 24px 30px; }
@media (max-width: 600px) { .tts-page { padding: 18px 14px 22px; } }
"""


def main() -> None:
    d = render.load()
    releases = [r for r in render.load_releases() if r["date"][:7] >= render.START_MONTH]

    (HERE / "style.css").write_text(
        PAGE_CSS.lstrip() + "\n" + render.CSS.strip() + "\n\n"
        + render.month_css(d, releases) + "\n"
    )

    page = render.build_page(d, releases)
    html = f"""<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{render.esc(render.TASK["title"])}</title>
<meta name="description" content="Public model repos tagged {render.esc(render.TASK["tag"])} on the Hugging Face Hub, by the month each was created, with landmark releases.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&display=swap">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="tts-page">{page}</div>

<!-- the numbers the chart above was drawn from, for anyone who wants them -->
<script type="application/json" id="tts-data">{json.dumps(d, separators=(",", ":"))}</script>
<script type="application/json" id="tts-releases">{json.dumps(releases, separators=(",", ":"))}</script>
<script>{PIN_JS.strip()}</script>
</body>
</html>
"""
    (HERE / "index.html").write_text(html)
    print(f"index.html  {len(html):,} bytes")
    print(f"style.css   {(HERE / 'style.css').stat().st_size:,} bytes")
    print(f"{d['total']:,} models · {len(releases)} landmark releases · as of {d['retrieved']}")


if __name__ == "__main__":
    main()