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/components/src/api/media_files/GetMediaFile.ts b/packages/components/src/api/media_files/GetMediaFile.ts
index 39f42bc1c7..1e87adf051 100644
--- a/packages/components/src/api/media_files/GetMediaFile.ts
+++ b/packages/components/src/api/media_files/GetMediaFile.ts
@@ -21,6 +21,7 @@ export interface MediaFile {
maybe_weight_creator: UserDetailsLight;
maybe_cover_image_public_bucket_path: string;
};
+ maybe_text_transcript?: string;
}
export enum MediaFileLookupError {
diff --git a/packages/fakeyou.com/src/App.tsx b/packages/fakeyou.com/src/App.tsx
index 8c2da1974f..c4c690dbd9 100644
--- a/packages/fakeyou.com/src/App.tsx
+++ b/packages/fakeyou.com/src/App.tsx
@@ -300,6 +300,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);
@@ -310,6 +312,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();
@@ -337,7 +343,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/Card/AudioCard/AudioCard.tsx b/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx
index dfcf6fe4bb..341af4ac8e 100644
--- a/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx
+++ b/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx
@@ -106,17 +106,22 @@ export default function AudioCard({
- {data.origin.maybe_model
+ {data.origin?.maybe_model
? data.origin.maybe_model.title
: "Media Audio"}
{timeAgo}
+ {data.maybe_text_transcript && (
+
+ {data.maybe_text_transcript}
+
+ )}
-
+
{timeAgo}
: ;
+}
diff --git a/packages/fakeyou.com/src/components/common/Card/FBXCard/FBXCard.tsx b/packages/fakeyou.com/src/components/common/Card/FBXCard/FBXCard.tsx
index 9043ef0628..942aef323c 100644
--- a/packages/fakeyou.com/src/components/common/Card/FBXCard/FBXCard.tsx
+++ b/packages/fakeyou.com/src/components/common/Card/FBXCard/FBXCard.tsx
@@ -54,8 +54,8 @@ export default function FBXCard({
{timeAgo}
{timeAgo}
{timeAgo}
;
default:
- return Unsupported media type
;
+ return Unsupported weight type
;
}
}
diff --git a/packages/fakeyou.com/src/components/common/Card/getCardUrl.tsx b/packages/fakeyou.com/src/components/common/Card/getCardUrl.tsx
index 98450f2076..0115ff1e05 100644
--- a/packages/fakeyou.com/src/components/common/Card/getCardUrl.tsx
+++ b/packages/fakeyou.com/src/components/common/Card/getCardUrl.tsx
@@ -1,5 +1,7 @@
const getCardUrl = (data: any, source: string, type: string) => {
- let prefix = type === "media" ? `/media/${data.token}` : `/weight/${data.weight_token || data.details?.entity_token}`;
+ let isBookmark = data.token && data.token.startsWith("ub_");
+ let bookmarkedToken = data.details?.entity_token;
+ let prefix = type === "media" ? `/media/${isBookmark ? bookmarkedToken : data.token}` : `/weight/${isBookmark ? bookmarkedToken : data.weight_token }`;
let suffix = source ? "?source=" + source : "";
return prefix + suffix;
}
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.
+
+ )}
+ >
) : (
option.value === value)?.label || "";
- const onChange = ({ value }: any) =>
- inChange({ target: { value, name, type: "select" } });
+ const onChange = (option: any, x: any) => {
+ // console.log("๐งช",option, x); // WIP -V
+ if (Array.isArray(option)) {
+
+ } else {
+ inChange({ target: {value: option.value, name, type: "select" } });
+ }
+ }
const className = `${icon ? " input-icon" : ""}${
small ? " select-small" : ""
}`;
diff --git a/packages/fakeyou.com/src/components/common/index.tsx b/packages/fakeyou.com/src/components/common/index.tsx
index 5ad6a2010c..6800f6da7a 100644
--- a/packages/fakeyou.com/src/components/common/index.tsx
+++ b/packages/fakeyou.com/src/components/common/index.tsx
@@ -21,6 +21,7 @@ import MocapInput from "./MocapInput";
import Modal from "./Modal";
import NumberSlider from "./NumberSlider";
import NumberSliderV2 from "./NumberSliderV2";
+import Pagination from "./Pagination";
import Panel from "./Panel";
import Radio from "./Radio";
import SegmentButtons from "./SegmentButtons";
@@ -66,6 +67,7 @@ export {
Modal,
NumberSlider,
NumberSliderV2,
+ Pagination,
Panel,
Radio,
SegmentButtons,
diff --git a/packages/fakeyou.com/src/components/entities/EntityInput/EntityInput.tsx b/packages/fakeyou.com/src/components/entities/EntityInput/EntityInput.tsx
index 128d56b352..99e47b2d9a 100644
--- a/packages/fakeyou.com/src/components/entities/EntityInput/EntityInput.tsx
+++ b/packages/fakeyou.com/src/components/entities/EntityInput/EntityInput.tsx
@@ -3,45 +3,27 @@ import { useLocation } from "react-router-dom";
import { a, useTransition } from "@react-spring/web";
import { MediaFile } from "@storyteller/components/src/api/media_files/GetMedia";
import Iframe from "react-iframe";
-import { MediaBrowser } from "components/modals";
-import { FileWrapper, Label, Spinner } from "components/common";
-import { EntityType, MediaFilterProp, WeightFilterProp } from "components/entities/EntityTypes";
+import { Label, Spinner } from "components/common";
+import { AcceptTypes, EntityInputMode, EntityModeProp } from "components/entities/EntityTypes";
import { useFile, useMedia, useModal, useSession } from "hooks";
import { BucketConfig } from "@storyteller/components/src/api/BucketConfig";
-import { faDiagramSankey, faFile, faFileArrowUp, faGrid, faImage, faPersonWalking, faWaveform } from "@fortawesome/pro-solid-svg-icons";
-import { FontAwesomeIcon as Icon } from "@fortawesome/react-fontawesome";
import { UploadMedia, UploadMediaResponse } from "@storyteller/components/src/api/media_files/UploadMedia";
import { v4 as uuidv4 } from "uuid";
+import EntityInputEmpty from "./EntityInputEmpty";
import "./EntityInput.scss";
-// enum EntityInputMode {
-// Bookmarks = "bookmarks",
-// Media = "media",
-// Weights = "weights",
-// SearchWeights = "searchWeights",
-// }
-
interface Props {
+ accept?: AcceptTypes | AcceptTypes[],
aspectRatio?: "square" | "landscape" | "portrait",
- mediaType?: MediaFilterProp,
label?: string,
onChange?: any,
- type: string,
- weightType?: WeightFilterProp
+ type: EntityModeProp,
}
-interface SlideProps {
+export interface SlideProps {
media?: MediaFile
};
-interface EmptySlideProps extends SlideProps {
- entityType: EntityType,
- filterType: MediaFilterProp | WeightFilterProp,
- inputProps?: any,
- open: any,
- user: any
-};
-
interface AniProps {
animating: boolean,
className: string,
@@ -56,12 +38,12 @@ const MediaBusy = () => {
const MocapInputFull = ({ media }: SlideProps) => {
const bucketConfig = new BucketConfig();
- const bvhUrl = media?.public_bucket_path ? bucketConfig.getGcsUrl(media.public_bucket_path) : "";
+ const mediaUrl = media?.public_bucket_path ? bucketConfig.getGcsUrl(media.public_bucket_path) : "";
return <>
@@ -71,42 +53,6 @@ const MocapInputFull = ({ media }: SlideProps) => {
>;
};
-const MediaPickerEmpty = ({ entityType, filterType, open, inputProps, user, ...rest }: EmptySlideProps) => {
- const browserClick = () => open({
- component: MediaBrowser,
- props: { entityType, filterType, username: user?.username || "", ...rest }
- });
-
- const mediaIcons = () => {
- switch (filterType) {
- case "audio": return faWaveform;
- case "image": return faImage;
- case "bvh": return faPersonWalking;
- default: return faFile;
- }
- }
-
- return <>
-
-
- { entityType === EntityType.media &&
-
- <>
-
-
- Upload, click or drag here
- { filterType !== "all" && { filterType } files supported }
-
- >
- }
-
-
- Choose from your { ["","media","weights"][entityType] }
-
-
- >;
-}
-
const AniMod = ({ animating, className, isLeaving, render: Render, style, ...rest }: AniProps) =>
;
-export default function EntityInput({ aspectRatio = "square", label, onChange, mediaType, weightType, ...rest }: Props) {
- const entityType = mediaType ? EntityType.media : weightType ? EntityType.weights : EntityType.unknown;
- const filterType = mediaType || weightType || "all";
+export default function EntityInput({ accept: inAccept, aspectRatio = "square", label, onChange, type, ...rest }: Props) {
+ const accept = Array.isArray(inAccept) ? inAccept : [inAccept];
+ const inputMode = EntityInputMode[type];
const { search } = useLocation();
const presetToken = search ? new URLSearchParams(search).get("preset_token") : "";
const [mediaToken,mediaTokenSet] = useState(presetToken || "");
const { media, mediaSet } = useMedia({ mediaToken });
const { user } = useSession();
const { open } = useModal();
+
+ const selectToken = (token: string) => {
+ mediaTokenSet(token);
+ onChange({ target: { name: "temp", value: token } });
+ };
+
const { clear, inputProps } = useFile({
onChange: (inputFile: any) => {
if (inputFile) UploadMedia({
@@ -133,17 +85,17 @@ export default function EntityInput({ aspectRatio = "square", label, onChange, m
.then((res: UploadMediaResponse) => {
if ("media_file_token" in res) {
clear();
- mediaTokenSet(res.media_file_token);
+ selectToken(res.media_file_token);
}
});
else console.log("๐ฅบ no file");
}
});
const onSelect = (data: MediaFile) => {
- mediaSet(data)
- console.log("๐
",data);
- onChange({ target: { name: "temp", value: data.token } });
- }
+ mediaSet(data);
+ selectToken(data.token);
+ };
+
const busy = false;
const index = busy ? 0 : media ? 1 : 2;
const [animating,animatingSet] = useState(false);
@@ -157,12 +109,10 @@ export default function EntityInput({ aspectRatio = "square", label, onChange, m
onStart: () => animatingSet(true)
});
-
return <>
{
- // media ?
:
transitions((style: any, i: number, state: any) => {
let isLeaving = state.phase === "leave";
let sharedProps = { animating, isLeaving, media, style };
@@ -170,9 +120,8 @@ export default function EntityInput({ aspectRatio = "square", label, onChange, m
return [
,
,
-
+
][i];
-
})
}
diff --git a/packages/fakeyou.com/src/components/entities/EntityInput/EntityInputEmpty.tsx b/packages/fakeyou.com/src/components/entities/EntityInput/EntityInputEmpty.tsx
new file mode 100644
index 0000000000..ce401f7d4e
--- /dev/null
+++ b/packages/fakeyou.com/src/components/entities/EntityInput/EntityInputEmpty.tsx
@@ -0,0 +1,67 @@
+import React from "react";
+import { AcceptTypes, EntityInputMode, MediaFilters } from "components/entities/EntityTypes";
+import { SlideProps } from "./EntityInput";
+import { MediaBrowser } from "components/modals";
+import { FileWrapper } from "components/common";
+import { FontAwesomeIcon as Icon } from "@fortawesome/react-fontawesome";
+import {
+ faDiagramSankey,
+ faFile,
+ faFileArrowUp,
+ faGrid,
+ faImage,
+ faPersonWalking,
+ faWaveform
+ } from "@fortawesome/pro-solid-svg-icons";
+
+
+interface EmptySlideProps extends SlideProps {
+ accept?: AcceptTypes[],
+ inputMode: EntityInputMode,
+ inputProps?: any,
+ open: any,
+ user: any
+};
+
+const mediaCheck = (value: string) => (value in MediaFilters);
+
+export default function EntityInputEmpty({ accept, open, inputMode, inputProps, user, ...rest }: EmptySlideProps) {
+ const accepted = accept ? accept : [];
+ const isMedia = !!accepted.find(mediaCheck);
+ const browserClick = () => open({
+ component: MediaBrowser,
+ props: { accept, inputMode, username: user?.username || "", ...rest }
+ });
+
+ const mediaIcons = () => {
+ switch (accepted[0]) {
+ case "audio": return faWaveform;
+ case "image": return faImage;
+ case "bvh": return faPersonWalking;
+ default: return faFile;
+ }
+ };
+
+
+ const supported = `${ accepted.length ? accepted.join(", ") : accepted[0] } files supported`;
+
+ return <>
+
+
+ { isMedia &&
+
+ <>
+
+
+ Upload, click or drag here
+ { accept && { supported } }
+
+ >
+ }
+
+
+ Choose from your { ["bookmarks","media","weights"][inputMode] }
+
+
+ >;
+};
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/components/entities/EntityTypes.tsx b/packages/fakeyou.com/src/components/entities/EntityTypes.tsx
index cb36434825..06a2193f80 100644
--- a/packages/fakeyou.com/src/components/entities/EntityTypes.tsx
+++ b/packages/fakeyou.com/src/components/entities/EntityTypes.tsx
@@ -1,9 +1,17 @@
+export enum EntityInputMode {
+ bookmarks,
+ media,
+ weights,
+ searchWeights,
+}
+
export enum MediaFilters {
all,
audio,
image,
video,
bvh,
+ glb,
gltf,
fbx
}
@@ -21,8 +29,10 @@ export enum WeightsFilters {
vall_e
}
+export type EntityModeProp = keyof typeof EntityInputMode;
export type MediaFilterProp = keyof typeof MediaFilters;
export type WeightFilterProp = keyof typeof WeightsFilters;
+export type AcceptTypes = MediaFilterProp | WeightFilterProp;
export enum EntityType {
unknown,
@@ -30,12 +40,15 @@ export enum EntityType {
weights
}
-export const EntityFilterOptions = ( mode: EntityType, t = (v:string) => v) => {
- const filters = [{},MediaFilters,WeightsFilters][mode];
- return mode ? Object.values(filters)
+export const EntityFilterOptions = ( mode?: EntityInputMode, t = (v:string) => v) => {
+ const bookmarkFilters = Object.keys({ ...MediaFilters, ...WeightsFilters }).filter(val => isNaN(Number(val))).reduce((obj,current) => ({ ...obj, [current]: current }),{});;
+
+ const filters = mode !== undefined ? [bookmarkFilters,MediaFilters,WeightsFilters,WeightsFilters][mode] : EntityInputMode;
+
+ return Object.values(filters)
.filter(val => isNaN(Number(val)))
.map((value) => {
if (typeof value === "string") return { value, label: t(value) }
return { label: "all", value: "all" };
- }) : [];
+ });
};
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/components/entities/MediaList/MediaList.tsx b/packages/fakeyou.com/src/components/entities/MediaList/MediaList.tsx
index 2a5522647f..8f27530666 100644
--- a/packages/fakeyou.com/src/components/entities/MediaList/MediaList.tsx
+++ b/packages/fakeyou.com/src/components/entities/MediaList/MediaList.tsx
@@ -24,7 +24,7 @@ const MediaCards = ({ props, type }: MediaCardsProps) => {
return ;
case "video":
return ;
- case "bvh":
+ case "bvh": case "glb": case "gltf":
return ;
default:
return Unsupported media type
;
diff --git a/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx b/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx
index ce139e5a3a..6072312522 100644
--- a/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx
+++ b/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx
@@ -352,30 +352,26 @@ export default function SideNav({
);
}
- let maybeImageGeneration = <>>;
-
- 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/components/modals/MediaBrowser/MediaBrowser.tsx b/packages/fakeyou.com/src/components/modals/MediaBrowser/MediaBrowser.tsx
index fff6497302..c23fda4946 100644
--- a/packages/fakeyou.com/src/components/modals/MediaBrowser/MediaBrowser.tsx
+++ b/packages/fakeyou.com/src/components/modals/MediaBrowser/MediaBrowser.tsx
@@ -1,33 +1,27 @@
import React, { useState } from "react";
import { MediaList } from "components/entities";
-import {
- EntityType,
- EntityFilterOptions,
- MediaFilterProp,
- WeightFilterProp,
-} from "components/entities/EntityTypes";
-import { TempSelect } from "components/common";
+import { AcceptTypes, EntityInputMode, EntityFilterOptions, } from "components/entities/EntityTypes";
+import { Pagination, TempSelect } from "components/common";
import AudioPlayerProvider from "components/common/AudioPlayer/AudioPlayerContext";
import SkeletonCard from "components/common/Card/SkeletonCard";
-import Pagination from "components/common/Pagination";
+import { GetBookmarksByUser } from "@storyteller/components/src/api/bookmarks/GetBookmarksByUser";
import { GetMediaByUser } from "@storyteller/components/src/api/media_files/GetMediaByUser";
import { GetWeightsByUser } from "@storyteller/components/src/api/weights/GetWeightsByUser";
import { SearchWeights } from "@storyteller/components/src/api/weights/SearchWeights";
import { MediaFile } from "@storyteller/components/src/api/media_files/GetMedia";
import { Weight } from "@storyteller/components/src/api/weights/GetWeight";
-import { useListContent, useRatings } from "hooks";
-import {
- faArrowDownWideShort,
- faFilter,
-} from "@fortawesome/pro-solid-svg-icons";
+import { useListContent,
+ // useRatings
+} from "hooks";
+import { faArrowDownWideShort, faFilter } from "@fortawesome/pro-solid-svg-icons";
import prepFilter from "resources/prepFilter";
import ModalHeader from "../ModalHeader";
import "./MediaBrowser.scss";
interface Props {
- entityType: EntityType;
- filterType?: MediaFilterProp | WeightFilterProp;
+ accept?: AcceptTypes[],
handleClose: any;
+ inputMode: EntityInputMode;
mediaToken: string;
onSelect?: any;
owner?: string;
@@ -36,30 +30,28 @@ interface Props {
}
export default function MediaBrowser({
- entityType,
- filterType: inputFilter,
+ accept,
mediaToken,
handleClose = () => {},
+ inputMode,
onSelect,
owner,
search,
- username,
+ username
}: Props) {
- const ratings = useRatings();
+ // const ratings = useRatings();
const [showMasonryGrid, setShowMasonryGrid] = useState(true);
- const [filterType, filterTypeSet] = useState(inputFilter || "all");
+ const [filterType, filterTypeSet] = useState(accept ? accept[0] : "all");
const [list, listSet] = useState([]);
- const fetcher = search
- ? SearchWeights
- : [() => {}, GetMediaByUser, GetWeightsByUser][entityType] ||
- GetMediaByUser;
+ const fetcher = [GetBookmarksByUser,GetMediaByUser,GetWeightsByUser,SearchWeights][inputMode];
+
const entities = useListContent({
debug: "media browser",
addQueries: {
...(search ? {} : { page_size: 24 }),
...prepFilter(
filterType,
- ["", "filter_media_type", "maybe_scoped_weight_type"][entityType]
+ ["maybe_scoped_weight_type", "filter_media_type", "maybe_scoped_weight_type",""][inputMode]
),
},
addSetters: { filterTypeSet },
@@ -69,12 +61,12 @@ export default function MediaBrowser({
onInputChange: () => setShowMasonryGrid(false),
onSuccess: res => {
// bookmarks.gather({ res, key: "token" });
- ratings.gather({ res, key: "token" });
+ // ratings.gather({ res, key: "token" });
setShowMasonryGrid(true);
},
...(search ? { request: { search_term: search } } : {}),
requestList: true,
- ...(search ? { resultsKey: "weights" } : {}),
+ // ...(search ? { resultsKey: "weights" } : {}),
urlParam: owner || username,
urlUpdate: false,
});
@@ -95,16 +87,25 @@ export default function MediaBrowser({
// { value: "mostliked", label: "Most Liked" },
];
- const title = ["", `${owner ? owner + "'s " : ""}Media`, "Weights"][
- entityType
- ];
+ const onwerTxt = (entityName: string) => `${ owner ? owner + "'s " : "" }${ entityName }`;
+
+ const title = [
+ onwerTxt("Bookmarks"),
+ onwerTxt("Media"),
+ onwerTxt("Weights"),
+ "Search"
+ ][inputMode];
const onClick = (data: any) => {
- console.log("๐ฉต", data);
onSelect(data);
handleClose();
};
+ const filterOptions = accept ? accept.map((value: string) => ({
+ value,
+ label: value
+ })) : EntityFilterOptions(inputMode);
+
return (
<>
@@ -117,11 +118,11 @@ export default function MediaBrowser({
value: entities.sort,
}}
/>
- {(!inputFilter || inputFilter === "all") && (
+ {(!accept || (accept && accept.length) ) && (
- !otherUserToken || !user?.user_token
- ? false
- : user.user_token === otherUserToken;
+ !otherUserToken || !user?.user_token ? false : user.user_token === otherUserToken;
const canEditTtsModel = (userToken: string) =>
user?.canEditOtherUsersTtsModels || userTokenMatch(userToken);
const canBanUsers = () => user?.can_ban_users || false;
+ const studioAccessCheck = (content: React.ElementType) => !user?.can_access_studio ? : content;
return (
any,
user?: any;
userTokenMatch: (token: string) => boolean;
}
@@ -31,6 +32,7 @@ export default createContext({
check: () => false,
loggedIn: false,
sessionFetched: false,
+ studioAccessCheck: () => null,
modal: {
close: () => {},
open: () => {},
diff --git a/packages/fakeyou.com/src/hooks/useListContent/useListContent.tsx b/packages/fakeyou.com/src/hooks/useListContent/useListContent.tsx
index 066fedbd0f..65c17358fa 100644
--- a/packages/fakeyou.com/src/hooks/useListContent/useListContent.tsx
+++ b/packages/fakeyou.com/src/hooks/useListContent/useListContent.tsx
@@ -53,6 +53,7 @@ export default function useListContent({
const fetchError = status === FetchStatus.error;
const pageChange = (page: number) => {
+ onInputChange();
pageSet(page);
statusSet(FetchStatus.ready);
};
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/EngineCompositor/EngineCompositor.tsx b/packages/fakeyou.com/src/v2/view/pages/EngineCompositor/EngineCompositor.tsx
index 48266d87ef..3ca4c97261 100644
--- a/packages/fakeyou.com/src/v2/view/pages/EngineCompositor/EngineCompositor.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/EngineCompositor/EngineCompositor.tsx
@@ -60,11 +60,11 @@ export default function EngineCompositor({ value, sessionWrapper }: Props) {
diff --git a/packages/fakeyou.com/src/v2/view/pages/dev_upload/DevMediaInput.tsx b/packages/fakeyou.com/src/v2/view/pages/dev_upload/DevMediaInput.tsx
index a72c9f85b4..7ce3c99bc3 100644
--- a/packages/fakeyou.com/src/v2/view/pages/dev_upload/DevMediaInput.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/dev_upload/DevMediaInput.tsx
@@ -1,7 +1,7 @@
import React, { useState } from "react";
import { EntityInput } from "components/entities";
-import { EntityFilterOptions, EntityType, MediaFilterProp, WeightFilterProp } from "components/entities/EntityTypes";
-import { useModal } from "hooks";
+import { EntityFilterOptions, EntityInputMode, EntityModeProp } from "components/entities/EntityTypes";
+import { useModal, useSession } from "hooks";
import { InferenceJobsModal } from "components/modals";
import { Button, SegmentButtons, TempInput, TempSelect } from "components/common";
@@ -9,42 +9,69 @@ interface Props {
value?: any;
}
+interface Yank {
+ [key: string]: string
+}
+
export default function DevMediaInput({ value }: Props) {
+ const { studioAccessCheck } = useSession();
const [mediaToken,mediaTokenSet] = useState();
- const [mediaType,mediaTypeSet] = useState("all");
- const [weightType,weightTypeSet] = useState("all");
- const [entityType,entityTypeSet] = useState(EntityType.media);
+ const [mode, modeSet] = useState("media");
+ const [filters,filtersSet] = useState({
+ bookmarks: "",
+ media: "",
+ weights: "",
+ searchWeights: "",
+ });
const [owner,ownerSet] = useState("");
const onChange = ({ target }: any) => mediaTokenSet(target.value);
-
const { open } = useModal();
- const options = [{ label: "Media", value: EntityType.media },{ label: "Weights", value: EntityType.weights }];
- const changeFilter = ({ target }: { target: any }) => [mediaTypeSet,mediaTypeSet,weightTypeSet][entityType](target.value);
+ const inputMode = EntityInputMode[mode];
+
+ const options = EntityFilterOptions();
+ const filterOptions = EntityFilterOptions(inputMode);
+
+ // console.log("โ", mode, inputMode, filterOptions);
+
+ const changeFilter = ({ target }: { target: any }) => filtersSet({ ...filters, [inputMode]: target.value });
const openModal = () => open({ component: InferenceJobsModal });
- return
+ return studioAccessCheck(
{ [526,187].map((num = 0) => String.fromCodePoint(128000 + num)) }
- entityTypeSet(target.value), options, value: entityType }}/>
+ modeSet(target.value), options, value: mode }}/>
ownerSet(target.value), placeholder: "User" }}/>
-
-
-
-
- { mediaToken }
-
+{
+ //
+ // { filterOptions.map((option,i) => {
+ // return
+ // }) }
+ //
+ }
+
+
+
+
+ { mediaToken }
+
-
;
+
);
};
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/v2/view/pages/dev_upload/DevUpload.tsx b/packages/fakeyou.com/src/v2/view/pages/dev_upload/DevUpload.tsx
index 97c03cfe00..da137e24b5 100644
--- a/packages/fakeyou.com/src/v2/view/pages/dev_upload/DevUpload.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/dev_upload/DevUpload.tsx
@@ -1,19 +1,18 @@
+import React, { useState } from "react";
import Panel from "components/common/Panel";
import Container from "components/common/Container";
import PageHeader from "components/layout/PageHeader";
-import React, { useState } from "react";
+import { useSession } from "hooks";
import { Button } from "components/common";
import { faUpload } from "@fortawesome/pro-solid-svg-icons";
-import {
- UploadMedia,
- UploadMediaResponse,
-} from "@storyteller/components/src/api/media_files/UploadMedia";
+import { UploadMedia, UploadMediaResponse, } from "@storyteller/components/src/api/media_files/UploadMedia";
import { v4 as uuidv4 } from "uuid";
import { Link } from "react-router-dom";
interface DevUploadProps {}
export default function DevUpload(props: DevUploadProps) {
+ const { studioAccessCheck } = useSession();
const [file, fileSet] = useState(null);
const [tokens, tokensSet] = useState([]);
@@ -38,7 +37,7 @@ export default function DevUpload(props: DevUploadProps) {
else console.log("๐ฅบ no file");
};
- return (
+ return studioAccessCheck(
{/* Show TTS text input if it is a TTS result */}
- {mediaFile.public_bucket_path.includes("tts_inference_output") && (
+ {mediaFile.maybe_text_transcript && (
- Audio Text
+ Audio Text Transcript
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
- do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- Pellentesque elit ullamcorper dignissim cras tincidunt
- lobortis. Integer malesuada nunc vel risus commodo viverra
- maecenas accumsan lacus.
-
+
{mediaFile.maybe_text_transcript}
)}
@@ -401,14 +395,14 @@ export default function MediaPage() {
}}
/>
+ {...{
+ large: true,
+ ...bookmarks.makeProps({
+ entityToken: token,
+ entityType: "media_file",
+ }),
+ }}
+ />
@@ -444,11 +438,11 @@ export default function MediaPage() {
}}
/>
) : null}
- {mediaFile?.media_type === MediaFileType.BVH ? (
+ {mediaFile?.media_type === MediaFileType.BVH || mediaFile?.media_type === MediaFileType.GLTF || mediaFile?.media_type === MediaFileType.GLB ? (
console.log("Layout complete!")}
>
{dataList.map((data: any, key: number) => {
- let weightProps = {
+ let props = {
bookmarks,
data,
+ // origin,
ratings,
showCreator: true,
source,
- type: "weights",
+ type: data.details?.entity_type === "media_file" ?
+ "media" : "weights", // this is gross, but I'm replacing all of this anyway -V
};
- // let mediaProps = {
- // bookmarks,
- // data,
- // origin,
- // type: "media",
- // showCreator: true,
- // };
-
return (
-
- {/* */}
+
);
})}
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 = <>>;
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 309b6ce077..61e247b956 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
@@ -82,7 +82,7 @@ function SdInferencePanel({
const [aspectRatio, setAspectRatio] = useState("square");
const [cfgScale, setCfgScale] = useState(7);
const [samples, setSamples] = useState(8);
- const [batchCount, setBatchCount] = useState(1);
+ const [batchCount, setBatchCount] = useState(3);
const [prompt, setPrompt] = useState("");
const [negativePrompt, setNegativePrompt] = useState("");
const onChange = onChanger({
@@ -104,7 +104,7 @@ function SdInferencePanel({
sampler: "DPM++ 2M Karras",
cfgScale: 7,
samples: 8,
- batchCount: 1,
+ batchCount: 3,
loraToken: null,
};
@@ -377,11 +377,36 @@ function SdInferencePanel({
value: aspectRatio,
}}
/>
+
+
Seed
@@ -402,15 +427,6 @@ function SdInferencePanel({
/>
-
)}
-
{" "}