build: add stable-diffusion server to musa and vulkan container images (#504 )

Add sd-server from stable-diffusion.cpp docker image for vulkan and musa containers. closes #450
Reorganize UI controls and improve form interactions (#500 )
2026-02-01 16:17:26 -08:00 · 2026-02-01 15:18:22 -08:00 · 2026-02-01 15:11:49 -08:00
13 changed files with 143 additions and 32 deletions
@@ -15,6 +15,7 @@ on:
    paths:
      - '.github/workflows/containers.yml'
      - 'docker/build-container.sh'
+      - 'docker/*.Containerfile'

 jobs:
  build-and-push:
@@ -3,9 +3,25 @@ name: Windows CI
 on:
  push:
    branches: [ "main" ]
+    # only run when backend source changes
+    # cmd/ is excluded because it contains utilities without tests
+    paths:
+      - '**/*.go'
+      - '!cmd/**'
+      - 'go.mod'
+      - 'go.sum'
+      - 'Makefile'
+      - '.github/workflows/go-ci-windows.yml'

  pull_request:
    branches: [ "main" ]
+    paths:
+      - '**/*.go'
+      - '!cmd/**'
+      - 'go.mod'
+      - 'go.sum'
+      - 'Makefile'
+      - '.github/workflows/go-ci-windows.yml'

  # Allows manual triggering of the workflow
  workflow_dispatch:
@@ -3,9 +3,25 @@ name: Linux CI
 on:
  push:
    branches: [ "main" ]
+    # only run when backend source changes
+    # cmd/ is excluded because it contains utilities without tests
+    paths:
+      - '**/*.go'
+      - '!cmd/**'
+      - 'go.mod'
+      - 'go.sum'
+      - 'Makefile'
+      - '.github/workflows/go-ci.yml'

  pull_request:
    branches: [ "main" ]
+    paths:
+      - '**/*.go'
+      - '!cmd/**'
+      - 'go.mod'
+      - 'go.sum'
+      - 'Makefile'
+      - '.github/workflows/go-ci.yml'

  # Allows manual triggering of the workflow
  workflow_dispatch:
@@ -29,7 +29,7 @@ jobs:
      - name: Set up Node.js
        uses: actions/setup-node@v4
        with:
-          node-version: "23"
+          node-version: "24"
      - name: Install dependencies and build UI
        run: |
          cd ui-svelte
@@ -0,0 +1,42 @@
+name: UI Tests
+
+on:
+  push:
+    branches: [ "main" ]
+    paths:
+      - 'ui-svelte/**'
+      - '.github/workflows/ui-tests.yml'
+
+  pull_request:
+    branches: [ "main" ]
+    paths:
+      - 'ui-svelte/**'
+      - '.github/workflows/ui-tests.yml'
+
+  workflow_dispatch:
+
+jobs:
+
+  run-tests:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ui-svelte
+    steps:
+    - uses: actions/checkout@v4
+
+    - name: Set up Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: '24'
+        cache: 'npm'
+        cache-dependency-path: ui-svelte/package-lock.json
+
+    - name: Install dependencies
+      run: npm ci
+
+    - name: Type check
+      run: npm run check
+
+    - name: Run tests
+      run: npm test
@@ -1,5 +1,7 @@
 #!/bin/bash

+set -euo pipefail
+
 cd $(dirname "$0")

 # use this to test locally, example:
@@ -8,6 +10,9 @@ cd $(dirname "$0")
 # the scopes: gist, read:org, repo, write:packages
 # then: gh auth login (and copy/paste the new token)

+LOG_DEBUG=${LOG_DEBUG:-0}
+DEBUG_ABORT_BUILD=${DEBUG_ABORT_BUILD:-}
+
 log_debug() {
    if [ "$LOG_DEBUG" = "1" ]; then
        echo "[DEBUG] $*"
@@ -31,7 +36,7 @@ if [[ ! " ${ALLOWED_ARCHS[@]} " =~ " ${ARCH} " ]]; then
 fi

 # Check if GITHUB_TOKEN is set and not empty
-if [[ -z "$GITHUB_TOKEN" ]]; then
+if [[ -z "${GITHUB_TOKEN:-}" ]]; then
  log_info "Error: GITHUB_TOKEN is not set or is empty."
  exit 1
 fi
@@ -39,6 +44,7 @@ fi
 # Set llama.cpp base image, customizable using the BASE_LLAMACPP_IMAGE environment
 # variable, this permits testing with forked llama.cpp repositories
 BASE_IMAGE=${BASE_LLAMACPP_IMAGE:-ghcr.io/ggml-org/llama.cpp}
+SD_IMAGE=${BASE_SDCPP_IMAGE:-ghcr.io/leejet/stable-diffusion.cpp}

 # Set llama-swap repository, automatically uses GITHUB_REPOSITORY variable
 # to enable easy container builds on forked repos
@@ -105,6 +111,8 @@ else
    BASE_TAG=server-${ARCH}-${LCPP_TAG}
 fi

+SD_TAG=master-${ARCH}
+
 # Abort if LCPP_TAG is empty.
 if [[ -z "$LCPP_TAG" ]]; then
    log_info "Abort: Could not find llama-server container for arch: $ARCH"
@@ -137,6 +145,18 @@ for CONTAINER_TYPE in non-root root; do
  docker build -f llama-swap.Containerfile --build-arg BASE_TAG=${BASE_TAG} --build-arg LS_VER=${LS_VER} --build-arg UID=${USER_UID} \
    --build-arg LS_REPO=${LS_REPO} --build-arg GID=${USER_GID} --build-arg USER_HOME=${USER_HOME} -t ${CONTAINER_TAG} -t ${CONTAINER_LATEST} \
    --build-arg BASE_IMAGE=${BASE_IMAGE} .
+
+  # For architectures with stable-diffusion.cpp support, layer sd-server on top
+  case "$ARCH" in
+    "musa" | "vulkan")
+      log_info "Adding sd-server to $CONTAINER_TAG"
+      docker build -f llama-swap-sd.Containerfile \
+        --build-arg BASE=${CONTAINER_TAG} \
+        --build-arg SD_IMAGE=${SD_IMAGE} --build-arg SD_TAG=${SD_TAG} \
+        --build-arg UID=${USER_UID} --build-arg GID=${USER_GID} \
+        -t ${CONTAINER_TAG} -t ${CONTAINER_LATEST} . ;;
+  esac
+
  if [ "$PUSH_IMAGES" == "true" ]; then
    docker push ${CONTAINER_TAG}
    docker push ${CONTAINER_LATEST}
@@ -15,4 +15,19 @@ models:
    cmd: >
      /app/llama-server
      -hf bartowski/SmolLM2-135M-Instruct-GGUF:Q4_K_M
-      --port 9999
+      --port 9999
+
+  z-image:
+    checkEndpoint: /
+    cmd: |
+      /app/sd-server
+      --listen-port 9999
+      --diffusion-fa
+      --diffusion-model /models/z_image_turbo-Q8_0.gguf
+      --vae /models/ae.safetensors
+      --llm /models/qwen3-4b-instruct-2507-q8_0.gguf
+      --offload-to-cpu
+      --cfg-scale 1.0
+      --height 512 --width 512
+      --steps 8
+    aliases: [gpt-image-1,dall-e-2,dall-e-3,gpt-image-1-mini,gpt-image-1.5]
@@ -0,0 +1,11 @@
+ARG SD_IMAGE=ghcr.io/leejet/stable-diffusion.cpp
+ARG SD_TAG=master-vulkan
+ARG BASE=llama-swap:latest
+
+FROM ${SD_IMAGE}:${SD_TAG} AS sd-source
+FROM ${BASE}
+
+ARG UID=10001
+ARG GID=10001
+
+COPY --from=sd-source --chown=${UID}:${GID} /sd-server /app/sd-server
@@ -925,7 +925,6 @@
      "integrity": "sha512-Y1Cs7hhTc+a5E9Va/xwKlAJoariQyHY+5zBgCZg4PFWNYQ1nMN9sjK1zhw1gK69DuqVP++sht/1GZg1aRwmAXQ==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@sveltejs/vite-plugin-svelte-inspector": "^4.0.1",
        "debug": "^4.4.1",
@@ -1308,7 +1307,6 @@
      "integrity": "sha512-t7frlewr6+cbx+9Ohpl0NOTKXZNV9xHRmNOvql47BFJKcEG1CxtxlPEEe+gR9uhVWM4DwhnvTF110mIL4yP9RA==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "undici-types": "~7.16.0"
      }
@@ -1441,7 +1439,6 @@
      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
      "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
      "license": "MIT",
-      "peer": true,
      "bin": {
        "acorn": "bin/acorn"
      },
@@ -3452,7 +3449,6 @@
      "integrity": "sha512-e5lPJi/aui4TO1LpAXIRLySmwXSE8k3b9zoGfd42p67wzxog4WHjiZF3M2uheQih4DGyc25QEV4yRBbpueNiUA==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@types/estree": "1.0.8"
      },
