Embedding / White-labeling

Is it possible to embed the Nanonets Application into our product?

Yes, Nanonets' verification screen can be embedded into your application.

QuickStart:

Use this python script to generate a new embeded url

import requests
import json
import urllib
from datetime import datetime 
from datetime import timedelta  

MODEL_ID = "ENTER_YOUR_MODEL_ID_HERE"
API_KEY = "ENTER_YOUR_API_KEY_HERE"
redirect = "https://the.url.you.want/to/redirect/to"
file_path = '/file/you/want/to/process.pdf'
expires = str((datetime.now()  + timedelta(days=7)).utcfromtimestamp(0))

url = "https://app.nanonets.com/api/v2/OCR/Model/"+MODEL_ID+"/LabelFile/?async=true"

data = {'file': open(file_path, 'rb')}

response = requests.request("POST", url, files=data, auth=requests.auth.HTTPBasicAuth(API_KEY, ''))

response_data = json.loads(response.text)
request_file_id = response_data["result"][0]["request_file_id"]

url = "https://preview.nanonets.com/Inferences/Model/"+MODEL_ID+"/ValidationUrl/"+request_file_id+"?redirect="+redirect+"&expires="+expires

response = requests.request("POST", url, auth=requests.auth.HTTPBasicAuth(API_KEY, ''))

embed_url = response.text
print(embed_url)


Step by Step Guide

Step 1: Get your Model Id and API Key

To get started with embedding the application you need the following:

1. Your Model Id, which can be found here: app.nanonets.com/#/models

2. Your API Key which can be found here: app.nanonets.com/#/keys


Step 2: Send Data to Nanonets

Make a prediction using the predict endpoint.

This requires you to send the Image (this example uses a file you can also send a url see this)

Curl

curl --location --request POST 'https://app.nanonets.com/api/v2/OCR/Model/{{YOUR_MODEL_ID}}/LabelFile/?async=true' \
--form 'file=@/Users/temp.png' -u {{YOUR_API_KEY}}:

Python

import requests

url = "https://app.nanonets.com/api/v2/OCR/Model/{{YOUR_MODEL_ID}}/LabelFile/?async=true"

payload = {}
files = [
  ('file', open('/Users/temp.png','rb'))
]
headers= {}

response = requests.request("POST", url, headers=headers, data = payload, files = files, auth=requests.auth.HTTPBasicAuth({{YOUR_API_KEY}}, ''))

print(response.text.encode('utf8'))
 

This will return a field request_file_id in the response you need to use that for step 3

{
  "message": "Success",
  "result": [
    {
      "message": "Success",
      "input": "temp.png",
      "prediction": [],
      "page": 0,
      "request_file_id": "d205c5fe-0e63-48a1-997a-23272546946f",
      "filepath": "uploadedfiles/YOUR_MODEL_ID/PredictionImages/1491606602.jpeg",
      "id": "{{Id}}"
    }
  ]
}


Step 3: Generate a URL for your user

Get a verification url. This step generates a verifiaction url that you can redirect your user to.

It requires the parameters redirect and expires. redirect is the url it should redirect to post validation. expires the time (seconds since epoch) for which the url should be valid. To generate the validation url send a request as shown below:

Curl

curl --location --request GET 'https://preview.nanonets.com/Inferences/Model/{{YOUR_MODEL_ID}}/ValidationUrl/{{request_file_id}}?redirect={{REDIRECT_URL}}&expires=1608843564' -u {{YOUR_API_KEY}}:

Python

import requests

url = "https://preview.nanonets.com/Inferences/Model/{{YOUR_MODEL_ID}}/ValidationUrl/{{request_file_id}}?redirect={{REDIRECT_URL}}&expires=1608843564"

response = requests.request("GET", url, auth=requests.auth.HTTPBasicAuth({{YOUR_API_KEY}}, ''))

print(response.text.encode('utf8'))

It returns a url that looks like below:

