storytold/storyteller-bevy
2
0
Fork 0
mirror of https://github.com/storytold/storyteller-bevy.git synced 2026-10-27 08:48:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add WIP video style preview dialog (#115)

Browse Source 
Co-authored-by: Victor <victor@storyteller.ai>
This commit is contained in:
Danny McGee
2024-03-29 22:33:44 -04:00
committed by GitHub
parent 3dba6cb284
commit fbc914fd7b
19 changed files with 677 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files
studio-frontend/src/app/inspector-tabs/style-tab.ts
+76 -57
View File
@@ -1,41 +1,56 @@
import { LitElement, html, nothing, unsafeCSS } from "lit";
import { bind, on } from "@storyteller/framework";
import { LitElement, TemplateResult, html, unsafeCSS } from "lit";
import { customElement, property, state } from "lit/decorators.js";
import styles from "./style-tab.scss?inline";
import { EnqueueEngineCompositing } from "../api/EnqueueEngineCompositing";
import { v4 as uuid } from "uuid";
import { drag, on, provide } from "@storyteller/framework";
import { EnqueueEngineCompositing } from "../api/EnqueueEngineCompositing";
import styles from "./style-tab.scss?inline";
export type VstStyle
= "anime_2d_flat"
| "cartoon_3d"
| "ink_bw_style"
| "paper_origami"
;
export interface StyleOption {
label: string;
imageUrl: string;
value: VstStyle;
}
export const STYLE_OPTIONS: readonly StyleOption[] = [
{
label: "2D Anime",
imageUrl: "https://fakeyou.com/images/landing/onboarding/styles/style-2d-anime.webp",
value: "anime_2d_flat",
},
{
label: "3D Cartoon",
imageUrl: "https://fakeyou.com/images/landing/onboarding/styles/style-3d-cartoon.webp",
value: "cartoon_3d",
},
{
label: "Ink B&W",
imageUrl: "https://fakeyou.com/images/landing/onboarding/styles/style-ink-bw.webp",
value: "ink_bw_style",
},
{
label: "Origami",
imageUrl: "https://fakeyou.com/images/landing/onboarding/styles/style-origami.webp",
value: "paper_origami",
},
];
@customElement("sts-style-tab")
export class StyleTab extends LitElement {
static override styles = unsafeCSS(styles);
@state() vstStyle = "anime_2d_flat";
@state() vstStyle: VstStyle = "anime_2d_flat";
@state() posPrompt = "";
@state() negPrompt = "";
@property() sceneToken = "";
styleOptions = [
{
label: "2D Anime",
imageUrl: "/images/landing/onboarding/styles/style-2d-anime.webp",
value: "anime_2d_flat",
},
{
label: "3D Cartoon",
imageUrl: "/images/landing/onboarding/styles/style-3d-cartoon.webp",
value: "cartoon_3d",
},
{
label: "Ink B&W",
imageUrl: "/images/landing/onboarding/styles/style-ink-bw.webp",
value: "ink_bw_style",
},
{
label: "Origami",
imageUrl: "/images/landing/onboarding/styles/style-origami.webp",
value: "paper_origami",
},
];
inputChange = ({ target }: { target: { name: string, value: any } }) => {
// console.log("💁🏼‍♀️", this[target.name]);
// this[target.name] = target.value; // fix later
@@ -69,32 +84,36 @@ export class StyleTab extends LitElement {
console.log("🏎️", this.sceneToken);
}
protected override render = () => html`<section class="inspector-input-set">
${ this.vstStyle }
<button @click=${ this.thingy }>State</button>
<sts-bubble-select
.onChange=${ ({ target }: any) => { this.vstStyle = target.value; } }
.options=${this.styleOptions}
.value=${this.vstStyle}
></sts-bubble-select>
<label htmlFor="inspector-posPrompt">Positive Prompt</label>
<textarea
id="inspector-posPrompt"
name="posPrompt"
@input=${ this.inputChange }
.value=${ this.posPrompt }
></textarea>
<label htmlFor="inspector-posPrompt">Negative Prompt</label>
<textarea
id="inspector-negPrompt"
name="negPrompt"
@input=${ this.inputChange }
.value=${ this.negPrompt }
></textarea>
<sts-button
@click=${this.compositorEnqueue(this.sceneToken)}
>
Generate your movie
</sts-button>
</section>`;
}
protected override render = (): TemplateResult => html`
<section class="inspector-input-set">
${ this.vstStyle }
<button @click=${ this.thingy }>State</button>
<sts-bubble-select
.options=${STYLE_OPTIONS}
.value=${bind(this, "vstStyle")}
></sts-bubble-select>
<label htmlFor="inspector-posPrompt">Positive Prompt</label>
<textarea
id="inspector-posPrompt"
name="posPrompt"
@input=${ this.inputChange }
.value=${ this.posPrompt }
></textarea>
<label htmlFor="inspector-posPrompt">Negative Prompt</label>
<textarea
id="inspector-negPrompt"
name="negPrompt"
@input=${ this.inputChange }
.value=${ this.negPrompt }
></textarea>
<sts-button
@click=${this.compositorEnqueue(this.sceneToken)}
>
Generate your movie
</sts-button>
</section>
`;
}