mirror of
https://github.com/storytold/artcraft.git
synced 2026-11-02 16:38:14 +00:00
Merge pull request #177 from storytold/bflat-fy-tts-update
TTS page style update
This commit is contained in:
3 files changed
+176
-113
No files matched your search
@@ -910,6 +910,48 @@ styles with important tags:
|
||||
font-size: 14px;
|
||||
color: #fc6b68;
|
||||
}
|
||||
|
||||
.hero-img-container {
|
||||
position: relative;
|
||||
min-height: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
// &:after {
|
||||
// content: "";
|
||||
// position: absolute;
|
||||
// z-index: 1;
|
||||
// bottom: 0;
|
||||
// left: 0;
|
||||
// pointer-events: none;
|
||||
// background-image: linear-gradient(
|
||||
// to bottom,
|
||||
// rgba($panel, 0),
|
||||
// rgba($panel, 1) 90%
|
||||
// );
|
||||
// width: 100%;
|
||||
// height: 2em;
|
||||
// }
|
||||
}
|
||||
|
||||
.hero-img {
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
width: 80%;
|
||||
margin: auto;
|
||||
top: -26%;
|
||||
right: 4%;
|
||||
}
|
||||
|
||||
// .hero-img-container-mobile {
|
||||
// // margin-top: 100px;
|
||||
// }
|
||||
|
||||
.hero-img-mobile {
|
||||
pointer-events: none;
|
||||
width: 65%;
|
||||
margin-bottom: -4%;
|
||||
margin-top: -30%;
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
|
||||
@@ -477,129 +477,116 @@ function TtsModelListPage(props: Props) {
|
||||
sessionSubscriptionsWrapper={props.sessionSubscriptionsWrapper}
|
||||
/>
|
||||
|
||||
<motion.div className="container-panel pt-4 pb-5 mb-4" variants={panel}>
|
||||
<div className="panel p-3 p-lg-4 mt-5 mt-lg-0">
|
||||
<motion.div className="container-panel pb-5 mb-4" variants={panel}>
|
||||
<div className="panel p-3 py-4 p-lg-4">
|
||||
<i className="fas fa-volume-high"></i>
|
||||
<h1 className="panel-title fw-bold px-3 px-lg-0">
|
||||
<FontAwesomeIcon icon={faVolumeUp} className="me-3" />
|
||||
{t("tts.TtsModelListPage.formTitle")}
|
||||
</h1>
|
||||
<div className="py-6">
|
||||
<div className="d-flex gap-4">
|
||||
<form
|
||||
className="w-100 d-flex flex-column"
|
||||
onSubmit={handleFormSubmit}
|
||||
>
|
||||
{/* Explore Rollout */}
|
||||
|
||||
<SearchOmnibar
|
||||
allTtsCategories={props.allTtsCategories}
|
||||
allTtsModels={props.ttsModels}
|
||||
allTtsCategoriesByTokenMap={props.allTtsCategoriesByTokenMap}
|
||||
allTtsModelsByTokenMap={props.allTtsModelsByTokenMap}
|
||||
ttsModelsByCategoryToken={props.ttsModelsByCategoryToken}
|
||||
dropdownCategories={props.dropdownCategories}
|
||||
setDropdownCategories={props.setDropdownCategories}
|
||||
selectedCategories={props.selectedCategories}
|
||||
setSelectedCategories={props.setSelectedCategories}
|
||||
maybeSelectedTtsModel={props.maybeSelectedTtsModel}
|
||||
setMaybeSelectedTtsModel={props.setMaybeSelectedTtsModel}
|
||||
selectedTtsLanguageScope={props.selectedTtsLanguageScope}
|
||||
setSelectedTtsLanguageScope={
|
||||
props.setSelectedTtsLanguageScope
|
||||
}
|
||||
/>
|
||||
<div className="d-flex gap-4">
|
||||
<form
|
||||
className="w-100 d-flex flex-column"
|
||||
onSubmit={handleFormSubmit}
|
||||
>
|
||||
{/* Explore Rollout */}
|
||||
|
||||
{/*
|
||||
<SearchOmnibar
|
||||
allTtsCategories={props.allTtsCategories}
|
||||
allTtsModels={props.ttsModels}
|
||||
allTtsCategoriesByTokenMap={props.allTtsCategoriesByTokenMap}
|
||||
allTtsModelsByTokenMap={props.allTtsModelsByTokenMap}
|
||||
ttsModelsByCategoryToken={props.ttsModelsByCategoryToken}
|
||||
dropdownCategories={props.dropdownCategories}
|
||||
setDropdownCategories={props.setDropdownCategories}
|
||||
selectedCategories={props.selectedCategories}
|
||||
setSelectedCategories={props.setSelectedCategories}
|
||||
maybeSelectedTtsModel={props.maybeSelectedTtsModel}
|
||||
setMaybeSelectedTtsModel={props.setMaybeSelectedTtsModel}
|
||||
selectedTtsLanguageScope={props.selectedTtsLanguageScope}
|
||||
setSelectedTtsLanguageScope={props.setSelectedTtsLanguageScope}
|
||||
/>
|
||||
|
||||
{/*
|
||||
|
||||
|
||||
EXPLORE OMNIBAR GOES HERE TODO
|
||||
|
||||
*/}
|
||||
|
||||
{directViewLink}
|
||||
{directViewLink}
|
||||
|
||||
<div className="row gx-5 gy-5">
|
||||
<div className="col-12 col-lg-6 d-flex flex-column gap-3">
|
||||
<div className="d-flex flex-column gap-3 h-100">
|
||||
<div className="d-flex gap-2">
|
||||
<label className="sub-title pb-0">
|
||||
{t("tts.TtsModelListPage.form.yourTextLabel")}
|
||||
</label>
|
||||
{/*<a href="/" className="ms-1">
|
||||
<div className="row gx-5 gy-5">
|
||||
<div className="col-12 col-lg-6 d-flex flex-column gap-3">
|
||||
<div className="d-flex flex-column gap-3 h-100">
|
||||
<div className="d-flex gap-2">
|
||||
<label className="sub-title pb-0">
|
||||
{t("tts.TtsModelListPage.form.yourTextLabel")}
|
||||
</label>
|
||||
{/*<a href="/" className="ms-1">
|
||||
<FontAwesomeIcon icon={faShuffle} />
|
||||
</a>*/}
|
||||
</div>
|
||||
<textarea
|
||||
onClick={() => {
|
||||
Analytics.ttsClickTextInputBox();
|
||||
}}
|
||||
onChange={handleChangeText}
|
||||
className="form-control text-message h-100"
|
||||
value={props.textBuffer}
|
||||
placeholder={t(
|
||||
"tts.TtsModelListPage.form.textInputHint",
|
||||
{
|
||||
voice:
|
||||
props.maybeSelectedTtsModel?.title || "the voice",
|
||||
}
|
||||
)}
|
||||
></textarea>
|
||||
<div className="d-flex gap-3">
|
||||
<button
|
||||
className={speakButtonClass}
|
||||
disabled={
|
||||
remainingCharactersButtonDisabled ||
|
||||
noTextInputButtonDisabled
|
||||
}
|
||||
onClick={handleLoading}
|
||||
type="submit"
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={faVolumeHigh}
|
||||
className="me-2"
|
||||
/>
|
||||
{t("tts.TtsModelListPage.form.buttons.speak")}
|
||||
|
||||
{loading && <LoadingIcon />}
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-destructive w-100"
|
||||
onClick={handleClearClick}
|
||||
disabled={noTextInputButtonDisabled}
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={faDeleteLeft}
|
||||
className="me-2"
|
||||
/>
|
||||
{t("tts.TtsModelListPage.form.buttons.clear")}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 col-lg-6">
|
||||
<div className="d-flex flex-column gap-3">
|
||||
<h4 className="text-center text-lg-start">
|
||||
<FontAwesomeIcon
|
||||
icon={faBarsStaggered}
|
||||
className="me-3"
|
||||
/>
|
||||
{t("tts.TtsModelListPage.sessionTtsResultsLabel")}
|
||||
</h4>
|
||||
<div className="d-flex flex-column gap-3 session-tts-section">
|
||||
<SessionTtsInferenceResultList
|
||||
ttsInferenceJobs={props.ttsInferenceJobs}
|
||||
sessionSubscriptionsWrapper={
|
||||
props.sessionSubscriptionsWrapper
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<textarea
|
||||
onClick={() => {
|
||||
Analytics.ttsClickTextInputBox();
|
||||
}}
|
||||
onChange={handleChangeText}
|
||||
className="form-control text-message h-100"
|
||||
value={props.textBuffer}
|
||||
placeholder={t(
|
||||
"tts.TtsModelListPage.form.textInputHint",
|
||||
{
|
||||
voice:
|
||||
props.maybeSelectedTtsModel?.title || "the voice",
|
||||
}
|
||||
)}
|
||||
></textarea>
|
||||
<div className="d-flex gap-3">
|
||||
<button
|
||||
className={speakButtonClass}
|
||||
disabled={
|
||||
remainingCharactersButtonDisabled ||
|
||||
noTextInputButtonDisabled
|
||||
}
|
||||
onClick={handleLoading}
|
||||
type="submit"
|
||||
>
|
||||
<FontAwesomeIcon icon={faVolumeHigh} className="me-2" />
|
||||
{t("tts.TtsModelListPage.form.buttons.speak")}
|
||||
|
||||
{loading && <LoadingIcon />}
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-destructive w-100"
|
||||
onClick={handleClearClick}
|
||||
disabled={noTextInputButtonDisabled}
|
||||
>
|
||||
<FontAwesomeIcon icon={faDeleteLeft} className="me-2" />
|
||||
{t("tts.TtsModelListPage.form.buttons.clear")}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{maybeError}
|
||||
</form>
|
||||
</div>
|
||||
<div className="col-12 col-lg-6">
|
||||
<div className="d-flex flex-column gap-3">
|
||||
<h4 className="text-center text-lg-start">
|
||||
<FontAwesomeIcon
|
||||
icon={faBarsStaggered}
|
||||
className="me-3"
|
||||
/>
|
||||
{t("tts.TtsModelListPage.sessionTtsResultsLabel")}
|
||||
</h4>
|
||||
<div className="d-flex flex-column gap-3 session-tts-section">
|
||||
<SessionTtsInferenceResultList
|
||||
ttsInferenceJobs={props.ttsInferenceJobs}
|
||||
sessionSubscriptionsWrapper={
|
||||
props.sessionSubscriptionsWrapper
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{maybeError}
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -9,6 +9,7 @@ import {
|
||||
faStar,
|
||||
faUser,
|
||||
faArrowRight,
|
||||
faVolumeHigh,
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
import { item, image } from "../../../../../data/animation";
|
||||
import { motion } from "framer-motion";
|
||||
@@ -23,8 +24,8 @@ interface Props {
|
||||
export function TtsPageHero(props: Props) {
|
||||
const randomImage = useMemo(() => {
|
||||
const images = [
|
||||
// "mascot/kitsune_pose2.webp",
|
||||
// "mascot/kitsune_wizard.webp",
|
||||
"mascot/kitsune_pose2.webp",
|
||||
"mascot/kitsune_wizard.webp",
|
||||
// "mascot/halloween_1.webp",
|
||||
// "mascot/halloween_2.webp",
|
||||
// "mascot/halloween_3.webp",
|
||||
@@ -32,7 +33,7 @@ export function TtsPageHero(props: Props) {
|
||||
// "mascot/xmas_2.webp",
|
||||
// "mascot/xmas_3.webp",
|
||||
// "mascot/xmas_4.webp",
|
||||
"mascot/chinese_new_year.webp",
|
||||
// "mascot/chinese_new_year.webp",
|
||||
];
|
||||
|
||||
return images[Math.floor(Math.random() * images.length)];
|
||||
@@ -114,8 +115,41 @@ export function TtsPageHero(props: Props) {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container hero-section">
|
||||
<div className="row gx-3 flex-lg-row-reverse align-items-center">
|
||||
<div className="container-panel hero-section pt-4 pt-lg-5 pb-5">
|
||||
<div className="panel">
|
||||
<div className="row gx-3 flex-md-row-reverse">
|
||||
<div className="col-12 col-md-6 hero-img-container d-none d-md-block">
|
||||
<motion.img
|
||||
src={randomImage}
|
||||
className="hero-img"
|
||||
alt="FakeYou Mascot"
|
||||
variants={image}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-12 col-md-6">
|
||||
<div className="p-3 py-4 p-lg-4">
|
||||
<h1 className="fw-bold text-center text-md-start">
|
||||
<FontAwesomeIcon icon={faVolumeHigh} className="me-3" />
|
||||
Text to Speech
|
||||
</h1>
|
||||
<p className="text-center text-md-start">
|
||||
{t("tts.TtsModelListPage.formTitle")}
|
||||
</p>
|
||||
<motion.div
|
||||
className="d-flex flex-column flex-md-row gap-3 justify-content-center justify-content-md-start mt-4"
|
||||
variants={item}
|
||||
>
|
||||
{upgradeButton}
|
||||
{signUpButton}
|
||||
{viewPricingButton}
|
||||
{myProfileButton}
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* <div className="row gx-3 flex-lg-row-reverse align-items-center">
|
||||
<div className="col-lg-6">
|
||||
<div className="d-flex justify-content-center">
|
||||
<motion.img
|
||||
@@ -157,7 +191,7 @@ export function TtsPageHero(props: Props) {
|
||||
{myProfileButton}
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user