extern/easydiffusion
1
0
Fork 1
mirror of https://github.com/easydiffusion/easydiffusion.git synced 2024-11-23 00:33:28 +01:00
Code Issues Packages Projects Releases Wiki Activity

adding recipe

Browse Source
This commit is contained in:
caranicas 2022-09-17 20:26:24 -04:00
parent 1ab90e76d1
commit 85292ca1b4
17 changed files with 233 additions and 197 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
ui/frontend/build_src/index.html
View File

@ -17,20 +17,7 @@
<!-- THE STYLES ARE BEING USED IN THE REACT APP -->
<!-- WE NEED TO PORT OVER THE STYLES OVER TO THE REACT COMPONENTS -->
<style>
body {
/* font-family: Arial, Helvetica, sans-serif; */
/* font-family: Arial, Helvetica, sans-serif; */
font-size: 11pt;
/* background-color: rgb(32, 33, 36); */
/* color: #eee; */
} */
a {
color: rgb(0, 102, 204);
}
a:visited {
color: rgb(0, 102, 204);
}
label {
/* label {
font-size: 10pt;
}
#prompt {
@ -72,7 +59,7 @@
}
#guidance_scale {
transform: translateY(30%);
}
} */
#outputMsg {
font-size: small;
}

15
ui/frontend/build_src/package-lock.json generated
View File