https://preview.nanonets.com/Verify/?key=nLH1WHl2EtsJjw75VXvJrFCl3j9tCyNYbjSD3BaOmOjRmnQEmCZ61XqTJyTz51-6EoH8Ih_aHanZlum_jdxVODIRv77x3LrbOBs_mcSAWlk37yxe_OuwcFwjctjNjmp9UJ52ph7CSkaV28_CjdlJHdBZvmWufVaF2njJREpfS7a2ApJC70HXvKzcT8H_Z6fAftHD2DS_YajvQeeWbQDurgdVynroOZ4Qs5Ic6q1v9LXySFWJhdHfD5JBmjBM2ocP8z2IwnNWcNUFF5q4q9XBXZbB4B0Y9PcM0VH7ZmiJJngSVhM_iAeSE8R8ZhtYvvwrIJBzxsUNXvtAR5YJ9-1BhK94Q_7K-fREwOAgn-61NweqWawe_s8IcABDsp8d7eAljO3HGNZHSbhoJEvPFFwxVEDvO8KNJjtfo2FMwdvgzHcCUqxLPiTDbzyXfFgN655jw0yPb6KpPq3NdezrRByOwo5i5iBOz7RuGEhWC9E427un8TbqF2NVf8B6joi6YLDI9hnaaWwaWsAhWunDPg0oOEUhZM-1QFhn3BgGySRbi6KRFO_N0eWYBOQkMH8VwLRas2uxjl3oTPFuZeVayivQPIM_t7_f5krNgyHQxIrpqtyNatejcbcdSKcuRVJ1W6RzO9MCaAz1cPcBBasB-wuWfimhL5OIkzC4DVKcvRAt33Y=

When the user clicks verify he will be redirect back to the url you specified as REDIRECT_URL

iframe

This url can also be embedded as an iframe


Redirect URL should be url encoded

Make sure that the redirect_url parameter value is url encoded you can read up on it here: https://www.w3schools.com/tags/ref_urlencode.ASP



Step 4: Fetch Data

Once the user has verified the data you can retrieve the verified data using the endpoint below

Curl

curl --location --request GET 'https://app.nanonets.com/api/v2/Inferences/Model/{{YOUR_MODEL_ID}}/ImageLevelInferences/{{Id}}' -u {{YOUR_API_KEY}}:
 

Python

import requests

url = "https://app.nanonets.com/api/v2/Inferences/Model/{{YOUR_MODEL_ID}}/ImageLevelInferences/{{Id}}"

response = requests.request("GET", url, auth=requests.auth.HTTPBasicAuth({{YOUR_API_KEY}}, ''))

print(response.text.encode('utf8'))
 

The will return the predicted data on the file after it has been verified

The output looks like the following:

{
    "message": "Success",
    "result": [
        {
            "message": "",
            "input": "",
            "prediction": [
                {
                    "label": "label",
                    "ocr_text": "ocr_text",
                    "score": 1,
                    "xmin": 2766,
                    "xmax": 3036,
                    "ymin": 229,
                    "ymax": 254
                },
            ],
            "page": 0,
            "request_file_id": "00000000-0000-0000-0000-000000000000",
            "filepath": "",
            "id": "Id",
            "is_moderated": false
        }
    ]
}

Step 5: Add your own domain (Optional)

Instead of using preview.nanonets.com you can also use your own domain. To add your own domain you need to do the following:

1. Add a NS record pointing to preview.nanonets.com. If you are not familiar with this process you can reach out to your Domain Manager.

2. Then make an API call to add the Domain to your app. 

CURL

curl --location -g --request POST 'https://preview.nanonets.com/add-domain/{{Model Id}}/mydomain.com' \
-u {{YOUR_API_KEY}}:

Python

import requests
url = "https://preview.nanonets.com/add-domain/{{Model Id}}/mydomain.com"
response = requests.request("POST", url, auth=requests.auth.HTTPBasicAuth({{YOUR_API_KEY}})
print(response.text)

After this in all the previous steps you can replace preview.nanonets.com with your own domain. However you will still need to use app.nanonets.com as is.

Was this article helpful?