mirror of
https://github.com/storytold/artcraft.git
synced 2026-11-11 12:23:20 +00:00
Incorporate old "Clone My Voice" page
This commit is contained in:
Brandon Thomas committed
1 parent
1bfaa9ef03
commit
94c2b46d2a
1 file changed
+347
-34
@@ -25,6 +25,7 @@ import {
|
||||
import { Link } from "react-router-dom";
|
||||
import { FrontendUrlConfig } from "../../../common/FrontendUrlConfig";
|
||||
import { distance, delay, delay2, duration } from "../../../data/animation";
|
||||
import { USE_REFRESH } from "../../../Refresh";
|
||||
const Fade = require("react-reveal/Fade");
|
||||
|
||||
interface Props {}
|
||||
@@ -64,8 +65,7 @@ function VoiceCloneRequestPage(props: Props) {
|
||||
const [formWasSubmitted, setFormWasSubmitted] = useState(false);
|
||||
|
||||
// Previous form submission state
|
||||
const [formWasPrevioiuslySubmitted, setFormWasPreviouslySubmitted] =
|
||||
useState(false);
|
||||
const [formWasPrevioiuslySubmitted, setFormWasPreviouslySubmitted] = useState(false);
|
||||
|
||||
const checkPreviousApplication = useCallback(async () => {
|
||||
const request: CheckVoiceCloneApplicationRequest = {};
|
||||
@@ -241,42 +241,77 @@ function VoiceCloneRequestPage(props: Props) {
|
||||
return false;
|
||||
};
|
||||
|
||||
const header = (
|
||||
<div className="container mb-4">
|
||||
<div className="row gx-3 flex-lg-row-reverse align-items-center">
|
||||
<div className="col-lg-6">
|
||||
<div className="d-flex justify-content-center">
|
||||
<Fade right distance={distance} duration={duration} delay={delay}>
|
||||
<img
|
||||
src="/mascot/kitsune_pose4.png"
|
||||
className="ani4 load-hidden img-fluid"
|
||||
width="560"
|
||||
loading="lazy"
|
||||
alt="FakeYou Mascot"
|
||||
/>
|
||||
</Fade>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6 px-md-2 px-lg-5 px-xl-2">
|
||||
<Fade bottom cascade distance={distance} duration={duration}>
|
||||
<div className="text-center text-lg-start">
|
||||
<h1 className="display-5 fw-bold lh-1">
|
||||
Professionally Clone Your Voice
|
||||
</h1>
|
||||
<h3 className="mb-4">(or any voice) for just $70</h3>
|
||||
<div className="d-flex flex-column justify-content-center">
|
||||
<h3>Want a Custom Voice You Can Use?</h3>
|
||||
<p className="lead">
|
||||
For Music, Videos, Twitch Rewards, API, Friends, Family…
|
||||
whatever you want!
|
||||
let header = <></>;
|
||||
|
||||
if (!USE_REFRESH) {
|
||||
header = (
|
||||
<>
|
||||
<section className="hero is-small">
|
||||
<div className="hero-body">
|
||||
|
||||
<div className="columns is-vcentered">
|
||||
|
||||
<div className="column is-one-third">
|
||||
<div className="mascot">
|
||||
<img src="/mascot/kitsune_pose4_black_2000.webp" alt="FakeYou's mascot!" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="column">
|
||||
<p className="title is-1">
|
||||
Professionally Clone Your Voice
|
||||
</p>
|
||||
<p className="subtitle is-3">
|
||||
(or any voice) for just $70
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
} else {
|
||||
header = (
|
||||
<>
|
||||
<div className="container mb-4">
|
||||
<div className="row gx-3 flex-lg-row-reverse align-items-center">
|
||||
<div className="col-lg-6">
|
||||
<div className="d-flex justify-content-center">
|
||||
<Fade right distance={distance} duration={duration} delay={delay}>
|
||||
<img
|
||||
src="/mascot/kitsune_pose4.png"
|
||||
className="ani4 load-hidden img-fluid"
|
||||
width="560"
|
||||
loading="lazy"
|
||||
alt="FakeYou Mascot"
|
||||
/>
|
||||
</Fade>
|
||||
</div>
|
||||
</div>
|
||||
</Fade>
|
||||
<div className="col-lg-6 px-md-2 px-lg-5 px-xl-2">
|
||||
<Fade bottom cascade distance={distance} duration={duration}>
|
||||
<div className="text-center text-lg-start">
|
||||
<h1 className="display-5 fw-bold lh-1">
|
||||
Professionally Clone Your Voice
|
||||
</h1>
|
||||
<h3 className="mb-4">(or any voice) for just $70</h3>
|
||||
<div className="d-flex flex-column justify-content-center">
|
||||
<h3>Want a Custom Voice You Can Use?</h3>
|
||||
<p className="lead">
|
||||
For Music, Videos, Twitch Rewards, API, Friends, Family…
|
||||
whatever you want!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Fade>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
if (formWasSubmitted) {
|
||||
return (
|
||||
@@ -334,6 +369,284 @@ function VoiceCloneRequestPage(props: Props) {
|
||||
);
|
||||
}
|
||||
|
||||
if (!USE_REFRESH) {
|
||||
return (
|
||||
<div>
|
||||
|
||||
{header}
|
||||
|
||||
<section className="section">
|
||||
<div className="container">
|
||||
|
||||
<h1 className="title is-2">Want a Custom Voice You Can Use?</h1>
|
||||
<h1 className="subtitle is-4">For Music, Videos, Twitch Rewards, API, Friends, Family… whatever you want!</h1>
|
||||
|
||||
{previouslySubmittedNote}
|
||||
|
||||
<p>
|
||||
We have an extremely talented staff that will personally handle your voice clone request.
|
||||
Please help us understand more about your voice and how you want to use it, and we'll be in touch
|
||||
shortly.
|
||||
</p>
|
||||
|
||||
<br />
|
||||
|
||||
<h1 className="title is-3">First, how should we get in touch?</h1>
|
||||
|
||||
<div className="field">
|
||||
<label className="label">Email Address</label>
|
||||
<div className="control has-icons-left">
|
||||
<input
|
||||
className="input is-medium is-fullwidth"
|
||||
type="text"
|
||||
placeholder="Email Address"
|
||||
value={emailAddress}
|
||||
onChange={handleEmailAddressChange}
|
||||
/>
|
||||
<span className="icon is-small is-left">
|
||||
<FontAwesomeIcon icon={faEnvelope} />
|
||||
</span>
|
||||
</div>
|
||||
<p className="help is-success"></p>
|
||||
<p className="help is-danger"></p>
|
||||
</div>
|
||||
|
||||
<div className="field">
|
||||
<label className="label">
|
||||
Discord Username (Optional, but an alternate way to reach you.)
|
||||
<br />
|
||||
</label>
|
||||
<div className="control has-icons-left">
|
||||
<input className="input is-medium is-fullwidth"
|
||||
type="text"
|
||||
placeholder="Discord"
|
||||
value={discord}
|
||||
onChange={handleDiscordChange}
|
||||
/>
|
||||
<span className="icon is-small is-left">
|
||||
<FontAwesomeIcon icon={faDiscord} />
|
||||
</span>
|
||||
</div>
|
||||
<p className="help">
|
||||
Don't forget the <em>#0000</em> part of your username!
|
||||
</p>
|
||||
<p className="help is-danger"></p>
|
||||
</div>
|
||||
|
||||
<br />
|
||||
|
||||
<h1 className="title is-3">Who's voice is this?</h1>
|
||||
|
||||
<p>If it's your voice, you'll be able to do anything you want with it. If it's another person's voice, you may have
|
||||
limits on how you can use it (eg. limits on commercialization.) That doesn't mean we can't help you. Even if you
|
||||
just want your favorite character so you can make Twitter memes, that's fine!</p>
|
||||
|
||||
<br />
|
||||
|
||||
<div className="checkbox-block">
|
||||
<div className="control">
|
||||
<label className="radio">
|
||||
<input type="radio" name="subject" value="mine" onChange={handleSubjectChange} />
|
||||
My own voice
|
||||
</label>
|
||||
<br />
|
||||
<label className="radio">
|
||||
<input type="radio" name="subject" value="family" onChange={handleSubjectChange} />
|
||||
A family member's voice
|
||||
</label>
|
||||
<br />
|
||||
<label className="radio">
|
||||
<input type="radio" name="subject" value="client" onChange={handleSubjectChange} />
|
||||
A client's voice
|
||||
</label>
|
||||
<br />
|
||||
<label className="radio">
|
||||
<input type="radio" name="subject" value="3rd" onChange={handleSubjectChange} />
|
||||
Another person's voice
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br />
|
||||
|
||||
<div className="field">
|
||||
<label className="label">If it isn't your voice, tell us about who it is!</label>
|
||||
<div className="control has-icons-left">
|
||||
<input
|
||||
className="input is-medium is-fullwidth"
|
||||
type="text"
|
||||
placeholder="Notes on the person"
|
||||
value={notesOnSubject}
|
||||
onChange={handleSubjectNotesChange}
|
||||
/>
|
||||
<span className="icon is-small is-left">
|
||||
<FontAwesomeIcon icon={faUser} />
|
||||
</span>
|
||||
</div>
|
||||
<p className="help is-success"></p>
|
||||
<p className="help is-danger"></p>
|
||||
</div>
|
||||
|
||||
<br />
|
||||
|
||||
<h1 className="title is-3">How will you use it?</h1>
|
||||
|
||||
<p>Click as many as you plan to use!</p>
|
||||
|
||||
<br />
|
||||
|
||||
<div className="checkbox-block">
|
||||
<label className="checkbox">
|
||||
<input type="checkbox" checked={isForMusic} onChange={handleIsForMusicChange} />
|
||||
For Music (for creating new songs)
|
||||
</label>
|
||||
|
||||
<br />
|
||||
|
||||
<label className="checkbox">
|
||||
<input type="checkbox" checked={isForGames} onChange={handleIsForGamesChange} />
|
||||
For Games (because NPCs won't talk by themselves)
|
||||
</label>
|
||||
|
||||
<br />
|
||||
|
||||
<label className="checkbox">
|
||||
<input type="checkbox" checked={isForTwitchTts} onChange={handleIsForTwitchTtsChange} />
|
||||
For Twitch TTS (creating rewards for my stream, helping me engage and monetize)
|
||||
</label>
|
||||
|
||||
<br />
|
||||
|
||||
<label className="checkbox">
|
||||
<input type="checkbox" checked={isForApiUse} onChange={handleIsForApiUseChange} />
|
||||
For API use (unlimited use of the FakeYou.com API for anything you want to build)
|
||||
</label>
|
||||
|
||||
<br />
|
||||
|
||||
<label className="checkbox">
|
||||
<input type="checkbox" checked={isForOther} onChange={handleIsForOtherChange} />
|
||||
Other (Now we're curious!)
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<br />
|
||||
|
||||
<div className="field">
|
||||
<label className="label">Let us know more about your use (optional)</label>
|
||||
<div className="control has-icons-left">
|
||||
<input
|
||||
className="input is-medium is-fullwidth"
|
||||
type="text"
|
||||
placeholder="Optional details"
|
||||
value={optionalNotesOnUse}
|
||||
onChange={handleOptionalNotesOnUseChange}
|
||||
/>
|
||||
<span className="icon is-small is-left">
|
||||
<FontAwesomeIcon icon={faEnvelope} />
|
||||
</span>
|
||||
</div>
|
||||
<p className="help is-success"></p>
|
||||
<p className="help is-danger"></p>
|
||||
</div>
|
||||
|
||||
<br />
|
||||
|
||||
<h1 className="title is-3">Do you want it to be private?</h1>
|
||||
|
||||
<p>(We'll accept multiple answers here, because maybe you want to use it multiple ways.)</p>
|
||||
|
||||
<br />
|
||||
|
||||
<div className="checkbox-block">
|
||||
<label className="checkbox">
|
||||
<input type="checkbox" />
|
||||
This is for private use for just me
|
||||
</label>
|
||||
|
||||
<br />
|
||||
|
||||
<label className="checkbox">
|
||||
<input type="checkbox" checked={isForPrivateUse} onChange={handleIsForPrivateUseChange} />
|
||||
This is for private use amongst a group of people
|
||||
</label>
|
||||
|
||||
<br />
|
||||
|
||||
<label className="checkbox">
|
||||
<input type="checkbox" checked={isForPublicUse} onChange={handleIsForPublicUseChange} />
|
||||
This is for public use
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<br />
|
||||
|
||||
<h1 className="title is-3">How's your audio quality?</h1>
|
||||
|
||||
<p>It's okay if you don't have a quality source of audio, but the results are top notch only with a good recording setup.</p>
|
||||
|
||||
<br />
|
||||
|
||||
<div className="checkbox-block">
|
||||
<label className="checkbox">
|
||||
<input type="checkbox" checked={hasGoodMicrophone} onChange={handleHasGoodMicrophoneChange} />
|
||||
I have a good microphone (and I know what a condenser microphone is)
|
||||
</label>
|
||||
|
||||
<br />
|
||||
|
||||
<label className="checkbox">
|
||||
<input type="checkbox" checked={hasCleanAudioRecordings} onChange={handleHasCleanAudioRecordingsChange} />
|
||||
I have really good preexisting recordings.
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<br />
|
||||
|
||||
<h1 className="title is-3">Anything else?</h1>
|
||||
|
||||
|
||||
<div className="field">
|
||||
<label className="label">Do you have any questions for us?</label>
|
||||
<div className="control">
|
||||
<textarea
|
||||
className="textarea"
|
||||
placeholder="Optional Questions"
|
||||
onChange={handleOptionalQuestionsChange}
|
||||
value={optionalQuestions}
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="field">
|
||||
<label className="label">Do you have any important notes or details?</label>
|
||||
<div className="control">
|
||||
<textarea
|
||||
className="textarea"
|
||||
placeholder="Optional Notes"
|
||||
onChange={handleOptionalExtraCommentsChange}
|
||||
value={optionalExtraComments}
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br />
|
||||
|
||||
{errorMessage}
|
||||
|
||||
<button
|
||||
className="button is-link is-large is-fullwidth"
|
||||
onClick={handleSubmit}
|
||||
>
|
||||
Clone my voice! <FontAwesomeIcon icon={faMicrophone} />
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
{header}
|
||||
|
||||
Reference in new issue
Block a user