holm/easydiffusion
1
0
Fork 0
forked from extern/easydiffusion
Code Issues Pull Requests Packages Projects Releases Wiki Activity

clean

Browse Source
This commit is contained in:
caranicas 2022-09-17 12:38:19 -04:00
parent 5abbec94c4
commit 4b3806fb9a
7 changed files with 68 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
ui/frontend/build_src/src/components/molecules/drawImage/index.tsx
View File

@ -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;

8
ui/frontend/build_src/src/components/organisms/creationPanel/index.tsx
View File

@ -10,15 +10,12 @@ import "./creationPanel.css";
import {
CreationPaneMain,
InpaintingSlider
} from // @ts-ignore
"./creationpane.css.ts";
InpaintingSlider, // @ts-ignore
} from "./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>

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

@ -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,
} from // @ts-ignore
"./inpaintingPanel.css.ts";
InpaintingControlRow, // @ts-ignore
} from "./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>) => {
setBrushSize(e.target.value);
const _handleBrushSize = (event: ChangeEvent<HTMLInputElement>) => {
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
onClick={_handleBrushMask}
>
Mask
</button>
<button
onClick={_handleBrushErase}
>
Erase
</button>
<button
disabled
onClick={_handleFillMask}
>
<button onClick={_handleBrushMask}>Mask</button>
<button onClick={_handleBrushErase}>Erase</button>
<button disabled onClick={_handleFillMask}>
Fill
</button>
<button
disabled
onClick={_handleClearAll}
>
<button 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={_handleBrushShape}
onClick={() => {
setBrushShape("round");
}}
>
Cirle Brush
</button>
<button
value={"square"}
onClick={_handleBrushShape}
onClick={() => {
setBrushShape("square");
}}
>
Square Brush
</button>
<button
value={"#000"}
onClick={_handleBrushColor}
onClick={() => {
setBrushColor("#000");
}}
>
Dark Brush
</button>
<button
value={"#fff"}
onClick={_handleBrushColor}
onClick={() => {
setBrushColor("#fff");
}}
>
Light Brush
</button>
</div>
</div>
</div>
);
};
}

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

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

1
ui/frontend/build_src/src/components/organisms/displayPanel/index.tsx
View File

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

2
ui/frontend/dist/index.css vendored
View File

@ -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}

28
ui/frontend/dist/index.js vendored
View File

File diff suppressed because one or more lines are too long