add faqitem component

docs/docs/configuration/face_recognition.md

@@ -6,6 +6,7 @@ title: Face Recognition
 import ConfigTabs from "@site/src/components/ConfigTabs";
 import TabItem from "@theme/TabItem";
 import NavPath from "@site/src/components/NavPath";
+import FaqItem from "@site/src/components/FaqItem";
 
 Face recognition identifies known individuals by matching detected faces with previously learned facial data. When a known `person` is recognized, their name will be added as a `sub_label`. This information is included in the UI, filters, as well as in notifications.
 
@@ -227,7 +228,7 @@ Once front-facing images are performing well, start choosing slightly off-angle
 
 ### Getting Recognition Working
 
-#### How do I debug Face Recognition issues?
+<FaqItem id="how-do-i-debug-face-recognition-issues" question="How do I debug Face Recognition issues?">
 
 Start with the [Usage](#usage) section and re-read the [Model Requirements](#model-requirements) above.
 
@@ -245,7 +246,9 @@ Start with the [Usage](#usage) section and re-read the [Model Requirements](#mod
    - Make sure you have trained at least one face per the recommendations above.
    - Adjust `recognition_threshold` settings per the suggestions [above](#advanced-configuration).
 
-#### Does face recognition run on the recording stream?
+</FaqItem>
+
+<FaqItem id="does-face-recognition-run-on-the-recording-stream" question="Does face recognition run on the recording stream?">
 
 Face recognition does not run on the recording stream, this would be suboptimal for many reasons:
 
@@ -253,27 +256,37 @@ Face recognition does not run on the recording stream, this would be suboptimal
 2. The embedding models used run on a set image size, so larger images will be scaled down to match this anyway.
 3. Motion clarity is much more important than extra pixels, over-compression and motion blur are much more detrimental to results than resolution.
 
+</FaqItem>
+
 ### Improving Accuracy and Training
 
-#### Detection does not work well with blurry images?
+<FaqItem id="detection-does-not-work-well-with-blurry-images" question="Detection does not work well with blurry images?">
 
 Accuracy is definitely a going to be improved with higher quality cameras / streams. It is important to look at the DORI (Detection Observation Recognition Identification) range of your camera, if that specification is posted. This specification explains the distance from the camera that a person can be detected, observed, recognized, and identified. The identification range is the most relevant here, and the distance listed by the camera is the furthest that face recognition will realistically work.
 
 Some users have also noted that setting the stream in camera firmware to a constant bit rate (CBR) leads to better image clarity than with a variable bit rate (VBR).
 
-#### Can I train faces for people who only appear at night?
+</FaqItem>
+
+<FaqItem id="can-i-train-faces-for-people-who-only-appear-at-night" question="Can I train faces for people who only appear at night?">
 
 The embedding models are trained on color images, so gray-scale and infrared (IR) faces sit in a different feature distribution and are more easily confused with other people. Prefer color images, and avoid mixing gray-scale samples in early while you are building a foundation. If someone only ever appears at night, gray-scale training is acceptable, but keep those samples limited and as clear as possible, and add them only once color recognition is stable for your other people.
 
-#### Why can't I bulk upload photos?
+</FaqItem>
+
+<FaqItem id="why-cant-i-bulk-upload-photos" question="Why can't I bulk upload photos?">
 
 It is important to methodically add photos to the library, bulk importing photos (especially from a general photo library) will lead to over-fitting in that particular scenario and hurt recognition performance.
 
-#### Why can't I bulk reprocess faces?
+</FaqItem>
+
+<FaqItem id="why-cant-i-bulk-reprocess-faces" question="Why can't I bulk reprocess faces?">
 
 Face embedding models work by breaking apart faces into different features. This means that when reprocessing an image, only images from a similar angle will have its score affected.
 
-#### Why do unknown people score similarly to known people?
+</FaqItem>
+
+<FaqItem id="why-do-unknown-people-score-similarly-to-known-people" question="Why do unknown people score similarly to known people?">
 
 This can happen for a few different reasons, but this is usually an indicator that the training set needs to be improved. This is often related to over-fitting:
 
@@ -285,7 +298,9 @@ Review your face collections and remove most of the unclear or low-quality image
 
 Avoid training on images that already score highly, as this can lead to over-fitting. Instead, focus on relatively clear images that score lower (ideally with different lighting, angles, and conditions) to help the model generalize more effectively.
 
-#### Should I correct a face that was recognized as the wrong person?
+</FaqItem>
+
+<FaqItem id="should-i-correct-a-face-that-was-recognized-as-the-wrong-person" question="Should I correct a face that was recognized as the wrong person?">
 
 Only if it is a good image. Reassigning a face does add it to that person's training set, but two things are true at once:
 
@@ -296,27 +311,39 @@ So the decision is about image quality, not about the wrong label. If the crop i
 
 If a person is repeatedly misidentified, do not keep reassigning the same frame. Instead, remove low-quality or misleading images and add a few high-quality samples to the correct person. See [Why do unknown people score similarly to known people?](#why-do-unknown-people-score-similarly-to-known-people) above.
 
-#### Frigate misidentified a face. Can I tell it that a face is "not" a specific person?
+</FaqItem>
+
+<FaqItem id="frigate-misidentified-a-face-can-i-tell-it-that-a-face-is-not-a-specific-person" question={'Frigate misidentified a face. Can I tell it that a face is "not" a specific person?'}>
 
 No, face recognition does not support negative training (i.e., explicitly telling it who someone is _not_). Instead, the best approach is to improve the training data by using a more diverse and representative set of images for each person.
 For more guidance, refer to the section above on improving recognition accuracy.
 
 This also applies to a stranger who is repeatedly matched to a known person (for example, a delivery driver recognized as you). Do not create a profile for them and do not reassign their faces to yourself, as this pollutes your training set and makes recognition worse. Leave the detection as unknown and improve the known person's training set instead. Face recognition learns who someone is, not who they are not.
 
-#### I see scores above the threshold in the Recent Recognitions tab, but a sub label wasn't assigned?
+</FaqItem>
+
+<FaqItem id="i-see-scores-above-the-threshold-in-the-recent-recognitions-tab-but-a-sub-label-wasnt-assigned" question="I see scores above the threshold in the Recent Recognitions tab, but a sub label wasn't assigned?">
 
 The Frigate considers the recognition scores across all recognition attempts for each person object. The scores are continually weighted based on the area of the face, and a sub label will only be assigned to person if a person is confidently recognized consistently. This avoids cases where a single high confidence recognition would throw off the results.
 
+</FaqItem>
+
 ### Compatibility and Maintenance
 
-#### Can I use other face recognition software like DoubleTake at the same time as the built in face recognition?
+<FaqItem id="can-i-use-other-face-recognition-software-like-doubletake-at-the-same-time-as-the-built-in-face-recognition" question="Can I use other face recognition software like DoubleTake at the same time as the built in face recognition?">
 
 No, using another face recognition service will interfere with Frigate's built in face recognition. When using double-take the sub_label feature must be disabled if the built in face recognition is also desired.
 
-#### I get an unknown error when taking a photo directly with my iPhone
+</FaqItem>
+
+<FaqItem id="i-get-an-unknown-error-when-taking-a-photo-directly-with-my-iphone" question="I get an unknown error when taking a photo directly with my iPhone">
 
 By default iOS devices will use HEIC (High Efficiency Image Container) for images, but this format is not supported for uploads. Choosing `large` as the format instead of `original` will use JPG which will work correctly.
 
-#### How can I delete the face database and start over?
+</FaqItem>
+
+<FaqItem id="how-can-i-delete-the-face-database-and-start-over" question="How can I delete the face database and start over?">
 
 Frigate does not store anything in its database related to face recognition. You can simply delete all of your faces through the Frigate UI or remove the contents of the `/media/frigate/clips/faces` directory.
+
+</FaqItem>

docs/docs/configuration/license_plate_recognition.md

@@ -6,6 +6,7 @@ title: License Plate Recognition (LPR)
 import ConfigTabs from "@site/src/components/ConfigTabs";
 import TabItem from "@theme/TabItem";
 import NavPath from "@site/src/components/NavPath";
+import FaqItem from "@site/src/components/FaqItem";
 
 Frigate can recognize license plates on vehicles and automatically add the detected characters to the `recognized_license_plate` field or a [known](#matching) name as a `sub_label` to tracked objects of type `car` or `motorcycle`. A common use case may be to read the license plates of cars pulling into a driveway or cars passing by on a street.
 
@@ -591,7 +592,9 @@ By selecting the appropriate configuration, users can optimize their dedicated L
 
 ## FAQ
 
-### Why isn't my license plate being detected and recognized?
+### Detection and Recognition
+
+<FaqItem id="why-isnt-my-license-plate-being-detected-and-recognized" question="Why isn't my license plate being detected and recognized?">
 
 Ensure that:
 
@@ -606,29 +609,43 @@ Recognized plates will show as object labels in the debug view and will appear i
 
 If you are still having issues detecting plates, start with a basic configuration and see the debugging tips below.
 
-### Can I run LPR without detecting `car` or `motorcycle` objects?
+</FaqItem>
+
+<FaqItem id="can-i-run-lpr-without-detecting-car-or-motorcycle-objects" question={<>Can I run LPR without detecting <code>car</code> or <code>motorcycle</code> objects?</>}>
 
 In normal LPR mode, Frigate requires a `car` or `motorcycle` to be detected first before recognizing a license plate. If you have a dedicated LPR camera, you can change the camera `type` to `"lpr"` to use the Dedicated LPR Camera algorithm. This comes with important caveats, though. See the [Dedicated LPR Cameras](#dedicated-lpr-cameras) section above.
 
-### How can I improve detection accuracy?
+</FaqItem>
+
+<FaqItem id="how-can-i-improve-detection-accuracy" question="How can I improve detection accuracy?">
 
 - Use high-quality cameras with good resolution.
 - Adjust `detection_threshold` and `recognition_threshold` values.
 - Define a `format` regex to filter out invalid detections.
 
-### Does LPR work at night?
+</FaqItem>
+
+<FaqItem id="does-lpr-work-at-night" question="Does LPR work at night?">
 
 Yes, but performance depends on camera quality, lighting, and infrared capabilities. Make sure your camera can capture clear images of plates at night.
 
-### Can I limit LPR to specific zones?
+</FaqItem>
+
+<FaqItem id="can-i-limit-lpr-to-specific-zones" question="Can I limit LPR to specific zones?">
 
 LPR, like other Frigate enrichments, runs at the camera level rather than the zone level. While you can't restrict LPR to specific zones directly, you can control when recognition runs by setting a `min_area` value to filter out smaller detections.
 
-### How can I match known plates with minor variations?
+</FaqItem>
+
+<FaqItem id="how-can-i-match-known-plates-with-minor-variations" question="How can I match known plates with minor variations?">
 
 Use `match_distance` to allow small character mismatches. Alternatively, define multiple variations in `known_plates`.
 
-### How do I debug LPR issues?
+</FaqItem>
+
+### Performance and Troubleshooting
+
+<FaqItem id="how-do-i-debug-lpr-issues" question="How do I debug LPR issues?">
 
 Start with ["Why isn't my license plate being detected and recognized?"](#why-isnt-my-license-plate-being-detected-and-recognized). If you are still having issues, work through these steps.
 
@@ -685,17 +702,23 @@ lpr:
    - Watch the debug view to see plates recognized in real-time. For non-dedicated LPR cameras, the `car` or `motorcycle` label will change to the recognized plate when LPR is enabled and working.
    - Adjust `recognition_threshold` settings per the suggestions [above](#advanced-configuration).
 
-### Will LPR slow down my system?
+</FaqItem>
+
+<FaqItem id="will-lpr-slow-down-my-system" question="Will LPR slow down my system?">
 
 LPR's performance impact depends on your hardware. Ensure you have at least 4GB RAM and a capable CPU or GPU for optimal results. If you are running the Dedicated LPR Camera mode, resource usage will be higher compared to users who run a model that natively detects license plates. Tune your motion detection settings for your dedicated LPR camera so that the license plate detection model runs only when necessary.
 
-### I am seeing a YOLOv9 plate detection metric in Enrichment Metrics, but I have a Frigate+ or custom model that detects `license_plate`. Why is the YOLOv9 model running?
+</FaqItem>
+
+<FaqItem id="i-am-seeing-a-yolov9-plate-detection-metric-in-enrichment-metrics-but-i-have-a-frigate-or-custom-model-that-detects-license_plate-why-is-the-yolov9-model-running" question={<>I am seeing a YOLOv9 plate detection metric in Enrichment Metrics, but I have a Frigate+ or custom model that detects <code>license_plate</code>. Why is the YOLOv9 model running?</>}>
 
 The YOLOv9 license plate detector model will run (and the metric will appear) if you've enabled LPR but haven't defined `license_plate` as an object to track, either at the global or camera level.
 
 If you are detecting `car` or `motorcycle` on cameras where you don't want to run LPR, make sure you disable LPR it at the camera level. And if you do want to run LPR on those cameras, make sure you define `license_plate` as an object to track.
 
-### It looks like Frigate picked up my camera's timestamp or overlay text as the license plate. How can I prevent this?
+</FaqItem>
+
+<FaqItem id="it-looks-like-frigate-picked-up-my-cameras-timestamp-or-overlay-text-as-the-license-plate-how-can-i-prevent-this" question="It looks like Frigate picked up my camera's timestamp or overlay text as the license plate. How can I prevent this?">
 
 This could happen if cars or motorcycles travel close to your camera's timestamp or overlay text. You could either move the text through your camera's firmware, or apply a mask to it in Frigate.
 
@@ -703,6 +726,10 @@ If you are using a model that natively detects `license_plate`, add an _object m
 
 If you are not using a model that natively detects `license_plate` or you are using dedicated LPR camera mode, only a _motion mask_ over your text is required.
 
-### I see "Error running ... model" in my logs, or my inference time is very high. How can I fix this?
+</FaqItem>
+
+<FaqItem id="i-see-error-running--model-in-my-logs-or-my-inference-time-is-very-high-how-can-i-fix-this" question={'I see "Error running ... model" in my logs, or my inference time is very high. How can I fix this?'}>
 
 This usually happens when your GPU is unable to compile or use one of the LPR models. Set your `device` to `CPU` and try again. GPU acceleration only provides a slight performance increase, and the models are lightweight enough to run without issue on most CPUs.
+
+</FaqItem>

docs/src/components/FaqItem/index.jsx

@@ -0,0 +1,66 @@
+import React, { useState, useEffect } from "react";
+import Heading from "@theme/Heading";
+import styles from "./styles.module.css";
+
+// A single FAQ entry.
+//
+// The question is a real anchored heading (via @theme/Heading), so on desktop
+// it gets the standard hover "#" hash link and the answer is always shown. On
+// mobile the heading text is a button that toggles its answer, keeping long
+// FAQ pages short. The desktop/mobile split is pure CSS (Docusaurus breakpoint:
+// 996px), so there is no hydration flash. The answer is always rendered into
+// the DOM, so search engines and the docs AI bot can read it regardless of
+// layout or collapsed state. The heading id resolves deep links on both layouts
+// and auto-expands the entry on mobile when it is the link target.
+export default function FaqItem({ id, question, children }) {
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    const openIfTargeted = () => {
+      if (window.location.hash === `#${id}`) {
+        setOpen(true);
+      }
+    };
+    openIfTargeted();
+    window.addEventListener("hashchange", openIfTargeted);
+    return () => window.removeEventListener("hashchange", openIfTargeted);
+  }, [id]);
+
+  const toggle = () => {
+    const next = !open;
+    setOpen(next);
+    // Reflect the entry in the URL like clicking the heading anchor, so an
+    // opened answer is shareable. Use replaceState to avoid history spam and
+    // an abrupt scroll. Clear it on close if it currently points here.
+    if (next) {
+      if (window.location.hash !== `#${id}`) {
+        window.history.replaceState(null, "", `#${id}`);
+      }
+    } else if (window.location.hash === `#${id}`) {
+      window.history.replaceState(
+        null,
+        "",
+        window.location.pathname + window.location.search,
+      );
+    }
+  };
+
+  return (
+    <div className={styles.item} data-open={open || undefined}>
+      <Heading as="h4" id={id} className={styles.heading}>
+        <button
+          type="button"
+          className={styles.toggle}
+          aria-expanded={open}
+          aria-controls={`${id}-content`}
+          onClick={toggle}
+        >
+          {question}
+        </button>
+      </Heading>
+      <div id={`${id}-content`} className={styles.content}>
+        {children}
+      </div>
+    </div>
+  );
+}

docs/src/components/FaqItem/styles.module.css

@@ -0,0 +1,87 @@
+/*
+ * FAQ entry: collapsible on mobile, static heading + expanded answer on
+ * desktop. The split is pure CSS (Docusaurus breakpoint: 996px) so there is
+ * no hydration flash. The answer is always rendered into the DOM, so search
+ * engines and the docs AI bot can read it regardless of layout or state.
+ */
+
+.item {
+  scroll-margin-top: calc(var(--ifm-navbar-height) + 1rem);
+}
+
+.heading {
+  margin: 0;
+}
+
+/* Mobile: the heading text is a full-width clickable toggle row. */
+.toggle {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  width: 100%;
+  padding: 0.85rem 0;
+  border: none;
+  border-bottom: 1px solid var(--ifm-color-emphasis-200);
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.toggle::before {
+  content: "";
+  flex: 0 0 auto;
+  width: 0.5rem;
+  height: 0.5rem;
+  border-right: 2px solid currentColor;
+  border-bottom: 2px solid currentColor;
+  transform: rotate(-45deg);
+  transition: transform var(--ifm-transition-fast, 200ms) ease;
+}
+
+.item[data-open] .toggle::before {
+  transform: rotate(45deg);
+}
+
+.content {
+  display: none;
+  padding: 0 0 0.85rem;
+}
+
+.item[data-open] .content {
+  display: block;
+}
+
+/* Hide the hover hash link on mobile (no hover; avoids a stray empty line). */
+.heading :global(.hash-link) {
+  display: none;
+}
+
+/* Desktop: render as a normal expanded heading + answer. */
+@media (min-width: 997px) {
+  .heading {
+    margin: 1.75rem 0 0.5rem;
+  }
+
+  .toggle {
+    display: inline;
+    width: auto;
+    padding: 0;
+    border: none;
+    cursor: default;
+  }
+
+  .toggle::before {
+    display: none;
+  }
+
+  .content {
+    display: block;
+    padding: 0;
+  }
+
+  .heading :global(.hash-link) {
+    display: inline;
+  }
+}