Merge pull request #316 from AEtheve/estimation-time-and-outpainting

Add estimation of remaining time + new features in outpainting

Author: divamgupta

electron_app/src/StableDiffusion.vue

@@ -5,6 +5,8 @@
 
 import { send_to_py } from "./py_vue_bridge.js"
 import {get_tokens} from './clip_tokeniser/clip_encoder.js'
+import {compute_time_remaining} from "./utils.js"
+const moment = require('moment')
 
 let notification_sound = new Audio(require('@/assets/notification.mp3'))
 
@@ -33,8 +35,12 @@ export default {
             model_loading_title : "",
             loading_percentage : -1 , 
             generation_state_msg : "",
+            remaining_times: "",
             attached_cbs : undefined,
             model_version : "",
+            nb_its: 0,
+            iter_times: [],
+            generation_loop: undefined
         };
     },
     methods: {
@@ -136,8 +142,23 @@ export default {
                 this.last_iter_t  = Date.now();
                 if(this.attached_cbs){
                     if(this.attached_cbs.on_progress){
-                        if(p >= 0 )
+                        if(p >= 0 ){
                             this.generation_state_msg = iter_time/1000 + " s/it";
+                            this.iter_times.push(iter_time);
+                            let median = this.iter_times.sort((a, b) => a - b)[Math.floor(this.iter_times.length / 2)];
+                            let time_remaining = moment.duration(median*((100-p)*this.nb_its/100));
+                              
+                            this.remaining_times = compute_time_remaining(time_remaining);
+                            clearInterval(this.generation_loop);
+                            this.generation_loop = setInterval(() => {
+                                if(this.attached_cbs == undefined){
+                                    return clearInterval(this.generation_loop);
+                                }
+                                time_remaining.subtract(1, 'seconds');
+                                this.remaining_times = compute_time_remaining(time_remaining);
+                            }, 1000);
+    
+                        }
                         this.attached_cbs.on_progress(p, iter_time);
                     }
                         
@@ -149,7 +170,8 @@ export default {
         } ,
 
         interupt(){
-            send_to_py("t2im __stop__") 
+            send_to_py("t2im __stop__")
+            this.attached_cbs = undefined;
         },
 
         text_to_img(prompt_params, callbacks, generated_by){
@@ -180,6 +202,9 @@ export default {
             this.generated_by = generated_by;
             this.attached_cbs = callbacks;
             this.generation_state_msg = ""
+            this.remaining_times = ""
+            this.iter_times = []
+            this.nb_its = prompt_params.ddim_steps||25
             send_to_py("t2im " + JSON.stringify(prompt_params)) 
         }
 

electron_app/src/components/Img2Img.vue

@@ -75,7 +75,7 @@
             </div>
 
             <div v-if="!stable_diffusion.is_input_avail && stable_diffusion.generated_by=='img2img'">
-                <LoaderModal :loading_percentage="done_percentage" loading_title="Generating" :loading_desc="stable_diffusion.generation_state_msg"></LoaderModal>
+                <LoaderModal :loading_percentage="done_percentage" loading_title="Generating" :loading_desc="stable_diffusion.generation_state_msg" :remaining_times="stable_diffusion.remaining_times"></LoaderModal>
             </div>
 
 

electron_app/src/components/ImgGenerate.vue

@@ -101,7 +101,7 @@
         </div>
 
         <div v-if="!stable_diffusion.is_input_avail && stable_diffusion.generated_by=='txt2img'">
-            <LoaderModal :loading_percentage="done_percentage" loading_title="Generating" :loading_desc="stable_diffusion.generation_state_msg"></LoaderModal>
+            <LoaderModal :loading_percentage="done_percentage" loading_title="Generating" :loading_desc="stable_diffusion.generation_state_msg" :remaining_times="stable_diffusion.remaining_times"></LoaderModal>
         </div>
 
     <div class="bottom_float">

electron_app/src/components/Inpainting.vue

@@ -53,7 +53,7 @@
         </div>
 
         <div v-if="!stable_diffusion.is_input_avail && stable_diffusion.generated_by=='inpainting'">
-            <LoaderModal :loading_percentage="done_percentage" loading_title="Generating" :loading_desc="stable_diffusion.generation_state_msg"></LoaderModal>
+            <LoaderModal :loading_percentage="done_percentage" loading_title="Generating" :loading_desc="stable_diffusion.generation_state_msg" :remaining_times="stable_diffusion.remaining_times"></LoaderModal>
         </div>
 
 

electron_app/src/components/Outpainting.vue

@@ -18,17 +18,24 @@
                     style="border-radius: 12px 12px 12px 12px; width: calc(100%); resize: none; " 
                     class="form-control outpaint_textbox"  
                     v-bind:class="{ 'disabled' : !stable_diffusion.is_input_avail}"
-                    :rows="2">
+                    :rows="is_negative_prompt_avail ? 1:2">
+        </textarea>
+        <textarea 
+                    v-if="is_negative_prompt_avail"
+                    v-model="negative_prompt" 
+                    placeholder="Enter your negative prompt here" 
+                    style="border-radius: 12px 12px 12px 12px; width: calc(100%);font-size:13px; margin-top:14px; resize: none; " 
+                    class="form-control outpaint_textbox"  
+                    v-bind:class="{ 'disabled' : !stable_diffusion.is_input_avail}"
+                    :rows="is_negative_prompt_avail ? 1:2">
         </textarea>
 
 
 
 
-        <div v-if="stable_diffusion.is_input_avail" style="margin-top: 20px">
-            
+        <div v-if="stable_diffusion.is_input_avail" style="margin-top: 15px">
+            <SDOptionsDropdown :style="is_negative_prompt_avail?'margin-top:-43px':''" :options_model_values="this_object"  :elements_hidden="[ 'num_imgs', 'inp_img_strength', 'batch_size', 'guidence_scale', 'img_h', 'custom_model', 'seed']"> </SDOptionsDropdown>
             <div  class="l_button button_medium button_colored" style="float:right ; " @click="generate()" >Generate</div>
-            
-
         </div>
         <span v-else-if="stable_diffusion.generated_by=='outpainting'"   >
             <div v-if="is_stopping" class="l_button button_medium button_colored" style="float:right; float:right ; margin-top: 20px; " @click="stop_generation">Stopping ...</div>
@@ -43,7 +50,7 @@
         </div>
 
         <div v-if="!stable_diffusion.is_input_avail && stable_diffusion.generated_by=='outpainting'">
-            <LoaderModal :loading_percentage="done_percentage" loading_title="Generating" :loading_desc="stable_diffusion.generation_state_msg"></LoaderModal>
+            <LoaderModal :loading_percentage="done_percentage" loading_title="Generating" :loading_desc="stable_diffusion.generation_state_msg" :remaining_times="stable_diffusion.remaining_times"></LoaderModal>
         </div>
 
         <p style="opacity:0.5; zoom:0.8; float:left; max-width: calc(100vw - 200px); margin-bottom: 0; "> Please describe image you want to draw in the box. </p>
@@ -54,6 +61,7 @@
 import Konva from 'konva';
 import LoaderModal from '../components_bare/LoaderModal.vue'
 import Vue from 'vue'
+import SDOptionsDropdown from '../components_bare/SDOptionsDropdown.vue'
 
 function onVisible(element, callback) {
   new IntersectionObserver((entries, observer) => {
@@ -74,7 +82,7 @@ export default {
         app_state : Object   , 
         stable_diffusion : Object,
     },
-    components: {LoaderModal},
+    components: {LoaderModal, SDOptionsDropdown},
     mounted() {
            this.init_state();
            this.resize_stage()
@@ -94,6 +102,9 @@ export default {
 
             is_earasing: false, 
             is_eraser_enabled: false,
+            is_negative_prompt_avail : false,
+            negative_prompt : "",
+            selected_model : 'Default'
         };
     },
     watch: {
@@ -116,7 +127,11 @@ export default {
             deep: true
         } , 
     },
-
+    computed:{
+        this_object(){
+            return this;
+        }
+    },
     methods: {
         init_state(){
             let that = this;
@@ -200,6 +215,19 @@ export default {
             this.box_layer = new Konva.Layer();
             this.stage.add(this.box_layer);
             this.box_layer.add(box);
+
+            let tr = new Konva.Transformer({keepRatio : true , rotateEnabled:false , flipEnabled:false, enabledAnchors: ['top-left', 'top-right', 'bottom-left', 'bottom-right']  });
+            this.box_layer.add(tr);
+            tr.nodes([box]);
+            
+            box.on('transform', function () {
+                box.setAttrs({
+                    width: Math.round(box.width() * box.scaleX()),
+                    height: Math.round(box.height() * box.scaleY()),
+                    scaleX: 1,
+                    scaleY: 1
+                });
+            });
             
             this.resize_stage()
             
@@ -304,7 +332,7 @@ export default {
         add_img_to_stage(img_path, is_resizable  ){
             
             let that = this;
-            let scale =  that.box.width() / 512  // IMP rn i am assuming that the returned image will be 512x512 
+            let scale =  that.box.scaleX()
 
             this.freeze_last_resizable_img()
 
@@ -315,8 +343,18 @@ export default {
                     x: that.box.x(),
                     y: that.box.y(),
                     scaleX: scale,
-                    scaleY: scale ,
+                    scaleY: scale,
+                    });
+
+
+                if (imgg.width() == imgg.height()){
+                    imgg.setAttrs({
+                        width: that.box.width(),
+                        height: that.box.height(),
                     });
+                }
+                
+                
                 that.images_layer.add(imgg);
 
                 let box = new Konva.Rect({
@@ -474,6 +512,9 @@ export default {
             this.done_percentage = -1;
             this.is_stopping = false;
 
+            if(this.is_negative_prompt_avail)
+                params['negative_prompt'] = this.negative_prompt;
+
             let that = this;
 
             let callbacks = {
@@ -489,6 +530,9 @@ export default {
                 },
             }
 
+            if(this.is_negative_prompt_avail)
+                params['negative_prompt'] = this.negative_prompt;
+
             if(this.stable_diffusion)
                 this.stable_diffusion.text_to_img(params, callbacks, 'outpainting');
 

electron_app/src/components_bare/LoaderModal.vue

@@ -13,7 +13,9 @@
             <b-progress v-if="loading_percentage >= 0 "  :value="loading_percentage" style="height: 10px;"></b-progress>
 
             <div style="margin-bottom:10px"></div>
-            <p style="font-variant-numeric: tabular-nums;">{{loading_desc}}</p>
+            <p style="font-variant-numeric: tabular-nums;margin-bottom: 0px;">{{loading_desc}}
+            <span v-if="remaining_times"><br>{{remaining_times}}</span>
+            </p>
         </div>
 
     </center>
@@ -24,7 +26,7 @@ import MoonLoader from 'vue-spinner/src/MoonLoader.vue'
 
 export default {
     name: 'LoaderModal',
-    props: ['loading_percentage' ,'loading_desc' , 'loading_title'],
+    props: ['loading_percentage' ,'loading_desc' , 'loading_title', 'remaining_times'],
     components: {MoonLoader},
     mounted() {
 

electron_app/src/components_bare/SDOptionsDropdown.vue

@@ -141,9 +141,8 @@
                         </div>
                     </span>
 
-
+                    <span v-if="!elements_hidden.includes('batch_size')">
                     <b-form-group inline label="" style="margin-bottom: 6px;">
-                        <span v-if="!elements_hidden.includes('batch_size')">
                             <div class="options_title">
                                 <div class="options_title_box" style="width: 205px;">
                                     <span>Steps</span>
@@ -162,11 +161,10 @@
                                         required></b-form-select>
                                 </div>
                             </div>
-
-                        </span>
-
                     </b-form-group>
+                    </span>
 
+                    <span v-if="!elements_hidden.includes('guidence_scale')">
                     <b-form-group inline label="" style="margin-bottom: 6px;">
                         <div style="display: flex;flex-direction: column;width: 300px;">
                             <div class="options_title_box">
@@ -185,7 +183,9 @@
                             </div>
                         </div>
                     </b-form-group>
+                    </span>
 
+                    <span v-if="!elements_hidden.includes('seed')">
                     <div class="options_title">
                         <div class="options_title_box" style="width: 155px;">
                             <span>Seed</span>
@@ -210,8 +210,9 @@
                                 placeholder="-1"></b-form-input>
                         </div>
                     </div>
+                    </span>
 
-
+                    <span v-if="!elements_hidden.includes('custom_model')">
                     <div class="options_title">
                         <div class="options_title_box" style="width: 165px;">
                             <span>Custom Model</span>
@@ -241,6 +242,7 @@
                                 required></b-form-select>
                         </div>
                     </div>
+                    </span>
 
                     <div class="options_title">
                         <div class="options_title_box" style="width: 205px;">

electron_app/src/utils.js

@@ -8,7 +8,11 @@ function compute_n_cols() {
     return n_col;
 }
 
-
+function compute_time_remaining(time_remaining) {
+    if (time_remaining.asSeconds() < 1) return "";
+    if (time_remaining.hours() > 0) return `(${time_remaining.hours()}h${time_remaining.minutes()}m left)`;
+    else return `(${time_remaining.minutes()}m${time_remaining.seconds()}s left)`;
+}
 
 function simple_hash( strr ) {
     var hash = 0;
@@ -164,4 +168,4 @@ async function share_on_arthub(imgs , params,  prompt ) {
 
 
 
-export { compute_n_cols ,resolve_asset_illustration , simple_hash , open_popup, share_on_arthub}
+export { compute_n_cols , compute_time_remaining , resolve_asset_illustration , simple_hash , open_popup, share_on_arthub}