Skip to content

Commit 92bb761

Browse files
CosaslearningCosaslearning
authored
Add Files
1 parent 6dca336 commit 92bb761

11 files changed

+358
-0
lines changed

‎images/image1.jpeg

2.49 MB
Loading

‎images/image2.jpeg

5.55 MB
Loading

‎images/image3.jpeg

2.72 MB
Loading

‎images/image4.jpeg

1.16 MB
Loading

‎images/image5.jpeg

3.57 MB
Loading

‎images/image6.jpeg

609 KB
Loading

‎images/loader.gif

70.5 KB
Loading

‎images/logo.png

39.6 KB
Loading

‎index.html

+76
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Image Search Engine | Cosas Learning</title>
8+
<!-- Importing the CSS file -->
9+
<link rel="stylesheet" href="style.css">
10+
<!-- CDN Font Awesome -->
11+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
12+
integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
13+
crossorigin="anonymous" referrerpolicy="no-referrer" />
14+
</head>
15+
<body>
16+
<div class="container">
17+
<header>
18+
<div class="logo"><img src="images/logo.png" alt="Logo"></div>
19+
<div class="heding"><h1>AI Image Generator</h1></div>
20+
</header>
21+
<h3>👉 Convert Your Text Into An AI-Generated Images And Also Download Them 😊</h3>
22+
<div class="prompt_box">
23+
<form action="#" id="prompt_bar">
24+
<input type="text" id="prompt_text" placeholder="Provide a prompt for your image" autocomplete="off" required>
25+
<select class="img_quantity">
26+
<!-- Options for selecting the number of images to generate -->
27+
<!-- Default selection: 3 images -->
28+
<option value="1">1 Image</option>
29+
<option value="2">2 Images</option>
30+
<option value="3" selected>3 Images</option>
31+
<option value="4">4 Images</option>
32+
<option value="5">5 Images</option>
33+
<option value="6">6 Images</option>
34+
<option value="7">7 Images</option>
35+
<option value="8">8 Images</option>
36+
<option value="9">9 Images</option>
37+
<option value="10">10 Images</option>
38+
</select>
39+
<select class="img_size">
40+
<!-- Options for selecting the image size -->
41+
<!-- Default selection: 512x512 pixels -->
42+
<option value="256x256">Size: 256x256</option>
43+
<option value="512x512" selected>Size: 512x512</option>
44+
<option value="1024x1024">Size: 1024x1024</option>
45+
</select>
46+
<button>Generate</button>
47+
</form>
48+
</div>
49+
<div class="hero_section">
50+
<div id="image_result">
51+
<!-- Generated images will be displayed here -->
52+
<div class="img_box">
53+
<img src="images/image1.jpeg">
54+
</div>
55+
<div class="img_box">
56+
<img src="images/image2.jpeg">
57+
</div>
58+
<div class="img_box">
59+
<img src="images/image3.jpeg">
60+
</div>
61+
<div class="img_box">
62+
<img src="images/image4.jpeg">
63+
</div>
64+
<div class="img_box">
65+
<img src="images/image5.jpeg">
66+
</div>
67+
<div class="img_box">
68+
<img src="images/image6.jpeg">
69+
</div>
70+
</div>
71+
</div>
72+
</div>
73+
<!-- Importing the JavaScript file -->
74+
<script src="script.js"></script>
75+
</body>
76+
</html>

‎script.js

