Merge pull request #6 from jkremser/stable-diffusion-use-case-webui

Mostly UI tweaks

.github/workflows/stable-diff-images.yaml

@@ -0,0 +1,61 @@
+name: Build and push images for stable diffusion use-case
+on:
+  push:
+    branches:
+      - main
+    paths-ignore:
+      - '**.md'
+
+  workflow_call:
+    inputs:
+      imageTag:
+        description: "container image tag"
+        required: false
+        default: latest
+        type: string
+
+env:
+  CONTAINER_IMG_REGISTRY: ghcr.io
+  CONTAINER_IMG_ORG: kedify
+  CONTAINER_IMG_WORKER_NAME: stable-diffusion-worker
+  CONTAINER_IMG_WEBUI_NAME: stable-diffusion-webui
+  CONTAINER_IMG_TAG: ${{ inputs.imageTag || 'latest' }}
+
+jobs:
+  build-container:
+    permissions:
+      contents: write # for creation of releases
+      packages: write # push images
+      id-token: write # needed for signing the images with GitHub OIDC Token
+    name: build container
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Login to ghcr.io
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Install Cosign
+        uses: sigstore/cosign-installer@v3
+
+      - name: Install Syft
+        uses: anchore/sbom-action@v0
+
+      - name: Build and push
+        env:
+          WORKER_IMAGE: "${{ env.CONTAINER_IMG_REGISTRY }}/${{ env.CONTAINER_IMG_ORG }}/${{ env.CONTAINER_IMG_WORKER_NAME }}:${{ env.CONTAINER_IMG_TAG }}"
+          WEBUI_IMAGE: "${{ env.CONTAINER_IMG_REGISTRY }}/${{ env.CONTAINER_IMG_ORG }}/${{ env.CONTAINER_IMG_WEBUI_NAME }}:${{ env.CONTAINER_IMG_TAG }}"
+        run: |
+          cd samples/stable-diffusion/
+          make build-multiarch-images

samples/stable-diffusion/manifests/scaledjob.yaml

@@ -9,14 +9,14 @@ spec:
       key: host
 ---
 apiVersion: keda.sh/v1alpha1
-kind: ScaledObject
+kind: ScaledJob
 metadata:
-  name: stable-diff
+  name: stable-diff-job
 spec:
   jobTargetRef:
     template:
       spec:
-       containers:
+        containers:
         - image: ghcr.io/kedify/stable-diffusion-worker
           name: stable-diffusion-worker
           imagePullPolicy: IfNotPresent
@@ -60,25 +60,27 @@ spec:
           - |
             mc alias set shared http://minio:9000 $MINIO_USERNAME $MINIO_PASSWORD;
             mc admin info shared;
