Merge branch 'feature/mvp' of https://github.com/storytold/storyteller-frontend into feature/mvp

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 {

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 {

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 =

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}

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 (
     <>

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(),

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);

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>;
@@ -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">

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 <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 = <></>;