fix: remove raw-id badge from scrapbook moment cards; lock photo browser + add Cancel while a caption/title is generating

index.html

@@ -1707,7 +1707,13 @@
     // ----------------------------------------------------------------- //
     // components/details-form.tsx
     // ----------------------------------------------------------------- //
-    function DetailsForm({ title, onTitleChange, caption, onCaptionChange, date, onDateChange, time, onTimeChange, tags, onTagsChange, onSubmit, onAutoCaption, autoBusy, autoStage, autoError, captionPrompt, onCaptionPromptChange, captionModel, onAutoTitle, titleBusy, titleStage, titleError, titlePrompt, onTitlePromptChange, onAutoTags, tagsBusy, tagsStage, tagsError, tagsPrompt, onTagsPromptChange }) {
+    function DetailsForm({ title, onTitleChange, caption, onCaptionChange, date, onDateChange, time, onTimeChange, tags, onTagsChange, onSubmit, onAutoCaption, autoBusy, autoStage, autoError, captionPrompt, onCaptionPromptChange, captionModel, onAutoTitle, titleBusy, titleStage, titleError, titlePrompt, onTitlePromptChange, onAutoTags, tagsBusy, tagsStage, tagsError, tagsPrompt, onTagsPromptChange, onCancelGen }) {
+      const CancelGen = () => (
+        <button type="button" onClick={onCancelGen}
+          className="relative shrink-0 rounded-full border-2 border-primary/40 bg-card/85 px-2.5 py-0.5 font-mono text-[10px] uppercase tracking-wide text-primary transition-colors hover:bg-accent hover:text-foreground">
+          Cancel
+        </button>
+      );
       const [showPrompt, setShowPrompt] = useState(false);
       const [showTitlePrompt, setShowTitlePrompt] = useState(false);
       const [showTagsPrompt, setShowTagsPrompt] = useState(false);
@@ -1782,6 +1788,7 @@
                     <span className="size-1.5 rounded-full bg-primary" style={{ animation: "sozai-bounce 1s infinite", animationDelay: "150ms" }} />
                     <span className="size-1.5 rounded-full bg-primary" style={{ animation: "sozai-bounce 1s infinite", animationDelay: "300ms" }} />
                   </span>
+                  <CancelGen />
                 </div>
               ) : null}
             </div>
@@ -1849,6 +1856,7 @@
                     <span className="size-1.5 rounded-full bg-primary" style={{ animation: "sozai-bounce 1s infinite", animationDelay: "150ms" }} />
                     <span className="size-1.5 rounded-full bg-primary" style={{ animation: "sozai-bounce 1s infinite", animationDelay: "300ms" }} />
                   </span>
+                  <CancelGen />
                 </div>
               ) : null}
             </div>
@@ -2155,7 +2163,23 @@
         removingRef.current = false;   // allow the next click immediately
       }
 
