clean

ui/frontend/build_src/src/components/molecules/drawImage/index.tsx

@@ -10,15 +10,19 @@ type DrawImageProps = {
   brushShape: string;
   brushColor: string;
   isErasing: boolean;
-
 };
 
 import {
   DrawImageMain, //@ts-ignore
 } from "./drawImage.css.ts";
 
-export default function DrawImage({ imageData, brushSize, brushShape, brushColor, isErasing }: DrawImageProps) {
+export default function DrawImage({
-
+  imageData,
+  brushSize,
+  brushShape,
+  brushColor,
+  isErasing,
+}: DrawImageProps) {
   const drawingRef = useRef<HTMLCanvasElement>(null);
   const cursorRef = useRef<HTMLCanvasElement>(null);
   const [isUpdating, setIsUpdating] = useState(false);
@@ -26,22 +30,18 @@ export default function DrawImage({ imageData, brushSize, brushShape, brushColor
   const [canvasWidth, setCanvasWidth] = useState(512);
   const [canvasHeight, setCanvasHeight] = useState(512);
 
-
   useEffect(() => {
     console.log(imageData);
     const img = new Image();
     img.onload = () => {
       setCanvasWidth(img.width);
       setCanvasHeight(img.height);
-
+    };
-    }
     img.src = imageData;
-
   }, [imageData]);
 
-
   useEffect(() => {
-    // when the brush color changes, change the color of all the 
+    // when the brush color changes, change the color of all the
     // drawn pixels to the new color
     if (drawingRef.current) {
       const ctx = drawingRef.current.getContext("2d");
@@ -56,7 +56,6 @@ export default function DrawImage({ imageData, brushSize, brushShape, brushColor
       }
       ctx.putImageData(imageData, 0, 0);
     }
-
   }, [brushColor]);
 
   const _handleMouseDown = (
@@ -87,12 +86,10 @@ export default function DrawImage({ imageData, brushSize, brushShape, brushColor
     if (canvas) {
       const ctx = canvas.getContext("2d");
       if (isErasing) {
-
         // stack overflow https://stackoverflow.com/questions/10396991/clearing-circular-regions-from-html5-canvas
 
         const offset = brushSize / 2;
         ctx.clearRect(x - offset, y - offset, brushSize, brushSize);
-
       } else {
         ctx.beginPath();
         ctx.lineWidth = brushSize;
@@ -116,7 +113,7 @@ export default function DrawImage({ imageData, brushSize, brushShape, brushColor
         const offset = brushSize / 2;
         // draw a quare
         ctx.lineWidth = 2;
-        ctx.lineCap = 'butt';
+        ctx.lineCap = "butt";
         ctx.strokeStyle = brushColor;
         ctx.moveTo(x - offset, y - offset);
         ctx.lineTo(x + offset, y - offset);
@@ -124,9 +121,7 @@ export default function DrawImage({ imageData, brushSize, brushShape, brushColor
         ctx.lineTo(x - offset, y + offset);
         ctx.lineTo(x - offset, y - offset);
         ctx.stroke();
-
       } else {
-
         ctx.lineWidth = brushSize;
         ctx.lineCap = brushShape;
         ctx.strokeStyle = brushColor;
@@ -135,13 +130,11 @@ export default function DrawImage({ imageData, brushSize, brushShape, brushColor
         ctx.stroke();
       }
     }
-
   };
 
   const _handleMouseMove = (
     e: React.MouseEvent<HTMLCanvasElement, MouseEvent>
   ) => {
-
     const {
       nativeEvent: { offsetX: x, offsetY: y },
     } = e;

ui/frontend/build_src/src/components/organisms/creationPanel/index.tsx

@@ -10,15 +10,12 @@ import "./creationPanel.css";
 
 import {
   CreationPaneMain,
-  InpaintingSlider
+  InpaintingSlider, // @ts-ignore
-} from // @ts-ignore
+} from "./creationpane.css.ts";
-  "./creationpane.css.ts";
 
 import BasicCreation from "./basicCreation";
 
 export default function CreationPanel() {
-
-
   const isInPaintingMode = useImageCreate((state) => state.isInpainting);
   return (
     <>
@@ -29,7 +26,6 @@ export default function CreationPanel() {
       </div>
 
       {isInPaintingMode && (
-
         <div className={InpaintingSlider}>
           <InpaintingPanel></InpaintingPanel>
         </div>

ui/frontend/build_src/src/components/organisms/creationPanel/inpaintingPanel/index.tsx

@@ -1,22 +1,19 @@
-import React, { useRef, useState, ChangeEvent } from "react";
+import React, { useRef, useState, ChangeEvent, MouseEventHandler } from "react";
 import DrawImage from "../../../molecules/drawImage";
 
 import { useImageCreate } from "../../../../stores/imageCreateStore";
 
-
 import {
   InpaintingPanelMain,
   InpaintingControls,
-  InpaintingControlRow,
+  InpaintingControlRow, // @ts-ignore
-} from // @ts-ignore
+} from "./inpaintingPanel.css.ts";
-  "./inpaintingPanel.css.ts";
 
 export default function InpaintingPanel() {
-
   // no idea if this is the right typing
   const drawingRef = useRef(null);
 
-  const [brushSize, setBrushSize] = useState('20');
+  const [brushSize, setBrushSize] = useState("20");
   const [brushShape, setBrushShape] = useState("round");
   const [brushColor, setBrushColor] = useState("#fff");
   const [isErasing, setIsErasing] = useState(false);
@@ -43,25 +40,10 @@ export default function InpaintingPanel() {
     console.log("clear all");
   };
 
-  const _handleBrushSize = (e: ChangeEvent<HTMLInputElement>) => {
+  const _handleBrushSize = (event: ChangeEvent<HTMLInputElement>) => {
-    setBrushSize(e.target.value);
+    setBrushSize(event.target.value);
   };
 
-  // const _handleBrushShape = (e: ) => {
-  //   console.log("brush shape", e.target.value);
-  //   setBrushShape(e.target.value);
-  // };
-
-  const _handleBrushShape = (e: ChangeEvent<HTMLInputElement>) => {
-    setBrushShape(e.target.value);
-  };
-
-  const _handleBrushColor = (e: ChangeEvent<HTMLInputElement>) => {
-    console.log("brush color", e.target.value);
-    setBrushColor(e.target.value);
-  };
-
-
   return (
     <div className={InpaintingPanelMain}>
       <DrawImage
@@ -74,31 +56,16 @@ export default function InpaintingPanel() {
       />
       <div className={InpaintingControls}>
         <div className={InpaintingControlRow}>
-          <button
+          <button onClick={_handleBrushMask}>Mask</button>
-            onClick={_handleBrushMask}
+          <button onClick={_handleBrushErase}>Erase</button>
-          >
+          <button disabled onClick={_handleFillMask}>
-            Mask
-          </button>
-          <button
-            onClick={_handleBrushErase}
-          >
-            Erase
-          </button>
-          <button
-            disabled
-            onClick={_handleFillMask}
-          >
             Fill
           </button>
-          <button
+          <button disabled onClick={_handleClearAll}>
-            disabled
-            onClick={_handleClearAll}
-          >
             Clear
           </button>
 
-          <label
+          <label>
-          >
             Brush Size
             <input
               type="range"
@@ -106,42 +73,42 @@ export default function InpaintingPanel() {
               max="100"
               value={brushSize}
               onChange={_handleBrushSize}
-            >
+            ></input>
-            </input>
           </label>
         </div>
 
         <div className={InpaintingControlRow}>
           <button
-            value={"round"}
+            onClick={() => {
-            onClick={_handleBrushShape}
+              setBrushShape("round");
+            }}
           >
             Cirle Brush
           </button>
           <button
-            value={"square"}
+            onClick={() => {
-            onClick={_handleBrushShape}
+              setBrushShape("square");
+            }}
           >
             Square Brush
           </button>
 
           <button
-            value={"#000"}
+            onClick={() => {
-            onClick={_handleBrushColor}
+              setBrushColor("#000");
+            }}
           >
             Dark Brush
           </button>
           <button
-            value={"#fff"}
+            onClick={() => {
-            onClick={_handleBrushColor}
+              setBrushColor("#fff");
+            }}
           >
             Light Brush
           </button>
-
-
         </div>
-
       </div>
     </div>
   );
-};
+}

ui/frontend/build_src/src/components/organisms/creationPanel/inpaintingPanel/inpaintingPanel.css.ts

@@ -1,29 +1,27 @@
-import { style } from '@vanilla-extract/css'
+import { style } from "@vanilla-extract/css";
 
 export const InpaintingPanelMain = style({
-  position: 'relative',
+  position: "relative",
-  width: '100%',
+  width: "100%",
-  height: '100%',
+  height: "100%",
-  padding: '10px 10px',
+  padding: "10px 10px",
 });
 
 export const InpaintingControls = style({
-  display: 'flex',
+  display: "flex",
-  flexDirection: 'row',
+  flexDirection: "row",
-  width: '100%',
+  width: "100%",
-  flexWrap: 'wrap',
+  flexWrap: "wrap",
 });
 
 export const InpaintingControlRow = style({
-  display: 'flex',
+  display: "flex",
-  flexDirection: 'row',
+  flexDirection: "row",
-  justifyContent: 'space-evenly',
+  justifyContent: "space-evenly",
-  alignItems: 'center',
+  alignItems: "center",
-  width: '100%',
+  width: "100%",
-
-  ':first-of-type': {
-    margin: '10px 0',
 
+  ":first-of-type": {
+    margin: "10px 0",
   },
-
 });

ui/frontend/build_src/src/components/organisms/displayPanel/index.tsx

@@ -26,7 +26,6 @@ type CompletedImagesType = {
   info: ImageRequest;
 };
 
-
 export default function DisplayPanel() {
   const dingRef = useRef<HTMLAudioElement>(null);
   const isSoundEnabled = useImageCreate((state) => state.isSoundEnabled());

ui/frontend/dist/index.css

@@ -1 +1 @@
-._1qevocv0{position:relative;width:100%;height:100%;pointer-events:auto;display:grid;background-color:#202124;grid-template-columns:400px 1fr;grid-template-rows:100px 1fr 50px;grid-template-areas:"header header header" "create display display" "create footer footer"}._1qevocv1{grid-area:header}._1qevocv2{grid-area:create;overflow:auto}._1qevocv3{grid-area:display;overflow:auto}._1qevocv4{grid-area:footer}@media screen and (max-width: 800px){._1qevocv0{grid-template-columns:1fr;grid-template-rows:100px 1fr 1fr 50px;grid-template-areas:"header" "create" "display" "footer"}}._1jo75h0{color:#f0ad4e}._1jo75h1{color:#d9534f}._1jo75h2{color:#5cb85c}._1v2cc580{color:#fff;display:flex;align-items:center;justify-content:center}._1v2cc580>h1{font-size:1.5em;font-weight:700;margin-right:10px}._11d5x3d0{font-size:9pt;margin-bottom:5px;padding-left:10px;list-style-type:none}._11d5x3d1{padding-bottom:5px}._11d5x3d2{display:block;width:100%;text-align:left;background-color:transparent;color:#fff;border:0 none;cursor:pointer;padding:0;margin-bottom:10px}._11d5x3d2>h4{color:#e7ba71;margin-top:5px!important}.create-layout{padding:10px}.panel-box-toggle-btn{display:block;width:100%;text-align:left;background-color:transparent;color:#fff;border:0 none;cursor:pointer}.selected-tags{margin:10px 0}.selected-tags ul{margin:0;padding:0;display:flex;flex-wrap:wrap}li{list-style:none}.modifier-list{display:flex;flex-wrap:wrap;margin:0;padding:0}.modifierTag{display:inline-block;padding:6px;background-color:#264d8d;color:#fff;border-radius:5px;margin:5px}.modifierTag.selected{background-color:#830b79}.modifierTag p{margin:0}input[type=file]{color:transparent}.cjcdm20{position:relative;width:100%;height:100%;padding:0 10px}._1how28i0{position:relative;width:100%}._1how28i0>*{margin-bottom:10px}._1how28i1>p{font-size:1.5em;font-weight:700;margin-bottom:10px}._1how28i1>textarea{font-size:1.2em;font-weight:700;font-family:Arial;width:100%;resize:vertical;height:100px}._1rn4m8a0{display:flex}._1rn4m8a1{margin-bottom:5px;display:block}._1rn4m8a2{display:none}._1rn4m8a3{background-color:#264d8d;font-size:1.2em;font-weight:700;color:#fff;padding:8px;border-radius:5px}._1rn4m8a4{margin-left:20px}._1rn4m8a5{position:absolute;transform:translate(-50%) translateY(-35%);background:black;color:#fff;border:2pt solid #ccc;padding:0;cursor:pointer;outline:inherit;border-radius:8pt;width:16pt;height:16pt;font-family:Verdana;font-size:8pt}._1hnlbmt0{width:100%;background-color:#264d8d;font-size:1.5em;font-weight:700;color:#fff;padding:8px;border-radius:5px}._1hnlbmt0:disabled{background-color:#264d8d80}._1yvg52n0{position:relative;width:512px;height:512px}._1yvg52n1{width:512px;height:512px;background-color:#000;display:flex;justify-content:center;align-items:center}._1yvg52n2{width:512px;height:512px;object-fit:contain}._1yvg52n3{position:absolute;bottom:10px;left:10px}._1yvg52n4{position:absolute;bottom:10px;right:10px}.fma0ug0{position:relative;width:512px;height:512px}.fma0ug0>canvas{position:absolute;top:0;left:0;opacity:.5}.fma0ug0>img{position:absolute;top:0;left:0}._688lcr0{padding:10px}._688lcr1{display:flex;flex-direction:row;height:100%;width:100%;overflow:hidden}._688lcr2{width:512px;height:100%}._688lcr3{margin-left:30px;display:flex;flex:auto;flex-wrap:wrap}._688lcr4{margin:0 10px}.footer-display{color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center}body{margin:0;min-width:320px;min-height:100vh}#root{position:absolute;top:0;left:0;width:100vw;height:100vh;overflow:hidden}*{box-sizing:border-box}p,h3,h4{margin:0}textarea{margin:0;padding:0;border:none}
+._1qevocv0{position:relative;width:100%;height:100%;pointer-events:auto;display:grid;background-color:#202124;grid-template-columns:400px 1fr;grid-template-rows:100px 1fr 50px;grid-template-areas:"header header header" "create display display" "create footer footer"}._1qevocv1{grid-area:header}._1qevocv2{grid-area:create;position:relative}._1qevocv3{grid-area:display;overflow:auto}._1qevocv4{grid-area:footer}@media screen and (max-width: 800px){._1qevocv0{grid-template-columns:1fr;grid-template-rows:100px 1fr 1fr 50px;grid-template-areas:"header" "create" "display" "footer"}}._1jo75h0{color:#f0ad4e}._1jo75h1{color:#d9534f}._1jo75h2{color:#5cb85c}._1v2cc580{color:#fff;display:flex;align-items:center;justify-content:center}._1v2cc580>h1{font-size:1.5em;font-weight:700;margin-right:10px}._11d5x3d0{font-size:9pt;margin-bottom:5px;padding-left:10px;list-style-type:none}._11d5x3d1{padding-bottom:5px}._11d5x3d2{display:block;width:100%;text-align:left;background-color:transparent;color:#fff;border:0 none;cursor:pointer;padding:0;margin-bottom:10px}._11d5x3d2>h4{color:#e7ba71;margin-top:5px!important}.fma0ug0{position:relative}.fma0ug0>canvas{position:absolute;top:0;left:0;width:100%;height:100%}.fma0ug0>canvas:first-of-type{opacity:.7}.fma0ug0>img{top:0;left:0}._2yyo4x0{position:relative;width:100%;height:100%;padding:10px}._2yyo4x1{display:flex;flex-direction:row;width:100%;flex-wrap:wrap}._2yyo4x2{display:flex;flex-direction:row;justify-content:space-evenly;align-items:center;width:100%}._2yyo4x2:first-of-type{margin:10px 0}.create-layout{padding:10px}.panel-box-toggle-btn{display:block;width:100%;text-align:left;background-color:transparent;color:#fff;border:0 none;cursor:pointer}.selected-tags{margin:10px 0}.selected-tags ul{margin:0;padding:0;display:flex;flex-wrap:wrap}li{list-style:none}.modifier-list{display:flex;flex-wrap:wrap;margin:0;padding:0}.modifierTag{display:inline-block;padding:6px;background-color:#264d8d;color:#fff;border-radius:5px;margin:5px}.modifierTag.selected{background-color:#830b79}.modifierTag p{margin:0}input[type=file]{color:transparent}.cjcdm20{position:relative;width:100%;height:100%;padding:0 10px;overflow-y:auto}.cjcdm21{position:absolute;top:10px;left:400px;z-index:1;background-color:#00000080}._1how28i0{position:relative;width:100%}._1how28i0>*{margin-bottom:10px}._1how28i1>p{font-size:1.5em;font-weight:700;margin-bottom:10px}._1how28i1>textarea{font-size:1.2em;font-weight:700;font-family:Arial;width:100%;resize:vertical;height:100px}._1rn4m8a0{display:flex}._1rn4m8a1{margin-bottom:5px;display:block}._1rn4m8a2{display:none}._1rn4m8a3{background-color:#264d8d;font-size:1.2em;font-weight:700;color:#fff;padding:8px;border-radius:5px}._1rn4m8a4{margin-left:20px}._1rn4m8a5{position:absolute;transform:translate(-50%) translateY(-35%);background:black;color:#fff;border:2pt solid #ccc;padding:0;cursor:pointer;outline:inherit;border-radius:8pt;width:16pt;height:16pt;font-family:Verdana;font-size:8pt}._1hnlbmt0{width:100%;background-color:#264d8d;font-size:1.5em;font-weight:700;color:#fff;padding:8px;border-radius:5px}._1hnlbmt0:disabled{background-color:#264d8d80}._1yvg52n0{position:relative;width:512px;height:512px}._1yvg52n1{width:512px;height:512px;background-color:#000;display:flex;justify-content:center;align-items:center}._1yvg52n2{width:512px;height:512px;object-fit:contain}._1yvg52n3{position:absolute;bottom:10px;left:10px}._1yvg52n4{position:absolute;bottom:10px;right:10px}._688lcr0{padding:10px}._688lcr1{display:flex;flex-direction:row;height:100%;width:100%;overflow:hidden}._688lcr2{width:512px;height:100%}._688lcr3{margin-left:30px;display:flex;flex:auto;flex-wrap:wrap}._688lcr4{margin:0 10px}.footer-display{color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center}body{margin:0;min-width:320px;min-height:100vh}#root{position:absolute;top:0;left:0;width:100vw;height:100vh;overflow:hidden}*{box-sizing:border-box}p,h3,h4{margin:0}textarea{margin:0;padding:0;border:none}