feat: Implement a web gallery interface with image thumbnail generation and new API endpoints.

demo/capture-upload.sh

@@ -90,10 +90,21 @@ if [[ "${1:-}" == "--test" ]]; then
     echo "✓ fswebcam installed"
     
     # Try capture
-    TEST_FILE="${TEMP_DIR}/picupper_test_$(date +%s).jpg"
+    # Get System Info for Overlay
+    SYSTEM_HOSTNAME=$(hostname)
+    SYSTEM_IP=$(hostname -I 2>/dev/null | awk '{print $1}') || SYSTEM_IP="unknown"
+
     echo "Capturing test image to: $TEST_FILE"
     
-    if fswebcam -d "$VIDEO_DEVICE" -r "$RESOLUTION" -S "$SKIP_FRAMES" --no-banner "$TEST_FILE" 2>/dev/null; then
+    if fswebcam -d "$VIDEO_DEVICE" -r "$RESOLUTION" -S "$SKIP_FRAMES" \
+        --title "$CAMERA_ID" \
+        --subtitle "$SYSTEM_HOSTNAME | $SYSTEM_IP" \
+        --banner-colour '#AA000000' \
+        --line-colour '#FF000000' \
+        --text-colour '#FFFFFF' \
+        --font "sans:24" \
+        --timestamp "%Y-%m-%d %H:%M:%S" \
+        "$TEST_FILE" 2>/dev/null; then
         FILE_SIZE=$(stat -f%z "$TEST_FILE" 2>/dev/null || stat -c%s "$TEST_FILE" 2>/dev/null)
         echo "✓ Capture successful: $TEST_FILE (${FILE_SIZE} bytes)"
         echo ""
@@ -239,7 +250,21 @@ apply_camera_settings
 
 # Capture image
 log "Capturing from $VIDEO_DEVICE ($RESOLUTION)"
-if ! fswebcam -d "$VIDEO_DEVICE" -r "$RESOLUTION" -S "$SKIP_FRAMES" --no-banner "$TEMP_FILE" 2>/dev/null; then
+
+# Get System Info for Overlay
+SYSTEM_HOSTNAME=$(hostname)
+# Get first non-loopback IP
+SYSTEM_IP=$(hostname -I 2>/dev/null | awk '{print $1}') || SYSTEM_IP="unknown"
+
+if ! fswebcam -d "$VIDEO_DEVICE" -r "$RESOLUTION" -S "$SKIP_FRAMES" \
+    --title "$CAMERA_ID" \
+    --subtitle "$SYSTEM_HOSTNAME | $SYSTEM_IP" \
+    --banner-colour '#AA000000' \
+    --line-colour '#FF000000' \
+    --text-colour '#FFFFFF' \
+    --font "sans:24" \
+    --timestamp "%Y-%m-%d %H:%M:%S" \
+    "$TEMP_FILE" 2>/dev/null; then
     log_error "Capture failed"
     exit 1
 fi

package-lock.json

@@ -11,9 +11,485 @@
       "dependencies": {
         "express": "^4.21.0",
         "multer": "^1.4.5-lts.1",
+        "sharp": "^0.34.5",
         "uuid": "^10.0.0"
       }
     },
