diff --git a/packages/fakeyou.com/package.json b/packages/fakeyou.com/package.json index cefe2e3eaa..9345c24955 100644 --- a/packages/fakeyou.com/package.json +++ b/packages/fakeyou.com/package.json @@ -31,6 +31,7 @@ "@types/infinite-scroll": "^4.0.3", "@types/jest": "^24.9.1", "@types/js-cookie": "^3.0.1", + "@types/lodash.debounce": "^4.0.9", "@types/masonry-layout": "^4.2.7", "@types/node": "^12.12.47", "@types/react": "^16.9.36", @@ -50,6 +51,7 @@ "imagesloaded": "^5.0.0", "infinite-scroll": "^4.0.1", "js-cookie": "^3.0.1", + "lodash.debounce": "^4.0.8", "masonry-layout": "^4.2.2", "posthog-js": "^1.73.1", "pretty-num": "^0.5.2", diff --git a/packages/fakeyou.com/src/components/common/SearchBar/SearchBar.tsx b/packages/fakeyou.com/src/components/common/SearchBar/SearchBar.tsx index acf349e5aa..747c86c5ec 100644 --- a/packages/fakeyou.com/src/components/common/SearchBar/SearchBar.tsx +++ b/packages/fakeyou.com/src/components/common/SearchBar/SearchBar.tsx @@ -8,6 +8,7 @@ import SearchField from "./SearchField"; import "./SearchBar.scss"; import { useHistory, useLocation } from "react-router-dom"; import { useSearch } from "context/SearchContext"; +import debounce from "lodash.debounce"; interface SearchBarProps { autoFocus?: boolean; @@ -27,7 +28,7 @@ export default function SearchBar({ const { searchTerm, setSearchTerm } = useSearch(); const [foundWeights, setFoundWeights] = useState([]); - const [isLoading, setIsLoading] = useState(false); + const [isLoading, setIsLoading] = useState(true); const isOnSearchPage = location.pathname.startsWith("/search"); const maybeSearch = useCallback( @@ -59,6 +60,14 @@ export default function SearchBar({ [setFoundWeights] ); + // eslint-disable-next-line react-hooks/exhaustive-deps + const debouncedDoSearch = useCallback( + debounce(searchTerm => { + doSearch(searchTerm); + }, 250), + [doSearch] + ); + useEffect(() => { if (isOnSearchPage) { const query = new URLSearchParams(location.search).get("query"); @@ -72,9 +81,21 @@ export default function SearchBar({ if (isOnSearchPage) { history.push(`/search/weights?query=${encodeURIComponent(searchTerm)}`); } else { - doSearch(searchTerm); + debouncedDoSearch(searchTerm); } - }, [searchTerm, history, location.pathname, doSearch, isOnSearchPage]); + }, [ + searchTerm, + history, + location.pathname, + isOnSearchPage, + debouncedDoSearch, + ]); + + useEffect(() => { + return () => { + debouncedDoSearch.cancel(); + }; + }, [debouncedDoSearch]); const handleSearchButtonClick = useCallback(() => { if (searchTerm !== "") { diff --git a/packages/fakeyou.com/src/components/common/SearchBar/SearchResultsDropdown.tsx b/packages/fakeyou.com/src/components/common/SearchBar/SearchResultsDropdown.tsx index 61b43f41c3..2fd8d16c16 100644 --- a/packages/fakeyou.com/src/components/common/SearchBar/SearchResultsDropdown.tsx +++ b/packages/fakeyou.com/src/components/common/SearchBar/SearchResultsDropdown.tsx @@ -73,13 +73,7 @@ export default function SearchResultsDropdown({ )} - {data.length === 0 && !isLoading && isNoResults && ( -
-
- No results found -
-
- )} + {isLoading && isNoResults && (
@@ -94,6 +88,14 @@ export default function SearchResultsDropdown({
)} + + {data.length === 0 && !isLoading && isNoResults && ( +
+
+ No results found +
+
+ )} ); } diff --git a/packages/fakeyou.com/src/v2/view/pages/weight/inference_panels/SdInferencePanel.tsx b/packages/fakeyou.com/src/v2/view/pages/weight/inference_panels/SdInferencePanel.tsx index 803dc6054d..acb3f8e541 100644 --- a/packages/fakeyou.com/src/v2/view/pages/weight/inference_panels/SdInferencePanel.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/weight/inference_panels/SdInferencePanel.tsx @@ -23,15 +23,14 @@ export default function SdInferencePanel(props: SdInferencePanelProps) { const [sampler, samplerSet] = useState("DPM++ 2M Karras"); const [aspectRatio, aspectRatioSet] = useState("square"); const [cfgScale, cfgScaleSet] = useState(7); + const [samples, samplesSet] = useState(8); const [loRAPath, loRAPathSet] = useState(1); // const [checkPoint, checkPointSet] = useState(1); - const [batchSize, batchSizeSet] = useState(1); const [batchCount, batchCountSet] = useState(1); const [prompt, setPrompt] = useState(""); const [negativePrompt, setNegativePrompt] = useState(""); const onChange = onChanger({ batchCountSet, - batchSizeSet, cfgScaleSet, // checkPointSet, loRAPathSet, @@ -40,6 +39,7 @@ export default function SdInferencePanel(props: SdInferencePanelProps) { aspectRatioSet, setPrompt, setNegativePrompt, + samplesSet, }); const samplerOpts = [ @@ -96,16 +96,15 @@ export default function SdInferencePanel(props: SdInferencePanelProps) { { label: "Another thing", value: 3 }, ]; - const batchSizeOpts = [ + const batchCountOpts = [ { label: "1", value: 1 }, { label: "2", value: 2 }, { label: "3", value: 3 }, { label: "4", value: 4 }, - ]; - - const batchCountOpts = [ - { label: "1", value: 1 }, - { label: "2", value: 2 }, + { label: "5", value: 5 }, + { label: "6", value: 6 }, + { label: "7", value: 7 }, + { label: "8", value: 8 }, ]; const handlePromptChange = ( @@ -189,6 +188,18 @@ export default function SdInferencePanel(props: SdInferencePanelProps) { value: cfgScale, }} /> + + */} + - ([]); + const gridContainerRef = useRef(null); + const useQuery = () => { return new URLSearchParams(useLocation().search); }; @@ -44,50 +46,60 @@ export default function SearchPage() { [setFoundWeights] ); + // eslint-disable-next-line react-hooks/exhaustive-deps + const debouncedDoSearch = useCallback( + debounce(searchTerm => { + doSearch(searchTerm); + }, 250), + [doSearch] + ); + const query = useQuery(); const urlSearchTerm = query.get("query") || ""; useEffect(() => { if (urlSearchTerm) { - doSearch(urlSearchTerm); + debouncedDoSearch(urlSearchTerm); } - }, [urlSearchTerm, doSearch]); + }, [urlSearchTerm, debouncedDoSearch]); - let selectedTags: any = []; - let handleSelectTag = () => {}; + // let selectedTags: any = []; + // let handleSelectTag = () => {}; - const tags = ( -
- -
- ); + // const tags = ( + //
+ // + //
+ // ); - const sortOptions = [ - { value: "most liked", label: "Most Liked" }, - { value: "most used", label: "Most Used" }, - { value: "moset recent", label: "Most Recent" }, - ]; - const sortTimeOptions = [ - { value: "all time", label: "All Time" }, - { value: "today", label: "Today" }, - { value: "this week", label: "This Week" }, - { value: "this month", label: "This Month" }, - ]; + // const sortOptions = [ + // { value: "most liked", label: "Most Liked" }, + // { value: "most used", label: "Most Used" }, + // { value: "moset recent", label: "Most Recent" }, + // ]; + // const sortTimeOptions = [ + // { value: "all time", label: "All Time" }, + // { value: "today", label: "Today" }, + // { value: "this week", label: "This Week" }, + // { value: "this month", label: "This Month" }, + // ]; + + console.log("FOUNDWEIGHTS", foundWeights); return ( -
+ {/*