diff --git a/ui/frontend/build_src/src/api/index.ts b/ui/frontend/build_src/src/api/index.ts index a8c10a1b..2fba8a5f 100644 --- a/ui/frontend/build_src/src/api/index.ts +++ b/ui/frontend/build_src/src/api/index.ts @@ -60,6 +60,7 @@ export const toggleBetaConfig = async (branch: string) => { export interface ImageRequest { session_id: string; prompt: string; + negative_prompt: string; seed: number; num_outputs: number; num_inference_steps: number; diff --git a/ui/frontend/build_src/src/components/_recipes/button.css.ts b/ui/frontend/build_src/src/components/_recipes/button.css.ts index db8d81ca..d801ee14 100644 --- a/ui/frontend/build_src/src/components/_recipes/button.css.ts +++ b/ui/frontend/build_src/src/components/_recipes/button.css.ts @@ -47,9 +47,9 @@ export const buttonStyle = recipe({ }, accent: { // @ts-expect-error - '--button-hue': vars.backgroundAccentMain, - '--button-base-saturation': vars.colorMod.saturation.normal, - '--button-base-lightness': vars.colorMod.lightness.normal, + '--button-hue': vars.backgroundAccentHue, + '--button-base-saturation': vars.backgroundAccentSaturation, + '--button-base-lightness': vars.backgroundAccentLightness, }, clear: { backgroundColor: "transparent", @@ -58,8 +58,8 @@ export const buttonStyle = recipe({ type: { fill: { - backgroundColor: `hsl(var(--button-hue),${vars.colorMod.saturation.normal},${vars.colorMod.lightness.normal})`, - border: `1px solid hsl(var(--button-hue),${vars.colorMod.saturation.normal},${vars.colorMod.lightness.normal})`, + backgroundColor: `hsl(var(--button-hue),var(--button-base-saturation),${vars.colorMod.lightness.normal})`, + border: `1px solid hsl(var(--button-hue),var(--button-base-saturation),${vars.colorMod.lightness.normal})`, ":hover": { backgroundColor: `hsl(var(--button-hue),${vars.colorMod.saturation.bright},${vars.colorMod.lightness.normal})`, border: `1px solid hsl(var(--button-hue),${vars.colorMod.saturation.bright},${vars.colorMod.lightness.normal})`, @@ -81,7 +81,7 @@ export const buttonStyle = recipe({ }, outline: { backgroundColor: "transparent", - border: `1px solid hsl(var(--button-hue),${vars.colorMod.saturation.normal},${vars.colorMod.lightness.normal})`, + border: `1px solid hsl(var(--button-hue),var(--button-base-saturation),${vars.colorMod.lightness.normal})`, ":hover": { borderColor: `hsl(var(--button-hue),${vars.colorMod.saturation.bright},${vars.colorMod.lightness.normal})`, }, @@ -100,7 +100,7 @@ export const buttonStyle = recipe({ }, action: { backgroundColor: "transparent", - color: `hsl(var(--button-hue),${vars.colorMod.saturation.normal},${vars.colorMod.lightness.normal})`, + color: `hsl(var(--button-hue),var(--button-base-saturation),${vars.colorMod.lightness.normal})`, textDecoration: "underline", ":hover": { color: `hsl(var(--button-hue),${vars.colorMod.saturation.bright},${vars.colorMod.lightness.normal})`, @@ -121,6 +121,10 @@ export const buttonStyle = recipe({ }, size: { + slim: { + padding: vars.spacing.min, + fontSize: vars.fonts.sizes.Caption, + }, large: { width: "100%", fontSize: vars.fonts.sizes.Headline, diff --git a/ui/frontend/build_src/src/components/_recipes/card.css.ts b/ui/frontend/build_src/src/components/_recipes/card.css.ts index 39b83245..efec2fa1 100644 --- a/ui/frontend/build_src/src/components/_recipes/card.css.ts +++ b/ui/frontend/build_src/src/components/_recipes/card.css.ts @@ -20,6 +20,7 @@ export const card = recipe({ background: vars.backgroundDark, }, }, + rounded: { true: { borderRadius: vars.trim.smallBorderRadius, diff --git a/ui/frontend/build_src/src/components/molecules/makeButton/index.tsx b/ui/frontend/build_src/src/components/molecules/makeButton/index.tsx index 37973fa1..708f4686 100644 --- a/ui/frontend/build_src/src/components/molecules/makeButton/index.tsx +++ b/ui/frontend/build_src/src/components/molecules/makeButton/index.tsx @@ -250,7 +250,6 @@ export default function MakeButton() { return; } - debugger; makeImages(options).catch((e) => { console.log('HAS QUEUE ERROR'); console.log(e); diff --git a/ui/frontend/build_src/src/components/molecules/modifierTag/index.tsx b/ui/frontend/build_src/src/components/molecules/modifierTag/index.tsx index c073bc40..cd4330f1 100644 --- a/ui/frontend/build_src/src/components/molecules/modifierTag/index.tsx +++ b/ui/frontend/build_src/src/components/molecules/modifierTag/index.tsx @@ -1,4 +1,5 @@ -import React from "react"; +import React, { useState } from "react"; +import { v4 as uuidv4 } from "uuid"; import { ModifierPreview, useImageCreate @@ -6,9 +7,16 @@ import { import { API_URL } from "../../../api"; +import { + IconFont, +} from "../../../styles/shared.css"; + import { ModifierTagMain, - tagPreview + ModifierActions, + tagPreview, + TagText, + TagToggle, } from "./modifierTags.css"; interface ModifierTagProps { @@ -21,6 +29,25 @@ export default function ModifierTag({ name, category, previews }: ModifierTagPro const previewType: 'portrait' | 'landscape' = "portrait"; + const [showActions, setShowActions] = useState(false); + + const handleHover = () => { + setShowActions(true); + }; + + const handleLeave = () => { + setShowActions(false); + }; + + const addCreateTag = useImageCreate((state) => state.addCreateTag); + const setPositivePrompt = () => { + addCreateTag({ id: uuidv4(), name, type: 'positive' }); + } + const setNegativePrompt = () => { + addCreateTag({ id: uuidv4(), name, type: 'negative' }); + } + + const hasTag = useImageCreate((state) => state.hasTag(category, name)) ? "selected" : ""; @@ -30,10 +57,23 @@ export default function ModifierTag({ name, category, previews }: ModifierTagPro toggleTag(category, name); }; + // , hasTag].join(" ") return ( -
-

{name}

-
+
+

{name}

+ {showActions && ( +
+ + +
+ )} + {/*
{previews.map((preview) => { if (preview.name !== previewType) { return null; @@ -47,7 +87,7 @@ export default function ModifierTag({ name, category, previews }: ModifierTagPro /> ); })} -
+
*/}
); } 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 index e446dc38..3ceb5c1f 100644 --- a/ui/frontend/build_src/src/components/molecules/modifierTag/modifierTags.css.ts +++ b/ui/frontend/build_src/src/components/molecules/modifierTag/modifierTags.css.ts @@ -1,22 +1,20 @@ import { style, globalStyle } from "@vanilla-extract/css"; +import { vars } from '../../../styles/theme/index.css'; -// .modifierTag.selected { -// background-color: rgb(131, 11, 121); -// } +import { card } from '../../_recipes/card.css'; - -export const ModifierTagMain = style({ - display: "inline-block", - padding: "6px", - backgroundColor: "rgb(38, 77, 141)", - color: "#fff", - borderRadius: "5px", - margin: "5px", -}); - -// export const ModifierTagSelected = style({ -// backgroundColor: "rgb(131, 11, 121)", -// }); +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)", @@ -29,6 +27,34 @@ globalStyle(`${ModifierTagMain} p`, { }); +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', 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}

+ {showToggle && } + {showToggle && } +
+ ); +}; \ 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/organisms/creationPanel/advancedSettings/advancedsettings.css.ts b/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/advancedsettings.css.ts index 7b30a0d0..2bc200fa 100644 --- 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 @@ -8,5 +8,5 @@ export const AdvancedSettingsList = style({ }); export const AdvancedSettingGrouping = style({ - marginTop: vars.spacing.medium, + 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 index 4a3a037d..ed423aa8 100644 --- 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 @@ -66,7 +66,7 @@ export default function ImprovementSettings() { })} onClick={toggleImprovementOpen} > -

