fix: @imgly/background-removal via npm + publicPath CDN + asyncWebAssembly webpack

2026-06-09 12:27:18 +02:00
parent 0b26a61f90
commit a77f44b800
5 changed files with 191 additions and 33 deletions
@@ -13,22 +13,6 @@ export const metadata: Metadata = {
 export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="fr">
-      <head>
-        {/* Import map requis par @imgly/background-removal chargé depuis CDN */}
-        <script
-          type="importmap"
-          // eslint-disable-next-line react/no-danger
-          dangerouslySetInnerHTML={{
-            __html: JSON.stringify({
-              imports: {
-                'onnxruntime-web': 'https://cdn.jsdelivr.net/npm/onnxruntime-web@1.21.0/dist/ort.all.min.mjs',
-                'onnxruntime-web/webgpu': 'https://cdn.jsdelivr.net/npm/onnxruntime-web@1.21.0/dist/ort.webgpu.min.mjs',
-                'onnxruntime-web/wasm': 'https://cdn.jsdelivr.net/npm/onnxruntime-web@1.21.0/dist/ort.wasm.min.mjs',
-              },
-            }),
-          }}
-        />
-      </head>
      <body className={inter.className}>
        <SessionProvider>{children}</SessionProvider>
      </body>
@@ -1,14 +1,7 @@
-const CDN_VERSION = '1.7.0'
-const CDN_URL = `https://cdn.jsdelivr.net/npm/@imgly/background-removal@${CDN_VERSION}/dist/index.mjs`
+import { removeBackground } from '@imgly/background-removal'

-let _removeBg: ((blob: Blob, opts: Record<string, unknown>) => Promise<Blob>) | null = null
-
-async function loadLib() {
-  if (_removeBg) return _removeBg
-  const mod = await import(/* webpackIgnore: true */ CDN_URL)
-  _removeBg = mod.removeBackground
-  return _removeBg!
-}
+// URL CDN pour les ressources (WASM + modèles ONNX) — évite de les héberger localement
+const IMGLY_CDN = 'https://cdn.jsdelivr.net/npm/@imgly/background-removal@1.7.0/dist/'

 export interface ProgressEvent {
  key: string
@@ -23,16 +16,15 @@ export async function removeBackgroundRaw(
  blob: Blob,
  onProgress?: (e: ProgressEvent) => void,
 ): Promise<Blob> {
-  const removeBg = await loadLib()
-
-  return removeBg(blob, {
+  return removeBackground(blob, {
+    publicPath: IMGLY_CDN,
    output: { format: 'image/png', type: 'foreground', quality: 1 },
    progress: (key: string, current: number, total: number) => {
      if (onProgress && total > 0) {
        onProgress({ key, percent: Math.round((current / total) * 100) })
      }
    },
-  })
+  } as Parameters<typeof removeBackground>[1])
 }

 /**