updated nav and removed ts comments

ui/frontend/build_src/src/App.tsx

@@ -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";
-import { darkTheme, lightTheme } from "./styles/theme/index.css.ts";
 import "./Translation/config";
 const location = new ReactLocation();
 

ui/frontend/build_src/src/components/atoms/modifierTag/index.tsx

@@ -9,8 +9,7 @@ import { API_URL } from "../../../api";
 import {
   ModifierTagMain,
   tagPreview
-  // @ts-expect-error
+} from "./modifierTags.css";
-} from "./modifierTags.css.ts";
 
 interface ModifierTagProps {
   name: string;

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

@@ -1,15 +1,14 @@
-// @ts-nocheck
 import React, { useRef, useState, useEffect } from "react";
 
 import {
-  DrawImageMain, // @ts-expect-error
+  DrawImageMain,
-} from "./drawImage.css.ts";
+} 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);
+      if (ctx != null) {
-      const data = imageData.data;
+
-      for (let i = 0; i < data.length; i += 4) {
+        const imageData = ctx.getImageData(0, 0, canvasWidth, canvasHeight);
-        if (data[i + 3] > 0) {
+        const data = imageData.data;
-          data[i] = parseInt(brushColor, 16);
+        for (let i = 0; i < data.length; i += 4) {
-          data[i + 1] = parseInt(brushColor, 16);
+          if (data[i + 3] > 0) {
-          data[i + 2] = parseInt(brushColor, 16);
+            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) {
+      if (ctx != null) {
-        // stack overflow https://stackoverflow.com/questions/10396991/clearing-circular-regions-from-html5-canvas
+        if (isErasing) {
-
+          // stack overflow https://stackoverflow.com/questions/10396991/clearing-circular-regions-from-html5-canvas
-        const offset = brushSize / 2;
+          const offset = brushSize / 2;
-        ctx.clearRect(x - offset, y - offset, brushSize, brushSize);
+          ctx.clearRect(x - offset, y - offset, brushSize, brushSize);
-      } else {
+        } else {
-        ctx.beginPath();
+          ctx.beginPath();
-        ctx.lineWidth = brushSize;
+          ctx.lineWidth = brushSize;
-        ctx.lineCap = brushShape;
+          // @ts-expect-error
-        ctx.strokeStyle = brushColor;
+          ctx.lineCap = brushShape;
-        ctx.moveTo(x, y);
+          ctx.strokeStyle = brushColor;
-        ctx.lineTo(x, y);
+          ctx.moveTo(x, y);
-        ctx.stroke();
+          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();
+      if (ctx != null) {
-      ctx.clearRect(0, 0, canvas.width, canvas.height);
+        ctx.beginPath();
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
 
-      if (isErasing) {
+        if (isErasing) {
-        const offset = brushSize / 2;
+          const offset = brushSize / 2;
-        // draw a quare
+          // draw a quare
-        ctx.lineWidth = 2;
+          ctx.lineWidth = 2;
-        ctx.lineCap = "butt";
+          ctx.lineCap = "butt";
-        ctx.strokeStyle = brushColor;
+          ctx.strokeStyle = brushColor;
-        ctx.moveTo(x - offset, y - offset);
+          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.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();
+          ctx.stroke();
-      } else {
+        } else {
-        ctx.lineWidth = brushSize;
+          ctx.lineWidth = brushSize;
-        ctx.lineCap = brushShape;
+          // @ts-expect-error
-        ctx.strokeStyle = brushColor;
+          ctx.lineCap = brushShape;
-        ctx.moveTo(x, y);
+          ctx.strokeStyle = brushColor;
-        ctx.lineTo(x, y);
+          ctx.moveTo(x, y);
-        ctx.stroke();
+          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;
+      if (ctx != null) {
-      ctx.fillRect(0, 0, canvas.width, canvas.height);
+        ctx.fillStyle = brushColor;
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+      }
     }
   };
 

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

@@ -4,8 +4,8 @@ import { ImageRequest } from "../../../stores/imageCreateStore";
 
 import {
   generatedImageMain,
-  image, // @ts-expect-error
+  image,
-} from "./generatedImage.css.ts";
+} from "./generatedImage.css";
 
 interface GeneretaedImageProps {
   imageData: string | undefined;

ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/advancedsettings.css.ts

@@ -1,7 +1,6 @@
 import { style, globalStyle } from "@vanilla-extract/css";
 
-// @ts-expect-error
+import { vars } from "../../../../styles/theme/index.css";
-import { vars } from "../../../../styles/theme/index.css.ts";
 
 // import { PanelBox } from "../../../../styles/shared.css.ts";
 

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

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

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

@@ -4,11 +4,11 @@ import { useImageCreate } from "../../../../../stores/imageCreateStore";
 import { useCreateUI } from "../../creationPanelUIStore";
 
 import {
-  SettingItem, // @ts-expect-error
+  SettingItem,
-} from "../../../../../styles/shared.css.ts";
+} from "../../../../../styles/shared.css";
 import {
-  MenuButton, // @ts-expect-error
+  MenuButton,
-} from "../advancedsettings.css.ts";
+} from "../advancedsettings.css";
 
 import { useTranslation } from "react-i18next";
 

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

@@ -1,20 +1,16 @@
 import React, { useEffect } from "react";
 import { useCreateUI } from "../creationPanelUIStore";
 
-// @ts-expect-error
+import { PanelBox } from "../../../../styles/shared.css";
-import { PanelBox } from "../../../../styles/shared.css.ts";
 
 import {
   AdvancedSettingsList,
-  AdvancedSettingGrouping, // @ts-expect-error
+  AdvancedSettingGrouping,
-} from "./advancedsettings.css.ts";
+} 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>
   );
 }

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

@@ -3,12 +3,12 @@ import { useImageCreate, SAMPLER_OPTIONS } from "../../../../../stores/imageCrea
 import { useCreateUI } from "../../creationPanelUIStore";
 
 import {
-  SettingItem, // @ts-expect-error
+  SettingItem,
-} from "../../../../../styles/shared.css.ts";
+} from "../../../../../styles/shared.css";
 
 import {
-  MenuButton, // @ts-expect-error
+  MenuButton,
-} from "../advancedsettings.css.ts";
+} from "../advancedsettings.css";
 
 import { useTranslation } from "react-i18next";
 

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

@@ -8,8 +8,8 @@ import {
 } from "../../../../../styles/shared.css";
 
 import {
-  MenuButton, // @ts-expect-error
+  MenuButton,
-} from "../advancedsettings.css.ts";
+} from "../advancedsettings.css";
 
 import { useTranslation } from "react-i18next";
 

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

