Persist gallery images in IndexedDB across page reloads

index.html

@@ -448,6 +448,50 @@ if (hostname.endsWith(".hf.space") || hostname.includes(".dev.")) {
   window.parent.postMessage(ZEROGPU_HEADERS_MSG, origin);
 }
 
+// ---- IndexedDB persistence ----
+const DB_NAME = "z-image-studio";
+const DB_STORE = "images";
+
+function openDB() {
+  return new Promise((resolve, reject) => {
+    const req = indexedDB.open(DB_NAME, 1);
+    req.onupgradeneeded = () => req.result.createObjectStore(DB_STORE, { keyPath: "id" });
+    req.onsuccess = () => resolve(req.result);
+    req.onerror = () => reject(req.error);
+  });
+}
+
+async function saveItem(item) {
+  const db = await openDB();
+  const tx = db.transaction(DB_STORE, "readwrite");
+  tx.objectStore(DB_STORE).put({ id: item.id, b64: item.b64, prompt: item.prompt, seed: item.seed, width: item.width, height: item.height });
+  db.close();
+}
+
+async function loadAll() {
+  const db = await openDB();
+  return new Promise((resolve) => {
+    const tx = db.transaction(DB_STORE, "readonly");
+    const req = tx.objectStore(DB_STORE).getAll();
+    req.onsuccess = () => { db.close(); resolve(req.result); };
+    req.onerror = () => { db.close(); resolve([]); };
+  });
+}
+
+async function clearDB() {
+  const db = await openDB();
+  const tx = db.transaction(DB_STORE, "readwrite");
+  tx.objectStore(DB_STORE).clear();
+  db.close();
+}
+
+async function deleteItem(id) {
+  const db = await openDB();
+  const tx = db.transaction(DB_STORE, "readwrite");
+  tx.objectStore(DB_STORE).delete(id);
+  db.close();
+}
+
 // State
 const gallery = [];
 let client = null;
@@ -475,6 +519,18 @@ const errorToast = document.getElementById("error-toast");
 
 // ---- Init ----
 async function init() {
+  // Restore persisted images
+  try {
+    const saved = await loadAll();
+    saved.sort((a, b) => b.id - a.id); // newest first
+    for (const item of saved) {
+      gallery.push(item);
+      renderGalleryItem(item);
+    }
+    updateGalleryHeader();
+  } catch (_) {}
+
+  // Connect to backend
   try {
     client = await Client.connect(window.location.origin);
     generateBtn.disabled = false;
@@ -515,6 +571,7 @@ async function generate() {
     placeholderItem.height = data.height;
     placeholderItem.pending = false;
     replacePlaceholder(placeholderItem);
+    saveItem(placeholderItem);
 
     if (randomSeedEl.checked) {
       seedInputEl.value = data.seed;
@@ -610,6 +667,7 @@ function clearGallery() {
   gallery.length = 0;
   galleryEl.innerHTML = "";
   updateGalleryHeader();
+  clearDB();
 }
 
 // ---- Lightbox ----