Read prompts from a text file; Allow specifying multiple prompts in the textbox by separating them by new lines

ui/index.html

@@ -4,7 +4,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="icon" type="image/png" href="/media/favicon-16x16.png" sizes="16x16">
     <link rel="icon" type="image/png" href="/media/favicon-32x32.png" sizes="32x32">
-    <link rel="stylesheet" href="/media/main.css?v=21">
+    <link rel="stylesheet" href="/media/main.css?v=22">
     <link rel="stylesheet" href="/media/modifier-thumbnails.css?v=1">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
     <link rel="stylesheet" href="/media/drawingboard.min.css">
@@ -15,7 +15,7 @@
 <div id="container">
     <div id="top-nav">
         <div id="logo">
-            <h1>Stable Diffusion UI <small>v2.2 <span id="updateBranchLabel"></span></small></h1>
+            <h1>Stable Diffusion UI <small>v2.21 <span id="updateBranchLabel"></span></small></h1>
         </div>
         <ul id="top-nav-items">
             <li class="dropdown">
@@ -57,10 +57,12 @@
                 <div id="editor-inputs-prompt" class="row">
                     <label for="prompt">Prompt</label>
                     <textarea id="prompt" class="col-free">a photograph of an astronaut riding a horse</textarea>
+                    <small>(or)</small> <button id="promptsFromFileBtn">Load prompts from a file</button> <small>(one prompt per line)</small>
+                    <input id="prompt_from_file" name="prompt_from_file" type="file" /> <!-- hidden -->
                 </div>
 
                 <div id="editor-inputs-init-image" class="row">
-                    <label for="init_image"><b>Initial Image:</b> (optional) </label> <input id="init_image" name="init_image" type="file" /><br/>
+                    <label for="init_image"><b>Initial Image (img2img):</b> (optional) </label> <input id="init_image" name="init_image" type="file" /><br/>
 
                     <div id="init_image_preview_container" class="image_preview_container">
                         <img id="init_image_preview" src="" width="100" height="100" />
@@ -224,7 +226,7 @@
 </div>
 </body>
 
-<script src="media/main.js?v=31"></script>
+<script src="media/main.js?v=32"></script>
 <script>
 async function init() {
     await loadModifiers()

ui/media/main.css

@@ -411,3 +411,6 @@ img {
 .img-batch {
     display: inline;
 }
+#prompt_from_file {
+    display: none;
+}

ui/media/main.js

@@ -18,6 +18,8 @@ const IMAGE_REGEX = new RegExp('data:image/[A-Za-z]+;base64')
 let sessionId = new Date().getTime()
 
 let promptField = document.querySelector('#prompt')
+let promptsFromFileSelector = document.querySelector('#prompt_from_file')
+let promptsFromFileBtn = document.querySelector('#promptsFromFileBtn')
 let negativePromptField = document.querySelector('#negative_prompt')
 let numOutputsTotalField = document.querySelector('#num_outputs_total')
 let numOutputsParallelField = document.querySelector('#num_outputs_parallel')
@@ -588,12 +590,27 @@ async function checkTasks() {
 }
 setTimeout(checkTasks, 0)
 
-async function makeImage() {
+function makeImage() {
     if (serverStatus !== 'online') {
         alert('The server is still starting up..')
         return
     }
 
+    let prompts = promptField.value
+    prompts = prompts.split('\n')
+    prompts.forEach(prompt => {
+        prompt = prompt.trim()
+        if (prompt === '') {
+            return
+        }
+
+        createTask(prompt)
+    })
+
+    initialText.style.display = 'none'
+}
+
+function createTask(prompt) {
     let task = {
         stopped: false,
         batchesDone: 0
@@ -607,7 +624,6 @@ async function makeImage() {
 
     let streamImageProgress = (numOutputsTotal > 50 ? false : streamImageProgressField.checked)
 
-    let prompt = promptField.value
     if (activeTags.length > 0) {
         let promptTags = activeTags.map(x => x.name).join(", ")
         prompt += ", " + promptTags
@@ -729,8 +745,6 @@ async function makeImage() {
     task['previewPrompt'].innerText = prompt
 
     taskQueue.unshift(task)
-
-    initialText.style.display = 'none'
 }
 
 // create a file name with embedded prompt and metadata
@@ -1032,6 +1046,27 @@ maskSetting.addEventListener('click', function() {
     inpaintingEditorContainer.style.display = (this.checked ? 'block' : 'none')
 })
 
+promptsFromFileBtn.addEventListener('click', function() {
+    promptsFromFileSelector.click()
+})
+
+promptsFromFileSelector.addEventListener('change', function() {
+    if (promptsFromFileSelector.files.length === 0) {
+        return
+    }
+
+    let reader = new FileReader()
+    let file = promptsFromFileSelector.files[0]
+
+    reader.addEventListener('load', function() {
+        promptField.value = reader.result
+    })
+
+    if (file) {
+        reader.readAsText(file)
+    }
+})
+
 // function showMaskImagePreview() {
 //     if (maskImageSelector.files.length === 0) {
 //         // maskImagePreviewContainer.style.display = 'none'