stable-diffusion-webui

1
// allows drag-dropping files into gradio image elements, and also pasting images from clipboard
2

3
function isValidImageList(files) {
4
    return files && files?.length === 1 && ['image/png', 'image/gif', 'image/jpeg'].includes(files[0].type);
5
}
6

7
function dropReplaceImage(imgWrap, files) {
8
    if (!isValidImageList(files)) {
9
        return;
10
    }
11

12
    const tmpFile = files[0];
13

14
    imgWrap.querySelector('.modify-upload button + button, .touch-none + div button + button')?.click();
15
    const callback = () => {
16
        const fileInput = imgWrap.querySelector('input[type="file"]');
17
        if (fileInput) {
18
            if (files.length === 0) {
19
                files = new DataTransfer();
20
                files.items.add(tmpFile);
21
                fileInput.files = files.files;
22
            } else {
23
                fileInput.files = files;
24
            }
25
            fileInput.dispatchEvent(new Event('change'));
26
        }
27
    };
28

29
    if (imgWrap.closest('#pnginfo_image')) {
30
        // special treatment for PNG Info tab, wait for fetch request to finish
31
        const oldFetch = window.fetch;
32
        window.fetch = async(input, options) => {
33
            const response = await oldFetch(input, options);
34
            if ('api/predict/' === input) {
35
                const content = await response.text();
36
                window.fetch = oldFetch;
37
                window.requestAnimationFrame(() => callback());
38
                return new Response(content, {
39
                    status: response.status,
40
                    statusText: response.statusText,
41
                    headers: response.headers
42
                });
43
            }
44
            return response;
45
        };
46
    } else {
47
        window.requestAnimationFrame(() => callback());
48
    }
49
}
50

51
function eventHasFiles(e) {
52
    if (!e.dataTransfer || !e.dataTransfer.files) return false;
53
    if (e.dataTransfer.files.length > 0) return true;
54
    if (e.dataTransfer.items.length > 0 && e.dataTransfer.items[0].kind == "file") return true;
55

56
    return false;
57
}
58

59
function dragDropTargetIsPrompt(target) {
60
    if (target?.placeholder && target?.placeholder.indexOf("Prompt") >= 0) return true;
61
    if (target?.parentNode?.parentNode?.className?.indexOf("prompt") > 0) return true;
62
    return false;
63
}
64

65
window.document.addEventListener('dragover', e => {
66
    const target = e.composedPath()[0];
67
    if (!eventHasFiles(e)) return;
68

69
    var targetImage = target.closest('[data-testid="image"]');
70
    if (!dragDropTargetIsPrompt(target) && !targetImage) return;
71

72
    e.stopPropagation();
73
    e.preventDefault();
74
    e.dataTransfer.dropEffect = 'copy';
75
});
76

77
window.document.addEventListener('drop', e => {
78
    const target = e.composedPath()[0];
79
    if (!eventHasFiles(e)) return;
80

81
    if (dragDropTargetIsPrompt(target)) {
82
        e.stopPropagation();
83
        e.preventDefault();
84

85
        let prompt_target = get_tab_index('tabs') == 1 ? "img2img_prompt_image" : "txt2img_prompt_image";
86

87
        const imgParent = gradioApp().getElementById(prompt_target);
88
        const files = e.dataTransfer.files;
89
        const fileInput = imgParent.querySelector('input[type="file"]');
90
        if (fileInput) {
91
            fileInput.files = files;
92
            fileInput.dispatchEvent(new Event('change'));
93
        }
94
    }
95

96
    var targetImage = target.closest('[data-testid="image"]');
97
    if (targetImage) {
98
        e.stopPropagation();
99
        e.preventDefault();
100
        const files = e.dataTransfer.files;
101
        dropReplaceImage(targetImage, files);
102
        return;
103
    }
104
});
105

106
window.addEventListener('paste', e => {
107
    const files = e.clipboardData.files;
108
    if (!isValidImageList(files)) {
109
        return;
110
    }
111

112
    const visibleImageFields = [...gradioApp().querySelectorAll('[data-testid="image"]')]
113
        .filter(el => uiElementIsVisible(el))
114
        .sort((a, b) => uiElementInSight(b) - uiElementInSight(a));
115

116

117
    if (!visibleImageFields.length) {
118
        return;
119
    }
120

121
    const firstFreeImageField = visibleImageFields
122
        .filter(el => !el.querySelector('img'))?.[0];
123

124
    dropReplaceImage(
125
        firstFreeImageField ?
126
            firstFreeImageField :
127
            visibleImageFields[visibleImageFields.length - 1]
128
        , files
129
    );
130
});
131