@ -12,6 +12,7 @@
"@tanstack/react-query": "^4.2.3",
"@tanstack/react-query-devtools": "^4.2.3",
"@vanilla-extract/css": "^1.9.0",
"@vanilla-extract/recipes": "^0.2.5",
"@vanilla-extract/vite-plugin": "^3.5.0",
"immer": "^9.0.15",
"react": "^18.2.0",
@ -776,6 +777,14 @@
"resolved": "https://registry.npmjs.org/@vanilla-extract/private/-/private-1.0.3.tgz",
"integrity": "sha512-17kVyLq3ePTKOkveHxXuIJZtGYs+cSoev7BlP+Lf4916qfDhk/HBjvlYDe8egrea7LNPHKwSZJK/bzZC+Q6AwQ=="
},
"node_modules/@vanilla-extract/recipes": {
"version": "0.2.5",
"resolved": "https://registry.npmjs.org/@vanilla-extract/recipes/-/recipes-0.2.5.tgz",
"integrity": "sha512-OWXUUiFJdswD3+Xg8f8avuw/vAHZRFS4oHqFeoV1TcO8cfbDQ0zmkreBHvyspoJU+qsyWK48yPHKSptqNRPy9Q==",
"peerDependencies": {
"@vanilla-extract/css": "^1.0.0"
}
},
"node_modules/@vanilla-extract/vite-plugin": {
"version": "3.5.0",
"resolved": "https://registry.npmjs.org/@vanilla-extract/vite-plugin/-/vite-plugin-3.5.0.tgz",
@ -2489,6 +2498,12 @@
"resolved": "https://registry.npmjs.org/@vanilla-extract/private/-/private-1.0.3.tgz",
"integrity": "sha512-17kVyLq3ePTKOkveHxXuIJZtGYs+cSoev7BlP+Lf4916qfDhk/HBjvlYDe8egrea7LNPHKwSZJK/bzZC+Q6AwQ=="
},
"@vanilla-extract/recipes": {
"version": "0.2.5",
"resolved": "https://registry.npmjs.org/@vanilla-extract/recipes/-/recipes-0.2.5.tgz",
"integrity": "sha512-OWXUUiFJdswD3+Xg8f8avuw/vAHZRFS4oHqFeoV1TcO8cfbDQ0zmkreBHvyspoJU+qsyWK48yPHKSptqNRPy9Q==",
"requires": {}
},
"@vanilla-extract/vite-plugin": {
"version": "3.5.0",
"resolved": "https://registry.npmjs.org/@vanilla-extract/vite-plugin/-/vite-plugin-3.5.0.tgz",

1
ui/frontend/build_src/package.json
View File

@ -14,6 +14,7 @@
"@tanstack/react-query": "^4.2.3",
"@tanstack/react-query-devtools": "^4.2.3",
"@vanilla-extract/css": "^1.9.0",
"@vanilla-extract/recipes": "^0.2.5",
"@vanilla-extract/vite-plugin": "^3.5.0",
"immer": "^9.0.15",
"react": "^18.2.0",

3
ui/frontend/build_src/src/App.tsx
View File

@ -9,7 +9,6 @@ import { darkTheme, lightTheme } from "./styles/theme/index.css.ts";
const location = new ReactLocation();
function App() {
// just check for the theme one 1 time
// var { matches } = window.matchMedia('(prefers-color-scheme: dark)')
const matches = true;
@ -20,7 +19,7 @@ function App() {
location={location}
routes={[
{ path: "/", element: <Home className={themeClass} /> },
{ path: "settings", element: <Settings className={themeClass} /> },
{ path: "/settings", element: <Settings className={themeClass} /> },
]}
></Router>
);

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

@ -1,19 +1,17 @@
import { style, globalStyle } from "@vanilla-extract/css";
export const AdvancedSettingsList = style({
// font-size: 9pt;
// margin-bottom: 5px;
// padding-left: 10px;
// list-style-type: none;
// @ts-ignore
import { vars } from "../../../../styles/theme/index.css.ts";
fontSize: "9pt",
marginBottom: "5px",
paddingLeft: "10px",
export const AdvancedSettingsList = style({
fontSize: vars.fonts.sizes.Body,
marginBottom: vars.spacing.small,
paddingLeft: vars.spacing.medium,
listStyleType: "none",
});
export const AdvancedSettingItem = style({
paddingBottom: "5px",
paddingBottom: vars.spacing.small,
});
export const MenuButton = style({
@ -21,11 +19,11 @@ export const MenuButton = style({
width: "100%",
textAlign: "left",
backgroundColor: "transparent",
color: "#fff",
color: vars.colors.text.normal,
border: "0 none",
cursor: "pointer",
padding: "0",
marginBottom: "10px",
marginBottom: vars.spacing.small,
});
globalStyle(`${MenuButton}> h4`, {

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

@ -39,17 +39,14 @@ export default function PropertySettings() {
state.getValueForRequestKey("guidance_scale")
);
const init_image = useImageCreate((state) =>
state.getValueForRequestKey("init_image")
);
const prompt_strength = useImageCreate((state) =>
state.getValueForRequestKey("prompt_strength")
);
const width = useImageCreate((state) => state.getValueForRequestKey("width"));
const height = useImageCreate((state) =>
state.getValueForRequestKey("height")

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

@ -1,15 +1,31 @@
import { style } from "@vanilla-extract/css";
// @ts-ignore
import { vars } from "../../../../../styles/theme/index.css.ts";
export const MakeButtonStyle = style({
width: "100%",
backgroundColor: "rgb(38, 77, 141)",
fontSize: "1.5em",
backgroundColor: vars.colors.brand,
fontSize: vars.fonts.sizes.Headline,
fontWeight: "bold",
color: "white",
padding: "8px",
borderRadius: "5px",
color: vars.colors.text.normal,
padding: vars.spacing.small,
borderRadius: vars.trim.smallBorderRadius,
":hover": {
backgroundColor: vars.colors.brandHover,
},
":active": {
backgroundColor: vars.colors.brandActive,
},
":disabled": {
backgroundColor: "rgb(38, 77, 141, 0.5)",
backgroundColor: vars.colors.brandDimmed,
color: vars.colors.text.dimmed,
},
":focus": {
outline: "none",
},
});

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

@ -1,12 +1,14 @@
import { style } from "@vanilla-extract/css";
// @ts-ignore
import { vars } from "../../../../../styles/theme/index.css.ts";
export const ImageInputDisplay = style({
display: "flex",
// justifyContent:'space-around',
});
export const InputLabel = style({
marginBottom: "5px",
marginBottom: vars.spacing.small,
display: "block",
});
@ -15,12 +17,25 @@ export const ImageInput = style({
});
export const ImageInputButton = style({
backgroundColor: "rgb(38, 77, 141)",
fontSize: "1.2em",
backgroundColor: vars.colors.brand,
fontSize: vars.fonts.sizes.Subheadline,
fontWeight: "bold",
color: "white",
padding: "8px",
borderRadius: "5px",
color: vars.colors.text.normal,
padding: vars.spacing.small,
borderRadius: vars.trim.smallBorderRadius,
":hover": {
backgroundColor: vars.colors.brandHover,
},
":active": {
backgroundColor: vars.colors.brandActive,
},
":disabled": {
backgroundColor: vars.colors.brandDimmed,
color: vars.colors.text.dimmed,
},
});
// this is needed to fix an issue with the image input text
@ -29,6 +44,8 @@ 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%)",

11
ui/frontend/build_src/src/components/organisms/displayPanel/displayPanel.css.ts
View File

@ -1,9 +1,10 @@
import { style } from "@vanilla-extract/css";
// @ts-ignore
import { vars } from "../../../styles/theme/index.css.ts";
export const displayPanel = style({
padding: "10px",
// width: '512px',
// height: '512px',
padding: vars.spacing.medium,
});
export const displayContainer = style({
@ -20,12 +21,12 @@ export const CurrentDisplay = style({
});
export const previousImages = style({
marginLeft: "30px",
marginLeft: vars.spacing.large,
display: "flex",
flex: "auto",
flexWrap: "wrap",
});
export const previousImage = style({
margin: "0 10px",
margin: `0 ${vars.spacing.small}`,
});

8
ui/frontend/build_src/src/components/organisms/headerDisplay/headerDisplay.css.ts
View File

@ -1,14 +1,16 @@
import { style, globalStyle } from "@vanilla-extract/css";
//@ts-ignore
import { vars } from "../../../styles/theme/index.css.ts";
export const HeaderDisplayMain = style({
color: "#ffffff",
color: vars.colors.text.normal,
display: "flex",
alignItems: "center",
justifyContent: "center",
});
globalStyle(`${HeaderDisplayMain} > h1`, {
fontSize: "1.5em",
fontSize: vars.fonts.sizes.Title,
fontWeight: "bold",
marginRight: "10px",
marginRight: vars.spacing.medium,
});

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

@ -1,14 +1,16 @@
import { style } from "@vanilla-extract/css";
// TODO MOVE TO GLOBAL CSS
// @ts-ignore
import { vars } from "../../../../styles/theme/index.css.ts";
export const StartingStatus = style({
color: "#f0ad4e",
color: vars.colors.warning,
});
export const ErrorStatus = style({
color: "#d9534f",
color: vars.colors.error,
});
export const SuccessStatus = style({
color: "#5cb85c",
color: vars.colors.success,
});

2
ui/frontend/build_src/src/pages/Home/home.css.ts
View File

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

2
ui/frontend/build_src/src/pages/Settings/index.tsx
View File

@ -1,6 +1,6 @@
import React from "react";
export default function Settings({ className }: { className: string }) {
export default function Settings({ className }: { className: any }) {
return (
<div>
<h1>Settings</h1>

63
ui/frontend/build_src/src/stores/imageCreateStore.ts
View File

@ -17,37 +17,37 @@ export type ImageRequest = {
num_inference_steps: number;
guidance_scale: number;
width:
| 128
| 192
| 256
| 320
| 384
| 448
| 512
| 576
| 640
| 704
| 768
| 832
| 896
| 960
| 1024;
| 128
| 192
| 256
| 320
| 384
| 448
| 512
| 576
| 640
| 704
| 768
| 832
| 896
| 960
| 1024;
height:
| 128
| 192
| 256
| 320
| 384
| 448
| 512
| 576
| 640
| 704
| 768
| 832
| 896
| 960
| 1024;
| 128
| 192
| 256
| 320
| 384
| 448
| 512
| 576
| 640
| 704
| 768
| 832
| 896
| 960
| 1024;
// allow_nsfw: boolean;
turbo: boolean;
use_cpu: boolean;
@ -215,7 +215,6 @@ export const useImageCreate = create<ImageCreateState>(
request.prompt_strength = undefined;
}
return request;
},
@ -224,7 +223,7 @@ export const useImageCreate = create<ImageCreateState>(
produce((state) => {
const isSeting =
typeof state.getValueForRequestKey("use_face_correction") ===
"string"
"string"
? null
: "GFPGANv1.3";
state.requestOptions.use_face_correction = isSeting;

3
ui/frontend/build_src/src/styles/index.css.ts
View File

@ -20,12 +20,11 @@ globalStyle("#root", {
overflow: "hidden",
});
// border box all
// border box all
globalStyle(`*`, {
boxSizing: "border-box",
});
/** RESETS */
globalStyle(`p, h3, h4`, {
margin: 0,

0
ui/frontend/build_src/src/styles/recipes/index.css.ts Normal file
View File

213
ui/frontend/build_src/src/styles/theme/index.css.ts
View File

@ -7,50 +7,49 @@ import {
/**
* Colors are all the same across the themes, this is just to set up a contract
* Colors can be decided later. I am just the architect.
* Tried to pull things from the original app.
*
* Tried to pull things from the original app.
*
* Lots of these arent used yet, but once they are defined and useable then they can be set.
*/
// Link color 0, 102, 204
const colors = createThemeContract({
brand: null,
brandDimmed: null,
brandHover: null,
brandActive: null,
brandAccent: null,
brandAccentDimmed: null,
brandAccentActive: null,
brand: '##5000b9', // purple
brandDimmed: '#5000b9', // purple
brandHover: '5d00d6', // bringhter purple
brandHoverDimmed: '#5d00d6', // bringhter purple
brandActive: '#5d00d6', // bringhter purple
brandActiveDimmed: '#5d00d6', // bringhter purple
brandAccent: '#28004e', // darker purple
brandAccentDimmed: '#28004e', // darker purple
brandAccentActive: '#28004e', // darker purple
secondary: null,
secondaryDimmed: null,
secondaryHover: null,
secondaryActive: null,
secondaryAccent: null,
secondaryAccentDimmed: null,
secondaryAccentActive: null,
secondary: '#0b8334', // green
secondaryDimmed: '#0b8334', // green
secondaryHover: '#0b8334', // green
secondaryHoverDimmed: '#0b8334', // green
secondaryActive: '#0b8334', // green
secondaryActiveDimmed: '#0b8334', // green
secondaryAccent: '#0b8334', // green
secondaryAccentDimmed: '#0b8334', // green
secondaryAccentActive: '#0b8334', // green
background: '#202124', // dark grey
backgroundAccent: ' #383838', // lighter grey
backgroundAlt: '#2c2d30', // med grey
backgroundAltAccent: '#383838', // lighter grey
background: null,
backgroundAccent: null,
backgroundAlt: null,
backgroundAltAccent: null,
text: {
normal: '#ffffff', // white
dimmed: '#d1d5db', // off white
normal: null,
dimmed: null,
secondary: '#e7ba71', // orange
secondaryDimmed: '#7d6641', // muted orange
secondary: null,
secondaryDimmed: null,
accent: null,
accentDimmed: null,
},
warning: "yellow",
error: "red",
success: "green",
warning: null,
error: null,
success: null,
});
const app = createGlobalTheme(":root", {
@ -59,95 +58,99 @@ const app = createGlobalTheme(":root", {
medium: "10px",
large: "25px",
},
trim: {
smallBorderRadius: "5px",
},
fonts: {
body: "Arial, Helvetica, sans-serif;",
sizes: {
Title: "2em",
Headline: "1.5em",
Subheadline: "1.20em",
Body: "1em",
Caption: ".75em",
Overline: ".5em",
},
},
colors: colors,
});
export const lightTheme = createTheme(colors, {
brand: '##5000b9', // purple
brandDimmed: '#5000b9', // purple
brandHover: '5d00d6', // bringhter purple
brandHoverDimmed: '#5d00d6', // bringhter purple
brandActive: '#5d00d6', // bringhter purple
brandActiveDimmed: '#5d00d6', // bringhter purple
brandAccent: '#28004e', // darker purple
brandAccentDimmed: '#28004e', // darker purple
brandAccentActive: '#28004e', // darker purple
secondary: '#0b8334', // green
secondaryDimmed: '#0b8334', // green
secondaryHover: '#0b8334', // green
secondaryHoverDimmed: '#0b8334', // green
secondaryActive: '#0b8334', // green
secondaryActiveDimmed: '#0b8334', // green
secondaryAccent: '#0b8334', // green
secondaryAccentDimmed: '#0b8334', // green
secondaryAccentActive: '#0b8334', // green
background: '#202124', // dark grey
backgroundAccent: ' #383838', // lighter grey
backgroundAlt: '#2c2d30', // med grey
backgroundAltAccent: '#383838', // lighter grey
text: {
normal: '#ffffff', // white
dimmed: '#d1d5db', // off white
secondary: '#e7ba71', // orange
secondaryDimmed: '#7d6641', // muted orange
},
warning: "yellow",
error: "red",
success: "green",
});
export const darkTheme = createTheme(colors, {
brand: '##5000b9', // purple
brandDimmed: '#5000b9', // purple
brandHover: '5d00d6', // bringhter purple
brandHoverDimmed: '#5d00d6', // bringhter purple
brandActive: '#5d00d6', // bringhter purple
brandActiveDimmed: '#5d00d6', // bringhter purple
brandAccent: '#28004e', // darker purple
brandAccentDimmed: '#28004e', // darker purple
brandAccentActive: '#28004e', // darker purple
brand: "#5000b9", // purple
brandDimmed: "#433852", // muted purple
brandHover: "#5d00d6", // bringhter purple
brandActive: "#5d00d6", // bringhter purple
brandAccent: "#28004e", // darker purple
brandAccentDimmed: "#28004e", // darker purple
brandAccentActive: "#28004e", // darker purple
secondary: '#0b8334', // green
secondaryDimmed: '#0b8334', // green
secondaryHover: '#0b8334', // green
secondaryHoverDimmed: '#0b8334', // green
secondaryActive: '#0b8334', // green
secondaryActiveDimmed: '#0b8334', // green
secondaryAccent: '#0b8334', // green
secondaryAccentDimmed: '#0b8334', // green
secondaryAccentActive: '#0b8334', // green
secondary: "#0b8334", // green
secondaryDimmed: "#0b8334", // green
secondaryHover: "#0b8334", // green
secondaryActive: "#0b8334", // green
secondaryAccent: "#0b8334", // green
secondaryAccentDimmed: "#0b8334", // green
secondaryAccentActive: "#0b8334", // green
background: '#202124', // dark grey
backgroundAccent: ' #383838', // lighter grey
backgroundAlt: '#2c2d30', // med grey
backgroundAltAccent: '#383838', // lighter grey
background: "#202124", // dark grey
backgroundAccent: " #383838", // lighter grey
backgroundAlt: "#2c2d30", // med grey
backgroundAltAccent: "#383838", // lighter grey
text: {
normal: '#ffffff', // white
dimmed: '#d1d5db', // off white
normal: "#ffffff", // white
dimmed: "#d1d5db", // off white
secondary: '#e7ba71', // orange
secondaryDimmed: '#7d6641', // muted orange
secondary: "#ffffff", // white
secondaryDimmed: "#d1d5db", // off white
accent: "#e7ba71", // orange
accentDimmed: "#7d6641", // muted orange
},
warning: "#f0ad4e",
error: "#d9534f",
success: "#5cb85c",
});
// Generated by co-pilot
export const lightTheme = createTheme(colors, {
brand: "#1E40AF",
brandDimmed: "#1E40AF",
brandHover: "#1E40AF",
brandActive: "#1E40AF",
brandAccent: "#1E40AF",
brandAccentDimmed: "#1E40AF",
brandAccentActive: "#1E40AF",
secondary: "#DB2777",
secondaryDimmed: "#DB2777",
secondaryHover: "#DB2777",
secondaryActive: "#DB2777",
secondaryAccent: "#DB2777",
secondaryAccentDimmed: "#DB2777",
secondaryAccentActive: "#DB2777",
background: "#EFF6FF",
backgroundAccent: "#EFF6FF",
backgroundAlt: "#EFF6FF",
backgroundAltAccent: "#EFF6FF",
text: {
normal: "#1F2937",
dimmed: "#6B7280",
secondary: "#1F2937",
secondaryDimmed: "#6B7280",
accent: "#1F2937",
accentDimmed: "#6B7280",
},
warning: "yellow",
error: "red",
success: "green",
});
export const vars = { ...app, colors };