diff --git a/ui/index.html b/ui/index.html
index 5f62dbc3..98c7b928 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -12,12 +12,11 @@
     <link rel="stylesheet" href="/media/css/auto-save.css">
     <link rel="stylesheet" href="/media/css/modifier-thumbnails.css">
     <link rel="stylesheet" href="/media/css/fontawesome-all.min.css">
-    <link rel="stylesheet" href="/media/css/drawingboard.min.css">
+    <link rel="stylesheet" href="/media/css/image-editor.css">
     <link rel="stylesheet" href="/media/css/jquery-confirm.min.css">
     <link rel="manifest" href="/media/manifest.webmanifest">
     <script src="/media/js/jquery-3.6.1.min.js"></script>
     <script src="/media/js/jquery-confirm.min.js"></script>
-    <script src="/media/js/drawingboard.min.js"></script>
     <script src="/media/js/marked.min.js"></script>
 </head>
 <body>
@@ -65,7 +64,7 @@
                 </div>
 
                 <div id="editor-inputs-init-image" class="row">
-                    <label for="init_image">Initial Image (img2img) <small>(optional)</small> </label> <input id="init_image" name="init_image" type="file" /><br/>
+                    <label for="init_image">Initial Image (img2img) <small>(optional)</small> </label>
 
                     <div id="init_image_preview_container" class="image_preview_container">
                         <div id="init_image_wrapper">
@@ -73,16 +72,22 @@
                             <span id="init_image_size_box"></span>
                             <button class="init_image_clear image_clear_btn"><i class="fa-solid fa-xmark"></i></button>
                         </div>
-
-                        <br/>
-                        <input id="enable_mask" name="enable_mask" type="checkbox">
-                        <label for="enable_mask">
-                            In-Painting (beta)
-                            <a href="https://github.com/cmdr2/stable-diffusion-ui/wiki/Inpainting" target="_blank"><i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip right">Click to learn more about InPainting</span></i></a>
-                            <small>(select the area which the AI will paint into)</small>
-                        </label>
-                        <div id="inpaintingEditor"></div>
+                        <div class="button">
+                            <i class="fa-regular fa-folder-open"></i>
+                            Browse
+                            <input id="init_image" name="init_image" type="file" />
+                        </div>
+                        <div id="init_image_button_draw" class="button">
+                            <i class="fa-solid fa-pencil"></i>
+                            Draw
+                        </div>
+                        <div id="init_image_button_inpaint" class="button">
+                            <i class="fa-solid fa-paintbrush"></i>
+                            Inpaint
+                            <input id="enable_mask" name="enable_mask" type="checkbox">
+                        </div>
                     </div>
+
                 </div>
 
                 <div id="editor-inputs-tags-container" class="row">
@@ -330,6 +335,38 @@
         </div>
     </div>
 
+    <div id="image-editor" class="popup image-editor-popup">
+        <div>
+            <i class="close-button fa-solid fa-xmark"></i>
+            <h1>Image Editor</h1>
+            <div class="flex-container">
+                <div class="editor-controls-left"></div>
+                <div class="editor-controls-center">
+                    <div></div>
+                </div>
+                <div class="editor-controls-right">
+                    <div></div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div id="image-inpainter" class="popup image-editor-popup">
+        <div>
+            <i class="close-button fa-solid fa-xmark"></i>
+            <h1>Inpainter</h1>
+            <div class="flex-container">
+                <div class="editor-controls-left"></div>
+                <div class="editor-controls-center">
+                    <div></div>
+                </div>
+                <div class="editor-controls-right">
+                    <div></div>
+                </div>
+            </div>
+        </div>
+    </div>
+
     <div id="footer-spacer"></div>
     <div id="footer">
         <div class="line-separator">&nbsp;</div>
@@ -343,16 +380,15 @@
     </div>
 </div>
 </body>
-
 <script src="media/js/utils.js"></script>
 <script src="media/js/parameters.js"></script>
 <script src="media/js/plugins.js"></script>
-<script src="media/js/inpainting-editor.js"></script>
 <script src="media/js/image-modifiers.js"></script>
 <script src="media/js/auto-save.js"></script>
 <script src="media/js/main.js"></script>
 <script src="media/js/themes.js"></script>
 <script src="media/js/dnd.js"></script>
