I'm getting an Uncaught ReferenceError when I try to load this script, any suggestions?
index.html:12 Uncaught ReferenceError: mobilenet is not defined
at index.html:12
<html>
<head>
<title>Something else Introduction</title>
<!---- Import Script---->
<script src="https://unpkg.com/#tensorflow/tfjs#1.2.8" type="text/javascript" </script>
<script src="https://unpkg.com/#tensorflow-models/mobilenet#2.0.4" type="text/javascript"</script>
</head>
<body>
<img id="img" crossOrigin src = "https://i.imgur.com/e5KD2lt.jpg">
<h1 id="message">Hello, I'm a simple web page!</h1>
<script>
mobilenet.load().then(net => {
console.log('Model loaded to memory!')
const theImage = document.getElementById('img')
net.classify(theImage).then(result=> {
document.getElementById('message').innerText = `
Detected: ${result[0].className}
Probability: ${result[0].Probability}
`
})
})
</script>
</body>
</html>
The script tags are missing closing brackets
Just change in your <head> tags as the following:
<script src="https://unpkg.com/#tensorflow/tfjs#1.2.8" type="text/javascript"></script>
<script src="https://unpkg.com/#tensorflow-models/mobilenet#2.0.4" type="text/javascript"></script>
Additional suggestion:
Use your <script> tags at the end of <body> tag and not in the <head> or just simply use async attribute. It will help the page load performance. Read further in this answer for longer explanation.
I hope this helps!
Related
I am trying to build an HTML page with Adaptive Card Designer.
I am following the instructions, using the CDN approach per this documentation:
https://www.npmjs.com/package/adaptivecards-designer
Any input is appreciated. Thanks a lot! :)
It is throwing the following error:
Uncaught ReferenceError: ACDesigner is not defined
My HTML file is the following:
<html>
<head>
</head>
<script src="https://unpkg.com/adaptivecards#latest/dist/adaptivecards.min.js"></script>
<script src="https://unpkg.com/adaptive-expressions#4/lib/browser.js"></script>
<script src="https://unpkg.com/adaptivecards-templating#latest/dist/adaptivecards-templating.min.js"></script>
<script src="https://unpkg.com/markdown-it#8.4.0/dist/markdown-it.min.js"></script>
<script src="https://unpkg.com/monaco-editor#0.17.1/min/vs/loader.js"></script>
<!-- <script src="https://unpkg.com/adaptivecards-designer#latest/dist/adaptivecards-designer.min.js"></script> -->
<script src="https://unpkg.com/adaptivecards-designer#latest/dist/adaptivecards-designer-standalone.min.js"></script>
<script type="text/javascript">
window.onload = function () {
let hostContainers = [];
let designer = new ACDesigner.CardDesigner(hostContainers);
designer.assetPath = "https://unpkg.com/adaptivecards-designer#latest/dist";
require.config({ paths: { 'vs': 'https://unpkg.com/monaco-editor#0.17.1/min/vs' } });
require(['vs/editor/editor.main'], function () {
designer.monacoModuleLoaded();
});
designer.attachTo(document.getElementById("designerRootHost"));
};
</script>
<body>
<div id="designerRootHost"></div>
</body>
</html>
monaco-editor has impacts on the process of loading modules, please change the order and load adaptivecards-designer first
<!-- <script src="https://unpkg.com/adaptivecards-designer#latest/dist/adaptivecards-designer.min.js"></script> -->
<script src="https://unpkg.com/adaptivecards-designer#latest/dist/adaptivecards-designer-standalone.min.js"></script>
<script src="https://unpkg.com/monaco-editor#0.17.1/min/vs/loader.js"></script>
When I load this page the script is not loading for some reason. What am I doing wrong here?
<html>
<head>
<title>hi</title>
<script language="JScript.Compact">
var script = document.createElement('script');
script.onload = function() {
alert("Script loaded and ready");
};
script.src = "http://192.168.1.106/js/min.js";
document.getElementsByTagName('head')[0].appendChild(script);
</script>
</head>
</html>
I think it is working but the alert doesn't get triggered because the script you refer to isn't loaded. Try it like this:
<!DOCTYPE html>
<html>
<head>
<link media="screen" href="style.css">
</head>
<body>
<p>…</p>
<img src="file.jpg" alt="" />
<script src="responsive-nav.min.js">
<script>
window.onload = function () {
console.log('Document loaded.');
function init();
function dosomething();
}
</script>
</body>
</html>
<script language="JScript.Compact">
The language attribute is obsolete, but browsers still support it.
Since you set it to an unrecognised language, browsers don't know how to execute it, so they ignore it.
Remove the language attribute.
'''
<html>
<head>
<meta charset="UTF-8">
<!-- Load TensorFlow.js -->
<script src="https://cdn.jsdelivr.net/npm/#tensorflow/tfjs"></script>
<!-- Load Posenet -->
<script src="https://cdn.jsdelivr.net/npm/#tensorflow-models/posenet"></script>
</head>
<body>
<img id='cat' src='cat.jpg '/>
</body>
<!-- Place your code in the script tag below. You can also use an external .js file -->
<script>
var flipHorizontal = false;
var imageElement = document.getElementById('cat');
posenet.load().then(function(net) {
const pose = net.estimateSinglePose(imageElement, {
flipHorizontal: true
});
return pose;
}).then(function(pose){
console.log(pose);
})
</script>
</html>
'''
Above is html file using which I am trying out posenet from tensorflow js.
Following is the error which I received when I tried to open the above file in google chrome.
Uncaught (in promise) DOMException: Failed to execute 'texImage2D' on 'WebGL2RenderingContext': Tainted canvases may not be loaded.
at https://cdn.jsdelivr.net/npm/#tensorflow/tfjs:2:176404
at qt (https://cdn.jsdelivr.net/npm/#tensorflow/tfjs:2:55726)
at vi (https://cdn.jsdelivr.net/npm/#tensorflow/tfjs:2:176377)
at t.uploadPixelDataToTexture (https://cdn.jsdelivr.net/npm/#tensorflow/tfjs:2:181200)
at Object.kernelFunc (https://cdn.jsdelivr.net/npm/#tensorflow/tfjs:2:480876)
at h (https://cdn.jsdelivr.net/npm/#tensorflow/tfjs:2:42226)
at https://cdn.jsdelivr.net/npm/#tensorflow/tfjs:2:42907
at t.scopedRun (https://cdn.jsdelivr.net/npm/#tensorflow/tfjs:2:40845)
at t.runKernelFunc (https://cdn.jsdelivr.net/npm/#tensorflow/tfjs:2:42726)
at t.runKernel (https://cdn.jsdelivr.net/npm/#tensorflow/tfjs:2:41280)
Following is the error when the html file is opened in firefox
'''
SecurityError: The operation is insecure.
Source map error: Error: request failed with status 404
Resource URL: https://cdn.jsdelivr.net/npm/#tensorflow/tfjs
Source Map URL: tf.min.js.map
'''
I am a beginner and I am not able to understand the above error. I am trying to get the pose coordinates from the console in the browser but I just keep getting this error.
Any help would be appreciated and thanks in advance.
crossorigin='anonymous' needs to be added to the image tag
<html>
<head>
<meta charset="UTF-8">
<!-- Load TensorFlow.js -->
<script src="https://cdn.jsdelivr.net/npm/#tensorflow/tfjs"></script>
<!-- Load Posenet -->
<script src="https://cdn.jsdelivr.net/npm/#tensorflow-models/posenet"></script>
</head>
<body>
<img id='cat' src='https://i.imgur.com/jlFgGpe.jpg' crossorigin='anonymous' />
</body>
<!-- Place your code in the script tag below. You can also use an external .js file -->
<script>
var flipHorizontal = false;
var imageElement = document.getElementById('cat');
posenet.load().then(function(net) {
const pose = net.estimateSinglePose(imageElement, {
flipHorizontal: true
});
return pose;
}).then(function(pose) {
console.log(pose);
})
</script>
</html>
To use an image locally, the image needs to be served by a server allowing cors. http-server can be used with the command line
http-server -c1 --cors .
<html>
<head>
<meta charset="UTF-8">
<!-- Load TensorFlow.js -->
<script src="https://cdn.jsdelivr.net/npm/#tensorflow/tfjs"></script>
<!-- Load Posenet -->
<script src="https://cdn.jsdelivr.net/npm/#tensorflow-models/posenet"></script>
</head>
<body>
<img id='cat' src=' http://127.0.0.1:8080/temp.png' crossorigin="anonymous" />
</body>
<!-- Place your code in the script tag below. You can also use an external .js file -->
<script>
var flipHorizontal = false;
var imageElement = document.getElementById('cat');
imageElement.crossOrigin = "Anonymous";
posenet.load().then(function (net) {
const pose = net.estimateSinglePose(imageElement, {
flipHorizontal: true
});
return pose;
}).then(function (pose) {
console.log(pose);
})
</script>
</html>
I was having the same problem with my react app and tensorflow.js but i only realised that i was missing the crossOrigin prop or attribute as edkeveked mentioned. So i solved my problem by modifying the img tag and put the attribute or property crossOrigin as follows:
<img crossOrigin='anonymous' ... />
edkeveked's answer is the best
Good luck ✔✔✨✨
I'm making a HEX to RGB colour converter and I have done all the things I think you are suppose to do and that is my JS code and HTML code
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Colour Converter</title>
</head>
<body>
<center>
<h1>Hex - RGB</h1>
<input id="hex">
<input id="rgb">
<script src="Main.js"></script>
</center>
</body>
</html>
Javascript
var HexInput = document.getElementById("hex");
var RGBInput = document.getElementById("rgb");
HexInput.addEventListener("input",ToHex);
function ToHex() {
console.log("Test")
}
and I get this Error
Uncaught TypeError: Cannot read property 'addEventListener' of null
at Main.js:3
I just got started learn JavaScript and I'm fairly new
You should make a few changes:
First, you need to run your script after the entire DOM has loaded. If you run your script before the DOM has fully loaded, then your document.getElementById won't be able to find the element and will return null.
Second, you also need to change ToHEX() to ToHEX in your addEventListener. The former was executing ToHEX immediately and returning nothing. The latter will pass the function to the addEventListener. Edit: It looks like you just updated your question to address this.
Here is the corrected code:
document.addEventListener("DOMContentLoaded", function(event) {
var HexInput = document.getElementById("hex");
var RGBInput = document.getElementById("rgb");
HexInput.addEventListener("input",ToHEX);
function ToHex() {
console.log("Test")
}
});
Lastly, you should also move your <script src="Main.js"></script> line back into the header -- it doesn't need to be inserted after your HTML. Including the script after your HTML doesn't mean that it will run after the page has loaded.
This code seems to work. I fixed code order and typo error.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Colour Converter</title>
</head>
<body>
<center>
<h1>Hex - RGB</h1>
<input id="hex">
<input id="rgb">
<script>
function ToHex() {
console.log("Test");
}
var HexInput = document.getElementById("hex");
var RGBInput = document.getElementById("rgb");
HexInput.addEventListener("input", ToHex);
</script>
</center>
</body>
</html>
Thanks Bassem Rabia It works
HTML
<!doctype html>
<html lang="en">
<head></head>
<body>
<input id="hex">
<input id="rgb">
<script src="main.js"></script>
</body>
</html>
JavaScript
document.addEventListener("DOMContentLoaded", function(event){
function toHex(){
console.log("Test");
}
var HexInput = document.getElementById("hex");
var RGBInput = document.getElementById("rgb");
HexInput.addEventListener("input", toHex);
});
Also, you have 2 mistakes in this line
HexInput.addEventListener("input",ToHEX());
the name of the method is misspelled
When you attach the event handler you just pass the reference to the function and not the invocation
So this would be the correct one
HexInput.addEventListener("input",ToHex);
http://prntscr.com/ic1vom
<!doctype html>
<html lang="en">
<head></head>
<body>
<input id="hex">
<input id="rgb">
<script src="main.js"></script>
</body>
</html>
main.js
document.addEventListener("DOMContentLoaded", function(event){
function toHex(){
console.log("Test");
}
var HexInput = document.getElementById("hex");
var RGBInput = document.getElementById("rgb");
HexInput.addEventListener("input", toHex());
});
Here is source code of the simple page:
<html>
<head>
<title>Test</title>
<script src="jquery-1.4.2.js" type=text/javascript></script>
</head>
<body>
<div id="divText">Original</div>
<script type="text/javascript">
var vText = document.getElementById('divText');
vText.innerText = 'Changed';
alert(vText.innerHTML);
$('divText').text = 'Changed with jQuery';
alert(vText.innerHTML);
</script>
</body>
</html>
"jquery-1.4.2.js" file is in the same folder.
Both alerts display "original" text, text in browser also "Original"...
What is wrong with my code? Any thoughts are welcome.
1. A quick google ( took me 2 seconds ) reveals text is a function, not a property. Use it like .text('lol') as the example directly from the API.
http://api.jquery.com/text/
2. innerText isn't available in every browser/DOM property.
As you pointed out in the title you'll be wanting to change the inner html. You'll also need the $('#divText') selector to get to the div with jQuery.
<html>
<head>
<title>Test</title>
<script src="jquery-1.4.2.js" type=text/javascript></script>
</head>
<body>
<div id="divText">Original</div>
<script type="text/javascript">
var vText = document.getElementById('divText');
vText.innerHTML = 'Changed';
alert(vText.innerHTML);
alert($('#divText'));
$('#divText').html('Changed with jQuery');
alert(vText.innerHTML);
</script>
</body>
</html>