administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-11-05 13:20:31 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Tweak styling and fix mixing tabs

Browse Source
This commit is contained in:
Nicolas Mowen
2026-06-26 06:21:35 -06:00
parent 258b68fd18
commit 64c7e50c21
3 changed files with 158 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/docs/configuration/object_detectors.md
+114 -6
View File
@@ -4,6 +4,9 @@ title: Object Detectors
---
import CommunityBadge from '@site/src/components/CommunityBadge';
import ConfigTabs from '@site/src/components/ConfigTabs';
import TabItem from '@theme/TabItem';
import NavPath from '@site/src/components/NavPath';
import ModelConfigDropdown from '@site/src/components/ModelConfigDropdown';
import objectDetectorsModels from '@site/data/object_detectors_models.json';
@@ -106,29 +109,134 @@ See [common Edge TPU troubleshooting steps](/troubleshooting/edgetpu) if the Edg
### Single USB Coral
Navigate to **Settings > System > Detectors and model** and select **EdgeTPU** from the detector type dropdown and click **Add**, then set device to `usb`.
<ConfigTabs>
<TabItem value="ui">
Navigate to <NavPath path="Settings > System > Detectors and model" /> and select **EdgeTPU** from the detector type dropdown and click **Add**, then set device to `usb`.
</TabItem>
<TabItem value="yaml">
```yaml
detectors:
coral:
type: edgetpu
device: usb
```
</TabItem>
</ConfigTabs>
### Multiple USB Corals
Navigate to **Settings > System > Detectors and model** and select **EdgeTPU** from the detector type dropdown and click **Add** to add multiple detectors, specifying `usb:0` and `usb:1` as the device for each.
<ConfigTabs>
<TabItem value="ui">
Navigate to <NavPath path="Settings > System > Detectors and model" /> and select **EdgeTPU** from the detector type dropdown and click **Add** to add multiple detectors, specifying `usb:0` and `usb:1` as the device for each.
</TabItem>
<TabItem value="yaml">
```yaml
detectors:
coral1:
type: edgetpu
device: usb:0
coral2:
type: edgetpu
device: usb:1
```
</TabItem>
</ConfigTabs>
### Native Coral (Dev Board)
_warning: may have [compatibility issues](https://github.com/blakeblackshear/frigate/issues/1706) after `v0.9.x`_
Navigate to **Settings > System > Detectors and model** and select **EdgeTPU** from the detector type dropdown and click **Add**, then leave the device field empty.
<ConfigTabs>
<TabItem value="ui">
Navigate to <NavPath path="Settings > System > Detectors and model" /> and select **EdgeTPU** from the detector type dropdown and click **Add**, then leave the device field empty.
</TabItem>
<TabItem value="yaml">
```yaml
detectors:
coral:
type: edgetpu
device: ""
```
</TabItem>
</ConfigTabs>
### Single PCIE/M.2 Coral
Navigate to **Settings > System > Detectors and model** and select **EdgeTPU** from the detector type dropdown and click **Add**, then set device to `pci`.
<ConfigTabs>
<TabItem value="ui">
Navigate to <NavPath path="Settings > System > Detectors and model" /> and select **EdgeTPU** from the detector type dropdown and click **Add**, then set device to `pci`.
</TabItem>
<TabItem value="yaml">
```yaml
detectors:
coral:
type: edgetpu
device: pci
```
</TabItem>
</ConfigTabs>
### Multiple PCIE/M.2 Corals
Navigate to **Settings > System > Detectors and model** and select **EdgeTPU** from the detector type dropdown and click **Add** to add multiple detectors, specifying `pci:0` and `pci:1` as the device for each.
<ConfigTabs>
<TabItem value="ui">
Navigate to <NavPath path="Settings > System > Detectors and model" /> and select **EdgeTPU** from the detector type dropdown and click **Add** to add multiple detectors, specifying `pci:0` and `pci:1` as the device for each.
</TabItem>
<TabItem value="yaml">
```yaml
detectors:
coral1:
type: edgetpu
device: pci:0
coral2:
type: edgetpu
device: pci:1
```
</TabItem>
</ConfigTabs>
### Mixing Corals
Navigate to **Settings > System > Detectors and model** and select **EdgeTPU** from the detector type dropdown and click **Add** to add multiple detectors with different device types (e.g., `usb` and `pci`).
<ConfigTabs>
<TabItem value="ui">
Navigate to <NavPath path="Settings > System > Detectors and model" /> and select **EdgeTPU** from the detector type dropdown and click **Add** to add multiple detectors with different device types (e.g., `usb` and `pci`).
</TabItem>
<TabItem value="yaml">
```yaml
detectors:
coral_usb:
type: edgetpu
device: usb
coral_pci:
type: edgetpu
device: pci
```
</TabItem>
</ConfigTabs>
### Configuration
docs/src/components/ModelConfigDropdown/index.jsx
+43 -40
View File
@@ -26,6 +26,10 @@ function Markdown({ children }) {
);
}
function RecommendedBadge() {
return <span className={styles.recommendedBadge}>Recommended</span>;
}
/**
* @param {{ models: Model[] }} props
*/
@@ -43,52 +47,51 @@ export default function ModelConfigDropdown({ models }) {
return (
<div className={styles.wrapper}>
<div
className={`${styles.dropdown} ${isOpen ? styles.open : ""} ${
hasChoices ? "" : styles.static
}`}
onClick={hasChoices ? () => setIsOpen(!isOpen) : undefined}
>
<div className={styles.dropdownContent}>
<span className={styles.modelName}>
{selectedModel.recommended && (
<span className={styles.recommendedBadge}>Recommended</span>
)}
{selectedModel.label}
</span>
{hasChoices && (
<span className={styles.arrow}>{isOpen ? "▲" : "▼"}</span>
)}
</div>
</div>
{isOpen && hasChoices && (
<div className={styles.menu}>
{models.map((model, index) => (
<div
key={model.key}
className={`${styles.menuItem} ${
index === selectedModelIndex ? styles.menuItemActive : ""
}`}
onClick={() => handleModelSelect(index)}
>
{model.recommended && (
<span className={styles.recommendedBadge}>Recommended</span>
)}
{model.label}
</div>
))}
</div>
)}
<div className={styles.panel}>
<div className={styles.step}>
<h4 className={styles.stepTitle}>Step 1 — Download the model</h4>
<h4 className={styles.stepTitle}>Step 1 — Choose a model</h4>
<div
className={`${styles.dropdown} ${isOpen ? styles.open : ""} ${
hasChoices ? "" : styles.static
}`}
onClick={hasChoices ? () => setIsOpen(!isOpen) : undefined}
>
<div className={styles.dropdownContent}>
<span className={styles.modelName}>
{selectedModel.label}
{selectedModel.recommended && <RecommendedBadge />}
</span>
{hasChoices && (
<span className={styles.arrow}>{isOpen ? "▲" : "▼"}</span>
)}
</div>
</div>
{isOpen && hasChoices && (
<div className={styles.menu}>
{models.map((model, index) => (
<div
key={model.key}
className={`${styles.menuItem} ${
index === selectedModelIndex ? styles.menuItemActive : ""
}`}
onClick={() => handleModelSelect(index)}
>
{model.label}
{model.recommended && <RecommendedBadge />}
</div>
))}
</div>
)}
</div>
<div className={styles.step}>
<h4 className={styles.stepTitle}>Step 2 — Download the model</h4>
<Markdown>{selectedModel.download}</Markdown>
</div>
<div className={styles.step}>
<h4 className={styles.stepTitle}>Step 2 — Configure the detector</h4>
<h4 className={styles.stepTitle}>Step 3 — Configure the detector</h4>
<ConfigTabs>
<TabItem value="ui">
<Markdown>{selectedModel.ui}</Markdown>
docs/src/components/ModelConfigDropdown/styles.module.css
+1 -1
View File
@@ -193,7 +193,7 @@
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--ifm-color-primary);
color: var(--ifm-font-color-base);
}
/* Rendered markdown (download + Frigate UI instructions). */