holm/easydiffusion
1
0
Fork 0
forked from extern/easydiffusion
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #11 from caranicas/beta-react-style-cleanup

Browse Source 
working display panel
This commit is contained in:
caranicas 2022-09-14 19:03:48 -04:00 committed by GitHub
commit 6afd4b0dc7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 123 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ui/frontend/build_src/src/components/creationPanel/advancedSettings/advancedSettings.css
View File

@ -1,7 +1,3 @@
input[size="4"] {
width: 4.5rem;
}
#File-Body>#File-For {
display: none;
}

7
ui/frontend/build_src/src/components/creationPanel/creationPanel.css
View File

@ -1,3 +1,6 @@
.create-layout {
padding: 10px;
}
.panel-box-toggle-btn {
display: block;
width: 100%;
@ -49,5 +52,5 @@ li {
input[type="file"] {
/* Dont show the file name */
color:transparent;
}
color: transparent;
}

1
ui/frontend/build_src/src/components/creationPanel/index.tsx
View File

@ -32,7 +32,6 @@ export default function CreationPanel() {
const reader = new FileReader();
reader.onload = (e) => {
if (e.target) {
debugger;
setRequestOption("init_image", e.target.result);
}
};

9
ui/frontend/build_src/src/components/creationPanel/makeButton/index.tsx
View File

@ -10,6 +10,8 @@ export default function MakeButton() {
const parallelCount = useImageCreate((state) => state.parallelCount);
const builtRequest = useImageCreate((state) => state.builtRequest);
const addNewImage = useImageQueue((state) => state.addNewImage);
const isRandomSeed = useImageCreate((state) => state.isRandomSeed());
const setRequestOption = useImageCreate((state) => state.setRequestOptions);
const makeImages = () => {
// the request that we have built
@ -57,6 +59,13 @@ export default function MakeButton() {
seed: seed,
});
});
// potentially update the seed
if (isRandomSeed) {
// update the seed for the next time we click the button
setRequestOption("seed", useRandomSeed());
}
};
return <button onClick={makeImages}>Make</button>;

22
ui/frontend/build_src/src/components/displayPanel/displayPanel.css
View File

@ -0,0 +1,22 @@
.display-panel {
padding: 10px;
}
#display-container {
display: flex;
flex-direction: row;
height: 100%;
width: 100%;
overflow: hidden;
}
#previous-images {
margin-left: 30px;
display: flex;
flex: auto;
flex-wrap: wrap;
}
.previous-image {
margin: 0 10px;
}

19
ui/frontend/build_src/src/components/displayPanel/generatedImage/generatedImage.css
View File

@ -0,0 +1,19 @@
.generated-image {
position: relative;
}
.image-contain {
position: relative;
}
#save-button {
position: absolute;
top: 10px;
left: 10px;
}
#use-button {
position: absolute;
top: 10px;
right: 10px;
}

40
ui/frontend/build_src/src/components/displayPanel/generatedImage/index.tsx
View File

