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

packages/components/src/api/_common/enums/WeightCategory.ts

@@ -4,4 +4,5 @@ export enum WeightCategory {
   VC = "voice_conversion",
   ZS = "zero_shot",
   SD = "image_generation",
+  WF = "workflow_config",
 }

packages/components/src/api/video_workflow/UploadWorkflow.ts

@@ -0,0 +1,28 @@
+import MakeRequest from "../MakeRequest";
+
+export interface UploadWorkflowRequest {
+  uuid_idempotency_token: String,
+
+  google_drive_link: String,
+  title: String,
+  description: String,
+  commit_hash?: String
+  creator_set_visibility: String
+
+  // maybe_lora_upload_path?: String,
+  // maybe_name: String,
+  // maybe_description: String,
+  // visibility: String,
+  // maybe_cover_image_media_file_token?: String,
+}
+
+export interface UploadWorkflowResponse {
+  success: boolean,
+  // maybe_sd_model_token?: String,
+  // maybe_lora_model_token?: String,
+}
+
+export const UploadWorkflow = MakeRequest<string, UploadWorkflowRequest, UploadWorkflowResponse,{}>({
+    method: "POST", 
+    routingFunction: () => "/v1/workflow/upload/prompt",
+});

packages/fakeyou.com/package.json

@@ -59,6 +59,7 @@
     "react": "^16.13.1",
     "react-audio-voice-recorder": "^1.0.5",
     "react-autocomplete": "^1.8.1",
+    "react-device-detect": "^2.2.3",
     "react-dom": "^16.13.1",
     "react-drag-drop-files": "^2.3.9",
     "react-i18next": "^11.15.4",

packages/fakeyou.com/src/components/common/Card/WeightsCards.tsx

@@ -9,12 +9,14 @@ interface Props {
 }
 
 export default function WeightsCards({ props, type }: Props) {
+  console.log(props);
   switch (type) {
     case WeightCategory.TTS:
     case WeightCategory.VC:
     case WeightCategory.ZS:
       return <AudioCard { ...props} showCover />;
     case WeightCategory.SD:
+    case WeightCategory.WF:
       return <ImageCard {...props} />;
     default:
       return <div>Unsupported weight type</div>;

packages/fakeyou.com/src/components/common/SelectionBubbles/SelectionBubbles.scss

@@ -7,11 +7,22 @@
 
   .scroll-indicator {
     position: absolute;
-    z-index: 2;
+    z-index: 3;
     top: 50%;
     right: 0px;
     transform: translateY(-50%);
-    color: rgba($white, 0.2);
+    color: rgba($white, 0.3);
+    pointer-events: none;
+    transition: all 0.4s;
+  }
+
+  .scroll-indicator-left {
+    position: absolute;
+    z-index: 3;
+    top: 50%;
+    left: 0px;
+    transform: translateY(-50%);
+    color: rgba($white, 0.3);
     pointer-events: none;
     transition: all 0.4s;
   }
@@ -19,19 +30,37 @@
   &:after {
     content: "";
     position: absolute;
+    z-index: 2;
     top: 0;
     right: 0;
     bottom: 0;
-    width: 80px;
+    width: 60px;
     background: linear-gradient(to right, rgba($panel, 0), $panel);
     pointer-events: none;
     display: none;
     transition: all 0.4s;
   }
 
+  &:before {
+    content: "";
+    position: absolute;
+    z-index: 2;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 60px;
+    background: linear-gradient(to left, rgba($panel, 0), $panel);
+    pointer-events: none;
+    display: none;
+    transition: all 0.4s;
+  }
+
   &.show-gradient:after {
     display: block;
-    transition: all 0.4s;
+  }
+
+  &.show-left-gradient:before {
+    display: block;
   }
 }
 

packages/fakeyou.com/src/components/common/SelectionBubbles/SelectionBubbles.tsx

@@ -1,7 +1,10 @@
 import React, { useEffect, useRef, useState } from "react";
 import "./SelectionBubbles.scss";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faChevronRight } from "@fortawesome/pro-solid-svg-icons";
