FileManager use fuse

web_app/package-lock.json

@@ -33,9 +33,9 @@
         "axios": "^1.6.2",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.0.0",
-        "flexsearch": "^0.7.21",
+        "fuse.js": "^7.0.0",
         "immer": "^10.0.3",
-        "inter-ui": "^3.19.3",
+        "inter-ui": "^4.0.0",
         "lodash": "^4.17.21",
         "lucide-react": "^0.292.0",
         "mitt": "^3.0.1",
@@ -4230,11 +4230,6 @@
       "integrity": "sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==",
       "dev": true
     },
-    "node_modules/flexsearch": {
-      "version": "0.7.31",
-      "resolved": "https://registry.npmjs.org/flexsearch/-/flexsearch-0.7.31.tgz",
-      "integrity": "sha512-XGozTsMPYkm+6b5QL3Z9wQcJjNYxp0CYn3U1gO7dwD6PAqU1SVWZxI9CCg3z+ml3YfqdPnrBehaBrnH2AGKbNA=="
-    },
     "node_modules/follow-redirects": {
       "version": "1.15.3",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.3.tgz",
@@ -4306,6 +4301,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/fuse.js": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-7.0.0.tgz",
+      "integrity": "sha512-14F4hBIxqKvD4Zz/XjDc3y94mNZN6pRv3U13Udo0lNLCWRBUsrMv2xwcF/y/Z5sV6+FQW+/ow68cHpm4sunt8Q==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
@@ -4504,9 +4507,12 @@
       }
     },
     "node_modules/inter-ui": {
-      "version": "3.19.3",
+      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/inter-ui/-/inter-ui-3.19.3.tgz",
+      "resolved": "https://registry.npmjs.org/inter-ui/-/inter-ui-4.0.0.tgz",
-      "integrity": "sha512-5FG9fjuYOXocIfjzcCBhICL5cpvwEetseL3FU6tP3d6Bn7g8wODhB+I9RNGRTizCT7CUG4GOK54OPxqq3msQgg=="
+      "integrity": "sha512-/2XKDS/6DJYZzBHRsFVrZ2l0NYhaRZXki3jUnpJu4DAZtsZdDUtOHfG5msc6ifwKg59eJiyqeIYBDNgvxz+7XQ==",
+      "engines": {
+        "node": ">=20.0.0"
+      }
     },
     "node_modules/invariant": {
       "version": "2.2.4",

web_app/package.json

@@ -35,9 +35,9 @@
     "axios": "^1.6.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
-    "flexsearch": "^0.7.21",
+    "fuse.js": "^7.0.0",
     "immer": "^10.0.3",
-    "inter-ui": "^3.19.3",
+    "inter-ui": "^4.0.0",
     "lodash": "^4.17.21",
     "lucide-react": "^0.292.0",
     "mitt": "^3.0.1",

web_app/src/components/FileManager.tsx

@@ -16,7 +16,7 @@ import {
 } from "@radix-ui/react-icons"
 import { useToggle } from "react-use"
 import { useDebounce } from "@uidotdev/usehooks"
-import FlexSearch from "flexsearch/dist/flexsearch.bundle.js"
+import Fuse from "fuse.js"
 import { useToast } from "@/components/ui/use-toast"
 import { API_ENDPOINT, getMedias } from "@/lib/api"
 import { IconButton } from "./ui/button"
@@ -33,7 +33,7 @@ import {
 import { ScrollArea } from "./ui/scroll-area"
 import { DialogTrigger } from "@radix-ui/react-dialog"
 import { useStore } from "@/lib/states"
-import { SortBy, SortOrder } from "@/lib/types"
+import { Filename, SortBy, SortOrder } from "@/lib/types"
 import { FolderClosed } from "lucide-react"
 import useHotKey from "@/hooks/useHotkey"
 
@@ -44,14 +44,6 @@ interface Photo {
   name: string
 }
 
-interface Filename {
-  name: string
-  height: number
-  width: number
-  ctime: number
-  mtime: number
-}
-
 const SORT_BY_NAME = "Name"
 const SORT_BY_CREATED_TIME = "Created time"
 const SORT_BY_MODIFIED_TIME = "Modified time"
@@ -148,17 +140,12 @@ export default function FileManager(props: Props) {
         const filenames = await getMedias(tab)
         let filteredFilenames = filenames
         if (debouncedSearchText) {
-          const index = new FlexSearch.Index({
+          const fuse = new Fuse(filteredFilenames, {
-            tokenize: "forward",
+            keys: ["name"],
-            minlength: 1,
           })
-          filenames.forEach((filename: Filename, id: number) =>
+          const items = fuse.search(debouncedSearchText)
-            index.add(id, filename.name)
+          filteredFilenames = items.map(
-          )
+            (item) => filteredFilenames[item.refIndex]
-          const results: FlexSearch.IndexSearchResult =
-            index.search(debouncedSearchText)
-          filteredFilenames = results.map(
-            (id: FlexSearch.Id) => filenames[id as number]
           )
         }
 

web_app/src/lib/api.ts

@@ -1,4 +1,4 @@
-import { ModelInfo, PowerPaintTask, Rect } from "@/lib/types"
+import { Filename, ModelInfo, PowerPaintTask, Rect } from "@/lib/types"
 import { Settings } from "@/lib/states"
 import { srcToFile } from "@/lib/utils"
 import axios from "axios"
@@ -186,7 +186,7 @@ export async function getMediaFile(tab: string, filename: string) {
   throw new Error(errMsg)
 }
 
-export async function getMedias(tab: string) {
+export async function getMedias(tab: string): Promise<Filename[]> {
   const res = await fetch(`${API_ENDPOINT}/medias/${tab}`, {
     method: "GET",
   })

web_app/src/lib/types.ts

@@ -1,3 +1,11 @@
+export interface Filename {
+  name: string
+  height: number
+  width: number
+  ctime: number
+  mtime: number
+}
+
 export interface ModelInfo {
   name: string
   path: string