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

Added file format picker, changed re-scale interpolation, added deduplication

Browse Source
This commit is contained in:
torbjornmolin
2025-10-05 13:52:43 +02:00
parent eebb48122b
commit d886c71a7b
3 changed files with 205 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files

177
assets/index.html
View File

@@ -4,155 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<title>Image Generator</title> <title>Image Generator</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style> <link rel="stylesheet" href="style.css" />
* {
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: 8px;
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;
}
input:invalid textarea:invalid {
border-color: #760000;
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> </head>
<body> <body>
<div class="container fade-in"> <div class="container fade-in">
@@ -161,15 +13,11 @@
<h1>Image Generator</h1> <h1>Image Generator</h1>
<form id="imageForm"> <form id="imageForm">
<label for="count">Images per Filename</label> <label for="filetype">Image file format</label>
<input <select id="filetype" name="filetype">
type="number" <option value="Jpg">Jpeg</option>
id="count" <option value="Png">PNG</option>
name="count" </select>
min="1"
value="1"
required
/>
<label for="width">Image Dimensions (px)</label> <label for="width">Image Dimensions (px)</label>
<div class="row"> <div class="row">
@@ -203,7 +51,7 @@
</form> </form>
<div class="status" id="status"> <div class="status" id="status">
<img id="statusIcon" class="status-icon" src="" alt="" /> <div id="statusIcon" class="status-icon" src="" alt=""></div>
<span id="statusText"></span> <span id="statusText"></span>
</div> </div>
</div> </div>
@@ -219,15 +67,12 @@
statusDiv.classList.add("show"); statusDiv.classList.add("show");
if (type === "success") { if (type === "success") {
statusIcon.src = "https://img.icons8.com/color/48/ok--v1.png"; statusIcon.innerHTML = "✅";
} else if (type === "error") { } else if (type === "error") {
statusIcon.src = "https://img.icons8.com/color/48/cancel--v1.png"; statusIcon.innerHTML = "❌";
} else { } else {
statusIcon.src = statusIcon.innerHTML = "⏳";
"https://img.icons8.com/color/48/medium-priority.png";
} }
statusIcon.alt = type;
}; };
form.addEventListener("submit", async (e) => { form.addEventListener("submit", async (e) => {
@@ -235,7 +80,7 @@
showStatus("Generating images... Please wait.", "info"); showStatus("Generating images... Please wait.", "info");
const formData = { const formData = {
count: parseInt(form.count.value), filetype: form.filetype.value,
width: Number(form.width.value), width: Number(form.width.value),
height: Number(form.height.value), height: Number(form.height.value),
filenames: form.filenames.value filenames: form.filenames.value

167
assets/style.css Normal file
View File

@@ -0,0 +1,167 @@
* {
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: 8px;
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;
}
select,
::picker(select) {
appearance: base-select;
}
select {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 8px;
font-size: 14px;
margin-top: 4px;
transition: border 0.2s;
}
select:hover,
select:focus {
/* background: #dddddd; */
}
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;
}
input:invalid textarea:invalid {
border-color: #760000;
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;
}
}

34
src/main.rs
View File

@@ -6,7 +6,11 @@ use axum::{
}; };
use image::GenericImage; use image::GenericImage;
use serde::Deserialize; use serde::Deserialize;
use std::io::{Cursor, Write}; use std::{
collections::HashSet,
fmt::Display,
io::{Cursor, Write},
};
use tower_http::services::ServeFile; use tower_http::services::ServeFile;
#[tokio::main] #[tokio::main]
async fn main() { async fn main() {
@@ -14,6 +18,7 @@ async fn main() {
let app = Router::new() let app = Router::new()
.route_service("/", ServeFile::new("assets/index.html")) .route_service("/", ServeFile::new("assets/index.html"))
.route_service("/logo.svg", ServeFile::new("assets/logo.svg")) .route_service("/logo.svg", ServeFile::new("assets/logo.svg"))
.route_service("/style.css", ServeFile::new("assets/style.css"))
.route("/api/generate", post(download_zip)); .route("/api/generate", post(download_zip));
let listener = tokio::net::TcpListener::bind("0.0.0.0:3000").await.unwrap(); let listener = tokio::net::TcpListener::bind("0.0.0.0:3000").await.unwrap();
@@ -22,16 +27,31 @@ async fn main() {
#[derive(Deserialize)] #[derive(Deserialize)]
pub struct GenerateOptions { pub struct GenerateOptions {
count: u32, filetype: ImageFileType,
filenames: Vec<String>, filenames: Vec<String>,
width: u32, width: u32,
height: u32, height: u32,
} }
#[derive(Deserialize)]
enum ImageFileType {
Png,
Jpg,
}
impl Display for ImageFileType {
fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
match self {
ImageFileType::Png => write!(f, "png"),
ImageFileType::Jpg => write!(f, "jpg"),
}
}
}
async fn download_zip(Json(payload): Json<GenerateOptions>) -> Response<Body> { async fn download_zip(Json(payload): Json<GenerateOptions>) -> Response<Body> {
println!( println!(
"Count: {}. w: {}, h: {}, \nFiles: ' [ {} ]'", "Filetype: '{}', w: {}, h: {}, \nFiles: ' [ {} ]'",
payload.count, payload.filetype,
payload.width, payload.width,
payload.height, payload.height,
payload.filenames.join(",") payload.filenames.join(",")
@@ -69,9 +89,9 @@ fn get_files(options: GenerateOptions) -> Vec<(String, Vec<u8>)> {
let mut files: Vec<(String, Vec<u8>)> = Vec::new(); let mut files: Vec<(String, Vec<u8>)> = Vec::new();
use text_to_png::TextRenderer; use text_to_png::TextRenderer;
let renderer = TextRenderer::default(); let renderer = TextRenderer::default();
let image_file_ending = "png"; let image_file_ending = options.filetype;
for f in options.filenames { for f in options.filenames.iter().collect::<HashSet<_>>() {
let mut imgbuf = image::ImageBuffer::new(options.width, options.height); let mut imgbuf = image::ImageBuffer::new(options.width, options.height);
for (_x, _y, pixel) in imgbuf.enumerate_pixels_mut() { for (_x, _y, pixel) in imgbuf.enumerate_pixels_mut() {
*pixel = image::Rgba([190, 190, 190, 255]); *pixel = image::Rgba([190, 190, 190, 255]);
@@ -89,7 +109,7 @@ fn get_files(options: GenerateOptions) -> Vec<(String, Vec<u8>)> {
let resized_text = pngtextsource.resize( let resized_text = pngtextsource.resize(
options.width / 2, options.width / 2,
options.height, options.height,
image::imageops::FilterType::Nearest, image::imageops::FilterType::CatmullRom,
); );
let xpos = (imgbuf.width() - resized_text.width()) / 2; let xpos = (imgbuf.width() - resized_text.width()) / 2;
let ypos = (imgbuf.height() - resized_text.height()) / 2; let ypos = (imgbuf.height() - resized_text.height()) / 2;