Add Training WIP Tab

frontend/src/common/components/WorkInProgress/ImageToImageWIP.tsx

@@ -1,16 +0,0 @@
-import React from 'react';
-import Img2ImgPlaceHolder from 'assets/images/image2img.png';
-
-export const ImageToImageWIP = () => {
-  return (
-    <div className="work-in-progress txt2img-work-in-progress">
-      <img src={Img2ImgPlaceHolder} alt="img2img_placeholder" />
-      <h1>Image To Image</h1>
-      <p>
-        Image to Image is already available in the WebUI. You can access it from
-        the Text to Image - Advanced Options menu. A dedicated UI for Image To
-        Image will be released soon.
-      </p>
-    </div>
-  );
-};

frontend/src/common/components/WorkInProgress/InpaintingWIP.tsx

@@ -1,14 +0,0 @@
-import React from 'react';
-
-export default function InpaintingWIP() {
-  return (
-    <div className="work-in-progress inpainting-work-in-progress">
-      <h1>Inpainting</h1>
-      <p>
-        Inpainting is available as a part of the Invoke AI Command Line
-        Interface. A dedicated WebUI interface will be released in the near
-        future.
-      </p>
-    </div>
-  );
-}

frontend/src/common/components/WorkInProgress/OutpaintingWIP.tsx

@@ -1,14 +0,0 @@
-import React from 'react';
-
-export default function OutpaintingWIP() {
-  return (
-    <div className="work-in-progress outpainting-work-in-progress">
-      <h1>Outpainting</h1>
-      <p>
-        Outpainting is available as a part of the Invoke AI Command Line
-        Interface. A dedicated WebUI interface will be released in the near
-        future.
-      </p>
-    </div>
-  );
-}

frontend/src/common/components/WorkInProgress/PostProcessingWIP.tsx

@@ -9,7 +9,7 @@ export const PostProcessingWIP = () => {
         Upscaling and Face Restoration are already available in the WebUI. You
         can access them from the Advanced Options menu of the Text To Image and
         Image To Image tabs. You can also process images directly, using the
-        image action buttons above the main image display.
+        image action buttons above the current image display or in the viewer.
       </p>
       <p>
         A dedicated UI will be released soon to facilitate more advanced post

frontend/src/common/components/WorkInProgress/Training.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+export default function TrainingWIP() {
+  return (
+    <div className="work-in-progress nodes-work-in-progress">
+      <h1>Training</h1>
+      <p>
+        A dedicated workflow for training your own embeddings and checkpoints
+        using Textual Inversion and Dreambooth from the web interface. <br />
+        <br />
+        InvokeAI already supports training custom embeddings using Textual
+        Inversion using the main script.
+      </p>
+    </div>
+  );
+}

frontend/src/features/tabs/components/InvokeTabs.tsx

@@ -26,6 +26,7 @@ import {
 } from 'features/gallery/store/gallerySlice';
 import UnifiedCanvasIcon from 'common/icons/UnifiedCanvasIcon';
 import { createSelector } from '@reduxjs/toolkit';
+import TrainingWIP from 'common/components/WorkInProgress/Training';
 
 export const tabDict = {
   txt2img: {
@@ -53,6 +54,11 @@ export const tabDict = {
     workarea: <PostProcessingWIP />,
     tooltip: 'Post Processing',
   },
+  training: {
+    title: <PostprocessingIcon fill={'black'} boxSize={'2.5rem'} />,
+    workarea: <TrainingWIP />,
+    tooltip: 'Training',
+  },
 };
 
 // Array where index maps to the key of tabDict
@@ -119,6 +125,10 @@ export default function InvokeTabs() {
     dispatch(setActiveTab(4));
   });
 
+  useHotkeys('6', () => {
+    dispatch(setActiveTab(5));
+  });
+
   // Lightbox Hotkey
   useHotkeys(
     'z',