feat: add HF Space Docker deployment with live data API

- Dockerfile: builds frontend, fetches fresh JSONs from GitHub on startup, runs server on port 7860
- server.js: GET /api/data + /api/benchmarks routes, SPA catch-all, PORT from env
- App.tsx: async data loading from /api/* with static-import fallback (works on both Vercel and HF)
- README: HF Space front matter

.dockerignore

@@ -0,0 +1,8 @@
+node_modules
+dist
+.vercel
+.env
+.env.*
+*.log
+*.tsbuildinfo
+.DS_Store

Dockerfile

@@ -0,0 +1,29 @@
+FROM node:22-alpine
+
+# wget for fetching fresh data on startup
+RUN apk add --no-cache wget
+
+WORKDIR /app
+
+# Install dependencies
+COPY package*.json ./
+RUN npm install
+
+# Copy source and build the frontend
+COPY . .
+RUN npm run build
+
+# HF Spaces require port 7860
+EXPOSE 7860
+
+# On startup:
+#   1. Download fresh JSON data from the GitHub repo (catches up since last image build)
+#   2. Start the management server (serves static frontend + /api/* routes)
+CMD ["sh", "-c", "\
+  echo 'Fetching latest data from GitHub...' && \
+  wget -q -O data/providers.json \
+    https://raw.githubusercontent.com/CrispStrobe/LLMProviders/main/data/providers.json && \
+  wget -q -O data/benchmarks.json \
+    https://raw.githubusercontent.com/CrispStrobe/LLMProviders/main/data/benchmarks.json && \
+  echo 'Starting server...' && \
+  node server.js"]

README.md

@@ -1,3 +1,13 @@
+---
+title: LLM Providers
+emoji: 📊
+colorFrom: blue
+colorTo: indigo
+sdk: docker
+app_port: 7860
+pinned: false
+---
+
 # LLM Providers
 
 **Live: [llmproviders.vercel.app](https://llmproviders.vercel.app)**

server.js

@@ -16,7 +16,7 @@ const path = require('path');
 const fs = require('fs');
 
 const app = express();
-const PORT = 3001;
+const PORT = process.env.PORT || 3001;
 const DATA_FILE = path.join(__dirname, 'data', 'providers.json');
 const BENCHMARKS_FILE = path.join(__dirname, 'data', 'benchmarks.json');
 const SCRIPTS_DIR = path.join(__dirname, 'scripts', 'providers');
@@ -45,6 +45,23 @@ if (fs.existsSync(distDir)) {
   app.use(express.static(distDir));
 }
 
+// ------------------------------------------------------------------
+// GET /api/data        → serve providers.json live (for HF Space / local)
+// GET /api/benchmarks  → serve benchmarks.json live
+// ------------------------------------------------------------------
+app.get('/api/data', (req, res) => {
+  try {
+    res.json(JSON.parse(fs.readFileSync(DATA_FILE, 'utf8')));
+  } catch { res.status(500).json({ error: 'Failed to read providers data' }); }
+});
+
+app.get('/api/benchmarks', (req, res) => {
+  try {
+    if (!fs.existsSync(BENCHMARKS_FILE)) return res.status(404).json([]);
+    res.json(JSON.parse(fs.readFileSync(BENCHMARKS_FILE, 'utf8')));
+  } catch { res.status(500).json({ error: 'Failed to read benchmarks data' }); }
+});
+
 // ------------------------------------------------------------------
 // GET /api/status
 // Returns per-provider: model count, lastUpdated, whether a fetcher script exists
@@ -222,8 +239,17 @@ app.post('/api/fetch', async (req, res) => {
   res.json({ results });
 });
 
+// SPA catch-all: serve index.html for any non-API route
+if (fs.existsSync(distDir)) {
+  app.get('*', (req, res) => {
+    res.sendFile(path.join(distDir, 'index.html'));
+  });
+}
+
 app.listen(PORT, () => {
   console.log(`Management API server running at http://localhost:${PORT}`);
+  console.log(`  GET  /api/data`);
+  console.log(`  GET  /api/benchmarks`);
   console.log(`  GET  /api/status`);
   console.log(`  POST /api/fetch          (all providers)`);
   console.log(`  POST /api/fetch/:key     (single provider)`);

src/App.tsx

@@ -1,4 +1,4 @@
-import { useState, useMemo, useCallback } from 'react'
+import { useState, useMemo, useCallback, useEffect } from 'react'
 import providersData from '../data/providers.json'
 import benchmarksData from '../data/benchmarks.json'
 import { ManagementPanel } from './components/ManagementPanel'
@@ -101,12 +101,27 @@ function App() {
   const [showManagement, setShowManagement] = useState(false);
   const [dataVersion, setDataVersion] = useState(0);
 
+  // Live data — initialized from bundled JSON, refreshed from /api/* when available
+  const [liveProviders, setLiveProviders] = useState<Provider[]>((providersData as any).providers);
+  const [liveBenchmarks, setLiveBenchmarks] = useState<BenchmarkEntry[]>(benchmarksData as BenchmarkEntry[]);
+
+  useEffect(() => {
+    fetch('/api/data')
+      .then(r => r.ok ? r.json() : null)
+      .then(d => { if (d?.providers) setLiveProviders(d.providers); })
+      .catch(() => {});
+    fetch('/api/benchmarks')
+      .then(r => r.ok ? r.json() : null)
+      .then(d => { if (Array.isArray(d)) setLiveBenchmarks(d); })
+      .catch(() => {});
+  }, [dataVersion]);
+
   // Build benchmark lookup maps
   const { nameMap, hfIdMap } = useMemo(() => {
     const nameMap = new Map<string, BenchmarkEntry>();
     const hfIdMap = new Map<string, BenchmarkEntry>();
 
-    for (const b of benchmarksData as BenchmarkEntry[]) {
+    for (const b of liveBenchmarks) {
       // Name-based lookup (LLMStats names + HF model part)
       nameMap.set(normalizeName(b.name), b);
       if (b.slug) {
@@ -130,7 +145,7 @@ function App() {
       if (b.arena_name) nameMap.set(normalizeName(b.arena_name), b);
     }
     return { nameMap, hfIdMap };
-  }, []);
+  }, [liveBenchmarks]);
 
   const findBenchmark = useCallback((modelName: string): BenchmarkEntry | undefined => {
     // Strip @region (e.g. @us-east-1) and :effort (e.g. :high) suffixes before normalizing
@@ -208,7 +223,7 @@ function App() {
   const allModels = useMemo(() => {
     const rawModels: (Model & { provider: Provider; complianceStatus: string })[] = []
     
-    providersData.providers.forEach((provider: Provider) => {
+    liveProviders.forEach((provider: Provider) => {
       const status = getComplianceStatus(provider);
       provider.models.forEach((model) => {
         let cleanName = model.name;
@@ -236,7 +251,7 @@ function App() {
     });
 
     return uniqueModels;
-  }, [])
+  }, [liveProviders])
 
   const filteredModels = useMemo(() => {
     return allModels.filter((model) => {
@@ -367,7 +382,7 @@ function App() {
           </div>
           <div className="header-actions">
             {dataVersion > 0 && (
-              <span className="data-stale-hint" title="Data was refreshed — reload the page to see updated prices">
+              <span className="data-stale-hint" title="Data refreshed from server">
                 ↻ data updated
               </span>
             )}