frontend/inline-assets.cjs

/**
 * Post-build: inline CSS and JS into index.html so the entire frontend
 * is served as a single response.  HuggingFace Spaces' proxy only
 * forwards the initial page request to the container — sub-resource
 * requests (JS, CSS) never arrive, so they must be embedded.
 */
const fs = require("fs");
const path = require("path");

const distDir = path.join(__dirname, "dist");
const htmlPath = path.join(distDir, "index.html");

if (!fs.existsSync(htmlPath)) {
  console.log("No dist/index.html — skipping inline");
  process.exit(0);
}

let html = fs.readFileSync(htmlPath, "utf8");

// Inline CSS <link> tags
html = html.replace(
  /<link[^>]+href="([^"]+\.css)"[^>]*\/?>/g,
  (match, href) => {
    const file = path.join(distDir, href.replace(/^\.\//, ""));
    if (!fs.existsSync(file)) return match;
    console.log("  CSS:", href);
    return "<style>" + fs.readFileSync(file, "utf8") + "</style>";
  }
);

// Inline JS <script> tags (escape </script> in content)
html = html.replace(
  /<script([^>]*)src="([^"]+\.js)"([^>]*)><\/script>/g,
  (match, _pre, src, _post) => {
    const file = path.join(distDir, src.replace(/^\.\//, ""));
    if (!fs.existsSync(file)) return match;
    console.log("  JS: ", src);
    const code = fs.readFileSync(file, "utf8").replace(/<\/script/gi, "<\\/script");
    return '<script type="module">' + code + "</script>";
  }
);

fs.writeFileSync(htmlPath, html);
console.log("Inlined assets into index.html:", Math.round(html.length / 1024), "KB");