Javascript cdn resource fail - javascript

I follow the instruction, but error report like this
my code:
<html>
<head>
<!-- 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='./pose/images/aa_090.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>
which is exactly the same as
https://github.com/tensorflow/tfjs-models/tree/master/posenet
Plz do me a favor

I tried the same code snippet and it worked for me without any issue, the cdn also seems to be working when I checked, so the problem could be a few things:
Your image does not exist at the given location
There was some network issue when you attempted this
There is an issue fetching the image locally due to cors : https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSRequestNotHttp
Incase the issue persists try downloading the CDN's and the image and host it by following,
In the directory of your files run: python -m SimpleHTTPServer 8000
Go to localhost:8000/yourfile.html
Revert back in case of any issues

Related

html script blank page when run

I'm trying to debug an experiment written in JS & html. I'm running an html template that imports JS codes. But all I get is a blank page when I run it in chrome. I checked whether my chrome preference allows javascript to be run.
<!doctype html>
<html>
<head>
<title>Name Face Association Task</title>
<script defer src="/Users/jasonlim/Downloads/MTurk_Experiments-master/NFA/static/lib/jquery-min.js" type="/Users/jasonlim/Downloads/MTurk_Experiments-master/NFA/text/javascript"></script>
<script defer src="/Users/jasonlim/Downloads/MTurk_Experiments-master/NFA/static/lib/underscore-min.js" type="/Users/jasonlim/Downloads/MTurk_Experiments-master/NFA/text/javascript"></script>
<script defer src="/Users/jasonlim/Downloads/MTurk_Experiments-master/NFA/static/lib/backbone-min.js" type="/Users/jasonlim/Downloads/MTurk_Experiments-master/NFA/text/javascript"></script>
<script defer src="/Users/jasonlim/Downloads/MTurk_Experiments-master/NFA/static/lib/d3.v3.min.js"></script>
<!-- jsPsych Plugins -->
<script defer src="/Users/jasonlim/Downloads/MTurk_Experiments-master/NFA/static/jsPsych/jspsych.js"></script>
<script defer src ="/Users/jasonlim/Downloads/MTurk_Experiments-master/NFA/static/jsPsych/plugins/jspsych-instructions.js"></script>
<script defer src="/Users/jasonlim/Downloads/MTurk_Experiments-master/NFA/static/jsPsych/plugins/jspsych-html-keyboard-response.js"></script>
<script defer src="/Users/jasonlim/Downloads/MTurk_Experiments-master/NFA/static/jsPsych/plugins/jspsych-survey-html-form.js"></script>
<link href="/Users/jasonlim/Downloads/MTurk_Experiments-master/NFA/static/jsPsych/css/jspsych.css" rel="stylesheet" type="/Users/jasonlim/Downloads/MTurk_Experiments-master/NFA/text/css"></link>
<!-- additional functions -->
<script defer src="/Users/jasonlim/Downloads/MTurk_Experiments-master/NFA/static/js/supplementary-functions.js"></script>
<script defer src="/Users/jasonlim/Downloads/MTurk_Experiments-master/NFA/static/js/questionnaire.js"></script>
<!-- psiTurk
<script defer src="/Users/jasonlim/Downloads/MTurk_Experiments-master/NFA/static/js/psiturk.js" type="text/javascript"></script>
<script type="text/javascript">
// These fields provided by the psiTurk Server
var uniqueId = "{{ uniqueId }}"; // a unique string identifying the worker/task
var adServerLoc = "{{ adServerLoc }}"; // the location of your ad (so you can send user back at end of experiment)
var mode = "{{ mode }}"
</script>
-->
<!-- experiment -->
<script defer src="/Users/jasonlim/Downloads/MTurk_Experiments-master/NFA/static/js/NFA.js"></script>
</head>
<body>
<noscript>
<h1>Warning: Javascript seems to be disabled</h1>
<p>This website requires that Javascript be enabled on your browser.</p>
<p>Instructions for enabling Javascript in your browser can be found
here</p>
</noscript>
</body>
</html>
My psiturk is not able to be downloaded, so I commented out all the code related to psiturk and tried running it in plain html instead.
I guess your server does not have a path like http://example.com/Users/jasonlim/.... :)
You should open your browser's devtools (F12) to see the errors. It would have told you that those files cannot be found.
You need to make those paths relative to the current page (something like static/lib/jquery-min.js or lib/jquery-min.js depending on where your HTML file is located), or when running a local HTTP server you can make them relative to the root of the domain (e.g. /lib/jquery-min.js).
Plus, you have invalid type attributes. The MIME type for JavaScript is text/javascript and not /Users/jasonlim/Downloads/MTurk_Experiments-master/NFA/text/javascript. Same goes for the style tag, the MIME type should be text/css and not /Users/jasonlim/Downloads/MTurk_Experiments-master/NFA/text/css.
You can check the documentation about <script> and <style> here. Also, take a look at this tutorial to understand relative and absolute URLs.
But, it appears to me that you are looking at this the wrong way in the first place. According to the psiTurk documentation, you need to use the psiturk tool (for example with the debug command) to test your experiment locally, not by opening the HTML file manually. Your comment says "These values are provided by the psiTurk server" but if you just open the HTML files, there is no such psiTurk server, and you will have variables actually containing {{ uniqueId }} for example, instead of the ID that the server would normally put there...

