{"id":13738700,"url":"https://github.com/plantnet/ai-taxonomist-webcomponent","last_synced_at":"2025-04-12T02:06:14.564Z","repository":{"id":40504314,"uuid":"451524542","full_name":"plantnet/ai-taxonomist-webcomponent","owner":"plantnet","description":"WebComponent for identification using AI-taxonomist from Cos4Cloud","archived":false,"fork":false,"pushed_at":"2025-03-31T14:17:16.000Z","size":7011,"stargazers_count":28,"open_issues_count":3,"forks_count":5,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-04-12T02:06:06.204Z","etag":null,"topics":["lit","plants-identification","webcomponent"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/plantnet.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"custom":["https://plantnet.org/en/donations/"]}},"created_at":"2022-01-24T15:40:48.000Z","updated_at":"2025-03-31T14:17:20.000Z","dependencies_parsed_at":"2024-09-24T16:01:26.338Z","dependency_job_id":"484973be-10e9-4b18-926b-afaa267c4a3a","html_url":"https://github.com/plantnet/ai-taxonomist-webcomponent","commit_stats":{"total_commits":65,"total_committers":1,"mean_commits":65.0,"dds":0.0,"last_synced_commit":"db7954a5ffecded4d45da3d5bf054916ce908d63"},"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/plantnet%2Fai-taxonomist-webcomponent","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/plantnet%2Fai-taxonomist-webcomponent/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/plantnet%2Fai-taxonomist-webcomponent/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/plantnet%2Fai-taxonomist-webcomponent/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/plantnet","download_url":"https://codeload.github.com/plantnet/ai-taxonomist-webcomponent/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248505862,"owners_count":21115354,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["lit","plants-identification","webcomponent"],"created_at":"2024-08-03T03:02:33.707Z","updated_at":"2025-04-12T02:06:14.551Z","avatar_url":"https://github.com/plantnet.png","language":"TypeScript","funding_links":["https://plantnet.org/en/donations/"],"categories":["TypeScript"],"sub_categories":[],"readme":"\n\u003ch1 align=\"center\"\u003e\n    \u003cstrong\u003e\u003ccode\u003e \u003c ai-taxonomist \u003e \u003c/code\u003e\u003c/strong\u003e\n\u003c/h1\u003e\n\n\u003ch3 align=\"center\"\u003e\n  \u003ca href=\"https://plantnet.org/ai-taxonomist-demo/\"\u003eDemo\u003c/a\u003e\n  \u003cspan\u003e · \u003c/span\u003e\n  \u003ca href=\"https://github.com/plantnet/ai-taxonomist\"\u003eAI Taxonomist Server\u003c/a\u003e\n  \u003cspan\u003e · \u003c/span\u003e\n  \u003ca href=\"https://my.plantnet.org/\"\u003ePl@ntNet API\u003c/a\u003e\n  \u003cspan\u003e · \u003c/span\u003e\n  \u003ca href=\"https://cos4cloud-eosc.eu/services/ai-taxonomist/\"\u003eCos4Cloud\u003c/a\u003e\n\u003c/h3\u003e\n\n---\n    \n# \\\u003cai-taxonomist\u003e\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\n\u003cb\u003eDEMO: \u003ca href=\"https://plantnet.org/ai-taxonomist-demo/\" target=\"_blank\"\u003eplantnet.org/ai-taxonomist-demo/\u003c/a\u003e\u003c/b\u003e\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"/demo.gif\" alt=\"Demo of the Web Component\" /\u003e\n\u003c/p\u003e\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    \u003cscript src=\"https://cdn.jsdelivr.net/npm/ai-taxonomist/dist/src/+esm\" type=\"module\"\u003e\u003c/script\u003e\n    \u003cai-taxonomist apiKey=\"YOUR_API_KEY\"\u003e\u003c/ai-taxonomist\u003e\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: `\u003cai-taxonomist apiKey=\"YOUR_API_KEY\"\u003e\u003c/ai-taxonomist\u003e`\n\n### Advanced usage\n\nYou can also use your own server, for this you can specify the server endpoint like so: \n```\n    \u003cai-taxonomist apiUrl=\"https://api.example.com/v2/identify\" apiKey=\"XXXXXXXXX\"\u003e\u003c/ai-taxonomist\u003e    \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    \u003cai-taxonomist apiUrl=\"http://localhost:3000\"\u003e\u003c/ai-taxonomist\u003e\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    \u003cai-taxonomist apiUrl=\"https://my-api.plantnet.org/v2/identify/all\" apiKey=\"XXXXXXXXX\"\u003e\u003c/ai-taxonomist\u003e\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 `\u003ctemplate\u003e` as follows: \n    ```html\n     \u003ctemplate id=\"aitaxonomist-attachments-template\"\u003e\n         \u003cstyle\u003e\n             button {\n                border: 1px solid #8888FF;\n                background: transparent;\n             }\n             button:hover {\n                filter: brightness(1.2);\n             }\n         \u003c/style\u003e\n         \u003cbutton\u003eSELECT SPECIES\u003c/button\u003e\n     \u003c/template\u003e\n    \u003cai-taxonomist\u003e \u003c/ai-taxonomist\u003e\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) =\u003e {\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-webcomponent/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 `\u003cai-taxonomist\u003e` 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","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fplantnet%2Fai-taxonomist-webcomponent","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fplantnet%2Fai-taxonomist-webcomponent","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fplantnet%2Fai-taxonomist-webcomponent/lists"}