Node.js Tutorial to Cartoonify an Image Using Toonify API (Deepai) & Deep Learning in Browser Using Javascript Full Project For Beginners

 

 

DeepAI JS Client

npm version

Simple Javascript Client Library for Deep AI’s APIs from Browser and Node.js

Installation:

Node.js or other environments using npm:

npm install --save deepai

Browser:

  • Option 1: (Recommended) Load the library from DeepAI’s CDN:
    <script src="https://cdnjs.deepai.org/deepai.min.js"></script>
    
  • Option 2: Download and copy “dist/deepai.min.js” into your project and include in HTML
  • Option 3: include this npm package, use webpack or browserify, and “require(‘deepai”)”

Usage Examples:

Most examples are for Content Moderation, but you can subsitute any model name available at DeepAI.

Ensure that you pass the correct input names. Not all model input names are “image”. You can find the correct input name on the page for each model at DeepAI.org

All examples use Async-Await syntax, so ensure you run the code in an async function.

Browser:

// Ensure you load deepai with one of the methods in "Installation"
deepai.setApiKey('YOUR_API_KEY'); // get your free API key at https://deepai.org

Pass URL:

var result = await deepai.callStandardApi("content-moderation", {
    image: "https://YOUR_IMAGE_URL"
});

Pass Literal Text:

var result = await deepai.callStandardApi("sentiment-analysis", {
    text: "I am very happy to play with the newest APIs!"
});

Pass Image DOM Element:

var result = await deepai.callStandardApi("content-moderation", {
    image: document.getElementById('yourImageId')
});

Pass File Picker Element:

var result = await deepai.callStandardApi("content-moderation", {
    image: document.getElementById('yourFilePickerId')
});
Browser Result Rendering

This code will render the result of the API call into an existing HTML element, such as a div, with the id “yourResultContainerId”.

See also  Node.js Express Custom 404 Error Page Tutorial - Custom Error Handling in Node Full Example

The result will fit itself inside your container, so be sure to set a size on it.

var result = await deepai.callStandardApi("content-moderation", {
    image: "https://YOUR_IMAGE_URL"
});

await deepai.renderResultIntoElement(result, document.getElementById('yourResultContainerId'));

 

See also  Build a CSS Text Stroke or Shadow Generator With Source Code in Browser Using HTML5 CSS3 and Javascript Full Project For Beginners

 

/ Get the 'deepai' package here (Compatible with browser & nodejs):
//     https://www.npmjs.com/package/deepai
// All examples use JS async-await syntax, be sure to call the API inside an async function.
//     Learn more about async-await here: https://javascript.info/async-await

// Example posting a image URL:

const deepai = require('deepai'); // OR include deepai.min.js as a script tag in your HTML

deepai.setApiKey('quickstart-QUdJIGlzIGNvbWluZy4uLi4K');

(async function() {
    var resp = await deepai.callStandardApi("toonify", {
            image: "YOUR_IMAGE_URL",
    });
    console.log(resp);
})()


// Example posting file picker input image (Browser only):

const deepai = require('deepai'); // OR include deepai.min.js as a script tag in your HTML

deepai.setApiKey('quickstart-QUdJIGlzIGNvbWluZy4uLi4K');

(async function() {
    var resp = await deepai.callStandardApi("toonify", {
            image: document.getElementById('yourFileInputId'),
    });
    console.log(resp);
})()


// Example posting a local image file (Node.js only):
const fs = require('fs');

const deepai = require('deepai'); // OR include deepai.min.js as a script tag in your HTML

deepai.setApiKey('quickstart-QUdJIGlzIGNvbWluZy4uLi4K');

(async function() {
    var resp = await deepai.callStandardApi("toonify", {
            image: fs.createReadStream("/path/to/your/file.jpg"),
    });
    console.log(resp);
})()

Leave a Reply