Add Hugging Face Spaces deployment configuration for frontend+backend

Dockerfile.hf

@@ -0,0 +1,88 @@
+# Hugging Face Spaces Dockerfile - Frontend + Backend
+FROM node:18-slim as frontend-builder
+
+WORKDIR /app/frontend
+COPY frontend/package*.json ./
+RUN npm ci
+COPY frontend/ ./
+RUN npm run build
+
+# Python backend stage
+FROM python:3.9-slim
+
+WORKDIR /app
+
+# Install system dependencies
+RUN apt-get update && apt-get install -y \
+    nginx \
+    supervisor \
+    libgomp1 \
+    libglib2.0-0 \
+    libsm6 \
+    libxext6 \
+    libxrender1 \
+    curl \
+    && rm -rf /var/lib/apt/lists/*
+
+# Install Python dependencies
+COPY backend/requirements.txt ./backend/
+RUN pip install --no-cache-dir -r backend/requirements.txt
+
+# Copy backend code
+COPY backend/ ./backend/
+
+# Copy frontend build from builder stage
+COPY --from=frontend-builder /app/frontend/dist /usr/share/nginx/html
+
+# Configure nginx to serve frontend and proxy to backend
+RUN echo 'server { \n\
+    listen 7860; \n\
+    root /usr/share/nginx/html; \n\
+    index index.html; \n\
+    \n\
+    location / { \n\
+        try_files $uri $uri/ /index.html; \n\
+    } \n\
+    \n\
+    location /api/ { \n\
+        proxy_pass http://127.0.0.1:8000/; \n\
+        proxy_http_version 1.1; \n\
+        proxy_set_header Upgrade $http_upgrade; \n\
+        proxy_set_header Connection "upgrade"; \n\
+        proxy_set_header Host $host; \n\
+        proxy_set_header X-Real-IP $remote_addr; \n\
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; \n\
+        proxy_set_header X-Forwarded-Proto $scheme; \n\
+        proxy_buffering off; \n\
+    } \n\
+}' > /etc/nginx/sites-available/default
+
+# Create supervisor config
+RUN echo '[supervisord] \n\
+nodaemon=true \n\
+\n\
+[program:nginx] \n\
+command=nginx -g "daemon off;" \n\
+autostart=true \n\
+autorestart=true \n\
+stderr_logfile=/var/log/nginx.err.log \n\
+stdout_logfile=/var/log/nginx.out.log \n\
+\n\
+[program:backend] \n\
+command=python -m uvicorn backend.app.main:app --host 127.0.0.1 --port 8000 \n\
+directory=/app \n\
+autostart=true \n\
+autorestart=true \n\
+stderr_logfile=/var/log/backend.err.log \n\
+stdout_logfile=/var/log/backend.out.log \n\
+environment=USE_EXTREME_OPTIMIZATION="true",MAX_MEMORY_GB="3"' > /etc/supervisor/conf.d/supervisord.conf
+
+# Expose Hugging Face Spaces default port
+EXPOSE 7860
+
+# Health check
+HEALTHCHECK --interval=30s --timeout=10s --start-period=60s --retries=3 \
+    CMD curl -f http://localhost:7860/ || exit 1
+
+# Start supervisor
+CMD ["/usr/bin/supervisord", "-c", "/etc/supervisor/conf.d/supervisord.conf"]

README_HF_SPACE.md

@@ -0,0 +1,56 @@
+---
+title: FastVLM Screen Observer
+emoji: 🖥️👁️
+colorFrom: blue
+colorTo: purple
+sdk: docker
+sdk_version: "3.9"
+app_port: 7860
+pinned: false
+license: mit
+models:
+  - apple/FastVLM-7B
+suggested_hardware: t4-small
+custom_headers:
+  cross-origin-embedder-policy: require-corp
+  cross-origin-opener-policy: same-origin
+---
+
+# FastVLM Screen Observer 🖥️👁️
+
+Real-time screen observation and analysis using Apple's FastVLM-7B model, optimized for low-RAM systems (3-8GB).
+
+## Features
+- 🎯 Real-time screen capture and analysis
+- 🤖 FastVLM-7B vision-language model integration
+- 🔍 UI element detection
+- 📝 Text extraction from screenshots
+- ⚠️ Risk detection for security concerns
+- 🎮 Browser automation demo
+- 💾 Export logs and captured frames
+- 🚀 Optimized for 3-8GB RAM with 4-bit quantization
+
+## How to Use
+1. Click "Capture Screen" to analyze your current screen
+2. Enable "Auto Capture" for continuous monitoring
+3. Use "Run Demo" to see browser automation
+4. Export logs as ZIP archive
+
+## Model Information
+- **Model**: Apple FastVLM-7B
+- **Optimization**: Extreme memory optimization with 4-bit quantization
+- **Memory**: Runs on 3-8GB RAM systems
+- **Device**: Supports CPU, CUDA, and MPS (Apple Silicon)
+
+## API Endpoints
+- `GET /api/` - Status check
+- `POST /api/analyze` - Screen analysis
+- `POST /api/demo` - Automation demo
+- `GET /api/export` - Export logs
+- `GET /api/logs/stream` - Stream logs via SSE
+
+## GitHub Repository
+https://github.com/crosse712/fastvlm-screen-observer
+
+---
+Built with ❤️ using FastAPI, React, and FastVLM-7B

frontend/src/App.jsx

@@ -3,7 +3,7 @@ import axios from 'axios'
 import ScreenCapture from './ScreenCapture'
 import './App.css'
 
-const API_BASE = import.meta.env.VITE_API_URL || 'http://localhost:8000'
+const API_BASE = import.meta.env.VITE_API_URL || (window.location.hostname === 'localhost' ? 'http://localhost:8000' : '/api')
 
 function App() {
   const [isCapturing, setIsCapturing] = useState(false)