Display warning when search embeddings models are being downloaded (#13840)

This commit is contained in:
Josh Hawkins 2024-09-19 16:14:20 -05:00 committed by GitHub
parent d498fabe72
commit 6c43e5dba9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -3,6 +3,7 @@ import { useSearchEffect } from "@/hooks/use-overlay-state";
import { SearchFilter, SearchQuery, SearchResult } from "@/types/search"; import { SearchFilter, SearchQuery, SearchResult } from "@/types/search";
import SearchView from "@/views/search/SearchView"; import SearchView from "@/views/search/SearchView";
import { useCallback, useEffect, useMemo, useState } from "react"; import { useCallback, useEffect, useMemo, useState } from "react";
import { TbExclamationCircle } from "react-icons/tb";
import useSWRInfinite from "swr/infinite"; import useSWRInfinite from "swr/infinite";
const API_LIMIT = 25; const API_LIMIT = 25;
@ -116,10 +117,14 @@ export default function Explore() {
// paging // paging
// usually slow only on first run while downloading models
const [isSlowLoading, setIsSlowLoading] = useState(false);
const getKey = ( const getKey = (
pageIndex: number, pageIndex: number,
previousPageData: SearchResult[] | null, previousPageData: SearchResult[] | null,
): SearchQuery => { ): SearchQuery => {
if (isSlowLoading && !similaritySearch) return null;
if (previousPageData && !previousPageData.length) return null; // reached the end if (previousPageData && !previousPageData.length) return null; // reached the end
if (!searchQuery) return null; if (!searchQuery) return null;
@ -143,6 +148,12 @@ export default function Explore() {
{ {
revalidateFirstPage: true, revalidateFirstPage: true,
revalidateAll: false, revalidateAll: false,
onLoadingSlow: () => {
if (!similaritySearch) {
setIsSlowLoading(true);
}
},
loadingTimeout: 10000,
}, },
); );
@ -174,18 +185,33 @@ export default function Explore() {
}, [isReachingEnd, isLoadingMore, setSize, size, searchResults, searchQuery]); }, [isReachingEnd, isLoadingMore, setSize, size, searchResults, searchQuery]);
return ( return (
<SearchView <>
search={search} {isSlowLoading && !similaritySearch ? (
searchTerm={searchTerm} <div className="absolute inset-0 left-1/2 top-1/2 flex h-96 w-96 -translate-x-1/2 -translate-y-1/2">
searchFilter={searchFilter} <div className="flex flex-col items-center justify-center rounded-lg bg-background/50 p-5">
searchResults={searchResults} <p className="my-5 text-lg">Search Unavailable</p>
isLoading={(isLoadingInitialData || isLoadingMore) ?? true} <TbExclamationCircle className="mb-3 size-10" />
setSearch={setSearch} <p className="max-w-96 text-center">
setSimilaritySearch={(search) => setSearch(`similarity:${search.id}`)} If this is your first time using Search, be patient while Frigate
setSearchFilter={setSearchFilter} downloads the necessary embeddings models. Check Frigate logs.
onUpdateFilter={setSearchFilter} </p>
loadMore={loadMore} </div>
hasMore={!isReachingEnd} </div>
/> ) : (
<SearchView
search={search}
searchTerm={searchTerm}
searchFilter={searchFilter}
searchResults={searchResults}
isLoading={(isLoadingInitialData || isLoadingMore) ?? true}
setSearch={setSearch}
setSimilaritySearch={(search) => setSearch(`similarity:${search.id}`)}
setSearchFilter={setSearchFilter}
onUpdateFilter={setSearchFilter}
loadMore={loadMore}
hasMore={!isReachingEnd}
/>
)}
</>
); );
} }