GithubHelp home page GithubHelp logo

Comments (13)

himi1203 avatar himi1203 commented on May 27, 2024 3

Hi @gaikwadrahul8 facing the same issue, this issue is very frequent and why is it so?

from tfjs.

Johnrobmiller avatar Johnrobmiller commented on May 27, 2024 1

This demo was working last Friday when I initially set this up, and now it too is having the exact same CORS error:
https://magdazelena.github.io/face-landmark-detection/

I doubt the demo upgraded any of its packages/dependencies, so whatever changed that is causing the CORS error is external to this tensorflow model.

from tfjs.

guaxez avatar guaxez commented on May 27, 2024 1

Same problem here. Is there a way to download the model and use from other source?

from tfjs.

Johnrobmiller avatar Johnrobmiller commented on May 27, 2024

Error message:

Access to fetch at 'https://www.kaggle.com/models/mediapipe/face-landmarks-detection/frameworks/tfJs/variations/face-mesh/versions/1/model.json?tfjs-format=file&tfhub-redirect=true' (redirected from 'https://tfhub.dev/mediapipe/tfjs-model/face_landmarks_detection/face_mesh/1/model.json?tfjs-format=file') from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

I allowed all origins in the next.js config, but to my dismay the resource was STILL being blocked by cors.
I'm guessing those headers only apply to requests made in the next.js endpoints and client-side requests just set their own headers.

from tfjs.

moorjani-ajay avatar moorjani-ajay commented on May 27, 2024

Anyone found a solution to this?

from tfjs.

Elintondm avatar Elintondm commented on May 27, 2024

Any news? We have the same error here.

from tfjs.

christopherdec avatar christopherdec commented on May 27, 2024

We changed the runtime from tfjs to mediapipe and this has solved the CORS problem.

Just follow the instructions from the README here: https://github.com/tensorflow/tfjs-models/tree/master/face-landmarks-detection/src/mediapipe

from tfjs.

Johnrobmiller avatar Johnrobmiller commented on May 27, 2024

We changed the runtime from tfjs to mediapipe and this has solved the CORS problem.

Just follow the instructions from the README here: https://github.com/tensorflow/tfjs-models/tree/master/face-landmarks-detection/src/mediapipe

Sadly, I was not able to get more than 10 FPS with the mediapipe version, so switching to mediapipe will worrk for some people, but not for all.

from tfjs.

Johnrobmiller avatar Johnrobmiller commented on May 27, 2024

I found an issue. In the screenshot, there is no Access-Control-Allow-Origin. That means it was never set up. Therefore, the solution to this problem must be to go into the server code and set up CORS origins.

If the maintainer of this project is AFK, then we might have to submit a PR ourselves that fixes this and use a forked version of the project with the fix while we wait for the PR to get merged. However, is the server code where I would modify CORS open source? I'm not familiar with tensorflow in that way
image

from tfjs.

gaikwadrahul8 avatar gaikwadrahul8 commented on May 27, 2024

Hi, Everyone

We sincerely apologize for the delay in our response and thank you for bringing this issue to our attention, I tried this demo https://magdazelena.github.io/face-landmark-detection/ and it seems like working as expected even I tested the changes by modifying the index.html file and everything appears to be functioning as intended on my end. To confirm if the issue is resolved for you as well, could you please verify if you're still encountering the problem?

If you are still experiencing difficulties, it would be very helpful if you could share a minimal reproducible example through a GitHub repository or CodePen. This will allow us to more accurately replicate the behavior you're encountering and assist you in resolving it.

If I have missed something here please let me know. Thank you for your cooperation and patience.

index.html file :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>TensorFlow.js face-landmarks-detection model testing</title>
  </head>
  <body>
    <!-- Require the peer dependencies of face-landmarks-detection. -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-core"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-converter"></script>
    <!-- You must explicitly require a TF.js backend if you're not using the TF.js union bundle. -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-backend-webgl"></script>
    <!-- Alternatively you can use the WASM backend: <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-backend-wasm/dist/tf-backend-wasm.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/[email protected]/dist/face-landmarks-detection.min.js"></script>

    <script>
      async function main() {
        await tf.setBackend("webgl");
        await tf.ready();
        const model = faceLandmarksDetection.SupportedModels.MediaPipeFaceMesh;
        const detectorConfig = {
          runtime: "tfjs",
          solutionPath: "https://cdn.jsdelivr.net/npm/@mediapipe/face_mesh",
        };
        const detector = await faceLandmarksDetection.createDetector(
          model,
          detectorConfig
        );
        console.log(detector);
      }

      main();
    </script>
  </body>
</html>

Output of index.html file :

image

from tfjs.

christopherdec avatar christopherdec commented on May 27, 2024

@gaikwadrahul8 the CORS issue with the tfjs runtime has normalized just a few hours after my post, so I believe that it may not possible to reproduce the issue now. @Johnrobmiller did it normalized for you as well?

from tfjs.

gaikwadrahul8 avatar gaikwadrahul8 commented on May 27, 2024

Hi, @christopherdec Thank you for the confirmation

Hi, @Arijitofficial, @Johnrobmiller, @himi1203, @moorjani-ajay, @Elintondm, @guaxez

I'd appreciate it if you could verify on your end that everything is functioning as intended. If so, please feel free to close this issue now.

Thank you for your cooperation and patience.

from tfjs.

guaxez avatar guaxez commented on May 27, 2024

Hi @gaikwadrahul8, sorry to keep you waiting.

As @christopherdec stated above, the CORS issue with tfjs was normalized in the same day that we posted here, so I believe we can't reproduce the error anymore. Thanks for the attention!

from tfjs.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.