How to use Azure custom vision prediction API by URL method in javascript?

Question

I have used this code! Reference: https://southcentralus.dev.cognitive.microsoft.com/docs/services/eb68250e4e954d9bae0c2650db79c653/operations/58acd3c1ef062f0344a42813

 <!DOCTYPE html>
<html>
<head>
    <title>JSSample</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": "{string}",
            "application": "{string}",
        };
      
        $.ajax({
            url: "https://southcentralus.api.cognitive.microsoft.com/customvision/v1.0/Prediction/{projectId}/url?" + $.param(params),
            beforeSend: function(xhrObj){
                // Request headers
                xhrObj.setRequestHeader("Content-Type","application/json");
                xhrObj.setRequestHeader("Prediction-key","{subscription key}");
            },
            type: "POST",
            // Request body
            data: "{body}",
        })
        .done(function(data) {
            alert("success");
        })
        .fail(function() {
            alert("error");
        });
    });
</script>
</body>
</html>

Since you asked for the image Url. Here is how you can do it ```async function imagePredict(e){let i={endpoint:"https://whatever.cognitiveservices.azure.com",projectId:"your-project-id",publishedName:"your-published-name",predictionKey:"your-prediction-key"},t=`${i.endpoint}/customvision/v3.0/Prediction/${i.projectId}/classify/iterations/${i.publishedName}/url`,o=await fetch(t,{method:"POST",headers:{accept:"*/*","prediction-key":i.predictionKey,"Content-Type":"application/json"},body:JSON.stringify({Url:e})}),n=await o.json(),r=n.predictions;console.log(r)}``` insert url into the param — jpisty, Jan 17 '23 at 02:15

score 0 · Accepted Answer · answered Jan 29 '22 at 15:01

One of the workaround is you can try with the sample code that i have :

function readImage(element) {
  var file = element.files[0];
  var reader = new FileReader();
  reader.onloadend = function() {
    $.ajax({
      url: "https://southcentralus.api.cognitive.microsoft.com/customvision/v1.1/Prediction/KEY/image?iterationId=ITERATIONID",
      data: reader.result,
      processData: false,
      contentType: "application/octet-streama",
      headers: {
        'Prediction-key': 'YOUR-KEY'
      },
      type: 'POST',
      success: function(response) {
        var result = response["Predictions"];

        alert(result);
      },
      error: function(error) {
        alert('error: ' + error);
      }
    });
  }
  reader.readAsArrayBuffer(file);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="file" onchange="readImage(this)" />
</form>

How to use Azure custom vision prediction API by URL method in javascript?

1 Answers1