alessandro trinca tornidor
feat: rename wrong references to samgis_lisa_on_cuda in urls and page descriptions
7d2bd36
raw
history blame
9.39 kB
<template>
<div class="h-auto" id="id-prediction-map-container">
<div class="grid grid-cols-1 2xl:grid-cols-5 lg:gap-1 lg:border-r ml-2 mt-2 md:ml-4 md:mr-4">
<div class="lg:border-r lg:col-span-3">
<div id="id-map-cont" class="">
<div class="flex">
<span class="flex portrait:hidden bg-slate-200">LISA+SamGIS+ZeroGPU demo</span>
<span class="ml-2">
<input type="checkbox" id="checkboxMapNavigationLocked" v-model="mapNavigationLocked" />
<span class="ml-2">
<label class="text-red-600" for="checkboxMapNavigationLocked" v-if="mapNavigationLocked">locked map!</label>
<label class="text-blue-600" for="checkboxMapNavigationLocked" v-else>map unlocked</label>
</span>
</span>
<details id="detail-prompt-examples-array" :open="detailIsOpenRef" class="ml-2">
<summary><i>prompt examples</i></summary>
<div class="grid grid-cols-1 md:grid-cols-3" id="prompt-examples-array">
<div class="text-xs font-extralight flex bg-green-200">
<textarea
id="prompt-text-placeholder"
v-model="promptTextPlaceholderRef"
class="p-2 border-2 border-indigo-500/100 w-full"
/>
</div>
<StringArray
:string-array="promptTextArray"
:string-prefix="promptTextPlaceholderRef"
@set-prompt="(stringPrompt: string) => promptTextRef = stringPrompt"
/>
</div>
</details>
</div>
<div class="flex w-full lg:w-2/3">
<div class="md:pt-1 md:pb-1 md:mr-1 mr-2">
<ButtonMapSendStringRequest
id="id-button-submit"
class="w-full h-8 mt-2 text-sm font-extralight min-w-[180px] max-w-[180px]"
:current-base-map-name="currentBaseMapNameRef"
:map="map"
:promptText="promptTextRef"
:response-message="responseMessageRef"
:send-m-l-request="sendMLStringRequest"
:waiting-string="waitingString"
/>
</div>
<textarea
id="prompt-text-llm-ref"
v-model="promptTextRef"
:placeholder=promptTextPlaceholderRef
rows="2"
class="w-full md:pt-1 md:pb-1 border-2 mt-2 mb-2 mr-2 border-indigo-500/100"
></textarea>
</div>
<div id="map" class="map-predictions"/>
</div>
</div>
<div class="lg:col-span-2">
<div class="lg:pl-2 lg:pr-2 lg:border-l lg:border-3" id="id-map-info">
<h1>Map Info</h1>
<div class="grid grid-cols-1 md:grid-cols-3">
<StatsGrid :stats-array="[
{statName: 'current Zoom', statValue: currentZoomRef},
{statName: 'current map name/type', statValue: currentBaseMapNameRef}
]"/>
</div>
<h2 id="lisa-response-text">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>
<div v-else>
<div class="grid grid-cols-1 md:grid-cols-3">
<StatsGrid :stats-array="[
{statName: 'request duration', statValue: `${durationRef.toFixed(2)}s`},
{statName: 'polygons number', statValue: numberOfPolygonsRef},
{statName: 'predicted masks number', statValue: numberOfPredictedMasksRef},
]"/>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import {
control as LeafletControl,
Evented as LEvented,
type LatLng,
Map as LMap,
map as LeafletMap,
tileLayer,
TileLayer as LTileLayer
} from 'leaflet'
import 'leaflet-providers'
import { onMounted, onUpdated, ref, type Ref } from 'vue'
// workaround because of dist/ content not included in @trincadev/driver.js tag release tarball
import { driver } from "../../node_modules/@trincadev/driver.js/src/driver"
import {
currentBaseMapNameRef,
currentMapBBoxRef,
currentZoomRef,
lisaPartialDriverSteps,
durationRef,
layerControlGroupLayersRef,
mapNavigationLocked,
maxZoom,
minZoom,
numberOfPolygonsRef,
numberOfPredictedMasksRef,
OpenStreetMap,
prefix,
promptPlaceHolder,
promptTextArray,
responseMessageRef,
responseMessageLisaRef,
Satellite,
waitingString
} from './constants'
import {
getCurrentBasemap,
getExtentCurrentViewMapBBox,
sendMLStringRequest,
getQueryParams,
getSelectedPointCoordinate,
updateMapData,
updateZoomBboxMap
} from '@/components/helpers'
import type { SourceTileType, ServiceTiles } from '@/components/types';
import StatsGrid from '@/components/StatsGrid.vue';
import StringArray from '@/components/StringArray.vue';
import ButtonMapSendStringRequest from '@/components/buttons/ButtonMapSendStringRequest.vue';
const promptTextRef: Ref<string> = ref("")
const promptTextPlaceholderRef: Ref<string> = ref(promptPlaceHolder)
const detailIsOpenRef: Ref<boolean> = ref(false)
const lisaDriverObj = driver({
showProgress: true,
steps: [
{
element: 'id-prediction-map-container', popover: {
title: 'SamGIS with LISA...',
description: 'A quick tour about functionalities of SamGIS with LISA!',
onNextClick: () => {
detailIsOpenRef.value = true
lisaDriverObj.moveNext();
}
}
},
...lisaPartialDriverSteps,
{
element: '#id-map-info', popover: {
title: 'map info',
description: 'Section about various map info',
onNextClick: () => {
detailIsOpenRef.value = false
lisaDriverObj.moveNext();
}
}
},
{
element: "#detail-prompt-examples-array", popover: {
title: 'Detail: Array of Prompt Examples',
description: 'Click here to expand the array of prompt examples (closed by default)'
}
},
]
});
let map: LMap
const props = defineProps<{
mapBounds: Array<LatLng>,
mapName: string,
description: string
}>()
const getPopupContentPoint = (leafletEvent: LEvented, label: number): HTMLDivElement => {
let popupContent: HTMLDivElement = document.createElement('div')
let currentPointLayer: LatLng = getSelectedPointCoordinate(leafletEvent)
popupContent.innerHTML = `<span>lat:${JSON.stringify(currentPointLayer.lat)}<br/>`
popupContent.innerHTML += `lng:${JSON.stringify(currentPointLayer.lng)}<br/>`
popupContent.innerHTML += `label:${label}, id:${leafletEvent.layer._leaflet_id}</span>`
const popupDiv: HTMLDivElement = document.createElement('div')
popupDiv.className = 'leaflet-popup-content-inner'
popupDiv.appendChild(popupContent)
return popupDiv
}
onMounted(async () => {
const osmTile = tileLayer.provider(OpenStreetMap)
const params = getQueryParams()
let localVarSatellite: SourceTileType = params.source ? params.source : Satellite
let localVarSatelliteOptions = params.options ? params.options : {}
const satelliteTile = tileLayer.provider(localVarSatellite, localVarSatelliteOptions)
let localVarTerrain: SourceTileType = "nextzen.terrarium"
const terrainTile = new LTileLayer(
"https://s3.amazonaws.com/elevation-tiles-prod/terrarium/{z}/{x}/{y}.png", {
id: localVarTerrain,
attribution: "<a href='https://nextzen.org'>nextzen</a>," +
"<a href='https://registry.opendata.aws/terrain-tiles/'>Mapzen Terrain Tiles - AWS opendata registry</a>," +
"<a href='https://github.com/tilezen/joerd/blob/master/docs/attribution.md'>Mapzen Source Attributions</a>."
}
)
let baseMaps: ServiceTiles = {OpenStreetMap: osmTile}
baseMaps[localVarSatellite] = satelliteTile
baseMaps[localVarTerrain] = terrainTile
currentBaseMapNameRef.value = OpenStreetMap
map = LeafletMap('map', {
layers: [osmTile],
minZoom: minZoom,
maxZoom: maxZoom
})
map.fitBounds(props.mapBounds)
map.attributionControl.setPrefix(prefix)
LeafletControl.scale({position: 'bottomleft', imperial: false, metric: true}).addTo(map)
layerControlGroupLayersRef.value = LeafletControl.layers(baseMaps).addTo(map)
updateZoomBboxMap(map)
map.on('zoomend', (e: LEvented) => {
updateZoomBboxMap(map)
})
map.on('mouseup', (e: LEvented) => {
currentMapBBoxRef.value = getExtentCurrentViewMapBBox(map)
})
updateMapData(map, getPopupContentPoint, promptTextRef)
map.on('baselayerchange', (e: LEvented) => {
currentBaseMapNameRef.value = getCurrentBasemap(e.layer._url, baseMaps)
})
lisaDriverObj.drive();
})
onUpdated(() => {
if (mapNavigationLocked.value) {
map.setMaxZoom(currentZoomRef.value)
map.setMinZoom(currentZoomRef.value)
map.options.maxBoundsViscosity = 1.0
map.setMaxBounds(map.getBounds())
}
if (!mapNavigationLocked.value) {
map.setMaxZoom(maxZoom)
map.setMinZoom(minZoom)
map.options.maxBoundsViscosity = 0.0
map.setMaxBounds([
[90, 180],
[-90, -180]
])
}
})
</script>