<image-caption>

Adds caption and alt to an image using the Computer Vision API from Microsoft Cognitive Services

<image-caption api-key="Your API Key"
               api-region="Your API Region"
               language="en|ja|pt|zh"
               src="Image URL">
</image-caption>

Prerequisites

To use the Computer Vision API, you need a subscription key.

Demo

<script src="../webcomponentsjs/webcomponents-loader.js"></script> <style is="custom-style"> .form-style { margin: 10px auto; max-width: 400px; padding: 20px 12px 10px 20px; font: 13px "Lucida Sans Unicode", "Lucida Grande", sans-serif; }

    .form-style li {
        padding: 0;
        display: block;
        list-style: none;
        margin: 10px 0 0 0;
    }

    .form-style li p {
        margin-top: 0;
        color: #bbb;
        font-style: italic;
        margin-bottom: 2px;
        font-size: xx-small;
    }

    .form-style label {
        margin: 0 0 3px 0;
        padding: 0;
        display: block;
        font-weight: bold;
    }

    .form-style input[type=text], select {
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        border: 1px solid #BEBEBE;
        padding: 7px;
        margin: 0;
        -webkit-transition: all 0.30s ease-in-out;
        -moz-transition: all 0.30s ease-in-out;
        -ms-transition: all 0.30s ease-in-out;
        -o-transition: all 0.30s ease-in-out;
        outline: none;
    }

    .form-style input[type=text]:focus,
    .form-style select:focus {
        -moz-box-shadow: 0 0 8px #88D5E9;
        -webkit-box-shadow: 0 0 8px #88D5E9;
        box-shadow: 0 0 8px #88D5E9;
        border: 1px solid #88D5E9;
    }

    .form-style .field-long {
        width: 100%;
    }

    .form-style .field-select {
        width: 100%;
    }

    .form-style input[type=button] {
        background: #4B99AD;
        padding: 8px 15px 8px 15px;
        border: none;
        color: #fff;
    }

    .form-style input[type=button]:hover {
        background: #4691A4;
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
    }

    .form-style .required {
        color: red;
    }
</style>

image-caption demo

• Adds caption and alt to an image using the Computer Vision API from Microsoft Cognitive Services

• Api Key *

  To use the Computer Vision API, you need a subscription key.

• Api Region * West US East US 2 West Central US West Europe Southeast Asia

  Your subscription keys are valid for only one of these regions

  If you sign up using the Computer Vision free trial, your subscription keys are valid for the West Central US region

• Language English 日本語 Português 中文简体

  Supported languages

• Image URL *

  Supported image formats: JPEG, PNG, GIF, BMP.

  Image file size must be less than 4MB.

  Image dimensions should be greater than 50 x 50.

<script> const processButton = document.getElementById('processBtn'); const subscriptionKeyInput = document.getElementById('apiKey'); const subscriptionRegionInput = document.getElementById('apiRegion'); const languageSelect = document.getElementById('language'); const imageSrcInput = document.getElementById('imgSrc');

const imageCaption = document.getElementsByTagName('image-caption')[0];

processButton.onclick = (event) => {
    imageCaption.apiKey = subscriptionKeyInput.value;
    imageCaption.apiRegion = subscriptionRegionInput.value;
    imageCaption.language = languageSelect.value;
    imageCaption.src = imageSrcInput.value;
};

</script> ``` -->

Install the Polymer-CLI

First, make sure you have the Polymer CLI installed. Then run polymer serve to serve your element locally.

Viewing Your Element

$ polymer serve

License

MIT