Remove thumb from database field (#16647)

* Remove thumbnail from dict

* Create thumbnail diectory

* Cleanup handling of tracked object images

* Make thumbnail optional

* Handle cases where thumbnail is used

* Expand options for thumbnail api

* Fix up the does not exist condition

* Remove absolute usages of thumbnails

* Write thumbnails for external events

* Reduce webp quality

* Use webp everywhere in frontend

* Formatting

* Always consider all events when re-indexing

* Add thumbnail deletion and cleanup path management

* Cleanup imports

* Rename def

* Don't save thumbnail for every object

* Correct event count

* Use correct function

* Include thumbnail in query

* Remove unused

* Fix requiring exception

web/src/components/card/SearchThumbnail.tsx

@@ -80,7 +80,7 @@ export default function SearchThumbnail({
               : undefined
           }
           draggable={false}
-          src={`${apiHost}api/events/${searchResult.id}/thumbnail.jpg`}
+          src={`${apiHost}api/events/${searchResult.id}/thumbnail.webp`}
           loading={isSafari ? "eager" : "lazy"}
           onLoad={() => {
             onImgLoad();

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

@@ -385,7 +385,7 @@ function EventItem({
           src={
             event.has_snapshot
               ? `${apiHost}api/events/${event.id}/snapshot.jpg`
-              : `${apiHost}api/events/${event.id}/thumbnail.jpg`
+              : `${apiHost}api/events/${event.id}/thumbnail.webp`
           }
         />
         {hovered && (
@@ -400,7 +400,7 @@ function EventItem({
                     href={
                       event.has_snapshot
                         ? `${apiHost}api/events/${event.id}/snapshot.jpg`
-                        : `${apiHost}api/events/${event.id}/thumbnail.jpg`
+                        : `${apiHost}api/events/${event.id}/thumbnail.webp`
                     }
                   >
                     <Chip className="cursor-pointer rounded-md bg-gray-500 bg-gradient-to-br from-gray-400 to-gray-500">

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

@@ -511,7 +511,7 @@ function ObjectDetailsTab({
                 : undefined
             }
             draggable={false}
-            src={`${apiHost}api/events/${search.id}/thumbnail.jpg`}
+            src={`${apiHost}api/events/${search.id}/thumbnail.webp`}
           />
           {config?.semantic_search.enabled && search.data.type == "object" && (
             <Button

web/src/views/explore/ExploreView.tsx

@@ -262,7 +262,7 @@ function ExploreThumbnailImage({
           }
           loading={isSafari ? "eager" : "lazy"}
           draggable={false}
-          src={`${apiHost}api/events/${event.id}/thumbnail.jpg`}
+          src={`${apiHost}api/events/${event.id}/thumbnail.webp`}
           onClick={() => setSearchDetail(event)}
           onLoad={onImgLoad}
           alt={`${event.label} thumbnail`}