[feat] PageLisaMap.vue: show the LISA text response on map page

static/src/components/PageLisaMap.vue

@@ -63,7 +63,7 @@
               {statName: 'current map name/type', statValue: currentBaseMapNameRef}
             ]"/>
           </div>
-
+          <h2>LISA response: <span class="text-lg text-blue-600">{{ responseMessageLisaRef }}</span></h2>
           <div v-if="responseMessageRef === waitingString"/>
           <h2 v-else-if="responseMessageRef || responseMessageRef == '-'" class="text-lg text-red-600">
             {{ responseMessageRef }}</h2>
@@ -108,6 +108,7 @@ import {
   promptPlaceHolder,
   promptTextArray,
   responseMessageRef,
+  responseMessageLisaRef,
   Satellite,
   waitingString
 } from './constants'

static/src/components/constants.ts

@@ -11,11 +11,12 @@ export const numberOfPolygonsRef = ref(0)
 export const numberOfPredictedMasksRef = ref(0)
 export const responseMessageRef = ref("-")
 export const geojsonRef = ref("geojsonOutput-placeholder")
+export const responseMessageLisaRef = ref("-")
 
 export const promptPlaceHolder = "You are a skilled gis analyst with a lot of expertise " +
-    "in photogrammetry and remote sensing field."
+    "in photogrammetry, remote sensing and geomorphology field."
 export const promptTextArray = [
-  "You need to identify the areas with trees in this photogrammetric image. Please output segmentation mask and explain why.",
+  "You need to identify the areas with trees in this photogrammetric image. Please output segmentation mask.",
   "You need to identify the roads in this photogrammetric image. Please output segmentation mask and explain why.",
   "You need to identify the lake in this photogrammetric image. Please output segmentation mask, explain why and describe what you identified.",
   "Describe what do you can identify in this photogrammetric image."

static/src/components/helpers.ts

@@ -1,6 +1,7 @@
 import L, { icon, Evented as LEvented, type LatLng, Map as LMap } from 'leaflet'
 import 'leaflet-providers'
 import {
+  responseMessageLisaRef,
   responseMessageRef,
   waitingString,
   durationRef,
@@ -165,6 +166,7 @@ export const getGeoJSONRequest = async (
   urlApi: string
 ) => {
   responseMessageRef.value = waitingString
+  responseMessageLisaRef.value = waitingString
   console.log(`getGeoJSONRequest urlApi: ${urlApi} ...`)
   const data = await fetch(urlApi, {
     method: 'POST',
@@ -181,6 +183,15 @@ export const getGeoJSONRequest = async (
         const parsed = JSON.parse(output.body)
         const { geojson, n_predictions, n_shapes_geojson } = parsed.output
 
+        try {
+          console.log("getGeoJSONRequest parsed.output output_string:", parsed.output.output_string, "#")
+          const { output_string } = parsed.output
+          responseMessageLisaRef.value = output_string
+        } catch(e) {
+          console.log("getGeoJSONRequest parsed.output e:", e, "#")
+          responseMessageLisaRef.value = 'error: check the logs'
+        }
+
         const parsedGeojson = JSON.parse(geojson)
       durationRef.value = parsed.duration_run
         numberOfPolygonsRef.value = n_shapes_geojson