remove background

fansize · Sep 7, 2024 · 82477a3 · 82477a3
commit 82477a3
Show file tree

Hide file tree

Showing 14 changed files with 2,949 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
diff --git a/README.md b/README.md
@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
diff --git a/app/favicon.ico b/app/favicon.ico
diff --git a/app/globals.css b/app/globals.css
@@ -0,0 +1,27 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+body {
+  color: var(--foreground);
+  background: var(--background);
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -0,0 +1,24 @@
+import type { Metadata } from "next";
+import { Inter, Space_Grotesk, Sora } from 'next/font/google'
+import "./globals.css";
+
+const inter = Inter({ subsets: ['latin'] })
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>
+        {children}
+      </body>
+    </html>
+  );
+}
diff --git a/app/page.tsx b/app/page.tsx
@@ -0,0 +1,65 @@
+'use client'
+
+import Image from 'next/image';
+import React from 'react';
+import { removeBackground } from "@imgly/background-removal"; // Updated import
+
+const Page = () => {
+    const [removedBackgroundImage, setRemovedBackgroundImage] = React.useState<string>('');
+    const [isRunning, setIsRunning] = React.useState<boolean>(false);
+    const [caption, setCaption] = React.useState<string>('Click to remove background');
+
+    const config = {
+        debug: false,
+        output: {
+            quality: 1,
+            format: 'image/png'
+        }
+    };
+
+    const setup = async () => {
+        setIsRunning(true);
+        setCaption('Processing...');
+
+        try {
+            const imageUrl = 'https://images.unsplash.com/photo-1724454920878-a4cba430db4c?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxmZWF0dXJlZC1waG90b3MtZmVlZHwxMjN8fHxlbnwwfHx8fHw%3D';
+            const imageBlob = await removeBackground(imageUrl);
+            const url = URL.createObjectURL(imageBlob);
+            setRemovedBackgroundImage(url);
+            setCaption('Background removed!');
+        } catch (error) {
+            console.error(error);
+            setCaption('Error removing background');
+        } finally {
+            setIsRunning(false);
+        }
+    };
+
+    return (
+        <div>
+            <Image 
+                src='https://images.unsplash.com/photo-1724454920878-a4cba430db4c?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxmZWF0dXJlZC1waG90b3MtZmVlZHwxMjN8fHxlbnwwfHx8fHw%3D' 
+                alt='Original Image'
+                width={200}
+                height={200}
+            />
+
+            <button onClick={setup} disabled={isRunning}>
+                {isRunning ? 'Processing...' : 'Remove Background'}
+            </button>
+
+            {removedBackgroundImage && (
+                <Image 
+                    src={removedBackgroundImage}
+                    alt='Removed Background Image'
+                    width={200}
+                    height={200}
+                />
+            )}
+
+            <p>{caption}</p>
+        </div>
+    );
+}
+
+export default Page;
diff --git a/components.json b/components.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "app/globals.css",
+    "baseColor": "zinc",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}
diff --git a/lib/index.ts b/lib/index.ts
@@ -0,0 +1,20 @@
+import { removeBackground } from '@imgly/background-removal-node'
+
+export async function removeImageBackground(imgSource) {
+    try {
+        // Removing background
+        const blob = await removeBackground(imgSource);
+
+        // Converting Blob to buffer
+        const buffer = Buffer.from(await blob.arrayBuffer());
+
+        // Generating data URL
+        const dataURL = `data:image/png;base64,${buffer.toString("base64")}`;
+
+        // Returning the data URL
+        return dataURL;
+    } catch (error) {
+        // Handling errors
+        throw new Error('Error removing background: ' + error);
+    }
+}
diff --git a/next.config.mjs b/next.config.mjs
@@ -0,0 +1,17 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+    images: {
+        remotePatterns: [
+            {
+              protocol: 'https',
+              hostname: 'images.unsplash.com',
+            },
+            {
+              protocol: 'https',
+              hostname: 'dogjzzesgngcrnqssxtn.supabase.co',
+            },
+          ],
+    },
+};
+
+export default nextConfig;