Learn how to use Deep Block's API and create your own app in this article.
We recently released an API for Deep Block, our web-based AI platform. To highlight the usage of our API we created an example project, it is a website that takes the camera input from your webcam and performs image segmentation to find your hair. The project can be found on GitHub. To run use the website yourself, take a look at the Readme file on GitHub.
With our API you can utilize the models you trained on Deep Block for your own AI applications.
Before using a project through the API, you need to either create a project on https://app.deepblock.net/deepblock/console and train it or fork an already existing one from https://app.deepblock.net/deepblock/store/project. You can use our API to run inference on any projects in your console.
In this tutorial, we will use hair segmentation AI in our project store.
You can fork the project from the following link.
https://app.deepblock.net/deepblock/store/project/plilk4eckee2dsd9
After making a copy of the project or creating a project, check your console to find the project ID.
You can use the Project ID in the API tutorial HTML file, and get your own API key from our API page.
https://app.deepblock.net/document
And then, you need to upload the images you want to run inference on through an HTTP post request:
|
const takenPictureCanvas = document.getElementById("takenPicture"); const dataURL = takenPictureCanvas.toDataURL("image/jpeg"); const blob = dataURItoBlob(dataURL); const uploadTimestamp = Date.now().toString(); const fileName = `${uploadTimestamp}.jpeg`; const file = new File([blob], fileName); const uploadFormData = new FormData(); uploadFormData.append('files', file); const url = `https://app.deepblock.net/storage_api/file_system/image_segmentation/projects/${projectID}/predict-files?store=false`; fetch(url, { method: "POST", headers: { Authorization: apiKey, timestamp: uploadTimestamp }, body: uploadFormData }) |
To do this, you need to create a File object with the image data and set it as the 'files' entry in a FormData object which you put as the body of the request. You also need to put the projectID of the specific project you want to use as a parameter in the URL as shown above. Your API key and a current timestamp need to be specified as headers.
If you want to run inference on only the images you upload right now, you first need to make sure that the project does not contain any previously uploaded images for inference. To do this, you can use the remove predict files API call before uploading your images:
|
fetch(`https://app.deepblock.net/storage_api/file_system/image_segmentation/projects/${projectID}/predict-files`, { method: "DELETE", headers: { Authorization: apiKey, timestamp: Date.now() }, }) |
Next, you need to use the following HTTP request to start running inference on the uploaded images:
|
fetch(`https://app.deepblock.net/master_api/projects/${projectID}/predict/${thresholdScore}`, { method: "POST", headers: { Authorization: apiKey, timestamp: Date.now() }) |
Here, thresholdScore is the level of confidence the model needs to have in its predictions. It has to be a value between 0 and 100. The higher the value, the higher the confidence, but fewer predictions will be made. For many applications, a value between 30 and 70 is reasonable.
To know when the inference is complete, you need to periodically check the status of the project. This can be done through this HTTP request:
|
fetch(`https://app.deepblock.net/master_api/projects/${projectID}/project-status`, { method: "GET", headers: { Authorization: apiKey, timestamp: Date.now() } }) |
If the status is equal to 0, the inference is complete and you can proceed with getting the results:
|
fetch(`https://app.deepblock.net/master_api/projects/${projectID}/result`, { method: "GET", headers: { Authorization: apiKey, timestamp: Date.now() } }) |
This will return the predictions in the format of a JSON file which has the entries 'images', 'annotations' for each image, and 'categories'. You can use the predictions specified in 'annotations' to complete your task! Additionally, if you need an easy way to visualize the predictions of an image, we have an API call for that as well:
|
fetch(`https://app.deepblock.net/storage_api/file_system/image_segmentation/projects/${projectID}/visualized/base64/${imageID}`, { method: "GET", headers: { Authorization: apiKey, timestamp: Date.now() } }) |
For this, you need to specify the imageID of the image you want to visualize. You can find it in the 'images' entry of the JSON file you just got. This HTTP request will return the visualized predictions as a base64 encoded image.
For more details, take a look at the documentation for each API call on https://app.deepblock.net/document.
