About

I have built an image annotation application using :

• FastAPI : Backend
• Angular: Frontend
• Pinata : Blob/File Storage

This application would help in doing the annotations of the image dataset. Then these annotations could be exported and be used for AI model training.

Demo

Youtube Demo Video

My Code

• backend Fastapi : https://github.com/suyash-srivastava-dev/annotation-editor-backend
• frontend Angular : https://github.com/suyash-srivastava-dev/annotation-editor

Flow Diagram

Pinata setup

• Create an account with Pinata, and fetch the keys.
• Install and setup .env files

npm i pinata

PINATA_API_KEY=""
PINATA_API_SECRET=""
PINATA_GATEWAY="*.mypinata.cloud"
PINATA_JWT=""

import { PinataSDK } from "pinata";

const pinata = new PinataSDK({
  pinataJwt: "PINATA_JWT",
  pinataGateway: "example-gateway.mypinata.cloud",
});

• Create methods for Upload & Retrieve Files

Upload File

const file = new File(["hello"], "Testing.txt", { type: "text/plain" });
    const upload = await pinata.upload.file(file);
    console.log(upload);

Retrieve Files

const url = await pinata.gateways.createSignedURL({
       	cid: "bafkreib4pqtikzdjlj4zigobmd63lig7u6oxlug24snlr6atjlmlza45dq",
    	expires: 1800,
    })
    console.log(url)

More Details

Pinata group was created for each project in the application. Pinata was used for saving the image dataset, with & without annotations. Also the annotation files are saved as JSON on Pinata. Access to the images & Json file is through the signed SDK.