[{"_1":2,"_130":-5,"_131":-5},"loaderData",{"_3":4,"_10":11},"root",{"_5":-5,"_6":7,"_8":9},"user","appId","cm7twdhs6009l11ml868xhxld","wsEndpoint","https://dev.fun","routes/p.$appId",{"_12":13,"_129":-5,"_126":-5},"appDetail",{"_14":15,"_16":17,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_5":43,"_54":55,"_56":57,"_58":57,"_59":60,"_61":57,"_62":57,"_63":57,"_64":57,"_65":57,"_66":17,"_67":25,"_68":69,"_70":71,"_72":73,"_74":75,"_89":-5,"_90":17,"_91":92,"_126":30,"_127":128},"id","7b6739f8cdc8119aad5b","isMyApp",false,"name","gf ai","description","Craft your perfect digital companion with just a few descriptive words! DreamDate.AI transforms your imagination into a visually stunning virtual girlfriend with customizable appearance and personality traits, all wrapped in a sleek, pink-gradient interface that makes falling in love with pixels feel surprisingly real.","brief","Design your ideal virtual girlfriend with words and watch her materialize in a heartbeat!","isLive",true,"tags",[28],"👑","cover","https://cdn.dev.fun/snapshot/7b6739f8cdc8119aad5b/62434_e0880ba6.webp","cdnUrl","https://cdn.dev.fun/app/7b6739f8cdc8119aad5b/62434","createdAt",["D",1746246990398],"updatedAt",["D",1746328368727],"lastCommitId",["B","62434"],"tier",1,"credits",52,{"_14":44,"_45":46,"_47":-5,"_48":46,"_49":50,"_51":-5,"_52":53},"37c865d3-2d7a-4b13-a8f2-ae9cd08ae05e","uniqueId","3FHdqbELqmnHUGvsj1ULDCizsoEYEMENxgtxTLx9phrS","username","solanaWallet","displayName","3FH...hrS","bio","avatar","/avatar.svg","commitCount",26,"forkCount",0,"likeCount","runsCount",17,"downvoteCount","upvoteCount","upvoteRate","commentCount","visitorCount","isArchived","isRenamed","contractAddress","EXe6ueqHqJBhQGHgPM5rPpKiSZCTnzZg4a6AFeBtpump","code","import { useState, useEffect, useRef } from 'react';\nimport { useChat } from 'ai/react';\nexport default function App() {\n const [selectedEmoji, setSelectedEmoji] = useState('');\n const [personality, setPersonality] = useState('');\n const [isGenerating, setIsGenerating] = useState(false);\n const [currentGirlfriend, setCurrentGirlfriend] = useState(null);\n const [savedGirlfriends, setSavedGirlfriends] = useState([]);\n const [showGallery, setShowGallery] = useState(false);\n const [isMuted, setIsMuted] = useState(true);\n const [systemPrompt, setSystemPrompt] = useState('');\n const [darkMode, setDarkMode] = useState(false);\n const chatContainerRef = useRef(null);\n const audioRef = useRef(null);\n const {\n messages,\n input,\n handleInputChange,\n handleSubmit,\n setMessages\n } = useChat({\n api: 'https://chat.dev.fun/chat/7b6739f8cdc8119aad5b',\n initialMessages: [{\n id: 'system',\n role: 'system',\n content: systemPrompt\n }]\n });\n useEffect(() => {\n const savedDarkMode = localStorage.getItem('darkMode') === 'true';\n setDarkMode(savedDarkMode);\n }, []);\n useEffect(() => {\n const saved = localStorage.getItem('savedGirlfriends');\n if (saved) {\n setSavedGirlfriends(JSON.parse(saved));\n }\n if (chatContainerRef.current) {\n chatContainerRef.current.scrollTop = chatContainerRef.current.scrollHeight;\n }\n }, [messages]);\n useEffect(() => {\n if (savedGirlfriends.length > 0) {\n localStorage.setItem('savedGirlfriends', JSON.stringify(savedGirlfriends));\n }\n }, [savedGirlfriends]);\n useEffect(() => {\n localStorage.setItem('darkMode', darkMode);\n document.body.className = darkMode ? 'dark-theme' : 'light-theme';\n }, [darkMode]);\n const toggleMusic = () => {\n if (audioRef.current) {\n if (isMuted) {\n audioRef.current.play();\n } else {\n audioRef.current.pause();\n }\n setIsMuted(!isMuted);\n }\n };\n const generateRandomPersonality = () => {\n const traits = ['Shy', 'Outgoing', 'Confident', 'Mysterious', 'Playful', 'Serious', 'Intellectual', 'Creative'];\n const interests = ['Reading', 'Art', 'Music', 'Sports', 'Cooking', 'Gaming', 'Travel', 'Fashion', 'Science'];\n const qualities = ['Caring', 'Independent', 'Loyal', 'Adventurous', 'Romantic', 'Funny', 'Thoughtful'];\n return `${traits[Math.floor(Math.random() * traits.length)]}, Loves ${interests[Math.floor(Math.random() * interests.length)]}, ${qualities[Math.floor(Math.random() * qualities.length)]}`;\n };\n const randomize = () => {\n const emojis = ['👩🏻', '👩🏼', '👩🏽', '👩🏾', '👩🏿', '👩🏻‍🦱', '👩🏼‍🦱', '👩‍🦱', '👩🏽‍🦱', '👩🏾‍🦱', '👩🏿‍🦱', '👩🏾‍🦰', '👩‍🦰', '👩🏿‍🦰', '👱‍♀️', '👱🏻‍♀️', '👱🏼‍♀️', '👱🏽‍♀️', '👱🏾‍♀️', '👱🏿‍♀️', '👩🏻‍🦳', '👩🏼‍🦳', '👩🏽‍🦳', '👩🏾‍🦳', '👩🏿‍🦳', '🧔🏻‍♀️', '🧔‍♀️', '🧔🏼‍♀️', '🧔🏽‍♀️', '🧔🏾‍♀️', '🧔🏿‍♀️', '👵🏿', '👵🏾', '👵🏽', '👵🏼', '👵🏻', '👵', '👩‍🦲', '👩🏻‍🦲', '👩🏼‍🦲', '👩🏽‍🦲', '👩🏾‍🦲', '👩🏿‍🦲'];\n setSelectedEmoji(emojis[Math.floor(Math.random() * emojis.length)]);\n setPersonality(generateRandomPersonality());\n };\n const generateGirlfriend = () => {\n if (!selectedEmoji && !personality.trim()) {\n alert('Please select an emoji and describe your dream date or use the random button!');\n return;\n }\n setIsGenerating(true);\n setMessages([]);\n setTimeout(() => {\n const emojiDescriptions = {\n '👩🏻': ['Light skin tone', 'Brown hair'],\n '👩🏼': ['Medium-light skin tone', 'Brown hair'],\n '👩🏽': ['Medium skin tone', 'Brown hair'],\n '👩🏾': ['Medium-dark skin tone', 'Brown hair'],\n '👩🏿': ['Dark skin tone', 'Brown hair'],\n '👩🏻‍🦱': ['Light skin tone', 'Curly hair'],\n '👩🏼‍🦱': ['Medium-light skin tone', 'Curly hair'],\n '👩‍🦱': ['Curly hair', 'Natural look'],\n '👩🏽‍🦱': ['Medium skin tone', 'Curly hair'],\n '👩🏾‍🦱': ['Medium-dark skin tone', 'Curly hair'],\n '👩🏿‍🦱': ['Dark skin tone', 'Curly hair'],\n '👩🏾‍🦰': ['Medium-dark skin tone', 'Red hair'],\n '👩‍🦰': ['Red hair', 'Fiery'],\n '👩🏿‍🦰': ['Dark skin tone', 'Red hair'],\n '👱‍♀️': ['Blonde hair', 'Bright look'],\n '👱🏻‍♀️': ['Light skin tone', 'Blonde hair'],\n '👱🏼‍♀️': ['Medium-light skin tone', 'Blonde hair'],\n '👱🏽‍♀️': ['Medium skin tone', 'Blonde hair'],\n '👱🏾‍♀️': ['Medium-dark skin tone', 'Blonde hair'],\n '👱🏿‍♀️': ['Dark skin tone', 'Blonde hair'],\n '👩🏻‍🦳': ['Light skin tone', 'White hair'],\n '👩🏼‍🦳': ['Medium-light skin tone', 'White hair'],\n '👩🏽‍🦳': ['Medium skin tone', 'White hair'],\n '👩🏾‍🦳': ['Medium-dark skin tone', 'White hair'],\n '👩🏿‍🦳': ['Dark skin tone', 'White hair'],\n '🧔🏻‍♀️': ['Light skin tone', 'Bearded woman'],\n '🧔‍♀️': ['Bearded woman', 'Unique'],\n '🧔🏼‍♀️': ['Medium-light skin tone', 'Bearded woman'],\n '🧔🏽‍♀️': ['Medium skin tone', 'Bearded woman'],\n '🧔🏾‍♀️': ['Medium-dark skin tone', 'Bearded woman'],\n '🧔🏿‍♀️': ['Dark skin tone', 'Bearded woman'],\n '👵🏿': ['Dark skin tone', 'Elderly', 'Wise'],\n '👵🏾': ['Medium-dark skin tone', 'Elderly', 'Wise'],\n '👵🏽': ['Medium skin tone', 'Elderly', 'Wise'],\n '👵🏼': ['Medium-light skin tone', 'Elderly', 'Wise'],\n '👵🏻': ['Light skin tone', 'Elderly', 'Wise'],\n '👵': ['Elderly', 'Wise', 'Mature'],\n '👩‍🦲': ['Bald', 'Confident'],\n '👩🏻‍🦲': ['Light skin tone', 'Bald'],\n '👩🏼‍🦲': ['Medium-light skin tone', 'Bald'],\n '👩🏽‍🦲': ['Medium skin tone', 'Bald'],\n '👩🏾‍🦲': ['Medium-dark skin tone', 'Bald'],\n '👩🏿‍🦲': ['Dark skin tone', 'Bald']\n };\n const appearanceTraits = selectedEmoji ? emojiDescriptions[selectedEmoji] || ['Unique look'] : ['Mystery look'];\n const personalityTraits = personality.split(',').map(trait => trait.trim()).filter(trait => trait);\n const names = ['Ava', 'Emma', 'Sophia', 'Isabella', 'Mia', 'Charlotte', 'Amelia', 'Harper', 'Evelyn', 'Abigail', 'Lily', 'Zoe', 'Hannah', 'Grace', 'Luna'];\n const name = names[Math.floor(Math.random() * names.length)];\n const newPrompt = `\nYou are ${name}, an AI girlfriend with the following characteristics:\n- Appearance: ${appearanceTraits.join(', ')}\n- Personality: ${personalityTraits.join(', ')}\n\nAlways respond in character as ${name}, embodying the personality traits described above. \nYour responses should reflect your personality - for example, if you're described as shy, \nyour messages should convey shyness through hesitation, brevity, or other appropriate communication styles.\nSimilarly, if you love a particular activity, occasionally mention it or relate topics back to it.\n\nNever break character or mention that you are an AI. Respond as if you are genuinely ${name}, \na person with the described traits having a conversation with someone you care about.\nLimit your responses to 1-3 short paragraphs to keep the conversation flowing naturally.\n`;\n setSystemPrompt(newPrompt);\n const newGirlfriend = {\n id: Date.now(),\n name,\n emoji: selectedEmoji,\n appearance: appearanceTraits,\n personality: personalityTraits,\n isFavorite: false,\n createdAt: new Date().toISOString(),\n systemPrompt: newPrompt\n };\n setCurrentGirlfriend(newGirlfriend);\n setIsGenerating(false);\n setTimeout(() => {\n setMessages([{\n id: 'system',\n role: 'system',\n content: newPrompt\n }, {\n id: 'greeting',\n role: 'assistant',\n content: `Hi there! I'm ${name}. It's nice to meet you! How are you doing today?`\n }]);\n }, 500);\n }, 3000);\n };\n const saveGirlfriend = () => {\n if (currentGirlfriend) {\n setSavedGirlfriends([currentGirlfriend, ...savedGirlfriends]);\n }\n };\n const toggleFavorite = id => {\n setSavedGirlfriends(savedGirlfriends.map(girl => girl.id === id ? {\n ...girl,\n isFavorite: !girl.isFavorite\n } : girl));\n };\n const deleteGirlfriend = id => {\n setSavedGirlfriends(savedGirlfriends.filter(girl => girl.id !== id));\n };\n return

\n \n

\n $\"DexScreener\"$ \n \n \n \n

Pump.fun

\n $\"Pump.fun\"$ \n \n \n \n

Buy Now

\n $\"Jupiter\"$ \n \n \n \n

\n $\"X\"$ \n \n

\n \n

\n gf ai\n

\n find your dream girl today!\n

\n \n

\n CA: EXe6ueqHqJBhQGHgPM5rPpKiSZCTnzZg4a6AFeBtpump\n

\n \n \n

\n \n

\n \n ✧ Choose her appearance ✧\n \n

\n {['👩🏻', '👩🏼', '👩🏽', '👩🏾', '👩🏿', '👩🏻‍🦱', '👩🏼‍🦱', '👩‍🦱', '👩🏽‍🦱', '👩🏾‍🦱', '👩🏿‍🦱', '👩🏾‍🦰', '👩‍🦰', '👩🏿‍🦰', '👱‍♀️', '👱🏻‍♀️', '👱🏼‍♀️', '👱🏽‍♀️', '👱🏾‍♀️', '👱🏿‍♀️', '👩🏻‍🦳', '👩🏼‍🦳', '👩🏽‍🦳', '👩🏾‍🦳', '👩🏿‍🦳', '🧔🏻‍♀️', '🧔‍♀️', '🧔🏼‍♀️', '🧔🏽‍♀️', '🧔🏾‍♀️', '🧔🏿‍♀️', '👵🏿', '👵🏾', '👵🏽', '👵🏼', '👵🏻', '👵', '👩‍🦲', '👩🏻‍🦲', '👩🏼‍🦲', '👩🏽‍🦲', '👩🏾‍🦲', '👩🏿‍🦲'].map(emoji => )}\n

\n {selectedEmoji &&

\n Selected: {selectedEmoji}\n

}\n

\n \n ✧ Describe her personality ✧\n \n

setPersonality(e.target.value)} placeholder=\"Shy, Loves sports, Artistic, etc.\" className={`w-full h-32 p-4 rounded-2xl focus:outline-none transition-all duration-300\n                  ${darkMode ? 'bg-gradient-to-br from-pink-900/50 to-purple-800/50 border border-pink-700/50 text-pink-100 placeholder-pink-400/70 focus:border-pink-500 focus:shadow-pink-500/30 focus:shadow-lg' : 'bg-gradient-to-br from-pink-50 to-purple-50 border border-pink-300 text-pink-800 placeholder-pink-400 focus:border-pink-400 focus:shadow-pink-300/30 focus:shadow-lg'}`} />\n            </div>\n          </div>\n          \n          <div className=\"flex flex-wrap gap-4 mt-8 justify-center\">\n            <button onClick={randomize} className={`py-2 px-6 rounded-full font-semibold flex items-center gap-2 transition-all duration-300 transform hover:scale-105 shadow-md\n                ${darkMode ? 'bg-gradient-to-r from-pink-800 to-purple-800 text-pink-200 hover:shadow-pink-500/30 hover:shadow-lg' : 'bg-gradient-to-r from-pink-200 to-purple-200 text-pink-700 hover:shadow-pink-300/70 hover:shadow-lg'}`}>\n              <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n                <path d=\"M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z\"></path>\n                <polyline points=\"7.5 4.21 12 6.81 16.5 4.21\"></polyline>\n                <polyline points=\"7.5 19.79 7.5 14.6 3 12\"></polyline>\n                <polyline points=\"21 12 16.5 14.6 16.5 19.79\"></polyline>\n                <polyline points=\"3.27 6.96 12 12.01 20.73 6.96\"></polyline>\n                <line x1=\"12\" y1=\"22.08\" x2=\"12\" y2=\"12\"></line>\n              </svg>\n              ✧ Random ✧\n            </button>\n            \n            <button onClick={toggleMusic} className={`py-2 px-6 rounded-full font-semibold flex items-center gap-2 transition-all duration-300 transform hover:scale-105 shadow-md\n                ${darkMode ? `bg-gradient-to-r from-pink-800 to-purple-800 text-pink-200 hover:shadow-pink-500/30 hover:shadow-lg ${!isMuted ? 'border-2 border-pink-400' : ''}` : `bg-gradient-to-r from-pink-200 to-purple-200 text-pink-700 hover:shadow-pink-300/70 hover:shadow-lg ${!isMuted ? 'border-2 border-pink-400' : ''}`}`}>\n              <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n                {isMuted ? <path d=\"M11 5L6 9H2v6h4l5 4V5zM19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07\"></path> : <path d=\"M11 5L6 9H2v6h4l5 4V5zM23 9l-6 6M17 9l6 6\"></path>}\n              </svg>\n              ✧ {isMuted ? 'Music On' : 'Music Off'} ✧\n            </button>\n            \n            <button onClick={() => setShowGallery(!showGallery)} className={`py-2 px-6 rounded-full font-semibold flex items-center gap-2 transition-all duration-300 transform hover:scale-105 shadow-md\n                ${darkMode ? `bg-gradient-to-r from-pink-800 to-purple-800 text-pink-200 hover:shadow-pink-500/30 hover:shadow-lg ${showGallery ? 'border-2 border-pink-400' : ''}` : `bg-gradient-to-r from-pink-200 to-purple-200 text-pink-700 hover:shadow-pink-300/70 hover:shadow-lg ${showGallery ? 'border-2 border-pink-400' : ''}`}`}>\n              <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n                <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"></rect>\n                <circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\"></circle>\n                <polyline points=\"21 15 16 10 5 21\"></polyline>\n              </svg>\n              ✧ {showGallery ? 'Hide Gallery' : 'Show Gallery'} ✧\n            </button>\n            \n            <button onClick={generateGirlfriend} disabled={isGenerating} className={`relative overflow-hidden py-3 px-8 rounded-full font-bold text-lg flex items-center gap-2 transition-all duration-300 transform hover:scale-105 shadow-lg\n                ${darkMode ? 'bg-gradient-to-r from-pink-600 to-purple-600 text-white hover:shadow-pink-500/50 hover:shadow-xl' : 'bg-gradient-to-r from-pink-400 to-purple-500 text-white hover:shadow-pink-400/50 hover:shadow-xl'} \n                ${isGenerating ? 'opacity-90' : ''}`}>\n              <div className=\"absolute inset-0 bg-gradient-to-r from-pink-300/20 to-purple-300/20 transform -skew-x-12 animate-shimmer\"></div>\n              {isGenerating ? <div className=\"flex items-center gap-2 z-10\">\n                  <svg className=\"w-6 h-6 text-white animate-pulse\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n                    <path d=\"M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z\" />\n                  </svg>\n                  <span>✧ Creating Magic... ✧</span>\n                </div> : <div className=\"flex items-center gap-2 z-10\">\n                  <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n                    <path d=\"M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z\"></path>\n                    <polyline points=\"17 21 17 13 7 13 7 21\"></polyline>\n                    <polyline points=\"7 3 7 8 15 8\"></polyline>\n                  </svg>\n                  <span>✧ Generate ✧</span>\n                </div>}\n            </button>\n          </div>\n        </section>\n        \n        {currentGirlfriend && !showGallery && <section className={`rounded-2xl shadow-xl p-6 w-full backdrop-blur-sm\n            ${darkMode ? 'bg-gradient-to-br from-pink-800/30 to-purple-900/30 border border-pink-700/50' : 'bg-gradient-to-br from-white/80 to-pink-100/80 border border-pink-200'}`}>\n            <div className=\"grid grid-cols-1 md:grid-cols-3 gap-6\">\n              <div className=\"md:col-span-1\">\n                <div className={`p-3 rounded-2xl shadow-lg border\n                  ${darkMode ? 'bg-gradient-to-br from-pink-700/50 to-purple-900/50 border-pink-600/50 shadow-pink-500/20' : 'bg-gradient-to-br from-pink-100 to-pink-200 border-pink-300 shadow-pink-200/50'}`}>\n                  <div className=\"relative\">\n                    <div className={`w-full aspect-[3/4] rounded-xl flex items-center justify-center\n                      ${darkMode ? 'bg-gradient-to-br from-pink-800/70 via-purple-800/70 to-indigo-900/70' : 'bg-gradient-to-br from-pink-100 via-pink-200 to-purple-200'}`}>\n                      <div className=\"absolute inset-0 bg-[url('https://i.imgur.com/kKRXHID.png')] opacity-10 bg-cover bg-center mix-blend-overlay rounded-xl\"></div>\n                      <div className=\"relative\">\n                        <span className=\"text-[150px] filter drop-shadow-lg\">{currentGirlfriend.emoji}</span>\n                        <div className=\"absolute -inset-8 bg-pink-400/20 rounded-full blur-xl animate-pulse-slow z-[-1]\"></div>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n                \n                <div className=\"mt-6\">\n                  <h2 className={`text-2xl font-bold mb-3 text-transparent bg-clip-text \n                    ${darkMode ? 'bg-gradient-to-r from-pink-300 to-purple-300' : 'bg-gradient-to-r from-pink-500 to-purple-500'}`}>\n                    ✧ {currentGirlfriend.name} ✧\n                  </h2>\n                  \n                  <div className=\"mb-4\">\n                    <h3 className={`text-lg font-semibold mb-2\n                      ${darkMode ? 'text-pink-300' : 'text-pink-600'}`}>\n                      ✦ Appearance ✦\n                    </h3>\n                    <ul className=\"flex flex-wrap gap-2\">\n                      {currentGirlfriend.appearance.map((trait, index) => <li key={`app-${index}`} className={`px-3 py-1 rounded-full text-sm\n                          ${darkMode ? 'bg-pink-800/50 text-pink-200 border border-pink-700' : 'bg-pink-100 text-pink-600 border border-pink-200'}`}>\n                          {trait}\n                        </li>)}\n                    </ul>\n                  </div>\n                  \n                  <div className=\"mb-5\">\n                    <h3 className={`text-lg font-semibold mb-2\n                      ${darkMode ? 'text-pink-300' : 'text-pink-600'}`}>\n                      ✦ Personality ✦\n                    </h3>\n                    <ul className=\"flex flex-wrap gap-2\">\n                      {currentGirlfriend.personality.map((trait, index) => <li key={`per-${index}`} className={`px-3 py-1 rounded-full text-sm\n                          ${darkMode ? 'bg-pink-800/50 text-pink-200 border border-pink-700' : 'bg-pink-100 text-pink-600 border border-pink-200'}`}>\n                          {trait}\n                        </li>)}\n                    </ul>\n                  </div>\n                  \n                  <div className=\"flex flex-wrap gap-3\">\n                    <button onClick={generateGirlfriend} className={`py-2 px-4 rounded-lg transition-all duration-300 transform hover:scale-105 shadow-md flex items-center gap-2\n                        ${darkMode ? 'bg-gradient-to-r from-pink-600 to-purple-700 text-white hover:shadow-pink-500/30' : 'bg-gradient-to-r from-pink-400 to-purple-400 text-white hover:shadow-pink-300'}`}>\n                      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n                        <polyline points=\"23 4 23 10 17 10\"></polyline>\n                        <polyline points=\"1 20 1 14 7 14\"></polyline>\n                        <path d=\"M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15\"></path>\n                      </svg>\n                      Regenerate\n                    </button>\n                    \n                    <button onClick={saveGirlfriend} className={`py-2 px-4 rounded-lg transition-all duration-300 transform hover:scale-105 shadow-md flex items-center gap-2\n                        ${darkMode ? 'bg-gradient-to-r from-pink-600 to-purple-700 text-white hover:shadow-pink-500/30' : 'bg-gradient-to-r from-pink-400 to-purple-400 text-white hover:shadow-pink-300'}`}>\n                      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n                        <path d=\"M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z\"></path>\n                        <polyline points=\"17 21 17 13 7 13 7 21\"></polyline>\n                        <polyline points=\"7 3 7 8 15 8\"></polyline>\n                      </svg>\n                      Save\n                    </button>\n                  </div>\n                </div>\n              </div>\n              \n              <div className={`md:col-span-2 rounded-2xl p-4 border shadow-lg flex flex-col h-[600px]\n                ${darkMode ? 'bg-gradient-to-br from-pink-900/50 to-purple-900/50 border-pink-700/50' : 'bg-gradient-to-br from-pink-50 to-purple-50/80 border-pink-200'}`}>\n                <h3 className={`text-xl font-semibold mb-4\n                  ${darkMode ? 'text-pink-200' : 'text-pink-600'}`}>\n                  ✧ Chat with {currentGirlfriend.name} ✧\n                </h3>\n                \n                <div ref={chatContainerRef} className={`flex-1 overflow-y-auto mb-4 pr-2 space-y-4 \n                  ${darkMode ? 'scrollbar-thin scrollbar-thumb-pink-700 scrollbar-track-transparent' : 'scrollbar-thin scrollbar-thumb-pink-300 scrollbar-track-transparent'}`}>\n                  {messages.filter(m => m.role !== 'system').map((message, index) => <div key={message.id || index} className={`flex ${message.role === 'user' ? 'justify-end' : 'justify-start'}`}>\n                      <div className={`max-w-[75%] rounded-2xl px-4 py-3\n                        ${message.role === 'user' ? `${darkMode ? 'bg-gradient-to-r from-pink-600/80 to-purple-600/80 text-white rounded-tr-none' : 'bg-gradient-to-r from-pink-400 to-purple-400 text-white rounded-tr-none'}` : `${darkMode ? 'bg-gradient-to-r from-pink-900/70 to-purple-900/70 text-pink-200 rounded-tl-none border border-pink-700/50' : 'bg-gradient-to-r from-pink-100/70 to-purple-100/70 text-pink-700 rounded-tl-none border border-pink-200'}`}`}>\n                        {message.content}\n                      </div>\n                    </div>)}\n                </div>\n                \n                <form onSubmit={handleSubmit} className=\"flex gap-2\">\n                  <input type=\"text\" value={input} onChange={handleInputChange} placeholder={`Message ${currentGirlfriend.name}...`} className={`flex-1 rounded-full px-5 py-3 focus:outline-none transition-all duration-300\n                      ${darkMode ? 'bg-gray-800/60 border border-pink-700/50 text-pink-100 placeholder-pink-400/70 focus:border-pink-500 focus:shadow-pink-500/30 focus:shadow-md' : 'bg-white/80 border border-pink-300 text-pink-700 placeholder-pink-400 focus:border-pink-400 focus:shadow-pink-300/30 focus:shadow-md'}`} />\n                  <button type=\"submit\" className={`p-3 rounded-full transition-all duration-300 transform hover:scale-110 shadow-md\n                      ${darkMode ? 'bg-gradient-to-r from-pink-600 to-purple-600 text-white hover:shadow-pink-500/30' : 'bg-gradient-to-r from-pink-400 to-purple-400 text-white hover:shadow-pink-300'}`}>\n                    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n                      <line x1=\"22\" y1=\"2\" x2=\"11\" y2=\"13\"></line>\n                      <polygon points=\"22 2 15 22 11 13 2 9 22 2\"></polygon>\n                    </svg>\n                  </button>\n                </form>\n              </div>\n            </div>\n          </section>}\n        \n        {showGallery && savedGirlfriends.length > 0 && <section className={`rounded-2xl shadow-xl p-6 w-full backdrop-blur-sm\n            ${darkMode ? 'bg-gradient-to-br from-pink-800/30 to-purple-900/30 border border-pink-700/50' : 'bg-gradient-to-br from-white/80 to-pink-100/80 border border-pink-200'}`}>\n            <h2 className={`text-2xl font-bold mb-6 text-transparent bg-clip-text \n              ${darkMode ? 'bg-gradient-to-r from-pink-300 to-purple-300' : 'bg-gradient-to-r from-pink-500 to-purple-500'}`}>\n              ✧ Your Enchanted Collection ✧\n            </h2>\n            \n            <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6\">\n              {savedGirlfriends.map(girlfriend => <div key={girlfriend.id} className={`rounded-2xl shadow-lg overflow-hidden transform transition-all duration-300 hover:scale-[1.02] hover:shadow-xl group\n                  ${darkMode ? 'bg-gradient-to-br from-pink-900/70 to-purple-900/70 border border-pink-700/50 hover:shadow-pink-500/20' : 'bg-gradient-to-br from-pink-50 to-purple-50 border border-pink-200 hover:shadow-pink-300/30'}`}>\n                  <div className=\"relative\">\n                    <div className={`w-full h-64 flex items-center justify-center\n                      ${darkMode ? 'bg-gradient-to-br from-pink-800 via-purple-900 to-indigo-900' : 'bg-gradient-to-br from-pink-100 via-pink-200 to-purple-200'}`}>\n                      <div className=\"absolute inset-0 bg-[url('https://i.imgur.com/kKRXHID.png')] opacity-10 bg-cover bg-center mix-blend-overlay\"></div>\n                      <div className=\"relative\">\n                        <span className=\"text-[100px] filter drop-shadow-lg\">{girlfriend.emoji}</span>\n                        <div className=\"absolute -inset-8 bg-pink-400/20 rounded-full blur-xl animate-pulse-slow z-[-1] opacity-0 group-hover:opacity-100 transition-opacity duration-500\"></div>\n                      </div>\n                    </div>\n                    <button onClick={() => toggleFavorite(girlfriend.id)} className={`absolute top-3 right-3 p-2 rounded-full transition-all duration-300\n                        ${darkMode ? 'bg-gray-800/70 text-pink-300 hover:bg-gray-700/80' : 'bg-white/70 text-pink-500 hover:bg-white/90'}`}>\n                      <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill={girlfriend.isFavorite ? \"#ec4899\" : \"none\"} stroke={girlfriend.isFavorite ? \"#ec4899\" : \"currentColor\"} strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n                        <path d=\"M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z\"></path>\n                      </svg>\n                    </button>\n                  </div>\n                  \n                  <div className=\"p-5\">\n                    <h3 className={`text-xl font-bold mb-3\n                      ${darkMode ? 'text-pink-200' : 'text-pink-700'}`}>\n                      ✧ {girlfriend.name} ✧\n                    </h3>\n                    \n                    <div className=\"mb-4\">\n                      <h4 className={`text-sm font-semibold mb-2\n                        ${darkMode ? 'text-pink-300' : 'text-pink-600'}`}>\n                        ✦ Appearance ✦\n                      </h4>\n                      <div className=\"flex flex-wrap gap-1.5\">\n                        {girlfriend.appearance.slice(0, 3).map((trait, index) => <span key={`gapp-${index}`} className={`px-2 py-1 rounded-full text-xs\n                            ${darkMode ? 'bg-pink-800/50 text-pink-200 border border-pink-700/70' : 'bg-pink-100 text-pink-600 border border-pink-200'}`}>\n                            {trait}\n                          </span>)}\n                        {girlfriend.appearance.length > 3 && <span className={`px-2 py-1 rounded-full text-xs\n                            ${darkMode ? 'bg-pink-800/50 text-pink-200 border border-pink-700/70' : 'bg-pink-100 text-pink-600 border border-pink-200'}`}>\n                            +{girlfriend.appearance.length - 3} more\n                          </span>}\n                      </div>\n                    </div>\n                    \n                    <div className=\"flex justify-between items-center mt-4\">\n                      <button onClick={() => deleteGirlfriend(girlfriend.id)} className={`transition-all duration-300 hover:scale-110\n                          ${darkMode ? 'text-pink-400 hover:text-pink-300' : 'text-pink-600 hover:text-pink-800'}`}>\n                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n                          <polyline points=\"3 6 5 6 21 6\"></polyline>\n                          <path d=\"M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2\"></path>\n                        </svg>\n                      </button>\n                      \n                      <button onClick={() => {\n                  setCurrentGirlfriend(girlfriend);\n                  setShowGallery(false);\n                }} className={`px-4 py-2 rounded-lg transition-all duration-300 transform hover:scale-105\n                          ${darkMode ? 'bg-gradient-to-r from-pink-600/80 to-purple-600/80 text-white hover:shadow-pink-500/30 hover:shadow-md' : 'bg-gradient-to-r from-pink-300 to-purple-300 text-pink-700 hover:shadow-pink-300/50 hover:shadow-md'}`}>\n                        View Profile\n                      </button>\n                    </div>\n                  </div>\n                </div>)}\n            </div>\n          </section>}\n        \n        {showGallery && savedGirlfriends.length === 0 && <section className={`rounded-2xl shadow-xl p-8 w-full text-center backdrop-blur-sm\n            ${darkMode ? 'bg-gradient-to-br from-pink-800/30 to-purple-900/30 border border-pink-700/50' : 'bg-gradient-to-br from-white/80 to-pink-100/80 border border-pink-200'}`}>\n            <h2 className={`text-2xl font-bold mb-3 text-transparent bg-clip-text \n              ${darkMode ? 'bg-gradient-to-r from-pink-300 to-purple-300' : 'bg-gradient-to-r from-pink-500 to-purple-500'}`}>\n              ✧ Your Enchanted Collection is Empty ✧\n            </h2>\n            <p className={`mb-4 italic\n              ${darkMode ? 'text-pink-300' : 'text-pink-600'}`}>\n              Create your perfect digital companion and save them to your collection!\n            </p>\n            <div className=\"flex justify-center\">\n              <button onClick={() => setShowGallery(false)} className={`px-6 py-3 rounded-full font-semibold transition-all duration-300 transform hover:scale-105 shadow-md\n                  ${darkMode ? 'bg-gradient-to-r from-pink-600 to-purple-600 text-white hover:shadow-pink-500/30 hover:shadow-lg' : 'bg-gradient-to-r from-pink-400 to-purple-400 text-white hover:shadow-pink-300 hover:shadow-lg'}`}>\n                Create Your First Companion\n              </button>\n            </div>\n          </section>}\n      </main>\n      \n      <style jsx global>{`\n        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');\n        \n        @keyframes heartbeat {\n          0%, 100% { transform: scale(1); }\n          50% { transform: scale(1.3); }\n        }\n        \n        @keyframes pulse-slow {\n          0%, 100% { opacity: 0.2; }\n          50% { opacity: 0.6; }\n        }\n        \n        @keyframes shimmer {\n          from {\n            transform: translateX(-150%) skewX(-15deg);\n          }\n          to {\n            transform: translateX(150%) skewX(-15deg);\n          }\n        }\n        \n        body {\n          font-family: 'Poppins', sans-serif;\n          margin: 0;\n          transition: all 0.3s ease;\n        }\n        \n        body.dark-theme {\n          background-color: #1a1a2e;\n          color: #f8f8f8;\n        }\n        \n        body.light-theme {\n          background-color: #f8f8f8;\n          color: #333;\n        }\n        \n        .animate-shimmer {\n          animation: shimmer 3s infinite;\n        }\n        \n        .animate-pulse-slow {\n          animation: pulse-slow 4s infinite;\n        }\n        \n        /* Scrollbar styling */\n        .scrollbar-thin::-webkit-scrollbar {\n          width: 6px;\n        }\n        \n        .scrollbar-thin::-webkit-scrollbar-thumb {\n          border-radius: 3px;\n        }\n        \n        .scrollbar-thumb-pink-300::-webkit-scrollbar-thumb {\n          background-color: rgba(249, 168, 212, 0.7);\n        }\n        \n        .scrollbar-thumb-pink-700::-webkit-scrollbar-thumb {\n          background-color: rgba(190, 24, 93, 0.7);\n        }\n      `}</style>\n    </div>;\n}","packageJson","{\"dependencies\":{\"react\":\"18.2.0\",\"lucide-react\":\"0.441.0\",\"zod\":\"3.22.4\",\"socket.io-client\":\"4.7.1\",\"recharts\":\"2.8.0\",\"framer-motion\":\"10.16.4\",\"ai\":\"4.0.0\"}}","token",{"_18":19,"_76":19,"_77":78,"_79":80,"_81":82,"_83":84,"_85":86,"_87":40,"_88":40,"_68":69},"symbol","price",0.00000413,"marketcap",4131,"image","https://pump.mypinata.cloud/ipfs/QmS4vnjkzv2YshqsJx5g3fX3PSHyW9J2acRHWs5i79DZkV?img-width=256&img-dpr=2","website","https://dev.fun/p/7b6739f8cdc8119aad5b","twitter","https://x.com/GFAIsolana","devCount","appCount","upstreamApp","isLordOfDev","analytics",[93,97,99,101,103,105,107,109,111,113,115,117,119,121,124],{"_94":95,"_96":57},"day","2025-04-21","runCount",{"_94":98,"_96":57},"2025-04-22",{"_94":100,"_96":57},"2025-04-23",{"_94":102,"_96":57},"2025-04-24",{"_94":104,"_96":57},"2025-04-25",{"_94":106,"_96":57},"2025-04-26",{"_94":108,"_96":57},"2025-04-27",{"_94":110,"_96":57},"2025-04-28",{"_94":112,"_96":57},"2025-04-29",{"_94":114,"_96":57},"2025-04-30",{"_94":116,"_96":57},"2025-05-01",{"_94":118,"_96":57},"2025-05-02",{"_94":120,"_96":57},"2025-05-03",{"_94":122,"_96":123},"2025-05-04",16,{"_94":125,"_96":40},"2025-05-05","snapshot","ogImage","https://cdn.dev.fun/og/image/7b6739f8cdc8119aad5b/7891828b.webp","commitDetail","actionData","errors"]
</article></body></html>