import React, { useState, useCallback } from "react"; import { useFireproof } from "use-fireproof"; import { ImgGen } from "use-vibes"; export default function AnimeConverter() { const { database, useLiveQuery } = useFireproof("anime-converter-app"); const [dragActive, setDragActive] = useState(false); const [processing, setProcessing] = useState(false); const { docs: imageDocuments } = useLiveQuery("type", { key: "image", descending: true, }); const handleDrag = useCallback((e) => { e.preventDefault(); e.stopPropagation(); if (e.type === "dragenter" || e.type === "dragover") { setDragActive(true); } else if (e.type === "dragleave") { setDragActive(false); } }, []); const handleDrop = useCallback(async (e) => { e.preventDefault(); e.stopPropagation(); setDragActive(false); const files = e.dataTransfer?.files; if (files && files[0]) { await processImage(files[0]); } }, []); const handleFileInput = useCallback(async (e) => { const files = e.target.files; if (files && files[0]) { await processImage(files[0]); } e.target.value = ""; }, []); const processImage = async (file) => { if (!file.type.startsWith("image/")) { alert("画像ファイルを選択してください"); return; } setProcessing(true); try { const doc = { type: "image", prompt: "Transform this image into a beautiful anime girl (bishojo) style illustration. Keep the composition and pose similar but convert to high-quality Japanese anime art style with large expressive eyes, smooth skin, detailed hair, and vibrant colors. Make it look like a professional anime character illustration.", originalFileName: file.name, createdAt: Date.now(), _files: { original: file } }; await database.put(doc); } catch (err) { console.error("Error:", err); } finally { setProcessing(false); } }; const handleDelete = async (id) => { try { await database.del(id); } catch (err) { console.error("Error:", err); } }; return (

✨ アニメ変換 ✨

画像をアップロードして美少女アニメ風に変換！

ログイン不要・すぐに使える

document.getElementById("fileInput").click()} >

{processing ? "⏳" : dragActive ? "📥" : "🎨"}

{processing ? "処理中..." : dragActive ? "ここにドロップ！" : "クリックまたはドラッグ＆ドロップ" }

PNG, JPG, GIF など

{imageDocuments.length > 0 && (

🖼️ 変換履歴 {imageDocuments.length}件

{imageDocuments.map((doc) => (

{doc.originalFileName || "画像"}

{new Date(doc.createdAt).toLocaleString("ja-JP")}

))}

)} {imageDocuments.length === 0 && (

まだ変換された画像はありません

上のエリアに画像をドロップしてみよう！

)}

); }