+<script src="media/js/image-editor.js"></script>
 <script>
 async function init() {
     await initSettings()
diff --git a/ui/media/css/drawingboard.min.css b/ui/media/css/drawingboard.min.css
deleted file mode 100644
index 7d804787..00000000
--- a/ui/media/css/drawingboard.min.css
+++ /dev/null
@@ -1,5 +0,0 @@
-/* drawingboard.js v0.4.6 - https://github.com/Leimi/drawingboard.js
-* Copyright (c) 2015 Emmanuel Pelletier
-* Licensed MIT */
-
-.drawing-board,.drawing-board *{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}.drawing-board-controls-hidden,.drawing-board-utils-hidden{display:none!important}.drawing-board{position:relative;display:block}.drawing-board-canvas-wrapper{position:relative;margin:0;border:1px solid #ddd}.drawing-board-canvas{position:absolute;top:0;left:0;width:auto;cursor:crosshair;z-index:20}.drawing-board-cursor{position:absolute;top:0;left:0;pointer-events:none;border-radius:50%;background:#ccc;background:rgba(0,0,0,.2);z-index:30}.drawing-board-control-colors-rainbows,.drawing-board-control-size .drawing-board-control-inner,.drawing-board-control-size-dropdown,.drawing-board-control>button{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;overflow:hidden;background-color:#eee;padding:2px 4px;border:1px solid #ccc;box-shadow:0 1px 3px -2px #121212,inset 0 2px 5px 0 rgba(255,255,255,.3);-webkit-box-shadow:0 1px 3px -2px #121212,inset 0 2px 5px 0 rgba(255,255,255,.3);height:28px}.drawing-board-control>button{cursor:pointer;min-width:28px;line-height:14px}.drawing-board-control>button:focus,.drawing-board-control>button:hover{background-color:#ddd}.drawing-board-control>button.active,.drawing-board-control>button:active{box-shadow:inset 0 1px 2px 0 rgba(0,0,0,.2);-webkit-box-shadow:inset 0 1px 2px 0 rgba(0,0,0,.2);background-color:#ddd}.drawing-board-control>button[disabled]{color:gray}.drawing-board-control>button[disabled].active,.drawing-board-control>button[disabled]:active,.drawing-board-control>button[disabled]:focus,.drawing-board-control>button[disabled]:hover{background-color:#eee;box-shadow:0 1px 3px -2px #121212,inset 0 2px 5px 0 rgba(255,255,255,.3);-webkit-box-shadow:0 1px 3px -2px #121212,inset 0 2px 5px 0 rgba(255,255,255,.3);cursor:default}.drawing-board-controls{margin:0 auto;text-align:center;font-size:0;display:table;border-spacing:9.33px 0;position:relative;min-height:28px}.drawing-board-controls[data-align=left]{margin:0;left:-9.33px}.drawing-board-controls[data-align=right]{margin:0 0 0 auto;right:-9.33px}.drawing-board-canvas-wrapper+.drawing-board-controls,.drawing-board-controls+.drawing-board-canvas-wrapper{margin-top:5px}.drawing-board-controls-hidden{height:0;min-height:0;padding:0;margin:0;border:0}.drawing-board-control{display:table-cell;border-collapse:separate;vertical-align:middle;font-size:16px;height:100%}.drawing-board-control-inner{position:relative;height:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.drawing-board-control>button{margin:0;vertical-align:middle}.drawing-board-control-colors{font-size:0;line-height:0}.drawing-board-control-colors-current{border:1px solid #ccc;cursor:pointer;display:inline-block;width:26px;height:26px}.drawing-board-control-colors-rainbows{display:inline-block;position:absolute;left:0;top:33px;margin-left:0;z-index:100;width:250px;height:auto;padding:4px}.drawing-board-control-colors-rainbow{height:18px}.drawing-board-control-colors-picker:first-child{margin-right:5px}.drawing-board-control-colors-picker{display:inline-block;width:18px;height:18px;cursor:pointer}.drawing-board-control-colors-picker[data-color="rgba(255, 255, 255, 1)"]{width:16px;height:17px;border:1px solid #ccc;border-bottom:none}.drawing-board-control-colors-picker:hover{width:16px;height:16px;border:1px solid #555}.drawing-board-control-drawingmode>button{margin-right:2px}.drawing-board-control-drawingmode>button:last-child{margin-right:0}.drawing-board-control-drawingmode-pencil-button{overflow:hidden;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAe9JREFUeNpiZAACVlFRBhYREQZcQPnbNwa3N28YlL5+ZfgLFfvPwGD9m4FhIgsDHuAO0gTUDNKIBvyBmqt/MTDMY8Gl0f31azD7L6oUIxCnAzWmAPHBfwwM01AMUAV6JfPQIVwOYgVqqPnFyOjz6///O38YGKpAgmAD1OXlGdTk5PD5hgeouZudj8/uy9evP/78/dsFFPsJNiAoKIiBABAHap4oLi9v8fTNm48//v7NBwbgWZgkE7rqt8DY+A8JZRBW+cfIuEDT0NDlzadP3z98/doPFDuCrB7TAGFhBqCNIGwM9OcKUzs7+xdv3355+f79VqDYAiTDwZgJh7ONgYpnOvn4GL949erT7UePdgL5JVCD4fgBLBBxaX74+PG789evnwby0/8jKXgExIeB+CG6Af///1e9Ki9vFSAkZPzoyZPPJy9evA9MB77/sWiEARZkzV+/fvXYtGnTpG3btj28EBT0BqjZ5D8OjXCwPksUhA1Wpggf/PHjx/9169Y9EBERaUlgZmaIAcrLE4rk5sIqBqDmlefnRPzfWGX5EaSZm5ubgRloADGA5QZ3RgK7gESY4PMNn9ZtObPpzZvfU4DiYkiB/RcHG+S7fyxAMH/lFU2GOZd2bLx18/cEUMoD4j9I+DcS/RtJHGTYf4AAAwAxaOMYHjxKFwAAAABJRU5ErkJggg==);background-position:50% 50%;background-repeat:no-repeat}.drawing-board-control-drawingmode-pencil-button:before{content:"";display:block;width:0;height:100%}.drawing-board-control-drawingmode-eraser-button{overflow:hidden;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAkpJREFUeNp0kk+IElEcx39vFBc9+OfQRTAwzFt4CaYOKStj6MoeculStzoIQSB4kCVckmDx4iGCXWYJIqjoVOzO1l4qT1F7WfBWHvxzDPyTB3XUmXn93suRybUffHmP997n9/cRsFgwGARJkiAcDsPlwgEIeEZQAhCRAkgAlOD6SQP4rgMFDWVnYCAQgFgsBqFQCBwOByzZNQOotPHx1RNCCCipu6bfb+zSnslkeOQVILPrBkAirbws9btdTEWAzZPXpfepOzaeGMBXwe/3w3+MwTc3Dl+UeghTiskbBvR6Pbh18mZHB0jjmxvCKhIfR37s3r+Sevf8ca/T4TBF2HTSODuDxP7uNjrZFFbBk8lEzOVyspa4ykGYw2zfbTb/7ilvok1YhlVVFfP5vDydTkHXdXDdlhZOOnPY4/HA0YPtp3h6LFjh8XgsFgoFGTPgsKm1zDr8ajTQh8Fh5eGjZzjGI8yjKlgjF4tFGdd/YKYmRja24hw+zu3sYe2HiH3hYzQjl8tleTQanWtou93G6Qngdrth6+1+9h6hTULJZ/PeziJXKhV5OByeg1ut1gJOp9NZTdNOcQ419ot+ggp1qoLdBFmqVmNpm3A8Huewy+Wq1RH8QH9zmBlJJpMRdCIqiiIPBgN+2MCGsW/r8/kgGo1m0fmpzWarseayHlmNeL1eFiWC0cRqtSr3+/3FpSiKHMZtjU1glbFyfKgLTqfzEka9OJvNeDnzz1JnCaFmqOl8ZdJY1SiDOXCiXKg1NtG5DIt0y6ov3dE/AgwAENFWYYLj4mYAAAAASUVORK5CYII=);background-position:50% 50%;background-repeat:no-repeat}.drawing-board-control-drawingmode-eraser-button:before{content:"";display:block;width:0;height:100%}.drawing-board-control-drawingmode-filler-button{overflow:hidden;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAnNJREFUeNp0k0trE1EUx89MJpNJooYYXBgDNtCKdRPwlbqoCKUtaNVNA0Uo7UbMxoVPEARTXEi+QWfnwn6DEAlEkrSLttTGRiULEQlJ8yChmbzI++E50yTUJA78uMy953/u/557LmOz2WDEZ2m1WrckSRJSqdR2tVrdHQyYebwHtVoNuFHqTqczhQnWKaBYLDoKhcIuzgHDMKBSqeD20qd+LNdsNocSoFhRr9ctpVLJigl4xIIJQizLAmG4cAPa7bYcy9Iug5TL5UYikbD6/X7Rbre/IUcYe3WUW5ZsnQQzW9LpNOPz+UQc5aBM5mgdh7vI9FCCAesW2tnr9YqZTAby+bw8f3AQRP6853n+Ph5hemSCntjj8YjZbFYWx2IxeS2RSEMwuA87O79eqdXquVolK+GxnP0EPbHb7RZJSGABIR6PA11zJHKIR2MhHA5DIPDj7eH3j95KpfK60Wg8Yntil8slkqgnpioLghacTidoNDpEC3q9HnheCc3s1jZeLcW943pirPw/4lKpBkqlDubnl/riycnLsLy88EKj0fhzuRyZv8RFo1E6wpBYkiqy7Z54YmIcVlYeyOKC4mYwJ0nHRaQuM5vNT6hB/iceG7sIq6sPnwmC4MerDkby40AOCCoiddie1Wp92W7zQ2KTyQSLizNP8T0EsPLBbxEDnCj0GkM2qIEwyZRCobizsfH5A1ZXFhuN52F29vpz3HkL574mk8lj24Y5wsHkvjjoX0BOIWc5jruHzbK2ufmzEwpFO3jnDhQv4JoROYdoERVyGjEgZ8iBDlF3FzXo4go6utZ9lftY4N/dXisjR0i1G0ublv8KMAA0ZoUlicxrhwAAAABJRU5ErkJggg==);background-position:50% 50%;background-repeat:no-repeat}.drawing-board-control-drawingmode-filler-button:before{content:"";display:block;width:0;height:100%}.drawing-board-control-navigation>button{font-family:Helvetica,Arial,sans-serif;font-size:14px;font-weight:700;margin-right:2px}.drawing-board-control-navigation>button:last-child{margin-right:0}.drawing-board-control-size[data-drawing-board-type=range] .drawing-board-control-inner{width:75px}.drawing-board-control-size[data-drawing-board-type=dropdown] .drawing-board-control-inner{overflow:visible}.drawing-board-control-size-range-input{position:relative;width:100%;z-index:100;margin:0;padding:0;border:0}.drawing-board-control-size-dropdown span,.drawing-board-control-size-dropdown-current span,.drawing-board-control-size-range-current{display:block;background:#333;opacity:.8}.drawing-board-control-size-range-current{display:inline-block;opacity:.15;position:absolute;pointer-events:none;left:50%;top:50%;z-index:50}.drawing-board-control-size-dropdown-current{display:block;height:100%;width:40px;overflow:hidden;position:relative}.drawing-board-control-size-dropdown-current span{position:absolute;left:50%;top:50%}.drawing-board-control-size-dropdown{position:absolute;left:-6px;top:33px;height:auto;list-style-type:none;margin:0;padding:0;z-index:100}.drawing-board-control-size-dropdown li{display:block;padding:4px;margin:3px 0;min-height:16px}.drawing-board-control-size-dropdown li:hover{background:#ccc}.drawing-board-control-size-dropdown span{margin:0 auto}.drawing-board-control-download-button{overflow:hidden;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAoBJREFUeNqMkr9PU1EUx7/vR1tQ3yu10hAmTawtBSYSy2YccFOcnDQm/gewOLnj5GYMg4sdXFxkMca4OBAwdUBe/ZkIGFp+9tHXvh/3/fTcAm01aLzJybnn3nM+95tzrnDl6Tb+sibuTmWUWj3C6/Juk+LySUmyvt0FCKKA02ryOCy6LBiu15ngMbZ5DDCNBqIw6gKM+n4nECUJru3glKry8CpjQaHVYmC2rVH82DIMMMdGGARdwJ+SPNdFS9chx+MXDNMp/NzagWNatk/nQU/hiYAoih6FYTBCBs9zUXMCbAhx2OYOv351lPOJ3EwH4LteL6Dcp/Rfu3FrstDyIizt+agpaYxNDU0M9gl4v7Ck+TYrCYLQqZHUyTtdQBiutPSGUflczSXHs5lVKwZdSOBMvwztxVvN0RtzsiyXBFHsAvL5PBSnCpXV2getILFiE2SjspYbuZzPiDSZ2vOXmlvX5yQqTmMfg9ZXqtls1wnT09OHEyAq0aFLg/gSXsSWq9wWk+p9PrCoYTwcijdLOfE7UsEufN9HGIYnT4EnTGIXe1KqtNNIvuNnGamxfi7SgQD/nIJCTbzOPQ/SQh1pud7T4M6W/8qFIw/5WAr5m7Ozsw9UVc069Fls2yJzSC5/lnc9RhaHZVnfSqUnEgXP2oBqtYqBgYG2+mKxmOVADnAcB4yxHgD1RzehKKns/LyV4gUHBweQy+UyRkdH6UKJ6fQDFxcXoWkaXJeRuTgUGCdLQJ9bx72lGZimGWs2m+083oN+2iiFQiGxvLy8RrDzudyltgrG3N8U2G8CrPz4sGYYRqJSqWR4H/jNWbJhUjAWi8XG8R/L87yPpGCVttVfAgwAVpZR+8tZC08AAAAASUVORK5CYII=);background-position:50% 50%;background-repeat:no-repeat}.drawing-board-control-download-button:before{content:"";display:block;width:0;height:100%}
\ No newline at end of file
diff --git a/ui/media/css/image-editor.css b/ui/media/css/image-editor.css
new file mode 100644
index 00000000..9b313f67
--- /dev/null
+++ b/ui/media/css/image-editor.css
@@ -0,0 +1,199 @@
+.editor-controls-left {
+	padding-left: 32px;
+	text-align: left;
+	padding-bottom: 20px;
+}
+
+.editor-options-container {
+	display: flex;
+	row-gap: 10px;
+	max-width: 210px;
+}
+
+.editor-options-container > * {
+	flex: 1;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.editor-options-container > * > * {
+	position: inherit;
+	width: 32px;
+	height: 32px;
+	border-radius: 16px;
+	background: var(--background-color3);
+	cursor: pointer;
+	transition: opacity 0.25s;
+}
+.editor-options-container > * > *:hover {
+	opacity: 0.75;
+}
+
+.editor-options-container > * > *.active {
+	border: 2px solid #3584e4;
+}
+
+.image_editor_opacity .editor-options-container > * > *:not(.active) {
+	border: 1px solid var(--background-color3);
+}
+
+.image_editor_color .editor-options-container {
+	flex-wrap: wrap;
+}
+.image_editor_color .editor-options-container > * {
+	flex: 20%;
+}
+.image_editor_color .editor-options-container > * > * {
+	position: relative;
+}
+.image_editor_color .editor-options-container > * > *.active::before {
+	content: "\f00c";
+	display: var(--fa-display,inline-block);
+	font-style: normal;
+	font-variant: normal;
+	line-height: 1;
+	text-rendering: auto;
+	font-family: var(--fa-style-family, "Font Awesome 6 Free");
+	font-weight: var(--fa-style, 900);
+	position: absolute;
+	left: 50%;
+	top: 50%;
+	transform: translate(-50%, -50%) scale(125%);
+	color: black;
+}
+.image_editor_color .editor-options-container > *:first-child {
+	flex: 100%;
+}
+.image_editor_color .editor-options-container > *:first-child > * {
+	width: 100%;
+}
+.image_editor_color .editor-options-container > *:first-child > * > input {
+	width: 100%;
+	height: 100%;
+	opacity: 0;
+	cursor: pointer;
+}
+.image_editor_color .editor-options-container > *:first-child > * > span {
+	position: absolute;
+	left: 50%;
+	top: 50%;
+	transform: translate(-50%, -50%);
+	opacity: 0.5;
+}
+.image_editor_color .editor-options-container > *:first-child > *.active > span {
+	opacity: 0;
+}
+
+.image_editor_tool .editor-options-container > * {
+	padding: 2px;
+}
+
+.editor-controls-center {
+	/* background: var(--background-color2); */
+	flex: 1;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.editor-controls-center > div {
+	position: relative;
+	background: black;
+}
+
+.editor-controls-center canvas {
+	position: absolute;
+	left: 0;
+	top: 0;
+}
+
+.editor-controls-center .cursor-icon {
+	position: absolute;
+	left: 0px;
+	right: 0px;
+	pointer-events: none;
+	opacity: 0;
+	width: 0px;
+	text-shadow: 0 0 5px black;
+}
+
+.editor-controls-right {
+	padding: 32px;
+	display: flex;
+	flex-direction: column;
+}
+
+
+.editor-controls-right > div:last-child {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	min-width: 200px;
+	gap: 5px;
+	justify-content: end;
+}
+
+.image-editor-button {
+	width: 100%;
+	height: 32px;
+	border-radius: 16px;
+	background: var(--background-color3);
+}
+
+#init_image_button_inpaint .input-toggle {
+	position: absolute;
+	left: 16px;
+}
+
+#init_image_button_inpaint .input-toggle input:not(:checked) ~ label {
+	pointer-events: none;
+}
+
+
+.image-editor-popup {
+	--popup-margin: 16px;
+	--popup-padding: 24px;
+}
+
+.image-editor-popup > div {
+	margin: var(--popup-margin);
+	padding: var(--popup-padding);
+	min-height: calc(100vh - (2 * var(--popup-margin)));
+	max-width: none;
+}
+
+.image-editor-popup h1 {
+	position: absolute;
+	top: 32px;
+	left: 50%;
+	transform: translateX(-50%);
+}
+
+
+@media screen and (max-width: 700px) {
+	.image-editor-popup > div {
+		margin: 0px;
+		padding: 0px;
+	}
+
+	.image-editor-popup h1 {
+		position: relative;
+		transform: none;
+		left: auto;
+	}
+}
+
+
+.image-editor-popup > div > div {
+	min-height: calc(100vh - (2 * var(--popup-margin)) - (2 * var(--popup-padding)));
+}
+
+.inpainter .image_editor_color {
+	display: none;
+}
+
+.inpainter .editor-canvas-background {
+	opacity: 0.75;
+}
+
diff --git a/ui/media/css/main.css b/ui/media/css/main.css
index 0e941fa9..eab6aa34 100644
--- a/ui/media/css/main.css
+++ b/ui/media/css/main.css
@@ -45,7 +45,7 @@ code {
     display: block;
 }
 .image_preview_container {
-    margin-top: 10pt;
+    margin-top: 6px;
 }
 .image_clear_btn {
     position: absolute;
@@ -275,32 +275,6 @@ img {
     transform: translateY(25%);
 }
 
-#inpaintingEditor {
-    width: 300pt;
-    height: 300pt;
-    margin-top: 5pt;
-}
-.drawing-board-canvas-wrapper {
-    background-size: 100% 100%;
-}
-.drawing-board-controls {
-    min-width: 273px;
-}
-.drawing-board-control > button {
-    background-color: #eee;
-    border-radius: 3pt;
-}
-.drawing-board-control-inner {
-    background-color: #eee;
-    border-radius: 3pt;
-}
-#inpaintingEditor canvas {
-    opacity: 0.6;
-}
-#enable_mask {
-    margin-top: 8pt;
-}
-
 #top-nav {
     position: relative;
     background: var(--background-color4);