How to use marker area learn

Right now I'm working with Three.js , Aframe and AR.js .
I'm following Jerome's example :
https://github.com/jeromeetienne/AR.js/blob/master/three.js/examples/multi-markers/examples/player.html
I've included his library in my project sample and I'm trying to figure out why this happens :
When I'm on the player.html page , everything's working , the console doesn't display any error , just a warning :
stop profile.trackingBackend() obsolete function. use .trackingMethod instead
(But I don't think this is causing the problem)
And then , when I click to scan the markers , the button works , the function behind executes , I get redirected to the learner.html webpage , but all import scripts are getting 400 error code and aren't loaded on the website so nothing's working.
What I did : I've checked the scripts via online tools , line by line , copy paste try.They're the same , when I say the same I mean the learner.html page has 3 less scripts imported than the player.html , the common scripts syntax is the same on both pages.
What I noticed : If I try to access the webpage without the options in the URL the page is perfectly working ... well , the page is giving me some output about the missins options but the scripts are loaded , but I need the options :(
The problem with the scripts imports I think it's caused by that object included in the URL webpage , weird thing because it has some other things added in the player webpage as well and it's working.
I'm using NodeJS v4.2.6 & NPM v3.5.2 & Express v4.16.4
This is the way how I handle the requests for these 2 page in NodeJS:
app.get('/multiMarkers4', function (req, res) {
res.render( pathView + 'player.ejs', { pageName:"player", errorMsg:"" });
});
app.get('/learner', function (req, res) {
res.render( pathView + 'learner.ejs', { pageName:"learner", errorMsg:"" });
});
Yes, I've changed the files from html to ejs and moved them into the /views ( only these 2 learner.ejs and player.ejs )
For scripts I've created some specific paths in Node :
app.use('/three', express.static(__dirname + '/three.js'));
The learner.ejs and player.ejs webpages have pretty much the same code as they have in the Jerome's GitHub repository , the only modified thing are the import scripts :
This is in player.ejs and it's working
<!-- three.js library -->
<script src='/three/examples/vendor/three.js/build/three.js'></script>
<script src='/three/examples/vendor/three.js/examples/js/libs/stats.min.js'></script>
<!-- jsartookit -->
<script src='/three/vendor/jsartoolkit5/build/artoolkit.min.js'></script>
<script src='/three/vendor/jsartoolkit5/js/artoolkit.api.js'></script>
<!-- aruco -->
<script src='/three/vendor/js-aruco/src/svd.js'></script>
<script src='/three/vendor/js-aruco/src/posit1.js'></script>
<script src='/three/vendor/js-aruco/src/cv.js'></script>
<script src='/three/vendor/js-aruco/src/aruco.js'></script>
<script src='/three/src/threex/threex-aruco/threex-arucocontext.js'></script>
<script src='/three/src/threex/threex-aruco/threex-arucodebug.js'></script>
<!-- include threex.artoolkit -->
<script src='/three/src/threex/threex-artoolkitsource.js'></script>
<script src='/three/src/threex/threex-artoolkitcontext.js'></script>
<script src='/three/src/threex/threex-artoolkitprofile.js'></script>
<script src='/three/src/threex/threex-arbasecontrols.js'></script>
<script src='/three/src/threex/threex-armarkercontrols.js'></script>
<script src='/three/src/threex/threex-armarkerhelper.js'></script>
<script src='/three/src/threex/threex-arsmoothedcontrols.js'></script>
<script>THREEx.ArToolkitContext.baseURL = '';</script>
<script src='/three/examples/multi-markers/threex-armultimarkerutils.js'></script>
<script src='/three/examples/multi-markers/threex-armultimarkercontrols.js'></script>
<script src='/three/examples/multi-markers/threex-armultimarkerlearning.js'></script>
<script src='/three/examples/multi-markers/examples/threex-screenasportal/threex-screenasportal.js'></script>
<script>THREEx.ScreenAsPortal.baseURL = 'threex-screenasportal/';</script>
When I'm on player.ejs page the URL is :
https://x.y.z/multiMarkers4#%7B"trackingBackend"%3A"artoolkit"%7D
When I'm on player.ejs page the console log in devTools is :
THREE.WebGLRenderer 86
threex-artoolkitprofile.js:145 stop profile.trackingBackend() obsolete function. use .trackingMethod instead
ARjs.Profile.trackingBackend # threex-artoolkitprofile.js:145(This is that warning,the rest of the output is just simple output)
artoolkit.min.js:1 Allocated videoFrameSize 1228800
artoolkit.min.js:1 Pattern detection mode set to 1.
artoolkit.min.js:1 Pattern ratio size set to 0.500000.
This is in learner.ejs and it's working WITHOUT THE OPTIONS IN URL :
<!-- three.js library -->
<script src='/three/examples/vendor/three.js/build/three.js'></script>
<script src='/three/examples/vendor/three.js/examples/js/libs/stats.min.js'></script>
<!-- jsartookit -->
<script src='/three/vendor/jsartoolkit5/build/artoolkit.min.js'></script>
<script src='/three/vendor/jsartoolkit5/js/artoolkit.api.js'></script>
<!-- aruco -->
<script src='/three/vendor/js-aruco/src/svd.js'></script>
<script src='/three/vendor/js-aruco/src/posit1.js'></script>
<script src='/three/vendor/js-aruco/src/cv.js'></script>
<script src='/three/vendor/js-aruco/src/aruco.js'></script>
<script src='/three/src/threex/threex-aruco/threex-arucocontext.js'></script>
<script src='/three/src/threex/threex-aruco/threex-arucodebug.js'></script>
<!-- include threex.artoolkit -->
<script src='/three/src/threex/threex-artoolkitsource.js'></script>
<script src='/three/src/threex/threex-artoolkitcontext.js'></script>
<script src='/three/src/threex/threex-artoolkitprofile.js'></script>
<script src='/three/src/threex/threex-arbasecontrols.js'></script>
<script src='/three/src/threex/threex-armarkercontrols.js'></script>
<script src='/three/src/threex/threex-armarkerhelper.js'></script>
<script src='/three/src/threex/threex-arsmoothedcontrols.js'></script>
<script>THREEx.ArToolkitContext.baseURL = '';</script>
<script src='/three/examples/multi-markers/threex-armultimarkerutils.js'></script>
<script src='/three/examples/multi-markers/threex-armultimarkercontrols.js'></script>
<script src='/three/examples/multi-markers/threex-armultimarkerlearning.js'></script>
When I'm on learner.ejs page the URL is :
https://x.y.z/learner?%7B"backURL"%3A"https%3A%2F%2Fx.y.z%2FmultiMarkers4%23%257B%2522trackingBackend%2522%253A%2522artoolkit%2522%257D"%2C"trackingBackend"%3A"artoolkit"%2C"markersControlsParameters"%3A%5B%7B"type"%3A"pattern"%2C"patternUrl"%3A"https%3A%2F%2Fx.y.z%2FmultiMarkers4patts%2Fhiro.patt"%7D%2C%7B"type"%3A"pattern"%2C"patternUrl"%3A"https%3A%2F%2Fx.y.z%2FmultiMarkers4patts%2Fkanji.patt"%7D%2C%7B"type"%3A"pattern"%2C"patternUrl"%3A"https%3A%2F%2Fx.y.z%2FmultiMarkers4patts%2Fa.patt"%7D%2C%7B"type"%3A"pattern"%2C"patternUrl"%3A"https%3A%2F%2Fx.y.z%2FmultiMarkers4patts%2Fb.patt"%7D%2C%7B"type"%3A"pattern"%2C"patternUrl"%3A"https%3A%2F%2Fx.y.z%2FmultiMarkers4patts%2Fc.patt"%7D%2C%7B"type"%3A"pattern"%2C"patternUrl"%3A"https%3A%2F%2Fx.y.z%2FmultiMarkers4patts%2Ff.patt"%7D%5D%7D
As I said , for https://x.y.z/learner the scripts are included but I don't have the options and I need them
When I'm on learner.ejs page the console log in devTools has the 400 response from server for all scripts :
Failed to load resource: the server responded with a status of 400 (Bad Request)
How can I import these scripts and keep the options so I will be able to learn the marker area?
Ok, I'll put here the answer to my question.
After posting this question, I've tried to change back from EJS to HTML and see if there's any difference, still the same results.
So I chose the hard way: I've made some changes in the library, to sum it up:
I've kept the way how I access the file e.g: via /learner & without any parameters in the URL, But I need them, so I've moved them on the web localStorage and just used them from there on the website part and that worked.

How to run HTTP sourced javascript on HTTPS site?

I'm trying to run the ConvNetJS example through the Cloud9 online IDE. The script included works when it is inside the HTML, but not when I link it as follows:
<html>
<head>
<title>minimal demo</title>
<!-- CSS goes here -->
<style>
body {
background-color: #FFF; /* example... */
}
</style>
<!-- http://jquery.com/ -->
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
<!-- http://getbootstrap.com/ -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- import convnetjs library -->
<script src="//cs.stanford.edu/people/karpathy/convnetjs/build/convnet-min.js"></script>
<!-- app's own JavaScript -->
<!--script type="text/javscript" src="../static/script.js"></script-->
</head>
<body>
<div id="egdiv"></div>
</body>
</html>
with the javascript inside script.js:
function periodic() {
var d = document.getElementById('egdiv');
d.innerHTML = 'Random number: ' + Math.random();
};
var net; // declared outside -> global variable in window scope
$(function start() {
// this gets executed on startup
net = new convnetjs.Net();
// example of running something every 1 second
setInterval(periodic, 1000);
});
When I run the application through the IDE I get this warning through the console: Mixed Content: The page at 'https://ide50-stephenwist.cs50.io/' was loaded over HTTPS, but requested an insecure script 'http://cs.stanford.edu/people/karpathy/convnetjs/build/convnet-min.js'. This content should also be served over HTTPS.
How do I get around this? I am using chrome and letting it run 'insecure scripts'. Thanks for giving this a read, here's a puppy
You just can't load unsecured content without having this warning.
The only thing you can do when you have some unsecured external content to load is to copy that content and save it on your secured domain.
This way, you are able to run it from a secured address (yours).
NOW, cs.stanford.edu is a secured website.
So just add the https: in front of //cs.stanford.edu/people/karpathy/convnetjs/build/convnet-min.js and there will be no warning.
How about try to add https: in front of your cdn //cs.stanford.edu/people/karpathy/convnetjs/build/convnet-min.js.
Perheps something like https://cs.stanford.edu/people/karpathy/convnetjs/build/convnet-min.js should prevent Chrome warning?

Referencing JQuery correctly

I am trying to use Jquery for the first time and I am getting an issue. I am using VS 2013, asp.net and VB.
My head tag is as follows.
<head runat="server">
<title></title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<meta http-equiv="X-UA-Compatible" content="IE=EDGE" />
<script src="Bin/jquery-1.10.2.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
$('#LowerText').hide();
$('#UpperText').hide();
$('#AssetStatusChoice').change(function () {
if($('#AssetStatusChoice').val("Fully Available"))
{
$('#CommentsText').hide();
}
if ($('#AssetStatusChoice').val("Restricted"))
{
$('#UpperLimit').show();
$('#LowerLimit').show();
}
if ($('#AssetStatusChoice').val("Unavailable"))
{
$('#Commentstext').show();
}
});
});
</script>
</head>
When I debug the page I get the following error.
0x800a1391 - JavaScript runtime error: '$' is undefined
It seems from Googling the error that I am not referencing the js file correctly. Can anyone help?
Add <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script> and Remove the
<script src="Bin/jquery-1.10.2.js" type="text/javascript"></script>
<script> Just use a host Jquery instead of adding it to you source. Read more :
3 reasons why you should use hosted jQuery
IIS doesn't serve content in the /bin directory.
Move it to another directory like /scripts or /js or /scripts/lib, something like that. The bin directory is a bad place to put script files.
You have a number of options here. You could use the Google CDN by adding the following to your header:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Or, as it appears you're using .NET, you could do this:
<script type="text/javascript" src="<%=ResolveClientUrl("~/Bin/jquery-1.10.2.js") %>"></script>
The second option gives you the additional advantage that when used in a master page can be used in any content pages at any file system level and it will still resolve correctly.
As Stefan has also said, I'd recommend moving your jQuery file from your bin directory.
Copy the jQuery file in some other folder, like Scripts, or js, and in Solution Explorer check to see all files. Find the jQuery file you just copied, include it in the project, then drag it on the page where you want to place it. A correct script tag will be created.

