Add New WebUI and Desktop Mode

Co-Authored-By: psychedelicious <4822129+psychedelicious@users.noreply.github.com>

frontend/src/features/options/ProcessButtons/CancelButton.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { MdCancel } from 'react-icons/md';
+import { cancelProcessing } from '../../../app/socketio/actions';
+import { useAppDispatch, useAppSelector } from '../../../app/store';
+import IAIIconButton from '../../../common/components/IAIIconButton';
+import { systemSelector } from '../../../common/hooks/useCheckParameters';
+
+export default function CancelButton() {
+  const dispatch = useAppDispatch();
+  const { isProcessing, isConnected } = useAppSelector(systemSelector);
+  const handleClickCancel = () => dispatch(cancelProcessing());
+
+  return (
+    <IAIIconButton
+      icon={<MdCancel />}
+      tooltip="Cancel"
+      aria-label="Cancel"
+      isDisabled={!isConnected || !isProcessing}
+      onClick={handleClickCancel}
+      className="cancel-btn"
+    />
+  );
+}

frontend/src/features/options/ProcessButtons/InvokeButton.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { MdAddAPhoto } from 'react-icons/md';
+import { generateImage } from '../../../app/socketio/actions';
+import { useAppDispatch } from '../../../app/store';
+import IAIIconButton from '../../../common/components/IAIIconButton';
+import useCheckParameters from '../../../common/hooks/useCheckParameters';
+
+export default function InvokeButton() {
+  const dispatch = useAppDispatch();
+  const isReady = useCheckParameters();
+
+  const handleClickGenerate = () => {
+    dispatch(generateImage());
+  };
+
+  return (
+    <IAIIconButton
+      icon={<MdAddAPhoto />}
+      tooltip="Invoke"
+      aria-label="Invoke"
+      type="submit"
+      isDisabled={!isReady}
+      onClick={handleClickGenerate}
+      className="invoke-btn"
+    />
+  );
+}

frontend/src/features/options/ProcessButtons/ProcessButtons.scss

@@ -0,0 +1,23 @@
+@use '../../../styles/Mixins/' as *;
+
+.process-buttons {
+  display: grid;
+  grid-template-columns: auto max-content;
+  column-gap: 0.5rem;
+
+  .invoke-btn {
+    @include Button(
+      $btn-color: var(--btn-purple),
+      $btn-color-hover: var(--btn-purple-hover),
+      $btn-width: 5rem
+    );
+  }
+
+  .cancel-btn {
+    @include Button(
+      $btn-color: var(--btn-red),
+      $btn-color-hover: var(--btn-red-hover),
+      $btn-width: 3rem
+    );
+  }
+}

frontend/src/features/options/ProcessButtons/ProcessButtons.tsx

@@ -0,0 +1,16 @@
+import InvokeButton from './InvokeButton';
+import CancelButton from './CancelButton';
+
+/**
+ * Buttons to start and cancel image generation.
+ */
+const ProcessButtons = () => {
+  return (
+    <div className="process-buttons">
+      <InvokeButton />
+      <CancelButton />
+    </div>
+  );
+};
+
+export default ProcessButtons;