+      // A run of any auto-generation registers a token here. The photo browser
+      // is locked while it's set (so a result can't land on the wrong photo),
+      // and Cancel flips `cancelled` + clears the timers so the async result is
+      // dropped instead of written back.
+      const genRef = useRef(null);
+      const genBusy = autoBusy || titleBusy || tagsBusy;
+      function cancelGeneration() {
+        const g = genRef.current;
+        if (g) { g.cancelled = true; g.timers.forEach((t) => { clearInterval(t); clearTimeout(t); }); }
+        genRef.current = null;
+        setAutoBusy(false); setAutoStage("");
+        setTitleBusy(false); setTitleStage("");
+        setTagsBusy(false); setTagsStage("");
+      }
+
       function changePhoto(delta) {
+        if (genBusy) return;                   // locked while developing
         if (stackPhotos.length <= 1) return;   // nothing to browse
         setSlideDir(delta > 0 ? "right" : "left");
         setPhotoIndex((prev) => {
@@ -2190,17 +2214,26 @@
         if (!photo) return;
         if (window.sozaiPing) window.sozaiPing("✨ auto-generating caption");
         setAutoBusy(true); setAutoError(null);
+        const token = { cancelled: false, timers: [] };
+        genRef.current = token;
         let stageIdx = 0;
         setAutoStage(AUTO_STAGES[0]);
         const stageTimer = setInterval(() => {
           stageIdx = Math.min(stageIdx + 1, AUTO_STAGES.length - 1);
           setAutoStage(AUTO_STAGES[stageIdx]);
         }, 900);
+        token.timers.push(stageTimer);
         const started = Date.now();
         const finish = (fn) => {
           // ensure the lovely animation is visible for at least a beat
           const wait = Math.max(0, 700 - (Date.now() - started));
-          setTimeout(() => { clearInterval(stageTimer); fn(); setAutoBusy(false); setAutoStage(""); }, wait);
+          const t = setTimeout(() => {
+            clearInterval(stageTimer);
+            if (token.cancelled) return;          // cancelled mid-flight: drop it
+            fn(); setAutoBusy(false); setAutoStage("");
+            if (genRef.current === token) genRef.current = null;
+          }, wait);
+          token.timers.push(t);
         };
         try {
           const gr = await window.__gradioReady;
@@ -2226,16 +2259,25 @@
         if (!photo) return;
         if (window.sozaiPing) window.sozaiPing("✨ auto-generating title");
         setTitleBusy(true); setTitleError(null);
+        const token = { cancelled: false, timers: [] };
+        genRef.current = token;
         let stageIdx = 0;
         setTitleStage(TITLE_STAGES[0]);
         const stageTimer = setInterval(() => {
           stageIdx = Math.min(stageIdx + 1, TITLE_STAGES.length - 1);
           setTitleStage(TITLE_STAGES[stageIdx]);
         }, 900);
+        token.timers.push(stageTimer);
         const started = Date.now();
         const finish = (fn) => {
           const wait = Math.max(0, 700 - (Date.now() - started));
-          setTimeout(() => { clearInterval(stageTimer); fn(); setTitleBusy(false); setTitleStage(""); }, wait);
+          const t = setTimeout(() => {
+            clearInterval(stageTimer);
+            if (token.cancelled) return;
+            fn(); setTitleBusy(false); setTitleStage("");
+            if (genRef.current === token) genRef.current = null;
+          }, wait);
+          token.timers.push(t);
         };
         // a title-specific default so a blank prompt still yields a *title*,
         // kept independent from the caption prompt.
@@ -2288,16 +2330,25 @@
         if (!photo) return;
         if (window.sozaiPing) window.sozaiPing("🏷️ auto-generating tags");
         setTagsBusy(true); setTagsError(null);
+        const token = { cancelled: false, timers: [] };
+        genRef.current = token;
         let stageIdx = 0;
         setTagsStage(TAGS_STAGES[0]);
         const stageTimer = setInterval(() => {
           stageIdx = Math.min(stageIdx + 1, TAGS_STAGES.length - 1);
           setTagsStage(TAGS_STAGES[stageIdx]);
         }, 900);
+        token.timers.push(stageTimer);
         const started = Date.now();
         const finish = (fn) => {
           const wait = Math.max(0, 700 - (Date.now() - started));
-          setTimeout(() => { clearInterval(stageTimer); fn(); setTagsBusy(false); setTagsStage(""); }, wait);
+          const t = setTimeout(() => {
+            clearInterval(stageTimer);
+            if (token.cancelled) return;
+            fn(); setTagsBusy(false); setTagsStage("");
+            if (genRef.current === token) genRef.current = null;
+          }, wait);
+          token.timers.push(t);
         };
         try {
           const gr = await window.__gradioReady;
@@ -2403,13 +2454,13 @@
               <input ref={addPhotoRef} type="file" accept={ACCEPT_ATTR} multiple className="hidden" onChange={onAddPhotos} />
               {stackPhotos.length >= 1 && (
                 <div className="flex items-start gap-3">
-                  <button type="button" onClick={() => changePhoto(-1)} aria-label="Previous photo" className="sozai-sway-l flex size-9 items-center justify-center rounded-full border-2 border-primary/25 text-primary/55 transition-all hover:border-primary hover:bg-accent hover:text-primary"><ChevronLeft className="size-4" /></button>
+                  <button type="button" onClick={() => changePhoto(-1)} disabled={genBusy} aria-label="Previous photo" title={genBusy ? "Developing… cancel to browse" : "Previous photo"} className="sozai-sway-l flex size-9 items-center justify-center rounded-full border-2 border-primary/25 text-primary/55 transition-all hover:border-primary hover:bg-accent hover:text-primary disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:border-primary/25 disabled:hover:bg-transparent"><ChevronLeft className="size-4" /></button>
                   <div className="flex flex-col items-center gap-1">
                     <button type="button" onClick={() => addPhotoRef.current && addPhotoRef.current.click()} aria-label="Add photos" title="Add photos" className="flex size-9 items-center justify-center rounded-full border-2 border-primary bg-primary text-primary-foreground transition-colors hover:opacity-90"><Plus className="size-4" /></button>
                     <span className="font-mono text-[9px] uppercase tracking-wide text-primary">upload</span>
                   </div>
                   <button type="button" onClick={onRemovePhoto} aria-label="Remove this photo" title="Remove this photo" className="flex size-9 items-center justify-center rounded-full border-2 border-[#800020] bg-[#800020] text-white transition-colors hover:opacity-90"><Trash2 className="size-4" /></button>
-                  <button type="button" onClick={() => changePhoto(1)} aria-label="Next photo" className="sozai-sway-r flex size-9 items-center justify-center rounded-full border-2 border-primary/25 text-primary/55 transition-all hover:border-primary hover:bg-accent hover:text-primary"><ChevronRight className="size-4" /></button>
+                  <button type="button" onClick={() => changePhoto(1)} disabled={genBusy} aria-label="Next photo" title={genBusy ? "Developing… cancel to browse" : "Next photo"} className="sozai-sway-r flex size-9 items-center justify-center rounded-full border-2 border-primary/25 text-primary/55 transition-all hover:border-primary hover:bg-accent hover:text-primary disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:border-primary/25 disabled:hover:bg-transparent"><ChevronRight className="size-4" /></button>
                 </div>
               )}
               {/* How this works - fills the left-column negative space */}
@@ -2436,7 +2487,8 @@
                 onAutoTitle={handleAutoTitle} titleBusy={titleBusy} titleStage={titleStage} titleError={titleError}
                 titlePrompt={settings.titlePrompt || ""} onTitlePromptChange={setTitlePrompt}
                 onAutoTags={handleAutoTags} tagsBusy={tagsBusy} tagsStage={tagsStage} tagsError={tagsError}
-                tagsPrompt={settings.tagsPrompt || ""} onTagsPromptChange={(v) => update({ tagsPrompt: v })} />
+                tagsPrompt={settings.tagsPrompt || ""} onTagsPromptChange={(v) => update({ tagsPrompt: v })}
+                onCancelGen={cancelGeneration} />
               {validationError ? <p role="alert" className="rounded-md border-2 border-[oklch(0.55_0.18_25)]/50 bg-[oklch(0.55_0.18_25)]/10 px-3 py-2 text-center font-mono text-[11px] uppercase tracking-wide text-[oklch(0.5_0.18_25)]">{validationError}</p> : null}
               {confirmation ? <p role="status" className="rounded-md border-2 border-primary/40 bg-accent px-3 py-2 text-center text-sm text-accent-foreground">{confirmation}</p> : null}
 
@@ -2493,7 +2545,6 @@
         <button type="button" onClick={() => onSelect && onSelect(moment.id)} style={{ left: `${moment.x}%`, top: `${moment.y}%` }}
           className={cn("group absolute z-10 w-44 -translate-x-1/2 -translate-y-1/2 rounded-sm border-2 border-primary bg-card p-2 text-left shadow-md transition-transform hover:z-20 hover:scale-105 sm:w-52", rotate, selected && "z-20 ring-4 ring-primary/30")}>
           <span aria-hidden="true" className="absolute -top-2.5 left-1/2 h-4 w-12 -translate-x-1/2 -rotate-2 rounded-sm bg-primary/15" />
-          <span className="absolute right-2 top-2 z-10 flex size-6 items-center justify-center rounded-full border-2 border-primary bg-card font-mono text-xs font-bold text-primary">{moment.id}</span>
           <div className="relative aspect-[4/3] w-full overflow-hidden rounded-sm border border-primary/30"><Img src={moment.src} alt={moment.alt} fill sizes="208px" className="object-cover [filter:saturate(0.85)_contrast(1.05)]" /></div>
           <div className="px-0.5 pb-0.5 pt-2">
             <div className="flex items-start justify-between gap-1">