diffusionbee-stable-diffusion-ui/electron_app/src/pages/PostProcessImage.vue at 896c32820dd307928bb4f13ad47f848d1d35a7e6 · divamgupta/diffusionbee-stable-diffusion-ui · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<template>
    <BasicSDApplet
        :app=app
        :input_form=form_data
        :sd_options=sd_options
        :name="'img_post_process'"
        :form_tags="['img_post_process']"
        :required_assets=[]
        ref="basic_sd_applet"
    >

    <template v-slot:input_buttons>
            <div v-if="!is_running"  @click="upscale" class="l_button button_colored button_medium" style="float:right">Upscale</div>
    </template>

    <template v-slot:output_workpace>
        <GenerationGallery  :menu_items_skip="['use_params_current_page']" :app="app" :n_to_keep="2" ref="gallery"> </GenerationGallery>
    </template>


    </BasicSDApplet>
</template>
<script>

import BasicSDApplet from "../components/BasicSDApplet.vue"
import GenerationGallery from "../components/GenerationGallery.vue"
import Vue from 'vue'

const PostProcessImage = {
    name: 'PostProcessImage',
    props: {app:Object, },
    components: {BasicSDApplet, GenerationGallery},
    mounted() {
        this.app.functions.send_to_postprocess = this.send_to_postprocess;
    },
    data() {
        return {
            form_data:[
                {
                    "id" : "input_img",
                    "component" : "ImageInput",
                    "get_img_size" : true,
                },

                {
                    "id": "65453545",
                    "component": "InputWithDesc",
                    "title": "Upscaler",
                    "description": "",
                    "children": [
                        {
                            "id": "model",
                            "component": "Dropdown",
                            "options": ["Real-ESRGAN"],
                            "icon": "photo",
                            "default_value" : "Real-ESRGAN" ,
                            "is_persistant" : true
                        }
                    ]
                },
            ],
            sd_options : {},
            is_running : false,

        };
    },
    methods: {

        send_to_postprocess(im_path ){
          Vue.set( this.sd_options , "input_img" ,  im_path );
          this.app.functions.switch_page("PostProcessImage")
       },

        upscale(){

            let in_img = this.sd_options.input_img

            if(!in_img || in_img==''){
                this.app.show_toast('Please select an input image first')
                return
            }


            let that = this

            if(that.is_running)
                return

            this.$refs.gallery.clear_all()

            let h = this.sd_options['input_img__AUX__height' ]
            let w = this.sd_options['input_img__AUX__width' ]

            this.$refs.gallery.add_group({
                group_id : 1 ,
                num_imgs: 1 ,
                img_height: h ,
                img_width:  w,

                imgs : [{params : {}, done_percentage: -1 } ]
            })

            that.is_running = true
            window.ipcRenderer.invoke('run_realesrgan', in_img.split("?")[0] ).then((result) => {
                let gallery_group = that.$refs.gallery.get_group(1 )
                let el_to_update = gallery_group.imgs[ 0  ]

                if(result)
                {
                    el_to_update.image_url = result ;
                }
                else{
                    console.log("got error while upscale")
                    el_to_update.image_url = "ERROR" ;
                    el_to_update.description = "Error in upscaling the image" ;
                }

                this.$refs.gallery.update_group(gallery_group)
                that.is_running = false
            })


        }
    },
}

export default PostProcessImage;
PostProcessImage.title = "Upscaler"
PostProcessImage.description = "Use AI to increase the resolution of an image."
PostProcessImage.icon = "expand-arrows-alt"
PostProcessImage.img_icon = require("../assets/imgs/page_icon_imgs/upscale.png")
PostProcessImage.home_category = "main"
PostProcessImage.sidebar_show = "always"

// add this to the always_on_pages to the PagesRouter

</script>
<style>
</style>
<style scoped>
</style>