Here's my index file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta name="description" content="test">
<!-- iOS meta tags & icons -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="test">
<title>test</title>
</head>
<body>
<script type="text/javascript">
console.log('myname');
calcbymodel('/model.json',[0,0,0,0]);
</script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@2.0.0/dist/tf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fetch-polyfill@0.8.2/fetch.js"></script><!-- fetch -->
<script src="./babel.min.js"></script><!-- babel -->
<script src="./app.js" type='text/babel'></script>
</body>
</html>
And here's app.js file
async function calcbymodel(path, input) {
const model = await tf.loadLayersModel(path);
const r = model.predict(tf.tensor(input));
r.data().then(array => console.log(array));
return r.data();
}
I wonder why console says:
Uncaught ReferenceError: calcbymodel is not defined
at (index):21
(anonymous) @ (index):21
For the babel script, it could not be imported as company policy denies. So, I imported as a local file. Here's the link:
https://unpkg.com/@babel/standalone/babel.min.js
Can anybody help me out?
It turns out that babel script problem. Here's the link: Why JS cannot find the function in babel script?
You need to move the app.js file to above where you are using the function. In this case, you either need to move the script tag that you are using the function below the app.js script, or move the app.js script above where you use the function.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta name="description" content="test">
<!-- iOS meta tags & icons -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="test">
<title>test</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@2.0.0/dist/tf.min.js">
</script>
<script src="https://cdn.jsdelivr.net/npm/fetch-polyfill@0.8.2/fetch.js">
</script><!-- fetch -->
<script src="./babel.min.js"></script><!-- babel -->
<script src="./app.js" type='text/babel'></script>
<script type="text/javascript">
console.log('myname');
calcbymodel('/model.json',[0,0,0,0]);
</script>
</body>
</html>
Because HTML loads js files in the order that they are in the file, a function can be used in any script tag below it in the HTML file.
The JS is executed currently in the order you have defined it:
<body>
<body>
<!-- This is first -->
<script type="text/javascript">
console.log('myname');
calcbymodel('/model.json', [0, 0, 0, 0]);
</script>
<!-- This is second-->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@2.0.0/dist/tf.min.js"></script>
<!-- This is third-->
<script src="https://cdn.jsdelivr.net/npm/fetch-polyfill@0.8.2/fetch.js"></script>
<!-- fetch -->
<!-- This is fourth-->
<script src="./babel.min.js"></script>
<!-- babel -->
<!-- This is fitht-->
<script src="./app.js" type="text/babel"></script>
</body>
If you want acces in your code from to another function you need to move your first script to the bottom, the second problem seemed to be that the type="text/babel" must be set onto the babel script and not the app.
I tried it with CDN and this app:
<body>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@2.0.0/dist/tf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fetch-polyfill@0.8.2/fetch.js"></script>
<script src="./app.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js" type="text/babel"></script>
<script type="text/javascript">
console.log('myname');
calcbymodel('/model.json', [0, 0, 0, 0]);
</script>
</body>
in app.js:
const calcbymodel = ()=>{
console.log("make calculations");
}