Blazeface with html - Githubissues

Aub16 commented 1 year ago

Hi, I have a problem with this code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>BlazeFace avec une image importée</title>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-core"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/blazeface"></script>

    <style>
        #canvas {
          max-width: 500px;
        }
    </style>
  </head>
  <body>
    <input type="file" accept="image/*" onchange="detectFaces(this)">
    <p>Nombre de visages détectés : <span id="numFaces"></span></p>
    <canvas id="canvas"></canvas>
    <script>
      async function detectFaces(input) {
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        const img = new Image();
        img.src = URL.createObjectURL(input.files[0]);
        await img.decode();
        canvas.width = img.width;
        canvas.height = img.height;
        ctx.drawImage(img, 0, 0);
        const model = await blazeface.load();
        const predictions = await model.estimateFaces(canvas);
        document.getElementById('numFaces').innerText = predictions.length;
        for (let i = 0; i < predictions.length; i++) {
          const start = predictions[i].topLeft;
          const end = predictions[i].bottomRight;
          const size = [end[0] - start[0], end[1] - start[1]];
          ctx.beginPath();
          ctx.rect(start[0], start[1], size[0], size[1]);
          ctx.strokeStyle = 'red';
          ctx.lineWidth = 2;
          ctx.stroke();
        }
      }
    </script>
  </body>
</html>

BlazeFace is an ia of tensorflow.js supposed to recognize faces. But here when I put an image, it is displayed but no analysis is done.

console error (google chrome):


Uncaught (in promise) TypeError: n.loadGraphModel is not a function
    at Object.<anonymous> (blazeface:17:7074)
    at blazeface:17:1563
    at Object.next (blazeface:17:1668)
    at blazeface:17:606
    at new Promise (<anonymous>)
    at r (blazeface:17:354)
    at t.load (blazeface:17:6893)
    at detectFaces (blazeface.html:28:39)
(anonymous) @ blazeface:17
(anonymous) @ blazeface:17
(anonymous) @ blazeface:17
(anonymous) @ blazeface:17
r @ blazeface:17
t.load @ blazeface:17
detectFaces @ blazeface.html:28
await in detectFaces (async)
onchange @ blazeface.html:15```
Thanks to you

gaikwadrahul8 commented 1 year ago

Hi, @Aub16

Apologize for the delayed response and I was able to replicate the same issue and I'm also getting the same error message which you've mentioned in your error log output. For your reference I have added screenshot below

It seems like we have to dig more into this issue and we'll update you soon. thank you for noticing this issue, I really appreciate your efforts and time. Thank you!

Aub16 commented 1 year ago

Hello, Thank you for your answer. How long do you think this problem will be resolved?

Thank you

Linchenn commented 1 year ago

Could you try updating your scripts with:

    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-core"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-converter"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/blazeface"></script>

You might need to import tfjs converter, which is used to load models. @Aub16

Aub16 commented 1 year ago

Hello,

Now i have this script html

<!DOCTYPE html>
BlazeFace | TensorFlow

Home

Coco-ssd

Bert

BlazeFace

A propos

BlazeFace.

Text.

L'API ne fonctionne pour le moment pas car des problèmes avec le code source de cette API sont apparus, résolution en cours avec les développeurs.

^^^^^^^^^^

Nombre de visages détectés :

Nous suivre

Mentions légales

Politique de confidentialité

Conditions d'utilisation

Contact

Autres créations

and this script js

  async function detectFaces(input) {
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    const img = new Image();
    img.src = URL.createObjectURL(input.files[0]);
    await img.decode();
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage(img, 0, 0);
    const model = await blazeface.load();
    const predictions = await model.estimateFaces(canvas);
    document.getElementById('numFaces').innerText = predictions.length;
    for (let i = 0; i < predictions.length; i++) {
      const start = predictions[i].topLeft;
      const end = predictions[i].bottomRight;
      const size = [end[0] - start[0], end[1] - start[1]];
      ctx.beginPath();
      ctx.rect(start[0], start[1], size[0], size[1]);
      ctx.strokeStyle = 'red';
      ctx.lineWidth = 2;
      ctx.stroke();
    }
  }

  and i have this error with your modification 

  `Uncaught (in promise) Error: No backend found in registry.