@@ -484,8 +458,48 @@ img {
 #prompt_from_file {
     display: none;
 }
+
+#init_image_preview_container:not(.has-image) #inpaintingEditor,
+#init_image_preview_container:not(.has-image) #samplerSelection,
+#init_image_preview_container:not(.has-image) #init_image_wrapper,
+#init_image_preview_container:not(.has-image) #init_image_button_inpaint  {
+    display: none;
+}
+
+#init_image_preview_container:not(.has-image) {
+    grid-template-columns: 50% 50%;
+}
+
+#init_image_preview_container {
+    padding: 4px;
+    display: grid;
+    grid-template-columns: max-content auto;
+    grid-template-rows: 33% 33% 33%;
+    gap: 8px
+}
+
+#init_image_preview_container > div:not(:first-child) {
+    position: relative;
+    min-height: 32px;
+}
+
+#init_image_preview_container > div:not(:first-child) > input {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    opacity: 0;
+}
+
+#init_image_wrapper {
+    grid-row: span 3;
+    position: relative;
+    width: fit-content;
+    max-height: 150px;
+}
+
 #init_image_preview {
-    max-width: 150px;
     max-height: 150px;
     height: 100%;
     width: 100%;
@@ -493,23 +507,18 @@ img {
     border-radius: 6px;
     transition: all 1s ease-in-out;
 }
-
+/* 
 #init_image_preview:hover {
     max-width: 500px;
     max-height: 1000px;
 
     transition: all 1s 0.5s ease-in-out;
-}
-
-#init_image_wrapper {
-    position: relative;
-    width: fit-content;
-}
+} */
 
 #init_image_size_box {
     position: absolute;
     right: 0px;
-    bottom: 3px;
+    bottom: 0px;
     padding: 3px;
     background: black;
     color: white;
@@ -561,6 +570,10 @@ option {
     cursor: pointer;
 }
 