+    "node_modules/@emnapi/runtime": {
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.7.1.tgz",
+      "integrity": "sha512-PVtJr5CmLwYAU9PZDMITZoR5iAOShYREoR45EyyLrbntV50mdePTgUn4AmOw90Ifcj+x2kRjdzr1HP3RrNiHGA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@img/colour": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@img/colour/-/colour-1.0.0.tgz",
+      "integrity": "sha512-A5P/LfWGFSl6nsckYtjw9da+19jB8hkJ6ACTGcDfEJ0aE+l2n2El7dsVM7UVHZQ9s2lmYMWlrS21YLy2IR1LUw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@img/sharp-darwin-arm64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.34.5.tgz",
+      "integrity": "sha512-imtQ3WMJXbMY4fxb/Ndp6HBTNVtWCUI0WdobyheGf5+ad6xX8VIDO8u2xE4qc/fr08CKG/7dDseFtn6M6g/r3w==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-arm64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-darwin-x64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.34.5.tgz",
+      "integrity": "sha512-YNEFAF/4KQ/PeW0N+r+aVVsoIY0/qxxikF2SWdp+NRkmMB7y9LBZAVqQ4yhGCm/H3H270OSykqmQMKLBhBJDEw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-x64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-arm64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.2.4.tgz",
+      "integrity": "sha512-zqjjo7RatFfFoP0MkQ51jfuFZBnVE2pRiaydKJ1G/rHZvnsrHAOcQALIi9sA5co5xenQdTugCvtb1cuf78Vf4g==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-x64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.2.4.tgz",
+      "integrity": "sha512-1IOd5xfVhlGwX+zXv2N93k0yMONvUlANylbJw1eTah8K/Jtpi15KC+WSiaX/nBmbm2HxRM1gZ0nSdjSsrZbGKg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.2.4.tgz",
+      "integrity": "sha512-bFI7xcKFELdiNCVov8e44Ia4u2byA+l3XtsAj+Q8tfCwO6BQ8iDojYdvoPMqsKDkuoOo+X6HZA0s0q11ANMQ8A==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.2.4.tgz",
+      "integrity": "sha512-excjX8DfsIcJ10x1Kzr4RcWe1edC9PquDRRPx3YVCvQv+U5p7Yin2s32ftzikXojb1PIFc/9Mt28/y+iRklkrw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-ppc64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-ppc64/-/sharp-libvips-linux-ppc64-1.2.4.tgz",
+      "integrity": "sha512-FMuvGijLDYG6lW+b/UvyilUWu5Ayu+3r2d1S8notiGCIyYU/76eig1UfMmkZ7vwgOrzKzlQbFSuQfgm7GYUPpA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-riscv64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-riscv64/-/sharp-libvips-linux-riscv64-1.2.4.tgz",
+      "integrity": "sha512-oVDbcR4zUC0ce82teubSm+x6ETixtKZBh/qbREIOcI3cULzDyb18Sr/Wcyx7NRQeQzOiHTNbZFF1UwPS2scyGA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-s390x": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.2.4.tgz",
+      "integrity": "sha512-qmp9VrzgPgMoGZyPvrQHqk02uyjA0/QrTO26Tqk6l4ZV0MPWIW6LTkqOIov+J1yEu7MbFQaDpwdwJKhbJvuRxQ==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-x64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.2.4.tgz",
+      "integrity": "sha512-tJxiiLsmHc9Ax1bz3oaOYBURTXGIRDODBqhveVHonrHJ9/+k89qbLl0bcJns+e4t4rvaNBxaEZsFtSfAdquPrw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-arm64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.2.4.tgz",
+      "integrity": "sha512-FVQHuwx1IIuNow9QAbYUzJ+En8KcVm9Lk5+uGUQJHaZmMECZmOlix9HnH7n1TRkXMS0pGxIJokIVB9SuqZGGXw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-x64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.2.4.tgz",
+      "integrity": "sha512-+LpyBk7L44ZIXwz/VYfglaX/okxezESc6UxDSoyo2Ks6Jxc4Y7sGjpgU9s4PMgqgjj1gZCylTieNamqA1MF7Dg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.34.5.tgz",
+      "integrity": "sha512-9dLqsvwtg1uuXBGZKsxem9595+ujv0sJ6Vi8wcTANSFpwV/GONat5eCkzQo/1O6zRIkh0m/8+5BjrRr7jDUSZw==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.34.5.tgz",
+      "integrity": "sha512-bKQzaJRY/bkPOXyKx5EVup7qkaojECG6NLYswgktOZjaXecSAeCWiZwwiFf3/Y+O1HrauiE3FVsGxFg8c24rZg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-ppc64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-ppc64/-/sharp-linux-ppc64-0.34.5.tgz",
+      "integrity": "sha512-7zznwNaqW6YtsfrGGDA6BRkISKAAE1Jo0QdpNYXNMHu2+0dTrPflTLNkpc8l7MUP5M16ZJcUvysVWWrMefZquA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-ppc64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-riscv64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-riscv64/-/sharp-linux-riscv64-0.34.5.tgz",
+      "integrity": "sha512-51gJuLPTKa7piYPaVs8GmByo7/U7/7TZOq+cnXJIHZKavIRHAP77e3N2HEl3dgiqdD/w0yUfiJnII77PuDDFdw==",
+      "cpu": [
+        "riscv64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-riscv64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-s390x": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.34.5.tgz",
+      "integrity": "sha512-nQtCk0PdKfho3eC5MrbQoigJ2gd1CgddUMkabUj+rBevs8tZ2cULOx46E7oyX+04WGfABgIwmMC0VqieTiR4jg==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-s390x": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-x64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.34.5.tgz",
+      "integrity": "sha512-MEzd8HPKxVxVenwAa+JRPwEC7QFjoPWuS5NZnBt6B3pu7EG2Ge0id1oLHZpPJdn3OQK+BQDiw9zStiHBTJQQQQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-x64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-arm64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.34.5.tgz",
+      "integrity": "sha512-fprJR6GtRsMt6Kyfq44IsChVZeGN97gTD331weR1ex1c1rypDEABN6Tm2xa1wE6lYb5DdEnk03NZPqA7Id21yg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-arm64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-x64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.34.5.tgz",
+      "integrity": "sha512-Jg8wNT1MUzIvhBFxViqrEhWDGzqymo3sV7z7ZsaWbZNDLXRJZoRGrjulp60YYtV4wfY8VIKcWidjojlLcWrd8Q==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-x64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-wasm32": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.34.5.tgz",
+      "integrity": "sha512-OdWTEiVkY2PHwqkbBI8frFxQQFekHaSSkUIJkwzclWZe64O1X4UlUjqqqLaPbUpMOQk6FBu/HtlGXNblIs0huw==",
+      "cpu": [
+        "wasm32"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later AND MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/runtime": "^1.7.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-arm64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-arm64/-/sharp-win32-arm64-0.34.5.tgz",
+      "integrity": "sha512-WQ3AgWCWYSb2yt+IG8mnC6Jdk9Whs7O0gxphblsLvdhSpSTtmu69ZG1Gkb6NuvxsNACwiPV6cNSZNzt0KPsw7g==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-ia32": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.34.5.tgz",
+      "integrity": "sha512-FV9m/7NmeCmSHDD5j4+4pNI8Cp3aW+JvLoXcTUo0IqyjSfAZJ8dIUmijx1qaJsIiU+Hosw6xM5KijAWRJCSgNg==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-x64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.34.5.tgz",
+      "integrity": "sha512-+29YMsqY2/9eFEiW93eqWnuLcWcufowXewwSNIT6UwZdUUCrM3oFjMWH/Z6/TMmb4hlFenmfAVbpWeup2jryCw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
     "node_modules/accepts": {
       "version": "1.3.8",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
@@ -203,6 +679,15 @@
         "npm": "1.2.8000 || >= 1.4.16"
       }
     },
+    "node_modules/detect-libc": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/dunder-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -771,6 +1256,18 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "license": "MIT"
     },
+    "node_modules/semver": {
+      "version": "7.7.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
+      "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/send": {
       "version": "0.19.2",
       "resolved": "https://registry.npmjs.org/send/-/send-0.19.2.tgz",
@@ -822,6 +1319,50 @@
       "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
       "license": "ISC"
     },
+    "node_modules/sharp": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.34.5.tgz",
+      "integrity": "sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg==",
+      "hasInstallScript": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@img/colour": "^1.0.0",
+        "detect-libc": "^2.1.2",
+        "semver": "^7.7.3"
+      },
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-darwin-arm64": "0.34.5",
+        "@img/sharp-darwin-x64": "0.34.5",
+        "@img/sharp-libvips-darwin-arm64": "1.2.4",
+        "@img/sharp-libvips-darwin-x64": "1.2.4",
+        "@img/sharp-libvips-linux-arm": "1.2.4",
+        "@img/sharp-libvips-linux-arm64": "1.2.4",
+        "@img/sharp-libvips-linux-ppc64": "1.2.4",
+        "@img/sharp-libvips-linux-riscv64": "1.2.4",
+        "@img/sharp-libvips-linux-s390x": "1.2.4",
+        "@img/sharp-libvips-linux-x64": "1.2.4",
+        "@img/sharp-libvips-linuxmusl-arm64": "1.2.4",
+        "@img/sharp-libvips-linuxmusl-x64": "1.2.4",
+        "@img/sharp-linux-arm": "0.34.5",
+        "@img/sharp-linux-arm64": "0.34.5",
+        "@img/sharp-linux-ppc64": "0.34.5",
+        "@img/sharp-linux-riscv64": "0.34.5",
+        "@img/sharp-linux-s390x": "0.34.5",
+        "@img/sharp-linux-x64": "0.34.5",
+        "@img/sharp-linuxmusl-arm64": "0.34.5",
+        "@img/sharp-linuxmusl-x64": "0.34.5",
+        "@img/sharp-wasm32": "0.34.5",
+        "@img/sharp-win32-arm64": "0.34.5",
+        "@img/sharp-win32-ia32": "0.34.5",
+        "@img/sharp-win32-x64": "0.34.5"
+      }
+    },
     "node_modules/side-channel": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
