daniel543x/artcraft
1
0 Fork 0
mirror of https://github.com/storytold/artcraft.git synced 2026-11-03 08:57:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

updates

Browse Source
This commit is contained in:
BFlat committed 2022-09-01 02:37:50 +07:00
1 parent db4cd84805
commit 8da91b59de
7 files changed
+273 -105
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/storyteller-home/package.json
+1 -1
View File
@@ -31,7 +31,7 @@
"locomotive-scroll": "^4.1.4",
"react-locomotive-scroll": "^0.2.2",
"react-fast-marquee": "^1.3.5",
"react-parallax-mouse": "^1.7.3"
"@tippyjs/react": "^4.2.6"
},
"scripts": {
"start": "craco start",
packages/storyteller-home/src/App.scss
+69 -3
View File
@@ -18,6 +18,10 @@ body {
color: $white;
}
p {
line-height: 1.6;
}
::-moz-selection {
/* Code for Firefox */
color: $white;
@@ -199,6 +203,25 @@ body {
}
}
.btn-secondary,
.btn-secondary:focus,
.btn-secondary:active {
background-color: $white;
color: #2c2c40;
border: 2.5px solid;
border-color: $white;
transition: 0.2s;
outline: none;
box-shadow: none;
}
.btn-secondary:hover {
background-color: #ccc;
color: #2c2c40;
border: 2.5px solid;
border-color: #ccc;
}
.btn span {
cursor: pointer;
display: inline-block;
@@ -402,7 +425,7 @@ body {
&:hover {
color: lighten(#7676a0, 10%);
transform: translateX(5px);
transform: translateX(2px);
}
}
}
@@ -463,7 +486,7 @@ body {
height: 100%;
padding: 28px;
border-radius: 12px;
border: 3px solid;
border: 2px solid;
border-color: rgba(#4d4d66, 0.6);
display: flex;
align-items: center;
@@ -488,11 +511,16 @@ body {
height: 220px;
margin-top: 80px;
position: absolute;
transition: 0.3s;
&:hover {
transform: scale(1.2);
}
}
.marquee-title {
font-size: 7.5rem;
font-weight: 800;
font-weight: 900;
text-transform: uppercase;
margin-top: 7.5rem;
@@ -554,3 +582,41 @@ body {
transform: rotate(45deg);
}
}
.bg-light-solid {
background: #2f2f4b;
}
.bg-dark-solid {
background: rgb(24, 24, 39);
}
.shape-bg {
position: absolute;
width: 220px;
height: 220px;
background: #2c2c40;
opacity: 0.6;
border-radius: 24px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
}
.tts-demo {
max-width: 800px;
}
.form-control,
.form-select {
border-width: 1px;
border-color: $white;
border-radius: 5px;
padding: 0.5rem 0.75rem;
&:focus {
border-color: $primary;
outline: 0;
box-shadow: 0 0 0 0.1rem $primary;
}
}
packages/storyteller-home/src/common/Footer.tsx
+1 -1
View File
@@ -15,7 +15,7 @@ function Footer(props: Props) {
return (
<>
<footer data-scroll-section>
<div className="bg-dark">
<div className="bg-dark-solid">
<div className="container footer-top text-center">
<div className="d-flex gap-4 justify-content-center p-4">
<a href="https://google.com" className="footer-social-icon">
packages/storyteller-home/src/pages/index/AudioSample.tsx
+23 -17
View File
@@ -1,14 +1,13 @@
import React, { useRef, useState } from 'react';
import { Howl } from 'howler';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faPause, faPlay } from '@fortawesome/free-solid-svg-icons';
import React, { useRef, useState } from "react";
import { Howl } from "howler";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faPause, faPlay } from "@fortawesome/free-solid-svg-icons";
interface Props {
sampleUrl: string,
sampleUrl: string;
}
function AudioSample(props: Props) {
const [isPlaying, setIsPlaying] = useState(false);
const howlPlayer = useRef(
@@ -16,9 +15,15 @@ function AudioSample(props: Props) {
src: [props.sampleUrl],
autoplay: false,
loop: false,
onplay: function() { setIsPlaying(true) },
onpause: function() { setIsPlaying(false) },
onend: function() { setIsPlaying(false) },
onplay: function () {
setIsPlaying(true);
},
onpause: function () {
setIsPlaying(false);
},
onend: function () {
setIsPlaying(false);
},
})
);
@@ -31,17 +36,18 @@ function AudioSample(props: Props) {
player.play();
setIsPlaying(true);
}
}
};
const playIcon = isPlaying ?
<FontAwesomeIcon icon={faPause} /> :
<FontAwesomeIcon icon={faPlay} /> ;
const playIcon = isPlaying ? (
<FontAwesomeIcon className="fs-5" icon={faPause} />
) : (
<FontAwesomeIcon className="fs-5" icon={faPlay} />
);
return (
<button
className="button is-info is-rounded is-outlined"
onClick={onClickToggle}
>{playIcon}</button>
<button className="btn btn-secondary mb-4 d-flex" onClick={onClickToggle}>
{playIcon}
</button>
);
}
packages/storyteller-home/src/pages/index/IndexPage.tsx
+148 -25
View File
@@ -5,10 +5,18 @@ import {
faTwitch,
faTwitter,
} from "@fortawesome/free-brands-svg-icons";
import { faArrowRightArrowLeft } from "@fortawesome/free-solid-svg-icons";
import {
faArrowRight,
faArrowRightArrowLeft,
faMicrophone,
faVolumeHigh,
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import Marquee from "react-fast-marquee";
import { TtsComponent } from "./TtsComponent";
import Tippy from "@tippyjs/react";
import "tippy.js/dist/tippy.css";
import AudioSample from "./AudioSample";
function IndexPage() {
return (
@@ -127,21 +135,31 @@ function IndexPage() {
data-scroll-direction="horizontal"
data-scroll-position="top"
>
<a href="/">
<FontAwesomeIcon icon={faDiscord} />
</a>
<a href="/">
<FontAwesomeIcon icon={faTwitch} />
</a>
<a href="/">
<FontAwesomeIcon icon={faFacebook} />
</a>
<a href="/">
<FontAwesomeIcon icon={faTwitter} />
</a>
<a href="/">
<FontAwesomeIcon icon={faPatreon} />
</a>
<Tippy content="Discord" placement="right">
<a href="https://discorg">
<FontAwesomeIcon icon={faDiscord} />
</a>
</Tippy>
<Tippy content="Twitch" placement="right">
<a href="/">
<FontAwesomeIcon icon={faTwitch} />
</a>
</Tippy>
<Tippy content="Facebook" placement="right">
<a href="/">
<FontAwesomeIcon icon={faFacebook} />
</a>
</Tippy>
<Tippy content="Twitter" placement="right">
<a href="/">
<FontAwesomeIcon icon={faTwitter} />
</a>
</Tippy>
<Tippy content="Patreon" placement="right">
<a href="/">
<FontAwesomeIcon icon={faPatreon} />
</a>
</Tippy>
</div>
</div>
<div id="about" className="bg-light section section-pb-extra">
@@ -158,20 +176,22 @@ function IndexPage() {
</div>
<div className="row gx-4 gy-4 pt-4">
<div className="col-12 col-lg-3">
<p className="fw-normal card bg-dark">
<p className="fw-normal card bg-dark-solid">
Music generation - vocals, instrumentals, and more
</p>
</div>
<div className="col-12 col-lg-3">
<p className="fw-normal card bg-dark">
<p className="fw-normal card bg-dark-solid">
Audio dubbing and transformation
</p>
</div>
<div className="col-12 col-lg-3">
<p className="fw-normal card bg-dark">Real time animation</p>
<p className="fw-normal card bg-dark-solid">
Real time animation
</p>
</div>
<div className="col-12 col-lg-3">
<p className="fw-normal card bg-dark">
<p className="fw-normal card bg-dark-solid">
Real time Hollywood VFX without going to set
</p>
</div>
@@ -230,13 +250,49 @@ function IndexPage() {
target="_blank"
className="btn btn-primary mt-4"
>
<span>Visit FakeYou.com</span>
<span>Go to FakeYou.com</span>
</a>
</div>
</div>
</div>
{/* <TtsComponent /> */}
<div className="mt-5 pt-4 text-center">
<h2 className="text-center mt-5 fw-bold">
<FontAwesomeIcon icon={faVolumeHigh} className="me-3" />
Try our text to speech!
</h2>
<p className="mb-5">
We have over 2,000 voices (with more added every day), but we've
selected a few to show off.
</p>
<TtsComponent />
</div>
</div>
<div className="text-center position-relative">
<div className="position-relative zi-2">
<h2 className="text-center mt-5 fw-bold">Want to hear more?</h2>
<p className="mb-4">
Listen to all of the 2,000+ available voices on FakeYou.
</p>
<div className="d-flex gap-3 justify-content-center">
<a
href="https://fakeyou.com/"
rel="noreferrer"
target="_blank"
className="btn btn-primary mt-3 d-flex"
>
<span>Go to FakeYou.com</span>
</a>
<a
href="https://fakeyou.com/clone"
rel="noreferrer"
target="_blank"
className="btn btn-secondary mt-3 d-flex"
>
<span>Clone my voice</span>
</a>
</div>
</div>
<div className="shape-bg"></div>
</div>
</div>
<div className="bg-light section-2">
@@ -300,16 +356,83 @@ function IndexPage() {
</p>
<div>
<a
href="https://fakeyou.com"
href="https://fakeyou.com/clone"
rel="noreferrer"
target="_blank"
className="btn btn-primary mt-4"
>
<span>Visit Storyteller.stream</span>
<span>Transform my voice</span>
</a>
</div>
</div>
</div>
<div className="mt-5 pt-4 text-center">
<h2 className="text-center mt-5 fw-bold">
<FontAwesomeIcon icon={faMicrophone} className="me-3" />
Voice Changing Demo
</h2>
<p className="mb-5">
This is still an early beta. Voice quality will change and
improve substantially over time.
</p>
<div className="row gx-4 gy-4 text-center">
<div className="col-12 col-lg-6">
<div className="card bg-light-solid justify-content-start">
<AudioSample sampleUrl="/audio-samples/voice-conversion-1.mp3" />
<p className="mb-0">
<em className="fs-6">
&ldquo;I've got a huge announcement. This just sounds
really, really great. And other than some phase
distortion, artifacts, this is just sounding really
great. And it's good for America. And voice synthesis is
amazing.&rdquo;
</em>
</p>
</div>
</div>
<div className="col-12 col-lg-6">
<div className="card bg-light-solid justify-content-start">
<AudioSample sampleUrl="/audio-samples/voice-conversion-2.mp3" />
<p className="mb-0">
<em className="fs-6">
&ldquo;My favorite game is Super Smash Bros Ultimate.
It's a really, really great game. It's huge. There's so
many characters.&rdquo;
</em>
</p>
</div>
</div>
<p className="text-center my-5 pb-5">
<strong className="fw-semibold fs-5">Brandon</strong>
<FontAwesomeIcon icon={faArrowRight} className="mx-2" />
<strong className="fw-semibold fs-5">Donald Trump</strong>
<br />
Real time voice to voice conversion.
</p>
</div>
</div>
<div className="text-center position-relative">
<div className="position-relative zi-2">
<h2 className="text-center mt-5 fw-bold">
Sign up for your very own voice changer
</h2>
<p className="mb-4">
We'll be rolling this out shortly. Get on the list! Tell us
who you want to be.
</p>
<div>
<a
href="https://fakeyou.com/clone"
rel="noreferrer"
target="_blank"
className="btn btn-primary mt-3"
>
<span>Transform my voice</span>
</a>
</div>
</div>
<div className="shape-bg"></div>
</div>
</div>
</div>
<div className="bg-light section-2">
packages/storyteller-home/src/pages/index/TtsComponent.tsx
+29 -28
View File
@@ -154,47 +154,48 @@ function TtsComponent(props: Props) {
});
return (
<div className="w-100">
<form onSubmit={handleFormSubmit} className="main-form">
<div className="field">
<div className="control">
<div className="select is-fullwidth">
<select onChange={handleVoiceChange}>{voiceOptions}</select>
<div className="container d-flex justify-content-center pb-5">
<div className="card bg-light-solid tts-demo w-100 mb-5">
<form onSubmit={handleFormSubmit} className="w-100">
<div className="d-flex flex-column gap-3">
<div className="field">
<div className="control">
<div className="select">
<select className="form-select" onChange={handleVoiceChange}>
{voiceOptions}
</select>
</div>
</div>
</div>
</div>
</div>
<div className="field">
<div className="control">
<textarea
onChange={handleChangeText}
className="textarea is-normal"
value={inferenceText}
placeholder="Type something fun..."
></textarea>
</div>
</div>
<div className="field">
<div className="control">
<textarea
onChange={handleChangeText}
className="form-control"
value={inferenceText}
placeholder="Type something fun..."
rows={4}
></textarea>
</div>
</div>
<div className="button-group">
<div className="columns is-mobile">
<div className="column has-text-centered">
<button className="button is-info is-large" disabled={false}>
<div className="d-flex justify-content-center gap-3">
<button className="btn btn-primary w-100" disabled={false}>
Generate
</button>
</div>
<div className="column has-text-centered">
<button
className="button is-info is-light is-large"
className="btn btn-secondary w-100"
onClick={() => setInferenceText("")}
>
Clear
</button>
</div>
</div>
</div>
</form>
</form>
<TtsResultsList ttsInferenceJobs={jobs} />
<TtsResultsList ttsInferenceJobs={jobs} />
</div>
</div>
);
}
yarn.lock
+2 -30
View File
@@ -2978,13 +2978,6 @@
resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.4.tgz#cd667bcfdd025213aafb7ca5915a932590acdcdc"
integrity sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==
"@types/react-anchor-link-smooth-scroll@^1.0.2":
version "1.0.2"
resolved "https://registry.yarnpkg.com/@types/react-anchor-link-smooth-scroll/-/react-anchor-link-smooth-scroll-1.0.2.tgz#50a4aaa7c2731f644f8a7b69225669fc29bc6746"
integrity sha512-ZemNS6WzQN8KA4w0sy5N86qJ55Ft7OnIDGH6QIHe0LL27xkZpNINMNZGR0DacIVPU66+JrbDqi1cKms9qhcPNQ==
dependencies:
"@types/react" "*"
"@types/react-autocomplete@^1.8.6":
version "1.8.6"
resolved "https://registry.yarnpkg.com/@types/react-autocomplete/-/react-autocomplete-1.8.6.tgz#999d0cd10ac4164ea605da04d263e5fb3fd5745f"
@@ -11409,7 +11402,7 @@ promzard@^0.3.0:
dependencies:
read "1"
prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
prop-types@^15.5.10, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
version "15.8.1"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -11560,7 +11553,7 @@ quick-lru@^5.1.1:
resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-5.1.1.tgz#366493e6b3e42a3a6885e2e99d18f80fb7a8c932"
integrity sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==
raf@^3.1.0, raf@^3.4.1:
raf@^3.4.1:
version "3.4.1"
resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39"
integrity sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==
@@ -11597,11 +11590,6 @@ raw-body@2.4.2:
iconv-lite "0.4.24"
unpipe "1.0.0"
react-anchor-link-smooth-scroll@^1.0.12:
version "1.0.12"
resolved "https://registry.yarnpkg.com/react-anchor-link-smooth-scroll/-/react-anchor-link-smooth-scroll-1.0.12.tgz#5cd49c73e74be6d20b4c05a5e5c72d07ebbedac7"
integrity sha512-aaY+9X0yh8YnC0jBfoTKpsiCLdO/Y6pCltww+VB+NnTBPDOvnIdnp1AlazajsDitc1j+cVSQ+yNtaVeTIMQbxw==
react-app-polyfill@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/react-app-polyfill/-/react-app-polyfill-3.0.0.tgz#95221e0a9bd259e5ca6b177c7bb1cb6768f68fd7"
@@ -11699,22 +11687,6 @@ react-locomotive-scroll@^0.2.2:
use-debounce "6.0.1"
use-resize-observer "6.1.0"
react-motion-prefixed@^0.6.4:
version "0.6.4"
resolved "https://registry.yarnpkg.com/react-motion-prefixed/-/react-motion-prefixed-0.6.4.tgz#730ab16b4b7ea912ef826308118cb13f9580f60b"
integrity sha512-MaHD6E9cweWROYYLvpfx1T+nvNvIzkjZkOa8GgM0dMOFxA499+vijQ1SdBsYk/tCuVYqIDiyKVHqKRq1Qfj2sg==
dependencies:
performance-now "^2.1.0"
prop-types "^15.5.8"
raf "^3.1.0"
react-parallax-mouse@^1.7.3:
version "1.7.3"
resolved "https://registry.yarnpkg.com/react-parallax-mouse/-/react-parallax-mouse-1.7.3.tgz#1f711161d5758f251ea75ffeedd6fe1f17cabe7c"
integrity sha512-TthnGFaJ0xRR4RNeUpkaWp4N/6qejKnAlMM7H3nvYO9haW4IUEf2RHGPldhghPl5QWelsc4CG+FSaN3xuTt7dw==
dependencies:
react-motion-prefixed "^0.6.4"
react-refresh@^0.11.0:
version "0.11.0"
resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046"