AI YouTube Thumbnail Generator
setText(e.target.value)}
className=”w-full p-3 border rounded-lg text-lg focus:ring-2 focus:ring-pink-500″
/>
AI YouTube Thumbnail Generator
import { useState } from “react”;
import { SketchPicker } from “react-color”;
import axios from “axios”;
export default function ThumbnailGenerator() {
const [text, setText] = useState(“Your Thumbnail Title”);
const [image, setImage] = useState(null);
const [aiStyles, setAiStyles] = useState({ bgColor: “#ff0000”, textColor: “#ffffff”, fontSize: “60px” });
const handleImageUpload = (e) => {
const file = e.target.files[0];
if (file) {
setImage(URL.createObjectURL(file));
}
};
const generateAIStyles = async () => {
try {
const response = await axios.post(“http://localhost:5000/generate_styles”, { text });
setAiStyles(response.data);
} catch (error) {
console.error(“Error fetching AI styles”, error);
}
};
const downloadThumbnail = () => {
const canvas = document.createElement(“canvas”);
const ctx = canvas.getContext(“2d”);
canvas.width = 1280;
canvas.height = 720;
ctx.fillStyle = aiStyles.bgColor;
ctx.fillRect(0, 0, canvas.width, canvas.height);
if (image) {
const img = new Image();
img.src = image;
img.onload = () => {
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
addText(ctx);
};
} else {
addText(ctx);
}
function addText(ctx) {
ctx.fillStyle = aiStyles.textColor;
ctx.font = `bold ${aiStyles.fontSize} Arial`;
ctx.textAlign = “center”;
ctx.fillText(text, canvas.width / 2, canvas.height / 2);
const link = document.createElement(“a”);
link.href = canvas.toDataURL(“image/png”);
link.download = “thumbnail.png”;
link.click();
}
};
return (
);
}