Computer Vision Javascript Example Code
The Javascript SDK offers an easy introduction to computer vision, and is a simple yet powerful software development kit that allows you to integrate our state-of-the-art computer vision capabilities into your applications with just one line of code.
Leverage new possibilities with HTML5 and Javascript using image analysis and computer vision by utilizing the features of asticaVision such as face detection, object detection, image categorization, content moderation, and automatic captioning within your web and mobile applications.
Try Online1. Advanced Functionality
The SDK provides all of the same computer vision AI available through the REST API.
- Facial Recognition
- Object Detection
- Text Detection (OCR)
- Describe Images
- Automatic Image Moderation
- Categorize and Tag Images
2. Simple Integration:
Through the addition of just one line of javascript, asticaVision - Javascript SDK will begin to transform your application into a powerful image analysis and understanding tool and enable new development possibilities.
3. Cross-Platform Compatibility:
asticaVision - Javascript SDK has been designed to work smoothly across various platforms, allowing developers to integrate it with different web, mobile, and desktop applications.
Research Access Now Available
The computer vision components of the javascript SDK are available for demonstration and research purposes.
In the coming weeks, we expect additional updates to improve the authentication process, as well as the introduction of additional quality of life improvements.
Quickly leverage the true potential of your visual content and provide an enhanced user experience for your audience by leveraging the power of asticaVision - Javascript SDK – a straightforward and efficient solution for all your image analysis and understanding needs.
Here is an example code demonstrating basic use of computer vision with javascript.
//astica Javascript SDK <script src="https://astica.ai/sdk-javascript/astica.api.js"></script>
//astica Javascript SDK asticaAPI_start('API KEY HERE');
//object detection asticaVision('URL or Base64', 'objects')
//face detection asticaVision('URL or Base64', 'faces')
This code example allows you to examine the computer vision results for any image that you provide as an input. The results will be shown in the console of the browser.
Javascript can be used to detect objects and recognize faces, but that's only the beginning of what you can do with the computer vision SDK. Keep reading to explore the full range of features and find ready-to-run code examples.
Notice- astica.api.js has to be loaded before running asticaAPI_Start()
- replace your api key within the sample code
Analyze an Image with Computer Vision
The following JavaScript example is ready to run and will perform a comprehensive computer vision detection with all available parameters. Don't forget to update the code with an API key generated from your account.
//include astica sdk <script src="https://astica.ai/sdk-javascript/astica.api.js"></script> //create a custom function to run vision detection function asticaVision_example(image_url) { asticaVision( '2.5_full', //1.0_full, 2.0_full, 2.1_full, 2.5_full image_url, //Input Image (https URL or Base64) 'describe,moderate,objects,faces', //or 'all' your_astica_CallBack, //Your Custom Callback function ); } //setup your callback to receive vision output function your_astica_CallBack(data) { if(typeof data.error != 'undefined') { alert(data.error); } console.log(data); //view all data /* View Individual Data */ console.log(data.caption); //Image Caption console.log(data.caption_list); //Additional Captions (v2.0 only) console.log(data.caption_tags); //Caption Tags console.log(data.caption_GPTS); //GPT-S Description console.log(data.tags); //Image Tags console.log(data.categories); //Image Categories console.log(data.moderate); //Adult / Sensitive Content console.log(data.objects); //Objects Found in Image console.log(data.faces); //Faces Found in Image console.log(data.brands); //Brands Found in Image } //Wait for page, and astica.api.js to load before using computer vision document.addEventListener("DOMContentLoaded", () => { asticaAPI_start('API KEY HERE'); //only needs to be called once. asticaVision_example('https://www.astica.org/inputs/analyze_3.jpg'); });
Computer Vision Javascript Function
Simple: Output is passed to astica_defaultCB() functionasticaVision(imageUrl, 'objects')
Advanced Usage:asticaVision(modelVersion, imageUrl, options, callback)
Function Parameters-
modelVersion: (string) Required.
The version of the Astica computer vision model to use for the analysis. Current valid values are "1.0_full" and "2.0_full". -
imageUrl: (string) Required.
The https URL of the image to be analyzed. You may also base a Base64 encoded string. -
options: (string) Required.
Comma separated string of all computer vision parameters to detect. > -
callback: (function) Required.
A callback function that will be called when the analysis is complete. The function should take a single argument, which will be an object containing the analysis results. Optional.
Step #1:
Include the Javascript Library:
Start by including the Astica API library with the following script tag.
This should be added before the closing </head> tag of your website.
<script src="https://astica.ai/sdk-javascript/astica.api.js"></script>
Step #2:
Authenticate with the astica Javascript API:
Next, start the API by calling asticaAPI_start('API KEY HERE');
You only need to call this function once. Make sure to add a valid API key generated from your dashboard.
asticaAPI_start('API KEY HERE');
Step #3:
Describe and Analyze Images with Javascript
You are now ready to use asticaVision javascript API to integrate computer vision into your application. To perform a simple test, you can analyze an image using the following code.
asticaVision('https://www.astica.org/inputs/analyze_3.jpg');
Note: In this simple example, we do not specify a callback function and so the astica_defaultCB(data) will be used. By default this will emit the output to the console. You can overwrite this function, or read further along to setup your own custom callback.
setTimeout(function() { asticaAPI_start('API KEY HERE'); asticaVision('https://www.astica.org/inputs/analyze_3.jpg'); }, 2000);
Step #4:
Computer Vision Parameters
asticaVision can provide a complete dataset for any image with a single API call. This is not economical at large scale because each parameter counts as a transaction.
To minimize usage cost of the asticaVision image ai, you should specify only the parameters that you require.
Notice If no parameters have been specifed, then asticaVision will default to all
Specify parameters using a comma separated string:
asticaVision('https://www.astica.org/inputs/analyze_3.jpg', 'objects, faces');
Note: In this simple example, we do not specify a callback function and so the astica_defaultCB(data) will be used. By default this will emit the output to the console. You can overwrite this function, or read further along to setup your own custom callback.
Step #5
asticaVision ‐ Custom Callback
asticaVision allows you to specify different model versions, custom callback, and parameters to detect with computer vision. Specifying a custom callback will allow you to catch the javascript variable containing the results.
asticaVision( '2.5_full', //1.0_full, 2.0_full, 2.1_full, 2.5_full image_url, //Input Image (https URL or Base64) 'Description,Moderate,Objects,Faces', //or 'all' your_astica_CallBack, //Your Custom Callback function ); function your_astica_CallBack(data) { if(typeof data.error != 'undefined') { alert(data.error); return; } console.log(data); }
Discover More AI
Experiment with different kinds of artificial intelligence. See, hear, and speak with astica.