heartthrob-vision

With a simple configuration you can make your website more accessible by adding description to your images automatically via Azure Cognitive Services.

After loading your page, the heartthrob-vision will send the url of every photo on your page to the Microsoft Azure Cognitive Services to create a description of what is showing on the image.

Because it is an async function, it will take a little bit before every image to have a caption. See the examples bellow.

NOTE: We recommend to create manually all alt text for every image on your website. It will improve way more the accessibility of your website than using heartthrob-vision.

example

Pass the mouse hover the image to see the alt or inspect the element.

a brown and white owl with yellow eyes
a house with trees in the background
a book sitting on top of a wooden table
a busy city street at night
a book opened
a tiger walking in the grass

how to download it

Maybe you want to use only the heartthrob-vison instead of the full heartthrob framework, and that's ok. But if you already use heartthrob, the vision.heartthrob.js is already included (after version 1.1.26).

Download with npm
Download in GitHub Releases

We use continous delivery to make the latest version available to all of the options above, this is one of the reasons for not having direct download links here, since we build almost one version a week. I'm working on bringing other options for you to use it.

how to install it

To install you will need to import the JavaScript file. You don't need jQuery to use heartthrob-vision.


<script src="./heartthrob-vision/js/vision.heartthrob.js"></script>
                

If you don't want to use the minified version, than use this:


<script src="./heartthrob-vision/js/vision.heartthrob.min.js"></script>
				

how to use it

After importing the js file, you need to add this script on the bottom of your page. You can personalize your settings with the options bellow.


<script>
	hVision({
		subscriptionKey: ' YOUR SUBSCRIPTION KEY HERE ',
		uriBase: 'https://eastus.api.cognitive.microsoft.com/vision/v2.0/analyze'
	})
</script>
				
option parameters default
subscriptionKey Your Azure Cognitive Service Subscription key.
uriBase Uri base of you Azure Cognitive Service.
language Language of your website. en
imageWithEmptyAlt Set this as true if you want to generate caption for images that you have already put a alt that is empty. false
localProjectWarning Captions is available only if your images could be found online, if that is the case, than you can put a false value here. true

To use it you will need to add a Subscription Key of a Microsoft Cognitive Services, learn how to get one here!

project roadmap

I'm sharing with some some of my plans to move foward with heartthrob-vision as I'm focused on:

  • Availability: This is a great tool that can be more efficient by being available for more developers to use it, for more regions and even costumers.
  • Safety: I also want to improve how we handle the subscription key to be not available in the front end.

project status

heartthrob

npm version

heartthrob-vision

npm version

heartthrob-docs

repos + links

buy me a beer

made by vítor norton | privacy policy