Getting error Error: You must provide a path for a model definition when using @upscalerjs/esrgan-slim/2x

[deepushajia]

Describe the bug
utils.js:17 Uncaught (in promise) Error: You must provide a path for a model definition
at ./node_modules/upscaler/dist/browser/esm/utils.js (utils.js:17:1)
at options.factory (react refresh:6:1)
at webpack_require (bootstrap:22:1)
at fn (hot module replacement:61:1)
at ./node_modules/upscaler/dist/browser/esm/loadModel.generated.js (index.js:3:1)
at options.factory (react refresh:6:1)
at webpack_require (bootstrap:22:1)
at fn (hot module replacement:61:1)
at ./node_modules/upscaler/dist/browser/esm/upscaler.js (upscale.js:258:1)
at options.factory (react refresh:6:1)

@ 

const upscaler =  new Upscaler({
model: x2

})

Expected behavior
Model should be loaded as described in the documentation

Additional context
Add any other context about the problem here.

[thekevinscott]

Hi @deepushajia , can you provide your full code (particularly the import statement)? Or provide a code sandbox that reproduces the issue?

Also, is this in the browser or Node?

[deepushajia]

This is in a react application.

`// UpscaleImage.jsx
import React, { useState } from 'react';
import Upscaler from 'upscaler';
import x2 from '@upscalerjs/esrgan-slim/2x';

const UpscaleImage = () => {
const [originalImage, setOriginalImage] = useState(null);
const [upscaledImage, setUpscaledImage] = useState(null);
const upscaler = new Upscaler({
model: x2
})

// Function to handle file input
const handleImageUpload = (e) => {
const file = e.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = (event) => {
setOriginalImage(event.target.result);
};
reader.readAsDataURL(file);
}
};

// Function to upscale the image
const upscaleImage = async () => {
if (!originalImage) return;
// Initialize Upscaler with the ESRGAN Slim model

const img = new Image();
img.src = originalImage;
img.onload = async () => {
  const upscaled = await upscaler.upscale(img);
  setUpscaledImage(upscaled);
};

};

return (

UpscalerJS with ESRGAN Slim

Upscale Image

{originalImage && (

)}
{upscaledImage && (

)}

);
};

export default UpscaleImage;
`

[thekevinscott]

Your code seems to have gotten mangled when pasted, but I think I get the gist.

Check this out for a working integration with React:

https://codesandbox.io/p/sandbox/xenodochial-feynman-76m9k3?workspaceId=5827380d-c0eb-4489-8de0-a045510daa2d

You can drag and drop an image and specify the model during instantiation to UpscalerJS.