Improvement Settings

+ Improvement Settings {improvementOpen && ( <> 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 index 0b50ca5e..6d824384 100644 --- 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 @@ -79,7 +79,7 @@ export default function PropertySettings() { type: 'action', color: 'accent', })} onClick={togglePropertyOpen}> -

Property Settings

+ Property Settings {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 index 237412fb..ac08418e 100644 --- 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 @@ -36,7 +36,7 @@ export default function WorkflowSettings() { type: 'action', color: 'accent', })} onClick={toggleWorkflowOpen}> -

Workflow Settings

+ Workflow Settings {workflowOpen && ( <> diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/activeTags/index.tsx b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/activeTags/index.tsx deleted file mode 100644 index 6789c4fd..00000000 --- a/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/activeTags/index.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import React from "react"; - -import { useImageCreate } from "../../../../../stores/imageCreateStore"; -import ModifierTag from "../../../../molecules/modifierTag"; - -export default function ActiveTags() { - const selectedtags = useImageCreate((state) => state.selectedTags()); - - return ( -
-

Active Tags

- -
- ); -} 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 index 388a0d16..10b402b1 100644 --- 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 @@ -13,20 +13,8 @@ export const CreationBasicMain = style([ }] ); -globalStyle(`${CreationBasicMain} > *`, { - marginBottom: "10px", -}); - export const PromptDisplay = style({}); -globalStyle(`${PromptDisplay} > p`, { - fontSize: "1.5em", - fontWeight: "bold", - marginBottom: "10px", -}); - -globalStyle(`${PromptDisplay} > textarea`, { - width: "100%", - resize: "vertical", - height: "100px", +globalStyle(`${CreationBasicMain} > *`, { + marginBottom: '10px' }); diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/creationActions/creationActions.css.ts b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/creationActions/creationActions.css.ts deleted file mode 100644 index 9a6eb85a..00000000 --- a/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/creationActions/creationActions.css.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { style, globalStyle } from "@vanilla-extract/css"; -import { vars } from "../../../../../styles/theme/index.css"; - -export const CreationActionMain = style({ - display: "flex", - flexDirection: "column", - width: "100%", - marginTop: vars.spacing.medium, -}); - -globalStyle(`${CreationActionMain} button`, { - marginBottom: vars.spacing.medium, -}); \ No newline at end of file diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/creationActions/index.tsx b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/creationActions/index.tsx deleted file mode 100644 index 33c92993..00000000 --- a/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/creationActions/index.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from "react"; - -import MakeButton from "../../../../molecules/makeButton"; - -import ShowQueue from "../showQueue"; - -import { - CreationActionMain -} from "./creationActions.css"; - -export default function CreationActions() { - return ( -
- - {/* */} -
- ); -} \ No newline at end of file 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 index 63a154ac..b1aa67c9 100644 --- a/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/index.tsx +++ b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/index.tsx @@ -6,13 +6,12 @@ import { PromptDisplay, } from "./basicCreation.css"; -// import MakeButton from "./makeButton"; -// import StopButton from "./stopButton"; -// import ClearQueue from "./clearQueue"; -import CreationActions from "./creationActions"; -import SeedImage from "./seedImage"; -import ActiveTags from "./activeTags"; +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"; @@ -30,15 +29,9 @@ export default function BasicCreation() { return (
-
-

{t("home.editor-title")}

- -
- - - + + -
); } 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 ( + +
+ Type + + + {positive + ? + : } + + +
+
+ ); +} + +export default function PromptCreator() { + + const [positive, setPositive] = useState(true) + const [tagText, setTagText] = useState('An astronaut riding a horse'); + + const addCreateTag = useImageCreate((state) => state.addCreateTag); + + const { t } = useTranslation(); + + const checkForEnter = (event: KeyboardEventHandler) => { + // @ts-expect-error + if (event.key === "Enter") { + if (tagText !== '') { + const type = positive ? "positive" : "negative"; + + tagText.split(',').map((tag) => tag.trim()).forEach((tag) => { + addCreateTag({ id: uuidv4(), name: tag, type }); + }); + //debugger; + + setTagText(''); + } + } + }; + + return ( +
+
+

{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/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 index 01bf2ea9..7ceb78f5 100644 --- 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 @@ -1,11 +1,14 @@ import React, { useRef, ChangeEvent } from "react"; + + +import { XButton } from "../../../../../styles/shared.css"; + import { ImageInputDisplay, InputLabel, ImageInput, ImageFixer, - XButton, } from "./seedImage.css"; import { 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 index d3364c94..8a5f4a99 100644 --- 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 @@ -21,21 +21,3 @@ export const ImageInput = style({ export const ImageFixer = style({ marginLeft: "20px", }); - -// just a 1 off component for now -// dont bother bringing in line with the rest of the app -export const XButton = style({ - position: "absolute", - transform: "translateX(-50%) translateY(-35%)", - background: "black", - color: "white", - border: "2pt solid #ccc", - padding: "0", - cursor: "pointer", - outline: "inherit", - borderRadius: "8pt", - width: "16pt", - height: "16pt", - fontFamily: "Verdana", - fontSize: "8pt", -}); diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/imageModifiers/imageModifiers.css.ts b/ui/frontend/build_src/src/components/organisms/creationPanel/imageModifiers/imageModifiers.css.ts index d6d3a1cd..61056131 100644 --- a/ui/frontend/build_src/src/components/organisms/creationPanel/imageModifiers/imageModifiers.css.ts +++ b/ui/frontend/build_src/src/components/organisms/creationPanel/imageModifiers/imageModifiers.css.ts @@ -15,12 +15,17 @@ export const ImageModifierGrouping = style({ marginTop: vars.spacing.medium, }); +globalStyle(`${ImageModifierGrouping} h4`, { + fontSize: vars.fonts.sizes.Plain, +}); + export const ModifierListStyle = style({ paddingLeft: 0, listStyleType: "none", display: "flex", flexWrap: "wrap", + gap: vars.spacing.small, }); globalStyle(`${ModifierListStyle} li`, { 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 index 9dc32ff2..48cfe2ae 100644 --- a/ui/frontend/build_src/src/components/organisms/currentDisplay/imageDisplay/index.tsx +++ b/ui/frontend/build_src/src/components/organisms/currentDisplay/imageDisplay/index.tsx @@ -22,6 +22,7 @@ export default function ImageDisplay({ info, data }: CompletedImagesType) { const createFileName = () => { const { prompt, + negative_prompt, seed, num_inference_steps, guidance_scale, @@ -74,6 +75,7 @@ export default function ImageDisplay({ info, data }: CompletedImagesType) {

{info?.prompt}

+

{info?.negative_prompt}