2022-11-02 14:44:06 +01:00
import { Store , UIEventSource } from "../../Logic/UIEventSource"
import Toggle from "../Input/Toggle"
import Lazy from "../Base/Lazy"
import { ProvidedImage } from "../../Logic/ImageProviders/ImageProvider"
import PlantNetSpeciesSearch from "../BigComponents/PlantNetSpeciesSearch"
import Wikidata from "../../Logic/Web/Wikidata"
import ChangeTagAction from "../../Logic/Osm/Actions/ChangeTagAction"
import { And } from "../../Logic/Tags/And"
import { Tag } from "../../Logic/Tags/Tag"
import { SubtleButton } from "../Base/SubtleButton"
import Combine from "../Base/Combine"
import Svg from "../../Svg"
import Translations from "../i18n/Translations"
import AllImageProviders from "../../Logic/ImageProviders/AllImageProviders"
2023-03-28 05:13:48 +02:00
import { SpecialVisualization , SpecialVisualizationState } from "../SpecialVisualization" ;
2022-10-28 04:33:05 +02:00
export class PlantNetDetectionViz implements SpecialVisualization {
funcName = "plantnet_detection"
2022-11-02 14:44:06 +01:00
docs =
"Sends the images linked to the current object to plantnet.org and asks it what plant species is shown on it. The user can then select the correct species; the corresponding wikidata-identifier will then be added to the object (together with `source:species:wikidata=plantnet.org AI`). "
2022-10-28 04:33:05 +02:00
args = [
{
name : "image_key" ,
defaultValue : AllImageProviders.defaultKeys.join ( "," ) ,
doc : "The keys given to the images, e.g. if <span class='literal-code'>image</span> is given, the first picture URL will be added as <span class='literal-code'>image</span>, the second as <span class='literal-code'>image:0</span>, the third as <span class='literal-code'>image:1</span>, etc... Multiple values are allowed if ';'-separated " ,
2022-11-02 14:44:06 +01:00
} ,
2022-10-28 04:33:05 +02:00
]
2023-03-28 05:13:48 +02:00
public constr ( state : SpecialVisualizationState , tags : UIEventSource < Record < string , string > > , args : string [ ] ) {
2022-10-28 04:33:05 +02:00
let imagePrefixes : string [ ] = undefined
if ( args . length > 0 ) {
imagePrefixes = [ ] . concat ( . . . args . map ( ( a ) = > a . split ( "," ) ) )
}
const detect = new UIEventSource ( false )
const toggle = new Toggle (
new Lazy ( ( ) = > {
2022-11-02 14:44:06 +01:00
const allProvidedImages : Store < ProvidedImage [ ] > = AllImageProviders . LoadImagesFor (
tags ,
imagePrefixes
)
2022-10-28 04:33:05 +02:00
const allImages : Store < string [ ] > = allProvidedImages . map ( ( pi ) = >
pi . map ( ( pi ) = > pi . url )
)
2022-11-02 14:44:06 +01:00
return new PlantNetSpeciesSearch ( allImages , async ( selectedWikidata ) = > {
selectedWikidata = Wikidata . ExtractKey ( selectedWikidata )
const change = new ChangeTagAction (
tags . data . id ,
new And ( [
new Tag ( "species:wikidata" , selectedWikidata ) ,
new Tag ( "source:species:wikidata" , "PlantNet.org AI" ) ,
] ) ,
tags . data ,
{
2023-03-28 05:13:48 +02:00
theme : state.layout.id ,
2022-11-02 14:44:06 +01:00
changeType : "plantnet-ai-detection" ,
}
)
await state . changes . applyAction ( change )
} )
2022-10-28 04:33:05 +02:00
} ) ,
2022-11-02 14:44:06 +01:00
new SubtleButton ( undefined , "Detect plant species with plantnet.org" ) . onClick ( ( ) = >
detect . setData ( true )
) ,
2022-10-28 04:33:05 +02:00
detect
)
return new Combine ( [
toggle ,
new Combine ( [
2022-11-02 14:44:06 +01:00
Svg . plantnet_logo_svg ( ) . SetClass ( "w-10 h-10 p-1 mr-1 bg-white rounded-full" ) ,
2022-10-28 04:33:05 +02:00
Translations . t . plantDetection . poweredByPlantnet ,
] ) . SetClass ( "flex p-2 bg-gray-200 rounded-xl self-end" ) ,
] ) . SetClass ( "flex flex-col" )
}
}