diff --git a/packages/components/src/api/image_generation/EnqueueImageGen.ts b/packages/components/src/api/image_generation/EnqueueImageGen.ts index 1e11349f67..b3400df405 100644 --- a/packages/components/src/api/image_generation/EnqueueImageGen.ts +++ b/packages/components/src/api/image_generation/EnqueueImageGen.ts @@ -2,7 +2,7 @@ import { ApiConfig } from "../ApiConfig"; export interface EnqueueImageGenRequest { uuid_idempotency_token: string; - maybe_sd_model_token: string; + maybe_sd_model_token: string | undefined; maybe_lora_model_token: string | null; maybe_prompt: string; maybe_n_prompt: string; diff --git a/packages/fakeyou.com/public/mascot/text-to-image.webp b/packages/fakeyou.com/public/mascot/text-to-image.webp new file mode 100644 index 0000000000..8c36b6c9e3 Binary files /dev/null and b/packages/fakeyou.com/public/mascot/text-to-image.webp differ diff --git a/packages/fakeyou.com/src/App.tsx b/packages/fakeyou.com/src/App.tsx index 36a04d9c49..54845a3fee 100644 --- a/packages/fakeyou.com/src/App.tsx +++ b/packages/fakeyou.com/src/App.tsx @@ -204,6 +204,7 @@ function initInferenceJobsByCategoryMap(): Map< ); inferenceJobsByCategory.set(FrontendInferenceJobType.VoiceDesignerTts, []); inferenceJobsByCategory.set(FrontendInferenceJobType.VideoMotionCapture, []); + inferenceJobsByCategory.set(FrontendInferenceJobType.ImageGeneration, []); inferenceJobsByCategory.set(FrontendInferenceJobType.ConvertFbxtoGltf, []); return inferenceJobsByCategory; } diff --git a/packages/fakeyou.com/src/components/PremiumLock/PremiumLock.scss b/packages/fakeyou.com/src/components/PremiumLock/PremiumLock.scss index 218234a005..0afb96bc78 100644 --- a/packages/fakeyou.com/src/components/PremiumLock/PremiumLock.scss +++ b/packages/fakeyou.com/src/components/PremiumLock/PremiumLock.scss @@ -5,6 +5,7 @@ background-color: $panel-inner; pointer-events: none; overflow: hidden; + box-shadow: none !important; .overlay { position: absolute; @@ -20,7 +21,7 @@ font-size: 16px; pointer-events: all; text-shadow: 0 0 10px rgba(0, 0, 0, 1); - border: 1px solid rgba($primary, 0.75); + border: 1px solid rgba($primary, 0.4); border-radius: 0.5rem; } } diff --git a/packages/fakeyou.com/src/components/PremiumLock/PremiumLock.tsx b/packages/fakeyou.com/src/components/PremiumLock/PremiumLock.tsx index 8fa2968909..9ac64189e4 100644 --- a/packages/fakeyou.com/src/components/PremiumLock/PremiumLock.tsx +++ b/packages/fakeyou.com/src/components/PremiumLock/PremiumLock.tsx @@ -43,13 +43,13 @@ export default function PremiumLock({ {hasAccess() ? ( children ) : ( - + {children}
-
+
- Feature requires{" "} + This feature requires a{" "} {requiredPlan} subscription
diff --git a/packages/fakeyou.com/src/components/common/Label/Label.tsx b/packages/fakeyou.com/src/components/common/Label/Label.tsx index 5fc3066814..8950320fcd 100644 --- a/packages/fakeyou.com/src/components/common/Label/Label.tsx +++ b/packages/fakeyou.com/src/components/common/Label/Label.tsx @@ -21,7 +21,9 @@ export default function Label({ }} > {label ? ( -
{weights.isLoading && !weights.list.length ? ( 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 new file mode 100644 index 0000000000..33c4b0d703 --- /dev/null +++ b/packages/fakeyou.com/src/v2/view/pages/text_to_image/TextToImagePage.tsx @@ -0,0 +1,51 @@ +import { Container } from "components/common"; +import PageHeaderWithImage from "components/layout/PageHeaderWithImage"; +import React from "react"; +import SdInferencePanel from "../weight/inference_panels/SdInferencePanel"; +import { FrontendInferenceJobType } from "@storyteller/components/src/jobs/InferenceJob"; +import { SessionSubscriptionsWrapper } from "@storyteller/components/src/session/SessionSubscriptionsWrapper"; +import { faMessageImage } from "@fortawesome/pro-solid-svg-icons"; +import TextToImageJobsList from "./components/TextToImageJobsList"; +import { useInferenceJobs } from "hooks"; + +interface TextToImagePageProps { + sessionSubscriptionsWrapper: SessionSubscriptionsWrapper; + enqueueInferenceJob: ( + jobToken: string, + frontendInferenceJobType: FrontendInferenceJobType + ) => void; +} + +export default function TextToImagePage({ + sessionSubscriptionsWrapper, + enqueueInferenceJob, +}: TextToImagePageProps) { + const { inferenceJobs } = useInferenceJobs( + FrontendInferenceJobType.ImageGeneration + ); + const hasImageGenJobs = inferenceJobs && inferenceJobs.length > 0; + + return ( + + + + {hasImageGenJobs && ( +
+ +
+ )} + + + + ); +} diff --git a/packages/fakeyou.com/src/v2/view/pages/text_to_image/components/TextToImageJobsList.tsx b/packages/fakeyou.com/src/v2/view/pages/text_to_image/components/TextToImageJobsList.tsx new file mode 100644 index 0000000000..121df98c14 --- /dev/null +++ b/packages/fakeyou.com/src/v2/view/pages/text_to_image/components/TextToImageJobsList.tsx @@ -0,0 +1,26 @@ +import React from "react"; + +import { Analytics } from "common/Analytics"; +import InferenceJobsList from "components/layout/InferenceJobsList"; +import { FrontendInferenceJobType } from "@storyteller/components/src/jobs/InferenceJob"; + +export default function TextToImageJobsList() { + const failures = (fail = "") => { + switch (fail) { + case "sample case": + return "Sample Case, this should not have been shown"; + default: + return "Unknown failure"; + } + }; + + return ( + Analytics.voiceConversionClickDownload(), + jobType: FrontendInferenceJobType.ImageGeneration, + }} + /> + ); +} diff --git a/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/tabContentLibrary.tsx b/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/tabContentLibrary.tsx index 1815023dbe..bdfd91ceb4 100644 --- a/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/tabContentLibrary.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/tabContentLibrary.tsx @@ -1,24 +1,26 @@ import SelectModal from "components/common/SelectModal/SelectModal"; -import React, {useState} from "react"; +import React, { useState } from "react"; import { Action, State } from "../videoMocapReducer"; import { Button } from "components/common"; export default function TabContentLibrary({ - t, pageState, dispatchPageState + t, + pageState, + dispatchPageState, }: { t: Function; pageState: State; dispatchPageState: (action: Action) => void; -}){ - const [token, setToken] = useState(); - const handleProceed = ()=>{ - if(token) +}) { + const [token, setToken] = useState(); + const handleProceed = () => { + if (token) dispatchPageState({ type: "selectedFile", - payload: {mediaFileToken: token} + payload: { mediaFileToken: token }, }); - } - const handleOnSelect = (token:string)=>{ + }; + const handleOnSelect = (token: string) => { setToken(token); }; @@ -38,12 +40,7 @@ export default function TabContentLibrary({ }, ]} /> - {token && -
); } 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 edabf7fc88..05218c3a0a 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 @@ -2,6 +2,7 @@ import React, { useRef, useState, memo } from "react"; import { Button, Input, + Label, NumberSlider, Panel, SegmentButtons, @@ -28,19 +29,26 @@ import PremiumLock from "components/PremiumLock"; interface SdInferencePanelProps { sessionSubscriptionsWrapper: SessionSubscriptionsWrapper; - sd_model_token: string; + sd_model_token?: string; enqueueInferenceJob: ( jobToken: string, frontendInferenceJobType: FrontendInferenceJobType ) => void; + isStandalone?: boolean; } function SdInferencePanel({ enqueueInferenceJob, sd_model_token, sessionSubscriptionsWrapper, + isStandalone = false, }: SdInferencePanelProps) { const [loraToken, setLoraToken] = useState(null); + const [weightToken, setWeightToken] = useState(sd_model_token); + + const handleOnWeightSelect = (token: string) => { + setWeightToken(token); + }; const handleOnSelect = (token: string) => { setLoraToken(token); @@ -226,7 +234,7 @@ function SdInferencePanel({ ) => { ev.preventDefault(); - if (!prompt) { + if (!prompt || weightToken === undefined) { return false; } @@ -243,7 +251,7 @@ function SdInferencePanel({ const request = { uuid_idempotency_token: uuidv4(), - maybe_sd_model_token: sd_model_token, + maybe_sd_model_token: isStandalone ? weightToken : sd_model_token, maybe_lora_model_token: loraToken, maybe_prompt: prompt, maybe_n_prompt: negativePrompt, @@ -282,6 +290,31 @@ function SdInferencePanel({

Generate an Image

+ {isStandalone && ( + + )} + - {/* Checkpoint Use weight token */} - {/* */} - - - - +
+
@@ -429,7 +455,7 @@ function SdInferencePanel({