CushyStudio
Blog
  • 🛋️CushyStudio
  • Getting Started
    • 🛠️Installation
      • Installing Cushy
      • Updating Cushy
      • Scripts
      • Installing Modules
        • Install ComfyUI
        • Install FFMpeg (optional)
        • Installing Models
        • Install ImageMagick (optional)
    • 👋First Steps
      • Intro to Generative AI
      • Making an image
      • Coming From...
    • 🎁Built-in apps
      • CushyDiffusion
      • Rotate anything
      • Cushy Cascade
      • Remove Background
      • Slay the Spire - Art Pack
      • Manga Coloring
    • 🚶Cushy Interface
      • Draft Panel
      • Welcome Panel
      • Minipaint
      • File Explorer
      • Quick-Civitai
      • Iframes
        • Minipaint
        • Civitai
      • Image Comtext menu
    • 🍏Images, Videos, 3d scenes
      • Quick Actions
      • LLM (Large Language Model)
    • 😁Unified canvas
      • Starin
      • Inpainting
      • Outpainting
    • 🧪Prompting
      • adding Loras
  • Going further
    • 💡Creating apps
      • Creating a new App file
      • Prefabs
      • App Structure
      • Contextual Apps
      • For loops
      • App UI
      • Using ImageMagick in your app
    • ⚙️CushyKit
    • 🏈Importing from ComfyUI
    • 🤝Woking on Cushy
      • Setting up VSCode
      • Contributing on the UI
      • Contributing on top-level scripts
      • Database
      • Migrations
    • 🔥Troubleshooting
      • Page 1
  • Community
    • 🤝Community
    • 💬FAQs
      • ⁉️Can Cushy...
    • 📰News
    • 😁Changelog
    • 🚀Roadmap
    • 💬Blog
      • 2024-02-18 - creating the website
    • 🚂Other Softwares
      • Coming from Krita
      • Coming from A1111
      • Coming from ComfyUI
      • Coming from InvokeAI
      • Coming from Fooocus
    • Contributing
      • Supporting the team
      • Writing Docs
  • TEMP
    • ✨CushyStudio Features
    • 🛋️TEMPORARY
      • Manual
      • GPT alt A
      • GPT alt B
      • GPT alt C
Powered by GitBook
On this page
  • Prefabs
  • Example of built-in prefabs
  • Making prefabs for comfy_ui nodes
  • Making your prefabs very fast to typecheck
  • copy automatically your prefab typings in vscode
  • Making sure your typescript will always show full types
  • Debug vscode slow autocompletion
Edit on GitHub
Export as PDF
  1. Going further
  2. Creating apps

Prefabs

PreviousCreating a new App fileNextApp Structure

Last updated 5 months ago

Prefabs

Prefabs are piece of a model definition you can re-use across your model/apps. CushyStudio comes with a lot of prefabs, and lots of utilities to create new prefabs.

Example of built-in prefabs

library/built-in/_prefabs/prefab_model.ts

this is a picture of the model prefab available in cushy studio.

Making prefabs for comfy_ui nodes

When you just want to have the exact same fields as you can find in a

You can use

Making your prefabs very fast to typecheck

to make your prefabs very fast to typecheck, you can:

  • export a named type alias for your prefab return type

  • annotate the return of your prefab function with that type

since 2024-06-25, there is now a globally available X namespace that allow to quickly add typings to your prefabs without having to import anything

import type { Builder } from '../../../src/controls/Builder'
import type { SchemaDict } from '../../../src/csuite'
import type { MediaImageL } from '../../../src/models/MediaImage'
import type { OutputFor } from './_prefabs'

// add an explicit type
// HINT: you don't have to type that manually, vscode can write it for you
export type UI_Mask = X.XChoice<{
    noMask: X.XGroup<SchemaDict>
    mask: X.XGroup<{
        image: X.XImage
        mode: X.XEnum<'LoadImageMask.channel'>
        invert: X.XBool
        grow: X.XNumber
        feather: X.XNumber
        preview: X.XBool
    }>
}>

// and add explit return type to your function
//                         VVVVV
export function ui_mask(): UI_Mask {
    const form: Builder = getCurrentForm()
    return form.choice({
        appearance: 'tab',
        icon: 'mdiDominoMask',
        label: 'Mask',
        default: 'noMask',
        // box: { base: { hue: 20, chroma: 0.03 } },
        items: {
            noMask: form.group(),
            mask: form.group({
                collapsed: false,
                label: false,
                items: {
                    image: form.image({}),
...

copy automatically your prefab typings in vscode

first, install the vscode extension

Young-Vform.copy-hover-type

then, you can copy the type of a variable by hovering over it and pressing the proper keybinding (ctrl+k ctrl+h on windows by default)

Making sure your typescript will always show full types

typescript will bail-out and show ... if the type is too long to be displayed. sadly, the extension mentioned above will not be able to expand those ... and typescript codebase do not have any option to change that. (some people will mention using noErrorTruncation, but it doesn't work for this use-case, since we do not have any error here, just a truncation of the type given by the Language Server)

https://stackoverflow.com/questions/53113031/how-to-see-a-fully-expanded-typescript-type-without-n-more-and

you need to edit the tsserver.js file your vscode instance is using

/resources/app/extensions/node_modules/typescript/lib/tsserver.js

e.g. for mac

# if you use the default vscode tsserver.js
code /Applications/Visual\ Studio\ Code.app/Contents/resources/app/extensions/node_modules/typescript/lib/tsserver.js

#or if you use the local tsserver.js
code ./node_modules/typescript/lib/tsserver.js

and update the defaultMaximumTruncationLength from 160 to some higher value (e.g. 4000)

Debug vscode slow autocompletion

CushyStudio comes with some advanced typescript tooling to debug inference speed issues, and help to troubleshoot code slowness.

to start the tool, you just need to:

uncomment those two lines in your .vscode/settings.json

{
    //...
    "typescript.tsserver.log": "normal",
    "typescript.tsserver.enableTracing": true,
    //...
}

start the tool with the command

bun src/perfs/monitorVSCodePerfs.ts
💡