Add first-load download progress indicator

static-app.js

@@ -27,14 +27,21 @@ const aspectLockIconEl = $("aspect-lock-icon");
 const aspectRatioEl = $("aspect-ratio");
 const settingsToggleButton = $("settings-toggle");
 const settingsPopoverEl = $("settings-popover");
-const themeToggleButton = $("theme-toggle");
-const themeIconEl = $("theme-icon");
-const galleryPanelEl = $("gallery-panel");
-const galleryGridEl = $("gallery-grid");
-const clearGalleryButton = $("clear-gallery");
-const urlDefaults = new URLSearchParams(window.location.search);
-const DEFAULT_PROMPT = "A small ceramic robot on a workbench, product photo lighting";
-const COMMON_RESOLUTIONS = [256, 512, 768, 1024];
+const themeToggleButton = $("theme-toggle");
+const themeIconEl = $("theme-icon");
+const galleryPanelEl = $("gallery-panel");
+const galleryGridEl = $("gallery-grid");
+const clearGalleryButton = $("clear-gallery");
+const loadProgressEl = $("load-progress");
+const loadProgressTitleEl = $("load-progress-title");
+const loadProgressSummaryEl = $("load-progress-summary");
+const loadProgressTrackEl = $("load-progress-track");
+const loadProgressFillEl = $("load-progress-fill");
+const loadProgressDetailEl = $("load-progress-detail");
+const loadProgressRateEl = $("load-progress-rate");
+const urlDefaults = new URLSearchParams(window.location.search);
+const DEFAULT_PROMPT = "A small ceramic robot on a workbench, product photo lighting";
+const COMMON_RESOLUTIONS = [256, 512, 768, 1024];
 const ASPECT_RATIOS = {
   "1:1": 1,
   "4:3": 4 / 3,
@@ -76,15 +83,41 @@ let backgroundVaeEncoderPreparePromise = null;
 let backgroundVaeEncoderPrepareKey = "";
 let backgroundDeepPrepareTimer = 0;
 let backgroundDeepPrepareToken = 0;
-const preparedInitImageCache = new WeakMap();
-const generationResultCache = new Map();
-const tokenizedPromptCache = new Map();
+const preparedInitImageCache = new WeakMap();
+const generationResultCache = new Map();
+const tokenizedPromptCache = new Map();
+const nativeFetch = globalThis.fetch.bind(globalThis);
+
+const loadProgressState = {
+  visible: false,
+  tracking: false,
+  completed: false,
+  startedAt: 0,
+  title: "Loading",
+  detail: "Starting",
+  estimatedTotalBytes: 0,
+  estimatedFiles: 0,
+  nextRequestId: 1,
+  requests: new Map(),
+  renderQueued: false,
+  timerId: 0,
+  hideTimerId: 0,
+};
 
 function formatMiB(bytes) {
   const value = Number(bytes || 0);
   return `${(value / (1024 * 1024)).toFixed(value >= 100 * 1024 * 1024 ? 0 : 1)} MiB`;
 }
 
+function formatBytesCompact(bytes) {
+  const value = Number(bytes || 0);
+  if (!Number.isFinite(value) || value <= 0) return "0 B";
+  if (value >= 1024 ** 3) return `${(value / 1024 ** 3).toFixed(value >= 10 * 1024 ** 3 ? 1 : 2)} GiB`;
+  if (value >= 1024 ** 2) return `${(value / 1024 ** 2).toFixed(value >= 100 * 1024 ** 2 ? 0 : 1)} MiB`;
+  if (value >= 1024) return `${(value / 1024).toFixed(value >= 100 * 1024 ? 0 : 1)} KiB`;
+  return `${Math.round(value)} B`;
+}
+
 function trimTrailingSlash(value) {
   return String(value || "").replace(/\/+$/, "");
 }
@@ -130,6 +163,219 @@ function resolveAssetUrl(baseUrl, path) {
   return new URL(path, new URL(withTrailingSlash(baseUrl), window.location.href)).toString();
 }
 
+function compactLoadUrlLabel(url) {
+  try {
+    const parsed = new URL(url, window.location.href);
+    const parts = parsed.pathname.split("/").filter(Boolean);
+    const tail = parts.slice(-3).join("/");
+    return tail || parsed.hostname;
+  } catch {
+    return String(url || "download");
+  }
+}
+
+function beginLoadProgress(title = "Loading") {
+  if (!loadProgressEl) return;
+  if (loadProgressState.hideTimerId) {
+    clearTimeout(loadProgressState.hideTimerId);
+    loadProgressState.hideTimerId = 0;
+  }
+  loadProgressState.visible = true;
+  loadProgressState.tracking = true;
+  loadProgressState.completed = false;
+  loadProgressState.startedAt = performance.now();
+  loadProgressState.title = title;
+  loadProgressState.detail = "Starting";
+  loadProgressState.estimatedTotalBytes = 0;
+  loadProgressState.estimatedFiles = 0;
+  loadProgressState.nextRequestId = 1;
+  loadProgressState.requests.clear();
+  loadProgressEl.hidden = false;
+  if (loadProgressState.timerId) clearInterval(loadProgressState.timerId);
+  loadProgressState.timerId = setInterval(renderLoadProgress, 250);
+  renderLoadProgress();
+}
+
+function setLoadPhase(detail, title = "") {
+  if (!loadProgressState.visible) return;
+  if (title) loadProgressState.title = title;
+  if (detail) loadProgressState.detail = detail;
+  scheduleLoadProgressRender();
+}
+
+function setLoadEstimate(totalBytes, expectedFiles = 0) {
+  if (!loadProgressState.visible) return;
+  const bytes = Number(totalBytes || 0);
+  if (Number.isFinite(bytes) && bytes > loadProgressState.estimatedTotalBytes) {
+    loadProgressState.estimatedTotalBytes = bytes;
+  }
+  const files = Number(expectedFiles || 0);
+  if (Number.isFinite(files) && files > loadProgressState.estimatedFiles) {
+    loadProgressState.estimatedFiles = files;
+  }
+  scheduleLoadProgressRender();
+}
+
+function finishLoadProgress(detail = "Ready", success = true) {
+  if (!loadProgressState.visible) return;
+  loadProgressState.tracking = false;
+  loadProgressState.completed = success;
+  if (!success) loadProgressState.title = detail;
+  loadProgressState.detail = detail;
+  if (success) {
+    const loaded = loadProgressTotals().loaded;
+    loadProgressState.estimatedTotalBytes = Math.max(loadProgressState.estimatedTotalBytes, loaded);
+  }
+  if (loadProgressState.timerId) {
+    clearInterval(loadProgressState.timerId);
+    loadProgressState.timerId = 0;
+  }
+  renderLoadProgress();
+  if (success) {
+    loadProgressState.hideTimerId = setTimeout(() => {
+      loadProgressState.visible = false;
+      if (loadProgressEl) loadProgressEl.hidden = true;
+    }, 4500);
+  }
+}
+
+function loadProgressTotals() {
+  let loaded = 0;
+  let dynamicTotal = 0;
+  let active = 0;
+  let completed = 0;
+  let failed = 0;
+  let current = "";
+  for (const request of loadProgressState.requests.values()) {
+    loaded += request.loaded || 0;
+    if (request.total) dynamicTotal += request.total;
+    if (request.failed) failed += 1;
+    if (request.done || request.failed) {
+      completed += 1;
+    } else {
+      active += 1;
+      current = request.label || current;
+    }
+  }
+  return {
+    loaded,
+    total: Math.max(loadProgressState.estimatedTotalBytes, dynamicTotal, loaded),
+    active,
+    completed,
+    failed,
+    current,
+  };
+}
+
+function renderLoadProgress() {
+  if (!loadProgressEl || !loadProgressState.visible) return;
+  loadProgressState.renderQueued = false;
+  const { loaded, total, active, completed, failed, current } = loadProgressTotals();
+  const elapsed = Math.max(0.001, (performance.now() - loadProgressState.startedAt) / 1000);
+  const rate = loaded / elapsed;
+  const hasTotal = total > 0;
+  const percent = hasTotal ? Math.max(0, Math.min(100, (loaded / total) * 100)) : 0;
+  const displayPercent = hasTotal && loadProgressState.tracking && active > 0
+    ? Math.min(percent, 99.5)
+    : percent;
+  const files = loadProgressState.estimatedFiles
+    ? `${Math.min(completed, loadProgressState.estimatedFiles)}/${loadProgressState.estimatedFiles} files`
+    : `${completed}${active ? ` +${active}` : ""} files`;
+  const summary = !loadProgressState.tracking && !loadProgressState.completed
+    ? "Error"
+    : loadProgressState.completed
+    ? "Ready"
+    : hasTotal
+      ? `${displayPercent.toFixed(displayPercent >= 10 ? 0 : 1)}%`
+      : "Loading";
+  const detailParts = [
+    hasTotal ? `${formatBytesCompact(loaded)} / ${formatBytesCompact(total)}` : `${formatBytesCompact(loaded)} downloaded`,
+    files,
+    failed ? `${failed} failed` : "",
+    current || loadProgressState.detail,
+  ].filter(Boolean);
+  loadProgressTitleEl.textContent = loadProgressState.title;
+  loadProgressSummaryEl.textContent = summary;
+  loadProgressDetailEl.textContent = detailParts.join(" | ");
+  loadProgressRateEl.textContent = `${formatBytesCompact(rate)}/s | ${elapsed.toFixed(1)}s`;
+  loadProgressTrackEl.classList.toggle("indeterminate", !hasTotal && loadProgressState.tracking);
+  loadProgressFillEl.style.width = hasTotal ? `${loadProgressState.completed ? 100 : displayPercent}%` : "";
+}
+
+function scheduleLoadProgressRender() {
+  if (!loadProgressState.visible || loadProgressState.renderQueued) return;
+  loadProgressState.renderQueued = true;
+  requestAnimationFrame(renderLoadProgress);
+}
+
+function shouldTrackLoadFetch(input, init, response) {
+  if (!loadProgressState.tracking || !response || !response.body) return false;
+  const method = String(init?.method || (input && typeof input === "object" && input.method) || "GET").toUpperCase();
+  if (method !== "GET") return false;
+  return true;
+}
+
+function trackLoadFetch(input, response) {
+  const url = response.url || (typeof input === "string" ? input : input?.url) || "";
+  const totalHeader = response.headers.get("content-length");
+  const total = totalHeader ? Number(totalHeader) : 0;
+  const id = loadProgressState.nextRequestId++;
+  const request = {
+    id,
+    url,
+    label: compactLoadUrlLabel(url),
+    total: Number.isFinite(total) && total > 0 ? total : 0,
+    loaded: 0,
+    done: false,
+    failed: false,
+  };
+  loadProgressState.requests.set(id, request);
+  scheduleLoadProgressRender();
+
+  const reader = response.body.getReader();
+  const stream = new ReadableStream({
+    async pull(controller) {
+      try {
+        const { done, value } = await reader.read();
+        if (done) {
+          request.done = true;
+          scheduleLoadProgressRender();
+          controller.close();
+          return;
+        }
+        request.loaded += value.byteLength || value.length || 0;
+        scheduleLoadProgressRender();
+        controller.enqueue(value);
+      } catch (err) {
+        request.failed = true;
+        scheduleLoadProgressRender();
+        controller.error(err);
+      }
+    },
+    cancel(reason) {
+      request.done = true;
+      scheduleLoadProgressRender();
+      return reader.cancel(reason);
+    },
+  });
+
+  return new Response(stream, {
+    status: response.status,
+    statusText: response.statusText,
+    headers: response.headers,
+  });
+}
+
+function installLoadProgressFetch() {
+  if (globalThis.__flux2LoadProgressFetchInstalled) return;
+  globalThis.__flux2LoadProgressFetchInstalled = true;
+  globalThis.fetch = async (input, init) => {
+    const response = await nativeFetch(input, init);
+    if (!shouldTrackLoadFetch(input, init, response)) return response;
+    return trackLoadFetch(input, response);
+  };
+}
+
 function huggingFaceResolveSpec(baseUrl) {
   let url;
   try {
@@ -477,16 +723,24 @@ function maskFromLength(length, seqLen) {
 
 async function loadTokenizer() {
   if (tokenizerPromise) return tokenizerPromise;
+  setLoadPhase("Loading tokenizer");
   const modelBaseUrl = configuredModelBaseUrl();
   const tokenizerSpec = tokenizerLoadSpec(modelBaseUrl);
   env.allowLocalModels = !tokenizerSpec.remote;
   env.allowRemoteModels = tokenizerSpec.remote;
   env.localModelPath = "/";
-  tokenizerPromise = AutoTokenizer.from_pretrained(tokenizerSpec.source, tokenizerSpec.options);
+  tokenizerPromise = AutoTokenizer.from_pretrained(tokenizerSpec.source, {
+    ...tokenizerSpec.options,
+    progress_callback: (progress) => {
+      const file = progress?.file ? compactLoadUrlLabel(progress.file) : "tokenizer";
+      const status = progress?.status ? ` ${progress.status}` : "";
+      setLoadPhase(`Loading ${file}${status}`);
+    },
+  });
   return tokenizerPromise;
 }
-
-async function tokenizePrompt(prompt, seqLen) {
+
+async function tokenizePrompt(prompt, seqLen) {
   const cachePayload = JSON.stringify({ model: "flux.2-klein-4b", text_seq_len: seqLen, prompt });
   const promptCacheKey = await sha256Hex(cachePayload);
   const cacheKey = `${seqLen}|${promptCacheKey}`;
@@ -528,6 +782,7 @@ async function initEngine() {
     const engine = await waitForEngine();
     const modelBaseUrl = configuredModelBaseUrl();
     const runtimeBaseUrl = configuredRuntimeBaseUrl(modelBaseUrl);
+    setLoadPhase("Loading model config and runtime manifest");
     const result = await engine.init(modelBaseUrl, {
       executionProvider: "webgpu",
       customKernelBaseUrl: configuredCustomKernelBaseUrl(modelBaseUrl, runtimeBaseUrl),
@@ -1050,14 +1305,106 @@ function assetPrepareKeyForRequest(request) {
   });
 }
 
-function shouldAssetPrepareRequest(request) {
-  if (urlFlag("noAutowarm") || urlFlag("noAssetWarm")) return false;
-  return request.transformerBackend === "custom-lowbit-webgpu";
-}
-
-function textContextPrepareKeyForRequest(request) {
-  return JSON.stringify({
-    prompt: request.prompt,
+function shouldAssetPrepareRequest(request) {
+  if (urlFlag("noAutowarm") || urlFlag("noAssetWarm")) return false;
+  return request.transformerBackend === "custom-lowbit-webgpu";
+}
+
+function fullManifestLinearById(manifest, id) {
+  const linears = Array.isArray(manifest?.linears) ? manifest.linears : [];
+  return linears.find((item) => item.id === id || item.name === id || item.source_node === id) || null;
+}
+
+function fullManifestQkNormById(manifest, id) {
+  const qkNorms = Array.isArray(manifest?.constants?.qk_norms) ? manifest.constants.qk_norms : [];
+  return qkNorms.find((item) => item.id === id || item.name === id) || null;
+}
+
+function estimateLinearAssetBytes(linear) {
+  if (!linear) return { bytes: 0, files: 0 };
+  if (linear.i8_dp4a) {
+    const packed = Number(linear.i8_dp4a.packed_u32_count || 0) * 4;
+    const scales = Number(linear.i8_dp4a.scale_count || 0) * 4;
+    return { bytes: packed + scales, files: 2 };
+  }
+  if (linear.q4) {
+    const qweight = Number(linear.q4.qweight_u32_count || linear.q4.packed_u32_count || 0) * 4;
+    const scales = Number(linear.q4.scale_count || 0) * 2;
+    const zeroPoints = Number(linear.q4.zero_point_count || linear.q4.zero_points_u32_count || 0) * 4;
+    return { bytes: qweight + scales + zeroPoints, files: 3 };
+  }
+  return { bytes: 0, files: 0 };
+}
+
+function estimateQkNormBytes(entry) {
+  if (!entry) return { bytes: 0, files: 0 };
+  const count = Array.isArray(entry.shape) && Number.isFinite(Number(entry.shape[0])) ? Number(entry.shape[0]) : 128;
+  return { bytes: count * 2 * 2, files: 2 };
+}
+
+function estimateCustomTransformerAssetSet(manifest, request) {
+  const doubleBlockCount = Math.max(1, Math.min(5, Math.trunc(Number(request.speed.customMaxDoubleBlocks || 5))));
+  const singleBlockCount = Math.max(0, Math.min(20, Math.trunc(Number(request.speed.customMaxSingleBlocks || 20))));
+  const linearIds = ["img_in", "txt_in", "final_layer.linear"];
+  const qkNormIds = [];
+  for (let block = 0; block < doubleBlockCount; block += 1) {
+    linearIds.push(
+      `double_blocks.${block}.img_attn.qkv`,
+      `double_blocks.${block}.txt_attn.qkv`,
+      `double_blocks.${block}.img_attn.proj`,
+      `double_blocks.${block}.txt_attn.proj`,
+      `double_blocks.${block}.img_mlp.0`,
+      `double_blocks.${block}.img_mlp.2`,
+      `double_blocks.${block}.txt_mlp.0`,
+      `double_blocks.${block}.txt_mlp.2`,
+    );
+    qkNormIds.push(`double_blocks.${block}.img_attn.norm`, `double_blocks.${block}.txt_attn.norm`);
+  }
+  for (let block = 0; block < singleBlockCount; block += 1) {
+    linearIds.push(`single_blocks.${block}.linear1`, `single_blocks.${block}.linear2`);
+    qkNormIds.push(`single_blocks.${block}.norm`);
+  }
+  let bytes = 0;
+  let files = 0;
+  for (const id of linearIds) {
+    const estimate = estimateLinearAssetBytes(fullManifestLinearById(manifest, id));
+    bytes += estimate.bytes;
+    files += estimate.files;
+  }
+  for (const id of qkNormIds) {
+    const estimate = estimateQkNormBytes(fullManifestQkNormById(manifest, id));
+    bytes += estimate.bytes;
+    files += estimate.files;
+  }
+  return { bytes, files, doubleBlockCount, singleBlockCount };
+}
+
+async function prepareCustomAssetLoadEstimate(request) {
+  if (!loadProgressState.visible || !shouldAssetPrepareRequest(request)) return null;
+  try {
+    const modelBaseUrl = configuredModelBaseUrl();
+    const runtimeBaseUrl = configuredRuntimeBaseUrl(modelBaseUrl);
+    const customKernelBaseUrl = configuredCustomKernelBaseUrl(modelBaseUrl, runtimeBaseUrl);
+    const manifestUrl = resolveAssetUrl(customKernelBaseUrl, "full_transformer/manifest.json");
+    setLoadPhase("Reading transformer asset manifest");
+    const response = await fetch(manifestUrl);
+    if (!response.ok) throw new Error(`HTTP ${response.status}`);
+    const manifest = await response.json();
+    const estimate = estimateCustomTransformerAssetSet(manifest, request);
+    if (estimate.bytes > 0) {
+      setLoadEstimate(estimate.bytes, estimate.files);
+      setLoadPhase(`Downloading transformer assets (${formatBytesCompact(estimate.bytes)})`);
+    }
+    return estimate;
+  } catch (err) {
+    console.warn("[flux2] custom asset byte estimate failed", err);
+    return null;
+  }
+}
+
+function textContextPrepareKeyForRequest(request) {
+  return JSON.stringify({
+    prompt: request.prompt,
     backend: request.transformerBackend,
     textLimit: request.speed.customTextTokenLimit,
     minText: request.speed.customMinTextTokens,
@@ -1077,10 +1424,11 @@ function startBackgroundTextContextPrepareForCurrentSettings(request = readReque
   const key = textContextPrepareKeyForRequest(prepareRequest);
   if (backgroundTextContextPreparePromise && backgroundTextContextPrepareKey === key) return true;
   backgroundTextContextPrepareKey = key;
-  backgroundTextContextPreparePromise = initEngine()
-    .then(async ({ engine, init }) => {
-      if (typeof engine.encodeText !== "function") return null;
-      const seqLen = Number(init.config.text_seq_len || 512);
+  backgroundTextContextPreparePromise = initEngine()
+    .then(async ({ engine, init }) => {
+      if (typeof engine.encodeText !== "function") return null;
+      setLoadPhase("Preparing text context");
+      const seqLen = Number(init.config.text_seq_len || 512);
       const tokenized = await tokenizePrompt(prepareRequest.prompt, seqLen);
       const params = buildGenerateParams(prepareRequest, tokenized, null);
       if (typeof engine.prepareCustomTransformerTextProjection === "function") {
@@ -1142,11 +1490,12 @@ function startBackgroundTransformerSetupPrepareForCurrentSettings(request = read
   const key = `${transformerSetupPrepareKeyForRequest(prepareRequest)}|dispatch=${dispatchWarmup ? 1 : 0}`;
   if (backgroundTransformerSetupPreparePromise && backgroundTransformerSetupPrepareKey === key) return true;
   backgroundTransformerSetupPrepareKey = key;
-  backgroundTransformerSetupPreparePromise = initEngine()
-    .then(async ({ engine, init }) => {
-      if (typeof engine.prepareCustomTransformerStageSetup !== "function") return null;
-      const seqLen = Number(init.config.text_seq_len || 512);
-      const tokenized = await tokenizePrompt(prepareRequest.prompt, seqLen);
+  backgroundTransformerSetupPreparePromise = initEngine()
+    .then(async ({ engine, init }) => {
+      if (typeof engine.prepareCustomTransformerStageSetup !== "function") return null;
+      setLoadPhase(dispatchWarmup ? "Preparing transformer dispatch warmup" : "Preparing transformer setup");
+      const seqLen = Number(init.config.text_seq_len || 512);
+      const tokenized = await tokenizePrompt(prepareRequest.prompt, seqLen);
       const plannedTextTokens = plannedCustomTextTokens(prepareRequest, tokenized.attentionMask, seqLen);
       return await engine.prepareCustomTransformerStageSetup({
         width: prepareRequest.width,
@@ -1225,12 +1574,13 @@ function startBackgroundAssetPrepareForCurrentSettings(request = readRequest())
   const key = assetPrepareKeyForRequest(request);
   if (backgroundAssetPreparePromise && backgroundAssetPrepareKey === key) return true;
   backgroundAssetPrepareKey = key;
-  backgroundAssetPreparePromise = initEngine()
-    .then(({ engine }) => {
-      if (typeof engine.prepareCustomTransformerAssets !== "function") return null;
-      return engine.prepareCustomTransformerAssets({
-        maxDoubleBlocks: request.speed.customMaxDoubleBlocks || 5,
-        maxSingleBlocks: request.speed.customMaxSingleBlocks || 20,
+  backgroundAssetPreparePromise = initEngine()
+    .then(({ engine }) => {
+      if (typeof engine.prepareCustomTransformerAssets !== "function") return null;
+      setLoadPhase("Downloading transformer assets");
+      return engine.prepareCustomTransformerAssets({
+        maxDoubleBlocks: request.speed.customMaxDoubleBlocks || 5,
+        maxSingleBlocks: request.speed.customMaxSingleBlocks || 20,
       });
     })
     .then((result) => {
@@ -1286,10 +1636,11 @@ function startBackgroundVaeEncoderPrepareForCurrentSettings(request = readReques
   const key = vaeEncoderPrepareKeyForRequest(request);
   if (backgroundVaeEncoderPreparePromise && backgroundVaeEncoderPrepareKey === key) return true;
   backgroundVaeEncoderPrepareKey = key;
-  backgroundVaeEncoderPreparePromise = initEngine()
-    .then(async ({ engine }) => {
-      if (typeof engine.prepareVaeEncoderLatent !== "function") return null;
-      const renderSize = plannedRenderSizeForRequest(request);
+  backgroundVaeEncoderPreparePromise = initEngine()
+    .then(async ({ engine }) => {
+      if (typeof engine.prepareVaeEncoderLatent !== "function") return null;
+      setLoadPhase("Preparing source image latent");
+      const renderSize = plannedRenderSizeForRequest(request);
       const initImage = await prepareInitImage(renderSize.width, renderSize.height, request.fitMode);
       if (!initImage) return null;
       return await engine.prepareVaeEncoderLatent({
@@ -1363,10 +1714,11 @@ function startBackgroundVaePrepareForCurrentSettings(request = readRequest()) {
   if (backgroundVaePreparePromise && backgroundVaePrepareKey === key) return true;
   backgroundVaePrepareKey = key;
   const plannedDecodeMax = plannedDecodeMaxForRequest(prepareRequest);
-  backgroundVaePreparePromise = initEngine()
-    .then(({ engine }) => {
-      if (typeof engine.prepareVaeSessions !== "function") return null;
-      return engine.prepareVaeSessions({
+  backgroundVaePreparePromise = initEngine()
+    .then(({ engine }) => {
+      if (typeof engine.prepareVaeSessions !== "function") return null;
+      setLoadPhase(dispatchWarmup ? "Preparing VAE dispatch warmup" : "Preparing VAE sessions");
+      return engine.prepareVaeSessions({
         width: prepareRequest.width,
         height: prepareRequest.height,
         hasInitImage: prepareRequest.hasInitImage,
@@ -2330,16 +2682,18 @@ async function prepareInitialFastPath(request) {
   const shouldPrepareVae = shouldVaePrepareRequest(prepareRequest);
   if (!shouldPrepareAssets && !shouldPrepareTransformer && !shouldPrepareVae) return false;
 
-  setStatus([
-    "Preparing fast path",
-    `Backend: ${prepareRequest.transformerBackend}`,
-    `Speed Profile: ${speedProfileLabel(prepareRequest.speed)}`,
-    prepareRequest.previewRenderMaxSize ? `Preview render: ${prepareRequest.previewRenderMaxSize}px max` : "",
-    prepareRequest.previewDecodeMaxSize ? `Preview decode: ${prepareRequest.previewDecodeMaxSize}px max` : "",
-  ]);
-
-  startBackgroundAssetPrepareForCurrentSettings(request);
-  const assetPromise = backgroundAssetPreparePromise;
+  setStatus([
+    "Preparing fast path",
+    `Backend: ${prepareRequest.transformerBackend}`,
+    `Speed Profile: ${speedProfileLabel(prepareRequest.speed)}`,
+    prepareRequest.previewRenderMaxSize ? `Preview render: ${prepareRequest.previewRenderMaxSize}px max` : "",
+    prepareRequest.previewDecodeMaxSize ? `Preview decode: ${prepareRequest.previewDecodeMaxSize}px max` : "",
+  ]);
+  setLoadPhase("Preparing fast path");
+
+  if (shouldPrepareAssets) await prepareCustomAssetLoadEstimate(prepareRequest);
+  startBackgroundAssetPrepareForCurrentSettings(request);
+  const assetPromise = backgroundAssetPreparePromise;
   if (assetPromise) {
     try {
       await assetPromise;
@@ -2360,25 +2714,29 @@ async function prepareInitialFastPath(request) {
 
   if (foregroundBusy) return true;
   const finalPrepareRequest = progressiveFinalPrepareRequestForRequest(currentRequest);
-  if (finalPrepareRequest && warmKeyForRequest(readRequest()) === warmKeyForRequest(request)) {
-    setStatus([
-      "Preparing refinement path",
+  if (finalPrepareRequest && warmKeyForRequest(readRequest()) === warmKeyForRequest(request)) {
+    setStatus([
+      "Preparing refinement path",
       `Backend: ${finalPrepareRequest.transformerBackend}`,
       `Speed Profile: ${speedProfileLabel(finalPrepareRequest.speed)}`,
       finalPrepareRequest.previewRenderMaxSize ? `Preview render: ${finalPrepareRequest.previewRenderMaxSize}px max` : "",
-      finalPrepareRequest.previewDecodeMaxSize ? `Preview decode: ${finalPrepareRequest.previewDecodeMaxSize}px max` : "",
-    ]);
-    startStageAndVaePrepareForRequest(finalPrepareRequest);
-    await waitForStartedPreparePromises();
-  }
+      finalPrepareRequest.previewDecodeMaxSize ? `Preview decode: ${finalPrepareRequest.previewDecodeMaxSize}px max` : "",
+    ]);
+    setLoadPhase("Preparing refinement path");
+    startStageAndVaePrepareForRequest(finalPrepareRequest);
+    await waitForStartedPreparePromises();
+  }
   return true;
 }
 
-async function boot() {
-  try {
-    setStatus("Loading browser runtime");
-    const [{ init }, tokenizer] = await Promise.all([initEngine(), loadTokenizer()]);
-    const bootRequest = readRequest();
+async function boot() {
+  beginLoadProgress("First load");
+  try {
+    installLoadProgressFetch();
+    setStatus("Loading browser runtime");
+    setLoadPhase("Loading browser runtime");
+    const [{ init }, tokenizer] = await Promise.all([initEngine(), loadTokenizer()]);
+    const bootRequest = readRequest();
     const fastPathPrepared = await prepareInitialFastPath(bootRequest);
     runButton.disabled = false;
     setButtonDisabled(warmButton, false);
@@ -2389,18 +2747,20 @@ async function boot() {
       seedInputLine(),
       `Tokenizer: ${tokenizer.constructor?.name || "loaded"}`,
       `Full image backend: ${init.customKernels?.fullImageBackend || "unknown"}`,
-    ]);
-    if (!fastPathPrepared) {
-      startBackgroundAssetPrepareForCurrentSettings(bootRequest);
-      scheduleBackgroundStageAndVaePrepareForCurrentSettings(bootRequest);
-    }
-    if (shouldAutoWarmRequest(bootRequest)) startBackgroundWarmForCurrentSettings();
-  } catch (err) {
-    runButton.disabled = true;
-    setButtonDisabled(warmButton, true);
-    setStatus(err?.stack || err?.message || String(err), true);
-  }
-}
+    ]);
+    if (!fastPathPrepared) {
+      startBackgroundAssetPrepareForCurrentSettings(bootRequest);
+      scheduleBackgroundStageAndVaePrepareForCurrentSettings(bootRequest);
+    }
+    if (shouldAutoWarmRequest(bootRequest)) startBackgroundWarmForCurrentSettings();
+    finishLoadProgress(fastPathPrepared ? "Fast path prepared" : "Ready");
+  } catch (err) {
+    runButton.disabled = true;
+    setButtonDisabled(warmButton, true);
+    setStatus(err?.stack || err?.message || String(err), true);
+    finishLoadProgress("Load failed", false);
+  }
+}
 
 warmButton?.addEventListener("click", () => {
   if (foregroundBusy) return;

static.html

@@ -387,15 +387,85 @@
       font-weight: 750;
       min-width: 96px;
     }
-    .elapsed-meter.active {
-      border-color: var(--accent);
-      color: var(--accent-strong);
-      background: var(--accent-soft);
-    }
-    pre {
-      margin: 16px 0 0;
-      padding: 12px;
-      min-height: 132px;
+    .elapsed-meter.active {
+      border-color: var(--accent);
+      color: var(--accent-strong);
+      background: var(--accent-soft);
+    }
+    .load-progress {
+      margin: 14px 0 0;
+      padding: 12px;
+      border: 1px solid var(--line);
+      border-radius: var(--radius);
+      background: var(--panel-2);
+    }
+    .load-progress[hidden] {
+      display: none;
+    }
+    .load-progress-head,
+    .load-progress-meta {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+    }
+    .load-progress-title {
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-size: 12px;
+      font-weight: 800;
+      color: var(--text);
+    }
+    .load-progress-summary {
+      flex: 0 0 auto;
+      color: var(--accent-strong);
+      font-size: 12px;
+      font-weight: 800;
+    }
+    .load-progress-track {
+      position: relative;
+      height: 9px;
+      margin: 10px 0 8px;
+      overflow: hidden;
+      border-radius: 999px;
+      background: color-mix(in srgb, var(--line) 55%, transparent);
+    }
+    .load-progress-fill {
+      width: 0%;
+      height: 100%;
+      border-radius: inherit;
+      background: var(--accent);
+      transition: width 160ms ease;
+    }
+    .load-progress-track.indeterminate .load-progress-fill {
+      width: 42%;
+      animation: load-progress-sweep 1.15s ease-in-out infinite;
+    }
+    @keyframes load-progress-sweep {
+      0% { transform: translateX(-110%); }
+      100% { transform: translateX(245%); }
+    }
+    .load-progress-meta {
+      color: var(--muted);
+      font: 11px/1.35 ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
+    }
+    .load-progress-detail {
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .load-progress-rate {
+      flex: 0 0 auto;
+      color: var(--muted);
+      white-space: nowrap;
+    }
+    pre {
+      margin: 16px 0 0;
+      padding: 12px;
+      min-height: 132px;
       border: 1px solid var(--line);
       border-radius: var(--radius);
       background: var(--panel-2);
@@ -628,13 +698,26 @@
         <input id="decode-max" type="hidden" value="0">
         <input id="render-max" type="hidden" value="0">
       </div>
-      <div class="actions">
-        <button id="run" type="button" disabled><span class="icon">auto_awesome</span>Generate</button>
-        <button id="abort" class="secondary" type="button" disabled><span class="icon">stop</span>Stop</button>
-        <div id="elapsed" class="elapsed-meter" aria-live="polite">0.0s</div>
-      </div>
-      <pre id="status">Loading</pre>
-    </aside>
+      <div class="actions">
+        <button id="run" type="button" disabled><span class="icon">auto_awesome</span>Generate</button>
+        <button id="abort" class="secondary" type="button" disabled><span class="icon">stop</span>Stop</button>
+        <div id="elapsed" class="elapsed-meter" aria-live="polite">0.0s</div>
+      </div>
+      <div id="load-progress" class="load-progress" aria-live="polite" hidden>
+        <div class="load-progress-head">
+          <div id="load-progress-title" class="load-progress-title">Loading</div>
+          <div id="load-progress-summary" class="load-progress-summary">0%</div>
+        </div>
+        <div id="load-progress-track" class="load-progress-track">
+          <div id="load-progress-fill" class="load-progress-fill"></div>
+        </div>
+        <div class="load-progress-meta">
+          <div id="load-progress-detail" class="load-progress-detail">Starting</div>
+          <div id="load-progress-rate" class="load-progress-rate">0 MiB/s</div>
+        </div>
+      </div>
+      <pre id="status">Loading</pre>
+    </aside>
     <section>
       <div class="stage">
         <img id="image" alt="Generated image" hidden>