How to receive judgement result from model of Custom Vision with JavaScript - javascript

I want to receive judgement result from model of Azure Custom Vision by using JavaScript.
I changed JavaScript code that this site has.
https://southcentralus.dev.cognitive.microsoft.com/docs/services/eb68250e4e954d9bae0c2650db79c653/operations/58acd3c1ef062f0344a42814
But I can't.
What is wrong with my code?
I changed IterationId, application, url, content-Type, Prediction-key, and data.
These part are enclosed with {} in the code below.
<!DOCTYPE html>
<html>
<head>
<title>Human</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js">
</script>
</head>
<body>
<script type="text/javascript">
$(function() {
var params = {
// Request parameters
"iterationId": "{Iteration id that showed in Performance Page}",
"application": "{My Project name of Custom Vision}",
};
$.ajax({
url: "{url that showed in "How to use the Prediction API"}" + $.param(params),
beforeSend: function(xhrObj){
// Request headers
xhrObj.setRequestHeader("Content-Type","application/octet-stream");
xhrObj.setRequestHeader("Prediction-key","{my prediction key that showed in "How to use the Prediction API"}");
},
type: "POST",
// Request body
data: "D:\some name\some name\image.jpg",
})
.done(function(data) {
alert("success");
})
.fail(function() {
alert("error");
});
});
</script>
</body>
</html>
Of course, I expected showing "success".
But, the actual output is "error"......

