Add 4 files
Browse files- app.js +25 -0
- index.html +19 -19
- main.js +21 -0
- styles.css +54 -0
app.js
ADDED
|
@@ -0,0 +1,25 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
import express from "express";
|
| 2 |
+
const app = express();
|
| 3 |
+
|
| 4 |
+
const responses = {
|
| 5 |
+
"dog": "images/dog.jpg",
|
| 6 |
+
"cat": "images/cat.jpg",
|
| 7 |
+
"car": "images/car.jpg",
|
| 8 |
+
};
|
| 9 |
+
|
| 10 |
+
app.use(express.json());
|
| 11 |
+
|
| 12 |
+
app.post("/generate-image", (req, res) => {
|
| 13 |
+
let { model } = req.body;
|
| 14 |
+
if (!model) {
|
| 15 |
+
return res.status(400).json({ error: "No model provided" });
|
| 16 |
+
}
|
| 17 |
+
if (!responses[model]) {
|
| 18 |
+
return res.status(400).json({ error: "Invalid model" });
|
| 19 |
+
}
|
| 20 |
+
res.json({ imagePath: responses[model] });
|
| 21 |
+
});
|
| 22 |
+
|
| 23 |
+
app.listen(3000, () => {
|
| 24 |
+
console.log("API started on port 3000");
|
| 25 |
+
});
|
index.html
CHANGED
|
@@ -1,19 +1,19 @@
|
|
| 1 |
-
|
| 2 |
-
<
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
| 19 |
-
</html>
|
|
|
|
| 1 |
+
<html><head><link href="https://cdn.jsdelivr.net/npm/daisyui@3.1.6/dist/full.css" rel="stylesheet" type="text/css" /><script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script><script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio"></script><script defer src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.156.1/three.min.js"></script><script type="module" src="main.js"></script><title>Image Generator</title></head><body>
|
| 2 |
+
<div class="w-full sm:w-3/4 mx-auto">
|
| 3 |
+
<h1 class="text-6xl font-bold mb-6 text-center">Image Generator</h1>
|
| 4 |
+
<form class="mb-6">
|
| 5 |
+
<label for="model" class="block mb-2">Select model</label>
|
| 6 |
+
<select id="model" class="input w-full mb-4">
|
| 7 |
+
<option value="">-- Select a model --</option>
|
| 8 |
+
<option value="dog">Dog</option>
|
| 9 |
+
<option value="cat">Cat</option>
|
| 10 |
+
<option value="car">Car</option>
|
| 11 |
+
</select>
|
| 12 |
+
<button class="btn w-full shadow" @click.prevent="generateImage" id="generate-button">Generate</button>
|
| 13 |
+
</form>
|
| 14 |
+
<div class="m-auto mb-12">
|
| 15 |
+
<img id="generated-image" class="w-full" src="https://placekitten.com/200/300" />
|
| 16 |
+
</div>
|
| 17 |
+
</div>
|
| 18 |
+
</body>
|
| 19 |
+
</html>
|
main.js
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
const modelSelector = document.getElementById("model");
|
| 2 |
+
const generateButton = document.getElementById("generate-button");
|
| 3 |
+
|
| 4 |
+
generateButton.addEventListener("click", (event) => {
|
| 5 |
+
event.preventDefault();
|
| 6 |
+
let model = modelSelector.value;
|
| 7 |
+
let generatedImage = document.getElementById("generated-image");
|
| 8 |
+
fetch('/generate-image', {
|
| 9 |
+
method:"POST",
|
| 10 |
+
body: {
|
| 11 |
+
model: model
|
| 12 |
+
},
|
| 13 |
+
headers: {
|
| 14 |
+
'Content-Type': 'application/json'
|
| 15 |
+
}
|
| 16 |
+
})
|
| 17 |
+
.then(res => res.json())
|
| 18 |
+
.then(resJson => {
|
| 19 |
+
generatedImage.src = `https://placekitten.com/200/300?img=${resJson.imagePath}`;
|
| 20 |
+
})
|
| 21 |
+
});
|
styles.css
ADDED
|
@@ -0,0 +1,54 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
body {
|
| 2 |
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
| 3 |
+
}
|
| 4 |
+
|
| 5 |
+
h1 {
|
| 6 |
+
font-weight: bold;
|
| 7 |
+
font-size: 4em;
|
| 8 |
+
margin-bottom: 30px;
|
| 9 |
+
}
|
| 10 |
+
|
| 11 |
+
form {
|
| 12 |
+
display: flex;
|
| 13 |
+
flex-direction: column;
|
| 14 |
+
align-items: center;
|
| 15 |
+
margin-bottom: 40px;
|
| 16 |
+
}
|
| 17 |
+
|
| 18 |
+
select,
|
| 19 |
+
input,
|
| 20 |
+
button {
|
| 21 |
+
padding: 10px;
|
| 22 |
+
font-size: 18px;
|
| 23 |
+
border-radius: 4px;
|
| 24 |
+
border: 1px solid #ccc;
|
| 25 |
+
appearance: none;
|
| 26 |
+
box-sizing: border-box;
|
| 27 |
+
margin-bottom: 10px;
|
| 28 |
+
}
|
| 29 |
+
|
| 30 |
+
select {
|
| 31 |
+
width: 100%;
|
| 32 |
+
}
|
| 33 |
+
|
| 34 |
+
button {
|
| 35 |
+
cursor: pointer;
|
| 36 |
+
background-color: #5da8de;
|
| 37 |
+
color: white;
|
| 38 |
+
padding: 10px 20px;
|
| 39 |
+
width: 100%;
|
| 40 |
+
border: none;
|
| 41 |
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
| 42 |
+
transition: background-color 0.2s ease-in;
|
| 43 |
+
}
|
| 44 |
+
|
| 45 |
+
button:hover {
|
| 46 |
+
background-color: #498ec3;
|
| 47 |
+
}
|
| 48 |
+
|
| 49 |
+
#generated-image {
|
| 50 |
+
height: 480px;
|
| 51 |
+
width: 850px;
|
| 52 |
+
margin: 0 auto;
|
| 53 |
+
object-fit: cover;
|
| 54 |
+
}
|