Merge branch 'feature/mvp' of https://github.com/storytold/storyteller-frontend into feature/mvp

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",

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<Weight[]>([]);
-  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [isLoading, setIsLoading] = useState<boolean>(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 !== "") {

packages/fakeyou.com/src/components/common/SearchBar/SearchResultsDropdown.tsx

@@ -73,13 +73,7 @@ export default function SearchResultsDropdown({
           </div>
         </div>
       )}
-      {data.length === 0 && !isLoading && isNoResults && (
-        <div className="search-results-dropdown">
-          <div className="search-results-dropdown-item p-3 no-results">
-            No results found
-          </div>
-        </div>
-      )}
+
       {isLoading && isNoResults && (
         <div className="search-results-dropdown">
           <div className="search-results-dropdown-item p-3 loading-results">
@@ -94,6 +88,14 @@ export default function SearchResultsDropdown({
           </div>
         </div>
       )}
+
+      {data.length === 0 && !isLoading && isNoResults && (
+        <div className="search-results-dropdown">
+          <div className="search-results-dropdown-item p-3 no-results">
+            No results found
+          </div>
+        </div>
+      )}
     </>
   );
 }

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,
               }}
             />
+
+            <NumberSlider
+              {...{
+                min: 8,
+                max: 64,
+                name: "samples",
+                label: "Samples",
+                onChange,
+                thumbTip: "Samples",
+                value: samples,
+              }}
+            />
             <TempSelect
               {...{
                 label: "loRA path",
@@ -208,18 +219,10 @@ export default function SdInferencePanel(props: SdInferencePanelProps) {
                 value: checkPoint,
               }}
             /> */}
+
             <SegmentButtons
               {...{
-                label: "Batch size",
-                name: "batchSize",
-                onChange,
-                options: batchSizeOpts,
-                value: batchSize,
-              }}
-            />
-            <SegmentButtons
-              {...{
-                label: "Batch count",
+                label: "Number of Generations",
                 name: "batchCount",
                 onChange,
                 options: batchCountOpts,

packages/fakeyou.com/src/v2/view/search/SearchPage.tsx

@@ -1,27 +1,29 @@
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import Container from "components/common/Container";
 import PageHeader from "components/layout/PageHeader";
-import { faClock } from "@fortawesome/pro-solid-svg-icons";
 import Panel from "components/common/Panel";
-import ModelSearchResults from "components/common/ModelSearchResults";
-import ModelTags from "components/common/ModelTags";
-import Select from "components/common/Select";
+// import ModelTags from "components/common/ModelTags";
 import { SearchWeights } from "@storyteller/components/src/api/weights/SearchWeights";
 import { Weight } from "@storyteller/components/src/api/weights/GetWeight";
 import { useLocation } from "react-router-dom";
+import debounce from "lodash.debounce";
+import MasonryGrid from "components/common/MasonryGrid/MasonryGrid";
+import WeightsCards from "components/common/Card/WeightsCards";
 
-const allTags = [
-  "English",
-  "Spanish",
-  "Portuguese",
-  "High-pitched",
-  "Low-pitched",
-  "Character",
-];
+// const allTags = [
+//   "English",
+//   "Spanish",
+//   "Portuguese",
+//   "High-pitched",
+//   "Low-pitched",
+//   "Character",
+// ];
 
 export default function SearchPage() {
   const [foundWeights, setFoundWeights] = useState<Weight[]>([]);
 
+  const gridContainerRef = useRef<HTMLDivElement | null>(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 = (
-    <div className="d-flex flex-column gap-3">
-      <ModelTags
-        tags={allTags}
-        selectedTags={selectedTags}
-        onSelectTag={handleSelectTag}
-      />
-    </div>
-  );
+  // const tags = (
+  //   <div className="d-flex flex-column gap-3">
+  //     <ModelTags
+  //       tags={allTags}
+  //       selectedTags={selectedTags}
+  //       onSelectTag={handleSelectTag}
+  //     />
+  //   </div>
+  // );
 
-  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 (
     <Container type="panel" className="mb-5">
       <PageHeader
         title={`${foundWeights.length || "0"} results for "${urlSearchTerm}"`}
         titleH2={true}
-        extension={tags}
+        // extension={tags}
         panel={false}
       />
       <Panel padding={true}>
-        <div className="d-flex gap-2 mb-4">
+        {/* <div className="d-flex gap-2 mb-4">
           <Select
             small={true}
             options={sortOptions}
@@ -99,10 +111,34 @@ export default function SearchPage() {
             options={sortTimeOptions}
             defaultValue={sortTimeOptions[0]}
           />
-        </div>
+        </div> */}
 
         {/*<ModelSearchResults data={filteredData} />*/}
-        <ModelSearchResults data={foundWeights} />
+        {/* <ModelSearchResults data={foundWeights} /> */}
+
+        <MasonryGrid
+          gridRef={gridContainerRef}
+          onLayoutComplete={() => console.log("Layout complete!")}
+        >
+          {foundWeights.map((data: any, key: number) => {
+            let props = {
+              data,
+              showCreator: true,
+              type: "weights",
+            };
+
+            return (
+              <div
+                {...{
+                  className: "col-12 col-sm-6 col-xl-4 grid-item",
+                  key,
+                }}
+              >
+                <WeightsCards {...{ type: data.weight_category, props }} />
+              </div>
+            );
+          })}
+        </MasonryGrid>
       </Panel>
     </Container>
   );

yarn.lock

@@ -4459,6 +4459,7 @@ __metadata:
     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
@@ -4586,6 +4587,7 @@ __metadata:
   resolution: "@storyteller/root@workspace:."
   dependencies:
     "@react-spring/types": ^9.7.3
+    "@types/lodash.debounce": ^4.0.9
     craco: ^0.0.3
     cross-env: ^7.0.3
     husky: ^8.0.3
@@ -5376,6 +5378,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/lodash.debounce@npm:^4.0.9":
+  version: 4.0.9
+  resolution: "@types/lodash.debounce@npm:4.0.9"
+  dependencies:
+    "@types/lodash": "*"
+  checksum: 8183a152e01928e3b97ca773f6ae6038b8695e76493ba8bf6b743ec143948a62294fbc9d49fa4a78b52265b3ba4892ef57534e0c13d04aa0f111671b5a944feb
+  languageName: node
+  linkType: hard
+
+"@types/lodash@npm:*":
+  version: 4.14.202
+  resolution: "@types/lodash@npm:4.14.202"
+  checksum: a91acf3564a568c6f199912f3eb2c76c99c5a0d7e219394294213b3f2d54f672619f0fde4da22b29dc5d4c31457cd799acc2e5cb6bd90f9af04a1578483b6ff7
+  languageName: node
+  linkType: hard
+
 "@types/masonry-layout@npm:*, @types/masonry-layout@npm:^4.2.7":
   version: 4.2.7
   resolution: "@types/masonry-layout@npm:4.2.7"