feat: expand media discovery and AI workflows #8

Merged
LyAhn merged 25 commits from codex/5-discovery-features into main 2026-06-07 22:43:16 +00:00
5 changed files with 740 additions and 342 deletions
Showing only changes of commit a9dd2b2797 - Show all commits
+23 -1
View File
@@ -5,6 +5,7 @@ mod embedder;
mod indexer;
mod media;
mod storage;
mod tagger;
mod thumbnail;
mod vector;
@@ -67,7 +68,9 @@ pub fn run() {
}
indexer::start_metadata_worker(app.handle().clone(), pool.clone(), media_tools.clone());
indexer::start_embedding_worker(app.handle().clone(), pool.clone());
indexer::start_caption_worker(app.handle().clone(), pool.clone(), app_dir.clone());
// Caption worker disabled — UI removed; keeping backend code intact for future use.
// indexer::start_caption_worker(app.handle().clone(), pool.clone(), app_dir.clone());
indexer::start_tagging_worker(app.handle().clone(), pool.clone(), app_dir.clone());
app.manage(pool);
app.manage(media_tools);
@@ -87,18 +90,37 @@ pub fn run() {
commands::retry_failed_embeddings,
commands::semantic_search_images,
commands::get_caption_model_status,
commands::get_caption_acceleration,
commands::set_caption_acceleration,
commands::get_caption_detail,
commands::set_caption_detail,
commands::prepare_caption_model,
commands::delete_caption_model,
commands::probe_caption_runtime,
commands::probe_caption_image,
commands::generate_caption_for_image,
commands::queue_caption_jobs,
commands::clear_caption_jobs,
commands::reset_generated_captions,
commands::set_generated_caption,
commands::suggest_image_tags,
commands::set_worker_paused,
commands::get_worker_states,
commands::get_tag_cloud,
commands::get_failed_embedding_images,
commands::get_tagger_model_status,
commands::get_tagger_acceleration,
commands::set_tagger_acceleration,
commands::probe_tagger_runtime,
commands::get_tagger_threshold,
commands::set_tagger_threshold,
commands::prepare_tagger_model,
commands::delete_tagger_model,
commands::queue_tagging_jobs,
commands::clear_tagging_jobs,
commands::get_image_tags,
commands::add_user_tag,
commands::remove_tag,
])
.run(tauri::generate_context!())
.expect("error while running tauri application");
+32 -24
View File
@@ -2,13 +2,13 @@ import { useEffect, useMemo, useState } from "react";
import { invoke } from "@tauri-apps/api/core";
import { useGalleryStore } from "../store";
type WorkerKey = "thumbnail" | "metadata" | "embedding" | "caption";
type WorkerKey = "thumbnail" | "metadata" | "embedding" | "tagging";
const WORKER_FOR_STAGE: Record<string, WorkerKey> = {
Thumbnails: "thumbnail",
Metadata: "metadata",
Embeddings: "embedding",
Captions: "caption",
Tags: "tagging",
};
interface TaskStage {
@@ -23,7 +23,7 @@ interface Task {
name: string;
stages: TaskStage[];
hasFailedEmbeddings: boolean;
hasFailedCaptions: boolean;
hasFailedTagging: boolean;
pendingMediaWork: number;
embeddingProcessed: number;
embeddingTotal: number;
@@ -42,14 +42,14 @@ interface FolderWorkerStates {
thumbnail_paused: boolean;
metadata_paused: boolean;
embedding_paused: boolean;
caption_paused: boolean;
tagging_paused: boolean;
}
const DEFAULT_PAUSED_STATE: Record<WorkerKey, boolean> = {
thumbnail: false,
metadata: false,
embedding: false,
caption: false,
tagging: false,
};
export function BackgroundTasks() {
@@ -57,6 +57,7 @@ export function BackgroundTasks() {
const indexingProgress = useGalleryStore((state) => state.indexingProgress);
const mediaJobProgress = useGalleryStore((state) => state.mediaJobProgress);
const retryFailedEmbeddings = useGalleryStore((state) => state.retryFailedEmbeddings);
const clearTaggingJobs = useGalleryStore((state) => state.clearTaggingJobs);
const [expanded, setExpanded] = useState(false);
const [dismissed, setDismissed] = useState<Record<number, string>>({});
const [paused, setPaused] = useState<Record<number, Record<WorkerKey, boolean>>>({});
@@ -78,7 +79,7 @@ export function BackgroundTasks() {
thumbnail: state.thumbnail_paused,
metadata: state.metadata_paused,
embedding: state.embedding_paused,
caption: state.caption_paused,
tagging: state.tagging_paused,
},
]),
),
@@ -126,6 +127,7 @@ export function BackgroundTasks() {
};
const dismissTask = (id: number, snapshot: string) => {
void clearTaggingJobs(id);
setDismissed((prev) => ({ ...prev, [id]: snapshot }));
setExpanded(false);
};
@@ -141,16 +143,19 @@ export function BackgroundTasks() {
const embeddingPending = jobs?.embedding_pending ?? 0;
const embeddingReady = jobs?.embedding_ready ?? 0;
const embeddingFailed = jobs?.embedding_failed ?? 0;
const captionPending = jobs?.caption_pending ?? 0;
const captionFailed = jobs?.caption_failed ?? 0;
const taggingPending = jobs?.tagging_pending ?? 0;
const taggingReady = jobs?.tagging_ready ?? 0;
const taggingFailed = jobs?.tagging_failed ?? 0;
const pendingMediaWork = thumbnailPending + metadataPending + embeddingPending + captionPending;
const pendingMediaWork = thumbnailPending + metadataPending + embeddingPending + taggingPending;
const embeddingProcessed = embeddingReady + embeddingFailed;
const embeddingTotal = embeddingProcessed + embeddingPending;
const taggingProcessed = taggingReady + taggingFailed;
const taggingTotal = taggingProcessed + taggingPending;
const hasFailedEmbeddings = embeddingFailed > 0;
const hasFailedCaptions = captionFailed > 0;
const hasFailedTagging = taggingFailed > 0;
if (!index && pendingMediaWork === 0 && !hasFailedEmbeddings && !hasFailedCaptions) return null;
if (!index && pendingMediaWork === 0 && !hasFailedEmbeddings && !hasFailedTagging) return null;
const stages: TaskStage[] = [];
@@ -192,11 +197,12 @@ export function BackgroundTasks() {
});
}
if (captionPending > 0) {
if (taggingPending > 0) {
const pct = taggingTotal > 0 ? (taggingProcessed / taggingTotal) * 100 : 0;
stages.push({
label: "Captions",
detail: captionPending.toLocaleString(),
progress: null,
label: "Tags",
detail: `${taggingProcessed.toLocaleString()} / ${taggingTotal.toLocaleString()}`,
progress: pct,
failed: false,
});
}
@@ -210,23 +216,23 @@ export function BackgroundTasks() {
});
}
if (hasFailedCaptions && pendingMediaWork === 0) {
if (hasFailedTagging && pendingMediaWork === 0) {
stages.push({
label: "Failed",
detail: `${captionFailed.toLocaleString()} captions`,
detail: `${taggingFailed.toLocaleString()} tags`,
progress: null,
failed: true,
});
}
const snapshot = `${pendingMediaWork}:${embeddingFailed}:${captionFailed}`;
const snapshot = `${pendingMediaWork}:${embeddingFailed}:${taggingFailed}`;
return {
id: folder.id,
name: folder.name,
stages,
hasFailedEmbeddings,
hasFailedCaptions,
hasFailedTagging,
pendingMediaWork,
embeddingProcessed,
embeddingTotal,
@@ -242,13 +248,14 @@ export function BackgroundTasks() {
const primary = tasks[0];
const extraCount = tasks.length - 1;
const hasFailed = tasks.some((t) => (t.hasFailedEmbeddings || t.hasFailedCaptions) && t.pendingMediaWork === 0);
const hasFailed = tasks.some((t) => (t.hasFailedEmbeddings || t.hasFailedTagging) && t.pendingMediaWork === 0);
// Best progress bar value: use embedding progress if available (most informative),
// otherwise fall back to scanning progress, otherwise indeterminate.
// otherwise tagging progress, otherwise fall back to scanning progress, otherwise indeterminate.
const embeddingStage = primary.stages.find((s) => s.label === "Embeddings");
const taggingStage = primary.stages.find((s) => s.label === "Tags");
const scanningStage = primary.stages.find((s) => s.label === "Scanning");
const barProgress = embeddingStage?.progress ?? scanningStage?.progress ?? null;
const barProgress = embeddingStage?.progress ?? taggingStage?.progress ?? scanningStage?.progress ?? null;
return (
<div className="shrink-0 border-b border-white/[0.06]">
@@ -368,9 +375,10 @@ export function BackgroundTasks() {
<div className="border-t border-white/[0.06] bg-white/[0.02] px-5 py-3 space-y-3">
{tasks.map((task) => {
const taskEmbeddingStage = task.stages.find((s) => s.label === "Embeddings");
const taskTaggingStage = task.stages.find((s) => s.label === "Tags");
const taskScanningStage = task.stages.find((s) => s.label === "Scanning");
const taskBarProgress = taskEmbeddingStage?.progress ?? taskScanningStage?.progress ?? null;
const taskHasFailed = (task.hasFailedEmbeddings || task.hasFailedCaptions) && task.pendingMediaWork === 0;
const taskBarProgress = taskEmbeddingStage?.progress ?? taskTaggingStage?.progress ?? taskScanningStage?.progress ?? null;
const taskHasFailed = (task.hasFailedEmbeddings || task.hasFailedTagging) && task.pendingMediaWork === 0;
return (
<div key={task.id}>
+127 -131
View File
@@ -1,7 +1,7 @@
import { useEffect, useCallback, useRef, useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { convertFileSrc } from "@tauri-apps/api/core";
import { useGalleryStore } from "../store";
import { useGalleryStore, ImageTag, AiRating } from "../store";
function formatBytes(bytes: number): string {
if (bytes < 1024) return `${bytes} B`;
@@ -45,29 +45,37 @@ function embeddingLabel(status: string, model: string | null): string {
return "Queued";
}
function ratingPill(rating: AiRating): { label: string; className: string } {
switch (rating) {
case "general":
return { label: "General", className: "border-emerald-400/25 bg-emerald-500/10 text-emerald-300" };
case "sensitive":
return { label: "Sensitive", className: "border-sky-400/25 bg-sky-500/10 text-sky-300" };
case "questionable":
return { label: "Questionable", className: "border-amber-400/25 bg-amber-500/10 text-amber-300" };
case "explicit":
return { label: "Explicit", className: "border-red-400/25 bg-red-500/10 text-red-300" };
}
}
export function Lightbox() {
const selectedImage = useGalleryStore((state) => state.selectedImage);
const selectedFolderId = useGalleryStore((state) => state.selectedFolderId);
const closeImage = useGalleryStore((state) => state.closeImage);
const images = useGalleryStore((state) => state.images);
const openImage = useGalleryStore((state) => state.openImage);
const loadSimilarImages = useGalleryStore((state) => state.loadSimilarImages);
const updateImageDetails = useGalleryStore((state) => state.updateImageDetails);
const suggestImageTags = useGalleryStore((state) => state.suggestImageTags);
const captionModelStatus = useGalleryStore((state) => state.captionModelStatus);
const captionModelPreparing = useGalleryStore((state) => state.captionModelPreparing);
const captionModelError = useGalleryStore((state) => state.captionModelError);
const captionModelProgress = useGalleryStore((state) => state.captionModelProgress);
const aiCaptionsEnabled = useGalleryStore((state) => state.aiCaptionsEnabled);
const setAiCaptionsEnabled = useGalleryStore((state) => state.setAiCaptionsEnabled);
const setSettingsOpen = useGalleryStore((state) => state.setSettingsOpen);
const prepareCaptionModel = useGalleryStore((state) => state.prepareCaptionModel);
const queueCaptionForImage = useGalleryStore((state) => state.queueCaptionForImage);
const queueCaptionJobs = useGalleryStore((state) => state.queueCaptionJobs);
const getImageTags = useGalleryStore((state) => state.getImageTags);
const addUserTag = useGalleryStore((state) => state.addUserTag);
const removeTag = useGalleryStore((state) => state.removeTag);
const taggerModelStatus = useGalleryStore((state) => state.taggerModelStatus);
const queueTaggingForImage = useGalleryStore((state) => state.queueTaggingForImage);
const [zoom, setZoom] = useState(1);
const [suggestedTags, setSuggestedTags] = useState<string[]>([]);
const [captionQueueing, setCaptionQueueing] = useState(false);
const [captionQueueStatus, setCaptionQueueStatus] = useState<string | null>(null);
const [imageTags, setImageTags] = useState<ImageTag[]>([]);
const [tagInput, setTagInput] = useState("");
const [tagAdding, setTagAdding] = useState(false);
const [tagsExpanded, setTagsExpanded] = useState(false);
const [taggingQueued, setTaggingQueued] = useState(false);
const imageViewportRef = useRef<HTMLDivElement>(null);
const currentIndex = selectedImage ? images.findIndex((image) => image.id === selectedImage.id) : -1;
@@ -83,16 +91,18 @@ export function Lightbox() {
useEffect(() => {
setZoom(1);
setSuggestedTags([]);
setCaptionQueueStatus(null);
setImageTags([]);
setTagInput("");
setTagsExpanded(false);
setTaggingQueued(false);
}, [selectedImage?.id]);
useEffect(() => {
if (!selectedImage?.generated_caption) return;
void suggestImageTags(selectedImage.id)
.then(setSuggestedTags)
.catch(() => setSuggestedTags([]));
}, [selectedImage?.id, selectedImage?.generated_caption, suggestImageTags]);
if (!selectedImage) return;
void getImageTags(selectedImage.id)
.then(setImageTags)
.catch(() => setImageTags([]));
}, [selectedImage?.id, getImageTags]);
useEffect(() => {
const viewport = imageViewportRef.current;
@@ -207,8 +217,8 @@ export function Lightbox() {
</AnimatePresence>
</div>
<div className="flex w-72 shrink-0 flex-col border-l border-white/5 bg-gray-900/95 p-5">
<div className="mb-5 flex items-center justify-between">
<div className="flex w-72 shrink-0 flex-col border-l border-white/5 bg-gray-900/95">
<div className="flex shrink-0 items-center justify-between px-5 pt-5 pb-4">
<div className="min-w-0">
<p className="truncate text-sm font-medium text-white">{selectedImage.filename}</p>
<p className="text-xs text-gray-500">Details</p>
@@ -245,7 +255,7 @@ export function Lightbox() {
</button>
</div>
<div className="space-y-4 text-sm">
<div className="min-h-0 flex-1 overflow-y-auto px-5 pb-4 space-y-4 text-sm">
<div>
<p className="mb-1 text-xs uppercase tracking-wider text-gray-500">Rating</p>
<div className="flex items-center gap-1">
@@ -341,116 +351,102 @@ export function Lightbox() {
</div>
<div>
<p className="mb-1 text-xs uppercase tracking-wider text-gray-500">AI Caption</p>
{selectedImage.generated_caption ? (
<>
<p className="text-white">{selectedImage.generated_caption}</p>
{suggestedTags.length > 0 ? (
<div className="mt-2 flex flex-wrap gap-1.5">
{suggestedTags.map((tag) => (
<span
key={tag}
className="rounded-md border border-white/10 bg-white/5 px-2 py-0.5 text-xs text-gray-300"
>
{tag}
</span>
))}
</div>
) : null}
{selectedImage.caption_model ? (
<p className="mt-1 text-xs text-gray-600">{selectedImage.caption_model}</p>
) : null}
</>
) : (
<>
<p className="text-gray-600">
{selectedImage.caption_error ?? "Not generated"}
</p>
{captionModelStatus?.ready ? (
<>
<p className={`mt-2 text-xs ${aiCaptionsEnabled ? "text-emerald-400/70" : "text-gray-600"}`}>
{aiCaptionsEnabled ? "Florence-2 enabled locally" : "Florence-2 downloaded but disabled"}
</p>
<div className="mt-2 flex flex-wrap gap-2">
<button
className="rounded-md border border-white/10 bg-white/5 px-3 py-1.5 text-xs text-gray-300 transition-colors hover:bg-white/10 hover:text-white"
onClick={() => setAiCaptionsEnabled(!aiCaptionsEnabled)}
>
{aiCaptionsEnabled ? "Disable captions" : "Enable captions"}
</button>
{selectedImage.media_kind === "image" && aiCaptionsEnabled ? (
<button
className="rounded-md border border-white/10 bg-white/5 px-3 py-1.5 text-xs text-gray-300 transition-colors hover:bg-white/10 hover:text-white disabled:cursor-not-allowed disabled:opacity-50"
onClick={() => {
setCaptionQueueing(true);
setCaptionQueueStatus(null);
void queueCaptionForImage(selectedImage.id)
.then(() => setCaptionQueueStatus("Queued for background captions."))
.catch((error) => setCaptionQueueStatus(String(error)))
.finally(() => setCaptionQueueing(false));
}}
disabled={captionQueueing}
>
{captionQueueing ? "Queueing..." : "Queue caption"}
</button>
) : null}
{aiCaptionsEnabled ? (
<button
className="rounded-md border border-white/10 bg-white/5 px-3 py-1.5 text-xs text-gray-300 transition-colors hover:bg-white/10 hover:text-white disabled:cursor-not-allowed disabled:opacity-50"
onClick={() => {
setCaptionQueueing(true);
setCaptionQueueStatus(null);
void queueCaptionJobs(selectedFolderId)
.then((queued) =>
setCaptionQueueStatus(
queued === 0
? "No missing captions found."
: `Queued ${queued.toLocaleString()} image${queued === 1 ? "" : "s"} for background captions.`,
),
)
.catch((error) => setCaptionQueueStatus(String(error)))
.finally(() => setCaptionQueueing(false));
}}
disabled={captionQueueing}
>
{selectedFolderId === null ? "Queue all" : "Queue folder"}
</button>
) : null}
</div>
{captionQueueStatus ? (
<p className="mt-2 break-all text-xs text-gray-500">{captionQueueStatus}</p>
) : null}
</>
) : (
<button
className="mt-2 rounded-md border border-white/10 bg-white/5 px-3 py-1.5 text-xs text-gray-300 transition-colors hover:bg-white/10 hover:text-white disabled:cursor-not-allowed disabled:opacity-50"
onClick={() => void prepareCaptionModel()}
disabled={captionModelPreparing}
>
{captionModelProgress
? `Downloading ${captionModelProgress.completed_files}/${captionModelProgress.total_files}`
: captionModelPreparing
? "Preparing Florence-2..."
: "Enable local captions"}
</button>
)}
{captionModelProgress?.current_file ? (
<p className="mt-2 break-all text-xs text-gray-600">{captionModelProgress.current_file}</p>
) : null}
{captionModelError ? (
<p className="mt-2 text-xs text-amber-300">{captionModelError}</p>
) : null}
{!captionModelStatus?.ready && !captionModelError ? (
<p className="mt-2 text-xs text-gray-600">Downloads Florence-2 on demand for offline captions.</p>
<div className="mb-2 flex items-center justify-between">
<p className="text-xs uppercase tracking-wider text-gray-500">Tags</p>
<div className="flex items-center gap-1.5">
{selectedImage.ai_rating ? (
<span className={`rounded-md border px-1.5 py-0.5 text-[10px] font-medium ${ratingPill(selectedImage.ai_rating).className}`}>
{ratingPill(selectedImage.ai_rating).label}
</span>
) : null}
<button
className="mt-2 block text-xs text-gray-500 transition-colors hover:text-gray-300"
onClick={() => setSettingsOpen(true)}
className="rounded-md border border-white/10 bg-white/5 px-2 py-0.5 text-[10px] text-gray-400 transition-colors hover:bg-white/10 hover:text-white disabled:cursor-not-allowed disabled:opacity-40"
disabled={!(taggerModelStatus?.ready ?? false) || taggingQueued}
title={!(taggerModelStatus?.ready ?? false) ? "WD Tagger model not downloaded" : "Queue AI tagging for this image"}
onClick={() => {
setTaggingQueued(true);
void queueTaggingForImage(selectedImage.id).catch(() => undefined);
}}
>
Open settings
{taggingQueued ? "Queued" : "AI tags"}
</button>
</div>
</div>
{imageTags.length > 0 ? (
<>
<div className="flex flex-wrap gap-1.5">
{(tagsExpanded ? imageTags : imageTags.slice(0, 8)).map((t) => (
<span
key={t.id}
className={`group flex items-center gap-1 rounded-md border px-2 py-0.5 text-xs ${
t.source === "ai"
? "border-sky-400/20 bg-sky-500/8 text-sky-300"
: "border-white/10 bg-white/5 text-gray-300"
}`}
title={t.source === "ai" && t.confidence !== null ? `AI confidence: ${(t.confidence * 100).toFixed(0)}%` : undefined}
>
{t.tag}
<button
className="text-gray-600 opacity-0 transition-opacity hover:text-white group-hover:opacity-100"
onClick={() => {
void removeTag(t.id).then(() =>
setImageTags((prev) => prev.filter((x) => x.id !== t.id)),
);
}}
title="Remove tag"
>
<svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</span>
))}
</div>
{imageTags.length > 8 && (
<button
className="mt-1.5 text-xs text-gray-500 hover:text-gray-300 transition-colors"
onClick={() => setTagsExpanded((v) => !v)}
>
{tagsExpanded ? "Show less" : `+${imageTags.length - 8} more`}
</button>
)}
</>
) : (
<p className="text-xs text-gray-600">No tags yet</p>
)}
<form
className="mt-2 flex gap-1.5"
onSubmit={(e) => {
e.preventDefault();
const raw = tagInput.trim();
if (!raw || tagAdding) return;
setTagAdding(true);
void addUserTag(selectedImage.id, raw)
.then((newTag) => {
setImageTags((prev) => [...prev, newTag]);
setTagInput("");
})
.catch(() => undefined)
.finally(() => setTagAdding(false));
}}
>
<input
className="min-w-0 flex-1 rounded-md border border-white/10 bg-white/5 px-2 py-1 text-xs text-white placeholder-gray-600 focus:border-white/20 focus:outline-none"
placeholder="Add tag…"
value={tagInput}
onChange={(e) => setTagInput(e.target.value)}
disabled={tagAdding}
/>
<button
type="submit"
className="rounded-md border border-white/10 bg-white/5 px-2.5 py-1 text-xs text-gray-300 transition-colors hover:bg-white/10 hover:text-white disabled:cursor-not-allowed disabled:opacity-50"
disabled={tagAdding || !tagInput.trim()}
>
Add
</button>
</form>
</div>
<div>
@@ -459,7 +455,7 @@ export function Lightbox() {
</div>
</div>
<div className="mt-auto pt-4 text-center text-xs text-gray-600">
<div className="shrink-0 mt-auto px-5 pb-4 pt-2 text-center text-xs text-gray-600">
{currentIndex + 1} / {images.length}
</div>
</div>
+290 -182
View File
@@ -1,48 +1,15 @@
import { useEffect, useState } from "react";
import { useGalleryStore } from "../store";
import { TaggerAcceleration, useGalleryStore } from "../store";
type SettingsSection = "ai" | "library" | "display" | "storage";
type SettingsSection = "tagging" | "library" | "display" | "storage";
const SECTIONS: { id: SettingsSection; label: string; detail: string }[] = [
{ id: "ai", label: "Local AI", detail: "Captions and suggestions" },
{ id: "tagging", label: "AI Tagging", detail: "WD tagger model" },
{ id: "library", label: "Library", detail: "Indexing and scanning" },
{ id: "display", label: "Display", detail: "Gallery preferences" },
{ id: "storage", label: "Storage", detail: "Cache and model files" },
];
function ToggleSwitch({
checked,
disabled,
onChange,
label,
}: {
checked: boolean;
disabled?: boolean;
onChange: (checked: boolean) => void;
label: string;
}) {
return (
<button
type="button"
role="switch"
aria-checked={checked}
aria-label={label}
disabled={disabled}
onClick={() => onChange(!checked)}
className={`relative h-7 w-12 shrink-0 rounded-full border transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-emerald-400/30 disabled:cursor-not-allowed disabled:opacity-45 ${
checked
? "border-emerald-400/50 bg-emerald-500/35"
: "border-white/12 bg-white/[0.06]"
}`}
>
<span
className={`absolute left-0.5 top-0.5 h-6 w-6 rounded-full bg-white shadow-lg shadow-black/40 transition-transform duration-150 ${
checked ? "translate-x-5" : "translate-x-0"
}`}
/>
</button>
);
}
function StatusPill({ children, tone }: { children: React.ReactNode; tone: "ready" | "muted" | "busy" }) {
const className =
@@ -59,6 +26,34 @@ function StatusPill({ children, tone }: { children: React.ReactNode; tone: "read
);
}
function TaggerAccelerationButton({
acceleration,
current,
onSelect,
children,
}: {
acceleration: TaggerAcceleration;
current: TaggerAcceleration;
onSelect: (acceleration: TaggerAcceleration) => void;
children: React.ReactNode;
}) {
const active = acceleration === current;
return (
<button
type="button"
className={`rounded-md border px-3 py-1.5 text-xs transition-colors ${
active
? "border-emerald-400/35 bg-emerald-500/15 text-emerald-200"
: "border-white/10 bg-white/[0.045] text-gray-500 hover:bg-white/[0.075] hover:text-gray-200"
}`}
onClick={() => onSelect(acceleration)}
>
{children}
</button>
);
}
function SettingsRow({
title,
description,
@@ -98,50 +93,52 @@ function SectionShell({
}
export function SettingsModal() {
const [activeSection, setActiveSection] = useState<SettingsSection>("ai");
const [captionQueueStatus, setCaptionQueueStatus] = useState<string | null>(null);
const [captionQueueing, setCaptionQueueing] = useState(false);
const [activeSection, setActiveSection] = useState<SettingsSection>("tagging");
const [taggerQueueStatus, setTaggerQueueStatus] = useState<string | null>(null);
const [taggerQueueing, setTaggerQueueing] = useState(false);
const [taggerClearing, setTaggerClearing] = useState(false);
const [taggerAccelerationSaving, setTaggerAccelerationSaving] = useState(false);
const [taggerThresholdDraft, setTaggerThresholdDraft] = useState<string | null>(null);
const [taggerThresholdSaving, setTaggerThresholdSaving] = useState(false);
const settingsOpen = useGalleryStore((state) => state.settingsOpen);
const setSettingsOpen = useGalleryStore((state) => state.setSettingsOpen);
const folders = useGalleryStore((state) => state.folders);
const selectedFolderId = useGalleryStore((state) => state.selectedFolderId);
const captionModelStatus = useGalleryStore((state) => state.captionModelStatus);
const captionModelPreparing = useGalleryStore((state) => state.captionModelPreparing);
const captionModelProgress = useGalleryStore((state) => state.captionModelProgress);
const captionModelError = useGalleryStore((state) => state.captionModelError);
const captionRuntimeProbe = useGalleryStore((state) => state.captionRuntimeProbe);
const captionRuntimeChecking = useGalleryStore((state) => state.captionRuntimeChecking);
const aiCaptionsEnabled = useGalleryStore((state) => state.aiCaptionsEnabled);
const setAiCaptionsEnabled = useGalleryStore((state) => state.setAiCaptionsEnabled);
const prepareCaptionModel = useGalleryStore((state) => state.prepareCaptionModel);
const deleteCaptionModel = useGalleryStore((state) => state.deleteCaptionModel);
const probeCaptionRuntime = useGalleryStore((state) => state.probeCaptionRuntime);
const queueCaptionJobs = useGalleryStore((state) => state.queueCaptionJobs);
const folders = useGalleryStore((state) => state.folders);
const taggerModelStatus = useGalleryStore((state) => state.taggerModelStatus);
const taggerModelPreparing = useGalleryStore((state) => state.taggerModelPreparing);
const taggerModelProgress = useGalleryStore((state) => state.taggerModelProgress);
const taggerModelError = useGalleryStore((state) => state.taggerModelError);
const taggerAcceleration = useGalleryStore((state) => state.taggerAcceleration);
const taggerThreshold = useGalleryStore((state) => state.taggerThreshold);
const taggerRuntimeProbe = useGalleryStore((state) => state.taggerRuntimeProbe);
const taggerRuntimeChecking = useGalleryStore((state) => state.taggerRuntimeChecking);
const loadTaggerModelStatus = useGalleryStore((state) => state.loadTaggerModelStatus);
const prepareTaggerModel = useGalleryStore((state) => state.prepareTaggerModel);
const deleteTaggerModel = useGalleryStore((state) => state.deleteTaggerModel);
const loadTaggerAcceleration = useGalleryStore((state) => state.loadTaggerAcceleration);
const setTaggerAcceleration = useGalleryStore((state) => state.setTaggerAcceleration);
const loadTaggerThreshold = useGalleryStore((state) => state.loadTaggerThreshold);
const setTaggerThreshold = useGalleryStore((state) => state.setTaggerThreshold);
const probeTaggerRuntime = useGalleryStore((state) => state.probeTaggerRuntime);
const queueTaggingJobs = useGalleryStore((state) => state.queueTaggingJobs);
const clearTaggingJobs = useGalleryStore((state) => state.clearTaggingJobs);
useEffect(() => {
if (!settingsOpen) return;
void loadTaggerModelStatus();
void loadTaggerAcceleration();
void loadTaggerThreshold();
const handleKeyDown = (event: KeyboardEvent) => {
if (event.key === "Escape") setSettingsOpen(false);
};
window.addEventListener("keydown", handleKeyDown);
return () => window.removeEventListener("keydown", handleKeyDown);
}, [settingsOpen, setSettingsOpen]);
}, [settingsOpen, loadTaggerModelStatus, loadTaggerAcceleration, loadTaggerThreshold, setSettingsOpen]);
if (!settingsOpen) return null;
const modelReady = captionModelStatus?.ready ?? false;
const downloadLabel = captionModelProgress
? `Downloading ${captionModelProgress.completed_files}/${captionModelProgress.total_files}`
: captionModelPreparing
? "Preparing Florence-2..."
: modelReady
? "Downloaded"
: "Download Florence-2";
const downloadPercent = captionModelProgress
? Math.round((captionModelProgress.completed_files / Math.max(captionModelProgress.total_files, 1)) * 100)
: 0;
const selectedFolder = folders.find((folder) => folder.id === selectedFolderId);
const captionScopeLabel = selectedFolder ? selectedFolder.name : "all libraries";
const scopeLabel = selectedFolder ? selectedFolder.name : "all libraries";
return (
<div
@@ -176,11 +173,7 @@ export function SettingsModal() {
</aside>
<main className="flex min-w-0 flex-1 flex-col">
<div className="flex h-14 shrink-0 items-center justify-between border-b border-white/[0.07] px-6">
<div className="flex items-center gap-2">
{modelReady ? <StatusPill tone="ready">Florence-2 ready</StatusPill> : <StatusPill tone="muted">Optional</StatusPill>}
{captionModelPreparing ? <StatusPill tone="busy">Working</StatusPill> : null}
</div>
<div className="flex h-14 shrink-0 items-center justify-end border-b border-white/[0.07] px-6">
<button
className="rounded-md p-1.5 text-gray-500 transition-colors hover:bg-white/[0.06] hover:text-white"
onClick={() => setSettingsOpen(false)}
@@ -193,123 +186,238 @@ export function SettingsModal() {
</div>
<div className="flex-1 overflow-y-auto px-7 py-6">
{activeSection === "ai" ? (
<SectionShell eyebrow="Local AI" title="Captions and suggested tags">
<SettingsRow
title="AI captions"
description="Generate captions and suggested tags with the local Florence-2 model."
>
<ToggleSwitch
checked={aiCaptionsEnabled && modelReady}
disabled={!modelReady || captionModelPreparing}
onChange={setAiCaptionsEnabled}
label="AI captions"
/>
</SettingsRow>
<SettingsRow
title="Florence-2 model"
description={modelReady ? "Stored locally and available offline." : "Download the model before enabling local captions."}
>
<div className="flex flex-col items-end gap-2">
<button
className="relative overflow-hidden rounded-md border border-white/10 bg-white/[0.055] px-3 py-1.5 text-xs text-gray-300 transition-colors hover:bg-white/10 hover:text-white disabled:cursor-not-allowed disabled:opacity-45"
onClick={() => void prepareCaptionModel()}
disabled={captionModelPreparing || modelReady}
>
{captionModelProgress ? (
<span
className="absolute inset-y-0 left-0 bg-emerald-400/15 transition-[width] duration-200"
style={{ width: `${downloadPercent}%` }}
/>
) : null}
<span className="relative">{downloadLabel}</span>
</button>
{modelReady ? (
<>
<button
className="rounded-md border border-white/10 bg-white/[0.055] px-3 py-1.5 text-xs text-gray-300 transition-colors hover:bg-white/10 hover:text-white disabled:cursor-not-allowed disabled:opacity-45"
onClick={() => void probeCaptionRuntime()}
disabled={captionRuntimeChecking}
>
{captionRuntimeChecking ? "Checking runtime..." : "Check runtime"}
</button>
<button
className="rounded-md border border-red-400/20 bg-red-500/10 px-3 py-1.5 text-xs text-red-200 transition-colors hover:bg-red-500/15 disabled:cursor-not-allowed disabled:opacity-45"
onClick={() => void deleteCaptionModel()}
disabled={captionModelPreparing || captionRuntimeChecking}
>
Delete model files
</button>
</>
) : null}
</div>
</SettingsRow>
<SettingsRow
title="Caption queue"
description={`Generate missing captions in ${captionScopeLabel}. Captions update in the gallery as the local worker finishes each image.`}
>
<button
className="rounded-md border border-white/10 bg-white/[0.055] px-3 py-1.5 text-xs text-gray-300 transition-colors hover:bg-white/10 hover:text-white disabled:cursor-not-allowed disabled:opacity-45"
onClick={() => {
setCaptionQueueing(true);
setCaptionQueueStatus(null);
void queueCaptionJobs(selectedFolderId)
.then((queued) => {
setCaptionQueueStatus(
queued === 0
? "No missing captions found."
: `Queued ${queued.toLocaleString()} image${queued === 1 ? "" : "s"}.`,
);
})
.catch((error) => setCaptionQueueStatus(String(error)))
.finally(() => setCaptionQueueing(false));
}}
disabled={!modelReady || !aiCaptionsEnabled || captionQueueing}
{activeSection === "tagging" ? (() => {
const taggerReady = taggerModelStatus?.ready ?? false;
const taggerDownloadLabel = taggerModelProgress
? `Downloading ${taggerModelProgress.completed_files}/${taggerModelProgress.total_files}`
: taggerModelPreparing
? "Preparing WD Tagger..."
: taggerReady
? "Downloaded"
: "Download WD Tagger";
const taggerDownloadPercent = taggerModelProgress
? Math.round((taggerModelProgress.completed_files / Math.max(taggerModelProgress.total_files, 1)) * 100)
: 0;
const thresholdDisplay = taggerThresholdDraft ?? String(taggerThreshold);
return (
<SectionShell eyebrow="AI Tagging" title="WD SwinV2 Tagger v3">
<SettingsRow
title="WD Tagger model"
description={taggerReady ? "Stored locally and available offline." : "Download the model to enable automatic AI tagging."}
>
{captionQueueing ? "Queueing..." : selectedFolder ? "Caption this library" : "Caption all libraries"}
</button>
</SettingsRow>
<div className="flex flex-col items-end gap-2">
<button
className="relative overflow-hidden rounded-md border border-white/10 bg-white/[0.055] px-3 py-1.5 text-xs text-gray-300 transition-colors hover:bg-white/10 hover:text-white disabled:cursor-not-allowed disabled:opacity-45"
onClick={() => void prepareTaggerModel()}
disabled={taggerModelPreparing || taggerReady}
>
{taggerModelProgress ? (
<span
className="absolute inset-y-0 left-0 bg-emerald-400/15 transition-[width] duration-200"
style={{ width: `${taggerDownloadPercent}%` }}
/>
) : null}
<span className="relative">{taggerDownloadLabel}</span>
</button>
{taggerReady ? (
<>
<button
className="rounded-md border border-white/10 bg-white/[0.055] px-3 py-1.5 text-xs text-gray-300 transition-colors hover:bg-white/10 hover:text-white disabled:cursor-not-allowed disabled:opacity-45"
onClick={() => void probeTaggerRuntime()}
disabled={taggerRuntimeChecking}
>
{taggerRuntimeChecking ? "Checking runtime..." : "Check runtime"}
</button>
<button
className="rounded-md border border-red-400/20 bg-red-500/10 px-3 py-1.5 text-xs text-red-200 transition-colors hover:bg-red-500/15 disabled:cursor-not-allowed disabled:opacity-45"
onClick={() => void deleteTaggerModel()}
disabled={taggerModelPreparing}
>
Delete model files
</button>
</>
) : null}
</div>
</SettingsRow>
<div className="py-4">
<p className="text-xs font-medium text-gray-400">Model location</p>
<p className="mt-2 break-all rounded-md border border-white/[0.07] bg-black/20 px-3 py-2 text-xs text-gray-600">
{modelReady ? captionModelStatus?.local_dir : "Not downloaded"}
</p>
{captionModelProgress?.current_file ? (
<p className="mt-3 break-all text-xs text-gray-500">{captionModelProgress.current_file}</p>
) : null}
{captionModelError ? (
<p className="mt-3 text-xs text-amber-300">{captionModelError}</p>
) : null}
{captionQueueStatus ? (
<p className="mt-3 text-xs text-gray-500">{captionQueueStatus}</p>
) : null}
{captionRuntimeProbe ? (
<div className="mt-4 border-t border-white/[0.07] pt-4">
<div className="flex items-center justify-between gap-3">
<p className="text-xs font-medium text-gray-400">Runtime check</p>
<StatusPill tone="ready">Ready</StatusPill>
<SettingsRow
title="Tagger acceleration"
description="Use DirectML for GPU-accelerated tagging when available."
>
<div className="flex flex-col items-end gap-2">
<div className="flex rounded-lg border border-white/[0.07] bg-black/20 p-1">
<TaggerAccelerationButton
acceleration="auto"
current={taggerAcceleration}
onSelect={(acceleration) => {
setTaggerAccelerationSaving(true);
void setTaggerAcceleration(acceleration)
.catch((error) => setTaggerQueueStatus(String(error)))
.finally(() => setTaggerAccelerationSaving(false));
}}
>
Auto
</TaggerAccelerationButton>
<TaggerAccelerationButton
acceleration="directml"
current={taggerAcceleration}
onSelect={(acceleration) => {
setTaggerAccelerationSaving(true);
void setTaggerAcceleration(acceleration)
.catch((error) => setTaggerQueueStatus(String(error)))
.finally(() => setTaggerAccelerationSaving(false));
}}
>
DirectML
</TaggerAccelerationButton>
<TaggerAccelerationButton
acceleration="cpu"
current={taggerAcceleration}
onSelect={(acceleration) => {
setTaggerAccelerationSaving(true);
void setTaggerAcceleration(acceleration)
.catch((error) => setTaggerQueueStatus(String(error)))
.finally(() => setTaggerAccelerationSaving(false));
}}
>
CPU
</TaggerAccelerationButton>
</div>
<p className="mt-2 text-xs text-gray-600">
Tokenizer vocabulary: {captionRuntimeProbe.tokenizer_vocab_size.toLocaleString()}
<p className="text-[11px] text-gray-600">
{taggerAccelerationSaving ? "Saving..." : `Current: ${taggerAcceleration}`}
</p>
<div className="mt-3 space-y-2">
{captionRuntimeProbe.sessions.map((session) => (
<div key={session.file} className="rounded-md border border-white/[0.07] bg-black/20 px-3 py-2">
<p className="break-all text-xs text-gray-400">{session.file}</p>
</div>
</SettingsRow>
<SettingsRow
title="Confidence threshold"
description="Tags with confidence below this value are discarded. Lower = more tags, higher = fewer but more accurate."
>
<div className="flex flex-col items-end gap-2">
<div className="flex items-center gap-2">
<input
type="number"
min="0.05"
max="0.99"
step="0.05"
className="w-20 rounded-md border border-white/10 bg-white/5 px-2 py-1.5 text-xs text-white focus:border-white/20 focus:outline-none"
value={thresholdDisplay}
onChange={(e) => setTaggerThresholdDraft(e.target.value)}
onBlur={() => {
const val = parseFloat(thresholdDisplay);
if (!isNaN(val) && val >= 0.05 && val <= 0.99) {
setTaggerThresholdSaving(true);
void setTaggerThreshold(val)
.catch((error) => setTaggerQueueStatus(String(error)))
.finally(() => {
setTaggerThresholdDraft(null);
setTaggerThresholdSaving(false);
});
} else {
setTaggerThresholdDraft(null);
}
}}
/>
</div>
<p className="text-[11px] text-gray-600">
{taggerThresholdSaving ? "Saving..." : "Default: 0.35"}
</p>
</div>
</SettingsRow>
<SettingsRow
title="Tagging queue"
description={`Generate missing AI tags in ${scopeLabel}. Tags update as the background worker finishes each image.`}
>
<div className="flex flex-col items-end gap-2">
<button
className="rounded-md border border-white/10 bg-white/[0.055] px-3 py-1.5 text-xs text-gray-300 transition-colors hover:bg-white/10 hover:text-white disabled:cursor-not-allowed disabled:opacity-45"
onClick={() => {
setTaggerQueueing(true);
setTaggerQueueStatus(null);
void queueTaggingJobs(selectedFolderId)
.then((queued) => {
setTaggerQueueStatus(
queued === 0
? "No missing tags found."
: `Queued ${queued.toLocaleString()} image${queued === 1 ? "" : "s"}.`,
);
})
.catch((error) => setTaggerQueueStatus(String(error)))
.finally(() => setTaggerQueueing(false));
}}
disabled={!taggerReady || taggerQueueing || taggerClearing}
>
{taggerQueueing
? "Queueing..."
: selectedFolder
? "Tag this library"
: "Tag all libraries"}
</button>
<button
className="rounded-md border border-amber-400/20 bg-amber-500/10 px-3 py-1.5 text-xs text-amber-200 transition-colors hover:bg-amber-500/15 disabled:cursor-not-allowed disabled:opacity-45"
onClick={() => {
setTaggerClearing(true);
setTaggerQueueStatus(null);
void clearTaggingJobs(selectedFolderId)
.then((cleared) => {
setTaggerQueueStatus(
cleared === 0
? "No queued tagging jobs to clear."
: `Cleared ${cleared.toLocaleString()} queued job${cleared === 1 ? "" : "s"}.`,
);
})
.catch((error) => setTaggerQueueStatus(String(error)))
.finally(() => setTaggerClearing(false));
}}
disabled={taggerQueueing || taggerClearing}
>
{taggerClearing
? "Clearing..."
: selectedFolder
? "Clear this queue"
: "Clear all queued tags"}
</button>
</div>
</SettingsRow>
<div className="py-4">
<p className="text-xs font-medium text-gray-400">Model location</p>
<p className="mt-2 break-all rounded-md border border-white/[0.07] bg-black/20 px-3 py-2 text-xs text-gray-600">
{taggerReady ? taggerModelStatus?.local_dir : "Not downloaded"}
</p>
{taggerModelProgress?.current_file ? (
<p className="mt-3 break-all text-xs text-gray-500">{taggerModelProgress.current_file}</p>
) : null}
{taggerModelError ? (
<p className="mt-3 text-xs text-amber-300">{taggerModelError}</p>
) : null}
{taggerQueueStatus ? (
<p className="mt-3 text-xs text-gray-500">{taggerQueueStatus}</p>
) : null}
{taggerRuntimeProbe ? (
<div className="mt-4 border-t border-white/[0.07] pt-4">
<div className="flex items-center justify-between gap-3">
<p className="text-xs font-medium text-gray-400">Runtime check</p>
<StatusPill tone="ready">Ready</StatusPill>
</div>
<p className="mt-2 text-xs text-gray-600">
Tagger acceleration: {taggerRuntimeProbe.acceleration}
</p>
<div className="mt-3 space-y-2">
<div className="rounded-md border border-white/[0.07] bg-black/20 px-3 py-2">
<p className="break-all text-xs text-gray-400">{taggerRuntimeProbe.session.file}</p>
<p className="mt-1 text-[11px] text-gray-600">
{session.inputs.length} input{session.inputs.length === 1 ? "" : "s"} · {session.outputs.length} output{session.outputs.length === 1 ? "" : "s"}
{taggerRuntimeProbe.session.inputs.length} input{taggerRuntimeProbe.session.inputs.length === 1 ? "" : "s"} · {taggerRuntimeProbe.session.outputs.join(", ")}
</p>
</div>
))}
</div>
</div>
</div>
) : null}
</div>
</SectionShell>
) : null}
) : null}
</div>
</SectionShell>
);
})() : null}
{activeSection === "library" ? (
<SectionShell eyebrow="Library" title="Indexing and scanning">
@@ -335,11 +443,11 @@ export function SettingsModal() {
{activeSection === "storage" ? (
<SectionShell eyebrow="Storage" title="Local files">
<SettingsRow title="Florence-2" description="Remove the local model without changing the rest of the library.">
<SettingsRow title="WD Tagger" description="Remove the local tagger model without changing the rest of the library.">
<button
className="rounded-md border border-red-400/20 bg-red-500/10 px-3 py-1.5 text-xs text-red-200 transition-colors hover:bg-red-500/15 disabled:cursor-not-allowed disabled:opacity-45"
onClick={() => void deleteCaptionModel()}
disabled={captionModelPreparing || !modelReady}
onClick={() => void deleteTaggerModel()}
disabled={taggerModelPreparing || !(taggerModelStatus?.ready ?? false)}
>
Delete model files
</button>
+268 -4
View File
@@ -15,6 +15,10 @@ export type MediaKind = "image" | "video";
export type MediaFilter = "all" | MediaKind;
export type ZoomPreset = "compact" | "comfortable" | "detail";
export type SearchMode = "filename" | "semantic";
export type CaptionAcceleration = "auto" | "cpu" | "directml";
export type CaptionDetail = "short" | "detailed" | "paragraph";
export type TaggerAcceleration = "auto" | "cpu" | "directml";
export type AiRating = "general" | "sensitive" | "questionable" | "explicit";
export interface ImageRecord {
id: number;
@@ -44,6 +48,35 @@ export interface ImageRecord {
caption_model: string | null;
caption_updated_at: string | null;
caption_error: string | null;
ai_rating: AiRating | null;
ai_tagger_model: string | null;
ai_tagged_at: string | null;
ai_tagger_error: string | null;
}
export interface ImageTag {
id: number;
image_id: number;
tag: string;
source: "user" | "ai";
ai_model: string | null;
confidence: number | null;
created_at: string;
}
export interface TaggerModelStatus {
model_id: string;
model_name: string;
local_dir: string;
ready: boolean;
missing_files: string[];
}
export interface TaggerModelProgress {
total_files: number;
completed_files: number;
current_file: string | null;
done: boolean;
}
export interface IndexProgress {
@@ -64,6 +97,9 @@ export interface FolderJobProgress {
caption_pending: number;
caption_ready: number;
caption_failed: number;
tagging_pending: number;
tagging_ready: number;
tagging_failed: number;
}
export interface MediaJobProgressEvent {
@@ -110,6 +146,8 @@ export interface CaptionRuntimeSessionProbe {
export interface CaptionRuntimeProbe {
ready: boolean;
acceleration: CaptionAcceleration;
detail: CaptionDetail;
tokenizer_vocab_size: number;
sessions: CaptionRuntimeSessionProbe[];
}
@@ -118,6 +156,19 @@ export interface CaptionVisionProbe {
input_shape: number[];
output_shape: number[];
output_values: number;
acceleration: CaptionAcceleration;
}
export interface TaggerRuntimeSessionProbe {
file: string;
inputs: string[];
outputs: string[];
}
export interface TaggerRuntimeProbe {
ready: boolean;
acceleration: TaggerAcceleration;
session: TaggerRuntimeSessionProbe;
}
export type SortOrder =
@@ -163,9 +214,20 @@ interface GalleryState {
captionModelProgress: CaptionModelProgress | null;
captionRuntimeProbe: CaptionRuntimeProbe | null;
captionRuntimeChecking: boolean;
captionAcceleration: CaptionAcceleration;
captionDetail: CaptionDetail;
aiCaptionsEnabled: boolean;
settingsOpen: boolean;
taggerModelStatus: TaggerModelStatus | null;
taggerModelPreparing: boolean;
taggerModelError: string | null;
taggerModelProgress: TaggerModelProgress | null;
taggerAcceleration: TaggerAcceleration;
taggerThreshold: number;
taggerRuntimeProbe: TaggerRuntimeProbe | null;
taggerRuntimeChecking: boolean;
loadFolders: () => Promise<void>;
loadBackgroundJobProgress: () => Promise<void>;
addFolder: (path: string) => Promise<void>;
@@ -198,12 +260,33 @@ interface GalleryState {
generateCaptionForImage: (imageId: number) => Promise<ImageRecord>;
queueCaptionJobs: (folderId?: number | null) => Promise<number>;
queueCaptionForImage: (imageId: number) => Promise<number>;
clearCaptionJobs: (folderId?: number | null) => Promise<number>;
resetGeneratedCaptions: (folderId?: number | null) => Promise<number>;
loadCaptionAcceleration: () => Promise<void>;
setCaptionAcceleration: (acceleration: CaptionAcceleration) => Promise<void>;
loadCaptionDetail: () => Promise<void>;
setCaptionDetail: (detail: CaptionDetail) => Promise<void>;
setAiCaptionsEnabled: (enabled: boolean) => void;
setSettingsOpen: (open: boolean) => void;
retryFailedEmbeddings: (folderId: number) => Promise<void>;
updateImageDetails: (imageId: number, updates: { favorite?: boolean; rating?: number }) => Promise<void>;
setCacheDir: (dir: string) => void;
subscribeToProgress: () => Promise<UnlistenFn>;
loadTaggerModelStatus: () => Promise<void>;
prepareTaggerModel: () => Promise<void>;
deleteTaggerModel: () => Promise<void>;
loadTaggerAcceleration: () => Promise<void>;
setTaggerAcceleration: (acceleration: TaggerAcceleration) => Promise<void>;
loadTaggerThreshold: () => Promise<void>;
setTaggerThreshold: (threshold: number) => Promise<void>;
probeTaggerRuntime: () => Promise<void>;
queueTaggingJobs: (folderId?: number | null) => Promise<number>;
queueTaggingForImage: (imageId: number) => Promise<number>;
clearTaggingJobs: (folderId?: number | null) => Promise<number>;
getImageTags: (imageId: number) => Promise<ImageTag[]>;
addUserTag: (imageId: number, tag: string) => Promise<ImageTag>;
removeTag: (tagId: number) => Promise<void>;
}
const PAGE_SIZE = 200;
@@ -361,9 +444,20 @@ export const useGalleryStore = create<GalleryState>((set, get) => ({
captionModelProgress: null,
captionRuntimeProbe: null,
captionRuntimeChecking: false,
captionAcceleration: "auto",
captionDetail: "paragraph",
aiCaptionsEnabled: initialAiCaptionsEnabled(),
settingsOpen: false,
taggerModelStatus: null,
taggerModelPreparing: false,
taggerModelError: null,
taggerModelProgress: null,
taggerAcceleration: "auto",
taggerThreshold: 0.35,
taggerRuntimeProbe: null,
taggerRuntimeChecking: false,
setCacheDir: (cacheDir) => set({ cacheDir }),
loadFolders: async () => {
@@ -567,10 +661,10 @@ export const useGalleryStore = create<GalleryState>((set, get) => ({
similarSourceImageId: imageId,
galleryScrollResetKey: reset ? state.galleryScrollResetKey + 1 : state.galleryScrollResetKey,
}));
try {
const images = await invoke<ImageRecord[]>("find_similar_images", {
params: { image_id: imageId, limit: requestedLimit },
});
try {
const images = await invoke<ImageRecord[]>("find_similar_images", {
params: { image_id: imageId, folder_id: folderId ?? null, limit: requestedLimit },
});
const hasMore = images.length >= requestedLimit;
set({
images,
@@ -616,6 +710,38 @@ export const useGalleryStore = create<GalleryState>((set, get) => ({
}
},
loadCaptionAcceleration: async () => {
try {
const captionAcceleration = await invoke<CaptionAcceleration>("get_caption_acceleration");
set({ captionAcceleration });
} catch (error) {
set({ captionModelError: String(error) });
}
},
setCaptionAcceleration: async (acceleration) => {
const captionAcceleration = await invoke<CaptionAcceleration>("set_caption_acceleration", {
params: { acceleration },
});
set({ captionAcceleration, captionRuntimeProbe: null });
},
loadCaptionDetail: async () => {
try {
const captionDetail = await invoke<CaptionDetail>("get_caption_detail");
set({ captionDetail });
} catch (error) {
set({ captionModelError: String(error) });
}
},
setCaptionDetail: async (detail) => {
const captionDetail = await invoke<CaptionDetail>("set_caption_detail", {
params: { detail },
});
set({ captionDetail, captionRuntimeProbe: null });
},
prepareCaptionModel: async () => {
set({ captionModelPreparing: true, captionModelError: null, captionModelProgress: null });
try {
@@ -683,6 +809,23 @@ export const useGalleryStore = create<GalleryState>((set, get) => ({
return queued;
},
clearCaptionJobs: async (folderId = get().selectedFolderId) => {
const cleared = await invoke<number>("clear_caption_jobs", {
params: { folder_id: folderId ?? null },
});
await get().loadBackgroundJobProgress();
return cleared;
},
resetGeneratedCaptions: async (folderId = get().selectedFolderId) => {
const reset = await invoke<number>("reset_generated_captions", {
params: { folder_id: folderId ?? null },
});
await get().loadBackgroundJobProgress();
await get().loadImages(true);
return reset;
},
setAiCaptionsEnabled: (aiCaptionsEnabled) => {
window.localStorage.setItem(AI_CAPTIONS_ENABLED_KEY, String(aiCaptionsEnabled));
set({ aiCaptionsEnabled });
@@ -690,6 +833,119 @@ export const useGalleryStore = create<GalleryState>((set, get) => ({
setSettingsOpen: (settingsOpen) => set({ settingsOpen }),
loadTaggerModelStatus: async () => {
try {
const taggerModelStatus = await invoke<TaggerModelStatus>("get_tagger_model_status");
set({ taggerModelStatus, taggerModelError: null });
} catch (error) {
set({ taggerModelError: String(error) });
}
},
loadTaggerAcceleration: async () => {
try {
const taggerAcceleration = await invoke<TaggerAcceleration>("get_tagger_acceleration");
set({ taggerAcceleration });
} catch (error) {
set({ taggerModelError: String(error) });
}
},
setTaggerAcceleration: async (acceleration) => {
const taggerAcceleration = await invoke<TaggerAcceleration>("set_tagger_acceleration", {
params: { acceleration },
});
set({ taggerAcceleration, taggerRuntimeProbe: null });
},
loadTaggerThreshold: async () => {
try {
const taggerThreshold = await invoke<number>("get_tagger_threshold");
set({ taggerThreshold });
} catch (error) {
set({ taggerModelError: String(error) });
}
},
setTaggerThreshold: async (threshold) => {
const taggerThreshold = await invoke<number>("set_tagger_threshold", {
params: { threshold },
});
set({ taggerThreshold });
},
prepareTaggerModel: async () => {
set({ taggerModelPreparing: true, taggerModelError: null, taggerModelProgress: null });
try {
const taggerModelStatus = await invoke<TaggerModelStatus>("prepare_tagger_model");
set({ taggerModelStatus, taggerModelPreparing: false, taggerModelError: null, taggerModelProgress: null });
} catch (error) {
set({ taggerModelPreparing: false, taggerModelError: String(error), taggerModelProgress: null });
}
},
deleteTaggerModel: async () => {
set({ taggerModelPreparing: true, taggerModelError: null, taggerModelProgress: null });
try {
const taggerModelStatus = await invoke<TaggerModelStatus>("delete_tagger_model");
set({ taggerModelStatus, taggerModelPreparing: false, taggerModelError: null, taggerModelProgress: null, taggerRuntimeProbe: null });
} catch (error) {
set({ taggerModelPreparing: false, taggerModelError: String(error), taggerModelProgress: null });
}
},
probeTaggerRuntime: async () => {
set({ taggerRuntimeChecking: true, taggerModelError: null });
try {
const taggerRuntimeProbe = await invoke<TaggerRuntimeProbe>("probe_tagger_runtime");
set({ taggerRuntimeProbe, taggerRuntimeChecking: false, taggerModelError: null });
} catch (error) {
set({ taggerRuntimeChecking: false, taggerModelError: String(error), taggerRuntimeProbe: null });
}
},
queueTaggingJobs: async (folderId = get().selectedFolderId) => {
const queued = await invoke<number>("queue_tagging_jobs", {
params: { folder_id: folderId ?? null, image_id: null },
});
await get().loadBackgroundJobProgress();
return queued;
},
queueTaggingForImage: async (imageId) => {
const queued = await invoke<number>("queue_tagging_jobs", {
params: { folder_id: null, image_id: imageId },
});
await get().loadBackgroundJobProgress();
return queued;
},
clearTaggingJobs: async (folderId = get().selectedFolderId) => {
const cleared = await invoke<number>("clear_tagging_jobs", {
params: { folder_id: folderId ?? null },
});
await get().loadBackgroundJobProgress();
return cleared;
},
getImageTags: async (imageId) => {
return invoke<ImageTag[]>("get_image_tags", {
params: { image_id: imageId },
});
},
addUserTag: async (imageId, tag) => {
return invoke<ImageTag>("add_user_tag", {
params: { image_id: imageId, tag },
});
},
removeTag: async (tagId) => {
await invoke<void>("remove_tag", {
params: { tag_id: tagId },
});
},
retryFailedEmbeddings: async (folderId) => {
await invoke("retry_failed_embeddings", { params: { folder_id: folderId } });
await get().loadBackgroundJobProgress();
@@ -752,6 +1008,13 @@ export const useGalleryStore = create<GalleryState>((set, get) => ({
});
});
const unlistenTaggerModelProgress = await listen<TaggerModelProgress>("tagger-model-progress", (event) => {
set({
taggerModelProgress: event.payload.done ? null : event.payload,
taggerModelPreparing: !event.payload.done,
});
});
const unlistenImages = await listen<IndexedImagesBatch>("indexed-images", (event) => {
const batch = event.payload;
@@ -817,6 +1080,7 @@ export const useGalleryStore = create<GalleryState>((set, get) => ({
unlistenProgress();
unlistenMediaJobs();
unlistenCaptionModelProgress();
unlistenTaggerModelProgress();
unlistenImages();
unlistenThumbnails();
};