+86
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
// Variables
2+
const promptBar = document.querySelector("#prompt_bar");
3+
const imageresult = document.querySelector("#image_result");
4+
const downloadBtn = document.querySelector(".download-btn");
5+
6+
// Replace 'your-api-key' with your actual OpenAI API key
7+
const openaiAPIKey = "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";
8+
let isImgGen = false;
9+
10+
// Function to update image boxes with generated images
11+
const updateImgBoxes = (imgBoxArray) => {
12+
imgBoxArray.forEach((imgObject, index) => {
13+
const imgBox = imageresult.querySelectorAll(".img_box")[index];
14+
const imgElement = imgBox.querySelector("img");
15+
const downloadBtn = imgBox.querySelector(".download-btn");
16+
17+
const aiImgGenerate = `data:image/jpeg;base64,${imgObject.b64_json}`;
18+
imgElement.src = aiImgGenerate;
19+
20+
imgElement.onload = () => {
21+
imgBox.classList.remove("loading");
22+
downloadBtn.setAttribute("href", aiImgGenerate);
23+
downloadBtn.setAttribute("download", `Cosas_Learning_${new Date().getTime()}.jpg`);
24+
}
25+
})
26+
}
27+
28+
// Function to generate AI images
29+
const generateAIImages = async (userPrompt, imgQuntity, imgSize) => {
30+
try {
31+
const response = await fetch('https://api.openai.com/v1/images/generations', {
32+
method : "POST",
33+
headers : {
34+
"Content-Type": "application/json",
35+
"Authorization": `Bearer ${openaiAPIKey}`
36+
},
37+
body:JSON.stringify({
38+
prompt : userPrompt,
39+
n: parseInt(imgQuntity),
40+
size : imgSize,
41+
response_format :"b64_json"
42+
})
43+
});
44+
45+
if(!response.ok) throw new Error("Failed to generate AI Images! Please try again.")
46+
47+
const { data } = await response.json();
48+
console.log(data);
49+
updateImgBoxes([...data]);
50+
} catch (error) {
51+
alert(error.message);
52+
imageresult.style.display = "none";
53+
} finally {
54+
isImgGen = false;
55+
}
56+
}
57+
58+
// Function to handle the form submission
59+
const handlePrompt = (e) => {
60+
e.preventDefault();
61+
if(isImgGen) return;
62+
isImgGen = true;
63+
64+
imageresult.style.display = "flex";
65+
66+
const userPrompt = e.srcElement[0].value;
67+
const imgQuntity = e.srcElement[1].value;
68+
const imgSize = e.srcElement[2].value;
69+
70+
// Create loading placeholders for images
71+
const imgBoxes = Array.from({length: imgQuntity}, () =>
72+
`<div class="img_box loading">
73+
<img src="images/loader.gif">
74+
<a href="#" class="download-btn">
75+
<i class="fa-solid fa-download"></i>
76+
</a>
77+
</div>`
78+
).join("");
79+
80+
imageresult.innerHTML = imgBoxes;
81+
generateAIImages(userPrompt, imgQuntity, imgSize);
82+
83+
}
84+
85+
// Add event listener for form submission
86+
promptBar.addEventListener("submit", handlePrompt);

‎style.css

