diff --git a/static/dream_web/index.css b/static/dream_web/index.css index 072c00d53a..f7a0f20214 100644 --- a/static/dream_web/index.css +++ b/static/dream_web/index.css @@ -1,11 +1,14 @@ * { font-family: 'Arial'; + font-size: 100%; } -#header { - text-decoration: dotted underline; +body { + font-size: 1em; } -#search { - margin-top: 20vh; +textarea { + font-size: 0.95em; +} +header, form, #progress-section { margin-left: auto; margin-right: auto; max-width: 1024px; @@ -13,46 +16,78 @@ } fieldset { border: none; + line-height: 2.2em; +} +select, input { + margin-right: 10px; + padding: 2px; +} +input[type=submit] { + background-color: #666; + color: white; +} +input[type=checkbox] { + margin-right: 0px; + width: 20px; + height: 20px; + vertical-align: middle; +} +input#seed { + margin-right: 0px; } div { padding: 10px 10px 10px 10px; } -#fieldset-search { +header { + margin-bottom: 16px; +} +header h1 { + margin-bottom: 0; + font-size: 2em; +} +#search-box { display: flex; } -#scaling-inprocess-message{ +#scaling-inprocess-message { font-weight: bold; font-style: italic; display: none; } #prompt { flex-grow: 1; - - border-radius: 20px 0px 0px 20px; padding: 5px 10px 5px 10px; - border: 1px solid black; - border-right: none; + border: 1px solid #999; outline: none; } #submit { - border-radius: 0px 20px 20px 0px; padding: 5px 10px 5px 10px; - border: 1px solid black; + border: 1px solid #999; } #reset-all { + margin-top: 12px; + font-size: 0.8em; background-color: pink; + border: 1px solid #999; + border-radius: 4px; } #results { text-align: center; -// max-width: 1024px; margin: auto; padding-top: 10px; } -#results img { +#results figure { + display: inline-block; + margin: 10px; +} +#results figcaption { + font-size: 0.8em; + padding: 3px; + color: #888; cursor: pointer; +} +#results img { height: 30vh; border-radius: 5px; - margin: 10px; } #fieldset-config { line-height:2em; @@ -63,8 +98,15 @@ input[type="number"] { #seed { width: 150px; } -hr { -// width: 200px; +button#reset-seed { + font-size: 1.7em; + background: #efefef; + border: 1px solid #999; + border-radius: 4px; + line-height: 0.8; + margin: 0 10px 0 0; + padding: 0 5px 3px; + vertical-align: middle; } label { white-space: nowrap; @@ -92,6 +134,4 @@ label { #progress-section { background-color: #F5F5F5; } -#about { - background-color: #DCDCDC; -} + diff --git a/static/dream_web/index.html b/static/dream_web/index.html index bf57afae3f..3c83ba9409 100644 --- a/static/dream_web/index.html +++ b/static/dream_web/index.html @@ -10,73 +10,79 @@ - -
+ +
@@ -87,25 +93,33 @@ -
-
For news and support for this web service, visit our GitHub site

-
- - ✖ -
- -
- Postprocessing...1/3 +
+
+ + ✖ +
+ +
+ Postprocessing...1/3 +
+
+
+ +
+
+

No results...
-
-
-
-

No results...

 -
-
+ +
+ + 419380511 | A full portrait of a beautiful post apocalyptic winged siren, intricate, elegant, highly detailed, digital painting, artstation, concept art, smooth, sharp focus, illustration, art by Krenz Cushart and Artem Demura and alphonse mucha + +
419380511
+
+ diff --git a/static/dream_web/index.js b/static/dream_web/index.js index cbd66366f4..001454d9e5 100644 --- a/static/dream_web/index.js +++ b/static/dream_web/index.js @@ -8,15 +8,21 @@ function toBase64(file) { } function appendOutput(src, seed, config) { - let outputNode = document.createElement("img"); - outputNode.src = src; - + let outputNode = document.createElement("figure"); let altText = seed.toString() + " | " + config.prompt; - outputNode.alt = altText; - outputNode.title = altText; + + const figureContents = ` + + ${altText} + +
${seed}
+ `; + + outputNode.innerHTML = figureContents; + let figcaption = outputNode.querySelector('figcaption') // Reload image config - outputNode.addEventListener('click', () => { + figcaption.addEventListener('click', () => { let form = document.querySelector("#generate-form"); for (const [k, v] of new FormData(form)) { form.querySelector(`*[name=${k}]`).value = config[k];