Add sub label to explore chip

web/src/components/card/SearchThumbnail.tsx

@@ -69,6 +69,30 @@ export default function SearchThumbnail({
     return `${searchResult.label}-verified`;
   }, [config, hasRecognizedPlate, searchResult]);
 
+  const objectDetail = useMemo(() => {
+    if (!config) {
+      return undefined;
+    }
+
+    if (!searchResult.sub_label) {
+      if (hasRecognizedPlate) {
+        return `(${searchResult.data.recognized_license_plate} ${Math.round((searchResult.data.recognized_license_plate_score ?? 1) * 100)}%)`;
+      }
+
+      return undefined;
+    }
+
+    if (
+      config.model.attributes_map[searchResult.label]?.includes(
+        searchResult.sub_label,
+      )
+    ) {
+      return "";
+    }
+
+    return `(${searchResult.sub_label} ${Math.round((searchResult.data.sub_label_score ?? 1) * 100)}%)`;
+  }, [config, hasRecognizedPlate, searchResult]);
+
   return (
     <div
       className="relative size-full cursor-pointer"
@@ -107,7 +131,7 @@ export default function SearchThumbnail({
               <TooltipTrigger asChild>
                 <div className="mx-3 pb-1 text-sm text-white">
                   <Chip
-                    className={`z-0 flex items-center justify-between gap-1 space-x-1 bg-gray-500 bg-gradient-to-br from-gray-400 to-gray-500 text-xs`}
+                    className={`z-0 flex items-center justify-between gap-1 space-x-1 bg-gray-500 bg-gradient-to-br from-gray-400 to-gray-500 text-xs capitalize`}
                     onClick={() => onClick(searchResult, false, true)}
                   >
                     {getIconForLabel(objectLabel, "size-3 text-white")}
@@ -116,7 +140,7 @@ export default function SearchThumbnail({
                         searchResult.data.top_score ??
                         searchResult.top_score) * 100,
                     )}
-                    %
+                    % {objectDetail}
                   </Chip>
                 </div>
               </TooltipTrigger>