mirror of
https://github.com/easydiffusion/easydiffusion.git
synced 2025-06-20 18:08:00 +02:00
Added UI components
This commit is contained in:
parent
265a45fcd7
commit
44082b83fc
@ -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")
|
||||
|
||||
|
||||
|
@ -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">
|
||||
|
Loading…
x
Reference in New Issue
Block a user