mrtm/image-placeholder-generator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial plumbing

Browse Source
This commit is contained in:
torbjornmolin
2025-09-27 17:16:37 +02:00
commit 0692ba3b97
6 changed files with 1688 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored Normal file
View File

@@ -0,0 +1 @@
/target

1306
Cargo.lock generated Normal file
View File

File diff suppressed because it is too large Load Diff

14
Cargo.toml Normal file
View File

@@ -0,0 +1,14 @@
[package]
name = "image-placeholder-generator"
version = "0.1.0"
edition = "2024"
[dependencies]
axum = "0.8.4"
bytes = "1"
serde = { version = "1.0.227", features = ["derive"] }
tokio = { version = "1.47.1", features = ["fs", "rt-multi-thread"] }
tokio-util = { version = "0.7.16", features = ["io"] }
tower-http = { version = "0.6.6", features = ["fs", "trace"] }
tracing-subscriber = "0.3.20"
zip = "5.1.1"

271
assets/index.html Normal file
View File

@@ -0,0 +1,271 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Image Generator</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
* {
box-sizing: border-box;
}
body {
font-family: "Segoe UI", sans-serif;
margin: 0;
padding: 0;
background: linear-gradient(135deg, #667eea, #764ba2);
color: #333;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.container {
width: 100%;
max-width: 600px;
background: white;
border-radius: 16px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
padding: 35px;
margin: 40px 20px;
text-align: center;
position: relative;
}
.logo {
width: 200px;
margin-bottom: 15px;
}
h1 {
font-size: 26px;
color: #4c2885;
margin-bottom: 10px;
}
form {
text-align: left;
margin-top: 20px;
}
label {
display: block;
margin-top: 20px;
margin-bottom: 6px;
font-weight: 600;
color: #444;
}
input[type="text"],
input[type="number"],
textarea {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 8px;
font-size: 14px;
margin-top: 4px;
transition: border 0.2s;
}
input:focus,
textarea:focus {
border-color: #764ba2;
outline: none;
}
textarea {
resize: vertical;
min-height: 100px;
}
.row {
display: flex;
gap: 10px;
}
.row input {
flex: 1;
}
button {
background-color: #ff6b6b;
color: white;
padding: 12px 20px;
border: none;
border-radius: 8px;
font-size: 16px;
margin-top: 30px;
width: 100%;
cursor: pointer;
transition: background 0.3s;
}
button:hover {
background-color: #fa5252;
}
.status {
display: flex;
align-items: center;
justify-content: center;
margin-top: 20px;
font-size: 14px;
color: #444;
min-height: 24px;
}
.status-icon {
width: 20px;
height: 20px;
margin-right: 8px;
opacity: 0;
transform: scale(0.8);
transition: opacity 0.3s, transform 0.3s;
}
.status.show .status-icon {
opacity: 1;
transform: scale(1);
}
.fade-in {
animation: fadeIn 0.5s ease-in-out;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: scale(0.95);
}
to {
opacity: 1;
transform: scale(1);
}
}
@media (max-width: 500px) {
.row {
flex-direction: column;
}
}
</style>
</head>
<body>
<div class="container fade-in">
<!-- Replace with your logo if needed -->
<img src="logo.svg" alt="Logo" class="logo" />
<h1>Image Generator</h1>
<form id="imageForm">
<label for="count">Images per Filename</label>
<input
type="number"
id="count"
name="count"
min="1"
value="1"
required
/>
<label for="width">Image Dimensions (px)</label>
<div class="row">
<input
type="number"
id="width"
name="width"
min="1"
placeholder="Width"
required
/>
<input
type="number"
id="height"
name="height"
min="1"
placeholder="Height"
required
/>
</div>
<label for="filenames">Base Filenames (one per line)</label>
<textarea
id="filenames"
name="filenames"
required
placeholder="filename1&#10;filename2&#10;filename3"
></textarea>
<button type="submit">Generate Images & Download ZIP</button>
</form>
<div class="status" id="status">
<img id="statusIcon" class="status-icon" src="" alt="" />
<span id="statusText"></span>
</div>
</div>
<script>
const form = document.getElementById("imageForm");
const statusDiv = document.getElementById("status");
const statusText = document.getElementById("statusText");
const statusIcon = document.getElementById("statusIcon");
const showStatus = (message, type) => {
statusText.textContent = message;
statusDiv.classList.add("show");
if (type === "success") {
statusIcon.src = "https://img.icons8.com/color/48/ok--v1.png";
} else if (type === "error") {
statusIcon.src = "https://img.icons8.com/color/48/cancel--v1.png";
} else {
statusIcon.src =
"https://img.icons8.com/color/48/medium-priority.png";
}
statusIcon.alt = type;
};
form.addEventListener("submit", async (e) => {
e.preventDefault();
showStatus("Generating images... Please wait.", "info");
const formData = {
count: parseInt(form.count.value),
dimensions: `${form.width.value}x${form.height.value}`,
filenames: form.filenames.value
.trim()
.split("\n")
.map((name) => name.trim())
.filter((name) => name !== ""),
};
try {
const response = await fetch("api/generate", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(formData),
});
if (!response.ok) throw new Error("Failed to generate images.");
const blob = await response.blob();
const downloadUrl = window.URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = downloadUrl;
a.download = "generated_images.zip";
document.body.appendChild(a);
a.click();
a.remove();
window.URL.revokeObjectURL(downloadUrl);
showStatus("✅ Download started!", "success");
} catch (error) {
console.error(error);
showStatus("❌ Error: Could not generate images.", "error");
}
});
</script>
</body>
</html>

