From 1195b4488ad9a4cf6f91b0b3fa629ed463a84957 Mon Sep 17 00:00:00 2001
From: Victor <victor@storyteller.ai>
Date: Wed, 14 Feb 2024 23:52:29 -0800
Subject: [PATCH 01/14] added multiple file types on entity input, fixed
 uploaded media not enqueueing on Engine Compositor

---
 .../src/components/common/index.tsx           |  2 +
 .../entities/EntityInput/EntityInput.tsx      | 97 +++++--------------
 .../entities/EntityInput/EntityInputEmpty.tsx | 67 +++++++++++++
 .../src/components/entities/EntityTypes.tsx   | 19 +++-
 .../entities/MediaList/MediaList.tsx          |  2 +-
 .../modals/MediaBrowser/MediaBrowser.tsx      | 69 ++++++-------
 .../hooks/useListContent/useListContent.tsx   |  1 +
 .../EngineCompositor/EngineCompositor.tsx     |  2 +-
 .../view/pages/dev_upload/DevMediaInput.tsx   | 19 +++-
 9 files changed, 159 insertions(+), 119 deletions(-)
 create mode 100644 packages/fakeyou.com/src/components/entities/EntityInput/EntityInputEmpty.tsx

diff --git a/packages/fakeyou.com/src/components/common/index.tsx b/packages/fakeyou.com/src/components/common/index.tsx
index 8bb37476b1..83cad62017 100644
--- a/packages/fakeyou.com/src/components/common/index.tsx
+++ b/packages/fakeyou.com/src/components/common/index.tsx
@@ -20,6 +20,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";
@@ -63,6 +64,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 <>
     <Iframe
         {...{
-          url: `https://engine.fakeyou.com?mode=viewer&bvh=${bvhUrl}`,
+          url: `https://engine.fakeyou.com?mode=viewer&${media?.media_type}=${mediaUrl}`,
           className: "fy-entity-input-mocap-preview",
         }}
       />
