visilog

Dockerfile

@@ -2,25 +2,12 @@
 # Use Node.js 20 as required by Vite and its dependencies
 FROM node:20-alpine AS client-builder
 
-# Explicitly declare the build argument for the Google Maps API key.
-# This allows Hugging Face to pass the secret during the build process.
-ARG VITE_GOOGLE_MAPS_API_KEY
-
 WORKDIR /app/client
 COPY client/package*.json ./
 RUN npm install
 
 COPY client/ .
 # Build for production
-# The SPACE_ID env var is automatically provided by Hugging Face for correct asset paths.
-
-# Create a .env file with the API key just before building.
-# Vite will automatically load this file. This is a robust way to inject secrets.
-RUN echo "VITE_GOOGLE_MAPS_API_KEY=${VITE_GOOGLE_MAPS_API_KEY}" > .env
-
-# --- DEBUG: Print the contents of the .env file to confirm it was written correctly ---
-RUN cat .env
-
 RUN npm run build
 
 # Stage 2: Final Production Image

client/src/pages/VisitLog.jsx

@@ -66,7 +66,6 @@ export default function VisitLog() {
   const mapRef = useRef(null);
   const markersRef = useRef([]);
   const pendingFocusRef = useRef("");
-  const apiKey = import.meta.env.VITE_GOOGLE_MAPS_API_KEY;
 
   const visitCount = visits.length;
   const lastSeen = useMemo(() => {
@@ -160,41 +159,45 @@ export default function VisitLog() {
   }, []);
 
   useEffect(() => {
-    if (!apiKey) {
-      setMapError("Missing Google Maps API key.");
-      return;
-    }
-
     let cancelled = false;
-    loadGoogleMaps(apiKey)
-      .then(() => {
+
+    const initializeMap = async () => {
+      try {
+        const configResponse = await fetch(getApiUrl("/api/config"));
+        if (!configResponse.ok) throw new Error("Failed to fetch client configuration.");
+        
+        const config = await configResponse.json();
+        const apiKey = config.googleMapsApiKey;
+
+        if (!apiKey) {
+          throw new Error("Missing Google Maps API key from server configuration.");
+        }
+
+        await loadGoogleMaps(apiKey);
         if (cancelled) return;
+
         if (!mapRef.current && mapContainerRef.current) {
-          mapRef.current = new window.google.maps.Map(
-            mapContainerRef.current,
-            {
-              center: { lat: 20, lng: 0 },
-              zoom: 2,
-              mapTypeControl: false,
-              streetViewControl: false,
-              fullscreenControl: false,
-            }
-          );
+          mapRef.current = new window.google.maps.Map(mapContainerRef.current, {
+            center: { lat: 20, lng: 0 },
+            zoom: 2,
+            mapTypeControl: false,
+            streetViewControl: false,
+            fullscreenControl: false,
+          });
         }
-        if (pendingFocusRef.current) {
-          focusMapOnVisitor(pendingFocusRef.current);
-        }
-      })
-      .catch((err) => {
-        if (!cancelled) {
-          setMapError(err.message || "Failed to load Google Maps");
-        }
-      });
+        if (pendingFocusRef.current) focusMapOnVisitor(pendingFocusRef.current);
+
+      } catch (err) {
+        if (!cancelled) setMapError(err.message || "Failed to initialize map.");
+      }
+    };
+
+    initializeMap();
 
     return () => {
       cancelled = true;
     };
-  }, [apiKey]);
+  }, []);
 
   useEffect(() => {
     if (!mapRef.current || !window.google) {

server/main.py

@@ -5,6 +5,7 @@ from fastapi.middleware.cors import CORSMiddleware
 from starlette.background import BackgroundTask
 from starlette.responses import StreamingResponse, FileResponse
 from fastapi.staticfiles import StaticFiles
+from pydantic import BaseModel
 
 app = FastAPI()
 
@@ -13,6 +14,7 @@ app = FastAPI()
 PRIVATE_SERVER_URL = os.environ.get("PRIVATE_SERVER_URL")
 # The broker will read your HF_TOKEN from the Space's secrets.
 HF_TOKEN = os.environ.get("HF_TOKEN")
+GOOGLE_MAPS_API_KEY = os.environ.get("VITE_GOOGLE_MAPS_API_KEY")
 
 if not PRIVATE_SERVER_URL:
     print("WARNING: The `PRIVATE_SERVER_URL` environment variable is not set. The broker will not be able to forward requests.")
@@ -20,6 +22,9 @@ if not PRIVATE_SERVER_URL:
 if not HF_TOKEN:
     print("WARNING: The `HF_TOKEN` environment variable is not set. Requests to the private server will not be authenticated.")
 
+if not GOOGLE_MAPS_API_KEY:
+    print("WARNING: The `VITE_GOOGLE_MAPS_API_KEY` environment variable is not set. The map on the visit log page will not load.")
+
 # Read timeout from env var, default to 5 minutes (300 seconds) to accommodate slow model conversions.
 BROKER_TIMEOUT = float(os.environ.get("BROKER_TIMEOUT", 300.0))
 # Use a persistent client for performance (connection pooling).
@@ -62,6 +67,17 @@ async def _reverse_proxy(request: Request):
         print(f"Broker: CRITICAL - {error_message}")
         return Response(status_code=502, content=f"Bad Gateway: The broker could not connect to the private server. Details: {error_message}")
 
+# --- Client Configuration Endpoint ---
+# This endpoint must be defined *before* the reverse proxy routes.
+class ClientConfig(BaseModel):
+    googleMapsApiKey: str | None
+
+@app.get("/api/config", response_model=ClientConfig)
+async def get_client_config():
+    """Provides public-safe configuration variables to the client at runtime."""
+    return ClientConfig(googleMapsApiKey=GOOGLE_MAPS_API_KEY)
+
+
 # Add routes to capture all API and data requests and forward them.
 app.add_route("/api/{path:path}", _reverse_proxy, ["GET", "POST", "PUT", "DELETE"])
 app.add_route("/data/{path:path}", _reverse_proxy, ["GET"])