julian/watermark-wizard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improve

Browse Source
This commit is contained in:
Julian Freeman
2026-01-19 13:30:40 -04:00
parent 84ae92d1e3
commit d25f87abe0
2 changed files with 138 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/components/SettingsPanel.vue
View File

@@ -181,22 +181,37 @@ const applyAll = () => {
</h2>
<!-- Auto Detect Controls -->
<div class="flex flex-col gap-2">
<label class="text-sm text-gray-400 uppercase tracking-wider font-semibold">自动检测水印</label>
<div class="flex gap-2">
<button
@click="store.detectAllWatermarks()"
class="flex-1 bg-blue-600 hover:bg-blue-500 text-white py-2 rounded flex items-center justify-center gap-2 text-sm transition-colors"
@click="store.detectCurrentWatermark()"
class="flex-1 bg-gray-700 hover:bg-gray-600 text-white py-2 rounded flex items-center justify-center gap-2 text-sm transition-colors"
:disabled="store.isDetecting || store.selectedIndex < 0"
>
<Sparkles class="w-4 h-4" /> 自动检测
<div v-if="store.isDetecting" class="w-3 h-3 border-2 border-white/30 border-t-white rounded-full animate-spin"></div>
<Sparkles v-else class="w-4 h-4" />
当前
</button>
<button
@click="store.detectAllWatermarks()"
class="flex-1 bg-gray-700 hover:bg-gray-600 text-white py-2 rounded flex items-center justify-center gap-2 text-sm transition-colors"
:disabled="store.isDetecting || store.images.length === 0"
>
<div v-if="store.isDetecting" class="w-3 h-3 border-2 border-white/30 border-t-white rounded-full animate-spin"></div>
<Sparkles v-else class="w-4 h-4" />
全部
</button>
<button
@click="store.selectedIndex >= 0 && store.clearMask(store.selectedIndex)"
class="bg-gray-700 hover:bg-gray-600 text-gray-300 px-3 rounded flex items-center justify-center transition-colors"
title="清空遮罩"
title="清空当前遮罩"
:disabled="store.selectedIndex < 0"
>
<Trash2 class="w-4 h-4" />
</button>
</div>
</div>
<p class="text-xs text-gray-400">涂抹想要移除的水印，AI 将自动填充背景。</p>
@@ -215,19 +230,33 @@ const applyAll = () => {
/>
</div>
<div class="p-3 bg-red-900/20 border border-red-900/50 rounded text-xs text-red-200">
AI 修复功能已就绪。
<div class="p-3 bg-red-900/20 border border-red-900/50 rounded text-xs text-red-200 flex flex-col gap-1">
<span>AI 修复功能已就绪。</span>
<span v-if="store.isProcessing" class="text-yellow-300 animate-pulse">正在处理中，请稍候...</span>
</div>
<!-- Execution Controls -->
<div class="flex flex-col gap-2">
<button
@click="store.selectedIndex >= 0 && store.processInpainting(store.selectedIndex)"
@click="store.processInpainting(store.selectedIndex)"
class="w-full bg-red-600 hover:bg-red-500 text-white py-3 rounded font-bold shadow-lg transition-colors flex items-center justify-center gap-2"
:disabled="store.selectedIndex < 0"
:disabled="store.isProcessing || store.selectedIndex < 0"
>
<Eraser class="w-5 h-5" />
执行移除
<div v-if="store.isProcessing" class="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin"></div>
<Eraser v-else class="w-5 h-5" />
执行移除 (当前)
</button>
<button
@click="store.processAllInpainting()"
class="w-full bg-red-800 hover:bg-red-700 text-white py-2 rounded text-sm font-medium shadow transition-colors flex items-center justify-center gap-2"
:disabled="store.isProcessing || store.images.length === 0"
>
<Eraser class="w-4 h-4" />
执行移除 (全部有遮罩)
</button>
</div>
<button
v-if="store.selectedImage && store.selectedImage.path !== store.selectedImage.originalPath"
@click="store.selectedIndex >= 0 && store.restoreImage(store.selectedIndex)"

96
src/stores/gallery.ts
View File

@@ -52,6 +52,9 @@ export const useGalleryStore = defineStore("gallery", () => {
opacity: 0.5 // visual only
});
const isDetecting = ref(false);
const isProcessing = ref(false);
const selectedImage = computed(() => {
if (selectedIndex.value >= 0 && selectedIndex.value < images.value.length) {
return images.value[selectedIndex.value];
@@ -108,19 +111,16 @@ export const useGalleryStore = defineStore("gallery", () => {
}
}
async function detectAllWatermarks() {
if (images.value.length === 0) return;
const batchSize = 5;
for (let i = 0; i < images.value.length; i += batchSize) {
const batch = images.value.slice(i, i + batchSize).map(async (img) => {
// Helper to run detection on a single image object
async function detectWatermarkForImage(img: ImageItem) {
try {
// Clear existing mask first
img.maskStrokes = [];
// @ts-ignore
const result = await invoke<{rects: {x: number, y: number, width: number, height: number}[]}>("detect_watermark", { path: img.path });
if (result.rects && result.rects.length > 0) {
if (!img.maskStrokes) img.maskStrokes = [];
result.rects.forEach(r => {
img.maskStrokes!.push({
type: 'rect',
@@ -131,9 +131,31 @@ export const useGalleryStore = defineStore("gallery", () => {
} catch (e) {
console.error(`Detection failed for ${img.name}`, e);
}
});
}
async function detectCurrentWatermark() {
if (selectedIndex.value < 0 || !images.value[selectedIndex.value]) return;
isDetecting.value = true;
try {
await detectWatermarkForImage(images.value[selectedIndex.value]);
} finally {
isDetecting.value = false;
}
}
async function detectAllWatermarks() {
if (images.value.length === 0) return;
isDetecting.value = true;
try {
const batchSize = 5;
for (let i = 0; i < images.value.length; i += batchSize) {
const batch = images.value.slice(i, i + batchSize).map(img => detectWatermarkForImage(img));
await Promise.all(batch);
}
} finally {
isDetecting.value = false;
}
}
async function recalcAllWatermarks() {
@@ -153,9 +175,6 @@ export const useGalleryStore = defineStore("gallery", () => {
baseScale: baseScale
});
// Find index again just in case sort changed? No, we rely on reference or index.
// Img is reference. But setter needs index.
// Let's use image reference finding.
const idx = images.value.indexOf(img);
if (idx >= 0) {
setImageManualPosition(idx, result.x, result.y);
@@ -169,9 +188,9 @@ export const useGalleryStore = defineStore("gallery", () => {
}
}
async function processInpainting(index: number) {
const img = images.value[index];
if (!img || !img.maskStrokes || img.maskStrokes.length === 0) return;
// Internal helper for single image inpainting logic
async function runInpaintingForImage(img: ImageItem) {
if (!img.maskStrokes || img.maskStrokes.length === 0) return;
try {
const newPath = await invoke<string>("run_inpainting", {
@@ -179,20 +198,43 @@ export const useGalleryStore = defineStore("gallery", () => {
strokes: img.maskStrokes
});
// Update the image path to point to the processed version
// NOTE: This updates the "Source" of the image in the store.
// In a real app, maybe we keep original? But for "Wizard", modifying is the goal.
img.path = newPath;
// Clear mask after success
img.maskStrokes = [];
// Force UI refresh (thumbnail) - might be needed
// Generate new thumb?
// Since path changed, converting src should trigger reload.
} catch (e) {
console.error("Inpainting failed", e);
alert("Inpainting failed: " + e);
throw e; // Propagate error
}
}
async function processInpainting(index: number) {
const img = images.value[index];
if (!img) return;
isProcessing.value = true;
try {
await runInpaintingForImage(img);
} catch (e) {
alert("处理失败: " + e);
} finally {
isProcessing.value = false;
}
}
async function processAllInpainting() {
const candidates = images.value.filter(img => img.maskStrokes && img.maskStrokes.length > 0);
if (candidates.length === 0) return;
isProcessing.value = true;
try {
// Sequential processing to avoid freezing UI or overloading backend
for (const img of candidates) {
await runInpaintingForImage(img);
}
alert("批量处理完成！");
} catch (e) {
alert("批量处理部分失败: " + e);
} finally {
isProcessing.value = false;
}
}
@@ -241,6 +283,8 @@ export const useGalleryStore = defineStore("gallery", () => {
editMode,
watermarkSettings,
brushSettings,
isDetecting,
isProcessing,
setImages,
selectImage,
updateWatermarkSettings,
@@ -249,9 +293,11 @@ export const useGalleryStore = defineStore("gallery", () => {
applySettingsToAll,
addMaskStroke,
clearMask,
detectCurrentWatermark,
detectAllWatermarks,
recalcAllWatermarks,
processInpainting,
processAllInpainting,
restoreImage
};
});