diff --git a/packages/components/src/api/image_generation/UploadLora.ts b/packages/components/src/api/image_generation/UploadLora.ts index 39e14c8ed4..3e04490e5f 100644 --- a/packages/components/src/api/image_generation/UploadLora.ts +++ b/packages/components/src/api/image_generation/UploadLora.ts @@ -8,6 +8,7 @@ export interface UploadLoraRequest { maybe_name: String, maybe_description: String, visibility: String, + maybe_cover_image_media_file_token?: String, } export interface UploadLoraResponse { diff --git a/packages/components/src/api/image_generation/UploadModel.ts b/packages/components/src/api/image_generation/UploadModel.ts index 7b97d4fddf..2577243947 100644 --- a/packages/components/src/api/image_generation/UploadModel.ts +++ b/packages/components/src/api/image_generation/UploadModel.ts @@ -8,6 +8,7 @@ export interface UploadModelRequest { maybe_name: String, maybe_description: String, visibility: String, + maybe_cover_image_media_file_token?: String, } export interface UploadModelResponse { diff --git a/packages/fakeyou.com/src/App.tsx b/packages/fakeyou.com/src/App.tsx index 7307cefdbe..4090cabb0f 100644 --- a/packages/fakeyou.com/src/App.tsx +++ b/packages/fakeyou.com/src/App.tsx @@ -299,6 +299,8 @@ class App extends React.Component { await this.querySessionSubscriptions(); setInterval(async () => { + // See warnings in the following methods when adding new methods + // that affect global "state" await this.querySession(); await this.querySessionSubscriptions(); }, 60000); @@ -309,6 +311,10 @@ class App extends React.Component { } querySession = async () => { + // WARNING: Making setState calls in this scope without checking existing + // state can cause the whole site to refresh/worsen UX. Double check if + // state needs to be set here, or if instead can be refreshed locally on + // the page where the new "state" needed const sessionWrapper = await SessionWrapper.lookupSession(); const username = sessionWrapper.getDisplayName(); const cookies = new Cookies(); @@ -336,7 +342,15 @@ class App extends React.Component { }; querySessionSubscriptions = async () => { - this.setState({ sessionFetched: true }); + // WARNING: Making setState calls in this scope without checking existing + // state can cause the whole site to refresh/worsen UX. Double check if + // state needs to be set here, or if instead can be refreshed locally on + // the page where the new "state" needed + + if (this.state.sessionFetched === false){ + this.setState({ sessionFetched: true }); + } + const cookies = new Cookies(); const sessionSubscriptionsWrapper = diff --git a/packages/fakeyou.com/src/components/common/SelectModal/SelectModal.tsx b/packages/fakeyou.com/src/components/common/SelectModal/SelectModal.tsx index 0824caa530..9905bfffae 100644 --- a/packages/fakeyou.com/src/components/common/SelectModal/SelectModal.tsx +++ b/packages/fakeyou.com/src/components/common/SelectModal/SelectModal.tsx @@ -7,6 +7,7 @@ import Button from "../Button"; import { faTrash } from "@fortawesome/free-solid-svg-icons"; import SelectMediaList from "./SelectMediaList"; import SelectWeightsList from "./SelectWeightsList"; +import { useSession } from "hooks"; export type SelectModalData = { token: string; @@ -39,6 +40,7 @@ const SelectModal = memo( required, }: SelectModalProps) => { const emptyValue = { token: "", title: "" }; + const { user } = useSession(); const [{ isModalOpen, selectedValue, valueType, activeTab }, setState] = useState({ isModalOpen: false, @@ -98,12 +100,20 @@ const SelectModal = memo( {tab.type === "weights" && ( <> {tab.onlyBookmarked ? ( - + <> + {user ? ( + + ) : ( +
+

Please login to view your bookmarks.

+
+ )} + ) : ( ; - - if (sessionWrapper.canAccessStudio()) { - maybeImageGeneration = ( - <> -
  • Image Generation
    • -
  • - - - Text to Image - {/* {t("videoStorytellerStudio")} */} - -
    • -
    - - ); - } + let maybeImageGeneration = ( + <> +
  • Image Generation
    • +
  • + + + Text to Image + {/* {t("videoStorytellerStudio")} */} + +
    • +
    + + ); return ( <> diff --git a/packages/fakeyou.com/src/hooks/useLoraUpload/useLoraUpload.tsx b/packages/fakeyou.com/src/hooks/useLoraUpload/useLoraUpload.tsx index 52d221e7a1..563056f762 100644 --- a/packages/fakeyou.com/src/hooks/useLoraUpload/useLoraUpload.tsx +++ b/packages/fakeyou.com/src/hooks/useLoraUpload/useLoraUpload.tsx @@ -29,9 +29,9 @@ export default function useLoraUpload() { const upload = () => { writeStatusSet(FetchStatus.in_progress); UploadLora("", { - //...(coverImg.token - // ? { cover_image_media_file_token: coverImg.token } - // : {}), + ...(coverImg.token + ? { maybe_cover_image_media_file_token: coverImg.token } + : {}), maybe_name: title, maybe_description: descriptionMD, uuid_idempotency_token: uuidv4(), diff --git a/packages/fakeyou.com/src/hooks/useSdUpload/useSdUpload.tsx b/packages/fakeyou.com/src/hooks/useSdUpload/useSdUpload.tsx index 22e04d4781..5e9897f8bb 100644 --- a/packages/fakeyou.com/src/hooks/useSdUpload/useSdUpload.tsx +++ b/packages/fakeyou.com/src/hooks/useSdUpload/useSdUpload.tsx @@ -1,7 +1,8 @@ import { useState } from "react"; import { UploadModel } from "@storyteller/components/src/api/image_generation/UploadModel"; import { FetchStatus } from "@storyteller/components/src/api/_common/SharedFetchTypes"; -import { useCoverImgUpload } from "hooks"; +import { useCoverImgUpload, useInferenceJobs } from "hooks"; +import { FrontendInferenceJobType } from "@storyteller/components/src/jobs/InferenceJob"; import { v4 as uuidv4 } from "uuid"; // this hook is mostly for organizational purposes while I work -V @@ -13,6 +14,7 @@ export default function useSdUpload() { const [descriptionMD, descriptionMDSet] = useState(""); const [writeStatus, writeStatusSet] = useState(FetchStatus.paused); const coverImg = useCoverImgUpload(); + const { enqueue } = useInferenceJobs(FrontendInferenceJobType.ImageGeneration, true); const onChange = ({ target }: { target: { name: string; value: any } }) => { const todo: { [key: string]: (x: any) => void } = { @@ -28,7 +30,7 @@ export default function useSdUpload() { writeStatusSet(FetchStatus.in_progress); UploadModel("", { ...(coverImg.token - ? { cover_image_media_file_token: coverImg.token } + ? { maybe_cover_image_media_file_token: coverImg.token } : {}), maybe_description: descriptionMD, uuid_idempotency_token: uuidv4(), @@ -39,8 +41,7 @@ export default function useSdUpload() { }) .then((res: any) => { writeStatusSet(FetchStatus.success); - console.log("🌠", res); - // history.replace(`/weight/${token}`); + enqueue(res.inference_job_token); }) .catch(err => { writeStatusSet(FetchStatus.error); diff --git a/packages/fakeyou.com/src/v2/view/pages/text_to_image/TextToImagePage.tsx b/packages/fakeyou.com/src/v2/view/pages/text_to_image/TextToImagePage.tsx index 2a2c3cb571..5bfcaaef06 100644 --- a/packages/fakeyou.com/src/v2/view/pages/text_to_image/TextToImagePage.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/text_to_image/TextToImagePage.tsx @@ -9,7 +9,7 @@ import { import { SessionSubscriptionsWrapper } from "@storyteller/components/src/session/SessionSubscriptionsWrapper"; import { faMessageImage } from "@fortawesome/pro-solid-svg-icons"; import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper"; -import { StudioNotAvailable } from "v2/view/_common/StudioNotAvailable"; +//import { StudioNotAvailable } from "v2/view/_common/StudioNotAvailable"; interface TextToImagePageProps { inferenceJobs: Array; @@ -27,9 +27,9 @@ export default function TextToImagePage({ enqueueInferenceJob, inferenceJobs, }: TextToImagePageProps) { - if (!sessionWrapper.canAccessStudio()) { - return ; - } + //if (!sessionWrapper.canAccessStudio()) { + // return ; + //} return ( diff --git a/packages/fakeyou.com/src/v2/view/pages/weight/WeightPage.tsx b/packages/fakeyou.com/src/v2/view/pages/weight/WeightPage.tsx index c4f67d179a..4d5645f56f 100644 --- a/packages/fakeyou.com/src/v2/view/pages/weight/WeightPage.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/weight/WeightPage.tsx @@ -41,7 +41,7 @@ import WeightCoverImage from "components/common/WeightCoverImage"; import { BucketConfig } from "@storyteller/components/src/api/BucketConfig"; import SdInferencePanel from "./inference_panels/SdInferencePanel"; import SdCoverImagePanel from "./cover_image_panels/SdCoverImagePanel"; -import { StudioNotAvailable } from "v2/view/_common/StudioNotAvailable"; +//import { StudioNotAvailable } from "v2/view/_common/StudioNotAvailable"; import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper"; interface WeightProps { @@ -110,15 +110,15 @@ export default function WeightPage({ const deleteWeight = () => remove(!!user?.can_ban_users); - //Studio Access feature flag - switch (weight?.weight_type) { - case WeightType.SD_15: - case WeightType.SDXL: - case WeightType.LORA: - if (!sessionWrapper.canAccessStudio()) { - return ; - } - } + ////Studio Access feature flag + //switch (weight?.weight_type) { + // case WeightType.SD_15: + // case WeightType.SDXL: + // case WeightType.LORA: + // if (!sessionWrapper.canAccessStudio()) { + // return ; + // } + //} //Image generation panel if it's a lora weight or sd weight let imageGenPanel = <>;