pretty

ui/frontend/build_src/src/components/layouts/App.tsx

@@ -1,13 +1,12 @@
 import React, { useEffect, useState } from "react";
 
-import { 
+import {
   AppLayout,
   HeaderLayout,
   CreateLayout,
   DisplayLayout,
-  FooterLayout
+  FooterLayout, // @ts-ignore
-} // @ts-ignore
+} from "./app.css.ts";
-from './app.css.ts';
 
 import { useQuery } from "@tanstack/react-query";
 import { getSaveDirectory } from "../../api";

ui/frontend/build_src/src/components/layouts/app.css.ts

@@ -1,24 +1,24 @@
-import { style } from '@vanilla-extract/css';
+import { style } from "@vanilla-extract/css";
 
 export const AppLayout = style({
-  position: 'relative',
+  position: "relative",
-  width: '100%',
+  width: "100%",
-  height: '100%',
+  height: "100%",
-  pointerEvents: 'auto',
+  pointerEvents: "auto",
-  display: 'grid',
+  display: "grid",
-  backgroundColor: 'rgb(32, 33, 36)',
+  backgroundColor: "rgb(32, 33, 36)",
-  gridTemplateColumns: '400px 1fr',
+  gridTemplateColumns: "400px 1fr",
-  gridTemplateRows: '100px 1fr 50px',
+  gridTemplateRows: "100px 1fr 50px",
   gridTemplateAreas: `
     "header header header"
     "create display display"
     "create footer footer"
   `,
 
-  '@media': {
+  "@media": {
-    'screen and (max-width: 800px)': {
+    "screen and (max-width: 800px)": {
-      gridTemplateColumns: '1fr',
+      gridTemplateColumns: "1fr",
-      gridTemplateRows: '100px 1fr 1fr 50px',
+      gridTemplateRows: "100px 1fr 1fr 50px",
       gridTemplateAreas: `
         "header"
         "create"
@@ -30,19 +30,19 @@ export const AppLayout = style({
 });
 
 export const HeaderLayout = style({
-  gridArea: 'header',
+  gridArea: "header",
 });
 
-export const CreateLayout = style({ 
+export const CreateLayout = style({
-  gridArea: 'create',
+  gridArea: "create",
-  overflow: 'auto',
+  overflow: "auto",
 });
 
 export const DisplayLayout = style({
-  gridArea: 'display',
+  gridArea: "display",
-  overflow: 'auto',
+  overflow: "auto",
 });
 
 export const FooterLayout = style({
-  gridArea: 'footer',
+  gridArea: "footer",
-});
+});

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

@@ -7,14 +7,14 @@ export default function ActiveTags() {
   const selectedtags = useImageCreate((state) => state.selectedTags());
   return (
     <div className="selected-tags">
-    <p>Active Tags</p>
+      <p>Active Tags</p>
-    <ul>
+      <ul>
-      {selectedtags.map((tag) => (
+        {selectedtags.map((tag) => (
-        <li key={tag}>
+          <li key={tag}>
-          <ModifierTag name={tag}></ModifierTag>
+            <ModifierTag name={tag}></ModifierTag>
-        </li>
+          </li>
-      ))}
+        ))}
-    </ul>
+      </ul>
-  </div>
+    </div>
   );
-}
+}

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

@@ -1,28 +1,27 @@
-import { style, globalStyle } from '@vanilla-extract/css';
+import { style, globalStyle } from "@vanilla-extract/css";
 
 export const CreationBasicMain = style({
-  position: 'relative',
+  position: "relative",
-  width: '100%',
+  width: "100%",
 });
 
 globalStyle(`${CreationBasicMain} > *`, {
-  marginBottom: '10px'
+  marginBottom: "10px",
 });
 
-export const PromptDisplay = style({
+export const PromptDisplay = style({});
-});
 
 globalStyle(`${PromptDisplay} > p`, {
-  fontSize: '1.5em',
+  fontSize: "1.5em",
-  fontWeight: 'bold',
+  fontWeight: "bold",
-  marginBottom: '10px'
+  marginBottom: "10px",
 });
 
 globalStyle(`${PromptDisplay} > textarea`, {
-  fontSize: '1.2em',
+  fontSize: "1.2em",
-  fontWeight: 'bold',
+  fontWeight: "bold",
-  fontFamily: 'Arial',
+  fontFamily: "Arial",
-  width: '100%',
+  width: "100%",
-  resize:'vertical',
+  resize: "vertical",
-  height: '100px',
+  height: "100px",
 });

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

@@ -1,21 +1,16 @@
-
+import React, { ChangeEvent } from "react";
-import React, {ChangeEvent} from "react";
 import { useImageCreate } from "../../../../store/imageCreateStore";
 
-
-
 import {
   CreationBasicMain,
-  PromptDisplay,
+  PromptDisplay, // @ts-ignore
-} // @ts-ignore 
+} from "./basicCreation.css.ts";
-from "./basicCreation.css.ts";
 
 import SeedImage from "./seedImage";
 import ActiveTags from "./activeTags";
 import MakeButton from "./makeButton";
 
 export default function BasicCreation() {
-
   const promptText = useImageCreate((state) =>
     state.getValueForRequestKey("prompt")
   );
@@ -27,17 +22,16 @@ export default function BasicCreation() {
 
   return (
     <div className={CreationBasicMain}>
-      
+      <div className={PromptDisplay}>
-    <div className={PromptDisplay}>
+        <p>Prompt </p>
-      <p>Prompt </p>
+        <textarea value={promptText} onChange={handlePromptChange}></textarea>
-      <textarea value={promptText} onChange={handlePromptChange}></textarea>
+      </div>
+
+      <SeedImage></SeedImage>
+
+      <ActiveTags></ActiveTags>
+
+      <MakeButton></MakeButton>
     </div>
-
+  );
-    <SeedImage></SeedImage>
+}
-
-    <ActiveTags></ActiveTags>
-
-    <MakeButton></MakeButton>
-  </div>
-  )
-}

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

@@ -6,11 +6,9 @@ import { v4 as uuidv4 } from "uuid";
 
 import { useRandomSeed } from "../../../../../utils";
 
-import { 
+import {
-  MakeButtonStyle 
+  MakeButtonStyle, // @ts-ignore
-} from // @ts-ignore
+} from "./makeButton.css.ts";
-"./makeButton.css.ts";
-
 
 export default function MakeButton() {
   const parallelCount = useImageCreate((state) => state.parallelCount);
@@ -71,8 +69,11 @@ export default function MakeButton() {
       // update the seed for the next time we click the button
       setRequestOption("seed", useRandomSeed());
     }
-
   };
 
-  return <button className={MakeButtonStyle} onClick={makeImages}>Make</button>;
+  return (
+    <button className={MakeButtonStyle} onClick={makeImages}>
+      Make
+    </button>
+  );
 }

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

@@ -1,11 +1,11 @@
-import { style } from '@vanilla-extract/css';
+import { style } from "@vanilla-extract/css";
 
 export const MakeButtonStyle = style({
-  width: '100%',
+  width: "100%",
-  backgroundColor: 'rgb(38, 77, 141)',
+  backgroundColor: "rgb(38, 77, 141)",
-  fontSize: '1.5em',
+  fontSize: "1.5em",
-  fontWeight: 'bold',
+  fontWeight: "bold",
-  color: 'white',
+  color: "white",
-  padding:'8px',
+  padding: "8px",
-  borderRadius: '5px',
+  borderRadius: "5px",
-});
+});

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

@@ -1,21 +1,18 @@
-import React , {useRef, ChangeEvent} from "react";
+import React, { useRef, ChangeEvent } from "react";
 
-import { 
+import {
-  ImageInputDisplay, 
+  ImageInputDisplay,
   InputLabel,
   ImageInput,
   ImageInputButton,
-  ImageFixer, 
+  ImageFixer,
-  XButton
+  XButton, // @ts-ignore
-} from // @ts-ignore
+} from "./seedImage.css.ts";
-"./seedImage.css.ts";
 import { useImageCreate } from "../../../../../store/imageCreateStore";
 
-
 // TODO : figure out why this needs props to be passed in.. fixes a type error
 // when the component is used in the parent component
-export default function SeedImage(_props:any) {
+export default function SeedImage(_props: any) {
-
   const imageInputRef = useRef<HTMLInputElement>(null);
 
   const init_image = useImageCreate((state) =>
@@ -25,7 +22,7 @@ export default function SeedImage(_props:any) {
 
   const _startFileSelect = () => {
     imageInputRef.current?.click();
-  }
+  };
   const _handleFileSelect = (event: ChangeEvent<HTMLInputElement>) => {
     //@ts-ignore
     const file = event.target.files[0];
@@ -41,14 +38,12 @@ export default function SeedImage(_props:any) {
     }
   };
 
-
   const _handleClearImage = () => {
     setRequestOption("init_image", undefined);
   };
 
   return (
     <div className={ImageInputDisplay}>
-
       <div>
         <label className={InputLabel}>
           <b>Initial Image:</b> (optional)
@@ -60,28 +55,22 @@ export default function SeedImage(_props:any) {
           type="file"
           onChange={_handleFileSelect}
         />
-          <button className={ImageInputButton} onClick={_startFileSelect}>
+        <button className={ImageInputButton} onClick={_startFileSelect}>
-            Select File
+          Select File
-          </button>
+        </button>
       </div>
 
       <div className={ImageFixer}>
         {init_image && (
           <>
-            <img
+            <img src={init_image} width="100" height="100" />
-              src={init_image}
-              width="100"
-              height="100"
-            />
 
-          <button className={XButton} onClick={_handleClearImage}>
+            <button className={XButton} onClick={_handleClearImage}>
-            X
+              X
-          </button>
+            </button>
-        </>
+          </>
         )}
       </div>
-
-
     </div>
   );
-};
+}

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

@@ -1,48 +1,46 @@
-import { style } from '@vanilla-extract/css';
+import { style } from "@vanilla-extract/css";
 
 export const ImageInputDisplay = style({
-  display: 'flex',
+  display: "flex",
   // justifyContent:'space-around',
 });
 
 export const InputLabel = style({
-  marginBottom: '5px',
+  marginBottom: "5px",
-  display:'block'
+  display: "block",
-
 });
 
 export const ImageInput = style({
-  display:'none',
+  display: "none",
 });
 
 export const ImageInputButton = style({
-  backgroundColor: 'rgb(38, 77, 141)',
+  backgroundColor: "rgb(38, 77, 141)",
-  fontSize: '1.2em',
+  fontSize: "1.2em",
-  fontWeight: 'bold',
+  fontWeight: "bold",
-  color: 'white',
+  color: "white",
-  padding:'8px',
+  padding: "8px",
-  borderRadius: '5px',
+  borderRadius: "5px",
 });
 
 // this is needed to fix an issue with the image input text
 // when that is a drag an drop we can remove this
 export const ImageFixer = style({
-  marginLeft: '20px',
+  marginLeft: "20px",
 });
 
 export const XButton = style({
-  position: 'absolute',
+  position: "absolute",
-  transform: 'translateX(-50%) translateY(-35%)',
+  transform: "translateX(-50%) translateY(-35%)",
-  background: 'black',
+  background: "black",
-  color: 'white',
+  color: "white",
-  border: '2pt solid #ccc',
+  border: "2pt solid #ccc",
-  padding: '0',
+  padding: "0",
-  cursor: 'pointer',
+  cursor: "pointer",
-  outline: 'inherit',
+  outline: "inherit",
-  borderRadius: '8pt',
+  borderRadius: "8pt",
-  width: '16pt',
+  width: "16pt",
-  height: '16pt',
+  height: "16pt",
-  fontFamily: 'Verdana',
+  fontFamily: "Verdana",
-  fontSize: '8pt',
+  fontSize: "8pt",
 });
-

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

@@ -1,8 +1,8 @@
-import { style } from '@vanilla-extract/css';
+import { style } from "@vanilla-extract/css";
 
 export const CreationPaneMain = style({
-  position: 'relative',
+  position: "relative",
-  width: '100%',
+  width: "100%",
-  height: '100%',
+  height: "100%",
-  padding:'0 10px', 
+  padding: "0 10px",
 });

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

@@ -12,10 +12,8 @@ import { CreationPaneMain } from "./creationpane.css.ts";
 import BasicCreation from "./basicCreation";
 
 export default function CreationPanel() {
-  
   return (
     <div className={CreationPaneMain}>
-
       <BasicCreation></BasicCreation>
 
       <div className="advanced-create">
@@ -24,4 +22,4 @@ export default function CreationPanel() {
       </div>
     </div>
   );
-}
+}

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

@@ -1,6 +1,9 @@
 import React, { useCallback } from "react";
 
-import { ImageRequest, useImageCreate } from "../../../../store/imageCreateStore";
+import {
+  ImageRequest,
+  useImageCreate,
+} from "../../../../store/imageCreateStore";
 
 import "./generatedImage.css";
 

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

@@ -11,7 +11,7 @@ import AudioDing from "./audioDing";
 
 import GeneratedImage from "./generatedImage";
 
-import './displayPanel.css';
+import "./displayPanel.css";
 
 type CompletedImagesType = {
   id: string;
@@ -102,12 +102,11 @@ export default function DisplayPanel() {
 
           <div id="previous-images">
             {completedImages.map((image, index) => {
-
               if (void 0 !== image) {
                 debugger;
-                if(index == 0){
+                if (index == 0) {
-                    return null;
+                  return null;
-                  }
+                }
 
                 return (
                   <GeneratedImage
@@ -117,14 +116,12 @@ export default function DisplayPanel() {
                     metadata={image.info}
                   />
                 );
-        
               } else {
-                  console.warn("image is undefined", image, index);
+                console.warn("image is undefined", image, index);
-                  return null;
+                return null;
               }
             })}
           </div>
-
         </div>
       )}
     </div>

ui/frontend/build_src/src/main.tsx

@@ -8,7 +8,7 @@ import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { enableMapSet } from "immer";
 import App from "./components/layouts/App";
 
-import './styles.css.ts';
+import "./styles.css.ts";
 
 const queryClient = new QueryClient({
   defaultOptions: {

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

@@ -1,24 +1,22 @@
+import { globalStyle } from "@vanilla-extract/css";
 
-import { globalStyle } from '@vanilla-extract/css';
+globalStyle("body", {
-
-globalStyle('body', {
   margin: 0,
-  minWidth: '320px',
+  minWidth: "320px",
-  minHeight: '100vh',
+  minHeight: "100vh",
 });
 
-globalStyle('#root', {
+globalStyle("#root", {
-  position: 'absolute',
+  position: "absolute",
   top: 0,
   left: 0,
-  width: '100vw',
+  width: "100vw",
-  height: '100vh',
+  height: "100vh",
-  overflow: 'hidden',
+  overflow: "hidden",
 });
 
-
 globalStyle(`*`, {
-  boxSizing: 'border-box',
+  boxSizing: "border-box",
 });
 
 globalStyle(`p`, {
@@ -28,5 +26,5 @@ globalStyle(`p`, {
 globalStyle(`textarea`, {
   margin: 0,
   padding: 0,
-  border: 'none',
+  border: "none",
-});
+});

ui/frontend/build_src/vite.config.ts

@@ -1,7 +1,6 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
-import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
+import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
-
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -9,12 +8,12 @@ export default defineConfig({
     react(),
     vanillaExtractPlugin({
       // configuration
-    })
+    }),
   ],
   server: {
     port: 9001,
   },
- 
+
   build: {
     // make sure everythign is in the same directory
     outDir: "../dist",
@@ -26,7 +25,6 @@ export default defineConfig({
         chunkFileNames: `[name].js`,
         assetFileNames: `[name].[ext]`,
       },
-      
     },
   },
 });