18
assets/logo.svg Normal file
View File

@@ -0,0 +1,18 @@
<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" fill="none">
<!-- Background rectangle (light gray) -->
<rect width="200" height="200" fill="#e0e0e0" rx="16"/>
<!-- Image placeholder frame (darker gray) -->
<rect x="30" y="40" width="140" height="100" fill="#c0c0c0" rx="8"/>
<!-- triangle -->
<polygon points="40,120 80,70 110,110" fill="#a0a0a0"/>
<!-- circle -->
<circle cx="120" cy="60" r="30" fill="#a000a0"/>
<!-- Text: IMG -->
<text x="100" y="170" text-anchor="middle" font-size="28" font-family="Arial, sans-serif" fill="#555">
PGGen
</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 629 B

78
src/main.rs Normal file
View File

@@ -0,0 +1,78 @@
use std::io::{Cursor, Write};
use axum::{
Json, Router,
body::Body,
http::{Response, StatusCode, header},
routing::post,
};
use serde::Deserialize;
use tower_http::services::ServeFile;
#[tokio::main]
async fn main() {
// initialize tracing
tracing_subscriber::fmt::init();
// build our application with a route
let app = Router::new()
// `GET /` goes to `root`
.route_service("/", ServeFile::new("assets/index.html"))
.route_service("/logo.svg", ServeFile::new("assets/logo.svg"))
.route("/api/generate", post(download_zip));
// run our app with hyper, listening globally on port 3000
let listener = tokio::net::TcpListener::bind("0.0.0.0:3000").await.unwrap();
axum::serve(listener, app).await.unwrap();
}
#[derive(Deserialize)]
pub struct GenerateOptions {
count: u32,
filenames: Vec<String>,
}
async fn download_zip(Json(payload): Json<GenerateOptions>) -> Response<Body> {
println!(
"Count: {}.\nFiles: ' [ {} ]'",
payload.count,
payload.filenames.join(",")
);
// Example: Simulate multiple files in memory
let files: Vec<(&str, &[u8])> = vec![
("hello.txt", b"Hello, world!"),
("readme.md", b"# README\nThis is a test."),
("data.json", br#"{"key": "value"}"#),
];
// Create a buffer to hold the ZIP file in memory
let mut buffer = Cursor::new(Vec::new());
{
// Create ZIP writer over the buffer
let mut zip = zip::ZipWriter::new(&mut buffer);
let options = zip::write::SimpleFileOptions::default()
.compression_method(zip::CompressionMethod::Stored)
.unix_permissions(0o644);
for (filename, contents) in files {
zip.start_file(filename, options).unwrap();
zip.write_all(contents).unwrap();
}
zip.finish().unwrap();
}
let zip_bytes = buffer.into_inner();
Response::builder()
.status(StatusCode::OK)
.header(header::CONTENT_TYPE, "application/zip")
.header(
header::CONTENT_DISPOSITION,
"attachment; filename=\"files.zip\"",
)
.body(Body::from(zip_bytes))
.unwrap()
}