Add attribution for plantnet, styling tweaks

UI/BigComponents/PlantNetSpeciesSearch.ts

@@ -9,6 +9,8 @@ import Combine from "../Base/Combine";
 import Title from "../Base/Title";
 import WikipediaBox from "../Wikipedia/WikipediaBox";
 import Translations from "../i18n/Translations";
+import List from "../Base/List";
+import Svg from "../../Svg";
 
 
 export default class PlantNetSpeciesSearch extends VariableUiElement {
@@ -28,8 +30,15 @@ export default class PlantNetSpeciesSearch extends VariableUiElement {
                     return UIEventSource.FromPromiseWithErr(PlantNet.query(images.slice(0,5)));
                 })
                 .map(result => {
-                    if (result === null) {
+                    if (images.data.length === 0) {
-                        return t.takeImages
+                        return new Combine([t.takeImages, t.howTo.intro, new List(
+                            [
+                                t.howTo.li0,
+                                t.howTo.li1,
+                                t.howTo.li2,
+                                t.howTo.li3
+                            ]
+                        )]).SetClass("flex flex-col")
                     }
                         if (result === undefined) {
                             return new Loading(t.querying.Subs(images.data))
@@ -79,13 +88,21 @@ export default class PlantNetSpeciesSearch extends VariableUiElement {
                                 return plantOverview
                             }
                             const buttons = new Combine([
-                                new Button("Confirm", () => {
+                                new Button(
+                                new Combine([
+                                    Svg.back_svg().SetClass("w-4"),
+                                    t.back]).SetClass("flex"),
+                                    () => {
+                                    selectedSpecies.setData(undefined)
+                                }).SetClass("btn btn-secondary"),
+                                
+                                new Button(
+                                    new Combine([Svg.confirm_svg().SetClass("w-4"), t.confirm]).SetClass("flex")
+                                    , () => {
                                     onConfirm(wikidataSpecies)
                                 }).SetClass("btn"),
-                                new Button("Back to plant overview", () => {
+                       
-                                    selectedSpecies.setData(undefined)
+                            ]).SetClass("flex justify-between");
-                                }).SetClass("btn btn-secondary")
-                            ]).SetClass("flex self-end");
 
                             return new Combine([
                                 new WikipediaBox([wikidataSpecies], {

UI/SpecialVisualizations.ts

@@ -1318,7 +1318,7 @@ export default class SpecialVisualizations {
                         }
 
                         const detect = new UIEventSource(false)
-                        return new Toggle(
+                        const toggle = new Toggle(
                             new Lazy(() => {
                                 const allProvidedImages: Store<ProvidedImage[]> = AllImageProviders.LoadImagesFor(tags, imagePrefixes)
                                 const allImages: Store<string[]> = allProvidedImages.map(pi => pi.map(pi => pi.url))
@@ -1340,6 +1340,13 @@ export default class SpecialVisualizations {
                             new SubtleButton(undefined, "Detect plant species with plantnet.org").onClick(() => detect.setData(true)),
                             detect
                         )
+                        
+                        return new Combine([
+                            toggle,
+                            new Combine([Svg.plantnet_logo_svg().SetClass("w-8"),
+                                Translations.t.plantDetection.poweredByPlantnet])
+                                .SetClass("flex p-2 bg-gray-200 rounded-xl self-end")
+                        ]).SetClass("flex flex-col")
                     }
                 }
             ]

assets/svg/license_info.json

@@ -985,6 +985,16 @@
     "authors": [],
     "sources": []
   },
+  {
+    "path": "plantnet_logo.svg",
+    "license": "Logo (fair usage)",
+    "authors": [
+      "https://plantnet.org"
+    ],
+    "sources": [
+      "Plantnet.org"
+    ]
+  },
   {
     "path": "plus.svg",
     "license": "CC0; trivial",

assets/svg/plantnet_logo.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   version="1.1"
+   id="svg2"
+   width="197"
+   height="116.32127"
+   viewBox="0 0 197 116.32127"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs6" />
+  <g
+     id="g8"
+     transform="translate(-1.375196,-41.199913)">
+    <path
+       style="fill:#8fb636;stroke:none"
+       d="m 93.3752,135.52119 12,-21 -4,25 c 23.045,-11.772 32.998,-47.038298 33,-70.999998 0,-5.9908 0.838,-25.2828 -7.213,-27.1721 -7.654,-1.7961 -17.603,13.1208 -21.041,18.1721 -13.3558,19.6213 -22.8241,53.184998 -12.746,75.999998 M 42.375196,50.521192 c -3.2439,25.6902 16.759104,62.735998 41.000004,72.999998 -0.0234,-8.487 -1.0391,-16.513 0.4637,-24.999998 1.0531,-5.9466 5.1683,-13.9996 4.0093,-20 -0.914,-4.7316 -6.0155,-8.7352 -9.473,-11.6998 -9.978,-8.5558 -22.5558,-16.0213 -36.000004,-16.3002 m -41,72.999998 c 4.19365,8.258 15.8253,12.614 24,15.989 22.0533,9.107 46.351404,15.02 70.000004,18.011 -6.7774,-45.892 -61.032604,-47.725 -94.000004,-34 m 102.000004,34 c 22.945,-1.699 47.762,-8.999 69,-17.604 9.137,-3.702 20.019,-8.293 26,-16.396 -34.944,-13.554 -85.475,-12.001 -95,34 z"
+       id="path881" />
+  </g>
+</svg>

css/index-tailwind-output.css

@@ -1054,10 +1054,6 @@ video {
   height: 6rem;
 }
 
-.h-96 {
-  height: 24rem;
-}
-
 .h-64 {
   height: 16rem;
 }
@@ -1102,6 +1098,10 @@ video {
   height: 8rem;
 }
 
+.h-96 {
+  height: 24rem;
+}
+
 .h-16 {
   height: 4rem;
 }
@@ -1166,6 +1166,11 @@ video {
   width: 2rem;
 }
 
+.w-min {
+  width: -webkit-min-content;
+  width: min-content;
+}
+
 .w-1\/3 {
   width: 33.333333%;
 }
@@ -1186,11 +1191,6 @@ video {
   width: 2.75rem;
 }
 
-.w-min {
-  width: -webkit-min-content;
-  width: min-content;
-}
-
 .w-max {
   width: -webkit-max-content;
   width: max-content;
@@ -1512,6 +1512,11 @@ video {
   background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
 }
 
+.bg-gray-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(229, 231, 235, var(--tw-bg-opacity));
+}
+
 .bg-red-400 {
   --tw-bg-opacity: 1;
   background-color: rgba(248, 113, 113, var(--tw-bg-opacity));
@@ -1532,11 +1537,6 @@ video {
   background-color: rgba(0, 0, 0, var(--tw-bg-opacity));
 }
 
-.bg-gray-200 {
-  --tw-bg-opacity: 1;
-  background-color: rgba(229, 231, 235, var(--tw-bg-opacity));
-}
-
 .bg-gray-100 {
   --tw-bg-opacity: 1;
   background-color: rgba(243, 244, 246, var(--tw-bg-opacity));

langs/en.json

@@ -686,22 +686,25 @@
         "warnAnonymous": "You are not logged in. We won't be able to contact you to resolve your issue."
     },
     "plantDetection": {
+        "back": "Back to species overview",
+        "confirm": "Select species",
         "error": "Something went wrong while detecting the tree species: {error}",
-        "loadingWikidata": "Loading information about {species}",
+        "howTo": {
-        "matchPercentage": "{match}% match",
-        "overviewIntro": "The AI on <a href='https://plantnet.org/' target='_blank'>PlantNet.org</a> thinks the images show the species below.",
-        "overviewTitle": "Automatically detected species",
-        "overviewVerify": "Please verify that correct species and link it to the tree",
-        "querying": "Querying plantnet.org with {length} images",
-        "seeInfo": "See more information about the species",
-        "takeImages": "Take images of the tree to automatically detect the tree type",
-        "howTo":{
             "intro": "For optimal results,",
             "li0": "take a picture which show the tree in the center without much background",
             "li1": "take a picture which shows a single leaf",
             "li2": "take a picture which shows the bark",
             "li3": "take a picture of the flowers"
-        }
+        },
+        "loadingWikidata": "Loading information about {species}",
+        "matchPercentage": "{match}% match",
+        "overviewIntro": "The AI on <a href='https://plantnet.org/' target='_blank'>PlantNet.org</a> thinks the images show the species below.",
+        "overviewTitle": "Automatically detected species",
+        "overviewVerify": "Please verify that correct species and link it to the tree",
+        "poweredByPlantnet": "Powered by <a href='https://plantnet.org' target='_blank'>plantnet.org</a>",
+        "querying": "Querying plantnet.org with {length} images",
+        "seeInfo": "See more information about the species",
+        "takeImages": "Take images of the tree to automatically detect the tree type"
     },
     "privacy": {
         "editing": "When you make a change to the map, this change is recorded on OpenStreetMap and is publicly available to anyone. A changeset made with MapComplete includes the following data: <ul><li>The changes you made</li><li>Your username</li><li>When this change is made</li><li>The theme you used while making the change</li><li>The language of the user interface</li><li>An indication of how close you were to changed objects. Other mappers can use this information to determine if a change was made based on survey or on remote research</li></ul> Please refer to <a href='https://wiki.osmfoundation.org/wiki/Privacy_Policy' target='_blank'>the privacy policy on OpenStreetMap.org</a> for detailed information. We'd like to remind you that you can use a fictional name when signing up.",