added review database admin page

Both use an allowlist so only the files each Dockerfile copies are sent
to the build context. For caddy this keeps the TLS certificates and keys
in data/ and config/ out of the context; for api it skips training code,
datasets, saved models and caches.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

api/.dockerignore

@@ -0,0 +1,13 @@
+# Allowlist: the Dockerfile only copies these three things, so nothing
+# else (training code, datasets, saved models, caches) is sent to the daemon.
+*
+!requirements.txt
+!src/production
+!build_models
+
+# Re-exclude junk inside the allowed paths
+**/__pycache__
+**/*.pyc
+**/*.bat
+**/.env
+**/*.env

api/src/production/server.py

@@ -38,17 +38,22 @@ IMAGE_SIZE_CNN = 64
 IMAGE_SIZE_YOLO = 64
 
 # ---- Resource limits (the server is weak, keep everything small and bounded) ----
-TORCH_THREADS = int(os.getenv("TORCH_THREADS", "1"))
+# Number of predictions (bird or face) that may run at the same time.
-MAX_PENDING_INFERENCES = int(os.getenv("MAX_PENDING_INFERENCES", "2"))  # running + waiting
+PARALLEL_INFERENCES = max(1, int(os.getenv("PARALLEL_INFERENCES", "1")))
-MAX_UPLOAD_BYTES = 5 * 1024 * 1024
+# Extra requests allowed to wait for a free slot; anything beyond is rejected.
+QUEUED_INFERENCES = max(0, int(os.getenv("QUEUED_INFERENCES", "1")))
+# PyTorch threads used by EACH running prediction. Total CPU use is roughly
+# PARALLEL_INFERENCES * TORCH_THREADS, so keep the product <= your CPU cores.
+TORCH_THREADS = max(1, int(os.getenv("TORCH_THREADS", "1")))
+MAX_UPLOAD_BYTES = int(max(1, float(os.getenv("MAX_UPLOAD_MEGABYTES", "15"))) * 1024 * 1024)
 MAX_FRAME_BYTES = 1 * 1024 * 1024
 MAX_IMAGE_PIXELS = 20_000_000
 MAX_WEBSOCKETS = 3
 MAX_WEBSOCKETS_PER_IP = 1
-FACE_MIN_INTERVAL = 1 / 2.1
+FACE_MAX_FPS = float(os.getenv("FACE_MAX_FPS", "5.5"))  # per websocket connection
+FACE_MIN_INTERVAL = 1 / FACE_MAX_FPS
 DECODE_DRAFT_SIZE = (256, 256)  # JPEG decodes at reduced scale, still larger than the 64px model input
 
-torch.set_num_threads(TORCH_THREADS)
 Image.MAX_IMAGE_PIXELS = MAX_IMAGE_PIXELS
 
 origins = [
@@ -165,8 +170,14 @@ class RateLimiter:
         return True
 
 
-predict_limiter = RateLimiter(limit=10, window=60)
+predict_limiter = RateLimiter(
-review_limiter = RateLimiter(limit=5, window=60)
+    limit=max(1, int(os.getenv("PREDICT_RATE_LIMIT", "10"))),
+    window=max(1.0, float(os.getenv("PREDICT_RATE_WINDOW", "60"))),
+)
+review_limiter = RateLimiter(
+    limit=max(1, int(os.getenv("REVIEW_RATE_LIMIT", "5"))),
+    window=max(1.0, float(os.getenv("REVIEW_RATE_WINDOW", "60"))),
+)
 
 
 def rate_limit(limiter: RateLimiter):
@@ -180,15 +191,28 @@ class Busy(Exception):
     pass
 
 
-class InferenceGate:
+def init_inference_thread():
-    """One worker thread runs all inference. At most `max_pending` jobs
+    # Must run inside each worker thread: with OpenMP the thread count is a
-    (running + waiting) are admitted; everything else is rejected at once
+    # per-thread setting, so setting it once in the main thread is not enough.
-    instead of queueing up and eating memory."""
+    torch.set_num_threads(TORCH_THREADS)
 
-    def __init__(self, max_pending: int):
+
-        self.max_pending = max_pending
+class InferenceGate:
+    """Runs predictions on `parallel` worker threads. At most
+    `parallel + queued` jobs (running + waiting) are admitted; everything
+    else is rejected at once instead of queueing up and eating memory.
+
+    The models are in eval mode under torch.inference_mode(), so several
+    threads can safely run forward passes on the same model object."""
+
+    def __init__(self, parallel: int, queued: int):
+        self.max_pending = parallel + queued
         self.pending = 0
-        self.executor = ThreadPoolExecutor(max_workers=1, thread_name_prefix="inference")
+        self.executor = ThreadPoolExecutor(
+            max_workers=parallel,
+            thread_name_prefix="inference",
+            initializer=init_inference_thread,
+        )
 
     async def run(self, fn, *args):
         if self.pending >= self.max_pending:
@@ -200,7 +224,7 @@ class InferenceGate:
             self.pending -= 1
 
 
-gate = InferenceGate(MAX_PENDING_INFERENCES)
+gate = InferenceGate(PARALLEL_INFERENCES, QUEUED_INFERENCES)
 
 
 class InvalidImage(Exception):

caddy/.dockerignore

@@ -0,0 +1,5 @@
+# Allowlist: only the Caddyfile is copied into the image.
+# data/ and config/ hold TLS certificates and private keys at runtime
+# (mounted as volumes) and must never end up in the build context.
+*
+!Caddyfile

caddy/Caddyfile

@@ -1,5 +1,5 @@
 {
-	email marvin.krausser277@gmail.com
+	email {$CADDY_EMAIL:marvin.krausser277@gmail.com}
 }
 
 (common) {
@@ -25,7 +25,7 @@ marvinkrausser.com {
 api.marvinkrausser.com {
 	import common
 	request_body {
-		max_size 10MB
+		max_size {$CADDY_MAX_BODY_API:16MB}
 	}
 	reverse_proxy cnn_api:8000
 }
@@ -34,3 +34,8 @@ portfolio.marvinkrausser.com {
 	import common
 	reverse_proxy portfolio_website:8081
 }
+
+git.marvinkrausser.com {
+	import common
+	reverse_proxy gitea:3000
+}

compose.yaml

@@ -7,6 +7,10 @@ services:
       - "80:80"
       - "443:443"
     restart: unless-stopped
+    environment:
+      - CADDY_EMAIL=marvin.krausser277@gmail.com
+      # Keep about 1 MB above the API's MAX_UPLOAD_MEGABYTES (multipart overhead).
+      - CADDY_MAX_BODY_API=16MB
     volumes:
       - ./caddy/data:/data/caddy
       - ./caddy/config:/config/caddy
@@ -15,6 +19,8 @@ services:
       - cnn_website
     networks:
       - cnn_network
+      - gitea_network
+      - portfolio_network
     pull_policy: never
     container_name: caddy_proxy
 
@@ -32,6 +38,18 @@ services:
       - cnn_network
     pull_policy: never
     container_name: cnn_api
+    environment:
+      - PARALLEL_INFERENCES=4
+      - QUEUED_INFERENCES=4
+      - TORCH_THREADS=1
+      - FACE_MAX_FPS=5.5
+      - PREDICT_RATE_LIMIT=10
+      - PREDICT_RATE_WINDOW=60
+      - REVIEW_RATE_LIMIT=5
+      - REVIEW_RATE_WINDOW=60
+      - MAX_UPLOAD_MEGABYTES=15
+    cpus: "5"
+    mem_limit: 3g
 
 
   cnn_website:
@@ -49,3 +67,7 @@ services:
 networks:
   cnn_network:
     name: cnn_network
+  gitea_network:
+    name: gitea_network
+  portfolio_network:
+    name: portfolio_network

website/src/Admin.jsx

@@ -0,0 +1,178 @@
+import { useState, useEffect } from 'react';
+import styles from './Admin.module.css';
+
+// Hidden admin page: only reachable by typing /admin into the address bar.
+// It is intentionally not linked from the navbar. The API key is kept in
+// memory only and is gone after a reload.
+function Admin() {
+    const apiUrl = "https://api.marvinkrausser.com";
+
+    const [apiKey, setApiKey] = useState("");
+    const [limit, setLimit] = useState(100);
+    const [offset, setOffset] = useState(0);
+    const [loading, setLoading] = useState(false);
+    const [confirmDelete, setConfirmDelete] = useState(false);
+    const [response, setResponse] = useState(null);
+
+    // Keep search engines away from this page.
+    useEffect(() => {
+        const meta = document.createElement("meta");
+        meta.name = "robots";
+        meta.content = "noindex, nofollow";
+        document.head.appendChild(meta);
+        return () => meta.remove();
+    }, []);
+
+    const request = async (label, method, path) => {
+        if (!apiKey) {
+            setResponse({ label, status: "No API key entered", body: null, ok: false });
+            return;
+        }
+
+        setLoading(true);
+        setConfirmDelete(false);
+
+        try {
+            const res = await fetch(`${apiUrl}${path}`, {
+                method,
+                headers: { "Authorization": `Bearer ${apiKey}` },
+            });
+
+            const text = await res.text();
+            let body;
+            try {
+                body = JSON.parse(text);
+            } catch {
+                body = text;
+            }
+
+            setResponse({ label, status: `${res.status} ${res.statusText}`, body, ok: res.ok });
+        } catch (e) {
+            setResponse({ label, status: "Network error", body: String(e), ok: false });
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const getReviews = () =>
+        request("Get reviews", "GET", `/review?limit=${limit}&offset=${offset}`);
+
+    const deleteAll = () => {
+        // Two-step confirmation instead of window.confirm.
+        if (!confirmDelete) {
+            setConfirmDelete(true);
+            return;
+        }
+        request("Delete all reviews", "DELETE", "/review");
+    };
+
+    const reviews = Array.isArray(response?.body?.data) ? response.body.data : null;
+
+    return (
+        <div className='site-box'>
+            <h1 className='site-headline'>Admin</h1>
+
+            <div className={styles.panel}>
+                <label className={styles.field}>
+                    <span>API key</span>
+                    <input
+                        type="password"
+                        autoComplete="off"
+                        value={apiKey}
+                        onChange={(e) => setApiKey(e.target.value.trim())}
+                        placeholder="Enter API key"
+                    />
+                </label>
+
+                <div className={styles.row}>
+                    <label className={styles.field}>
+                        <span>Limit</span>
+                        <input
+                            type="number"
+                            min="1"
+                            max="500"
+                            value={limit}
+                            onChange={(e) => setLimit(Math.min(500, Math.max(1, Number(e.target.value) || 1)))}
+                        />
+                    </label>
+                    <label className={styles.field}>
+                        <span>Offset</span>
+                        <input
+                            type="number"
+                            min="0"
+                            value={offset}
+                            onChange={(e) => setOffset(Math.max(0, Number(e.target.value) || 0))}
+                        />
+                    </label>
+                </div>
+
+                <div className={styles.buttons}>
+                    <button className='custom-button' onClick={getReviews} disabled={loading}>
+                        Get reviews
+                    </button>
+                    <button
+                        className={`custom-button ${styles.danger}`}
+                        onClick={deleteAll}
+                        onBlur={() => setConfirmDelete(false)}
+                        disabled={loading}
+                    >
+                        {confirmDelete ? "Click again to delete ALL" : "Delete all reviews"}
+                    </button>
+                </div>
+            </div>
+
+            <div className={styles.output}>
+                <div className={styles["output-head"]}>
+                    <span>Response</span>
+                    {loading && <span className={styles.dim}>Loading…</span>}
+                    {!loading && response && (
+                        <span className={response.ok ? styles.ok : styles.fail}>
+                            {response.label}: {response.status}
+                        </span>
+                    )}
+                </div>
+
+                {reviews && reviews.length > 0 && (
+                    <div className={styles["table-wrap"]}>
+                        <table className={styles.table}>
+                            <thead>
+                                <tr>
+                                    <th>ID</th>
+                                    <th>Created</th>
+                                    <th>Website</th>
+                                    <th>Rating</th>
+                                    <th>Text</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {reviews.map((r) => (
+                                    <tr key={r.id}>
+                                        <td>{r.id}</td>
+                                        <td>{r.created_at ? new Date(r.created_at).toLocaleString() : ""}</td>
+                                        <td>{r.website}</td>
+                                        <td>{r.rating}</td>
+                                        <td className={styles.text}>{r.text}</td>
+                                    </tr>
+                                ))}
+                            </tbody>
+                        </table>
+                    </div>
+                )}
+
+                {reviews && reviews.length === 0 && <p className={styles.dim}>No reviews.</p>}
+
+                {response && (
+                    <pre className={styles.raw}>
+                        {typeof response.body === "string"
+                            ? response.body
+                            : JSON.stringify(response.body, null, 2)}
+                    </pre>
+                )}
+
+                {!response && <p className={styles.dim}>No request sent yet.</p>}
+            </div>
+        </div>
+    );
+}
+
+export default Admin;

website/src/Admin.module.css

@@ -0,0 +1,140 @@
+.panel {
+    width: 100%;
+    max-width: 800px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+.row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+}
+
+.row .field {
+    flex: 1;
+    min-width: 140px;
+}
+
+.field {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    color: var(--text-dim);
+    font-size: 0.9rem;
+}
+
+.field input {
+    font: inherit;
+    font-size: 1rem;
+    color: var(--text);
+    background: var(--bg-elevated);
+    border: 1px solid var(--surface-line);
+    border-radius: 10px;
+    padding: 10px 12px;
+    min-width: 0;
+}
+
+.field input:focus {
+    outline: 2px solid var(--accent-2);
+    outline-offset: 1px;
+}
+
+.buttons {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 15px;
+}
+
+.buttons button:disabled {
+    opacity: 0.5;
+    cursor: default;
+}
+
+.danger {
+    background: rgb(220, 70, 70);
+    border-color: rgb(220, 70, 70);
+}
+
+.output {
+    width: 100%;
+    max-width: 800px;
+    margin: 40px 0 60px 0;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.output-head {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    gap: 10px;
+    font-weight: 600;
+    border-bottom: 1px solid var(--surface-line);
+    padding-bottom: 8px;
+}
+
+.dim {
+    color: var(--text-dim);
+    font-weight: 400;
+}
+
+.ok {
+    color: rgb(110, 220, 140);
+}
+
+.fail {
+    color: rgb(240, 110, 110);
+}
+
+.table-wrap {
+    width: 100%;
+    overflow-x: auto;
+}
+
+.table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 0.9rem;
+}
+
+.table th,
+.table td {
+    text-align: left;
+    vertical-align: top;
+    padding: 8px 10px;
+    border-bottom: 1px solid var(--surface-dim);
+}
+
+.table th {
+    color: var(--surface);
+    white-space: nowrap;
+}
+
+.table td {
+    color: var(--text-dim);
+}
+
+.table .text {
+    min-width: 200px;
+    white-space: pre-wrap;
+    word-break: break-word;
+    color: var(--text);
+}
+
+.raw {
+    margin: 0;
+    max-height: 400px;
+    overflow: auto;
+    padding: 12px;
+    background: var(--bg-elevated);
+    border: 1px solid var(--surface-line);
+    border-radius: 10px;
+    font-family: 'Space Mono', monospace;
+    font-size: 0.8rem;
+    color: var(--text-dim);
+    white-space: pre-wrap;
+    word-break: break-word;
+}

website/src/App.jsx

@@ -4,6 +4,7 @@ import Homepage from './Homepage';
 import Bird_CNN from './Bird_CNN';
 import Reviews from './Reviews.jsx';
 import Object_Detection from './Object_Detection.jsx';
+import Admin from './Admin.jsx';
 
 function App() {
 
@@ -15,6 +16,8 @@ function App() {
         <Route path="/bird_cnn" element={<Bird_CNN />} />
         <Route path="/object_detection" element={<Object_Detection />} />
         <Route path="/reviews" element={<Reviews />} />
+        {/* Not linked in the navbar on purpose: reachable only via the URL. */}
+        <Route path="/admin" element={<Admin />} />
         <Route path="*" element={<Navigate to="/" replace />} />
       </Routes>
     </>

