feat: unified build for Hugging Face Spaces

Dockerfile

@@ -0,0 +1,40 @@
+# Unified Dockerfile for Hugging Face Spaces
+# Stage 1: Build the frontend
+FROM node:25-slim AS build-ui
+WORKDIR /app/ui
+COPY ui/package*.json ./
+RUN npm install
+COPY ui/ ./
+RUN npm run build
+
+# Stage 2: Final Image
+FROM python:3.12-slim
+WORKDIR /app
+
+# Install system dependencies
+RUN apt-get update && apt-get install -y \
+    build-essential \
+    curl \
+    && rm -rf /var/lib/apt/lists/*
+
+# Create a non-root user for Hugging Face (UID 1000)
+RUN useradd -m -u 1000 user
+USER user
+ENV PATH="/home/user/.local/bin:$PATH"
+
+# Install Python dependencies
+COPY --chown=user api/requirements.txt .
+RUN pip install --no-cache-dir --user -r requirements.txt
+
+# Copy backend code
+COPY --chown=user api/ ./
+
+# Copy built frontend from Stage 1 to the 'dist' folder
+COPY --from=build-ui --chown=user /app/ui/dist ./dist
+
+# Hugging Face Spaces uses port 7860
+EXPOSE 7860
+
+# Run setup and start the API
+# We ensure models are installed in user space
+CMD ["sh", "-c", "python setup_models.py && uvicorn main:app --host 0.0.0.0 --port 7860"]

README.md

@@ -49,7 +49,7 @@ make test    # Run tests
 docker compose up --build
 ```
 
-- **API**: `http://localhost:8000`
+- **API**: `http://localhost:8000/api`
 - **UI Dashboard**: `http://localhost:5173`
 
 ---
@@ -61,7 +61,7 @@ You can interact directly with the Redac API using `curl`.
 ### Redact Text
 **Request:**
 ```bash
-curl -X POST http://localhost:8000/redact \
+curl -X POST http://localhost:8000/api/redact \
      -H "Content-Type: application/json" \
      -d '{"text": "My name is John Doe, call me at 06 12 34 56 78."}'
 ```

api/main.py

@@ -1,9 +1,12 @@
 from fastapi import FastAPI, HTTPException
 from fastapi.middleware.cors import CORSMiddleware
+from fastapi.staticfiles import StaticFiles
+from fastapi.responses import FileResponse
 from pydantic import BaseModel
 from typing import List, Dict, Optional
 import logging
 import re
+import os
 
 from presidio_analyzer import AnalyzerEngine, RecognizerRegistry, PatternRecognizer, Pattern
 from presidio_analyzer.predefined_recognizers import SpacyRecognizer
@@ -72,12 +75,14 @@ class RedactRequest(BaseModel):
     text: str
     language: Optional[str] = "auto"
 
-@app.get("/")
-async def root():
+# API routes
+@app.get("/api/status")
+async def api_status():
     return {"status": "online", "mode": "pro-visual"}
 
-@app.post("/redact")
+@app.post("/api/redact")
 async def redact_text(request: RedactRequest):
+    # ... (rest of the logic)
     try:
         try:
             target_lang = detect(request.text) if request.language == "auto" else request.language
@@ -118,5 +123,24 @@ async def redact_text(request: RedactRequest):
         logger.error(f"Error: {str(e)}")
         raise HTTPException(status_code=500, detail=str(e))
 
+# Mount static files for the UI
+if os.path.exists("dist"):
+    # First, serve specific asset folders to avoid catching /api/
+    app.mount("/assets", StaticFiles(directory="dist/assets"), name="assets")
+    
+    # Catch-all for the frontend SPA (must be last)
+    @app.get("/{full_path:path}")
+    async def serve_frontend(full_path: str):
+        # If the file exists in dist, serve it (e.g., favicon, icons.svg)
+        potential_file = os.path.join("dist", full_path)
+        if os.path.isfile(potential_file):
+            return FileResponse(potential_file)
+        # Otherwise serve index.html for SPA routing
+        return FileResponse("dist/index.html")
+
+    @app.get("/")
+    async def serve_index():
+        return FileResponse("dist/index.html")
+
 if __name__ == "__main__":
     uvicorn.run(app, host="0.0.0.0", port=8000)

api/setup_models.py

@@ -13,7 +13,8 @@ def check_and_download():
             print(f"✅ {model} is already present.")
         except OSError:
             print(f"📥 {model} not found. Downloading (this may take a few minutes)...")
-            subprocess.check_call([sys.executable, "-m", "spacy", "download", model])
+            # Using --user to ensure it goes into a writable directory for non-root users
+            subprocess.check_call([sys.executable, "-m", "spacy", "download", model, "--user"])
             print(f"✨ {model} downloaded successfully.")
 
 if __name__ == "__main__":

ui/src/App.tsx

@@ -1,10 +1,9 @@
 import { useState, useEffect, useRef } from 'react';
 import axios from 'axios';
 import { 
-  Shield, Eye, Lock, CheckCircle2, Copy, 
-  Database, Languages, Fingerprint, Zap, Activity,
-  Palette, ChevronDown, Check, Radio, Target, Terminal,
-  Upload, Trash2
+  Shield, Lock, CheckCircle2, 
+  Database, Languages, Fingerprint, Zap,
+  Palette, Upload, Trash2
 } from 'lucide-react';
 
 interface EntityMeta {
@@ -44,7 +43,7 @@ function App() {
   const langRef = useRef<HTMLDivElement>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
 
-  const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:8000';
+  const API_URL = import.meta.env.VITE_API_URL || '';
 
   useEffect(() => {
     localStorage.setItem('pg-theme', theme);
@@ -58,7 +57,7 @@ function App() {
 
   useEffect(() => {
     const checkStatus = async () => {
-      try { await axios.get(`${API_URL}/`); setApiStatus('online'); } 
+      try { await axios.get(`${API_URL}/api/status`); setApiStatus('online'); } 
       catch (err) { setApiStatus('offline'); }
     };
     checkStatus();
@@ -68,7 +67,7 @@ function App() {
     if (!text.trim()) return;
     setLoading(true);
     try {
-      const response = await axios.post(`${API_URL}/redact`, { text, language });
+      const response = await axios.post(`${API_URL}/api/redact`, { text, language });
       setResult(response.data);
     } catch (err: any) { console.error(err); } 
     finally { setTimeout(() => setLoading(false), 400); }
@@ -141,6 +140,15 @@ function App() {
         </div>
 
         <div className="flex items-center gap-2 sm:gap-3">
+          <a 
+            href="https://github.com/gni/redac" 
+            target="_blank" 
+            rel="noopener noreferrer"
+            className={`flex items-center gap-2 px-3 sm:px-4 py-2 border rounded-full text-[10px] sm:text-xs font-semibold transition-all ${themeClasses.panel} hover:border-blue-500 mr-2`}
+          >
+            <svg className="w-3.5 h-3.5 sm:w-4 sm:h-4 fill-current" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
+            <span className="hidden xs:inline">GitHub</span>
+          </a>
           <div className="relative" ref={themeRef}>
             <button onClick={() => setIsThemeOpen(!isThemeOpen)} className={`flex items-center gap-2 px-3 sm:px-4 py-2 border rounded-full text-[10px] sm:text-xs font-semibold transition-all ${themeClasses.panel} hover:border-blue-500`}>
               <Palette className="w-3.5 h-3.5 sm:w-4 sm:h-4" /> <span className="hidden xs:inline">{theme}</span>

ui/vite.config.ts

@@ -4,4 +4,12 @@ import react from '@vitejs/plugin-react'
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [react()],
+  server: {
+    proxy: {
+      '/api': {
+        target: 'http://localhost:8000',
+        changeOrigin: true,
+      }
+    }
+  }
 })