diff --git a/ui/media/css/main.css b/ui/media/css/main.css
index 49b145b5..95b8d5c5 100644
--- a/ui/media/css/main.css
+++ b/ui/media/css/main.css
@@ -155,11 +155,11 @@ code {
.imgContainer:hover > .img_bottom_label {
opacity: 60%;
}
-.imgItemInfo * {
+.imgItemInfo > * {
margin-bottom: 7px;
}
.imgItemInfo .tasksBtns {
- margin-left: 1em;
+ margin-left: 5pt;
}
.imgItem .image_clear_btn {
transform: translate(40%, -50%);
diff --git a/ui/media/js/main.js b/ui/media/js/main.js
index fdbeae6f..8f1ecea3 100644
--- a/ui/media/js/main.js
+++ b/ui/media/js/main.js
@@ -342,12 +342,16 @@ function showImages(reqBody, res, outputContainer, livePreview) {
let buttons = [
{ text: 'Use as Input', on_click: onUseAsInputClick },
- { text: 'Download', on_click: onDownloadImageClick, class: "download-img" },
- { text: 'Download JSON', on_click: onDownloadJSONClick, class: "download-json" },
+ [
+ { html: ' Download Image', on_click: onDownloadImageClick, class: "download-img" },
+ { html: ' JSON', on_click: onDownloadJSONClick, class: "download-json" }
+ ],
{ text: 'Make Similar Images', on_click: onMakeSimilarClick },
{ text: 'Draw another 25 steps', on_click: onContinueDrawingClick },
- { text: 'Upscale', on_click: onUpscaleClick, filter: (req, img) => !req.use_upscale },
- { text: 'Fix Faces', on_click: onFixFacesClick, filter: (req, img) => !req.use_face_correction }
+ [
+ { text: 'Upscale', on_click: onUpscaleClick, filter: (req, img) => !req.use_upscale },
+ { text: 'Fix Faces', on_click: onFixFacesClick, filter: (req, img) => !req.use_face_correction }
+ ]
]
// include the plugins