diff --git a/packages/fakeyou.com/src/hooks/useIdempotency/useIdempotency.tsx b/packages/fakeyou.com/src/hooks/useIdempotency/useIdempotency.tsx index 0f264b57a0..0bd2925f29 100644 --- a/packages/fakeyou.com/src/hooks/useIdempotency/useIdempotency.tsx +++ b/packages/fakeyou.com/src/hooks/useIdempotency/useIdempotency.tsx @@ -3,5 +3,5 @@ import { v4 as uuidv4 } from "uuid"; export default function useIdempotency() { const [token, set] = useState(uuidv4()); - return { reset: () => set(uuidv4()), set, token }; + return { reset: () => set(uuidv4()), create: uuidv4, set, token }; }; \ No newline at end of file diff --git a/packages/fakeyou.com/src/v2/view/pages/lipsync/LipsyncEditor/LipsyncEditor.tsx b/packages/fakeyou.com/src/v2/view/pages/lipsync/LipsyncEditor/LipsyncEditor.tsx index 1afbbc1555..05df6d16a4 100644 --- a/packages/fakeyou.com/src/v2/view/pages/lipsync/LipsyncEditor/LipsyncEditor.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/lipsync/LipsyncEditor/LipsyncEditor.tsx @@ -1,9 +1,24 @@ import React, { useState } from "react"; import { animated, useSpring, useTransition } from '@react-spring/web'; -import { useFile, useIdempotency } from "hooks"; +import { v4 as uuidv4 } from "uuid"; +import { useFile } from "hooks"; import { AudioInput, ImageInput, Spinner } from "components/common"; import DynamicButton from './DynamicButton'; -import { Upload } from "@storyteller/components/src/api/upload/upload"; +import { + UploadAudio, + // UploadAudioIsOk, + // UploadAudioRequest, +} from "@storyteller/components/src/api/upload/UploadAudio"; +import { + UploadImage, + // UploadImageIsOk, + // UploadImageRequest, +} from "@storyteller/components/src/api/upload/UploadImage"; +import { + EnqueueFaceAnimation, + // EnqueueFaceAnimationIsSuccess, + // EnqueueFaceAnimationRequest, +} from "@storyteller/components/src/api/face_animation/EnqueueFaceAnimation"; import { FrontendInferenceJobType } from "@storyteller/components/src/jobs/InferenceJob"; import './LipsyncEditor.scss'; @@ -106,13 +121,6 @@ const Title = ({ ...rest }) => { }; -const fakeAPI = async (anything: any) => { // this just simulates the unifinished apis - await new Promise(resolve => { - setTimeout(() => resolve({ success: true }), 3000); - }); - return { success: true, inference_job_token: "fake", upload_token: "also fake", }; -}; - export default function LipsyncEditor({ enqueueInferenceJob, ...rest }: EditorProps) { // the ready states are set by functions which run after the upload input animation is completed, which then illuminates the respective checkmark in a staggered way to draw attention to the workflow, and reduces concurrent animations @@ -120,54 +128,52 @@ export default function LipsyncEditor({ enqueueInferenceJob, ...rest }: EditorPr const [imageReady,imageReadySet] = useState(false); const [audioReady,audioReadySet] = useState(false); const readyMedia = (m:number) => (t:boolean) => [imageReadySet,audioReadySet][m](t); - - const idempotency = useIdempotency(); const audioProps = useFile({}); // contains upload inout state and controls, see docs const imageProps = useFile({}); // contains upload inout state and controls, see docs const [index,indexSet] = useState(0); // index = slideshow slide position - const [audioUploadToken,audioUploadTokenSet] = useState(); - const [imageUploadToken,imageUploadTokenSet] = useState(); const makeRequest = (mode: number) => ({ - uuid_idempotency_token: idempotency.token, + uuid_idempotency_token: uuidv4(), file: mode ? imageProps.file : audioProps.file, source: "file", type: mode ? "image" : "audio" }); + const upImageAndMerge = async (audio: any) => ({ audio, image: await UploadImage(makeRequest(1)) }); + const submit = async () => { if (!audioProps.file) return false; indexSet(1); // set audio working page - Upload(makeRequest(0)) // start audio (0) upload + UploadAudio(makeRequest(0)) // start audio (0) upload .then(res => { - if ("success" in res) { - audioUploadTokenSet(res.upload_token); // audio token stored - idempotency.reset(); // reset token for new request, I don't know if this needs to happen + if ("upload_token" in res) { indexSet(2); // set image working page } - return fakeAPI(makeRequest(1)); // start image (1) upload, replace with Upload(imageRequest) + return upImageAndMerge(res); // start image (1) upload, replace with Upload(imageRequest) }) - .then(res => { - if ("success" in res) { - imageUploadTokenSet(res.upload_token); // image token stored - idempotency.reset(); + .then(responses => { + console.log("🌅",responses); + if ("upload_token" in responses.image) { indexSet(3); // set face animator API working page + return EnqueueFaceAnimation({ + uuid_idempotency_token: uuidv4(), + audio_source: { + maybe_media_upload_token: responses.audio.upload_token, + }, + image_source: { + maybe_media_upload_token: responses.image.upload_token, + }, + }); } - return fakeAPI({ - source_audio_media_upload_token: audioUploadToken, - source_image_media_upload_token: imageUploadToken, - uuid_idempotency_token: idempotency.token - }); }) .then(res => { - if ("success" in res) { - // this breaks because I don't get a real token - // enqueueInferenceJob(res.inference_job_token,FrontendInferenceJobType.FaceAnimation); - idempotency.reset(); - indexSet(4); // set face animator API working page - } + console.log("🎆",res); + // if ("success" in res) { + // console.log("💒",res); + // indexSet(4); // set face animator API working page + // } }) .catch(e => { return { success : false };