dfattal.github.io/ControlNetDepth.html at main · dfattal/dfattal.github.io · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SDXL ControlNet Depth Test</title>
    <style>
        #image-container {
            display: flex;
            justify-content: space-between;
        }
        #depth-image, #processed-image {
            width: 48%; /* Each image will take half the viewport width */
        }
        #log-window {
            max-height: 100px;
            overflow-y: auto;
            border: 1px solid #000;
            margin-top: 10px;
            padding: 5px;
            background-color: #f0f0f0;
            white-space: pre-wrap; /* Ensures that whitespace is preserved and line breaks are applied */
        }
    </style>
</head>
<body>
    <h1>SDXL ControlNet Depth Test</h1>
    <input type="file" id="file-input" accept="image/png">
    <button id="upload-button">Upload and Process</button>
    <div id="image-container">
        <img id="depth-image" style="display:none;" />
        <img id="processed-image" style="display:none;" />
    </div>
    <div id="log-window"></div>

    <script>
        document.getElementById('upload-button').addEventListener('click', async () => {
            const fileInput = document.getElementById('file-input');
            if (fileInput.files.length === 0) {
                alert('Please select a file first.');
                return;
            }

            const file = fileInput.files[0];
            const formData = new FormData();
            formData.append('depthImage', file);

            const depthImage = document.getElementById('depth-image');
            depthImage.src = URL.createObjectURL(file);
            depthImage.style.display = 'block';

            try {
                const response = await fetch('http://35.173.31.207:5001/process', {
                    method: 'POST',
                    body: formData
                });

                if (!response.ok) {
                    throw new Error('Failed to process image');
                }

                const blob = await response.blob();
                const url = URL.createObjectURL(blob);

                const processedImage = document.getElementById('processed-image');
                processedImage.src = url;
                processedImage.style.display = 'block';
            } catch (error) {
                console.error('Error:', error);
                document.getElementById('log-window').textContent += error;
            }
        });

        // Function to fetch logs continuously
        async function fetchLogs() {
            try {
                const response = await fetch('http://35.173.31.207:5001/events');
                const reader = response.body.getReader();
                const decoder = new TextDecoder('utf-8');
                let logWindow = document.getElementById('log-window');

                while (true) {
                    const { value, done } = await reader.read();
                    if (done) break;

                    const text = decoder.decode(value, { stream: true }).replace(/^data: /gm, '').trim();;
                    logWindow.textContent += text + '\n';
                    logWindow.scrollTop = logWindow.scrollHeight;
                }
            } catch (error) {
                console.error('Error fetching logs:', error);
            }
        }

        fetchLogs();
    </script>
</body>
</html>