Add files via upload

autture06 · Jan 28, 2024 · 7ff2425 · 7ff2425
1 parent 3ac7a34
commit 7ff2425
Show file tree

Hide file tree

Showing 3 changed files with 258 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Day #48 - Ai Image Generator | AsmrProg</title>
+</head>
+
+<body>
+
+    <div class="container">
+        <h1>AI Image Generator</h1>
+        <p>Write any descriptive and appropriate statements in the text box to recieve the four most accurately AI generated images of your liking!!!</p>
+        <form class="gen-form">
+            <input type="text" id="user-prompt" , placeholder="Type your statement here..." autocomplete="off">
+            <button type="button" id="generate">Generate</button>
+        </form>
+
+        <div class="result">
+            <div id="loading">Generating...</div>
+            <div id="image-grid"></div>
+        </div>
+
+    </div>
+
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,78 @@
+const apiKey = "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";
+
+const maxImages = 4; 
+let imgNumSelected = null;
+
+function getRandNum(min, max) {
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+
+function stopGenerateButton() {
+    document.getElementById("generate").disabled = true;
+}
+
+function allowGenerateButton() {
+    document.getElementById("generate").disabled = false;
+}
+
+function clearImgGrid() {
+    const imageGrid = document.getElementById("image-grid");
+    imageGrid.innerHTML = "";
+}
+
+async function genImgs(input) {
+    stopGenerateButton();
+    clearImgGrid();
+
+    const loading = document.getElementById("loading");
+    loading.style.display = "block";
+
+    const imageUrls = [];
+
+    for (let i = 0; i < maxImages; i++) {
+        const randomNumber = getRandNum(1, 10000);
+        const prompt = `${input} ${randomNumber}`;
+        const response = await fetch(
+            "https://api-inference.huggingface.co/models/prompthero/openjourney",
+            {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                    "Authorization": `Bearer ${apiKey}`,
+                },
+                body: JSON.stringify({ inputs: prompt }),
+            }
+        );
+
+        if (!response.ok) {
+            alert("Failed to generate image!");
+        }
+
+        const blob = await response.blob();
+        const imgUrl = URL.createObjectURL(blob);
+        imageUrls.push(imgUrl);
+
+        const img = document.createElement("img");
+        img.src = imgUrl;
+        img.alt = `art-${i + 1}`;
+        img.onclick = () => downloadImage(imgUrl, i);
+        document.getElementById("image-grid").appendChild(img);
+    }
+
+    loading.style.display = "none";
+    allowGenerateButton();
+
+    imgNumSelected = null; 
+}
+
+document.getElementById("generate").addEventListener('click', () => {
+    const input = document.getElementById("user-prompt").value;
+    genImgs(input);
+});
+
+function downloadImage(imgUrl, imageNumber) {
+    const link = document.createElement("a");
+    link.href = imgUrl;
+    link.download = `image-${imageNumber + 1}.jpg`;
+    link.click();
+}
diff --git a/style.css b/style.css
@@ -0,0 +1,149 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
+
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Roboto', sans-serif;
+}
+
+body{
+    background: #221f2f;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 100vh;
+}
+
+.container{
+    position: relative;
+    width: 40rem;
+    color: #fff;
+    background: rgba(0, 0, 0, 0.44);
+    padding: 20px 30px;
+    border-radius: 16px;
+    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+    backdrop-filter: blur(7.4px);
+    -webkit-backdrop-filter: blur(7.4px);
+    border: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.container::before{
+    content: "";
+    position: absolute;
+    background-color: #ed2ff0;
+    width: 120px;
+    height: 120px;
+    filter: blur(140px);
+    left: -20%;
+    top: 10%;
+    z-index: -1000;
+}
+
+.container::after{
+    content: "";
+    position: absolute;
+    background-color: #675afe;
+    width: 120px;
+    height: 120px;
+    filter: blur(140px);
+    right: -20%;
+    bottom: -10%;
+    z-index: -1000;
+}
+
+h1{
+    font-size: 28px;
+    font-weight: 600;
+    margin-bottom: 15px;
+    text-align: center;
+}
+
+p{
+    font-size: 14px;
+    color: #ccc;
+    line-height: 1.4rem;
+    text-align: justify;
+}
+
+.gen-form{
+    margin-top: 20px;
+    display: flex;
+    gap: 10px;
+    width: 100%;
+}
+
+input{
+    width: 80%;
+    border-radius: 5px;
+    outline: none;
+    border: none;
+    padding: 0 15px;
+    background-color: transparent;
+    color: #fff;
+    border: 1px solid #999;
+    transition: all 0.3s ease;
+}
+
+input:hover, input:focus{
+    border-color: #675afe;
+}
+
+button{
+    width: 20%;
+    height: 36px;
+    color: #fff;
+    border: 1px solid #ccc;
+    background: #20232c;
+    cursor: pointer;
+    border-radius: 5px;
+    font-size: 0.9rem;
+    transition: all 0.3s ease;
+}
+
+button:hover{
+    background: #675afe;
+    border-color: transparent;
+}
+
+#loading{
+    display: none;
+    font-size: 18px;
+    margin: 10px 0;
+}
+
+button:disabled, button[disabled]{
+    border: 1px solid #999;
+    background-color: #ccc;
+    color: #666;
+    cursor: auto;
+}
+
+.result{
+    margin-top: 10px;
+    width: 100%;
+    padding: 10px 0 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+#image-grid{
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 10px;
+    margin-bottom: 10px;
+    max-width: 80%;
+}
+
+#image-grid img{
+    max-width: 100%;
+    border-radius: 10px;
+    cursor: pointer;
+    border: 2px solid transparent;
+    transition: all 0.3s ease;
+}
+
+#image-grid img:hover{
+    border-color: #675afe;
+}