mirror of
https://github.com/storytold/storyteller-bevy.git
synced 2026-10-13 23:52:55 +00:00
Brooks Palin
d51eec52c3
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>
59 lines
1.4 KiB
TypeScript
59 lines
1.4 KiB
TypeScript
/// <reference types='vitest' />
|
|
import { nxViteTsPaths } from "@nx/vite/plugins/nx-tsconfig-paths.plugin";
|
|
import { defineConfig } from "vite";
|
|
import dts from "vite-plugin-dts";
|
|
import wasm from "vite-plugin-wasm";
|
|
import topLevelAwait from "vite-plugin-top-level-await";
|
|
import * as path from "path";
|
|
|
|
export default defineConfig({
|
|
cacheDir: "../node_modules/.vite/studio-web",
|
|
|
|
plugins: [
|
|
nxViteTsPaths(),
|
|
wasm(),
|
|
topLevelAwait(),
|
|
dts({
|
|
entryRoot: "src",
|
|
tsConfigFilePath: path.join(__dirname, "tsconfig.lib.json"),
|
|
skipDiagnostics: true,
|
|
}),
|
|
],
|
|
|
|
// Uncomment this if you are using workers.
|
|
// worker: {
|
|
// plugins: [ nxViteTsPaths() ],
|
|
// },
|
|
|
|
// Configuration for building your library.
|
|
// See: https://vitejs.dev/guide/build.html#library-mode
|
|
build: {
|
|
lib: {
|
|
// Could also be a dictionary or array of multiple entry points.
|
|
entry: "src/index.ts",
|
|
name: "studio-ui",
|
|
fileName: "index",
|
|
// Change this to the formats you want to support.
|
|
// Don't forget to update your package.json as well.
|
|
formats: ["es", "cjs"],
|
|
},
|
|
rollupOptions: {
|
|
// External packages that should not be bundled into your library.
|
|
external: [
|
|
"lit",
|
|
"@storyteller/framework",
|
|
"@storyteller/studio",
|
|
],
|
|
},
|
|
},
|
|
|
|
test: {
|
|
globals: true,
|
|
cache: {
|
|
dir: "../node_modules/.vitest",
|
|
},
|
|
environment: "jsdom",
|
|
include: ["src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}"],
|
|
},
|
|
});
|