Hugging Face's logo

Spaces:
adminuser742150
/
TextToImage
Running

App Files Community
TextToImage
File size: 3,309 Bytes 
6d02578
0aee795
32476aa
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
127
128
129
130
131
132
133
134
135
136
137
138
 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DALL·E Mini Generator</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      font-family: "Source Sans Pro", sans-serif;
      background: linear-gradient(135deg, #ece9f7 0%, #d4f1f9 100%);
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
    }

    .container {
      background: #fff;
      border-radius: 16px;
      padding: 2rem;
      box-shadow: 0 6px 30px rgba(0, 0, 0, 0.1);
      max-width: 700px;
      width: 100%;
      text-align: center;
    }

    h1 {
      margin-bottom: 0.5rem;
      font-size: 1.8rem;
      color: #333;
    }

    p {
      margin-bottom: 1.5rem;
      font-size: 1rem;
      color: #666;
    }

    input {
      width: 100%;
      padding: 0.8rem 1rem;
      border-radius: 10px;
      border: 1px solid #ddd;
      margin-bottom: 1rem;
      font-size: 1rem;
      background: #fafafa;
    }

    input:focus {
      outline: none;
      border-color: #7b61ff;
      box-shadow: 0 0 0 2px rgba(123, 97, 255, 0.2);
    }

    button {
      background: linear-gradient(90deg, #7b61ff, #5eead4);
      border: none;
      color: white;
      font-size: 1rem;
      font-weight: 600;
      padding: 0.8rem 1.6rem;
      border-radius: 10px;
      cursor: pointer;
      transition: 0.2s ease;
    }

    button:hover {
      transform: translateY(-2px);
      background: linear-gradient(90deg, #5eead4, #7b61ff);
    }

    .gallery {
      margin-top: 1.5rem;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 1rem;
    }

    .gallery img {
      width: 100%;
      border-radius: 12px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.08);
      background: #f9f9f9;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>🎨 DALL·E Mini Generator</h1>
    <p>Generate AI-powered images from any text prompt.</p>

    <input id="prompt" type="text" placeholder="Enter your prompt here..." />
    <button onclick="generateImages()">Generate</button>

    <div id="gallery" class="gallery"></div>
  </div>

  <script>
    async function generateImages() {
      const prompt = document.getElementById("prompt").value.trim();
      const gallery = document.getElementById("gallery");

      if (!prompt) {
        alert("Please enter a prompt first!");
        return;
      }

      gallery.innerHTML = "<p>⏳ Generating images...</p>";

      try {
        const response = await fetch("https://bf.dallemini.ai/generate", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
            "Accept": "application/json",
          },
          body: JSON.stringify({ prompt }),
        });

        const data = await response.json();
        gallery.innerHTML = "";

        data.images.forEach(imgBase64 => {
          const img = document.createElement("img");
          img.src = "data:image/png;base64," + imgBase64;
          gallery.appendChild(img);
        });
      } catch (error) {
        console.error(error);
        gallery.innerHTML = "<p>⚠️ Error: Too much traffic, try again later.</p>";
      }
    }
  </script>
</body>
</html>