File size: 3,232 Bytes
246efdb
0835cd8
246efdb
fe66ec6
 
 
 
d1f4c77
246efdb
1ea3019
246efdb
1ea3019
d1f4c77
 
fe66ec6
246efdb
 
 
 
fe66ec6
 
 
246efdb
fe66ec6
0835cd8
246efdb
fe66ec6
0835cd8
246efdb
fe66ec6
 
246efdb
fe66ec6
246efdb
fe66ec6
0835cd8
246efdb
fe66ec6
 
 
 
 
 
0835cd8
cb60b56
246efdb
fe66ec6
246efdb
 
 
fe66ec6
1ea3019
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
fe66ec6
1ea3019
246efdb
1ea3019
246efdb
 
 
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";

export interface IImageInfo {
  prompt?: string;
  negative_prompt?: string;
  seed?: number;
  guidance_scale?: number;
}

export enum windowType {
  image = "image",
}

export function snapImage(imageEl: HTMLImageElement, info: IImageInfo) {
  try {
    const zeroth: { [key: string]: string | number } = {};
    const exif: { [key: string]: string | number } = {};
    const gps: { [key: string]: string | number } = {};
    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) {
  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;
}