@@ -935,6 +1476,13 @@
         "node": ">=0.6"
       }
     },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD",
+      "optional": true
+    },
     "node_modules/type-is": {
       "version": "1.6.18",
       "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",

package.json

@@ -17,6 +17,7 @@
   "dependencies": {
     "express": "^4.21.0",
     "multer": "^1.4.5-lts.1",
+    "sharp": "^0.34.5",
     "uuid": "^10.0.0"
   }
 }

public/index.html

@@ -0,0 +1,434 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>PicUpper Gallery</title>
+    <style>
+        :root {
+            --bg-color: #1a1a1a;
+            --card-bg: #2d2d2d;
+            --text-color: #e0e0e0;
+            --accent-color: #3b82f6;
+            --error-color: #ef4444;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+            background-color: var(--bg-color);
+            color: var(--text-color);
+            margin: 0;
+            padding: 20px;
+        }
+
+        h1,
+        h2,
+        h3 {
+            color: #fff;
+        }
+
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+
+        /* Layout */
+        .controls {
+            display: flex;
+            gap: 20px;
+            margin-bottom: 20px;
+            background: var(--card-bg);
+            padding: 20px;
+            border-radius: 8px;
+            flex-wrap: wrap;
+        }
+
+        select {
+            background: #404040;
+            color: white;
+            padding: 8px;
+            border: 1px solid #555;
+            border-radius: 4px;
+            font-size: 1rem;
+        }
+
+        /* Grid */
+        .grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+            /* Slightly wider for scrubbing */
+            gap: 15px;
+        }
+
+        .card {
+            background: var(--card-bg);
+            border-radius: 8px;
+            overflow: hidden;
+            transition: transform 0.2s;
+            cursor: pointer;
+            position: relative;
+        }
+
+        .card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+        }
+
+        .card img {
+            width: 100%;
+            height: 180px;
+            /* Taller for better view */
+            object-fit: cover;
+            display: block;
+            pointer-events: none;
+            /* Let clicks pass to card */
+        }
+
+        .card-info {
+            padding: 10px;
+            font-size: 0.9rem;
+            color: #ccc;
+            background: rgba(0, 0, 0, 0.6);
+            position: absolute;
+            bottom: 0;
+            width: 100%;
+        }
+
+        /* Modal */
+        .modal {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.9);
+            justify-content: center;
+            align-items: center;
+            z-index: 100;
+        }
+
+        .modal.active {
+            display: flex;
+        }
+
+        .modal img {
+            max-width: 90%;
+            max-height: 90vh;
+            border-radius: 4px;
+        }
+
+        .modal-close {
+            position: absolute;
+            top: 20px;
+            right: 30px;
+            color: white;
+            font-size: 3rem;
+            cursor: pointer;
+        }
+
+        /* Loading */
+        .loader {
+            display: none;
+            text-align: center;
+            padding: 20px;
+            width: 100%;
+        }
+
+        .empty {
+            text-align: center;
+            color: #888;
+            margin-top: 50px;
+        }
+    </style>
+</head>
+
+<body>
+
+    <div class="container">
+        <h1>📷 PicUpper Gallery</h1>
+
+        <div class="controls">
+            <div>
+                <label>Camera:</label>
+                <select id="cameraSelect">
+                    <!-- Populated via API -->
+                    <option value="">Loading cameras...</option>
+                </select>
+            </div>
+
+            <div>
+                <label>Date:</label>
+                <select id="dateSelect" disabled>
+                    <option value="">Select a camera first</option>
+                </select>
+            </div>
+
+            <div style="margin-left: auto;">
+                <button id="refreshBtn" onclick="loadImages()">Refresh</button>
+            </div>
+        </div>
+
+        <div id="loader" class="loader">Loading images...</div>
+        <div id="grid" class="grid"></div>
+        <div id="empty" class="empty">Select a camera and date to view images</div>
+    </div>
+
+    <!-- Lightbox Modal -->
+    <div id="modal" class="modal" onclick="closeModal()">
+        <span class="modal-close">&times;</span>
+        <img id="modalImg" src="" alt="Full size">
+    </div>
+
+    <script>
+        // State
+        const state = {
+            cameras: [],
+            selectedCamera: localStorage.getItem('lastCamera') || '',
+            selectedDate: localStorage.getItem('lastDate') || ''
+        };
+
+        // DOM Elements
+        const cameraSelect = document.getElementById('cameraSelect');
+        const dateSelect = document.getElementById('dateSelect');
+        const grid = document.getElementById('grid');
+        const loader = document.getElementById('loader');
+        const emptyMsg = document.getElementById('empty');
+        const modal = document.getElementById('modal');
+        const modalImg = document.getElementById('modalImg');
+
+        // Init
+        async function init() {
+            if (!await checkAuth()) return; // Simple check if API key needed (UI is public read locally)
+            await loadCameras();
+        }
+
+        // Authenticated? (For this internal tool, we assume read access is open or basic auth handled by nginx if tailored later)
+        async function checkAuth() {
+            // Since we exposed uploads and api publicly in server.js, try listing cameras via API
+            // NOTE: The API requires authentication. For this web UI to work publicly, 
+            // we either need to loosen auth for GET requests or prompt for API key.
+            // Let's implement an API Key prompt if fetch fails with 401.
+
+            const apiKey = localStorage.getItem('apiKey');
+            if (!apiKey) {
+                const key = prompt("Enter API Key to view gallery:");
+                if (key) {
+                    localStorage.setItem('apiKey', key);
+                    return true;
+                }
+                return false;
+            }
+            return true;
+        }
+
+        function getHeaders() {
+            return { 'X-API-Key': localStorage.getItem('apiKey') || '' };
+        }
+
+        async function loadCameras() {
+            try {
+                const res = await fetch('cameras', { headers: getHeaders() });
+                if (res.status === 401) {
+                    localStorage.removeItem('apiKey');
+                    location.reload();
+                    return;
+                }
+                const data = await res.json();
+                state.cameras = data.cameras;
+
+                cameraSelect.innerHTML = '<option value="">Select Camera</option>';
+                state.cameras.forEach(cam => {
+                    const opt = document.createElement('option');
+                    opt.value = cam;
+                    opt.textContent = cam;
+                    if (cam === state.selectedCamera) opt.selected = true;
+                    cameraSelect.appendChild(opt);
+                });
+
+                cameraSelect.disabled = false;
+
+                if (state.selectedCamera) {
+                    loadDates(state.selectedCamera);
+                }
+            } catch (err) {
+                console.error(err);
+                cameraSelect.innerHTML = '<option>Error loading cameras</option>';
+            }
+        }
+
+        async function loadDates(cameraId) {
+            try {
+                dateSelect.innerHTML = '<option>Loading...</option>';
+                dateSelect.disabled = true;
+
+                const res = await fetch(`cameras/${cameraId}/dates`, { headers: getHeaders() });
+
+                const data = await res.json();
+
+                dateSelect.innerHTML = '<option value="">Select Date</option>';
+                data.dates.forEach(date => {
+                    const opt = document.createElement('option');
+                    opt.value = date;
+                    opt.textContent = date;
+                    if (date === state.selectedDate) opt.selected = true;
+                    dateSelect.appendChild(opt);
+                });
+
+                dateSelect.disabled = false;
+
+                if (state.selectedDate && data.dates.includes(state.selectedDate)) {
+                    loadImages();
+                } else if (data.dates.length > 0) {
+                    // Auto select newest
+                    dateSelect.value = data.dates[0];
+                    state.selectedDate = data.dates[0];
+                    loadImages();
+                }
+            } catch (err) {
+                console.error(err);
+                dateSelect.innerHTML = '<option>Error loading dates</option>';
+            }
+        }
+
+        async function loadImages() {
+            const cameraId = cameraSelect.value;
+            const dateStr = dateSelect.value; // YYYY-MM-DD
+
+            if (!cameraId || !dateStr) return;
+
+            // Update state/localstorage
+            state.selectedCamera = cameraId;
+            state.selectedDate = dateStr;
+            localStorage.setItem('lastCamera', cameraId);
+            localStorage.setItem('lastDate', dateStr);
+
+            loader.style.display = 'block';
+            grid.innerHTML = '';
+            emptyMsg.style.display = 'none';
+
+            const [year, month, day] = dateStr.split('-');
+
+            try {
+                const res = await fetch(`cameras/${cameraId}/${year}/${month}/${day}`);
+                const data = await res.json();
+
+                loader.style.display = 'none';
+
+                if (data.images.length === 0) {
+                    emptyMsg.style.display = 'block';
+                    return;
+                }
+
+                // Group by hour
+                const hours = {};
+                data.images.forEach(img => {
+                    let h = '00';
+                    try {
+                        const match = img.timestamp.match(/(\d{2})[-:](\d{2})[-:](\d{2})/);
+                        if (match) {
+                            h = match[1];
+                        } else {
+                            const d = new Date(img.timestamp);
+                            if (!isNaN(d.getTime())) h = String(d.getHours()).padStart(2, '0');
+                        }
+                    } catch (e) { }
+
+                    if (!hours[h]) hours[h] = [];
+                    hours[h].push(img);
+                });
+
+                // Render Hour Cards
+                Object.keys(hours).sort().forEach(hour => {
+                    const group = hours[hour];
+                    // Sort images in this hour
+                    group.sort((a, b) => a.filename.localeCompare(b.filename));
+
+                    const card = document.createElement('div');
+                    card.className = 'card';
+                    card.dataset.idx = 0; // Current viewed index
+
+                    const thumb = document.createElement('img');
+                    thumb.src = group[0].thumbnailUrl;
+
+                    const info = document.createElement('div');
+                    info.className = 'card-info';
+                    info.textContent = `${hour}:00 (${group.length} pics)`;
+
+                    // Hover scrubbing logic
+                    card.onmousemove = (e) => {
+                        if (group.length <= 1) return;
+
+                        const rect = card.getBoundingClientRect();
+                        const x = e.clientX - rect.left;
+                        const width = rect.width;
+                        const percent = Math.max(0, Math.min(1, x / width));
+                        const index = Math.floor(percent * group.length);
+                        const safeIndex = Math.min(group.length - 1, Math.max(0, index));
+
+                        if (card.dataset.idx != safeIndex) {
+                            thumb.src = group[safeIndex].thumbnailUrl;
+                            card.dataset.idx = safeIndex;
+                            info.textContent = `${hour}:00 - ` + getPrettyTime(group[safeIndex].timestamp);
+                        }
+                    };
+
+                    card.onmouseleave = () => {
+                        // Optional: could reset here
+                    };
+
+                    card.onclick = () => {
+                        const idx = parseInt(card.dataset.idx || '0');
+                        openModal(group[idx].url);
+                    };
+
+                    card.appendChild(thumb);
+                    card.appendChild(info);
+                    grid.appendChild(card);
+                });
+
+            } catch (err) {
+                loader.style.display = 'none';
+                console.error(err);
+                grid.innerHTML = '<div style="color:red">Error loading images</div>';
+            }
+        }
+
+        function getPrettyTime(ts) {
+            const parts = ts.match(/(\d{2})[-:](\d{2})[-:](\d{2})/);
+            if (parts) return `${parts[1]}:${parts[2]}:${parts[3]}`;
+            return ts;
+        }
+
+        // Modal
+        function openModal(src) {
+            modalImg.src = src;
+            modal.classList.add('active');
+        }
+
+        function closeModal() {
+            modal.classList.remove('active');
+            setTimeout(() => modalImg.src = '', 200);
+        }
+
+        // Listeners
+        cameraSelect.addEventListener('change', (e) => {
+            state.selectedCamera = e.target.value;
+            if (state.selectedCamera) loadDates(state.selectedCamera);
+            else dateSelect.disabled = true;
+        });
+
+        dateSelect.addEventListener('change', (e) => {
+            state.selectedDate = e.target.value;
+            if (state.selectedDate) loadImages();
+        });
+
+        // Start
+        init();
+
+    </script>
+
+</body>
+
+</html>