+input[type="file"] * {
+    cursor: pointer;
+}
+
 input,
 select,
 textarea {
@@ -599,12 +612,21 @@ input[type="file"] {
 }
 
 button,
-input::file-selector-button { 
+input::file-selector-button,
+.button { 
     padding: 2px 4px;
     border-radius: 4px;
     background: var(--button-color);
     color: var(--button-text-color);
     border: var(--button-border);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+}
+
+.button i {
+    margin-right: 8px;
 }
 
 input::file-selector-button {
@@ -969,8 +991,8 @@ input::file-selector-button {
     display: none;
 }
 
-#tab-content-wrapper {
-    border-top: 8px solid var(--background-color1);
+#tab-content-wrapper > * {
+    padding-top: 8px;
 }
 
 .tab-content-inner {
@@ -1007,7 +1029,8 @@ i.active {
     float: right;
     font-weight: bold;
 }
-button:hover {
+button:hover,
+.button:hover {
   transition-duration: 0.1s;
   background: hsl(var(--accent-hue), 100%, calc(var(--accent-lightness) + 6%));
 }
diff --git a/ui/media/css/themes.css b/ui/media/css/themes.css
index 6a2db310..4528be8f 100644
--- a/ui/media/css/themes.css
+++ b/ui/media/css/themes.css
@@ -134,6 +134,7 @@
     --input-border-color: #005E05;
 }
 
+
 .theme-gnomie {
     --background-color1: #242424;
     --background-color2: #353535;
@@ -157,5 +158,4 @@
     border: none;
     box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25);
     border-radius: 10px;
-}
-
+}
\ No newline at end of file
diff --git a/ui/media/js/drawingboard.min.js b/ui/media/js/drawingboard.min.js
deleted file mode 100644
index 289d40ae..00000000
--- a/ui/media/js/drawingboard.min.js
+++ /dev/null
@@ -1,4 +0,0 @@
-/* drawingboard.js v0.4.6 - https://github.com/Leimi/drawingboard.js
-* Copyright (c) 2015 Emmanuel Pelletier
-* Licensed MIT */
-!function(){"use strict";function a(a,b){for(;a.length>b;)a.shift()}var b=function(a){var b=a?a:{},c={provider:function(){throw new Error("No provider!")},maxLength:30,onUpdate:function(){}};this.provider="undefined"!=typeof b.provider?b.provider:c.provider,this.maxLength="undefined"!=typeof b.maxLength?b.maxLength:c.maxLength,this.onUpdate="undefined"!=typeof b.onUpdate?b.onUpdate:c.onUpdate,this.initialItem=null,this.clear()};b.prototype.initialize=function(a){this.stack[0]=a,this.initialItem=a},b.prototype.clear=function(){this.stack=[this.initialItem],this.position=0,this.onUpdate()},b.prototype.save=function(){this.provider(function(b){a(this.stack,this.maxLength),this.position=Math.min(this.position,this.stack.length-1),this.stack=this.stack.slice(0,this.position+1),this.stack.push(b),this.position++,this.onUpdate()}.bind(this))},b.prototype.undo=function(a){if(this.canUndo()){var b=this.stack[--this.position];this.onUpdate(),a&&a(b)}},b.prototype.redo=function(a){if(this.canRedo()){var b=this.stack[++this.position];this.onUpdate(),a&&a(b)}},b.prototype.canUndo=function(){return this.position>0},b.prototype.canRedo=function(){return this.position<this.count()},b.prototype.count=function(){return this.stack.length-1},"undefined"!=typeof module&&(module.exports=b),"undefined"!=typeof window&&(window.SimpleUndo=b)}(),window.DrawingBoard="undefined"!=typeof DrawingBoard?DrawingBoard:{},DrawingBoard.Utils={},DrawingBoard.Utils.tpl=function(){"use strict";var a,b="{{",c="}}",d="[a-z0-9_][\\.a-z0-9_]*",e=new RegExp(b+"\\s*("+d+")\\s*"+c,"gi");return function(b,c){return b.replace(e,function(b,d){for(var e=d.split("."),f=e.length,g=c,h=0;f>h;h++){if(g=g[e[h]],g===a)throw"tim: '"+e[h]+"' not found in "+b;if(h===f-1)return g}})}}(),DrawingBoard.Utils.MicroEvent=function(){},DrawingBoard.Utils.MicroEvent.prototype={bind:function(a,b){this._events=this._events||{},this._events[a]=this._events[a]||[],this._events[a].push(b)},unbind:function(a,b){this._events=this._events||{},a in this._events!=!1&&this._events[a].splice(this._events[a].indexOf(b),1)},trigger:function(a){if(this._events=this._events||{},a in this._events!=!1)for(var b=0;b<this._events[a].length;b++)this._events[a][b].apply(this,Array.prototype.slice.call(arguments,1))}},DrawingBoard.Utils._boxBorderSize=function(a,b,c,d){b=!!b||!0,c=!!c||!1;var e,f=0;"width"==d?(e=["border-left-width","border-right-width"],b&&e.push("padding-left","padding-right"),c&&e.push("margin-left","margin-right")):(e=["border-top-width","border-bottom-width"],b&&e.push("padding-top","padding-bottom"),c&&e.push("margin-top","margin-bottom"));for(var g=e.length-1;g>=0;g--)f+=parseInt(a.css(e[g]).replace("px",""),10);return f},DrawingBoard.Utils.boxBorderWidth=function(a,b,c){return DrawingBoard.Utils._boxBorderSize(a,b,c,"width")},DrawingBoard.Utils.boxBorderHeight=function(a,b,c){return DrawingBoard.Utils._boxBorderSize(a,b,c,"height")},DrawingBoard.Utils.isColor=function(a){return a&&a.length?/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(a)||-1!==$.inArray(a.substring(0,3),["rgb","hsl"]):!1},DrawingBoard.Utils.RGBToInt=function(a,b,c){var d=0;return d|=(255&a)<<16,d|=(255&b)<<8,d|=255&c},DrawingBoard.Utils.pixelAt=function(a,b,c){var d=4*(c*a.width+b),e=DrawingBoard.Utils.RGBToInt(a.data[d],a.data[d+1],a.data[d+2]);return[d,b,c,e]},DrawingBoard.Utils.compareColors=function(a,b,c){if(0===c)return a===b;var d=a>>16&255,e=b>>16&255,f=a>>8&255,g=b>>8&255,h=255&a,i=255&b;return Math.abs(d-e)<=c&&Math.abs(f-g)<=c&&Math.abs(h-i)<=c},function(){for(var a=["ms","moz","webkit","o"],b=0;b<a.length&&!window.requestAnimationFrame;++b)window.requestAnimationFrame=window[a[b]+"RequestAnimationFrame"],window.cancelAnimationFrame=window[a[b]+"CancelAnimationFrame"]||window[a[b]+"CancelRequestAnimationFrame"]}(),window.DrawingBoard="undefined"!=typeof DrawingBoard?DrawingBoard:{},DrawingBoard.Board=function(a,b){if(this.opts=this.mergeOptions(b),this.ev=new DrawingBoard.Utils.MicroEvent,this.id=a,this.$el=$(document.getElementById(a)),!this.$el.length)return!1;var c='<div class="drawing-board-canvas-wrapper"></canvas><canvas class="drawing-board-canvas"></canvas><div class="drawing-board-cursor drawing-board-utils-hidden"></div></div>';return this.opts.controlsPosition.indexOf("bottom")>-1?c+='<div class="drawing-board-controls"></div>':c='<div class="drawing-board-controls"></div>'+c,this.$el.addClass("drawing-board").append(c),this.dom={$canvasWrapper:this.$el.find(".drawing-board-canvas-wrapper"),$canvas:this.$el.find(".drawing-board-canvas"),$cursor:this.$el.find(".drawing-board-cursor"),$controls:this.$el.find(".drawing-board-controls")},$.each(["left","right","center"],$.proxy(function(a,b){return this.opts.controlsPosition.indexOf(b)>-1?(this.dom.$controls.attr("data-align",b),!1):void 0},this)),this.canvas=this.dom.$canvas.get(0),this.ctx=this.canvas&&this.canvas.getContext&&this.canvas.getContext("2d")?this.canvas.getContext("2d"):null,this.color=this.opts.color,this.ctx?(this.storage=this._getStorage(),this.initHistory(),this.reset({webStorage:!1,history:!1,background:!1}),this.initControls(),this.resize(),this.reset({webStorage:!1,history:!1,background:!0}),this.restoreWebStorage(),this.initDropEvents(),void this.initDrawEvents()):(this.opts.errorMessage&&this.$el.html(this.opts.errorMessage),!1)},DrawingBoard.Board.defaultOpts={controls:["Color","DrawingMode","Size","Navigation"],controlsPosition:"top left",color:"#000000",size:1,background:"#fff",eraserColor:"background",fillTolerance:100,fillHack:!0,webStorage:"session",droppable:!1,enlargeYourContainer:!1,errorMessage:'<p>It seems you use an obsolete browser. <a href="http://browsehappy.com/" target="_blank">Update it</a> to start drawing.</p>',stretchImg:!1},DrawingBoard.Board.prototype={mergeOptions:function(a){return a=$.extend({},DrawingBoard.Board.defaultOpts,a),a.background||"background"!==a.eraserColor||(a.eraserColor="transparent"),a},reset:function(a){a=$.extend({color:this.opts.color,size:this.opts.size,webStorage:!0,history:!0,background:!1},a),this.setMode("pencil"),a.background&&this.resetBackground(this.opts.background,$.proxy(function(){a.history&&this.saveHistory()},this)),a.color&&this.setColor(a.color),a.size&&(this.ctx.lineWidth=a.size),this.ctx.lineCap="round",this.ctx.lineJoin="round",a.webStorage&&this.saveWebStorage(),a.history&&!a.background&&this.saveHistory(),this.blankCanvas=this.getImg(),this.ev.trigger("board:reset",a)},resetBackground:function(a,b){a=a||this.opts.background;var c=DrawingBoard.Utils.isColor(a),d=this.getMode();this.setMode("pencil"),this.ctx.clearRect(0,0,this.ctx.canvas.width,this.ctx.canvas.height),c?(this.ctx.fillStyle=a,this.ctx.fillRect(0,0,this.ctx.canvas.width,this.ctx.canvas.height),this.history.initialize(this.getImg()),b&&b()):a&&this.setImg(a,{callback:$.proxy(function(){this.history.initialize(this.getImg()),b&&b()},this)}),this.setMode(d)},resize:function(){this.dom.$controls.toggleClass("drawing-board-controls-hidden",!this.controls||!this.controls.length);var a,b,c=[this.$el.width(),DrawingBoard.Utils.boxBorderWidth(this.$el),DrawingBoard.Utils.boxBorderWidth(this.dom.$canvasWrapper,!0,!0)],d=[this.$el.height(),DrawingBoard.Utils.boxBorderHeight(this.$el),this.dom.$controls.height(),DrawingBoard.Utils.boxBorderHeight(this.dom.$controls,!1,!0),DrawingBoard.Utils.boxBorderHeight(this.dom.$canvasWrapper,!0,!0)],e=function(a,b){b=b||1;for(var c=a[0],d=1;d<a.length;d++)c+=a[d]*b;return c},f=function(a){return e(a,-1)};this.opts.enlargeYourContainer?(a=this.$el.width(),b=this.$el.height(),this.$el.width(e(c)),this.$el.height(e(d))):(a=f(c),b=f(d)),this.dom.$canvasWrapper.css("width",a+"px"),this.dom.$canvasWrapper.css("height",b+"px"),this.dom.$canvas.css("width",a+"px"),this.dom.$canvas.css("height",b+"px"),this.canvas.width=a,this.canvas.height=b},initControls:function(){if(this.controls=[],!this.opts.controls.length||!DrawingBoard.Control)return!1;for(var a=0;a<this.opts.controls.length;a++){var b=null;if("string"==typeof this.opts.controls[a])b=new window.DrawingBoard.Control[this.opts.controls[a]](this);else if("object"==typeof this.opts.controls[a]){for(var c in this.opts.controls[a])break;b=new window.DrawingBoard.Control[c](this,this.opts.controls[a][c])}b&&this.addControl(b)}},addControl:function(a,b,c){if("string"!=typeof a&&("object"!=typeof a||!a instanceof DrawingBoard.Control))return!1;var d="object"==typeof b?b:{};c=c?1*c:"number"==typeof b?b:null,"string"==typeof a&&(a=new window.DrawingBoard.Control[a](this,d)),c?this.dom.$controls.children().eq(c).before(a.$el):this.dom.$controls.append(a.$el),this.controls||(this.controls=[]),this.controls.push(a),this.dom.$controls.removeClass("drawing-board-controls-hidden")},initHistory:function(){this.history=new SimpleUndo({maxLength:30,provider:$.proxy(function(a){a(this.getImg())},this),onUpdate:$.proxy(function(){this.ev.trigger("historyNavigation")},this)})},saveHistory:function(){this.history.save()},restoreHistory:function(a){this.setImg(a,{callback:$.proxy(function(){this.saveWebStorage()},this)})},goBackInHistory:function(){this.history.undo($.proxy(this.restoreHistory,this))},goForthInHistory:function(){this.history.redo($.proxy(this.restoreHistory,this))},setImg:function(a,b){b=$.extend({stretch:this.opts.stretchImg,callback:null},b);var c=this.ctx,d=new Image,e=c.globalCompositeOperation;d.onload=function(){c.globalCompositeOperation="source-over",c.clearRect(0,0,c.canvas.width,c.canvas.height),b.stretch?c.drawImage(d,0,0,c.canvas.width,c.canvas.height):c.drawImage(d,0,0),c.globalCompositeOperation=e,b.callback&&b.callback()},d.src=a},getImg:function(){return this.canvas.toDataURL("image/png")},downloadImg:function(){var a=this.getImg();a=a.replace("image/png","image/octet-stream"),window.location.href=a},saveWebStorage:function(){window[this.storage]&&(window[this.storage].setItem("drawing-board-"+this.id,this.getImg()),this.ev.trigger("board:save"+this.storage.charAt(0).toUpperCase()+this.storage.slice(1),this.getImg()))},restoreWebStorage:function(){window[this.storage]&&null!==window[this.storage].getItem("drawing-board-"+this.id)&&(this.setImg(window[this.storage].getItem("drawing-board-"+this.id)),this.ev.trigger("board:restore"+this.storage.charAt(0).toUpperCase()+this.storage.slice(1),window[this.storage].getItem("drawing-board-"+this.id)))},clearWebStorage:function(){window[this.storage]&&null!==window[this.storage].getItem("drawing-board-"+this.id)&&(window[this.storage].removeItem("drawing-board-"+this.id),this.ev.trigger("board:clear"+this.storage.charAt(0).toUpperCase()+this.storage.slice(1)))},_getStorage:function(){return!this.opts.webStorage||"session"!==this.opts.webStorage&&"local"!==this.opts.webStorage?!1:this.opts.webStorage+"Storage"},initDropEvents:function(){return this.opts.droppable?(this.dom.$canvas.on("dragover dragenter drop",function(a){a.stopPropagation(),a.preventDefault()}),void this.dom.$canvas.on("drop",$.proxy(this._onCanvasDrop,this))):!1},_onCanvasDrop:function(a){a=a.originalEvent?a.originalEvent:a;var b=a.dataTransfer.files;if(!b||!b.length||-1==b[0].type.indexOf("image")||!window.FileReader)return!1;var c=new FileReader;c.readAsDataURL(b[0]),c.onload=$.proxy(function(a){this.setImg(a.target.result,{callback:$.proxy(function(){this.saveHistory()},this)}),this.ev.trigger("board:imageDropped",a.target.result),this.ev.trigger("board:userAction")},this)},setMode:function(a,b){b=b||!1,a=a||"pencil",this.ev.unbind("board:startDrawing",$.proxy(this.fill,this)),"transparent"===this.opts.eraserColor?this.ctx.globalCompositeOperation="eraser"===a?"destination-out":"source-over":("eraser"===a?"background"===this.opts.eraserColor&&DrawingBoard.Utils.isColor(this.opts.background)?this.ctx.strokeStyle=this.opts.background:DrawingBoard.Utils.isColor(this.opts.eraserColor)&&(this.ctx.strokeStyle=this.opts.eraserColor):this.mode&&"eraser"!==this.mode||(this.ctx.strokeStyle=this.color),"filler"===a&&this.ev.bind("board:startDrawing",$.proxy(this.fill,this))),this.mode=a,b||this.ev.trigger("board:mode",this.mode)},getMode:function(){return this.mode||"pencil"},setColor:function(a){var b=this;if(a=a||this.color,!DrawingBoard.Utils.isColor(a))return!1;if(this.color=a,"transparent"!==this.opts.eraserColor&&"eraser"===this.mode){var c=function(a){"eraser"!==a&&(b.strokeStyle=b.color),b.ev.unbind("board:mode",c)};this.ev.bind("board:mode",c)}else this.ctx.strokeStyle=this.color},fill:function(a){function b(a){c.data[a[d]]=i,c.data[a[d]+1]=j,c.data[a[d]+2]=k}if(this.getImg()===this.blankCanvas)return this.ctx.clearRect(0,0,this.ctx.canvas.width,this.ctx.canvas.height),this.ctx.fillStyle=this.color,void this.ctx.fillRect(0,0,this.ctx.canvas.width,this.ctx.canvas.height);var c=this.ctx.getImageData(0,0,this.canvas.width,this.canvas.height),d=0,e=1,f=2,g=3,h=this.ctx.strokeStyle,i=parseInt(h.substr(1,2),16),j=parseInt(h.substr(3,2),16),k=parseInt(h.substr(5,2),16),l=DrawingBoard.Utils.pixelAt(c,parseInt(a.coords.x,10),parseInt(a.coords.y,10)),m=l[g],n=this.opts.fillTolerance,o=this.opts.fillHack;if(!DrawingBoard.Utils.compareColors(m,DrawingBoard.Utils.RGBToInt(i,j,k),n)){for(var p,q=[l],r=c.width-1,s=c.height-1;p=q.pop();)o&&b(p),DrawingBoard.Utils.compareColors(p[g],m,n)&&(o||b(p),p[e]>0&&q.push(DrawingBoard.Utils.pixelAt(c,p[e]-1,p[f])),p[e]<r&&q.push(DrawingBoard.Utils.pixelAt(c,p[e]+1,p[f])),p[f]>0&&q.push(DrawingBoard.Utils.pixelAt(c,p[e],p[f]-1)),p[f]<s&&q.push(DrawingBoard.Utils.pixelAt(c,p[e],p[f]+1)));this.ctx.putImageData(c,0,0)}},initDrawEvents:function(){this.isDrawing=!1,this.isMouseHovering=!1,this.coords={},this.coords.old=this.coords.current=this.coords.oldMid={x:0,y:0},this.dom.$canvas.on("mousedown touchstart",$.proxy(function(a){this._onInputStart(a,this._getInputCoords(a))},this)),this.dom.$canvas.on("mousemove touchmove",$.proxy(function(a){this._onInputMove(a,this._getInputCoords(a))},this)),this.dom.$canvas.on("mousemove",$.proxy(function(){},this)),this.dom.$canvas.on("mouseup touchend",$.proxy(function(a){this._onInputStop(a,this._getInputCoords(a))},this)),this.dom.$canvas.on("mouseover",$.proxy(function(a){this._onMouseOver(a,this._getInputCoords(a))},this)),this.dom.$canvas.on("mouseout",$.proxy(function(a){this._onMouseOut(a,this._getInputCoords(a))},this)),$("body").on("mouseup touchend",$.proxy(function(){this.isDrawing=!1},this)),window.requestAnimationFrame&&requestAnimationFrame($.proxy(this.draw,this))},draw:function(){if(window.requestAnimationFrame&&this.ctx.lineWidth>10&&this.isMouseHovering){this.dom.$cursor.css({width:this.ctx.lineWidth+"px",height:this.ctx.lineWidth+"px"});var a=DrawingBoard.Utils.tpl("translateX({{x}}px) translateY({{y}}px)",{x:this.coords.current.x-this.ctx.lineWidth/2,y:this.coords.current.y-this.ctx.lineWidth/2});this.dom.$cursor.css({transform:a,"-webkit-transform":a,"-ms-transform":a}),this.dom.$cursor.removeClass("drawing-board-utils-hidden")}else this.dom.$cursor.addClass("drawing-board-utils-hidden");if(this.isDrawing){var b=this._getMidInputCoords(this.coords.current);this.ctx.beginPath(),this.ctx.moveTo(b.x,b.y),this.ctx.quadraticCurveTo(this.coords.old.x,this.coords.old.y,this.coords.oldMid.x,this.coords.oldMid.y),this.ctx.stroke(),this.coords.old=this.coords.current,this.coords.oldMid=b}window.requestAnimationFrame&&requestAnimationFrame($.proxy(function(){this.draw()},this))},_onInputStart:function(a,b){this.coords.current=this.coords.old=b,this.coords.oldMid=this._getMidInputCoords(b),this.isDrawing=!0,window.requestAnimationFrame||this.draw(),this.ev.trigger("board:startDrawing",{e:a,coords:b}),a.stopPropagation(),a.preventDefault()},_onInputMove:function(a,b){this.coords.current=b,this.ev.trigger("board:drawing",{e:a,coords:b}),window.requestAnimationFrame||this.draw(),a.stopPropagation(),a.preventDefault()},_onInputStop:function(a,b){!this.isDrawing||a.touches&&0!==a.touches.length||(this.isDrawing=!1,this.saveWebStorage(),this.saveHistory(),this.ev.trigger("board:stopDrawing",{e:a,coords:b}),this.ev.trigger("board:userAction"),a.stopPropagation(),a.preventDefault())},_onMouseOver:function(a,b){this.isMouseHovering=!0,this.coords.old=this._getInputCoords(a),this.coords.oldMid=this._getMidInputCoords(this.coords.old),this.ev.trigger("board:mouseOver",{e:a,coords:b})},_onMouseOut:function(a,b){this.isMouseHovering=!1,this.ev.trigger("board:mouseOut",{e:a,coords:b})},_getInputCoords:function(a){a=a.originalEvent?a.originalEvent:a;var b,c,d=this.canvas.getBoundingClientRect(),e=this.dom.$canvas.width(),f=this.dom.$canvas.height();return a.touches&&1==a.touches.length?(b=a.touches[0].pageX,c=a.touches[0].pageY):(b=a.pageX,c=a.pageY),b-=this.dom.$canvas.offset().left,c-=this.dom.$canvas.offset().top,b*=e/d.width,c*=f/d.height,{x:b,y:c}},_getMidInputCoords:function(a){return{x:this.coords.old.x+a.x>>1,y:this.coords.old.y+a.y>>1}}},DrawingBoard.Control=function(a,b){return this.board=a,this.opts=$.extend({},this.defaults,b),this.$el=$(document.createElement("div")).addClass("drawing-board-control"),this.name&&this.$el.addClass("drawing-board-control-"+this.name),this.board.ev.bind("board:reset",$.proxy(this.onBoardReset,this)),this.initialize.apply(this,arguments),this},DrawingBoard.Control.prototype={name:"",defaults:{},initialize:function(){},addToBoard:function(){this.board.addControl(this)},onBoardReset:function(){}},DrawingBoard.Control.extend=function(a,b){var c,d=this;c=a&&a.hasOwnProperty("constructor")?a.constructor:function(){return d.apply(this,arguments)},$.extend(c,d,b);var e=function(){this.constructor=c};return e.prototype=d.prototype,c.prototype=new e,a&&$.extend(c.prototype,a),c.__super__=d.prototype,c},DrawingBoard.Control.Color=DrawingBoard.Control.extend({name:"colors",initialize:function(){this.initTemplate();var a=this;this.$el.on("click",".drawing-board-control-colors-picker",function(b){var c=$(this).attr("data-color");a.board.setColor(c),a.$el.find(".drawing-board-control-colors-current").css("background-color",c).attr("data-color",c),a.board.ev.trigger("color:changed",c),a.$el.find(".drawing-board-control-colors-rainbows").addClass("drawing-board-utils-hidden"),b.preventDefault()}),this.$el.on("click",".drawing-board-control-colors-current",function(b){a.$el.find(".drawing-board-control-colors-rainbows").toggleClass("drawing-board-utils-hidden"),b.preventDefault()}),$("body").on("click",function(b){var c=$(b.target),d=c.hasClass("drawing-board-control-colors-current")?c:c.closest(".drawing-board-control-colors-current"),e=a.$el.find(".drawing-board-control-colors-current"),f=a.$el.find(".drawing-board-control-colors-rainbows");d.length&&d.get(0)===e.get(0)||f.hasClass("drawing-board-utils-hidden")||f.addClass("drawing-board-utils-hidden")})},initTemplate:function(){var a='<div class="drawing-board-control-inner"><div class="drawing-board-control-colors-current" style="background-color: {{color}}" data-color="{{color}}"></div><div class="drawing-board-control-colors-rainbows">{{rainbows}}</div></div>',b='<div class="drawing-board-control-colors-picker" data-color="{{color}}" style="background-color: {{color}}"></div>',c="";$.each([.75,.5,.25],$.proxy(function(a,d){var e=0,f=null;for(c+='<div class="drawing-board-control-colors-rainbow">',.25==d&&(f=this._rgba(0,0,0,1)),.5==d&&(f=this._rgba(150,150,150,1)),.75==d&&(f=this._rgba(255,255,255,1)),c+=DrawingBoard.Utils.tpl(b,{color:f.toString()});330>=e;)c+=DrawingBoard.Utils.tpl(b,{color:this._hsl2Rgba(this._hsl(e-60,1,d)).toString()}),e+=30;c+="</div>"},this)),this.$el.append($(DrawingBoard.Utils.tpl(a,{color:this.board.color,rainbows:c}))),this.$el.find(".drawing-board-control-colors-rainbows").addClass("drawing-board-utils-hidden")},onBoardReset:function(){this.board.setColor(this.$el.find(".drawing-board-control-colors-current").attr("data-color"))},_rgba:function(a,b,c,d){return{r:a,g:b,b:c,a:d,toString:function(){return"rgba("+a+", "+b+", "+c+", "+d+")"}}},_hsl:function(a,b,c){return{h:a,s:b,l:c,toString:function(){return"hsl("+a+", "+100*b+"%, "+100*c+"%)"}}},_hex2Rgba:function(a){var b=parseInt(a.substring(1),16);return this._rgba(b>>16,b>>8&255,255&b,1)},_hsl2Rgba:function(a){function b(a,b,c){return 0>c&&(c+=1),c>1&&(c-=1),1/6>c?a+6*(b-a)*c:.5>c?b:2/3>c?a+(b-a)*(2/3-c)*6:a}var c,d,e,f=a.h/360,g=a.s,h=a.l;if(0===g)c=d=e=h;else{var i=.5>h?h*(1+g):h+g-h*g,j=2*h-i;c=Math.floor(255*b(j,i,f+1/3)),d=Math.floor(255*b(j,i,f)),e=Math.floor(255*b(j,i,f-1/3))}return this._rgba(c,d,e,1)}}),DrawingBoard.Control.DrawingMode=DrawingBoard.Control.extend({name:"drawingmode",defaults:{pencil:!0,eraser:!0,filler:!0},initialize:function(){this.prevMode=this.board.getMode(),$.each(["pencil","eraser","filler"],$.proxy(function(a,b){this.opts[b]&&this.$el.append('<button class="drawing-board-control-drawingmode-'+b+'-button" data-mode="'+b+'"></button>')},this)),this.$el.on("click","button[data-mode]",$.proxy(function(a){var b=$(a.currentTarget).attr("data-mode"),c=this.board.getMode();c!==b&&(this.prevMode=c);var d=c===b?this.prevMode:b;this.board.setMode(d),a.preventDefault()},this)),this.board.ev.bind("board:mode",$.proxy(function(a){this.toggleButtons(a)},this)),this.toggleButtons(this.board.getMode())},toggleButtons:function(a){this.$el.find("button[data-mode]").each(function(b,c){var d=$(c);d.toggleClass("active",a===d.attr("data-mode"))})}}),DrawingBoard.Control.Navigation=DrawingBoard.Control.extend({name:"navigation",defaults:{back:!0,forward:!0,reset:!0},initialize:function(){var a="";if(this.opts.back&&(a+='<button class="drawing-board-control-navigation-back">&larr;</button>'),this.opts.forward&&(a+='<button class="drawing-board-control-navigation-forward">&rarr;</button>'),this.opts.reset&&(a+='<button class="drawing-board-control-navigation-reset">&times;</button>'),this.$el.append(a),this.opts.back){var b=this.$el.find(".drawing-board-control-navigation-back");this.board.ev.bind("historyNavigation",$.proxy(this.updateBack,this,b)),this.$el.on("click",".drawing-board-control-navigation-back",$.proxy(function(a){this.board.goBackInHistory(),a.preventDefault()},this)),this.updateBack(b)}if(this.opts.forward){var c=this.$el.find(".drawing-board-control-navigation-forward");this.board.ev.bind("historyNavigation",$.proxy(this.updateForward,this,c)),this.$el.on("click",".drawing-board-control-navigation-forward",$.proxy(function(a){this.board.goForthInHistory(),a.preventDefault()},this)),this.updateForward(c)}this.opts.reset&&this.$el.on("click",".drawing-board-control-navigation-reset",$.proxy(function(a){this.board.reset({background:!0}),a.preventDefault()},this))},updateBack:function(a){this.board.history.canUndo()?a.removeAttr("disabled"):a.attr("disabled","disabled")},updateForward:function(a){this.board.history.canRedo()?a.removeAttr("disabled"):a.attr("disabled","disabled")}}),DrawingBoard.Control.Size=DrawingBoard.Control.extend({name:"size",defaults:{type:"auto",dropdownValues:[1,3,6,10,20,30,40,50],min:1,max:50},types:["dropdown","range"],initialize:function(){"auto"==this.opts.type&&(this.opts.type=this._iHasRangeInput()?"range":"dropdown");var a=$.inArray(this.opts.type,this.types)>-1?this["_"+this.opts.type+"Template"]():!1;if(!a)return!1;this.val=this.board.opts.size,this.$el.append($(a)),this.$el.attr("data-drawing-board-type",this.opts.type),this.updateView();var b=this;"range"==this.opts.type&&this.$el.on("change",".drawing-board-control-size-range-input",function(a){b.val=$(this).val(),b.updateView(),b.board.ev.trigger("size:changed",b.val),a.preventDefault()}),"dropdown"==this.opts.type&&(this.$el.on("click",".drawing-board-control-size-dropdown-current",$.proxy(function(){this.$el.find(".drawing-board-control-size-dropdown").toggleClass("drawing-board-utils-hidden")},this)),this.$el.on("click","[data-size]",function(a){b.val=parseInt($(this).attr("data-size"),0),b.updateView(),b.board.ev.trigger("size:changed",b.val),a.preventDefault()}))},_rangeTemplate:function(){var a='<div class="drawing-board-control-inner" title="{{size}}"><input type="range" min="{{min}}" max="{{max}}" value="{{size}}" step="1" class="drawing-board-control-size-range-input"><span class="drawing-board-control-size-range-current"></span></div>';return DrawingBoard.Utils.tpl(a,{min:this.opts.min,max:this.opts.max,size:this.board.opts.size})},_dropdownTemplate:function(){var a='<div class="drawing-board-control-inner" title="{{size}}"><div class="drawing-board-control-size-dropdown-current"><span></span></div><ul class="drawing-board-control-size-dropdown">';return $.each(this.opts.dropdownValues,function(b,c){a+=DrawingBoard.Utils.tpl('<li data-size="{{size}}"><span style="width: {{size}}px; height: {{size}}px; border-radius: {{size}}px;"></span></li>',{size:c})}),a+="</ul></div>"},onBoardReset:function(){this.updateView()},updateView:function(){var a=this.val;if(this.board.ctx.lineWidth=a,this.$el.find(".drawing-board-control-size-range-current, .drawing-board-control-size-dropdown-current span").css({width:a+"px",height:a+"px",borderRadius:a+"px",marginLeft:-1*a/2+"px",marginTop:-1*a/2+"px"}),this.$el.find(".drawing-board-control-inner").attr("title",a),"dropdown"==this.opts.type){var b=null;$.each(this.opts.dropdownValues,function(c,d){(null===b||Math.abs(d-a)<Math.abs(b-a))&&(b=d)}),this.$el.find(".drawing-board-control-size-dropdown").addClass("drawing-board-utils-hidden")}},_iHasRangeInput:function(){var a,b=document.createElement("input"),c=":)",d=document.documentElement,e="range";return b.setAttribute("type",e),a="text"!==b.type,b.value=c,b.style.cssText="position:absolute;visibility:hidden;",/^range$/.test(e)&&void 0!==b.style.WebkitAppearance&&(d.appendChild(b),defaultView=document.defaultView,a=defaultView.getComputedStyle&&"textfield"!==defaultView.getComputedStyle(b,null).WebkitAppearance&&0!==b.offsetHeight,d.removeChild(b)),!!a}}),DrawingBoard.Control.Download=DrawingBoard.Control.extend({name:"download",initialize:function(){this.$el.append('<button class="drawing-board-control-download-button"></button>'),this.$el.on("click",".drawing-board-control-download-button",$.proxy(function(a){this.board.downloadImg(),a.preventDefault()},this))}});
\ No newline at end of file
diff --git a/ui/media/js/image-editor.js b/ui/media/js/image-editor.js
new file mode 100644
index 00000000..b297196d
--- /dev/null
+++ b/ui/media/js/image-editor.js
@@ -0,0 +1,492 @@
+var editorControlsLeft = document.getElementById("image-editor-controls-left")
+
+const IMAGE_EDITOR_MAX_SIZE = 800
+
+const IMAGE_EDITOR_BUTTONS = [
+	{
+		name: "Clear",
+		icon: "fa-solid fa-xmark",
+		handler: editor => {
+			editor.clear()
+		}
+	},
+	{
+		name: "Cancel",
+		icon: "fa-regular fa-circle-xmark",
+		handler: editor => {
+			editor.close()
+		}
+	},
+	{
+		name: "Save",
+		icon: "fa-solid fa-floppy-disk",
+		handler: editor => {
+			editor.saveImage()
+		}
+	}
+]
+
+const IMAGE_EDITOR_TOOLS = [
+	{
+		id: "draw",
+		name: "Draw",
+		icon: "fa-solid fa-pencil"
+	},
+	{
+		id: "erase",
+		name: "Erase",
+		icon: "fa-solid fa-eraser"
+	}
+]
+
+var IMAGE_EDITOR_SECTIONS = [
+	{
+		name: "tool",
+		title: "Tool",
+		default: "draw",
+		options: Array.from(IMAGE_EDITOR_TOOLS.map(t => t.id)),
+		initElement: (element, option) => {
+			var tool_info = IMAGE_EDITOR_TOOLS.find(t => t.id == option)
+			element.className = "image-editor-button button"
+			var sub_element = document.createElement("div")
+			var icon = document.createElement("i")
+			tool_info.icon.split(" ").forEach(c => icon.classList.add(c))
+			sub_element.appendChild(icon)
+			sub_element.append(tool_info.name)
+			element.appendChild(sub_element)
+		}
+	},
+	{
+		name: "color",
+		title: "Color",
+		default: "#f1c232",
+		options: [
+			"custom",
+			"#ea9999", "#e06666", "#cc0000", "#990000", "#660000",
+			"#f9cb9c", "#f6b26b", "#e69138", "#b45f06", "#783f04",
+			"#ffe599", "#ffd966", "#f1c232", "#bf9000", "#7f6000",
+			"#b6d7a8", "#93c47d", "#6aa84f", "#38761d", "#274e13",
+			"#a4c2f4", "#6d9eeb", "#3c78d8", "#1155cc", "#1c4587",
+			"#b4a7d6", "#8e7cc3", "#674ea7", "#351c75", "#20124d",
+			"#d5a6bd", "#c27ba0", "#a64d79", "#741b47", "#4c1130",
+			"#ffffff", "#c0c0c0", "#838383", "#525252", "#000000",
+		],
+		initElement: (element, option) => {
+			if (option == "custom") {
+				var input = document.createElement("input")
+				input.type = "color"
+				element.appendChild(input)
+				var span = document.createElement("span")
+				span.textContent = "Custom"
+				element.appendChild(span)
+			}
+			else {
+				element.style.background = option
+			}
+		},
+		getCustom: editor => {
+			var input = editor.popup.querySelector(".image_editor_color input")
+			return input.value
+		}
+	},
+	{
+		name: "brush_size",
+		title: "Brush Size",
+		default: 48,
+		options: [ 16, 24, 32, 48, 64 ],
+		initElement: (element, option) => {
+			element.parentElement.style.flex = option
+			element.style.width = option + "px"
+			element.style.height = option + "px"
+			element.style["border-radius"] = (option / 2).toFixed() + "px"
+		}
+	},
+	{
+		name: "opacity",
+		title: "Opacity",
+		default: 0,
+		options: [ 0, 0.25, 0.5, 0.75, 1 ],
+		initElement: (element, option) => {
+			element.style.background = `repeating-conic-gradient(rgba(0, 0, 0, ${option}) 0% 25%, rgba(255, 255, 255, ${option}) 0% 50%) 50% / 10px 10px`
+		}
+	},
+	{
+		name: "sharpness",
+		title: "Sharpness",
+		default: 0,
+		options: [ 0, 0.05, 0.1, 0.2, 0.3 ],
+		initElement: (element, option) => {
+			var size = 32
+			var blur_amount = parseInt(option * size)
+			var sub_element = document.createElement("div")
+			sub_element.style.background = `var(--background-color3)`
+			sub_element.style.filter = `blur(${blur_amount}px)`
+			sub_element.style.width = `${size - 4}px`
+			sub_element.style.height = `${size - 4}px`
+			sub_element.style['border-radius'] = `${size}px`
+			element.style.background = "none"
+			element.appendChild(sub_element)
+		}
+	}
+]
+
+class ImageEditor {
+	constructor(popup, inpainter = false) {
+		this.inpainter = inpainter
+		this.popup = popup
+		if (inpainter) {
+			this.popup.classList.add("inpainter")
+		}
+		this.drawing = false
+		this.dropper_active = false
+		this.container = popup.querySelector(".editor-controls-center > div")
+		this.cursor_icon = document.createElement("i")
+		this.layers = {}
+		var layer_names = [
+			"background",
+			"drawing",
+			"overlay"
+		]
+		layer_names.forEach(name => {
+			let canvas = document.createElement("canvas")
+			canvas.className = `editor-canvas-${name}`
+			this.container.appendChild(canvas)
+			this.layers[name] = {
+				name: name,
+				canvas: canvas,
+				ctx: canvas.getContext("2d")
+			}
+		})
+
+		this.setSize(512, 512)
+
+		this.cursor_icon.classList.add("cursor-icon")
+		this.container.appendChild(this.cursor_icon)
+
+		// add mouse handlers
+		this.container.addEventListener("mousedown", this.mouseHandler.bind(this))
+		this.container.addEventListener("mouseup", this.mouseHandler.bind(this))
+		this.container.addEventListener("mousemove", this.mouseHandler.bind(this))
+		this.container.addEventListener("mouseout", this.mouseHandler.bind(this))
+		this.container.addEventListener("mouseenter", this.mouseHandler.bind(this))
+
+		this.container.addEventListener("touchstart", this.mouseHandler.bind(this))
+		this.container.addEventListener("touchmove", this.mouseHandler.bind(this))
+		this.container.addEventListener("touchcancel", this.mouseHandler.bind(this))
+		this.container.addEventListener("touchend", this.mouseHandler.bind(this))
+		// setup forwarding for keypresses so the eyedropper works accordingly
+		var mouseHandlerHelper = this.mouseHandler.bind(this)
+		this.container.addEventListener("mouseenter",function() {
+			document.addEventListener("keyup", mouseHandlerHelper)
+			document.addEventListener("keydown", mouseHandlerHelper)
+		})
+		this.container.addEventListener("mouseout",function() {
+			document.removeEventListener("keyup", mouseHandlerHelper)
+			document.removeEventListener("keydown", mouseHandlerHelper)
+		})
+
+		// initialize editor controls
+		this.options = {}
+		this.optionElements = {}
+		IMAGE_EDITOR_SECTIONS.forEach(section => {
+			section.id = `image_editor_${section.name}`
+			var sectionElement = document.createElement("div")
+			sectionElement.className = section.id
+	
+			var title = document.createElement("h4")
+			title.innerText = section.title
+			sectionElement.appendChild(title)
+	
+			var optionsContainer = document.createElement("div")
+			optionsContainer.classList.add("editor-options-container")
+	
+			this.optionElements[section.name] = []
+			section.options.forEach((option, index) => {
+				var optionHolder = document.createElement("div")
+				var optionElement = document.createElement("div")
+				optionHolder.appendChild(optionElement)
+				section.initElement(optionElement, option)
+				optionElement.addEventListener("click", target => this.selectOption(section.name, index))
+				optionsContainer.appendChild(optionHolder)
+				this.optionElements[section.name].push(optionElement)
+			})
+			this.selectOption(section.name, section.options.indexOf(section.default))
+	
+			sectionElement.appendChild(optionsContainer)
+	
+			this.popup.querySelector(".editor-controls-left").appendChild(sectionElement)
+		})
+
+		this.custom_color_input = this.popup.querySelector(`input[type="color"]`)
+		this.custom_color_input.addEventListener("change", () => {
+			this.custom_color_input.parentElement.style.background = this.custom_color_input.value
+			this.selectOption("color", 0)
+		})
+
+		if (this.inpainter) {
+			this.selectOption("color", IMAGE_EDITOR_SECTIONS.find(s => s.name == "color").options.indexOf("#ffffff"))
+		}
+
+		// initialize the right-side controls
+		var buttonContainer = document.createElement("div")
+		IMAGE_EDITOR_BUTTONS.forEach(button => {
+			var element = document.createElement("div")
+			var icon = document.createElement("i")
+			element.className = "image-editor-button button"
+			icon.className = button.icon
+			element.appendChild(icon)
+			element.append(button.name)
+			buttonContainer.appendChild(element)
+			element.addEventListener("click", event => button.handler(this))
+		})
+		this.popup.querySelector(".editor-controls-right").appendChild(buttonContainer)
+	}
+	setSize(width, height) {
+		if (width == this.width && height == this.height) {
+			return
+		}
+
+		var max_size = Math.min(parseInt(window.innerWidth * 0.9), width, 768)
+		if (width > height) {
+			var multiplier = max_size / width
+			width = (multiplier * width).toFixed()
+			height = (multiplier * height).toFixed()
+		}
+		else {
+			var multiplier = max_size / height
+			width = (multiplier * width).toFixed()
+			height = (multiplier * height).toFixed()
+		}
+		this.width = width
+		this.height = height
+	
+		this.container.style.width = width + "px"
+		this.container.style.height = height + "px"
+		
+		Object.values(this.layers).forEach(layer => {
+			layer.canvas.width = width
+			layer.canvas.height = height
+		})
+
+		if (this.inpainter) {
+			this.saveImage() // We've reset the size of the image so inpainting is different
+		}
+		this.setBrush()
+	}
+	setCursorIcon(icon_class = null) {
+		if (icon_class == null) {
+			var tool = this.getOptionValue("tool")
+			icon_class = IMAGE_EDITOR_TOOLS.find(t => t.id == tool).icon
+		}
+		this.cursor_icon.className = `cursor-icon ${icon_class}`
+	}
+	setImage(url, width, height) {
+		this.setSize(width, height)
+		this.layers.drawing.ctx.clearRect(0, 0, this.width, this.height)
+		this.layers.background.ctx.clearRect(0, 0, this.width, this.height)
+		if (url) {
+			var image = new Image()
+			image.onload = () => { 
+				this.layers.background.ctx.drawImage(image, 0, 0, this.width, this.height)
+			}
+			image.src = url
+		}
+		else {
+			this.layers.background.ctx.fillStyle = "#ffffff"
+			this.layers.background.ctx.beginPath()
+			this.layers.background.ctx.rect(0, 0, this.width, this.height)
+			this.layers.background.ctx.fill()
+		}
+	}
+	saveImage() {
+		if (!this.inpainter) {
+			// This is not an inpainter, so save the image as the new img2img input
+			this.layers.background.ctx.drawImage(this.layers.drawing.canvas, 0, 0, this.width, this.height)
+			var base64 = this.layers.background.canvas.toDataURL()
+			initImagePreview.src = base64 // this will trigger the rest of the app to use it
+		}
+		else {
+			// This is an inpainter, so make sure the toggle is set accordingly
+			var is_blank = !this.layers.drawing.ctx
+				.getImageData(0, 0, this.width, this.height).data
+				.some(channel => channel !== 0)
+			maskSetting.checked = !is_blank
+		}
+		this.close()
+	}
+	getImg() { // a drop-in replacement of the drawingboard version
+		return this.layers.drawing.canvas.toDataURL()
+	}
+	close() {
+		this.popup.classList.remove("active")
+	}
+	clear() {
+		this.ctx_current.clearRect(0, 0, this.width, this.height)
+	}
+	get eraser_active() {
+		return this.getOptionValue("tool") == "erase"
+	}
+	setBrush(layer = null) {
+		if (layer) {
+			layer.ctx.lineCap = "round"
+			layer.ctx.lineJoin = "round"
+			layer.ctx.lineWidth = this.getOptionValue("brush_size")
+			layer.ctx.fillStyle = this.getOptionValue("color")
+			layer.ctx.strokeStyle = this.getOptionValue("color")
+			var sharpness = parseInt(this.getOptionValue("sharpness") * this.getOptionValue("brush_size"))
+			layer.ctx.filter = sharpness == 0 ? `none` : `blur(${sharpness}px)`
+			layer.ctx.globalAlpha = (1 - this.getOptionValue("opacity"))
+			layer.ctx.globalCompositeOperation = this.eraser_active ? "destination-out" : "source-over"
+		}
+		else {
+			Object.values([ "drawing", "overlay" ]).map(name => this.layers[name]).forEach(l => {
+				this.setBrush(l)
+			})
+		}
+	}
+	get ctx_overlay() {
+		return this.layers.overlay.ctx
+	}
+	get ctx_current() { // the idea is this will help support having custom layers and editing each one
+		return this.layers.drawing.ctx
+	}
+	get canvas_current() {
+		return this.layers.drawing.canvas
+	}
+	mouseHandler(event) {
+		var bbox = this.layers.overlay.canvas.getBoundingClientRect()
+		var x = (event.clientX || 0) - bbox.left
+		var y = (event.clientY || 0) - bbox.top
+		var type = event.type;
+		var touchmap = {
+			touchstart: "mousedown",
+			touchmove: "mousemove",
+			touchend: "mouseup",
+			touchcancel: "mouseup"
+		}
+		if (type in touchmap) {
+			type = touchmap[type]
+			if (event.touches && event.touches[0]) {
+				var touch = event.touches[0]				
+				var x = (touch.clientX || 0) - bbox.left
+				var y = (touch.clientY || 0) - bbox.top
+			}
+		}
+	
+		// do drawing-related stuff
+		if (type == "mousedown" || (type == "mouseenter" && event.buttons == 1)) {
+			if (this.dropper_active) {
+				var img_rgb = this.layers.background.ctx.getImageData(x, y, 1, 1).data
+				var drw_rgb = this.ctx_current.getImageData(x, y, 1, 1).data
+				var drw_opacity = drw_rgb[3] / 255
+				var test = rgbToHex({ 
+					r: (drw_rgb[0] * drw_opacity) + (img_rgb[0] * (1 - drw_opacity)),
+					g: (drw_rgb[1] * drw_opacity) + (img_rgb[1] * (1 - drw_opacity)),
+					b: (drw_rgb[2] * drw_opacity) + (img_rgb[2] * (1 - drw_opacity)),
+				})
+				this.custom_color_input.value = test
+				this.custom_color_input.dispatchEvent(new Event("change"))
+			}
+			else {
+				this.drawing = true
+				this.ctx_overlay.beginPath()
+				this.ctx_overlay.moveTo(x, y)
+				this.ctx_current.beginPath()
+				this.ctx_current.moveTo(x, y)
+			}
+		}
+		if (type == "mouseup" || type == "mousemove") {
+			if (this.drawing) {
+				if (x > 0 && y > 0) {
+					this.ctx_current.lineTo(x, y)
+					this.ctx_overlay.lineTo(x, y)
+
+					// This isnt super efficient, but its the only way ive found to have clean updating for the drawing
+					this.ctx_overlay.clearRect(0, 0, this.width, this.height)
+					if (this.eraser_active) {
+						this.ctx_overlay.globalCompositeOperation = "source-over"
+						this.ctx_overlay.globalAlpha = 1
+						this.ctx_overlay.filter = "none"
+						this.ctx_overlay.drawImage(this.canvas_current, 0, 0)
+						this.setBrush(this.layers.overlay)
+						this.canvas_current.style.opacity = 0
+					}
+
+					this.ctx_overlay.stroke()
+				}
+			}
+		}
+		if (type == "mouseup" || type == "mouseout") {
+			if (this.drawing) {
+				this.drawing = false
+				this.ctx_current.stroke()
+				this.ctx_overlay.clearRect(0, 0, this.width, this.height)
+
+				if (this.eraser_active) {
+					this.canvas_current.style.opacity = ""
+				}
+			}
+		}
+
+		// cursor-icon stuff
+		if (type == "mousemove") {
+			this.cursor_icon.style.left = `${x + 10}px`
+			this.cursor_icon.style.top = `${y + 20}px`
+		}
+		if (type == "mouseenter") {
+			this.cursor_icon.style.opacity = 1
+		}
+		if (type == "mouseout") {
+			this.cursor_icon.style.opacity = 0
+		}
+		if ([ "mouseenter", "mousemove", "keydown", "keyup" ].includes(type)) {
+			if (this.dropper_active && !event.ctrlKey) {
+				this.dropper_active = false
+				this.setCursorIcon()
+			}
+			else if (!this.dropper_active && event.ctrlKey) {
+				this.dropper_active = true
+				this.setCursorIcon("fa-solid fa-eye-dropper")
+			}
+		}
+	}
+	getOptionValue(section_name) {
+		var section = IMAGE_EDITOR_SECTIONS.find(s => s.name == section_name)
+		return this.options && section_name in this.options ? this.options[section_name] : section.default
+	}
+	selectOption(section_name, option_index) {
+		var section = IMAGE_EDITOR_SECTIONS.find(s => s.name == section_name)
+		var value = section.options[option_index]
+		this.options[section_name] = value == "custom" ? section.getCustom(this) : value
+		
+		this.optionElements[section_name].forEach(element => element.classList.remove("active"))
+		this.optionElements[section_name][option_index].classList.add("active")
+	
+		// change the editor
+		this.setBrush()
+		if (section.name == "tool") {
+			this.setCursorIcon()
+		}
+	}
+}
+
+function rgbToHex(rgb) {
+	function componentToHex(c) {
+		var hex = parseInt(c).toString(16)
+		return hex.length == 1 ? "0" + hex : hex
+	}
+	return "#" + componentToHex(rgb.r) + componentToHex(rgb.g) + componentToHex(rgb.b)
+}
+
+const imageEditor = new ImageEditor(document.getElementById("image-editor"))
+const imageInpainter = new ImageEditor(document.getElementById("image-inpainter"), true)
+
+imageEditor.setImage(null, 512, 512)
+imageInpainter.setImage(null, 512, 512)
+
+document.getElementById("init_image_button_draw").addEventListener("click", () => {
+	document.getElementById("image-editor").classList.toggle("active")
+})
+document.getElementById("init_image_button_inpaint").addEventListener("click", () => {
+	document.getElementById("image-inpainter").classList.toggle("active")
+})
\ No newline at end of file
diff --git a/ui/media/js/inpainting-editor.js b/ui/media/js/inpainting-editor.js
deleted file mode 100644
index 548ebae0..00000000
--- a/ui/media/js/inpainting-editor.js
+++ /dev/null
@@ -1,41 +0,0 @@
-const INPAINTING_EDITOR_SIZE = 450
-
-let inpaintingEditorContainer = document.querySelector('#inpaintingEditor')
-let inpaintingEditor = new DrawingBoard.Board('inpaintingEditor', {
-    color: "#ffffff",
-    background: false,
-    size: 30,
-    webStorage: false,
-    controls: [{'DrawingMode': {'filler': false}}, 'Size', 'Navigation']
-})
-let inpaintingEditorCanvasBackground = document.querySelector('.drawing-board-canvas-wrapper')
-
-function resizeInpaintingEditor(widthValue, heightValue) {
-    if (widthValue === heightValue) {
-        widthValue = INPAINTING_EDITOR_SIZE
-        heightValue = INPAINTING_EDITOR_SIZE
-    } else if (widthValue > heightValue) {
-        heightValue = (heightValue / widthValue) * INPAINTING_EDITOR_SIZE
-        widthValue = INPAINTING_EDITOR_SIZE
-    } else {
-        widthValue = (widthValue / heightValue) * INPAINTING_EDITOR_SIZE
-        heightValue = INPAINTING_EDITOR_SIZE
-    }
-    if (inpaintingEditor.opts.aspectRatio === (widthValue / heightValue).toFixed(3)) {
-        // Same ratio, don't reset the canvas.
-        return
-    }
-    inpaintingEditor.opts.aspectRatio = (widthValue / heightValue).toFixed(3)
-
-    inpaintingEditorContainer.style.width = widthValue + 'px'
-    inpaintingEditorContainer.style.height = heightValue + 'px'
-    inpaintingEditor.opts.enlargeYourContainer = true
-
-    inpaintingEditor.opts.size = inpaintingEditor.ctx.lineWidth
-    inpaintingEditor.resize()
-
-    inpaintingEditor.ctx.lineCap = "round"
-    inpaintingEditor.ctx.lineJoin = "round"
-    inpaintingEditor.ctx.lineWidth = inpaintingEditor.opts.size
-    inpaintingEditor.setColor(inpaintingEditor.opts.color)
-}
\ No newline at end of file
diff --git a/ui/media/js/main.js b/ui/media/js/main.js
index 1a73f82e..945c930b 100644
--- a/ui/media/js/main.js
+++ b/ui/media/js/main.js
@@ -59,14 +59,6 @@ let serverStatusColor = document.querySelector('#server-status-color')
 let serverStatusMsg = document.querySelector('#server-status-msg')
 
 
-document.querySelector('.drawing-board-control-navigation-back').innerHTML = '<i class="fa-solid fa-rotate-left"></i>'
-document.querySelector('.drawing-board-control-navigation-forward').innerHTML = '<i class="fa-solid fa-rotate-right"></i>'
-
-let maskResetButton = document.querySelector('.drawing-board-control-navigation-reset')
-maskResetButton.innerHTML = 'Clear'
-maskResetButton.style.fontWeight = 'normal'
-maskResetButton.style.fontSize = '10pt'
-
 let serverState = {'status': 'Offline', 'time': Date.now()}
 let bellPending = false
 
@@ -335,11 +327,7 @@ function onUseAsInputClick(req, img) {
     initImageSelector.value = null
     initImagePreview.src = imgData
 
-    initImagePreviewContainer.style.display = 'block'
-    inpaintingEditorContainer.style.display = 'none'
-    promptStrengthContainer.style.display = 'table-row'
     maskSetting.checked = false
-    samplerSelectionContainer.style.display = 'none'
 }
 
 function onDownloadImageClick(req, img) {
@@ -805,7 +793,7 @@ function getCurrentUserRequest() {
         //     newTask.reqBody.mask = maskImagePreview.src
         // }
         if (maskSetting.checked) {
-            newTask.reqBody.mask = inpaintingEditor.getImg()
+            newTask.reqBody.mask = imageInpainter.getImg()
         }
         newTask.reqBody.sampler = 'ddim'
     } else {
@@ -1092,13 +1080,14 @@ numOutputsTotalField.addEventListener('change', renameMakeImageButton)
 numOutputsParallelField.addEventListener('change', renameMakeImageButton)
 
 function onDimensionChange() {
-    if (!maskSetting.checked) {
-        return
-    }
     let widthValue = parseInt(widthField.value)
     let heightValue = parseInt(heightField.value)
-
-    resizeInpaintingEditor(widthValue, heightValue)
+    if (!initImagePreviewContainer.classList.contains("has-image")) {
+        imageEditor.setImage(null, widthValue, heightValue)
+    }
+    else {
+        imageInpainter.setImage(initImagePreview.src, widthValue, heightValue)
+    }
 }
 
 diskPathField.disabled = !saveToDiskField.checked
@@ -1221,10 +1210,6 @@ checkRandomSeed()
 
 function showInitImagePreview() {
     if (initImageSelector.files.length === 0) {
-        initImagePreviewContainer.style.display = 'none'
-        // inpaintingEditorContainer.style.display = 'none'
-        promptStrengthContainer.style.display = 'none'
-        // maskSetting.style.display = 'none'
         return
     }
 
@@ -1232,13 +1217,7 @@ function showInitImagePreview() {
     let file = initImageSelector.files[0]
 
     reader.addEventListener('load', function(event) {
-        // console.log(file.name, reader.result)
         initImagePreview.src = reader.result
-        initImagePreviewContainer.style.display = 'block'
-        inpaintingEditorContainer.style.display = 'none'
-        promptStrengthContainer.style.display = 'table-row'
-        samplerSelectionContainer.style.display = 'none'
-        // maskSetting.checked = false
     })
 
     if (file) {
@@ -1249,34 +1228,25 @@ initImageSelector.addEventListener('change', showInitImagePreview)
 showInitImagePreview()
 
 initImagePreview.addEventListener('load', function() {
-    inpaintingEditorCanvasBackground.style.backgroundImage = "url('" + this.src + "')"
-    // maskSetting.style.display = 'block'
-    // inpaintingEditorContainer.style.display = 'block'
+    promptStrengthContainer.style.display = 'table-row'
+    initImagePreviewContainer.classList.add("has-image")
+
     initImageSizeBox.textContent = initImagePreview.naturalWidth + " x " + initImagePreview.naturalHeight
-    initImageSizeBox.style.display = 'block'
+    imageEditor.setImage(this.src, initImagePreview.naturalWidth, initImagePreview.naturalHeight)
+    imageInpainter.setImage(this.src, parseInt(widthField.value), parseInt(heightField.value))
 })
 
 initImageClearBtn.addEventListener('click', function() {
     initImageSelector.value = null
-    // maskImageSelector.value = null
-
     initImagePreview.src = ''
-    // maskImagePreview.src = ''
     maskSetting.checked = false
 
-    initImagePreviewContainer.style.display = 'none'
-    // inpaintingEditorContainer.style.display = 'none'
-    // maskImagePreviewContainer.style.display = 'none'
-
-    // maskSetting.style.display = 'none'
-
     promptStrengthContainer.style.display = 'none'
-    samplerSelectionContainer.style.display = 'table-row'
-    initImageSizeBox.style.display = 'none'
+    initImagePreviewContainer.classList.remove("has-image")
+    imageEditor.setImage(null, parseInt(widthField.value), parseInt(heightField.value))
 })
 
 maskSetting.addEventListener('click', function() {
-    inpaintingEditorContainer.style.display = (this.checked ? 'block' : 'none')
     onDimensionChange()
 })
 
@@ -1316,9 +1286,22 @@ document.querySelectorAll('.popup').forEach(popup => {
     }
 })
 
-var tabElements = [];
+var tabElements = []
+function selectTab(tab_id) {
+    let tabInfo = tabElements.find(t => t.tab.id == tab_id)
+    if (!tabInfo.tab.classList.contains("active")) {
+        tabElements.forEach(info => {
+            if (info.tab.classList.contains("active")) {
+                info.tab.classList.toggle("active")
+                info.content.classList.toggle("active")
+            }
+        })
+        tabInfo.tab.classList.toggle("active")
+        tabInfo.content.classList.toggle("active")
+    }
+}
 function linkTabContents(tab) {
-    var name = tab.id.replace("tab-", "");
+    var name = tab.id.replace("tab-", "")
     var content = document.getElementById(`tab-content-${name}`)
     tabElements.push({
         name: name,
@@ -1326,18 +1309,7 @@ function linkTabContents(tab) {
         content: content
     })
 
-    tab.addEventListener("click", event => {
-        if (!tab.classList.contains("active")) {
-            tabElements.forEach(tabInfo => {
-                if (tabInfo.tab.classList.contains("active")) {
-                    tabInfo.tab.classList.toggle("active")
-                    tabInfo.content.classList.toggle("active")
-                }
-            })
-            tab.classList.toggle("active")
-            content.classList.toggle("active")
-        }
-    })
+    tab.addEventListener("click", event => selectTab(tab.id))
 }
 
 document.querySelectorAll(".tab").forEach(linkTabContents)
