Added UI components

This commit is contained in:
ManInDark 2023-08-06 18:56:07 +02:00
parent 265a45fcd7
commit 44082b83fc
No known key found for this signature in database
GPG Key ID: 72EC12A5B2D62779
2 changed files with 39 additions and 1 deletions

View File

@ -104,10 +104,11 @@ def init():
def get_all_images(db: Session = Depends(get_db)):
from easydiffusion.easydb.mappings import Image
images = db.query(Image).all()
sum_string = ""
sum_string = "<div id='imagecontainer'>"
for img in images:
options = f"Path: {img.path}\nPrompt: {img.prompt}\nNegative Prompt: {img.negative_prompt}\nSeed: {img.seed}\nModel: {img.use_stable_diffusion_model}\nSize: {img.height}x{img.width}\nSampler: {img.sampler_name}\nSteps: {img.num_inference_steps}\nGuidance Scale: {img.guidance_scale}\nLoRA: {img.lora}\nUpscaling: {img.use_upscale}\nFace Correction: {img.use_face_correction}\n"
sum_string += f"<img src='/image/{img.path}' title='{options}'>"
sum_string += "</div>"
return Response(content=sum_string, media_type="text/html")

View File

@ -49,6 +49,9 @@
<span id="tab-about" class="tab">
<span><i class="fa fa-comments icon"></i> Help & Community</span>
</span>
<span id="tab-gallery" class="tab">
<span><i class="fa fa-comments"> Gallery</i></span>
</span>
</div>
</div>
@ -455,6 +458,40 @@
</div>
</div>
</div>
<div id="tab-content-gallery" class="tab-content">
<script>
tab = document.getElementById("tab-content-gallery")
new MutationObserver(function() { // to update all the images, just call this function
console.log("clicked")
container = document.getElementById("imagecontainer")
container.remove()
fetch('/all_images')
.then(response => response.text())
.then(text => new DOMParser().parseFromString(text, 'text/html'))
.then(html_like => html_like.getElementsByTagName('div')[0])
.then(div => tab.appendChild(div))
}).observe(tab, {attributes: true})
</script>
<style>
#imagecontainer {
display: flex;
justify-content: space-around;
flex-flow: row wrap;
align-items: center;
}
#imagecontainer>img {
width: 30vw;
min-width: 256px;
max-width: 1024px;
height: auto;
margin-block: 1vh;
border: 4px white solid;
}
</style>
<div id="imagecontainer"></div>
</div>
</div>
<div class="popup" id="splash-screen" data-version="1">