File size: 1,837 Bytes
2f7ab94 921ed36 2f7ab94 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
"use client";
import { RemoveBackground } from '@/lib/removeBackground';
import { useState, useEffect } from 'react';
import { Toaster, toast } from 'sonner'; // 导入 Toaster 和 toast
import { FileDropzone } from '@/components/FileDropzone'; // 导入 FileDropzone 组件
export default function Homepage() {
const { isLoadingModel, error, processImage } = RemoveBackground();
const [processedImageUrl, setProcessedImageUrl] = useState<string | null>(null);
// 处理图像上传后的处理逻辑
const handleDropFile = async (fileBase64: string) => {
const processed = await processImage(fileBase64); // 处理图像
if (processed) {
setProcessedImageUrl(processed); // 设置处理后的图像 URL
toast.success('图像处理成功！'); // 成功消息
} else {
toast.error('图像处理失败！'); // 失败消息
}
};
// 使用 useEffect 监听 isLoadingModel 和 error
useEffect(() => {
if (isLoadingModel) {
toast('模型加载中...'); // 模型加载提示
}
if (error) {
toast.error(`模型加载错误: ${error.message}`); // 错误消息提示
}
}, [isLoadingModel, error]); // 依赖于 isLoadingModel 和 error
return (
<div className="flex flex-col items-center h-screen bg-gray-100 p-4 sm:p-6 overflow-hidden">
<Toaster />
<div className="w-full text-center flex flex-col items-center">
<h1 className="text-xl sm:text-2xl md:text-3xl font-semibold mb-3 sm:mb-4">
Image Processing
</h1>
<p className="text-xs sm:text-sm md:text-base text-gray-600 mb-4 sm:mb-6">
Upload an image to process it.
</p>
<FileDropzone
onDropFile={handleDropFile}
processedImageUrl={processedImageUrl || undefined}
/>
</div>
</div>
);
}
|