mirror of
https://github.com/easydiffusion/easydiffusion.git
synced 2025-02-26 07:11:39 +01:00
updated nav and removed ts comments
This commit is contained in:
parent
2c52c8efb7
commit
b560d2953f
@ -2,8 +2,7 @@ import React, { useState } from "react";
|
||||
import { ReactLocation, Router } from "@tanstack/react-location";
|
||||
import Home from "./pages/Home";
|
||||
import Settings from "./pages/Settings";
|
||||
// @ts-expect-error
|
||||
import { darkTheme, lightTheme } from "./styles/theme/index.css.ts";
|
||||
import { darkTheme, lightTheme } from "./styles/theme/index.css";
|
||||
import "./Translation/config";
|
||||
const location = new ReactLocation();
|
||||
|
||||
|
@ -9,8 +9,7 @@ import { API_URL } from "../../../api";
|
||||
import {
|
||||
ModifierTagMain,
|
||||
tagPreview
|
||||
// @ts-expect-error
|
||||
} from "./modifierTags.css.ts";
|
||||
} from "./modifierTags.css";
|
||||
|
||||
interface ModifierTagProps {
|
||||
name: string;
|
||||
|
@ -1,15 +1,14 @@
|
||||
// @ts-nocheck
|
||||
import React, { useRef, useState, useEffect } from "react";
|
||||
|
||||
import {
|
||||
DrawImageMain, // @ts-expect-error
|
||||
} from "./drawImage.css.ts";
|
||||
DrawImageMain,
|
||||
} from "./drawImage.css";
|
||||
|
||||
// https://github.com/embiem/react-canvas-draw
|
||||
|
||||
interface DrawImageProps {
|
||||
imageData: string;
|
||||
brushSize: string;
|
||||
brushSize: number;
|
||||
|
||||
brushShape: string;
|
||||
brushColor: string;
|
||||
@ -46,16 +45,19 @@ export default function DrawImage({
|
||||
// drawn pixels to the new color
|
||||
if (drawingRef.current != null) {
|
||||
const ctx = drawingRef.current.getContext("2d");
|
||||
const imageData = ctx.getImageData(0, 0, canvasWidth, canvasHeight);
|
||||
const data = imageData.data;
|
||||
for (let i = 0; i < data.length; i += 4) {
|
||||
if (data[i + 3] > 0) {
|
||||
data[i] = parseInt(brushColor, 16);
|
||||
data[i + 1] = parseInt(brushColor, 16);
|
||||
data[i + 2] = parseInt(brushColor, 16);
|
||||
if (ctx != null) {
|
||||
|
||||
const imageData = ctx.getImageData(0, 0, canvasWidth, canvasHeight);
|
||||
const data = imageData.data;
|
||||
for (let i = 0; i < data.length; i += 4) {
|
||||
if (data[i + 3] > 0) {
|
||||
data[i] = parseInt(brushColor, 16);
|
||||
data[i + 1] = parseInt(brushColor, 16);
|
||||
data[i + 2] = parseInt(brushColor, 16);
|
||||
}
|
||||
}
|
||||
ctx.putImageData(imageData, 0, 0);
|
||||
}
|
||||
ctx.putImageData(imageData, 0, 0);
|
||||
}
|
||||
}, [brushColor]);
|
||||
|
||||
@ -80,23 +82,25 @@ export default function DrawImage({
|
||||
}
|
||||
};
|
||||
|
||||
const _drawCanvas = (x, y, brushSize, brushShape, brushColor) => {
|
||||
const _drawCanvas = (x: number, y: number, brushSize: number, brushShape: string, brushColor: string | CanvasGradient | CanvasPattern) => {
|
||||
const canvas = drawingRef.current;
|
||||
if (canvas != null) {
|
||||
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;
|
||||
ctx.lineCap = brushShape;
|
||||
ctx.strokeStyle = brushColor;
|
||||
ctx.moveTo(x, y);
|
||||
ctx.lineTo(x, y);
|
||||
ctx.stroke();
|
||||
if (ctx != null) {
|
||||
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;
|
||||
// @ts-expect-error
|
||||
ctx.lineCap = brushShape;
|
||||
ctx.strokeStyle = brushColor;
|
||||
ctx.moveTo(x, y);
|
||||
ctx.lineTo(x, y);
|
||||
ctx.stroke();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -111,29 +115,35 @@ export default function DrawImage({
|
||||
const canvas = cursorRef.current;
|
||||
if (canvas != null) {
|
||||
const ctx = canvas.getContext("2d");
|
||||
ctx.beginPath();
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
if (ctx != null) {
|
||||
ctx.beginPath();
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
if (isErasing) {
|
||||
const offset = brushSize / 2;
|
||||
// draw a quare
|
||||
ctx.lineWidth = 2;
|
||||
ctx.lineCap = "butt";
|
||||
ctx.strokeStyle = brushColor;
|
||||
ctx.moveTo(x - offset, y - offset);
|
||||
ctx.lineTo(x + offset, y - offset);
|
||||
ctx.lineTo(x + offset, y + offset);
|
||||
ctx.lineTo(x - offset, y + offset);
|
||||
ctx.lineTo(x - offset, y - offset);
|
||||
ctx.stroke();
|
||||
} else {
|
||||
ctx.lineWidth = brushSize;
|
||||
ctx.lineCap = brushShape;
|
||||
ctx.strokeStyle = brushColor;
|
||||
ctx.moveTo(x, y);
|
||||
ctx.lineTo(x, y);
|
||||
ctx.stroke();
|
||||
if (isErasing) {
|
||||
const offset = brushSize / 2;
|
||||
// draw a quare
|
||||
ctx.lineWidth = 2;
|
||||
ctx.lineCap = "butt";
|
||||
ctx.strokeStyle = brushColor;
|
||||
ctx.moveTo(x - offset, y - offset);
|
||||
ctx.lineTo(x + offset, y - offset);
|
||||
ctx.lineTo(x + offset, y + offset);
|
||||
ctx.lineTo(x - offset, y + offset);
|
||||
ctx.lineTo(x - offset, y - offset);
|
||||
ctx.stroke();
|
||||
} else {
|
||||
ctx.lineWidth = brushSize;
|
||||
// @ts-expect-error
|
||||
ctx.lineCap = brushShape;
|
||||
ctx.strokeStyle = brushColor;
|
||||
ctx.moveTo(x, y);
|
||||
ctx.lineTo(x, y);
|
||||
ctx.stroke();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
@ -156,8 +166,10 @@ export default function DrawImage({
|
||||
const canvas = drawingRef.current;
|
||||
if (canvas != null) {
|
||||
const ctx = canvas.getContext("2d");
|
||||
ctx.fillStyle = brushColor;
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
if (ctx != null) {
|
||||
ctx.fillStyle = brushColor;
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
@ -4,8 +4,8 @@ import { ImageRequest } from "../../../stores/imageCreateStore";
|
||||
|
||||
import {
|
||||
generatedImageMain,
|
||||
image, // @ts-expect-error
|
||||
} from "./generatedImage.css.ts";
|
||||
image,
|
||||
} from "./generatedImage.css";
|
||||
|
||||
interface GeneretaedImageProps {
|
||||
imageData: string | undefined;
|
||||
|
@ -1,7 +1,6 @@
|
||||
import { style, globalStyle } from "@vanilla-extract/css";
|
||||
|
||||
// @ts-expect-error
|
||||
import { vars } from "../../../../styles/theme/index.css.ts";
|
||||
import { vars } from "../../../../styles/theme/index.css";
|
||||
|
||||
// import { PanelBox } from "../../../../styles/shared.css.ts";
|
||||
|
||||
|
@ -1,74 +0,0 @@
|
||||
import React from "react";
|
||||
import { useImageCreate } from "../../../../../stores/imageCreateStore";
|
||||
|
||||
import { useCreateUI } from "../../creationPanelUIStore";
|
||||
|
||||
import {
|
||||
SettingItem, // @ts-expect-error
|
||||
} from "../../../../../styles/shared.css.ts";
|
||||
|
||||
import {
|
||||
MenuButton, // @ts-expect-error
|
||||
} from "../advancedsettings.css.ts";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
export default function GpuSettings() {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const turbo = useImageCreate((state) => state.getValueForRequestKey("turbo"));
|
||||
const useCpu = useImageCreate((state) =>
|
||||
state.getValueForRequestKey("use_cpu")
|
||||
);
|
||||
const useFullPrecision = useImageCreate((state) =>
|
||||
state.getValueForRequestKey("use_full_precision")
|
||||
);
|
||||
|
||||
const setRequestOption = useImageCreate((state) => state.setRequestOptions);
|
||||
|
||||
const gpuOpen = useCreateUI((state) => state.isOpenAdvGPUSettings);
|
||||
const toggleGpuOpen = useCreateUI((state) => state.toggleAdvGPUSettings);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<button type="button" className={MenuButton} onClick={toggleGpuOpen}>
|
||||
<h4>GPU Settings</h4>
|
||||
</button>
|
||||
{gpuOpen && (
|
||||
<>
|
||||
<div className={SettingItem}>
|
||||
<label>
|
||||
<input
|
||||
checked={turbo}
|
||||
onChange={(e) => setRequestOption("turbo", e.target.checked)}
|
||||
type="checkbox"
|
||||
/>
|
||||
{t("advanced-settings.turbo")} {t("advanced-settings.turbo-disc")}
|
||||
</label>
|
||||
</div>
|
||||
<div className={SettingItem}>
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={useCpu}
|
||||
onChange={(e) => setRequestOption("use_cpu", e.target.checked)}
|
||||
/>
|
||||
{t("advanced-settings.cpu")} {t("advanced-settings.cpu-disc")}
|
||||
</label>
|
||||
</div>
|
||||
<div className={SettingItem}>
|
||||
<label>
|
||||
<input
|
||||
checked={useFullPrecision}
|
||||
onChange={(e) =>
|
||||
setRequestOption("use_full_precision", e.target.checked)
|
||||
}
|
||||
type="checkbox"
|
||||
/>
|
||||
{t("advanced-settings.gpu")} {t("advanced-settings.gpu-disc")}
|
||||
</label>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
@ -4,11 +4,11 @@ import { useImageCreate } from "../../../../../stores/imageCreateStore";
|
||||
import { useCreateUI } from "../../creationPanelUIStore";
|
||||
|
||||
import {
|
||||
SettingItem, // @ts-expect-error
|
||||
} from "../../../../../styles/shared.css.ts";
|
||||
SettingItem,
|
||||
} from "../../../../../styles/shared.css";
|
||||
import {
|
||||
MenuButton, // @ts-expect-error
|
||||
} from "../advancedsettings.css.ts";
|
||||
MenuButton,
|
||||
} from "../advancedsettings.css";
|
||||
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
|
@ -1,20 +1,16 @@
|
||||
import React, { useEffect } from "react";
|
||||
import { useCreateUI } from "../creationPanelUIStore";
|
||||
|
||||
// @ts-expect-error
|
||||
import { PanelBox } from "../../../../styles/shared.css.ts";
|
||||
import { PanelBox } from "../../../../styles/shared.css";
|
||||
|
||||
import {
|
||||
AdvancedSettingsList,
|
||||
AdvancedSettingGrouping, // @ts-expect-error
|
||||
} from "./advancedsettings.css.ts";
|
||||
AdvancedSettingGrouping,
|
||||
} from "./advancedsettings.css";
|
||||
|
||||
import ImprovementSettings from "./improvementSettings";
|
||||
import PropertySettings from "./propertySettings";
|
||||
import WorkflowSettings from "./workflowSettings";
|
||||
// import GpuSettings from "./gpuSettings";
|
||||
|
||||
// import BetaMode from "../../../molecules/betaMode";
|
||||
|
||||
function SettingsList() {
|
||||
return (
|
||||
@ -28,13 +24,6 @@ function SettingsList() {
|
||||
<li className={AdvancedSettingGrouping}>
|
||||
<WorkflowSettings />
|
||||
</li>
|
||||
{/* <li className={AdvancedSettingGrouping}>
|
||||
<GpuSettings />
|
||||
</li> */}
|
||||
|
||||
{/* <li className={AdvancedSettingGrouping}>
|
||||
<BetaMode />
|
||||
</li> */}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
@ -3,12 +3,12 @@ import { useImageCreate, SAMPLER_OPTIONS } from "../../../../../stores/imageCrea
|
||||
import { useCreateUI } from "../../creationPanelUIStore";
|
||||
|
||||
import {
|
||||
SettingItem, // @ts-expect-error
|
||||
} from "../../../../../styles/shared.css.ts";
|
||||
SettingItem,
|
||||
} from "../../../../../styles/shared.css";
|
||||
|
||||
import {
|
||||
MenuButton, // @ts-expect-error
|
||||
} from "../advancedsettings.css.ts";
|
||||
MenuButton,
|
||||
} from "../advancedsettings.css";
|
||||
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
|
@ -8,8 +8,8 @@ import {
|
||||
} from "../../../../../styles/shared.css";
|
||||
|
||||
import {
|
||||
MenuButton, // @ts-expect-error
|
||||
} from "../advancedsettings.css.ts";
|
||||
MenuButton,
|
||||
} from "../advancedsettings.css";
|
||||
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
|
@ -3,8 +3,8 @@ import { useImageCreate } from "../../../../stores/imageCreateStore";
|
||||
|
||||
import {
|
||||
CreationBasicMain,
|
||||
PromptDisplay, // @ts-expect-error
|
||||
} from "./basicCreation.css.ts";
|
||||
PromptDisplay,
|
||||
} from "./basicCreation.css";
|
||||
|
||||
import SeedImage from "./seedImage";
|
||||
import ActiveTags from "./activeTags";
|
||||
|
@ -15,8 +15,8 @@ import { v4 as uuidv4 } from "uuid";
|
||||
import { useRandomSeed } from "../../../../../utils";
|
||||
import { doMakeImage } from "../../../../../api";
|
||||
import {
|
||||
MakeButtonStyle, // @ts-expect-error
|
||||
} from "./makeButton.css.ts";
|
||||
MakeButtonStyle,
|
||||
} from "./makeButton.css";
|
||||
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
|
@ -1,7 +1,6 @@
|
||||
import { style } from "@vanilla-extract/css";
|
||||
|
||||
// @ts-expect-error
|
||||
import { vars } from "../../../../../styles/theme/index.css.ts";
|
||||
import { vars } from "../../../../../styles/theme/index.css";
|
||||
|
||||
export const MakeButtonStyle = style({
|
||||
width: "100%",
|
||||
|
@ -6,8 +6,8 @@ import {
|
||||
ImageInput,
|
||||
ImageInputButton,
|
||||
ImageFixer,
|
||||
XButton, // @ts-expect-error
|
||||
} from "./seedImage.css.ts";
|
||||
XButton,
|
||||
} from "./seedImage.css";
|
||||
import { useImageCreate } from "../../../../../stores/imageCreateStore";
|
||||
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
@ -1,7 +1,6 @@
|
||||
import { style } from "@vanilla-extract/css";
|
||||
|
||||
// @ts-expect-error
|
||||
import { vars } from "../../../../../styles/theme/index.css.ts";
|
||||
import { vars } from "../../../../../styles/theme/index.css";
|
||||
|
||||
export const ImageInputDisplay = style({
|
||||
display: "flex",
|
||||
|
@ -1,6 +1,5 @@
|
||||
import { style, globalStyle } from "@vanilla-extract/css";
|
||||
// @ts-expect-error
|
||||
import { vars } from "../../../../styles/theme/index.css.ts";
|
||||
import { vars } from "../../../../styles/theme/index.css";
|
||||
|
||||
export const ImagerModifierGroups = style({
|
||||
// marginBottom: vars.spacing.small,
|
||||
|
@ -1,14 +1,14 @@
|
||||
import React, { useState } from "react";
|
||||
|
||||
// @ts-expect-error
|
||||
import { PanelBox } from "../../../../styles/shared.css.ts";
|
||||
|
||||
import { PanelBox } from "../../../../styles/shared.css";
|
||||
|
||||
import {
|
||||
ImagerModifierGroups,
|
||||
ImageModifierGrouping,
|
||||
MenuButton,
|
||||
ModifierListStyle, //@ts-expect-error
|
||||
} from "./imageModifiers.css.ts";
|
||||
ModifierListStyle,
|
||||
} from "./imageModifiers.css";
|
||||
|
||||
import { ModifierObject, useImageCreate } from "../../../../stores/imageCreateStore";
|
||||
import { useCreateUI } from "../creationPanelUIStore";
|
||||
|
@ -13,8 +13,8 @@ import "./creationPanel.css";
|
||||
|
||||
import {
|
||||
CreationPaneMain,
|
||||
InpaintingSlider, // @ts-expect-error
|
||||
} from "./creationpane.css.ts";
|
||||
InpaintingSlider,
|
||||
} from "./creationpane.css";
|
||||
|
||||
import BasicCreation from "./basicCreation";
|
||||
|
||||
|
@ -6,8 +6,8 @@ import { useImageCreate } from "../../../../stores/imageCreateStore";
|
||||
import {
|
||||
InpaintingPanelMain,
|
||||
InpaintingControls,
|
||||
InpaintingControlRow, // @ts-expect-error
|
||||
} from "./inpaintingPanel.css.ts";
|
||||
InpaintingControlRow,
|
||||
} from "./inpaintingPanel.css";
|
||||
|
||||
export default function InpaintingPanel() {
|
||||
// no idea if this is the right typing
|
||||
@ -47,6 +47,7 @@ export default function InpaintingPanel() {
|
||||
<DrawImage
|
||||
// ref={drawingRef}
|
||||
imageData={initImage}
|
||||
// @ts-expect-error
|
||||
brushSize={brushSize}
|
||||
brushShape={brushShape}
|
||||
brushColor={brushColor}
|
||||
|
@ -1,7 +1,6 @@
|
||||
import { style, globalStyle } from "@vanilla-extract/css";
|
||||
|
||||
// @ts-expect-error
|
||||
import { vars } from "../../../../styles/theme/index.css.ts";
|
||||
import { vars } from "../../../../styles/theme/index.css";
|
||||
|
||||
export const completedImagesMain = style({
|
||||
height: "100%",
|
||||
@ -56,5 +55,5 @@ export const RemoveButton = style({
|
||||
border: "0 none",
|
||||
padding: vars.spacing.small,
|
||||
cursor: "pointer",
|
||||
borderRadius: vars.trim.borderRadiusSmall,
|
||||
borderRadius: vars.trim.smallBorderRadius,
|
||||
});
|
||||
|
@ -8,8 +8,7 @@ import {
|
||||
completedImagesList,
|
||||
imageContain,
|
||||
RemoveButton,
|
||||
// @ts-expect-error
|
||||
} from "./completedImages.css.ts";
|
||||
} from "./completedImages.css";
|
||||
|
||||
|
||||
|
||||
|
@ -8,8 +8,7 @@ import {
|
||||
displayPanel,
|
||||
displayContainer,
|
||||
previousImages,
|
||||
// @ts-expect-error
|
||||
} from "./displayPanel.css.ts";
|
||||
} from "./displayPanel.css";
|
||||
|
||||
|
||||
const idDelim = "_batch";
|
||||
|
@ -1,7 +1,6 @@
|
||||
import { style, globalStyle } from "@vanilla-extract/css";
|
||||
|
||||
// @ts-expect-error
|
||||
import { vars } from "../../../styles/theme/index.css.ts";
|
||||
import { vars } from "../../../styles/theme/index.css";
|
||||
|
||||
export const FooterDisplayMain = style({
|
||||
color: vars.colors.text.normal,
|
||||
|
@ -2,8 +2,8 @@ import React from "react";
|
||||
|
||||
import {
|
||||
FooterDisplayMain,
|
||||
CoffeeButton, // @ts-expect-error
|
||||
} from "./footerDisplay.css.ts";
|
||||
CoffeeButton,
|
||||
} from "./footerDisplay.css";
|
||||
|
||||
import { API_URL } from "../../../api";
|
||||
|
||||
|
@ -1,7 +1,6 @@
|
||||
import { style } from "@vanilla-extract/css";
|
||||
|
||||
// @ts-expect-error
|
||||
import { vars } from "../../../../styles/theme/index.css.ts";
|
||||
import { vars } from "../../../../styles/theme/index.css";
|
||||
|
||||
export const StartingStatus = style({
|
||||
color: vars.colors.warning,
|
||||
|
@ -1,6 +1,5 @@
|
||||
import { style } from "@vanilla-extract/css";
|
||||
// @ts-expect-error
|
||||
import { vars } from "../../styles/theme/index.css.ts";
|
||||
import { vars } from "../../styles/theme/index.css";
|
||||
|
||||
export const AppLayout = style({
|
||||
position: "relative",
|
||||
|
@ -1,6 +1,5 @@
|
||||
import { globalStyle } from "@vanilla-extract/css";
|
||||
// @ts-expect-error
|
||||
import { vars } from "./theme/index.css.ts";
|
||||
import { vars } from "./theme/index.css";
|
||||
|
||||
// baisc body style
|
||||
globalStyle("body", {
|
||||
|
@ -1,6 +1,5 @@
|
||||
import { style, globalStyle } from "@vanilla-extract/css";
|
||||
// @ts-expect-error
|
||||
import { vars } from "./theme/index.css.ts";
|
||||
import { vars } from "./theme/index.css";
|
||||
|
||||
export const PanelBox = style({
|
||||
background: vars.colors.backgroundAlt,
|
||||
|
2
ui/frontend/dist/index.css
vendored
2
ui/frontend/dist/index.css
vendored
File diff suppressed because one or more lines are too long
3
ui/frontend/dist/index.html
vendored
3
ui/frontend/dist/index.html
vendored
@ -3,7 +3,10 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="icon" type="image/png" href="/media/favicon-16x16.png" sizes="16x16">
|
||||
<link rel="icon" type="image/png" href="/media/favicon-32x32.png" sizes="32x32">
|
||||
<meta name="color-scheme" content="dark light" />
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
|
||||
<title>Stable Diffusion UI</title>
|
||||
<script type="module" crossorigin src="/index.js"></script>
|
||||
<link rel="stylesheet" href="/index.css">
|
||||
|
45
ui/frontend/dist/index.js
vendored
45
ui/frontend/dist/index.js
vendored
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user