Building SpriteDX Frontend

This week, I got started on building the web UI for SpriteDX.

The original plan was to build it as a Unity Editor Plugin, but after consideration, I decided to build a web UI first. I want to get to a demo-able prototype which I can easily pull up on my phone and show to other people rather than opening Unity and getting all the things setup then showing.

Here is rough directory structure I’m imagining.

- public                           # public assets
- src
  - app
    - api
      - workflow
        - queue
          - test                   # test page for "queue" op
            - page.tsx             
          - route.ts               # POST /api/workflow/queue
    - global.css                   # styles
    - layout.tsx                   # layout
    - page.tsx                     # homepage
  - components                     # components 
    - ...
  - resources                      # internal resources
    - workflow                     # comfy workflows
      - character.workflow.json    # comfy UI workflow
      - character.api.json         # comfy workflow (API)

And here are the APIs.

POST /api/workflow/queue

{
  "workflow_id": <String>,
  "inputs": {
     "path.to.input": ...
  }
}

HTTP 200

{
  "outputs": {
    ...
  }
}

Then, the client will process the outputs and present to the users. I would probably need image/video upload and download APIs.

This API will then connect to ComfyUI server to run the operations.

---

Short work hours today due to kid summer vacation.

—Sprited Dev 🌱