Add background remover plugin

framer · Sep 19, 2024 · d57c21c · d57c21c
1 parent a9e3e62
commit d57c21c
Show file tree

Hide file tree

Showing 12 changed files with 621 additions and 0 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/plugins/background-remover/.eslintrc.cjs b/plugins/background-remover/.eslintrc.cjs
@@ -0,0 +1,11 @@
+module.exports = {
+    root: true,
+    env: { browser: true, es2020: true },
+    extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended", "plugin:react-hooks/recommended"],
+    ignorePatterns: ["dist", ".eslintrc.cjs"],
+    parser: "@typescript-eslint/parser",
+    plugins: ["react-refresh"],
+    rules: {
+        "react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
+    },
+}
diff --git a/plugins/background-remover/.gitignore b/plugins/background-remover/.gitignore
@@ -0,0 +1,24 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn
+
+# misc
+.DS_Store
+*.pem
+
+# files
+my-plugin
+dev-plugin
+dist
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
diff --git a/plugins/background-remover/README.md b/plugins/background-remover/README.md
@@ -0,0 +1,5 @@
+# Background Remover
+
+Remove the background from an image (locally).
+
+**By**: @sakib25800
diff --git a/plugins/background-remover/framer.json b/plugins/background-remover/framer.json
@@ -0,0 +1,6 @@
+{
+    "id": "ot052l",
+    "name": "Background Remover",
+    "modes": ["editImage"],
+    "icon": "/icon.svg"
+}
diff --git a/plugins/background-remover/index.html b/plugins/background-remover/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" type="image/svg+xml" href="/icon.svg" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Background Remover</title>
+    </head>
+    <body>
+        <div id="root"></div>
+        <script type="module" src="/src/main.tsx"></script>
+    </body>
+</html>
diff --git a/plugins/background-remover/package.json b/plugins/background-remover/package.json
@@ -0,0 +1,33 @@
+{
+    "name": "background-remover",
+    "private": true,
+    "version": "0.0.0",
+    "type": "module",
+    "scripts": {
+        "dev": "vite",
+        "build": "vite build --base=${PREFIX_BASE_PATH:+/$npm_package_name}/",
+        "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+        "preview": "vite preview"
+    },
+    "dependencies": {
+        "@imgly/background-removal": "^1.5.5",
+        "framer-plugin": "^0.3.1",
+        "react": "^18",
+        "react-dom": "^18",
+        "react-error-boundary": "^4.0.13",
+        "vite-plugin-mkcert": "^1"
+    },
+    "devDependencies": {
+        "@types/react": "^18",
+        "@types/react-dom": "^18",
+        "@typescript-eslint/eslint-plugin": "^7",
+        "@typescript-eslint/parser": "^7",
+        "@vitejs/plugin-react-swc": "^3",
+        "eslint": "^8",
+        "eslint-plugin-react-hooks": "^4",
+        "eslint-plugin-react-refresh": "^0",
+        "typescript": "^5.3.3",
+        "vite": "^5",
+        "vite-plugin-framer": "^0"
+    }
+}
diff --git a/plugins/background-remover/public/icon.svg b/plugins/background-remover/public/icon.svg
diff --git a/plugins/background-remover/src/main.tsx b/plugins/background-remover/src/main.tsx
@@ -0,0 +1,62 @@
+import { framer } from "framer-plugin"
+import { removeBackground as imglyRemoveBackground } from "@imgly/background-removal"
+
+const isLocal = () => window.location.hostname.includes("localhost")
+
+const determineDevice = () => {
+    if ("gpu" in navigator) return "gpu"
+
+    const canvas = document.createElement("canvas")
+    const hasWebGL = !!(canvas.getContext("webgl") || canvas.getContext("experimental-webgl"))
+
+    if (hasWebGL) return "gpu"
+
+    return "cpu"
+}
+
+async function removeBackground() {
+    const startTime = performance.now()
+
+    try {
+        const image = await framer.getImage()
+
+        if (!image) {
+            await framer.closePlugin("No image was selected")
+            return
+        }
+
+        const processedImage = await imglyRemoveBackground(image.url, {
+            output: { quality: 1, format: "image/png" },
+            model: "isnet_fp16",
+            device: determineDevice(),
+        })
+
+        const file = new File([processedImage], "image", {
+            type: processedImage.type,
+        })
+
+        await framer.setImage({
+            image: file,
+            name: "Processed Image",
+            altText: image.altText,
+        })
+    } catch (e) {
+        await framer.closePlugin(e instanceof Error ? e.message : String(e), {
+            variant: "error",
+        })
+    } finally {
+        if (isLocal()) {
+            const duration = (performance.now() - startTime).toFixed(2)
+            console.log(`Background removal duration: ${duration} ms`)
+        }
+
+        await framer.closePlugin("Background removed", { variant: "success" })
+    }
+}
+;(async () => {
+    try {
+        await removeBackground()
+    } catch (err) {
+        framer.closePlugin("An unexpected error ocurred", { variant: "error" })
+    }
+})()
diff --git a/plugins/background-remover/src/vite-env.d.ts b/plugins/background-remover/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/plugins/background-remover/tsconfig.json b/plugins/background-remover/tsconfig.json
@@ -0,0 +1,23 @@
+{
+    "compilerOptions": {
+        "target": "ES2022",
+        "useDefineForClassFields": true,
+        "lib": ["ES2022", "DOM", "DOM.Iterable"],
+        "module": "ES2022",
+
+        /* Bundler mode */
+        "moduleResolution": "bundler",
+        "allowImportingTsExtensions": true,
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "noEmit": true,
+        "jsx": "react-jsx",
+
+        /* Linting */
+        "strict": true,
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "noFallthroughCasesInSwitch": true
+    },
+    "include": ["src"]
+}
diff --git a/plugins/background-remover/vite.config.ts b/plugins/background-remover/vite.config.ts
@@ -0,0 +1,12 @@
+import react from "@vitejs/plugin-react-swc"
+import { defineConfig } from "vite"
+import framer from "vite-plugin-framer"
+import mkcert from "vite-plugin-mkcert"
+
+// https://vitejs.dev/config/
+export default defineConfig({
+    plugins: [react(), mkcert(), framer()],
+    build: {
+        target: "ES2022",
+    },
+})