implemented send to img2img

Author: divamgupta

electron_app/src/App.vue

@@ -10,7 +10,7 @@
  <SplashScreen v-if="app_state.show_splash_screen"></SplashScreen>
  </transition>
  </div>
- <ApplicationFrame v-else title="DiffusionBee - Stable Diffusion App"
+ <ApplicationFrame ref="app_frame" v-else title="DiffusionBee - Stable Diffusion App"
 
  @menu_item_click_about="show_about"
  @menu_item_click_help="show_help"
@@ -28,7 +28,7 @@
 
  <template v-slot:img2img>
 
- <Img2Img v-if="is_mounted && stable_diffusion.is_backend_loaded" :app_state="app_state" :stable_diffusion="stable_diffusion"></Img2Img>
+ <Img2Img  ref="img2img" v-if="is_mounted && stable_diffusion.is_backend_loaded" :app_state="app_state" :stable_diffusion="stable_diffusion"></Img2Img>
  <div v-else class="animatable_content_box ">
  <LoaderModal :loading_percentage="stable_diffusion.loading_percentage" :loading_desc="stable_diffusion.model_loading_msg" :loading_title="stable_diffusion.model_loading_title ||'Loading model'"> </LoaderModal>
  </div>
@@ -239,9 +239,8 @@ export default
 
  data() {
  let app_state = {
-
  is_start_screen: true, // if the start screen is showing or not
- 
+ app_object : this , 
  should_show_dialog_on_quit : false , // should ask "do you wanna quit" on closing
  show_dialog_on_quit_msg : "" , // the message to show while quiting 
  show_splash_screen : true , // is showing the loading splash screen

electron_app/src/components/History.vue

@@ -23,7 +23,7 @@
 
  <div v-for="img in history_box.imgs" :key="img" class="history_box">
 
- <ImageItem :hide_extra_save_button="true" :path="img" :style_obj="{height:'100%'}"></ImageItem>
+ <ImageItem :app_state="app_state" :hide_extra_save_button="true" :path="img" :style_obj="{height:'100%'}"></ImageItem>
 
  </div>
  <div style="clear: both; display: table; margin-bottom: 10px;">

electron_app/src/components/ImageItem.vue

@@ -10,7 +10,7 @@
  </template>
  <b-dropdown-item-button @click="save_image(path)" >Save Image</b-dropdown-item-button>
  <b-dropdown-item-button >Upscale Image</b-dropdown-item-button>
- <b-dropdown-item-button >Send to Img2Img</b-dropdown-item-button>
+ <b-dropdown-item-button @click="send_img2img" >Send to Img2Img</b-dropdown-item-button>
 
 
  </b-dropdown>
@@ -30,7 +30,8 @@ export default {
  name: 'ImageItem',
  props: {
  path : String,
- style_obj:String,
+ style_obj:Object,
+ app_state:Object,
  hide_extra_save_button : Boolean,
  },
  components: {},
@@ -56,6 +57,19 @@ export default {
  window.ipcRenderer.sendSync('save_file', org_path+"||" +out_path);
  },
 
+ send_img2img(){
+ if(this.app_state){
+
+ if(this.app_state.app_object.$refs.stable_diffusion.is_input_avail){
+ this.app_state.app_object.$refs.img2img.inp_img = this.path;
+ this.app_state.app_object.$refs.app_frame.selected_tab = 'img2img';
+ }
+
+ 
+ }
+ 
+ }
+
  },
 }
 </script>

electron_app/src/components/Img2Img.vue

@@ -91,7 +91,7 @@
  <div v-for="img in generated_images" :key="img" >
  <center>
 
- <ImageItem :path="img" :style_obj="{ 'width': '75%' }"></ImageItem>
+ <ImageItem :app_state="app_state" :path="img" :style_obj="{ 'width': '75%' }"></ImageItem>
 
  </center>
  <br>

electron_app/src/components/ImgGenerate.vue

@@ -136,9 +136,7 @@
 
  <div v-if="generated_images.length == 1" >
  <center>
-
- <ImageItem :path="generated_images[0]" :style_obj="{ 'width': 'calc(100vh - 380px )' , 'margin-top': '60px' }"></ImageItem>
-
+ <ImageItem :app_state="app_state" :path="generated_images[0]" :style_obj="{ 'width': 'calc(100vh - 380px )' , 'margin-top': '60px' }"></ImageItem>
  </center>
  </div>
 
@@ -149,7 +147,7 @@
  <b-col v-for="img in generated_images" :key="img" style="margin-top:80px" md="6" lg="4" xl="3" >
  <center>
 
- <ImageItem :path="img" :style_obj="{'max-width' :'85%'}"></ImageItem>
+ <ImageItem :app_state="app_state" :path="img" :style_obj="{'max-width' :'85%'}"></ImageItem>
  </center>
  </b-col>
 

electron_app/src/components_bare/ApplicationFrame.vue

@@ -30,21 +30,27 @@
  </div>
  <div class="tab_content_frame">
  <div class="tab_content">
- <KeepAlive>
- <slot v-if=" selected_tab === 'txt2img' " name="txt2img"></slot>
- </KeepAlive>
-
- <KeepAlive>
- <slot v-if=" selected_tab === 'history' " name="history"></slot>
- </KeepAlive>
+ 
 
- <KeepAlive>
- <slot v-if=" selected_tab === 'img2img' " name="img2img"></slot>
- </KeepAlive>
- <slot v-if=" selected_tab === 'logs' " name="logs"></slot>
+ <div style="display:none" :class="{ bl_display : selected_tab === 'txt2img' }" >
+ <slot name="txt2img"></slot>
+ </div>
 
- <slot v-if=" selected_tab === 'outpainting' " name="outpainting"></slot>
+ <div v-if="selected_tab === 'history' " style="display:none" :class="{ bl_display : selected_tab === 'history' }" >
+ <slot name="history"></slot>
+ </div>
 
+ <div style="display:none" :class="{ bl_display : selected_tab === 'img2img' }" >
+ <slot name="img2img"></slot>
+ </div>
+
+ <div v-if="selected_tab === 'logs' " style="display:none" :class="{ bl_display : selected_tab === 'logs' }" >
+ <slot name="logs"></slot>
+ </div>
+
+ <div v-if="selected_tab === 'outpainting' " style="display:none" :class="{ bl_display : selected_tab === 'outpainting' }" >
+ <slot name="outpainting"></slot>
+ </div>
 
  </div>
 
@@ -120,6 +126,10 @@ body {
  font-family: var(--main-font);
 }
 
+.bl_display{
+ display:block !important;
+}
+
 
 .l_button {
  display: inline-block;