mirror of
https://github.com/storytold/artcraft.git
synced 2026-11-04 17:38:10 +00:00
default cinematic, hide options/negative prompt under dropdown (#613)
This commit is contained in:
BFlat authored and 
GitHub committed
1 parent
85840d1677
commit
7c1bb5e452
6 files changed
+185
-78
No files matched your search
@@ -79,6 +79,7 @@
|
||||
"react-share": "^4.4.1",
|
||||
"react-twitch-embed": "^3.0.1",
|
||||
"react-typeform-embed": "^1.0.8",
|
||||
"react-use-measure": "^2.1.1",
|
||||
"react-wavesurfer.js": "^0.0.8",
|
||||
"sass": "^1.57.1",
|
||||
"swiper": "^11.0.5",
|
||||
|
||||
@@ -0,0 +1,53 @@
|
||||
import React, { useState, useRef } from "react";
|
||||
import { useSpring, animated, easings } from "@react-spring/web";
|
||||
import useMeasure from "react-use-measure";
|
||||
import Button from "../Button";
|
||||
import { faChevronDown, faChevronUp } from "@fortawesome/pro-solid-svg-icons";
|
||||
|
||||
interface DropdownOptionsProps {
|
||||
title?: string;
|
||||
closeTitle?: string;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export const DropdownOptions: React.FC<DropdownOptionsProps> = ({
|
||||
title = "Show Advanced Options",
|
||||
closeTitle = "Hide Advanced Options",
|
||||
children,
|
||||
}) => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [ref, { height: viewHeight }] = useMeasure();
|
||||
const previousHeightRef = useRef(0);
|
||||
|
||||
const toggleDropdown = () => setIsOpen(!isOpen);
|
||||
|
||||
const animationProps = useSpring({
|
||||
height: isOpen ? viewHeight : 0,
|
||||
opacity: isOpen ? 1 : 0,
|
||||
config: { duration: 200, easing: easings.easeInOutQuad },
|
||||
onRest: () => {
|
||||
if (isOpen) {
|
||||
previousHeightRef.current = viewHeight;
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<animated.div style={{ ...animationProps, overflow: "hidden" }}>
|
||||
<div ref={ref} className="pb-3">
|
||||
{children}
|
||||
</div>
|
||||
</animated.div>
|
||||
<Button
|
||||
onClick={toggleDropdown}
|
||||
label={isOpen ? closeTitle : title}
|
||||
variant="link"
|
||||
icon={isOpen ? faChevronUp : faChevronDown}
|
||||
className="fs-7"
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default DropdownOptions;
|
||||
@@ -0,0 +1 @@
|
||||
export { default } from "./DropdownOptions";
|
||||
@@ -12,6 +12,7 @@ import { MediaCards, SkeletonCard, WeightsCards } from "./Card";
|
||||
import Container from "./Container";
|
||||
import CoverImageInput from "./CoverImageInput";
|
||||
import DeviceNotSupported from "./DeviceNotSupported";
|
||||
import DropdownOptions from "./DropdownOptions";
|
||||
import ErrorMessage from "./ErrorMessage";
|
||||
import FileActions from "./FileActions";
|
||||
import FileDetails from "./FileDetails";
|
||||
@@ -70,6 +71,7 @@ export {
|
||||
Button,
|
||||
//Cards
|
||||
DeviceNotSupported,
|
||||
DropdownOptions,
|
||||
MediaCards,
|
||||
SkeletonCard,
|
||||
WeightsCards,
|
||||
|
||||
@@ -11,6 +11,7 @@ import {
|
||||
Slider,
|
||||
TempSelect as Select,
|
||||
Label,
|
||||
DropdownOptions,
|
||||
} from "components/common";
|
||||
import { EntityInput } from "components/entities";
|
||||
import {
|
||||
@@ -35,9 +36,10 @@ export default function StyleVideo() {
|
||||
const [length, lengthSet] = useState(3000);
|
||||
const [useFaceDetailer, setUseFaceDetailer] = useState(false);
|
||||
const [useUpscaler, setUseUpscaler] = useState(false);
|
||||
const [useCinematic, setUseCinematic] = useState(false);
|
||||
const [useCinematic, setUseCinematic] = useState(true);
|
||||
const [enableLipsync, setEnableLipsync] = useState(false);
|
||||
const [strength, setStrength] = useState(1.0);
|
||||
const [visualStrength, setVisualStrength] = useState(100);
|
||||
const { enqueue } = useInferenceJobs();
|
||||
|
||||
usePrefixedDocumentTitle("Style Video");
|
||||
@@ -98,6 +100,13 @@ export default function StyleVideo() {
|
||||
setEnableLipsync(!!prompt?.lipsync_enabled);
|
||||
};
|
||||
|
||||
const handleSliderChange = ({ target }: { target: any }) => {
|
||||
const decimalValue = parseFloat(target.value);
|
||||
const visualValue = Math.round(decimalValue * 100);
|
||||
setStrength(decimalValue);
|
||||
setVisualStrength(visualValue);
|
||||
};
|
||||
|
||||
const storytellerCTA = (
|
||||
<div className="row g-2 g-md-4">
|
||||
<div className="col-12 col-md-4">
|
||||
@@ -223,15 +232,20 @@ export default function StyleVideo() {
|
||||
value: prompt,
|
||||
}}
|
||||
/>
|
||||
<TextArea
|
||||
{...{
|
||||
label: "Negative prompt",
|
||||
rows: 1,
|
||||
onChange: ({ target }: { target: any }) => {
|
||||
negativePromptSet(target.value);
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<DropdownOptions
|
||||
title="Show Negative Prompt"
|
||||
closeTitle="Hide Negative Prompt"
|
||||
>
|
||||
<TextArea
|
||||
{...{
|
||||
label: "Negative prompt",
|
||||
rows: 1,
|
||||
onChange: ({ target }: { target: any }) => {
|
||||
negativePromptSet(target.value);
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</DropdownOptions>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-3 w-100">
|
||||
@@ -240,7 +254,7 @@ export default function StyleVideo() {
|
||||
accept: ["image"],
|
||||
aspectRatio: "square",
|
||||
className: "w-100",
|
||||
label: "IP Adapter Image",
|
||||
label: "Additional Style Reference Image (Optional)",
|
||||
name: "IPAToken",
|
||||
value: IPAToken,
|
||||
onChange: ({ target }: { target: any }) => {
|
||||
@@ -250,85 +264,101 @@ export default function StyleVideo() {
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<h6 className="mt-4">Strength ({strength})</h6>
|
||||
<h6 className="mt-4">Style Strength ({visualStrength}%)</h6>
|
||||
<div className="w-100">
|
||||
<Slider
|
||||
min={0.0}
|
||||
max={1.0}
|
||||
step={0.1}
|
||||
onChange={({ target }: { target: any }) => {
|
||||
setStrength(parseFloat(target.value));
|
||||
}}
|
||||
step={0.01}
|
||||
onChange={handleSliderChange}
|
||||
value={strength}
|
||||
className="w-100"
|
||||
/>
|
||||
</div>
|
||||
<h6 className="mt-3 pb-2">Quality Options</h6>
|
||||
<div>
|
||||
<div className="form-check form-switch w-100">
|
||||
<input
|
||||
className="form-check-input"
|
||||
type="checkbox"
|
||||
id="useFaceDetailer"
|
||||
checked={useFaceDetailer}
|
||||
onChange={() => setUseFaceDetailer(!useFaceDetailer)}
|
||||
/>
|
||||
<label
|
||||
className="form-check-label"
|
||||
htmlFor="useFaceDetailer"
|
||||
>
|
||||
Use Face Detailer
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="mt-3">
|
||||
<DropdownOptions>
|
||||
<div>
|
||||
<h6 className="pb-2">Quality Options</h6>
|
||||
<div>
|
||||
<div className="form-check form-switch w-100">
|
||||
<input
|
||||
className="form-check-input"
|
||||
type="checkbox"
|
||||
id="useFaceDetailer"
|
||||
checked={useFaceDetailer}
|
||||
onChange={() =>
|
||||
setUseFaceDetailer(!useFaceDetailer)
|
||||
}
|
||||
/>
|
||||
<label
|
||||
className="form-check-label"
|
||||
htmlFor="useFaceDetailer"
|
||||
>
|
||||
Use Face Detailer
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="form-check form-switch w-100">
|
||||
<input
|
||||
className="form-check-input"
|
||||
type="checkbox"
|
||||
id="useUpscaler"
|
||||
checked={useUpscaler}
|
||||
onChange={() => setUseUpscaler(!useUpscaler)}
|
||||
/>
|
||||
<label
|
||||
className="form-check-label"
|
||||
htmlFor="useUpscaler"
|
||||
>
|
||||
Use Upscaler
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="form-check form-switch w-100">
|
||||
<input
|
||||
className="form-check-input"
|
||||
type="checkbox"
|
||||
id="useCinematic"
|
||||
checked={useCinematic}
|
||||
onChange={() => setUseCinematic(!useCinematic)}
|
||||
/>
|
||||
<label
|
||||
className="form-check-label"
|
||||
htmlFor="useCinematic"
|
||||
>
|
||||
Use Cinematic
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="form-check form-switch w-100">
|
||||
<input
|
||||
className="form-check-input"
|
||||
type="checkbox"
|
||||
id="enableLipsync"
|
||||
checked={enableLipsync}
|
||||
onChange={() => setEnableLipsync(!enableLipsync)}
|
||||
/>
|
||||
<label
|
||||
className="form-check-label"
|
||||
htmlFor="enableLipsync"
|
||||
>
|
||||
Preserve Lip Movement
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DropdownOptions>
|
||||
</div>
|
||||
<div>
|
||||
<div className="form-check form-switch w-100">
|
||||
<input
|
||||
className="form-check-input"
|
||||
type="checkbox"
|
||||
id="useUpscaler"
|
||||
checked={useUpscaler}
|
||||
onChange={() => setUseUpscaler(!useUpscaler)}
|
||||
/>
|
||||
<label className="form-check-label" htmlFor="useUpscaler">
|
||||
Use Upscaler
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="form-check form-switch w-100">
|
||||
<input
|
||||
className="form-check-input"
|
||||
type="checkbox"
|
||||
id="useCinematic"
|
||||
checked={useCinematic}
|
||||
onChange={() => setUseCinematic(!useCinematic)}
|
||||
/>
|
||||
<label className="form-check-label" htmlFor="useCinematic">
|
||||
Use Cinematic
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="form-check form-switch w-100">
|
||||
<input
|
||||
className="form-check-input"
|
||||
type="checkbox"
|
||||
id="enableLipsync"
|
||||
checked={enableLipsync}
|
||||
onChange={() => setEnableLipsync(!enableLipsync)}
|
||||
/>
|
||||
<label className="form-check-label" htmlFor="enableLipsync">
|
||||
Preserve Lip Movement
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
|
||||
<div className="mt-4">
|
||||
<SegmentButtons
|
||||
{...{
|
||||
className: "fy-style-video-length",
|
||||
label: "Final video length",
|
||||
label: "Video Duration",
|
||||
onChange: ({ target }: { target: any }) => {
|
||||
lengthSet(target.value);
|
||||
},
|
||||
|
||||
@@ -4485,6 +4485,7 @@ __metadata:
|
||||
moment: ^2.29.4
|
||||
prettier: ^3.1.0
|
||||
pretty-quick: ^3.1.3
|
||||
react-use-measure: ^2.1.1
|
||||
universal-cookie: ^6.1.1
|
||||
yarn: ^1.22.19
|
||||
languageName: unknown
|
||||
@@ -9118,6 +9119,13 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"debounce@npm:^1.2.1":
|
||||
version: 1.2.1
|
||||
resolution: "debounce@npm:1.2.1"
|
||||
checksum: 682a89506d9e54fb109526f4da255c5546102fbb8e3ae75eef3b04effaf5d4853756aee97475cd4650641869794e44f410eeb20ace2b18ea592287ab2038519e
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"debug@npm:2.6.9, debug@npm:^2.1.3, debug@npm:^2.2.0, debug@npm:^2.3.3, debug@npm:^2.6.0, debug@npm:^2.6.9":
|
||||
version: 2.6.9
|
||||
resolution: "debug@npm:2.6.9"
|
||||
@@ -18145,6 +18153,18 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"react-use-measure@npm:^2.1.1":
|
||||
version: 2.1.1
|
||||
resolution: "react-use-measure@npm:2.1.1"
|
||||
dependencies:
|
||||
debounce: ^1.2.1
|
||||
peerDependencies:
|
||||
react: ">=16.13"
|
||||
react-dom: ">=16.13"
|
||||
checksum: b8e8939229d463c3c505f7b617925c0228efae0cd6f651371f463846417b06c9170be57df51293a61027c41770f8a090fdb8a08717c4e36290ccb496e0318f1f
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"react-wavesurfer.js@npm:^0.0.8":
|
||||
version: 0.0.8
|
||||
resolution: "react-wavesurfer.js@npm:0.0.8"
|
||||
|
||||
Reference in new issue
Block a user