mirror of
https://github.com/storytold/artcraft.git
synced 2026-11-05 01:38:44 +00:00
BFlat authored and 
GitHub committed
1 parent
26f24622ee
commit
9d8377019a
7 files changed
+252
-45
No files matched your search
@@ -7,6 +7,7 @@ interface PanelProps {
|
||||
mt?: boolean;
|
||||
className?: string;
|
||||
clear?: boolean;
|
||||
style?: React.CSSProperties;
|
||||
}
|
||||
|
||||
export default function Panel({
|
||||
@@ -16,6 +17,7 @@ export default function Panel({
|
||||
mt,
|
||||
className,
|
||||
clear,
|
||||
style,
|
||||
}: PanelProps) {
|
||||
return (
|
||||
<div
|
||||
@@ -24,6 +26,7 @@ export default function Panel({
|
||||
}${mb ? " mb-4" : ""}${mt ? " mt-4" : ""}${
|
||||
className ? " " + className : ""
|
||||
}`}
|
||||
style={style}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
|
||||
@@ -8,7 +8,6 @@ import {
|
||||
faWaveformLines,
|
||||
faXmark,
|
||||
faClipboardList,
|
||||
faMessageImage,
|
||||
faPortalEnter,
|
||||
faHome,
|
||||
faCompass,
|
||||
@@ -18,6 +17,7 @@ import {
|
||||
faFilms,
|
||||
faUser,
|
||||
faSignOutAlt,
|
||||
faScrewdriverWrench,
|
||||
} from "@fortawesome/pro-solid-svg-icons";
|
||||
import { Button } from "components/common";
|
||||
import SearchBar from "components/common/SearchBar";
|
||||
@@ -164,34 +164,34 @@ export default function TopNav({
|
||||
);
|
||||
}
|
||||
|
||||
const aiToolsDropdown = [
|
||||
{ id: 1, name: "Text to Speech", link: "/tts", icon: faMessageDots },
|
||||
{
|
||||
id: 2,
|
||||
name: "Voice to Voice",
|
||||
link: "/voice-conversion",
|
||||
icon: faWaveformLines,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "Face Animator",
|
||||
link: "/face-animator",
|
||||
icon: faFaceViewfinder,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "Voice Designer",
|
||||
link: "/voice-designer",
|
||||
icon: faWandMagicSparkles,
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: "Text to Image",
|
||||
link: "/text-to-image",
|
||||
icon: faMessageImage,
|
||||
},
|
||||
// { id: 4, name: "Text to Image", link: "/text-to-image" },
|
||||
];
|
||||
// const aiToolsDropdown = [
|
||||
// { id: 1, name: "Text to Speech", link: "/tts", icon: faMessageDots },
|
||||
// {
|
||||
// id: 2,
|
||||
// name: "Voice to Voice",
|
||||
// link: "/voice-conversion",
|
||||
// icon: faWaveformLines,
|
||||
// },
|
||||
// {
|
||||
// id: 3,
|
||||
// name: "Face Animator",
|
||||
// link: "/face-animator",
|
||||
// icon: faFaceViewfinder,
|
||||
// },
|
||||
// {
|
||||
// id: 4,
|
||||
// name: "Voice Designer",
|
||||
// link: "/voice-designer",
|
||||
// icon: faWandMagicSparkles,
|
||||
// },
|
||||
// {
|
||||
// id: 5,
|
||||
// name: "Text to Image",
|
||||
// link: "/text-to-image",
|
||||
// icon: faMessageImage,
|
||||
// },
|
||||
// // { id: 4, name: "Text to Image", link: "/text-to-image" },
|
||||
// ];
|
||||
|
||||
useEffect(() => {
|
||||
const pageContentWrapper = document.getElementById("page-content-wrapper");
|
||||
@@ -347,9 +347,9 @@ export default function TopNav({
|
||||
|
||||
<div className="d-none d-lg-block">
|
||||
<NavItem
|
||||
isHoverable={true}
|
||||
label="AI Tools"
|
||||
dropdownItems={aiToolsDropdown}
|
||||
icon={faScrewdriverWrench}
|
||||
label="Creator Tools"
|
||||
link="/tools"
|
||||
/>
|
||||
</div>
|
||||
<NavItem
|
||||
|
||||
@@ -141,6 +141,7 @@ import RedeemSuccessPage from "./pages/beta_key/RedeemSuccessPage";
|
||||
import BetaKeysListPage from "./pages/beta_key/BetaKeysListPage";
|
||||
import { ProfilePageV3 } from "./pages/profile/profile_view/ProfilePageV3";
|
||||
import ProfileSidePanel from "components/layout/ProfileSidePanel/ProfileSidePanel";
|
||||
import CreatorToolsPage from "./pages/creator_tools/CreatorToolsPage";
|
||||
|
||||
interface Props {
|
||||
sessionWrapper: SessionWrapper;
|
||||
@@ -1158,6 +1159,12 @@ class PageContainer extends React.Component<
|
||||
<BetaKeysListPage />
|
||||
</Route>
|
||||
|
||||
<Route path="/tools">
|
||||
<CreatorToolsPage
|
||||
sessionWrapper={this.props.sessionWrapper}
|
||||
/>
|
||||
</Route>
|
||||
|
||||
{/*
|
||||
// <Route path="/engine-compositor">
|
||||
// <EngineCompositor
|
||||
|
||||
@@ -171,7 +171,6 @@ function FooterNav(props: Props) {
|
||||
<li>
|
||||
<Link to="/contribute">{t("productUploadModels")}</Link>
|
||||
</li>
|
||||
|
||||
</div>
|
||||
<div className="py-2 col-12 col-lg-3 d-flex flex-column gap-2 gap-lg-3 align-items-center align-items-lg-start">
|
||||
<p className="fw-bold">AI Tools</p>
|
||||
@@ -195,7 +194,6 @@ function FooterNav(props: Props) {
|
||||
<li>
|
||||
<Link to="/face-animator">{t("productFaceAnimator")}</Link>
|
||||
</li>
|
||||
|
||||
</div>
|
||||
<div className="py-2 col-12 col-lg-3 d-flex flex-column gap-2 gap-lg-3 align-items-center align-items-lg-start">
|
||||
<p className="fw-bold">{t("infoTitle")}</p>
|
||||
|
||||
@@ -0,0 +1,24 @@
|
||||
@import "scss/colours.scss";
|
||||
|
||||
.enter-storyteller-button {
|
||||
font-size: 20px !important;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
background-color: $primary;
|
||||
border-radius: 1rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
padding: 14px;
|
||||
width: 300px;
|
||||
border: 4px solid lighten($primary, 12%);
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($primary, 5%);
|
||||
color: #fff;
|
||||
border: 4px solid lighten($primary, 12%);
|
||||
}
|
||||
&:active,
|
||||
&:focus {
|
||||
border: 4px solid lighten($primary, 12%);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,165 @@
|
||||
import {
|
||||
faFlask,
|
||||
faPortalEnter,
|
||||
faScrewdriverWrench,
|
||||
faSparkles,
|
||||
} from "@fortawesome/pro-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper";
|
||||
import { Button, Container, Panel } from "components/common";
|
||||
import { useLocalize } from "hooks";
|
||||
import React from "react";
|
||||
import DashboardRow from "../landing/components/DashboardRow";
|
||||
import "./CreatorTools.scss";
|
||||
|
||||
interface CreatorToolsPageProps {
|
||||
sessionWrapper: SessionWrapper;
|
||||
}
|
||||
|
||||
export default function CreatorToolsPage(props: CreatorToolsPageProps) {
|
||||
const { t } = useLocalize("LandingPage");
|
||||
const isLoggedIn = props.sessionWrapper.isLoggedIn();
|
||||
|
||||
const videoProducts = [
|
||||
{
|
||||
to: "/face-animator",
|
||||
title: t("productFaceAnimatorTitle"),
|
||||
text: t("productFaceAnimatorText"),
|
||||
imgSrc: "/images/landing/select-fa.webp",
|
||||
imgAlt: "Face Animator",
|
||||
},
|
||||
// {
|
||||
// to: "/text-to-image",
|
||||
// title: t("productImageGenTitle"),
|
||||
// text: t("productImageGenText"),
|
||||
// imgSrc: "/images/landing/select-tti.webp",
|
||||
// imgAlt: "AI Image Generation",
|
||||
// badgeContent: {
|
||||
// type: "new",
|
||||
// icon: faSparkles,
|
||||
// label: "NEW",
|
||||
// },
|
||||
// },
|
||||
{
|
||||
to: "/video-styletransfer",
|
||||
title: t("productVideoStyleTransferTitle"),
|
||||
text: t("productVideoStyleTransferText"),
|
||||
imgSrc: "/images/landing/select-vst.webp",
|
||||
imgAlt: "Video Style Transfer",
|
||||
badgeContent: {
|
||||
type: "new",
|
||||
icon: faSparkles,
|
||||
label: "NEW",
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const voiceProducts = [
|
||||
{
|
||||
to: "/tts",
|
||||
title: t("productTtsTitle"),
|
||||
text: t("productTtsText"),
|
||||
imgSrc: "/images/landing/select-tts.webp",
|
||||
imgAlt: "Text to Speech",
|
||||
},
|
||||
{
|
||||
to: "/voice-conversion",
|
||||
title: t("productVcTitle"),
|
||||
text: t("productVcText"),
|
||||
imgSrc: "/images/landing/select-v2v.webp",
|
||||
imgAlt: "Voice Conversion",
|
||||
},
|
||||
{
|
||||
to: "/voice-designer",
|
||||
title: t("productVdTitle"),
|
||||
text: t("productVdText"),
|
||||
imgSrc: "/images/landing/select-vd.webp",
|
||||
imgAlt: "Voice Cloning",
|
||||
badgeContent: {
|
||||
type: "beta",
|
||||
icon: faFlask,
|
||||
label: "BETA",
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Container type="panel">
|
||||
<Panel clear={true} className={`${!isLoggedIn ? "section" : "mt-4"}`}>
|
||||
<h1 className="fw-bold mb-4">
|
||||
<FontAwesomeIcon icon={faScrewdriverWrench} className="me-3" />
|
||||
Creator Tools
|
||||
</h1>
|
||||
|
||||
<div className="d-flex flex-column gap-5">
|
||||
<div>
|
||||
<Panel padding={true} className="p-3 p-lg-4 rounded">
|
||||
<div className="row g-3 g-lg-4">
|
||||
<div className="col-6 col-lg-3">
|
||||
<div className="w-100 h-100 rounded overflow-hidden">
|
||||
<img
|
||||
src="https://storage.googleapis.com/vocodes-public/media/f/0/g/9/c/f0g9c1pqpa10hf6hbd3j8m7yzn8njh58/storyteller_f0g9c1pqpa10hf6hbd3j8m7yzn8njh58.mp4-thumb.gif"
|
||||
alt="Fox Video"
|
||||
className="w-100 object-fit-cover"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-6 col-lg-3">
|
||||
<div className="w-100 h-100 rounded overflow-hidden">
|
||||
<img
|
||||
src="https://storage.googleapis.com/vocodes-public/media/0/r/n/v/w/0rnvwqf7g7chkp3v4vnq5mgp0b2gpqcq/storyteller_0rnvwqf7g7chkp3v4vnq5mgp0b2gpqcq.mp4-thumb.gif"
|
||||
alt="Dinosaur Video"
|
||||
className="w-100 object-fit-cover"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-6 col-lg-3">
|
||||
<div className="w-100 h-100 rounded overflow-hidden">
|
||||
<img
|
||||
src="https://storage.googleapis.com/vocodes-public/media/8/s/a/k/x/8sakxqt1gtg4vanccf56ca7w9ez6bxr2/storyteller_8sakxqt1gtg4vanccf56ca7w9ez6bxr2.mp4-thumb.gif"
|
||||
alt="Girl Video"
|
||||
className="w-100 object-fit-cover"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-6 col-lg-3">
|
||||
<div className="w-100 h-100 rounded overflow-hidden">
|
||||
<img
|
||||
src="https://storage.googleapis.com/vocodes-public/media/q/a/4/y/5/qa4y5dphdfvca3yqszp5wsqz5bzsce1n/videoqa4y5dphdfvca3yqszp5wsqz5bzsce1nmp4-thumb.gif"
|
||||
alt="Portal Video"
|
||||
className="w-100 object-fit-cover"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="d-flex flex-column gap-3 flex-lg-row align-items-start align-items-lg-center mt-5">
|
||||
<div className="flex-grow-1">
|
||||
<h1 className="fw-bold mb-2 display-5">Storyteller Studio</h1>
|
||||
<h5 className="fw-normal opacity-75">
|
||||
Easily create your own movie in any style with our AI 3D
|
||||
Engine.
|
||||
</h5>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
label="Enter Storyteller Studio"
|
||||
icon={faPortalEnter}
|
||||
className="enter-storyteller-button"
|
||||
href="https://studio.storyteller.ai/"
|
||||
/>
|
||||
</div>
|
||||
</Panel>
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="fw-bold mb-3 mt-4">Video</h2>
|
||||
<DashboardRow items={videoProducts} />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="fw-bold mb-3 mt-4">Voice & Audio</h2>
|
||||
<DashboardRow items={voiceProducts} />
|
||||
</div>
|
||||
</div>
|
||||
</Panel>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
@@ -68,24 +68,34 @@ export function DashboardItem({
|
||||
|
||||
interface DashboardRowProps {
|
||||
items: DashboardItemProps[];
|
||||
bgDotsLeft?: boolean;
|
||||
bgDotsRight?: boolean;
|
||||
}
|
||||
|
||||
export function DashboardRow({ items }: DashboardRowProps) {
|
||||
export function DashboardRow({
|
||||
items,
|
||||
bgDotsLeft,
|
||||
bgDotsRight,
|
||||
}: DashboardRowProps) {
|
||||
return (
|
||||
<div className="row g-4 position-relative">
|
||||
{items.map((item, index) => (
|
||||
<DashboardItem key={index} {...item} />
|
||||
))}
|
||||
<img
|
||||
src="/images/landing/bg-dots.webp"
|
||||
alt="background dots"
|
||||
className="dots-right-top"
|
||||
/>
|
||||
<img
|
||||
src="/images/landing/bg-dots.webp"
|
||||
alt="background dots"
|
||||
className="dots-left-bottom"
|
||||
/>
|
||||
{bgDotsLeft && (
|
||||
<img
|
||||
src="/images/landing/bg-dots.webp"
|
||||
alt="background dots"
|
||||
className="dots-right-top"
|
||||
/>
|
||||
)}
|
||||
{bgDotsRight && (
|
||||
<img
|
||||
src="/images/landing/bg-dots.webp"
|
||||
alt="background dots"
|
||||
className="dots-left-bottom"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user