recog

Image Recognition Widget

Installation

The demo app

git clone https://github.com/krampstudio/recog.git
cd recog
npm ci

The widget uses the Google Cloud Vision Api to detect objects in images. You'll have to set up vision and provide an API KEY in order to connect to the service.

The key needs to be set in config.json.

To start the demo app:

npm start

As a library

npm i @krampstudio/recog

Usage as a vanilla JavaScript component

import RecogWidget from 'recog';

new RecogWidget({
  target: document.querySelector('.some-container'),
  props: {
    apiUrl: 'https://vision.googleapis.com/v1/images:annotate?key=<YOUR_VISION_API_KEY>'
  }
});

Usage as a Svelte component

<script>
  import RecogWidget from 'recog/lib/RecogWidget.svelte';
  const apiUrl = 'https://vision.googleapis.com/v1/images:annotate?key=<YOUR_VISION_API_KEY>'
</script>
<RecogWidget {apiUrl} />

Styling

The styles are provided by tailwindcss.

Development

• unit test : npm test
• run the dev server : npm dev
• lint the code : npm lint

License

MIT