diff --git a/packages/components/src/api/image_generation/UploadModel.ts b/packages/components/src/api/image_generation/UploadModel.ts new file mode 100644 index 0000000000..306079c784 --- /dev/null +++ b/packages/components/src/api/image_generation/UploadModel.ts @@ -0,0 +1,22 @@ +import MakeRequest from "../MakeRequest"; + +export interface UploadModelRequest { + uuid_idempotency_token: String, + type_of_inference: String, // upload_lora / check_point / inference + maybe_upload_path?: String, + maybe_lora_upload_path?: String, + title: String, + visibility: String, + description: String +} + +export interface UploadModelResponse { + success: boolean, + maybe_sd_model_token?: String, + maybe_lora_model_token?: String, +} + +export const UploadModel = MakeRequest({ + method: "POST", + routingFunction: () => "/v1/image_gen/model/upload", +}); \ No newline at end of file diff --git a/packages/fakeyou.com/src/components/common/CoverImageInput/CoverImageInput.scss b/packages/fakeyou.com/src/components/common/CoverImageInput/CoverImageInput.scss new file mode 100644 index 0000000000..6151470f18 --- /dev/null +++ b/packages/fakeyou.com/src/components/common/CoverImageInput/CoverImageInput.scss @@ -0,0 +1,37 @@ +.fy-cover-img-input { + // background-color: red; + position: relative; + height: 0; + padding-bottom: 100%; + + .fy-cover-control { + position: absolute; + } + + .upload-control-btn { + background-color: rgba($secondary, 0.8); + backdrop-filter: blur(2px); + border: none; + margin: auto auto 1rem auto; + } + + .weight-initial-cover-img { + background-size: cover; + background-position: center; + border-radius: 0.5rem; + position: absolute; + // display: flex; + overflow: hidden; + height: 100%; + width: 100%; + // padding-bottom: 100%; + + div { + // background-color: red; + display: flex; + height: 100%; + width: 100%; + position: absolute; + } + } +} \ No newline at end of file diff --git a/packages/fakeyou.com/src/components/common/CoverImageInput/CoverImageInput.tsx b/packages/fakeyou.com/src/components/common/CoverImageInput/CoverImageInput.tsx index 23d6bbfe62..b5125e6b6c 100644 --- a/packages/fakeyou.com/src/components/common/CoverImageInput/CoverImageInput.tsx +++ b/packages/fakeyou.com/src/components/common/CoverImageInput/CoverImageInput.tsx @@ -40,23 +40,25 @@ export default function CoverImageInput({ currentPath, onClick, status, ...rest const [editingImg, editingImgSet] = useState(0); const transitions = useTransition(editingImg, basicTransition({})); - return transitions((style, i) => !currentPath || i ? - 1, placeholderIcon: faImage }} > -
- + return
+ { transitions((style, i) => !currentPath || i ? + 1, placeholderIcon: faImage }} > +
+ +
+
+
: +
+
- -
: -
-
-
); + )} +
; }; \ No newline at end of file diff --git a/packages/fakeyou.com/src/hooks/index.tsx b/packages/fakeyou.com/src/hooks/index.tsx index 3191fdaf3c..eaec31ad30 100644 --- a/packages/fakeyou.com/src/hooks/index.tsx +++ b/packages/fakeyou.com/src/hooks/index.tsx @@ -1,4 +1,5 @@ import useBookmarks from './useBookmarks'; +import useCoverImgUpload from './useCoverImgUpload'; import useFile from './useFile'; import useHover from './useHover'; import useId from './useId'; @@ -10,12 +11,14 @@ import useListContent from './useListContent'; import useLocalize from './useLocalize'; import useMedia from './useMedia'; import useRatings from './useRatings'; +import useSdUpload from './useSdUpload'; import useSession from './useSession'; import useVideo from './useVideo'; import useWeightFetch from './useWeightFetch'; export { useBookmarks, + useCoverImgUpload, useFile, useHover, useId, @@ -27,6 +30,7 @@ export { useLocalize, useMedia, useRatings, + useSdUpload, useSession, useVideo, useWeightFetch diff --git a/packages/fakeyou.com/src/hooks/useCoverImgUpload/index.ts b/packages/fakeyou.com/src/hooks/useCoverImgUpload/index.ts new file mode 100644 index 0000000000..73c3606f76 --- /dev/null +++ b/packages/fakeyou.com/src/hooks/useCoverImgUpload/index.ts @@ -0,0 +1 @@ +export { default } from "./useCoverImgUpload"; \ No newline at end of file diff --git a/packages/fakeyou.com/src/hooks/useCoverImgUpload/useCoverImgUpload.tsx b/packages/fakeyou.com/src/hooks/useCoverImgUpload/useCoverImgUpload.tsx new file mode 100644 index 0000000000..0e7106349b --- /dev/null +++ b/packages/fakeyou.com/src/hooks/useCoverImgUpload/useCoverImgUpload.tsx @@ -0,0 +1,31 @@ +import { useState } from 'react'; +import { UploadMedia, UploadMediaResponse } from "@storyteller/components/src/api/media_files/UploadMedia"; +import { FetchStatus } from "@storyteller/components/src/api/_common/SharedFetchTypes"; +import { v4 as uuidv4 } from "uuid"; +import { useFile } from "hooks"; + + +export default function useCoverImgUpload() { + const fileProps = useFile({}); + const [token, tokenSet] = useState(""); + const [status, statusSet] = useState(FetchStatus.ready); + + const upload = (e: any) => { + if (fileProps.file && status < 2) { + statusSet(FetchStatus.in_progress); + UploadMedia({ + uuid_idempotency_token: uuidv4(), + file: fileProps.file, + source: "file", + }) // if there an audio file it uploads here + .then((res: UploadMediaResponse) => { + if ("media_file_token" in res) { + statusSet(FetchStatus.success); + tokenSet(res.media_file_token); + } + }); + } + }; + + return { fileProps, status, token, upload }; +}; \ No newline at end of file diff --git a/packages/fakeyou.com/src/hooks/useSdUpload/index.ts b/packages/fakeyou.com/src/hooks/useSdUpload/index.ts new file mode 100644 index 0000000000..8918919942 --- /dev/null +++ b/packages/fakeyou.com/src/hooks/useSdUpload/index.ts @@ -0,0 +1 @@ +export { default } from "./useSdUpload"; \ No newline at end of file diff --git a/packages/fakeyou.com/src/hooks/useSdUpload/useSdUpload.tsx b/packages/fakeyou.com/src/hooks/useSdUpload/useSdUpload.tsx new file mode 100644 index 0000000000..700e7178e9 --- /dev/null +++ b/packages/fakeyou.com/src/hooks/useSdUpload/useSdUpload.tsx @@ -0,0 +1,52 @@ +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 { v4 as uuidv4 } from "uuid"; + +// interface Props { +// value?: any; +// } + +// this hook is mostly for organizational purposes while I work -V + +export default function useSdUpload() { + const [title, titleSet] = useState(""); + const [uploadPath,uploadPathSet] = useState(""); + const [visibility, visibilitySet] = useState("public"); + const [descriptionMD, descriptionMDSet] = useState(""); + const [writeStatus, writeStatusSet] = useState(FetchStatus.paused); + const coverImg = useCoverImgUpload(); + + const onChange = ({ target }: { target: { name: string; value: any } }) => { + const todo: { [key: string]: (x: any) => void } = { + descriptionMDSet, + uploadPathSet, + titleSet, + visibilitySet + }; + todo[target.name + "Set"](target.value); + }; + + const upload = () => { + writeStatusSet(FetchStatus.in_progress); + UploadModel("",{ + ...coverImg.token ? { cover_image_media_file_token: coverImg.token } : {}, + description: descriptionMD, + uuid_idempotency_token: uuidv4(), + type_of_inference: "inference", + maybe_upload_path: uploadPath, + title, + visibility + }) + .then((res: any) => { + writeStatusSet(FetchStatus.success); + console.log("🌠",res); + // history.replace(`/weight/${token}`); + }) + .catch(err => { + writeStatusSet(FetchStatus.error); + }); + } + return { coverImg, descriptionMD, onChange, title, upload, uploadPath, visibility, writeStatus }; +}; \ No newline at end of file diff --git a/packages/fakeyou.com/src/hooks/useWeightFetch/useWeightFetch.tsx b/packages/fakeyou.com/src/hooks/useWeightFetch/useWeightFetch.tsx index f8e284a0b5..246b751654 100644 --- a/packages/fakeyou.com/src/hooks/useWeightFetch/useWeightFetch.tsx +++ b/packages/fakeyou.com/src/hooks/useWeightFetch/useWeightFetch.tsx @@ -1,15 +1,10 @@ import { useEffect, useState } from "react"; import { useHistory } from "react-router-dom"; import { FetchStatus } from "@storyteller/components/src/api/_common/SharedFetchTypes"; -import { - GetWeight, - Weight, -} from "@storyteller/components/src/api/weights/GetWeight"; +import { GetWeight, Weight } from "@storyteller/components/src/api/weights/GetWeight"; import { UpdateWeight } from "@storyteller/components/src/api/weights/UpdateWeight"; import { DeleteWeight } from "@storyteller/components/src/api/weights/DeleteWeight"; -import { UploadMedia, UploadMediaResponse } from "@storyteller/components/src/api/media_files/UploadMedia"; -import { v4 as uuidv4 } from "uuid"; -import { useFile } from "hooks"; +import { useCoverImgUpload } from "hooks"; interface Props { onRemove?: (x: any) => void; @@ -23,12 +18,10 @@ export default function useWeightFetch({ onRemove = () => {}, token }: Props) { const [title, titleSet] = useState(""); const [visibility, visibilitySet] = useState("public"); const [descriptionMD, descriptionMDSet] = useState(""); - const [imgMediaFile, imgMediaFileSet] = useState(""); - const [imgUploadStatus, imgUploadStatusSet] = useState(FetchStatus.ready); - const imageProps = useFile({}); const isLoading = status === FetchStatus.ready || status === FetchStatus.in_progress; const fetchError = status === FetchStatus.error; const history = useHistory(); + const coverImg = useCoverImgUpload(); const onChange = ({ target }: { target: { name: string; value: any } }) => { const todo: { [key: string]: (x: any) => void } = { @@ -42,7 +35,7 @@ export default function useWeightFetch({ onRemove = () => {}, token }: Props) { const update = () => { writeStatusSet(FetchStatus.in_progress); UpdateWeight(token,{ - ...imgMediaFile ? { cover_image_media_file_token: imgMediaFile } : {}, + ...coverImg.token ? { cover_image_media_file_token: coverImg.token } : {}, description_markdown: descriptionMD, description_rendered_html: data?.description_rendered_html || "", title, @@ -69,23 +62,6 @@ export default function useWeightFetch({ onRemove = () => {}, token }: Props) { onRemove(res); }); }; - - const uploadCoverImg = (e: any) => { - if (imageProps.file && imgUploadStatus < 2) { - imgUploadStatusSet(FetchStatus.in_progress); - UploadMedia({ - uuid_idempotency_token: uuidv4(), - file: imageProps.file, - source: "file", - }) // if there an audio file it uploads here - .then((res: UploadMediaResponse) => { - if ("media_file_token" in res) { - imgUploadStatusSet(FetchStatus.success); - imgMediaFileSet(res.media_file_token); - } - }); - } - }; useEffect(() => { if (token && !data && status === FetchStatus.ready) { @@ -109,5 +85,5 @@ export default function useWeightFetch({ onRemove = () => {}, token }: Props) { } }, [status, token, data]); - return { data, fetchError, imgMediaFile, imgMediaFileSet, imageProps, imgUploadStatus, isLoading, descriptionMD, onChange, remove, status, title, update, uploadCoverImg, visibility, writeStatus }; + return { coverImg, data, fetchError, isLoading, descriptionMD, onChange, remove, status, title, update, visibility, writeStatus }; }; diff --git a/packages/fakeyou.com/src/v2/view/pages/upload/UploadSdWeightPage.tsx b/packages/fakeyou.com/src/v2/view/pages/upload/UploadSdWeightPage.tsx index 11659f426a..b39b01aa3b 100644 --- a/packages/fakeyou.com/src/v2/view/pages/upload/UploadSdWeightPage.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/upload/UploadSdWeightPage.tsx @@ -9,6 +9,7 @@ import PageHeader from "components/layout/PageHeader"; import { Button, Container, + CoverImageInput, Panel, Skeleton, SplitPanel, @@ -17,6 +18,7 @@ import { TempTextArea, } from "components/common"; import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper"; +import { useSdUpload } from "hooks"; interface UploadSdWeightPageProps { sessionWrapper: SessionWrapper; @@ -34,6 +36,8 @@ export default function UploadSdWeightPage({ { label: "Private", value: "private" }, ]; + const { coverImg, descriptionMD, onChange, title, upload, uploadPath, visibility } = useSdUpload(); + if (!sessionWrapper.isLoggedIn() && !isLoading) { return ( @@ -85,13 +89,21 @@ export default function UploadSdWeightPage({
+
@@ -99,8 +111,10 @@ export default function UploadSdWeightPage({ @@ -110,15 +124,19 @@ export default function UploadSdWeightPage({ icon: faEye, label: "Visibility", name: "visibility", + onChange, options: visibilityOptions, placeholder: "Voice name", + value: visibility, }} />
@@ -129,6 +147,7 @@ export default function UploadSdWeightPage({
diff --git a/packages/fakeyou.com/src/v2/view/pages/weight/WeightEditPage.tsx b/packages/fakeyou.com/src/v2/view/pages/weight/WeightEditPage.tsx index fbc204fa7e..7f9f5fdd73 100644 --- a/packages/fakeyou.com/src/v2/view/pages/weight/WeightEditPage.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/weight/WeightEditPage.tsx @@ -37,16 +37,14 @@ export default function WeightEditPage({ const [weightCreatorToken] = useState(""); const { + coverImg, data: weight, descriptionMD, // fetchError, // imgMediaFile, - imageProps, - imgUploadStatus, isLoading, onChange, title, - uploadCoverImg, update, visibility, writeStatus @@ -119,14 +117,12 @@ export default function WeightEditPage({
-
- -
+