React web UI with flask-socketio API (#429)

* Implements rudimentary api * Fixes blocking in API * Adds UI to monorepo > src/frontend/ * Updates frontend/README * Reverts conda env name to `ldm` * Fixes environment yamls * CORS config for testing * Fixes LogViewer position * API WID * Adds actions to image viewer * Increases vite chunkSizeWarningLimit to 1500 * Implements init image * Implements state persistence in localStorage * Improve progress data handling * Final build * Fixes mimetypes error on windows * Adds error logging * Fixes bugged img2img strength component * Adds sourcemaps to dev build * Fixes missing key * Changes connection status indicator to text * Adds ability to serve other hosts than localhost * Adding Flask API server * Removes source maps from config * Fixes prop transfer * Add missing packages and add CORS support * Adding API doc * Remove defaults from openapi doc * Adds basic error handling for server config query * Mostly working socket.io implementation. * Fixes bug preventing mask upload * Fixes bug with sampler name not written to metadata * UI Overhaul, numerous fixes Co-authored-by: Kyle Schouviller <kyle0654@hotmail.com> Co-authored-by: Lincoln Stein <lincoln.stein@gmail.com>
2024-08-30 20:32:17 +00:00 · 2022-09-17 03:18:15 +10:00
parent 403d02d94f
commit d1a2c4cd8c
89 changed files with 9647 additions and 121 deletions
--- a/docs/index.html
+++ b/docs/index.html
@ -0,0 +1,19 @@
+<!-- HTML for static distribution bundle build -->
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Swagger UI</title>
+    <link rel="stylesheet" type="text/css" href="swagger-ui/swagger-ui.css" />
+    <link rel="stylesheet" type="text/css" href="swagger-ui/index.css" />
+    <link rel="icon" type="image/png" href="swagger-ui/favicon-32x32.png" sizes="32x32" />
+    <link rel="icon" type="image/png" href="swagger-ui/favicon-16x16.png" sizes="16x16" />
+  </head>
+
+  <body>
+    <div id="swagger-ui"></div>
+    <script src="swagger-ui/swagger-ui-bundle.js" charset="UTF-8"> </script>
+    <script src="swagger-ui/swagger-ui-standalone-preset.js" charset="UTF-8"> </script>
+    <script src="swagger-ui/swagger-initializer.js" charset="UTF-8"> </script>
+  </body>
+</html>
--- a/docs/openapi3_0.yaml
+++ b/docs/openapi3_0.yaml
@ -0,0 +1,73 @@
+openapi: 3.0.3
+info:
+  title: Stable Diffusion
+  description: |-
+    TODO: Description Here
+    
+    Some useful links:
+    - [Stable Diffusion Dream Server](https://github.com/lstein/stable-diffusion)
+    
+  license:
+    name: MIT License
+    url: https://github.com/lstein/stable-diffusion/blob/main/LICENSE
+  version: 1.0.0
+servers:
+  - url: http://localhost:9090/api
+tags:
+  - name: images
+    description: Retrieve and manage generated images
+paths:
+  /images/{imageId}:
+    get:
+      tags:
+        - images
+      summary: Get image by ID
+      description: Returns a single image
+      operationId: getImageById
+      parameters:
+        - name: imageId
+          in: path
+          description: ID of image to return
+          required: true
+          schema:
+            type: string
+      responses:
+        '200':
+          description: successful operation
+          content:
+            image/png:
+              schema: 
+                type: string
+                format: binary
+        '404':
+          description: Image not found
+  /intermediates/{intermediateId}/{step}:
+    get:
+      tags:
+        - images
+      summary: Get intermediate image by ID
+      description: Returns a single intermediate image
+      operationId: getIntermediateById
+      parameters:
+        - name: intermediateId
+          in: path
+          description: ID of intermediate to return
+          required: true
+          schema:
+            type: string
+        - name: step
+          in: path
+          description: The generation step of the intermediate
+          required: true
+          schema:
+            type: string
+      responses:
+        '200':
+          description: successful operation
+          content:
+            image/png:
+              schema: 
+                type: string
+                format: binary
+        '404':
+          description: Intermediate not found
--- a/docs/swagger-ui/favicon-16x16.png
+++ b/docs/swagger-ui/favicon-16x16.png
--- a/docs/swagger-ui/favicon-32x32.png
+++ b/docs/swagger-ui/favicon-32x32.png
--- a/docs/swagger-ui/index.css
+++ b/docs/swagger-ui/index.css
@ -0,0 +1,16 @@
+html {
+    box-sizing: border-box;
+    overflow: -moz-scrollbars-vertical;
+    overflow-y: scroll;
+}
+
+*,
+*:before,
+*:after {
+    box-sizing: inherit;
+}
+
+body {
+    margin: 0;
+    background: #fafafa;
+}
--- a/docs/swagger-ui/oauth2-redirect.html
+++ b/docs/swagger-ui/oauth2-redirect.html
@ -0,0 +1,79 @@
+<!doctype html>
+<html lang="en-US">
+<head>
+    <title>Swagger UI: OAuth2 Redirect</title>
+</head>
+<body>
+<script>
+    'use strict';
+    function run () {
+        var oauth2 = window.opener.swaggerUIRedirectOauth2;
+        var sentState = oauth2.state;
+        var redirectUrl = oauth2.redirectUrl;
+        var isValid, qp, arr;
+
+        if (/code|token|error/.test(window.location.hash)) {
+            qp = window.location.hash.substring(1).replace('?', '&');
+        } else {
+            qp = location.search.substring(1);
+        }
+
+        arr = qp.split("&");
+        arr.forEach(function (v,i,_arr) { _arr[i] = '"' + v.replace('=', '":"') + '"';});
+        qp = qp ? JSON.parse('{' + arr.join() + '}',
+                function (key, value) {
+                    return key === "" ? value : decodeURIComponent(value);
+                }
+        ) : {};
+
+        isValid = qp.state === sentState;
+
+        if ((
+          oauth2.auth.schema.get("flow") === "accessCode" ||
+          oauth2.auth.schema.get("flow") === "authorizationCode" ||
+          oauth2.auth.schema.get("flow") === "authorization_code"
+        ) && !oauth2.auth.code) {
+            if (!isValid) {
+                oauth2.errCb({
+                    authId: oauth2.auth.name,
+                    source: "auth",
+                    level: "warning",
+                    message: "Authorization may be unsafe, passed state was changed in server. The passed state wasn't returned from auth server."
+                });
+            }
+
+            if (qp.code) {
+                delete oauth2.state;
+                oauth2.auth.code = qp.code;
+                oauth2.callback({auth: oauth2.auth, redirectUrl: redirectUrl});
+            } else {
+                let oauthErrorMsg;
+                if (qp.error) {
+                    oauthErrorMsg = "["+qp.error+"]: " +
+                        (qp.error_description ? qp.error_description+ ". " : "no accessCode received from the server. ") +
+                        (qp.error_uri ? "More info: "+qp.error_uri : "");
+                }
+
+                oauth2.errCb({
+                    authId: oauth2.auth.name,
+                    source: "auth",
+                    level: "error",
+                    message: oauthErrorMsg || "[Authorization failed]: no accessCode received from the server."
+                });
+            }
+        } else {
+            oauth2.callback({auth: oauth2.auth, token: qp, isValid: isValid, redirectUrl: redirectUrl});
+        }
+        window.close();
+    }
+
+    if (document.readyState !== 'loading') {
+        run();
+    } else {
+        document.addEventListener('DOMContentLoaded', function () {
+            run();
+        });
+    }
+</script>
+</body>
+</html>
--- a/docs/swagger-ui/swagger-initializer.js
+++ b/docs/swagger-ui/swagger-initializer.js
@ -0,0 +1,20 @@
+window.onload = function() {
+  //<editor-fold desc="Changeable Configuration Block">
+
+  // the following lines will be replaced by docker/configurator, when it runs in a docker-container
+  window.ui = SwaggerUIBundle({
+    url: "openapi3_0.yaml",
+    dom_id: '#swagger-ui',
+    deepLinking: true,
+    presets: [
+      SwaggerUIBundle.presets.apis,
+      SwaggerUIStandalonePreset
+    ],
+    plugins: [
+      SwaggerUIBundle.plugins.DownloadUrl
+    ],
+    layout: "StandaloneLayout"
+  });
+
+  //</editor-fold>
+};
--- a/docs/swagger-ui/swagger-ui-bundle.js
+++ b/docs/swagger-ui/swagger-ui-bundle.js
--- a/docs/swagger-ui/swagger-ui-bundle.js.map
+++ b/docs/swagger-ui/swagger-ui-bundle.js.map
--- a/docs/swagger-ui/swagger-ui-es-bundle-core.js
+++ b/docs/swagger-ui/swagger-ui-es-bundle-core.js
--- a/docs/swagger-ui/swagger-ui-es-bundle-core.js.map
+++ b/docs/swagger-ui/swagger-ui-es-bundle-core.js.map
--- a/docs/swagger-ui/swagger-ui-es-bundle.js
+++ b/docs/swagger-ui/swagger-ui-es-bundle.js
--- a/docs/swagger-ui/swagger-ui-es-bundle.js.map
+++ b/docs/swagger-ui/swagger-ui-es-bundle.js.map
--- a/docs/swagger-ui/swagger-ui-standalone-preset.js
+++ b/docs/swagger-ui/swagger-ui-standalone-preset.js
--- a/docs/swagger-ui/swagger-ui-standalone-preset.js.map
+++ b/docs/swagger-ui/swagger-ui-standalone-preset.js.map
--- a/docs/swagger-ui/swagger-ui.css
+++ b/docs/swagger-ui/swagger-ui.css
--- a/docs/swagger-ui/swagger-ui.css.map
+++ b/docs/swagger-ui/swagger-ui.css.map
--- a/docs/swagger-ui/swagger-ui.js
+++ b/docs/swagger-ui/swagger-ui.js
--- a/docs/swagger-ui/swagger-ui.js.map
+++ b/docs/swagger-ui/swagger-ui.js.map