vue-mindee-js

Check Vue mindee documentation and Storybook for docs, guides, API and more!

Introduction

Vue mindee is a very opinionated JavaScript library that will help you build interactive canvas for computer vision detection use cases.

There are many powerful JavaScript frameworks and tools that can help you make an interactive canvas. But almost all of them are low-level. Like KONVA is a 2d canvas framework. It is good, it is powerful. But you may need to write a lot of code.

This library was made for building frontend interfaces on top of Mindee document parsing APIs and more generally on top of any computer vision detection APIs.

Features

• Support for image and PDF files
• Interactive shapes with events binding
• Extensible styling API
• Controllable state props and modular architecture
• Zoom in and out feature out of the box
• Magnified/Zoomed view API

Compatibility

The Vue SDK is compatible with Vue 3+

Installation and dependencies

The easiest way to use vue-select is to install it from npm and build it into your app with Webpack.

npm install --save vue-mindee-js

or using yarn

pnpm install vue-mindee-js

Usage

You only need an image and a list of shapes to get started.

<script>
import { AnnotationViewer } from "vue-mindee-js";
import dummyImage from "path/to/file.jpg";

const dummyShapes = [
  {
    id: "date",
    coordinates: [
      [0.539, 0.269],
      [0.693, 0.269],
      [0.693, 0.296],
      [0.539, 0.296]
    ]
  },
  {
    id: "supplier",
    coordinates: [
      [0.267, 0.062],
      [0.572, 0.062],
      [0.572, 0.102],
      [0.267, 0.102]
    ]
  },
]

const data = {
  image: dummyImage,
  shapes: dummyShapes,
  orientation: 0,
};
</script>

<template>
  <AnnotationViewer :data="data" />
</template>

Props

• data : include 3 properties. image file to draw in the canvas, shapes which expect a list of shapes andorientation of the provided image (default: 0)
• onShapeClick : return the shape object after a click event
• onShapeMouseEnter : return the shape object after a mouse enter event
• onShapeMouseLeave : return the shape object after a mouse leave event
• onShapeMultiSelect : return the selected shapes using (CTRL + MOUSE CLICK & MOVE)
• options : object of properties to customize default configs
• id : unique id, if not provided it will be automatically generated
• style : style object to change container css properties
• className : apply a className to the control

Contribute to this repo

Feel free to use github to submit issues, pull requests or general feedback. You can also visit our website or drop us an email.

Please read our Contributing section before contributing.

License

MIT © mindee

Changelog

v1.4.0 (06/11/2023)

New

• ✅ Add new unit tests
• ✨ setup chromatic for storybook
• ✨ Set up Cypress workflow and update package.json scripts
• ✨ Import changes and added Storybook scripts.

Changes

• 🔧 replace yarn by pnpm and update package.json with new scripts
• 🔥 Remove unused code for rotating images