@ -2,14 +2,18 @@ import React, { useCallback } from "react";
import { ImageRequest, useImageCreate } from "../../../store/imageCreateStore";
import "./generatedImage.css";
type GeneretaedImageProps = {
imageData: string;
metadata: ImageRequest;
className?: string;
};
export default function GeneratedImage({
imageData,
metadata,
className,
}: GeneretaedImageProps) {
const setRequestOption = useImageCreate((state) => state.setRequestOptions);
@ -58,33 +62,23 @@ export default function GeneratedImage({
};
const _handleUseAsInput = () => {
debugger;
setRequestOption("init_image", imageData);
// initImageSelector.value = null
// initImagePreview.src = imgBody
// imgUseBtn.addEventListener('click', function() {
// initImageSelector.value = null
// initImagePreview.src = imgBody
// initImagePreviewContainer.style.display = 'block'
// promptStrengthContainer.style.display = 'block'
// // maskSetting.style.display = 'block'
// randomSeedField.checked = false
// seedField.value = seed
// seedField.disabled = false
// })
};
// className={[statusClass, className].join(" ")}
return (
<div className="generated-image">
<p>Your image</p>
<img src={imageData} alt="generated" />
<button onClick={_handleSave}>Save</button>
<button onClick={_handleUseAsInput}>Use as Input</button>
<div className={["generated-image", className].join(" ")}>
<p>{metadata.prompt}</p>
<div className="image-contain">
<img src={imageData} alt="generated" />
<button id="save-button" onClick={_handleSave}>
Save
</button>
<button id="use-button" onClick={_handleUseAsInput}>
Use as Input
</button>
</div>
</div>
);
}

58
ui/frontend/build_src/src/components/displayPanel/index.tsx
View File

@ -11,6 +11,8 @@ import AudioDing from "./audioDing";
import GeneratedImage from "./generatedImage";
import './displayPanel.css';
type CompletedImagesType = {
id: string;
data: string;
@ -89,26 +91,42 @@ export default function DisplayPanel() {
return (
<div className="display-panel">
<h1>Display Panel</h1>
<div>
<AudioDing ref={dingRef}></AudioDing>
{completedImages.map((image, index) => {
// if(index == 0){
// return null;
// }
if (void 0 !== image) {
return (
<GeneratedImage
key={image.id}
imageData={image.data}
metadata={image.info}
/>
);
} else {
console.warn("image is undefined", image, index);
return null;
}
})}
</div>
<AudioDing ref={dingRef}></AudioDing>
{completedImages.length > 0 && (
<div id="display-container">
<GeneratedImage
key={completedImages[0].id}
imageData={completedImages[0].data}
metadata={completedImages[0].info}
/>
<div id="previous-images">
{completedImages.map((image, index) => {
if (void 0 !== image) {
debugger;
if(index == 0){
return null;
}
return (
<GeneratedImage
className="previous-image"
key={image.id}
imageData={image.data}
metadata={image.info}
/>
);
} else {
console.warn("image is undefined", image, index);
return null;
}
})}
</div>
</div>
)}
</div>
);
}

5
ui/frontend/build_src/src/index.css
View File

@ -10,9 +10,4 @@ body {
left: 0;
width: 100vw;
height: 100vh;
/* pointer-events: none; */
/* this are used while we still have the original app code in the index.html */
/* display: none; */
z-index: 1;
}

2
ui/frontend/dist/index.css vendored
View File

@ -1 +1 @@
.App{position:relative;width:100%;height:100%;pointer-events:auto;display:grid;background-color:#202124;grid-template-columns:360px 1fr;grid-template-rows:100px 1fr 300px;grid-template-areas:"header header header" "create display display" "footer footer footer"}@media screen and (max-width: 768px){.App{grid-template-columns:1fr;grid-template-rows:100px 1fr 1fr 300px;grid-template-areas:"header" "create" "display" "footer"}}.header-layout{grid-area:header}.create-layout{grid-area:create}.display-layout{grid-area:display}.footer-layout{grid-area:footer}.visually-hidden,.visually-hidden-focusable:not(:focus):not(:focus-within){position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.mb-4{margin-bottom:1rem}.starting{color:#f0ad4e}.error{color:#d9534f}.success{color:#5cb85c}.header-display{color:#fff;display:flex;align-items:center;justify-content:center}.status-display{margin-left:10px}input[size="4"]{width:4.5rem}.panel-box-toggle-btn{display:block;width:100%;text-align:left;background-color:transparent;color:#fff;border:0 none;cursor:pointer}.selected-tags{margin:10px 0}.selected-tags ul{margin:0;padding:0;display:flex;flex-wrap:wrap}li{list-style:none}.modifier-list{display:flex;flex-wrap:wrap;margin:0;padding:0}.modifierTag{display:inline-block;padding:6px;background-color:#264d8d;color:#fff;border-radius:5px;margin:5px}.modifierTag.selected{background-color:#830b79}.modifierTag p{margin:0}.footer-display{color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center}body{margin:0;min-width:320px;min-height:100vh}#root{position:absolute;top:0;left:0;width:100vw;height:100vh;z-index:1}
.App{position:relative;width:100%;height:100%;pointer-events:auto;display:grid;background-color:#202124;grid-template-columns:360px 1fr;grid-template-rows:100px 1fr 300px;grid-template-areas:"header header header" "create display display" "footer footer footer"}@media screen and (max-width: 768px){.App{grid-template-columns:1fr;grid-template-rows:100px 1fr 1fr 300px;grid-template-areas:"header" "create" "display" "footer"}}.header-layout{grid-area:header}.create-layout{grid-area:create}.display-layout{grid-area:display}.footer-layout{grid-area:footer}.visually-hidden,.visually-hidden-focusable:not(:focus):not(:focus-within){position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.mb-4{margin-bottom:1rem}.starting{color:#f0ad4e}.error{color:#d9534f}.success{color:#5cb85c}.header-display{color:#fff;display:flex;align-items:center;justify-content:center}.status-display{margin-left:10px}input[size="4"]{width:4.5rem}#File-Body>#File-For{display:none}.create-layout{padding:10px}.panel-box-toggle-btn{display:block;width:100%;text-align:left;background-color:transparent;color:#fff;border:0 none;cursor:pointer}.selected-tags{margin:10px 0}.selected-tags ul{margin:0;padding:0;display:flex;flex-wrap:wrap}li{list-style:none}.modifier-list{display:flex;flex-wrap:wrap;margin:0;padding:0}.modifierTag{display:inline-block;padding:6px;background-color:#264d8d;color:#fff;border-radius:5px;margin:5px}.modifierTag.selected{background-color:#830b79}.modifierTag p{margin:0}input[type=file]{color:transparent}.generated-image,.image-contain{position:relative}#save-button{position:absolute;top:10px;left:10px}#use-button{position:absolute;top:10px;right:10px}.display-panel{padding:10px}#display-container{display:flex;flex-direction:row;height:100%;width:100%;overflow:hidden}#previous-images{margin-left:30px;display:flex;flex:auto}.previous-image{margin:0 10px}.footer-display{color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center}body{margin:0;min-width:320px;min-height:100vh}#root{position:absolute;top:0;left:0;width:100vw;height:100vh}

24
ui/frontend/dist/index.js vendored
View File

File diff suppressed because one or more lines are too long