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.

1. 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.

• 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

asticaVision(imageUrl, 'objects')

asticaVision(modelVersion, imageUrl, options, callback)

• 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);
}