import React, { useState } from 'react'; import { Upload, ImageIcon, Copy, RefreshCw, Check, Sparkles, Tag, FileText, Hash } from 'lucide-react'; export default function ImageTagGenerator() { const [image, setImage] = useState(null); const [imagePreview, setImagePreview] = useState(null); const [loading, setLoading] = useState(false); const [analysis, setAnalysis] = useState(null); const [copiedStates, setCopiedStates] = useState({}); const [history, setHistory] = useState([]); const handleImageUpload = (e) => { const file = e.target.files?.[0]; if (file) { processImage(file); } }; const handleDrop = (e) => { e.preventDefault(); const file = e.dataTransfer.files?.[0]; if (file && file.type.startsWith('image/')) { processImage(file); } }; const processImage = (file) => { setImage(file); const reader = new FileReader(); reader.onload = (e) => { setImagePreview(e.target.result); analyzeImage(e.target.result); }; reader.readAsDataURL(file); }; const analyzeImage = async (base64Image) => { setLoading(true); setAnalysis(null); try { const response = 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: "image/jpeg", data: base64Image.split(',')[1] } }, { type: "text", text: `Analiza esta imagen y genera etiquetas optimizadas para SEO. Responde ÚNICAMENTE con un objeto JSON (sin markdown, sin preamble) con esta estructura exacta: { "title": "Título corto y descriptivo (máximo 60 caracteres)", "description": "Descripción detallada de 2-3 oraciones sobre lo que muestra la imagen", "keywords": ["palabra1", "palabra2", "palabra3", "palabra4", "palabra5", "palabra6", "palabra7", "palabra8"], "categories": { "objetos": ["objeto1", "objeto2", "objeto3"], "colores": ["color1", "color2", "color3"], "emociones": ["emocion1", "emocion2"], "contexto": ["contexto1", "contexto2", "contexto3"] } }` } ] } ] }) }); const data = await response.json(); const textContent = data.content .filter(item => item.type === "text") .map(item => item.text) .join(""); const cleanText = textContent.replace(/```json|```/g, "").trim(); const parsedAnalysis = JSON.parse(cleanText); setAnalysis(parsedAnalysis); setHistory(prev => [{ preview: base64Image, analysis: parsedAnalysis, timestamp: new Date().toLocaleTimeString() }, ...prev.slice(0, 4)]); } catch (error) { console.error("Error analyzing image:", error); alert("Error al analizar la imagen. Por favor, intenta de nuevo."); } finally { setLoading(false); } }; const copyToClipboard = (text, key) => { navigator.clipboard.writeText(text); setCopiedStates(prev => ({ ...prev, [key]: true })); setTimeout(() => { setCopiedStates(prev => ({ ...prev, [key]: false })); }, 2000); }; const copyAll = () => { if (!analysis) return; const allText = `TÍTULO: ${analysis.title} DESCRIPCIÓN: ${analysis.description} PALABRAS CLAVE: ${analysis.keywords.join(', ')} CATEGORÍAS: Objetos: ${analysis.categories.objetos.join(', ')} Colores: ${analysis.categories.colores.join(', ')} Emociones: ${analysis.categories.emociones.join(', ')} Contexto: ${analysis.categories.contexto.join(', ')}`; copyToClipboard(allText, 'all'); }; const regenerate = () => { if (imagePreview) { analyzeImage(imagePreview); } }; return ( ); }