olivv-cs-ComfyUI-FunPack/easy_gen/frontend/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>FunPack · Easy Gen</title>
  <!-- Before the stylesheet on purpose: data-theme has to be on <html> for the
       first paint, or a light-theme user gets a dark flash on every load. -->
  <script src="theme.js"></script>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="styles.css" />
  <link rel="stylesheet" href="easy.css" />
  <script>
    (function () {
      // A single failed shared script (e.g. dom.js) cascades into near-identical
      // errors from every script that depends on it — keep the first few DISTINCT
      // messages instead of overwriting, so the root cause (usually the first one)
      // stays visible instead of being clobbered by the last script in load order.
      var seen = [];
      function show(msg) {
        if (seen.indexOf(msg) !== -1) return;
        seen.push(msg);
        if (seen.length > 5) return;
        var b = document.getElementById("boot-error");
        if (!b) {
          b = document.createElement("div"); b.id = "boot-error";
          b.style.cssText = "position:fixed;z-index:99999;left:0;right:0;top:0;padding:10px 34px 10px 14px;" +
            "background:#3a1320;color:#ffb3c1;font:12px/1.5 monospace;border-bottom:1px solid #e0566b;white-space:pre-wrap;max-height:60vh;overflow:auto";
          var x = document.createElement("button");
          x.textContent = "✕"; x.title = "Dismiss";
          x.style.cssText = "position:absolute;top:6px;right:8px;background:transparent;border:1px solid #e0566b;" +
            "color:#ffb3c1;border-radius:6px;cursor:pointer;font:12px monospace;padding:1px 7px;line-height:1.4";
          x.onclick = function () { b.remove(); };
          b.appendChild(x);
          (document.body || document.documentElement).appendChild(b);
        }
        var t = b.querySelector(".boot-error-text");
        if (!t) { t = document.createElement("span"); t.className = "boot-error-text"; b.insertBefore(t, b.firstChild); }
        t.textContent = "Easy Gen error(s) — " + seen.join("\n---\n")
          + "\n(restart ComfyUI + hard-reload Cmd/Ctrl+Shift+R; if it persists, send me this text)";
      }
      window.addEventListener("error", function (e) {
        if (e && e.target && e.target !== window && e.target.nodeName) return;
        show((e.message || "load error") + (e.filename ? "  @ " + e.filename.split("/").pop() + ":" + e.lineno : ""));
      }, true);
      window.addEventListener("unhandledrejection", function (e) {
        show("promise: " + ((e.reason && (e.reason.message || e.reason)) || "rejected"));
      });
    })();
  </script>
</head>
<body class="easy-body">
  <div class="easy-app" id="easy-app">
    <header class="easy-top">
      <a class="brand" href="/funpack/" title="FunPack Hub"><span class="brand-mark">◉</span> FunPack <span class="brand-sub">Easy Gen</span></a>
      <div class="easy-project-name" id="easy-project-name">No project</div>
      <span class="health-chip" id="easy-health-chip"></span>
      <div class="menubar-right">
        <button class="btn ghost tiny" id="easy-save-btn" type="button">Save</button>
        <button class="btn ghost tiny" id="easy-export-btn" type="button"
          title="Download this project as a .funpack_project.json file — e.g. to move it off a rental machine">Export…</button>
        <button class="btn ghost tiny" id="easy-projects-btn" type="button">Projects…</button>
      </div>
    </header>

    <main class="easy-preview" id="easy-preview"></main>

    <div class="easy-warn-strip" id="easy-warn-strip" hidden></div>

    <footer class="easy-bar">
      <button class="btn ghost easy-upload-btn" id="easy-upload-btn" type="button"
        title="Upload an image or video to guide generation">⬆ Upload</button>
      <button class="btn ghost easy-gallery-btn" id="easy-gallery-btn" type="button"
        title="Choose from previously uploaded media">🖼 Gallery</button>
      <button class="btn ghost easy-vars-btn" id="easy-vars-btn" type="button"
        title="Prompt $name variables — shorthand for full phrases, substituted at generation">$ Variables</button>
      <textarea class="easy-prompt" id="easy-prompt" rows="2"
        placeholder="Describe what you want to generate…"></textarea>
      <div class="easy-actions">
        <button class="btn primary easy-generate-btn" id="easy-generate-btn" type="button">Generate</button>
        <button class="btn ghost tiny easy-advanced-btn" id="easy-advanced-btn" type="button">Advanced settings</button>
      </div>
    </footer>
    <input type="file" id="easy-upload-input" accept="image/*,video/*" hidden />
  </div>

  <script>window.FunPackAppName = "Easy Gen";</script>
  <script src="api.js"></script>
  <script src="dom.js"></script>
  <script src="settings_window.js"></script>
  <script src="appearance_settings.js"></script>
  <script src="git_actions.js"></script>
  <script src="restart_ui.js"></script>
  <script src="slot_picker.js"></script>
  <script src="pipeline_caps.js"></script>
  <script src="models.js"></script>
  <script src="easy_store.js"></script>
  <script src="easy_maintenance.js"></script>
  <script src="easy_settings.js"></script>
  <script src="media_picker.js"></script>
  <script src="sampler_panel.js"></script>
  <script src="engine_settings.js"></script>
  <script src="easy_shortcuts_settings.js"></script>
  <script src="autocomplete.js"></script>
  <script src="project_menu.js"></script>
  <script src="pipeline_setup.js"></script>
  <script src="onboarding.js"></script>
  <script src="easy_gallery.js"></script>
  <script src="easy_variables.js"></script>
  <script src="log.js"></script>
  <script src="preview.js"></script>
  <script src="app.js"></script>
</body>
</html>