mirror of
https://github.com/storytold/artcraft.git
synced 2026-11-09 03:21:23 +00:00
adjusted ui
This commit is contained in:
wil committed
1 parent
5e1999dc8e
commit
a4db5980b3
2 files changed
+109
-93
No files matched your search
+18
-9
@@ -3,10 +3,10 @@ import { NavLink } from 'react-router-dom';
|
||||
import { useParams, useHistory } from "react-router-dom";
|
||||
|
||||
import {
|
||||
Accordion,
|
||||
Button,
|
||||
Label,
|
||||
Panel,
|
||||
NumberSliderV2,
|
||||
TextArea,
|
||||
VideoFakeyou
|
||||
} from "components/common";
|
||||
@@ -145,14 +145,23 @@ export default function PageVSTApp({
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<Accordion className="mt-4">
|
||||
<Accordion.Item title={"Advanced Options"} defaultOpen>
|
||||
<SectionAdvanceOptions
|
||||
onChange={handleOnChange}
|
||||
workflowValues={workflowValues}
|
||||
/>
|
||||
</Accordion.Item>
|
||||
</Accordion>
|
||||
<div className="row g-3 mb-4">
|
||||
<div className="col-12 col-md-6">
|
||||
<NumberSliderV2 {...{
|
||||
min: 1, max: 60, step: 1,
|
||||
initialValue: workflowValues.inputFps,
|
||||
label: "Input FPS",
|
||||
thumbTip: "Input FPS",
|
||||
onChange: (val)=>{handleOnChange({inputFps: val})}
|
||||
}}/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row g-3 mt-4">
|
||||
<SectionAdvanceOptions
|
||||
onChange={handleOnChange}
|
||||
workflowValues={workflowValues}
|
||||
/>
|
||||
</div>
|
||||
<div className="row g-3 mt-4">
|
||||
<div className="col-12 d-flex justify-content-between">
|
||||
<NavLink to={`${parentPath}`}>
|
||||
|
||||
+91
-84
@@ -11,7 +11,9 @@ import {
|
||||
from "@fortawesome/pro-solid-svg-icons";
|
||||
|
||||
import {
|
||||
Accordion,
|
||||
Button,
|
||||
Label,
|
||||
NumberSliderV2
|
||||
} from 'components/common';
|
||||
import { WorkflowValuesType } from './helpers';
|
||||
@@ -25,96 +27,101 @@ export default function sectionAdvanceOptions({
|
||||
}){
|
||||
return (
|
||||
<>
|
||||
<div className="d-flex justify-content-between p-3 w-100">
|
||||
<Label label="Video's Camera Angle"/>
|
||||
<div className="d-flex justify-content-between w-100">
|
||||
<Button icon={faFaceViewfinder} label="Face Closeups"/>
|
||||
<Button icon={faUser} label="Half Body Shots"/>
|
||||
<Button icon={faPerson} label="Full Body Shots"/>
|
||||
<Button icon={faBuildingColumns} label="Architecture or Landscape"/>
|
||||
<Button icon={faText} label="Flat Logos, or Typographies"/>
|
||||
</div>
|
||||
<div className="row g-3 p-3">
|
||||
<div className="col-md-6">
|
||||
<NumberSliderV2 {...{
|
||||
min: 0, max: 1, step: 0.1,
|
||||
initialValue: wfVal.cnCanny,
|
||||
label: "Canny",
|
||||
thumbTip: "Canny",
|
||||
onChange: (val)=>{handleOnChange({cnCanny: val})}
|
||||
}}/>
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<NumberSliderV2 {...{
|
||||
min: 0, max: 1, step: 0.1,
|
||||
initialValue: wfVal.cnLinearAnime,
|
||||
label: "Line Art Anime",
|
||||
thumbTip: "Line Art Anime",
|
||||
onChange: (val)=>{handleOnChange({cnLinearAnime: val})}
|
||||
}}/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row g-3 p-3">
|
||||
<div className="col-md-6">
|
||||
<NumberSliderV2 {...{
|
||||
min: 0, max: 1, step: 0.1,
|
||||
initialValue: wfVal.cnDepth,
|
||||
label: "Depth",
|
||||
thumbTip: "Depth",
|
||||
onChange: (val)=>{handleOnChange({cnDepth: val})}
|
||||
}}/>
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<NumberSliderV2 {...{
|
||||
min: 0, max: 1, step: 0.1,
|
||||
initialValue: wfVal.cnOpenPose,
|
||||
label: "OpenPose",
|
||||
thumbTip: "OpenPose",
|
||||
onChange: (val)=>{handleOnChange({cnOpenPose: val})}
|
||||
}}/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row g-3 p-3">
|
||||
<div className="col-md-6">
|
||||
<NumberSliderV2 {...{
|
||||
min: 0, max: 1, step: 0.1,
|
||||
initialValue: wfVal.cnPipeFace,
|
||||
label: "Media Pipe Face",
|
||||
thumbTip: "Media Pipe Face",
|
||||
onChange: (val)=>{handleOnChange({cnPipeFace: val})}
|
||||
}}/>
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<NumberSliderV2 {...{
|
||||
min: 0, max: 1, step: 0.1,
|
||||
initialValue: wfVal.cnSparse,
|
||||
label: "Sparse Scribble",
|
||||
thumbTip: "Sparse Scribble",
|
||||
onChange: (val)=>{handleOnChange({cnSparse: val})}
|
||||
}}/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row g-3 p-3">
|
||||
<div className="col-md-6">
|
||||
<NumberSliderV2 {...{
|
||||
min: 0, max: 1, step: 0.1,
|
||||
initialValue: wfVal.cnLinearRealistic,
|
||||
label: "Video CN (Linear Realistic)",
|
||||
thumbTip: "Video CN",
|
||||
onChange: (val)=>{handleOnChange({cnLinearRealistic: val})}
|
||||
}}/>
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<NumberSliderV2 {...{
|
||||
min: 0, max: 1, step: 0.1,
|
||||
initialValue: wfVal.cnTile,
|
||||
label: "Tile CN",
|
||||
thumbTip: "Tile CN",
|
||||
onChange: (val)=>{handleOnChange({cnTile: val})}
|
||||
}}/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="d-flex p-3 justify-content-end">
|
||||
<Button icon={faRotateLeft} label="Reset"/>
|
||||
</div>
|
||||
<Accordion className="mt-4">
|
||||
<Accordion.Item title={"Advanced Options"}>
|
||||
<div className="row g-3 p-3">
|
||||
<div className="col-md-6">
|
||||
<NumberSliderV2 {...{
|
||||
min: 0, max: 1, step: 0.1,
|
||||
initialValue: wfVal.cnCanny,
|
||||
label: "Canny",
|
||||
thumbTip: "Canny",
|
||||
onChange: (val)=>{handleOnChange({cnCanny: val})}
|
||||
}}/>
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<NumberSliderV2 {...{
|
||||
min: 0, max: 1, step: 0.1,
|
||||
initialValue: wfVal.cnLinearAnime,
|
||||
label: "Line Art Anime",
|
||||
thumbTip: "Line Art Anime",
|
||||
onChange: (val)=>{handleOnChange({cnLinearAnime: val})}
|
||||
}}/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row g-3 p-3">
|
||||
<div className="col-md-6">
|
||||
<NumberSliderV2 {...{
|
||||
min: 0, max: 1, step: 0.1,
|
||||
initialValue: wfVal.cnDepth,
|
||||
label: "Depth",
|
||||
thumbTip: "Depth",
|
||||
onChange: (val)=>{handleOnChange({cnDepth: val})}
|
||||
}}/>
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<NumberSliderV2 {...{
|
||||
min: 0, max: 1, step: 0.1,
|
||||
initialValue: wfVal.cnOpenPose,
|
||||
label: "OpenPose",
|
||||
thumbTip: "OpenPose",
|
||||
onChange: (val)=>{handleOnChange({cnOpenPose: val})}
|
||||
}}/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row g-3 p-3">
|
||||
<div className="col-md-6">
|
||||
<NumberSliderV2 {...{
|
||||
min: 0, max: 1, step: 0.1,
|
||||
initialValue: wfVal.cnPipeFace,
|
||||
label: "Media Pipe Face",
|
||||
thumbTip: "Media Pipe Face",
|
||||
onChange: (val)=>{handleOnChange({cnPipeFace: val})}
|
||||
}}/>
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<NumberSliderV2 {...{
|
||||
min: 0, max: 1, step: 0.1,
|
||||
initialValue: wfVal.cnSparse,
|
||||
label: "Sparse Scribble",
|
||||
thumbTip: "Sparse Scribble",
|
||||
onChange: (val)=>{handleOnChange({cnSparse: val})}
|
||||
}}/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row g-3 p-3">
|
||||
<div className="col-md-6">
|
||||
<NumberSliderV2 {...{
|
||||
min: 0, max: 1, step: 0.1,
|
||||
initialValue: wfVal.cnLinearRealistic,
|
||||
label: "Video CN (Linear Realistic)",
|
||||
thumbTip: "Video CN",
|
||||
onChange: (val)=>{handleOnChange({cnLinearRealistic: val})}
|
||||
}}/>
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<NumberSliderV2 {...{
|
||||
min: 0, max: 1, step: 0.1,
|
||||
initialValue: wfVal.cnTile,
|
||||
label: "Tile CN",
|
||||
thumbTip: "Tile CN",
|
||||
onChange: (val)=>{handleOnChange({cnTile: val})}
|
||||
}}/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="d-flex p-3 justify-content-end">
|
||||
<Button icon={faRotateLeft} label="Reset"/>
|
||||
</div>
|
||||
</Accordion.Item>
|
||||
</Accordion>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user