+import {
+  faChevronLeft,
+  faChevronRight,
+} from "@fortawesome/pro-solid-svg-icons";
 
 interface SelectionBubbleProps {
   options: string[];
@@ -17,6 +20,7 @@ export default function SelectionBubbles({
     options.length > 0 ? options[0] : null
   );
   const [showGradient, setShowGradient] = useState(true);
+  const [showLeftGradient, setShowLeftGradient] = useState(false);
   const bubblesRef = useRef<HTMLDivElement>(null);
 
   const handleSelect = (
@@ -38,40 +42,43 @@ export default function SelectionBubbles({
   const handleScroll = () => {
     if (bubblesRef.current) {
       const { scrollLeft, scrollWidth, clientWidth } = bubblesRef.current;
-      const isAtEnd = scrollWidth - Math.round(scrollLeft + clientWidth) <= 1; // Adjust tolerance as needed
+      const isAtEnd = scrollWidth - Math.round(scrollLeft + clientWidth) <= 1;
+      const isAtStart = scrollLeft <= 1;
       setShowGradient(!isAtEnd);
+      setShowLeftGradient(!isAtStart);
     }
   };
 
-  const checkForOverflowContent = () => {
-    if (bubblesRef.current) {
-      const { scrollWidth, clientWidth } = bubblesRef.current;
-      const isOverflowing = scrollWidth > clientWidth;
-      setShowGradient(isOverflowing);
-    }
-  };
-
-  useEffect(() => {
-    checkForOverflowContent();
-    window.addEventListener("resize", checkForOverflowContent);
-    return () => window.removeEventListener("resize", checkForOverflowContent);
-  }, [options]);
-
   useEffect(() => {
     if (bubblesRef.current) {
       bubblesRef.current.addEventListener("scroll", handleScroll);
+      handleScroll();
       return () =>
         // eslint-disable-next-line react-hooks/exhaustive-deps
         bubblesRef.current?.removeEventListener("scroll", handleScroll);
     }
+  }, [options]);
+
+  useEffect(() => {
+    const handleResize = () => {
+      handleScroll();
+    };
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
   }, []);
 
   return (
     <div
       className={`selection-bubbles-wrapper ${
         showGradient ? "show-gradient" : ""
-      }`}
+      } ${showLeftGradient ? "show-left-gradient" : ""}`.trim()}
     >
+      {showLeftGradient && (
+        <FontAwesomeIcon
+          icon={faChevronLeft}
+          className="scroll-indicator-left fs-5"
+        />
+      )}
       <div className="selection-bubbles" ref={bubblesRef}>
         {options.map(option => (
           <button

packages/fakeyou.com/src/hooks/useWorkflowUpload/index.ts

@@ -0,0 +1 @@
+export { default } from "./useWorkflowUpload";

packages/fakeyou.com/src/hooks/useWorkflowUpload/useWorkflowUpload.tsx

@@ -0,0 +1,72 @@
+import { useState } from "react";
+import { UploadWorkflow } from "@storyteller/components/src/api/video_workflow/UploadWorkflow";
+import { FetchStatus } from "@storyteller/components/src/api/_common/SharedFetchTypes";
+import { 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
+
+export default function useWorkflow() {
+  const [uploadPath, uploadPathSet] = useState("");
+  const [title, titleSet] = useState("");
+  const [description, descriptionSet] = useState("");
+  const [commitHash, commitHashSet] = useState("");
+  const [visibility, visibilitySet] = useState("private");
+
+ 
+  const [writeStatus, writeStatusSet] = useState(FetchStatus.paused);
+
+  const { enqueue } = useInferenceJobs(FrontendInferenceJobType.VideoWorkflow, true);
+
+  const onChange = ({ target }: { target: { name: string; value: any } }) => {
+    const todo: { [key: string]: (x: any) => void } = {
+      uploadPathSet,
+      descriptionSet,
+      titleSet,
+      visibilitySet,
+      commitHashSet
+    };
+    todo[target.name + "Set"](target.value);
+  };
+
+  const upload = () => {
+    writeStatusSet(FetchStatus.in_progress);
+    console.log(`
+      google_drive_link: ${uploadPath},
+      title: ${title},
+      description: ${description},
+      commit_hash: ${commitHash},
+      creator_set_visibility: ${visibility}
+    `);
+    UploadWorkflow("", {
+      uuid_idempotency_token: uuidv4(),
+      google_drive_link: uploadPath,
+      title,
+      description,
+      commit_hash:commitHash,
+      creator_set_visibility: visibility
+    })
+      .then((res: any) => {
+        if (res.success && res.inference_job_token) {
+          writeStatusSet(FetchStatus.success);
+          enqueue(res.inference_job_token);
+      }
+      })
+      .catch(err => {
+        writeStatusSet(FetchStatus.error);
+      });
+  };
+  return {
+    uploadPath,
+    title,
+    description,
+    commitHash,
+    visibility,
+
+    writeStatus,
+
+    onChange,
+    upload,
+  };
+}

packages/fakeyou.com/src/v2/view/PageContainer.tsx

@@ -30,9 +30,16 @@ import { TtsModelViewPage } from "./pages/tts/tts_model_view/TtsModelViewPage";
 import { TtsResultDeletePage } from "./pages/tts/tts_result_delete/TtsResultDeletePage";
 import { TtsResultViewPage } from "./pages/tts/tts_result_view/TtsResultViewPage";
 import { ContributeIndexPage } from "./pages/contribute/ContributeIndexPage";
+
 import { UploadTtsModelPage } from "./pages/upload/UploadTtsModelPage";
 import { UploadW2lPhotoPage } from "./pages/upload/UploadW2lPhotoPage";
 import { UploadW2lVideoPage } from "./pages/upload/UploadW2lVideoPage";
+import { UploadVocoderPage } from "./pages/upload/UploadVocoderPage";
+import { UploadVoiceConversionModel } from "./pages/upload/UploadVoiceConversionModel";
+import UploadSdWeightPage from "./pages/upload/UploadSdWeightPage";
+import UploadLoraWeightPage from "./pages/upload/UploadLoraWeightPage";
+import UploadWorkflowPage from "./pages/upload/UploadWorkflowPage";
+
 import { W2lResultViewPage } from "./pages/w2l/w2l_result_view/W2lResultViewPage";
 import { W2lTemplateListPage } from "./pages/w2l/w2l_template_list/W2lTemplateListPage";
 import { W2lTemplateUploadJob } from "@storyteller/components/src/jobs/W2lTemplateUploadJobs";
@@ -61,7 +68,7 @@ import { PatronPage } from "./pages/patrons/PatronPage";
 import { Language } from "@storyteller/components/src/i18n/Language";
 import { VoiceCloneRequestPage } from "./pages/clone_voice_requests/VoiceCloneRequestPage";
 import { VocodesPage } from "./pages/vocodes/VocodesPage";
-import { UploadVocoderPage } from "./pages/upload/UploadVocoderPage";
+
 import { PricingPage } from "./pages/premium/PricingPage";
 import { CheckoutSuccessPage } from "./pages/premium/CheckoutSuccessPage";
 import { CheckoutCancelPage } from "./pages/premium/CheckoutCancelPage";
@@ -78,7 +85,7 @@ import {
 } from "@storyteller/components/src/jobs/InferenceJob";
 //import { LandingPage } from "./pages/landing/LandingPage";
 import { VcModelListPage } from "./pages/vc/vc_model_list/VcModelListPage";
-import { UploadVoiceConversionModel } from "./pages/upload/UploadVoiceConversionModel";
+
 import { VoiceConversionModelListItem } from "@storyteller/components/src/api/voice_conversion/ListVoiceConversionModels";
 import { CommunityCommissionsPage } from "./pages/contest/CommunityCommissionsPage";
 import { ProductUsageInfoPage } from "./pages/product_usage_info/ProductUsageInfoPage";
@@ -89,7 +96,6 @@ import VcModelDeletePage from "./pages/vc/vc_model_delete/VcModelDeletePage";
 import { StorytellerStudioListPage } from "./pages/storyteller_studio/vc_model_list/StorytellerStudioListPage";
 import TopNav from "components/layout/TopNav/TopNav";
 import SideNav from "components/layout/SideNav/SideNav";
-import MobileMenu from "components/layout/MobileMenu/MobileMenu";
 import MediaPage from "./pages/media/MediaPage";
 import { VoiceDesignerFormPage } from "./pages/voice_designer/VoiceDesignerFormPage";
 import { VoiceDesignerMainPage } from "./pages/voice_designer/VoiceDesignerMainPage";
@@ -106,10 +112,10 @@ import ExplorePage from "./pages/explore/ExplorePage";
 import SearchPage from "./pages/search/SearchPage";
 import { SearchProvider } from "context/SearchContext";
 import WeightEditPage from "./pages/weight/WeightEditPage";
-import UploadSdWeightPage from "./pages/upload/UploadSdWeightPage";
+
 import { FooterNav } from "./nav/FooterNav";
 import FbxToGltfPage from "./pages/fbx_to_gltf/FbxToGltfPage";
-import UploadLoraWeightPage from "./pages/upload/UploadLoraWeightPage";
+
 import VideoWorkflowPage from "./pages/video_workflow/VideoWorkflow";
 import ScrollToTop from "./_common/ScrollToTop";
 import TextToImagePage from "./pages/text_to_image/TextToImagePage";
@@ -248,7 +254,6 @@ class PageContainer extends React.Component<
             />
 
             <div id="page-content-wrapper">
-              <MobileMenu sessionWrapper={this.props.sessionWrapper} />
               <div id="main">
                 <Switch>
                   <Route path="/firehose">
@@ -565,6 +570,12 @@ class PageContainer extends React.Component<
                     />
                   </Route>
 
+                  <Route path="/upload/workflow">
+                    <UploadWorkflowPage
+                      sessionWrapper={this.props.sessionWrapper}
+                    />
+                  </Route>
+
                   <Route path="/contribute">
                     <ContributeIndexPage
                       sessionWrapper={this.props.sessionWrapper}

packages/fakeyou.com/src/v2/view/pages/contribute/ContributeIndexPage.tsx

@@ -10,6 +10,7 @@ import {
   faVolumeHigh,
   faTags,
   faHandsHelping,
+  faArrowsTurnToDots,
 } from "@fortawesome/free-solid-svg-icons";
 
 import { usePrefixedDocumentTitle } from "../../../../common/UsePrefixedDocumentTitle";
@@ -132,6 +133,13 @@ function ContributeIndexPage(props: Props) {
                   to="/upload/lora"
                 />
               </div>
+              <div className="col-12 col-md-6">
+                <Button
+                  icon={faArrowsTurnToDots}
+                  label="Upload Workflow"
+                  to="/upload/workflow"
+                />
+              </div>
             </div>
           </div>
         </div>

packages/fakeyou.com/src/v2/view/pages/landing/fakeyou/FakeYouLandingHeader.tsx

@@ -50,7 +50,7 @@ export default function FakeYouLandingHeader({
         />
       </Panel>
 
-      <div className="my-lg-5 py-lg-5 pt-4 pb-5">
+      <div className="my-lg-5 py-lg-5 pt-3 pb-5">
         <div className="row g-5">
           <div className="col-12 col-lg-6 order-lg-2">
             <LandingDemo

packages/fakeyou.com/src/v2/view/pages/landing/fakeyou/LandingDemo/FakeYouLandingDemo.tsx

@@ -23,6 +23,7 @@ import {
 } from "@storyteller/components/src/api/jobs/GetTtsInferenceJobStatus";
 import RandomTexts from "./RandomTexts";
 import "./LandingDemo.scss";
+import { isMobile } from "react-device-detect";
 
 interface TtsInferencePanelProps {
   sessionSubscriptionsWrapper: SessionSubscriptionsWrapper;
@@ -252,6 +253,7 @@ export default function LandingDemo({
             onChange={handleChangeText}
             rows={4}
             resize={false}
+            autoFocus={isMobile ? false : true}
           />
         </div>
 

packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx

@@ -265,6 +265,7 @@ export default function MediaPage() {
       [WeightCategory.SD]: { weightCategory: "Image Generation" },
       [WeightCategory.ZS]: { weightCategory: "Voice Designer" },
       [WeightCategory.VOCODER]: { weightCategory: "Vocoder" },
+      [WeightCategory.WF]: { weightCategory: "Workflow Config" },
     };
 
   let weightCategory = "none";

packages/fakeyou.com/src/v2/view/pages/upload/UploadWorkflowPage.tsx

@@ -0,0 +1,163 @@
+import React from "react";
+import {
+  faCircleExclamation,
+  faEye,
+  faArrowsTurnToDots
+} from "@fortawesome/free-solid-svg-icons";
+import { usePrefixedDocumentTitle } from "common/UsePrefixedDocumentTitle";
+import PageHeader from "components/layout/PageHeader";
+import {
+  Button,
+  Container,
+  SplitPanel,
+  TempInput,
+  TempSelect,
+  TempTextArea,
+} from "components/common";
+import { FrontendInferenceJobType } from "@storyteller/components/src/jobs/InferenceJob";
+import InferenceJobsList from "components/layout/InferenceJobsList";
+import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper";
+import useWorkflowUpload from "hooks/useWorkflowUpload";
+
+interface UploadWorkflowPageProps {
+  sessionWrapper: SessionWrapper;
+}
+
+export default function UploadWorkflowPage({
+  sessionWrapper,
+}: UploadWorkflowPageProps) {
+  usePrefixedDocumentTitle("Edit Voice");
+
+  const visibilityOptions = [
+    { label: "Public", value: "public" },
+    { label: "Private", value: "private" },
+  ];
+
+
+  const failures = (fail = "") => {
+    switch (fail) {
+      default:
+        return "Uknown failure";
+    }
+  };
+
+  const {
+    //state values
+    uploadPath,
+    title,
+    description,
+    commitHash,
+    visibility,
+    // callback functions
+    onChange,
+    upload,
+  } = useWorkflowUpload();
+
+  if (!sessionWrapper.isLoggedIn()) {
+    return (
+      <Container type="panel">
+        <PageHeader
+          titleIcon={faCircleExclamation}
+          title="Access Denied"
+          subText="This weight does not exist or is not owned by you."
+          panel={true}
+          extension={
+            <div className="d-flex">
+              <Button
+                label="Back to homepage"
+                to={`/weight/{}`}
+                className="d-flex"
+              />
+            </div>
+          }
+        />
+      </Container>
+    );
+  }
+
+  return (
+    <Container type="panel">
+      <InferenceJobsList
+        {...{
+          failures,
+          jobType: FrontendInferenceJobType.VideoWorkflow,
+        }}
+      />
+      <PageHeader
+        title="Upload Workflow"
+        titleIcon={faArrowsTurnToDots}
+        subText="Upload a Workflow. Once your weight is successfully uploaded, you'll be able to start using it and sharing it with others."
+        panel={false}
+      />
+
+      <SplitPanel dividerFooter={true}>
+        <SplitPanel.Body padding={true}>
+          <div className="row gx-4 gy-3">
+            <div className="col-12 col-lg-7 order-first order-lg-last">
+              <TempInput
+                {...{
+                  label: "Download URL, eg. Google Drive link",
+                  name: "uploadPath",
+                  onChange,
+                  placeholder: "Download URL",
+                  value: uploadPath,
+                  required: true,
+                }}
+              />
+              <TempInput
+                {...{
+                  label: "Title",
+                  name: "title",
+                  onChange,
+                  placeholder: "Title",
+                  value: title,
+                  required: true,
+                }}
+              />
+              <TempTextArea
+                {...{
+                  label: "Description",
+                  name: "description",
+                  onChange,
+                  placeholder: "Description",
+                  value: description,
+                }}
+              />  
+              <TempInput
+                {...{
+                  label: "Commit Hash",
+                  name: "commitHash",
+                  onChange,
+                  placeholder: "Commit Hash",
+                  value: commitHash,
+                }}
+              />
+
+              <TempSelect
+                {...{
+                  icon: faEye,
+                  label: "Visibility",
+                  name: "visibility",
+                  onChange,
+                  options: visibilityOptions,
+                  value: visibility,
+                }}
+              />
+              
+            </div>
+          </div>
+        </SplitPanel.Body>
+        <SplitPanel.Footer padding={true}>
+          <div className="d-flex gap-2 justify-content-end">
+            <Button
+              {...{
+                label: "Upload Workflow",
+                onClick: upload,
+              }}
+            />
+          </div>
+        </SplitPanel.Footer>
+      </SplitPanel>
+    </Container>
+  );
+}

packages/fakeyou.com/src/v2/view/pages/weight/WeightPage.tsx

@@ -73,13 +73,7 @@ export default function WeightPage({
   const history = useHistory();
   const bookmarks = useBookmarks();
   const ratings = useRatings();
-  const {
-    data: weight,
-    fetchError,
-    isLoading,
-    title,
-    remove,
-  } = useWeightFetch({
+  const fetchedWeight = useWeightFetch({
     onRemove: () => {
       history.push(source || "");
     },
@@ -89,7 +83,14 @@ export default function WeightPage({
     },
     token: weight_token,
   });
-
+  const {
+    data: weight,
+    fetchError,
+    isLoading,
+    title,
+    remove,
+  } = fetchedWeight;
+  console.log(fetchedWeight);
   const timeUpdated = moment(weight?.updated_at || "").fromNow();
   const dateUpdated = moment(weight?.updated_at || "").format("LLL");
   const dateCreated = moment(weight?.created_at || "").format("LLL");
@@ -287,6 +288,7 @@ export default function WeightPage({
       [WeightCategory.SD]: { weightCategory: "Image Generation" },
       [WeightCategory.ZS]: { weightCategory: "Voice Designer" },
       [WeightCategory.VOCODER]: { weightCategory: "Vocoder" },
+      [WeightCategory.WF]: { weightCategory: "Workflow Config" },
     };
 
   let { weightCategory } = weightCategoryMap[weight.weight_category] || {
@@ -321,14 +323,11 @@ export default function WeightPage({
 
   switch (weight.weight_category) {
     case WeightCategory.TTS:
-      weightDetails = <DataTable data={voiceDetails} />;
-      break;
     case WeightCategory.VC:
-      weightDetails = <DataTable data={voiceDetails} />;
-      break;
     case WeightCategory.ZS:
       weightDetails = <DataTable data={voiceDetails} />;
       break;
+    case WeightCategory.WF:
     case WeightCategory.SD:
       weightDetails = <DataTable data={imageDetails} />;
       break;

yarn.lock

@@ -4468,6 +4468,7 @@ __metadata:
     react: ^16.13.1
     react-audio-voice-recorder: ^1.0.5
     react-autocomplete: ^1.8.1
+    react-device-detect: ^2.2.3
     react-dom: ^16.13.1
     react-drag-drop-files: ^2.3.9
     react-i18next: ^11.15.4
@@ -17772,6 +17773,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-device-detect@npm:^2.2.3":
+  version: 2.2.3
+  resolution: "react-device-detect@npm:2.2.3"
+  dependencies:
+    ua-parser-js: ^1.0.33
+  peerDependencies:
+    react: ">= 0.14.0"
+    react-dom: ">= 0.14.0"
+  checksum: 42d9b3182b9d2495bf0d7914c9f370da51d8bdb853a3eba2acaf433894ae760386a075ba103185be825b33d42f50d85ef462087f261656d433f4c74dab23861f
+  languageName: node
+  linkType: hard
+
 "react-dom@npm:^16.13.1":
   version: 16.14.0
   resolution: "react-dom@npm:16.14.0"
@@ -20934,6 +20947,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ua-parser-js@npm:^1.0.33":
+  version: 1.0.37
+  resolution: "ua-parser-js@npm:1.0.37"
+  checksum: 4d481c720d523366d7762dc8a46a1b58967d979aacf786f9ceceb1cd767de069f64a4bdffb63956294f1c0696eb465ddb950f28ba90571709e33521b4bd75e07
+  languageName: node
+  linkType: hard
+
 "uglify-js@npm:^3.1.4":
   version: 3.15.0
   resolution: "uglify-js@npm:3.15.0"