diff --git a/ui/src/model-manager/install-models/ModelCard.tsx b/ui/src/model-manager/install-models/ModelCard.tsx index aa0fce2..2fa825d 100644 --- a/ui/src/model-manager/install-models/ModelCard.tsx +++ b/ui/src/model-manager/install-models/ModelCard.tsx @@ -9,7 +9,7 @@ import { Flex, Select, } from "@chakra-ui/react"; -import { useCallback, useState } from "react"; +import { useCallback, useEffect, useState } from "react"; import { IconDownload } from "@tabler/icons-react"; import { FileEssential, @@ -18,7 +18,8 @@ import { isCivitModel, } from "./util/modelTypes"; import { KBtoGB } from "../utils"; -import { findSfwImageFromModel } from "../../utils/findsfwImage"; +import { findSfwImageFromModel } from "../../utils/findSfwImage"; +import { userSettingsTable } from "../../db-tables/WorkspaceDB"; const IMAGE_SIZE = 280; interface ModelCardProps { @@ -31,7 +32,18 @@ export default function ModelCard({ onClickInstallModel, installing, }: ModelCardProps) { - const modelPhoto = findSfwImageFromModel(model, IMAGE_SIZE); + const [modelPhoto, setModelPhoto] = useState(); + useEffect(() => { + loadPhoto(); + async function loadPhoto() { + const showNsfwThumbnail = await userSettingsTable?.getSetting( + "showNsfwModelThumbnail", + ); + setModelPhoto( + findSfwImageFromModel(model, IMAGE_SIZE, showNsfwThumbnail), + ); + } + }, [model]); const versions = isCivitModel(model) ? model.modelVersions : model.versions; const [selectedFile, setSelectedFile] = useState( versions?.[0]?.name ?? "", diff --git a/ui/src/model-manager/install-models/util/getModelFromCivitAPI.ts b/ui/src/model-manager/install-models/util/getModelFromCivitAPI.ts index 66fd619..a20dd56 100644 --- a/ui/src/model-manager/install-models/util/getModelFromCivitAPI.ts +++ b/ui/src/model-manager/install-models/util/getModelFromCivitAPI.ts @@ -1,3 +1,4 @@ +import { userSettingsTable } from "../../../db-tables/WorkspaceDB"; import { indexdb } from "../../../db-tables/indexdb"; import { CivitiModel } from "../../types"; import { CACHE_EXPIRY_DAYS, MODEL_TYPE } from "./modelTypes"; @@ -6,15 +7,18 @@ type CivitModelQueryParams = { types?: MODEL_TYPE; query?: string; limit?: string; - nsfw?: "false"; + nsfw?: boolean; }; export async function getModelFromCivitAPi( types?: MODEL_TYPE, ): Promise { + const showNsfwThumbnail = await userSettingsTable?.getSetting( + "showNsfwModelThumbnail", + ); const params: CivitModelQueryParams = { limit: "30", - nsfw: "false", + nsfw: showNsfwThumbnail ?? false, types, }; diff --git a/ui/src/model-manager/install-models/util/getModelFromSearch.ts b/ui/src/model-manager/install-models/util/getModelFromSearch.ts index fc1110b..95ed76c 100644 --- a/ui/src/model-manager/install-models/util/getModelFromSearch.ts +++ b/ui/src/model-manager/install-models/util/getModelFromSearch.ts @@ -1,3 +1,4 @@ +import { userSettingsTable } from "../../../db-tables/WorkspaceDB"; import { SearchHit, SearchRequestBody, @@ -9,9 +10,12 @@ export async function getModelFromSearch( q: string, type?: MODEL_TYPE, ): Promise { + const showNsfwThumbnail = await userSettingsTable?.getSetting( + "showNsfwModelThumbnail", + ); const params: SearchRequestBody = { limit: 30, - filter: "nsfw = false AND type != Workflows", + filter: `nsfw = ${showNsfwThumbnail ?? false} AND type != Workflows`, q, }; if (type) {