import React, { useState, useEffect } from 'react'; import { Sparkles, Copy, RefreshCw, Image, Camera, Palette, Sun, Layers, Check, Zap, Smile, Monitor, Box, MapPin, User, MousePointer2, Wand2, Languages, BrainCircuit, Loader2 } from 'lucide-react'; import { GoogleGenerativeAI } from "@google/generative-ai"; // --- DATA LISTS (Exactly 20 items each) --- // Note: English values are used for generation, Bulgarian labels for UI const styles = [ { label: "Фотореалистично", value: "Photorealistic" }, { label: "Киберпънк", value: "Cyberpunk" }, { label: "Стиймпънк", value: "Steampunk" }, { label: "Аниме", value: "Anime" }, { label: "Дигитална илюстрация", value: "Digital Illustration" }, { label: "Маслени бои", value: "Oil Painting" }, { label: "Акварел", value: "Watercolor" }, { label: "3D Рендър", value: "3D Render" }, { label: "Пиксел арт", value: "Pixel Art" }, { label: "Винтидж", value: "Vintage 1950s photo" }, { label: "Полароид", value: "Polaroid" }, { label: "Комикс / Ноар", value: "Noir Comic" }, { label: "Ukiyo-e", value: "Ukiyo-e style" }, { label: "Мраморна скулптура", value: "Marble Sculpture" }, { label: "Оригами", value: "Origami paper art" }, { label: "Ниска полигоналност", value: "Low Poly" }, { label: "Сюрреализъм", value: "Surrealism" }, { label: "Графити / Стрийт арт", value: "Graffiti Art" }, { label: "Витраж (Стъкло)", value: "Stained Glass" }, { label: "Технически чертеж", value: "Blueprint Schematic" } ]; const materials = [ { label: "Стъкло", value: "Made of Glass" }, { label: "Дърво", value: "Carved Wood" }, { label: "Течен метал", value: "Liquid Metal" }, { label: "Пушек / Дим", value: "Made of Smoke" }, { label: "Лед / Кристал", value: "Ice and Crystal" }, { label: "Злато", value: "Pure Gold" }, { label: "Пластмаса", value: "Glossy Plastic" }, { label: "Керамика", value: "Ceramic" }, { label: "Плат / Текстил", value: "Fabric Texture" }, { label: "Кожа", value: "Leather" }, { label: "Козина", value: "Fur" }, { label: "Камък", value: "Rough Stone" }, { label: "Неонов газ", value: "Neon Gas" }, { label: "Слайм", value: "Slime" }, { label: "Хартия", value: "Paper Mache" }, { label: "Бетон", value: "Concrete" }, { label: "Кадифе", value: "Red Velvet" }, { label: "Латекс", value: "Shiny Latex" }, { label: "Облаци", value: "Made of Clouds" }, { label: "Огън", value: "Made of Fire" } ]; const lighting = [ { label: "Кинематографично", value: "Cinematic Lighting" }, { label: "Златен час", value: "Golden Hour" }, { label: "Студийно", value: "Studio Lighting" }, { label: "Неоново", value: "Neon Lights" }, { label: "Естествена", value: "Natural Light" }, { label: "Драматично", value: "Dramatic Shadows" }, { label: "Биолуминисценция", value: "Bioluminescence" }, { label: "Год-рейс (Лъчи)", value: "God Rays" }, { label: "Облачно", value: "Overcast" }, { label: "Фенерче", value: "Flashlight" }, { label: "Свещи", value: "Candlelight" }, { label: "Лунна светлина", value: "Moonlight" }, { label: "Контражур", value: "Rim Light" }, { label: "Обемна мъгла", value: "Volumetric Fog" }, { label: "Твърда светлина", value: "Hard Light" }, { label: "Софтбокс", value: "Softbox" }, { label: "Огън / Лава", value: "Firelight" }, { label: "Подводно", value: "Underwater Caustics" }, { label: "Стробоскоп", value: "Strobe Light" }, { label: "Силует", value: "Silhouette" } ]; const environments = [ { label: "Космос", value: "Deep Space" }, { label: "Пустиня", value: "Sahara Desert" }, { label: "Под водата", value: "Underwater Reef" }, { label: "Кибер град", value: "Cyberpunk City" }, { label: "Древни руини", value: "Ancient Ruins" }, { label: "Вълшебна гора", value: "Magic Forest" }, { label: "Студио (Празно)", value: "Empty Studio Void" }, { label: "Снежна планина", value: "Snowy Mountain" }, { label: "Вулкан", value: "Inside a Volcano" }, { label: "Плаж", value: "Tropical Beach" }, { label: "Библиотека", value: "Old Library" }, { label: "Лаборатория", value: "Sci-Fi Laboratory" }, { label: "Тъмница", value: "Dark Dungeon" }, { label: "Облачно кралство", value: "Cloud Kingdom" }, { label: "Марс", value: "Mars Surface" }, { label: "Сладка страна", value: "Candy Land" }, { label: "Къща с духове", value: "Haunted House" }, { label: "Ботаническа градина", value: "Botanical Garden" }, { label: "Небостъргач", value: "Skyscraper Rooftop" }, { label: "Пещера", value: "Crystal Cave" } ]; const cameras = [ { label: "Широк ъгъл", value: "Wide Angle" }, { label: "Макро", value: "Macro Lens" }, { label: "Дрон", value: "Drone View" }, { label: "Рибешко око", value: "Fisheye Lens" }, { label: "Телеобектив", value: "Telephoto Lens" }, { label: "Боке (Замъглено)", value: "Bokeh" }, { label: "Изометрично", value: "Isometric View" }, { label: "GoPro", value: "GoPro Footage" }, { label: "Микроскоп", value: "Microscope View" }, { label: "CCTV (Камера)", value: "CCTV Grainy" }, { label: "Термална", value: "Thermal Imaging" }, { label: "Рентген", value: "X-Ray" }, { label: "Pinhole", value: "Pinhole Camera" }, { label: "Наклонен (Dutch)", value: "Dutch Angle" }, { label: "Нисък ъгъл", value: "Low Angle" }, { label: "Висок ъгъл", value: "High Angle" }, { label: "Селфи", value: "Selfie Shot" }, { label: "Сателит", value: "Satellite View" }, { label: "360 Панорама", value: "360 Panorama" }, { label: "Телескоп", value: "Telescopic" } ]; const colors = [ { label: "Живи цветове", value: "Vibrant Colors" }, { label: "Пастелни", value: "Pastel Palette" }, { label: "Черно-бяло", value: "Black and White" }, { label: "Сепия", value: "Sepia Tone" }, { label: "Вейпъруейв", value: "Vaporwave Colors" }, { label: "Тъмни / Мрачни", value: "Dark Muted Tones" }, { label: "Златно и Черно", value: "Gold and Black" }, { label: "Топли тонове", value: "Warm Tones" }, { label: "Студени тонове", value: "Cool Tones" }, { label: "Неон", value: "Neon Palette" }, { label: "Монохромно", value: "Monochromatic" }, { label: "CMYK", value: "CMYK Printing" }, { label: "Киселинни", value: "Acid Colors" }, { label: "Земни тонове", value: "Earth Tones" }, { label: "Скъпоценни", value: "Jewel Tones" }, { label: "Металик", value: "Metallic Colors" }, { label: "Дъга", value: "Rainbow" }, { label: "Мат", value: "Matte Finish" }, { label: "Гланц", value: "High Gloss" }, { label: "Инфрачервено", value: "Infrared Color" } ]; const moods = [ { label: "Епично", value: "Epic" }, { label: "Мрачно", value: "Grim" }, { label: "Весело", value: "Cheerful" }, { label: "Мистериозно", value: "Mysterious" }, { label: "Романтично", value: "Romantic" }, { label: "Хаотично", value: "Chaotic" }, { label: "Спокойно", value: "Serene" }, { label: "Ефирно", value: "Ethereal" }, { label: "Меланхолично", value: "Melancholic" }, { label: "Ужасяващо", value: "Terrifying" }, { label: "Носталгично", value: "Nostalgic" }, { label: "Енергично", value: "Energetic" }, { label: "Съновидение", value: "Dreamy" }, { label: "Саматно", value: "Lonely" }, { label: "Величествено", value: "Majestic" }, { label: "Причудливо", value: "Whimsical" }, { label: "Апокалиптично", value: "Apocalyptic" }, { label: "Зен", value: "Zen" }, { label: "Психеделично", value: "Psychedelic" }, { label: "Напрегнато", value: "Tense" } ]; const artists = [ { label: "Ван Гог", value: "by Vincent van Gogh" }, { label: "Дали", value: "by Salvador Dali" }, { label: "Грег Рутковски", value: "by Greg Rutkowski" }, { label: "Алфонс Муха", value: "by Alphonse Mucha" }, { label: "Миядзаки", value: "by Hayao Miyazaki" }, { label: "Х.Р. Гигер", value: "by H.R. Giger" }, { label: "Бекшински", value: "by Zdzisław Beksiński" }, { label: "Да Винчи", value: "by Leonardo da Vinci" }, { label: "Пикасо", value: "by Pablo Picasso" }, { label: "Банкси", value: "by Banksy" }, { label: "RossDraws", value: "by RossDraws" }, { label: "Джунджи Ито", value: "by Junji Ito" }, { label: "Моне", value: "by Claude Monet" }, { label: "Климт", value: "by Gustav Klimt" }, { label: "Уорхол", value: "by Andy Warhol" }, { label: "Баския", value: "by Jean-Michel Basquiat" }, { label: "KAWS", value: "by KAWS" }, { label: "Мьобиус", value: "by Moebius" }, { label: "Густав Доре", value: "by Gustave Doré" }, { label: "Рене Магрит", value: "by René Magritte" } ]; const qualityModifiers = [ { label: "4K", value: "4K" }, { label: "8K", value: "8K" }, { label: "Високи детайли", value: "Highly Detailed" }, { label: "Шедьовър", value: "Masterpiece" }, { label: "Unreal Engine 5", value: "Unreal Engine 5" }, { label: "ArtStation", value: "Trending on ArtStation" }, { label: "V-Ray", value: "V-Ray Render" }, { label: "Остър фокус", value: "Sharp Focus" }, { label: "Ray Tracing", value: "Ray Tracing" }, { label: "Octane Render", value: "Octane Render" }, { label: "Блендер", value: "Blender 3D" }, { label: "Unity", value: "Unity Engine" }, { label: "Фотореализъм", value: "Photorealism" }, { label: "Без шум", value: "Denoise" }, { label: "HDR", value: "HDR" }, { label: "Пост-процесинг", value: "Post-Processing" }, { label: "Хроматична аберация", value: "Chromatic Aberration" }, { label: "ISO 100", value: "ISO 100" }, { label: "Замъгляване (Blur)", value: "Motion Blur" }, { label: "Зърнистост (Grain)", value: "Film Grain" } ]; export default function App() { // State - All are Arrays now for Multi-Select const [subject, setSubject] = useState(""); const [activeStyles, setActiveStyles] = useState([]); const [activeMaterials, setActiveMaterials] = useState([]); const [activeEnvironments, setActiveEnvironments] = useState([]); const [activeLighting, setActiveLighting] = useState([]); const [activeCameras, setActiveCameras] = useState([]); const [activeColors, setActiveColors] = useState([]); const [activeMoods, setActiveMoods] = useState([]); const [activeArtists, setActiveArtists] = useState([]); const [activeQualities, setActiveQualities] = useState([]); const [finalPrompt, setFinalPrompt] = useState(""); const [copied, setCopied] = useState(false); // Gemini State const [isAiLoading, setIsAiLoading] = useState(false); const [aiAction, setAiAction] = useState(null); // 'brainstorm', 'enhance', 'translate' // Universal Toggle Function for Multi-Select const toggleSelection = (list, setList, value) => { if (list.includes(value)) { setList(list.filter(item => item !== value)); } else { setList([...list, value]); } }; // Build Prompt - Flattens all arrays useEffect(() => { const parts = [ subject.trim(), ...activeEnvironments, ...activeMaterials, ...activeStyles, ...activeMoods, ...activeLighting, ...activeColors, ...activeCameras, ...activeArtists, ...activeQualities ]; // Filter empty values and join unique items const uniqueParts = [...new Set(parts.filter(Boolean))]; setFinalPrompt(uniqueParts.join(", ")); }, [subject, activeStyles, activeMaterials, activeEnvironments, activeLighting, activeCameras, activeColors, activeMoods, activeArtists, activeQualities]); // Helper to pick N random items from a list const pickRandom = (list, count) => { const shuffled = [...list].sort(() => 0.5 - Math.random()); return shuffled.slice(0, count).map(i => i.value); }; // --- GEMINI API FUNCTIONS --- const callGemini = async (mode) => { setIsAiLoading(true); setAiAction(mode); const apiKey = ""; // Runtime will provide this try { const genAI = new GoogleGenerativeAI(apiKey); const model = genAI.getGenerativeModel({ model: "gemini-2.5-flash-preview-09-2025" }); let prompt = ""; if (mode === 'brainstorm') { prompt = "Generate a highly creative, unique, and visual idea for an AI generated image. It could be surreal, sci-fi, fantasy, or realistic. Output ONLY the subject description in English, one or two sentences max. Do not add intro text."; } else if (mode === 'enhance') { if (!subject) throw new Error("No subject to enhance"); prompt = `Act as an expert prompt engineer for Midjourney. Rewrite the following simple subject to be highly descriptive, visual, and artistic. Keep it under 40 words. English only. Input: "${subject}"`; } else if (mode === 'translate') { if (!subject) throw new Error("No text to translate"); prompt = `Translate the following text to English. If it's already English, just correct any grammar. Output ONLY the translation. Text: "${subject}"`; } const result = await model.generateContent([prompt]); const response = await result.response; const text = response.text().trim(); setSubject(text); // If brainstorming, also randomize some chips for fun if (mode === 'brainstorm') { handleRandomChips(); } } catch (error) { console.error("Gemini API Error:", error); // Fallback for brainstorm if API fails or no key if (mode === 'brainstorm') { const randomSubjects = [ "Astronaut playing electric guitar on Mars", "Cyberpunk samurai in a rainy neon city", "Giant turtle carrying a village on its back", "Cute fluffy monster eating a donut" ]; setSubject(randomSubjects[Math.floor(Math.random() * randomSubjects.length)]); } } finally { setIsAiLoading(false); setAiAction(null); } }; const handleRandomChips = () => { setActiveStyles(pickRandom(styles, 2)); setActiveMaterials(pickRandom(materials, 1)); setActiveEnvironments(pickRandom(environments, 1)); setActiveLighting(pickRandom(lighting, 1)); setActiveCameras(pickRandom(cameras, 1)); setActiveColors(pickRandom(colors, 2)); setActiveMoods(pickRandom(moods, 1)); setActiveArtists(pickRandom(artists, 1)); setActiveQualities(pickRandom(qualityModifiers, 3)); }; // Main Random Button (Hybrid) const handleRandom = () => { // If user wants random, let's use Gemini for the subject if possible, or fallback callGemini('brainstorm'); }; const handleClear = () => { setSubject(""); setActiveStyles([]); setActiveMaterials([]); setActiveEnvironments([]); setActiveLighting([]); setActiveCameras([]); setActiveColors([]); setActiveMoods([]); setActiveArtists([]); setActiveQualities([]); }; const handleCopy = () => { if (!finalPrompt) return; const textarea = document.createElement("textarea"); textarea.value = finalPrompt; document.body.appendChild(textarea); textarea.select(); try { document.execCommand('copy'); setCopied(true); setTimeout(() => setCopied(false), 2000); } catch (err) { console.error('Failed to copy', err); } document.body.removeChild(textarea); }; // Reusable Multi-Select Chip Component const ChipGroup = ({ title, icon: Icon, options, activeList, setList, colorClass }) => (
Използвайте "✨ AI Идея" или изберете чипове...