diff --git a/app/(chat)/gallery/page.tsx b/app/(chat)/gallery/page.tsx index c4401bda8..ef637f47b 100644 --- a/app/(chat)/gallery/page.tsx +++ b/app/(chat)/gallery/page.tsx @@ -4,9 +4,10 @@ import { useState, useEffect } from "react"; import { useRouter } from "next/navigation"; import { Button } from "@/components/ui/button"; import { Dialog, DialogContent } from "@/components/ui/dialog"; -import { ArrowLeft, Download, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, Edit } from "lucide-react"; +import { ArrowLeft, Download, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, Edit, Scissors } from "lucide-react"; import { Input } from "@/components/ui/input"; import Image from "next/image"; +import { toast } from "sonner"; type GalleryImage = { id: string; @@ -39,6 +40,7 @@ export default function GalleryPage() { const [selectedImage, setSelectedImage] = useState(null); const [dialogOpen, setDialogOpen] = useState(false); const [pageInput, setPageInput] = useState(""); + const [processingImageId, setProcessingImageId] = useState(null); const fetchImages = async (page: number) => { setLoading(true); @@ -87,6 +89,71 @@ export default function GalleryPage() { router.push(`/?editImage=${encodeURIComponent(imageUrl)}`); }; + const handleRemoveBackground = async (image: GalleryImage, e: React.MouseEvent) => { + e.stopPropagation(); // 阻止触发图片点击事件 + + if (processingImageId === image.id) return; // 防止重复点击 + + setProcessingImageId(image.id); + + try { + toast.info("正在处理抠图,请稍候..."); + + // 获取原图并转换为Base64 + const response = await fetch(image.url); + const blob = await response.blob(); + const reader = new FileReader(); + + reader.onloadend = async () => { + try { + const base64Data = (reader.result as string).split(",")[1]; + + // 调用抠图API + const rmbgResponse = await fetch("/api/rmbg", { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + image_base64: base64Data, + prompt: `抠图处理 - ${image.alt}`, + chatId: image.chatId, + messageId: image.messageId, + }), + }); + + if (!rmbgResponse.ok) { + const error = await rmbgResponse.json(); + throw new Error(error.error || error.detail || "抠图失败"); + } + + const result = await rmbgResponse.json(); + + // 刷新相册列表以显示新图片 + await fetchImages(pagination.page); + + toast.success(`抠图完成!处理时间: ${result.processing_time?.toFixed(2) || "未知"}秒`); + } catch (error) { + console.error("[抠图] 错误:", error); + toast.error(error instanceof Error ? error.message : "抠图处理失败"); + } finally { + setProcessingImageId(null); + } + }; + + reader.onerror = () => { + toast.error("图片读取失败"); + setProcessingImageId(null); + }; + + reader.readAsDataURL(blob); + } catch (error) { + console.error("[抠图] 错误:", error); + toast.error(error instanceof Error ? error.message : "抠图处理失败"); + setProcessingImageId(null); + } + }; + const goToPage = (page: number) => { if (page >= 1 && page <= pagination.totalPages) { fetchImages(page); @@ -155,8 +222,22 @@ export default function GalleryPage() { blurDataURL="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjI3MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMjAwIiBoZWlnaHQ9IjI3MCIgZmlsbD0iI2VlZSIvPjwvc3ZnPg==" /> - {/* 🆕 编辑按钮(悬停时显示) */} -
+ {/* 🆕 操作按钮(悬停时显示) */} +
+