tensorflow.js 익히기 -cors error, cdn사용-

프로그래밍/Tensorflow.js

tensorflow.js 익히기 -cors error, cdn사용-

통계학로봇 2023. 1. 7. 01:21

728x90

1. cors error

이미지 분류기 사용할려고 하는데 <img src = "~">에 이미지 경로를 쓰면 cors error가 나더라

로컬에서 CORS policy 관련 에러가 발생하는 이유

🚀 발단 위와 같은 html 파일을 로컬환경에서 크롬 브라우져로 실행시켰더니 >Access to script at 'file:///C:/경로/js/module.js' from origin 'null' has been blocked by CORS policy: Cr

velog.io

http-server 설치해서

npx http-server 실행시켜서

http://127.0.0.1:8080 서버에서 파일 실행시키면 cors error없어

2. cdn 사용

html파일에 tensorflow.js 사용할때,

1-1) 프로젝트 폴더 내에 npm install하고 import @tensorflow/tfjs해서, js파일 작성하고

<script src = '~.js'></script>로 사용하기

>> 이렇게 사용하면 에러가 나서 도저히 사용불가

1-2) cdn사용하기

현직자 피셜 @들어간 라이브러리는 html에 쓸려고하면 웹의 cdn 가져오는게 맞다고함

실제로 그래야 에러가 안나고 무난하게 사용가능

구글에 라이브러리이름 + cdn 치면 나오긴하더라

버전별로도 확인가능

@tensorflow-models/mobilenet CDN by jsDelivr - A free, fast, and reliable Open Source CDN

@tensorflow-models/mobilenet@0.1.0 @tensorflow-models/mobilenet@2.1.0 @tensorflow-models/mobilenet@2.0.5 @tensorflow-models/mobilenet@2.0.4 @tensorflow-models/mobilenet@2.0.3 @tensorflow-models/mobilenet@2.0.2 @tensorflow-models/mobilenet@1.0.1 @tensorflow

cdn.jsdelivr.net

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@4.2.0"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/mobilenet@2.0.5"></script>
</head>
<body>
    <p id="predictions"></p>
    <img src="cat.jpg" id="cat">

    <script>
        async function loadAndPredict() {
        const img = document.getElementById('cat');  
        const model = await mobilenet.load();

        // Classify the image.
        const predictions = await model.classify(img);

        console.log('Predictions: ');
        console.log(predictions);

        // Display the prediction result.
        const preds = document.getElementById('predictions');
        preds.innerHTML = predictions.map((p) => {
            return p['className'];
        }).join('<br>');
        }

        loadAndPredict();
    </script>


</body>
</html>

~~근데 하는거 맞냐 이거... 아무리 생각해도 뭔가 아닌것 같다..~~

728x90