+196
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,196 @@
1+
/* CSS styles optimized for the project */
2+
3+
/* Importing Google Font */
4+
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
5+
6+
/* Base styling */
7+
* {
8+
margin: 0;
9+
padding: 0;
10+
box-sizing: border-box;
11+
font-family: 'Poppins', sans-serif;
12+
}
13+
14+
/* Variable definitions */
15+
:root {
16+
/* Colors */
17+
--white_color: rgb(255, 255, 255);
18+
--orange_color: rgb(246, 99, 53);
19+
--black_color: rgb(0, 0, 0);
20+
--background_color: linear-gradient(to top left, #b156d9, #213780);
21+
--grey-color: rgb(228, 222, 222);
22+
}
23+
24+
/* Container styling */
25+
.container {
26+
width: 100%;
27+
min-height: 100vh;
28+
background-image: var(--background_color);
29+
padding-bottom: 1rem;
30+
}
31+
32+
/* Header styling */
33+
header {
34+
padding: 2rem 0;
35+
margin: 0 3rem;
36+
display: flex;
37+
align-items: center;
38+
justify-content: space-between;
39+
}
40+
41+
/* Logo styling */
42+
.logo {
43+
width: 20rem;
44+
height: 6rem;
45+
}
46+
47+
.logo img {
48+
width: 100%;
49+
height: 100%;
50+
}
51+
52+
/* Heading styling */
53+
h1 {
54+
color: var(--white_color);
55+
text-align: center;
56+
padding: 1rem;
57+
border-bottom: 0.2rem var(--orange_color) solid;
58+
text-transform: uppercase;
59+
}
60+
61+
/* Prompt box styling */
62+
.prompt_box {
63+
margin: 1rem auto 2rem;
64+
width: 50rem;
65+
height: 3rem;
66+
}
67+
68+
/* Form styling */
69+
form {
70+
width: 100%;
71+
height: 100%;
72+
background-color: var(--grey-color);
73+
display: flex;
74+
align-items: center;
75+
justify-content: center;
76+
border-radius: 0.5rem;
77+
}
78+
79+
/* Input field styling */
80+
form input {
81+
height: 100%;
82+
border: 0;
83+
outline: 0;
84+
background: transparent;
85+
flex: 1;
86+
color: var(--black_color);
87+
font-size: 1rem;
88+
padding: 0 0.8rem;
89+
}
90+
91+
/* Placeholder text styling */
92+
form input::placeholder {
93+
color: var(--black_color);
94+
}
95+
96+
/* Select boxes styling */
97+
form .img_quantity, .img_size {
98+
outline: none;
99+
border: none;
100+
height: 44px;
101+
background: none;
102+
font-size: 1rem;
103+
margin-right: 0.5rem;
104+
}
105+
106+
/* Generate button styling */
107+
form button {
108+
padding: 0 1rem;
109+
height: 100%;
110+
background: var(--orange_color);
111+
color: var(--white_color);
112+
font-size: 1rem;
113+
border: 0;
114+
outline: 0;
115+
border-top-right-radius: 0.5rem;
116+
border-bottom-right-radius: 0.5rem;
117+
cursor: pointer;
118+
transition: 0.5s;
119+
}
120+
121+
/* Hover effect for Generate button */
122+
form button:hover {
123+
color: var(--orange_color);
124+
background: var(--white_color);
125+
font-weight: bold;
126+
}
127+
128+
/* Hero section styling */
129+
.hero_section {
130+
display: flex;
131+
flex-direction: column;
132+
}
133+
134+
/* Additional styling */
135+
h3 {
136+
color: var(--white_color);
137+
padding: 2rem 0 2rem 4rem;
138+
}
139+
140+
#image_result {
141+
display: flex;
142+
gap: 1rem;
143+
flex-wrap: wrap;
144+
margin: 3rem;
145+
justify-content: center;
146+
}
147+
148+
/* Image box styling */
149+
#image_result .img_box {
150+
width: 25rem;
151+
aspect-ratio: 1/1;
152+
border-radius: 0.5rem;
153+
overflow: hidden;
154+
position: relative;
155+
display: flex;
156+
justify-content: center;
157+
align-items: center;
158+
background-color: var(--grey-color);
159+
}
160+
161+
#image_result .img_box img {
162+
width: 100%;
163+
height: 100%;
164+
object-fit: cover;
165+
}
166+
167+
#image_result .img_box.loading img {
168+
width: 5rem;
169+
height: 5rem;
170+
}
171+
172+
/* Download button styling */
173+
#image_result .img_box .download-btn {
174+
position: absolute;
175+
top: 1rem;
176+
right: 1rem;
177+
background-color: var(--orange_color);
178+
height: 2rem;
179+
width: 2rem;
180+
border-radius: 50%;
181+
display: none;
182+
align-items: center;
183+
justify-content: center;
184+
}
185+
186+
/* Show download button on hover */
187+
#image_result .img_box:not(.loading):hover .download-btn {
188+
display: flex;
189+
}
190+
191+
/* Download button icon styling */
192+
#image_result .img_box .download-btn i {
193+
width: 1rem;
194+
height: 1rem;
195+
color: var(--white_color);
196+
}

0 commit comments

Comments
 (0)