absharma9796 / smart-annotations Goto Github PK

Web App to annotate audio data

JavaScript 0.41% TypeScript 98.36% CSS 1.23%

smart-annotations's Introduction

Smart Annotations Interface ( S.A.I )

S.A.I is a Frontend application for annotating Audio Data.

Tech Stack

Frontend - NextJS, Typescript, Redux, TailwindCss, Framer-Motion Backend - NextJS native server, json files used to mimick as a local DB and utility functions have been written (using nodejs fs module) to update json files to mimick

Installation

S.A.I requires Node.js >= v14.17.6 to run. Install the dependencies and devDependencies and start the server.

cd web
yarn install
yarn dev

For production environments...

yarn build
yarn start

Folder Structure

All the source code related to Frontend can be found inside /web/src folder

src/component contains all the components for business logic
src/dataTypes contains interfaces / types for base objects, e.g User, Dataset, DataPoint. as well as actual data files in json format e.g. users.json, datasets.json
src/middlewares contains middlewares for NextJS server side api routes
src/utils contains utility functions Important Utility Functions
- checkConsensusState.ts - Decides if consensus achieved when a user labels a datapoint
- checkDatasetTagged.ts - Decides if dataset should be marked tagged when a users labels a datapoint
- rewardUserScore - Increases user score once consensus is achieved for a datapoint
- crudApis.ts - Mimicks as a read/write/update/delete api to local json files

Application Screens -

1. Login

A simple email and password authentication mechanism has been setup

Sample users that can be used are

Admin - email - [email protected] , password - qwerty1234
Reviewer - email - [email protected] , password - qwerty1234
Member - email - [email protected] , password - qwerty1234

2. After Login - Datasets Home Screen

By default 2 datasets have been added

Cats vs Dogs Dataset
Customer Care Dataset

An admin can choose to add more datasets by clicking on `Add Dataset` button

`NOTE` Due to time constraints by default all datasets are being added to project_id 1

3. Datapoints Viewing / Uploading Screen

One can Navigate here by clicking on any of the datasets in previous page (Datasets Homescreen)

To upload datapoints click on `Add / Import Data` ( use `yarn dev` i.e development server to test import functionality)

🚨🚨 Caveats 🚨🚨

Since public folder of nextjs is being used to store and fetch audio files, any files uploaded in production i.e after yarn build and yarn start won't show up -

As per Next JS Note: Only assets that are in the public directory at build time will be served by Next.js. Files added at runtime won't be available.

3. Datapoints Labelling Screen

One can Navigate here by clicking on 🏷️ Start Labeling button in previous screen

Consensus and Scoring Logic

Consensus and Scoring logic has been implemented in the frontend itself

Consensus is checked for a datapoint, every time a user annotates that datapoint

A consensus is achieved and datapoint is marked as COMPLETE if the count of majority people with same labels on a datapoint equals or exceeds minimum_consensus
If Consensus is achieved winners are awarded by increasing their average score
Average score is calculated based on -- (previousScore*annotation_count + 1) / (annotation_count)
annotation_count is the number of datapoints a particular user has labelled historically and is incremented everytime a user labels a datapoint.

P.S -

Time Constraints might reflect in the source code written in a hurry 😅, Definitely a room for improvements for a more production ready application.

smart-annotations's People

Contributors

Watchers

smart-annotations's Issues

Server error [500] on create dataset

I tried to

POST http://localhost:3000/api/datasets/create

{
  "name": "yes no dataset",
  "description": "Audios containing confirmation and negation phrases like \"affirm\" and \"negate\".",
  "labels": [
    "affirm",
    "negate"
  ],
  "label_colors": [
    "#CBBFBF",
    "#EFDEDE"
  ],
  "data_type": "audio",
  "minimum_consensus": 2,
  "maximum_voters": 2,
  "minimum_voters": 2
}

I get this in the response:

Cannot read property 'toLowerCase' of undefined

Cant run the project

I followed the docs and did the following.

nvm install 12.22
nvm use 12.22

Followed by

git clone ...
cd web
yarn install
yarn start

I see the following error:

❯ yarn start
yarn run v1.22.17
$ NEXT_PUBLIC_APP_ENV=production next start
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Loaded env from /home/ltbringer/Programs/js-code/smart-annotations/web/.env.local
info  - Loaded env from /home/ltbringer/Programs/js-code/smart-annotations/web/.env.production
Error: Cannot find module 'fs/promises'
Require stack:
- /home/ltbringer/Programs/js-code/smart-annotations/web/.next/server/pages/index.js
- /home/ltbringer/Programs/js-code/smart-annotations/web/node_modules/next/dist/server/require.js
- /home/ltbringer/Programs/js-code/smart-annotations/web/node_modules/next/dist/server/load-components.js
- /home/ltbringer/Programs/js-code/smart-annotations/web/node_modules/next/dist/server/next-server.js
- /home/ltbringer/Programs/js-code/smart-annotations/web/node_modules/next/dist/server/next.js
- /home/ltbringer/Programs/js-code/smart-annotations/web/node_modules/next/dist/server/lib/start-server.js
- /home/ltbringer/Programs/js-code/smart-annotations/web/node_modules/next/dist/cli/next-start.js
- /home/ltbringer/Programs/js-code/smart-annotations/web/node_modules/next/dist/bin/next
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:815:15)
    at Function.mod._resolveFilename (/home/ltbringer/Programs/js-code/smart-annotations/web/node_modules/next/dist/build/webpack/require-hook.js:171:28)
    at Function.Module._load (internal/modules/cjs/loader.js:667:27)
    at Module.require (internal/modules/cjs/loader.js:887:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.3292 (/home/ltbringer/Programs/js-code/smart-annotations/web/.next/server/pages/index.js:476:18)
    at __webpack_require__ (/home/ltbringer/Programs/js-code/smart-annotations/web/.next/server/webpack-runtime.js:25:42)
    at Object.2578 (/home/ltbringer/Programs/js-code/smart-annotations/web/.next/server/chunks/985.js:121:13)
    at __webpack_require__ (/home/ltbringer/Programs/js-code/smart-annotations/web/.next/server/webpack-runtime.js:25:42)
    at /home/ltbringer/Programs/js-code/smart-annotations/web/.next/server/pages/index.js:151:73 {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/home/ltbringer/Programs/js-code/smart-annotations/web/.next/server/pages/index.js',
    '/home/ltbringer/Programs/js-code/smart-annotations/web/node_modules/next/dist/server/require.js',
    '/home/ltbringer/Programs/js-code/smart-annotations/web/node_modules/next/dist/server/load-components.js',
    '/home/ltbringer/Programs/js-code/smart-annotations/web/node_modules/next/dist/server/next-server.js',
    '/home/ltbringer/Programs/js-code/smart-annotations/web/node_modules/next/dist/server/next.js',
    '/home/ltbringer/Programs/js-code/smart-annotations/web/node_modules/next/dist/server/lib/start-server.js',
    '/home/ltbringer/Programs/js-code/smart-annotations/web/node_modules/next/dist/cli/next-start.js',
    '/home/ltbringer/Programs/js-code/smart-annotations/web/node_modules/next/dist/bin/next'
  ]
}

I think yarn install should have taken care of any libs Error: Cannot find module 'fs/promises'.