https://github.com/plantnet/ai-taxonomist-webcomponent

WebComponent for identification using AI-taxonomist from Cos4Cloud
https://github.com/plantnet/ai-taxonomist-webcomponent

lit plants-identification webcomponent

Last synced: about 2 months ago
JSON representation

WebComponent for identification using AI-taxonomist from Cos4Cloud

• Host: GitHub
• URL: https://github.com/plantnet/ai-taxonomist-webcomponent
• Owner: plantnet
• License: mit
• Created: 2022-01-24T15:40:48.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-04-12T09:28:06.000Z (over 1 year ago)
• Last Synced: 2024-04-21T07:33:46.326Z (5 months ago)
• Topics: lit, plants-identification, webcomponent
• Language: TypeScript
• Homepage:
• Size: 7.11 MB
• Stars: 23
• Watchers: 6
• Forks: 4
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        



     < ai-taxonomist > 





  Demo

   · 

  AI Taxonomist Server

   · 

  Pl@ntNet API

   · 

  Cos4Cloud



---

    

# \

A WebComponent within AI-Taxonomist project to identify plants|frog|anything in any web pages. 

This WebComponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.

## Demo

DEMO: plantnet.org/ai-taxonomist-demo/



  



## Recommended usage

1. Get an API Key for [Pl@ntNet here](https://my.plantnet.org/).

2. Allow the domains on your Pl@ntNet account, for `http://localhost:8000` for local development or  `https://example.com` for production website [here](https://my.plantnet.org/account/settings).

3. There are several ways to use the web components: 

    1. Within a **web page in HTML** (example: a WordPress or a static website)

    ```html

    

    

    ```

   2. Within a **JavaScript project (React, Vue, Svelte, Angular, etc)**: 

       - a. Install the package: `npm i ai-taxonomist`

       - b. Import the package: `import 'ai-taxonomist';`

       - c. Add the component: ``

### Advanced usage

You can also use your own server, for this you can specify the server endpoint like so: 

```

        

```

    

### Options

- **`apiUrl`**: (default: `https://my-api.plantnet.org/v2/identify/all`) the server url to call, either local or remote  

    Example with a Local url (the server will need to add the API key):  

    ```

    

    ```

- **`apiKey`**: the API key to use, if not added by the server. On Pl@ntNet API you currently cannot use the apiKey directly due to CORS being checked (so you need to add a proxy at least, cf `server` nginx config).   

    Example for Pl@ntNet:  

    ```

    

    ```

- **`backendFormat`**: (default: `pn`) backend format of the API: `pn` (PlantNet), `c4c` (Cos4Cloud) or `carp`  (CARPESO)

- **`maxImages`**: The number of images the user can upload for a single identification, default to 5. 

- **`removePlantNetBranding`**: (default: false) if true, the component will not display the PlantNet logo and the link to the PlantNet website. 

- **Attachments**: You can attach HTML elements to each result, for example if you want to let the user select the correct taxon. This can be achieve using an HTML `` as follows: 

    ```html

     

         

             button {

                border: 1px solid #8888FF;

                background: transparent;

             }

             button:hover {

                filter: brightness(1.2);

             }

         

         SELECT SPECIES

     

     

    ```

    You should NOT attach a click listener on your side. The AiTaxonomist component will listen for the click and fire a new event named `aiTaxonomistAttachmentsClick` which contain the selected taxon details in `event.detail`: 

    ```js

    document.addEventListener('aiTaxonomistAttachmentsClick', (e) => {

        alert('Attachments clicked: ' + e.detail.taxonName)

    })

    ```

    The detail will contain the properties listed [on `ResultType`](https://github.com/plantnet/ai-taxonomist/blob/main/src/utils/types.ts#L47). 

### Styling

- Dark Mode: you can override dark mode by specifying either `prefer-dark` or `prefer-light` in the `` class element. Doing so will either force the dark/light mode to stay in dark/light mode no matter what the user preference is.

## Development / contributions

### Start the development server

```bash

npm start

```

This should open http://localhost:8000 in your browser.

### Linting and formatting

To scan the project for linting and formatting errors, run `npm run lint`

To automatically fix linting and formatting errors, run `npm run format`

### Release

    

Update the version: 

```

npm version major|minor|patch

```

Publish the version pn NPM:

```

npm publish

```