feat: update frontend to proxy requests to Hugging Face Space API and configure environment variables

README.md

@@ -17,3 +17,11 @@ This Space runs the FastAPI service from `src/api/main.py` and exposes:
 - `GET /health`
 - `POST /detect/image`
 - `POST /detect/video`
+
+## Frontend -> Hugging Face Space API
+
+The Next.js frontend now sends requests to `/api/*` and proxies them to your Hugging Face Space.
+
+1. Copy `frontend/.env.local.example` to `frontend/.env.local`.
+2. Set `NEXT_PUBLIC_HF_SPACE_ID` (default: `akagtag/deepdetection`).
+3. Optional: set `NEXT_PUBLIC_API_URL` to override and point to a local backend.

frontend/.env.local.example

@@ -0,0 +1,7 @@
+# Hugging Face Space used by Next.js /api proxy.
+NEXT_PUBLIC_HF_SPACE_ID=akagtag/deepdetection
+
+# Optional direct API override (takes precedence over NEXT_PUBLIC_HF_SPACE_ID).
+# NEXT_PUBLIC_API_URL=http://localhost:8000
+# Local Uvicorn example:
+ NEXT_PUBLIC_API_URL=http://127.0.0.1:7860

frontend/lib/api.ts

@@ -2,9 +2,7 @@
 
 import type { DetectionResponse } from '@/types/detection'
 
-const BASE_URL =
-  process.env.NEXT_PUBLIC_API_URL ??
-  'http://localhost:8000'
+const BASE_URL = '/api'
 
 async function _post(endpoint: string, file: File): Promise<DetectionResponse> {
   const form = new FormData()

frontend/next.config.js

@@ -1,5 +1,26 @@
 const path = require('path')
 
+function trimTrailingSlash(value) {
+  return value.replace(/\/+$/, '')
+}
+
+function resolveApiBaseUrl() {
+  const explicitApiUrl = process.env.NEXT_PUBLIC_API_URL?.trim()
+  if (explicitApiUrl) {
+    return trimTrailingSlash(explicitApiUrl)
+  }
+
+  const hfSpaceId = (process.env.NEXT_PUBLIC_HF_SPACE_ID ?? 'akagtag/deepdetection').trim()
+  const [owner, space] = hfSpaceId.split('/')
+  if (owner && space) {
+    return `https://${owner}-${space}.hf.space`
+  }
+
+  return 'http://localhost:8000'
+}
+
+const API_BASE_URL = resolveApiBaseUrl()
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
@@ -8,7 +29,7 @@ const nextConfig = {
     return [
       {
         source: '/api/:path*',
-        destination: `${process.env.NEXT_PUBLIC_API_URL ?? 'http://localhost:8000'}/:path*`,
+        destination: `${API_BASE_URL}/:path*`,
       },
     ]
   },