import { useState, useRef } from "react";
export default function CartoonToReal() {
const [cartoonSrc, setCartoonSrc] = useState(null);
const [cartoonBase64, setCartoonBase64] = useState(null);
const [cartoonMime, setCartoonMime] = useState("image/jpeg");
const [realisticSrc, setRealisticSrc] = useState(null);
const [status, setStatus] = useState("idle");
const [statusMsg, setStatusMsg] = useState("");
const [error, setError] = useState("");
const canvasRef = useRef(null);
const processFile = (file) => {
if (!file || !file.type.startsWith("image/")) return;
setCartoonMime(file.type);
const reader = new FileReader();
reader.onload = (e) => {
setCartoonSrc(e.target.result);
setCartoonBase64(e.target.result.split(",")[1]);
setRealisticSrc(null);
setStatus("idle");
setError("");
};
reader.readAsDataURL(file);
};
const generateReal = async () => {
if (!cartoonBase64) return;
setStatus("analyzing");
setStatusMsg("Character analyze ho raha hai...");
setError("");
setRealisticSrc(null);
try {
const res = await fetch("https://api.anthropic.com/v1/messages", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
model: "claude-sonnet-4-20250514",
max_tokens: 1000,
messages: [{
role: "user",
content: [
{ type: "image", source: { type: "base64", media_type: cartoonMime, data: cartoonBase64 } },
{ type: "text", text: "This is a cartoon character. Write a detailed image generation prompt to create a PHOTOREALISTIC real human version of this character. Include: face shape, body type, skin tone, hair, clothing, expression, Indian village background, cinematic lighting. Write ONLY the prompt. No explanation. Max 150 words." }
]
}]
})
});
const data = await res.json();
if (!data.content?.[0]?.text) throw new Error("No response");
const prompt = data.content[0].text.trim();
setStatus("generating");
setStatusMsg("Realistic image ban rahi hai... (30-40 sec lagenge)");
const encoded = encodeURIComponent(prompt + ", photorealistic, 8k, cinematic, professional portrait");
const seed = Math.floor(Math.random() * 999999);
const imageUrl = `https://image.pollinations.ai/prompt/${encoded}?width=512&height=512&nologo=true&seed=${seed}&model=flux`;
const img = new Image();
img.crossOrigin = "anonymous";
await new Promise((resolve, reject) => {
img.onload = resolve;
img.onerror = reject;
img.src = imageUrl;
setTimeout(() => reject(new Error("timeout")), 90000);
});
setRealisticSrc(imageUrl);
setStatus("done");
} catch (err) {
setError("Error aaya. Dobara try karo.");
setStatus("error");
}
};
const downloadCombined = () => {
const canvas = canvasRef.current;
const ctx = canvas.getContext("2d");
const W = 1080, H = 540;
canvas.width = W; canvas.height = H;
ctx.fillStyle = "#0a0a0f";
ctx.fillRect(0, 0, W, H);
const img1 = new Image();
img1.onload = () => {
ctx.drawImage(img1, 0, 0, W / 2, H);
const g = ctx.createLinearGradient(W/2-2, 0, W/2+2, H);
g.addColorStop(0, "#f5c842"); g.addColorStop(1, "#e63b7a");
ctx.fillStyle = g; ctx.fillRect(W/2 - 2, 0, 4, H);
ctx.font = "bold 52px Arial"; ctx.fillStyle = "#f5c842";
ctx.textAlign = "center"; ctx.fillText("VS", W/2, H/2 + 18);
const img2 = new Image();
img2.crossOrigin = "anonymous";
img2.onload = () => {
ctx.drawImage(img2, W/2, 0, W/2, H);
ctx.fillStyle = "#000a"; ctx.fillRect(10, 10, 150, 36);
ctx.fillStyle = "#fff"; ctx.font = "bold 15px Arial"; ctx.textAlign = "left";
ctx.fillText("CARTOON", 20, 33);
ctx.fillStyle = "#f5c842"; ctx.fillRect(W/2+10, 10, 160, 36);
ctx.fillStyle = "#000"; ctx.fillText("REAL LIFE", W/2+20, 33);
const a = document.createElement("a");
a.download = "cartoon-vs-real.jpg";
a.href = canvas.toDataURL("image/jpeg", 0.95);
a.click();
};
img2.src = realisticSrc;
};
img1.src = cartoonSrc;
};
const isLoading = status === "analyzing" || status === "generating";
return (
{/* Header */}
✨ AI Powered Tool
CARTOON → REAL LIFE
Upload • AI Transform • Download
{/* Upload Box — plain visible input */}
{cartoonSrc ? "✅" : "๐จ"}
{cartoonSrc ? "Image load ho gayi! Neeche Generate karo" : "Apni cartoon image select karo"}
{ if (e.target.files[0]) processFile(e.target.files[0]); }}
style={{ width: "100%", padding: "12px", background: "#1e1b35", border: "1px solid #3a3060", borderRadius: 10, color: "#d0c8e8", fontSize: 14, cursor: "pointer", display: "block" }}
/>
{/* Preview + Buttons */}
{cartoonSrc && (
{/* Cartoon side */}
๐จ Cartoon
{/* VS */}
{/* Real side */}
{isLoading ? (
) : realisticSrc ? (
⚡ Real Life
) : (
๐ค
AI yahan realistic
)}
{/* Action Buttons */}
{status !== "done" && (
{isLoading ? "⏳ Generating..." : "⚡ Real Life Banao"}
)}
{status === "done" && (
<>
๐ฅ Download Image
๐ Retry
)}
{error && (
⚠️ {error}
)}
)}
);
}
{/* VS */}
{/* Real side */}
{isLoading ? (
) : realisticSrc ? (
) : (
)}
