From d8171b9d1b481ec4a851b52d8606da524692b699 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Toni=20F=C3=B6rster?= <toni.foerster@gmail.com>
Date: Sat, 5 Aug 2023 15:00:55 +0200
Subject: [PATCH 01/10] Option to enable GUI hardware acceleration (#2055)

Add a settings option in the 'Advanced Tab' to allow hardware acceleration.
---
 src/main/gui/create.ts                    |  8 +++++++-
 src/renderer/components/SettingsModal.tsx | 13 ++++++++++++-
 src/renderer/contexts/SettingsContext.tsx |  5 +++++
 3 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/src/main/gui/create.ts b/src/main/gui/create.ts
index ad24dac3f..25362bc0d 100644
--- a/src/main/gui/create.ts
+++ b/src/main/gui/create.ts
@@ -3,6 +3,7 @@ import electronLog from 'electron-log';
 import { log } from '../../common/log';
 import { lazy } from '../../common/util';
 import { OpenArguments } from '../arguments';
+import { settingStorage } from '../setting-storage';
 import { createMainWindow } from './main-window';
 
 const mdCodeBlock = (code: string): string => {
@@ -47,7 +48,12 @@ const setupErrorHandling = () => {
 export const createGuiApp = (args: OpenArguments) => {
     setupErrorHandling();
 
-    app.disableHardwareAcceleration();
+    const isEnableHardwareAcceleration =
+        settingStorage.getItem('enable-hardware-acceleration') === 'true';
+
+    if (!isEnableHardwareAcceleration) {
+        app.disableHardwareAcceleration();
+    }
 
     const hasInstanceLock = app.requestSingleInstanceLock();
     if (!hasInstanceLock) {
diff --git a/src/renderer/components/SettingsModal.tsx b/src/renderer/components/SettingsModal.tsx
index 889f2e93b..86d2cbbdc 100644
--- a/src/renderer/components/SettingsModal.tsx
+++ b/src/renderer/components/SettingsModal.tsx
@@ -674,9 +674,12 @@ const PythonSettings = memo(() => {
 });
 
 const AdvancedSettings = memo(() => {
-    const { useCheckUpdOnStrtUp, useExperimentalFeatures } = useContext(SettingsContext);
+    const { useCheckUpdOnStrtUp, useExperimentalFeatures, useEnableHardwareAcceleration } =
+        useContext(SettingsContext);
     const [isCheckUpdOnStrtUp, setIsCheckUpdOnStrtUp] = useCheckUpdOnStrtUp;
     const [isExperimentalFeatures, setIsExperimentalFeatures] = useExperimentalFeatures;
+    const [isEnableHardwareAcceleration, setIsEnableHardwareAcceleration] =
+        useEnableHardwareAcceleration;
 
     return (
         <VStack
@@ -699,6 +702,14 @@ const AdvancedSettings = memo(() => {
                     setIsExperimentalFeatures((prev) => !prev);
                 }}
             />
+            <Toggle
+                description="Enable GPU rendering for the GUI. Use with caution, as it may severely decrease GPU performance for image processing."
+                title="Enable Hardware Acceleration (requires restart)."
+                value={isEnableHardwareAcceleration}
+                onToggle={() => {
+                    setIsEnableHardwareAcceleration((prev) => !prev);
+                }}
+            />
         </VStack>
     );
 });
diff --git a/src/renderer/contexts/SettingsContext.tsx b/src/renderer/contexts/SettingsContext.tsx
index 67648f43b..541ee2f76 100644
--- a/src/renderer/contexts/SettingsContext.tsx
+++ b/src/renderer/contexts/SettingsContext.tsx
@@ -29,6 +29,7 @@ interface Settings {
     useIsDarkMode: GetSetState<boolean>;
     useAnimateChain: GetSetState<boolean>;
     useExperimentalFeatures: GetSetState<boolean>;
+    useEnableHardwareAcceleration: GetSetState<boolean>;
     useViewportExportPadding: GetSetState<number>;
 
     // Node Settings
@@ -94,6 +95,9 @@ export const SettingsProvider = memo(({ children }: React.PropsWithChildren<unkn
     );
 
     const useExperimentalFeatures = useMemoArray(useLocalStorage('experimental-features', false));
+    const useEnableHardwareAcceleration = useMemoArray(
+        useLocalStorage('enable-hardware-acceleration', false)
+    );
 
     const contextValue = useMemoObject<Settings>({
         // GPU Stuff
@@ -115,6 +119,7 @@ export const SettingsProvider = memo(({ children }: React.PropsWithChildren<unkn
         useIsDarkMode,
         useAnimateChain,
         useExperimentalFeatures,
+        useEnableHardwareAcceleration,
         useViewportExportPadding,
 
         // Node

From 3de1b9040b14dc4721da89af0dc0444ca82cf510 Mon Sep 17 00:00:00 2001
From: Michael Schmidt <mitchi5000.ms@googlemail.com>
Date: Sat, 5 Aug 2023 15:01:45 +0200
Subject: [PATCH 02/10] Fixed release CI (#2059)

---
 .github/workflows/release-test.yml | 38 ++++++++++++++++++++++++++++++
 .github/workflows/release.yml      |  7 +-----
 package.json                       |  7 +-----
 3 files changed, 40 insertions(+), 12 deletions(-)
 create mode 100644 .github/workflows/release-test.yml

diff --git a/.github/workflows/release-test.yml b/.github/workflows/release-test.yml
new file mode 100644
index 000000000..be7c56972
--- /dev/null
+++ b/.github/workflows/release-test.yml
@@ -0,0 +1,38 @@
+name: Release
+
+on:
+    pull_request:
+        branches: ['*']
+        types:
+            - opened
+            - synchronize
+            - closed
+        paths:
+            - '.github/**'
+            - 'package.json'
+            - 'package-lock.json'
+            - 'forge.config.js'
+            - 'webpack*.js'
+    push:
+        branches: [main]
+
+permissions: read-all
+
+jobs:
+    release-test:
+        runs-on: ${{ matrix.os }}
+
+        strategy:
+            matrix:
+                os: [macos-latest, ubuntu-latest, windows-latest]
+
+        steps:
+            - uses: actions/checkout@v3
+            - uses: actions/setup-node@v3
+              with:
+                  node-version: 16
+                  cache: 'npm'
+            - run: npm ci
+            - name: publish --dry-run
+              shell: bash
+              run: npm run publish -- --dry-run
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index fb523f4c4..1436b9e72 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -37,9 +37,4 @@ jobs:
               env:
                   GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
               shell: bash
-              run: |
-                  if [[ ${{ matrix.os }} == 'macos-latest' ]]; then
-                    npm run publish-mac
-                  else
-                    npm run publish
-                  fi
+              run: npm run publish
diff --git a/package.json b/package.json
index e591b6e5e..138f97709 100644
--- a/package.json
+++ b/package.json
@@ -12,14 +12,9 @@
     "debug:py": "cd backend/src && nodemon --exec \"python -m debugpy --listen 5678\" ./run.py 8000",
     "package": "cross-env NODE_ENV=production electron-forge package",
     "make": "cross-env NODE_ENV=production electron-forge make",
-    "make-mac-arm64": "cross-env NODE_ENV=production electron-forge make --arch=arm64",
-    "make-mac-x64": "cross-env NODE_ENV=production electron-forge make --arch=x64",
     "make-linux-zip": "cross-env NODE_ENV=production electron-forge make --targets @electron-forge/maker-zip --platform linux",
     "make-win-zip": "cross-env NODE_ENV=production electron-forge make --targets @electron-forge/maker-zip --platform win32",
-    "make-mac-arm64-zip": "cross-env NODE_ENV=production electron-forge make --targets @electron-forge/maker-zip --arch arm64",
-    "make-mac-x64-zip": "cross-env NODE_ENV=production electron-forge make --targets @electron-forge/maker-zip --arch x64",
-    "make-mac-all": "npm run make-mac-arm64 && npm run make-mac-x64",
-    "publish-mac": "npm run make-mac-all && npm run publish",
+    "make-mac-zip": "cross-env NODE_ENV=production electron-forge make --targets @electron-forge/maker-zip --platform darwin",
     "publish": "cross-env NODE_ENV=production electron-forge publish",
     "lint": "npm run lint:js && npm run lint:py",
     "lint:js": "eslint . --ext \".js,.jsx,.ts,.tsx\" && stylelint src/**/*.scss",

From c5dfb912b48da4c94eedf78abcdace751fd33e65 Mon Sep 17 00:00:00 2001
From: Michael Schmidt <mitchi5000.ms@googlemail.com>
Date: Sun, 6 Aug 2023 17:40:38 +0200
Subject: [PATCH 03/10] Bump to 0.19.1 (#2061)

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 6100fdc57..a944b9d51 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "chainner",
-  "version": "0.19.0",
+  "version": "0.19.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "chainner",
-      "version": "0.19.0",
+      "version": "0.19.1",
       "license": "GPLv3",
       "dependencies": {
         "@babel/plugin-transform-react-jsx": "^7.17.12",
diff --git a/package.json b/package.json
index 138f97709..37d352f17 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "chainner",
   "productName": "chaiNNer",
-  "version": "0.19.0",
+  "version": "0.19.1",
   "description": "A flowchart based image processing GUI",
   "main": ".webpack/main",
   "scripts": {

From fedc6d37397d96aa2d9240d7714f1b4661ced1c8 Mon Sep 17 00:00:00 2001
From: theflyingzamboni <55669985+theflyingzamboni@users.noreply.github.com>
Date: Mon, 7 Aug 2023 14:22:16 -0400
Subject: [PATCH 04/10] Added sorting back to Image File Iterator (#2067)

---
 .../image/batch_processing/image_file_iterator.py           | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/backend/src/packages/chaiNNer_standard/image/batch_processing/image_file_iterator.py b/backend/src/packages/chaiNNer_standard/image/batch_processing/image_file_iterator.py
index deb57e41d..1ea179a95 100644
--- a/backend/src/packages/chaiNNer_standard/image/batch_processing/image_file_iterator.py
+++ b/backend/src/packages/chaiNNer_standard/image/batch_processing/image_file_iterator.py
@@ -17,6 +17,7 @@
     NumberOutput,
     TextOutput,
 )
+from nodes.utils.utils import alphanumeric_sort
 from process import IteratorContext
 
 from .. import batch_processing_group
@@ -42,7 +43,10 @@ def list_glob(directory: str, globexpr: str, ext_filter: List[str]) -> List[str]
         flags=flags,
     )
 
-    return list(set(map(lambda f: str(Path(directory) / f), filtered)))
+    return sorted(
+        list(set(map(lambda f: str(Path(directory) / f), filtered))),
+        key=alphanumeric_sort,
+    )
 
 
 @batch_processing_group.register(

From cc33b9898b9fa03dae1b172d8fe1e984a7722141 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Toni=20F=C3=B6rster?= <toni.foerster@gmail.com>
Date: Tue, 8 Aug 2023 06:03:36 +0200
Subject: [PATCH 05/10] fix duplicating nodes and exporting firing twice
 (#2068)

fixes #2065
---
 src/renderer/contexts/GlobalNodeState.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/renderer/contexts/GlobalNodeState.tsx b/src/renderer/contexts/GlobalNodeState.tsx
index 7c8d7fc38..d9b419e93 100644
--- a/src/renderer/contexts/GlobalNodeState.tsx
+++ b/src/renderer/contexts/GlobalNodeState.tsx
@@ -1303,12 +1303,12 @@ export const GlobalProvider = memo(
         useIpcRendererListener('copy', copyFn);
         useHotkeys('ctrl+v, cmd+v', pasteFn);
         useIpcRendererListener('paste', pasteFn);
-        useHotkeys('ctrl+d, cmd+d', duplicateFn);
+        useHotkeys('ctrl+d', duplicateFn);
         useIpcRendererListener('duplicate', duplicateFn);
-        useHotkeys('ctrl+shift+d, cmd+shift+d', duplicateWithInputEdgesFn);
+        useHotkeys('ctrl+shift+d', duplicateWithInputEdgesFn);
         useIpcRendererListener('duplicate-with-input-edges', duplicateWithInputEdgesFn);
-        useHotkeys('ctrl+p, cmd+p', exportViewportScreenshot);
-        useHotkeys('ctrl+shift+p, cmd++shift+p', exportViewportScreenshotToClipboard);
+        useHotkeys('ctrl+p', exportViewportScreenshot);
+        useHotkeys('ctrl+shift+p', exportViewportScreenshotToClipboard);
         useIpcRendererListener(
             'export-viewport',
             useCallback(

From 79364acef072f90eaa05902f3ad2a5ee641e5a1d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Toni=20F=C3=B6rster?= <toni.foerster@gmail.com>
Date: Wed, 9 Aug 2023 00:08:09 +0200
Subject: [PATCH 06/10] changes to theme selection (#2060)

instead of a toggle for always dark the user can now choose between:

Dark Mode / Light Mode / System
---
 src/renderer/app.tsx                      |  6 ++---
 src/renderer/components/SettingsModal.tsx | 26 +++++++++++++--------
 src/renderer/contexts/SettingsContext.tsx | 12 +++++-----
 src/renderer/theme.ts                     | 28 +++++++++++++++++++++--
 4 files changed, 51 insertions(+), 21 deletions(-)

diff --git a/src/renderer/app.tsx b/src/renderer/app.tsx
index 21b90d43c..c0393f8f6 100644
--- a/src/renderer/app.tsx
+++ b/src/renderer/app.tsx
@@ -11,7 +11,7 @@ import { ContextMenuProvider } from './contexts/ContextMenuContext';
 import { HotkeysProvider } from './contexts/HotKeyContext';
 import { useAsyncEffect } from './hooks/useAsyncEffect';
 import { Main } from './main';
-import { theme } from './theme';
+import { darktheme } from './theme';
 import './i18n';
 
 TimeAgo.addLocale(en);
@@ -60,8 +60,8 @@ export const App = memo(() => {
     );
 
     return (
-        <ChakraProvider theme={theme}>
-            <ColorModeScript initialColorMode={theme.config.initialColorMode} />
+        <ChakraProvider theme={darktheme}>
+            <ColorModeScript initialColorMode={darktheme.config.initialColorMode} />
             <HotkeysProvider>
                 <ContextMenuProvider>
                     <AlertBoxProvider>
diff --git a/src/renderer/components/SettingsModal.tsx b/src/renderer/components/SettingsModal.tsx
index 86d2cbbdc..d3888a083 100644
--- a/src/renderer/components/SettingsModal.tsx
+++ b/src/renderer/components/SettingsModal.tsx
@@ -121,6 +121,7 @@ interface DropdownProps<T> extends SettingsItemProps {
     value: T;
     options: readonly { label: string; value: T }[];
     onChange: (value: T) => void;
+    small?: boolean;
 }
 
 // eslint-disable-next-line prefer-arrow-functions/prefer-arrow-functions, react-memo/require-memo
@@ -131,6 +132,7 @@ function Dropdown<T>({
     value,
     options,
     onChange,
+    small,
 }: DropdownProps<T>) {
     const index = options.findIndex((o) => o.value === value);
 
@@ -149,7 +151,7 @@ function Dropdown<T>({
         >
             <Select
                 isDisabled={isDisabled}
-                minWidth="350px"
+                minWidth={small ? '171px' : '350px'}
                 value={index === -1 ? 0 : index}
                 onChange={(e) => {
                     const optionIndex = Number(e.target.value);
@@ -171,10 +173,10 @@ function Dropdown<T>({
 }
 
 const AppearanceSettings = memo(() => {
-    const { useSnapToGrid, useIsDarkMode, useAnimateChain, useViewportExportPadding } =
+    const { useSnapToGrid, useSelectTheme, useAnimateChain, useViewportExportPadding } =
         useContext(SettingsContext);
 
-    const [isDarkMode, setIsDarkMode] = useIsDarkMode;
+    const [isSelectTheme, setSelectTheme] = useSelectTheme;
     const [animateChain, setAnimateChain] = useAnimateChain;
     const [viewportExportPadding, setViewportExportPadding] = useViewportExportPadding;
 
@@ -185,13 +187,17 @@ const AppearanceSettings = memo(() => {
             divider={<StackDivider />}
             w="full"
         >
-            <Toggle
-                description="Use dark mode throughout chaiNNer."
-                title="Dark theme"
-                value={isDarkMode}
-                onToggle={() => {
-                    setIsDarkMode((prev) => !prev);
-                }}
+            <Dropdown
+                small
+                description="Choose the Theme for chaiNNers appereance."
+                options={[
+                    { label: 'Dark Mode', value: 'dark' },
+                    { label: 'Light Mode', value: 'light' },
+                    { label: 'System', value: 'system' },
+                ]}
+                title="Select Theme"
+                value={isSelectTheme}
+                onChange={setSelectTheme}
             />
 
             <Toggle
diff --git a/src/renderer/contexts/SettingsContext.tsx b/src/renderer/contexts/SettingsContext.tsx
index 541ee2f76..d812663ce 100644
--- a/src/renderer/contexts/SettingsContext.tsx
+++ b/src/renderer/contexts/SettingsContext.tsx
@@ -26,7 +26,7 @@ interface Settings {
         setSnapToGridAmount: SetState<number>
     ];
     useStartupTemplate: GetSetState<string>;
-    useIsDarkMode: GetSetState<boolean>;
+    useSelectTheme: GetSetState<string>;
     useAnimateChain: GetSetState<boolean>;
     useExperimentalFeatures: GetSetState<boolean>;
     useEnableHardwareAcceleration: GetSetState<boolean>;
@@ -64,13 +64,13 @@ export const SettingsProvider = memo(({ children }: React.PropsWithChildren<unkn
     const useCheckUpdOnStrtUp = useMemoArray(useLocalStorage('check-upd-on-strtup-2', true));
     const useStartupTemplate = useMemoArray(useLocalStorage('startup-template', ''));
 
-    const useIsDarkMode = useMemoArray(useLocalStorage('use-dark-mode', true));
+    const useSelectTheme = useMemoArray(useLocalStorage('theme', 'dark'));
 
     const { setColorMode } = useColorMode();
-    const [isDarkMode] = useIsDarkMode;
+    const [selectThemeColor] = useSelectTheme;
     useEffect(() => {
-        setColorMode(isDarkMode ? 'dark' : 'light');
-    }, [setColorMode, isDarkMode]);
+        setColorMode(selectThemeColor);
+    }, [setColorMode, selectThemeColor]);
 
     const useAnimateChain = useMemoArray(useLocalStorage('animate-chain', true));
 
@@ -116,7 +116,7 @@ export const SettingsProvider = memo(({ children }: React.PropsWithChildren<unkn
         useSnapToGrid,
         useCheckUpdOnStrtUp,
         useStartupTemplate,
-        useIsDarkMode,
+        useSelectTheme,
         useAnimateChain,
         useExperimentalFeatures,
         useEnableHardwareAcceleration,
diff --git a/src/renderer/theme.ts b/src/renderer/theme.ts
index 00fafbad5..7760185f3 100644
--- a/src/renderer/theme.ts
+++ b/src/renderer/theme.ts
@@ -1,10 +1,30 @@
 import { Theme, extendTheme } from '@chakra-ui/react';
 
-const config = {
+// This is the initial theme config on startup
+const dark = {
     initialColorMode: 'dark',
     useSystemColorMode: false,
 } as const;
 
+// TODO: This should be used later after reading the theme settings.
+// When light, change the theme to this values before displaying the
+// window. Need to figure out where and when to load the new theme.
+// Currently this does nothing.
+const light = {
+    initialColorMode: 'light',
+    useSystemColorMode: false,
+} as const;
+
+// TODO: This should be used later to dynamically change the theme,
+// when the OS changes from dark to light or vice versa. Need to
+// figure out where and when to load the new theme. Currently this
+// does nothing.
+
+const system = {
+    initialColorMode: 'system',
+    useSystemColorMode: true,
+} as const;
+
 const grays = [50, 100, 200, 300, 400, 500, 600, 650, 700, 750, 800, 850, 900];
 const colors = {
     gray: Object.fromEntries(grays.map((v) => [v, `var(--gray-${v})`])),
@@ -16,4 +36,8 @@ const fonts = {
     monospace: `Roboto-Mono, monospace`,
 };
 
-export const theme = extendTheme({ config, colors, fonts } as const) as Theme;
+export const darktheme = extendTheme({ config: dark, colors, fonts } as const) as Theme;
+
+export const lighttheme = extendTheme({ config: light, colors, fonts } as const) as Theme;
+
+export const systemtheme = extendTheme({ config: system, colors, fonts } as const) as Theme;

From c4c13705368e486980628aad84fa65e75253d9dd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Toni=20F=C3=B6rster?= <toni.foerster@gmail.com>
Date: Wed, 9 Aug 2023 00:08:32 +0200
Subject: [PATCH 07/10] Mac Stuff (#2069)

* add delete and select all to the nodes menu

* use proper delete and multiselect keycode on mac
---
 src/main/gui/menu.ts                     | 30 ++++++++++++++++++++++++
 src/renderer/components/ReactFlowBox.tsx | 11 +++++++--
 2 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/src/main/gui/menu.ts b/src/main/gui/menu.ts
index 3530bd22c..5e7f4660d 100644
--- a/src/main/gui/menu.ts
+++ b/src/main/gui/menu.ts
@@ -224,6 +224,36 @@ export const setMainMenu = ({ mainWindow, menuData, enabled = false }: MainMenuA
                               },
                               enabled,
                           },
+                          {
+                              label: 'Delete',
+                              click: () => {
+                                  mainWindow.webContents.sendInputEvent({
+                                      type: 'keyDown',
+                                      keyCode: 'Backspace',
+                                      modifiers: ['cmd'],
+                                  });
+                                  mainWindow.webContents.sendInputEvent({
+                                      type: 'keyUp',
+                                      keyCode: 'Backspace',
+                                      modifiers: ['cmd'],
+                                  });
+                              },
+                          },
+                          {
+                              label: 'Select All',
+                              click: () => {
+                                  mainWindow.webContents.sendInputEvent({
+                                      type: 'keyDown',
+                                      keyCode: 'a',
+                                      modifiers: ['cmd'],
+                                  });
+                                  mainWindow.webContents.sendInputEvent({
+                                      type: 'keyUp',
+                                      keyCode: 'a',
+                                      modifiers: ['cmd'],
+                                  });
+                              },
+                          },
                           { type: 'separator' },
                           {
                               label: 'Duplicate',
diff --git a/src/renderer/components/ReactFlowBox.tsx b/src/renderer/components/ReactFlowBox.tsx
index e2ffc4cce..192a9f3f9 100644
--- a/src/renderer/components/ReactFlowBox.tsx
+++ b/src/renderer/components/ReactFlowBox.tsx
@@ -25,6 +25,7 @@ import ReactFlow, {
 } from 'reactflow';
 import { useContext, useContextSelector } from 'use-context-selector';
 import { EdgeData, NodeData } from '../../common/common-types';
+import { isMac } from '../../common/env';
 import { log } from '../../common/log';
 import { getFirstPossibleInput, getFirstPossibleOutput } from '../../common/nodes/connectedInputs';
 import {
@@ -609,6 +610,12 @@ export const ReactFlowBox = memo(({ wrapperRef, nodeTypes, edgeTypes }: ReactFlo
         [selectionMenu, setSelectedNodes]
     );
 
+    const multiSelectionKeyCode = useMemo(() => (isMac ? ['Meta'] : ['Control']), []);
+    const deleteKeyCode = useMemo(
+        () => (isMac ? ['Backspace', 'Meta+Backspace'] : ['Backspace', 'Delete']),
+        []
+    );
+
     return (
         <Box
             bg="var(--chain-editor-bg)"
@@ -622,14 +629,14 @@ export const ReactFlowBox = memo(({ wrapperRef, nodeTypes, edgeTypes }: ReactFlo
             <ReactFlow
                 connectionLineContainerStyle={{ zIndex: 1000 }}
                 connectionRadius={15}
-                deleteKeyCode={useMemo(() => ['Backspace', 'Delete'], [])}
+                deleteKeyCode={deleteKeyCode}
                 edgeTypes={edgeTypes}
                 edges={displayEdges}
                 elevateEdgesOnSelect={false}
                 elevateNodesOnSelect={false}
                 maxZoom={8}
                 minZoom={0.125}
-                multiSelectionKeyCode={useMemo(() => ['Control', 'Meta'], [])}
+                multiSelectionKeyCode={multiSelectionKeyCode}
                 nodeTypes={nodeTypes}
                 nodes={displayNodes}
                 snapGrid={useMemoArray<[number, number]>([snapToGridAmount, snapToGridAmount])}

From 42b1a923d865a4a7e2dc8b90ac0bfdbe51c16617 Mon Sep 17 00:00:00 2001
From: Michael Schmidt <mitchi5000.ms@googlemail.com>
Date: Thu, 10 Aug 2023 04:34:04 +0200
Subject: [PATCH 08/10] Features (#2053)

* WIP

* new api

* /features endpoint

* New backend API

* Switch to packages in the UI

* Basic UI support for features

* typo

* UI WIP

* Unified markdown handling

* slight fixes

* Properly throw server errors

* Better error messages

* Basic feature checking

* Added spinner while refreshing
---
 backend/src/api.py                            | 104 +++++-
 .../nodes/impl/external_stable_diffusion.py   | 270 ---------------
 .../packages/chaiNNer_external/__init__.py    |  23 +-
 .../automatic1111/clip_interrogate.py         |  16 +-
 .../automatic1111/image_to_image.py           |  29 +-
 .../automatic1111/inpaint.py                  |  31 +-
 .../automatic1111/outpaint.py                 |  31 +-
 .../automatic1111/text_to_image.py            |  29 +-
 .../automatic1111/upscale.py                  |  34 +-
 .../packages/chaiNNer_external/features.py    |  32 ++
 .../src/packages/chaiNNer_external/util.py    |  44 +++
 .../src/packages/chaiNNer_external/web_ui.py  | 264 ++++++++++++++
 .../src/packages/chaiNNer_ncnn/__init__.py    |   1 +
 .../src/packages/chaiNNer_onnx/__init__.py    |   1 +
 .../src/packages/chaiNNer_pytorch/__init__.py |   1 +
 .../packages/chaiNNer_standard/__init__.py    |   1 +
 backend/src/server.py                         |  96 +++++-
 src/common/Backend.ts                         |  61 +++-
 src/common/SchemaMap.ts                       |   1 +
 src/common/Validity.ts                        |   6 +
 src/common/common-types.ts                    |  37 ++
 src/common/dependencies.ts                    |  19 -
 src/common/externalIntegrations.ts            |  13 -
 src/common/nodes/checkFeatures.ts             |  25 ++
 src/common/pip.ts                             |  45 +--
 src/common/pipInstallWithProgress.ts          |   2 +-
 src/main/cli/run.ts                           |   5 +-
 src/renderer/components/Handle.tsx            |   6 +-
 src/renderer/components/Header/AppInfo.tsx    |  10 +-
 .../docsMarkdown.tsx => Markdown.tsx}         |  36 +-
 .../components/NodeDocumentation/NodeDocs.tsx |  12 +-
 .../RepresentativeNodeWrapper.tsx             |   7 +-
 .../components/inputs/GenericInput.tsx        |   9 +-
 .../components/inputs/InputContainer.tsx      |   7 +-
 .../node/NodeFooter/ValidityIndicator.tsx     |   6 +-
 src/renderer/contexts/BackendContext.tsx      |  91 ++++-
 src/renderer/contexts/DependencyContext.tsx   | 324 ++++++++++++------
 src/renderer/contexts/ExecutionContext.tsx    |  22 +-
 src/renderer/hooks/useValidity.ts             |  13 +-
 39 files changed, 1127 insertions(+), 637 deletions(-)
 delete mode 100644 backend/src/nodes/impl/external_stable_diffusion.py
 create mode 100644 backend/src/packages/chaiNNer_external/features.py
 create mode 100644 backend/src/packages/chaiNNer_external/util.py
 create mode 100644 backend/src/packages/chaiNNer_external/web_ui.py
 delete mode 100644 src/common/dependencies.ts
 delete mode 100644 src/common/externalIntegrations.ts
 create mode 100644 src/common/nodes/checkFeatures.ts
 rename src/renderer/components/{NodeDocumentation/docsMarkdown.tsx => Markdown.tsx} (65%)

diff --git a/backend/src/api.py b/backend/src/api.py
index d6e99969a..3429784a9 100644
--- a/backend/src/api.py
+++ b/backend/src/api.py
@@ -3,7 +3,17 @@
 import importlib
 import os
 from dataclasses import dataclass, field
-from typing import Callable, Dict, Iterable, List, Tuple, TypedDict, TypeVar
+from typing import (
+    Awaitable,
+    Callable,
+    Dict,
+    Iterable,
+    List,
+    NewType,
+    Tuple,
+    TypedDict,
+    TypeVar,
+)
 
 from sanic.log import logger
 
@@ -83,11 +93,13 @@ class NodeData:
     side_effects: bool
     deprecated: bool
     default_nodes: List[DefaultNode] | None  # For iterators only
+    features: List[FeatureId]
 
     run: RunFn
 
 
 T = TypeVar("T", bound=RunFn)
+S = TypeVar("S")
 
 
 @dataclass
@@ -114,14 +126,20 @@ def register(
         default_nodes: List[DefaultNode] | None = None,
         decorators: List[Callable] | None = None,
         see_also: List[str] | str | None = None,
+        features: List[FeatureId] | FeatureId | None = None,
     ):
         if not isinstance(description, str):
             description = "\n\n".join(description)
 
-        if see_also is None:
-            see_also = []
-        if isinstance(see_also, str):
-            see_also = [see_also]
+        def to_list(x: List[S] | S | None) -> List[S]:
+            if x is None:
+                return []
+            if isinstance(x, list):
+                return x
+            return [x]
+
+        see_also = to_list(see_also)
+        features = to_list(features)
 
         def run_check(level: CheckLevel, run: Callable[[bool], None]):
             if level == CheckLevel.NONE:
@@ -170,6 +188,7 @@ def inner_wrapper(wrapped_func: T) -> T:
                 side_effects=side_effects,
                 deprecated=deprecated,
                 default_nodes=default_nodes,
+                features=features,
                 run=wrapped_func,
             )
 
@@ -226,13 +245,59 @@ def toDict(self):
         }
 
 
+FeatureId = NewType("FeatureId", str)
+
+
+@dataclass
+class Feature:
+    id: str
+    name: str
+    description: str
+    behavior: FeatureBehavior | None = None
+
+    def add_behavior(self, check: Callable[[], Awaitable[FeatureState]]) -> FeatureId:
+        if self.behavior is not None:
+            raise ValueError("Behavior already set")
+
+        self.behavior = FeatureBehavior(check=check)
+        return FeatureId(self.id)
+
+    def toDict(self):
+        return {
+            "id": self.id,
+            "name": self.name,
+            "description": self.description,
+        }
+
+
+@dataclass
+class FeatureBehavior:
+    check: Callable[[], Awaitable[FeatureState]]
+
+
+@dataclass(frozen=True)
+class FeatureState:
+    is_enabled: bool
+    details: str | None = None
+
+    @staticmethod
+    def enabled(details: str | None = None) -> "FeatureState":
+        return FeatureState(is_enabled=True, details=details)
+
+    @staticmethod
+    def disabled(details: str | None = None) -> "FeatureState":
+        return FeatureState(is_enabled=False, details=details)
+
+
 @dataclass
 class Package:
     where: str
+    id: str
     name: str
     description: str
     dependencies: List[Dependency] = field(default_factory=list)
     categories: List[Category] = field(default_factory=list)
+    features: List[Feature] = field(default_factory=list)
 
     def add_category(
         self,
@@ -259,6 +324,19 @@ def add_dependency(
     ):
         self.dependencies.append(dependency)
 
+    def add_feature(
+        self,
+        id: str,  # pylint: disable=redefined-builtin
+        name: str,
+        description: str,
+    ) -> Feature:
+        if any(f.id == id for f in self.features):
+            raise ValueError(f"Duplicate feature id: {id}")
+
+        feature = Feature(id=id, name=name, description=description)
+        self.features.append(feature)
+        return feature
+
 
 def _iter_py_files(directory: str):
     for root, _, files in os.walk(directory):
@@ -331,6 +409,18 @@ def _refresh_nodes(self):
 
 
 def add_package(
-    where: str, name: str, description: str, dependencies: List[Dependency]
+    where: str,
+    id: str,  # pylint: disable=redefined-builtin
+    name: str,
+    description: str,
+    dependencies: List[Dependency] | None = None,
 ) -> Package:
-    return registry.add(Package(where, name, description, dependencies))
+    return registry.add(
+        Package(
+            where=where,
+            id=id,
+            name=name,
+            description=description,
+            dependencies=dependencies or [],
+        )
+    )
diff --git a/backend/src/nodes/impl/external_stable_diffusion.py b/backend/src/nodes/impl/external_stable_diffusion.py
deleted file mode 100644
index dbfd3a23a..000000000
--- a/backend/src/nodes/impl/external_stable_diffusion.py
+++ /dev/null
@@ -1,270 +0,0 @@
-from __future__ import annotations
-
-import base64
-import io
-import os
-from enum import Enum
-from hashlib import md5
-from typing import Dict, Optional, Union
-
-import cv2
-import numpy as np
-import requests
-from PIL import Image
-from sanic.log import logger
-
-from ..utils.utils import get_h_w_c
-from .image_utils import normalize, to_uint8
-
-STABLE_DIFFUSION_PROTOCOL = os.environ.get("STABLE_DIFFUSION_PROTOCOL", None)
-STABLE_DIFFUSION_HOST = os.environ.get("STABLE_DIFFUSION_HOST", "127.0.0.1")
-STABLE_DIFFUSION_PORT = os.environ.get("STABLE_DIFFUSION_PORT", None)
-
-STABLE_DIFFUSION_REQUEST_TIMEOUT = float(
-    os.environ.get("STABLE_DIFFUSION_REQUEST_TIMEOUT", "600")
-)  # 10 minutes
-
-STABLE_DIFFUSION_TEXT2IMG_PATH = f"/sdapi/v1/txt2img"
-STABLE_DIFFUSION_IMG2IMG_PATH = f"/sdapi/v1/img2img"
-STABLE_DIFFUSION_INTERROGATE_PATH = f"/sdapi/v1/interrogate"
-STABLE_DIFFUSION_OPTIONS_PATH = f"/sdapi/v1/options"
-STABLE_DIFFUSION_EXTRA_SINGLE_IMAGE_PATH = f"/sdapi/v1/extra-single-image"
-STABLE_DIFFUSION_UPSCALERS_PATH = f"/sdapi/v1/upscalers"
-
-
-def _stable_diffusion_url(path):
-    return f"{STABLE_DIFFUSION_PROTOCOL}://{STABLE_DIFFUSION_HOST}:{STABLE_DIFFUSION_PORT}{path}"
-
-
-INFO_MSG = f"""
-If you want to use external stable diffusion nodes, run the Automatic1111 web ui with the --api flag, like so:
-
-./webui.sh --api
-
-To manually set where ChaiNNer looks for the API, use the
-STABLE_DIFFUSION_PROTOCOL, STABLE_DIFFUSION_HOST, and STABLE_DIFFUSION_PORT
-environment variables.
-"""
-
-TIMEOUT_MSG = f"""Stable diffusion request timeout reached."""
-
-
-class ExternalServiceHTTPError(Exception):
-    pass
-
-
-class ExternalServiceConnectionError(Exception):
-    pass
-
-
-class ExternalServiceTimeout(Exception):
-    pass
-
-
-def _auto_detect_endpoint(timeout=0.5):
-    global STABLE_DIFFUSION_PROTOCOL, STABLE_DIFFUSION_PORT  # pylint: disable=global-statement
-
-    protocols = (
-        [STABLE_DIFFUSION_PROTOCOL] if STABLE_DIFFUSION_PROTOCOL else ["http", "https"]
-    )
-    ports = [STABLE_DIFFUSION_PORT] if STABLE_DIFFUSION_PORT else ["7860", "7861"]
-
-    last_error: Optional[Exception] = None
-    for STABLE_DIFFUSION_PROTOCOL in protocols:
-        for STABLE_DIFFUSION_PORT in ports:
-            try:
-                get(STABLE_DIFFUSION_OPTIONS_PATH, timeout=timeout)
-                logger.info(
-                    f"Found stable diffusion API at {STABLE_DIFFUSION_PROTOCOL}://{STABLE_DIFFUSION_HOST}:{STABLE_DIFFUSION_PORT}"
-                )
-                return
-            except Exception as error:
-                last_error = error
-
-    if last_error:
-        raise RuntimeError(INFO_MSG) from last_error
-    else:
-        raise RuntimeError
-
-
-def get(path, timeout: float = STABLE_DIFFUSION_REQUEST_TIMEOUT) -> Dict:
-    try:
-        response = requests.get(_stable_diffusion_url(path), timeout=timeout)
-        if response.status_code != 200:
-            raise ExternalServiceHTTPError(
-                f"webui GET request to {path} returned status code: {response.status_code}: {response.text}"
-            )
-    except requests.ConnectionError as exc:
-        raise ExternalServiceConnectionError(
-            f"webui GET request to {path} connection failed"
-        ) from exc
-    except requests.exceptions.ReadTimeout as exc:
-        raise ExternalServiceTimeout(TIMEOUT_MSG) from exc
-    return response.json()
-
-
-def post(path, json_data: Dict) -> Dict:
-    try:
-        response = requests.post(
-            _stable_diffusion_url(path),
-            json=json_data,
-            timeout=STABLE_DIFFUSION_REQUEST_TIMEOUT,
-        )
-        if response.status_code != 200:
-            raise ExternalServiceHTTPError(
-                f"webui POST request to {path} returned status code: {response.status_code}: {response.text}"
-            )
-    except requests.ConnectionError as exc:
-        raise ExternalServiceConnectionError(
-            f"webui POST request to {path} connection failed"
-        ) from exc
-    except requests.exceptions.ReadTimeout as exc:
-        raise ExternalServiceTimeout(TIMEOUT_MSG) from exc
-    return response.json()
-
-
-def nearest_valid_size(width, height):
-    return (width // 8) * 8, (height // 8) * 8
-
-
-has_api_connection: Union[bool, None] = None
-
-
-def verify_api_connection():
-    """
-    This function will throw if the stable diffusion API service is unavailable.
-
-    Call this function at import time if you want to make certain node available only when the API is up.
-    """
-    global has_api_connection  # pylint: disable=global-statement
-    if has_api_connection is None:
-        has_api_connection = False
-        _auto_detect_endpoint()
-        has_api_connection = True
-
-    if not has_api_connection:
-        raise ValueError("Cannot connect to stable diffusion API service.")
-
-
-def get_upscalers():
-    """
-    get_upscalers is intended to load the list of available upscalers during import time
-    """
-    if not has_api_connection:
-        # Quiet failure - missing API makes it impossible to insantiate the node anyway.
-        return Enum("StableDiffusionUpscaler", {})
-
-    response = get(STABLE_DIFFUSION_UPSCALERS_PATH)
-    upscalers = {}
-    for u in response:
-        if u["name"] == "None":
-            # Leave it out, we don't need no-op in chaiNNer.
-            continue
-
-        # Id requirements are strict, but webui can be customised with arbitrarily-named upscalers.
-        ident = "UPSCALER_" + md5(u["name"].encode("utf-8")).hexdigest().upper()
-        upscalers[ident] = u["name"]
-
-    upscalers_enum = Enum("StableDiffusionUpscaler", upscalers)
-
-    labels = {}
-    for e in upscalers_enum:
-        labels[e] = e.value
-
-    return upscalers_enum, labels
-
-
-def decode_base64_image(image_bytes: Union[bytes, str]) -> np.ndarray:
-    image = Image.open(io.BytesIO(base64.b64decode(image_bytes)))
-    image_nparray = np.array(image)
-    _, _, c = get_h_w_c(image_nparray)
-    if c == 3:
-        image_nparray = cv2.cvtColor(image_nparray, cv2.COLOR_RGB2BGR)
-    elif c == 4:
-        image_nparray = cv2.cvtColor(image_nparray, cv2.COLOR_RGBA2BGRA)
-    return normalize(image_nparray)
-
-
-def encode_base64_image(image_nparray: np.ndarray) -> str:
-    image_nparray = to_uint8(image_nparray)
-    _, _, c = get_h_w_c(image_nparray)
-    if c == 1:
-        # PIL supports grayscale images just fine, so we don't need to do any conversion
-        pass
-    elif c == 3:
-        image_nparray = cv2.cvtColor(image_nparray, cv2.COLOR_BGR2RGB)
-    elif c == 4:
-        image_nparray = cv2.cvtColor(image_nparray, cv2.COLOR_BGRA2RGBA)
-    else:
-        raise RuntimeError
-    with io.BytesIO() as buffer:
-        with Image.fromarray(image_nparray) as image:
-            image.save(buffer, format="PNG")
-        return base64.b64encode(buffer.getvalue()).decode("utf-8")
-
-
-class SamplerName(Enum):
-    EULER = "Euler"
-    EULER_A = "Euler a"
-    LMS = "LMS"
-    HEUN = "Heun"
-    DPM2 = "DPM2"
-    DPM2_A = "DPM2 a"
-    DPMpp_2S_A = "DPM++ 2S a"
-    DPMpp_2M = "DPM++ 2M"
-    DPMpp_SDE = "DPM++ SDE"
-    DPM_FAST = "DPM fast"
-    DPM_A = "DPM adaptive"
-    LMS_KARRAS = "LMS Karras"
-    DPM2_KARRAS = "DPM2 Karras"
-    DPM2_A_KARRAS = "DPM2 a Karras"
-    DPMpp_2S_A_KARRAS = "DPM++ 2S a Karras"
-    DPMpp_2M_KARRAS = "DPM++ 2M Karras"
-    DPMpp_SDE_KARRAS = "DPM++ SDE Karras"
-    DDIM = "DDIM"
-    PLMS = "PLMS"
-
-
-SAMPLER_NAME_LABELS = {
-    SamplerName.EULER: "Euler",
-    SamplerName.EULER_A: "Euler a",
-    SamplerName.LMS: "LMS",
-    SamplerName.HEUN: "Heun",
-    SamplerName.DPM2: "DPM2",
-    SamplerName.DPM2_A: "DPM2 a",
-    SamplerName.DPMpp_2S_A: "DPM++ 2S a",
-    SamplerName.DPMpp_2M: "DPM++ 2M",
-    SamplerName.DPMpp_SDE: "DPM++ SDE",
-    SamplerName.DPM_FAST: "DPM fast",
-    SamplerName.DPM_A: "DPM adaptive",
-    SamplerName.LMS_KARRAS: "LMS Karras",
-    SamplerName.DPM2_KARRAS: "DPM2 Karras",
-    SamplerName.DPM2_A_KARRAS: "DPM2 a Karras",
-    SamplerName.DPMpp_2S_A_KARRAS: "DPM++ 2S a Karras",
-    SamplerName.DPMpp_2M_KARRAS: "DPM++ 2M Karras",
-    SamplerName.DPMpp_SDE_KARRAS: "DPM++ SDE Karras",
-    SamplerName.DDIM: "DDIM",
-    SamplerName.PLMS: "PLMS",
-}
-
-
-class ResizeMode(Enum):
-    JUST_RESIZE = 0
-    CROP_AND_RESIZE = 1
-    RESIZE_AND_FILL = 2
-    LATENT_UPSCALE = 3
-
-
-RESIZE_MODE_LABELS = {
-    ResizeMode.JUST_RESIZE: "Just resize",
-    ResizeMode.CROP_AND_RESIZE: "Crop and resize",
-    ResizeMode.RESIZE_AND_FILL: "Resize and fill",
-    ResizeMode.LATENT_UPSCALE: "Just resize (Latent upscale)",
-}
-
-
-class InpaintingFill(Enum):
-    FILL = 0
-    ORIGINAL = 1
-    LATENT_NOISE = 2
-    LATENT_NOTHING = 3
diff --git a/backend/src/packages/chaiNNer_external/__init__.py b/backend/src/packages/chaiNNer_external/__init__.py
index 55bb0caf6..a99b85f6b 100644
--- a/backend/src/packages/chaiNNer_external/__init__.py
+++ b/backend/src/packages/chaiNNer_external/__init__.py
@@ -1,12 +1,14 @@
+import sys
+
 from sanic.log import logger
 
 from api import add_package
 
 package = add_package(
     __file__,
+    id="chaiNNer_external",
     name="External",
     description="Interact with an external Stable Diffusion API",
-    dependencies=[],
 )
 
 external_stable_diffusion_category = package.add_category(
@@ -16,4 +18,23 @@
     color="#9331CC",
 )
 
+_FEATURE_DESCRIPTION = f"""
+ChaiNNer can connect to [AUTOMATIC1111's Stable Diffusion Web UI](https://github.com/AUTOMATIC1111/stable-diffusion-webui) to run Stable Diffusion nodes.
+
+If you want to use the External Stable Diffusion nodes, run the Automatic1111 web UI with the `--api` flag, like so:
+
+```bash
+./webui.{"bat" if sys.platform == "win32" else "sh"} --api
+```
+
+To manually set where chaiNNer looks for the API, use the `STABLE_DIFFUSION_PROTOCOL`, `STABLE_DIFFUSION_HOST`, and `STABLE_DIFFUSION_PORT` environment variables. By default, `127.0.0.1` will be the host. If not specified, chaiNNer will try to auto-detect the protocol and port.
+"""
+
+
+web_ui_feature_descriptor = package.add_feature(
+    id="webui",
+    name="AUTOMATIC1111/stable-diffusion-webui",
+    description=_FEATURE_DESCRIPTION,
+)
+
 logger.debug(f"Loaded package {package.name}")
diff --git a/backend/src/packages/chaiNNer_external/external_stable_diffusion/automatic1111/clip_interrogate.py b/backend/src/packages/chaiNNer_external/external_stable_diffusion/automatic1111/clip_interrogate.py
index a3550634a..f94af650a 100644
--- a/backend/src/packages/chaiNNer_external/external_stable_diffusion/automatic1111/clip_interrogate.py
+++ b/backend/src/packages/chaiNNer_external/external_stable_diffusion/automatic1111/clip_interrogate.py
@@ -2,20 +2,15 @@
 
 import numpy as np
 
-from nodes.impl.external_stable_diffusion import (
-    STABLE_DIFFUSION_INTERROGATE_PATH,
-    encode_base64_image,
-    post,
-    verify_api_connection,
-)
 from nodes.node_cache import cached
 from nodes.properties.inputs import ImageInput
 from nodes.properties.outputs import TextOutput
 
+from ...features import web_ui
+from ...util import encode_base64_image
+from ...web_ui import STABLE_DIFFUSION_INTERROGATE_PATH, get_api
 from .. import auto1111_group
 
-verify_api_connection()
-
 
 @auto1111_group.register(
     schema_id="chainner:external_stable_diffusion:interrograte",
@@ -29,10 +24,13 @@
         TextOutput("Text"),
     ],
     decorators=[cached],
+    features=web_ui,
 )
 def clip_interrogate_node(image: np.ndarray) -> str:
     request_data = {
         "image": encode_base64_image(image),
     }
-    response = post(path=STABLE_DIFFUSION_INTERROGATE_PATH, json_data=request_data)
+    response = get_api().post(
+        path=STABLE_DIFFUSION_INTERROGATE_PATH, json_data=request_data
+    )
     return response["caption"]
diff --git a/backend/src/packages/chaiNNer_external/external_stable_diffusion/automatic1111/image_to_image.py b/backend/src/packages/chaiNNer_external/external_stable_diffusion/automatic1111/image_to_image.py
index b73693ee7..dfe4f8cdd 100644
--- a/backend/src/packages/chaiNNer_external/external_stable_diffusion/automatic1111/image_to_image.py
+++ b/backend/src/packages/chaiNNer_external/external_stable_diffusion/automatic1111/image_to_image.py
@@ -5,18 +5,6 @@
 import numpy as np
 
 from nodes.groups import seed_group
-from nodes.impl.external_stable_diffusion import (
-    RESIZE_MODE_LABELS,
-    SAMPLER_NAME_LABELS,
-    STABLE_DIFFUSION_IMG2IMG_PATH,
-    ResizeMode,
-    SamplerName,
-    decode_base64_image,
-    encode_base64_image,
-    nearest_valid_size,
-    post,
-    verify_api_connection,
-)
 from nodes.node_cache import cached
 from nodes.properties.inputs import (
     BoolInput,
@@ -30,10 +18,18 @@
 from nodes.utils.seed import Seed
 from nodes.utils.utils import get_h_w_c
 
+from ...features import web_ui
+from ...util import decode_base64_image, encode_base64_image, nearest_valid_size
+from ...web_ui import (
+    RESIZE_MODE_LABELS,
+    SAMPLER_NAME_LABELS,
+    STABLE_DIFFUSION_IMG2IMG_PATH,
+    ResizeMode,
+    SamplerName,
+    get_api,
+)
 from .. import auto1111_group
 
-verify_api_connection()
-
 
 @auto1111_group.register(
     schema_id="chainner:external_stable_diffusion:img2img",
@@ -103,6 +99,7 @@ def nearest_valid(n: number) = floor(n / 8) * 8;
         ),
     ],
     decorators=[cached],
+    features=web_ui,
 )
 def image_to_image_node(
     image: np.ndarray,
@@ -135,7 +132,9 @@ def image_to_image_node(
         "resize_mode": resize_mode.value,
         "tiling": tiling,
     }
-    response = post(path=STABLE_DIFFUSION_IMG2IMG_PATH, json_data=request_data)
+    response = get_api().post(
+        path=STABLE_DIFFUSION_IMG2IMG_PATH, json_data=request_data
+    )
     result = decode_base64_image(response["images"][0])
     h, w, _ = get_h_w_c(result)
     assert (w, h) == (
diff --git a/backend/src/packages/chaiNNer_external/external_stable_diffusion/automatic1111/inpaint.py b/backend/src/packages/chaiNNer_external/external_stable_diffusion/automatic1111/inpaint.py
index 2db59435c..32ff2c1c2 100644
--- a/backend/src/packages/chaiNNer_external/external_stable_diffusion/automatic1111/inpaint.py
+++ b/backend/src/packages/chaiNNer_external/external_stable_diffusion/automatic1111/inpaint.py
@@ -7,19 +7,6 @@
 
 import navi
 from nodes.groups import if_enum_group, seed_group
-from nodes.impl.external_stable_diffusion import (
-    RESIZE_MODE_LABELS,
-    SAMPLER_NAME_LABELS,
-    STABLE_DIFFUSION_IMG2IMG_PATH,
-    InpaintingFill,
-    ResizeMode,
-    SamplerName,
-    decode_base64_image,
-    encode_base64_image,
-    nearest_valid_size,
-    post,
-    verify_api_connection,
-)
 from nodes.node_cache import cached
 from nodes.properties.inputs import (
     BoolInput,
@@ -33,10 +20,19 @@
 from nodes.utils.seed import Seed
 from nodes.utils.utils import get_h_w_c
 
+from ...features import web_ui
+from ...util import decode_base64_image, encode_base64_image, nearest_valid_size
+from ...web_ui import (
+    RESIZE_MODE_LABELS,
+    SAMPLER_NAME_LABELS,
+    STABLE_DIFFUSION_IMG2IMG_PATH,
+    InpaintingFill,
+    ResizeMode,
+    SamplerName,
+    get_api,
+)
 from .. import auto1111_group
 
-verify_api_connection()
-
 
 class InpaintArea(Enum):
     WHOLE_PICTURE = "WholePicture"
@@ -132,6 +128,7 @@ def nearest_valid(n: number) = floor(n / 8) * 8;
         ),
     ],
     decorators=[cached],
+    features=web_ui,
 )
 def inpaint_node(
     image: np.ndarray,
@@ -174,7 +171,9 @@ def inpaint_node(
         "resize_mode": resize_mode.value,
         "tiling": tiling,
     }
-    response = post(path=STABLE_DIFFUSION_IMG2IMG_PATH, json_data=request_data)
+    response = get_api().post(
+        path=STABLE_DIFFUSION_IMG2IMG_PATH, json_data=request_data
+    )
     result = decode_base64_image(response["images"][0])
     h, w, _ = get_h_w_c(result)
     if inpaint_area == InpaintArea.ONLY_MASKED:
diff --git a/backend/src/packages/chaiNNer_external/external_stable_diffusion/automatic1111/outpaint.py b/backend/src/packages/chaiNNer_external/external_stable_diffusion/automatic1111/outpaint.py
index 275e50eb0..996089fec 100644
--- a/backend/src/packages/chaiNNer_external/external_stable_diffusion/automatic1111/outpaint.py
+++ b/backend/src/packages/chaiNNer_external/external_stable_diffusion/automatic1111/outpaint.py
@@ -7,19 +7,6 @@
 import numpy as np
 
 from nodes.groups import if_enum_group, seed_group
-from nodes.impl.external_stable_diffusion import (
-    RESIZE_MODE_LABELS,
-    SAMPLER_NAME_LABELS,
-    STABLE_DIFFUSION_IMG2IMG_PATH,
-    InpaintingFill,
-    ResizeMode,
-    SamplerName,
-    decode_base64_image,
-    encode_base64_image,
-    nearest_valid_size,
-    post,
-    verify_api_connection,
-)
 from nodes.node_cache import cached
 from nodes.properties.inputs import (
     BoolInput,
@@ -33,10 +20,19 @@
 from nodes.utils.seed import Seed
 from nodes.utils.utils import get_h_w_c
 
+from ...features import web_ui
+from ...util import decode_base64_image, encode_base64_image, nearest_valid_size
+from ...web_ui import (
+    RESIZE_MODE_LABELS,
+    SAMPLER_NAME_LABELS,
+    STABLE_DIFFUSION_IMG2IMG_PATH,
+    InpaintingFill,
+    ResizeMode,
+    SamplerName,
+    get_api,
+)
 from .. import auto1111_group
 
-verify_api_connection()
-
 
 class OutpaintingMethod(Enum):
     POOR_MAN_OUTPAINTING = 0
@@ -162,6 +158,7 @@ def nearest_valid(n: number) = ceil(n / 64) * 64;
         ),
     ],
     decorators=[cached],
+    features=web_ui,
 )
 def outpaint_node(
     image: np.ndarray,
@@ -253,7 +250,9 @@ def outpaint_node(
             }
         )
 
-    response = post(path=STABLE_DIFFUSION_IMG2IMG_PATH, json_data=request_data)
+    response = get_api().post(
+        path=STABLE_DIFFUSION_IMG2IMG_PATH, json_data=request_data
+    )
     result = decode_base64_image(response["images"][0])
     h, w, _ = get_h_w_c(result)
     assert (w, h) == (
diff --git a/backend/src/packages/chaiNNer_external/external_stable_diffusion/automatic1111/text_to_image.py b/backend/src/packages/chaiNNer_external/external_stable_diffusion/automatic1111/text_to_image.py
index 1ca1f0cce..1c0bef80e 100644
--- a/backend/src/packages/chaiNNer_external/external_stable_diffusion/automatic1111/text_to_image.py
+++ b/backend/src/packages/chaiNNer_external/external_stable_diffusion/automatic1111/text_to_image.py
@@ -5,15 +5,6 @@
 import numpy as np
 
 from nodes.groups import seed_group
-from nodes.impl.external_stable_diffusion import (
-    SAMPLER_NAME_LABELS,
-    STABLE_DIFFUSION_TEXT2IMG_PATH,
-    SamplerName,
-    decode_base64_image,
-    nearest_valid_size,
-    post,
-    verify_api_connection,
-)
 from nodes.node_cache import cached
 from nodes.properties.inputs import (
     BoolInput,
@@ -26,10 +17,16 @@
 from nodes.utils.seed import Seed
 from nodes.utils.utils import get_h_w_c
 
+from ...features import web_ui
+from ...util import decode_base64_image, nearest_valid_size
+from ...web_ui import (
+    SAMPLER_NAME_LABELS,
+    STABLE_DIFFUSION_TEXT2IMG_PATH,
+    SamplerName,
+    get_api,
+)
 from .. import auto1111_group
 
-verify_api_connection()
-
 
 @auto1111_group.register(
     "chainner:external_stable_diffusion:txt2img",
@@ -84,6 +81,7 @@ def nearest_valid(n: number) = floor(n / 8) * 8;
         ),
     ],
     decorators=[cached],
+    features=web_ui,
 )
 def text_to_image_node(
     prompt: Optional[str],
@@ -96,9 +94,8 @@ def text_to_image_node(
     height: int,
     tiling: bool,
 ) -> np.ndarray:
-    width, height = nearest_valid_size(
-        width, height
-    )  # This cooperates with the "image_type" of the ImageOutput
+    # This cooperates with the "image_type" of the ImageOutput
+    width, height = nearest_valid_size(width, height)
     request_data = {
         "prompt": prompt or "",
         "negative_prompt": negative_prompt or "",
@@ -110,7 +107,9 @@ def text_to_image_node(
         "height": height,
         "tiling": tiling,
     }
-    response = post(path=STABLE_DIFFUSION_TEXT2IMG_PATH, json_data=request_data)
+    response = get_api().post(
+        path=STABLE_DIFFUSION_TEXT2IMG_PATH, json_data=request_data
+    )
     result = decode_base64_image(response["images"][0])
     h, w, _ = get_h_w_c(result)
     assert (w, h) == (
diff --git a/backend/src/packages/chaiNNer_external/external_stable_diffusion/automatic1111/upscale.py b/backend/src/packages/chaiNNer_external/external_stable_diffusion/automatic1111/upscale.py
index 95f38d994..28265af73 100644
--- a/backend/src/packages/chaiNNer_external/external_stable_diffusion/automatic1111/upscale.py
+++ b/backend/src/packages/chaiNNer_external/external_stable_diffusion/automatic1111/upscale.py
@@ -5,14 +5,6 @@
 import numpy as np
 
 from nodes.groups import Condition, if_enum_group, if_group
-from nodes.impl.external_stable_diffusion import (
-    STABLE_DIFFUSION_EXTRA_SINGLE_IMAGE_PATH,
-    decode_base64_image,
-    encode_base64_image,
-    get_upscalers,
-    post,
-    verify_api_connection,
-)
 from nodes.node_cache import cached
 from nodes.properties.inputs import (
     BoolInput,
@@ -24,11 +16,16 @@
 from nodes.properties.outputs import ImageOutput
 from nodes.utils.utils import get_h_w_c
 
+from ...features import web_ui
+from ...util import decode_base64_image, encode_base64_image
+from ...web_ui import (
+    STABLE_DIFFUSION_EXTRA_SINGLE_IMAGE_PATH,
+    UPSCALE_NAME_LABELS,
+    UpscalerName,
+    get_api,
+)
 from .. import auto1111_group
 
-verify_api_connection()
-upscaler_enum, upscaler_labels = get_upscalers()
-
 
 class UpscalerMode(Enum):
     SCALE_BY = "ScaleBy"
@@ -70,16 +67,16 @@ class UpscalerMode(Enum):
             BoolInput("Crop to fit", default=True).with_id(5),
         ),
         EnumInput(
-            upscaler_enum,
+            UpscalerName,
             label="Upscaler 1",
-            option_labels=upscaler_labels,
+            option_labels=UPSCALE_NAME_LABELS,
         ),
         BoolInput("Use second upscaler", default=False).with_id(7),
         if_group(Condition.bool(7, True))(
             EnumInput(
-                upscaler_enum,
+                UpscalerName,
                 label="Upscaler 2",
-                option_labels=upscaler_labels,
+                option_labels=UPSCALE_NAME_LABELS,
             ),
             SliderInput(
                 "Upscaler 2 visibility",
@@ -129,6 +126,7 @@ def nearest_valid(n: number) = max(1, floor(n));
         )
     ],
     decorators=[cached],
+    features=web_ui,
 )
 def upscale_node(
     image: np.ndarray,
@@ -137,9 +135,9 @@ def upscale_node(
     width: int,
     height: int,
     crop: bool,
-    upscaler_1: Enum,
+    upscaler_1: UpscalerName,
     use_second_upscaler: bool,
-    upscaler_2: Enum,
+    upscaler_2: UpscalerName,
     upscaler_2_visibility: float,
 ) -> np.ndarray:
     if mode == UpscalerMode.SCALE_BY:
@@ -168,7 +166,7 @@ def upscale_node(
         "upscale_first": False,
         "image": encode_base64_image(image),
     }
-    response = post(
+    response = get_api().post(
         path=STABLE_DIFFUSION_EXTRA_SINGLE_IMAGE_PATH, json_data=request_data
     )
     result = decode_base64_image(response["image"])
diff --git a/backend/src/packages/chaiNNer_external/features.py b/backend/src/packages/chaiNNer_external/features.py
new file mode 100644
index 000000000..da989f764
--- /dev/null
+++ b/backend/src/packages/chaiNNer_external/features.py
@@ -0,0 +1,32 @@
+from api import FeatureState
+from nodes.utils.format import join_english
+
+from . import web_ui_feature_descriptor
+from .web_ui import ApiConfig, get_verified_api
+
+
+async def check_connection() -> FeatureState:
+    config = None
+    try:
+        config = ApiConfig.from_env()
+        api = await get_verified_api()
+        if api is not None:
+            return FeatureState.enabled(f"Connected to {api.base_url}")
+        else:
+            url = config.host
+            if len(config.protocol) == 1:
+                url = f"{config.protocol[0]}://{url}"
+            if len(config.port) == 1:
+                url += f":{config.port[0]}"
+            else:
+                ports = join_english(config.port)
+                url += f" on ports {ports}"
+
+            return FeatureState.disabled(
+                f"No stable diffusion API found. Could not connect to {url}."
+            )
+    except Exception as e:
+        return FeatureState.disabled(f"Could not connect to stable diffusion API: {e}")
+
+
+web_ui = web_ui_feature_descriptor.add_behavior(check=check_connection)
diff --git a/backend/src/packages/chaiNNer_external/util.py b/backend/src/packages/chaiNNer_external/util.py
new file mode 100644
index 000000000..a4fbaa739
--- /dev/null
+++ b/backend/src/packages/chaiNNer_external/util.py
@@ -0,0 +1,44 @@
+from __future__ import annotations
+
+import base64
+import io
+
+import cv2
+import numpy as np
+from PIL import Image
+
+from nodes.impl.image_utils import normalize, to_uint8
+from nodes.utils.utils import get_h_w_c
+
+
+def nearest_valid_size(width, height):
+    return (width // 8) * 8, (height // 8) * 8
+
+
+def decode_base64_image(image_bytes: bytes | str) -> np.ndarray:
+    image = Image.open(io.BytesIO(base64.b64decode(image_bytes)))
+    image_nparray = np.array(image)
+    _, _, c = get_h_w_c(image_nparray)
+    if c == 3:
+        image_nparray = cv2.cvtColor(image_nparray, cv2.COLOR_RGB2BGR)
+    elif c == 4:
+        image_nparray = cv2.cvtColor(image_nparray, cv2.COLOR_RGBA2BGRA)
+    return normalize(image_nparray)
+
+
+def encode_base64_image(image_nparray: np.ndarray) -> str:
+    image_nparray = to_uint8(image_nparray)
+    _, _, c = get_h_w_c(image_nparray)
+    if c == 1:
+        # PIL supports grayscale images just fine, so we don't need to do any conversion
+        pass
+    elif c == 3:
+        image_nparray = cv2.cvtColor(image_nparray, cv2.COLOR_BGR2RGB)
+    elif c == 4:
+        image_nparray = cv2.cvtColor(image_nparray, cv2.COLOR_BGRA2RGBA)
+    else:
+        raise RuntimeError
+    with io.BytesIO() as buffer:
+        with Image.fromarray(image_nparray) as image:
+            image.save(buffer, format="PNG")
+        return base64.b64encode(buffer.getvalue()).decode("utf-8")
diff --git a/backend/src/packages/chaiNNer_external/web_ui.py b/backend/src/packages/chaiNNer_external/web_ui.py
new file mode 100644
index 000000000..13b69e427
--- /dev/null
+++ b/backend/src/packages/chaiNNer_external/web_ui.py
@@ -0,0 +1,264 @@
+from __future__ import annotations
+
+import asyncio
+import os
+from concurrent.futures import ThreadPoolExecutor
+from dataclasses import dataclass
+from enum import Enum
+from typing import Dict, List, Optional
+
+import requests
+from sanic.log import logger
+
+STABLE_DIFFUSION_TEXT2IMG_PATH = f"/sdapi/v1/txt2img"
+STABLE_DIFFUSION_IMG2IMG_PATH = f"/sdapi/v1/img2img"
+STABLE_DIFFUSION_INTERROGATE_PATH = f"/sdapi/v1/interrogate"
+STABLE_DIFFUSION_OPTIONS_PATH = f"/sdapi/v1/options"
+STABLE_DIFFUSION_EXTRA_SINGLE_IMAGE_PATH = f"/sdapi/v1/extra-single-image"
+STABLE_DIFFUSION_UPSCALERS_PATH = f"/sdapi/v1/upscalers"
+
+TIMEOUT_MSG = f"""Stable diffusion request timeout reached."""
+
+STABLE_DIFFUSION_REQUEST_TIMEOUT = float(
+    os.environ.get("STABLE_DIFFUSION_REQUEST_TIMEOUT", None) or "600"
+)  # 10 minutes
+
+_thread_pool = ThreadPoolExecutor(max_workers=4)
+
+
+@dataclass
+class Api:
+    protocol: str
+    host: str
+    port: str
+
+    @property
+    def base_url(self) -> str:
+        return f"{self.protocol}://{self.host}:{self.port}"
+
+    def get_url(self, path: str) -> str:
+        return f"{self.base_url}{path}"
+
+    def get(self, path: str, timeout: float = STABLE_DIFFUSION_REQUEST_TIMEOUT) -> Dict:
+        try:
+            response = requests.get(self.get_url(path), timeout=timeout)
+            if response.status_code != 200:
+                raise ExternalServiceHTTPError(
+                    f"webui GET request to {path} returned status code: {response.status_code}: {response.text}"
+                )
+            return response.json()
+        except requests.ConnectionError as exc:
+            raise ExternalServiceConnectionError(
+                f"webui GET request to {path} connection failed"
+            ) from exc
+        except requests.exceptions.ReadTimeout as exc:
+            raise ExternalServiceTimeout(TIMEOUT_MSG) from exc
+
+    async def get_async(
+        self, path: str, timeout: float = STABLE_DIFFUSION_REQUEST_TIMEOUT
+    ) -> Dict:
+        def run():
+            return self.get(path, timeout)
+
+        loop = asyncio.get_event_loop()
+        result = await loop.run_in_executor(_thread_pool, run)
+        return result
+
+    def post(self, path: str, json_data: Dict) -> Dict:
+        try:
+            response = requests.post(
+                self.get_url(path),
+                json=json_data,
+                timeout=STABLE_DIFFUSION_REQUEST_TIMEOUT,
+            )
+            if response.status_code != 200:
+                raise ExternalServiceHTTPError(
+                    f"webui POST request to {path} returned status code: {response.status_code}: {response.text}"
+                )
+            return response.json()
+        except requests.ConnectionError as exc:
+            raise ExternalServiceConnectionError(
+                f"webui POST request to {path} connection failed"
+            ) from exc
+        except requests.exceptions.ReadTimeout as exc:
+            raise ExternalServiceTimeout(TIMEOUT_MSG) from exc
+
+
+@dataclass
+class ApiConfig:
+    protocol: List[str]
+    host: str
+    port: List[str]
+
+    @staticmethod
+    def from_env():
+        protocol = os.environ.get("STABLE_DIFFUSION_PROTOCOL", None)
+        host = os.environ.get("STABLE_DIFFUSION_HOST", "127.0.0.1")
+        port = os.environ.get("STABLE_DIFFUSION_PORT", None)
+
+        if protocol:
+            protocol = [protocol]
+        else:
+            protocol = ["http"] if host == "127.0.0.1" else ["https", "http"]
+
+        if port:
+            port = [port]
+        else:
+            port = ["7860", "7861"]
+
+        return ApiConfig(protocol, host, port)
+
+    def list_apis(self) -> List[Api]:
+        apis: List[Api] = []
+        for protocol in self.protocol:
+            for port in self.port:
+                apis.append(Api(protocol, self.host, port))
+        return apis
+
+
+_CURRENT_API: Optional[Api] = None
+
+
+async def get_verified_api() -> Api | None:
+    timeout = 1  # seconds
+
+    global _CURRENT_API  # pylint: disable=global-statement
+    if _CURRENT_API is not None:
+        # redo check to see if it's still alive
+        try:
+            await _CURRENT_API.get_async(STABLE_DIFFUSION_OPTIONS_PATH, timeout=timeout)
+            return _CURRENT_API
+        except:
+            _CURRENT_API = None
+
+    # check all apis in parallel
+    apis = ApiConfig.from_env().list_apis()
+    assert len(apis) > 0
+    tasks = [
+        api.get_async(STABLE_DIFFUSION_OPTIONS_PATH, timeout=timeout) for api in apis
+    ]
+    # because good API design just isn't pythonic, asyncio.gather will return List[Any].
+    results = await asyncio.gather(*tasks, return_exceptions=True)
+
+    # find the first working api
+    for api, result in zip(apis, results):
+        if not isinstance(result, Exception):
+            logger.info(f"Found stable diffusion API at {api.base_url}")
+            _CURRENT_API = api
+            return api
+
+    return None
+
+
+def get_api() -> Api:
+    if _CURRENT_API is not None:
+        return _CURRENT_API
+
+    api = asyncio.run(get_verified_api())
+    if api is None:
+        raise RuntimeError("No stable diffusion API found")
+    return api
+
+
+class ExternalServiceHTTPError(Exception):
+    pass
+
+
+class ExternalServiceConnectionError(Exception):
+    pass
+
+
+class ExternalServiceTimeout(Exception):
+    pass
+
+
+class UpscalerName(Enum):
+    LANCZOS = "Lanczos"
+    NEAREST = "Nearest"
+    LDSR = "LDSR"
+    ESRGAN_4 = "ESRGAN_4x"
+    REAL_ESRGAN_4 = "R-ESRGAN 4x+"
+    REAL_ESRGAN_4_ANIME6B = "R-ESRGAN 4x+ Anime6B"
+    SCUNET_GAN = "ScuNET GAN"
+    SCUNET_PSNR = "ScuNET PSNR"
+    SWIN_IR_4 = "SwinIR 4x"
+
+
+UPSCALE_NAME_LABELS = {
+    UpscalerName.LANCZOS: "Lanczos",
+    UpscalerName.NEAREST: "Nearest",
+    UpscalerName.LDSR: "LDSR",
+    UpscalerName.ESRGAN_4: "ESRGAN 4x",
+    UpscalerName.REAL_ESRGAN_4: "Real ESRGAN 4x+",
+    UpscalerName.REAL_ESRGAN_4_ANIME6B: "Real ESRGAN 4x+ Anime6B",
+    UpscalerName.SCUNET_GAN: "ScuNET GAN",
+    UpscalerName.SCUNET_PSNR: "ScuNET PSNR",
+    UpscalerName.SWIN_IR_4: "SwinIR 4x",
+}
+
+
+class SamplerName(Enum):
+    EULER = "Euler"
+    EULER_A = "Euler a"
+    LMS = "LMS"
+    HEUN = "Heun"
+    DPM2 = "DPM2"
+    DPM2_A = "DPM2 a"
+    DPMpp_2S_A = "DPM++ 2S a"
+    DPMpp_2M = "DPM++ 2M"
+    DPMpp_SDE = "DPM++ SDE"
+    DPM_FAST = "DPM fast"
+    DPM_A = "DPM adaptive"
+    LMS_KARRAS = "LMS Karras"
+    DPM2_KARRAS = "DPM2 Karras"
+    DPM2_A_KARRAS = "DPM2 a Karras"
+    DPMpp_2S_A_KARRAS = "DPM++ 2S a Karras"
+    DPMpp_2M_KARRAS = "DPM++ 2M Karras"
+    DPMpp_SDE_KARRAS = "DPM++ SDE Karras"
+    DDIM = "DDIM"
+    PLMS = "PLMS"
+
+
+SAMPLER_NAME_LABELS = {
+    SamplerName.EULER: "Euler",
+    SamplerName.EULER_A: "Euler a",
+    SamplerName.LMS: "LMS",
+    SamplerName.HEUN: "Heun",
+    SamplerName.DPM2: "DPM2",
+    SamplerName.DPM2_A: "DPM2 a",
+    SamplerName.DPMpp_2S_A: "DPM++ 2S a",
+    SamplerName.DPMpp_2M: "DPM++ 2M",
+    SamplerName.DPMpp_SDE: "DPM++ SDE",
+    SamplerName.DPM_FAST: "DPM fast",
+    SamplerName.DPM_A: "DPM adaptive",
+    SamplerName.LMS_KARRAS: "LMS Karras",
+    SamplerName.DPM2_KARRAS: "DPM2 Karras",
+    SamplerName.DPM2_A_KARRAS: "DPM2 a Karras",
+    SamplerName.DPMpp_2S_A_KARRAS: "DPM++ 2S a Karras",
+    SamplerName.DPMpp_2M_KARRAS: "DPM++ 2M Karras",
+    SamplerName.DPMpp_SDE_KARRAS: "DPM++ SDE Karras",
+    SamplerName.DDIM: "DDIM",
+    SamplerName.PLMS: "PLMS",
+}
+
+
+class ResizeMode(Enum):
+    JUST_RESIZE = 0
+    CROP_AND_RESIZE = 1
+    RESIZE_AND_FILL = 2
+    LATENT_UPSCALE = 3
+
+
+RESIZE_MODE_LABELS = {
+    ResizeMode.JUST_RESIZE: "Just resize",
+    ResizeMode.CROP_AND_RESIZE: "Crop and resize",
+    ResizeMode.RESIZE_AND_FILL: "Resize and fill",
+    ResizeMode.LATENT_UPSCALE: "Just resize (Latent upscale)",
+}
+
+
+class InpaintingFill(Enum):
+    FILL = 0
+    ORIGINAL = 1
+    LATENT_NOISE = 2
+    LATENT_NOTHING = 3
diff --git a/backend/src/packages/chaiNNer_ncnn/__init__.py b/backend/src/packages/chaiNNer_ncnn/__init__.py
index eacec0d96..190b1dbd5 100644
--- a/backend/src/packages/chaiNNer_ncnn/__init__.py
+++ b/backend/src/packages/chaiNNer_ncnn/__init__.py
@@ -18,6 +18,7 @@
 
 package = add_package(
     __file__,
+    id="chaiNNer_ncnn",
     name="NCNN",
     description=(
         f"{general} NCNN uses Vulkan for GPU"
diff --git a/backend/src/packages/chaiNNer_onnx/__init__.py b/backend/src/packages/chaiNNer_onnx/__init__.py
index 2929fe590..119a21951 100644
--- a/backend/src/packages/chaiNNer_onnx/__init__.py
+++ b/backend/src/packages/chaiNNer_onnx/__init__.py
@@ -38,6 +38,7 @@ def get_onnx_runtime():
 
 package = add_package(
     __file__,
+    id="chaiNNer_onnx",
     name="ONNX",
     description=package_description,
     dependencies=[
diff --git a/backend/src/packages/chaiNNer_pytorch/__init__.py b/backend/src/packages/chaiNNer_pytorch/__init__.py
index 107595c5d..dda65d9d7 100644
--- a/backend/src/packages/chaiNNer_pytorch/__init__.py
+++ b/backend/src/packages/chaiNNer_pytorch/__init__.py
@@ -97,6 +97,7 @@ def get_pytorch():
 
 package = add_package(
     __file__,
+    id="chaiNNer_pytorch",
     name="PyTorch",
     description=package_description,
     dependencies=[
diff --git a/backend/src/packages/chaiNNer_standard/__init__.py b/backend/src/packages/chaiNNer_standard/__init__.py
index 3ed2caf81..5296d4578 100644
--- a/backend/src/packages/chaiNNer_standard/__init__.py
+++ b/backend/src/packages/chaiNNer_standard/__init__.py
@@ -5,6 +5,7 @@
 
 package = add_package(
     __file__,
+    id="chaiNNer_standard",
     name="chaiNNer_standard",
     description="The standard set of nodes for chaiNNer.",
     dependencies=[
diff --git a/backend/src/server.py b/backend/src/server.py
index aa0af6e67..a733386ab 100644
--- a/backend/src/server.py
+++ b/backend/src/server.py
@@ -9,7 +9,7 @@
 from concurrent.futures import ThreadPoolExecutor
 from dataclasses import asdict, dataclass
 from json import dumps as stringify
-from typing import Dict, List, Optional, TypedDict, Union
+from typing import Dict, List, Optional, Tuple, TypedDict, Union
 
 import psutil
 from sanic import Sanic
@@ -133,6 +133,7 @@ async def nodes(_request: Request):
             "hasSideEffects": node.side_effects,
             "deprecated": node.deprecated,
             "defaultNodes": node.default_nodes,
+            "features": node.features,
         }
         node_list.append(node_dict)
 
@@ -278,7 +279,7 @@ async def run_individual(request: Request):
         return json({"success": False, "error": str(exception)})
 
 
-@app.route("/clearcache/individual", methods=["POST"])
+@app.route("/clear-cache/individual", methods=["POST"])
 async def clear_cache_individual(request: Request):
     await nodes_available()
     ctx = AppContext.get(request.app)
@@ -354,7 +355,7 @@ async def kill(request: Request):
         return json(errorResponse("Error killing execution!", exception), status=500)
 
 
-@app.route("/listgpus/ncnn", methods=["GET"])
+@app.route("/list-gpus/ncnn", methods=["GET"])
 async def list_ncnn_gpus(_request: Request):
     """Lists the available GPUs for NCNN"""
     await nodes_available()
@@ -378,7 +379,7 @@ async def list_ncnn_gpus(_request: Request):
             return json([])
 
 
-@app.route("/listgpus/nvidia", methods=["GET"])
+@app.route("/list-gpus/nvidia", methods=["GET"])
 async def list_nvidia_gpus(_request: Request):
     """Lists the available GPUs for NCNN"""
     await nodes_available()
@@ -429,11 +430,15 @@ async def system_usage(_request: Request):
     return json([asdict(x) for x in stats_list])
 
 
-@app.route("/dependencies", methods=["GET"])
-async def get_dependencies(_request: Request):
+@app.route("/packages", methods=["GET"])
+async def get_packages(_request: Request):
     await nodes_available()
-    all_dependencies = []
+
+    packages = []
     for package in api.registry.packages.values():
+        if package.name == "chaiNNer_standard":
+            continue
+
         pkg_dependencies = []
         for pkg_dep in package.dependencies:
             installed_version = installed_packages.get(pkg_dep.pypi_name, None)
@@ -445,17 +450,74 @@ async def get_dependencies(_request: Request):
             else:
                 pkg_dep_item["installed"] = installed_version
             pkg_dependencies.append(pkg_dep_item)
-        if package.name == "chaiNNer_standard":
+
+        packages.append(
+            {
+                "id": package.id,
+                "name": package.name,
+                "description": package.description,
+                "dependencies": [d.toDict() for d in package.dependencies],
+                "features": [f.toDict() for f in package.features],
+            }
+        )
+
+    return json(packages)
+
+
+@app.route("/installed-dependencies", methods=["GET"])
+async def get_installed_dependencies(_request: Request):
+    await nodes_available()
+
+    installed_deps: Dict[str, str] = {}
+    for package in api.registry.packages.values():
+        for pkg_dep in package.dependencies:
+            installed_version = installed_packages.get(pkg_dep.pypi_name, None)
+            if installed_version is not None:
+                installed_deps[pkg_dep.pypi_name] = installed_version
+
+    return json(installed_deps)
+
+
+@app.route("/features")
+async def get_features(_request: Request):
+    await nodes_available()
+
+    features: List[Tuple[api.Feature, api.Package]] = []
+    for package in api.registry.packages.values():
+        for feature in package.features:
+            features.append((feature, package))
+
+    # check all features in parallel
+    async def check(feature: api.Feature) -> Union[api.FeatureState, None]:
+        if feature.behavior is None:
+            # no behavior assigned
+            return None
+
+        try:
+            return await feature.behavior.check()
+        except Exception as e:
+            return api.FeatureState.disabled(str(e))
+
+    # because good API design just isn't pythonic, asyncio.gather will return List[Any].
+    results: List[Union[api.FeatureState, None]] = await asyncio.gather(
+        *[check(f) for f, _ in features]
+    )
+
+    features_json = []
+    for (feature, package), state in zip(features, results):
+        if state is None:
             continue
-        else:
-            all_dependencies.append(
-                {
-                    "name": package.name,
-                    "dependencies": pkg_dependencies,
-                    "description": package.description,
-                }
-            )
-    return json(all_dependencies)
+
+        features_json.append(
+            {
+                "packageId": package.id,
+                "featureId": feature.id,
+                "enabled": state.is_enabled,
+                "details": state.details,
+            }
+        )
+
+    return json(features_json)
 
 
 async def import_packages(
diff --git a/src/common/Backend.ts b/src/common/Backend.ts
index e81ce3eb6..4d58bc1c0 100644
--- a/src/common/Backend.ts
+++ b/src/common/Backend.ts
@@ -2,15 +2,18 @@ import * as undici from 'undici';
 import {
     BackendJsonNode,
     Category,
+    FeatureState,
     InputId,
     InputValue,
     NodeSchema,
     OutputData,
     OutputTypes,
+    Package,
+    PyPiName,
     PythonInfo,
     SchemaId,
+    Version,
 } from './common-types';
-import { Package } from './dependencies';
 import { isRenderer } from './env';
 
 export interface BackendSuccessResponse {
@@ -97,11 +100,39 @@ export interface BackendError {
     error: string;
 }
 
-export interface ServerError {
+export interface ServerErrorJson {
     message: string;
     description: string;
     status: number;
 }
+export class ServerError extends Error {
+    description: string;
+
+    status: number;
+
+    constructor(message: string, description: string, status: number) {
+        super(message);
+        this.message = message;
+        this.description = description;
+        this.status = status;
+    }
+
+    static isJson(json: unknown): json is ServerErrorJson {
+        if (typeof json !== 'object' || json === null) {
+            return false;
+        }
+        const obj = json as Record<string, unknown>;
+        return (
+            typeof obj.message === 'string' &&
+            typeof obj.description === 'string' &&
+            typeof obj.status === 'number'
+        );
+    }
+
+    static fromJson(json: ServerErrorJson): ServerError {
+        return new ServerError(json.message, json.description, json.status);
+    }
+}
 
 /**
  * A wrapper to communicate with the backend.
@@ -144,13 +175,17 @@ export class Backend {
             options.signal = signal;
         }
         const resp = await (isRenderer ? fetch : undici.fetch)(`${this.url}${path}`, options);
-        return (await resp.json()) as T;
+        const result = (await resp.json()) as T;
+        if (ServerError.isJson(result)) {
+            throw ServerError.fromJson(result);
+        }
+        return result;
     }
 
     /**
      * Gets a list of all nodes as well as the node information
      */
-    nodes(): Promise<BackendNodesResponse | ServerError> {
+    nodes(): Promise<BackendNodesResponse> {
         return this.fetchJson('/nodes', 'GET');
     }
 
@@ -191,21 +226,21 @@ export class Backend {
      * Clears the cache of the passed in node id
      */
     clearNodeCacheIndividual(id: string): Promise<BackendResult<null>> {
-        return this.fetchJson('/clearcache/individual', 'POST', { id });
+        return this.fetchJson('/clear-cache/individual', 'POST', { id });
     }
 
     /**
      * Gets a list of all NCNN GPU devices and their indexes
      */
     listNcnnGpus(): Promise<string[]> {
-        return this.fetchJson('/listgpus/ncnn', 'GET');
+        return this.fetchJson('/list-gpus/ncnn', 'GET');
     }
 
     /**
      * Gets a list of all Nvidia GPU devices and their indexes
      */
     listNvidiaGpus(): Promise<string[]> {
-        return this.fetchJson('/listgpus/nvidia', 'GET');
+        return this.fetchJson('/list-gpus/nvidia', 'GET');
     }
 
     pythonInfo(): Promise<PythonInfo> {
@@ -216,8 +251,16 @@ export class Backend {
         return this.fetchJson('/system-usage', 'GET');
     }
 
-    dependencies(): Promise<Package[]> {
-        return this.fetchJson('/dependencies', 'GET');
+    packages(): Promise<Package[]> {
+        return this.fetchJson('/packages', 'GET');
+    }
+
+    installedDependencies(): Promise<Partial<Record<PyPiName, Version>>> {
+        return this.fetchJson('/installed-dependencies', 'GET');
+    }
+
+    features(): Promise<FeatureState[]> {
+        return this.fetchJson('/features', 'GET');
     }
 }
 
diff --git a/src/common/SchemaMap.ts b/src/common/SchemaMap.ts
index f65dc951e..9cc2d78ce 100644
--- a/src/common/SchemaMap.ts
+++ b/src/common/SchemaMap.ts
@@ -15,6 +15,7 @@ const BLANK_SCHEMA: NodeSchema = {
     schemaId: '' as SchemaId,
     hasSideEffects: false,
     deprecated: false,
+    features: [],
 };
 
 export class SchemaMap {
diff --git a/src/common/Validity.ts b/src/common/Validity.ts
index 4ab809c50..0e9f31491 100644
--- a/src/common/Validity.ts
+++ b/src/common/Validity.ts
@@ -5,3 +5,9 @@ export type Validity =
 export const VALID: Validity = { isValid: true };
 
 export const invalid = (reason: string): Validity => ({ isValid: false, reason });
+
+export const bothValid = (a: Validity, b: Validity): Validity => {
+    if (!a.isValid) return a;
+    if (!b.isValid) return b;
+    return VALID;
+};
diff --git a/src/common/common-types.ts b/src/common/common-types.ts
index b3fe93b5e..83cfe3483 100644
--- a/src/common/common-types.ts
+++ b/src/common/common-types.ts
@@ -21,6 +21,9 @@ export type SchemaId = string & { readonly __schemaId: never };
 export type InputId = number & { readonly __inputId: never };
 export type OutputId = number & { readonly __outputId: never };
 export type GroupId = number & { readonly __groupId: never };
+export type PackageId = string & { readonly __packageId: never };
+export type FeatureId = string & { readonly __featureId: never };
+export type PyPiName = string & { readonly __pyPiName: never };
 
 export type InputValue = InputSchemaValue | undefined;
 export type InputSchemaValue = string | number;
@@ -256,6 +259,7 @@ export interface NodeSchema {
     readonly schemaId: SchemaId;
     readonly hasSideEffects: boolean;
     readonly deprecated: boolean;
+    readonly features: readonly FeatureId[];
 }
 
 export interface DefaultNode {
@@ -285,6 +289,39 @@ export interface EdgeData {
     targetY?: number;
 }
 
+export interface PyPiPackage {
+    readonly displayName: string;
+    readonly pypiName: PyPiName;
+    readonly version: Version;
+    readonly findLink?: string | null;
+    /**
+     * A size estimate (in bytes) for the whl file to download.
+     */
+    readonly sizeEstimate: number;
+    readonly autoUpdate: boolean;
+}
+
+export interface Feature {
+    readonly id: FeatureId;
+    readonly name: string;
+    readonly description: string;
+}
+
+export interface Package {
+    readonly id: PackageId;
+    readonly name: string;
+    readonly description: string;
+    readonly dependencies: readonly PyPiPackage[];
+    readonly features: readonly Feature[];
+}
+
+export interface FeatureState {
+    readonly packageId: PackageId;
+    readonly featureId: FeatureId;
+    readonly enabled: boolean;
+    readonly details?: string | null;
+}
+
 /**
  * A valid semantic version or a string that can be coerced into one.
  */
diff --git a/src/common/dependencies.ts b/src/common/dependencies.ts
deleted file mode 100644
index 39818312c..000000000
--- a/src/common/dependencies.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { Version } from './common-types';
-
-export interface PyPiPackage {
-    displayName: string;
-    pypiName: string;
-    version: Version;
-    findLink?: string | null;
-    /**
-     * A size estimate (in bytes) for the whl file to download.
-     */
-    sizeEstimate: number;
-    autoUpdate: boolean;
-    installed: Version | null;
-}
-export interface Package {
-    name: string;
-    dependencies: PyPiPackage[];
-    description?: string;
-}
diff --git a/src/common/externalIntegrations.ts b/src/common/externalIntegrations.ts
deleted file mode 100644
index 74289d98f..000000000
--- a/src/common/externalIntegrations.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-export interface Integration {
-    name: string;
-    url: string;
-    port: number;
-}
-
-export const externalIntegrations: Integration[] = [
-    {
-        name: 'AUTOMATIC1111/stable-diffusion-webui',
-        url: process.env.STABLE_DIFFUSION_HOST ?? '127.0.0.1',
-        port: Number(process.env.STABLE_DIFFUSION_PORT ?? 7860),
-    },
-];
diff --git a/src/common/nodes/checkFeatures.ts b/src/common/nodes/checkFeatures.ts
new file mode 100644
index 000000000..48d883e23
--- /dev/null
+++ b/src/common/nodes/checkFeatures.ts
@@ -0,0 +1,25 @@
+import { Feature, FeatureId, FeatureState } from '../common-types';
+import { joinEnglish } from '../util';
+import { VALID, Validity, invalid } from '../Validity';
+
+export const checkFeatures = (
+    features: readonly FeatureId[],
+    featureMap: ReadonlyMap<FeatureId, Feature>,
+    featureStates: ReadonlyMap<FeatureId, FeatureState>
+): Validity => {
+    const nonEnabledFeatures = features.filter((f) => !featureStates.get(f)?.enabled);
+    if (nonEnabledFeatures.length === 0) return VALID;
+
+    const getName = (f: FeatureId) => featureMap.get(f)?.name ?? f;
+
+    let prefix;
+    if (nonEnabledFeatures.length === 1) {
+        prefix = `The feature ${getName(nonEnabledFeatures[0])} is`;
+    } else {
+        prefix = `The features ${joinEnglish(nonEnabledFeatures.map(getName))} are`;
+    }
+
+    return invalid(
+        `${prefix} required to run this node. See the dependency manager for more details.`
+    );
+};
diff --git a/src/common/pip.ts b/src/common/pip.ts
index 39f9ca78e..42743f1b4 100644
--- a/src/common/pip.ts
+++ b/src/common/pip.ts
@@ -1,7 +1,6 @@
 /* eslint-disable no-param-reassign */
 import { spawn } from 'child_process';
-import { PythonInfo, Version } from './common-types';
-import { Package } from './dependencies';
+import { PyPiPackage, PythonInfo } from './common-types';
 import { sanitizedEnv } from './env';
 import { log } from './log';
 import { pipInstallWithProgress } from './pipInstallWithProgress';
@@ -58,27 +57,11 @@ export const runPip = async (
     });
 };
 
-export type PipList = { [packageName: string]: Version | undefined };
-
-export const runPipList = async (info: PythonInfo, onStdio?: OnStdio): Promise<PipList> => {
-    const output = await runPip(info, ['list', '--format=json'], onStdio);
-
-    interface ListEntry {
-        name: string;
-        version: Version;
-    }
-    const list = JSON.parse(output) as ListEntry[];
-
-    return Object.fromEntries(list.map((e) => [e.name, e.version]));
-};
-
-const getFindLinks = (dependencies: readonly Package[]): string[] => {
+const getFindLinks = (dependencies: readonly PyPiPackage[]): string[] => {
     const links = new Set<string>();
-    for (const d of dependencies) {
-        for (const p of d.dependencies) {
-            if (p.findLink) {
-                links.add(p.findLink);
-            }
+    for (const p of dependencies) {
+        if (p.findLink) {
+            links.add(p.findLink);
         }
     }
     return [...links];
@@ -86,26 +69,22 @@ const getFindLinks = (dependencies: readonly Package[]): string[] => {
 
 export const runPipInstall = async (
     info: PythonInfo,
-    dependencies: readonly Package[],
+    dependencies: readonly PyPiPackage[],
     onProgress?: (percentage: number) => void,
     onStdio?: OnStdio
 ): Promise<void> => {
     onProgress?.(0);
     if (onProgress === undefined) {
         // TODO: implement progress via this method (if possible)
-        const deps = dependencies
-            .map((d) => d.dependencies.map((p) => `${p.pypiName}==${p.version}`))
-            .flat();
+        const deps = dependencies.map((p) => `${p.pypiName}==${p.version}`);
         const findLinks = getFindLinks(dependencies).flatMap((l) => ['--extra-index-url', l]);
 
         await runPip(info, ['install', '--upgrade', ...deps, ...findLinks], onStdio);
     } else {
         const { python } = info;
-        for (const dep of dependencies) {
-            for (const pkg of dep.dependencies) {
-                // eslint-disable-next-line no-await-in-loop
-                await pipInstallWithProgress(python, pkg, onProgress, onStdio);
-            }
+        for (const pkg of dependencies) {
+            // eslint-disable-next-line no-await-in-loop
+            await pipInstallWithProgress(python, pkg, onProgress, onStdio);
         }
     }
     onProgress?.(100);
@@ -113,12 +92,12 @@ export const runPipInstall = async (
 
 export const runPipUninstall = async (
     info: PythonInfo,
-    dependencies: readonly Package[],
+    dependencies: readonly PyPiPackage[],
     onProgress?: (percentage: number) => void,
     onStdio?: OnStdio
 ): Promise<void> => {
     onProgress?.(10);
-    const deps = dependencies.map((d) => d.dependencies.map((p) => p.pypiName)).flat();
+    const deps = dependencies.map((p) => p.pypiName);
     onProgress?.(25);
     await runPip(info, ['uninstall', '-y', ...deps], onStdio);
     onProgress?.(100);
diff --git a/src/common/pipInstallWithProgress.ts b/src/common/pipInstallWithProgress.ts
index 3093cfbc4..89bd6855d 100644
--- a/src/common/pipInstallWithProgress.ts
+++ b/src/common/pipInstallWithProgress.ts
@@ -5,7 +5,7 @@ import Downloader from 'nodejs-file-downloader';
 import os from 'os';
 import path from 'path';
 import { URL } from 'url';
-import { PyPiPackage } from './dependencies';
+import { PyPiPackage } from './common-types';
 import { sanitizedEnv } from './env';
 import { log } from './log';
 import { noop } from './util';
diff --git a/src/main/cli/run.ts b/src/main/cli/run.ts
index 4ed0695ea..dcc4c710d 100644
--- a/src/main/cli/run.ts
+++ b/src/main/cli/run.ts
@@ -88,10 +88,7 @@ const getBackendNodes = async (backend: Backend): Promise<NodeSchema[]> => {
     for (let i = 0; i < maxTries; i += 1) {
         try {
             // eslint-disable-next-line no-await-in-loop
-            const response = await backend.nodes();
-            if ('nodes' in response) {
-                return response.nodes;
-            }
+            return (await backend.nodes()).nodes;
         } catch {
             // ignore error
         }
diff --git a/src/renderer/components/Handle.tsx b/src/renderer/components/Handle.tsx
index eb3d73ed1..da95e3301 100644
--- a/src/renderer/components/Handle.tsx
+++ b/src/renderer/components/Handle.tsx
@@ -1,11 +1,11 @@
 import { Box, Tooltip, chakra } from '@chakra-ui/react';
 import React, { memo } from 'react';
-import ReactMarkdown from 'react-markdown';
 import { Connection, Position, Handle as RFHandle } from 'reactflow';
 import { useContext } from 'use-context-selector';
 import { Validity } from '../../common/Validity';
 import { FakeNodeContext } from '../contexts/FakeExampleContext';
 import { noContextMenu } from '../hooks/useContextMenu';
+import { Markdown } from './Markdown';
 
 export type HandleType = 'input' | 'output';
 
@@ -35,7 +35,9 @@ const HandleElement = memo(
                 display={validity.isValid ? 'none' : 'block'}
                 label={
                     validity.isValid ? undefined : (
-                        <ReactMarkdown>{`Unable to connect: ${validity.reason}`}</ReactMarkdown>
+                        <Markdown
+                            nonInteractive
+                        >{`Unable to connect: ${validity.reason}`}</Markdown>
                     )
                 }
                 mt={1}
diff --git a/src/renderer/components/Header/AppInfo.tsx b/src/renderer/components/Header/AppInfo.tsx
index 80d2d11f0..06e1c38ca 100644
--- a/src/renderer/components/Header/AppInfo.tsx
+++ b/src/renderer/components/Header/AppInfo.tsx
@@ -23,9 +23,7 @@ import {
     Tooltip,
     useDisclosure,
 } from '@chakra-ui/react';
-import ChakraUIRenderer from 'chakra-ui-markdown-renderer';
 import { memo, useEffect, useRef, useState } from 'react';
-import ReactMarkdown from 'react-markdown';
 import semver from 'semver';
 import { useContext } from 'use-context-selector';
 import { GitHubRelease, getLatestVersionIfUpdateAvailable } from '../../../common/api/github';
@@ -33,6 +31,7 @@ import { ipcRenderer } from '../../../common/safeIpc';
 import logo from '../../../public/icons/png/256x256.png';
 import { SettingsContext } from '../../contexts/SettingsContext';
 import { useAsyncEffect } from '../../hooks/useAsyncEffect';
+import { Markdown } from '../Markdown';
 
 export const AppInfo = memo(() => {
     const { useCheckUpdOnStrtUp } = useContext(SettingsContext);
@@ -135,12 +134,7 @@ export const AppInfo = memo(() => {
                     <ModalHeader>Update Changelog</ModalHeader>
                     <ModalCloseButton />
                     <ModalBody bgColor="var(--bg-900)">
-                        <ReactMarkdown
-                            skipHtml
-                            components={ChakraUIRenderer()}
-                        >
-                            {changelog ?? ''}
-                        </ReactMarkdown>
+                        <Markdown>{changelog ?? ''}</Markdown>
                     </ModalBody>
 
                     <ModalFooter>
diff --git a/src/renderer/components/NodeDocumentation/docsMarkdown.tsx b/src/renderer/components/Markdown.tsx
similarity index 65%
rename from src/renderer/components/NodeDocumentation/docsMarkdown.tsx
rename to src/renderer/components/Markdown.tsx
index 291f6ab81..9d505de7a 100644
--- a/src/renderer/components/NodeDocumentation/docsMarkdown.tsx
+++ b/src/renderer/components/Markdown.tsx
@@ -2,11 +2,12 @@ import { Code, Link, Text } from '@chakra-ui/react';
 import ChakraUIRenderer from 'chakra-ui-markdown-renderer';
 import { memo } from 'react';
 import { Components } from 'react-markdown';
+import { ReactMarkdown } from 'react-markdown/lib/react-markdown';
 import { useContext } from 'use-context-selector';
-import { SchemaId } from '../../../common/common-types';
-import { BackendContext } from '../../contexts/BackendContext';
-import { SupportHighlighting } from './HighlightContainer';
-import { SchemaLink } from './SchemaLink';
+import { SchemaId } from '../../common/common-types';
+import { BackendContext } from '../contexts/BackendContext';
+import { SupportHighlighting } from './NodeDocumentation/HighlightContainer';
+import { SchemaLink } from './NodeDocumentation/SchemaLink';
 
 const getDocsMarkdownComponents = (interactive: boolean): Components => {
     return {
@@ -15,7 +16,7 @@ const getDocsMarkdownComponents = (interactive: boolean): Components => {
                 <SupportHighlighting>
                     <Text
                         fontSize="md"
-                        marginTop={1}
+                        my={2}
                         userSelect="text"
                     >
                         {children}
@@ -30,6 +31,7 @@ const getDocsMarkdownComponents = (interactive: boolean): Components => {
                     href={href}
                     textColor={interactive && href ? 'var(--link-color)' : 'inherit'}
                     textDecoration={interactive && href ? 'underline' : 'inherit'}
+                    userSelect="text"
                 >
                     {children}
                 </Link>
@@ -55,6 +57,7 @@ const getDocsMarkdownComponents = (interactive: boolean): Components => {
                     // eslint-disable-next-line react/jsx-props-no-spreading
                     {...props}
                     className={className}
+                    userSelect="text"
                 >
                     {children}
                 </Code>
@@ -63,5 +66,24 @@ const getDocsMarkdownComponents = (interactive: boolean): Components => {
     };
 };
 
-export const docsMarkdown = ChakraUIRenderer(getDocsMarkdownComponents(true));
-export const tooltipDocsMarkdown = ChakraUIRenderer(getDocsMarkdownComponents(false));
+const interactiveDocsMarkdown = ChakraUIRenderer(getDocsMarkdownComponents(true));
+const docsMarkdown = ChakraUIRenderer(getDocsMarkdownComponents(false));
+
+export interface MarkdownProps {
+    children: string;
+    nonInteractive?: boolean;
+}
+
+export const Markdown = memo(({ children, nonInteractive = false }: MarkdownProps) => {
+    const components = nonInteractive ? docsMarkdown : interactiveDocsMarkdown;
+
+    return (
+        <ReactMarkdown
+            skipHtml
+            className="no-child-margin"
+            components={components}
+        >
+            {children}
+        </ReactMarkdown>
+    );
+});
diff --git a/src/renderer/components/NodeDocumentation/NodeDocs.tsx b/src/renderer/components/NodeDocumentation/NodeDocs.tsx
index c58eb3e11..eb47feca7 100644
--- a/src/renderer/components/NodeDocumentation/NodeDocs.tsx
+++ b/src/renderer/components/NodeDocumentation/NodeDocs.tsx
@@ -15,7 +15,6 @@ import {
     useMediaQuery,
 } from '@chakra-ui/react';
 import { memo } from 'react';
-import { ReactMarkdown } from 'react-markdown/lib/react-markdown';
 import { useContext } from 'use-context-selector';
 import { Condition, Input, NodeSchema, Output, TextInput } from '../../../common/common-types';
 import { isTautology } from '../../../common/nodes/condition';
@@ -28,9 +27,9 @@ import { capitalize, isAutoInput } from '../../../common/util';
 import { BackendContext } from '../../contexts/BackendContext';
 import { getCategoryAccentColor, getTypeAccentColors } from '../../helpers/accentColors';
 import { IconFactory } from '../CustomIcons';
+import { Markdown } from '../Markdown';
 import { TypeTag } from '../TypeTag';
 import { ConditionExplanation } from './ConditionExplanation';
-import { docsMarkdown } from './docsMarkdown';
 import { DropDownOptions } from './DropDownOptions';
 import { NoHighlighting, SupportHighlighting } from './HighlightContainer';
 import { NodeExample } from './NodeExample';
@@ -145,12 +144,7 @@ const InputOutputItem = memo(({ type, item, condition, schema }: InputOutputItem
                 >
                     {item.description && (
                         <NoHighlighting>
-                            <ReactMarkdown
-                                className="no-child-margin"
-                                components={docsMarkdown}
-                            >
-                                {item.description}
-                            </ReactMarkdown>
+                            <Markdown>{item.description}</Markdown>
                         </NoHighlighting>
                     )}
 
@@ -273,7 +267,7 @@ const SingleNodeInfo = memo(({ schema, accentColor, functionDefinition }: NodeIn
                         <SupportHighlighting>{schema.name}</SupportHighlighting>
                     </Heading>
                 </HStack>
-                <ReactMarkdown components={docsMarkdown}>{schema.description}</ReactMarkdown>
+                <Markdown>{schema.description}</Markdown>
             </Box>
             <Box position="relative">
                 <Heading
diff --git a/src/renderer/components/NodeSelectorPanel/RepresentativeNodeWrapper.tsx b/src/renderer/components/NodeSelectorPanel/RepresentativeNodeWrapper.tsx
index 9d45cbe64..9f7da3b73 100644
--- a/src/renderer/components/NodeSelectorPanel/RepresentativeNodeWrapper.tsx
+++ b/src/renderer/components/NodeSelectorPanel/RepresentativeNodeWrapper.tsx
@@ -2,7 +2,6 @@ import { StarIcon } from '@chakra-ui/icons';
 import { Box, Center, MenuItem, MenuList, Text, Tooltip, useDisclosure } from '@chakra-ui/react';
 import { DragEvent, memo, useCallback, useEffect, useState } from 'react';
 import { BsFillJournalBookmarkFill } from 'react-icons/bs';
-import ReactMarkdown from 'react-markdown';
 import { useReactFlow } from 'reactflow';
 import { useContext } from 'use-context-selector';
 import { NodeSchema } from '../../../common/common-types';
@@ -11,7 +10,7 @@ import { NodeDocumentationContext } from '../../contexts/NodeDocumentationContex
 import { ChainnerDragData, TransferTypes } from '../../helpers/dataTransfer';
 import { useContextMenu } from '../../hooks/useContextMenu';
 import { useNodeFavorites } from '../../hooks/useNodeFavorites';
-import { tooltipDocsMarkdown } from '../NodeDocumentation/docsMarkdown';
+import { Markdown } from '../Markdown';
 import { RepresentativeNode } from './RepresentativeNode';
 
 interface TooltipLabelProps {
@@ -19,12 +18,12 @@ interface TooltipLabelProps {
     description: string;
 }
 const TooltipLabel = memo(({ name, description }: TooltipLabelProps) => {
-    const firstParagraph = description.split('\n')[0];
+    const firstParagraph = description.split('\n\n')[0];
 
     return (
         <>
             {name && <Text fontWeight="bold">{name}</Text>}
-            <ReactMarkdown components={tooltipDocsMarkdown}>{firstParagraph}</ReactMarkdown>
+            <Markdown nonInteractive>{firstParagraph}</Markdown>
         </>
     );
 });
diff --git a/src/renderer/components/inputs/GenericInput.tsx b/src/renderer/components/inputs/GenericInput.tsx
index 7cbd96e16..11a6b3c5f 100644
--- a/src/renderer/components/inputs/GenericInput.tsx
+++ b/src/renderer/components/inputs/GenericInput.tsx
@@ -1,8 +1,7 @@
 import { QuestionIcon } from '@chakra-ui/icons';
 import { Box, Center, HStack, Text, Tooltip } from '@chakra-ui/react';
 import { memo } from 'react';
-import ReactMarkdown from 'react-markdown';
-import { tooltipDocsMarkdown } from '../NodeDocumentation/docsMarkdown';
+import { Markdown } from '../Markdown';
 import { TypeTags } from '../TypeTag';
 import { WithoutLabel } from './InputContainer';
 import { InputProps } from './props';
@@ -20,11 +19,7 @@ export const GenericInput = memo(({ input, definitionType }: InputProps<'generic
                     hasArrow
                     borderRadius={8}
                     label={
-                        hint ? (
-                            <ReactMarkdown components={tooltipDocsMarkdown}>
-                                {description ?? ''}
-                            </ReactMarkdown>
-                        ) : undefined
+                        hint ? <Markdown nonInteractive>{description ?? ''}</Markdown> : undefined
                     }
                     openDelay={500}
                     px={2}
diff --git a/src/renderer/components/inputs/InputContainer.tsx b/src/renderer/components/inputs/InputContainer.tsx
index 918723bed..561c8cddd 100644
--- a/src/renderer/components/inputs/InputContainer.tsx
+++ b/src/renderer/components/inputs/InputContainer.tsx
@@ -2,7 +2,6 @@ import { Type } from '@chainner/navi';
 import { QuestionIcon } from '@chakra-ui/icons';
 import { Box, Center, HStack, Text, Tooltip } from '@chakra-ui/react';
 import React, { memo, useCallback, useMemo } from 'react';
-import ReactMarkdown from 'react-markdown';
 import { Connection, Node, useReactFlow } from 'reactflow';
 import { useContext } from 'use-context-selector';
 import { InputId, NodeData } from '../../../common/common-types';
@@ -12,7 +11,7 @@ import { BackendContext } from '../../contexts/BackendContext';
 import { GlobalVolatileContext } from '../../contexts/GlobalNodeState';
 import { defaultColor, getTypeAccentColors } from '../../helpers/accentColors';
 import { Handle } from '../Handle';
-import { tooltipDocsMarkdown } from '../NodeDocumentation/docsMarkdown';
+import { Markdown } from '../Markdown';
 import { TypeTag } from '../TypeTag';
 
 export interface HandleWrapperProps {
@@ -164,9 +163,7 @@ export const WithLabel = memo(
                         borderRadius={8}
                         label={
                             hint ? (
-                                <ReactMarkdown components={tooltipDocsMarkdown}>
-                                    {description ?? ''}
-                                </ReactMarkdown>
+                                <Markdown nonInteractive>{description ?? ''}</Markdown>
                             ) : undefined
                         }
                         openDelay={500}
diff --git a/src/renderer/components/node/NodeFooter/ValidityIndicator.tsx b/src/renderer/components/node/NodeFooter/ValidityIndicator.tsx
index c08298223..513110a12 100644
--- a/src/renderer/components/node/NodeFooter/ValidityIndicator.tsx
+++ b/src/renderer/components/node/NodeFooter/ValidityIndicator.tsx
@@ -2,10 +2,10 @@ import { Center, Icon, Spinner, Tooltip } from '@chakra-ui/react';
 import { memo } from 'react';
 import { BsCheck, BsExclamation } from 'react-icons/bs';
 import { IoIosPause } from 'react-icons/io';
-import ReactMarkdown from 'react-markdown';
 import { useContext } from 'use-context-selector';
 import { Validity } from '../../../../common/Validity';
 import { ExecutionStatusContext } from '../../../contexts/ExecutionContext';
+import { Markdown } from '../../Markdown';
 
 interface ValidityIndicatorProps {
     validity: Validity;
@@ -66,7 +66,9 @@ export const ValidityIndicator = memo(({ validity, animated }: ValidityIndicator
             closeOnClick={false}
             gutter={24}
             label={
-                <ReactMarkdown>{validity.isValid ? 'Node valid' : validity.reason}</ReactMarkdown>
+                <Markdown nonInteractive>
+                    {validity.isValid ? 'Node valid' : validity.reason}
+                </Markdown>
             }
             px={2}
             textAlign="center"
diff --git a/src/renderer/contexts/BackendContext.tsx b/src/renderer/contexts/BackendContext.tsx
index aab8c0d02..24eddcb79 100644
--- a/src/renderer/contexts/BackendContext.tsx
+++ b/src/renderer/contexts/BackendContext.tsx
@@ -13,7 +13,15 @@ import { useTranslation } from 'react-i18next';
 import { useQuery, useQueryClient } from 'react-query';
 import { createContext, useContext } from 'use-context-selector';
 import { Backend, BackendNodesResponse, getBackend } from '../../common/Backend';
-import { Category, PythonInfo, SchemaId } from '../../common/common-types';
+import {
+    Category,
+    Feature,
+    FeatureId,
+    FeatureState,
+    Package,
+    PythonInfo,
+    SchemaId,
+} from '../../common/common-types';
 import { log } from '../../common/log';
 import { parseFunctionDefinitions } from '../../common/nodes/parseFunctionDefinitions';
 import { ipcRenderer } from '../../common/safeIpc';
@@ -41,8 +49,12 @@ interface BackendContextState {
      */
     categories: readonly Category[];
     categoriesMissingNodes: readonly string[];
+    packages: readonly Package[];
     functionDefinitions: ReadonlyMap<SchemaId, FunctionDefinition>;
     scope: Scope;
+    features: ReadonlyMap<FeatureId, Feature>;
+    featureStates: ReadonlyMap<FeatureId, FeatureState>;
+    refreshFeatureStates: () => Promise<void>;
     restartingRef: Readonly<React.MutableRefObject<boolean>>;
     restart: () => Promise<void>;
     connectionState: 'connecting' | 'connected' | 'failed';
@@ -57,16 +69,18 @@ interface BackendProviderProps {
     pythonInfo: PythonInfo;
 }
 
+type BackendData = [BackendNodesResponse, Package[]];
 interface NodesInfo {
-    rawResponse: BackendNodesResponse;
+    rawResponse: BackendData;
     schemata: SchemaMap;
     categories: Category[];
     functionDefinitions: ReadonlyMap<SchemaId, FunctionDefinition>;
     categoriesMissingNodes: string[];
+    packages: Package[];
 }
 
-const processBackendResponse = (rawResponse: BackendNodesResponse): NodesInfo => {
-    const { categories, categoriesMissingNodes, nodes } = rawResponse;
+const processBackendResponse = (rawResponse: BackendData): NodesInfo => {
+    const { categories, categoriesMissingNodes, nodes } = rawResponse[0];
 
     return {
         rawResponse,
@@ -74,6 +88,7 @@ const processBackendResponse = (rawResponse: BackendNodesResponse): NodesInfo =>
         categories,
         functionDefinitions: parseFunctionDefinitions(nodes),
         categoriesMissingNodes,
+        packages: rawResponse[1],
     };
 };
 
@@ -103,7 +118,7 @@ const useNodes = (backend: Backend, restartingRef: Readonly<MutableRefObject<boo
 
     const nodesQuery = useQuery({
         queryKey: ['nodes', backend.url],
-        queryFn: async () => {
+        queryFn: async (): Promise<BackendData> => {
             try {
                 // spin until we're no longer restarting
                 while (restartingRef.current) {
@@ -111,11 +126,7 @@ const useNodes = (backend: Backend, restartingRef: Readonly<MutableRefObject<boo
                     await delay(100);
                 }
 
-                const response = await backend.nodes();
-                if ('status' in response) {
-                    throw new Error(`${response.message}\n${response.description}`);
-                }
-                return response;
+                return await Promise.all([backend.nodes(), backend.packages()]);
             } catch (error) {
                 log.error(error);
                 throw error;
@@ -223,6 +234,44 @@ const useNodes = (backend: Backend, restartingRef: Readonly<MutableRefObject<boo
     };
 };
 
+const useFeatureStates = (backend: Backend) => {
+    const [featureStates, setFeatureStates] = useState<readonly FeatureState[]>(EMPTY_ARRAY);
+
+    const featuresQuery = useQuery({
+        queryKey: ['features', backend.url],
+        queryFn: async () => {
+            try {
+                return await backend.features();
+            } catch (error) {
+                log.error(error);
+                throw error;
+            }
+        },
+        retry: true,
+        refetchOnWindowFocus: true,
+        refetchInterval: 60 * 1000, // refetch every minute
+    });
+
+    const { refetch } = featuresQuery;
+    const refreshFeatureStates = useCallback(async (): Promise<void> => {
+        await refetch().catch(log.error);
+    }, [refetch]);
+
+    useEffect(() => {
+        if (featuresQuery.status === 'success') {
+            const rawResponse = featuresQuery.data;
+            setFeatureStates((prev) => {
+                return isDeepEqual(prev, rawResponse) ? prev : rawResponse;
+            });
+        }
+    }, [featuresQuery.status, featuresQuery.data]);
+
+    return {
+        featureStates,
+        refreshFeatureStates,
+    };
+};
+
 export const BackendProvider = memo(
     ({ url, pythonInfo, children }: React.PropsWithChildren<BackendProviderProps>) => {
         const backend = getBackend(url);
@@ -248,6 +297,21 @@ export const BackendProvider = memo(
             backend,
             restartingRef
         );
+        const { featureStates, refreshFeatureStates } = useFeatureStates(backend);
+
+        const featureStatesMaps = useMemo((): ReadonlyMap<FeatureId, FeatureState> => {
+            return new Map(
+                featureStates.map((featureState) => [featureState.featureId, featureState])
+            );
+        }, [featureStates]);
+        const featuresMaps = useMemo((): ReadonlyMap<FeatureId, Feature> => {
+            if (nodesInfo === undefined) return EMPTY_MAP;
+            return new Map(
+                nodesInfo.packages
+                    .flatMap((p) => p.features)
+                    .map((feature) => [feature.id, feature])
+            );
+        }, [nodesInfo]);
 
         const restart = useCallback((): Promise<void> => {
             if (!ownsBackendRef.current) {
@@ -284,13 +348,14 @@ export const BackendProvider = memo(
                 }
 
                 refreshNodes();
+                refreshFeatureStates().catch(log.error);
 
                 if (error !== null) {
                     throw error instanceof Error ? error : new Error(String(error));
                 }
             })();
             return restartPromiseRef.current;
-        }, [backend, refreshNodes]);
+        }, [backend, refreshNodes, refreshFeatureStates]);
 
         const value = useMemoObject<BackendContextState>({
             url,
@@ -301,8 +366,12 @@ export const BackendProvider = memo(
             pythonInfo,
             categories: nodesInfo?.categories ?? EMPTY_ARRAY,
             categoriesMissingNodes: nodesInfo?.categoriesMissingNodes ?? EMPTY_ARRAY,
+            packages: nodesInfo?.packages ?? EMPTY_ARRAY,
+            features: featuresMaps,
             functionDefinitions: nodesInfo?.functionDefinitions ?? EMPTY_MAP,
             scope,
+            featureStates: featureStatesMaps,
+            refreshFeatureStates,
             restartingRef,
             restart,
             connectionState,
diff --git a/src/renderer/contexts/DependencyContext.tsx b/src/renderer/contexts/DependencyContext.tsx
index c9bcb1247..cb8024bb0 100644
--- a/src/renderer/contexts/DependencyContext.tsx
+++ b/src/renderer/contexts/DependencyContext.tsx
@@ -5,6 +5,7 @@ import {
     AccordionIcon,
     AccordionItem,
     AccordionPanel,
+    Box,
     Button,
     Center,
     Collapse,
@@ -32,16 +33,24 @@ import {
 } from '@chakra-ui/react';
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { BsQuestionCircle, BsTerminalFill } from 'react-icons/bs';
+import { HiOutlineRefresh } from 'react-icons/hi';
 import { useQuery } from 'react-query';
 import { createContext, useContext } from 'use-context-selector';
-import { Version } from '../../common/common-types';
-import { Package, PyPiPackage } from '../../common/dependencies';
+import {
+    Feature,
+    FeatureId,
+    FeatureState,
+    Package,
+    PyPiName,
+    PyPiPackage,
+    Version,
+} from '../../common/common-types';
 import { isArmMac } from '../../common/env';
-import { Integration, externalIntegrations } from '../../common/externalIntegrations';
 import { log } from '../../common/log';
 import { OnStdio, runPipInstall, runPipUninstall } from '../../common/pip';
 import { noop } from '../../common/util';
 import { versionGt } from '../../common/version';
+import { Markdown } from '../components/Markdown';
 import { useAsyncEffect } from '../hooks/useAsyncEffect';
 import { useMemoObject } from '../hooks/useMemo';
 import { AlertBoxContext, AlertType } from './AlertBoxContext';
@@ -54,11 +63,6 @@ export interface DependencyContextValue {
     availableUpdates: number;
 }
 
-export interface ExternalIntegrationConnectionStatus {
-    integration: Integration;
-    connected: boolean;
-}
-
 export const DependencyContext = createContext<Readonly<DependencyContextValue>>({
     openDependencyManager: noop,
     availableUpdates: 0,
@@ -77,7 +81,7 @@ const formatBytes = (bytes: number): string => {
 const formatSizeEstimate = (packages: readonly PyPiPackage[]): string =>
     formatBytes(packages.reduce((a, p) => a + p.sizeEstimate, 0));
 
-const FeaturePackage = memo(
+const PackageDependencyView = memo(
     ({ pkg, installedVersion }: { pkg: PyPiPackage; installedVersion: Version | null }) => {
         let color = 'red.500';
         let tagText = 'Missing';
@@ -114,25 +118,28 @@ const FeaturePackage = memo(
     }
 );
 
-const Feature = memo(
+const PackageView = memo(
     ({
-        dep,
+        p,
         isRunningShell,
         progress,
+        installedPyPi,
         onInstall,
         onUninstall,
         onUpdate,
     }: {
-        dep: Package;
+        p: Package;
         isRunningShell: boolean;
         progress?: number;
+        installedPyPi: Readonly<Partial<Record<PyPiName, Version>>>;
         onInstall: () => void;
         onUninstall: () => void;
         onUpdate: () => void;
     }) => {
-        const missingPackages = dep.dependencies.filter((d) => !d.installed);
-        const outdatedPackages = dep.dependencies.filter((d) => {
-            return d.installed && versionGt(d.version, d.installed);
+        const missingPackages = p.dependencies.filter((d) => !installedPyPi[d.pypiName]);
+        const outdatedPackages = p.dependencies.filter((d) => {
+            const installed = installedPyPi[d.pypiName];
+            return installed && versionGt(d.version, installed);
         });
 
         return (
@@ -155,14 +162,14 @@ const Feature = memo(
                                         textAlign="left"
                                         w="full"
                                     >
-                                        {dep.name} ({dep.dependencies.length} package
-                                        {dep.dependencies.length === 1 ? '' : 's'})
+                                        {p.name} ({p.dependencies.length} package
+                                        {p.dependencies.length === 1 ? '' : 's'})
                                     </Text>
                                     <Tooltip
                                         closeOnClick
                                         closeOnMouseDown
                                         borderRadius={8}
-                                        label={dep.description}
+                                        label={p.description}
                                         px={2}
                                         py={1}
                                     >
@@ -251,12 +258,12 @@ const Feature = memo(
                 </h2>
                 <AccordionPanel pb={4}>
                     <VStack
-                        key={dep.name}
+                        key={p.id}
                         w="full"
                     >
-                        {dep.dependencies.map((d) => (
-                            <FeaturePackage
-                                installedVersion={d.installed}
+                        {p.dependencies.map((d) => (
+                            <PackageDependencyView
+                                installedVersion={installedPyPi[d.pypiName] ?? null}
                                 key={d.pypiName}
                                 pkg={d}
                             />
@@ -268,12 +275,104 @@ const Feature = memo(
     }
 );
 
+interface FeaturesAccordionProps {
+    features: readonly Feature[];
+    featureStates: ReadonlyMap<FeatureId, FeatureState>;
+}
+const FeaturesAccordion = memo(({ features, featureStates }: FeaturesAccordionProps) => {
+    return (
+        <Accordion
+            allowToggle
+            w="full"
+        >
+            {features.map((f) => {
+                const state = featureStates.get(f.id);
+
+                let stateLabel;
+                let stateColor;
+                if (state === undefined) {
+                    stateLabel = 'Unavailable';
+                    stateColor = 'gray.500';
+                } else if (state.enabled) {
+                    stateLabel = 'Enabled';
+                    stateColor = 'green.500';
+                } else {
+                    stateLabel = 'Disabled';
+                    stateColor = 'gray.500';
+                }
+
+                return (
+                    <AccordionItem
+                        cursor="pointer"
+                        key={f.id}
+                    >
+                        <h2>
+                            <HStack w="full">
+                                <AccordionButton
+                                    cursor="pointer"
+                                    pr={0}
+                                >
+                                    <HStack
+                                        cursor="pointer"
+                                        spacing={1}
+                                        w="full"
+                                    >
+                                        <Text
+                                            cursor="pointer"
+                                            flex="1"
+                                            textAlign="left"
+                                            w="full"
+                                        >
+                                            {f.name}
+                                        </Text>
+                                        <Tooltip
+                                            closeOnClick
+                                            borderRadius={8}
+                                            label={state?.details ?? 'NO DETAILS'}
+                                            px={2}
+                                            py={1}
+                                        >
+                                            <InfoIcon />
+                                        </Tooltip>
+                                        <Text
+                                            color={stateColor}
+                                            cursor="pointer"
+                                            pl={4}
+                                        >
+                                            {stateLabel}
+                                        </Text>
+                                    </HStack>
+                                </AccordionButton>
+                                <AccordionButton
+                                    cursor="pointer"
+                                    w={4}
+                                >
+                                    <Center
+                                        cursor="pointer"
+                                        w="full"
+                                    >
+                                        <AccordionIcon />
+                                    </Center>
+                                </AccordionButton>
+                            </HStack>
+                        </h2>
+                        <AccordionPanel pb={4}>
+                            <Markdown>{f.description}</Markdown>
+                        </AccordionPanel>
+                    </AccordionItem>
+                );
+            })}
+        </Accordion>
+    );
+});
+
 export const DependencyProvider = memo(({ children }: React.PropsWithChildren<unknown>) => {
     const { isOpen, onOpen, onClose } = useDisclosure();
 
     const { showAlert } = useContext(AlertBoxContext);
     const { useIsSystemPython } = useContext(SettingsContext);
-    const { backend, pythonInfo, restart } = useContext(BackendContext);
+    const { backend, pythonInfo, restart, packages, featureStates, refreshFeatureStates } =
+        useContext(BackendContext);
     const { hasRelevantUnsavedChangesRef } = useContext(GlobalContext);
 
     const [isSystemPython] = useIsSystemPython;
@@ -290,12 +389,11 @@ export const DependencyProvider = memo(({ children }: React.PropsWithChildren<un
         [backend]
     );
 
-    const { data: depList, refetch } = useQuery({
+    const { data: installedPyPi, refetch: refetchInstalledPyPi } = useQuery({
         queryKey: 'dependencies',
         queryFn: async () => {
             try {
-                const response = await backend.dependencies();
-                return response.filter((d) => d.dependencies.length > 0);
+                return await backend.installedDependencies();
             } catch (error) {
                 log.error(error);
                 throw error;
@@ -337,7 +435,7 @@ export const DependencyProvider = memo(({ children }: React.PropsWithChildren<un
                 restart()
                     .catch(log.error)
                     .then(() => {
-                        refetch()
+                        refetchInstalledPyPi()
                             .catch(log.error)
                             .then(() => {
                                 setIsRunningShell(false);
@@ -351,17 +449,27 @@ export const DependencyProvider = memo(({ children }: React.PropsWithChildren<un
             });
     };
 
-    const installPackage = (dep: Package) => {
-        setInstallingPackage(dep);
+    const installPackage = (p: Package) => {
+        setInstallingPackage(p);
         changePackages(() =>
-            runPipInstall(pythonInfo, [dep], usePipDirectly ? undefined : setProgress, onStdio)
+            runPipInstall(
+                pythonInfo,
+                p.dependencies,
+                usePipDirectly ? undefined : setProgress,
+                onStdio
+            )
         );
     };
 
-    const uninstallPackage = (dep: Package) => {
-        setUninstallingPackage(dep);
+    const uninstallPackage = (p: Package) => {
+        setUninstallingPackage(p);
         changePackages(() =>
-            runPipUninstall(pythonInfo, [dep], usePipDirectly ? undefined : setProgress, onStdio)
+            runPipUninstall(
+                pythonInfo,
+                p.dependencies,
+                usePipDirectly ? undefined : setProgress,
+                onStdio
+            )
         );
     };
 
@@ -373,53 +481,28 @@ export const DependencyProvider = memo(({ children }: React.PropsWithChildren<un
 
     // whether we are current installing/uninstalling packages or refreshing the list pf installed packages
     const currentlyProcessingDeps =
-        depList === undefined || installingPackage !== null || uninstallingPackage !== null;
-
-    const availableUpdates = useMemo(() => {
-        return (
-            depList?.filter(({ dependencies }) =>
-                dependencies.some(({ version, installed }) => {
-                    if (!installed) {
-                        return true;
-                    }
-                    return versionGt(version, installed);
-                })
-            ).length ?? 0
-        );
-    }, [depList]);
+        installedPyPi === undefined || installingPackage !== null || uninstallingPackage !== null;
+
+    const availableUpdates = useMemo((): number => {
+        if (!installedPyPi) return 0;
+        return packages.filter(({ dependencies }) =>
+            dependencies.some(({ version, pypiName }) => {
+                const installed = installedPyPi[pypiName];
+                if (!installed) {
+                    return true;
+                }
+                return versionGt(version, installed);
+            })
+        ).length;
+    }, [packages, installedPyPi]);
 
     const value = useMemoObject<DependencyContextValue>({
         openDependencyManager: onOpen,
         availableUpdates,
     });
 
-    const [loadingExtInts, setLoadingExtInts] = useState(true);
-    const [externalIntegrationConnections, setExternalIntegrationConnections] = useState<
-        ExternalIntegrationConnectionStatus[]
-    >([]);
-
-    useAsyncEffect(
-        () => ({
-            supplier: async () => {
-                const connections = await Promise.all(
-                    externalIntegrations.map(async (integration) => {
-                        try {
-                            const connected = await fetch(
-                                `http://${integration.url}:${integration.port}`
-                            );
-                            return { integration, connected: connected.ok };
-                        } catch (e) {
-                            return { integration, connected: false };
-                        }
-                    })
-                );
-                return connections;
-            },
-            successEffect: setExternalIntegrationConnections,
-            finallyEffect: () => setLoadingExtInts(false),
-        }),
-        []
-    );
+    const features = useMemo(() => packages.flatMap((p) => p.features), [packages]);
+    const [isRefreshingFeatureStates, setIsRefreshingFeatureStates] = useState(false);
 
     return (
         <DependencyContext.Provider value={value}>
@@ -497,7 +580,7 @@ export const DependencyProvider = memo(({ children }: React.PropsWithChildren<un
                                     </Button>
                                 </HStack>
                             </Flex>
-                            {!depList ? (
+                            {!installedPyPi ? (
                                 <Spinner />
                             ) : (
                                 <Accordion
@@ -505,13 +588,17 @@ export const DependencyProvider = memo(({ children }: React.PropsWithChildren<un
                                     // allowMultiple={false}
                                     w="full"
                                 >
-                                    {depList.map((dep) => {
-                                        const install = () => installPackage(dep);
+                                    {packages.map((p) => {
+                                        if (p.dependencies.length === 0) {
+                                            return null;
+                                        }
+
+                                        const install = () => installPackage(p);
                                         const uninstall = () => {
                                             showAlert({
                                                 type: AlertType.WARN,
                                                 title: 'Uninstall',
-                                                message: `Are you sure you want to uninstall ${dep.name}?`,
+                                                message: `Are you sure you want to uninstall ${p.name}?`,
                                                 buttons: ['Cancel', 'Uninstall'],
                                                 defaultId: 0,
                                             })
@@ -523,29 +610,30 @@ export const DependencyProvider = memo(({ children }: React.PropsWithChildren<un
                                                             type: AlertType.WARN,
                                                             title: 'Unsaved Changes',
                                                             message:
-                                                                `You might lose your unsaved changes by uninstalling ${dep.name}.` +
-                                                                `\n\nAre you sure you want to uninstall ${dep.name}?`,
+                                                                `You might lose your unsaved changes by uninstalling ${p.name}.` +
+                                                                `\n\nAre you sure you want to uninstall ${p.name}?`,
                                                             buttons: ['Cancel', 'Uninstall'],
                                                             defaultId: 0,
                                                         });
                                                         if (saveButton === 0) return;
                                                     }
 
-                                                    uninstallPackage(dep);
+                                                    uninstallPackage(p);
                                                 })
                                                 .catch(log.error);
                                         };
 
                                         return (
-                                            <Feature
-                                                dep={dep}
+                                            <PackageView
+                                                installedPyPi={installedPyPi}
                                                 isRunningShell={isRunningShell}
-                                                key={dep.name}
+                                                key={p.id}
+                                                p={p}
                                                 progress={
                                                     !usePipDirectly &&
                                                     isRunningShell &&
                                                     (installingPackage || uninstallingPackage)
-                                                        ?.name === dep.name
+                                                        ?.id === p.id
                                                         ? progress
                                                         : undefined
                                                 }
@@ -600,35 +688,53 @@ export const DependencyProvider = memo(({ children }: React.PropsWithChildren<un
                                 </Center>
                                 {/* </Collapse> */}
                             </Center>
-                            {isConsoleOpen && <Divider w="full" />}
-                            {loadingExtInts ? (
-                                <Spinner />
-                            ) : (
-                                <VStack
-                                    textAlign="left"
-                                    w="full"
+                            <Divider w="full" />
+                            <Box w="full">
+                                <Flex
+                                    mb={2}
+                                    mt={2}
                                 >
                                     <Text
+                                        flex="1"
                                         fontWeight="bold"
-                                        w="full"
                                     >
-                                        External Connections
+                                        Features
                                     </Text>
-                                    {externalIntegrationConnections.map(
-                                        ({ integration, connected }) => (
-                                            <HStack
-                                                key={integration.name}
-                                                w="full"
-                                            >
-                                                <Text>{integration.name}</Text>
-                                                <Text color={connected ? 'green.500' : 'gray.500'}>
-                                                    {connected ? 'Connected' : 'Not Connected'}
-                                                </Text>
-                                            </HStack>
-                                        )
-                                    )}
-                                </VStack>
-                            )}
+                                    <Button
+                                        isDisabled={currentlyProcessingDeps}
+                                        leftIcon={
+                                            isRefreshingFeatureStates ? (
+                                                <Spinner
+                                                    height="1em"
+                                                    size="sm"
+                                                    width="1em"
+                                                />
+                                            ) : (
+                                                <HiOutlineRefresh
+                                                    height="1em"
+                                                    width="1em"
+                                                />
+                                            )
+                                        }
+                                        size="sm"
+                                        onClick={() => {
+                                            if (isRefreshingFeatureStates) return;
+                                            setIsRefreshingFeatureStates(true);
+                                            refreshFeatureStates()
+                                                .finally(() => {
+                                                    setIsRefreshingFeatureStates(false);
+                                                })
+                                                .catch(log.error);
+                                        }}
+                                    >
+                                        Refresh
+                                    </Button>
+                                </Flex>
+                                <FeaturesAccordion
+                                    featureStates={featureStates}
+                                    features={features}
+                                />
+                            </Box>
                         </VStack>
                     </ModalBody>
 
diff --git a/src/renderer/contexts/ExecutionContext.tsx b/src/renderer/contexts/ExecutionContext.tsx
index 7e868c93b..0f4a837e4 100644
--- a/src/renderer/contexts/ExecutionContext.tsx
+++ b/src/renderer/contexts/ExecutionContext.tsx
@@ -4,6 +4,7 @@ import { createContext, useContext, useContextSelector } from 'use-context-selec
 import { EdgeData, NodeData } from '../../common/common-types';
 import { formatExecutionErrorMessage } from '../../common/formatExecutionErrorMessage';
 import { log } from '../../common/log';
+import { checkFeatures } from '../../common/nodes/checkFeatures';
 import { checkNodeValidity } from '../../common/nodes/checkNodeValidity';
 import { getConnectedInputs } from '../../common/nodes/connectedInputs';
 import { getEffectivelyDisabledNodes } from '../../common/nodes/disabled';
@@ -11,6 +12,7 @@ import { getNodesWithSideEffects } from '../../common/nodes/sideEffect';
 import { toBackendJson } from '../../common/nodes/toBackendJson';
 import { ipcRenderer } from '../../common/safeIpc';
 import { assertNever, delay } from '../../common/util';
+import { bothValid } from '../../common/Validity';
 import {
     BackendEventSourceListener,
     useBackendEventSource,
@@ -64,7 +66,7 @@ export const ExecutionContext = createContext<Readonly<ExecutionContextValue>>(
 export const ExecutionProvider = memo(({ children }: React.PropsWithChildren<{}>) => {
     const { animate, unAnimate, typeStateRef, outputDataActions, getInputHash } =
         useContext(GlobalContext);
-    const { schemata, url, backend, ownsBackend, restartingRef, restart } =
+    const { schemata, url, backend, ownsBackend, restartingRef, restart, features, featureStates } =
         useContext(BackendContext);
     const { sendAlert, sendToast } = useContext(AlertBoxContext);
     const nodeChanges = useContextSelector(GlobalVolatileContext, (c) => c.nodeChanges);
@@ -258,12 +260,16 @@ export const ExecutionProvider = memo(({ children }: React.PropsWithChildren<{}>
             const functionInstance = typeStateRef.current.functions.get(node.data.id);
             const schema = schemata.get(node.data.schemaId);
             const { category, name } = schema;
-            const validity = checkNodeValidity({
-                inputData: node.data.inputData,
-                connectedInputs: getConnectedInputs(node.id, edges),
-                schema,
-                functionInstance,
-            });
+
+            const validity = bothValid(
+                checkFeatures(schema.features, features, featureStates),
+                checkNodeValidity({
+                    inputData: node.data.inputData,
+                    connectedInputs: getConnectedInputs(node.id, edges),
+                    schema,
+                    functionInstance,
+                })
+            );
             if (validity.isValid) return [];
 
             return [`• ${category}: ${name}: ${validity.reason}`];
@@ -317,6 +323,8 @@ export const ExecutionProvider = memo(({ children }: React.PropsWithChildren<{}>
         backend,
         options,
         unAnimate,
+        features,
+        featureStates,
     ]);
 
     const resume = useCallback(async () => {
diff --git a/src/renderer/hooks/useValidity.ts b/src/renderer/hooks/useValidity.ts
index 0ab90b215..9ea914311 100644
--- a/src/renderer/hooks/useValidity.ts
+++ b/src/renderer/hooks/useValidity.ts
@@ -1,10 +1,12 @@
 import { useEffect, useMemo, useState } from 'react';
 import { useReactFlow } from 'reactflow';
-import { useContextSelector } from 'use-context-selector';
+import { useContext, useContextSelector } from 'use-context-selector';
 import { EdgeData, InputData, NodeData, NodeSchema } from '../../common/common-types';
+import { checkFeatures } from '../../common/nodes/checkFeatures';
 import { checkNodeValidity, checkRequiredInputs } from '../../common/nodes/checkNodeValidity';
 import { getConnectedInputs } from '../../common/nodes/connectedInputs';
-import { VALID, Validity, invalid } from '../../common/Validity';
+import { VALID, Validity, bothValid, invalid } from '../../common/Validity';
+import { BackendContext } from '../contexts/BackendContext';
 import { GlobalVolatileContext } from '../contexts/GlobalNodeState';
 
 const STARTING_VALIDITY: Validity = invalid('Validating nodes...');
@@ -55,5 +57,10 @@ export const useValidity = (id: string, schema: NodeSchema, inputData: InputData
             ? guaranteedMissingInputs
             : fullValidity;
 
-    return { validity };
+    const { features, featureStates } = useContext(BackendContext);
+    const featureValidity = useMemo(() => {
+        return checkFeatures(schema.features, features, featureStates);
+    }, [schema, features, featureStates]);
+
+    return { validity: bothValid(featureValidity, validity) };
 };

From fe63816c623ee85c90b198e64f4570b0ca091f0d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Arnaud=20de=20G=C3=A9rard?= <arnaud.degerard@gmail.com>
Date: Fri, 11 Aug 2023 19:43:17 +0200
Subject: [PATCH 09/10] Add percent input

---
 .../utility/value/percent.py                  | 30 +++++++++++++++++++
 1 file changed, 30 insertions(+)
 create mode 100644 backend/src/packages/chaiNNer_standard/utility/value/percent.py

diff --git a/backend/src/packages/chaiNNer_standard/utility/value/percent.py b/backend/src/packages/chaiNNer_standard/utility/value/percent.py
new file mode 100644
index 000000000..0e02de66a
--- /dev/null
+++ b/backend/src/packages/chaiNNer_standard/utility/value/percent.py
@@ -0,0 +1,30 @@
+from __future__ import annotations
+
+from nodes.properties.inputs import SliderInput
+from nodes.properties.outputs import NumberOutput
+
+from .. import value_group
+
+
+@value_group.register(
+    schema_id="chainner:utility:percent",
+    name="Percent",
+    description="Outputs the given percent.",
+    icon="MdCalculate",
+    inputs=[
+        SliderInput(
+            "Percent",
+            minimum=0,
+            maximum=100,
+            default=50,
+            precision=0,
+            controls_step=1,
+            unit="%",
+        ),
+    ],
+    outputs=[
+        NumberOutput("%", output_type="Input0"),
+    ],
+)
+def percent_node(number: float) -> float:
+    return number

From 8d0a7af686245a88d637151e556ab93cb47421d4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Arnaud=20de=20G=C3=A9rard?= <arnaud.degerard@gmail.com>
Date: Fri, 11 Aug 2023 20:10:41 +0200
Subject: [PATCH 10/10] modified type from <float> to <int>

---
 backend/src/packages/chaiNNer_standard/utility/value/percent.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/backend/src/packages/chaiNNer_standard/utility/value/percent.py b/backend/src/packages/chaiNNer_standard/utility/value/percent.py
index 0e02de66a..9891bf9ae 100644
--- a/backend/src/packages/chaiNNer_standard/utility/value/percent.py
+++ b/backend/src/packages/chaiNNer_standard/utility/value/percent.py
@@ -26,5 +26,5 @@
         NumberOutput("%", output_type="Input0"),
     ],
 )
-def percent_node(number: float) -> float:
+def percent_node(number: int) -> int:
     return number