facebookresearch · mgrange1998 · Mar 27, 2026
diff --git a/.github/workflows/deploy-web.yml b/.github/workflows/deploy-web.yml
@@ -0,0 +1,54 @@
+name: Deploy Web Playground
+
+on:
+  push:
+    branches: [ main ]
+    paths:
+      - 'web/**'
+      - 'attacks/**'
+      - 'analysis/**'
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: pages
+  cancel-in-progress: false
+
+jobs:
+  build:
+    name: Build web playground
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+    - name: Set up Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: '20'
+        cache: 'npm'
+        cache-dependency-path: web/package-lock.json
+    - name: Install dependencies
+      run: npm ci
+      working-directory: web
+    - name: Build
+      run: npm run build
+      working-directory: web
+    - name: Upload pages artifact
+      uses: actions/upload-pages-artifact@v3
+      with:
+        path: web/dist
+
+  deploy:
+    name: Deploy to GitHub Pages
+    needs: build
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+    - name: Deploy to GitHub Pages
+      id: deployment
+      uses: actions/deploy-pages@v4
diff --git a/web/.gitignore b/web/.gitignore
@@ -0,0 +1,18 @@
+# Dependencies
+node_modules
+
+# Build output
+dist
+
+# Generated at build time by vite.config.ts
+public/pg_modules
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+*.swp
+*.swo
+*~
+
+# OS files
+.DS_Store
diff --git a/web/index.html b/web/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>PrivacyGuard Playground</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/web/package.json b/web/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "privacyguard-web",
+  "private": true,
+  "version": "0.0.1",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "plotly.js-dist-min": "^2.35.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-plotly.js": "^2.6.0",
+    "react-router-dom": "^7.1.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.17.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@types/react-plotly.js": "^2.6.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "eslint": "^9.17.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.16",
+    "globals": "^15.14.0",
+    "@types/node": "^22.0.0",
+    "typescript": "~5.7.0",
+    "typescript-eslint": "^8.18.2",
+    "vite": "^6.0.0"
+  }
+}
diff --git a/web/src/App.tsx b/web/src/App.tsx
@@ -0,0 +1,34 @@
+import { BrowserRouter, Routes, Route, NavLink } from "react-router-dom";
+import Landing from "./tabs/Landing";
+import MIATab from "./tabs/MIATab";
+import LIATab from "./tabs/LIATab";
+import TextSimilarityTab from "./tabs/TextSimilarityTab";
+import CodeSimilarityTab from "./tabs/CodeSimilarityTab";
+import FDPCalculatorTab from "./tabs/FDPCalculatorTab";
+
+function App() {
+  return (
+    <BrowserRouter basename="/PrivacyGuard">
+      <nav className="tab-bar">
+        <NavLink to="/">Home</NavLink>
+        <NavLink to="/mia">MIA</NavLink>
+        <NavLink to="/lia">LIA</NavLink>
+        <NavLink to="/text-similarity">Text Similarity</NavLink>
+        <NavLink to="/code-similarity">Code Similarity</NavLink>
+        <NavLink to="/fdp">f-DP Calculator</NavLink>
+      </nav>
+      <main>
+        <Routes>
+          <Route path="/" element={<Landing />} />
+          <Route path="/mia" element={<MIATab />} />
+          <Route path="/lia" element={<LIATab />} />
+          <Route path="/text-similarity" element={<TextSimilarityTab />} />
+          <Route path="/code-similarity" element={<CodeSimilarityTab />} />
+          <Route path="/fdp" element={<FDPCalculatorTab />} />
+        </Routes>
+      </main>
+    </BrowserRouter>
+  );
+}
+
+export default App;
diff --git a/web/src/components/DataInput.tsx b/web/src/components/DataInput.tsx
@@ -0,0 +1,119 @@
+import { useState, useRef } from "react";
+
+interface DataInputProps {
+  format: "csv" | "jsonl";
+  requiredColumns: string[];
+  placeholder: string;
+  onData: (data: string) => void;
+}
+
+function DataInput({ format, requiredColumns, placeholder, onData }: DataInputProps) {
+  const [text, setText] = useState("");
+  const [validationError, setValidationError] = useState<string | null>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const validate = (data: string): string | null => {
+    const trimmed = data.trim();
+    if (!trimmed) {
+      return "No data provided.";
+    }
+
+    if (format === "csv") {
+      const firstLine = trimmed.split("\n")[0];
+      const headers = firstLine.split(",").map((h) => h.trim());
+      const missing = requiredColumns.filter((col) => !headers.includes(col));
+      if (missing.length > 0) {
+        return `CSV is missing required column(s): ${missing.join(", ")}. Found headers: ${headers.join(", ")}`;
+      }
+    } else {
+      // jsonl — validate the first line
+      const firstLine = trimmed.split("\n")[0];
+      try {
+        const obj = JSON.parse(firstLine);
+        const keys = Object.keys(obj);
+        const missing = requiredColumns.filter((col) => !keys.includes(col));
+        if (missing.length > 0) {
+          return `JSONL first line is missing required field(s): ${missing.join(", ")}. Found fields: ${keys.join(", ")}`;
+        }
+      } catch {
+        return "First line is not valid JSON. Expected JSONL format (one JSON object per line).";
+      }
+    }
+
+    return null;
+  };
+
+  const handleLoad = () => {
+    const err = validate(text);
+    if (err) {
+      setValidationError(err);
+      return;
+    }
+    setValidationError(null);
+    onData(text.trim());
+  };
+
+  const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    const reader = new FileReader();
+    reader.onload = (event) => {
+      const content = event.target?.result;
+      if (typeof content === "string") {
+        setText(content);
+        setValidationError(null);
+      }
+    };
+    reader.readAsText(file);
+
+    // Reset file input so the same file can be re-selected
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+  };
+
+  return (
+    <div className="data-input">
+      <div style={{ display: "flex", gap: "0.5rem", marginBottom: "0.5rem" }}>
+        <button
+          type="button"
+          onClick={() => fileInputRef.current?.click()}
+          className="secondary"
+        >
+          Upload {format.toUpperCase()} file
+        </button>
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept={format === "csv" ? ".csv" : ".jsonl,.json"}
+          onChange={handleFileUpload}
+          style={{ display: "none" }}
+        />
+        <span className="hint">
+          Required {format === "csv" ? "columns" : "fields"}:{" "}
+          <code>{requiredColumns.join(", ")}</code>
+        </span>
+      </div>
+
+      <textarea
+        value={text}
+        onChange={(e) => {
+          setText(e.target.value);
+          setValidationError(null);
+        }}
+        placeholder={placeholder}
+        rows={8}
+        spellCheck={false}
+      />
+
+      {validationError && <div className="error">{validationError}</div>}
+
+      <button onClick={handleLoad} disabled={!text.trim()}>
+        Load Data
+      </button>
+    </div>
+  );
+}
+
+export default DataInput;
diff --git a/web/src/components/ExportButton.tsx b/web/src/components/ExportButton.tsx
@@ -0,0 +1,18 @@
+import { downloadJSON, downloadCSV } from "../utils/export";
+
+interface ExportButtonProps {
+  data: any;
+  perSampleData?: any[];
+  filename: string;
+}
+
+export default function ExportButton({ data, perSampleData, filename }: ExportButtonProps) {
+  return (
+    <div className="export-buttons">
+      <button onClick={() => downloadJSON(data, filename)}>Export JSON</button>
+      {perSampleData && perSampleData.length > 0 && (
+        <button onClick={() => downloadCSV(perSampleData, filename)}>Export CSV</button>
+      )}
+    </div>
+  );
+}
diff --git a/web/src/components/ParameterForm.tsx b/web/src/components/ParameterForm.tsx
@@ -0,0 +1,103 @@
+import { useState } from "react";
+
+export interface ParamField {
+  name: string;
+  label: string;
+  type: "number" | "select" | "checkbox";
+  default: any;
+  options?: { label: string; value: string }[];
+  step?: number;
+  advanced?: boolean;
+}
+
+interface ParameterFormProps {
+  fields: ParamField[];
+  values: Record<string, any>;
+  onChange: (values: Record<string, any>) => void;
+}
+
+function renderField(
+  field: ParamField,
+  value: any,
+  onChange: (name: string, value: any) => void,
+) {
+  switch (field.type) {
+    case "select":
+      return (
+        <select
+          value={value}
+          onChange={(e) => onChange(field.name, e.target.value)}
+        >
+          {field.options?.map((opt) => (
+            <option key={opt.value} value={opt.value}>
+              {opt.label}
+            </option>
+          ))}
+        </select>
+      );
+    case "checkbox":
+      return (
+        <input
+          type="checkbox"
+          checked={!!value}
+          onChange={(e) => onChange(field.name, e.target.checked)}
+        />
+      );
+    case "number":
+      return (
+        <input
+          type="number"
+          value={value}
+          step={field.step ?? "any"}
+          onChange={(e) => onChange(field.name, parseFloat(e.target.value))}
+        />
+      );
+    default:
+      return null;
+  }
+}
+
+function ParameterForm({ fields, values, onChange }: ParameterFormProps) {
+  const [showAdvanced, setShowAdvanced] = useState(false);
+
+  const basicFields = fields.filter((f) => !f.advanced);
+  const advancedFields = fields.filter((f) => f.advanced);
+
+  const handleChange = (name: string, value: any) => {
+    onChange({ ...values, [name]: value });
+  };
+
+  return (
+    <div className="parameter-form">
+      <div className="param-grid">
+        {basicFields.map((field) => (
+          <label key={field.name} className="param-field">
+            <span className="param-label">{field.label}</span>
+            {renderField(field, values[field.name], handleChange)}
+          </label>
+        ))}
+      </div>
+
+      {advancedFields.length > 0 && (
+        <details
+          open={showAdvanced}
+          onToggle={(e) =>
+            setShowAdvanced((e.target as HTMLDetailsElement).open)
+          }
+        >
+          <summary>Advanced Parameters</summary>
+          <div className="param-grid">
+            {advancedFields.map((field) => (
+              <label key={field.name} className="param-field">
+                <span className="param-label">{field.label}</span>
+                {renderField(field, values[field.name], handleChange)}
+              </label>
+            ))}
+          </div>
+        </details>
+      )}
+    </div>
+  );
+}
+
+export default ParameterForm;