feat: update /static frontend folder

static/README.md

@@ -1,36 +1,27 @@
-# ml-tornidor
+# SamGIS+LISA+ZeroGPU!
 
-## Local development
+[LISA](https://github.com/dvlab-research/LISA) (Reasoning Segmentation via Large Language Model) applied to geospatial data thanks to [SamGIS](https://github.com/trincadev/samgis-be).
 
-Since I use Cloudflare pages as hosting for this project there are some required steps to do before it's possible to start a local development environment. This project needs to wrap the node commands with the `npx wrangler [...]` utility to emulate a Cloudflare Worker function. Because this worker function is under auth which use some env variables I to write these env variables inline. Every time I changed or added needed some variables I also needed to update the `npx wrangler` command. To avoid this I prepared a js script, executed by [Deno](https://deno.land/), that read the env variables from the `.env` file composing the command:
+I also adapted LISA to HuggingFace [lisa-on-cuda](https://huggingface.co/spaces/aletrn/lisa-on-cuda) ZeroGPU space.
 
-1. prepare the .env file copying the template.env file
-2. run the local environment using the command `pnpm dev` or `deno run -A runner.js`
+## projects I based this work on
 
-In case of new or updated packages Deno installs the dependencies at the first execution. Do it with a execution  without the `npx wrangler` wrapper:
+- [LISA](https://github.com/dvlab-research/LISA)
+- [Segment Anything](https://segment-anything.com)
+- [ONNX Runtime](https://onnxruntime.ai/)
+- [transformers](https://github.com/huggingface/transformers)
+- [Vue](https://vuejs.org)
+- [leaflet](https://leafletjs.com/)
 
-```bash
-deno run -A --node-modules-dir npm:vite
-```
+My previous projects I reused:
 
-In case of problem:
+- [SamGIS+LISA (regular GPU) huggingface space](https://huggingface.co/spaces/aletrn/samgis-lisa-on-cuda), [SamGIS+LISA blog page](https://trinca.tornidor.com/projects/lisa-adapted-for-samgis)
+- [lisa-on-cuda huggingface space](https://huggingface.co/spaces/aletrn/samgis-lisa-on-cuda)
+- [transformers-backport repository](https://github.com/trincadev/transformers_backport), [transformers pip package](https://snyk.io/advisor/python/transformers-backport)
 
-1. try executing again the command `deno run -A --node-modules-dir npm:vite`
+# Build the frontend
 
-If this don't solve the problems try to
+Check the package.json for the custom commands, in particular:
 
-1. delete the node_modules folder
-2. reinstall the npm packages with `pnpm install`
-3. Run again the local development server, this time with the standard command
-
-Before to commit try also to build using
-
-```bash
-pnpm build
-```
-
-Then run the preview (change the example variables):
-
-```bash
-npx wrangler pages dev --binding VITE_AUTH0_DOMAIN="example-auth0.eu.auth0.com" API_URL="https://example-aws.execute-api.eu-west-1.amazonaws.com/localhost/lambda-ml-fastsam-api" VITE_AUTH0_AUDIENCE="http://localhost-ml-lambda/" API_DOMAIN=example-aws.execute-api.eu-west-1.amazonaws.com CORS_ALLOWED_DOMAIN=http://localhost:8788 VITE_SATELLITE_NAME="tile-provider.image-type" -- pnpm preview
-```
+- `build:tailwindcss`
+- `build`

static/index.html

@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link href="output.css" rel="stylesheet" type="text/css">
     <link href="dist/output.css" rel="stylesheet" type="text/css">
+    <link href="static/output.css" rel="stylesheet" type="text/css">
     <link rel="icon" href="/favicon.ico" sizes="32x32">
     <link rel="icon" href="/icon.svg" type="image/svg+xml">
     <link rel="apple-touch-icon" href="/apple-touch-icon.png"><!-- 180×180 -->

static/lisa.html

@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link href="output.css" rel="stylesheet" type="text/css">
     <link href="dist/output.css" rel="stylesheet" type="text/css">
+    <link href="static/output.css" rel="stylesheet" type="text/css">
     <link rel="icon" href="/favicon.ico" sizes="32x32">
     <link rel="icon" href="/icon.svg" type="image/svg+xml">
     <link rel="apple-touch-icon" href="/apple-touch-icon.png"><!-- 180×180 -->

static/package.json

@@ -5,7 +5,8 @@
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview --port 5173",
-    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
+    "build:tailwindcss": "pnpm tailwindcss -i src/input.css -o dist/output.css"
   },
   "type": "module",
   "dependencies": {

static/samgis.html

@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link href="output.css" rel="stylesheet" type="text/css">
     <link href="dist/output.css" rel="stylesheet" type="text/css">
+    <link href="static/output.css" rel="stylesheet" type="text/css">
     <link rel="icon" href="/favicon.ico" sizes="32x32">
     <link rel="icon" href="/icon.svg" type="image/svg+xml">
     <link rel="apple-touch-icon" href="/apple-touch-icon.png"><!-- 180×180 -->

static/src/AppLisa.vue

@@ -1,11 +1,11 @@
 <template>
   <PageLayout
-    aboutThisDescription="LISA adapted to SamGIS"
+    aboutThisDescription="LISA adapted to SamGIS on CUDA"
     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"
+    pageTitle="SamGIS+LISA+CUDA"
+    switchTabDescription="SamGIS on CUDA demo"
+    :switchTabUrl=switchTabUrlRef
   >
     <div>
       <div id="map-container-md-lisa">
@@ -26,6 +26,8 @@ import { ref } from 'vue'
 import PageLisaMap from '@/components/PageLisaMap.vue'
 import PageLayout from '@/components/PageLayout.vue'
 
+const switchTabUrl = import.meta.env.VITE_SAMGIS_URL ? import.meta.env.VITE_SAMGIS_URL : "/samgis"
+const switchTabUrlRef = ref(switchTabUrl)
 const mapName = ref('lisa-map')
 const description = ref("This page displays predictions made with LISA VLM.")
 </script>

static/src/AppSamgis.vue

@@ -4,8 +4,8 @@
     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="/"
+    switchTabDescription="LISA+SamGIS+CUDA demo"
+    :switchTabUrl="switchTabUrlRef"
   >
     <div>
       <div id="map-container-md-main">
@@ -31,11 +31,14 @@ import { onMounted, ref } from 'vue'
 import PredictionMap from '@/components/PagePredictionMap.vue'
 import PageLayout from '@/components/PageLayout.vue'
 
+const switchTabUrl = import.meta.env.VITE_LISA_URL ? import.meta.env.VITE_LISA_URL : "/"
+const switchTabUrlRef = ref(switchTabUrl)
 const mapName = ref('prediction-map')
 const description = ref("This page displays predictions made with a machine learning model")
 
 onMounted(() => {
   console.log("descr:", description.value, import.meta.env.VITE__MAP_DESCRIPTION)
+  console.log("switchTabUrl:", switchTabUrl, ", urls from env:", import.meta.env.VITE_SAMGIS_URL, import.meta.env.VITE_LISA_URL, "#")
   description.value = import.meta.env.VITE__MAP_DESCRIPTION ? import.meta.env.VITE__MAP_DESCRIPTION : description.value
 })
 </script>

static/src/components/PageLisaMap.vue

@@ -6,7 +6,7 @@
       <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="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">

static/vite.config.ts

@@ -1,26 +1,29 @@
-import { fileURLToPath, URL } from 'node:url'
-import { resolve } from 'node:path'
-
-import { defineConfig } from 'vite'
+import {fileURLToPath, URL} from 'node:url'
+import {resolve} from 'node:path'
+import {defineConfig, loadEnv} from 'vite'
 import vue from '@vitejs/plugin-vue'
 
 // https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [
-    vue(),
-  ],
-  resolve: {
-    alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url))
+export default defineConfig(({mode}) => {
+    const env = loadEnv(mode, process.cwd())
+    const frontendPrefix = env.VITE_INDEX_URL ? env.VITE_INDEX_URL : "/"
+    console.log(`VITE_PREFIX:${env.VITE_INDEX_URL}, frontend_prefix:${frontendPrefix}, mode:${mode} ...`)
+    return {
+        plugins: [vue()],
+        base: frontendPrefix,
+        resolve: {
+            alias: {
+                '@': fileURLToPath(new URL('./src', import.meta.url))
+            }
+        },
+        build: {
+            rollupOptions: {
+                input: {
+                    samgis: resolve(__dirname, 'samgis.html'),
+                    lisa: resolve(__dirname, 'lisa.html'),
+                    index: resolve(__dirname, "index.html"),
+                },
+            },
+        }
     }
-  },
-  build: {
-    rollupOptions: {
-      input: {
-        samgis: resolve(__dirname, 'samgis.html'),
-        lisa: resolve(__dirname, 'lisa.html'),
-        index: resolve(__dirname, "index.html"),
-      },
-    },
-  },
 })