@@ -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 <>
-    <Icon {...{ className: "fy-entity-input-icon", icon: [faFile,mediaIcons(),faDiagramSankey][entityType] }}/>
-    <div {...{ className: "fy-entity-input-empty-controls" }}>
-     { entityType ===  EntityType.media &&
-        <FileWrapper {...{ containerClass: "fy-entity-input-row", panelClass: "fy-entity-input-button", noStyle: true, ...inputProps }}>
-           <>
-             <Icon {...{ className: "fy-entity-input-label-icon", icon: faFileArrowUp }}/>
-             <div {...{ className: "fy-entity-input-upload-detail" }}>
-               Upload, click or drag here
-               { filterType !== "all" && <span>{ filterType } files supported</span> }
-             </div>
-           </>
-         </FileWrapper> }
-      <div {...{ className: "fy-entity-input-row fy-entity-input-button", onClick: browserClick }}>
-        <Icon {...{ className: "fy-entity-input-label-icon", icon: faGrid }}/>
-        Choose from your { ["","media","weights"][entityType] }
-      </div>
-    </div>
-  </>;
-}
-
 const AniMod = ({ animating, className, isLeaving, render: Render, style, ...rest }: AniProps) => <a.div {...{
   className: `fy-slide-frame${ className ?  " " + className : "" }`,
   style
@@ -114,15 +60,21 @@ const AniMod = ({ animating, className, isLeaving, render: Render, style, ...res
     <Render {...{ ...rest, animating }} />
   </a.div>;
 
-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 <>
     <Label {...{ label }}/>
     <div {...{ className: `fy-entity-input panel-inner${ aspectRatio ? " fy-entity-input-" + aspectRatio : "" }`, }}>
       { 
-        // media ? <MocapInputFull {...{ media }}/> : <MediaPickerEmpty {...{ inputProps, media, onSelect, open, user }}/>
         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 [
             <AniMod {...{ render: MediaBusy, className: "fy-entity-input-busy", ...sharedProps }}/>,
             <AniMod {...{ render: MocapInputFull, className: "fy-entity-input-full", ...sharedProps }}/>,
-            <AniMod {...{ render: MediaPickerEmpty, className: "fy-entity-input-empty", entityType, filterType, inputProps, onSelect, open, user, ...sharedProps, ...rest }}/>
+            <AniMod {...{ render: EntityInputEmpty, className: "fy-entity-input-empty", accept, inputMode, inputProps, onSelect, open, user, ...sharedProps, ...rest }}/>
           ][i];
-        
         })
       }
     </div>
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 <>
+    <Icon {...{ className: "fy-entity-input-icon", icon: [faFile,mediaIcons(),faDiagramSankey,mediaIcons()][inputMode] }}/>
+    <div {...{ className: "fy-entity-input-empty-controls" }}>
+     { isMedia &&
+        <FileWrapper {...{ containerClass: "fy-entity-input-row", fileTypes: accepted, panelClass: "fy-entity-input-button", noStyle: true, ...inputProps }}>
+           <>
+             <Icon {...{ className: "fy-entity-input-label-icon", icon: faFileArrowUp }}/>
+             <div {...{ className: "fy-entity-input-upload-detail" }}>
+               Upload, click or drag here
+               { accept && <span>{ supported }</span> }
+             </div>
+           </>
+         </FileWrapper> }
+      <div {...{ className: "fy-entity-input-row fy-entity-input-button", onClick: browserClick }}>
+        <Icon {...{ className: "fy-entity-input-label-icon", icon: faGrid }}/>
+        Choose from your { ["bookmarks","media","weights"][inputMode] }
+      </div>
+    </div>
+  </>;
+};
\ 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..5e68cf7073 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,13 @@ 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 filters = mode !== undefined ? [{ ...MediaFilters, ...WeightsFilters },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 <CardWrapper {...{ ...props, card: OverlayCard, preview: ImagePreview }}/>;
     case "video":
       return <CardWrapper {...{ ...props, card: OverlayCard, preview: VideoPreview }}/>;
-    case "bvh":
+    case "bvh": case "glb": case "gltf":
       return <CardWrapper {...{ ...props, card: OverlayCard, preview: MocapPreview }}/>;
     default:
       return <div>Unsupported media type</div>;
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<MediaFile | Weight[]>([]);
-  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 (
     <>
       <ModalHeader {...{ handleClose, title }}>
@@ -117,11 +118,11 @@ export default function MediaBrowser({
             value: entities.sort,
           }}
         />
-        {(!inputFilter || inputFilter === "all") && (
+        {(!accept || (accept && accept.length) ) && (
           <TempSelect
             {...{
               icon: faFilter,
-              options: EntityFilterOptions(entityType),
+              options: filterOptions,
               name: "filterType",
               onChange: entities.onChange,
               value: filterType,
@@ -143,7 +144,7 @@ export default function MediaBrowser({
               <div {...{ className: "fy-media-browser-list" }}>
                 <MediaList
                   {...{
-                    entityType,
+                    entityType: 1,
                     list: entities.list,
                     success: entities.status === 3,
                     onClick,
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/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) {
             </header>
             <EntityInput
               {...{
+                accept: ["bvh","glb","gltf"],
                 aspectRatio: "landscape",
                 label: "Choose 3D data",
                 onChange,
                 type: "media",
-                mediaType: "bvh",
               }}
             />
           </div>
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..ba5a3c3666 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,9 @@
 import React, { useState } from "react";
 import { EntityInput } from "components/entities";
 import { EntityFilterOptions, EntityType, MediaFilterProp, WeightFilterProp } from "components/entities/EntityTypes";
-import { useModal } from "hooks";
+import { useModal, 
+  // useSession 
+} from "hooks";
 import { InferenceJobsModal } from "components/modals";
 import { Button, SegmentButtons, TempInput, TempSelect } from "components/common";
 
@@ -10,16 +12,19 @@ interface Props {
 }
 
 export default function DevMediaInput({ value }: Props) {
+  // const session = useSession();
+  // console.log("🤦🏻‍♂️",session);
   const [mediaToken,mediaTokenSet] = useState();
   const [mediaType,mediaTypeSet] = useState<MediaFilterProp>("all");
   const [weightType,weightTypeSet] = useState<WeightFilterProp>("all");
+  // const [mode,modeSet] = useState("media");
   const [entityType,entityTypeSet] = useState(EntityType.media);
   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 options = EntityFilterOptions();
   const changeFilter = ({ target }: { target: any }) => [mediaTypeSet,mediaTypeSet,weightTypeSet][entityType](target.value);
 
   const openModal = () => open({ component: InferenceJobsModal });
@@ -30,16 +35,20 @@ export default function DevMediaInput({ value }: Props) {
         <h2>{ [526,187].map((num = 0) => String.fromCodePoint(128000 + num)) }</h2>
         <SegmentButtons {...{ onChange: ({ target }: { target: any }) => entityTypeSet(target.value), options, value: entityType }}/>
         <TempInput {...{ value: owner, onChange: ({ target }: { target: any }) => ownerSet(target.value), placeholder: "User" }}/>
-        <TempSelect {...{ options: EntityFilterOptions(entityType), value: ["",mediaType,weightType][entityType], onChange: changeFilter }}/>
+        <TempSelect {...{
+          options: EntityFilterOptions(0),
+          value: ["",mediaType,weightType][entityType],
+          onChange: changeFilter
+        }}/>
       </header>
        <EntityInput {...{
+          accept: ["bvh","glb","gltf"],
           aspectRatio: "landscape",
           label: `Choose ${ ["","media file","weight"][entityType] }`,
           onChange,
           owner,
           search: "Dream",
-          type: "Media",
-          ...([{},{ mediaType },{ weightType }][entityType])
+          type: "media"
         }}/>
         <Button {...{ className: "mt-3", label: "Open modal", onClick: openModal, variant: "primary" }}/>
        <div>

From 19bea41e742ac35e261602bc10fcdf41ef023151 Mon Sep 17 00:00:00 2001
From: BFlat <bombayapirat@gmail.com>
Date: Fri, 16 Feb 2024 00:10:25 +0700
Subject: [PATCH 02/14] audio text transcript

---
 .../src/api/media_files/GetMediaFile.ts       |  1 +
 .../common/Card/AudioCard/AudioCard.tsx       |  5 ++++
 .../src/v2/view/pages/media/MediaPage.tsx     | 28 ++++++++-----------
 3 files changed, 17 insertions(+), 17 deletions(-)

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/components/common/Card/AudioCard/AudioCard.tsx b/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx
index dfcf6fe4bb..40a411072d 100644
--- a/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx
+++ b/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx
@@ -111,6 +111,11 @@ export default function AudioCard({
                 : "Media Audio"}
             </h6>
             <p className="fs-7 opacity-75">{timeAgo}</p>
+            {data.maybe_text_transcript && (
+              <p className="fs-7 mt-2 two-line-ellipsis">
+                {data.maybe_text_transcript}
+              </p>
+            )}
           </div>
           <AudioPlayer src={data.public_bucket_path} id={data.token} />
           <CardFooter
diff --git a/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx b/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx
index 7b980e046a..1a4a8aed7e 100644
--- a/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx
@@ -75,19 +75,13 @@ export default function MediaPage() {
             <MediaAudioComponent mediaFile={mediaFile} />
 
             {/* Show TTS text input if it is a TTS result */}
-            {mediaFile.public_bucket_path.includes("tts_inference_output") && (
+            {mediaFile.maybe_text_transcript && (
               <div className="mt-4">
                 <h5 className="fw-semibold">
                   <FontAwesomeIcon icon={faSquareQuote} className="me-2" />
-                  Audio Text
+                  Audio Text Transcript
                 </h5>
-                <p>
-                  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.
-                </p>
+                <p>{mediaFile.maybe_text_transcript}</p>
               </div>
             )}
           </div>
@@ -401,14 +395,14 @@ export default function MediaPage() {
                       }}
                     />
                     <BookmarkButton
-                        {...{
-                          large: true,
-                          ...bookmarks.makeProps({
-                            entityToken: token,
-                            entityType: "media_file",
-                          }),
-                        }}
-                      />
+                      {...{
+                        large: true,
+                        ...bookmarks.makeProps({
+                          entityToken: token,
+                          entityType: "media_file",
+                        }),
+                      }}
+                    />
                   </div>
                 </div>
               </div>

From 7ed5e7d07f1345f669251fec22953c5f15930e07 Mon Sep 17 00:00:00 2001
From: BFlat <bombayapirat@gmail.com>
Date: Fri, 16 Feb 2024 00:34:33 +0700
Subject: [PATCH 03/14] batch generations outside of advanced

---
 .../inference_panels/SdInferencePanel.tsx     | 50 +++++++++----------
 1 file changed, 25 insertions(+), 25 deletions(-)

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..88ebb394f8 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
@@ -377,11 +377,36 @@ function SdInferencePanel({
                 value: aspectRatio,
               }}
             />
+            <div>
+              <Label label="Number of Generations" />
+              <PremiumLock
+                sessionSubscriptionsWrapper={sessionSubscriptionsWrapper}
+                requiredPlan="pro"
+              >
+                <SegmentButtons
+                  {...{
+                    name: "batchCount",
+                    onChange,
+                    options: batchCountOpts,
+                    value: batchCount,
+                  }}
+                />
+              </PremiumLock>
+            </div>
           </div>
 
           <Accordion>
             <Accordion.Item title="Advanced">
               <div className="p-3 d-flex flex-column gap-3">
+                <TempSelect
+                  {...{
+                    label: "Sampler",
+                    name: "sampler",
+                    onChange,
+                    options: samplerOpts,
+                    value: sampler,
+                  }}
+                />
                 <div>
                   <label className="sub-title">Seed</label>
                   <div className="d-flex gap-2 align-items-center">
@@ -402,15 +427,6 @@ function SdInferencePanel({
                     />
                   </div>
                 </div>
-                <TempSelect
-                  {...{
-                    label: "Sampler",
-                    name: "sampler",
-                    onChange,
-                    options: samplerOpts,
-                    value: sampler,
-                  }}
-                />
                 <NumberSlider
                   {...{
                     min: 1,
@@ -458,22 +474,6 @@ function SdInferencePanel({
                     ]}
                   />
                 )}
-                <div>
-                  <Label label="Number of Generations" />
-                  <PremiumLock
-                    sessionSubscriptionsWrapper={sessionSubscriptionsWrapper}
-                    requiredPlan="pro"
-                  >
-                    <SegmentButtons
-                      {...{
-                        name: "batchCount",
-                        onChange,
-                        options: batchCountOpts,
-                        value: batchCount,
-                      }}
-                    />
-                  </PremiumLock>
-                </div>{" "}
               </div>
             </Accordion.Item>
           </Accordion>

From a7905040412ca9a8882d37c4035595e3ed6172d3 Mon Sep 17 00:00:00 2001
From: Victor <victor@storyteller.ai>
Date: Thu, 15 Feb 2024 10:01:20 -0800
Subject: [PATCH 04/14] glb/gltf call to actions on media page

---
 packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx b/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx
index 7b980e046a..aeb997d283 100644
--- a/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx
@@ -444,11 +444,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   ? (
                   <Button
                     {...{
                       icon: faVideoPlus,
-                      label: "Use BVH in Engine Compositor",
+                      label: "Use in Engine Compositor",
                       to: `/engine-compositor?preset_token=${mediaFile.token}`,
                       variant: "primary",
                       className: "flex-grow-1",

From 947db1a57984d47eda0338f0d02a12545350adce Mon Sep 17 00:00:00 2001
From: Victor <victor@storyteller.ai>
Date: Thu, 15 Feb 2024 12:10:08 -0800
Subject: [PATCH 05/14] added feature flag blocks for dev upload pages

---
 .../providers/SessionProvider/SessionProvider.tsx  |  7 ++++---
 .../fakeyou.com/src/context/SessionContext.tsx     |  2 ++
 .../src/v2/view/pages/dev_upload/DevMediaInput.tsx | 14 +++++++-------
 .../src/v2/view/pages/dev_upload/DevUpload.tsx     | 11 +++++------
 4 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/packages/fakeyou.com/src/components/providers/SessionProvider/SessionProvider.tsx b/packages/fakeyou.com/src/components/providers/SessionProvider/SessionProvider.tsx
index a6c0154325..0303928c08 100644
--- a/packages/fakeyou.com/src/components/providers/SessionProvider/SessionProvider.tsx
+++ b/packages/fakeyou.com/src/components/providers/SessionProvider/SessionProvider.tsx
@@ -3,6 +3,7 @@ import { SessionContext } from "context";
 import { Modal } from "components/common";
 import AccountModal from "components/layout/AccountModal";
 import { ModalView } from "context/SessionContext";
+import { StudioNotAvailable } from "v2/view/_common/StudioNotAvailable";
 
 interface Props {
   children?: any;
@@ -41,12 +42,11 @@ export default function SessionProvider({
     }
   };
   const userTokenMatch = (otherUserToken: string) =>
-    !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 ? <StudioNotAvailable /> : content;
 
   return (
     <SessionContext.Provider
@@ -60,6 +60,7 @@ export default function SessionProvider({
           querySession,
           querySubscriptions,
           sessionFetched,
+          studioAccessCheck,
           user,
           userTokenMatch,
         },
diff --git a/packages/fakeyou.com/src/context/SessionContext.tsx b/packages/fakeyou.com/src/context/SessionContext.tsx
index 04be5c22b4..a7b5e71784 100644
--- a/packages/fakeyou.com/src/context/SessionContext.tsx
+++ b/packages/fakeyou.com/src/context/SessionContext.tsx
@@ -21,6 +21,7 @@ interface SessionContextType {
   querySession?: any;
   querySubscriptions?: any;
   sessionFetched: boolean;
+  studioAccessCheck: (x:any) => any,
   user?: any;
   userTokenMatch: (token: string) => boolean;
 }
@@ -31,6 +32,7 @@ export default createContext<SessionContextType>({
   check: () => false,
   loggedIn: false,
   sessionFetched: false,
+  studioAccessCheck: () => null,
   modal: {
     close: () => {},
     open: () => {},
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 ba5a3c3666..16c1500209 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,10 +1,9 @@
 import React, { useState } from "react";
 import { EntityInput } from "components/entities";
 import { EntityFilterOptions, EntityType, MediaFilterProp, WeightFilterProp } from "components/entities/EntityTypes";
-import { useModal, 
-  // useSession 
-} from "hooks";
+import { useModal, useSession } from "hooks";
 import { InferenceJobsModal } from "components/modals";
+import { StudioNotAvailable } from "v2/view/_common/StudioNotAvailable";
 import { Button, SegmentButtons, TempInput, TempSelect } from "components/common";
 
 interface Props {
@@ -12,8 +11,7 @@ interface Props {
 }
 
 export default function DevMediaInput({ value }: Props) {
-  // const session = useSession();
-  // console.log("🤦🏻‍♂️",session);
+  const { studioAccessCheck, user } = useSession();
   const [mediaToken,mediaTokenSet] = useState();
   const [mediaType,mediaTypeSet] = useState<MediaFilterProp>("all");
   const [weightType,weightTypeSet] = useState<WeightFilterProp>("all");
@@ -29,7 +27,9 @@ export default function DevMediaInput({ value }: Props) {
 
   const openModal = () => open({ component: InferenceJobsModal });
 
-  return <div {...{ className: "fy-engine-compositor"}}>
+  if (!user.can_access_studio) return <StudioNotAvailable />;
+
+  return studioAccessCheck(<div {...{ className: "fy-engine-compositor"}}>
     <div {...{ className: "panel engine-compositor-container" }}>
       <header>
         <h2>{ [526,187].map((num = 0) => String.fromCodePoint(128000 + num)) }</h2>
@@ -55,5 +55,5 @@ export default function DevMediaInput({ value }: Props) {
         { mediaToken }
        </div>
     </div>
-  </div>;
+  </div>);
 };
\ 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<File | null>(null);
   const [tokens, tokensSet] = useState<string[]>([]);
 
@@ -38,7 +37,7 @@ export default function DevUpload(props: DevUploadProps) {
     else console.log("🥺 no file");
   };
 
-  return (
+  return studioAccessCheck(
     <Container type="padded" className="pt-4 pt-lg-5">
       <PageHeader
         title="Upload Generic File"

From b5eed290e75b9742090145b29afdf73a13e3c397 Mon Sep 17 00:00:00 2001
From: Brandon Thomas <echelon@gmail.com>
Date: Thu, 15 Feb 2024 22:27:22 -0500
Subject: [PATCH 06/14] attach cover image at lora upload

---
 packages/components/src/api/image_generation/UploadLora.ts  | 1 +
 packages/components/src/api/image_generation/UploadModel.ts | 1 +
 .../fakeyou.com/src/hooks/useLoraUpload/useLoraUpload.tsx   | 6 +++---
 packages/fakeyou.com/src/hooks/useSdUpload/useSdUpload.tsx  | 2 +-
 4 files changed, 6 insertions(+), 4 deletions(-)

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/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..c455d7cb20 100644
--- a/packages/fakeyou.com/src/hooks/useSdUpload/useSdUpload.tsx
+++ b/packages/fakeyou.com/src/hooks/useSdUpload/useSdUpload.tsx
@@ -28,7 +28,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(),

From 6b7f142c782dfb7a474b9784e4df327af680cc2d Mon Sep 17 00:00:00 2001
From: Brandon Thomas <echelon@gmail.com>
Date: Thu, 15 Feb 2024 22:45:39 -0500
Subject: [PATCH 07/14] enqueue job

---
 packages/fakeyou.com/src/hooks/useSdUpload/useSdUpload.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/fakeyou.com/src/hooks/useSdUpload/useSdUpload.tsx b/packages/fakeyou.com/src/hooks/useSdUpload/useSdUpload.tsx
index c455d7cb20..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 } = {
@@ -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);

From 1231a13478fe0b052ffc30e2a3e35edb80387f3b Mon Sep 17 00:00:00 2001
From: Brandon Thomas <echelon@gmail.com>
Date: Thu, 15 Feb 2024 23:24:56 -0500
Subject: [PATCH 08/14] get rid of session refresh bug

---
 packages/fakeyou.com/src/App.tsx | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/packages/fakeyou.com/src/App.tsx b/packages/fakeyou.com/src/App.tsx
index 7307cefdbe..4090cabb0f 100644
--- a/packages/fakeyou.com/src/App.tsx
+++ b/packages/fakeyou.com/src/App.tsx
@@ -299,6 +299,8 @@ class App extends React.Component<Props, State> {
     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);
@@ -309,6 +311,10 @@ class App extends React.Component<Props, State> {
   }
 
   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();
@@ -336,7 +342,15 @@ class App extends React.Component<Props, State> {
   };
 
   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 =

From 882781cd32aa3f8304a6286194ae1bf04c90d697 Mon Sep 17 00:00:00 2001
From: Brandon Thomas <echelon@gmail.com>
Date: Thu, 15 Feb 2024 23:32:13 -0500
Subject: [PATCH 09/14] enable sd for users

---
 .../src/components/layout/SideNav/SideNav.tsx | 44 +++++++++----------
 .../pages/text_to_image/TextToImagePage.tsx   |  6 +--
 .../src/v2/view/pages/weight/WeightPage.tsx   | 18 ++++----
 3 files changed, 32 insertions(+), 36 deletions(-)

diff --git a/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx b/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx
index f30cc1f819..542506dfb5 100644
--- a/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx
+++ b/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx
@@ -337,30 +337,26 @@ export default function SideNav({
     );
   }
 
-  let maybeImageGeneration = <></>;
-
-  if (sessionWrapper.canAccessStudio()) {
-    maybeImageGeneration = (
-      <>
-        <li className="sidebar-heading">Image Generation</li>
-        <li>
-          <NavLink
-            to="/text-to-image"
-            activeClassName="active-link"
-            onClick={handleNavLinkClick}
-          >
-            <FontAwesomeIcon
-              icon={faMessageImage}
-              className="sidebar-heading-icon"
-            />
-            Text to Image
-            {/* {t("videoStorytellerStudio")} */}
-          </NavLink>
-        </li>
-        <hr className="mb-3 mt-3" />
-      </>
-    );
-  }
+  let maybeImageGeneration = (
+    <>
+      <li className="sidebar-heading">Image Generation</li>
+      <li>
+        <NavLink
+          to="/text-to-image"
+          activeClassName="active-link"
+          onClick={handleNavLinkClick}
+        >
+          <FontAwesomeIcon
+            icon={faMessageImage}
+            className="sidebar-heading-icon"
+          />
+          Text to Image
+          {/* {t("videoStorytellerStudio")} */}
+        </NavLink>
+      </li>
+      <hr className="mb-3 mt-3" />
+    </>
+  );
 
   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..f98790657e 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
@@ -27,9 +27,9 @@ export default function TextToImagePage({
   enqueueInferenceJob,
   inferenceJobs,
 }: TextToImagePageProps) {
-  if (!sessionWrapper.canAccessStudio()) {
-    return <StudioNotAvailable />;
-  }
+  //if (!sessionWrapper.canAccessStudio()) {
+  //  return <StudioNotAvailable />;
+  //}
 
   return (
     <Container type="panel">
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..5b379b8f01 100644
--- a/packages/fakeyou.com/src/v2/view/pages/weight/WeightPage.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/weight/WeightPage.tsx
@@ -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 <StudioNotAvailable />;
-      }
-  }
+  ////Studio Access feature flag
+  //switch (weight?.weight_type) {
+  //  case WeightType.SD_15:
+  //  case WeightType.SDXL:
+  //  case WeightType.LORA:
+  //    if (!sessionWrapper.canAccessStudio()) {
+  //      return <StudioNotAvailable />;
+  //    }
+  //}
 
   //Image generation panel if it's a lora weight or sd weight
   let imageGenPanel = <></>;

From 2a4626762ded48ac527230784e3d010b0246bd69 Mon Sep 17 00:00:00 2001
From: Brandon Thomas <echelon@gmail.com>
Date: Thu, 15 Feb 2024 23:38:08 -0500
Subject: [PATCH 10/14] fix nits

---
 .../src/v2/view/pages/text_to_image/TextToImagePage.tsx         | 2 +-
 packages/fakeyou.com/src/v2/view/pages/weight/WeightPage.tsx    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

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 f98790657e..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<InferenceJob>;
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 5b379b8f01..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 {

From 075e763cd390899840f97b92f1123d30fa4aaa76 Mon Sep 17 00:00:00 2001
From: BFlat <bombayapirat@gmail.com>
Date: Fri, 16 Feb 2024 12:21:07 +0700
Subject: [PATCH 11/14] bookmark not logged in white screen crash fix

---
 .../common/SelectModal/SelectModal.tsx        | 22 ++++++++++++++-----
 1 file changed, 16 insertions(+), 6 deletions(-)

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 ? (
-                <SelectWeightsList
-                  weightType={valueType}
-                  listKey={tab.tabKey}
-                  onResultBookmarkSelect={handleOnSelect}
-                  onlyBookmarked={tab.onlyBookmarked}
-                />
+                <>
+                  {user ? (
+                    <SelectWeightsList
+                      weightType={valueType}
+                      listKey={tab.tabKey}
+                      onResultBookmarkSelect={handleOnSelect}
+                      onlyBookmarked={tab.onlyBookmarked}
+                    />
+                  ) : (
+                    <div className="text-center py-3">
+                      <p>Please login to view your bookmarks.</p>
+                    </div>
+                  )}
+                </>
               ) : (
                 <SelectWeightsList
                   weightType={valueType}

From 14ddf75123057e364c740060015ccfb7a01047bb Mon Sep 17 00:00:00 2001
From: Victor <victor@storyteller.ai>
Date: Thu, 15 Feb 2024 22:47:06 -0800
Subject: [PATCH 12/14] media and weights display in bookmarks

---
 .../common/Card/AudioCard/AudioCard.tsx       |  2 +-
 .../components/common/Card/BookmarksCards.tsx | 14 ++++
 .../components/common/Card/WeightsCards.tsx   |  2 +-
 .../src/components/common/Card/getCardUrl.tsx |  4 +-
 .../common/TempSelect/TempSelect.tsx          | 14 +++-
 .../src/components/entities/EntityTypes.tsx   |  4 +-
 .../view/pages/dev_upload/DevMediaInput.tsx   | 78 ++++++++++++-------
 .../profile_view/tabs/BookmarksTab.tsx        | 30 +++----
 8 files changed, 91 insertions(+), 57 deletions(-)
 create mode 100644 packages/fakeyou.com/src/components/common/Card/BookmarksCards.tsx

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 40a411072d..6ff6504b96 100644
--- a/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx
+++ b/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx
@@ -106,7 +106,7 @@ export default function AudioCard({
             </div>
 
             <h6 className="fw-semibold text-white mb-1 mt-3">
-              {data.origin.maybe_model
+              {data.origin?.maybe_model
                 ? data.origin.maybe_model.title
                 : "Media Audio"}
             </h6>
diff --git a/packages/fakeyou.com/src/components/common/Card/BookmarksCards.tsx b/packages/fakeyou.com/src/components/common/Card/BookmarksCards.tsx
new file mode 100644
index 0000000000..b4d4518856
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/Card/BookmarksCards.tsx
@@ -0,0 +1,14 @@
+import React from "react";
+import MediaCards from "components/common/Card/MediaCards";
+import WeightsCards from "components/common/Card/WeightsCards";
+
+interface Props {
+  entityType: string;
+  props: any;
+  type: string;
+}
+
+export default function BookmarksCards({ entityType, props, type }: Props) {
+  return entityType === "media_file" ?
+    <MediaCards { ...{ props, type }} /> : <WeightsCards { ...{ props, type }} />;
+}
diff --git a/packages/fakeyou.com/src/components/common/Card/WeightsCards.tsx b/packages/fakeyou.com/src/components/common/Card/WeightsCards.tsx
index b1fe9c0179..e8879b68db 100644
--- a/packages/fakeyou.com/src/components/common/Card/WeightsCards.tsx
+++ b/packages/fakeyou.com/src/components/common/Card/WeightsCards.tsx
@@ -17,6 +17,6 @@ export default function WeightsCards({ props, type }: Props) {
     case WeightCategory.SD:
       return <ImageCard {...props} />;
     default:
-      return <div>Unsupported media type</div>;
+      return <div>Unsupported weight type</div>;
   }
 }
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/TempSelect/TempSelect.tsx b/packages/fakeyou.com/src/components/common/TempSelect/TempSelect.tsx
index 3834708122..8dc891bbd1 100644
--- a/packages/fakeyou.com/src/components/common/TempSelect/TempSelect.tsx
+++ b/packages/fakeyou.com/src/components/common/TempSelect/TempSelect.tsx
@@ -4,8 +4,10 @@ import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
 import ReactSelect, { Props as ReactSelectProps } from "react-select";
 import "./TempSelect.scss";
 
+type OptionValue = string | number | boolean;
+
 export interface Option {
-  value: string | number | boolean;
+  value: OptionValue;
   label: string;
 }
 
@@ -33,8 +35,14 @@ export default function Select({
 }: SelectProps) {
   const valueLabel =
     options.find((option: any) => 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/entities/EntityTypes.tsx b/packages/fakeyou.com/src/components/entities/EntityTypes.tsx
index 5e68cf7073..06a2193f80 100644
--- a/packages/fakeyou.com/src/components/entities/EntityTypes.tsx
+++ b/packages/fakeyou.com/src/components/entities/EntityTypes.tsx
@@ -41,7 +41,9 @@ export enum EntityType {
 }
 
 export const EntityFilterOptions = ( mode?: EntityInputMode, t = (v:string) => v) => {
-  const filters = mode !== undefined ? [{ ...MediaFilters, ...WeightsFilters },MediaFilters,WeightsFilters,WeightsFilters][mode] : EntityInputMode;
+  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)))
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 16c1500209..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,59 +1,77 @@
 import React, { useState } from "react";
 import { EntityInput } from "components/entities";
-import { EntityFilterOptions, EntityType, MediaFilterProp, WeightFilterProp } from "components/entities/EntityTypes";
+import { EntityFilterOptions, EntityInputMode, EntityModeProp } from "components/entities/EntityTypes";
 import { useModal, useSession } from "hooks";
 import { InferenceJobsModal } from "components/modals";
-import { StudioNotAvailable } from "v2/view/_common/StudioNotAvailable";
 import { Button, SegmentButtons, TempInput, TempSelect } from "components/common";
 
 interface Props {
   value?: any;
 }
 
+interface Yank {
+  [key: string]: string
+}
+
 export default function DevMediaInput({ value }: Props) {
-  const { studioAccessCheck, user } = useSession();
+  const { studioAccessCheck } = useSession();
   const [mediaToken,mediaTokenSet] = useState();
-  const [mediaType,mediaTypeSet] = useState<MediaFilterProp>("all");
-  const [weightType,weightTypeSet] = useState<WeightFilterProp>("all");
-  // const [mode,modeSet] = useState("media");
-  const [entityType,entityTypeSet] = useState(EntityType.media);
+  const [mode, modeSet] = useState<EntityModeProp>("media");
+  const [filters,filtersSet] = useState<Yank>({
+    bookmarks: "",
+    media: "",
+    weights: "",
+    searchWeights: "",
+  });
   const [owner,ownerSet] = useState("");
   const onChange = ({ target }: any) => mediaTokenSet(target.value);
-
   const { open } = useModal();
 
+  const inputMode = EntityInputMode[mode];
+
   const options = EntityFilterOptions();
-  const changeFilter = ({ target }: { target: any }) => [mediaTypeSet,mediaTypeSet,weightTypeSet][entityType](target.value);
+  const filterOptions = EntityFilterOptions(inputMode);
+
+  // console.log("❌", mode, inputMode, filterOptions);
+
+  const changeFilter = ({ target }: { target: any }) => filtersSet({ ...filters, [inputMode]: target.value });
 
   const openModal = () => open({ component: InferenceJobsModal });
 
-  if (!user.can_access_studio) return <StudioNotAvailable />;
-
   return studioAccessCheck(<div {...{ className: "fy-engine-compositor"}}>
     <div {...{ className: "panel engine-compositor-container" }}>
       <header>
         <h2>{ [526,187].map((num = 0) => String.fromCodePoint(128000 + num)) }</h2>
-        <SegmentButtons {...{ onChange: ({ target }: { target: any }) => entityTypeSet(target.value), options, value: entityType }}/>
+        <SegmentButtons {...{ onChange: ({ target }: { target: any }) => modeSet(target.value), options, value: mode }}/>
         <TempInput {...{ value: owner, onChange: ({ target }: { target: any }) => ownerSet(target.value), placeholder: "User" }}/>
-        <TempSelect {...{
-          options: EntityFilterOptions(0),
-          value: ["",mediaType,weightType][entityType],
-          onChange: changeFilter
-        }}/>
       </header>
-       <EntityInput {...{
-          accept: ["bvh","glb","gltf"],
-          aspectRatio: "landscape",
-          label: `Choose ${ ["","media file","weight"][entityType] }`,
-          onChange,
-          owner,
-          search: "Dream",
-          type: "media"
-        }}/>
-        <Button {...{ className: "mt-3", label: "Open modal", onClick: openModal, variant: "primary" }}/>
-       <div>
-        { mediaToken }
-       </div>
+{      
+  // <div {...{ className: "d-flex" }}>
+  //       { filterOptions.map((option,i) => {
+  //         return <Button {...{ label: option.label }}/>
+  //       }) }
+  //     </div>
+    }
+      <TempSelect {...{
+        isMulti: true,
+        options: filterOptions,
+        value: filters[inputMode],
+        onChange: changeFilter
+      }}/>
+     <EntityInput {...{
+        accept: ["bvh","glb","gltf"],
+        aspectRatio: "landscape",
+        label: "not now",
+        // label: `Choose ${ ["","media file","weight"][entityType] }`,
+        onChange,
+        owner,
+        search: "Dream",
+        type: "media"
+      }}/>
+      <Button {...{ className: "mt-3", label: "Open modal", onClick: openModal, variant: "primary" }}/>
+     <div>
+      { mediaToken }
+     </div>
     </div>
   </div>);
 };
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/BookmarksTab.tsx b/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/BookmarksTab.tsx
index 056c5cc874..bd257c19bb 100644
--- a/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/BookmarksTab.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/BookmarksTab.tsx
@@ -11,7 +11,7 @@ import Pagination from "components/common/Pagination";
 
 import { useBookmarks, useListContent, useRatings } from "hooks";
 import { GetBookmarksByUser } from "@storyteller/components/src/api/bookmarks/GetBookmarksByUser";
-import WeightsCards from "components/common/Card/WeightsCards";
+import BookmarksCards from "components/common/Card/BookmarksCards";
 import prepFilter from "resources/prepFilter";
 
 export default function BookmarksTab({ username }: { username: string }) {
@@ -210,23 +210,17 @@ export default function BookmarksTab({ username }: { username: string }) {
                 onLayoutComplete={() => 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 (
                     <div
                       {...{
@@ -234,15 +228,11 @@ export default function BookmarksTab({ username }: { username: string }) {
                         key,
                       }}
                     >
-                      <WeightsCards
-                        {...{
-                          type: data.details.maybe_weight_data?.weight_category,
-                          props: weightProps,
-                        }}
-                      />
-                      {/* <MediaCards
-                        {...{ type: data.media_type, props: mediaProps }}
-                      /> */}
+                     <BookmarksCards {...{
+                        entityType: data.details?.entity_type,
+                        type: data.details.maybe_weight_data?.weight_category || data.details.maybe_media_file_data?.media_type,
+                        props,
+                      }} />
                     </div>
                   );
                 })}

From e99451f68e519f5e2c146aac26aec2747eb449bb Mon Sep 17 00:00:00 2001
From: Victor <victor@storyteller.ai>
Date: Fri, 16 Feb 2024 12:44:27 -0800
Subject: [PATCH 13/14] fixed previews, creator, bookmarks, and ratings not
 displaying on bookmarked media cards

---
 .../src/components/common/Card/AudioCard/AudioCard.tsx   | 9 ++++-----
 .../src/components/common/Card/BVHCard/BVHCard.tsx       | 4 ++--
 .../src/components/common/Card/FBXCard/FBXCard.tsx       | 4 ++--
 .../src/components/common/Card/GLBCard/GLBCard.tsx       | 4 ++--
 .../src/components/common/Card/GLTFCard/GLTFCard.tsx     | 4 ++--
 .../src/components/common/Card/ImageCard/ImageCard.tsx   | 6 +++---
 6 files changed, 15 insertions(+), 16 deletions(-)

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 6ff6504b96..341af4ac8e 100644
--- a/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx
+++ b/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx
@@ -117,11 +117,11 @@ export default function AudioCard({
               </p>
             )}
           </div>
-          <AudioPlayer src={data.public_bucket_path} id={data.token} />
+          <AudioPlayer src={data.details?.maybe_media_file_data?.public_bucket_path || data.public_bucket_path} id={data.token} />
           <CardFooter
             {...{
-              creator: data?.maybe_creator,
-              entityToken: data.token,
+              creator: data?.maybe_creator || data.details?.maybe_media_file_data?.maybe_creator,
+              entityToken: data.details?.entity_token || data.token,
               entityType: "media_file",
               makeBookmarksProps: bookmarks?.makeProps,
               makeRatingsProps: ratings?.makeProps,
@@ -183,8 +183,7 @@ export default function AudioCard({
           </div>
           <CardFooter
             {...{
-              creator:
-                data?.creator || data.details.maybe_weight_data?.maybe_creator,
+              creator: data?.creator || data.details.maybe_weight_data?.maybe_creator,
               entityToken: data.weight_token || data.details?.entity_token,
               entityType: "model_weight",
               makeBookmarksProps: bookmarks?.makeProps,
diff --git a/packages/fakeyou.com/src/components/common/Card/BVHCard/BVHCard.tsx b/packages/fakeyou.com/src/components/common/Card/BVHCard/BVHCard.tsx
index 2302ee0fd3..d9c282a196 100644
--- a/packages/fakeyou.com/src/components/common/Card/BVHCard/BVHCard.tsx
+++ b/packages/fakeyou.com/src/components/common/Card/BVHCard/BVHCard.tsx
@@ -55,8 +55,8 @@ export default function BVHCard({
               <p className="fs-7 opacity-75 mb-0">{timeAgo}</p>
             </div>
             <CardFooter {...{
-              creator: data?.maybe_creator, 
-              entityToken: data.token,
+              creator: data?.maybe_creator || data.details?.maybe_media_file_data?.maybe_creator,
+              entityToken: data.details?.entity_token || data.token,
               entityType: "media_file",
               makeBookmarksProps: bookmarks?.makeProps,
               makeRatingsProps: ratings?.makeProps,
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({
               <p className="fs-7 opacity-75 mb-0">{timeAgo}</p>
             </div>
             <CardFooter {...{
-              creator: data?.maybe_creator, 
-              entityToken: data.token,
+              creator: data?.maybe_creator || data.details?.maybe_media_file_data?.maybe_creator,
+              entityToken: data.details?.entity_token || data.token,
               entityType: "media_file",
               makeBookmarksProps: bookmarks?.makeProps,
               makeRatingsProps: ratings?.makeProps,
diff --git a/packages/fakeyou.com/src/components/common/Card/GLBCard/GLBCard.tsx b/packages/fakeyou.com/src/components/common/Card/GLBCard/GLBCard.tsx
index f3145d4319..bbc5bc9384 100644
--- a/packages/fakeyou.com/src/components/common/Card/GLBCard/GLBCard.tsx
+++ b/packages/fakeyou.com/src/components/common/Card/GLBCard/GLBCard.tsx
@@ -54,8 +54,8 @@ export default function GLBCard({
               <p className="fs-7 opacity-75 mb-0">{timeAgo}</p>
             </div>
             <CardFooter {...{
-              creator: data?.maybe_creator, 
-              entityToken: data.token,
+              creator: data?.maybe_creator || data.details?.maybe_media_file_data?.maybe_creator,
+              entityToken: data.details?.entity_token || data.token,
               entityType: "media_file",
               makeBookmarksProps: bookmarks?.makeProps,
               makeRatingsProps: ratings?.makeProps,
diff --git a/packages/fakeyou.com/src/components/common/Card/GLTFCard/GLTFCard.tsx b/packages/fakeyou.com/src/components/common/Card/GLTFCard/GLTFCard.tsx
index 27a2f19a9b..9dbd4c62f7 100644
--- a/packages/fakeyou.com/src/components/common/Card/GLTFCard/GLTFCard.tsx
+++ b/packages/fakeyou.com/src/components/common/Card/GLTFCard/GLTFCard.tsx
@@ -54,8 +54,8 @@ export default function GLTFCard({
               <p className="fs-7 opacity-75 mb-0">{timeAgo}</p>
             </div>
             <CardFooter {...{
-              creator: data?.maybe_creator, 
-              entityToken: data.token,
+              creator: data?.maybe_creator || data.details?.maybe_media_file_data?.maybe_creator,
+              entityToken: data.details?.entity_token || data.token,
               entityType: "media_file",
               makeBookmarksProps: bookmarks?.makeProps,
               makeRatingsProps: ratings?.makeProps,
diff --git a/packages/fakeyou.com/src/components/common/Card/ImageCard/ImageCard.tsx b/packages/fakeyou.com/src/components/common/Card/ImageCard/ImageCard.tsx
index 77d63fa7d5..76ea4f5297 100644
--- a/packages/fakeyou.com/src/components/common/Card/ImageCard/ImageCard.tsx
+++ b/packages/fakeyou.com/src/components/common/Card/ImageCard/ImageCard.tsx
@@ -66,7 +66,7 @@ export default function ImageCard({
   let coverImage = undefined;
 
   if (type === "media") {
-    coverImage = bucketConfig.getCdnUrl(data.public_bucket_path, 600, 100);
+    coverImage = bucketConfig.getCdnUrl(data.details?.maybe_media_file_data?.public_bucket_path || data.public_bucket_path, 600, 100);
   } else if (type === "weights") {
     coverImage = `/images/default-covers/${
       data?.cover_image?.default_cover.image_index || 0
@@ -121,8 +121,8 @@ export default function ImageCard({
               </div>
               <CardFooter
                 {...{
-                  creator: data?.maybe_creator,
-                  entityToken: data.token,
+                  creator: data?.maybe_creator || data.details?.maybe_media_file_data?.maybe_creator,
+                  entityToken: data.details?.entity_token || data.token,
                   entityType: "media_file",
                   makeBookmarksProps: bookmarks?.makeProps,
                   makeRatingsProps: ratings?.makeProps,

From 1bc602b8ce92bd572156a19acdf7ec4658207510 Mon Sep 17 00:00:00 2001
From: Brandon Thomas <echelon@gmail.com>
Date: Fri, 16 Feb 2024 17:08:50 -0500
Subject: [PATCH 14/14] StableDiffusion batch count -> 3 by default

---
 .../view/pages/weight/inference_panels/SdInferencePanel.tsx   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

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 88ebb394f8..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,
   };