import React, { useState, useEffect } from 'react'; import { Sparkles, Layout, Layers, Palette, Type, Link as LinkIcon, MousePointer2, Copy, Check, Loader2, RefreshCw, Zap, ChevronRight, Info } from 'lucide-react'; const API_KEY = "AIzaSyD7WXREQuem-uRBSmwdSfOpydJTTSLzmpc"; // Environment will provide this export default function App() { const [activeMode, setActiveMode] = useState('manual'); // 'manual' | 'ai' const [loading, setLoading] = useState(false); const [copied, setCopied] = useState(false); const [outputPrompt, setOutputPrompt] = useState(null); const [toast, setToast] = useState(null); // Form States const [formData, setFormData] = useState({ headline: '', subheadline: '', benefits: [''], cta: '', price: '', ratio: 'square', visual: 'modern', primaryColor: '#3b82f6', secondaryColor: '#f43f5e', url: '' }); const visualStyles = [ { id: '3d', label: '3D Render', desc: 'Octane render style, depth, soft shadows' }, { id: 'clean', label: 'Clean', desc: 'Minimalist, lots of white space, airy' }, { id: 'modern', label: 'Modern', desc: 'Contemporary layout, sleek fonts' }, { id: 'tech', label: 'Tech', desc: 'Cyberpunk elements, circuits, digital glow' }, { id: 'creative', label: 'Creative', desc: 'Artistic, unique compositions' }, { id: 'fun', label: 'Fun', desc: 'Playful shapes, friendly atmosphere' }, { id: '2d', label: '2D Flat', desc: 'Flat vector illustration style' }, { id: 'colorful', label: 'Colorful', desc: 'High saturation, vibrant gradients' }, { id: 'elegant', label: 'Elegant', desc: 'Luxury, serif fonts, premium feel' }, { id: 'paper', label: 'Paper Cut', desc: 'Layered paper texture, shadows' }, { id: 'handwriting', label: 'Hand Writing', desc: 'Personal touch, script fonts' }, ]; const showToast = (message) => { setToast(message); setTimeout(() => setToast(null), 3000); }; const handleCopy = () => { const text = JSON.stringify(outputPrompt, null, 2); const textArea = document.createElement("textarea"); textArea.value = text; document.body.appendChild(textArea); textArea.select(); try { document.execCommand('copy'); setCopied(true); showToast("Berhasil disalin ke clipboard!"); setTimeout(() => setCopied(false), 2000); } catch (err) { showToast("Gagal menyalin."); } document.body.removeChild(textArea); }; const addBenefit = () => { setFormData({ ...formData, benefits: [...formData.benefits, ''] }); }; const updateBenefit = (index, value) => { const newBenefits = [...formData.benefits]; newBenefits[index] = value; setFormData({ ...formData, benefits: newBenefits }); }; const removeBenefit = (index) => { const newBenefits = formData.benefits.filter((_, i) => i !== index); setFormData({ ...formData, benefits: newBenefits }); }; const fetchAIContent = async (retryCount = 0) => { try { const systemPrompt = `You are a professional conversion copywriter. Analyze the provided product context/URL and generate high-converting poster copy. Return ONLY a JSON object with this structure: { "headline": "string (eye-catching, bold)", "subheadline": "string", "benefits": ["benefit 1", "benefit 2", "benefit 3"], "cta": "string (strong call to action)", "price": "string (optional or found in text)" }`; const userQuery = `Product Info/URL: ${formData.url}. Generate copy for a ${formData.visual} style poster.`; const response = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${API_KEY}`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ contents: [{ parts: [{ text: userQuery }] }], systemInstruction: { parts: [{ text: systemPrompt }] }, generationConfig: { responseMimeType: "application/json" } }) }); if (!response.ok) throw new Error('API Error'); const data = await response.json(); const content = JSON.parse(data.candidates?.[0]?.content?.parts?.[0]?.text || "{}"); return content; } catch (error) { if (retryCount < 5) { const delay = Math.pow(2, retryCount) * 1000; await new Promise(resolve => setTimeout(resolve, delay)); return fetchAIContent(retryCount + 1); } throw error; } }; const generatePrompt = async () => { setLoading(true); try { let finalContent = { ...formData }; if (activeMode === 'ai') { if (!formData.url) { showToast("Mohon masukkan link landing page!"); setLoading(false); return; } const aiData = await fetchAIContent(); finalContent = { ...formData, ...aiData }; } // Construct the JSON Prompt for Image Gen const aspectRatios = { feed: '4:5', story: '9:16', square: '1:1' }; const result = { meta: { generator: "CREADS AI", timestamp: new Date().toISOString(), version: "1.0" }, design_specs: { aspect_ratio: aspectRatios[finalContent.ratio], visual_style: finalContent.visual, color_palette: { primary: finalContent.primaryColor, secondary: finalContent.secondaryColor } }, content_hierarchy: { title: { text: finalContent.headline.toUpperCase(), style: "Bold, Eye-catching, High-contrast", priority: 1 }, subtitle: { text: finalContent.subheadline, style: "Modern, Elegant", priority: 2 }, product_highlights: finalContent.benefits.filter(b => b.trim() !== ''), call_to_action: { text: finalContent.cta, style: "Prominent button, High visibility, Action-oriented", priority: 1 }, price_tag: finalContent.price || "N/A" }, ai_instruction: `Create a professional product advertisement poster. Style: ${finalContent.visual} aesthetic with ${finalContent.primaryColor} and ${finalContent.secondaryColor} branding. The composition should be ${finalContent.ratio === 'story' ? 'vertical' : 'balanced'}. Typography: Bold and clear. The CTA "${finalContent.cta}" must be the most prominent visual element after the product. Lighting: Studio lighting, sharp focus, high commercial quality.` }; setOutputPrompt(result); showToast("Prompt berhasil dibuat!"); } catch (error) { showToast("Gagal memproses data. Coba lagi."); } finally { setLoading(false); } }; return (

