File size: 3,242 Bytes
fe66ec6
0835cd8
d1f4c77
fe66ec6
 
 
 
d1f4c77
1ea3019
 
 
 
d1f4c77
 
fe66ec6
 
 
 
 
 
 
 
 
 
0835cd8
fe66ec6
 
0835cd8
fe66ec6
 
 
 
 
 
 
0835cd8
fe66ec6
 
 
 
 
 
 
0835cd8
cb60b56
1ea3019
fe66ec6
 
 
 
 
1ea3019
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
fe66ec6
1ea3019
 
 
 
 
 
 
 
fe66ec6
 
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
import * as piexif from 'piexifjs';

interface IImageInfo {
  prompt?: string;
  negative_prompt?: string;
  seed?: number;
  guidance_scale?: number;
}
export enum windowType {
  image = 'image',
  video = 'video'
}

export function snapImage(imageEl: HTMLImageElement, info: IImageInfo) {
  try {
    const zeroth: { [key: string]: any } = {};
    const exif: { [key: string]: any } = {};
    const gps: { [key: string]: any } = {};
    zeroth[piexif.ImageIFD.Make] = 'LCM Image-to-Image ControNet';
    zeroth[piexif.ImageIFD.ImageDescription] =
      `prompt: ${info?.prompt} | negative_prompt: ${info?.negative_prompt} | seed: ${info?.seed} | guidance_scale: ${info?.guidance_scale}`;
    zeroth[piexif.ImageIFD.Software] =
      'https://github.com/radames/Real-Time-Latent-Consistency-Model';
    exif[piexif.ExifIFD.DateTimeOriginal] = new Date().toISOString();

    const exifObj = { '0th': zeroth, Exif: exif, GPS: gps };
    const exifBytes = piexif.dump(exifObj);

    const canvas = document.createElement('canvas');
    canvas.width = imageEl.naturalWidth;
    canvas.height = imageEl.naturalHeight;
    const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
    ctx.drawImage(imageEl, 0, 0);
    const dataURL = canvas.toDataURL('image/jpeg');
    const withExif = piexif.insert(exifBytes, dataURL);

    const a = document.createElement('a');
    a.href = withExif;
    a.download = `lcm_txt_2_img${Date.now()}.png`;
    a.click();
  } catch (err) {
    console.log(err);
  }
}

export function expandWindow(streamURL: string, type: windowType = windowType.image) {
  const newWindow = window.open(
    '',
    '_blank',
    'width=1024,height=1024,scrollbars=0,resizable=1,toolbar=0,menubar=0,location=0,directories=0,status=0'
  ) as Window;

  const html = `
      <html>
          <head>
              <title>Real-Time Latent Consistency Model</title>
              <style>
                  body {
                      margin: 0;
                      padding: 0;
                      background-color: black;
                  }
              </style>
          </head>
          <body>
              <script>
                  let isFullscreen = false;
                  window.onkeydown = function(event) {
                      switch (event.code) {
                          case "Escape":
                              window.close();
                              break;
                          case "Enter":
                              if (isFullscreen) {
                                  document.exitFullscreen();
                                  isFullscreen = false;
                              } else {
                                  document.documentElement.requestFullscreen();
                                  isFullscreen = true;
                              }
                              break;
                      }
                  }
              </script>
          </body>
      </html>
      `;
  newWindow.document.write(html);

  const img = newWindow.document.createElement('img');
  img.src = streamURL;
  img.style.width = '100%';
  img.style.height = '100%';
  img.style.objectFit = 'contain';
  newWindow.document.body.appendChild(img);

  return newWindow;
}