Git Product home page Git Product logo

banksy-annotation-tool's Introduction

Banksy annotation tool

GitHub stars GitHub issues GitHub GitHub contributors

๐Ÿ“ƒ Description

Banksy is an image annotation tool, outputting a dataset with NER (Named Entity Recognition), NEL (Named Entity Linking) and box region on image.

The dataset format is very similar to the FUNSD dataset. This tool is useful if you need to annotate documents where the spatial component of the text data is important (i.e where the text is in the document). Practical examples might be forms, receipts, etc.

You can also find a Python client for the OCR Google Vision. You can call the OCR with the image you want to annotate, and it will return you a JSON file with the text found in the image, and the position of that text in the image. You can then add the JSON file to your source folder (see the Usage section below) and will create automatically boxes for you.

You can learn more about the Python client here.

Screenshot

Screenshot demo

๐Ÿ”ง Getting Started

Requirements

  • NPM (to serve the files, but you can use any other tool to do it)
  • Chrome (The tool only works on chrome, as it uses modules and Webpack isn't in the project)

Installation

Clone this project

git clone [email protected]:AboutGoods/Banksy-annotation-tool.git

In order to serve the files, you can use the serve package from NPM :

npm install -g serve

Launch ๐Ÿš€

To launch the tool, you simply need to serve the files, so you can use serve

In the project repository :

serve

Or if you want to specify the port :

serve -l 8080

Usage

First you need to add images in the source folder. The images needs to be named like image_000.jpg, image_001.jpg, ... You can also add Google Vision results for each image like so : image_000.json, image_001.json, ...

You can now go access to the app (http://localhost:5000 if you used serve)

Creating/Managing boxes ๐Ÿ“ฆ

When you go to the app, the first image is shown, and you can start drawing boxes by holding the left mouse click. You can undo / redo any action you do by pressing Ctrl + Z (or Cmd + Z) and Ctrl + Maj + Z (or Cmd + Maj + Z)

You can also merge boxes, by clicking the Merging mode button on the bottom. You will now be able to select multiple boxes by drag-clicking on the image. Once you have selected the right boxes, you can merge them by pressing m.

On the right side, you can see a list of the boxes you created, and can change the content, the label, modify or delete links and delete the box.

When you select a box, its corresponding element in the list is highlighted. You can also delete a box with the del key.

Links ๐Ÿ”—

In order to create links between boxes, select the box that will be the starting point of the link, then click and hold the blue square on the right, and drop the link on the desired destination box.

Utils ๐Ÿ› 

You can zoom in and out with the mouse wheel, and move in the receipt by maintaining the Ctrl or Cmd key.

When selecting a box, you can change its label with the numeric keys on top of you keyboard:

  • 1 : Label
  • 2 : Price
  • 3 : Bundle
  • 4 : Misc
  • 5 : Payment
  • 6 : Barcode
  • 7 : Brand
  • 8 : Location
  • 9 : Date
  • 0 : Phone
  • ) (key at the right of the 0) : Person

When you finish the annotation of an image, simply hit "Save output" on the top of the screen. A JSON file with all the data will be downloaded.

You can then go to the next receipt by clicking on the next button, on the top right, or go back with the previous button. Your work will be saved in local storage.

Contributing ๐Ÿค

See CONTRIBUTING.md.

License ๐Ÿ“ƒ

See LICENSE.

banksy-annotation-tool's People

Contributors

bducha avatar akhu avatar

Stargazers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.