| {p.get('person', 'Person')} |
("file");
const [leftTab, setLeftTab] = useState("policy");
const [provider, setProvider] = useState(
() => (localStorage.getItem("compliance_vision_provider") as AIProvider) || "openai"
);
const [videoFile, setVideoFile] = useState(null);
const [stage, setStage] = useState("idle");
const [report, setReport] = useState(null);
const [error, setError] = useState(null);
const [uploadProgress, setUploadProgress] = useState(0);
const [isMonitoring, setIsMonitoring] = useState(false);
const [liveReports, setLiveReports] = useState([]);
const [sessionStart, setSessionStart] = useState(null);
const [liveStage, setLiveStage] = useState("idle");
const [liveError, setLiveError] = useState(null);
const [chunksProcessed, setChunksProcessed] = useState(0);
const recorderRef = useRef(null);
const streamRef = useRef(null);
const monitoringRef = useRef(false);
const sessionIdRef = useRef(0); // incremented each session to discard stale in-flight results
const liveReportsRef = useRef([]);
const accumulatedTranscriptRef = useRef(""); // accumulated across audio chunks
const [policy, setPolicy] = useState(() => {
const savedRefs = loadSavedReferences();
return { rules: [], custom_prompt: "", include_audio: false, reference_images: savedRefs, enabled_reference_ids: [] };
});
const policyRef = useRef(policy);
const providerRef = useRef(provider);
// Persist provider selection
useEffect(() => {
localStorage.setItem("compliance_vision_provider", provider);
providerRef.current = provider;
}, [provider]);
// Persist reference images to localStorage whenever they change
useEffect(() => {
saveReferences(policy.reference_images);
}, [policy.reference_images]);
// Keep liveReportsRef in sync for use in analyzeChunk (avoids stale closure)
useEffect(() => {
liveReportsRef.current = liveReports;
}, [liveReports]);
const handlePolicyChange = useCallback((p: Policy) => {
setPolicy(p);
policyRef.current = p;
}, []);
// Stable callback for reference image changes — avoids stale closure over `policy`
const handleReferenceImagesChange = useCallback((imgs: ReferenceImage[]) => {
setPolicy(prev => {
// Ensure all references have ids
const withIds = imgs.map(img => img.id ? img : { ...img, id: crypto.randomUUID() });
const updated = { ...prev, reference_images: withIds };
policyRef.current = updated;
return updated;
});
}, []);
const canAnalyze =
inputMode === "file" &&
videoFile !== null &&
(policy.rules.length > 0 || policy.custom_prompt.trim().length > 0) &&
policy.rules.every((r) => r.description.trim().length > 0) &&
stage === "idle";
const handleAnalyze = async () => {
if (!videoFile) return;
setStage("uploading");
setReport(null);
setError(null);
setUploadProgress(0);
const result = await analyzeVideo(
videoFile,
policy,
(s) => setStage(s as PipelineStage),
(progress) => setUploadProgress(progress)
);
if (result.status === "complete" && result.report) {
setReport(result.report);
setStage("complete");
} else {
setError(result.error || "Analysis failed.");
setStage("error");
}
};
const handleReset = () => {
setStage("idle");
setReport(null);
setError(null);
setUploadProgress(0);
};
// --- Pipelined monitoring: record chunk N+1 while analyzing chunk N ---
/** Rec
[truncated — 29309 more characters]
```
### local_ui/static/js/app.js
```javascript
/* ═══════════════════════════════════════════════════════════
Compliance Vision — Local UI v2
Dashboard-first SPA with pipeline progress & live monitoring
═══════════════════════════════════════════════════════════ */
(function () {
"use strict";
/* ─── State ──────────────────────────────────────────────── */
const state = {
cameraOn: false,
monitoring: false,
stream: null,
recorder: null,
ws: null,
chunks: [],
clipNum: 0,
sessionStart: null,
timerInterval: null,
totalIncidents: 0,
clipsAnalyzed: 0,
lastStatus: "---",
history: [],
config: {},
pipeline: "idle", // idle | recording | converting | uploading | analyzing | complete | error
rawJsonVisible: false,
};
/* ─── DOM refs ───────────────────────────────────────────── */
const $ = (sel) => document.querySelector(sel);
const $$ = (sel) => document.querySelectorAll(sel);
const el = {
// header
connBadge: $("#connectionBadge"),
connDot: $("#connectionBadge .conn-dot"),
connText: $("#connectionBadge .conn-text"),
// stats
complianceStatus:$("#complianceStatus"),
totalIncidents: $("#totalIncidents"),
clipsAnalyzed: $("#clipsAnalyzed"),
sessionTime: $("#sessionTime"),
// video
videoWrapper: $("#videoWrapper"),
webcamVideo: $("#webcamVideo"),
captureCanvas: $("#captureCanvas"),
videoOverlay: $("#videoOverlay"),
videoPlaceholder:$("#videoPlaceholder"),
recBadge: $("#recBadge"),
clipBadge: $("#clipBadge"),
// controls
btnCamera: $("#btnCamera"),
btnMonitor: $("#btnMonitor"),
btnCapture: $("#btnCapture"),
btnUploadVideo: $("#btnUploadVideo"),
fileInput: $("#fileInput"),
// pipeline
pipelineSteps: $("#pipelineSteps"),
// result
resultEmpty: $("#resultEmpty"),
resultContent: $("#resultContent"),
resultBadge: $("#resultBadge"),
resultPeople: $("#resultPeople"),
resultTs: $("#resultTs"),
resultDetails: $("#resultDetails"),
btnRawToggle: $("#btnRawToggle"),
rawJson: $("#rawJson"),
// history
historyList: $("#historyList"),
btnClearHistory: $("#btnClearHistory"),
// settings
sparkIp: $("#sparkIp"),
proxyPort: $("#proxyPort"),
endpointPath: $("#endpointPath"),
modelId: $("#modelId"),
maxTokens: $("#maxTokens"),
temperature: $("#temperature"),
clipDuration: $("#clipDuration"),
fps: $("#fps"),
autoAnalyze: $("#autoAnalyze"),
promptText: $("#promptText"),
// ai provider
dgxSettingsCard: $("#dgxSettingsCard"),
openaiSettingsCard: $("#openaiSettingsCard"),
openaiApiKey: $("#openaiApiKey"),
openaiModel: $("#openaiModel"),
// email
emailAlertsEnabled: $("#emailAlertsEnabled"),
alertEmail: $("#alertEmail"),
locationLabel: $("#locationLabel"),
resendApiKey: $("#resendApiKey"),
emailFrom: $("#emailFrom"),
btnTestEmail: $("#btnTestEmail"),
btnSaveAll: $("#btnSaveAll"),
btnResetAll: $("#btnResetAll"),
btnTestConn: $("#btnTestConn"),
// toast
toastContainer: $("#toastContainer"),
};
/* ─── Prompt Templates ───────────────────────────────────── */
const TEMPLATES = {
badge: `You are a security camera AI for TreeHacks 2026 hackathon at Stanford University.
THE OFFICIAL TREEHACKS BADGE:
- A Christmas tree / pine tree shaped green PCB (printed circuit board)
- Has "TREE HACKS" and "2026" text in white
- Has a rocket ship, stars, and planet graphics
- Has a QR code, LEDs, and USB-C connectors
- Worn around neck or held in hand
JOB: For each person in the video, determine if they have a TreeHacks badge or not.
RESPOND IN THIS EXACT JSON FORMAT:
{
"people_count": ,
"people": [
{
"person": "Person 1",
"facing_camera": true or false,
"badge_visible": true or false,
"description": "brief appearance description"
}
]
}
RULES:
- If a person is NOT facing the camera, set facing_camera to false and badge_visible to false.
- Only set badge_visible to true if you can clearly see the TreeHacks PCB badge.
- If no people are visible, return: {"people_count": 0, "people": []}
- Return ONLY the JSON, no other text.`,
safety: `You are a safety compliance AI monitoring a workplace. Analyze the video feed for PPE (Personal Protective Equipment) compliance.
Check for: hard hats, safety vests, safety glasses, gloves, steel-toe boots, ear protection.
RESPOND IN THIS EXACT JSON FORMAT:
{
"people_count": ,
"people": [
{
"person": "Person 1",
"ppe_items": ["hard hat", "safety vest"],
"missing_items": ["safety glasses"],
"compliant": false,
"description": "brief description"
}
]
}
Return ONLY the JSON, no other text.`,
crowd: `You are a crowd monitoring AI. Analyze the video for crowd density and behavior.
RESPOND IN THIS EXACT JSON FORMAT:
{
"people_count": ,
"density": "low" | "medium" | "high" | "overcrowded",
"concerns": ["list any safety concerns"],
"description": "brief scene description"
}
Return ONLY the JSON, no other text.`,
general: `Analyze this video feed and describe what you see in detail.
RESPOND IN THIS EXACT JSON FORMAT:
{
"scene_description": "detailed description of the scene",
"objects": ["list of notable objects"],
"people_count": ,
"activity": "description of any activity",
"concerns": ["list any concerns or notable observations"]
}
Return ONLY the JSON, no other text.`,
};
/* ─── Toast Notifications ────────────────────────────────── */
function toast(msg, type = "info", duration = 3500) {
const icons = { success: "✓", error: "✕", info: "ℹ" };
const t = document.createElement("div");
t.className = `toast ${type}`;
t.innerHTML = `${
[truncated — 24720 more characters]
```
### stop.sh
```shell
#!/bin/bash
echo "🛑 Stopping Agent 00Vision..."
# Kill processes from PID file
if [ -f .pids ]; then
while read pid; do
kill -9 $pid 2>/dev/null
done < .pids
rm .pids
fi
# Also kill any stragglers by port
lsof -ti:8000 | xargs kill -9 2>/dev/null
lsof -ti:5173 | xargs kill -9 2>/dev/null
# Kill any remaining python/node processes related to our app
pkill -f "uvicorn backend.main:app" 2>/dev/null
pkill -f "npm run dev" 2>/dev/null
pkill -f "celery.*backend.services" 2>/dev/null
echo "✅ All services stopped"
```
### run.sh
```shell
#!/bin/bash
# Agent 00Vision - Cloud Mode (no Redis/Celery required)
cd "$(dirname "$0")"
# --- .env setup ---
if [ ! -f .env ]; then
echo "No .env file found. Enter your OpenAI API key:"
read -r api_key
echo "OPENAI_API_KEY=$api_key" > .env
fi
# --- Kill old processes on our ports ---
lsof -ti:8082 | xargs kill -9 2>/dev/null
lsof -ti:5173 | xargs kill -9 2>/dev/null
# --- Python venv + deps ---
if [ ! -d "venv" ]; then
echo "Creating virtual environment..."
python3 -m venv venv
fi
source venv/bin/activate
pip install -r backend/requirements.txt -q
# --- Frontend deps ---
if [ ! -d "frontend/node_modules" ]; then
echo "Installing frontend dependencies..."
(cd frontend && npm install)
fi
# --- Start backend on port 8082 (matches Vite proxy) ---
echo "Starting backend on :8082..."
PYTHONPATH=$(pwd) uvicorn backend.main:app --reload --host 0.0.0.0 --port 8082 > backend.log 2>&1 &
BACKEND_PID=$!
# --- Start frontend on port 5173 ---
echo "Starting frontend on :5173..."
(cd frontend && npm run dev) > frontend.log 2>&1 &
FRONTEND_PID=$!
# --- Wait for backend to be ready ---
echo "Waiting for backend..."
for i in $(seq 1 30); do
if curl -s http://localhost:8082/health > /dev/null 2>&1; then
echo ""
echo "Agent 00Vision is running!"
echo ""
echo " Frontend: http://localhost:5173"
echo " Backend: http://localhost:8082"
echo " API Docs: http://localhost:8082/docs"
echo ""
break
fi
sleep 1
printf "."
done
# --- Save PIDs for cleanup ---
echo "$BACKEND_PID" > .pids
echo "$FRONTEND_PID" >> .pids
echo "Press Ctrl+C to stop..."
trap "kill $BACKEND_PID $FRONTEND_PID 2>/dev/null; rm -f .pids; echo 'Stopped.'; exit" INT TERM
wait
```
[46 more indexed source files omitted to keep this export small. The full file list is in the Codebase structure section above.] |