mirror of
https://github.com/storytold/storyteller-bevy.git
synced 2026-10-28 08:58:07 +00:00
Bootstrap Image Generator application (#53)
This PR begins scaffolding the Stable Diffusion Turbo application (title
TBD), which is a separate frontend for Storyteller Engine which focuses
on image generation.
### Design Overview
* The application renders a "split-screen" view, with Storyteller Studio
on the left, and the Stable Diffusion Turbo output on the right
* When changes are made in the Studio editor:
- A screenshot is taken from the Bevy application
- Screenshot is piped into Stable Diffusion Turbo model
- Model output is rendered to the screen
* This all happens in as close to real-time as possible
### Work completed in this PR
* The `studio-frontend` project has been (somewhat crudely) refactored
to split most of its components into reusable libraries
- `studio-ui` is a use-case-agnostic design system library for core UI
components. These are "dumb" components which are controlled
via `@property` inputs and send `CustomEvent`s in response to user
input.
- `studio-frontend` is a collection of reusable Storyteller Studio
widgets. These are "smart" components which depend on
`@storyteller/studio` directly, manage their own state, and require very
little configuration or styling. They are designed to be drop-in
building blocks that can be reused between various frontends.
* The new application has been bootstrapped as `image-generator-demo`
- Currently, this simply grabs screenshots from the Bevy application and
renders those screenshots on the right side of the split-screen view. A
future PR will wire up to the Storyteller.ai backend to pipe these
screenshots through Stable Diffusion Turbo, and render that model's
output instead.
### Testing
* Install dependencies as described in the repo's README
* Run `npx nx serve image-generator-demo`
* Open [localhost:4200](http://localhost:4200) in your browser
- Use the camera controller in the left side of the view to manipulate
the Bevy scene
- Verify the right side of the view updates with a fresh screenshot at a
rate of ~5 fps
* Toggle the "Realtime Capture" checkbox
- Verify the right side view no longer updates while the user is
actively manipulating the editor
- This should allow the app to run smoother on lower-spec hardware
---------
Co-authored-by: Danny McGee <dannymcgee@gmail.com>
This commit is contained in:
Brooks Palin
@@ -0,0 +1,4 @@
|
||||
export * from "./lib/button.element";
|
||||
export * from "./lib/icon.element";
|
||||
export * from "./lib/toolbar.element";
|
||||
export * from "./lib/tree.element";
|
||||
@@ -0,0 +1,36 @@
|
||||
:host {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 0.5rem;
|
||||
|
||||
font: {
|
||||
family: "Fira Sans", sans-serif;
|
||||
size: 15px;
|
||||
weight: 500;
|
||||
}
|
||||
line-height: 1.5;
|
||||
|
||||
pointer-events: auto;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
|
||||
background: #0006;
|
||||
color: #FFFC;
|
||||
backdrop-filter: blur(16px);
|
||||
transition: {
|
||||
property: background, color;
|
||||
duration: 0.1s;
|
||||
timing-function: linear;
|
||||
}
|
||||
}
|
||||
|
||||
:host(:hover) {
|
||||
background: #0008;
|
||||
color: #FFFF;
|
||||
}
|
||||
|
||||
.icon {
|
||||
fill: currentColor;
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
import { on } from "@storyteller/framework";
|
||||
import { LitElement, html, nothing, unsafeCSS } from "lit";
|
||||
import { customElement, property } from "lit/decorators.js";
|
||||
|
||||
import styles from "./button.element.scss?inline";
|
||||
|
||||
import "./icon.element";
|
||||
|
||||
@customElement("sts-button")
|
||||
export class ButtonElement extends LitElement {
|
||||
static override styles = unsafeCSS(styles);
|
||||
|
||||
@property() icon?: string;
|
||||
|
||||
override role = "button";
|
||||
override tabIndex = 0;
|
||||
|
||||
@on("keydown")
|
||||
onKeyDown(event: KeyboardEvent) {
|
||||
if (/^( |Enter)$/.test(event.key)) {
|
||||
event.stopPropagation();
|
||||
this.click();
|
||||
}
|
||||
}
|
||||
|
||||
protected override render = () => html`
|
||||
${this.icon
|
||||
? html`<sts-icon icon=${this.icon} aria-hidden="true"></sts-icon>`
|
||||
: nothing}
|
||||
<slot></slot>
|
||||
`
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
:host {
|
||||
display: flex;
|
||||
width: auto;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 1em;
|
||||
}
|
||||
|
||||
.a11y-label {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
padding: 0;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
border: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.svg-wrapper {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
svg {
|
||||
height: 1em;
|
||||
fill: currentColor;
|
||||
}
|
||||
@@ -0,0 +1,87 @@
|
||||
import { spread } from "@storyteller/framework";
|
||||
import { match } from "@storyteller/utility";
|
||||
import { LitElement, TemplateResult, html, nothing, unsafeCSS } from "lit";
|
||||
import { customElement, property } from "lit/decorators.js";
|
||||
import { unsafeSVG } from "lit/directives/unsafe-svg.js";
|
||||
|
||||
import farCrosshairs from "@fortawesome/fontawesome-pro/svgs/regular/crosshairs.svg?raw";
|
||||
import farVideo from "@fortawesome/fontawesome-pro/svgs/regular/video.svg?raw";
|
||||
import fasCircleQuestion from "@fortawesome/fontawesome-pro/svgs/solid/circle-question.svg?raw";
|
||||
import fasKey from "@fortawesome/fontawesome-pro/svgs/solid/key.svg?raw";
|
||||
import farCube from "@fortawesome/fontawesome-pro/svgs/regular/cube.svg?raw";
|
||||
import farGlobe from "@fortawesome/fontawesome-pro/svgs/regular/globe.svg?raw";
|
||||
import farUpDownLeftRight from "@fortawesome/fontawesome-pro/svgs/regular/arrows-up-down-left-right.svg?raw";
|
||||
import fasPlay from "@fortawesome/fontawesome-pro/svgs/solid/play.svg?raw";
|
||||
import fasFwdStep from "@fortawesome/fontawesome-pro/svgs/solid/forward-step.svg?raw";
|
||||
import fasFwdFast from "@fortawesome/fontawesome-pro/svgs/solid/forward-fast.svg?raw";
|
||||
import fasBwdStep from "@fortawesome/fontawesome-pro/svgs/solid/backward-step.svg?raw";
|
||||
import fasBwdFast from "@fortawesome/fontawesome-pro/svgs/solid/backward-fast.svg?raw";
|
||||
import fasQuestion from "@fortawesome/fontawesome-pro/svgs/solid/question.svg?raw";
|
||||
import farRotate from "@fortawesome/fontawesome-pro/svgs/regular/arrows-rotate.svg?raw";
|
||||
import farScale from "@fortawesome/fontawesome-pro/svgs/regular/arrow-up-right-and-arrow-down-left-from-center.svg?raw";
|
||||
import fasCaretRight from "@fortawesome/fontawesome-pro/svgs/solid/caret-right.svg?raw";
|
||||
import fasFloppyDisk from "@fortawesome/fontawesome-pro/svgs/solid/floppy-disk.svg?raw";
|
||||
|
||||
import styles from "./icon.element.scss?inline";
|
||||
|
||||
@customElement("sts-icon")
|
||||
export class IconElement extends LitElement {
|
||||
static override styles = unsafeCSS(styles);
|
||||
|
||||
@property() icon = "";
|
||||
|
||||
protected override render = () => html`
|
||||
<span class="a11y-label">
|
||||
<slot></slot>
|
||||
</span>
|
||||
<div class="svg-wrapper" role="presentation">
|
||||
${renderSvg(this.icon)}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
const RENDER_RESULTS = new Map<string, TemplateResult>();
|
||||
|
||||
function renderSvg(iconId: string) {
|
||||
if (RENDER_RESULTS.has(iconId))
|
||||
return RENDER_RESULTS.get(iconId)!;
|
||||
|
||||
const svgSrc = match (iconId, {
|
||||
"bwd-fast": () => fasBwdFast,
|
||||
"bwd-step": () => fasBwdStep,
|
||||
"circle-question": () => fasCircleQuestion,
|
||||
"caret-right": () => fasCaretRight,
|
||||
"crosshairs": () => farCrosshairs,
|
||||
"cube": () => farCube,
|
||||
"floppy-disk": () => fasFloppyDisk,
|
||||
"fwd-fast": () => fasFwdFast,
|
||||
"fwd-step": () => fasFwdStep,
|
||||
"key": () => fasKey,
|
||||
"globe": () => farGlobe,
|
||||
"play": () => fasPlay,
|
||||
"question": () => fasQuestion,
|
||||
"rotate": () => farRotate,
|
||||
"scale": () => farScale,
|
||||
"up-down-left-right": () => farUpDownLeftRight,
|
||||
"video": () => farVideo,
|
||||
_: () => null,
|
||||
});
|
||||
|
||||
if (!svgSrc) return nothing;
|
||||
|
||||
const [, attrsString, body] = svgSrc.match(/<svg(.+?)>(.+?)<\/svg>/)!;
|
||||
const attrs = Object.fromEntries(
|
||||
Array.from(attrsString.matchAll(/([-:_a-zA-Z0-9]+)(?:=['"]?([^'"]*)['"]?)/g))
|
||||
.map(([, attr, value]) => [attr, value])
|
||||
);
|
||||
|
||||
const result = html`
|
||||
<svg ${spread(attrs)}>
|
||||
${unsafeSVG(body)}
|
||||
</svg>
|
||||
`;
|
||||
|
||||
RENDER_RESULTS.set(iconId, result);
|
||||
|
||||
return result;
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
:host {
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
::slotted(*) {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
::slotted(:first-child) {
|
||||
border: {
|
||||
top-left-radius: 8px;
|
||||
bottom-left-radius: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
::slotted(:last-child) {
|
||||
border: {
|
||||
top-right-radius: 8px;
|
||||
bottom-right-radius: 8px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
:host {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
import { LitElement, html, unsafeCSS } from "lit";
|
||||
import { customElement } from "lit/decorators.js";
|
||||
|
||||
import toolbarStyles from "./toolbar.element.scss?inline";
|
||||
import toolbarGroupStyles from "./toolbar-group.element.scss?inline";
|
||||
|
||||
// TODO: A11y - https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/
|
||||
|
||||
@customElement("sts-toolbar")
|
||||
export class ToolbarElement extends LitElement {
|
||||
static override styles = unsafeCSS(toolbarStyles);
|
||||
override role = "toolbar";
|
||||
protected override render = () => html`<slot></slot>`;
|
||||
}
|
||||
|
||||
@customElement("sts-toolbar-group")
|
||||
export class ToolbarGroupElement extends LitElement {
|
||||
static override styles = unsafeCSS(toolbarGroupStyles);
|
||||
override role = "group";
|
||||
protected override render = () => html`<slot></slot>`;
|
||||
}
|
||||
@@ -0,0 +1,90 @@
|
||||
$item-height: 24px;
|
||||
|
||||
:host, .children {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
:host {
|
||||
min-width: min-content;
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 4px;
|
||||
|
||||
font: {
|
||||
family: "Fira Sans", sans-serif;
|
||||
size: 14px;
|
||||
weight: 400;
|
||||
}
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
|
||||
pointer-events: auto;
|
||||
cursor: default;
|
||||
user-select: none;
|
||||
|
||||
color: #FFFC;
|
||||
transition: {
|
||||
property: background, color;
|
||||
duration: 0.1s;
|
||||
timing-function: linear;
|
||||
}
|
||||
|
||||
&.selectable:hover:not(:has(.toggle-expanded:hover)) {
|
||||
background: #0000001F;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background: #7A2C34E3;
|
||||
color: #FFF;
|
||||
font-weight: 500;
|
||||
|
||||
&:hover {
|
||||
background: #90363F !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toggle-expanded {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 0 0 auto;
|
||||
width: 16px;
|
||||
height: $item-height;
|
||||
margin-block: -5px;
|
||||
padding-inline-start: 4px;
|
||||
|
||||
appearance: none;
|
||||
background: transparent;
|
||||
border: none;
|
||||
font: inherit;
|
||||
|
||||
color: #FFFC;
|
||||
|
||||
&:hover {
|
||||
color: #FFF;
|
||||
}
|
||||
}
|
||||
|
||||
.icon.expanded {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.label {
|
||||
display: flex;
|
||||
flex: 1 0 0;
|
||||
height: $item-height;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding-inline-start: 5px;
|
||||
}
|
||||
|
||||
.children {
|
||||
margin-inline-start: 7px;
|
||||
padding-inline-start: 9px;
|
||||
border-inline-start: 1px solid #FFF2;
|
||||
}
|
||||
@@ -0,0 +1,88 @@
|
||||
import { on } from "@storyteller/framework";
|
||||
import * as studio from "@storyteller/studio";
|
||||
import { type EntitySelectEvent } from "@storyteller/studio";
|
||||
import { LitElement, html, nothing, unsafeCSS } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators.js";
|
||||
import { classMap } from "lit/directives/class-map.js";
|
||||
import { ifDefined } from "lit/directives/if-defined.js";
|
||||
|
||||
import "./icon.element";
|
||||
|
||||
import styles from "./tree.element.scss?inline";
|
||||
|
||||
export interface Tree {
|
||||
id?: string;
|
||||
name: string;
|
||||
children?: Tree[];
|
||||
}
|
||||
|
||||
@customElement("sts-tree")
|
||||
export class TreeElement extends LitElement {
|
||||
static override styles = unsafeCSS(styles);
|
||||
|
||||
@property() name = "";
|
||||
@property() icon?: string;
|
||||
@property({ attribute: false }) treeChildren?: Tree[];
|
||||
@property({ type: Boolean }) expanded = true;
|
||||
|
||||
@state() selected = false;
|
||||
|
||||
toggleExpanded(): void {
|
||||
this.expanded = !this.expanded;
|
||||
}
|
||||
|
||||
@on("window:entity-select")
|
||||
onEntitySelect({ detail: entity }: EntitySelectEvent): void {
|
||||
this.selected = this.id === entity;
|
||||
}
|
||||
|
||||
selectEntity(): void {
|
||||
if (this.id)
|
||||
studio.select(this.id);
|
||||
}
|
||||
|
||||
// TODO: A11y
|
||||
protected override render = () => html`
|
||||
<header
|
||||
class=${classMap({
|
||||
selected: this.selected,
|
||||
selectable: !!this.id,
|
||||
})}
|
||||
>
|
||||
${this.treeChildren?.length ? html`
|
||||
<button class="toggle-expanded"
|
||||
@click=${this.toggleExpanded}
|
||||
>
|
||||
<sts-icon
|
||||
class=${classMap({
|
||||
icon: true,
|
||||
expanded: this.expanded,
|
||||
})}
|
||||
icon="caret-right"
|
||||
aria-label=${this.expanded ? "Expand" : "Collapse"}
|
||||
></sts-icon>
|
||||
</button>
|
||||
` : nothing}
|
||||
<span class="label"
|
||||
@click=${this.selectEntity}
|
||||
>
|
||||
${this.icon ? html`
|
||||
<sts-icon icon=${this.icon}></sts-icon>
|
||||
` : nothing}
|
||||
${this.name}
|
||||
</span>
|
||||
</header>
|
||||
|
||||
${this.expanded && this.treeChildren?.length ? html`
|
||||
<div class="children">
|
||||
${this.treeChildren?.map(tree => html`
|
||||
<sts-tree
|
||||
id=${ifDefined(tree.id)}
|
||||
.name=${tree.name}
|
||||
.treeChildren=${tree.children}
|
||||
></sts-tree>
|
||||
`)}
|
||||
</div>
|
||||
` : nothing}
|
||||
`;
|
||||
}
|
||||
Reference in New Issue
Block a user