- {
your own project needs.
-
window.open("https://github.com/Monadical-SAS/Morpheus/fork")
diff --git a/morpheus-client/components/SearchForm/SearchForm.tsx b/morpheus-client/components/SearchForm/SearchForm.tsx
index 09534718..d18602f2 100644
--- a/morpheus-client/components/SearchForm/SearchForm.tsx
+++ b/morpheus-client/components/SearchForm/SearchForm.tsx
@@ -1,5 +1,5 @@
import InputSearch from "../Inputs/InputSearch/InputSearch";
-import ButtonPrimary from "../buttons/ButtonPrimary/ButtonPrimary";
+import Button from "../buttons/Button/Button";
import { useState } from "react";
import { searchArtWorks } from "@/services/artworks";
import { useToastContext } from "@/context/ToastContext";
@@ -43,7 +43,7 @@ const SearchForm = (props: SearchFormProps) => {
showLabel={false}
/>
-
+ Welcome to Morpheus
+ 
+
+ ),
+ section2: (
+
+
+ 
+
+ ),
+ section3: (
+
+ Morpheus is an open source platform for exploring different visual AI models
+
+ 
+
+ ),
+ section4: (
+
+ You can use one of the many models provided, or add your own
+
+ 
+
+ ),
+ section5: (
+
+ + Click the Magic Prompt button to augment your prompt with more descriptive, detailed, and stylized instructions, + resulting in more interesting images +
+
+ 
+
+ ),
+ section6: (
+
+ + Use the settings to further modify your generated images, getting into the details of size, steps, and more +
+
+ 
+
+ ),
+};
+
+const indicatorStyles = {
+ active: styles.indicatorActive,
+ inactive: styles.indicatorInactive,
+};
+
+type IndicatorStatus = keyof typeof indicatorStyles;
+
+const getIndicatorStyle = (status: IndicatorStatus) => {
+ return indicatorStyles[status];
+};
+
+const sections = ["section1", "section2", "section3", "section4", "section5", "section6"];
+
+const WalkthroughApp = () => {
+ const [sectionIndex, setSectionIndex] = useState(0);
+ const [showModal, setShowModal] = useState(false);
+ const isMobile = useWindowDimensions().width < MOBILE_SCREEN_WIDTH;
+ const { user } = useAuth();
+
+ useEffect(() => {
+ if (user) {
+ getUserInfo(user.email).then((response) => {
+ setShowModal(response.data.is_new_user);
+ });
+ }
+ }, [user]);
+
+ useEffect(() => {
+ if (showModal && sectionIndex === 0) {
+ updateUserInfo({ ...user, is_new_user: false });
+ }
+ }, [user, sectionIndex, showModal]);
+
+ const getPreviousSection = () => {
+ if (sectionIndex > 0) {
+ setSectionIndex(sectionIndex - 1);
+ }
+ };
+
+ const getNextSection = () => {
+ if (sectionIndex < sections.length - 1) {
+ setSectionIndex(sectionIndex + 1);
+ }
+ if (sectionIndex === sections.length - 1) {
+ setShowModal(false);
+ }
+ };
+
+ return (
+
+ + Morpheus is also easily expanded for your own projects and needs. Just fork it on github! +
+
+ (defaultState);
const AuthProvider = (props: { children: ReactNode }) => {
const router = useRouter();
- const { showErrorAlert } = useToastContext();
+ const { showErrorAlert, showInfoAlert } = useToastContext();
const [authLoading, setAuthLoading] = useState(true);
const [authOption, setAuthOption] = useState(AuthOption.Login);
@@ -83,7 +83,7 @@ const AuthProvider = (props: { children: ReactNode }) => {
const registerWithEmailAndPassword = (user: UserRegistration): Promise => {
return signUpWithEmailAndPasswordFirebase(user)
.then((response) => {
- loadOrCreateMorpheusUser({ ...response, displayName: user.name });
+ loadOrCreateMorpheusUser({ ...response.user, displayName: user.name });
})
.catch((error) => {
showErrorAlert(error.message);
@@ -94,7 +94,7 @@ const AuthProvider = (props: { children: ReactNode }) => {
return new Promise((resolve, reject) => {
loginWithEmailAndPasswordFirebase(user)
.then((response: any) => {
- loadOrCreateMorpheusUser(response);
+ loadOrCreateMorpheusUser(response.user);
})
.catch((error) => {
showErrorAlert(error.message);
@@ -122,6 +122,7 @@ const AuthProvider = (props: { children: ReactNode }) => {
name: firebaseUser.displayName,
email: firebaseUser.email,
phone: firebaseUser.phoneNumber,
+ is_new_user: firebaseUser.isNewUser,
};
if (!user.email) {
showErrorAlert("Email is required");
@@ -136,7 +137,7 @@ const AuthProvider = (props: { children: ReactNode }) => {
if (response.success) {
setUser(response.data);
} else {
- showErrorAlert(response.error || "An error occurred while loading the user data");
+ showInfoAlert("Failed to load user data. Please try again later");
}
})
.catch(() => {
@@ -151,7 +152,7 @@ const AuthProvider = (props: { children: ReactNode }) => {
setUser(response.data);
setLocalUser(response.data);
} else {
- showErrorAlert("An error occurred while loading the user data");
+ showInfoAlert("Failed to load user data. Please try again later");
}
})
.catch(() => {
diff --git a/morpheus-client/excalidraw/components/SendToImagine/SendToImagine.tsx b/morpheus-client/excalidraw/components/SendToImagine/SendToImagine.tsx
index 0253dad4..a94cb84f 100644
--- a/morpheus-client/excalidraw/components/SendToImagine/SendToImagine.tsx
+++ b/morpheus-client/excalidraw/components/SendToImagine/SendToImagine.tsx
@@ -4,7 +4,7 @@ import { exportToBlob } from "../../packages/utils";
import { useImagine } from "@/context/ImagineContext";
import { getFileFromBlob } from "@/utils/images";
import { useApp, useExcalidrawAppState, useExcalidrawElements } from "../App";
-import ButtonPrimary from "@/components/buttons/ButtonPrimary/ButtonPrimary";
+import Button from "@/components/buttons/Button/Button";
import styles from "./SendToImagine.module.scss";
export const SendImageToImagine = () => {
@@ -35,8 +35,8 @@ export const SendImageToImagine = () => {
return (
+ {React.cloneElement(SlidesSections[sections[sectionIndex]], { key: sections[sectionIndex] })}
+
+ 0 ? styles.allButtons : styles.onlyRightButton}>
+ {sectionIndex > 0 && (
+
+
+ );
+};
+
+export default WalkthroughApp;
diff --git a/morpheus-client/components/buttons/ButtonPrimary/ButtonPrimary.module.scss b/morpheus-client/components/buttons/Button/Button.module.scss
similarity index 59%
rename from morpheus-client/components/buttons/ButtonPrimary/ButtonPrimary.module.scss
rename to morpheus-client/components/buttons/Button/Button.module.scss
index 3ef4c2b8..dfc4f4b7 100644
--- a/morpheus-client/components/buttons/ButtonPrimary/ButtonPrimary.module.scss
+++ b/morpheus-client/components/buttons/Button/Button.module.scss
@@ -1,21 +1,21 @@
@use "styles/colors";
@use "styles/media";
-.buttonPrimary {
- width: 526px;
- max-width: 100%;
- height: 48px;
+@mixin buttonBase {
+ cursor: pointer;
box-sizing: border-box;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 16px;
- padding: 12px 57px;
- cursor: pointer;
- background: colors.$main-color;
+ width: 526px;
+ max-width: 100%;
border: none;
border-radius: 8px;
+ flex: none;
+ order: 0;
+ flex-grow: 0;
@include media.mobile {
width: 100%;
@@ -29,9 +29,32 @@
align-items: center;
gap: 16px;
}
+}
+
+.buttonPrimary {
+ @include buttonBase;
+ height: 48px;
+ padding: 12px 57px;
+ background: colors.$main-color;
&.disabled {
background: colors.$background-primary-4;
cursor: not-allowed;
}
+}
+
+.buttonSecondary {
+ @include buttonBase;
+ height: 56px;
+ padding: 16px;
+ background: colors.$background-secondary;
+ border: 1px solid colors.$background-border;
+}
+
+.buttonTertiary {
+ @include buttonBase;
+ height: 48px;
+ padding: 16px;
+ background: colors.$background-white;
+ border: 1px solid colors.$background-primary-5;
}
\ No newline at end of file
diff --git a/morpheus-client/components/buttons/Button/Button.tsx b/morpheus-client/components/buttons/Button/Button.tsx
new file mode 100644
index 00000000..a8a9a38d
--- /dev/null
+++ b/morpheus-client/components/buttons/Button/Button.tsx
@@ -0,0 +1,78 @@
+import React, { CSSProperties } from "react";
+import Loader from "../../Loaders/LoaderCircle/Loader";
+import styles from "./Button.module.scss";
+import { cn } from "@/utils/styles";
+
+const buttonVariants = {
+ primary: {
+ button: {
+ active: styles.buttonPrimary,
+ disabled: styles.disabled,
+ },
+ text: {
+ active: "base-1 white",
+ },
+ },
+ secondary: {
+ button: {
+ active: styles.buttonSecondary,
+ disabled: styles.disabled,
+ },
+ text: {
+ active: "base-1 white",
+ },
+ },
+ tertiary: {
+ button: {
+ active: styles.buttonTertiary,
+ disabled: styles.disabled,
+ },
+ text: {
+ active: "base-1",
+ },
+ },
+};
+
+type buttonVariant = keyof typeof buttonVariants;
+
+const getVariantStyle = (variant?: buttonVariant) => {
+ return buttonVariants[variant ? variant : "primary"];
+};
+
+interface ButtonProps {
+ loading: boolean;
+ disabled?: boolean;
+ text: string;
+ onClick: (event?: any) => any;
+ styles?: CSSProperties;
+ className?: any;
+ loaderColor?: string;
+ icon?: any;
+ variant?: buttonVariant;
+}
+
+const Button = (props: ButtonProps) => {
+ return (
+
+ );
+};
+
+export default Button;
\ No newline at end of file
diff --git a/morpheus-client/components/buttons/ButtonPrimary/ButtonPrimary.tsx b/morpheus-client/components/buttons/ButtonPrimary/ButtonPrimary.tsx
deleted file mode 100644
index 23e8c264..00000000
--- a/morpheus-client/components/buttons/ButtonPrimary/ButtonPrimary.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import React, { CSSProperties } from "react";
-import Loader from "../../Loaders/LoaderCircle/Loader";
-import styles from "./ButtonPrimary.module.scss";
-
-interface ButtonPrimaryProps {
- loading: boolean;
- disabled?: boolean;
- text: string;
- onClick: (event?: any) => any;
- styles?: CSSProperties;
- className?: any;
- loaderColor?: string;
-}
-
-const ButtonPrimary = (props: ButtonPrimaryProps) => {
- return (
-
- );
-};
-
-export default ButtonPrimary;
diff --git a/morpheus-client/components/buttons/ButtonSecondary/ButtonSecondary.module.scss b/morpheus-client/components/buttons/ButtonSecondary/ButtonSecondary.module.scss
deleted file mode 100644
index 9eca6785..00000000
--- a/morpheus-client/components/buttons/ButtonSecondary/ButtonSecondary.module.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-@use "styles/colors";
-@use "styles/media";
-
-.buttonSecondary {
- cursor: pointer;
- box-sizing: border-box;
- display: flex;
- flex-direction: row;
- justify-content: center;
- align-items: center;
- padding: 16px;
- gap: 16px;
- width: 526px;
- height: 56px;
- background: colors.$background-secondary;
- border: 1px solid colors.$background-border;
- border-radius: 8px;
- flex: none;
- order: 0;
- flex-grow: 0;
-
- @include media.mobile {
- width: 100%;
- padding: 16px 0;
- }
-
- span {
- width: 100%;
- display: flex;
- justify-content: center;
- align-items: center;
- gap: 16px;
- }
-}
\ No newline at end of file
diff --git a/morpheus-client/components/buttons/ButtonSecondary/ButtonSecondary.tsx b/morpheus-client/components/buttons/ButtonSecondary/ButtonSecondary.tsx
deleted file mode 100644
index 9f2060c5..00000000
--- a/morpheus-client/components/buttons/ButtonSecondary/ButtonSecondary.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import React, { CSSProperties } from "react";
-import Loader from "../../Loaders/LoaderCircle/Loader";
-import styles from "./ButtonSecondary.module.scss";
-
-interface ButtonSecondaryProps {
- loading: boolean;
- disabled?: boolean;
- text: string;
- onClick: (event?: any) => any;
- styles?: CSSProperties;
- className?: any;
- icon?: any;
-}
-
-const ButtonSecondary = (props: ButtonSecondaryProps) => {
- return (
-
- );
-};
-
-export default ButtonSecondary;
diff --git a/morpheus-client/context/AuthContext.tsx b/morpheus-client/context/AuthContext.tsx
index c89ba882..87f42089 100644
--- a/morpheus-client/context/AuthContext.tsx
+++ b/morpheus-client/context/AuthContext.tsx
@@ -51,7 +51,7 @@ const AuthContext = createContext
-