feat: add WD tagger, remove caption UI, add per-image tag queuing in lightbox
- Add WD SwinV2 tagger v3 backend (tagger.rs) with DirectML acceleration - Expose tagger commands (model status, download, queue, tags CRUD) - Add queueTaggingForImage store action and AI tags button in lightbox sidebar - Remove all caption UI surfaces (Lightbox, BackgroundTasks, SettingsModal) - Disable caption worker in lib.rs; keep Rust backend intact for future use - Make lightbox sidebar scrollable with sticky header/footer - Collapse long tag lists (show 8, expandable) in lightbox sidebar
This commit is contained in:
+23
-1
@@ -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");
|
||||
|
||||
@@ -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
@@ -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
@@ -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
@@ -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();
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user