server.js

@@ -3,6 +3,7 @@ import multer from 'multer';
 import path from 'path';
 import fs from 'fs';
 import { fileURLToPath } from 'url';
+import sharp from 'sharp';
 import { validateApiKey, loadUsers } from './users.js';
 
 const __filename = fileURLToPath(import.meta.url);
@@ -106,21 +107,46 @@ app.get('/health', (req, res) => {
 });
 
 // Upload endpoint
-app.post('/upload', authenticate, upload.single('image'), (req, res) => {
+app.post('/upload', authenticate, upload.single('image'), async (req, res) => {
     if (!req.file) {
         return res.status(400).json({ error: 'No image file provided. Use form field "image".' });
     }
 
     const cameraId = req.body.cameraId || req.query.cameraId || 'default';
 
+    // Generate thumbnail
+    try {
+        const thumbnailFilename = req.file.filename.replace(path.extname(req.file.filename), '_thumb.avif');
+        const thumbnailPath = path.join(path.dirname(req.file.path), thumbnailFilename);
+
+        await sharp(req.file.path)
+            .resize(320) // Resize to 320px width, auto height
+            .toFormat('avif')
+            .toFile(thumbnailPath);
+
         res.json({
             success: true,
             cameraId,
             filename: req.file.filename,
             path: req.file.path,
+            thumbnail: thumbnailFilename,
+            thumbnailPath: thumbnailPath,
             size: req.file.size,
             timestamp: new Date().toISOString()
         });
+    } catch (error) {
+        console.error('Thumbnail generation failed:', error);
+        // Still return success for the upload even if thumbnail fails
+        res.json({
+            success: true,
+            cameraId,
+            filename: req.file.filename,
+            path: req.file.path,
+            thumbnailError: error.message,
+            size: req.file.size,
+            timestamp: new Date().toISOString()
+        });
+    }
 });
 
 // List cameras (directories in upload folder)
@@ -267,6 +293,97 @@ app.put('/settings/:cameraId', authenticate, express.json(), (req, res) => {
     }
 });
 
+
+
+// === Web Interface Endpoints ===
+
+// Serve static files (frontend)
+app.use(express.static(path.join(__dirname, 'public')));
+
+// Serve uploads (images)
+app.use('/uploads', express.static(UPLOAD_DIR));
+
+// Get available dates for a camera
+app.get('/cameras/:cameraId/dates', async (req, res) => {
+    const { cameraId } = req.params;
+    const cameraPath = path.join(UPLOAD_DIR, cameraId);
+
+    if (!fs.existsSync(cameraPath)) {
+        return res.json({ dates: [] });
+    }
+
+    try {
+        const dates = [];
+        const years = fs.readdirSync(cameraPath).filter(name => /^\d{4}$/.test(name));
+
+        for (const year of years) {
+            const yearPath = path.join(cameraPath, year);
+            const months = fs.readdirSync(yearPath).filter(name => /^\d{2}$/.test(name));
+
+            for (const month of months) {
+                const monthPath = path.join(yearPath, month);
+                const days = fs.readdirSync(monthPath).filter(name => /^\d{2}$/.test(name));
+
+                for (const day of days) {
+                    dates.push(`${year}-${month}-${day}`);
+                }
+            }
+        }
+
+        // Sort newest first
+        dates.sort((a, b) => b.localeCompare(a));
+        res.json({ dates });
+    } catch (error) {
+        res.status(500).json({ error: 'Failed to list dates', details: error.message });
+    }
+});
+
+// Get images for a specific date
+app.get('/cameras/:cameraId/:year/:month/:day', async (req, res) => {
+    const { cameraId, year, month, day } = req.params;
+    const datePath = path.join(UPLOAD_DIR, cameraId, year, month, day);
+
+    if (!fs.existsSync(datePath)) {
+        return res.status(404).json({ error: 'Date not found' });
+    }
+
+    try {
+        const files = fs.readdirSync(datePath);
+        const images = [];
+
+        // Group files by timestamp (original and thumbnail)
+        // Expected format: {cameraId}_{timestamp}.jpg and {cameraId}_{timestamp}_thumb.avif
+
+        for (const file of files) {
+            // Skip existing thumbnails from the list loop to avoid duplicates
+            // We'll attach them to the main image entry
+            if (file.includes('_thumb.avif')) continue;
+
+            // Only process image files
+            if (!/\.(jpg|jpeg|png|webp|gif)$/i.test(file)) continue;
+
+            const thumbName = file.replace(path.extname(file), '_thumb.avif');
+            const hasThumb = files.includes(thumbName);
+
+            images.push({
+                filename: file,
+                url: `uploads/${cameraId}/${year}/${month}/${day}/${file}`,
+                thumbnailUrl: hasThumb
+                    ? `uploads/${cameraId}/${year}/${month}/${day}/${thumbName}`
+                    : `uploads/${cameraId}/${year}/${month}/${day}/${file}`, // Fallback to original
+                timestamp: file.split('_')[1]?.replace(path.extname(file), '') || ''
+            });
+        }
+
+        // Sort by filename (timestamp) descending
+        images.sort((a, b) => b.filename.localeCompare(a.filename));
+
+        res.json({ images });
+    } catch (error) {
+        res.status(500).json({ error: 'Failed to list images', details: error.message });
+    }
+});
+
 // Error handling middleware
 app.use((error, req, res, next) => {
     if (error instanceof multer.MulterError) {