When I changed URL that this site has(https://southcentralus.dev.cognitive.microsoft.com/docs/services/eb68250e4e954d9bae0c2650db79c653/operations/58acd3c1ef062f0344a42814) in my code, I can get Success message.
And, I also write
processData: false,
contentType: false,
in ajax in my code

Change your code to see what is the error that you get back:
(Note the new "error" parameter to the request)
$.ajax({
url: "{url that showed in "How to use the Prediction API"}" + $.param(params),
beforeSend: function(xhrObj){
// Request headers
xhrObj.setRequestHeader("Content-Type","application/octet-stream");
xhrObj.setRequestHeader("Prediction-key","{my prediction key that showed in "How to use the Prediction API"}");
},
type: "POST",
// Request body
data: "D:\some name\some name\image.jpg",
error: function(xhr,status,error) {
// >>>>>>>>>>>> CHECK HERE THE ERROR <<<<<<<<<<<<
}
})
.done(function(data) {
alert("success");
})
.fail(function() {
alert("error");
});
Once you have the error, it would be easier to help you.

Related

javascript how to get json data with api call to redirected url

I'm fetching json data from gltich API.
https://wind-bow.gomix.me/twitch-api/users/freecodecamp
When I go to that link, the url redirects to another domain
https://wind-bow.glitch.me/twitch-api/users/freecodecamp
(domain name change from gomix.me to glitch.me)
Using postman for both HTTPs request, I get the same JSON data. However, both don't produce the same results when using jQuery .getJSON method
$(document).ready(function() {
$.getJSON("https://wind-bow.gomix.me/twitch-api/users/freecodecamp", function(data1) {
console.log("Gomix.me URL", data1); // nothing outputted
});
$.getJSON("https://wind-bow.glitch.me/twitch-api/users/freecodecamp", function(data2) {
console.log("Glitch.me URL", data2); // expected data outputted
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Is it possible to get JSON data through a URL that will be redirected gomix.me, or am I only able to use the final endpoint only glitch.me?
Gomix request is blocked by CORS policy. You can use this heroku app to bypass it: https://cors-anywhere.herokuapp.com/.
$(document).ready(function() {
$.getJSON("https://cors-anywhere.herokuapp.com/https://wind-bow.gomix.me/twitch-api/users/freecodecamp", function(data1) {
console.log("Gomix.me URL", data1); // now it works
});
$.getJSON("https://wind-bow.glitch.me/twitch-api/users/freecodecamp", function(data2) {
console.log("Glitch.me URL", data2); // expected data outputted
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
If you use $.ajax with dataType: 'jsonp' it helps you.
$(document).ready(function() {
$.ajax({
url: "https://wind-bow.gomix.me/twitch-api/users/freecodecamp",
type: 'GET',
dataType: 'jsonp',
success: function(data1) { console.log("Gomix.me URL", data1);}
});
});

U.N. FAO API - How do I do a POST data request via JS with this API?

I am trying to do a POST request (via JavaScript AJAX) to the United Nations Food and Agriculture Organization (U.N. FAO) API to get some data points. While I have successfully completed GET requests to this API with no problem, the POST requests continuously fail. I've done this type of request with many other APIs, but this one I can't figure out.
My code and URLs related to the API are below.
Can anyone please help me successfully complete a POST data request to this FAO API? Either modifying my code or creating your own example code would be fine.
The API endpoint is here:
http://fenixapps2.fao.org/api/v1.0/en/data/
The API's technical description is here:
http://fenixapps2.fao.org/api/v1.0/
The 'Example Page' for the API is here:
http://faostat.github.io/faostat-api/
The 'Showcase Page' for the API is here:
http://fenixapps.fao.org/repository/api/
My code -- a working GET request + non-working POST request -- is below.
You can cut-and-paste it into a text editor and it will work as an HTML file.
<html>
<head>
<script type='text/javascript' src='https://code.jquery.com/jquery-2.1.3.min.js'></script>
<script type='text/javascript'>
function test() {
// (1) GET requests work fine.
// Based on example by FAOSTAT (http://faostat.github.io/faostat-api/)
$.ajax({
type: 'GET',
url: 'http://fenixapps2.fao.org/api/v1.0/en/classifications/QC',
success: function(response) {
console.log("metadata GET response:");
console.log(response);
}
});
// (2) POST requests do NOT work with my code.
// Originally based on example by FAOSTAT (http://faostat.github.io/faostat-api/)
// Modified per API description at: http://fenixapps2.fao.org/api/v1.0/
$.ajax({
url: "http://fenixapps2.fao.org/api/v1.0/en/data/",
traditional: true,
data: {
"datasource": "production", //test
"output_type": "objects", //arrays
"api_key": "n.a.",
"client_key": "n.a.",
"lang": "en",
//"domain_code":"QC", //domain_code (from example page - http://faostat.github.io/faostat-api/) replaced by domain_codes?
"domain_codes": ["'QC'"],
//"thousand_separator": ",", //not mentioned at http://fenixapps2.fao.org/api/v1.0/, only on example page.
//"decimal_separator": ".", //not mentioned at http://fenixapps2.fao.org/api/v1.0/, only on example page.
"decimal_places": "2",
"List1Codes": ["'33'"],
"List2Codes": ["'2510'"],
"List3Codes": ["'15'"],
"List4Codes": ["'2007'","'2008'","'2009'","'2010'","'2011'","'2012'","'2013'","'2014'"],
"List5Codes": null,
"List6Codes": null,
"List7Codes": null,
"null_values": true,
//"group_by"
//"order_by"
//"operator"
"page_size":"100",
"limit": "10",
"page_number":1
//"show_codes"
//"show_flags"
//"show_unit"
},
type: 'POST',
success: function(response) {
console.log("data POST response:");
console.log(response);
}
});
}
</script>
</head>
<body onload='test();'>
<div id='out'></div>
</body>
---UPDATE---
I have tried changing the data section within $.ajax() so that the url created exactly matches the format of that of the cURL example from the FAO 'Example' page (http://faostat.github.io/faostat-api/). However, this has not altered the API's response. My updated code is included below -- the new console.log(urlPlusData); line I believe should reflect the full url that the code is generating for the POST.
<html>
<head>
<script type='text/javascript' src='https://code.jquery.com/jquery-2.1.3.min.js'></script>
<script type='text/javascript'>
function test() {
// (1) GET requests work fine.
// Based on example by FAOSTAT (http://faostat.github.io/faostat-api/)
$.ajax({
type: 'GET',
url: 'http://fenixapps2.fao.org/api/v1.0/en/classifications/QC',
success: function(response) {
console.log("metadata GET response:");
console.log(response);
}
});
// (2) POST requests do NOT work with my code.
// Originally based on example by FAOSTAT (http://faostat.github.io/faostat-api/)
// Modified per API description at: http://fenixapps2.fao.org/api/v1.0/
$.ajax({
url: "http://fenixapps2.fao.org/api/v1.0/en/data",
traditional: true,
data: {
"datasource": "production", //test
"output_type": "objects", //arrays
"api_key": "n.a.",
"client_key": "n.a.",
"lang": "en",
//"domain_code":"QC", //domain_code (from example page) replaced by domain_codes?
"domain_codes": ["QC"],
//"thousand_separator": ",", //not mentioned at http://fenixapps2.fao.org/api/v1.0/, only on example page.
//"decimal_separator": ".", //not mentioned at http://fenixapps2.fao.org/api/v1.0/, only on example page.
"decimal_places": "2",
"List1Codes": ["33"],
"List2Codes": ["2510"],
"List3Codes": ["15"],
"List4Codes": ["2007","2008","2009","2010","2011","2012"],
"List5Codes": ["null"],
"List6Codes": ["null"],
"List7Codes": ["null"],
"null_values": true,
//"group_by"
//"order_by"
//"operator"
"page_size":"100",
"limit": "10",
"page_number":"1"
//"show_codes"
//"show_flags"
//"show_unit"
},
beforeSend: function (jqXHR, settings) {
urlPlusData = settings.url + "?" + settings.data;
},
type: 'POST',
success: function(response) {
console.log("data POST response:");
console.log(urlPlusData);
console.log(response);
}
});
}
</script>
</head>
<body onload='test();'>
<div id='out'></div>
</body>

Implementing Microsoft's Project Oxford - Emotion API and file upload

I'm looking to be able to implement the Emotion API from Project Oxford on my website. I've currently written the below HTML/JavaScript code which checks an image from a URL and displays the result of said image after having run the Emotion API:
<head>
<title>JSSample</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<body>
<script type="text/javascript">
$(function() {
$.ajax({
url: "https://api.projectoxford.ai/emotion/v1.0/recognize",
beforeSend: function(xhrObj) {
// Request headers
xhrObj.setRequestHeader("Content-Type", "application/json");
xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key", "my-key");
},
type: "POST",
// Request body
data: '{"url": "https://philosophybank.files.wordpress.com/2013/08/happy-people.jpg"}',
})
.done(function(data) {
JSON.stringify(data);
alert(JSON.stringify(data));
//console.log(data);
//alert(data.scores);
})
.fail(function(error) {
console.log(error.getAllResponseHeaders());
alert("fail");
});
});
</script>
This code works fine, however I'm looking to implement this on my website such that people upload images themselves locally from their machine with the use of a browse button as opposed to looking up an image using the link. Any help would be very much appreciated!
I mocked this up using application/octet-stream as the body type which allows you to post a binary object (i.e. the image itself), rather than a url to an image. The Emotion API documentation details how this is a supported content type.
I've continued with use of JQuery as per your original example.
You should be able to copy and paste this entire example into a HTML file, add your Emotion API key where it says my-key and it will work
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>
<body>
<input type="file" id="file" name="filename">
<button id="btn">Click here</button>
<script type="text/javascript">
$('#btn').click(function () {
var file = document.getElementById('file').files[0];
$.ajax({
url: "https://api.projectoxford.ai/emotion/v1.0/recognize",
beforeSend: function(xhrObj) {
// Request headers
xhrObj.setRequestHeader("Content-Type", "application/octet-stream");
xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key", "my-key");
},
type: "POST",
data: file,
processData: false
})
.done(function(data) {
JSON.stringify(data);
alert(JSON.stringify(data));
})
.fail(function(error) {
alert(error.getAllResponseHeaders());
});
});
</script>
</body>
</html>

Project Oxford - HTTP 404 when calling Computer Vision API through Javascript

I am trying to get JSON data from Microoft Project Oxford through a API call. I followed the API reference but when I make a call I get a 404 error.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(function() {
var params = {
// Request parameters
"visualFeatures": "All",
};
$.ajax({
url: "https://api.projectoxford.ai/vision/v1/analyses&" + $.param(params),
beforeSend: function(xhrObj){
// Request headers
xhrObj.setRequestHeader("Content-Type","application/json");
xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key","0000000000000000");
},
type: "POST",
// Request body
data: '{ "Url": "http://www.sweetheartmotors.ca/sites/default/files/audi_PNG1736.png" }',
})
.done(function(data) {
alert("success");
//display data
console(data);
})
.fail(function() {
alert("error");
});
});
</script>
What is stopping me from making the call?
You need to change the URL to end in a question mark, rather than an ampersand: https://api.projectoxford.ai/vision/v1/analyses?
Unfortunately most of the samples on the projectoxford.ai site contain this error.

How can I get the results of a JSON POST back

I'm posting this JSON from a form page
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/dojo.js" type="text/javascript"></script>
<script type="text/javascript">
function poster()
{
var dataToPost = {grant_type: "password", username: dojo.byId("username").value, password: dojo.byId("password").value, redirect_uri: "http://localhost/default.html"};
var xhrArgs =
{
url: "https://localhost/api/did/authenticate?client_id=12345",
handleAs: 'json',
postData: dojo.toJson(dataToPost),
headers: { "Content-Type": "application/json; charset=UTF-8", "Accept" : "application/json" },
load: function(data, args)
{
alert("Data = " + data);
},
error: function(error, args)
{
alert("Error! " + error);
}
}
dojo.rawXhrPost(xhrArgs);
}
</script>
But I'm not able to get the JSON results from said POST. How can I get those results? Please help. The data I get on the load function is null
The script at https://localhost/api/did/authenticate needs to print or echo or write or otherwise return the JSON as text as it exits.
Turns out that what I was trying to do is not possible in JavaScript since I'm trying to do it from one domain into another... so the cross-domain implementation is not possible, unless I use an embedded flash object, or a proxy pass in my server. thanks for the help though...

Categories

Resources