@@ -3,8 +3,8 @@ import { useImageCreate } from "../../../../stores/imageCreateStore";
 
 import {
   CreationBasicMain,
-  PromptDisplay, // @ts-expect-error
+  PromptDisplay,
-} from "./basicCreation.css.ts";
+} from "./basicCreation.css";
 
 import SeedImage from "./seedImage";
 import ActiveTags from "./activeTags";

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

@@ -15,8 +15,8 @@ import { v4 as uuidv4 } from "uuid";
 import { useRandomSeed } from "../../../../../utils";
 import { doMakeImage } from "../../../../../api";
 import {
-  MakeButtonStyle, // @ts-expect-error
+  MakeButtonStyle,
-} from "./makeButton.css.ts";
+} from "./makeButton.css";
 
 import { useTranslation } from "react-i18next";
 

ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/makeButton/makeButton.css.ts

@@ -1,7 +1,6 @@
 import { style } from "@vanilla-extract/css";
 
-// @ts-expect-error
+import { vars } from "../../../../../styles/theme/index.css";
-import { vars } from "../../../../../styles/theme/index.css.ts";
 
 export const MakeButtonStyle = style({
   width: "100%",

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

@@ -6,8 +6,8 @@ import {
   ImageInput,
   ImageInputButton,
   ImageFixer,
-  XButton, // @ts-expect-error
+  XButton,
-} from "./seedImage.css.ts";
+} from "./seedImage.css";
 import { useImageCreate } from "../../../../../stores/imageCreateStore";
 
 import { useTranslation } from "react-i18next";

ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/seedImage/seedImage.css.ts

@@ -1,7 +1,6 @@
 import { style } from "@vanilla-extract/css";
 
-// @ts-expect-error
+import { vars } from "../../../../../styles/theme/index.css";
-import { vars } from "../../../../../styles/theme/index.css.ts";
 
 export const ImageInputDisplay = style({
   display: "flex",

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

@@ -1,6 +1,5 @@
 import { style, globalStyle } from "@vanilla-extract/css";
-// @ts-expect-error
+import { vars } from "../../../../styles/theme/index.css";
-import { vars } from "../../../../styles/theme/index.css.ts";
 
 export const ImagerModifierGroups = style({
   // marginBottom: vars.spacing.small,

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

@@ -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
+  ModifierListStyle,
-} from "./imageModifiers.css.ts";
+} from "./imageModifiers.css";
 
 import { ModifierObject, useImageCreate } from "../../../../stores/imageCreateStore";
 import { useCreateUI } from "../creationPanelUIStore";

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

@@ -13,8 +13,8 @@ import "./creationPanel.css";
 
 import {
   CreationPaneMain,
-  InpaintingSlider, // @ts-expect-error
+  InpaintingSlider,
-} from "./creationpane.css.ts";
+} from "./creationpane.css";
 
 import BasicCreation from "./basicCreation";
 

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

@@ -6,8 +6,8 @@ import { useImageCreate } from "../../../../stores/imageCreateStore";
 import {
   InpaintingPanelMain,
   InpaintingControls,
-  InpaintingControlRow, // @ts-expect-error
+  InpaintingControlRow,
-} from "./inpaintingPanel.css.ts";
+} 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}

