From 6c730f5581323c58d674e3dc4309666d2a23e7c4 Mon Sep 17 00:00:00 2001 From: Pieter Vander Vennet Date: Tue, 6 May 2025 13:57:29 +0200 Subject: [PATCH] UX: improve 'plantnet detection' UI, fix #1989 (technically, the text was there all along) --- langs/en.json | 3 +- src/UI/PlantNet/PlantNet.svelte | 124 ++++++++++++++++++-------------- 2 files changed, 73 insertions(+), 54 deletions(-) diff --git a/langs/en.json b/langs/en.json index 3dc1f0f98f..aee22b63c0 100644 --- a/langs/en.json +++ b/langs/en.json @@ -734,7 +734,8 @@ "li1": "take a picture which shows a single leaf", "li2": "take a picture which shows the bark", "li3": "take a picture of the flowers", - "li4": "take a picture of the fruits" + "li4": "take a picture of the fruits", + "title": "What pictures to take for automatic detection?" }, "loadingWikidata": "Loading information about {species}…", "matchPercentage": "{match}% match", diff --git a/src/UI/PlantNet/PlantNet.svelte b/src/UI/PlantNet/PlantNet.svelte index 7ef4259fcd..160451d7f2 100644 --- a/src/UI/PlantNet/PlantNet.svelte +++ b/src/UI/PlantNet/PlantNet.svelte @@ -11,6 +11,7 @@ import WikipediaPanel from "../Wikipedia/WikipediaPanel.svelte" import Plantnet_logo from "../../assets/svg/Plantnet_logo.svelte" import ArrowPath from "@babeard/svelte-heroicons/mini/ArrowPath" + import AccordionSingle from "../Flowbite/AccordionSingle.svelte" /** * The main entry point for the plantnet wizard @@ -23,7 +24,6 @@ */ export let imageUrls: Store export let onConfirm: (wikidataId: string) => void - let collapsedMode = true let options: UIEventSource = new UIEventSource( undefined ) @@ -35,6 +35,8 @@ */ let selectedOption: string + let running = false + let expandExplanation = false let done = false function speciesSelected(species: string) { @@ -44,69 +46,52 @@ async function detectSpecies() { error = undefined - collapsedMode = false - + running = true try { const result: PlantNetResult | "no_plant_detected" = await PlantNet.query(imageUrls.data.slice(0, 5)) if (result === "no_plant_detected") { error = "no_plant_detected" + expandExplanation = true return } - options.set(result.results.filter((r) => r.score > 0.005).slice(0, 8)) + const filteredResults = result.results.filter((r) => r.score > 0.005).slice(0, 8) + expandExplanation = filteredResults.length == 0 + options.set(filteredResults) } catch (e) { console.error("Caught", e) error = e + running = false } } -
- {#if collapsedMode} - - {:else if error === "no_plant_detected"} +
+ + + {#if error === "no_plant_detected"} - + {:else if error !== undefined} - - {:else if $imageUrls.length === 0} - -
- { - collapsedMode = true - }} - /> - - -
    -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
-
- {:else if selectedOption === undefined} + {:else if !selectedOption} { - collapsedMode = true - }} + on:click={() => {running = false}} /> {:else if !done} @@ -158,8 +141,43 @@ {/if} -
- - + + +
+ + +
+ +
+
+ + +
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+ +
+ + +
+
+ +
+ +