프로그래밍/Tensorflow.js

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

1. cors error

 

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

 

로컬에서 CORS policy 관련 에러가 발생하는 이유 (velog.io)

 

로컬에서 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 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>

 

 

 

 

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

'프로그래밍 > Tensorflow.js' 카테고리의 다른 글

tensorflow.js 기본개념 익히기 -연산그래프-  (0) 2023.01.06
TAGS.

Comments