+
+ );
+}
diff --git a/ui/frontend/build_src/src/components/molecules/audioDing/index.tsx b/ui/frontend/build_src/src/components/molecules/audioDing/index.tsx
new file mode 100644
index 00000000..fbffb91a
--- /dev/null
+++ b/ui/frontend/build_src/src/components/molecules/audioDing/index.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+import { API_URL } from "../../../api";
+
+const url = `${API_URL}/ding.mp3`;
+
+const AudioDing = React.forwardRef((props, ref) => (
+ // @ts-expect-error
+
+));
+
+AudioDing.displayName = "AudioDing";
+
+export default AudioDing;
+
diff --git a/ui/frontend/build_src/src/components/molecules/betaMode/index.tsx b/ui/frontend/build_src/src/components/molecules/betaMode/index.tsx
new file mode 100644
index 00000000..62740b28
--- /dev/null
+++ b/ui/frontend/build_src/src/components/molecules/betaMode/index.tsx
@@ -0,0 +1,73 @@
+import React, { useState, useEffect } from "react";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+
+import {
+ KEY_CONFIG,
+ getConfig,
+ KEY_TOGGLE_CONFIG,
+ toggleBetaConfig,
+} from "../../../api";
+
+import { useTranslation } from "react-i18next";
+
+export default function BetaMode() {
+ const { t } = useTranslation();
+ // gate for the toggle
+ const [shouldSetCofig, setShouldSetConfig] = useState(false);
+ // next branch to get
+ const [branchToGetNext, setBranchToGetNext] = useState("beta");
+
+ // our basic config
+ const { status: configStatus, data: configData } = useQuery(
+ [KEY_CONFIG],
+ getConfig
+ );
+ const queryClient = useQueryClient();
+
+ // the toggle config
+ const { status: toggleStatus, data: toggleData } = useQuery(
+ [KEY_TOGGLE_CONFIG],
+ async () => await toggleBetaConfig(branchToGetNext),
+ {
+ enabled: shouldSetCofig,
+ }
+ );
+
+ // this is also in the Header Display
+ // TODO: make this a custom hook
+ useEffect(() => {
+ if (configStatus === "success") {
+ const { update_branch: updateBranch } = configData;
+
+ if (updateBranch === "main") {
+ setBranchToGetNext("beta");
+ } else {
+ // setIsBeta(true);
+ setBranchToGetNext("main");
+ }
+ }
+ }, [configStatus, configData]);
+
+ useEffect(() => {
+ if (toggleStatus === "success") {
+ if (toggleData[0] === "OK") {
+ // force a refetch of the config
+ void queryClient.invalidateQueries([KEY_CONFIG])
+ }
+ setShouldSetConfig(false);
+ }
+ }, [toggleStatus, toggleData, setShouldSetConfig]);
+
+ return (
+
+ );
+}
diff --git a/ui/frontend/build_src/src/components/molecules/clearQueue/index.tsx b/ui/frontend/build_src/src/components/molecules/clearQueue/index.tsx
new file mode 100644
index 00000000..04de1342
--- /dev/null
+++ b/ui/frontend/build_src/src/components/molecules/clearQueue/index.tsx
@@ -0,0 +1,35 @@
+import React from "react";
+import { doStopImage } from "../../../api";
+import { useRequestQueue } from "../../../stores/requestQueueStore";
+
+import {
+ buttonStyle
+} from "../../_recipes/button.css";
+
+
+export default function ClearQueue() {
+
+ const hasQueue = useRequestQueue((state) => state.hasAnyQueue());
+ const clearQueue = useRequestQueue((state) => state.clearQueue);
+
+ const stopAll = async () => {
+ try {
+ clearQueue();
+ const res = await doStopImage();
+ } catch (e) {
+ console.log(e);
+ }
+ };
+
+ return (
+
+ );
+}
\ No newline at end of file
diff --git a/ui/frontend/build_src/src/components/molecules/drawImage/drawImage.css.ts b/ui/frontend/build_src/src/components/molecules/drawImage/drawImage.css.ts
new file mode 100644
index 00000000..7b0cc7fc
--- /dev/null
+++ b/ui/frontend/build_src/src/components/molecules/drawImage/drawImage.css.ts
@@ -0,0 +1,22 @@
+import { style, globalStyle } from "@vanilla-extract/css";
+
+export const DrawImageMain = style({
+ position: "relative",
+});
+
+globalStyle(`${DrawImageMain} > canvas`, {
+ position: "absolute",
+ top: "0",
+ left: "0",
+ width: "100%",
+ height: "100%",
+});
+
+globalStyle(`${DrawImageMain} > canvas:first-of-type`, {
+ opacity: ".7",
+});
+
+globalStyle(`${DrawImageMain} > img`, {
+ top: "0",
+ left: "0",
+});
diff --git a/ui/frontend/build_src/src/components/molecules/drawImage/index.tsx b/ui/frontend/build_src/src/components/molecules/drawImage/index.tsx
new file mode 100644
index 00000000..9d8f414d
--- /dev/null
+++ b/ui/frontend/build_src/src/components/molecules/drawImage/index.tsx
@@ -0,0 +1,194 @@
+import React, { useRef, useState, useEffect } from "react";
+
+import {
+ DrawImageMain,
+} from "./drawImage.css";
+
+// https://github.com/embiem/react-canvas-draw
+
+interface DrawImageProps {
+ imageData: string;
+ brushSize: number;
+
+ brushShape: string;
+ brushColor: string;
+ isErasing: boolean;
+ setData: (data: string) => void;
+}
+
+export default function DrawImage({
+ imageData,
+ brushSize,
+ brushShape,
+ brushColor,
+ isErasing,
+ setData,
+}: DrawImageProps) {
+ const drawingRef = useRef
+
+
+ {/*
+
*/}
+
+
+
+
+
+ 
+
+
+
+ );
+}
diff --git a/ui/frontend/build_src/src/components/molecules/generatedImage/generatedImage.css.ts b/ui/frontend/build_src/src/components/molecules/generatedImage/generatedImage.css.ts
new file mode 100644
index 00000000..5feab2b3
--- /dev/null
+++ b/ui/frontend/build_src/src/components/molecules/generatedImage/generatedImage.css.ts
@@ -0,0 +1,11 @@
+import { style, globalStyle } from "@vanilla-extract/css";
+
+export const generatedImageMain = style({
+ position: "relative",
+});
+
+globalStyle(`${generatedImageMain} img`, {
+ width: "100%",
+ height: "100%",
+ objectFit: "contain",
+});
diff --git a/ui/frontend/build_src/src/components/molecules/generatedImage/index.tsx b/ui/frontend/build_src/src/components/molecules/generatedImage/index.tsx
new file mode 100644
index 00000000..c15e6f25
--- /dev/null
+++ b/ui/frontend/build_src/src/components/molecules/generatedImage/index.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+
+import { ImageRequest } from "../../../api";
+
+import {
+ generatedImageMain,
+} from "./generatedImage.css";
+
+interface GeneretaedImageProps {
+ imageData: string | undefined;
+ metadata: ImageRequest | undefined;
+ className?: string;
+}
+
+export default function GeneratedImage({
+ imageData,
+ metadata,
+ className,
+}: GeneretaedImageProps) {
+ return (
+
+
+
+ );
+}
diff --git a/ui/frontend/build_src/src/components/molecules/makeButton/index.tsx b/ui/frontend/build_src/src/components/molecules/makeButton/index.tsx
new file mode 100644
index 00000000..708f4686
--- /dev/null
+++ b/ui/frontend/build_src/src/components/molecules/makeButton/index.tsx
@@ -0,0 +1,276 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import React, { useEffect, useRef } from "react";
+
+import { useImageCreate } from "../../../stores/imageCreateStore";
+import {
+ QueueStatus,
+ useRequestQueue
+} from "../../../stores/requestQueueStore";
+
+import {
+ FetchingStates,
+ useImageFetching
+} from "../../../stores/imageFetchingStore";
+
+
+import { useImageDisplay } from "../../../stores/imageDisplayStore";
+
+import { v4 as uuidv4 } from "uuid";
+
+import { useRandomSeed } from "../../../utils";
+import {
+ ImageRequest,
+ ImageReturnType,
+ ImageOutput,
+ doMakeImage,
+} from "../../../api";
+
+import {
+ buttonStyle
+} from "../../_recipes/button.css";
+
+import { useTranslation } from "react-i18next";
+
+import AudioDing from "../../molecules/audioDing";
+
+const idDelim = "_batch";
+
+export default function MakeButton() {
+ const { t } = useTranslation();
+
+ const dingRef = useRef
+
+ );
+}
diff --git a/ui/frontend/build_src/src/components/molecules/modifierTag/modifierTags.css.ts b/ui/frontend/build_src/src/components/molecules/modifierTag/modifierTags.css.ts
new file mode 100644
index 00000000..3ceb5c1f
--- /dev/null
+++ b/ui/frontend/build_src/src/components/molecules/modifierTag/modifierTags.css.ts
@@ -0,0 +1,69 @@
+import { style, globalStyle } from "@vanilla-extract/css";
+import { vars } from '../../../styles/theme/index.css';
+
+import { card } from '../../_recipes/card.css';
+
+export const ModifierTagMain = style([
+ card({
+ backing: 'normal',
+ level: 1,
+ info: true
+ }), {
+ position: "relative",
+ width: "fit-content",
+ borderColor: `hsl(${vars.brandHue}, ${vars.colorMod.saturation.normal}, ${vars.colorMod.lightness.normal})`,
+ padding: vars.spacing.small,
+ }
+]);
+
+globalStyle(`${ModifierTagMain}.selected`, {
+ backgroundColor: "rgb(131, 11, 121)",
+})
+
+globalStyle(`${ModifierTagMain} p`, {
+ margin: 0,
+ textAlign: "center",
+ marginBottom: "2px",
+});
+
+
+export const TagText = style({
+ opacity: 1,
+});
+
+export const TagToggle = style({
+ opacity: 0.3,
+});
+
+
+export const ModifierActions = style({
+ position: "absolute",
+ top: "0",
+ left: "0",
+ height: "100%",
+ width: "100%",
+ display: "flex",
+ flexDirection: "row",
+});
+
+globalStyle(`${ModifierActions} button`, {
+ flexGrow: 1,
+ backgroundColor: "transparent",
+ border: "none",
+ boxShadow: `inset 0 0 24px 0px rgb(255 255 255 / 50%)`,
+ borderRadius: "5px",
+ padding: "0",
+});
+
+export const tagPreview = style({
+ display: 'flex',
+ justifyContent: 'center',
+});
+
+globalStyle(`${tagPreview} img`, {
+ width: "90px",
+ height: "100%",
+ objectFit: "cover",
+ objectPosition: "center",
+});
+
diff --git a/ui/frontend/build_src/src/components/molecules/promptTag/index.tsx b/ui/frontend/build_src/src/components/molecules/promptTag/index.tsx
new file mode 100644
index 00000000..2a87a64b
--- /dev/null
+++ b/ui/frontend/build_src/src/components/molecules/promptTag/index.tsx
@@ -0,0 +1,68 @@
+import React, { useState } from "react";
+
+import { useImageCreate } from "../../../stores/imageCreateStore";
+
+import {
+ IconFont,
+} from "../../../styles/shared.css";
+
+import {
+ PromptTagMain,
+ TagToggle,
+ TagRemoveButton,
+ PromptTagText,
+ PromptTagToggle
+} from "./promptTag.css";
+
+interface PromptTagProps {
+ id: string;
+ name: string;
+ category?: string;
+ previews?: string[];
+ type: string;
+};
+
+export default function PromptTag({ id, name, category, previews, type }: PromptTagProps) {
+
+ const [showToggle, setShowToggle] = useState(false);
+
+ const removeCreateTag = useImageCreate((state) => state.removeCreateTag);
+ const changeCreateTagType = useImageCreate((state) => state.changeCreateTagType);
+
+ const handleHover = () => {
+ setShowToggle(true);
+ };
+
+ const handleLeave = () => {
+ setShowToggle(false);
+ };
+
+ const toggleType = () => {
+ if (type === 'positive') {
+ changeCreateTagType(id, 'negative');
+ }
+ else {
+ changeCreateTagType(id, 'positive');
+ }
+ };
+
+ const handleRemove = () => {
+ console.log('remove');
+ removeCreateTag(id);
+ };
+
+ return (
+ {name}
+ {showActions && ( +
+
+
+
+ )}
+ {/*
+ {previews.map((preview) => {
+ if (preview.name !== previewType) {
+ return null;
+ }
+ return (
+ 
+ );
+ })}
+
*/}
+
+ );
+ })}
+
+
+ );
+};
\ No newline at end of file
diff --git a/ui/frontend/build_src/src/components/molecules/promptTag/promptTag.css.ts b/ui/frontend/build_src/src/components/molecules/promptTag/promptTag.css.ts
new file mode 100644
index 00000000..f8932121
--- /dev/null
+++ b/ui/frontend/build_src/src/components/molecules/promptTag/promptTag.css.ts
@@ -0,0 +1,55 @@
+/* eslint-disable @typescript-eslint/restrict-template-expressions */
+import { style, globalStyle } from '@vanilla-extract/css';
+
+import { XButton } from "../../../styles/shared.css";
+import { vars } from '../../../styles/theme/index.css';
+import { card } from '../../_recipes/card.css';
+
+
+export const PromptTagMain = style([
+ card({
+ backing: 'normal',
+ level: 1,
+ info: true
+ }), {
+ position: "relative",
+ width: "fit-content",
+ backgroundColor: `hsl(${vars.backgroundLight}, ${vars.colorMod.saturation.normal}, ${vars.colorMod.lightness.normal})`,
+ padding: vars.spacing.small,
+ }
+]);
+
+export const PromptTagText = style({
+ opacity: 1,
+ fontSize: vars.fonts.sizes.Plain,
+});
+
+export const PromptTagToggle = style({
+ opacity: 0.3,
+ fontSize: vars.fonts.sizes.Plain,
+});
+
+globalStyle(`${PromptTagMain}.positive`, {
+ borderColor: `hsl(${vars.brandHue}, ${vars.colorMod.saturation.normal}, ${vars.colorMod.lightness.normal})`,
+});
+
+globalStyle(`${PromptTagMain}.negative`, {
+ borderColor: `hsl(${vars.errorHue}, ${vars.colorMod.saturation.normal}, ${vars.colorMod.lightness.normal})`,
+});
+
+export const TagToggle = style({
+ position: "absolute",
+ top: "0",
+ right: "0",
+ height: "100%",
+ width: "100%",
+ border: "none",
+ backgroundColor: "transparent",
+ boxShadow: `inset 0 0 24px 0px rgb(255 255 255 / 50%)`,
+});
+
+export const TagRemoveButton = style([XButton, {
+ top: '-4px',
+ left: '4px',
+ padding: '0',
+}]);
\ No newline at end of file
diff --git a/ui/frontend/build_src/src/components/molecules/queueStatusTab/index.tsx b/ui/frontend/build_src/src/components/molecules/queueStatusTab/index.tsx
new file mode 100644
index 00000000..b0dd173c
--- /dev/null
+++ b/ui/frontend/build_src/src/components/molecules/queueStatusTab/index.tsx
@@ -0,0 +1,70 @@
+import React, { useEffect, useState } from "react";
+
+import { FetchingStates, useImageFetching } from "../../../stores/imageFetchingStore";
+import { useRequestQueue } from "../../../stores/requestQueueStore";
+
+export default function QueueStatusTab() {
+
+
+ const [showBasicQueue, setShowBasicQueue] = useState(true);
+
+ const hasPendingQueue = useRequestQueue((state) => state.hasPendingQueue());
+ const pendingRequests = useRequestQueue((state) => state.pendingRequests());
+
+ const status = useImageFetching((state) => state.status);
+
+ const step = useImageFetching((state) => state.step);
+ const totalSteps = useImageFetching((state) => state.totalSteps);
+
+ const startTime = useImageFetching((state) => state.timeStarted);
+ const timeNow = useImageFetching((state) => state.timeNow);
+ const [timeRemaining, setTimeRemaining] = useState(0);
+
+ const [percent, setPercent] = useState(0);
+
+ useEffect(() => {
+ if (totalSteps > 0) {
+ setPercent(Math.round((step / totalSteps) * 100));
+ } else {
+ setPercent(0);
+ }
+ }, [step, totalSteps]);
+
+ useEffect(() => {
+ // find the remaining time
+ const timeTaken = +timeNow - +startTime;
+ const timePerStep = step == 0 ? 0 : timeTaken / step;
+ const totalTime = timePerStep * totalSteps;
+ const timeRemaining = (totalTime - timeTaken) / 1000;
+ // @ts-expect-error
+ setTimeRemaining(timeRemaining.toPrecision(3));
+
+ }, [step, totalSteps, startTime, timeNow, setTimeRemaining]);
+
+ useEffect(() => {
+ if (hasPendingQueue) {
+ setShowBasicQueue(false);
+ }
+ }, [status, hasPendingQueue]);
+
+ // {/* {showBasicQueue
+ // ? <> */}
+ // Queue
+ // {/*
+ // : <>
+ // Percent: {percent}%
+ // npm
+ // } */}
+
+
+ return (
+ <>
+ Queue
+ {hasPendingQueue && Items Remaining: {pendingRequests.length} }
+
+ )
+
+}
+
+
+
diff --git a/ui/frontend/build_src/src/components/molecules/stopButton/index.tsx b/ui/frontend/build_src/src/components/molecules/stopButton/index.tsx
new file mode 100644
index 00000000..9c0864bf
--- /dev/null
+++ b/ui/frontend/build_src/src/components/molecules/stopButton/index.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+import { doStopImage } from "../../../api";
+
+
+import {
+ buttonStyle
+} from "../../_recipes/button.css";
+
+export default function StopButton() {
+
+ const stopMake = async () => {
+ try {
+ const res = await doStopImage();
+ } catch (e) {
+ console.log(e);
+ }
+ };
+
+ return ;
+}
diff --git a/ui/frontend/build_src/src/components/organisms/completedImages/completedImages.css.ts b/ui/frontend/build_src/src/components/organisms/completedImages/completedImages.css.ts
new file mode 100644
index 00000000..c5d98bc1
--- /dev/null
+++ b/ui/frontend/build_src/src/components/organisms/completedImages/completedImages.css.ts
@@ -0,0 +1,63 @@
+import { style, globalStyle } from "@vanilla-extract/css";
+
+import { vars } from "../../../styles/theme/index.css";
+import {
+ card as cardStyle,
+} from '../../_recipes/card.css'
+
+export const completedImagesMain = style({
+ position: "relative",
+});
+
+// globalStyle(`${completedImagesMain} > button`, {
+// position: "absolute",
+// top: '-29px',
+// });
+
+export const completedImagesContent = style([cardStyle(), {
+ height: "250px",
+ width: "100%",
+ display: "flex",
+ padding: vars.spacing.medium,
+ borderRadius: 0,
+}]);
+
+export const completedImagesList = style({
+ display: "flex",
+ flexDirection: "row",
+ flexWrap: "nowrap",
+ height: "100%",
+ width: "100%",
+ overflow: "auto",
+ paddingLeft: vars.spacing.none,
+});
+
+globalStyle(`${completedImagesContent} li`, {
+ position: "relative",
+});
+
+globalStyle(`${completedImagesContent} > li:first-of-type`, {
+ marginLeft: vars.spacing.medium,
+});
+
+globalStyle(`${completedImagesContent} > li:last-of-type`, {
+ marginRight: 0,
+});
+
+export const imageContain = style({
+ width: "206px",
+ backgroundColor: "black",
+ display: "flex",
+ justifyContent: "center",
+ alignItems: "center",
+ flexShrink: 0,
+ border: "0 none",
+ padding: "0",
+ marginLeft: vars.spacing.medium,
+ cursor: "pointer",
+});
+
+globalStyle(`${imageContain} img`, {
+ width: "100%",
+ objectFit: "contain",
+});
diff --git a/ui/frontend/build_src/src/components/organisms/completedImages/index.tsx b/ui/frontend/build_src/src/components/organisms/completedImages/index.tsx
new file mode 100644
index 00000000..593f52c5
--- /dev/null
+++ b/ui/frontend/build_src/src/components/organisms/completedImages/index.tsx
@@ -0,0 +1,87 @@
+import React, { useState } from "react";
+
+
+import { useImageDisplay } from "../../../stores/imageDisplayStore";
+
+import {
+ completedImagesMain,
+ completedImagesContent,
+ completedImagesList,
+ imageContain,
+} from "./completedImages.css";
+
+import {
+ buttonStyle
+} from "../../_recipes/button.css";
+
+// import { Transition } from '@headlessui/react'
+
+
+// import {
+// tabStyles
+// } from "../../_recipes/tabs_headless.css";
+
+export default function CompletedImages(
+
+) {
+
+ const [isShowing, setIsShowing] = useState(false)
+
+
+ const images = useImageDisplay((state) => state.images);
+ const setCurrentImage = useImageDisplay((state) => state.setCurrentImage);
+ const clearDisplay = useImageDisplay((state) => state.clearDisplay);
+
+ const removeImagesAll = () => {
+ clearDisplay();
+ };
+
+ return (
+ {name}
+ {showToggle && } + {showToggle && } +
+ {/* */}
+ {/* */}
+
+ */}
+
+ );
+}
diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/advancedsettings.css.ts b/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/advancedsettings.css.ts
new file mode 100644
index 00000000..2bc200fa
--- /dev/null
+++ b/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/advancedsettings.css.ts
@@ -0,0 +1,12 @@
+import { style, globalStyle } from "@vanilla-extract/css";
+
+import { vars } from "../../../../styles/theme/index.css";
+
+export const AdvancedSettingsList = style({
+ paddingLeft: 0,
+ listStyleType: "none",
+});
+
+export const AdvancedSettingGrouping = style({
+ marginTop: vars.spacing.small,
+});
diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/improvementSettings/index.tsx b/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/improvementSettings/index.tsx
new file mode 100644
index 00000000..ed423aa8
--- /dev/null
+++ b/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/improvementSettings/index.tsx
@@ -0,0 +1,119 @@
+import React, { useEffect, useState } from "react";
+import { useImageCreate } from "../../../../../stores/imageCreateStore";
+
+import { useCreateUI } from "../../creationPanelUIStore";
+
+import {
+ SettingItem,
+} from "../../../../../styles/shared.css";
+
+import {
+ buttonStyle,
+} from "../../../../_recipes/button.css";
+
+import { useTranslation } from "react-i18next";
+
+export default function ImprovementSettings() {
+ const { t } = useTranslation();
+
+ // these are conditionals that should be retired and inferred from the store
+ const isUsingFaceCorrection = useImageCreate((state) =>
+ state.isUsingFaceCorrection()
+ );
+
+ const isUsingUpscaling = useImageCreate((state) => state.isUsingUpscaling());
+
+ const useUpscale = useImageCreate((state) =>
+ state.getValueForRequestKey("use_upscale")
+ );
+
+ const filteredOnly = useImageCreate((state) =>
+ state.getValueForRequestKey("show_only_filtered_image")
+ );
+
+ const toggleUseFaceCorrection = useImageCreate(
+ (state) => state.toggleUseFaceCorrection
+ );
+
+ const setRequestOption = useImageCreate((state) => state.setRequestOptions);
+
+ const improvementOpen = useCreateUI(
+ (state) => state.isOpenAdvImprovementSettings
+ );
+
+ const toggleImprovementOpen = useCreateUI(
+ (state) => state.toggleAdvImprovementSettings
+ );
+
+ const [isFilteringDisabled, setIsFilteringDisabled] = useState(false);
+ // should probably be a store selector
+ useEffect(() => {
+ // if either are true we arent disabled
+ if (isUsingFaceCorrection || useUpscale != "") {
+ setIsFilteringDisabled(false);
+ } else {
+ setIsFilteringDisabled(true);
+ }
+ }, [isUsingFaceCorrection, isUsingUpscaling, setIsFilteringDisabled]);
+
+ return (
+
+ {/* Adjust the dom do we dont do this check twice */}
+ {images != null && images.length > 0 && (
+
+ )}
+
+ {/* -
+ {images?.map((image, index) => {
+ if (void 0 === image) {
+ console.warn(`image ${index} is undefined`);
+ return null;
+ }
+
+ return (
+
- + + + ); + })} +
+
+ {improvementOpen && (
+ <>
+
+ );
+}
diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/index.tsx b/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/index.tsx
new file mode 100644
index 00000000..4a0da019
--- /dev/null
+++ b/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/index.tsx
@@ -0,0 +1,69 @@
+import React, { useEffect } from "react";
+import { useCreateUI } from "../creationPanelUIStore";
+
+
+
+import {
+ card
+} from '../../../_recipes/card.css';
+
+import {
+ buttonStyle,
+} from "../../../_recipes/button.css";
+
+import {
+ AdvancedSettingsList,
+ AdvancedSettingGrouping,
+} from "./advancedsettings.css";
+
+import ImprovementSettings from "./improvementSettings";
+import PropertySettings from "./propertySettings";
+import WorkflowSettings from "./workflowSettings";
+
+function SettingsList() {
+ return (
+
+
+
+
+
+
+
+
+
+
+ )}
+ -
+
-
+
+
+ -
+
+
+ -
+
+
+
+
+ {advancedSettingsIsOpen &&
+ );
+}
diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/propertySettings/index.tsx b/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/propertySettings/index.tsx
new file mode 100644
index 00000000..6d824384
--- /dev/null
+++ b/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/propertySettings/index.tsx
@@ -0,0 +1,211 @@
+import React from "react";
+import { useImageCreate, SAMPLER_OPTIONS } from "../../../../../stores/imageCreateStore";
+import { useCreateUI } from "../../creationPanelUIStore";
+
+import {
+ SettingItem,
+} from "../../../../../styles/shared.css";
+
+
+import {
+ buttonStyle,
+} from "../../../../_recipes/button.css";
+
+
+
+import { useTranslation } from "react-i18next";
+
+// todo: move this someplace more global
+const IMAGE_DIMENSIONS = [
+ { value: 128, label: "128 (*)" },
+ { value: 192, label: "192" },
+ { value: 256, label: "256 (*)" },
+ { value: 320, label: "320" },
+ { value: 384, label: "384" },
+ { value: 448, label: "448" },
+ { value: 512, label: "512 (*)" },
+ { value: 576, label: "576" },
+ { value: 640, label: "640" },
+ { value: 704, label: "704" },
+ { value: 768, label: "768 (*)" },
+ { value: 832, label: "832" },
+ { value: 896, label: "896" },
+ { value: 960, label: "960" },
+ { value: 1024, label: "1024 (*)" },
+];
+
+export default function PropertySettings() {
+ const { t } = useTranslation();
+
+ const setRequestOption = useImageCreate((state) => state.setRequestOptions);
+ const toggleUseRandomSeed = useImageCreate(
+ (state) => state.toggleUseRandomSeed
+ );
+ const isRandomSeed = useImageCreate((state) => state.isRandomSeed());
+
+ const seed = useImageCreate((state) => state.getValueForRequestKey("seed"));
+ const steps = useImageCreate((state) =>
+ state.getValueForRequestKey("num_inference_steps")
+ );
+ const guidanceScale = useImageCreate((state) =>
+ state.getValueForRequestKey("guidance_scale")
+ );
+
+ const initImage = useImageCreate((state) =>
+ state.getValueForRequestKey("init_image")
+ );
+
+ const promptStrength = useImageCreate((state) =>
+ state.getValueForRequestKey("prompt_strength")
+ );
+
+ const width = useImageCreate((state) => state.getValueForRequestKey("width"));
+ const height = useImageCreate((state) =>
+ state.getValueForRequestKey("height")
+ );
+
+ const sampler = useImageCreate((state) =>
+ state.getValueForRequestKey("sampler")
+ );
+
+ const propertyOpen = useCreateUI((state) => state.isOpenAdvPropertySettings);
+ const togglePropertyOpen = useCreateUI(
+ (state) => state.toggleAdvPropertySettings
+ );
+
+ return (
+
+
+ {propertyOpen && (
+ <>
+
+ );
+}
diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/workflowSettings/index.tsx b/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/workflowSettings/index.tsx
new file mode 100644
index 00000000..ac08418e
--- /dev/null
+++ b/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/workflowSettings/index.tsx
@@ -0,0 +1,84 @@
+import React from "react";
+import { useImageCreate } from "../../../../../stores/imageCreateStore";
+
+import { useCreateUI } from "../../creationPanelUIStore";
+
+import {
+ SettingItem,
+} from "../../../../../styles/shared.css";
+
+import {
+ buttonStyle,
+} from "../../../../_recipes/button.css";
+
+import { useTranslation } from "react-i18next";
+
+export default function WorkflowSettings() {
+ const { t } = useTranslation();
+
+ const numOutputs = useImageCreate((state) =>
+ state.getValueForRequestKey("num_outputs")
+ );
+ const parallelCount = useImageCreate((state) => state.parallelCount);
+
+ const setRequestOption = useImageCreate((state) => state.setRequestOptions);
+ const setParallelCount = useImageCreate((state) => state.setParallelCount);
+ const shouldStreamImages = useImageCreate((state) => state.getValueForRequestKey("stream_image_progress"));
+
+ const workflowOpen = useCreateUI((state) => state.isOpenAdvWorkflowSettings);
+ const toggleWorkflowOpen = useCreateUI(
+ (state) => state.toggleAdvWorkflowSettings
+ );
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ {guidanceScale}
+
+
+ {void 0 !== initImage && (
+
+
+ {promptStrength}
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+
+ {workflowOpen && (
+ <>
+
+ );
+}
diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/basicCreation.css.ts b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/basicCreation.css.ts
new file mode 100644
index 00000000..10b402b1
--- /dev/null
+++ b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/basicCreation.css.ts
@@ -0,0 +1,20 @@
+import { style, globalStyle } from "@vanilla-extract/css";
+
+import { card } from "../../../_recipes/card.css";
+
+
+export const CreationBasicMain = style([
+ card({
+ backing: 'normal',
+ level: 1
+ }), {
+ position: "relative",
+ width: "100%",
+ }]
+);
+
+export const PromptDisplay = style({});
+
+globalStyle(`${CreationBasicMain} > *`, {
+ marginBottom: '10px'
+});
diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/index.tsx b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/index.tsx
new file mode 100644
index 00000000..b1aa67c9
--- /dev/null
+++ b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/index.tsx
@@ -0,0 +1,37 @@
+import React, { ChangeEvent } from "react";
+import { useImageCreate } from "../../../../stores/imageCreateStore";
+
+import {
+ CreationBasicMain,
+ PromptDisplay,
+} from "./basicCreation.css";
+
+import MakeButton from "../../../molecules/makeButton";
+
+import PromptCreator from "./promptCreator";
+// import CreationActions from "./creationActions";
+import SeedImage from "./seedImage";
+import ActiveTags from "./promptCreator/activeTags";
+
+import { useTranslation } from "react-i18next";
+
+export default function BasicCreation() {
+ const { t } = useTranslation();
+
+ const promptText = useImageCreate((state) =>
+ state.getValueForRequestKey("prompt")
+ );
+ const setRequestOption = useImageCreate((state) => state.setRequestOptions);
+
+ const handlePromptChange = (event: ChangeEvent
+
+
+
+
+
+
+
+
+
+
+ )}
+
+
+ );
+}
diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/promptCreator/activeTags/activeTags.css.ts b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/promptCreator/activeTags/activeTags.css.ts
new file mode 100644
index 00000000..555f620d
--- /dev/null
+++ b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/promptCreator/activeTags/activeTags.css.ts
@@ -0,0 +1,18 @@
+import { style } from '@vanilla-extract/css';
+import { vars } from '../../../../../../styles/theme/index.css';
+export const ActiveTagListMain = style({
+ display: 'flex',
+ flexDirection: 'row',
+ flexWrap: 'wrap',
+ gap: '10px',
+ width: '100%',
+ height: '100%',
+ overflow: 'visible',
+ scrollbarWidth: 'none',
+ msOverflowStyle: 'none',
+ '::-webkit-scrollbar': {
+ display: 'none',
+ },
+});
+
+
diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/promptCreator/activeTags/index.tsx b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/promptCreator/activeTags/index.tsx
new file mode 100644
index 00000000..9406d430
--- /dev/null
+++ b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/promptCreator/activeTags/index.tsx
@@ -0,0 +1,39 @@
+import React from "react";
+
+import { useImageCreate } from "../../../../../../stores/imageCreateStore";
+import ModifierTag from "../../../../../molecules/modifierTag";
+
+// import {
+// card
+// } from '../../../../../_recipes/card.css';
+
+
+
+import PromptTag from "../../../../../molecules/promptTag";
+
+import {
+ ActiveTagListMain
+} from "./activeTags.css";
+
+
+export default function ActiveTags() {
+ const selectedtags = useImageCreate((state) => state.selectedTags());
+
+ const createTags = useImageCreate((state) => state.createTags);
+
+ return (
+
+
+ );
+}
diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/promptCreator/index.tsx b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/promptCreator/index.tsx
new file mode 100644
index 00000000..a7755371
--- /dev/null
+++ b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/promptCreator/index.tsx
@@ -0,0 +1,108 @@
+import React, { useState, ChangeEvent, KeyboardEventHandler, Fragment } from "react";
+import { v4 as uuidv4 } from "uuid";
+import { Switch } from '@headlessui/react'
+
+import { useImageCreate } from "../../../../../stores/imageCreateStore";
+
+import ActiveTags from "./activeTags";
+
+import {
+ IconFont,
+} from "../../../../../styles/shared.css";
+
+import {
+ buttonStyle,
+} from "../../../../_recipes/button.css";
+
+import {
+ PromptCreatorMain,
+ ToggleGroupMain,
+ ToggleMain,
+ ToggleLabel,
+ ToggleEnabled,
+ TogglePill,
+ buttonRow,
+} from "./promptCreator.css";
+
+
+
+import { useTranslation } from "react-i18next";
+import { type } from "os";
+
+interface TagTypeProps {
+ positive: boolean;
+ setPositive: (positive: boolean) => void;
+};
+
+function TagTypeToggle({ positive, setPositive }: TagTypeProps) {
+ return (
+ -
+ {createTags.map((tag) => {
+ console.log(tag);
+ return (
+
-
+ {/* @ts-expect-error */}
+
+ )
+ }
+ )}
+
+ Type
+
+
+ {positive
+ ?
+ : }
+
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/promptCreator/promptCreator.css.ts b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/promptCreator/promptCreator.css.ts
new file mode 100644
index 00000000..fbda231d
--- /dev/null
+++ b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/promptCreator/promptCreator.css.ts
@@ -0,0 +1,79 @@
+import { style, globalStyle } from '@vanilla-extract/css';
+
+import { vars } from "../../../../../styles/theme/index.css";
+
+export const PromptCreatorMain = style({
+ display: 'flex',
+ flexDirection: 'column',
+ width: '100%',
+ height: '100%',
+ marginBottom: 0,
+});
+
+globalStyle(`${PromptCreatorMain} input`, {
+ width: '100%',
+});
+
+globalStyle(`${PromptCreatorMain} > div`, {
+ marginBottom: vars.spacing.small,
+});
+
+export const ToggleGroupMain = style({
+ // '--toggle-size': '30px',
+});
+
+export const ToggleMain = style({
+ background: vars.backgroundDark,
+ height: '22px',
+ borderRadius: '15px',
+ width: '34px',
+ border: 0,
+ position: 'relative',
+ display: 'inline-flex',
+ padding: 0,
+ flexDirection: 'column',
+ alignItems: 'center',
+ justifyContent: 'center',
+ boxShadow: `0 0 2px 0 ${vars.backgroundDark}`,
+});
+
+export const ToggleLabel = style({
+});
+
+export const ToggleEnabled = style({
+});
+
+globalStyle(`${ToggleMain}[data-headlessui-state="checked"]`, {
+ background: vars.backgroundLight,
+});
+
+export const TogglePill = style({
+ display: 'inline-flex',
+ height: '18px',
+ width: '30px',
+ borderRadius: '15px',
+ background: vars.backgroundDark,
+ flexDirection: 'column',
+ alignItems: 'center',
+ justifyContent: 'center',
+});
+
+globalStyle(`${ToggleMain}[data-headlessui-state="checked"] ${TogglePill}`, {
+ background: vars.backgroundAccentMain,
+});
+
+globalStyle(`${TogglePill} p`, {
+ color: vars.colors.text.normal,
+});
+
+
+export const buttonRow = style({
+ marginTop: vars.spacing.small,
+ display: 'flex',
+ flexDirection: 'row',
+});
+
+globalStyle(`${buttonRow} > button`, {
+ flexGrow: 1,
+ marginRight: vars.spacing.medium,
+});
\ No newline at end of file
diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/seedImage/index.tsx b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/seedImage/index.tsx
new file mode 100644
index 00000000..7ceb78f5
--- /dev/null
+++ b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/seedImage/index.tsx
@@ -0,0 +1,108 @@
+import React, { useRef, ChangeEvent } from "react";
+
+
+
+import { XButton } from "../../../../../styles/shared.css";
+
+import {
+ ImageInputDisplay,
+ InputLabel,
+ ImageInput,
+ ImageFixer,
+} from "./seedImage.css";
+
+import {
+ buttonStyle
+} from "../../../../_recipes/button.css";
+
+import { useImageCreate } from "../../../../../stores/imageCreateStore";
+
+import { useTranslation } from "react-i18next";
+
+// 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) {
+ const { t } = useTranslation();
+
+ const imageInputRef = useRef
+
+ {t("home.editor-title")}
+ {/* @ts-expect-error */} + { + setTagText(event.target.value) + }}> +
+
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/seedImage/seedImage.css.ts b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/seedImage/seedImage.css.ts
new file mode 100644
index 00000000..8a5f4a99
--- /dev/null
+++ b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/seedImage/seedImage.css.ts
@@ -0,0 +1,23 @@
+import { style } from "@vanilla-extract/css";
+
+import { vars } from "../../../../../styles/theme/index.css";
+
+export const ImageInputDisplay = style({
+ display: "flex",
+});
+
+export const InputLabel = style({
+ marginBottom: vars.spacing.small,
+ display: "block",
+});
+
+export const ImageInput = style({
+ display: "none",
+});
+
+
+// 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",
+});
diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/showQueue/index.tsx b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/showQueue/index.tsx
new file mode 100644
index 00000000..287c70ca
--- /dev/null
+++ b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/showQueue/index.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+
+import { useCreateUI } from "../../creationPanelUIStore";
+
+export default function ShowQueue() {
+
+ const showQueue = useCreateUI((state) => state.showQueue);
+ const toggleQueue = useCreateUI((state) => state.toggleQueue);
+
+ return (
+
+ );
+}
\ No newline at end of file
diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/creationPanel.css.ts b/ui/frontend/build_src/src/components/organisms/creationPanel/creationPanel.css.ts
new file mode 100644
index 00000000..47e6c5c5
--- /dev/null
+++ b/ui/frontend/build_src/src/components/organisms/creationPanel/creationPanel.css.ts
@@ -0,0 +1,21 @@
+import { style, globalStyle } from "@vanilla-extract/css";
+import { vars } from "../../../styles/theme/index.css";
+export const CreationPaneMain = style({
+ position: "relative",
+ width: "100%",
+ height: "100%",
+ overflowY: "auto",
+ overflowX: "hidden",
+});
+
+globalStyle(`${CreationPaneMain} > div`, {
+ marginBottom: vars.spacing.medium,
+});
+
+export const InpaintingSlider = style({
+ position: "absolute",
+ top: "10px",
+ left: "400px",
+ zIndex: 1,
+ backgroundColor: "rgba(0, 0, 0, 0.5)",
+});
diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/creationPanelUIStore.ts b/ui/frontend/build_src/src/components/organisms/creationPanel/creationPanelUIStore.ts
new file mode 100644
index 00000000..6a615dee
--- /dev/null
+++ b/ui/frontend/build_src/src/components/organisms/creationPanel/creationPanelUIStore.ts
@@ -0,0 +1,89 @@
+import create from "zustand";
+import produce from "immer";
+import { persist } from "zustand/middleware";
+
+export interface ImageCreationUIOptions {
+ isOpenAdvancedSettings: boolean;
+ isOpenAdvImprovementSettings: boolean;
+ isOpenAdvPropertySettings: boolean;
+ isOpenAdvWorkflowSettings: boolean;
+ isOpenImageModifier: boolean;
+ showQueue: boolean;
+
+ toggleAdvancedSettings: () => void;
+ toggleAdvImprovementSettings: () => void;
+ toggleAdvPropertySettings: () => void;
+ toggleAdvWorkflowSettings: () => void;
+
+ toggleImageModifier: () => void;
+ toggleQueue: () => void;
+
+}
+
+export const useCreateUI = create
+
+
+
+
+
+
+ {void 0 !== initImage && (
+ <>
+
+
+ 
+
+
+
+
+ )}
+ -
+ {tags.map((tag) => (
+
-
+
+
+ ))}
+
+
+ {isExpanded &&
+ );
+}
+
+export default function ImageModifers() {
+ const allModifiers = useImageCreate((state) => state.allModifiers);
+
+ const imageModifierIsOpen = useCreateUI((state) => state.isOpenImageModifier);
+ const toggleImageModifiersIsOpen = useCreateUI(
+ (state) => state.toggleImageModifier
+ );
+
+ const handleClick = () => {
+ toggleImageModifiersIsOpen();
+ };
+
+ return (
+
+
+
+ {imageModifierIsOpen && (
+
+ );
+}
diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/imageModifiers/modifiers.mock.ts b/ui/frontend/build_src/src/components/organisms/creationPanel/imageModifiers/modifiers.mock.ts
new file mode 100644
index 00000000..4a3fe97e
--- /dev/null
+++ b/ui/frontend/build_src/src/components/organisms/creationPanel/imageModifiers/modifiers.mock.ts
@@ -0,0 +1,18 @@
+const Mockifiers = [
+ [
+ "Drawing Style",
+ [
+ "Cel Shading",
+ "Children's Drawing",
+ "Crosshatch",
+ "Detailed and Intricate",
+ "Doodle",
+ "Dot Art",
+ "Line Art",
+ "Sketch",
+ ],
+ ],
+ ["Visual Style", ["2D", "8-bit", "16-bit", "Anaglyph", "Anime", "CGI"]],
+];
+
+export default Mockifiers;
diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/index.tsx b/ui/frontend/build_src/src/components/organisms/creationPanel/index.tsx
new file mode 100644
index 00000000..9730ba11
--- /dev/null
+++ b/ui/frontend/build_src/src/components/organisms/creationPanel/index.tsx
@@ -0,0 +1,43 @@
+import React, { ChangeEvent } from "react";
+
+import BasicCreation from "./basicCreation";
+import AdvancedSettings from "./advancedSettings";
+import ImageModifiers from "./imageModifiers";
+import InpaintingPanel from "./inpaintingPanel";
+
+import QueueDisplay from "../queueDisplay";
+
+// this works but causes type errors so its not worth it for now
+// import { useImageCreate } from "@stores/imageCreateStore.ts";
+
+import { useImageCreate } from "../../../stores/imageCreateStore";
+import { useRequestQueue } from "../../../stores/requestQueueStore";
+
+
+import {
+ CreationPaneMain,
+ InpaintingSlider,
+} from "./creationPanel.css";
+
+
+export default function CreationPanel() {
+ const isInPaintingMode = useImageCreate((state) => state.isInpainting);
+
+ const hasQueue = useRequestQueue((state) => state.hasAnyQueue());
+
+ return (
+ <>
+ -
+ {allModifiers.map((item, index) => {
+ return (
+
-
+
+
+ );
+ })}
+
+
+
+ {isInPaintingMode && (
+
+
+ )}
+
+ );
+}
diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/inpaintingPanel/index.tsx b/ui/frontend/build_src/src/components/organisms/creationPanel/inpaintingPanel/index.tsx
new file mode 100644
index 00000000..3e56f8a3
--- /dev/null
+++ b/ui/frontend/build_src/src/components/organisms/creationPanel/inpaintingPanel/index.tsx
@@ -0,0 +1,114 @@
+import React, { useRef, useState, ChangeEvent } from "react";
+import DrawImage from "../../../molecules/drawImage";
+
+import { useImageCreate } from "../../../../stores/imageCreateStore";
+
+import {
+ InpaintingPanelMain,
+ InpaintingControls,
+ InpaintingControlRow,
+} from "./inpaintingPanel.css";
+
+export default function InpaintingPanel() {
+ // no idea if this is the right typing
+ // const drawingRef = useRef(null);
+
+ const [brushSize, setBrushSize] = useState("20");
+ const [brushShape, setBrushShape] = useState("round");
+ const [brushColor, setBrushColor] = useState("#fff");
+ const [isErasing, setIsErasing] = useState(false);
+
+ const initImage = useImageCreate((state) =>
+ state.getValueForRequestKey("init_image")
+ );
+
+ const setRequestOption = useImageCreate((state) => state.setRequestOptions);
+
+ const setMask = (data: string) => {
+ setRequestOption("mask", data);
+ }
+
+
+ const _handleBrushMask = () => {
+ setIsErasing(false);
+ };
+
+ const _handleBrushErase = () => {
+ setIsErasing(true);
+ };
+
+
+ const _handleBrushSize = (event: ChangeEvent
+
+ );
+}
diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/inpaintingPanel/inpaintingPanel.css.ts b/ui/frontend/build_src/src/components/organisms/creationPanel/inpaintingPanel/inpaintingPanel.css.ts
new file mode 100644
index 00000000..84f432ff
--- /dev/null
+++ b/ui/frontend/build_src/src/components/organisms/creationPanel/inpaintingPanel/inpaintingPanel.css.ts
@@ -0,0 +1,27 @@
+import { style } from "@vanilla-extract/css";
+
+export const InpaintingPanelMain = style({
+ position: "relative",
+ width: "100%",
+ height: "100%",
+ padding: "10px 10px",
+});
+
+export const InpaintingControls = style({
+ 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",
+ },
+});
diff --git a/ui/frontend/build_src/src/components/organisms/currentDisplay/currentDisplay.css.ts b/ui/frontend/build_src/src/components/organisms/currentDisplay/currentDisplay.css.ts
new file mode 100644
index 00000000..15ba7cc0
--- /dev/null
+++ b/ui/frontend/build_src/src/components/organisms/currentDisplay/currentDisplay.css.ts
@@ -0,0 +1,12 @@
+import { style } from '@vanilla-extract/css'
+
+// handles all 3
+export const currentDisplayMain = style({
+ display: 'flex',
+ flexDirection: 'column',
+ justifyContent: 'center',
+ alignItems: 'center',
+ height: '100%',
+ width: '100%',
+ padding: '0 0 0 0',
+})
diff --git a/ui/frontend/build_src/src/components/organisms/currentDisplay/imageDisplay/imageDisplay.css.ts b/ui/frontend/build_src/src/components/organisms/currentDisplay/imageDisplay/imageDisplay.css.ts
new file mode 100644
index 00000000..ad84a309
--- /dev/null
+++ b/ui/frontend/build_src/src/components/organisms/currentDisplay/imageDisplay/imageDisplay.css.ts
@@ -0,0 +1,40 @@
+import { style, globalStyle } from '@vanilla-extract/css'
+
+import { vars } from '../../../../styles/theme/index.css'
+
+export const imageDisplayMain = style({
+ height: '100%',
+ width: '100%',
+ display: 'flex',
+ flexDirection: 'column',
+});
+
+export const imageDisplayContainer = style({
+ height: '100%',
+ width: '80%',
+ display: 'flex',
+ justifyContent: 'center',
+});
+
+export const imageDisplayCenter = style({
+ width: '100%',
+ maxWidth: '1000px',
+ position: 'relative',
+});
+
+export const imageDisplayContent = style({
+ display: 'flex',
+ flexDirection: 'column',
+});
+
+globalStyle(`${imageDisplayContent} > div`, {
+ marginBottom: vars.spacing.medium,
+});
+
+globalStyle(`${imageDisplayContent} p`, {
+ marginBottom: vars.spacing.small,
+});
+
+globalStyle(`${imageDisplayContent} button`, {
+ marginRight: vars.spacing.medium,
+});
\ No newline at end of file
diff --git a/ui/frontend/build_src/src/components/organisms/currentDisplay/imageDisplay/index.tsx b/ui/frontend/build_src/src/components/organisms/currentDisplay/imageDisplay/index.tsx
new file mode 100644
index 00000000..48cfe2ae
--- /dev/null
+++ b/ui/frontend/build_src/src/components/organisms/currentDisplay/imageDisplay/index.tsx
@@ -0,0 +1,100 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import React from "react";
+import { useImageCreate } from "../../../../stores/imageCreateStore";
+import { CompletedImagesType } from "../../../../stores/imageDisplayStore";
+
+import GeneratedImage from "../../../molecules/generatedImage";
+
+import {
+ imageDisplayMain,
+ imageDisplayContainer,
+ imageDisplayCenter,
+ imageDisplayContent,
+} from './imageDisplay.css';
+
+
+import {
+ buttonStyle
+} from "../../../_recipes/button.css";
+
+export default function ImageDisplay({ info, data }: CompletedImagesType) {
+
+ const createFileName = () => {
+ const {
+ prompt,
+ negative_prompt,
+ seed,
+ num_inference_steps,
+ guidance_scale,
+ use_face_correction,
+ use_upscale,
+ width,
+ height,
+ } = info;
+
+ // Most important information is the prompt
+ let underscoreName = prompt.replace(/[^a-zA-Z0-9]/g, "_");
+ underscoreName = underscoreName.substring(0, 100);
+ // name and the top level metadata
+ let fileName = `${underscoreName}_Seed-${seed}_Steps-${num_inference_steps}_Guidance-${guidance_scale}`;
+ // Add the face correction and upscale
+ if (typeof use_face_correction == "string") {
+ fileName += `_FaceCorrection-${use_face_correction}`;
+ }
+ if (typeof use_upscale == "string") {
+ fileName += `_Upscale-${use_upscale}`;
+ }
+ // Add the width and height
+ fileName += `_${width}x${height}`;
+ // add the file extension
+ fileName += ".png";
+ // return fileName
+ return fileName;
+ };
+
+ const setRequestOption = useImageCreate((state) => state.setRequestOptions);
+
+ const _handleSave = () => {
+ const link = document.createElement("a");
+ link.download = createFileName();
+ link.href = data ?? "";
+ link.click();
+ };
+
+ const _handleUseAsInput = () => {
+ setRequestOption("init_image", data);
+ };
+
+ return (
+
+
+
+
+
+ {/*
+ */}
+
+
+
+
+
+
+
+
+ {/* */}
+ {/* */}
+
+
+
+
+ );
+};
diff --git a/ui/frontend/build_src/src/components/organisms/currentDisplay/index.tsx b/ui/frontend/build_src/src/components/organisms/currentDisplay/index.tsx
new file mode 100644
index 00000000..458deac6
--- /dev/null
+++ b/ui/frontend/build_src/src/components/organisms/currentDisplay/index.tsx
@@ -0,0 +1,58 @@
+import React, { useEffect, useState } from "react";
+
+import { FetchingStates, useImageFetching } from "../../../stores/imageFetchingStore";
+import { useImageDisplay } from "../../../stores/imageDisplayStore";
+
+import { API_URL } from "../../../api";
+
+import {
+ currentDisplayMain,
+} from './currentDisplay.css';
+
+import ImageDisplay from "./imageDisplay";
+
+const IdleDisplay = () => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {info?.prompt}
+{info?.negative_prompt}
+
+
+
+
+ Try Making a new image!
+ ); +}; + +const LoadingDisplay = ({ images }: { images: string[] }) => { + + return ( + <> + {images.map((image, index) => { + if (index == images.length - 1) { + return ( +
+
+ {(currentImage == null) &&
+ );
+}
\ No newline at end of file
diff --git a/ui/frontend/build_src/src/components/organisms/currentInfo/currentInfo.css.ts b/ui/frontend/build_src/src/components/organisms/currentInfo/currentInfo.css.ts
new file mode 100644
index 00000000..167d8c2d
--- /dev/null
+++ b/ui/frontend/build_src/src/components/organisms/currentInfo/currentInfo.css.ts
@@ -0,0 +1,22 @@
+import { style } from '@vanilla-extract/css'
+
+import {
+ card as cardStyles,
+} from '../../_recipes/card.css'
+
+export const currentInfoMain = style([
+ cardStyles(
+ {
+ backing: 'dark',
+ }
+ ),
+ {
+ // display: 'flex',
+ // flexDirection: 'column',
+ // justifyContent: 'center',
+ // alignItems: 'center',
+ // height: '100%',
+ width: '250px',
+ padding: '0 0 0 0',
+ },
+])
diff --git a/ui/frontend/build_src/src/components/organisms/currentInfo/index.tsx b/ui/frontend/build_src/src/components/organisms/currentInfo/index.tsx
new file mode 100644
index 00000000..bb131621
--- /dev/null
+++ b/ui/frontend/build_src/src/components/organisms/currentInfo/index.tsx
@@ -0,0 +1,7 @@
+import React from "react";
+import { currentInfoMain } from "./currentInfo.css";
+export default function CurrentInfo() {
+ return current info
;
+}
\ No newline at end of file
diff --git a/ui/frontend/build_src/src/components/organisms/footerDisplay/footerDisplay.css.ts b/ui/frontend/build_src/src/components/organisms/footerDisplay/footerDisplay.css.ts
new file mode 100644
index 00000000..9dc7cb4d
--- /dev/null
+++ b/ui/frontend/build_src/src/components/organisms/footerDisplay/footerDisplay.css.ts
@@ -0,0 +1,59 @@
+import { style, globalStyle } from "@vanilla-extract/css";
+
+import { vars } from "../../../styles/theme/index.css";
+
+export const FooterDisplayMain = style({
+ color: vars.colors.text.normal,
+ fontSize: vars.fonts.sizes.Caption,
+
+ display: "inline-block",
+ // marginTop: vars.spacing.medium,
+ // marginBottom: vars.spacing.medium,
+ // TODO move this to the theme
+ padding: vars.spacing.small,
+ boxShadow:
+ "0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.15)",
+});
+
+export const CoffeeButton = style({
+ height: "23px",
+ transform: "translateY(25%)",
+});
+
+globalStyle(`${FooterDisplayMain} a`, {
+ color: vars.colors.link,
+ textDecoration: "none",
+});
+
+globalStyle(`${FooterDisplayMain} a:hover`, {
+ textDecoration: "underline",
+});
+
+globalStyle(`${FooterDisplayMain} a:visited`, {
+ color: vars.colors.link,
+});
+
+globalStyle(`${FooterDisplayMain} a:active`, {
+ color: vars.colors.link,
+});
+
+globalStyle(`${FooterDisplayMain} a:focus`, {
+ color: vars.colors.link,
+});
+
+globalStyle(`${FooterDisplayMain} p`, {
+ margin: vars.spacing.min,
+});
+
+// .footer-display {
+// color: #ffffff;
+// display: flex;
+// flex-direction: column;
+// align-items: center;
+// justify-content: center;
+// }
+
+// #coffeeButton {
+// height: 23px;
+// transform: translateY(25%);
+// }
diff --git a/ui/frontend/build_src/src/components/organisms/footerDisplay/index.tsx b/ui/frontend/build_src/src/components/organisms/footerDisplay/index.tsx
new file mode 100644
index 00000000..428ee3f8
--- /dev/null
+++ b/ui/frontend/build_src/src/components/organisms/footerDisplay/index.tsx
@@ -0,0 +1,71 @@
+import React from "react";
+
+import {
+ FooterDisplayMain,
+ CoffeeButton,
+} from "./footerDisplay.css";
+
+import { API_URL } from "../../../api";
+
+export default function FooterDisplay() {
+ return (
+
+
+ );
+}
diff --git a/ui/frontend/build_src/src/components/organisms/headerDisplay/headerDisplay.css.ts b/ui/frontend/build_src/src/components/organisms/headerDisplay/headerDisplay.css.ts
new file mode 100644
index 00000000..f1d7a2d0
--- /dev/null
+++ b/ui/frontend/build_src/src/components/organisms/headerDisplay/headerDisplay.css.ts
@@ -0,0 +1,28 @@
+import { style, globalStyle } from "@vanilla-extract/css";
+import { vars } from "../../../styles/theme/index.css";
+
+export const HeaderDisplayMain = style({
+ color: vars.colors.text.normal,
+ display: "flex",
+ justifyContent: "space-between"
+});
+
+globalStyle(`${HeaderDisplayMain} > h1`, {
+ fontSize: vars.fonts.sizes.Title,
+ fontWeight: "bold",
+ marginRight: vars.spacing.medium,
+});
+
+
+export const HeaderTitle = style({
+ marginLeft: vars.spacing.large,
+});
+
+export const HeaderLinks = style({
+ display: "flex",
+ alignItems: "center",
+ flexGrow: 1,
+ justifyContent: "space-between",
+ maxWidth: "300px",
+ marginRight: vars.spacing.large,
+});
\ No newline at end of file
diff --git a/ui/frontend/build_src/src/components/organisms/headerDisplay/helpOptions/helpOptions.css.ts b/ui/frontend/build_src/src/components/organisms/headerDisplay/helpOptions/helpOptions.css.ts
new file mode 100644
index 00000000..e8be07c6
--- /dev/null
+++ b/ui/frontend/build_src/src/components/organisms/headerDisplay/helpOptions/helpOptions.css.ts
@@ -0,0 +1,5 @@
+import { style } from "@vanilla-extract/css";
+
+export const HelpContent = style({
+ width: '300px',
+});
diff --git a/ui/frontend/build_src/src/components/organisms/headerDisplay/helpOptions/index.tsx b/ui/frontend/build_src/src/components/organisms/headerDisplay/helpOptions/index.tsx
new file mode 100644
index 00000000..56ffb8dd
--- /dev/null
+++ b/ui/frontend/build_src/src/components/organisms/headerDisplay/helpOptions/index.tsx
@@ -0,0 +1,61 @@
+import React from "react";
+import { Popover } from '@headlessui/react';
+// import { useTranslation } from "react-i18next";
+
+import {
+ PopoverMain,
+ PopoverButtonStyle,
+ PopoverPanelMain,
+} from "../../../_recipes/popover_headless.css";
+
+import {
+ card
+} from '../../../_recipes/card.css';
+
+import {
+ IconFont,
+ SettingItem
+} from "../../../../styles/shared.css";
+
+import {
+ HelpContent
+} from "./helpOptions.css";
+
+export default function HelpOptions() {
+
+ return (
+
+ If you found this project useful and want to help keep it alive, please{" "}
+
+ 
+ {" "}
+ to help cover the cost of development and maintenance! Thank you for
+ your support!
+
+ Please feel free to join the{" "} + + discord community + {" "} + or{" "} + + file an issue + {" "} + if you have any problems or suggestions in using this interface. +
+ +
+
+ -
+
- + + Usual Problems and Solutions + + +
- + + Discord user Community + + +
- + + Reddit Community + + +
- + + Source Code on Github + + +
+
+ );
+}
diff --git a/ui/frontend/build_src/src/components/organisms/headerDisplay/languageDropdown/index.tsx b/ui/frontend/build_src/src/components/organisms/headerDisplay/languageDropdown/index.tsx
new file mode 100644
index 00000000..f6e3c651
--- /dev/null
+++ b/ui/frontend/build_src/src/components/organisms/headerDisplay/languageDropdown/index.tsx
@@ -0,0 +1,23 @@
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+const LanguageDropdown = () => {
+ const { i18n } = useTranslation();
+ const [language, setLanguage] = useState("id");
+
+ const handleLangChange = (evt: any) => {
+ const lang = evt.target.value;
+ console.log(lang);
+ setLanguage(lang);
+ i18n.changeLanguage(lang);
+ };
+
+ return (
+
+ );
+};
+
+export default LanguageDropdown;
diff --git a/ui/frontend/build_src/src/components/organisms/headerDisplay/statusDisplay/index.tsx b/ui/frontend/build_src/src/components/organisms/headerDisplay/statusDisplay/index.tsx
new file mode 100644
index 00000000..c4d47d80
--- /dev/null
+++ b/ui/frontend/build_src/src/components/organisms/headerDisplay/statusDisplay/index.tsx
@@ -0,0 +1,57 @@
+import React, { useEffect, useState, useRef } from "react";
+import { useQuery } from "@tanstack/react-query";
+
+import { healthPing, HEALTH_PING_INTERVAL } from "../../../../api";
+
+import AudioDing from "../../../molecules/audioDing";
+
+import {
+ StartingStatus,
+ ErrorStatus,
+ SuccessStatus,
+} from "./statusDisplay.css";
+
+const startingMessage = "Stable Diffusion is starting...";
+const successMessage = "Stable Diffusion is ready to use!";
+const errorMessage = "Stable Diffusion is not running!";
+
+export default function StatusDisplay({ className }: { className?: string }) {
+ const [statusMessage, setStatusMessage] = useState(startingMessage);
+ const [statusClass, setStatusClass] = useState(StartingStatus);
+
+ const dingRef = useRef
+
+ + {t("title")} {version} {release}{" "} +
+
+
+ {/* {statusMessage}
+ + ); +} diff --git a/ui/frontend/build_src/src/components/organisms/headerDisplay/statusDisplay/statusDisplay.css.ts b/ui/frontend/build_src/src/components/organisms/headerDisplay/statusDisplay/statusDisplay.css.ts new file mode 100644 index 00000000..ccbdacb5 --- /dev/null +++ b/ui/frontend/build_src/src/components/organisms/headerDisplay/statusDisplay/statusDisplay.css.ts @@ -0,0 +1,15 @@ +import { style } from "@vanilla-extract/css"; + +import { vars } from "../../../../styles/theme/index.css"; + +export const StartingStatus = style({ + color: `hsl(${vars.warningHue}, ${vars.colorMod.saturation.normal}, ${vars.colorMod.lightness.normal})`, +}); + +export const ErrorStatus = style({ + color: `hsl(${vars.errorHue}, ${vars.colorMod.saturation.normal}, ${vars.colorMod.lightness.normal})`, +}); + +export const SuccessStatus = style({ + color: `hsl(${vars.successHue}, ${vars.colorMod.saturation.normal}, ${vars.colorMod.lightness.normal})`, +}); diff --git a/ui/frontend/build_src/src/components/organisms/headerDisplay/systemSettings/index.tsx b/ui/frontend/build_src/src/components/organisms/headerDisplay/systemSettings/index.tsx new file mode 100644 index 00000000..f0162d7e --- /dev/null +++ b/ui/frontend/build_src/src/components/organisms/headerDisplay/systemSettings/index.tsx @@ -0,0 +1,162 @@ +/* eslint-disable @typescript-eslint/strict-boolean-expressions */ +import React from "react"; +import { Popover } from '@headlessui/react'; +import { useTranslation } from "react-i18next"; + +import { useImageCreate } from "../../../../stores/imageCreateStore"; + +import BetaMode from "../../../molecules/betaMode"; + + +import { + IconFont, + SettingItem +} from "../../../../styles/shared.css"; + +import { + PopoverMain, + PopoverButtonStyle, + PopoverPanelMain, +} from "../../../_recipes/popover_headless.css"; + +import { + SettingContent +} from "./systemSettings.css"; + +// import { +// SwitchGroupMain, +// SwitchMain, +// SwitchLabel, +// SwitchEnabled, +// SwitchPill, +// } from "../../../_headless/switch/index.css"; + + +export default function SystemSettings() { + const { t } = useTranslation(); + + const isUseAutoSave = useImageCreate((state) => state.isUseAutoSave()); + const diskPath = useImageCreate((state) => + state.getValueForRequestKey("save_to_disk_path") + ); + + 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 isSoundEnabled = useImageCreate((state) => state.isSoundEnabled()); + + const setRequestOption = useImageCreate((state) => state.setRequestOptions); + const toggleUseAutoSave = useImageCreate((state) => state.toggleUseAutoSave); + const toggleSoundEnabled = useImageCreate( + (state) => state.toggleSoundEnabled + ); + + return ( +
+
+ System Settings
+-
+
- + + + +
-
+
+
+
+ {/*
+ */} +<>{t("advanced-settings.sound")} ++ + +
+
+
+ - + + +
- + + +
- + + + +
-
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/ui/frontend/build_src/src/components/organisms/queueDisplay/queueDisplay.css.ts b/ui/frontend/build_src/src/components/organisms/queueDisplay/queueDisplay.css.ts
new file mode 100644
index 00000000..d3aa3259
--- /dev/null
+++ b/ui/frontend/build_src/src/components/organisms/queueDisplay/queueDisplay.css.ts
@@ -0,0 +1,28 @@
+import { style, globalStyle } from "@vanilla-extract/css";
+
+
+import { vars } from "../../../styles/theme/index.css";
+
+export const QueueDisplayMain = style({
+ display: "flex",
+ flexDirection: "column",
+ width: '100%',
+ height: '100%',
+});
+
+export const QueueListButtons = style({
+ display: "flex",
+ flexDirection: "row",
+ justifyContent: "space-between",
+ alignItems: "center",
+ marginBottom: vars.spacing.medium,
+ marginTop: vars.spacing.medium,
+});
+
+globalStyle(`${QueueListButtons} button`, {
+ flexGrow: 1,
+});
+
+globalStyle(`${QueueListButtons} button:first-child`, {
+ marginRight: vars.spacing.medium,
+});
\ No newline at end of file
diff --git a/ui/frontend/build_src/src/components/organisms/queueDisplay/queueItem/index.tsx b/ui/frontend/build_src/src/components/organisms/queueDisplay/queueItem/index.tsx
new file mode 100644
index 00000000..0cdf4e10
--- /dev/null
+++ b/ui/frontend/build_src/src/components/organisms/queueDisplay/queueItem/index.tsx
@@ -0,0 +1,125 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+
+import React from "react";
+
+
+import { QueueStatus, QueuedRequest, useRequestQueue } from '../../../../stores/requestQueueStore';
+
+import StopButton from '../../../molecules/stopButton';
+
+import {
+ QueueItemMain,
+ QueueItemInfo,
+ QueueButtons,
+} from "./queueItem.css";
+
+
+import {
+ buttonStyle
+} from "../../../_recipes/button.css";
+
+
+interface QueueItemProps {
+ request: QueuedRequest;
+}
+
+export default function QueueItem({ request }: QueueItemProps) {
+
+ const removeItem = useRequestQueue((state) => state.removeItem);
+ const updateStatus = useRequestQueue((state) => state.updateStatus);
+ const sendPendingToTop = useRequestQueue((state) => state.sendPendingToTop);
+
+ const {
+ id,
+ options: {
+ prompt,
+ num_outputs,
+ seed,
+ sampler,
+ guidance_scale,
+ num_inference_steps,
+
+ },
+ status,
+ } = request;
+
+ const removeFromQueue = () => {
+ removeItem(id);
+ }
+
+ const pauseItem = () => {
+ updateStatus(id, QueueStatus.paused);
+ }
+
+ const retryRequest = () => {
+ updateStatus(id, QueueStatus.pending);
+ }
+
+ const sendToTop = () => {
+ sendPendingToTop(id);
+ }
+
+ return (
+
+
+
+
+ {requests.map((request) => {
+ return
+
+
+ );
+}
\ No newline at end of file
diff --git a/ui/frontend/build_src/src/components/organisms/queueDisplay/queueItem/queueItem.css.ts b/ui/frontend/build_src/src/components/organisms/queueDisplay/queueItem/queueItem.css.ts
new file mode 100644
index 00000000..54da4020
--- /dev/null
+++ b/ui/frontend/build_src/src/components/organisms/queueDisplay/queueItem/queueItem.css.ts
@@ -0,0 +1,61 @@
+import { style, globalStyle } from "@vanilla-extract/css";
+
+
+import { vars } from "../../../../styles/theme/index.css";
+
+
+import { QueueStatus } from "../../../../stores/requestQueueStore";
+
+
+import {
+ card
+} from '../../../_recipes/card.css';
+
+export const QueueItemMain = style([card(
+ {
+
+ info: true,
+ level: 1
+ }
+), {
+ display: "flex",
+ flexDirection: "column",
+ width: "100%",
+ marginBottom: vars.spacing.medium,
+}]);
+
+export const QueueItemInfo = style({
+
+});
+
+globalStyle(`${QueueItemInfo} p`, {
+ marginBottom: vars.spacing.small,
+});
+
+globalStyle(`${QueueItemMain}.${QueueStatus.complete}`, {
+ borderColor: `hsl(${vars.secondaryHue}, ${vars.colorMod.saturation.normal}, ${vars.colorMod.lightness.normal})`,
+});
+
+globalStyle(`${QueueItemMain}.${QueueStatus.processing}`, {
+ borderColor: `hsl(${vars.tertiaryHue}, ${vars.colorMod.saturation.bright}, ${vars.colorMod.lightness.bright})`,
+});
+
+globalStyle(`${QueueItemMain}.${QueueStatus.pending}`, {
+ borderColor: `hsl(${vars.backgroundAccentMain}, ${vars.colorMod.saturation.bright}, ${vars.colorMod.lightness.normal})`,
+});
+
+globalStyle(`${QueueItemMain}.${QueueStatus.paused}`, {
+ borderColor: `hsl(${vars.backgroundAccentMain}, ${vars.colorMod.saturation.dim}, ${vars.colorMod.lightness.dim})`,
+ backgroundColor: `hsl(${vars.backgroundAccentMain}, ${vars.colorMod.saturation.dim}, ${vars.colorMod.lightness.dim})`,
+});
+
+globalStyle(`${QueueItemMain}.${QueueStatus.error}`, {
+ borderColor: `hsl(${vars.errorHue}, ${vars.colorMod.saturation.normal}, ${vars.colorMod.lightness.normal})`,
+});
+
+export const QueueButtons = style({
+ display: "flex",
+ flexDirection: "row",
+ justifyContent: "space-between",
+ alignItems: "center",
+});
\ No newline at end of file
diff --git a/ui/frontend/build_src/src/main.tsx b/ui/frontend/build_src/src/main.tsx
new file mode 100644
index 00000000..8b61d6f2
--- /dev/null
+++ b/ui/frontend/build_src/src/main.tsx
@@ -0,0 +1,35 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+
+import { enableMapSet } from "immer";
+
+import App from "./App";
+
+import "./styles/index.css.ts";
+
+const queryClient = new QueryClient({
+ defaultOptions: {
+ queries: {
+ refetchOnWindowFocus: false,
+ refetchOnReconnect: false,
+ refetchOnMount: false,
+ staleTime: Infinity,
+ cacheTime: Infinity,
+ },
+ },
+});
+
+enableMapSet();
+// application entry point
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+
+
+
+ {prompt}
+Making {num_outputs} concurrent images
++ Seed: {seed} + Sampler: {sampler} + Guidance Scale: {guidance_scale} + Num Inference Steps: {num_inference_steps} +
+
+
+ {status === QueueStatus.processing && (
+
+
+
+
+ );
+}
diff --git a/ui/frontend/build_src/src/pages/Home/home.css.ts b/ui/frontend/build_src/src/pages/Home/home.css.ts
new file mode 100644
index 00000000..60f9aead
--- /dev/null
+++ b/ui/frontend/build_src/src/pages/Home/home.css.ts
@@ -0,0 +1,54 @@
+import { style, globalStyle } from "@vanilla-extract/css";
+import { vars } from "../../styles/theme/index.css";
+
+export const AppLayout = style({
+ position: "relative",
+
+ width: "100vw",
+ height: "100vh",
+ pointerEvents: "auto",
+ display: "grid",
+ backgroundColor: vars.backgroundMain,
+ gridTemplateColumns: "400px 1fr",
+ gridTemplateRows: "70px 1fr 115px",
+ gridTemplateAreas: `
+ "header header header"
+ "create display display"
+ "create display display"
+ `,
+
+
+ // "@media": {
+ // "screen and (max-width: 800px)": {
+ // gridTemplateColumns: "1fr",
+ // gridTemplateRows: "100px 300px 1fr",
+ // gridTemplateAreas: `
+ // "header"
+ // "create"
+ // "display"
+ // `,
+ // },
+ // },
+});
+
+export const HeaderLayout = style({
+ gridArea: "header",
+});
+
+export const CreateLayout = style({
+ gridArea: "create",
+ position: "relative",
+ display: "flex",
+ flexDirection: "column",
+});
+
+export const DisplayLayout = style({
+ gridArea: "display",
+ overflow: "auto",
+});
+
+export const FooterLayout = style({
+ gridArea: "footer",
+ display: "flex",
+ justifyContent: "center",
+});
diff --git a/ui/frontend/build_src/src/pages/Home/index.tsx b/ui/frontend/build_src/src/pages/Home/index.tsx
new file mode 100644
index 00000000..811e832d
--- /dev/null
+++ b/ui/frontend/build_src/src/pages/Home/index.tsx
@@ -0,0 +1,73 @@
+import React, { useEffect } from "react";
+
+import {
+ AppLayout,
+ HeaderLayout,
+ CreateLayout,
+ DisplayLayout,
+ FooterLayout,
+} from "./home.css";
+
+import { useQuery } from "@tanstack/react-query";
+import { getSaveDirectory, loadModifications } from "../../api";
+import Mockifiers from "../../components/organisms/creationPanel/imageModifiers/modifiers.mock";
+
+import { useImageCreate } from "../../stores/imageCreateStore";
+
+// Todo - import components here
+import HeaderDisplay from "../../components/organisms/headerDisplay";
+import BasicDisplay from "../../components/layouts/basicDisplay";
+import FooterDisplay from "../../components/organisms/footerDisplay";
+import CreationTabs from "../../components/layouts/creationTabs";
+
+function Home() {
+ // Get the original save directory
+ const setRequestOption = useImageCreate((state) => state.setRequestOptions);
+
+ const { status: statusSave, data: dataSave } = useQuery(
+ ["SaveDir"],
+ getSaveDirectory
+ );
+ const { status: statusMods, data: dataMoads } = useQuery(
+ ["modifications"],
+ loadModifications
+ );
+
+ const setAllModifiers = useImageCreate((state) => state.setAllModifiers);
+
+ useEffect(() => {
+ if (statusSave === "success") {
+ setRequestOption("save_to_disk_path", dataSave);
+ }
+ }, [setRequestOption, statusSave, dataSave]);
+
+ useEffect(() => {
+ if (statusMods === "success") {
+ setAllModifiers(dataMoads);
+ } else if (statusMods === "error") {
+ // @ts-expect-error
+ setAllModifiers(Mockifiers);
+ }
+ }, [setRequestOption, statusMods, dataMoads]);
+
+ return (
+ <>
+ Beta
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default Home;
diff --git a/ui/frontend/build_src/src/pages/Settings/index.tsx b/ui/frontend/build_src/src/pages/Settings/index.tsx
new file mode 100644
index 00000000..3d75c1ef
--- /dev/null
+++ b/ui/frontend/build_src/src/pages/Settings/index.tsx
@@ -0,0 +1,9 @@
+import React from "react";
+
+export default function Settings() {
+ return (
+
+
+ );
+}
diff --git a/ui/frontend/build_src/src/stores/imageCreateStore.ts b/ui/frontend/build_src/src/stores/imageCreateStore.ts
new file mode 100644
index 00000000..6b31f55a
--- /dev/null
+++ b/ui/frontend/build_src/src/stores/imageCreateStore.ts
@@ -0,0 +1,397 @@
+/* eslint-disable @typescript-eslint/strict-boolean-expressions */
+import create from "zustand";
+import produce from "immer";
+import { devtools } from "zustand/middleware";
+
+import { useRandomSeed } from "../utils";
+
+import { ImageRequest } from "../api";
+
+export interface ImageCreationUiOptions {
+ isUseRandomSeed: boolean;
+ isUseAutoSave: boolean;
+ isSoundEnabled: boolean;
+}
+
+export const SAMPLER_OPTIONS = [
+ 'plms',
+ 'ddim',
+ 'heun',
+ 'euler',
+ 'euler_a',
+ 'dpm2',
+ 'dpm2_a',
+ 'lms',
+] as const;
+
+export interface ModifierPreview {
+ name: string;
+ path: string;
+}
+
+export interface ModifierObject {
+ category?: string;
+ modifier: string;
+ previews: ModifierPreview[];
+}
+
+interface ModifiersList {
+ category: string;
+ modifiers: ModifierObject[];
+}
+
+type ModifiersOptionList = ModifiersList[];
+
+export interface promptTag {
+ id: string;
+ name: string;
+ type: 'positive' | 'negative';
+}
+
+interface ImageCreateState {
+ parallelCount: number;
+ requestOptions: ImageRequest;
+ allModifiers: ModifiersOptionList;
+
+ createTags: promptTag[];
+ // negativeTags: promptTag[];
+
+ tagMap: Record