website/src/Bird_CNN.jsx

@@ -1,6 +1,38 @@
 import { useState, useRef } from 'react';
 import styles from './Bird_CNN.module.css';
 
+const MAX_SIDE = 1024;
+const JPEG_QUALITY = 0.9;
+
+// Shrinks the photo before upload. The model only uses 64x64 pixels, so this
+// keeps uploads small (~100-300 KB) without affecting the result. Falls back
+// to the original file if the browser can't decode or encode it.
+async function downscale(file) {
+    try {
+        const bitmap = await createImageBitmap(file, { imageOrientation: 'from-image' });
+        const scale = Math.min(1, MAX_SIDE / Math.max(bitmap.width, bitmap.height));
+        const w = Math.round(bitmap.width * scale);
+        const h = Math.round(bitmap.height * scale);
+
+        const canvas = document.createElement('canvas');
+        canvas.width = w;
+        canvas.height = h;
+        const ctx = canvas.getContext('2d');
+        ctx.fillStyle = '#fff'; // transparent PNGs would turn black as JPEG
+        ctx.fillRect(0, 0, w, h);
+        ctx.drawImage(bitmap, 0, 0, w, h);
+        bitmap.close();
+
+        const blob = await new Promise((resolve) =>
+            canvas.toBlob(resolve, 'image/jpeg', JPEG_QUALITY));
+
+        // Keep the original if re-encoding failed or somehow made it bigger.
+        return blob && blob.size < file.size ? blob : file;
+    } catch {
+        return file;
+    }
+}
+
 function Bird_CNN() {
     const apiUrl = process.env.NODE_ENV === "development"
         ? "https://api.marvinkrausser.com"
@@ -50,12 +82,13 @@ function Bird_CNN() {
 
         scrollRefClassifiction.current.scrollIntoView({ behavior: "smooth" });
 
-        const formData = new FormData();
-        formData.append("file", file);
-
         setLoading(true);
 
         try {
+            const upload = await downscale(file);
+            const formData = new FormData();
+            formData.append("file", upload, "image.jpg");
+
             const response = await fetch(`${apiUrl}/predict`, {
                 method: "POST",
                 body: formData,

website/src/Object_Detection.jsx

@@ -1,6 +1,10 @@
 import styles from './Object_Detection.module.css';
 import { useRef, useEffect, useState } from 'react'
 
+const FRAME_QUALITY = 0.7;
+
+const FRAMES_PER_SECOND = 5;
+
 function Object_Detection() {
     const videoRef = useRef(null);
     const canvasRefBBox = useRef(null);
@@ -66,7 +70,7 @@ function Object_Detection() {
             } catch (e) {
                 setError(true);
             }
-        }, "image/jpeg", 1);
+        }, "image/jpeg", FRAME_QUALITY);
     };
 
     const printDefault = () => {
@@ -123,7 +127,7 @@ function Object_Detection() {
             if (!canvas) return;
 
             ctx.clearRect(0, 0, canvas.width, canvas.height);
-            sendImageIntervall.current = setInterval(sendImage, 1000 / 2);
+            sendImageIntervall.current = setInterval(sendImage, 1000 / FRAMES_PER_SECOND);
         }
         socket.onmessage = (event) => {
             drawBBox(JSON.parse(event.data).bboxes);
@@ -176,7 +180,7 @@ function Object_Detection() {
             <h1 className='site-headline'>Face Detection</h1>
             <div className={styles["text-container-introduction"]}>
                 <p>
-                    The model's performance has been limited to 2 FPS due to low-end server hardware constraints.
+                    The model's performance has been limited to 5 FPS due to low-end server hardware constraints.
                 </p>
                 <p>
                     The webcam video is transmitted to a server for processing. The server does not store, train on, or use the data for any purpose other than face detection.