Merge pull request divamgupta#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}