Miscellaneous fixes (0.17 Beta) (#21489)

* Correctly set query padding

* Adjust AMD headers and add community badge

* Simplify getting started guide for camera wizard

* add optimizing performance guide

* tweaks

* fix character issue

* fix more characters

* fix links

* fix more links

* Refactor new docs

* Add import

* Fix link

* Don't list hardware

* Reduce redundancy in titles

* Add note about Intel NPU and addon

* Fix ability to specify if card is using heading

* improve display of area percentage

* fix text color on genai summary chip

* fix indentation in genai docs

* Adjust default config model to align with recommended

* add correct genai key

---------

Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>

web/src/components/card/EmptyCard.tsx

@@ -8,6 +8,7 @@ type EmptyCardProps = {
   className?: string;
   icon: React.ReactNode;
   title: string;
+  titleHeading?: boolean;
   description?: string;
   buttonText?: string;
   link?: string;
@@ -16,14 +17,23 @@ export function EmptyCard({
   className,
   icon,
   title,
+  titleHeading = true,
   description,
   buttonText,
   link,
 }: EmptyCardProps) {
+  let TitleComponent;
+
+  if (titleHeading) {
+    TitleComponent = <Heading as="h4">{title}</Heading>;
+  } else {
+    TitleComponent = <div>{title}</div>;
+  }
+
   return (
     <div className={cn("flex flex-col items-center gap-2", className)}>
       {icon}
-      <Heading as="h4">{title}</Heading>
+      {TitleComponent}
       {description && (
         <div className="mb-3 text-secondary-foreground">{description}</div>
       )}

web/src/components/overlay/chip/GenAISummaryChip.tsx

@@ -26,7 +26,9 @@ export function GenAISummaryChip({ review }: GenAISummaryChipProps) {
       className={cn(
         "absolute left-1/2 top-8 z-30 flex max-w-[90vw] -translate-x-[50%] cursor-pointer select-none items-center gap-2 rounded-full p-2 text-sm transition-all duration-500",
         isVisible ? "translate-y-0 opacity-100" : "-translate-y-4 opacity-0",
-        isDesktop ? "bg-card" : "bg-secondary-foreground",
+        isDesktop
+          ? "bg-card text-primary"
+          : "bg-secondary-foreground text-white",
       )}
     >
       <MdAutoAwesome className="shrink-0" />

web/src/components/overlay/detail/TrackingDetails.tsx

@@ -849,7 +849,11 @@ function LifecycleIconRow({
     () =>
       Array.isArray(item.data.attribute_box) &&
       item.data.attribute_box.length >= 4
-        ? (item.data.attribute_box[2] * item.data.attribute_box[3]).toFixed(4)
+        ? (
+            item.data.attribute_box[2] *
+            item.data.attribute_box[3] *
+            100
+          ).toFixed(2)
         : undefined,
     [item.data.attribute_box],
   );
@@ -857,7 +861,7 @@ function LifecycleIconRow({
   const areaPct = useMemo(
     () =>
       Array.isArray(item.data.box) && item.data.box.length >= 4
-        ? (item.data.box[2] * item.data.box[3]).toFixed(4)
+        ? (item.data.box[2] * item.data.box[3] * 100).toFixed(2)
         : undefined,
     [item.data.box],
   );

web/src/components/timeline/DetailStream.tsx

@@ -744,7 +744,7 @@ function LifecycleItem({
   const areaPct = useMemo(
     () =>
       Array.isArray(item?.data.box) && item?.data.box.length >= 4
-        ? (item?.data.box[2] * item?.data.box[3]).toFixed(4)
+        ? (item?.data.box[2] * item?.data.box[3] * 100).toFixed(2)
         : undefined,
     [item],
   );
@@ -766,7 +766,11 @@ function LifecycleItem({
     () =>
       Array.isArray(item?.data.attribute_box) &&
       item?.data.attribute_box.length >= 4
-        ? (item?.data.attribute_box[2] * item?.data.attribute_box[3]).toFixed(4)
+        ? (
+            item?.data.attribute_box[2] *
+            item?.data.attribute_box[3] *
+            100
+          ).toFixed(2)
         : undefined,
     [item],
   );
@@ -845,7 +849,7 @@ function LifecycleItem({
                   </span>
                   {areaPx !== undefined && areaPct !== undefined ? (
                     <span className="font-medium text-foreground">
-                      {areaPx} {t("information.pixels", { ns: "common" })}{" "}
+                      {t("information.pixels", { ns: "common", area: areaPx })}{" "}
                       <span className="text-secondary-foreground">·</span>{" "}
                       {areaPct}%
                     </span>

web/src/views/events/EventView.tsx

@@ -762,8 +762,9 @@ function DetectionReview({
 
         {!loading && currentItems?.length === 0 && (
           <EmptyCard
-            className="y-translate-1/2 absolute left-[50%] top-[50%] -translate-x-1/2"
+            className="absolute left-[50%] top-[50%] -translate-x-1/2 -translate-y-1/2 items-center text-center"
             title={emptyCardData.title}
+            titleHeading={false}
             description={emptyCardData.description}
             icon={<LuFolderCheck className="size-16" />}
           />