How to use aloha editor on the website

I want to use aloha editor on my website and i downloaded it from [http://aloha-editor.org/].Now i am totally confused because the downloaded bundle contain lots of files.
I pick up aloha.js and aloha.css and added the following script
$(document).ready(function () {
Aloha.ready(function () {
var $ = Aloha.jQuery;
$('.editable').aloha();
})
});
but its not working.Then i tried
<script src="http://cdn.aloha-editor.org/current/lib/aloha.js"
data-aloha-plugins="common/format,
common/list,
common/link,
common/highlighteditables">
</script>
<!-- load the Aloha Editor CSS styles -->
<link href="http://cdn.aloha-editor.org/current/css/aloha.css" type="text/css" />
<!-- make all elements with class="editable" editable with Aloha Editor -->
<script type="text/javascript">
Aloha.ready( function() {
var $ = Aloha.jQuery;
$('.editable').aloha();
});
</script>
It works fine. But i want to use my downloaded bundle, Can anyone tell me how can i manage all the files & folders (for ex- where i have to put image folder and other folder..) so it starts working?
Copy all the files in to the root directory which includes plugins,lib,img,css and refer above described guide.
See http://www.alohaeditor.org/guides/using_aloha.html.
Save the files in /javascripts in the root directory of your web server, such as where localhost is run.

Categories