Hugging Face's logo

Spaces:
Temuzin64
/
ImageGen
Running

App Files
ImageGen
File size: 3,986 Bytes
212fde4
0e09f6f
 
 
 
 
 
 
 
 
 
 
 
1d3f096
 
d0b6dcb
 
0e09f6f
 
9d1657b
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
0e09f6f
d0b6dcb
48c5df0
 
 
 
 
 
 
 
9d1657b
0e09f6f
9d1657b
 
48c5df0
9d1657b
 
48c5df0
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
0e09f6f
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
const token = window.huggingface.variables.OPENAI_API_KEY;
const imageBox_el = document.getElementById("imageBox");
const promptText_el = document.getElementById("promptText");
const btn_gen_el = document.getElementById("btn-gen");
const btn_clear_el = document.getElementById("btn-clear");
const loadingMessage_el = document.getElementById("loadingMessage");
const btn_download_el = document.getElementById("btn-download");
const download_el = document .getElementById("download");

let promptText = "";

const modelLinks = ["https://api-inference.huggingface.co/models/Shakker-Labs/FLUX.1-dev-LoRA-add-details",
                      "https://api-inference.huggingface.co/models/glif/90s-anime-art", 
                      "https://api-inference.huggingface.co/models/stabilityai/stable-diffusion-2-1",
                    "https://api-inference.huggingface.co/models/black-forest-labs/FLUX.1-dev",
                      "https://api-inference.huggingface.co/models/Jovie/Midjourney",
                   "https://api-inference.huggingface.co/models/runwayml/stable-diffusion-v1-5"]


// async function query(data) {
//   const response = await fetch(modelLinks[2], {
//     headers: {
//       Authorization: `Bearer ${token}`,
//       "Content-Type": "application/json",
//     },
//     method: "POST",
//     body: JSON.stringify(data),
//   });

//   if (!response.ok) {
//     const err = await response.text();
//     throw new Error(err);
//   }

//   return await response.blob();
// }

async function query(data) {
  const response = await fetch(modelLinks[5], {
    headers: {
      Authorization: `Bearer ${token}`,
      "Content-Type": "application/json",
    },
    method: "POST",
    body: JSON.stringify(data),
  });

  console.log("Status:", response.status);

  const text = await response.text();
  console.log("Response:", text);

  return new Blob([text]);
}







// async function query(data) {
//   const response = await fetch(
    
//     modelLinks[2],
//     // "https://api-inference.huggingface.co/models/glif/90s-anime-art",
//     {
//       headers: {
//         Authorization: `Bearer ${token}`,
//         "Content-Type": "application/json",
//       },
//       method: "POST",
//       body: JSON.stringify(data),
//     }
//   );
//   const result = await response.blob();
//   return result;
// }

btn_clear_el.addEventListener("click", () => {
  promptText_el.value = "";
});

btn_gen_el.addEventListener("click", (event) => {
  promptText = promptText_el.value;

  if (promptText === "") {
    alert("Please Enter Description of the image you want to generate");
  } else {
    console.log(promptText);
    
    // Show the loading message and hide the image
    loadingMessage_el.style.display = "block";
    imageBox_el.style.display = "none";
    btn_download_el.style.display = "none";

    query({ inputs: promptText }).then((response) => {
      const imageUrl = URL.createObjectURL(response);
      imageBox_el.src = imageUrl;

      // Hide the loading message and show the image once it's ready
      loadingMessage_el.style.display = "none";
      imageBox_el.style.display = "block";
      // Update the download button
      download_el.style.display = "block";
      btn_download_el.style.display = "block";
      btn_download_el.href = imageUrl;
      btn_download_el.download = "generated_image.png";    
    }).catch(error => {
      loadingMessage_el.style.display = "none";
      alert("Failed to fetch the image. Please try again.");
      console.error("Error fetching image:", error);
    });
  }
});
console.log(btn_download_el)
btn_download_el.addEventListener("click", (event) => {
    // Optional: Log or perform any action before the download starts
    console.log("Download initiated for the generated image.");

    // You can also perform checks or modify the behavior here if needed.
    if (!btn_download_el.href) {
        event.preventDefault();
        alert("No image available for download.");
    }
});