oobabooga/text-generation-webui
1
0
Fork 0
mirror of https://github.com/oobabooga/text-generation-webui.git synced 2026-02-05 15:24:18 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Progress bar style improvements

Browse source
This commit is contained in:
oobabooga 2025-12-04 06:17:40 -08:00
parent a838223d18
commit 7fb9f19bd8
2 changed files with 44 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
css/main.css
View file

@ -1752,3 +1752,42 @@ button#swap-height-width {
.min.svelte-1yrv54 {
min-height: 0;
}
/* Image Generation Progress Bar */
#image-progress .image-ai-separator {
height: 24px;
margin: 20px 0;
border-top: 1px solid var(--input-border-color);
}
#image-progress .image-ai-progress-wrapper {
height: 24px;
margin: 20px 0;
}
#image-progress .image-ai-progress-track {
background: #e5e7eb;
border-radius: 4px;
overflow: hidden;
height: 8px;
}
.dark #image-progress .image-ai-progress-track {
background: #333;
}
#image-progress .image-ai-progress-fill {
background: #4a9eff;
height: 100%;
}
#image-progress .image-ai-progress-text {
text-align: center;
font-size: 12px;
color: #666;
margin-top: 4px;
}
.dark #image-progress .image-ai-progress-text {
color: #888;
}

10
modules/ui_image_generation.py
View file

@ -667,13 +667,13 @@ def create_event_handlers():
def progress_bar_html(progress=0, text=""):
"""Generate HTML for progress bar. Empty div when progress <= 0."""
if progress <= 0:
return '<div style="height: 24px; margin: 20px 0; border-top: 1px solid #444;"></div>'
return '<div class="image-ai-separator"></div>'
return f'''<div style="height: 24px; margin: 20px 0;">
<div style="background: #333; border-radius: 4px; overflow: hidden; height: 8px;">
<div style="background: #4a9eff; height: 100%; width: {progress*100:.1f}%;"></div>
return f'''<div class="image-ai-progress-wrapper">
<div class="image-ai-progress-track">
<div class="image-ai-progress-fill" style="width: {progress*100:.1f}%;"></div>
</div>
<div style="text-align: center; font-size: 11px; color: #888; margin-top: 4px;">{text}</div>
<div class="image-ai-progress-text">{text}</div>
</div>'''