# Repository Guidelines

## Project Structure & Module Organization

This is a two-process prototype: a static browser UI plus a local Python RF-DETR backend.

- `index.html` contains the UI, camera setup, overlay canvas, controls, backend calls, and label translations.
- `backend.py` runs `Roboflow/rf-detr-medium` with Hugging Face `transformers` and serves `POST /detect`.
- `worker.js` is legacy browser-only fallback reference, not the main RF-DETR path.

Keep browser assets and modules at the repository root so the same tree works as a Hugging Face Static Space.

## Product Goal

Build a browser demo inspired by RF-DETR examples: a learner points at or holds an object, the app detects it, then overlays the English name and target-language translation. Clear labels and low latency matter most.

## Build, Test, and Development Commands

Install Python dependencies, then run the backend:

```bash
python3 -m pip install -r requirements.txt
python3 backend.py
```

In another terminal, serve `src` locally:

```bash
python3 -m http.server 8000
```

Open `http://localhost:8000`.

Use a local server; camera APIs work reliably over `localhost`.

## Coding Style & Naming Conventions

Use plain HTML, CSS, and ES modules. Match the existing style: 4-space indentation, semicolons, and `const`/`let`.

Name DOM variables clearly, such as `statusEl` or `languageSelect`. Keep backend message fields stable: `label`, `score`, and `box`.

Preserve the palette: slate `#0f1115`, surface `#1e2128`, blue `#007bff`. Avoid purple-themed styling.

## Model & Performance Guidance

Use the RF-DETR tutorial/demo set as product inspiration. RF-DETR runs in `backend.py`, not in the browser.

Memory and latency are hard constraints. Keep translation dictionary-based; do not add a translation model to the hot path.

## Testing Guidelines

No automated test framework is currently configured. For changes, manually verify:

- Backend starts and `GET http://127.0.0.1:7860/health` returns JSON.
- Frontend load has no console errors.
- Camera permission flow works.
- First detection loads RF-DETR or reports a clear backend failure.
- Language changes refresh translations.
- Bounding boxes align with the webcam feed.
- Memory remains stable during a multi-minute run.

If adding tests, prefer browser-level tests for `index.html` and mock worker messages.

## Commit & Pull Request Guidelines

This checkout has no accessible Git history. Use concise imperative commits, for example `Add language selector state handling`.

Pull requests should include a summary, testing notes, browser/device used, and screenshots for UI changes. Call out model or permission changes.

## Security & Configuration Tips

Do not commit model artifacts, credentials, or browser permission workarounds. Keep CDN versions explicit so runtime changes are reviewable.