[feat] refactor UI: navbar, mobile navbar, some links

static/src/AppLisa.vue

@@ -1,5 +1,12 @@
 <template>
-  <PageLayout pageTitle="SamGIS with LISA - Inference map page">
+  <PageLayout
+    aboutThisDescription="LISA adapted to SamGIS"
+    aboutThisUrl="https://trinca.tornidor.com/projects/lisa-adapted-for-samgis"
+    currentPageUrl="https://aletrn-samgis-lisa-on-cuda.hf.space"
+    pageTitle="LISA+SamGIS"
+    switchTabDescription="SamGIS demo"
+    switchTabUrl="/samgis"
+  >
     <div>
       <div id="map-container-md-lisa">
         <PageLisaMap :mapName="mapName"
@@ -21,5 +28,4 @@ import PageLayout from '@/components/PageLayout.vue'
 
 const mapName = ref('lisa-map')
 const description = ref("This page displays predictions made with LISA VLM.")
-console.log("lisa")
 </script>

static/src/AppSamgis.vue

@@ -1,5 +1,12 @@
 <template>
-  <PageLayout pageTitle="SamGIS - Inference map page">
+  <PageLayout
+    aboutThisDescription="SamGIS - Segment Anything for GIS"
+    aboutThisUrl="https://trinca.tornidor.com/projects/samgis-segment-anything-applied-to-GIS"
+    currentPageUrl="https://aletrn-samgis-lisa-on-cuda.hf.space/samgis"
+    pageTitle="SamGIS demo"
+    switchTabDescription="LISA+SamGIS demo"
+    switchTabUrl="/"
+  >
     <div>
       <div id="map-container-md-main">
         <PredictionMap

static/src/components/NavBar/MobileNavBar.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="bg-gray-200 items-center h-8">
-    <TabComponent description="About SamGIS" href="https://trinca.tornidor.com/projects/samgis-segment-anything-applied-to-GIS" />
-    <TabComponent description="blog" href="https://trinca.tornidor.com/" />
+    <TabComponent :description="switchTabDescription" :href="switchTabUrl" />
     <TabComponent description="docs" href="https://docs.trinca.tornidor.com/" />
   </div>
 </template>
@@ -9,4 +8,9 @@
 <script setup lang="ts">
 
 import TabComponent from '@/components/NavBar/TabComponent.vue'
+
+const props = defineProps<{
+  switchTabDescription: string,
+  switchTabUrl: string,
+}>()
 </script>

static/src/components/NavBar/NavBar.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="fixed top-2 right-5 mr-2 items-center">
-    <TabComponent description="About SamGIS" href="https://trinca.tornidor.com/projects/samgis-segment-anything-applied-to-GIS" />
-    <TabComponent description="blog" href="https://trinca.tornidor.com/" />
+    <TabComponent :description="switchTabDescription" :href="switchTabUrl" />
     <TabComponent description="docs" href="https://docs.ml-trinca.tornidor.com/" />
   </div>
 </template>
@@ -9,4 +8,9 @@
 <script setup lang="ts">
 
 import TabComponent from '@/components/NavBar/TabComponent.vue'
+
+const props = defineProps<{
+  switchTabDescription: string,
+  switchTabUrl: string,
+}>()
 </script>

static/src/components/PageFooter.vue

@@ -4,14 +4,10 @@
     <div class="relative flex items-center bg-gray-200 h-6">
       <div class="pl-1 w-full">
         <p class="">
-          <span>Trouble on scrolling this page? Open the
-          <PageFooterHyperlink path="https://aletrn-samgis-lisa-on-cuda.hf.space">direct URL space</PageFooterHyperlink>
-          as a new tab. </span>
-          <span><PageFooterHyperlink path="/">SamGIS-LISA on cuda</PageFooterHyperlink>: An inference machine learning POC applied to GIS thanks to
-            <PageFooterHyperlink path="https://github.com/vietanhdev/samexporter/">SAM Exporter</PageFooterHyperlink>
-            and inspired by
-            <PageFooterHyperlink path="https://samgeo.gishub.org/">Segment Geospatial</PageFooterHyperlink>
-          </span>
+          <span>Trouble on scrolling? Open the
+            <PageFooterHyperlink :path="currentPageUrl">direct URL space</PageFooterHyperlink> as a new tab. </span>
+          <span>Curious? Read my <PageFooterHyperlink path="https://trinca.tornidor.com">blog</PageFooterHyperlink> and 
+          <PageFooterHyperlink :path="aboutThisUrl">{{aboutThisDescription}}</PageFooterHyperlink>.</span>
         </p>
       </div>
       <div class="pr-2">