ui/frontend/build_src/src/components/organisms/displayPanel/completedImages/completedImages.css.ts

@@ -1,7 +1,6 @@
 import { style, globalStyle } from "@vanilla-extract/css";
 
-// @ts-expect-error
+import { vars } from "../../../../styles/theme/index.css";
-import { vars } from "../../../../styles/theme/index.css.ts";
 
 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,
 });

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

@@ -8,8 +8,7 @@ import {
   completedImagesList,
   imageContain,
   RemoveButton,
-  // @ts-expect-error
+} from "./completedImages.css";
-} from "./completedImages.css.ts";
 
 
 

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

@@ -8,8 +8,7 @@ import {
   displayPanel,
   displayContainer,
   previousImages,
-  // @ts-expect-error
+} from "./displayPanel.css";
-} from "./displayPanel.css.ts";
 
 
 const idDelim = "_batch";

ui/frontend/build_src/src/components/organisms/footerDisplay/footerDisplay.css.ts

@@ -1,7 +1,6 @@
 import { style, globalStyle } from "@vanilla-extract/css";
 
-// @ts-expect-error
+import { vars } from "../../../styles/theme/index.css";
-import { vars } from "../../../styles/theme/index.css.ts";
 
 export const FooterDisplayMain = style({
   color: vars.colors.text.normal,

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

@@ -2,8 +2,8 @@ import React from "react";
 
 import {
   FooterDisplayMain,
-  CoffeeButton, // @ts-expect-error
+  CoffeeButton,
-} from "./footerDisplay.css.ts";
+} from "./footerDisplay.css";
 
 import { API_URL } from "../../../api";
 

ui/frontend/build_src/src/components/organisms/headerDisplay/statusDisplay/statusDisplay.css.ts

@@ -1,7 +1,6 @@
 import { style } from "@vanilla-extract/css";
 
-// @ts-expect-error
+import { vars } from "../../../../styles/theme/index.css";
-import { vars } from "../../../../styles/theme/index.css.ts";
 
 export const StartingStatus = style({
   color: vars.colors.warning,

ui/frontend/build_src/src/pages/Home/home.css.ts

@@ -1,6 +1,5 @@
 import { style } from "@vanilla-extract/css";
-// @ts-expect-error
+import { vars } from "../../styles/theme/index.css";
-import { vars } from "../../styles/theme/index.css.ts";
 
 export const AppLayout = style({
   position: "relative",

ui/frontend/build_src/src/styles/index.css.ts

@@ -1,6 +1,5 @@
 import { globalStyle } from "@vanilla-extract/css";
-// @ts-expect-error
+import { vars } from "./theme/index.css";
-import { vars } from "./theme/index.css.ts";
 
 // baisc body style
 globalStyle("body", {

ui/frontend/build_src/src/styles/shared.css.ts

@@ -1,6 +1,5 @@
 import { style, globalStyle } from "@vanilla-extract/css";
-// @ts-expect-error
+import { vars } from "./theme/index.css";
-import { vars } from "./theme/index.css.ts";
 
 export const PanelBox = style({
   background: vars.colors.backgroundAlt,

ui/frontend/dist/index.html

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