docs/docs/frigate/installation.md

@@ -5,8 +5,7 @@ title: Installation
 
 import ShmCalculator from '@site/src/components/ShmCalculator'
 import DockerComposeGenerator from '@site/src/components/DockerComposeGenerator'
-import Tabs from '@theme/Tabs';
+
-import TabItem from '@theme/TabItem';
 
 Frigate is a Docker container that can be run on any Docker host including as a [Home Assistant App](https://www.home-assistant.io/apps/). Note that the Home Assistant App is **not** the same thing as the integration. The [integration](/integrations/home-assistant) is required to integrate Frigate into Home Assistant, whether you are running Frigate as a standalone Docker container or as a Home Assistant App.
 
@@ -74,6 +73,13 @@ Users of the Snapcraft build of Docker cannot use storage locations outside your
 
 :::
 
+### Docker Compose Generator
+
+Generate a Frigate Docker Compose configuration based on your hardware and requirements.
+
+<DockerComposeGenerator/>
+
+
 ### Calculating required shm-size
 
 Frigate utilizes shared memory to store frames during processing. The default `shm-size` provided by Docker is **64MB**.
@@ -471,16 +477,6 @@ Finally, configure [hardware object detection](/configuration/object_detectors#a
 
 Running through Docker with Docker Compose is the recommended install method.
 
-<Tabs>
-  <TabItem value="domestic" label="Docker Compose Generator" default>
-
-Generate a Frigate Docker Compose configuration based on your hardware and requirements.
-
-<DockerComposeGenerator/>
-
-
-  </TabItem>
-  <TabItem value="original" label="Example Docker Compose File">
 ```yaml
 services:
   frigate:
@@ -514,10 +510,6 @@ services:
     environment:
       FRIGATE_RTSP_PASSWORD: "password"
 ```
-  </TabItem>
-</Tabs>
-
-**Docker CLI**
 
 If you can't use Docker Compose, you can run the container with something similar to this:
 

docs/src/components/DockerComposeGenerator/DockerComposeGenerator.tsx

@@ -32,12 +32,12 @@ function renderHelpText(text: string): React.ReactNode {
 export default function DockerComposeGenerator() {
   const {
     deviceId, device, hardwareEnabled,
-    portEnabled,
+    portEnabled, port5000Confirmed,
     nvidiaGpuCount, nvidiaGpuDeviceId,
     configPath, mediaPath, rtspPassword, timezone, shmSize,
     shmSizeError, gpuDeviceIdError, configPathError, mediaPathError,
     hasAnyHardware, generatedYaml,
-    selectDevice, toggleHardware, togglePort,
+    selectDevice, toggleHardware, togglePort, setPort5000Confirmed,
     handleShmSizeChange, handleConfigPathChange, handleMediaPathChange,
     handleNvidiaGpuCountChange, handleNvidiaGpuDeviceIdChange,
     setRtspPassword, setTimezone, isHardwareDisabled,
@@ -82,7 +82,9 @@ export default function DockerComposeGenerator() {
 
         <PortConfigSection
           portEnabled={portEnabled}
+          port5000Confirmed={port5000Confirmed}
           onTogglePort={togglePort}
+          onConfirm5000={setPort5000Confirmed}
         />
 
         <OtherOptions

docs/src/components/DockerComposeGenerator/components/NvidiaGpuConfig.tsx

@@ -16,8 +16,6 @@ export default function NvidiaGpuConfig({
   onGpuCountChange,
   onGpuDeviceIdChange,
 }: Props) {
-  const showDeviceId = gpuCount !== "";
-
   return (
     <div className={styles.nvidiaConfig}>
       <div className={styles.formGroup}>
@@ -27,15 +25,16 @@ export default function NvidiaGpuConfig({
         <input
           id="dcg-gpu-count"
           type="text"
-          inputMode="numeric"
-          pattern="[0-9]*"
           className={styles.input}
           value={gpuCount}
-          placeholder="all"
+          placeholder="1 or all"
-          onChange={(e) => onGpuCountChange(e.target.value.replace(/\D/g, ""))}
+          onChange={(e) => onGpuCountChange(e.target.value)}
         />
+        <p className={styles.helpText}>
+          Enter a number (e.g. 1, 2, 3) or &quot;all&quot; to use all GPUs
+        </p>
       </div>
-      {showDeviceId && (
+      {gpuCount !== "all" && (
         <div className={styles.formGroup}>
           <label htmlFor="dcg-gpu-device-id" className={styles.label}>
             GPU device IDs (required, comma-separated):

docs/src/components/DockerComposeGenerator/components/PortConfig.tsx

@@ -1,34 +1,103 @@
 import React from "react";
 import Admonition from "@theme/Admonition";
 import { ports } from "../config";
+import { useCooldown } from "../hooks/useCooldown";
 import styles from "../styles.module.css";
 
 interface Props {
   portEnabled: Record<string, boolean>;
+  port5000Confirmed: boolean;
   onTogglePort: (portId: string) => void;
+  onConfirm5000: (confirmed: boolean) => void;
 }
 
-function PortItem({
+function Port5000Confirmation({
-  port,
+  portEnabled,
-  enabled,
+  confirmed,
   onToggle,
+  onConfirm,
 }: {
-  port: typeof ports[number];
+  portEnabled: boolean;
-  enabled: boolean;
+  confirmed: boolean;
   onToggle: () => void;
+  onConfirm: (confirmed: boolean) => void;
 }) {
-  const showWarning = port.warningContent && (
+  const { remaining, start, stop } = useCooldown(10);
-    port.warningWhen === "checked" ? enabled :
+
-    port.warningWhen === "unchecked" ? !enabled : enabled
+  React.useEffect(() => {
-  );
+    if (portEnabled) {
+      start();
+    } else {
+      stop();
+      onConfirm(false);
+    }
+    return stop;
+  }, [portEnabled]);
 
   return (
-    <div className={styles.hardwareItem}>
+    <div className={styles.portSection}>
+      {portEnabled && (
+        <Admonition type="danger">
+          <p>
+            Exposing port 5000 allows <strong>unauthenticated access</strong> to
+            your Frigate instance. Anyone on your network (or the internet if you
+            have a public IP) could access it without credentials.
+          </p>
+          <p>
+            This may lead to <strong>unauthorized access</strong>,{" "}
+            <strong>privacy leaks</strong>, or further attacks. Ensure you have
+            proper firewall rules or VPN in place.
+          </p>
+          <label
+            className={`${styles.checkboxLabel} ${remaining > 0 ? styles.checkboxDisabled : ""}`}
+          >
+            <input
+              type="checkbox"
+              checked={confirmed}
+              onChange={(e) => onConfirm(e.target.checked)}
+              disabled={remaining > 0}
+            />
+            <span>
+              I understand the risk and confirm enabling port 5000
+              {remaining > 0 && ` (${remaining}s)`}
+            </span>
+          </label>
+        </Admonition>
+      )}
+      <label className={styles.checkboxLabel}>
+        <input
+          type="checkbox"
+          checked={portEnabled}
+          onChange={onToggle}
+        />
+        <span>Port 5000 (unauthenticated access)</span>
+        <span className={styles.warningBadge}>⚠️ Expose carefully</span>
+      </label>
+    </div>
+  );
+}
+
+export default function PortConfigSection({
+  portEnabled,
+  port5000Confirmed,
+  onTogglePort,
+  onConfirm5000,
+}: Props) {
+  return (
+    <div className={styles.formSection}>
+      <h4>Port Configuration</h4>
+
+      {/* All ports except 5000 */}
+      <div className={styles.checkboxGrid}>
+        {ports
+          .filter((p) => p.id !== "5000")
+          .map((port) => (
+            <div key={port.id} className={styles.hardwareItem}>
               <label className={`${styles.checkboxLabel} ${port.locked ? styles.checkboxDisabled : ""}`}>
                 <input
                   type="checkbox"
-          checked={enabled}
+                  checked={!!portEnabled[port.id]}
-          onChange={onToggle}
+                  onChange={() => onTogglePort(port.id)}
                   disabled={port.locked}
                 />
                 <span>
@@ -40,32 +109,17 @@ function PortItem({
               {port.description && (
                 <div className={styles.hardwareDescription}>{port.description}</div>
               )}
-      {showWarning && (
-        <Admonition type={port.warningType || "warning"}>
-          {port.warningContent}
-        </Admonition>
-      )}
             </div>
-  );
-}
-
-export default function PortConfigSection({
-  portEnabled,
-  onTogglePort,
-}: Props) {
-  return (
-    <div className={styles.formSection}>
-      <h4>Port Configuration</h4>
-      <div className={styles.checkboxGrid}>
-        {ports.map((port) => (
-          <PortItem
-            key={port.id}
-            port={port}
-            enabled={!!portEnabled[port.id]}
-            onToggle={() => onTogglePort(port.id)}
-          />
           ))}
       </div>
+
+      {/* Port 5000 with special warning — placed last */}
+      <Port5000Confirmation
+        portEnabled={!!portEnabled["5000"]}
+        confirmed={port5000Confirmed}
+        onToggle={() => onTogglePort("5000")}
+        onConfirm={onConfirm5000}
+      />
     </div>
   );
 }

docs/src/components/DockerComposeGenerator/config/config.yaml

@@ -265,8 +265,7 @@ ports:
     protocol: "tcp"
     description: "Authenticated UI and API access (default HTTPS)"
     defaultEnabled: true
-    warningContent: "This is the access port for Frigate. Closing it means you will no longer be able to access the instance."
+    locked: true
-    warningWhen: "unchecked"
 
   - id: "8554"
     host: 8554

docs/src/components/DockerComposeGenerator/config/types.ts

@@ -145,10 +145,14 @@ export interface PortConfig {
   defaultEnabled: boolean;
   /** Whether this port is locked (always enabled, cannot be toggled off) */
   locked?: boolean;
+  /** Whether this port requires a confirmation step before enabling */
+  requiresConfirmation?: boolean;
   /** Admonition type for the warning */
   warningType?: "warning" | "danger";
   /** Warning content (markdown) */
   warningContent?: string;
-  /** When to show the warning: when the port is checked or unchecked */
+  /** Confirmation checkbox label */
-  warningWhen?: "checked" | "unchecked";
+  confirmationLabel?: string;
+  /** Cooldown in seconds before the confirmation checkbox becomes available */
+  cooldownSeconds?: number;
 }

docs/src/components/DockerComposeGenerator/generator/index.ts

@@ -123,7 +123,7 @@ function buildEnvironment(
 function buildDeploy(device: DeviceConfig, input: GeneratorInput): string[] {
   if (device.id === "stable-tensorrt") {
     const count = input.nvidiaGpuCount || "all";
-    const isAll = count === "all";
+    const isAll = count.toLowerCase() === "all";
     const deviceId = input.nvidiaGpuDeviceId?.trim();
 
     if (isAll) {

docs/src/components/DockerComposeGenerator/hooks/useConfigGenerator.ts

@@ -29,7 +29,8 @@ export function useConfigGenerator() {
     return initial;
   });
 
-  const [nvidiaGpuCount, setNvidiaGpuCount] = useState("");
+  const [port5000Confirmed, setPort5000Confirmed] = useState(false);
+  const [nvidiaGpuCount, setNvidiaGpuCount] = useState("all");
   const [nvidiaGpuDeviceId, setNvidiaGpuDeviceId] = useState("");
   const [configPath, setConfigPath] = useState("");
   const [mediaPath, setMediaPath] = useState("");
@@ -56,7 +57,7 @@ export function useConfigGenerator() {
       }
       return next;
     });
-    setNvidiaGpuCount("");
+    setNvidiaGpuCount("all");
     setNvidiaGpuDeviceId("");
     setGpuDeviceIdError(false);
   }, []);
@@ -68,7 +69,13 @@ export function useConfigGenerator() {
   const togglePort = useCallback((portId: string) => {
     const port = portMap.get(portId);
     if (port?.locked) return;
-    setPortEnabled((prev) => ({ ...prev, [portId]: !prev[portId] }));
+    setPortEnabled((prev) => {
+      const next = { ...prev, [portId]: !prev[portId] };
+      if (portId === "5000" && !next[portId]) {
+        setPort5000Confirmed(false);
+      }
+      return next;
+    });
   }, []);
 
   const isHardwareDisabled = useCallback(
@@ -121,14 +128,16 @@ export function useConfigGenerator() {
   );
 
   const handleNvidiaGpuCountChange = useCallback((value: string) => {
-    // Only allow digits
+    const lower = value.trim().toLowerCase();
-    setNvidiaGpuCount(value);
+    if (lower === "all" || lower === "" || /^[0-9]+$/.test(lower)) {
-    if (value === "") {
+      setNvidiaGpuCount(lower || "all");
+      if (lower === "all") {
         setNvidiaGpuDeviceId("");
         setGpuDeviceIdError(false);
-    } else {
+      } else if (/^[0-9]+$/.test(lower)) {
         setGpuDeviceIdError(false);
       }
+    }
   }, []);
 
   const handleNvidiaGpuDeviceIdChange = useCallback((value: string) => {
@@ -140,6 +149,7 @@ export function useConfigGenerator() {
     const lines: string[] = [];
     for (const [id, enabled] of Object.entries(portEnabled)) {
       if (!enabled) continue;
+      if (id === "5000" && !port5000Confirmed) continue;
       const p = portMap.get(id);
       if (!p) continue;
       const proto = p.protocol && p.protocol !== "tcp" ? `/${p.protocol}` : "";
@@ -147,7 +157,7 @@ export function useConfigGenerator() {
       lines.push(`      - "${p.host}:${p.container}${proto}"${comment}`);
     }
     return lines;
-  }, [portEnabled]);
+  }, [portEnabled, port5000Confirmed]);
 
   const selectedHardwareIds = useMemo(() => {
     return Object.entries(hardwareEnabled)
@@ -185,11 +195,11 @@ export function useConfigGenerator() {
 
   return {
     deviceId, device, hardwareEnabled, portEnabled,
-    nvidiaGpuCount, nvidiaGpuDeviceId,
+    port5000Confirmed, nvidiaGpuCount, nvidiaGpuDeviceId,
     configPath, mediaPath, rtspPassword, timezone, shmSize,
     shmSizeError, gpuDeviceIdError, configPathError, mediaPathError,
     hasAnyHardware, generatedYaml,
-    selectDevice, toggleHardware, togglePort,
+    selectDevice, toggleHardware, togglePort, setPort5000Confirmed,
     handleShmSizeChange, handleConfigPathChange, handleMediaPathChange,
     handleNvidiaGpuCountChange, handleNvidiaGpuDeviceIdChange,
     setRtspPassword, setTimezone, isHardwareDisabled,

docs/src/components/DockerComposeGenerator/hooks/useCooldown.ts

@@ -0,0 +1,42 @@
+import { useState, useEffect, useCallback, useRef } from "react";
+
+/**
+ * Hook for a countdown timer (e.g. cooldown before confirming port 5000).
+ */
+export function useCooldown(initialSeconds: number) {
+  const [remaining, setRemaining] = useState(0);
+  const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  const start = useCallback(() => {
+    // Clear any existing timer
+    if (timerRef.current) clearInterval(timerRef.current);
+    setRemaining(initialSeconds);
+    timerRef.current = setInterval(() => {
+      setRemaining((prev) => {
+        if (prev <= 1) {
+          if (timerRef.current) clearInterval(timerRef.current);
+          timerRef.current = null;
+          return 0;
+        }
+        return prev - 1;
+      });
+    }, 1000);
+  }, [initialSeconds]);
+
+  const stop = useCallback(() => {
+    if (timerRef.current) {
+      clearInterval(timerRef.current);
+      timerRef.current = null;
+    }
+    setRemaining(0);
+  }, []);
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      if (timerRef.current) clearInterval(timerRef.current);
+    };
+  }, []);
+
+  return { remaining, start, stop };
+}