{/* Toast Notification */} {toast && (

{toast}

)} {/* Header */}

CREADS

{/* Left Panel: Inputs */}

Generate Poster Prompt

Ubah ide produkmu menjadi instruksi desain profesional dalam hitungan detik.

{/* Mode Toggle */}

{activeMode === 'manual' ? ( <>

Headline setFormData({...formData, headline: e.target.value})} />

Subheadline setFormData({...formData, subheadline: e.target.value})} />

Benefit Produk {formData.benefits.map((b, i) => (

updateBenefit(i, e.target.value)} /> {formData.benefits.length > 1 && ( )}

))}

CTA (Call to Action) setFormData({...formData, cta: e.target.value})} />

Harga (Opsional) setFormData({...formData, price: e.target.value})} />

) : (

Link Landing Page setFormData({...formData, url: e.target.value})} />

AI akan menganalisis konten, headline, dan benefit dari link tersebut secara otomatis.

)}

Pilih Ratio

{['feed', 'story', 'square'].map(r => ( ))}

Branding Color

setFormData({...formData, primaryColor: e.target.value})} className="w-12 h-12 rounded-lg cursor-pointer border-none p-0" /> PRIMARY

setFormData({...formData, secondaryColor: e.target.value})} className="w-12 h-12 rounded-lg cursor-pointer border-none p-0" /> SECONDARY

Gaya Visual (Style)

{visualStyles.map(v => ( ))}

{/* Right Panel: Output */}

PROMPT_OUTPUT.JSON

{outputPrompt ? (

                      {JSON.stringify(outputPrompt, null, 2)}

) : (

Hasil JSON prompt akan muncul di sini setelah Anda melakukan generate.

)} {outputPrompt && (

)}

{/* Tips / Guide */}

Quick Tips

• Gunakan mode AI untuk ekstraksi konten yang lebih cepat.
• JSON ini dirancang untuk ChatGPT/Gemini dengan instruksi layout terperinci.
• Warna branding membantu konsistensi visual pada hasil desain.