at e.getSortedBackends (tfjs-core:17:48082)
at e.initializeBackendsAndReturnBest (tfjs-core:17:48327)
at e.get (tfjs-core:17:44904)
at e.makeTensor (tfjs-core:17:53297)
at ba (tfjs-core:17:71886)
at wa (tfjs-core:17:71930)
at Object.xa [as decodeWeights] (tfjs-core:17:74174)
at e.loadSync (tfjs-converter:17:307915)
at tfjs-converter:17:307458`

Thank you for your help

Linchenn commented 1 year ago

Sorry, I forgot to add a backend for you, please try this, if you have a GPU:

    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-core"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-converter"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-backend-webgl"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/blazeface"></script>

Aub16 commented 1 year ago

Hello, Thanks a lot to you, there are no more errors, the new problem is that some faces are not detected (as shown in the image below, taken from google).

Linchenn commented 1 year ago

Then it's your choice to select models for your app. I saw you are using deprecated bazeface models, you could try to replace it with new https://github.com/tensorflow/tfjs-models/tree/master/face-detection, even though I am not sure if it make any improvement.

google-ml-butler[bot] commented 1 year ago

Are you satisfied with the resolution of your issue? Yes No

Aub16 commented 1 year ago

Thanks you for all

Aub16 commented 1 year ago

Hello, I have this error on blazeface when I try to analyze one or more faces

tfjs-core:17 Uncaught (in promise) Error: Could not initialize any backends, all backend initializations failed.
    at e.initializeBackendsAndReturnBest (tfjs-core:17)
    at e.get (tfjs-core:17)
    at e.makeTensor (tfjs-core:17)
    at Sa (tfjs-core:17)
    at Aa (tfjs-core:17)
    at Object.Ia [as decodeWeights] (tfjs-core:17)
    at e.loadSync (tfjs-converter:17)
    at tfjs-converter:17

Linchenn commented 1 year ago

If you imported these files and saw the error:

    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-core"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-converter"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-backend-webgl"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/blazeface"></script>

It means webgl is not supported on your device/browser. Then you could try:

    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/blazeface"></script>

or

    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-core"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-converter"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-backend-cpu"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/blazeface"></script>

Aub16 commented 1 year ago

This makes it suitable for all devices/browsers

Thanks you

Linchenn commented 1 year ago

If you want to make it suitable for all devices and do not care much about package size, I would suggest the first option, which loads all tfjs packages as an union package.

Aub16 commented 1 year ago

```

<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/blazeface"></script>

Linchenn commented 1 year ago

Yes, this one.

Aub16 commented 1 year ago

I truc thanks you for all

Aub16 commented 1 year ago

*try

Aub16 commented 1 year ago

it's good thank you for your help and your time

Aub16 commented 1 year ago

Hello,

Sorry to bother you again but I have a problem with another of your APIs (BERT). Can I ask the question here or do I have to ask it somewhere else?

Thanks again to you

Linchenn commented 1 year ago

You could open a new ISSUE and feel free to ping or assign it to me.

Aub16 commented 1 year ago

Hello I don't know how to use github very well, how do I give it to you or do you mention Thanks

Linchenn commented 1 year ago

You could use this, https://github.com/tensorflow/tfjs/issues/new?assignees=&labels=type%3Abug&projects=&template=00-bug-issue.md or it's ok to post it here.

Aub16 commented 1 year ago

I think I'll post it here, thanks I'm doing this this afternoon

Aub16 commented 1 year ago

Finally I had time to do it this morning,

While trying to include and try Bert on a website (code attached), I have this error (attached) I do not know if the error comes from an inconsistency in my code or an error from you (as it is already the case with BlazeFace). Could you help me?

<!DOCTYPE html>
<html>
<head>
  <title>Utiliser l'API BERT de TensorFlow.js</title>
  <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@3.7.0/dist/tf.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/bert@2.0.4/dist/bert.min.js"></script>
</head>
<body>
  <textarea id="input" rows="4" cols="50">Entrez votre texte ici</textarea>
  <button id="run-btn">Exécuter</button>
  <br />
  <div id="output"></div>
  <script>
    const input = document.getElementById('input');
    const output = document.getElementById('output');
    const runBtn = document.getElementById('run-btn');

    async function runBERT() {
      // Charger le modèle BERT
      const model = await bert.load();

      // Traitement du texte d'entrée
      const sentences = input.value.split('.').map(sentence => sentence.trim()).filter(sentence => sentence.length > 0);

      // Encodage des phrases avec BERT
      const encodedSentences = await model.encode(sentences);

      // Afficher les vecteurs d'encodage
      encodedSentences.array().forEach((sentence, i) => {
        output.innerHTML += `<p>Phrase ${i + 1}: ${sentence.join(',')}</p>`;
      });
    }

    runBtn.addEventListener('click', runBERT);
  </script>
</body>
</html>

Thank Aubin DEVOGELAERE aub1devo@gmail.com

tensorflow / tfjs

Blazeface with html #7591