# mindee-js

> Front-End Computer Vision SDK

Latest version **1.0.0-rc.2** (published 2021-02-15) · GPL-3.0 license · 0 weekly downloads

## Install

```sh
npm install mindee-js
pnpm add mindee-js
yarn add mindee-js
bun add mindee-js
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0-rc.2 |
| Published | 2021-02-15 |
| First published | 2020-12-15 |
| Weekly downloads | 0 |
| License | GPL-3.0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Node | >=10 |
| Dependencies | 5 |
| Unpacked size | 269.1 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | @techmindee |
| Maintainers | abdelfattah |
| Keywords | react, vue, js, javascript, mindee, SDK, canvas, document, image, segmentation, processing, computer, vision |

## Links

- npm: https://www.npmjs.com/package/mindee-js
- Repository: https://github.com/mindee/mindee-js
- Homepage: https://github.com/mindee/mindee-js#readme
- Issues: https://github.com/mindee/mindee-js/issues
- npm.io page: https://npm.io/package/mindee-js

## Dependencies (5)

- [konva](https://npm.io/package/konva.md) ^7.1.6
- [pdfjs-dist](https://npm.io/package/pdfjs-dist.md) ^2.5.207
- [lit-element](https://npm.io/package/lit-element.md) ^2.4.0
- [@types/pdfjs-dist](https://npm.io/package/@types/pdfjs-dist.md) ^2.1.6
- [@webcomponents/webcomponentsjs](https://npm.io/package/@webcomponents/webcomponentsjs.md) ^2.5.0

## Alternatives

- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads

## Recent versions

- 1.0.0-rc.2 (latest) — 2021-02-15
- 1.0.0-rc.1 — 2020-12-15

## README

![logo_mindee](https://user-images.githubusercontent.com/41388086/68026973-7858b080-fcb1-11e9-85ff-724c8d014118.png)

# mindee-js

> Computer vision SDK for image segmentation and document processing on top of [mindee](https://mindee.com) APIs

[![NPM](https://img.shields.io/npm/v/mindee-js.svg)](https://www.npmjs.com/package/mindee-js)

You can also check out more SDKs built on top of mindee-js
- [react-mindee-js](https://www.npmjs.com/package/react-mindee-js)
- [vue-mindee-js](https://www.npmjs.com/package/vue-mindee-js)

![ezgif com-video-to-gif (12)](https://user-images.githubusercontent.com/41388086/87852820-92045b80-c905-11ea-808e-5a971de2b29f.gif)


## Features

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

- Work with images and pdfs
- Display interactive shapes on images or pdfs with custom style
- Bind custom functions to shapes mouse events
- Create multi-pages pdfs navigation sidebar
- Zoom in and out in the canvas
- Move the image with the mouse
- Create a lens to zoom around the user's pointer

This SDK was primarily made for document processing but can be used for any type of computer vision interface:

## Installation

Installing with npm

```bash
npm install --save mindee-js
```

installing with yarn

```
yarn add mindee-js
```

## Usage

Import **mindee-js** as a side effect in code that will be included throughout your site (e.g. your root module). This will make sure the mindee-js web components are inserted immediately upon page load.

### React example
```jsx
import React, { useEffect, useRef, useState } from 'react'
import 'mindee-js'

import dummyImage from 'assets/image.jpg'
const dummy_shapes = [
  {
    id: 1,
    coordinates: [
      [0.479, 0.172],
      [0.611, 0.172],
      [0.611, 0.196],
      [0.479, 0.196],
    ],
  },
  {
    id: 2,
    coordinates: [
      [0.394, 0.068],
      [0.477, 0.068],
      [0.477, 0.087],
      [0.394, 0.087],
    ],
  },
]

const Example = () => {
  const [pointerPosition, setPointerPosition] = useState(null)
  const ref = useRef(null)

  const onPointerMove = (event) => {
    setPointerPosition(event?.detail?.pointerPosition)
  }

  useEffect(() => {
    ref.current?.addEventListener('on-pointer-move', onPointerMove)
    return () => {
      ref.current?.removeEventListener('on-pointer-move', onPointerMove)
    }
  }, [])

  return (
    <div>
      <annotation-viewer
        ref={ref}
        image={dummyImage}
        shapes={JSON.stringify(dummyShapes)}
        style={{
          display: 'flex',
          width: '100%',
          height: 600,
        }}
      ></annotation-viewer>
      <annotation-lens
        image={dummyImage}
        pointerPosition={pointerPosition && JSON.stringify(pointerPosition)}
        style={{
          display: 'flex',
          width: 300,
          height: 300,
        }}
      ></annotation-lens>
    </div>
  )
}

```

### getImagesFromPDF
> This function returns a Promise that resolves with a list of images as base64 format . It takes pdf file (object URL)

```javascript
import { getImagesFromPDF } from 'mindee-js'

getImagesFromPDF(file).then((images) => {
  // Do something with images pdf pages
})
```

# Contribute to this repo

Feel free to use github to submit issues, pull requests or general feedback.
You can also visit [our website](https://mindee.com) or drop us an [email](mailto:contact@mindee.com).

Please read our [Contributing section](CONTRIBUTING.md) before contributing.

# License

GPLv3 © [mindee](https://mindee.com)

---
_Source: https://npm.io/package/mindee-js · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._