@@ -3565,7 +3561,6 @@
      "resolved": "https://registry.npmjs.org/svelte/-/svelte-5.48.5.tgz",
      "integrity": "sha512-NB3o70OxfmnE5UPyLr8uH3IV02Q43qJVAuWigYmsSOYsS0s/rHxP0TF81blG0onF/xkhNvZw4G8NfzIX+By5ZQ==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@jridgewell/remapping": "^2.3.4",
        "@jridgewell/sourcemap-codec": "^1.5.0",
@@ -3721,7 +3716,6 @@
      "integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==",
      "dev": true,
      "license": "Apache-2.0",
-      "peer": true,
      "bin": {
        "tsc": "bin/tsc",
        "tsserver": "bin/tsserver"
@@ -3900,7 +3894,6 @@
      "integrity": "sha512-+Oxm7q9hDoLMyJOYfUYBuHQo+dkAloi33apOPP56pzj+vsdJDzr+j1NISE5pyaAuKL4A3UD34qd0lx5+kfKp2g==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "esbuild": "^0.25.0",
        "fdir": "^6.4.4",
@@ -141,9 +141,6 @@
  <!-- Model selector -->
  <div class="shrink-0 flex flex-wrap gap-2 mb-4">
    <ModelSelector bind:value={$selectedModelStore} placeholder="Select an audio model..." disabled={isTranscribing} />
-    <button class="btn" onclick={clearAll} disabled={!selectedFile && !transcriptionResult && !error}>
-      Clear
-    </button>
  </div>

  <!-- Empty state for no models configured -->
@@ -241,6 +238,13 @@
        >
          Transcribe
        </button>
+        <button
+          class="btn"
+          onclick={clearAll}
+          disabled={!selectedFile && !transcriptionResult && !error}
+        >
+          Clear
+        </button>
      {/if}
    </div>
  {/if}
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { untrack } from "svelte";
  import { Maximize2, X } from "lucide-svelte";

  interface Props {
@@ -45,7 +46,8 @@
  $effect(() => {
    if (isExpanded && expandedTextarea) {
      expandedTextarea.focus();
-      expandedTextarea.setSelectionRange(expandedValue.length, expandedValue.length);
+      const len = untrack(() => expandedValue.length);
+      expandedTextarea.setSelectionRange(len, len);
    }
  });
 </script>
@@ -60,7 +62,7 @@
    {disabled}
  ></textarea>
  <button
-    class="absolute top-2 right-2 p-1.5 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity bg-surface/90 hover:bg-surface border border-gray-200 dark:border-white/10 shadow-sm"
+    class="absolute top-2 right-2 p-1.5 rounded-lg opacity-60 md:opacity-0 group-hover:opacity-100 transition-opacity bg-surface/90 hover:bg-surface border border-gray-200 dark:border-white/10 shadow-sm"
    onclick={openExpanded}
    title="Expand to edit"
    type="button"
@@ -60,6 +60,7 @@
  function clearImage() {
    generatedImage = null;
    error = null;
+    prompt = "";
  }

  function downloadImage() {
@@ -117,9 +118,6 @@
        <option value="1024x1792">1024x1792 (SDXL)</option>
      </optgroup>
    </select>
-    <button class="btn" onclick={clearImage} disabled={!generatedImage && !error}>
-      Clear
-    </button>
  </div>

  <!-- Empty state for no models configured -->
@@ -192,6 +190,13 @@
          >
            Generate
          </button>
+          <button
+            class="btn flex-1 md:flex-none"
+            onclick={clearImage}
+            disabled={!generatedImage && !error && !prompt.trim()}
+          >
+            Clear
+          </button>
        {/if}
      </div>
    </div>
@@ -12,7 +12,6 @@
  let inputText = $state("");
  let isGenerating = $state(false);
  let generatedAudioUrl = $state<string | null>(null);
-  let generatedText = $state<string | null>(null);
  let generatedVoice = $state<string | null>(null);
  let generatedTimestamp = $state<Date | null>(null);
  let error = $state<string | null>(null);
@@ -148,7 +147,6 @@

      // Create object URL for the audio blob and store metadata
      generatedAudioUrl = URL.createObjectURL(audioBlob);
-      generatedText = trimmedText;
      generatedVoice = $selectedVoiceStore;
      generatedTimestamp = new Date();
    } catch (err) {
@@ -167,18 +165,6 @@
    abortController?.abort();
  }

-  function clearAudio() {
-    if (generatedAudioUrl) {
-      URL.revokeObjectURL(generatedAudioUrl);
-    }
-    generatedAudioUrl = null;
-    generatedText = null;
-    generatedVoice = null;
-    generatedTimestamp = null;
-    error = null;
-    inputText = "";
-  }
-
  function clearInput() {
    inputText = "";
  }