Files
storyteller-bevy/studio/scripts/build-web.mjs
T
Brooks Palin d51eec52c3 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>
2024-02-26 17:13:07 -05:00

77 lines
1.7 KiB
JavaScript

import fs from "node:fs";
import url from "node:url";
import path from "node:path";
import { rimraf } from "rimraf";
import which from "which";
import copyAssets from "./copy-assets.mjs";
import handleError from "./handle-error.mjs";
import run from "./run.mjs";
async function main() {
try {
const __dirname = url.fileURLToPath(new URL(".", import.meta.url));
const workspaceRoot = path.resolve(__dirname, "../..");
const extraCargoArgs = process.argv.slice(2);
console.log(`Extra cargo args:`);
for (let arg of extraCargoArgs) {
console.log(` ${arg}`);
}
/** @type import("node:child_process").StdioOptions */
const stdio = ["ignore", "inherit", "inherit"];
const outDir = path.join(workspaceRoot, "dist/studio");
if (fs.existsSync(outDir))
await rimraf(outDir);
await run("cargo", [
"build",
"-p", "studio",
"--lib",
"--release",
"--target", "wasm32-unknown-unknown",
].concat(extraCargoArgs), {
shell: true,
cwd: workspaceRoot,
stdio,
});
const wasmBindgenInstalled = Boolean(await which("wasm-bindgen", { nothrow: true }));
if (!wasmBindgenInstalled) {
await run("cargo", [
"install", "-f", "wasm-bindgen-cli",
"--version", "0.2.88",
], {
shell: true,
cwd: workspaceRoot,
stdio,
});
}
await run("wasm-bindgen", [
"--out-dir", "./dist/studio",
"--target", "bundler",
"./target/wasm32-unknown-unknown/release/studio.wasm",
], {
shell: true,
cwd: workspaceRoot,
stdio,
});
await copyAssets();
await fs.promises.copyFile(
path.join(workspaceRoot, "studio/package.json"),
path.join(outDir, "package.json"),
);
}
catch (err) {
handleError(err);
}
}
main();