Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Problem with wasm file #124

Open
tiuvi opened this issue May 29, 2024 · 2 comments
Open

Problem with wasm file #124

tiuvi opened this issue May 29, 2024 · 2 comments

Comments

@tiuvi
Copy link

tiuvi commented May 29, 2024

I encountered a challenging error with version 1.5.2. Does anyone have any suggestions?

It seems the issue is related to the WASM file or its configuration. Since these files are not available on GitHub, I can't track down the exact problem. However, version 1.5.1 works correctly.

image

I also encountered issues when downloading the asset files and had to create a script to download them myself.

const axios = require('axios');
const fs = require('fs');
const path = require('path');

// URL del archivo JSON
const url = 'https://staticimgly.com/@imgly/background-removal-data/1.5.1/dist/resources.json';

async function downloadFile(fileUrl, filePath) {
try {
const response = await axios({
method: 'get',
url: fileUrl,
responseType: 'stream'
});

const fileStream = fs.createWriteStream(filePath);
response.data.pipe(fileStream);

return new Promise((resolve, reject) => {
  fileStream.on('finish', () => {
    console.log(`Archivo guardado como: ${filePath}`);
    resolve();
  });
  fileStream.on('error', err => {
    console.error('Error al escribir el archivo:', err);
    reject(err);
  });
});
} catch (error) {
console.error(Error al descargar el archivo desde ${fileUrl}:, error);
throw error;
}
}

async function main() {
try {
const response = await axios.get(url);
const jsonData = response.data;

for (const key in jsonData) {
  for (const item of jsonData[key].chunks) {
    const fileUrl = `https://staticimgly.com/@imgly/background-removal-data/1.5.2/dist/${item.hash}`;
    const filePath = path.join(__dirname, `${item.hash}.hash`);
    
    await downloadFile(fileUrl, filePath);
  }
}

console.log("Todas las descargas han terminado.");
} catch (error) {
console.error('Error al obtener el archivo JSON:', error);
}
}

main();

Additionally, some documentation is only available on npm:

{
  publicPath: string; // The public path used for model and wasm files. Default: 'https://staticimgly.com/${PACKAGE_NAME}-data/${PACKAGE_VERSION}/dist/'
  debug: bool; // Enable or disable useful console.log outputs
  device: 'cpu' | 'gpu'; // Choose the execution device. GPU will use WebGPU if available
  proxyToWorker: bool; // Whether to proxy the calculations to a web worker. (Default true)
  model: 'small' | 'medium'; // The model to use. (Default "medium")
  output: {
    format: 'image/png' | 'image/jpeg' | 'image/webp'; // The output format. (Default "image/png")
    quality: number; // The quality. (Default: 0.8)
    type: 'foreground' | 'background' | 'mask'; // The output type. (Default "foreground")
  };
}

Additionally, preload does not function correctly as it requests all 100 files at once, which can cause client failures when downloading the files, especially on mobile devices. The best approach is to download them one by one and cache them in the service worker before calling the backgroundRemove function.

(async ()=>{
    
    const resource = await json("resource", "ia/backgroundRemovalWasm/resources");
    console.log($Jsonresource);
    for(const value in $Jsonresource){

        for(const url of $Jsonresource[value].chunks){
            
            await fetch("https://cell1.tiuvi.com:1030/ia/backgroundRemovalWasm/" + url.hash )
            
        }
        
    }
    
})()

In addition, hash URLs do not have an extension, all URLs, unless they are dynamic, must have an extension and the extension specifies the type of content.

Good luck fixing 1.5.2

@DanielHauschildt
Copy link
Contributor

Sorry for the inconvenience. We encountered issues with providing the data files via npm due to Package Size limitation of NPM.

Therefore, now we have decided to make the data downloadable as one package via the CDN

See #127.

Additionally, I agree with preload.

The better version to preload is to just run the background removal once with a empty image.

As soon as there is some time we'll fix this.

@tiuvi
Copy link
Author

tiuvi commented Jun 15, 2024

I suggest making the repository compatible with huggingface or tensorflowjs:
Link to mediapipe
https://mediapipe-studio.webapps.google.com/home
Link to transformer
https://huggingface.co/docs/transformers.js/index
I think that implementing the solution of removing the background here would be good for the participation of the community, more focused on artificial intelligence and also obtaining the benefits of importing the models that are already fully resolved.

I have implemented mediapipe and transformer in my web application and it was very quick to do.
Don't worry about the problems the other way around, thank you very much for this great solution to remove background.
I currently tested it with webcodecs and although it was slow it was able to remove the background frame by frame very precisely.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants