feat: handle custom relative url with env variables also on the frontend

README.md

@@ -16,7 +16,7 @@ license: mit
 
 I also adapted LISA to HuggingFace [lisa-on-cuda](https://huggingface.co/spaces/aletrn/lisa-on-cuda) ZeroGPU space.
 
-##  Custom environment variables for HuggingFace ZeroGPU Space
+## Custom environment variables for HuggingFace ZeroGPU Space
 
 Fundamental environment variables you need are:
 
@@ -43,5 +43,5 @@ The function `build_frontend()` from lisa_on_cuda package create all the folders
 To change the base relative url for custom frontend add the VITE_PREFIX environment variable, e.g.:
 
 ```bash
-VITE_PREFIX="/custom-url"
+VITE_INDEX_URL="/custom-url"
 ```

app.py

@@ -20,12 +20,12 @@ from samgis_lisa_on_zero.utilities.type_hints import ApiRequestBody, StringPromp
 
 
 loglevel = os.getenv('LOGLEVEL', 'INFO').upper()
-app_logger = setup_logging(debug=loglevel)
+app_logger = setup_logging(debug=loglevel == "DEBUG")
 
-CUSTOM_INDEX_URL = os.getenv("CUSTOM_INDEX_URL", "/static")
-CUSTOM_SAMGIS_URL = os.getenv("CUSTOM_SAMGIS_URL", "/samgis")
-CUSTOM_LISA_URL = os.getenv("CUSTOM_LISA_URL", "/lisa")
-CUSTOM_GRADIO_URL = os.getenv("CUSTOM_GRADIO_URL", "/")
+VITE_INDEX_URL = os.getenv("VITE_INDEX_URL", "/")
+VITE_SAMGIS_URL = os.getenv("VITE_SAMGIS_URL", "/samgis")
+VITE_LISA_URL = os.getenv("VITE_LISA_URL", "/lisa")
+VITE_GRADIO_URL = os.getenv("VITE_GRADIO_URL", "/gradio")
 FASTAPI_TITLE = "samgis-lisa-on-zero"
 app = FastAPI(title=FASTAPI_TITLE, version="1.0")
 
@@ -247,7 +247,6 @@ if bool(write_tmp_on_disk):
             "list_files.html", {"request": request, "files": files_paths}
         )
 
-
 static_dist_folder = WORKDIR / "static" / "dist"
 frontend_builder.build_frontend(
     project_root_folder=frontend_builder.env_project_root_folder,
@@ -260,32 +259,31 @@ app_logger.info("build_frontend ok!")
 
 templates = Jinja2Templates(directory="templates")
 
-
 app.mount("/static", StaticFiles(directory=static_dist_folder, html=True), name="static")
 # important: the index() function and the app.mount MUST be at the end
 # samgis.html
-app.mount(CUSTOM_SAMGIS_URL, StaticFiles(directory=static_dist_folder, html=True), name="samgis")
+app.mount(VITE_SAMGIS_URL, StaticFiles(directory=static_dist_folder, html=True), name="samgis")
 
 
-@app.get(CUSTOM_SAMGIS_URL)
+@app.get(VITE_SAMGIS_URL)
 async def samgis() -> FileResponse:
     return FileResponse(path=static_dist_folder / "samgis.html", media_type="text/html")
 
 
 # lisa.html
-app.mount(CUSTOM_LISA_URL, StaticFiles(directory=static_dist_folder, html=True), name="lisa")
+app.mount(VITE_LISA_URL, StaticFiles(directory=static_dist_folder, html=True), name="lisa")
 
 
-@app.get(CUSTOM_LISA_URL)
+@app.get(VITE_LISA_URL)
 async def lisa() -> FileResponse:
     return FileResponse(path=static_dist_folder / "lisa.html", media_type="text/html")
 
 
 # # index.html (lisa.html copy)
-app.mount(CUSTOM_INDEX_URL, StaticFiles(directory=static_dist_folder, html=True), name="index")
+app.mount(VITE_INDEX_URL, StaticFiles(directory=static_dist_folder, html=True), name="index")
 
 
-@app.get(CUSTOM_INDEX_URL)
+@app.get(VITE_INDEX_URL)
 async def index() -> FileResponse:
     return FileResponse(path=static_dist_folder / "index.html", media_type="text/html")
 
@@ -296,8 +294,9 @@ inference_fn = app_helpers.get_inference_model_by_args(args, inference_decorator
 
 app_helpers.app_logger.info(f"prepared inference_fn function:{inference_fn.__name__}, creating gradio interface...")
 io = app_helpers.get_gradio_interface(inference_fn)
-app_helpers.app_logger.info(f"created gradio interface, mounting gradio app on url {CUSTOM_GRADIO_URL} within FastAPI...")
-app = gr.mount_gradio_app(app, io, path=CUSTOM_GRADIO_URL)
+app_helpers.app_logger.info(
+    f"created gradio interface, mounting gradio app on url {VITE_GRADIO_URL} within FastAPI...")
+app = gr.mount_gradio_app(app, io, path=VITE_GRADIO_URL)
 app_helpers.app_logger.info("mounted gradio app within fastapi")
 
 
@@ -306,6 +305,7 @@ if __name__ == '__main__':
         uvicorn.run(host="0.0.0.0", port=7860, app=app)
     except Exception as ex:
         import logging
+
         logging.error(f"fastapi/gradio application {FASTAPI_TITLE}, exception:{ex}.")
         print(f"fastapi/gradio application {FASTAPI_TITLE}, exception:{ex}.")
         raise ex

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/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/src/AppLisa.vue

@@ -3,9 +3,9 @@
     aboutThisDescription="LISA adapted to SamGIS on ZeroGPU"
     aboutThisUrl="https://trinca.tornidor.com/projects/lisa-adapted-for-samgis"
     currentPageUrl="https://aletrn-samgis-lisa-on-zero.hf.space"
-    pageTitle="+ZeroGPU"
+    pageTitle="SamGIS+LISA+ZeroGPU"
     switchTabDescription="SamGIS on ZeroGPU demo"
-    switchTabUrl="/samgis"
+    :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

@@ -5,7 +5,7 @@
     currentPageUrl="https://aletrn-samgis-lisa-on-zero.hf.space/samgis"
     pageTitle="SamGIS demo"
     switchTabDescription="LISA+SamGIS+ZeroGPU demo"
-    switchTabUrl="/"
+    :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/vite.config.ts

@@ -6,8 +6,8 @@ import vue from '@vitejs/plugin-vue'
 // https://vitejs.dev/config/
 export default defineConfig(({mode}) => {
     const env = loadEnv(mode, process.cwd())
-    const frontendPrefix = env.VITE_PREFIX ? env.VITE_PREFIX : "/"
-    console.log(`VITE_PREFIX:${env.VITE_PREFIX}, frontend_prefix:${frontendPrefix}, mode:${mode} ...`)
+    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,