76 |
122 | );
123 | }
124 |
--------------------------------------------------------------------------------
/src/components/ImageCompareResult.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/components/ui/button";
2 | import { Download } from "lucide-react";
3 | import {
4 | ReactCompareSlider,
5 | ReactCompareSliderImage,
6 | } from "react-compare-slider";
7 |
8 | interface ImageCompareResultProps {
9 | originalImage: string;
10 | processedImage: string;
11 | fileName?: string;
12 | onReset: () => void;
13 | }
14 |
15 | export function ImageCompareResult({
16 | originalImage,
17 | processedImage,
18 | fileName,
19 | onReset,
20 | }: ImageCompareResultProps) {
21 | const handleDownload = () => {
22 | if (processedImage) {
23 | const link = document.createElement("a");
24 | link.href = processedImage;
25 | link.download = `bg-removed-${fileName || "image"}.png`;
26 | document.body.appendChild(link);
27 | link.click();
28 | document.body.removeChild(link);
29 | }
30 | };
31 |
32 | return (
33 |
77 |
78 | 智能移除图片背景
79 |
81 |
121 |
78 | 智能移除图片背景
79 |
一键完成
80 |
81 | 82 | 上传一张图片，即可移除背景并下载。 83 |
84 | 85 |
86 |
120 |
87 |
89 |
90 |
92 |
93 | {!originalImageDataUrl && !isLoading ? (
94 |
34 |
81 | );
82 | }
83 |
--------------------------------------------------------------------------------
/src/components/ImageUploader.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/components/ui/button";
2 | import { SparklesIcon } from "lucide-react";
3 | import { useDropzone } from "react-dropzone";
4 |
5 | interface ImageUploaderProps {
6 | onImageSelected: (file: File | null) => void;
7 | }
8 |
9 | export function ImageUploader({ onImageSelected }: ImageUploaderProps) {
10 | const { getRootProps, getInputProps, isDragActive, open } = useDropzone({
11 | accept: {
12 | "image/*": [],
13 | },
14 | multiple: false,
15 | onDrop: (acceptedFiles) => {
16 | if (acceptedFiles && acceptedFiles[0]) {
17 | onImageSelected(acceptedFiles[0]);
18 | }
19 | },
20 | });
21 |
22 | return (
23 |
35 |
68 |
69 |
72 |
79 |
80 |
29 |
30 |
40 |
42 | );
43 | }
44 |
--------------------------------------------------------------------------------
/src/components/ProcessingError.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/components/ui/button";
2 |
3 | interface ProcessingErrorProps {
4 | imageUrl: string;
5 | onReset: () => void;
6 | }
7 |
8 | export function ProcessingError({ imageUrl, onReset }: ProcessingErrorProps) {
9 | return (
10 | 或拖放图片至此处
41 |
11 |
25 | );
26 | }
27 |
--------------------------------------------------------------------------------
/src/components/ProcessingLoader.tsx:
--------------------------------------------------------------------------------
1 |
2 | export function ProcessingLoader() {
3 | return (
4 | 处理失败
12 |
13 | 
18 |
19 |
20 |
23 |
24 |
5 |
12 | );
13 | }
14 |
--------------------------------------------------------------------------------
/src/components/icons/github.tsx:
--------------------------------------------------------------------------------
1 | import { ComponentProps } from "react";
2 |
3 | export default function GithubIcon(props: ComponentProps<"svg">) {
4 | return (
5 |
20 | );
21 | }
22 |
--------------------------------------------------------------------------------
/src/components/icons/sparkles.tsx:
--------------------------------------------------------------------------------
1 | import { ComponentProps } from "react";
2 |
3 | export default function SparklesIcon(props: ComponentProps<"svg">) {
4 | return (
5 |
36 | );
37 | }
38 |
--------------------------------------------------------------------------------
/src/components/icons/x.tsx:
--------------------------------------------------------------------------------
1 | import { ComponentProps } from "react";
2 |
3 | export default function XIcon(props: ComponentProps<"svg">) {
4 | return (
5 |
20 | );
21 | }
22 |
--------------------------------------------------------------------------------
/src/components/images/homepage-image-1.tsx:
--------------------------------------------------------------------------------
1 | import { ComponentProps } from "react";
2 |
3 | export default function HomepageImage1(props: ComponentProps<"svg">) {
4 | return (
5 |
1293 | );
1294 | }
1295 |
--------------------------------------------------------------------------------
/src/components/images/homepage-image-2.tsx:
--------------------------------------------------------------------------------
1 | import { ComponentProps } from "react";
2 |
3 | export default function HomepageImage2(props: ComponentProps<"svg">) {
4 | return (
5 |
275 | );
276 | }
277 |
--------------------------------------------------------------------------------
/src/components/ui/button.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { Slot } from "@radix-ui/react-slot";
3 | import { cva, type VariantProps } from "class-variance-authority";
4 |
5 | import { cn } from "@/lib/utils";
6 |
7 | const buttonVariants = cva(
8 | "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
9 | {
10 | variants: {
11 | variant: {
12 | default:
13 | "bg-primary text-primary-foreground shadow hover:bg-primary/90",
14 | destructive:
15 | "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
16 | outline:
17 | "border text-base border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
18 | "outline-active":
19 | "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
20 | secondary:
21 | "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
22 | ghost: "hover:bg-accent hover:text-accent-foreground",
23 | link: "text-primary underline-offset-4 hover:underline",
24 | },
25 | size: {
26 | default: "h-9 px-4 py-2",
27 | sm: "h-8 rounded-md px-3 text-xs",
28 | lg: "h-10 rounded-md px-8",
29 | icon: "h-9 w-9",
30 | },
31 | },
32 | defaultVariants: {
33 | variant: "default",
34 | size: "default",
35 | },
36 | },
37 | );
38 |
39 | export interface ButtonProps
40 | extends React.ButtonHTMLAttributes
6 |
7 |
8 | 9 | 移除背景中... 10 |
11 |
6 |
15 | );
16 | }
17 |
--------------------------------------------------------------------------------
/src/components/ui/select.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as SelectPrimitive from "@radix-ui/react-select"
5 | import { Check, ChevronDown, ChevronUp } from "lucide-react"
6 |
7 | import { cn } from "@/lib/utils"
8 |
9 | const Select = SelectPrimitive.Root
10 |
11 | const SelectGroup = SelectPrimitive.Group
12 |
13 | const SelectValue = SelectPrimitive.Value
14 |
15 | const SelectTrigger = React.forwardRef<
16 | React.ElementRef
22 | {title && {title} }
23 | {description && (
24 | {description}
25 | )}
26 |
27 | {action}
28 |