@@ -30,4 +26,10 @@ import {ref} from 'vue'
 import PageFooterHyperlink from "@/components/PageFooterHyperlink.vue";
 
 const showFooterRef = ref(true)
+
+const props = defineProps<{
+  currentPageUrl: string,
+  aboutThisUrl: string,
+  aboutThisDescription: string
+}>()
 </script>

static/src/components/PageLayout.vue

@@ -1,8 +1,18 @@
 <template>
   <div class="relative min-h-screen lg:flex">
     <!-- Menubar -->
-    <NavBar class="hidden portrait:sd:hidden portrait:md:flex landscape:flex" style="z-index: 9999;"/>
-    <MobileNavBar class="flex portrait:sd:flex portrait:md:hidden landscape:hidden" style="z-index: 9999;"/>
+    <NavBar
+      class="hidden portrait:sd:hidden portrait:md:flex landscape:flex"
+      style="z-index: 9999;"
+      :switchTabDescription="switchTabDescription"
+      :switchTabUrl="switchTabUrl"
+    />
+    <MobileNavBar
+      class="flex portrait:sd:flex portrait:md:hidden landscape:hidden"
+      style="z-index: 9999;"
+      :switchTabDescription="switchTabDescription"
+      :switchTabUrl="switchTabUrl"
+    />
 
     <main id="content" class="flex-1 z-1 lg:ml-0 mr-4 overflow-y-auto md:pl-1 lg:h-screen">
       <header class="hidden items-center justify-between h-10 ml-2 landscape:md:flex portrait:sd:flex portrait:md:h-12 bg-gray-200 border-b">
@@ -14,7 +24,11 @@
       </div>
 
       <div class="bottom-0 w-full text-black">
-        <Footer></Footer>
+        <Footer
+          :currentPageUrl="currentPageUrl"
+          :aboutThisDescription="aboutThisDescription"
+          :aboutThisUrl="aboutThisUrl"
+        ></Footer>
       </div>
     </main>
   </div>
@@ -27,6 +41,11 @@ import NavBar from '@/components/NavBar/NavBar.vue'
 import MobileNavBar from '@/components/NavBar/MobileNavBar.vue'
 
 const props = defineProps<{
-  pageTitle: string
+  aboutThisDescription: string,
+  aboutThisUrl: string,
+  currentPageUrl: string,
+  pageTitle: string,
+  switchTabDescription: string,
+  switchTabUrl: string
 }>()
 </script>

static/src/components/PageLisaMap.vue

@@ -6,16 +6,17 @@
       <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 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 navigation!</label>
-                  <label class="text-blue-600" for="checkboxMapNavigationLocked" v-else>map navigation unlocked</label>
+                  <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 here</i></summary>
+              <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

static/src/components/PagePredictionMap.vue

@@ -6,10 +6,11 @@
       <div class="lg:border-r lg:col-span-3">
         <div id="id-map-cont" class="">
           <p class="hidden lg:block">{{ description }}</p>
-          <div class="w-full md:pt-1 md:pb-1 lg:hidden portrait:xl:hidden">
+          <div class="flex w-full md:pt-1 md:pb-1 lg:hidden portrait:xl:hidden">
+          <span class="flex portrait:hidden bg-slate-200 pl-2 pr-2">SamGIS demo</span>
             <ButtonMapSendArrayRequest
               id="id-button-submit"
-              class="h-8 text-sm font-extralight min-w-[180px] max-w-[180px]"
+              class="h-8 text-sm font-extralight min-w-[180px] max-w-[180px] ml-2 mr-2"
               :current-base-map-name="currentBaseMapNameRef"
               :map="map"
               :prompts-array="promptsArrayRef"
@@ -20,8 +21,8 @@
             <span class="ml-2 lg:hidden">
               <input type="checkbox" id="checkboxMapNavigationLocked" v-model="mapNavigationLocked" />
               <span class="ml-2">
-                  <label class="text-red-600" for="checkboxMapNavigationLocked" v-if="mapNavigationLocked">locked map navigation!</label>
-                  <label class="text-blue-600" for="checkboxMapNavigationLocked" v-else>map navigation unlocked</label>
+                  <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>
           </div>