JSFiddle - React, Tailwind, and code Playground

by de Montalembert Jonathan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
    <title>Analyze Sample</title>
    <link rel="stylesheet" 
    href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.0/css/bulma.min.css">
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <h1 class="is-size-3">Analyze image:</h1>
    <p>Enter the URL to an image, then click the <strong>Analyze image</strong> button.
    Image to analyze:</p>
    <input class="input" type="text" name="inputImage" id="inputImage"
        value="http://upload.wikimedia.org/wikipedia/commons/3/3c/Shaki_waterfall.jpg" />
    <button class="button" id="analyze-btn">Analyze image</button>
    <p id="caption" class="is-size-3"></p>
    <img id="sourceImage" width="80%" />
    <div id="tags"></div>

</body>
</html>

JavaScript

const $ = jQuery
function processImage() {
    var url = "https://westcentralus.api.cognitive.microsoft.com/vision/v2.0/analyze";
    var params = {
        "visualFeatures": "Description",
        "details": "",
        "language": "en"
    };
    var imageUrl = "http://upload.wikimedia.org/wikipedia/commons/3/3c/Shaki_waterfall.jpg"
    
    $.ajax({
        url: url + "?" + $.param(params),
        beforeSend: function(xhrObj) {
            xhrObj.setRequestHeader("Content-Type","application/json");
            xhrObj.setRequestHeader(
                "Ocp-Apim-Subscription-Key", "f12e6bf7146f45fc997c439f98a1b7f0");
        },
        type: "POST",
        data: '{"url": ' + '"' + imageUrl + '"}',
    })

    .done(function(data) {
        $('#analyze-btn').removeClass('is-loading');
        $('#tags').empty();
        $('#caption').empty();    
        $("#sourceImage").attr('src', imageUrl);
        $('#caption').append(data.description.captions[0].text);            
        data.description.tags.forEach(function(tag) {
            $('#tags').append('<span class="tag is-info">' + tag + '</span>');
        });
    })
};

$('#analyze-btn').click(function(){
    processImage();
});