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/frontend/.eslintrc.cjs
+++ b/frontend/.eslintrc.cjs
@ -0,0 +1,6 @@
+module.exports = {
+  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:react-hooks/recommended'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['@typescript-eslint', 'eslint-plugin-react-hooks'],
+  root: true,
+};
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@ -0,0 +1,25 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+# We want to distribute the repo
+# dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/frontend/README.md
+++ b/frontend/README.md
@ -0,0 +1,85 @@
+# Stable Diffusion Web UI
+
+Demo at https://peaceful-otter-7a427f.netlify.app/ (not connected to back end)
+
+much of this readme is just notes for myself during dev work
+
+numpy rand: 0 to 4294967295
+
+## Test and Build
+
+from `frontend/`:
+
+-   `yarn dev` runs `tsc-watch`, which runs `vite build` on successful `tsc` transpilation
+
+from `.`:
+
+-   `python backend/server.py` serves both frontend and backend at http://localhost:9090
+
+## API
+
+`backend/server.py` serves the UI and provides a [socket.io](https://github.com/socketio/socket.io) API via [flask-socketio](https://github.com/miguelgrinberg/flask-socketio).
+
+### Server Listeners
+
+The server listens for these socket.io events:
+
+`cancel`
+
+-   Cancels in-progress image generation
+-   Returns ack only
+
+`generateImage`
+
+-   Accepts object of image parameters
+-   Generates an image
+-   Returns ack only (image generation function sends progress and result via separate events)
+
+`deleteImage`
+
+-   Accepts file path to image
+-   Deletes image
+-   Returns ack only
+
+`deleteAllImages` WIP
+
+-   Deletes all images in `outputs/`
+-   Returns ack only
+
+`requestAllImages`
+
+-   Returns array of all images in `outputs/`
+
+`requestCapabilities` WIP
+
+-   Returns capabilities of server (torch device, GFPGAN and ESRGAN availability, ???)
+
+`sendImage` WIP
+
+-   Accepts a File and attributes
+-   Saves image
+-   Used to save init images which are not generated images
+
+### Server Emitters
+
+`progress`
+
+-   Emitted during each step in generation
+-   Sends a number from 0 to 1 representing percentage of steps completed
+
+`result` WIP
+
+-   Emitted when an image generation has completed
+-   Sends a object:
+
+```
+{
+    url: relative_file_path,
+    metadata: image_metadata_object
+}
+```
+
+## TODO
+
+-   Search repo for "TODO"
+-   My one gripe with Chakra: no way to disable all animations right now and drop the dependence on `framer-motion`. I would prefer to save the ~30kb on bundle and have zero animations. This is on the Chakra roadmap. See https://github.com/chakra-ui/chakra-ui/pull/6368 for last discussion on this. Need to check in on this issue periodically.
--- a/frontend/dist/assets/index.447eb2a9.css
+++ b/frontend/dist/assets/index.447eb2a9.css
@ -0,0 +1 @@
+.checkerboard{background-position:0px 0px,10px 10px;background-size:20px 20px;background-image:linear-gradient(45deg,#eee 25%,transparent 25%,transparent 75%,#eee 75%,#eee 100%),linear-gradient(45deg,#eee 25%,white 25%,white 75%,#eee 75%,#eee 100%)}
--- a/frontend/dist/assets/index.cc5cde43.js
+++ b/frontend/dist/assets/index.cc5cde43.js
--- a/frontend/dist/index.html
+++ b/frontend/dist/index.html
@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Stable Diffusion Dream Server</title>
+    <script type="module" crossorigin src="/assets/index.cc5cde43.js"></script>
+    <link rel="stylesheet" href="/assets/index.447eb2a9.css">
+  </head>
+  <body>
+    <div id="root"></div>
+    
+  </body>
+</html>
--- a/frontend/index.d.ts
+++ b/frontend/index.d.ts
@ -0,0 +1 @@
+declare module 'redux-socket.io-middleware';
--- a/frontend/index.html
+++ b/frontend/index.html
@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Stable Diffusion Dream Server</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/frontend/package.json
+++ b/frontend/package.json
@ -0,0 +1,46 @@
+{
+  "name": "sdui",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "tsc-watch --onSuccess 'yarn run vite build -m development'",
+    "hmr": "vite dev",
+    "build": "tsc && vite build",
+    "build-dev": "tsc && vite build -m development",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@chakra-ui/react": "^2.3.1",
+    "@emotion/react": "^11.10.4",
+    "@emotion/styled": "^11.10.4",
+    "@reduxjs/toolkit": "^1.8.5",
+    "@types/uuid": "^8.3.4",
+    "dateformat": "^5.0.3",
+    "framer-motion": "^7.2.1",
+    "lodash": "^4.17.21",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-dropzone": "^14.2.2",
+    "react-icons": "^4.4.0",
+    "react-redux": "^8.0.2",
+    "redux-persist": "^6.0.0",
+    "socket.io-client": "^4.5.2",
+    "uuid": "^9.0.0"
+  },
+  "devDependencies": {
+    "@types/dateformat": "^5.0.0",
+    "@types/react": "^18.0.17",
+    "@types/react-dom": "^18.0.6",
+    "@typescript-eslint/eslint-plugin": "^5.36.2",
+    "@typescript-eslint/parser": "^5.36.2",
+    "@vitejs/plugin-react": "^2.0.1",
+    "eslint": "^8.23.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "tsc-watch": "^5.0.3",
+    "typescript": "^4.6.4",
+    "vite": "^3.0.7",
+    "vite-plugin-eslint": "^1.8.1"
+  }
+}
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@ -0,0 +1,60 @@
+import { Grid, GridItem } from '@chakra-ui/react';
+import CurrentImage from './features/gallery/CurrentImage';
+import LogViewer from './features/system/LogViewer';
+import PromptInput from './features/sd/PromptInput';
+import ProgressBar from './features/header/ProgressBar';
+import { useEffect } from 'react';
+import { useAppDispatch } from './app/hooks';
+import { requestAllImages } from './app/socketio';
+import ProcessButtons from './features/sd/ProcessButtons';
+import ImageRoll from './features/gallery/ImageRoll';
+import SiteHeader from './features/header/SiteHeader';
+import OptionsAccordion from './features/sd/OptionsAccordion';
+
+const App = () => {
+    const dispatch = useAppDispatch();
+    useEffect(() => {
+        dispatch(requestAllImages());
+    }, [dispatch]);
+    return (
+        <>
+            <Grid
+                width='100vw'
+                height='100vh'
+                templateAreas={`
+                    "header header header header"
+                    "progressBar progressBar progressBar progressBar"
+                    "menu prompt processButtons imageRoll"
+                    "menu currentImage currentImage imageRoll"`}
+                gridTemplateRows={'36px 10px 100px auto'}
+                gridTemplateColumns={'350px auto 100px 388px'}
+                gap={2}
+            >
+                <GridItem area={'header'} pt={1}>
+                    <SiteHeader />
+                </GridItem>
+                <GridItem area={'progressBar'}>
+                    <ProgressBar />
+                </GridItem>
+                <GridItem pl='2' area={'menu'} overflowY='scroll'>
+                    <OptionsAccordion />
+                </GridItem>
+                <GridItem area={'prompt'}>
+                    <PromptInput />
+                </GridItem>
+                <GridItem area={'processButtons'}>
+                    <ProcessButtons />
+                </GridItem>
+                <GridItem area={'currentImage'}>
+                    <CurrentImage />
+                </GridItem>
+                <GridItem pr='2' area={'imageRoll'} overflowY='scroll'>
+                    <ImageRoll />
+                </GridItem>
+            </Grid>
+            <LogViewer />
+        </>
+    );
+};
+
+export default App;
--- a/frontend/src/Loading.tsx
+++ b/frontend/src/Loading.tsx
@ -0,0 +1,22 @@
+import { Flex, Spinner } from '@chakra-ui/react';
+
+const Loading = () => {
+    return (
+        <Flex
+            width={'100vw'}
+            height={'100vh'}
+            alignItems='center'
+            justifyContent='center'
+        >
+            <Spinner
+                thickness='2px'
+                speed='1s'
+                emptyColor='gray.200'
+                color='gray.400'
+                size='xl'
+            />
+        </Flex>
+    );
+};
+
+export default Loading;
--- a/frontend/src/app/constants.ts
+++ b/frontend/src/app/constants.ts
@ -0,0 +1,55 @@
+// TODO: use Enums?
+
+// Valid samplers
+export const SAMPLERS: Array<string> = [
+    'ddim',
+    'plms',
+    'k_lms',
+    'k_dpm_2',
+    'k_dpm_2_a',
+    'k_euler',
+    'k_euler_a',
+    'k_heun',
+];
+
+// Valid image widths
+export const WIDTHS: Array<number> = [
+    64, 128, 192, 256, 320, 384, 448, 512, 576, 640, 704, 768, 832, 896, 960,
+    1024,
+];
+
+// Valid image heights
+export const HEIGHTS: Array<number> = [
+    64, 128, 192, 256, 320, 384, 448, 512, 576, 640, 704, 768, 832, 896, 960,
+    1024,
+];
+
+// Valid upscaling levels
+export const UPSCALING_LEVELS: Array<{ key: string; value: number }> = [
+    { key: '2x', value: 2 },
+    { key: '4x', value: 4 },
+];
+
+// Internal to human-readable parameters
+export const PARAMETERS: { [key: string]: string } = {
+    prompt: 'Prompt',
+    iterations: 'Iterations',
+    steps: 'Steps',
+    cfgScale: 'CFG Scale',
+    height: 'Height',
+    width: 'Width',
+    sampler: 'Sampler',
+    seed: 'Seed',
+    img2imgStrength: 'img2img Strength',
+    gfpganStrength: 'GFPGAN Strength',
+    upscalingLevel: 'Upscaling Level',
+    upscalingStrength: 'Upscaling Strength',
+    initialImagePath: 'Initial Image',
+    maskPath: 'Initial Image Mask',
+    shouldFitToWidthHeight: 'Fit Initial Image',
+    seamless: 'Seamless Tiling',
+};
+
+export const NUMPY_RAND_MIN = 0;
+
+export const NUMPY_RAND_MAX = 4294967295;
--- a/frontend/src/app/hooks.ts
+++ b/frontend/src/app/hooks.ts
@ -0,0 +1,7 @@
+import { useDispatch, useSelector } from 'react-redux';
+import type { TypedUseSelectorHook } from 'react-redux';
+import type { RootState, AppDispatch } from './store';
+
+// Use throughout your app instead of plain `useDispatch` and `useSelector`
+export const useAppDispatch: () => AppDispatch = useDispatch;
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
--- a/frontend/src/app/parameterTranslation.ts
+++ b/frontend/src/app/parameterTranslation.ts
@ -0,0 +1,182 @@
+import { SDState } from '../features/sd/sdSlice';
+import randomInt from '../features/sd/util/randomInt';
+import {
+    seedWeightsToString,
+    stringToSeedWeights,
+} from '../features/sd/util/seedWeightPairs';
+import { SystemState } from '../features/system/systemSlice';
+import { NUMPY_RAND_MAX, NUMPY_RAND_MIN } from './constants';
+
+/*
+    These functions translate frontend state into parameters
+    suitable for consumption by the backend, and vice-versa.
+*/
+
+export const frontendToBackendParameters = (
+    sdState: SDState,
+    systemState: SystemState
+): { [key: string]: any } => {
+    const {
+        prompt,
+        iterations,
+        steps,
+        cfgScale,
+        height,
+        width,
+        sampler,
+        seed,
+        seamless,
+        shouldUseInitImage,
+        img2imgStrength,
+        initialImagePath,
+        maskPath,
+        shouldFitToWidthHeight,
+        shouldGenerateVariations,
+        variantAmount,
+        seedWeights,
+        shouldRunESRGAN,
+        upscalingLevel,
+        upscalingStrength,
+        shouldRunGFPGAN,
+        gfpganStrength,
+        shouldRandomizeSeed,
+    } = sdState;
+
+    const { shouldDisplayInProgress } = systemState;
+
+    const generationParameters: { [k: string]: any } = {
+        prompt,
+        iterations,
+        steps,
+        cfg_scale: cfgScale,
+        height,
+        width,
+        sampler_name: sampler,
+        seed,
+        seamless,
+        progress_images: shouldDisplayInProgress,
+    };
+
+    generationParameters.seed = shouldRandomizeSeed
+        ? randomInt(NUMPY_RAND_MIN, NUMPY_RAND_MAX)
+        : seed;
+
+    if (shouldUseInitImage) {
+        generationParameters.init_img = initialImagePath;
+        generationParameters.strength = img2imgStrength;
+        generationParameters.fit = shouldFitToWidthHeight;
+        if (maskPath) {
+            generationParameters.init_mask = maskPath;
+        }
+    }
+
+    if (shouldGenerateVariations) {
+        generationParameters.variation_amount = variantAmount;
+        if (seedWeights) {
+            generationParameters.with_variations =
+                stringToSeedWeights(seedWeights);
+        }
+    } else {
+        generationParameters.variation_amount = 0;
+    }
+
+    let esrganParameters: false | { [k: string]: any } = false;
+    let gfpganParameters: false | { [k: string]: any } = false;
+
+    if (shouldRunESRGAN) {
+        esrganParameters = {
+            level: upscalingLevel,
+            strength: upscalingStrength,
+        };
+    }
+
+    if (shouldRunGFPGAN) {
+        gfpganParameters = {
+            strength: gfpganStrength,
+        };
+    }
+
+    return {
+        generationParameters,
+        esrganParameters,
+        gfpganParameters,
+    };
+};
+
+export const backendToFrontendParameters = (parameters: {
+    [key: string]: any;
+}) => {
+    const {
+        prompt,
+        iterations,
+        steps,
+        cfg_scale,
+        height,
+        width,
+        sampler_name,
+        seed,
+        seamless,
+        progress_images,
+        variation_amount,
+        with_variations,
+        gfpgan_strength,
+        upscale,
+        init_img,
+        init_mask,
+        strength,
+    } = parameters;
+
+    const sd: { [key: string]: any } = {
+        shouldDisplayInProgress: progress_images,
+        // init
+        shouldGenerateVariations: false,
+        shouldRunESRGAN: false,
+        shouldRunGFPGAN: false,
+        initialImagePath: '',
+        maskPath: '',
+    };
+
+    if (variation_amount > 0) {
+        sd.shouldGenerateVariations = true;
+        sd.variantAmount = variation_amount;
+        if (with_variations) {
+            sd.seedWeights = seedWeightsToString(with_variations);
+        }
+    }
+
+    if (gfpgan_strength > 0) {
+        sd.shouldRunGFPGAN = true;
+        sd.gfpganStrength = gfpgan_strength;
+    }
+
+    if (upscale) {
+        sd.shouldRunESRGAN = true;
+        sd.upscalingLevel = upscale[0];
+        sd.upscalingStrength = upscale[1];
+    }
+
+    if (init_img) {
+        sd.shouldUseInitImage = true
+        sd.initialImagePath = init_img;
+        sd.strength = strength;
+        if (init_mask) {
+            sd.maskPath = init_mask;
+        }
+    }
+
+    // if we had a prompt, add all the metadata, but if we don't have a prompt,
+    // we must have only done ESRGAN or GFPGAN so do not add that metadata
+    if (prompt) {
+        sd.prompt = prompt;
+        sd.iterations = iterations;
+        sd.steps = steps;
+        sd.cfgScale = cfg_scale;
+        sd.height = height;
+        sd.width = width;
+        sd.sampler = sampler_name;
+        sd.seed = seed;
+        sd.seamless = seamless;
+    }
+
+    return sd;
+};
--- a/frontend/src/app/socketio.ts
+++ b/frontend/src/app/socketio.ts
@ -0,0 +1,393 @@
+import { createAction, Middleware } from '@reduxjs/toolkit';
+import { io } from 'socket.io-client';
+import {
+    addImage,
+    clearIntermediateImage,
+    removeImage,
+    SDImage,
+    SDMetadata,
+    setGalleryImages,
+    setIntermediateImage,
+} from '../features/gallery/gallerySlice';
+import {
+    addLogEntry,
+    setCurrentStep,
+    setIsConnected,
+    setIsProcessing,
+} from '../features/system/systemSlice';
+import { v4 as uuidv4 } from 'uuid';
+import { setInitialImagePath, setMaskPath } from '../features/sd/sdSlice';
+import {
+    backendToFrontendParameters,
+    frontendToBackendParameters,
+} from './parameterTranslation';
+
+export interface SocketIOResponse {
+    status: 'OK' | 'ERROR';
+    message?: string;
+    data?: any;
+}
+
+export const socketioMiddleware = () => {
+    const { hostname, port } = new URL(window.location.href);
+
+    const socketio = io(`http://${hostname}:9090`);
+
+    let areListenersSet = false;
+
+    const middleware: Middleware = (store) => (next) => (action) => {
+        const { dispatch, getState } = store;
+        if (!areListenersSet) {
+            // CONNECT
+            socketio.on('connect', () => {
+                try {
+                    dispatch(setIsConnected(true));
+                } catch (e) {
+                    console.error(e);
+                }
+            });
+
+            // DISCONNECT
+            socketio.on('disconnect', () => {
+                try {
+                    dispatch(setIsConnected(false));
+                    dispatch(setIsProcessing(false));
+                    dispatch(addLogEntry(`Disconnected from server`));
+                } catch (e) {
+                    console.error(e);
+                }
+            });
+
+            // PROCESSING RESULT
+            socketio.on(
+                'result',
+                (data: {
+                    url: string;
+                    type: 'generation' | 'esrgan' | 'gfpgan';
+                    uuid?: string;
+                    metadata: { [key: string]: any };
+                }) => {
+                    try {
+                        const newUuid = uuidv4();
+                        const { type, url, uuid, metadata } = data;
+                        switch (type) {
+                            case 'generation': {
+                                const translatedMetadata =
+                                    backendToFrontendParameters(metadata);
+                                dispatch(
+                                    addImage({
+                                        uuid: newUuid,
+                                        url,
+                                        metadata: translatedMetadata,
+                                    })
+                                );
+                                dispatch(
+                                    addLogEntry(`Image generated: ${url}`)
+                                );
+
+                                break;
+                            }
+                            case 'esrgan': {
+                                const originalImage =
+                                    getState().gallery.images.find(
+                                        (i: SDImage) => i.uuid === uuid
+                                    );
+                                const newMetadata = {
+                                    ...originalImage.metadata,
+                                };
+                                newMetadata.shouldRunESRGAN = true;
+                                newMetadata.upscalingLevel =
+                                    metadata.upscale[0];
+                                newMetadata.upscalingStrength =
+                                    metadata.upscale[1];
+                                dispatch(
+                                    addImage({
+                                        uuid: newUuid,
+                                        url,
+                                        metadata: newMetadata,
+                                    })
+                                );
+                                dispatch(
+                                    addLogEntry(`ESRGAN upscaled: ${url}`)
+                                );
+
+                                break;
+                            }
+                            case 'gfpgan': {
+                                const originalImage =
+                                    getState().gallery.images.find(
+                                        (i: SDImage) => i.uuid === uuid
+                                    );
+                                const newMetadata = {
+                                    ...originalImage.metadata,
+                                };
+                                newMetadata.shouldRunGFPGAN = true;
+                                newMetadata.gfpganStrength =
+                                    metadata.gfpgan_strength;
+                                dispatch(
+                                    addImage({
+                                        uuid: newUuid,
+                                        url,
+                                        metadata: newMetadata,
+                                    })
+                                );
+                                dispatch(
+                                    addLogEntry(`GFPGAN fixed faces: ${url}`)
+                                );
+
+                                break;
+                            }
+                        }
+                        dispatch(setIsProcessing(false));
+                    } catch (e) {
+                        console.error(e);
+                    }
+                }
+            );
+
+            // PROGRESS UPDATE
+            socketio.on('progress', (data: { step: number }) => {
+                try {
+                    dispatch(setIsProcessing(true));
+                    dispatch(setCurrentStep(data.step));
+                } catch (e) {
+                    console.error(e);
+                }
+            });
+
+            // INTERMEDIATE IMAGE
+            socketio.on(
+                'intermediateResult',
+                (data: { url: string; metadata: SDMetadata }) => {
+                    try {
+                        const uuid = uuidv4();
+                        const { url, metadata } = data;
+                        dispatch(
+                            setIntermediateImage({
+                                uuid,
+                                url,
+                                metadata,
+                            })
+                        );
+                        dispatch(
+                            addLogEntry(`Intermediate image generated: ${url}`)
+                        );
+                    } catch (e) {
+                        console.error(e);
+                    }
+                }
+            );
+
+            // ERROR FROM BACKEND
+            socketio.on('error', (message) => {
+                try {
+                    dispatch(addLogEntry(`Server error: ${message}`));
+                    dispatch(setIsProcessing(false));
+                    dispatch(clearIntermediateImage());
+                } catch (e) {
+                    console.error(e);
+                }
+            });
+
+            areListenersSet = true;
+        }
+
+        // HANDLE ACTIONS
+
+        switch (action.type) {
+            // GENERATE IMAGE
+            case 'socketio/generateImage': {
+                dispatch(setIsProcessing(true));
+                dispatch(setCurrentStep(-1));
+
+                const {
+                    generationParameters,
+                    esrganParameters,
+                    gfpganParameters,
+                } = frontendToBackendParameters(
+                    getState().sd,
+                    getState().system
+                );
+
+                socketio.emit(
+                    'generateImage',
+                    generationParameters,
+                    esrganParameters,
+                    gfpganParameters
+                );
+
+                dispatch(
+                    addLogEntry(
+                        `Image generation requested: ${JSON.stringify({
+                            ...generationParameters,
+                            ...esrganParameters,
+                            ...gfpganParameters,
+                        })}`
+                    )
+                );
+                break;
+            }
+
+            // RUN ESRGAN (UPSCALING)
+            case 'socketio/runESRGAN': {
+                const imageToProcess = action.payload;
+                dispatch(setIsProcessing(true));
+                dispatch(setCurrentStep(-1));
+                const { upscalingLevel, upscalingStrength } = getState().sd;
+                const esrganParameters = {
+                    upscale: [upscalingLevel, upscalingStrength],
+                };
+                socketio.emit('runESRGAN', imageToProcess, esrganParameters);
+                dispatch(
+                    addLogEntry(
+                        `ESRGAN upscale requested: ${JSON.stringify({
+                            file: imageToProcess.url,
+                            ...esrganParameters,
+                        })}`
+                    )
+                );
+                break;
+            }
+
+            // RUN GFPGAN (FIX FACES)
+            case 'socketio/runGFPGAN': {
+                const imageToProcess = action.payload;
+                dispatch(setIsProcessing(true));
+                dispatch(setCurrentStep(-1));
+                const { gfpganStrength } = getState().sd;
+
+                const gfpganParameters = {
+                    gfpgan_strength: gfpganStrength,
+                };
+                socketio.emit('runGFPGAN', imageToProcess, gfpganParameters);
+                dispatch(
+                    addLogEntry(
+                        `GFPGAN fix faces requested: ${JSON.stringify({
+                            file: imageToProcess.url,
+                            ...gfpganParameters,
+                        })}`
+                    )
+                );
+                break;
+            }
+
+            // DELETE IMAGE
+            case 'socketio/deleteImage': {
+                const imageToDelete = action.payload;
+                const { url } = imageToDelete;
+                socketio.emit(
+                    'deleteImage',
+                    url,
+                    (response: SocketIOResponse) => {
+                        if (response.status === 'OK') {
+                            dispatch(removeImage(imageToDelete));
+                            dispatch(addLogEntry(`Image deleted: ${url}`));
+                        }
+                    }
+                );
+                break;
+            }
+
+            // GET ALL IMAGES FOR GALLERY
+            case 'socketio/requestAllImages': {
+                socketio.emit(
+                    'requestAllImages',
+                    (response: SocketIOResponse) => {
+                        dispatch(setGalleryImages(response.data));
+                        dispatch(
+                            addLogEntry(`Loaded ${response.data.length} images`)
+                        );
+                    }
+                );
+                break;
+            }
+
+            // CANCEL PROCESSING
+            case 'socketio/cancelProcessing': {
+                socketio.emit('cancel', (response: SocketIOResponse) => {
+                    const { intermediateImage } = getState().gallery;
+                    if (response.status === 'OK') {
+                        dispatch(setIsProcessing(false));
+                        if (intermediateImage) {
+                            dispatch(addImage(intermediateImage));
+                            dispatch(
+                                addLogEntry(
+                                    `Intermediate image saved: ${intermediateImage.url}`
+                                )
+                            );
+
+                            dispatch(clearIntermediateImage());
+                        }
+                        dispatch(addLogEntry(`Processing canceled`));
+                    }
+                });
+                break;
+            }
+
+            // UPLOAD INITIAL IMAGE
+            case 'socketio/uploadInitialImage': {
+                const file = action.payload;
+
+                socketio.emit(
+                    'uploadInitialImage',
+                    file,
+                    file.name,
+                    (response: SocketIOResponse) => {
+                        if (response.status === 'OK') {
+                            dispatch(setInitialImagePath(response.data));
+                            dispatch(
+                                addLogEntry(
+                                    `Initial image uploaded: ${response.data}`
+                                )
+                            );
+                        }
+                    }
+                );
+                break;
+            }
+
+            // UPLOAD MASK IMAGE
+            case 'socketio/uploadMaskImage': {
+                const file = action.payload;
+
+                socketio.emit(
+                    'uploadMaskImage',
+                    file,
+                    file.name,
+                    (response: SocketIOResponse) => {
+                        if (response.status === 'OK') {
+                            dispatch(setMaskPath(response.data));
+                            dispatch(
+                                addLogEntry(
+                                    `Mask image uploaded: ${response.data}`
+                                )
+                            );
+                        }
+                    }
+                );
+                break;
+            }
+        }
+
+        next(action);
+    };
+
+    return middleware;
+};
+
+// Actions to be used by app
+
+export const generateImage = createAction<undefined>('socketio/generateImage');
+export const runESRGAN = createAction<SDImage>('socketio/runESRGAN');
+export const runGFPGAN = createAction<SDImage>('socketio/runGFPGAN');
+export const deleteImage = createAction<SDImage>('socketio/deleteImage');
+export const requestAllImages = createAction<undefined>(
+    'socketio/requestAllImages'
+);
+export const cancelProcessing = createAction<undefined>(
+    'socketio/cancelProcessing'
+);
+export const uploadInitialImage = createAction<File>(
+    'socketio/uploadInitialImage'
+);
+export const uploadMaskImage = createAction<File>('socketio/uploadMaskImage');
--- a/frontend/src/app/store.ts
+++ b/frontend/src/app/store.ts
@ -0,0 +1,53 @@
+import { combineReducers, configureStore } from '@reduxjs/toolkit';
+import { persistReducer } from 'redux-persist';
+import storage from 'redux-persist/lib/storage'; // defaults to localStorage for web
+
+import sdReducer from '../features/sd/sdSlice';
+import galleryReducer from '../features/gallery/gallerySlice';
+import systemReducer from '../features/system/systemSlice';
+import { socketioMiddleware } from './socketio';
+
+const reducers = combineReducers({
+  sd: sdReducer,
+  gallery: galleryReducer,
+  system: systemReducer,
+});
+
+const persistConfig = {
+  key: 'root',
+  storage,
+};
+
+const persistedReducer = persistReducer(persistConfig, reducers);
+
+/*
+  The frontend needs to be distributed as a production build, so
+  we cannot reasonably ask users to edit the JS and specify the
+  host and port on which the socket.io server will run.
+
+  The solution is to allow server script to be run with arguments
+  (or just edited) providing the host and port. Then, the server
+  serves a route `/socketio_config` which responds with the host
+  and port.
+
+  When the frontend loads, it synchronously requests that route
+  and thus gets the host and port. This requires a suspicious
+  fetch somewhere, and the store setup seems like as good a place
+  as any to make this fetch request.
+*/
+
+
+// Continue with store setup
+export const store = configureStore({
+  reducer: persistedReducer,
+  middleware: (getDefaultMiddleware) =>
+    getDefaultMiddleware({
+      // redux-persist sometimes needs to have a function in redux, need to disable this check
+      serializableCheck: false,
+    }).concat(socketioMiddleware()),
+});
+
+// Infer the `RootState` and `AppDispatch` types from the store itself
+export type RootState = ReturnType<typeof store.getState>;
+// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
+export type AppDispatch = typeof store.dispatch;
--- a/frontend/src/app/theme.ts
+++ b/frontend/src/app/theme.ts
@ -0,0 +1,37 @@
+import { extendTheme } from '@chakra-ui/react';
+import type { StyleFunctionProps } from '@chakra-ui/styled-system';
+
+export const theme = extendTheme({
+  config: {
+    initialColorMode: 'dark',
+    useSystemColorMode: false,
+  },
+  components: {
+    Tooltip: {
+      baseStyle: (props: StyleFunctionProps) => ({
+        textColor: props.colorMode === 'dark' ? 'gray.800' : 'gray.100',
+      }),
+    },
+    Accordion: {
+      baseStyle: (props: StyleFunctionProps) => ({
+        button: {
+          fontWeight: 'bold',
+          _hover: {
+            bgColor:
+              props.colorMode === 'dark'
+                ? 'rgba(255,255,255,0.05)'
+                : 'rgba(0,0,0,0.05)',
+          },
+        },
+        panel: {
+          paddingBottom: 2,
+        },
+      }),
+    },
+    FormLabel: {
+      baseStyle: {
+        fontWeight: 'light',
+      },
+    },
+  },
+});
--- a/frontend/src/components/SDButton.tsx
+++ b/frontend/src/components/SDButton.tsx
@ -0,0 +1,16 @@
+import { Button, ButtonProps } from '@chakra-ui/react';
+
+interface Props extends ButtonProps {
+    label: string;
+}
+
+const SDButton = (props: Props) => {
+    const { label, size = 'sm', ...rest } = props;
+    return (
+        <Button size={size} {...rest}>
+            {label}
+        </Button>
+    );
+};
+
+export default SDButton;
--- a/frontend/src/components/SDNumberInput.tsx
+++ b/frontend/src/components/SDNumberInput.tsx
@ -0,0 +1,56 @@
+import {
+  FormControl,
+  NumberInput,
+  NumberInputField,
+  NumberInputStepper,
+  NumberIncrementStepper,
+  NumberDecrementStepper,
+  Text,
+  FormLabel,
+  NumberInputProps,
+  Flex,
+} from '@chakra-ui/react';
+
+interface Props extends NumberInputProps {
+  label?: string;
+  width?: string | number;
+}
+
+const SDNumberInput = (props: Props) => {
+  const {
+    label,
+    isDisabled = false,
+    fontSize = 'md',
+    size = 'sm',
+    width,
+    isInvalid,
+    ...rest
+  } = props;
+  return (
+    <FormControl isDisabled={isDisabled} width={width} isInvalid={isInvalid}>
+      <Flex gap={2} justifyContent={'space-between'} alignItems={'center'}>
+        {label && (
+          <FormLabel marginBottom={1}>
+            <Text fontSize={fontSize} whiteSpace='nowrap'>
+              {label}
+            </Text>
+          </FormLabel>
+        )}
+        <NumberInput
+          size={size}
+          {...rest}
+          keepWithinRange={false}
+          clampValueOnBlur={true}
+        >
+          <NumberInputField fontSize={'md'}/>
+          <NumberInputStepper>
+            <NumberIncrementStepper />
+            <NumberDecrementStepper />
+          </NumberInputStepper>
+        </NumberInput>
+      </Flex>
+    </FormControl>
+  );
+};
+
+export default SDNumberInput;
--- a/frontend/src/components/SDSelect.tsx
+++ b/frontend/src/components/SDSelect.tsx
@ -0,0 +1,57 @@
+import {
+    Flex,
+    FormControl,
+    FormLabel,
+    Select,
+    SelectProps,
+    Text,
+} from '@chakra-ui/react';
+
+interface Props extends SelectProps {
+    label: string;
+    validValues:
+        | Array<number | string>
+        | Array<{ key: string; value: string | number }>;
+}
+
+const SDSelect = (props: Props) => {
+    const {
+        label,
+        isDisabled,
+        validValues,
+        size = 'sm',
+        fontSize = 'md',
+        marginBottom = 1,
+        whiteSpace = 'nowrap',
+        ...rest
+    } = props;
+    return (
+        <FormControl isDisabled={isDisabled}>
+            <Flex justifyContent={'space-between'} alignItems={'center'}>
+                <FormLabel
+                    marginBottom={marginBottom}
+                >
+                    <Text fontSize={fontSize} whiteSpace={whiteSpace}>
+                        {label}
+                    </Text>
+                </FormLabel>
+                <Select fontSize={fontSize} size={size} {...rest}>
+                    {validValues.map((opt) => {
+                        return typeof opt === 'string' ||
+                            typeof opt === 'number' ? (
+                            <option key={opt} value={opt}>
+                                {opt}
+                            </option>
+                        ) : (
+                            <option key={opt.value} value={opt.value}>
+                                {opt.key}
+                            </option>
+                        );
+                    })}
+                </Select>
+            </Flex>
+        </FormControl>
+    );
+};
+
+export default SDSelect;
--- a/frontend/src/components/SDSwitch.tsx
+++ b/frontend/src/components/SDSwitch.tsx
@ -0,0 +1,42 @@
+import {
+  Flex,
+  FormControl,
+  FormLabel,
+  Switch,
+  SwitchProps,
+} from '@chakra-ui/react';
+
+interface Props extends SwitchProps {
+  label?: string;
+  width?: string | number;
+}
+
+const SDSwitch = (props: Props) => {
+  const {
+    label,
+    isDisabled = false,
+    fontSize = 'md',
+    size = 'md',
+    width,
+    ...rest
+  } = props;
+  return (
+    <FormControl isDisabled={isDisabled} width={width}>
+      <Flex justifyContent={'space-between'} alignItems={'center'}>
+        {label && (
+          <FormLabel
+            fontSize={fontSize}
+            marginBottom={1}
+            flexGrow={2}
+            whiteSpace='nowrap'
+          >
+            {label}
+          </FormLabel>
+        )}
+        <Switch size={size} {...rest} />
+      </Flex>
+    </FormControl>
+  );
+};
+
+export default SDSwitch;
--- a/frontend/src/features/gallery/CurrentImage.tsx
+++ b/frontend/src/features/gallery/CurrentImage.tsx
@ -0,0 +1,161 @@
+import { Center, Flex, Image, useColorModeValue } from '@chakra-ui/react';
+import { useAppDispatch, useAppSelector } from '../../app/hooks';
+import { RootState } from '../../app/store';
+import { setAllParameters, setInitialImagePath, setSeed } from '../sd/sdSlice';
+import { useState } from 'react';
+import ImageMetadataViewer from './ImageMetadataViewer';
+import DeleteImageModalButton from './DeleteImageModalButton';
+import SDButton from '../../components/SDButton';
+import { runESRGAN, runGFPGAN } from '../../app/socketio';
+import { createSelector } from '@reduxjs/toolkit';
+import { SystemState } from '../system/systemSlice';
+import { isEqual } from 'lodash';
+
+const height = 'calc(100vh - 238px)';
+
+const systemSelector = createSelector(
+    (state: RootState) => state.system,
+    (system: SystemState) => {
+        return {
+            isProcessing: system.isProcessing,
+            isConnected: system.isConnected,
+            isGFPGANAvailable: system.isGFPGANAvailable,
+            isESRGANAvailable: system.isESRGANAvailable,
+        };
+    },
+    {
+        memoizeOptions: {
+            resultEqualityCheck: isEqual,
+        },
+    }
+);
+
+const CurrentImage = () => {
+    const { currentImage, intermediateImage } = useAppSelector(
+        (state: RootState) => state.gallery
+    );
+    const { isProcessing, isConnected, isGFPGANAvailable, isESRGANAvailable } =
+        useAppSelector(systemSelector);
+
+    const dispatch = useAppDispatch();
+
+    const bgColor = useColorModeValue(
+        'rgba(255, 255, 255, 0.85)',
+        'rgba(0, 0, 0, 0.8)'
+    );
+
+    const [shouldShowImageDetails, setShouldShowImageDetails] =
+        useState<boolean>(false);
+
+    const imageToDisplay = intermediateImage || currentImage;
+
+    return (
+        <Flex direction={'column'} rounded={'md'} borderWidth={1} p={2} gap={2}>
+            {imageToDisplay && (
+                <Flex gap={2}>
+                    <SDButton
+                        label='Use as initial image'
+                        colorScheme={'gray'}
+                        flexGrow={1}
+                        variant={'outline'}
+                        onClick={() =>
+                            dispatch(setInitialImagePath(imageToDisplay.url))
+                        }
+                    />
+
+                    <SDButton
+                        label='Use all'
+                        colorScheme={'gray'}
+                        flexGrow={1}
+                        variant={'outline'}
+                        onClick={() =>
+                            dispatch(setAllParameters(imageToDisplay.metadata))
+                        }
+                    />
+
+                    <SDButton
+                        label='Use seed'
+                        colorScheme={'gray'}
+                        flexGrow={1}
+                        variant={'outline'}
+                        isDisabled={!imageToDisplay.metadata.seed}
+                        onClick={() =>
+                            dispatch(setSeed(imageToDisplay.metadata.seed!))
+                        }
+                    />
+
+                    <SDButton
+                        label='Upscale'
+                        colorScheme={'gray'}
+                        flexGrow={1}
+                        variant={'outline'}
+                        isDisabled={
+                            !isESRGANAvailable ||
+                            Boolean(intermediateImage) ||
+                            !(isConnected && !isProcessing)
+                        }
+                        onClick={() => dispatch(runESRGAN(imageToDisplay))}
+                    />
+                    <SDButton
+                        label='Fix faces'
+                        colorScheme={'gray'}
+                        flexGrow={1}
+                        variant={'outline'}
+                        isDisabled={
+                            !isGFPGANAvailable ||
+                            Boolean(intermediateImage) ||
+                            !(isConnected && !isProcessing)
+                        }
+                        onClick={() => dispatch(runGFPGAN(imageToDisplay))}
+                    />
+                    <SDButton
+                        label='Details'
+                        colorScheme={'gray'}
+                        variant={shouldShowImageDetails ? 'solid' : 'outline'}
+                        borderWidth={1}
+                        flexGrow={1}
+                        onClick={() =>
+                            setShouldShowImageDetails(!shouldShowImageDetails)
+                        }
+                    />
+                    <DeleteImageModalButton image={imageToDisplay}>
+                        <SDButton
+                            label='Delete'
+                            colorScheme={'red'}
+                            flexGrow={1}
+                            variant={'outline'}
+                            isDisabled={Boolean(intermediateImage)}
+                        />
+                    </DeleteImageModalButton>
+                </Flex>
+            )}
+            <Center height={height} position={'relative'}>
+                {imageToDisplay && (
+                    <Image
+                        src={imageToDisplay.url}
+                        fit='contain'
+                        maxWidth={'100%'}
+                        maxHeight={'100%'}
+                    />
+                )}
+                {imageToDisplay && shouldShowImageDetails && (
+                    <Flex
+                        width={'100%'}
+                        height={'100%'}
+                        position={'absolute'}
+                        top={0}
+                        left={0}
+                        p={3}
+                        boxSizing='border-box'
+                        backgroundColor={bgColor}
+                        overflow='scroll'
+                    >
+                        <ImageMetadataViewer image={imageToDisplay} />
+                    </Flex>
+                )}
+            </Center>
+        </Flex>
+    );
+};
+
+export default CurrentImage;
--- a/frontend/src/features/gallery/DeleteImageModalButton.tsx
+++ b/frontend/src/features/gallery/DeleteImageModalButton.tsx
@ -0,0 +1,94 @@
+import {
+  IconButtonProps,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Text,
+  useDisclosure,
+} from '@chakra-ui/react';
+import { createSelector } from '@reduxjs/toolkit';
+import {
+  cloneElement,
+  ReactElement,
+  SyntheticEvent,
+} from 'react';
+import { useAppDispatch, useAppSelector } from '../../app/hooks';
+import { deleteImage } from '../../app/socketio';
+import { RootState } from '../../app/store';
+import SDButton from '../../components/SDButton';
+import { setShouldConfirmOnDelete, SystemState } from '../system/systemSlice';
+import { SDImage } from './gallerySlice';
+
+interface Props extends IconButtonProps {
+  image: SDImage;
+  'aria-label': string;
+  children: ReactElement;
+}
+
+const systemSelector = createSelector(
+  (state: RootState) => state.system,
+  (system: SystemState) => system.shouldConfirmOnDelete
+);
+
+/*
+TODO: The modal and button to open it should be two different components,
+but their state is closely related and I'm not sure how best to accomplish it.
+*/
+const DeleteImageModalButton = (props: Omit<Props, 'aria-label'>) => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const dispatch = useAppDispatch();
+  const shouldConfirmOnDelete = useAppSelector(systemSelector);
+
+  const handleClickDelete = (e: SyntheticEvent) => {
+    e.stopPropagation();
+    shouldConfirmOnDelete ? onOpen() : handleDelete();
+  };
+
+  const { image, children } = props;
+
+  const handleDelete = () => {
+    dispatch(deleteImage(image));
+    onClose();
+  };
+
+  const handleDeleteAndDontAsk = () => {
+    dispatch(deleteImage(image));
+    dispatch(setShouldConfirmOnDelete(false));
+    onClose();
+  };
+
+  return (
+    <>
+      {cloneElement(children, {
+        onClick: handleClickDelete,
+      })}
+
+      <Modal isOpen={isOpen} onClose={onClose}>
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader>Are you sure you want to delete this image?</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody>
+            <Text>It will be deleted forever!</Text>
+          </ModalBody>
+
+          <ModalFooter justifyContent={'space-between'}>
+            <SDButton label={'Yes'} colorScheme='red' onClick={handleDelete} />
+            <SDButton
+              label={"Yes, and don't ask me again"}
+              colorScheme='red'
+              onClick={handleDeleteAndDontAsk}
+            />
+            <SDButton label='Cancel' colorScheme='blue' onClick={onClose} />
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+};
+
+export default DeleteImageModalButton;
--- a/frontend/src/features/gallery/ImageMetadataViewer.tsx
+++ b/frontend/src/features/gallery/ImageMetadataViewer.tsx
@ -0,0 +1,124 @@
+import {
+    Center,
+    Flex,
+    IconButton,
+    Link,
+    List,
+    ListItem,
+    Text,
+} from '@chakra-ui/react';
+import { FaPlus } from 'react-icons/fa';
+import { PARAMETERS } from '../../app/constants';
+import { useAppDispatch } from '../../app/hooks';
+import SDButton from '../../components/SDButton';
+import { setAllParameters, setParameter } from '../sd/sdSlice';
+import { SDImage, SDMetadata } from './gallerySlice';
+
+type Props = {
+    image: SDImage;
+};
+
+const ImageMetadataViewer = ({ image }: Props) => {
+    const dispatch = useAppDispatch();
+
+    const keys = Object.keys(PARAMETERS);
+
+    const metadata: Array<{
+        label: string;
+        key: string;
+        value: string | number | boolean;
+    }> = [];
+
+    keys.forEach((key) => {
+        const value = image.metadata[key as keyof SDMetadata];
+        if (value !== undefined) {
+            metadata.push({ label: PARAMETERS[key], key, value });
+        }
+    });
+
+    return (
+        <Flex gap={2} direction={'column'} overflowY={'scroll'} width={'100%'}>
+            <SDButton
+                label='Use all parameters'
+                colorScheme={'gray'}
+                padding={2}
+                isDisabled={metadata.length === 0}
+                onClick={() => dispatch(setAllParameters(image.metadata))}
+            />
+            <Flex gap={2}>
+                <Text fontWeight={'semibold'}>File:</Text>
+                <Link href={image.url} isExternal>
+                    <Text>{image.url}</Text>
+                </Link>
+            </Flex>
+            {metadata.length ? (
+                <>
+                    <List>
+                        {metadata.map((parameter, i) => {
+                            const { label, key, value } = parameter;
+                            return (
+                                <ListItem key={i} pb={1}>
+                                    <Flex gap={2}>
+                                        <IconButton
+                                            aria-label='Use this parameter'
+                                            icon={<FaPlus />}
+                                            size={'xs'}
+                                            onClick={() =>
+                                                dispatch(
+                                                    setParameter({
+                                                        key,
+                                                        value,
+                                                    })
+                                                )
+                                            }
+                                        />
+                                        <Text fontWeight={'semibold'}>
+                                            {label}:
+                                        </Text>
+
+                                        {value === undefined ||
+                                        value === null ||
+                                        value === '' ||
+                                        value === 0 ? (
+                                            <Text
+                                                maxHeight={100}
+                                                fontStyle={'italic'}
+                                            >
+                                                None
+                                            </Text>
+                                        ) : (
+                                            <Text
+                                                maxHeight={100}
+                                                overflowY={'scroll'}
+                                            >
+                                                {value.toString()}
+                                            </Text>
+                                        )}
+                                    </Flex>
+                                </ListItem>
+                            );
+                        })}
+                    </List>
+                    <Flex gap={2}>
+                        <Text fontWeight={'semibold'}>Raw:</Text>
+                        <Text
+                            maxHeight={100}
+                            overflowY={'scroll'}
+                            wordBreak={'break-all'}
+                        >
+                            {JSON.stringify(image.metadata)}
+                        </Text>
+                    </Flex>
+                </>
+            ) : (
+                <Center width={'100%'} pt={10}>
+                    <Text fontSize={'lg'} fontWeight='semibold'>
+                        No metadata available
+                    </Text>
+                </Center>
+            )}
+        </Flex>
+    );
+};
+
+export default ImageMetadataViewer;
--- a/frontend/src/features/gallery/ImageRoll.tsx
+++ b/frontend/src/features/gallery/ImageRoll.tsx
@ -0,0 +1,150 @@
+import {
+    Box,
+    Flex,
+    Icon,
+    IconButton,
+    Image,
+    useColorModeValue,
+} from '@chakra-ui/react';
+import { RootState } from '../../app/store';
+import { useAppDispatch, useAppSelector } from '../../app/hooks';
+import { SDImage, setCurrentImage } from './gallerySlice';
+import { FaCheck, FaCopy, FaSeedling, FaTrash } from 'react-icons/fa';
+import DeleteImageModalButton from './DeleteImageModalButton';
+import { memo, SyntheticEvent, useState } from 'react';
+import { setAllParameters, setSeed } from '../sd/sdSlice';
+
+interface HoverableImageProps {
+    image: SDImage;
+    isSelected: boolean;
+}
+
+const HoverableImage = memo(
+    (props: HoverableImageProps) => {
+        const [isHovered, setIsHovered] = useState<boolean>(false);
+        const dispatch = useAppDispatch();
+
+        const checkColor = useColorModeValue('green.600', 'green.300');
+        const bgColor = useColorModeValue('gray.200', 'gray.700');
+        const bgGradient = useColorModeValue(
+            'radial-gradient(circle, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.7) 20%, rgba(0,0,0,0) 100%)',
+            'radial-gradient(circle, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.7) 20%, rgba(0,0,0,0) 100%)'
+        );
+
+        const { image, isSelected } = props;
+        const { url, uuid, metadata } = image;
+
+        const handleMouseOver = () => setIsHovered(true);
+        const handleMouseOut = () => setIsHovered(false);
+        const handleClickSetAllParameters = (e: SyntheticEvent) => {
+            e.stopPropagation();
+            dispatch(setAllParameters(metadata));
+        };
+        const handleClickSetSeed = (e: SyntheticEvent) => {
+            e.stopPropagation();
+            dispatch(setSeed(image.metadata.seed!)); // component not rendered unless this exists
+        };
+
+        return (
+            <Box position={'relative'} key={uuid}>
+                <Image
+                    width={120}
+                    height={120}
+                    objectFit='cover'
+                    rounded={'md'}
+                    src={url}
+                    loading={'lazy'}
+                    backgroundColor={bgColor}
+                />
+                <Flex
+                    cursor={'pointer'}
+                    position={'absolute'}
+                    top={0}
+                    left={0}
+                    rounded={'md'}
+                    width='100%'
+                    height='100%'
+                    alignItems={'center'}
+                    justifyContent={'center'}
+                    background={isSelected ? bgGradient : undefined}
+                    onClick={() => dispatch(setCurrentImage(image))}
+                    onMouseOver={handleMouseOver}
+                    onMouseOut={handleMouseOut}
+                >
+                    {isSelected && (
+                        <Icon
+                            fill={checkColor}
+                            width={'50%'}
+                            height={'50%'}
+                            as={FaCheck}
+                        />
+                    )}
+                    {isHovered && (
+                        <Flex
+                            direction={'column'}
+                            gap={1}
+                            position={'absolute'}
+                            top={1}
+                            right={1}
+                        >
+                            <DeleteImageModalButton image={image}>
+                                <IconButton
+                                    colorScheme='red'
+                                    aria-label='Delete image'
+                                    icon={<FaTrash />}
+                                    size='xs'
+                                    fontSize={15}
+                                />
+                            </DeleteImageModalButton>
+                            <IconButton
+                                aria-label='Use all parameters'
+                                colorScheme={'blue'}
+                                icon={<FaCopy />}
+                                size='xs'
+                                fontSize={15}
+                                onClickCapture={handleClickSetAllParameters}
+                            />
+                            {image.metadata.seed && (
+                                <IconButton
+                                    aria-label='Use seed'
+                                    colorScheme={'blue'}
+                                    icon={<FaSeedling />}
+                                    size='xs'
+                                    fontSize={16}
+                                    onClickCapture={handleClickSetSeed}
+                                />
+                            )}
+                        </Flex>
+                    )}
+                </Flex>
+            </Box>
+        );
+    },
+    (prev, next) =>
+        prev.image.uuid === next.image.uuid &&
+        prev.isSelected === next.isSelected
+);
+
+const ImageRoll = () => {
+    const { images, currentImageUuid } = useAppSelector(
+        (state: RootState) => state.gallery
+    );
+
+    return (
+        <Flex gap={2} wrap='wrap' pb={2}>
+            {[...images].reverse().map((image) => {
+                const { uuid } = image;
+                const isSelected = currentImageUuid === uuid;
+                return (
+                    <HoverableImage
+                        key={uuid}
+                        image={image}
+                        isSelected={isSelected}
+                    />
+                );
+            })}
+        </Flex>
+    );
+};
+
+export default ImageRoll;
--- a/frontend/src/features/gallery/gallerySlice.ts
+++ b/frontend/src/features/gallery/gallerySlice.ts
@ -0,0 +1,144 @@
+import { createSlice } from '@reduxjs/toolkit';
+import type { PayloadAction } from '@reduxjs/toolkit';
+import { v4 as uuidv4 } from 'uuid';
+import { UpscalingLevel } from '../sd/sdSlice';
+import { backendToFrontendParameters } from '../../app/parameterTranslation';
+
+// TODO: Revise pending metadata RFC: https://github.com/lstein/stable-diffusion/issues/266
+export interface SDMetadata {
+  prompt?: string;
+  steps?: number;
+  cfgScale?: number;
+  height?: number;
+  width?: number;
+  sampler?: string;
+  seed?: number;
+  img2imgStrength?: number;
+  gfpganStrength?: number;
+  upscalingLevel?: UpscalingLevel;
+  upscalingStrength?: number;
+  initialImagePath?: string;
+  maskPath?: string;
+  seamless?: boolean;
+  shouldFitToWidthHeight?: boolean;
+}
+
+export interface SDImage {
+  // TODO: I have installed @types/uuid but cannot figure out how to use them here.
+  uuid: string;
+  url: string;
+  metadata: SDMetadata;
+}
+
+export interface GalleryState {
+  currentImageUuid: string;
+  images: Array<SDImage>;
+  intermediateImage?: SDImage;
+  currentImage?: SDImage;
+}
+
+const initialState: GalleryState = {
+  currentImageUuid: '',
+  images: [],
+};
+
+export const gallerySlice = createSlice({
+  name: 'gallery',
+  initialState,
+  reducers: {
+    setCurrentImage: (state, action: PayloadAction<SDImage>) => {
+      state.currentImage = action.payload;
+      state.currentImageUuid = action.payload.uuid;
+    },
+    removeImage: (state, action: PayloadAction<SDImage>) => {
+      const { uuid } = action.payload;
+
+      const newImages = state.images.filter((image) => image.uuid !== uuid);
+
+      const imageToDeleteIndex = state.images.findIndex(
+        (image) => image.uuid === uuid
+      );
+
+      const newCurrentImageIndex = Math.min(
+        Math.max(imageToDeleteIndex, 0),
+        newImages.length - 1
+      );
+
+      state.images = newImages;
+
+      state.currentImage = newImages.length
+        ? newImages[newCurrentImageIndex]
+        : undefined;
+
+      state.currentImageUuid = newImages.length
+        ? newImages[newCurrentImageIndex].uuid
+        : '';
+    },
+    addImage: (state, action: PayloadAction<SDImage>) => {
+      state.images.push(action.payload);
+      state.currentImageUuid = action.payload.uuid;
+      state.intermediateImage = undefined;
+      state.currentImage = action.payload;
+    },
+    setIntermediateImage: (state, action: PayloadAction<SDImage>) => {
+      state.intermediateImage = action.payload;
+    },
+    clearIntermediateImage: (state) => {
+      state.intermediateImage = undefined;
+    },
+    setGalleryImages: (
+      state,
+      action: PayloadAction<
+        Array<{
+          path: string;
+          metadata: { [key: string]: string | number | boolean };
+        }>
+      >
+    ) => {
+      // TODO: Revise pending metadata RFC: https://github.com/lstein/stable-diffusion/issues/266
+      const images = action.payload;
+
+      if (images.length === 0) {
+        // there are no images on disk, clear the gallery
+        state.images = [];
+        state.currentImageUuid = '';
+        state.currentImage = undefined;
+      } else {
+        // Filter image urls that are already in the rehydrated state
+        const filteredImages = action.payload.filter(
+          (image) => !state.images.find((i) => i.url === image.path)
+        );
+
+        const preparedImages = filteredImages.map((image): SDImage => {
+          return {
+            uuid: uuidv4(),
+            url: image.path,
+            metadata: backendToFrontendParameters(image.metadata),
+          };
+        });
+
+        const newImages = [...state.images].concat(preparedImages);
+
+        // if previous currentimage no longer exists, set a new one
+        if (!newImages.find((image) => image.uuid === state.currentImageUuid)) {
+          const newCurrentImage = newImages[newImages.length - 1];
+          state.currentImage = newCurrentImage;
+          state.currentImageUuid = newCurrentImage.uuid;
+        }
+
+        state.images = newImages;
+      }
+    },
+  },
+});
+
+export const {
+  setCurrentImage,
+  removeImage,
+  addImage,
+  setGalleryImages,
+  setIntermediateImage,
+  clearIntermediateImage,
+} = gallerySlice.actions;
+
+export default gallerySlice.reducer;
--- a/frontend/src/features/header/ProgressBar.tsx
+++ b/frontend/src/features/header/ProgressBar.tsx
@ -0,0 +1,35 @@
+import { Progress } from '@chakra-ui/react';
+import { createSelector } from '@reduxjs/toolkit';
+import { isEqual } from 'lodash';
+import { useAppSelector } from '../../app/hooks';
+import { RootState } from '../../app/store';
+import { SDState } from '../sd/sdSlice';
+
+const sdSelector = createSelector(
+    (state: RootState) => state.sd,
+    (sd: SDState) => {
+        return {
+            realSteps: sd.realSteps,
+        };
+    },
+    {
+        memoizeOptions: {
+            resultEqualityCheck: isEqual,
+        },
+    }
+);
+
+const ProgressBar = () => {
+    const { realSteps } = useAppSelector(sdSelector);
+    const { currentStep } = useAppSelector((state: RootState) => state.system);
+    const progress = Math.round((currentStep * 100) / realSteps);
+    return (
+        <Progress
+            height='10px'
+            value={progress}
+            isIndeterminate={progress < 0 || currentStep === realSteps}
+        />
+    );
+};
+
+export default ProgressBar;
--- a/frontend/src/features/header/SiteHeader.tsx
+++ b/frontend/src/features/header/SiteHeader.tsx
@ -0,0 +1,93 @@
+import {
+  Flex,
+  Heading,
+  IconButton,
+  Link,
+  Spacer,
+  Text,
+  useColorMode,
+} from '@chakra-ui/react';
+import { createSelector } from '@reduxjs/toolkit';
+import { isEqual } from 'lodash';
+
+import { FaSun, FaMoon, FaGithub } from 'react-icons/fa';
+import { MdHelp, MdSettings } from 'react-icons/md';
+import { useAppSelector } from '../../app/hooks';
+import { RootState } from '../../app/store';
+import SettingsModal from '../system/SettingsModal';
+import { SystemState } from '../system/systemSlice';
+
+const systemSelector = createSelector(
+  (state: RootState) => state.system,
+  (system: SystemState) => {
+    return { isConnected: system.isConnected };
+  },
+  {
+    memoizeOptions: { resultEqualityCheck: isEqual },
+  }
+);
+
+const SiteHeader = () => {
+  const { colorMode, toggleColorMode } = useColorMode();
+  const { isConnected } = useAppSelector(systemSelector);
+
+  return (
+    <Flex minWidth='max-content' alignItems='center' gap='1' pl={2} pr={1}>
+      <Heading size={'lg'}>Stable Diffusion Dream Server</Heading>
+
+      <Spacer />
+
+      <Text textColor={isConnected ? 'green.500' : 'red.500'}>
+        {isConnected ? `Connected to server` : 'No connection to server'}
+      </Text>
+
+      <SettingsModal>
+        <IconButton
+          aria-label='Settings'
+          variant='link'
+          fontSize={24}
+          size={'sm'}
+          icon={<MdSettings />}
+        />
+      </SettingsModal>
+
+      <IconButton
+        aria-label='Link to Github Issues'
+        variant='link'
+        fontSize={23}
+        size={'sm'}
+        icon={
+          <Link
+            isExternal
+            href='http://github.com/lstein/stable-diffusion/issues'
+          >
+            <MdHelp />
+          </Link>
+        }
+      />
+
+      <IconButton
+        aria-label='Link to Github Repo'
+        variant='link'
+        fontSize={20}
+        size={'sm'}
+        icon={
+          <Link isExternal href='http://github.com/lstein/stable-diffusion'>
+            <FaGithub />
+          </Link>
+        }
+      />
+
+      <IconButton
+        aria-label='Toggle Dark Mode'
+        onClick={toggleColorMode}
+        variant='link'
+        size={'sm'}
+        fontSize={colorMode == 'light' ? 18 : 20}
+        icon={colorMode == 'light' ? <FaMoon /> : <FaSun />}
+      />
+    </Flex>
+  );
+};
+
+export default SiteHeader;
--- a/frontend/src/features/sd/ESRGANOptions.tsx
+++ b/frontend/src/features/sd/ESRGANOptions.tsx
@ -0,0 +1,84 @@
+import { Flex } from '@chakra-ui/react';
+
+import { RootState } from '../../app/store';
+import { useAppDispatch, useAppSelector } from '../../app/hooks';
+
+import {
+    setUpscalingLevel,
+    setUpscalingStrength,
+    UpscalingLevel,
+    SDState,
+} from '../sd/sdSlice';
+
+import SDNumberInput from '../../components/SDNumberInput';
+import SDSelect from '../../components/SDSelect';
+
+import { UPSCALING_LEVELS } from '../../app/constants';
+import { createSelector } from '@reduxjs/toolkit';
+import { isEqual } from 'lodash';
+import { SystemState } from '../system/systemSlice';
+
+const sdSelector = createSelector(
+    (state: RootState) => state.sd,
+    (sd: SDState) => {
+        return {
+            upscalingLevel: sd.upscalingLevel,
+            upscalingStrength: sd.upscalingStrength,
+        };
+    },
+    {
+        memoizeOptions: {
+            resultEqualityCheck: isEqual,
+        },
+    }
+);
+
+const systemSelector = createSelector(
+    (state: RootState) => state.system,
+    (system: SystemState) => {
+        return {
+            isESRGANAvailable: system.isESRGANAvailable,
+        };
+    },
+    {
+        memoizeOptions: {
+            resultEqualityCheck: isEqual,
+        },
+    }
+);
+const ESRGANOptions = () => {
+    const { upscalingLevel, upscalingStrength } = useAppSelector(sdSelector);
+
+    const { isESRGANAvailable } = useAppSelector(systemSelector);
+
+    const dispatch = useAppDispatch();
+
+    return (
+        <Flex direction={'column'} gap={2}>
+            <SDSelect
+                isDisabled={!isESRGANAvailable}
+                label='Scale'
+                value={upscalingLevel}
+                onChange={(e) =>
+                    dispatch(
+                        setUpscalingLevel(
+                            Number(e.target.value) as UpscalingLevel
+                        )
+                    )
+                }
+                validValues={UPSCALING_LEVELS}
+            />
+            <SDNumberInput
+                isDisabled={!isESRGANAvailable}
+                label='Strength'
+                step={0.05}
+                min={0}
+                max={1}
+                onChange={(v) => dispatch(setUpscalingStrength(Number(v)))}
+                value={upscalingStrength}
+            />
+        </Flex>
+    );
+};
+
+export default ESRGANOptions;
--- a/frontend/src/features/sd/GFPGANOptions.tsx
+++ b/frontend/src/features/sd/GFPGANOptions.tsx
@ -0,0 +1,63 @@
+import { Flex } from '@chakra-ui/react';
+
+import { RootState } from '../../app/store';
+import { useAppDispatch, useAppSelector } from '../../app/hooks';
+
+import { SDState, setGfpganStrength } from '../sd/sdSlice';
+
+import SDNumberInput from '../../components/SDNumberInput';
+
+import { createSelector } from '@reduxjs/toolkit';
+import { isEqual } from 'lodash';
+import { SystemState } from '../system/systemSlice';
+
+const sdSelector = createSelector(
+    (state: RootState) => state.sd,
+    (sd: SDState) => {
+        return {
+            gfpganStrength: sd.gfpganStrength,
+        };
+    },
+    {
+        memoizeOptions: {
+            resultEqualityCheck: isEqual,
+        },
+    }
+);
+
+const systemSelector = createSelector(
+    (state: RootState) => state.system,
+    (system: SystemState) => {
+        return {
+            isGFPGANAvailable: system.isGFPGANAvailable,
+        };
+    },
+    {
+        memoizeOptions: {
+            resultEqualityCheck: isEqual,
+        },
+    }
+);
+const GFPGANOptions = () => {
+    const { gfpganStrength } = useAppSelector(sdSelector);
+
+    const { isGFPGANAvailable } = useAppSelector(systemSelector);
+
+    const dispatch = useAppDispatch();
+
+    return (
+        <Flex direction={'column'} gap={2}>
+            <SDNumberInput
+                isDisabled={!isGFPGANAvailable}
+                label='Strength'
+                step={0.05}
+                min={0}
+                max={1}
+                onChange={(v) => dispatch(setGfpganStrength(Number(v)))}
+                value={gfpganStrength}
+            />
+        </Flex>
+    );
+};
+
+export default GFPGANOptions;
--- a/frontend/src/features/sd/ImageToImageOptions.tsx
+++ b/frontend/src/features/sd/ImageToImageOptions.tsx
@ -0,0 +1,54 @@
+import { Flex } from '@chakra-ui/react';
+import { createSelector } from '@reduxjs/toolkit';
+import { useAppDispatch, useAppSelector } from '../../app/hooks';
+import { RootState } from '../../app/store';
+import SDNumberInput from '../../components/SDNumberInput';
+import SDSwitch from '../../components/SDSwitch';
+import InitImage from './InitImage';
+import {
+    SDState,
+    setImg2imgStrength,
+    setShouldFitToWidthHeight,
+} from './sdSlice';
+
+const sdSelector = createSelector(
+    (state: RootState) => state.sd,
+    (sd: SDState) => {
+        return {
+            initialImagePath: sd.initialImagePath,
+            img2imgStrength: sd.img2imgStrength,
+            shouldFitToWidthHeight: sd.shouldFitToWidthHeight,
+        };
+    }
+);
+
+const ImageToImageOptions = () => {
+    const { initialImagePath, img2imgStrength, shouldFitToWidthHeight } =
+        useAppSelector(sdSelector);
+
+    const dispatch = useAppDispatch();
+    return (
+        <Flex direction={'column'} gap={2}>
+            <SDNumberInput
+                isDisabled={!initialImagePath}
+                label='Strength'
+                step={0.01}
+                min={0}
+                max={1}
+                onChange={(v) => dispatch(setImg2imgStrength(Number(v)))}
+                value={img2imgStrength}
+            />
+            <SDSwitch
+                isDisabled={!initialImagePath}
+                label='Fit initial image to output size'
+                isChecked={shouldFitToWidthHeight}
+                onChange={(e) =>
+                    dispatch(setShouldFitToWidthHeight(e.target.checked))
+                }
+            />
+            <InitImage />
+        </Flex>
+    );
+};
+
+export default ImageToImageOptions;
--- a/frontend/src/features/sd/InitImage.css
+++ b/frontend/src/features/sd/InitImage.css
@ -0,0 +1,20 @@
+.checkerboard {
+    background-position: 0px 0px, 10px 10px;
+    background-size: 20px 20px;
+    background-image: linear-gradient(
+            45deg,
+            #eee 25%,
+            transparent 25%,
+            transparent 75%,
+            #eee 75%,
+            #eee 100%
+        ),
+        linear-gradient(
+            45deg,
+            #eee 25%,
+            white 25%,
+            white 75%,
+            #eee 75%,
+            #eee 100%
+        );
+}
--- a/frontend/src/features/sd/InitImage.tsx
+++ b/frontend/src/features/sd/InitImage.tsx
@ -0,0 +1,155 @@
+import {
+  Button,
+  Flex,
+  IconButton,
+  Image,
+  useToast,
+} from '@chakra-ui/react';
+import { SyntheticEvent, useCallback, useState } from 'react';
+import { FileRejection, useDropzone } from 'react-dropzone';
+import { FaTrash } from 'react-icons/fa';
+import { useAppDispatch, useAppSelector } from '../../app/hooks';
+import { RootState } from '../../app/store';
+import {
+  SDState,
+  setInitialImagePath,
+  setMaskPath,
+} from '../../features/sd/sdSlice';
+import MaskUploader from './MaskUploader';
+import './InitImage.css';
+import { uploadInitialImage } from '../../app/socketio';
+import { createSelector } from '@reduxjs/toolkit';
+import { isEqual } from 'lodash';
+
+const sdSelector = createSelector(
+  (state: RootState) => state.sd,
+  (sd: SDState) => {
+    return {
+      initialImagePath: sd.initialImagePath,
+      maskPath: sd.maskPath,
+    };
+  },
+  { memoizeOptions: { resultEqualityCheck: isEqual } }
+);
+
+const InitImage = () => {
+  const toast = useToast();
+  const dispatch = useAppDispatch();
+  const { initialImagePath, maskPath } = useAppSelector(sdSelector);
+
+  const onDrop = useCallback(
+    (acceptedFiles: Array<File>, fileRejections: Array<FileRejection>) => {
+      fileRejections.forEach((rejection: FileRejection) => {
+        const msg = rejection.errors.reduce(
+          (acc: string, cur: { message: string }) => acc + '\n' + cur.message,
+          ''
+        );
+
+        toast({
+          title: 'Upload failed',
+          description: msg,
+          status: 'error',
+          isClosable: true,
+        });
+      });
+
+      acceptedFiles.forEach((file: File) => {
+        dispatch(uploadInitialImage(file));
+      });
+    },
+    [dispatch, toast]
+  );
+
+  const { getRootProps, getInputProps, open } = useDropzone({
+    onDrop,
+    accept: {
+      'image/jpeg': ['.jpg', '.jpeg', '.png'],
+    },
+  });
+
+  const [shouldShowMask, setShouldShowMask] = useState<boolean>(false);
+  const handleClickUploadIcon = (e: SyntheticEvent) => {
+    e.stopPropagation();
+    open();
+  };
+  const handleClickResetInitialImageAndMask = (e: SyntheticEvent) => {
+    e.stopPropagation();
+    dispatch(setInitialImagePath(''));
+    dispatch(setMaskPath(''));
+  };
+
+  const handleMouseOverInitialImageUploadButton = () =>
+    setShouldShowMask(false);
+  const handleMouseOutInitialImageUploadButton = () => setShouldShowMask(true);
+
+  const handleMouseOverMaskUploadButton = () => setShouldShowMask(true);
+  const handleMouseOutMaskUploadButton = () => setShouldShowMask(true);
+
+  return (
+    <Flex
+      {...getRootProps({
+        onClick: initialImagePath ? (e) => e.stopPropagation() : undefined,
+      })}
+      direction={'column'}
+      alignItems={'center'}
+      gap={2}
+    >
+      <input {...getInputProps({ multiple: false })} />
+      <Flex gap={2} justifyContent={'space-between'} width={'100%'}>
+        <Button
+          size={'sm'}
+          fontSize={'md'}
+          fontWeight={'normal'}
+          onClick={handleClickUploadIcon}
+          onMouseOver={handleMouseOverInitialImageUploadButton}
+          onMouseOut={handleMouseOutInitialImageUploadButton}
+        >
+          Upload Image
+        </Button>
+
+        <MaskUploader>
+          <Button
+            size={'sm'}
+            fontSize={'md'}
+            fontWeight={'normal'}
+            onClick={handleClickUploadIcon}
+            onMouseOver={handleMouseOverMaskUploadButton}
+            onMouseOut={handleMouseOutMaskUploadButton}
+          >
+            Upload Mask
+          </Button>
+        </MaskUploader>
+        <IconButton
+          size={'sm'}
+          aria-label={'Reset initial image and mask'}
+          onClick={handleClickResetInitialImageAndMask}
+          icon={<FaTrash />}
+        />
+      </Flex>
+      {initialImagePath && (
+        <Flex position={'relative'} width={'100%'}>
+          <Image
+            fit={'contain'}
+            src={initialImagePath}
+            rounded={'md'}
+            className={'checkerboard'}
+          />
+          {shouldShowMask && maskPath && (
+            <Image
+              position={'absolute'}
+              top={0}
+              left={0}
+              fit={'contain'}
+              src={maskPath}
+              rounded={'md'}
+              zIndex={1}
+              className={'checkerboard'}
+            />
+          )}
+        </Flex>
+      )}
+    </Flex>
+  );
+};
+
+export default InitImage;
--- a/frontend/src/features/sd/MaskUploader.tsx
+++ b/frontend/src/features/sd/MaskUploader.tsx
@ -0,0 +1,61 @@
+import { useToast } from '@chakra-ui/react';
+import { cloneElement, ReactElement, SyntheticEvent, useCallback } from 'react';
+import { FileRejection, useDropzone } from 'react-dropzone';
+import { useAppDispatch } from '../../app/hooks';
+import { uploadMaskImage } from '../../app/socketio';
+
+type Props = {
+    children: ReactElement;
+};
+
+const MaskUploader = ({ children }: Props) => {
+    const dispatch = useAppDispatch();
+    const toast = useToast();
+
+    const onDrop = useCallback(
+        (acceptedFiles: Array<File>, fileRejections: Array<FileRejection>) => {
+            fileRejections.forEach((rejection: FileRejection) => {
+                const msg = rejection.errors.reduce(
+                    (acc: string, cur: { message: string }) =>
+                        acc + '\n' + cur.message,
+                    ''
+                );
+
+                toast({
+                    title: 'Upload failed',
+                    description: msg,
+                    status: 'error',
+                    isClosable: true,
+                });
+            });
+
+            acceptedFiles.forEach((file: File) => {
+                dispatch(uploadMaskImage(file));
+            });
+        },
+        [dispatch, toast]
+    );
+
+    const { getRootProps, getInputProps, open } = useDropzone({
+        onDrop,
+        accept: {
+            'image/jpeg': ['.jpg', '.jpeg', '.png'],
+        },
+    });
+
+    const handleClickUploadIcon = (e: SyntheticEvent) => {
+        e.stopPropagation();
+        open();
+    };
+
+    return (
+        <div {...getRootProps()}>
+            <input {...getInputProps({ multiple: false })} />
+            {cloneElement(children, {
+                onClick: handleClickUploadIcon,
+            })}
+        </div>
+    );
+};
+
+export default MaskUploader;
--- a/frontend/src/features/sd/OptionsAccordion.tsx
+++ b/frontend/src/features/sd/OptionsAccordion.tsx
@ -0,0 +1,211 @@
+import {
+    Flex,
+    Box,
+    Text,
+    Accordion,
+    AccordionItem,
+    AccordionButton,
+    AccordionIcon,
+    AccordionPanel,
+    Switch,
+} from '@chakra-ui/react';
+
+import { RootState } from '../../app/store';
+import { useAppDispatch, useAppSelector } from '../../app/hooks';
+
+import {
+    setShouldRunGFPGAN,
+    setShouldRunESRGAN,
+    SDState,
+    setShouldUseInitImage,
+} from '../sd/sdSlice';
+import { createSelector } from '@reduxjs/toolkit';
+import { isEqual } from 'lodash';
+import { setOpenAccordions, SystemState } from '../system/systemSlice';
+import SeedVariationOptions from './SeedVariationOptions';
+import SamplerOptions from './SamplerOptions';
+import ESRGANOptions from './ESRGANOptions';
+import GFPGANOptions from './GFPGANOptions';
+import OutputOptions from './OutputOptions';
+import ImageToImageOptions from './ImageToImageOptions';
+
+const sdSelector = createSelector(
+    (state: RootState) => state.sd,
+    (sd: SDState) => {
+        return {
+            initialImagePath: sd.initialImagePath,
+            shouldUseInitImage: sd.shouldUseInitImage,
+            shouldRunESRGAN: sd.shouldRunESRGAN,
+            shouldRunGFPGAN: sd.shouldRunGFPGAN,
+        };
+    },
+    {
+        memoizeOptions: {
+            resultEqualityCheck: isEqual,
+        },
+    }
+);
+
+const systemSelector = createSelector(
+    (state: RootState) => state.system,
+    (system: SystemState) => {
+        return {
+            isGFPGANAvailable: system.isGFPGANAvailable,
+            isESRGANAvailable: system.isESRGANAvailable,
+            openAccordions: system.openAccordions,
+        };
+    },
+    {
+        memoizeOptions: {
+            resultEqualityCheck: isEqual,
+        },
+    }
+);
+
+const OptionsAccordion = () => {
+    const {
+        shouldRunESRGAN,
+        shouldRunGFPGAN,
+        shouldUseInitImage,
+        initialImagePath,
+    } = useAppSelector(sdSelector);
+
+    const { isGFPGANAvailable, isESRGANAvailable, openAccordions } =
+        useAppSelector(systemSelector);
+
+    const dispatch = useAppDispatch();
+
+    return (
+        <Accordion
+            defaultIndex={openAccordions}
+            allowMultiple
+            reduceMotion
+            onChange={(openAccordions) =>
+                dispatch(setOpenAccordions(openAccordions))
+            }
+        >
+            <AccordionItem>
+                <h2>
+                    <AccordionButton>
+                        <Box flex='1' textAlign='left'>
+                            Seed & Variation
+                        </Box>
+                        <AccordionIcon />
+                    </AccordionButton>
+                </h2>
+                <AccordionPanel>
+                    <SeedVariationOptions />
+                </AccordionPanel>
+            </AccordionItem>
+            <AccordionItem>
+                <h2>
+                    <AccordionButton>
+                        <Box flex='1' textAlign='left'>
+                            Sampler
+                        </Box>
+                        <AccordionIcon />
+                    </AccordionButton>
+                </h2>
+                <AccordionPanel>
+                    <SamplerOptions />
+                </AccordionPanel>
+            </AccordionItem>
+            <AccordionItem>
+                <h2>
+                    <AccordionButton>
+                        <Flex
+                            justifyContent={'space-between'}
+                            alignItems={'center'}
+                            width={'100%'}
+                            mr={2}
+                        >
+                            <Text>Upscale (ESRGAN)</Text>
+                            <Switch
+                                isDisabled={!isESRGANAvailable}
+                                isChecked={shouldRunESRGAN}
+                                onChange={(e) =>
+                                    dispatch(
+                                        setShouldRunESRGAN(e.target.checked)
+                                    )
+                                }
+                            />
+                        </Flex>
+                        <AccordionIcon />
+                    </AccordionButton>
+                </h2>
+                <AccordionPanel>
+                    <ESRGANOptions />
+                </AccordionPanel>
+            </AccordionItem>
+            <AccordionItem>
+                <h2>
+                    <AccordionButton>
+                        <Flex
+                            justifyContent={'space-between'}
+                            alignItems={'center'}
+                            width={'100%'}
+                            mr={2}
+                        >
+                            <Text>Fix Faces (GFPGAN)</Text>
+                            <Switch
+                                isDisabled={!isGFPGANAvailable}
+                                isChecked={shouldRunGFPGAN}
+                                onChange={(e) =>
+                                    dispatch(
+                                        setShouldRunGFPGAN(e.target.checked)
+                                    )
+                                }
+                            />
+                        </Flex>
+                        <AccordionIcon />
+                    </AccordionButton>
+                </h2>
+                <AccordionPanel>
+                    <GFPGANOptions />
+                </AccordionPanel>
+            </AccordionItem>
+            <AccordionItem>
+                <h2>
+                    <AccordionButton>
+                        <Flex
+                            justifyContent={'space-between'}
+                            alignItems={'center'}
+                            width={'100%'}
+                            mr={2}
+                        >
+                            <Text>Image to Image</Text>
+                            <Switch
+                                isDisabled={!initialImagePath}
+                                isChecked={shouldUseInitImage}
+                                onChange={(e) =>
+                                    dispatch(
+                                        setShouldUseInitImage(e.target.checked)
+                                    )
+                                }
+                            />
+                        </Flex>
+                        <AccordionIcon />
+                    </AccordionButton>
+                </h2>
+                <AccordionPanel>
+                    <ImageToImageOptions />
+                </AccordionPanel>
+            </AccordionItem>
+            <AccordionItem>
+                <h2>
+                    <AccordionButton>
+                        <Box flex='1' textAlign='left'>
+                            Output
+                        </Box>
+                        <AccordionIcon />
+                    </AccordionButton>
+                </h2>
+                <AccordionPanel>
+                    <OutputOptions />
+                </AccordionPanel>
+            </AccordionItem>
+        </Accordion>
+    );
+};
+
+export default OptionsAccordion;
--- a/frontend/src/features/sd/OutputOptions.tsx
+++ b/frontend/src/features/sd/OutputOptions.tsx
@ -0,0 +1,66 @@
+import { Flex } from '@chakra-ui/react';
+
+import { RootState } from '../../app/store';
+import { useAppDispatch, useAppSelector } from '../../app/hooks';
+
+import { setHeight, setWidth, setSeamless, SDState } from '../sd/sdSlice';
+
+import SDSelect from '../../components/SDSelect';
+
+import { HEIGHTS, WIDTHS } from '../../app/constants';
+import SDSwitch from '../../components/SDSwitch';
+import { createSelector } from '@reduxjs/toolkit';
+import { isEqual } from 'lodash';
+
+const sdSelector = createSelector(
+    (state: RootState) => state.sd,
+    (sd: SDState) => {
+        return {
+            height: sd.height,
+            width: sd.width,
+            seamless: sd.seamless,
+        };
+    },
+    {
+        memoizeOptions: {
+            resultEqualityCheck: isEqual,
+        },
+    }
+);
+
+const OutputOptions = () => {
+    const { height, width, seamless } = useAppSelector(sdSelector);
+
+    const dispatch = useAppDispatch();
+
+    return (
+        <Flex gap={2} direction={'column'}>
+            <Flex gap={2}>
+                <SDSelect
+                    label='Width'
+                    value={width}
+                    flexGrow={1}
+                    onChange={(e) => dispatch(setWidth(Number(e.target.value)))}
+                    validValues={WIDTHS}
+                />
+                <SDSelect
+                    label='Height'
+                    value={height}
+                    flexGrow={1}
+                    onChange={(e) =>
+                        dispatch(setHeight(Number(e.target.value)))
+                    }
+                    validValues={HEIGHTS}
+                />
+            </Flex>
+            <SDSwitch
+                label='Seamless tiling'
+                fontSize={'md'}
+                isChecked={seamless}
+                onChange={(e) => dispatch(setSeamless(e.target.checked))}
+            />
+        </Flex>
+    );
+};
+
+export default OutputOptions;
--- a/frontend/src/features/sd/ProcessButtons.tsx
+++ b/frontend/src/features/sd/ProcessButtons.tsx
@ -0,0 +1,58 @@
+import { Flex } from '@chakra-ui/react';
+import { createSelector } from '@reduxjs/toolkit';
+import { isEqual } from 'lodash';
+import { useAppDispatch, useAppSelector } from '../../app/hooks';
+import { cancelProcessing, generateImage } from '../../app/socketio';
+import { RootState } from '../../app/store';
+import SDButton from '../../components/SDButton';
+import { SystemState } from '../system/systemSlice';
+import useCheckParameters from '../system/useCheckParameters';
+
+const systemSelector = createSelector(
+    (state: RootState) => state.system,
+    (system: SystemState) => {
+        return {
+            isProcessing: system.isProcessing,
+            isConnected: system.isConnected,
+        };
+    },
+    {
+        memoizeOptions: {
+            resultEqualityCheck: isEqual,
+        },
+    }
+);
+
+const ProcessButtons = () => {
+    const { isProcessing, isConnected } = useAppSelector(systemSelector);
+
+    const dispatch = useAppDispatch();
+
+    const isReady = useCheckParameters();
+
+    return (
+        <Flex gap={2} direction={'column'} alignItems={'space-between'} height={'100%'}>
+            <SDButton
+                label='Generate'
+                type='submit'
+                colorScheme='green'
+                flexGrow={1}
+                isDisabled={!isReady}
+                fontSize={'md'}
+                size={'md'}
+                onClick={() => dispatch(generateImage())}
+            />
+            <SDButton
+                label='Cancel'
+                colorScheme='red'
+                flexGrow={1}
+                fontSize={'md'}
+                size={'md'}
+                isDisabled={!isConnected || !isProcessing}
+                onClick={() => dispatch(cancelProcessing())}
+            />
+        </Flex>
+    );
+};
+
+export default ProcessButtons;
--- a/frontend/src/features/sd/PromptInput.tsx
+++ b/frontend/src/features/sd/PromptInput.tsx
@ -0,0 +1,25 @@
+import { Textarea } from '@chakra-ui/react';
+import { useAppDispatch, useAppSelector } from '../../app/hooks';
+import { RootState } from '../../app/store';
+import { setPrompt } from '../sd/sdSlice';
+
+const PromptInput = () => {
+  const { prompt } = useAppSelector((state: RootState) => state.sd);
+  const dispatch = useAppDispatch();
+
+  return (
+    <Textarea
+      id='prompt'
+      name='prompt'
+      resize='none'
+      size={'lg'}
+      height={'100%'}
+      isInvalid={!prompt.length}
+      onChange={(e) => dispatch(setPrompt(e.target.value))}
+      value={prompt}
+      placeholder="I'm dreaming of..."
+    />
+  );
+};
+
+export default PromptInput;
--- a/frontend/src/features/sd/SDSlider.tsx
+++ b/frontend/src/features/sd/SDSlider.tsx
@ -0,0 +1,51 @@
+import {
+    Slider,
+    SliderTrack,
+    SliderFilledTrack,
+    SliderThumb,
+    FormControl,
+    FormLabel,
+    Text,
+    Flex,
+    SliderProps,
+} from '@chakra-ui/react';
+
+interface Props extends SliderProps {
+    label: string;
+    value: number;
+    fontSize?: number | string;
+}
+
+const SDSlider = ({
+    label,
+    value,
+    fontSize = 'sm',
+    onChange,
+    ...rest
+}: Props) => {
+    return (
+        <FormControl>
+            <Flex gap={2}>
+                <FormLabel marginInlineEnd={0} marginBottom={1}>
+                    <Text fontSize={fontSize} whiteSpace='nowrap'>
+                        {label}
+                    </Text>
+                </FormLabel>
+                <Slider
+                    aria-label={label}
+                    focusThumbOnChange={true}
+                    value={value}
+                    onChange={onChange}
+                    {...rest}
+                >
+                    <SliderTrack>
+                        <SliderFilledTrack />
+                    </SliderTrack>
+                    <SliderThumb />
+                </Slider>
+            </Flex>
+        </FormControl>
+    );
+};
+
+export default SDSlider;
--- a/frontend/src/features/sd/SamplerOptions.tsx
+++ b/frontend/src/features/sd/SamplerOptions.tsx
@ -0,0 +1,62 @@
+import { Flex } from '@chakra-ui/react';
+
+import { RootState } from '../../app/store';
+import { useAppDispatch, useAppSelector } from '../../app/hooks';
+
+import { setCfgScale, setSampler, setSteps, SDState } from '../sd/sdSlice';
+
+import SDNumberInput from '../../components/SDNumberInput';
+import SDSelect from '../../components/SDSelect';
+
+import { SAMPLERS } from '../../app/constants';
+import { createSelector } from '@reduxjs/toolkit';
+import { isEqual } from 'lodash';
+
+const sdSelector = createSelector(
+    (state: RootState) => state.sd,
+    (sd: SDState) => {
+        return {
+            steps: sd.steps,
+            cfgScale: sd.cfgScale,
+            sampler: sd.sampler,
+        };
+    },
+    {
+        memoizeOptions: {
+            resultEqualityCheck: isEqual,
+        },
+    }
+);
+
+const SamplerOptions = () => {
+    const { steps, cfgScale, sampler } = useAppSelector(sdSelector);
+
+    const dispatch = useAppDispatch();
+
+    return (
+        <Flex gap={2} direction={'column'}>
+            <SDNumberInput
+                label='Steps'
+                min={1}
+                step={1}
+                precision={0}
+                onChange={(v) => dispatch(setSteps(Number(v)))}
+                value={steps}
+            />
+            <SDNumberInput
+                label='CFG scale'
+                step={0.5}
+                onChange={(v) => dispatch(setCfgScale(Number(v)))}
+                value={cfgScale}
+            />
+            <SDSelect
+                label='Sampler'
+                value={sampler}
+                onChange={(e) => dispatch(setSampler(e.target.value))}
+                validValues={SAMPLERS}
+            />
+        </Flex>
+    );
+};
+
+export default SamplerOptions;
--- a/frontend/src/features/sd/SeedVariationOptions.tsx
+++ b/frontend/src/features/sd/SeedVariationOptions.tsx
@ -0,0 +1,144 @@
+import {
+    Flex,
+    Input,
+    HStack,
+    FormControl,
+    FormLabel,
+    Text,
+    Button,
+} from '@chakra-ui/react';
+import { createSelector } from '@reduxjs/toolkit';
+import { isEqual } from 'lodash';
+import { NUMPY_RAND_MAX, NUMPY_RAND_MIN } from '../../app/constants';
+import { useAppDispatch, useAppSelector } from '../../app/hooks';
+import { RootState } from '../../app/store';
+import SDNumberInput from '../../components/SDNumberInput';
+import SDSwitch from '../../components/SDSwitch';
+import {
+    randomizeSeed,
+    SDState,
+    setIterations,
+    setSeed,
+    setSeedWeights,
+    setShouldGenerateVariations,
+    setShouldRandomizeSeed,
+    setVariantAmount,
+} from './sdSlice';
+import { validateSeedWeights } from './util/seedWeightPairs';
+
+const sdSelector = createSelector(
+    (state: RootState) => state.sd,
+    (sd: SDState) => {
+        return {
+            variantAmount: sd.variantAmount,
+            seedWeights: sd.seedWeights,
+            shouldGenerateVariations: sd.shouldGenerateVariations,
+            shouldRandomizeSeed: sd.shouldRandomizeSeed,
+            seed: sd.seed,
+            iterations: sd.iterations,
+        };
+    },
+    {
+        memoizeOptions: {
+            resultEqualityCheck: isEqual,
+        },
+    }
+);
+
+const SeedVariationOptions = () => {
+    const {
+        shouldGenerateVariations,
+        variantAmount,
+        seedWeights,
+        shouldRandomizeSeed,
+        seed,
+        iterations,
+    } = useAppSelector(sdSelector);
+
+    const dispatch = useAppDispatch();
+
+    return (
+        <Flex gap={2} direction={'column'}>
+            <SDNumberInput
+                label='Images to generate'
+                step={1}
+                min={1}
+                precision={0}
+                onChange={(v) => dispatch(setIterations(Number(v)))}
+                value={iterations}
+            />
+            <SDSwitch
+                label='Randomize seed on generation'
+                isChecked={shouldRandomizeSeed}
+                onChange={(e) =>
+                    dispatch(setShouldRandomizeSeed(e.target.checked))
+                }
+            />
+            <Flex gap={2}>
+                <SDNumberInput
+                    label='Seed'
+                    step={1}
+                    precision={0}
+                    flexGrow={1}
+                    min={NUMPY_RAND_MIN}
+                    max={NUMPY_RAND_MAX}
+                    isDisabled={shouldRandomizeSeed}
+                    isInvalid={seed < 0 && shouldGenerateVariations}
+                    onChange={(v) => dispatch(setSeed(Number(v)))}
+                    value={seed}
+                />
+                <Button
+                    size={'sm'}
+                    isDisabled={shouldRandomizeSeed}
+                    onClick={() => dispatch(randomizeSeed())}
+                >
+                    <Text pl={2} pr={2}>
+                        Shuffle
+                    </Text>
+                </Button>
+            </Flex>
+            <SDSwitch
+                label='Generate variations'
+                isChecked={shouldGenerateVariations}
+                width={'auto'}
+                onChange={(e) =>
+                    dispatch(setShouldGenerateVariations(e.target.checked))
+                }
+            />
+            <SDNumberInput
+                label='Variation amount'
+                value={variantAmount}
+                step={0.01}
+                min={0}
+                max={1}
+                isDisabled={!shouldGenerateVariations}
+                onChange={(v) => dispatch(setVariantAmount(Number(v)))}
+            />
+            <FormControl
+                isInvalid={
+                    shouldGenerateVariations &&
+                    !(validateSeedWeights(seedWeights) || seedWeights === '')
+                }
+                flexGrow={1}
+                isDisabled={!shouldGenerateVariations}
+            >
+                <HStack>
+                    <FormLabel marginInlineEnd={0} marginBottom={1}>
+                        <Text whiteSpace='nowrap'>
+                            Seed Weights
+                        </Text>
+                    </FormLabel>
+                    <Input
+                        size={'sm'}
+                        value={seedWeights}
+                        onChange={(e) =>
+                            dispatch(setSeedWeights(e.target.value))
+                        }
+                    />
+                </HStack>
+            </FormControl>
+        </Flex>
+    );
+};
+
+export default SeedVariationOptions;
--- a/frontend/src/features/sd/Variant.tsx
+++ b/frontend/src/features/sd/Variant.tsx
@ -0,0 +1,92 @@
+import {
+    Flex,
+    FormControl,
+    FormLabel,
+    HStack,
+    Input,
+    Text,
+} from '@chakra-ui/react';
+import { createSelector } from '@reduxjs/toolkit';
+import { isEqual } from 'lodash';
+import { useAppDispatch, useAppSelector } from '../../app/hooks';
+import { RootState } from '../../app/store';
+import SDNumberInput from '../../components/SDNumberInput';
+import SDSwitch from '../../components/SDSwitch';
+import {
+    SDState,
+    setSeedWeights,
+    setShouldGenerateVariations,
+    setVariantAmount,
+} from './sdSlice';
+import { validateSeedWeights } from './util/seedWeightPairs';
+
+const sdSelector = createSelector(
+    (state: RootState) => state.sd,
+    (sd: SDState) => {
+        return {
+            variantAmount: sd.variantAmount,
+            seedWeights: sd.seedWeights,
+            shouldGenerateVariations: sd.shouldGenerateVariations,
+        };
+    },
+    {
+        memoizeOptions: {
+            resultEqualityCheck: isEqual,
+        },
+    }
+);
+
+const Variant = () => {
+    const { shouldGenerateVariations, variantAmount, seedWeights } =
+        useAppSelector(sdSelector);
+
+    const dispatch = useAppDispatch();
+
+    return (
+        <Flex gap={2} alignItems={'center'} pl={1}>
+            <SDSwitch
+                label='Generate variations'
+                isChecked={shouldGenerateVariations}
+                width={'auto'}
+                onChange={(e) =>
+                    dispatch(setShouldGenerateVariations(e.target.checked))
+                }
+            />
+            <SDNumberInput
+                label='Amount'
+                value={variantAmount}
+                step={0.01}
+                min={0}
+                max={1}
+                width={240}
+                isDisabled={!shouldGenerateVariations}
+                onChange={(v) => dispatch(setVariantAmount(Number(v)))}
+            />
+            <FormControl
+                isInvalid={
+                    shouldGenerateVariations &&
+                    !(validateSeedWeights(seedWeights) || seedWeights === '')
+                }
+                flexGrow={1}
+                isDisabled={!shouldGenerateVariations}
+            >
+                <HStack>
+                    <FormLabel marginInlineEnd={0} marginBottom={1}>
+                        <Text fontSize={'sm'} whiteSpace='nowrap'>
+                            Seed Weights
+                        </Text>
+                    </FormLabel>
+                    <Input
+                        size={'sm'}
+                        value={seedWeights}
+                        onChange={(e) =>
+                            dispatch(setSeedWeights(e.target.value))
+                        }
+                    />
+                </HStack>
+            </FormControl>
+        </Flex>
+    );
+};
+
+export default Variant;
--- a/frontend/src/features/sd/sdSlice.ts
+++ b/frontend/src/features/sd/sdSlice.ts
@ -0,0 +1,283 @@
+import { createSlice } from '@reduxjs/toolkit';
+import type { PayloadAction } from '@reduxjs/toolkit';
+import { SDMetadata } from '../gallery/gallerySlice';
+import randomInt from './util/randomInt';
+import { NUMPY_RAND_MAX, NUMPY_RAND_MIN } from '../../app/constants';
+
+const calculateRealSteps = (
+  steps: number,
+  strength: number,
+  hasInitImage: boolean
+): number => {
+  return hasInitImage ? Math.floor(strength * steps) : steps;
+};
+
+export type UpscalingLevel = 0 | 2 | 3 | 4;
+
+export interface SDState {
+  prompt: string;
+  iterations: number;
+  steps: number;
+  realSteps: number;
+  cfgScale: number;
+  height: number;
+  width: number;
+  sampler: string;
+  seed: number;
+  img2imgStrength: number;
+  gfpganStrength: number;
+  upscalingLevel: UpscalingLevel;
+  upscalingStrength: number;
+  shouldUseInitImage: boolean;
+  initialImagePath: string;
+  maskPath: string;
+  seamless: boolean;
+  shouldFitToWidthHeight: boolean;
+  shouldGenerateVariations: boolean;
+  variantAmount: number;
+  seedWeights: string;
+  shouldRunESRGAN: boolean;
+  shouldRunGFPGAN: boolean;
+  shouldRandomizeSeed: boolean;
+}
+
+const initialSDState: SDState = {
+  prompt: '',
+  iterations: 1,
+  steps: 50,
+  realSteps: 50,
+  cfgScale: 7.5,
+  height: 512,
+  width: 512,
+  sampler: 'k_lms',
+  seed: 0,
+  seamless: false,
+  shouldUseInitImage: false,
+  img2imgStrength: 0.75,
+  initialImagePath: '',
+  maskPath: '',
+  shouldFitToWidthHeight: true,
+  shouldGenerateVariations: false,
+  variantAmount: 0.1,
+  seedWeights: '',
+  shouldRunESRGAN: false,
+  upscalingLevel: 4,
+  upscalingStrength: 0.75,
+  shouldRunGFPGAN: false,
+  gfpganStrength: 0.8,
+  shouldRandomizeSeed: true,
+};
+
+const initialState: SDState = initialSDState;
+
+export const sdSlice = createSlice({
+  name: 'sd',
+  initialState,
+  reducers: {
+    setPrompt: (state, action: PayloadAction<string>) => {
+      state.prompt = action.payload;
+    },
+    setIterations: (state, action: PayloadAction<number>) => {
+      state.iterations = action.payload;
+    },
+    setSteps: (state, action: PayloadAction<number>) => {
+      const { img2imgStrength, initialImagePath } = state;
+      const steps = action.payload;
+      state.steps = steps;
+      state.realSteps = calculateRealSteps(
+        steps,
+        img2imgStrength,
+        Boolean(initialImagePath)
+      );
+    },
+    setCfgScale: (state, action: PayloadAction<number>) => {
+      state.cfgScale = action.payload;
+    },
+    setHeight: (state, action: PayloadAction<number>) => {
+      state.height = action.payload;
+    },
+    setWidth: (state, action: PayloadAction<number>) => {
+      state.width = action.payload;
+    },
+    setSampler: (state, action: PayloadAction<string>) => {
+      state.sampler = action.payload;
+    },
+    setSeed: (state, action: PayloadAction<number>) => {
+      state.seed = action.payload;
+      state.shouldRandomizeSeed = false;
+    },
+    setImg2imgStrength: (state, action: PayloadAction<number>) => {
+      const img2imgStrength = action.payload;
+      const { steps, initialImagePath } = state;
+      state.img2imgStrength = img2imgStrength;
+      state.realSteps = calculateRealSteps(
+        steps,
+        img2imgStrength,
+        Boolean(initialImagePath)
+      );
+    },
+    setGfpganStrength: (state, action: PayloadAction<number>) => {
+      state.gfpganStrength = action.payload;
+    },
+    setUpscalingLevel: (state, action: PayloadAction<UpscalingLevel>) => {
+      state.upscalingLevel = action.payload;
+    },
+    setUpscalingStrength: (state, action: PayloadAction<number>) => {
+      state.upscalingStrength = action.payload;
+    },
+    setShouldUseInitImage: (state, action: PayloadAction<boolean>) => {
+      state.shouldUseInitImage = action.payload;
+    },
+    setInitialImagePath: (state, action: PayloadAction<string>) => {
+      const initialImagePath = action.payload;
+      const { steps, img2imgStrength } = state;
+      state.shouldUseInitImage = initialImagePath ? true : false;
+      state.initialImagePath = initialImagePath;
+      state.realSteps = calculateRealSteps(
+        steps,
+        img2imgStrength,
+        Boolean(initialImagePath)
+      );
+    },
+    setMaskPath: (state, action: PayloadAction<string>) => {
+      state.maskPath = action.payload;
+    },
+    setSeamless: (state, action: PayloadAction<boolean>) => {
+      state.seamless = action.payload;
+    },
+    setShouldFitToWidthHeight: (state, action: PayloadAction<boolean>) => {
+      state.shouldFitToWidthHeight = action.payload;
+    },
+    resetSeed: (state) => {
+      state.seed = -1;
+    },
+    randomizeSeed: (state) => {
+      state.seed = randomInt(NUMPY_RAND_MIN, NUMPY_RAND_MAX);
+    },
+    setParameter: (
+      state,
+      action: PayloadAction<{ key: string; value: string | number | boolean }>
+    ) => {
+      const { key, value } = action.payload;
+      const temp = { ...state, [key]: value };
+      if (key === 'seed') {
+        temp.shouldRandomizeSeed = false;
+      }
+      if (key === 'initialImagePath' && value === '') {
+        temp.shouldUseInitImage = false;
+      }
+      return temp;
+    },
+    setShouldGenerateVariations: (state, action: PayloadAction<boolean>) => {
+      state.shouldGenerateVariations = action.payload;
+    },
+    setVariantAmount: (state, action: PayloadAction<number>) => {
+      state.variantAmount = action.payload;
+    },
+    setSeedWeights: (state, action: PayloadAction<string>) => {
+      state.seedWeights = action.payload;
+    },
+    setAllParameters: (state, action: PayloadAction<SDMetadata>) => {
+      const {
+        prompt,
+        steps,
+        cfgScale,
+        height,
+        width,
+        sampler,
+        seed,
+        img2imgStrength,
+        gfpganStrength,
+        upscalingLevel,
+        upscalingStrength,
+        initialImagePath,
+        maskPath,
+        seamless,
+        shouldFitToWidthHeight,
+      } = action.payload;
+
+      // ?? = falsy values ('', 0, etc) are used
+      // || = falsy values not used
+      state.prompt = prompt ?? state.prompt;
+      state.steps = steps || state.steps;
+      state.cfgScale = cfgScale || state.cfgScale;
+      state.width = width || state.width;
+      state.height = height || state.height;
+      state.sampler = sampler || state.sampler;
+      state.seed = seed ?? state.seed;
+      state.seamless = seamless ?? state.seamless;
+      state.shouldFitToWidthHeight =
+        shouldFitToWidthHeight ?? state.shouldFitToWidthHeight;
+      state.img2imgStrength = img2imgStrength ?? state.img2imgStrength;
+      state.gfpganStrength = gfpganStrength ?? state.gfpganStrength;
+      state.upscalingLevel = upscalingLevel ?? state.upscalingLevel;
+      state.upscalingStrength = upscalingStrength ?? state.upscalingStrength;
+      state.initialImagePath = initialImagePath ?? state.initialImagePath;
+      state.maskPath = maskPath ?? state.maskPath;
+
+      // If the image whose parameters we are using has a seed, disable randomizing the seed
+      if (seed) {
+        state.shouldRandomizeSeed = false;
+      }
+
+      // if we have a gfpgan strength, enable it
+      state.shouldRunGFPGAN = gfpganStrength ? true : false;
+
+      // if we have a esrgan strength, enable it
+      state.shouldRunESRGAN = upscalingLevel ? true : false;
+
+      // if we want to recreate an image exactly, we disable variations
+      state.shouldGenerateVariations = false;
+
+      state.shouldUseInitImage = initialImagePath ? true : false;
+    },
+    resetSDState: (state) => {
+      return {
+        ...state,
+        ...initialSDState,
+      };
+    },
+    setShouldRunGFPGAN: (state, action: PayloadAction<boolean>) => {
+      state.shouldRunGFPGAN = action.payload;
+    },
+    setShouldRunESRGAN: (state, action: PayloadAction<boolean>) => {
+      state.shouldRunESRGAN = action.payload;
+    },
+    setShouldRandomizeSeed: (state, action: PayloadAction<boolean>) => {
+      state.shouldRandomizeSeed = action.payload;
+    },
+  },
+});
+
+export const {
+  setPrompt,
+  setIterations,
+  setSteps,
+  setCfgScale,
+  setHeight,
+  setWidth,
+  setSampler,
+  setSeed,
+  setSeamless,
+  setImg2imgStrength,
+  setGfpganStrength,
+  setUpscalingLevel,
+  setUpscalingStrength,
+  setShouldUseInitImage,
+  setInitialImagePath,
+  setMaskPath,
+  resetSeed,
+  randomizeSeed,
+  resetSDState,
+  setShouldFitToWidthHeight,
+  setParameter,
+  setShouldGenerateVariations,
+  setSeedWeights,
+  setVariantAmount,
+  setAllParameters,
+  setShouldRunGFPGAN,
+  setShouldRunESRGAN,
+  setShouldRandomizeSeed,
+} = sdSlice.actions;
+
+export default sdSlice.reducer;
--- a/frontend/src/features/sd/util/randomInt.ts
+++ b/frontend/src/features/sd/util/randomInt.ts
@ -0,0 +1,5 @@
+const randomInt = (min: number, max: number): number => {
+  return Math.floor(Math.random() * (max - min + 1) + min);
+};
+
+export default randomInt;
--- a/frontend/src/features/sd/util/seedWeightPairs.ts
+++ b/frontend/src/features/sd/util/seedWeightPairs.ts
@ -0,0 +1,56 @@
+export interface SeedWeightPair {
+    seed: number;
+    weight: number;
+}
+
+export type SeedWeights = Array<Array<number>>;
+
+export const stringToSeedWeights = (string: string): SeedWeights | boolean => {
+    const stringPairs = string.split(',');
+    const arrPairs = stringPairs.map((p) => p.split(':'));
+    const pairs = arrPairs.map((p) => {
+        return [parseInt(p[0]), parseFloat(p[1])];
+    });
+
+    if (!validateSeedWeights(pairs)) {
+        return false;
+    }
+
+    return pairs;
+};
+
+export const validateSeedWeights = (
+    seedWeights: SeedWeights | string
+): boolean => {
+    return typeof seedWeights === 'string'
+        ? Boolean(stringToSeedWeights(seedWeights))
+        : Boolean(
+              seedWeights.length &&
+                  !seedWeights.some((pair) => {
+                      const [seed, weight] = pair;
+                      const isSeedValid = !isNaN(parseInt(seed.toString(), 10));
+                      const isWeightValid =
+                          !isNaN(parseInt(weight.toString(), 10)) &&
+                          weight >= 0 &&
+                          weight <= 1;
+                      return !(isSeedValid && isWeightValid);
+                  })
+          );
+};
+
+export const seedWeightsToString = (
+    seedWeights: SeedWeights
+): string | boolean => {
+    if (!validateSeedWeights(seedWeights)) {
+        return false;
+    }
+
+    return seedWeights.reduce((acc, pair, i, arr) => {
+        const [seed, weight] = pair;
+        acc += `${seed}:${weight}`;
+        if (i !== arr.length - 1) {
+            acc += ',';
+        }
+        return acc;
+    }, '');
+};
--- a/frontend/src/features/system/LogViewer.tsx
+++ b/frontend/src/features/system/LogViewer.tsx
@ -0,0 +1,125 @@
+import {
+    IconButton,
+    useColorModeValue,
+    Flex,
+    Text,
+    Tooltip,
+} from '@chakra-ui/react';
+import { useAppDispatch, useAppSelector } from '../../app/hooks';
+import { RootState } from '../../app/store';
+import { setShouldShowLogViewer, SystemState } from './systemSlice';
+import { useLayoutEffect, useRef, useState } from 'react';
+import { FaAngleDoubleDown, FaCode, FaMinus } from 'react-icons/fa';
+import { createSelector } from '@reduxjs/toolkit';
+import { isEqual } from 'lodash';
+
+const logSelector = createSelector(
+    (state: RootState) => state.system,
+    (system: SystemState) => system.log,
+    {
+        memoizeOptions: {
+            resultEqualityCheck: (a, b) => a.length === b.length,
+        },
+    }
+);
+
+const systemSelector = createSelector(
+    (state: RootState) => state.system,
+    (system: SystemState) => {
+        return { shouldShowLogViewer: system.shouldShowLogViewer };
+    },
+    {
+        memoizeOptions: {
+            resultEqualityCheck: isEqual,
+        },
+    }
+);
+
+const LogViewer = () => {
+    const dispatch = useAppDispatch();
+    const bg = useColorModeValue('gray.50', 'gray.900');
+    const borderColor = useColorModeValue('gray.500', 'gray.500');
+    const [shouldAutoscroll, setShouldAutoscroll] = useState<boolean>(true);
+
+    const log = useAppSelector(logSelector);
+    const { shouldShowLogViewer } = useAppSelector(systemSelector);
+
+    const viewerRef = useRef<HTMLDivElement>(null);
+
+    useLayoutEffect(() => {
+        if (viewerRef.current !== null && shouldAutoscroll) {
+            viewerRef.current.scrollTop = viewerRef.current.scrollHeight;
+        }
+    });
+
+    return (
+        <>
+            {shouldShowLogViewer && (
+                <Flex
+                    position={'fixed'}
+                    left={0}
+                    bottom={0}
+                    height='200px'
+                    width='100vw'
+                    overflow='auto'
+                    direction='column'
+                    fontFamily='monospace'
+                    fontSize='sm'
+                    pl={12}
+                    pr={2}
+                    pb={2}
+                    borderTopWidth='4px'
+                    borderColor={borderColor}
+                    background={bg}
+                    ref={viewerRef}
+                >
+                    {log.map((entry, i) => (
+                        <Flex gap={2} key={i}>
+                            <Text fontSize='sm' fontWeight={'semibold'}>
+                                {entry.timestamp}:
+                            </Text>
+                            <Text fontSize='sm' wordBreak={'break-all'}>
+                                {entry.message}
+                            </Text>
+                        </Flex>
+                    ))}
+                </Flex>
+            )}
+            {shouldShowLogViewer && (
+                <Tooltip
+                    label={
+                        shouldAutoscroll ? 'Autoscroll on' : 'Autoscroll off'
+                    }
+                >
+                    <IconButton
+                        size='sm'
+                        position={'fixed'}
+                        left={2}
+                        bottom={12}
+                        aria-label='Toggle autoscroll'
+                        variant={'solid'}
+                        colorScheme={shouldAutoscroll ? 'blue' : 'gray'}
+                        icon={<FaAngleDoubleDown />}
+                        onClick={() => setShouldAutoscroll(!shouldAutoscroll)}
+                    />
+                </Tooltip>
+            )}
+            <Tooltip label={shouldShowLogViewer ? 'Hide logs' : 'Show logs'}>
+                <IconButton
+                    size='sm'
+                    position={'fixed'}
+                    left={2}
+                    bottom={2}
+                    variant={'solid'}
+                    aria-label='Toggle Log Viewer'
+                    icon={shouldShowLogViewer ? <FaMinus /> : <FaCode />}
+                    onClick={() =>
+                        dispatch(setShouldShowLogViewer(!shouldShowLogViewer))
+                    }
+                />
+            </Tooltip>
+        </>
+    );
+};
+
+export default LogViewer;
--- a/frontend/src/features/system/SettingsModal.tsx
+++ b/frontend/src/features/system/SettingsModal.tsx
@ -0,0 +1,170 @@
+import {
+    Flex,
+    FormControl,
+    FormLabel,
+    Heading,
+    HStack,
+    Modal,
+    ModalBody,
+    ModalCloseButton,
+    ModalContent,
+    ModalFooter,
+    ModalHeader,
+    ModalOverlay,
+    Switch,
+    Text,
+    useDisclosure,
+} from '@chakra-ui/react';
+import { useAppDispatch, useAppSelector } from '../../app/hooks';
+import {
+    setShouldConfirmOnDelete,
+    setShouldDisplayInProgress,
+    SystemState,
+} from './systemSlice';
+import { RootState } from '../../app/store';
+import SDButton from '../../components/SDButton';
+import { persistor } from '../../main';
+import { createSelector } from '@reduxjs/toolkit';
+import { isEqual } from 'lodash';
+import { cloneElement, ReactElement } from 'react';
+
+const systemSelector = createSelector(
+    (state: RootState) => state.system,
+    (system: SystemState) => {
+        const { shouldDisplayInProgress, shouldConfirmOnDelete } = system;
+        return { shouldDisplayInProgress, shouldConfirmOnDelete };
+    },
+    {
+        memoizeOptions: { resultEqualityCheck: isEqual },
+    }
+);
+
+type Props = {
+    children: ReactElement;
+};
+
+const SettingsModal = ({ children }: Props) => {
+    const {
+        isOpen: isSettingsModalOpen,
+        onOpen: onSettingsModalOpen,
+        onClose: onSettingsModalClose,
+    } = useDisclosure();
+
+    const {
+        isOpen: isRefreshModalOpen,
+        onOpen: onRefreshModalOpen,
+        onClose: onRefreshModalClose,
+    } = useDisclosure();
+
+    const { shouldDisplayInProgress, shouldConfirmOnDelete } =
+        useAppSelector(systemSelector);
+
+    const dispatch = useAppDispatch();
+
+    const handleClickResetWebUI = () => {
+        persistor.purge().then(() => {
+            onSettingsModalClose();
+            onRefreshModalOpen();
+        });
+    };
+
+    return (
+        <>
+            {cloneElement(children, {
+                onClick: onSettingsModalOpen,
+            })}
+
+            <Modal isOpen={isSettingsModalOpen} onClose={onSettingsModalClose}>
+                <ModalOverlay />
+                <ModalContent>
+                    <ModalHeader>Settings</ModalHeader>
+                    <ModalCloseButton />
+                    <ModalBody>
+                        <Flex gap={5} direction='column'>
+                            <FormControl>
+                                <HStack>
+                                    <FormLabel marginBottom={1}>
+                                        Display in-progress images (slower)
+                                    </FormLabel>
+                                    <Switch
+                                        isChecked={shouldDisplayInProgress}
+                                        onChange={(e) =>
+                                            dispatch(
+                                                setShouldDisplayInProgress(
+                                                    e.target.checked
+                                                )
+                                            )
+                                        }
+                                    />
+                                </HStack>
+                            </FormControl>
+                            <FormControl>
+                                <HStack>
+                                    <FormLabel marginBottom={1}>
+                                        Confirm on delete
+                                    </FormLabel>
+                                    <Switch
+                                        isChecked={shouldConfirmOnDelete}
+                                        onChange={(e) =>
+                                            dispatch(
+                                                setShouldConfirmOnDelete(
+                                                    e.target.checked
+                                                )
+                                            )
+                                        }
+                                    />
+                                </HStack>
+                            </FormControl>
+
+                            <Heading size={'md'}>Reset Web UI</Heading>
+                            <Text>
+                                Resetting the web UI only resets the browser's
+                                local cache of your images and remembered
+                                settings. It does not delete any images from
+                                disk.
+                            </Text>
+                            <Text>
+                                If images aren't showing up in the gallery or
+                                something else isn't working, please try
+                                resetting before submitting an issue on GitHub.
+                            </Text>
+                            <SDButton
+                                label='Reset Web UI'
+                                colorScheme='red'
+                                onClick={handleClickResetWebUI}
+                            />
+                        </Flex>
+                    </ModalBody>
+
+                    <ModalFooter>
+                        <SDButton
+                            label='Close'
+                            onClick={onSettingsModalClose}
+                        />
+                    </ModalFooter>
+                </ModalContent>
+            </Modal>
+
+            <Modal
+                closeOnOverlayClick={false}
+                isOpen={isRefreshModalOpen}
+                onClose={onRefreshModalClose}
+                isCentered
+            >
+                <ModalOverlay bg='blackAlpha.300' backdropFilter='blur(40px)' />
+                <ModalContent>
+                    <ModalBody pb={6} pt={6}>
+                        <Flex justifyContent={'center'}>
+                            <Text fontSize={'lg'}>
+                                Web UI has been reset. Refresh the page to
+                                reload.
+                            </Text>
+                        </Flex>
+                    </ModalBody>
+                </ModalContent>
+            </Modal>
+        </>
+    );
+};
+
+export default SettingsModal;
--- a/frontend/src/features/system/systemSlice.ts
+++ b/frontend/src/features/system/systemSlice.ts
@ -0,0 +1,98 @@
+import { createSlice } from '@reduxjs/toolkit';
+import type { PayloadAction } from '@reduxjs/toolkit';
+import dateFormat from 'dateformat';
+import { ExpandedIndex } from '@chakra-ui/react';
+
+export interface LogEntry {
+  timestamp: string;
+  message: string;
+}
+
+export interface Log {
+  [index: number]: LogEntry;
+}
+
+export interface SystemState {
+  shouldDisplayInProgress: boolean;
+  isProcessing: boolean;
+  currentStep: number;
+  log: Array<LogEntry>;
+  shouldShowLogViewer: boolean;
+  isGFPGANAvailable: boolean;
+  isESRGANAvailable: boolean;
+  isConnected: boolean;
+  socketId: string;
+  shouldConfirmOnDelete: boolean;
+  openAccordions: ExpandedIndex;
+}
+
+const initialSystemState = {
+  isConnected: false,
+  isProcessing: false,
+  currentStep: 0,
+  log: [],
+  shouldShowLogViewer: false,
+  shouldDisplayInProgress: false,
+  isGFPGANAvailable: true,
+  isESRGANAvailable: true,
+  socketId: '',
+  shouldConfirmOnDelete: true,
+  openAccordions: [0],
+};
+
+const initialState: SystemState = initialSystemState;
+
+export const systemSlice = createSlice({
+  name: 'system',
+  initialState,
+  reducers: {
+    setShouldDisplayInProgress: (state, action: PayloadAction<boolean>) => {
+      state.shouldDisplayInProgress = action.payload;
+    },
+    setIsProcessing: (state, action: PayloadAction<boolean>) => {
+      state.isProcessing = action.payload;
+      if (action.payload === false) {
+        state.currentStep = 0;
+      }
+    },
+    setCurrentStep: (state, action: PayloadAction<number>) => {
+      state.currentStep = action.payload;
+    },
+    addLogEntry: (state, action: PayloadAction<string>) => {
+      const entry: LogEntry = {
+        timestamp: dateFormat(new Date(), 'isoDateTime'),
+        message: action.payload,
+      };
+      state.log.push(entry);
+    },
+    setShouldShowLogViewer: (state, action: PayloadAction<boolean>) => {
+      state.shouldShowLogViewer = action.payload;
+    },
+    setIsConnected: (state, action: PayloadAction<boolean>) => {
+      state.isConnected = action.payload;
+    },
+    setSocketId: (state, action: PayloadAction<string>) => {
+      state.socketId = action.payload;
+    },
+    setShouldConfirmOnDelete: (state, action: PayloadAction<boolean>) => {
+      state.shouldConfirmOnDelete = action.payload;
+    },
+    setOpenAccordions: (state, action: PayloadAction<ExpandedIndex>) => {
+      state.openAccordions = action.payload;
+    },
+  },
+});
+
+export const {
+  setShouldDisplayInProgress,
+  setIsProcessing,
+  setCurrentStep,
+  addLogEntry,
+  setShouldShowLogViewer,
+  setIsConnected,
+  setSocketId,
+  setShouldConfirmOnDelete,
+  setOpenAccordions,
+} = systemSlice.actions;
+
+export default systemSlice.reducer;
--- a/frontend/src/features/system/useCheckParameters.ts
+++ b/frontend/src/features/system/useCheckParameters.ts
@ -0,0 +1,108 @@
+import { createSelector } from '@reduxjs/toolkit';
+import { isEqual } from 'lodash';
+import { useMemo } from 'react';
+import { useAppSelector } from '../../app/hooks';
+import { RootState } from '../../app/store';
+import { SDState } from '../sd/sdSlice';
+import { validateSeedWeights } from '../sd/util/seedWeightPairs';
+import { SystemState } from './systemSlice';
+
+const sdSelector = createSelector(
+    (state: RootState) => state.sd,
+    (sd: SDState) => {
+        return {
+            prompt: sd.prompt,
+            shouldGenerateVariations: sd.shouldGenerateVariations,
+            seedWeights: sd.seedWeights,
+            maskPath: sd.maskPath,
+            initialImagePath: sd.initialImagePath,
+            seed: sd.seed,
+        };
+    },
+    {
+        memoizeOptions: {
+            resultEqualityCheck: isEqual,
+        },
+    }
+);
+
+const systemSelector = createSelector(
+    (state: RootState) => state.system,
+    (system: SystemState) => {
+        return {
+            isProcessing: system.isProcessing,
+            isConnected: system.isConnected,
+        };
+    },
+    {
+        memoizeOptions: {
+            resultEqualityCheck: isEqual,
+        },
+    }
+);
+
+/*
+Checks relevant pieces of state to confirm generation will not deterministically fail.
+
+This is used to prevent the 'Generate' button from being clicked.
+
+Other parameter values may cause failure but we rely on input validation for those.
+*/
+const useCheckParameters = () => {
+    const {
+        prompt,
+        shouldGenerateVariations,
+        seedWeights,
+        maskPath,
+        initialImagePath,
+        seed,
+    } = useAppSelector(sdSelector);
+
+    const { isProcessing, isConnected } = useAppSelector(systemSelector);
+
+    return useMemo(() => {
+        // Cannot generate without a prompt
+        if (!prompt) {
+            return false;
+        }
+
+        //  Cannot generate with a mask without img2img
+        if (maskPath && !initialImagePath) {
+            return false;
+        }
+
+        // TODO: job queue
+        // Cannot generate if already processing an image
+        if (isProcessing) {
+            return false;
+        }
+
+        // Cannot generate if not connected
+        if (!isConnected) {
+            return false;
+        }
+
+        // Cannot generate variations without valid seed weights
+        if (
+            shouldGenerateVariations &&
+            (!(validateSeedWeights(seedWeights) || seedWeights === '') ||
+                seed === -1)
+        ) {
+            return false;
+        }
+
+        // All good
+        return true;
+    }, [
+        prompt,
+        maskPath,
+        initialImagePath,
+        isProcessing,
+        isConnected,
+        shouldGenerateVariations,
+        seedWeights,
+        seed,
+    ]);
+};
+
+export default useCheckParameters;
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@ -0,0 +1,26 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { ChakraProvider, ColorModeScript } from '@chakra-ui/react';
+import { store } from './app/store';
+import { Provider } from 'react-redux';
+import { PersistGate } from 'redux-persist/integration/react';
+import { persistStore } from 'redux-persist';
+
+export const persistor = persistStore(store);
+
+import App from './App';
+import { theme } from './app/theme';
+import Loading from './Loading';
+
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+  <React.StrictMode>
+    <Provider store={store}>
+      <PersistGate loading={<Loading />} persistor={persistor}>
+        <ChakraProvider theme={theme}>
+          <ColorModeScript initialColorMode={theme.config.initialColorMode} />
+          <App />
+        </ChakraProvider>
+      </PersistGate>
+    </Provider>
+  </React.StrictMode>
+);
--- a/frontend/src/vite-env.d.ts
+++ b/frontend/src/vite-env.d.ts
@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src", "index.d.ts"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
--- a/frontend/tsconfig.node.json
+++ b/frontend/tsconfig.node.json
@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@ -0,0 +1,36 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import eslint from 'vite-plugin-eslint';
+
+// https://vitejs.dev/config/
+export default defineConfig(({ mode }) => {
+  const common = {
+    plugins: [react(), eslint()],
+    server: {
+      proxy: {
+        '/outputs': {
+          target: 'http://localhost:9090/outputs',
+          changeOrigin: true,
+          rewrite: (path) => path.replace(/^\/outputs/, ''),
+        },
+      },
+    },
+    build: {
+      target: 'esnext',
+      chunkSizeWarningLimit: 1500, // we don't really care about chunk size
+    },
+  };
+  if (mode == 'development') {
+    return {
+      ...common,
+      build: {
+        ...common.build,
+        // sourcemap: true, // this can be enabled if needed, it adds ovwer 15MB to the commit
+      },
+    };
+  } else {
+    return {
+      ...common,
+    };
+  }
+});
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
				`@ -0,0 +1 @@`
				`.checkerboard{background-position:0px 0px,10px 10px;background-size:20px 20px;background-image:linear-gradient(45deg,#eee 25%,transparent 25%,transparent 75%,#eee 75%,#eee 100%),linear-gradient(45deg,#eee 25%,white 25%,white 75%,#eee 75%,#eee 100%)}`
				`@ -0,0 +1 @@`
				`declare module 'redux-socket.io-middleware';`