mirror of
https://github.com/storytold/storyteller-bevy.git
synced 2026-10-18 00:23:14 +00:00
Brandon more styles (#118)
This commit is contained in:
Brandon Thomas
@@ -10,6 +10,18 @@ import styles from "./style-tab.scss?inline";
|
||||
export type VstStyle
|
||||
= "anime_2d_flat"
|
||||
| "cartoon_3d"
|
||||
| "anime_2d"
|
||||
| "anime_ghibli"
|
||||
| "anime_retro_neon"
|
||||
| "anime_standard"
|
||||
| "comic_book"
|
||||
| "ink_punk"
|
||||
| "pixel_art"
|
||||
| "ink_splash"
|
||||
| "jojo_style"
|
||||
| "pop_art"
|
||||
| "realistic_1"
|
||||
| "realistic_2"
|
||||
| "ink_bw_style"
|
||||
| "paper_origami"
|
||||
;
|
||||
@@ -23,24 +35,84 @@ export interface StyleOption {
|
||||
export const STYLE_OPTIONS: readonly StyleOption[] = [
|
||||
{
|
||||
label: "2D Anime",
|
||||
imageUrl: "",
|
||||
value: "anime_2d",
|
||||
},
|
||||
{
|
||||
label: "2D Anime (Flat)",
|
||||
imageUrl: "https://fakeyou.com/images/landing/onboarding/styles/style-2d-anime.webp",
|
||||
value: "anime_2d_flat",
|
||||
},
|
||||
{
|
||||
label: "Anime Ghibli",
|
||||
imageUrl: "",
|
||||
value: "anime_ghibli",
|
||||
},
|
||||
{
|
||||
label: "Anime Retro Neon",
|
||||
imageUrl: "",
|
||||
value: "anime_retro_neon",
|
||||
},
|
||||
{
|
||||
label: "Anime Standard",
|
||||
imageUrl: "",
|
||||
value: "anime_standard",
|
||||
},
|
||||
{
|
||||
label: "3D Cartoon",
|
||||
imageUrl: "https://fakeyou.com/images/landing/onboarding/styles/style-3d-cartoon.webp",
|
||||
value: "cartoon_3d",
|
||||
},
|
||||
{
|
||||
label: "Comic Book",
|
||||
imageUrl: "",
|
||||
value: "comic_book",
|
||||
},
|
||||
{
|
||||
label: "Ink Punk",
|
||||
imageUrl: "",
|
||||
value: "ink_punk",
|
||||
},
|
||||
{
|
||||
label: "Ink Splash",
|
||||
imageUrl: "",
|
||||
value: "ink_splash",
|
||||
},
|
||||
{
|
||||
label: "Ink B&W",
|
||||
imageUrl: "https://fakeyou.com/images/landing/onboarding/styles/style-ink-bw.webp",
|
||||
value: "ink_bw_style",
|
||||
},
|
||||
{
|
||||
label: "Jojo Style",
|
||||
imageUrl: "",
|
||||
value: "jojo_style",
|
||||
},
|
||||
{
|
||||
label: "Origami",
|
||||
imageUrl: "https://fakeyou.com/images/landing/onboarding/styles/style-origami.webp",
|
||||
value: "paper_origami",
|
||||
},
|
||||
{
|
||||
label: "Pixel Art",
|
||||
imageUrl: "",
|
||||
value: "pixel_art",
|
||||
},
|
||||
{
|
||||
label: "Pop Art",
|
||||
imageUrl: "",
|
||||
value: "pop_art",
|
||||
},
|
||||
{
|
||||
label: "Realistic 1",
|
||||
imageUrl: "",
|
||||
value: "realistic_1",
|
||||
},
|
||||
{
|
||||
label: "Realistic 2",
|
||||
imageUrl: "",
|
||||
value: "realistic_2",
|
||||
},
|
||||
];
|
||||
|
||||
@customElement("sts-style-tab")
|
||||
@@ -60,7 +132,6 @@ export class StyleTab extends LitElement {
|
||||
oAThing(): void { console.log("🍕")};
|
||||
|
||||
compositorEnqueue = (sceneToken: string) => () => {
|
||||
console.log("🏎️",this.sceneToken,sceneToken);
|
||||
EnqueueEngineCompositing("",{
|
||||
uuid_idempotency_token: uuid(),
|
||||
media_file_token: sceneToken,
|
||||
@@ -69,8 +140,6 @@ export class StyleTab extends LitElement {
|
||||
skybox: "meadow_4k",
|
||||
}).then((res: any) => {
|
||||
if (res && res.success) {
|
||||
console.log("💎",res.inference_job_token);
|
||||
|
||||
window.parent.postMessage(
|
||||
`studio-scene-composited:compositeJobToken:${ res.inference_job_token }`,
|
||||
"*"
|
||||
@@ -81,7 +150,6 @@ export class StyleTab extends LitElement {
|
||||
}
|
||||
|
||||
thingy = ({ target }: any ) => {
|
||||
console.log("🏎️", this.sceneToken);
|
||||
}
|
||||
|
||||
protected override render = (): TemplateResult => html`
|
||||
|
||||
@@ -0,0 +1,53 @@
|
||||
@use "sass:math";
|
||||
|
||||
:host {
|
||||
// background: red;
|
||||
display: flex;
|
||||
gap: 0.6rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.bubble {
|
||||
position: relative;
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
padding: 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
background: {
|
||||
size: cover;
|
||||
position: center center;
|
||||
}
|
||||
|
||||
outline: #FFF2 solid 2px;
|
||||
color: rgba(#fff, 0.75);
|
||||
transition: {
|
||||
property: background-color, outline-color;
|
||||
duration: 200ms;
|
||||
timing-function: ease;
|
||||
}
|
||||
white-space: nowrap;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
.gradient {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(to top, #000B, #0000);
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.label {
|
||||
position: relative;
|
||||
font: {
|
||||
size: math.div(12, 16) * 1rem;
|
||||
weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
import { FormFieldBaseElement } from "@storyteller/studio-ui/forms/form-field-base";
|
||||
import { PropertyValues, html, unsafeCSS } from "lit";
|
||||
import { customElement, property } from "lit/decorators.js";
|
||||
import { classMap } from "lit/directives/class-map.js";
|
||||
import { styleMap } from "lit/directives/style-map.js";
|
||||
|
||||
import { type StyleOption, type VstStyle } from "./inspector-tabs/style-tab";
|
||||
|
||||
import styles from "./style-select.element.scss?inline";
|
||||
|
||||
@customElement("sts-style-select")
|
||||
export class StyleSelect extends FormFieldBaseElement {
|
||||
static override styles = unsafeCSS(styles);
|
||||
|
||||
@property({ reflect: true })
|
||||
override role = "listbox"
|
||||
|
||||
@property({ attribute: false })
|
||||
options: readonly StyleOption[] = [];
|
||||
|
||||
@property() value?: VstStyle;
|
||||
|
||||
protected override update(changes: PropertyValues<this>): void {
|
||||
if (changes.has("value"))
|
||||
this.internals.setFormValue(this.value ?? "");
|
||||
|
||||
super.update(changes);
|
||||
}
|
||||
|
||||
protected override render = () => html`
|
||||
<div>
|
||||
<!--
|
||||
TODO(bt): preview image
|
||||
<div
|
||||
class=${classMap({
|
||||
"bubble": true,
|
||||
})}
|
||||
style=${styleMap({
|
||||
"background-image": `url(https://fakeyou.com/images/landing/onboarding/styles/style-2d-anime.webp)`,
|
||||
})}
|
||||
>
|
||||
<div class="gradient"></div>
|
||||
<span class="label">
|
||||
${ "Foo" }
|
||||
</span>
|
||||
</div>
|
||||
-->
|
||||
<select
|
||||
@change=${(event: InputEvent) => {
|
||||
const value = (event.target as HTMLSelectElement).value;
|
||||
|
||||
// this.onChange({ target: { name: this.name, value: itemValue } });
|
||||
this.dispatchEvent(new CustomEvent("value-change", {
|
||||
detail: value,
|
||||
}))
|
||||
} }
|
||||
>
|
||||
${ this.options.map(({ label, value }) => html`
|
||||
<option value="${value}">
|
||||
${ label }
|
||||
</option>`
|
||||
)}
|
||||
</select>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
@@ -10,7 +10,7 @@ import { bind, on } from "@storyteller/framework";
|
||||
|
||||
import { VideoStylePreview } from "./api/VideoStylePreview";
|
||||
|
||||
import "./bubble-select.element";
|
||||
import "./style-select.element";
|
||||
|
||||
import styles from "./temp-video-preview.element.scss?inline";
|
||||
import { STYLE_OPTIONS, type VstStyle } from "./inspector-tabs/style-tab";
|
||||
@@ -203,11 +203,13 @@ export class TempVideoPreview extends LitElement {
|
||||
>
|
||||
Select Base Style
|
||||
</label>
|
||||
<sts-bubble-select
|
||||
|
||||
<sts-style-select
|
||||
id="video-style-preview-base-style"
|
||||
.options=${STYLE_OPTIONS}
|
||||
.value=${bind(this, "selectedStyle")}
|
||||
></sts-bubble-select>
|
||||
></sts-style-select>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="video-style-preview__prompts">
|
||||
|
||||
Reference in New Issue
Block a user