From 449fee65cd145a2b5745822e99bd28d3a133e978 Mon Sep 17 00:00:00 2001 From: wil Date: Thu, 22 Feb 2024 15:34:46 -0500 Subject: [PATCH 01/10] new workflow upload page --- .../src/api/video_workflow/UploadWorkflow.ts | 28 +++ .../src/hooks/useWorkflowUpload/index.ts | 1 + .../useWorkflowUpload/useWorkflowUpload.tsx | 72 ++++++++ .../fakeyou.com/src/v2/view/PageContainer.tsx | 22 ++- .../pages/contribute/ContributeIndexPage.tsx | 8 + .../view/pages/upload/UploadWorkflowPage.tsx | 163 ++++++++++++++++++ 6 files changed, 290 insertions(+), 4 deletions(-) create mode 100644 packages/components/src/api/video_workflow/UploadWorkflow.ts create mode 100644 packages/fakeyou.com/src/hooks/useWorkflowUpload/index.ts create mode 100644 packages/fakeyou.com/src/hooks/useWorkflowUpload/useWorkflowUpload.tsx create mode 100644 packages/fakeyou.com/src/v2/view/pages/upload/UploadWorkflowPage.tsx diff --git a/packages/components/src/api/video_workflow/UploadWorkflow.ts b/packages/components/src/api/video_workflow/UploadWorkflow.ts new file mode 100644 index 0000000000..cd50933de5 --- /dev/null +++ b/packages/components/src/api/video_workflow/UploadWorkflow.ts @@ -0,0 +1,28 @@ +import MakeRequest from "../MakeRequest"; + +export interface UploadWorkflowRequest { + uuid_idempotency_token: String, + + google_drive_link: String, + title: String, + description: String, + commit_hash?: String + creator_set_visibility: String + + // maybe_lora_upload_path?: String, + // maybe_name: String, + // maybe_description: String, + // visibility: String, + // maybe_cover_image_media_file_token?: String, +} + +export interface UploadWorkflowResponse { + success: boolean, + // maybe_sd_model_token?: String, + // maybe_lora_model_token?: String, +} + +export const UploadWorkflow = MakeRequest({ + method: "POST", + routingFunction: () => "/v1/workflow/upload/prompt", +}); diff --git a/packages/fakeyou.com/src/hooks/useWorkflowUpload/index.ts b/packages/fakeyou.com/src/hooks/useWorkflowUpload/index.ts new file mode 100644 index 0000000000..af50d3f261 --- /dev/null +++ b/packages/fakeyou.com/src/hooks/useWorkflowUpload/index.ts @@ -0,0 +1 @@ +export { default } from "./useWorkflowUpload"; diff --git a/packages/fakeyou.com/src/hooks/useWorkflowUpload/useWorkflowUpload.tsx b/packages/fakeyou.com/src/hooks/useWorkflowUpload/useWorkflowUpload.tsx new file mode 100644 index 0000000000..6aefeddc0c --- /dev/null +++ b/packages/fakeyou.com/src/hooks/useWorkflowUpload/useWorkflowUpload.tsx @@ -0,0 +1,72 @@ +import { useState } from "react"; +import { UploadWorkflow } from "@storyteller/components/src/api/video_workflow/UploadWorkflow"; +import { FetchStatus } from "@storyteller/components/src/api/_common/SharedFetchTypes"; +import { 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 + +export default function useWorkflow() { + const [uploadPath, uploadPathSet] = useState(""); + const [title, titleSet] = useState(""); + const [description, descriptionSet] = useState(""); + const [commitHash, commitHashSet] = useState(""); + const [visibility, visibilitySet] = useState("private"); + + + const [writeStatus, writeStatusSet] = useState(FetchStatus.paused); + + const { enqueue } = useInferenceJobs(FrontendInferenceJobType.VideoWorkflow, true); + + const onChange = ({ target }: { target: { name: string; value: any } }) => { + const todo: { [key: string]: (x: any) => void } = { + uploadPathSet, + descriptionSet, + titleSet, + visibilitySet, + commitHashSet + }; + todo[target.name + "Set"](target.value); + }; + + const upload = () => { + writeStatusSet(FetchStatus.in_progress); + console.log(` + google_drive_link: ${uploadPath}, + title: ${title}, + description: ${description}, + commit_hash: ${commitHash}, + creator_set_visibility: ${visibility} + `); + UploadWorkflow("", { + uuid_idempotency_token: uuidv4(), + google_drive_link: uploadPath, + title, + description, + commit_hash:commitHash, + creator_set_visibility: visibility + }) + .then((res: any) => { + if (res.success && res.inference_job_token) { + writeStatusSet(FetchStatus.success); + enqueue(res.inference_job_token); + } + }) + .catch(err => { + writeStatusSet(FetchStatus.error); + }); + }; + return { + uploadPath, + title, + description, + commitHash, + visibility, + + writeStatus, + + onChange, + upload, + }; +} diff --git a/packages/fakeyou.com/src/v2/view/PageContainer.tsx b/packages/fakeyou.com/src/v2/view/PageContainer.tsx index 9a50ec8b25..733bf486dd 100644 --- a/packages/fakeyou.com/src/v2/view/PageContainer.tsx +++ b/packages/fakeyou.com/src/v2/view/PageContainer.tsx @@ -30,9 +30,16 @@ import { TtsModelViewPage } from "./pages/tts/tts_model_view/TtsModelViewPage"; import { TtsResultDeletePage } from "./pages/tts/tts_result_delete/TtsResultDeletePage"; import { TtsResultViewPage } from "./pages/tts/tts_result_view/TtsResultViewPage"; import { ContributeIndexPage } from "./pages/contribute/ContributeIndexPage"; + import { UploadTtsModelPage } from "./pages/upload/UploadTtsModelPage"; import { UploadW2lPhotoPage } from "./pages/upload/UploadW2lPhotoPage"; import { UploadW2lVideoPage } from "./pages/upload/UploadW2lVideoPage"; +import { UploadVocoderPage } from "./pages/upload/UploadVocoderPage"; +import { UploadVoiceConversionModel } from "./pages/upload/UploadVoiceConversionModel"; +import UploadSdWeightPage from "./pages/upload/UploadSdWeightPage"; +import UploadLoraWeightPage from "./pages/upload/UploadLoraWeightPage"; +import UploadWorkflowPage from "./pages/upload/UploadWorkflowPage"; + import { W2lResultViewPage } from "./pages/w2l/w2l_result_view/W2lResultViewPage"; import { W2lTemplateListPage } from "./pages/w2l/w2l_template_list/W2lTemplateListPage"; import { W2lTemplateUploadJob } from "@storyteller/components/src/jobs/W2lTemplateUploadJobs"; @@ -61,7 +68,7 @@ import { PatronPage } from "./pages/patrons/PatronPage"; import { Language } from "@storyteller/components/src/i18n/Language"; import { VoiceCloneRequestPage } from "./pages/clone_voice_requests/VoiceCloneRequestPage"; import { VocodesPage } from "./pages/vocodes/VocodesPage"; -import { UploadVocoderPage } from "./pages/upload/UploadVocoderPage"; + import { PricingPage } from "./pages/premium/PricingPage"; import { CheckoutSuccessPage } from "./pages/premium/CheckoutSuccessPage"; import { CheckoutCancelPage } from "./pages/premium/CheckoutCancelPage"; @@ -78,7 +85,7 @@ import { } from "@storyteller/components/src/jobs/InferenceJob"; //import { LandingPage } from "./pages/landing/LandingPage"; import { VcModelListPage } from "./pages/vc/vc_model_list/VcModelListPage"; -import { UploadVoiceConversionModel } from "./pages/upload/UploadVoiceConversionModel"; + import { VoiceConversionModelListItem } from "@storyteller/components/src/api/voice_conversion/ListVoiceConversionModels"; import { CommunityCommissionsPage } from "./pages/contest/CommunityCommissionsPage"; import { ProductUsageInfoPage } from "./pages/product_usage_info/ProductUsageInfoPage"; @@ -106,10 +113,10 @@ import ExplorePage from "./pages/explore/ExplorePage"; import SearchPage from "./pages/search/SearchPage"; import { SearchProvider } from "context/SearchContext"; import WeightEditPage from "./pages/weight/WeightEditPage"; -import UploadSdWeightPage from "./pages/upload/UploadSdWeightPage"; + import { FooterNav } from "./nav/FooterNav"; import FbxToGltfPage from "./pages/fbx_to_gltf/FbxToGltfPage"; -import UploadLoraWeightPage from "./pages/upload/UploadLoraWeightPage"; + import VideoWorkflowPage from "./pages/video_workflow/VideoWorkflow"; import ScrollToTop from "./_common/ScrollToTop"; import TextToImagePage from "./pages/text_to_image/TextToImagePage"; @@ -117,6 +124,7 @@ import DomainConfigProvider from "context/DomainConfigContext"; import DevUpload from "./pages/dev_upload/DevUpload"; import DevMediaInput from "./pages/dev_upload/DevMediaInput"; + interface Props { sessionWrapper: SessionWrapper; querySessionAction: () => void; @@ -565,6 +573,12 @@ class PageContainer extends React.Component< /> + + + + +
+
diff --git a/packages/fakeyou.com/src/v2/view/pages/upload/UploadWorkflowPage.tsx b/packages/fakeyou.com/src/v2/view/pages/upload/UploadWorkflowPage.tsx new file mode 100644 index 0000000000..354e928033 --- /dev/null +++ b/packages/fakeyou.com/src/v2/view/pages/upload/UploadWorkflowPage.tsx @@ -0,0 +1,163 @@ +import React from "react"; +import { + faCircleExclamation, + faEye, + faArrowsTurnToDots +} from "@fortawesome/free-solid-svg-icons"; +import { usePrefixedDocumentTitle } from "common/UsePrefixedDocumentTitle"; +import PageHeader from "components/layout/PageHeader"; +import { + Button, + Container, + SplitPanel, + TempInput, + TempSelect, + TempTextArea, +} from "components/common"; +import { FrontendInferenceJobType } from "@storyteller/components/src/jobs/InferenceJob"; +import InferenceJobsList from "components/layout/InferenceJobsList"; +import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper"; +import useWorkflowUpload from "hooks/useWorkflowUpload"; + +interface UploadWorkflowPageProps { + sessionWrapper: SessionWrapper; +} + +export default function UploadWorkflowPage({ + sessionWrapper, +}: UploadWorkflowPageProps) { + usePrefixedDocumentTitle("Edit Voice"); + + const visibilityOptions = [ + { label: "Public", value: "public" }, + { label: "Private", value: "private" }, + ]; + + + const failures = (fail = "") => { + switch (fail) { + default: + return "Uknown failure"; + } + }; + + const { + //state values + uploadPath, + title, + description, + commitHash, + visibility, + // callback functions + onChange, + upload, + } = useWorkflowUpload(); + + if (!sessionWrapper.isLoggedIn()) { + return ( + + +