\n\n---\n \n# \\\n\nA WebComponent within AI-Taxonomist project to identify plants|frog|anything in any web pages. \n\nThis WebComponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.\n\n## Demo\n\nDEMO: plantnet.org/ai-taxonomist-demo/\n
\n \n
\n\n## Recommended usage\n\n1. Get an API Key for [Pl@ntNet here](https://my.plantnet.org/).\n2. 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).\n3. There are several ways to use the web components: \n 1. Within a **web page in HTML** (example: a WordPress or a static website)\n ```html\n \n \n ```\n 2. Within a **JavaScript project (React, Vue, Svelte, Angular, etc)**: \n - a. Install the package: `npm i ai-taxonomist`\n - b. Import the package: `import 'ai-taxonomist';`\n - c. Add the component: ``\n\n### Advanced usage\n\nYou can also use your own server, for this you can specify the server endpoint like so: \n```\n \n```\n\n \n### Options\n\n- **`apiUrl`**: (default: `https://my-api.plantnet.org/v2/identify/all`) the server url to call, either local or remote \n Example with a Local url (the server will need to add the API key): \n ```\n \n ```\n- **`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). \n Example for Pl@ntNet: \n ```\n \n ```\n- **`backendFormat`**: (default: `pn`) backend format of the API: `pn` (PlantNet), `c4c` (Cos4Cloud) or `carp` (CARPESO)\n- **`maxImages`**: The number of images the user can upload for a single identification, default to 5. \n- **`removePlantNetBranding`**: (default: false) if true, the component will not display the PlantNet logo and the link to the PlantNet website. \n- **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: \n ```html\n \n \n \n \n \n ```\n 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`: \n ```js\n document.addEventListener('aiTaxonomistAttachmentsClick', (e) => {\n alert('Attachments clicked: ' + e.detail.taxonName)\n })\n ```\n The detail will contain the properties listed [on `ResultType`](https://github.com/plantnet/ai-taxonomist/blob/main/src/utils/types.ts#L47). \n\n### Styling\n\n- 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.\n\n\n## Development / contributions\n\n### Start the development server\n\n```bash\nnpm start\n```\n\nThis should open http://localhost:8000 in your browser.\n\n### Linting and formatting\n\nTo scan the project for linting and formatting errors, run `npm run lint`\n\nTo automatically fix linting and formatting errors, run `npm run format`\n\n### Release\n \nUpdate the version: \n```\nnpm version major|minor|patch\n```\n\nPublish the version pn NPM:\n```\nnpm publish\n```\n","readmeFilename":"README.md"}
![\"Demo](\"/demo.gif\")
\n