-            echo "Minio configured, starting sync.."
-            mc mirror --watch /images shared/images;
+            echo "Minio configured, waiting for the result.."
+            until [ -f /images/*.png ] && [ -f /images/*.json ]; do sleep 1; printf .; done
+            echo -e "\nResults have been found: \n$(ls /images)\nSyncing.."
+            mc mirror /images shared/images;
 
           volumeMounts:
           - name: shared-images
             mountPath: /images
-      # if possible, spread the pods across all schedulable nodes
-      affinity:
-        podAntiAffinity:
-          preferredDuringSchedulingIgnoredDuringExecution:
-          - weight: 100
-            podAffinityTerm:
-              topologyKey: kubernetes.io/hostname
-              labelSelector:
-                matchLabels:
-                  app: stable-diffusion-worker
-      volumes:
-      - name: shared-images
-        emptyDir: {}
+        # if possible, spread the pods across all schedulable nodes
+        affinity:
+          podAntiAffinity:
+            preferredDuringSchedulingIgnoredDuringExecution:
+            - weight: 100
+              podAffinityTerm:
+                topologyKey: kubernetes.io/hostname
+                labelSelector:
+                  matchLabels:
+                    app: stable-diffusion-worker
+        volumes:
+        - name: shared-images
+          emptyDir: {}
     backoffLimit: 4  
   pollingInterval: 10
   maxReplicaCount: 8

samples/stable-diffusion/manifests/scaledobject.yaml

@@ -11,7 +11,7 @@ spec:
 apiVersion: keda.sh/v1alpha1
 kind: ScaledObject
 metadata:
-  name: stable-diff
+  name: stable-diff-app
 spec:
   scaleTargetRef:
     name: stable-diffusion-worker

samples/stable-diffusion/webui/app/QueryClientContextProvider.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { ReactNode } from "react";
-import { QueryClient, QueryClientProvider, useQuery } from "@tanstack/react-query";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
 const queryClient = new QueryClient();
 

samples/stable-diffusion/webui/app/globals.css

@@ -6,13 +6,17 @@
   --foreground-rgb: 0, 0, 0;
   --background-start-rgb: 214, 219, 220;
   --background-end-rgb: 255, 255, 255;
+  --scrollbar: #888;
+  --scrollbar-hover: #999;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
     --foreground-rgb: 255, 255, 255;
     --background-start-rgb: 0, 0, 0;
     --background-end-rgb: 0, 0, 0;
+    --scrollbar: #444;
+    --scrollbar-hover: #555;
   }
 }
 
@@ -31,3 +35,100 @@ body {
     text-wrap: balance;
   }
 }
+
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+/* Track (the long bar in the background) */
+::-webkit-scrollbar-track {
+  background: var(--background-start-rgb);
+}
+
+/* Handle (the short bar) */
+::-webkit-scrollbar-thumb {
+  background: var(--scrollbar);
+  border-radius: 5px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--scrollbar-hover);
+}
+
+/*********** Baseline, reset styles ***********/
+input[type="range"] {
+  -webkit-appearance: none;
+  appearance: none;
+  background: transparent;
+  cursor: pointer;
+  width: 25rem;
+}
+
+/* Removes default focus */
+input[type="range"]:focus {
+  outline: none;
+}
+
+/******** Chrome, Safari, Opera and Edge Chromium styles ********/
+/* slider track */
+input[type="range"]::-webkit-slider-runnable-track {
+  background-color: #34ace3;
+  border-radius: 2.5rem;
+  height: 0.5rem;
+}
+
+/* slider thumb */
+input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none; /* Override default look */
+  appearance: none;
+  margin-top: -8px; /* Centers thumb on the track */
+  background-color: #000000;
+  outline: 3px solid #34ace3;
+  border-radius: 0.5rem;
+  height: 1.3rem;
+  width: 1.3rem;
+}
+
+input[type="range"]:focus::-webkit-slider-thumb {
+  outline: 4px solid #34ace3;
+}
+
+/*********** Firefox styles ***********/
+/* slider track */
+input[type="range"]::-moz-range-track {
+  background-color: #041d50;
+  border-radius: 2.5rem;
+  height: 0.5rem;
+}
+
+/* slider thumb */
+input[type="range"]::-moz-range-thumb {
+  background-color: #a3a3a3;
+  border: none; /*Removes extra border that FF applies*/
+  border-radius: 2rem;
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
+input[type="range"]:focus::-moz-range-thumb{
+  outline: 3px solid #a3a3a3;
+  outline-offset: 0.125rem;
+}
+
+.prompt {
+  border: 2px solid #34ace3;
+}
+
+.generate {
+  border: 2px solid #ffffff;
+}
+
+.generate:hover {
+  background-color: #34ace3;
+  border: 2px solid #ffffff;
+}
+
+*:focus {
+  outline: none;
+}

samples/stable-diffusion/webui/app/page.tsx

@@ -2,8 +2,7 @@
 
 
 import Image from "next/image";
-import Link from "next/link";
-import { getAvailableImages, sendToQueue } from "./services/images";
+import { sendToQueue } from "./services/images";
 import { Prompt } from "./prompt";
 import { GeneratedImages } from "./generatedImages";