Adult.AI – Creative Content Assistant<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n <script>\n document.addEventListener('DOMContentLoaded', function() {\n tailwind.config = {\n theme: {\n extend: {\n colors: {\n primary: '#FBBF24', \/\/ Yellow accent\n 'primary-dark': '#F59E0B', \/\/ Darker yellow for hover states\n dark: '#111827', \/\/ Dark background\n 'dark-light': '#1f2937', \/\/ Lighter dark for surfaces\n text: '#FFFFFF', \/\/ Studio white text\n 'text-secondary': '#E5E7EB' \/\/ Slightly dimmed white for secondary text\n }\n }\n }\n }\n });\n <\/script>\n <style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600;700&display=swap');\n\n body {\n font-family: 'Poppins', sans-serif;\n background: linear-gradient(to bottom, #1f2937, #111827);\n min-height: 100vh;\n text-align: left; \/* Override default center alignment *\/\n color: #FFFFFF; \/* Set default text color to studio white *\/\n }\n\n .chat-bubble {\n max-width: 80%;\n animation: fadeIn 0.3s ease-out;\n border-radius: 20px;\n }\n\n .user-bubble {\n border-bottom-right-radius: 4px;\n background: linear-gradient(to right, #FBBF24, #F59E0B); \/* Yellow gradient *\/\n }\n\n .ai-bubble {\n border-bottom-left-radius: 4px;\n background-color: #374151; \/* Slightly lighter dark to contrast with white text *\/\n }\n\n .typing-indicator {\n display: flex;\n padding: 10px 15px;\n }\n\n .typing-indicator span {\n display: inline-block;\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background-color: #d1d5db;\n margin: 0 3px;\n animation: typing 1.4s infinite both;\n }\n\n .typing-indicator span:nth-child(2) {\n animation-delay: 0.2s;\n }\n\n .typing-indicator span:nth-child(3) {\n animation-delay: 0.4s;\n }\n\n @keyframes typing {\n\n 0%,\n 60%,\n 100% {\n transform: translateY(0);\n }\n\n 30% {\n transform: translateY(-5px);\n }\n }\n\n @keyframes fadeIn {\n from {\n opacity: 0;\n transform: translateY(10px);\n }\n\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n .content-card:hover {\n transform: translateY(-5px);\n box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);\n }\n\n .gallery-item {\n transition: all 0.3s ease;\n }\n\n .gallery-item:hover {\n transform: scale(1.03);\n }\n\n .category-badge {\n transition: all 0.2s ease;\n }\n\n .category-badge:hover {\n transform: scale(1.05);\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n }\n\n \/* Mobile sidebar toggle *\/\n .sidebar-collapsed {\n width: 0;\n opacity: 0;\n overflow: hidden;\n }\n\n .sidebar-expanded {\n width: 100%;\n opacity: 1;\n overflow: auto;\n }\n\n \/* Tool card styles *\/\n .tool-card {\n transition: all 0.3s ease;\n border: 2px solid transparent;\n }\n\n .tool-card:hover {\n border-color: #FBBF24;\n transform: translateY(-3px);\n }\n\n .tool-card.active {\n border-color: #FBBF24;\n background-color: rgba(251, 191, 36, 0.1);\n }\n\n \/* Workspace window styles *\/\n .workspace-window {\n border: 2px solid #FBBF24;\n background-color: rgba(31, 41, 55, 0.7);\n backdrop-filter: blur(10px);\n }\n\n .workspace-header {\n background-color: rgba(251, 191, 36, 0.2);\n border-bottom: 1px solid #FBBF24;\n }\n\n \/* Settings panel styles *\/\n .settings-panel {\n background-color: #1f2937;\n border: 2px solid #FBBF24;\n border-radius: 12px;\n padding: 20px;\n margin-top: 20px;\n }\n\n .settings-section {\n margin-bottom: 25px;\n }\n\n .settings-section h3 {\n color: #FBBF24;\n margin-bottom: 15px;\n font-size: 18px;\n }\n\n .api-key-input {\n position: relative;\n }\n\n .api-key-input input {\n padding-right: 40px;\n }\n\n .api-key-toggle {\n position: absolute;\n right: 10px;\n top: 50%;\n transform: translateY(-50%);\n cursor: pointer;\n color: #9CA3AF;\n }\n\n .file-upload-area {\n border: 2px dashed #4B5563;\n border-radius: 8px;\n padding: 20px;\n text-align: center;\n transition: all 0.3s ease;\n cursor: pointer;\n }\n\n .file-upload-area:hover {\n border-color: #FBBF24;\n background-color: rgba(251, 191, 36, 0.05);\n }\n\n .plugin-item {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 10px;\n background-color: #374151;\n border-radius: 6px;\n margin-bottom: 8px;\n }\n\n \/* Modal styles *\/\n .modal {\n display: none;\n position: fixed;\n z-index: 1000;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n overflow: auto;\n background-color: rgba(0, 0, 0, 0.8);\n }\n\n .modal-content {\n background-color: #1f2937;\n margin: 5% auto;\n padding: 30px;\n border: 2px solid #FBBF24;\n border-radius: 12px;\n width: 80%;\n max-width: 800px;\n max-height: 80vh;\n overflow-y: auto;\n }\n\n .modal-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 20px;\n border-bottom: 1px solid #374151;\n padding-bottom: 15px;\n }\n\n .modal-header h2 {\n color: #FBBF24;\n font-size: 24px;\n }\n\n .close-modal {\n color: #9CA3AF;\n font-size: 28px;\n font-weight: bold;\n cursor: pointer;\n }\n\n .close-modal:hover {\n color: #FBBF24;\n }\n\n .faq-item {\n margin-bottom: 20px;\n }\n\n .faq-question {\n font-weight: 600;\n color: #FBBF24;\n margin-bottom: 8px;\n cursor: pointer;\n }\n\n .faq-answer {\n color: #E5E7EB;\n line-height: 1.6;\n display: none;\n }\n\n .faq-item.active .faq-answer {\n display: block;\n }\n\n .how-to-section {\n margin-bottom: 25px;\n }\n\n .how-to-section h3 {\n color: #FBBF24;\n margin-bottom: 15px;\n font-size: 20px;\n }\n\n .how-to-steps {\n counter-reset: step-counter;\n }\n\n .how-to-step {\n counter-increment: step-counter;\n margin-bottom: 15px;\n padding-left: 40px;\n position: relative;\n }\n\n .how-to-step:before {\n content: counter(step-counter);\n position: absolute;\n left: 0;\n top: 0;\n background-color: #FBBF24;\n color: #111827;\n width: 28px;\n height: 28px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: bold;\n }\n <\/style>\n<\/head>\n\n<body>\n <div class=\"min-h-screen flex flex-col\">\n \n <header class=\"sticky top-0 z-10 bg-dark-light bg-opacity-90 backdrop-blur-sm border-b border-primary\">\n <div class=\"container mx-auto px-4 py-3 flex items-center justify-between\">\n <div class=\"flex items-center\">\n <button id=\"sidebar-toggle\" class=\"md:hidden mr-4 text-text-secondary hover:text-text\">\n <i class=\"fas fa-bars text-xl\"><\/i>\n <\/button>\n <div class=\"bg-gradient-to-r from-yellow-400 to-yellow-500 w-10 h-10 rounded-xl flex items-center justify-center\">\n <i class=\"fas fa-brain text-xl text-gray-900\"><\/i>\n <\/div>\n <div class=\"ml-4\">\n <h1 class=\"text-xl font-bold text-text\">Adult.AI<\/h1>\n <p class=\"text-xs text-text-secondary\">Creative Content Assistant<\/p>\n <\/div>\n <\/div>\n\n <div class=\"flex items-center space-x-4\">\n <div class=\"relative\">\n <button class=\"bg-dark-light hover:bg-gray-700 rounded-lg px-4 py-2 text-sm text-text transition\">\n <i class=\"fas fa-history mr-2\"><\/i>History\n <\/button>\n <\/div>\n <button id=\"new-chat-btn\" class=\"bg-primary hover:bg-primary-dark rounded-lg px-4 py-2 text-sm text-gray-900 font-medium transition flex items-center\">\n <i class=\"fas fa-plus mr-2\"><\/i>New Chat\n <\/button>\n <button id=\"help-btn\" class=\"bg-dark-light hover:bg-gray-700 rounded-lg px-4 py-2 text-sm text-text transition\">\n <i class=\"fas fa-question-circle mr-2\"><\/i>Help\n <\/button>\n <div class=\"w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center cursor-pointer\">\n <i class=\"fas fa-user text-text-secondary\"><\/i>\n <\/div>\n <\/div>\n <\/div>\n <\/header>\n\n <div class=\"flex-grow flex flex-col md:flex-row container mx-auto\">\n \n <aside id=\"sidebar\" class=\"sidebar-collapsed md:sidebar-expanded md:w-1\/4 p-4 bg-dark-light rounded-xl m-4 transition-all duration-300 md:opacity-100 md:w-1\/4 md:overflow-auto border-2 border-primary\">\n <h2 class=\"text-lg font-semibold mb-4 text-text\">Create Content<\/h2>\n\n <div class=\"space-y-3\">\n <div class=\"category-badge bg-gray-800 rounded-lg p-4 flex items-center cursor-pointer\">\n <div class=\"bg-yellow-400 w-8 h-8 rounded-lg flex items-center justify-center mr-3\">\n <i class=\"fas fa-scroll text-gray-900\"><\/i>\n <\/div>\n <div>\n <h3 class=\"font-medium text-text\">Scripts<\/h3>\n <p class=\"text-xs text-text-secondary\">Movies, ads, videos<\/p>\n <\/div>\n <\/div>\n\n <div class=\"category-badge bg-gray-800 rounded-lg p-4 flex items-center cursor-pointer\">\n <div class=\"bg-yellow-500 w-8 h-8 rounded-lg flex items-center justify-center mr-3\">\n <i class=\"fas fa-keyboard text-gray-900\"><\/i>\n <\/div>\n <div>\n <h3 class=\"font-medium text-text\">Prompts<\/h3>\n <p class=\"text-xs text-text-secondary\">AI guidance & inspiration<\/p>\n <\/div>\n <\/div>\n\n <div class=\"category-badge bg-gray-800 rounded-lg p-4 flex items-center cursor-pointer\">\n <div class=\"bg-yellow-400 w-8 h-8 rounded-lg flex items-center justify-center mr-3\">\n <i class=\"fas fa-book-open text-gray-900\"><\/i>\n <\/div>\n <div>\n <h3 class=\"font-medium text-text\">Stories<\/h3>\n <p class=\"text-xs text-text-secondary\">Creative writing & fiction<\/p>\n <\/div>\n <\/div>\n\n <div class=\"category-badge bg-gray-800 rounded-lg p-4 flex items-center cursor-pointer\">\n <div class=\"bg-yellow-500 w-8 h-8 rounded-lg flex items-center justify-center mr-3\">\n <i class=\"fas fa-box text-gray-900\"><\/i>\n <\/div>\n <div>\n <h3 class=\"font-medium text-text\">Products<\/h3>\n <p class=\"text-xs text-text-secondary\">Ideas & development<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"mt-8\">\n <h2 class=\"text-lg font-semibold mb-4 text-text\">Recent Content<\/h2>\n <div class=\"space-y-4\">\n <div class=\"bg-gray-800 rounded-lg p-3 text-sm cursor-pointer hover:bg-gray-700 transition\">\n <div class=\"flex justify-between\">\n <p class=\"font-medium text-text\">Sci-fi story concepts<\/p>\n <span class=\"text-text-secondary text-xs\">Today<\/span>\n <\/div>\n <p class=\"text-text-secondary truncate\">Exploring intergalactic diplomacy concepts…<\/p>\n <\/div>\n\n <div class=\"bg-gray-800 rounded-lg p-3 text-sm cursor-pointer hover:bg-gray-700 transition\">\n <div class=\"flex justify-between\">\n <p class=\"font-medium text-text\">Product naming<\/p>\n <span class=\"text-text-secondary text-xs\">Yesterday<\/span>\n <\/div>\n <p class=\"text-text-secondary truncate\">Names for new eco-friendly home appliance…<\/p>\n <\/div>\n\n <div class=\"bg-gray-800 rounded-lg p-3 text-sm cursor-pointer hover:bg-gray-700 transition\">\n <div class=\"flex justify-between\">\n <p class=\"font-medium text-text\">Social media posts<\/p>\n <span class=\"text-text-secondary text-xs\">2 days ago<\/span>\n <\/div>\n <p class=\"text-text-secondary truncate\">Engaging content for fitness brand…<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"mt-8\">\n <button id=\"settings-toggle\" class=\"w-full bg-gray-800 hover:bg-gray-700 rounded-lg p-4 flex items-center justify-between transition\">\n <div class=\"flex items-center\">\n <div class=\"bg-yellow-400 w-8 h-8 rounded-lg flex items-center justify-center mr-3\">\n <i class=\"fas fa-cog text-gray-900\"><\/i>\n <\/div>\n <h3 class=\"font-medium text-text\">Settings<\/h3>\n <\/div>\n <i id=\"settings-icon\" class=\"fas fa-chevron-down text-text-secondary transition-transform\"><\/i>\n <\/button>\n \n <div id=\"settings-panel\" class=\"settings-panel hidden\">\n \n <div class=\"settings-section\">\n <h3>API Keys<\/h3>\n <div class=\"space-y-3\">\n <div class=\"api-key-input\">\n <label class=\"block text-sm text-text-secondary mb-1\">OpenAI API Key<\/label>\n <div class=\"relative\">\n <input type=\"password\" id=\"openai-key\" class=\"w-full bg-gray-800 rounded-lg p-3 text-text\" placeholder=\"sk-...\" value=\"sk-\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\">\n <span class=\"api-key-toggle\" onclick=\"toggleApiKeyVisibility('openai-key')\">\n <i class=\"fas fa-eye\"><\/i>\n <\/span>\n <\/div>\n <\/div>\n \n <div class=\"api-key-input\">\n <label class=\"block text-sm text-text-secondary mb-1\">Stability AI API Key<\/label>\n <div class=\"relative\">\n <input type=\"password\" id=\"stability-key\" class=\"w-full bg-gray-800 rounded-lg p-3 text-text\" placeholder=\"sk-...\" value=\"sk-\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\">\n <span class=\"api-key-toggle\" onclick=\"toggleApiKeyVisibility('stability-key')\">\n <i class=\"fas fa-eye\"><\/i>\n <\/span>\n <\/div>\n <\/div>\n \n <button class=\"bg-primary hover:bg-primary-dark text-gray-900 font-medium py-2 px-4 rounded-lg w-full\" onclick=\"saveApiKeys()\">\n Save API Keys\n <\/button>\n <\/div>\n <\/div>\n \n \n <div class=\"settings-section\">\n <h3>Upload Files<\/h3>\n <div class=\"file-upload-area\" onclick=\"document.getElementById('file-upload').click()\">\n <i class=\"fas fa-cloud-upload-alt text-3xl text-primary mb-3\"><\/i>\n <p class=\"text-text-secondary\">Drag & drop files here or click to browse<\/p>\n <input type=\"file\" id=\"file-upload\" class=\"hidden\" multiple onchange=\"handleFileUpload(event)\">\n <\/div>\n <div id=\"uploaded-files\" class=\"mt-3 space-y-2\"><\/div>\n <\/div>\n \n \n <div class=\"settings-section\">\n <h3>Plugin Integration<\/h3>\n <div class=\"space-y-3\">\n <div class=\"plugin-item\">\n <span>Image Enhancement<\/span>\n <button class=\"bg-green-600 hover:bg-green-700 text-white text-xs py-1 px-2 rounded\">Active<\/button>\n <\/div>\n <div class=\"plugin-item\">\n <span>Text-to-Speech<\/span>\n <button class=\"bg-gray-600 hover:bg-gray-700 text-white text-xs py-1 px-2 rounded\">Inactive<\/button>\n <\/div>\n <div class=\"plugin-item\">\n <span>Video Effects<\/span>\n <button class=\"bg-green-600 hover:bg-green-700 text-white text-xs py-1 px-2 rounded\">Active<\/button>\n <\/div>\n \n <div class=\"flex mt-2\">\n <input type=\"text\" id=\"new-plugin\" class=\"flex-grow bg-gray-800 rounded-l-lg p-2 text-text\" placeholder=\"Plugin name or URL\">\n <button class=\"bg-primary hover:bg-primary-dark text-gray-900 font-medium py-2 px-4 rounded-r-lg\" onclick=\"addPlugin()\">\n Add\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/aside>\n\n \n <div class=\"flex-grow flex flex-col p-4 md:p-0\">\n \n <div class=\"mt-4 mb-4\">\n <h2 class=\"text-lg font-semibold mb-4 ml-2 text-text\">Creative Tools<\/h2>\n <div class=\"grid grid-cols-2 md:grid-cols-4 gap-4\">\n <div class=\"tool-card bg-gray-800 rounded-xl p-4 cursor-pointer\" onclick=\"openWorkspace('image')\">\n <div class=\"bg-yellow-400 w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-3\">\n <i class=\"fas fa-image text-2xl text-gray-900\"><\/i>\n <\/div>\n <h3 class=\"font-medium text-text text-center\">Image Generator<\/h3>\n <\/div>\n\n <div class=\"tool-card bg-gray-800 rounded-xl p-4 cursor-pointer\" onclick=\"openWorkspace('video')\">\n <div class=\"bg-yellow-500 w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-3\">\n <i class=\"fas fa-video text-2xl text-gray-900\"><\/i>\n <\/div>\n <h3 class=\"font-medium text-text text-center\">Video Editor<\/h3>\n <\/div>\n\n <div class=\"tool-card bg-gray-800 rounded-xl p-4 cursor-pointer\" onclick=\"openWorkspace('audio')\">\n <div class=\"bg-yellow-400 w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-3\">\n <i class=\"fas fa-music text-2xl text-gray-900\"><\/i>\n <\/div>\n <h3 class=\"font-medium text-text text-center\">Audio Generator<\/h3>\n <\/div>\n\n <div class=\"tool-card bg-gray-800 rounded-xl p-4 cursor-pointer\" onclick=\"openWorkspace('code')\">\n <div class=\"bg-yellow-500 w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-3\">\n <i class=\"fas fa-code text-2xl text-gray-900\"><\/i>\n <\/div>\n <h3 class=\"font-medium text-text text-center\">Code Editor<\/h3>\n <\/div>\n \n <div class=\"tool-card bg-gray-800 rounded-xl p-4 cursor-pointer\" onclick=\"openWorkspace('writing')\">\n <div class=\"bg-yellow-400 w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-3\">\n <i class=\"fas fa-pen-fancy text-2xl text-gray-900\"><\/i>\n <\/div>\n <h3 class=\"font-medium text-text text-center\">Writing Assistant<\/h3>\n <\/div>\n\n <div class=\"tool-card bg-gray-800 rounded-xl p-4 cursor-pointer\" onclick=\"openWorkspace('design')\">\n <div class=\"bg-yellow-500 w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-3\">\n <i class=\"fas fa-palette text-2xl text-gray-900\"><\/i>\n <\/div>\n <h3 class=\"font-medium text-text text-center\">Design Tools<\/h3>\n <\/div>\n\n <div class=\"tool-card bg-gray-800 rounded-xl p-4 cursor-pointer\" onclick=\"openWorkspace('data')\">\n <div class=\"bg-yellow-400 w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-3\">\n <i class=\"fas fa-database text-2xl text-gray-900\"><\/i>\n <\/div>\n <h3 class=\"font-medium text-text text-center\">Data Analysis<\/h3>\n <\/div>\n\n <div class=\"tool-card bg-gray-800 rounded-xl p-4 cursor-pointer\" onclick=\"openWorkspace('translation')\">\n <div class=\"bg-yellow-500 w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-3\">\n <i class=\"fas fa-language text-2xl text-gray-900\"><\/i>\n <\/div>\n <h3 class=\"font-medium text-text text-center\">Translation<\/h3>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"bg-dark-light rounded-xl p-4 flex-grow flex flex-col mb-4 border-2 border-primary\">\n <div id=\"chat-container\" class=\"flex-grow overflow-y-auto space-y-6 p-4\"><\/div>\n\n \n <div id=\"suggested-prompts\" class=\"px-4 mt-4\">\n <h3 class=\"text-sm font-medium mb-3 text-text\">Try asking:<\/h3>\n <div class=\"flex flex-wrap gap-2\">\n <button class=\"suggestion-btn bg-gray-800 hover:bg-gray-700 py-2 px-4 rounded-xl text-sm text-text transition\">\n Create a story about space exploration\n <\/button>\n <button class=\"suggestion-btn bg-gray-800 hover:bg-gray-700 py-2 px-4 rounded-xl text-sm text-text transition\">\n Suggest product ideas for eco-friendly living\n <\/button>\n <button class=\"suggestion-btn bg-gray-800 hover:bg-gray-700 py-2 px-4 rounded-xl text-sm text-text transition\">\n Write a short script for a thriller scene\n <\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"mt-4 relative\">\n <form id=\"chat-form\" class=\"flex rounded-xl overflow-hidden border border-gray-700 bg-gray-800\">\n <div class=\"flex-grow flex items-center px-4\">\n <button type=\"button\" class=\"text-text-secondary hover:text-text mr-3\">\n <i class=\"fas fa-plus-circle\"><\/i>\n <\/button>\n <input id=\"message-input\" type=\"text\" placeholder=\"Ask anything or create content...\" autocomplete=\"off\" class=\"w-full bg-transparent py-4 focus:outline-none placeholder-text-secondary text-sm text-text\">\n <\/div>\n <div id=\"form-actions\" class=\"flex items-center\">\n <button type=\"submit\" id=\"send-btn\" class=\"bg-primary hover:bg-primary-dark py-4 px-6 text-gray-900 font-medium transition\">\n <i class=\"fas fa-paper-plane\"><\/i>\n <\/button>\n <button type=\"button\" id=\"stop-btn\" hidden class=\"bg-red-600 hover:bg-red-700 py-4 px-6 text-text font-medium transition\">\n <i class=\"fas fa-stop\"><\/i>\n <\/button>\n <\/div>\n <\/form>\n <div class=\"absolute bottom-3 right-16 text-sm text-text-secondary\">\n <i class=\"fas fa-microphone\"><\/i>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"content-gallery\" class=\"mt-6 mb-4\">\n <h2 class=\"text-lg font-semibold mb-4 ml-2 text-text\">Recently Generated Content<\/h2>\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4\">\n <div class=\"content-card bg-dark-light rounded-xl p-4 transition cursor-pointer border-2 border-primary\">\n <div class=\"flex justify-between items-start\">\n <div class=\"bg-yellow-400 w-10 h-10 rounded-lg flex items-center justify-center\">\n <i class=\"fas fa-scroll text-gray-900\"><\/i>\n <\/div>\n <button class=\"text-text-secondary hover:text-text\">\n <i class=\"fas fa-ellipsis-h\"><\/i>\n <\/button>\n <\/div>\n <h3 class=\"font-medium mt-3 text-text\">Sci-Fi Short Story<\/h3>\n <p class=\"text-text-secondary text-sm mt-2\">A space explorer discovers a planet where emotions are tangible objects…<\/p>\n <\/div>\n\n <div class=\"content-card bg-dark-light rounded-xl p-4 transition cursor-pointer border-2 border-primary\">\n <div class=\"flex justify-between items-start\">\n <div class=\"bg-yellow-500 w-10 h-10 rounded-lg flex items-center justify-center\">\n <i class=\"fas fa-box text-gray-900\"><\/i>\n <\/div>\n <button class=\"text-text-secondary hover:text-text\">\n <i class=\"fas fa-ellipsis-h\"><\/i>\n <\/button>\n <\/div>\n <h3 class=\"font-medium mt-3 text-text\">Product Concept<\/h3>\n <p class=\"text-text-secondary text-sm mt-2\">Smart hydration bottle that tracks water intake and syncs with health apps…<\/p>\n <\/div>\n\n <div class=\"content-card bg-dark-light rounded-xl p-4 transition cursor-pointer border-2 border-primary\">\n <div class=\"flex justify-between items-start\">\n <div class=\"bg-yellow-400 w-10 h-10 rounded-lg flex items-center justify-center\">\n <i class=\"fas fa-keyboard text-gray-900\"><\/i>\n <\/div>\n <button class=\"text-text-secondary hover:text-text\">\n <i class=\"fas fa-ellipsis-h\"><\/i>\n <\/button>\n <\/div>\n <h3 class=\"font-medium mt-3 text-text\">AI Art Prompts<\/h3>\n <p class=\"text-text-secondary text-sm mt-2\">Series of prompts for generating cyberpunk cityscapes with neon aesthetics…<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <section class=\"mt-auto mb-4 p-4\">\n <h2 class=\"text-lg font-semibold mb-4 ml-2 text-text\">Community Feedback<\/h2>\n <div id=\"comments-ctn\" style=\"width:100%; height:400px;\"><\/div>\n <\/section>\n <\/div>\n\n \n <div id=\"workspace-container\" class=\"fixed inset-0 bg-black bg-opacity-70 z-50 hidden flex items-center justify-center p-4\">\n <div class=\"workspace-window rounded-xl w-full max-w-4xl h-5\/6 flex flex-col\">\n <div class=\"workspace-header p-4 rounded-t-xl flex justify-between items-center\">\n <h3 id=\"workspace-title\" class=\"text-lg font-semibold text-text\">Workspace<\/h3>\n <button onclick=\"closeWorkspace()\" class=\"text-text-secondary hover:text-text\">\n <i class=\"fas fa-times text-xl\"><\/i>\n <\/button>\n <\/div>\n <div id=\"workspace-content\" class=\"flex-grow p-4 overflow-auto\">\n \n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"help-modal\" class=\"modal\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <h2>Help & Support<\/h2>\n <span class=\"close-modal\" onclick=\"closeHelpModal()\">×<\/span>\n <\/div>\n \n <div class=\"how-to-section\">\n <h3>How to Use Adult.AI<\/h3>\n <div class=\"how-to-steps\">\n <div class=\"how-to-step\">\n <p><strong>Getting Started:<\/strong> Create an account or sign in to access all features. Set up your API keys in the Settings panel for full functionality.<\/p>\n <\/div>\n <div class=\"how-to-step\">\n <p><strong>Creating Content:<\/strong> Use the chat interface to describe what you want to create. The AI will generate content based on your prompts.<\/p>\n <\/div>\n <div class=\"how-to-step\">\n <p><strong>Using Tools:<\/strong> Select a tool from the Creative Tools section to open a specialized workspace with parameters specific to that tool.<\/p>\n <\/div>\n <div class=\"how-to-step\">\n <p><strong>Managing Files:<\/strong> Upload your own files, models, or data in the Settings panel to enhance your creative projects.<\/p>\n <\/div>\n <div class=\"how-to-step\">\n <p><strong>Expanding Features:<\/strong> Add plugins in the Settings panel to extend the capabilities of Adult.AI with specialized tools.<\/p>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"faq-section\">\n <h3>Frequently Asked Questions<\/h3>\n \n <div class=\"faq-item\">\n <div class=\"faq-question\" onclick=\"toggleFaq(this)\">How do I add my API keys?<\/div>\n <div class=\"faq-answer\">\n Navigate to the Settings panel in the sidebar. Under the API Keys section, enter your keys for services like OpenAI or Stability AI. Click “Save API Keys” to store them securely.\n <\/div>\n <\/div>\n \n <div class=\"faq-item\">\n <div class=\"faq-question\" onclick=\"toggleFaq(this)\">Can I upload my own models or data?<\/div>\n <div class=\"faq-answer\">\n Yes! In the Settings panel, use the File Upload section to upload your own files, trained models, or data. These will be available for use in the various tools.\n <\/div>\n <\/div>\n \n <div class=\"faq-item\">\n <div class=\"faq-question\" onclick=\"toggleFaq(this)\">How do I add new plugins?<\/div>\n <div class=\"faq-answer\">\n In the Settings panel, go to the Plugin Integration section. Enter the plugin name or URL in the input field and click “Add”. You can manage active and inactive plugins from this section.\n <\/div>\n <\/div>\n \n <div class=\"faq-item\">\n <div class=\"faq-question\" onclick=\"toggleFaq(this)\">What tools are available?<\/div>\n <div class=\"faq-answer\">\n Adult.AI offers a variety of creative tools including Image Generator, Video Editor, Audio Generator, Code Editor, Writing Assistant, Design Tools, Data Analysis, and Translation. Each tool has its own specialized workspace.\n <\/div>\n <\/div>\n \n <div class=\"faq-item\">\n <div class=\"faq-question\" onclick=\"toggleFaq(this)\">How do I save my work?<\/div>\n <div class=\"faq-answer\">\n Your chat history is automatically saved. For generated content, use the save button within each tool’s workspace. You can also download your creations directly to your device.\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n \/\/ Initialize message storage\n let messages = [];\n let currentGenerationPromise = null;\n\n \/\/ Load messages from localStorage on page load\n function loadMessages() {\n if (localStorage.messages) {\n messages = JSON.parse(localStorage.messages);\n chatContainer.innerHTML = '';\n messages.forEach(msg => addMessageToList(msg.content, msg.isUser));\n } else {\n \/\/ Show initial welcome message if no history\n addMessage(\"Hello! I'm your creative assistant. I can help you brainstorm, write scripts, create prompts, develop stories, invent products, and much more. What would you like to create today?\", false);\n messages.push({ isUser: false, content: \"Hello! I'm your creative assistant. I can help you brainstorm, write scripts, create prompts, develop stories, invent products, and much more. What would you like to create today?\" });\n saveMessages();\n }\n }\n\n \/\/ Save messages to localStorage\n function saveMessages() {\n localStorage.messages = JSON.stringify(messages);\n }\n\n \/\/ Add a message to the chat (without saving to storage)\n function addMessageToList(message, isUser = false) {\n const messageDiv = document.createElement('div');\n messageDiv.className = `chat-bubble ${isUser ? 'user-bubble ml-auto' : 'ai-bubble'} p-4`;\n const senderIcon = isUser ? \n '<div class=\"bg-gray-900 w-8 h-8 rounded-lg flex items-center justify-center mr-3\"><i class=\"fas fa-user text-yellow-400\"><\/i><\/div>' :\n '<div class=\"bg-yellow-500 w-8 h-8 rounded-lg flex items-center justify-center mr-3\"><i class=\"fas fa-robot text-gray-900\"><\/i><\/div>';\n \n messageDiv.innerHTML = `\n <div class=\"flex items-start\">\n ${senderIcon}\n <div>\n <p class=\"font-medium ${isUser ? 'text-gray-900' : 'text-text'}\">${isUser ? 'You' : 'Adult.AI'}<\/p>\n <p class=\"mt-2 ${isUser ? 'text-gray-900' : 'text-text'}\">${message}<\/p>\n <\/div>\n <\/div>\n `;\n \n chatContainer.appendChild(messageDiv);\n chatContainer.scrollTop = chatContainer.scrollHeight;\n }\n\n \/\/ Add a new message to chat and save to storage\n function addMessage(message, isUser = false) {\n addMessageToList(message, isUser);\n messages.push({ isUser, content: message });\n saveMessages();\n }\n\n \/\/ Create AI instruction based on conversation history\n function createInstruction(userMessage) {\n let conversation = messages.map(m => \n `${m.isUser ? 'Human' : 'Adult.AI'}: ${m.content}`\n ).join('\\n');\n \n return `You are Adult.AI, a creative content assistant. The human and you are having a conversation.\n\n${conversation}\n\nNow the human says: ${userMessage}\n\nAdult.AI:`;\n }\n\n \/\/ Create an empty AI message container for streaming responses\n function startAIMessage() {\n const messageDiv = document.createElement('div');\n messageDiv.className = 'chat-bubble ai-bubble p-4 w-full md:w-3\/4';\n messageDiv.innerHTML = `\n <div class=\"flex items-start\">\n <div class=\"bg-yellow-500 w-8 h-8 rounded-lg flex items-center justify-center mr-3\">\n <i class=\"fas fa-robot text-gray-900\"><\/i>\n <\/div>\n <div>\n <p class=\"font-medium text-text\">Adult.AI<\/p>\n <p class=\"mt-2 text-text\"><\/p>\n <\/div>\n <\/div>\n `;\n chatContainer.appendChild(messageDiv);\n return messageDiv.querySelector('p.mt-2');\n }\n\n \/\/ Generate AI response with streaming\n async function generateResponse(message) {\n \/\/ Disable input and show stop button\n sendBtn.hidden = true;\n stopBtn.hidden = false;\n messageInput.disabled = true;\n \n \/\/ Create AI message container for streaming\n const contentEl = startAIMessage();\n let fullText = '';\n \n try {\n currentGenerationPromise = generateText({\n instruction: createInstruction(message),\n onChunk: (data) => {\n fullText += data.textChunk;\n contentEl.textContent = fullText;\n }\n });\n \n await currentGenerationPromise;\n \n \/\/ Save the completed AI response\n messages.push({ isUser: false, content: fullText });\n saveMessages();\n } catch (error) {\n console.error(\"Error generating response:\", error);\n contentEl.textContent = \"Sorry, I encountered an error. Please try again.\";\n } finally {\n \/\/ Reset form controls\n sendBtn.hidden = false;\n stopBtn.hidden = true;\n messageInput.disabled = false;\n currentGenerationPromise = null;\n }\n }\n\n \/\/ Initialize comments plugin\n function initComments() {\n if (typeof commentsPlugin !== 'undefined') {\n commentsCtn.innerHTML = commentsPlugin({\n channel: \"adult-ai-feedback\",\n width: \"100%\", \n height: \"100%\"\n });\n }\n }\n\n \/\/ Workspace functions\n function openWorkspace(type) {\n const workspaceContainer = document.getElementById('workspace-container');\n const workspaceTitle = document.getElementById('workspace-title');\n const workspaceContent = document.getElementById('workspace-content');\n \n \/\/ Set title based on workspace type\n const titles = {\n 'image': 'Image Generator',\n 'video': 'Video Editor',\n 'audio': 'Audio Generator',\n 'code': 'Code Editor',\n 'writing': 'Writing Assistant',\n 'design': 'Design Tools',\n 'data': 'Data Analysis',\n 'translation': 'Translation'\n };\n \n workspaceTitle.textContent = titles[type] || 'Workspace';\n \n \/\/ Set content based on workspace type\n const contents = {\n 'image': `\n <div class=\"flex flex-col h-full\">\n <div class=\"mb-4\">\n <label class=\"block text-sm font-medium text-text mb-2\">Describe the image you want to create:<\/label>\n <textarea class=\"w-full bg-gray-800 rounded-lg p-3 text-text\" rows=\"3\" placeholder=\"A futuristic city with neon lights...\"><\/textarea>\n <\/div>\n \n <div class=\"grid grid-cols-2 gap-4 mb-4\">\n <div>\n <label class=\"block text-sm font-medium text-text mb-2\">Style<\/label>\n <select class=\"w-full bg-gray-800 rounded-lg p-3 text-text\">\n <option>Photorealistic<\/option>\n <option>Digital Art<\/option>\n <option>Oil Painting<\/option>\n <option>Watercolor<\/option>\n <option>Cartoon<\/option>\n <option>Anime<\/option>\n <\/select>\n <\/div>\n \n <div>\n <label class=\"block text-sm font-medium text-text mb-2\">Size<\/label>\n <select class=\"w-full bg-gray-800 rounded-lg p-3 text-text\">\n <option>512x512<\/option>\n <option>768x768<\/option>\n <option>1024x1024<\/option>\n <\/select>\n <\/div>\n <\/div>\n \n <div class=\"mb-4\">\n <button class=\"bg-primary hover:bg-primary-dark text-gray-900 font-medium py-2 px-4 rounded-lg\">\n Generate Image\n <\/button>\n <\/div>\n \n <div class=\"flex-grow border-2 border-primary rounded-lg flex items-center justify-center bg-gray-800\">\n <div class=\"text-center\">\n <i class=\"fas fa-image text-4xl text-primary mb-3\"><\/i>\n <p class=\"text-text-secondary\">Generated images will appear here<\/p>\n <\/div>\n <\/div>\n <\/div>\n `,\n 'video': `\n <div class=\"flex flex-col h-full\">\n <div class=\"mb-4\">\n <label class=\"block text-sm font-medium text-text mb-2\">Upload your video:<\/label>\n <div class=\"border-2 border-dashed border-primary rounded-lg p-8 text-center\">\n <i class=\"fas fa-cloud-upload-alt text-3xl text-primary mb-3\"><\/i>\n <p class=\"text-text-secondary\">Drag & drop your video file here<\/p>\n <button class=\"mt-3 bg-gray-700 hover:bg-gray-600 text-text py-2 px-4 rounded-lg\">\n Browse Files\n <\/button>\n <\/div>\n <\/div>\n \n <div class=\"grid grid-cols-2 gap-4 mb-4\">\n <div>\n <label class=\"block text-sm font-medium text-text mb-2\">Effect<\/label>\n <select class=\"w-full bg-gray-800 rounded-lg p-3 text-text\">\n <option>Color Correction<\/option>\n <option>Slow Motion<\/option>\n <option>Time-lapse<\/option>\n <option>Stabilization<\/option>\n <option>Green Screen<\/option>\n <\/select>\n <\/div>\n \n <div>\n <label class=\"block text-sm font-medium text-text mb-2\">Quality<\/label>\n <select class=\"w-full bg-gray-800 rounded-lg p-3 text-text\">\n <option>720p<\/option>\n <option>1080p<\/option>\n <option>4K<\/option>\n <\/select>\n <\/div>\n <\/div>\n \n <div class=\"flex-grow border-2 border-primary rounded-lg flex items-center justify-center bg-gray-800\">\n <div class=\"text-center\">\n <i class=\"fas fa-video text-4xl text-primary mb-3\"><\/i>\n <p class=\"text-text-secondary\">Video editor will appear here<\/p>\n <\/div>\n <\/div>\n <\/div>\n `,\n 'audio': `\n <div class=\"flex flex-col h-full\">\n <div class=\"mb-4\">\n <label class=\"block text-sm font-medium text-text mb-2\">Describe the audio you want to create:<\/label>\n <textarea class=\"w-full bg-gray-800 rounded-lg p-3 text-text\" rows=\"3\" placeholder=\"Ambient music with piano and strings...\"><\/textarea>\n <\/div>\n \n <div class=\"grid grid-cols-2 gap-4 mb-4\">\n <div>\n <label class=\"block text-sm font-medium text-text mb-2\">Genre<\/label>\n <select class=\"w-full bg-gray-800 rounded-lg p-3 text-text\">\n <option>Ambient<\/option>\n <option>Classical<\/option>\n <option>Electronic<\/option>\n <option>Jazz<\/option>\n <option>Rock<\/option>\n <option>Hip Hop<\/option>\n <\/select>\n <\/div>\n \n <div>\n <label class=\"block text-sm font-medium text-text mb-2\">Duration<\/label>\n <select class=\"w-full bg-gray-800 rounded-lg p-3 text-text\">\n <option>30 seconds<\/option>\n <option>1 minute<\/option>\n <option>3 minutes<\/option>\n <option>5 minutes<\/option>\n <\/select>\n <\/div>\n <\/div>\n \n <div class=\"mb-4\">\n <button class=\"bg-primary hover:bg-primary-dark text-gray-900 font-medium py-2 px-4 rounded-lg\">\n Generate Audio\n <\/button>\n <\/div>\n \n <div class=\"flex-grow border-2 border-primary rounded-lg flex items-center justify-center bg-gray-800\">\n <div class=\"text-center\">\n <i class=\"fas fa-music text-4xl text-primary mb-3\"><\/i>\n <p class=\"text-text-secondary\">Audio player will appear here<\/p>\n <\/div>\n <\/div>\n <\/div>\n `,\n 'code': `\n <div class=\"flex flex-col h-full\">\n <div class=\"mb-4\">\n <label class=\"block text-sm font-medium text-text mb-2\">Select language:<\/label>\n <select class=\"w-full bg-gray-800 rounded-lg p-3 text-text\">\n <option>JavaScript<\/option>\n <option>Python<\/option>\n <option>HTML\/CSS<\/option>\n <option>Java<\/option>\n <option>C++<\/option>\n <option>Rust<\/option>\n <\/select>\n <\/div>\n \n <div class=\"mb-4\">\n <label class=\"block text-sm font-medium text-text mb-2\">Describe what you want to create:<\/label>\n <textarea class=\"w-full bg-gray-800 rounded-lg p-3 text-text\" rows=\"2\" placeholder=\"A function that calculates fibonacci numbers...\"><\/textarea>\n <\/div>\n \n <div class=\"mb-4\">\n <button class=\"bg-primary hover:bg-primary-dark text-gray-900 font-medium py-2 px-4 rounded-lg\">\n Generate Code\n <\/button>\n <\/div>\n \n <div class=\"flex-grow border-2 border-primary rounded-lg bg-gray-800 overflow-hidden\">\n <div class=\"p-3 bg-gray-900 border-b border-primary\">\n <div class=\"flex space-x-2\">\n <div class=\"w-3 h-3 rounded-full bg-red-500\"><\/div>\n <div class=\"w-3 h-3 rounded-full bg-yellow-500\"><\/div>\n <div class=\"w-3 h-3 rounded-full bg-green-500\"><\/div>\n <\/div>\n <\/div>\n <textarea class=\"w-full h-64 bg-gray-900 p-4 text-text font-mono text-sm\" placeholder=\"\/\/ Write your code here...\"><\/textarea>\n <\/div>\n \n <div class=\"mt-4 flex justify-end\">\n <button class=\"bg-primary hover:bg-primary-dark text-gray-900 font-medium py-2 px-4 rounded-lg\">\n Run Code\n <\/button>\n <\/div>\n <\/div>\n `,\n 'writing': `\n <div class=\"flex flex-col h-full\">\n <div class=\"mb-4\">\n <label class=\"block text-sm font-medium text-text mb-2\">Content Type<\/label>\n <select class=\"w-full bg-gray-800 rounded-lg p-3 text-text\">\n <option>Blog Post<\/option>\n <option>Article<\/option>\n <option>Story<\/option>\n <option>Script<\/option>\n <option>Poem<\/option>\n <option>Email<\/option>\n <\/select>\n <\/div>\n \n <div class=\"mb-4\">\n <label class=\"block text-sm font-medium text-text mb-2\">Topic<\/label>\n <input type=\"text\" class=\"w-full bg-gray-800 rounded-lg p-3 text-text\" placeholder=\"The future of renewable energy\">\n <\/div>\n \n <div class=\"mb-4\">\n <label class=\"block text-sm font-medium text-text mb-2\">Tone<\/label>\n <select class=\"w-full bg-gray-800 rounded-lg p-3 text-text\">\n <option>Professional<\/option>\n <option>Casual<\/option>\n <option>Friendly<\/option>\n <option>Humorous<\/option>\n <option>Inspiring<\/option>\n <\/select>\n <\/div>\n \n <div class=\"mb-4\">\n <button class=\"bg-primary hover:bg-primary-dark text-gray-900 font-medium py-2 px-4 rounded-lg\">\n Generate Content\n <\/button>\n <\/div>\n \n <div class=\"flex-grow border-2 border-primary rounded-lg bg-gray-800 p-4 overflow-auto\">\n <p class=\"text-text-secondary\">Generated content will appear here<\/p>\n <\/div>\n <\/div>\n `,\n 'design': `\n <div class=\"flex flex-col h-full\">\n <div class=\"mb-4\">\n <label class=\"block text-sm font-medium text-text mb-2\">Design Type<\/label>\n <select class=\"w-full bg-gray-800 rounded-lg p-3 text-text\">\n <option>Logo<\/option>\n <option>Poster<\/option>\n <option>Social Media Graphic<\/option>\n <option>Website Mockup<\/option>\n <option>Business Card<\/option>\n <option>Infographic<\/option>\n <\/select>\n <\/div>\n \n <div class=\"mb-4\">\n <label class=\"block text-sm font-medium text-text mb-2\">Description<\/label>\n <textarea class=\"w-full bg-gray-800 rounded-lg p-3 text-text\" rows=\"3\" placeholder=\"A modern logo for a tech company...\"><\/textarea>\n <\/div>\n \n <div class=\"grid grid-cols-2 gap-4 mb-4\">\n <div>\n <label class=\"block text-sm font-medium text-text mb-2\">Color Scheme<\/label>\n <select class=\"w-full bg-gray-800 rounded-lg p-3 text-text\">\n <option>Monochrome<\/option>\n <option>Vibrant<\/option>\n <option>Pastel<\/option>\n <option>Earth Tones<\/option>\n <option>Neon<\/option>\n <\/select>\n <\/div>\n \n <div>\n <label class=\"block text-sm font-medium text-text mb-2\">Style<\/label>\n <select class=\"w-full bg-gray-800 rounded-lg p-3 text-text\">\n <option>Minimalist<\/option>\n <option>Modern<\/option>\n <option>Vintage<\/option>\n <option>Abstract<\/option>\n <option>Corporate<\/option>\n <\/select>\n <\/div>\n <\/div>\n \n <div class=\"mb-4\">\n <button class=\"bg-primary hover:bg-primary-dark text-gray-900 font-medium py-2 px-4 rounded-lg\">\n Generate Design\n <\/button>\n <\/div>\n \n <div class=\"flex-grow border-2 border-primary rounded-lg flex items-center justify-center bg-gray-800\">\n <div class=\"text-center\">\n <i class=\"fas fa-palette text-4xl text-primary mb-3\"><\/i>\n <p class=\"text-text-secondary\">Generated designs will appear here<\/p>\n <\/div>\n <\/div>\n <\/div>\n `,\n 'data': `\n <div class=\"flex flex-col h-full\">\n <div class=\"mb-4\">\n <label class=\"block text-sm font-medium text-text mb-2\">Upload your data file:<\/label>\n <div class=\"border-2 border-dashed border-primary rounded-lg p-8 text-center\">\n <i class=\"fas fa-cloud-upload-alt text-3xl text-primary mb-3\"><\/i>\n <p class=\"text-text-secondary\">Drag & drop your CSV or Excel file here<\/p>\n <button class=\"mt-3 bg-gray-700 hover:bg-gray-600 text-text py-2 px-4 rounded-lg\">\n Browse Files\n <\/button>\n <\/div>\n <\/div>\n \n <div class=\"mb-4\">\n <label class=\"block text-sm font-medium text-text mb-2\">Analysis Type<\/label>\n <select class=\"w-full bg-gray-800 rounded-lg p-3 text-text\">\n <option>Summary Statistics<\/option>\n <option>Visualization<\/option>\n <option>Prediction Model<\/option>\n <option>Clustering<\/option>\n <option>Correlation Analysis<\/option>\n <\/select>\n <\/div>\n \n <div class=\"mb-4\">\n <button class=\"bg-primary hover:bg-primary-dark text-gray-900 font-medium py-2 px-4 rounded-lg\">\n Analyze Data\n <\/button>\n <\/div>\n \n <div class=\"flex-grow border-2 border-primary rounded-lg flex items-center justify-center bg-gray-800\">\n <div class=\"text-center\">\n <i class=\"fas fa-chart-bar text-4xl text-primary mb-3\"><\/i>\n <p class=\"text-text-secondary\">Data analysis results will appear here<\/p>\n <\/div>\n <\/div>\n <\/div>\n `,\n 'translation': `\n <div class=\"flex flex-col h-full\">\n <div class=\"mb-4\">\n <label class=\"block text-sm font-medium text-text mb-2\">Source Language<\/label>\n <select class=\"w-full bg-gray-800 rounded-lg p-3 text-text\">\n <option>English<\/option>\n <option>Spanish<\/option>\n <option>French<\/option>\n <option>German<\/option>\n <option>Chinese<\/option>\n <option>Japanese<\/option>\n <option>Arabic<\/option>\n <option>Russian<\/option>\n <\/select>\n <\/div>\n \n <div class=\"mb-4\">\n <label class=\"block text-sm font-medium text-text mb-2\">Target Language<\/label>\n <select class=\"w-full bg-gray-800 rounded-lg p-3 text-text\">\n <option>Spanish<\/option>\n <option>English<\/option>\n <option>French<\/option>\n <option>German<\/option>\n <option>Chinese<\/option>\n <option>Japanese<\/option>\n <option>Arabic<\/option>\n <option>Russian<\/option>\n <\/select>\n <\/div>\n \n <div class=\"mb-4\">\n <label class=\"block text-sm font-medium text-text mb-2\">Text to Translate<\/label>\n <textarea class=\"w-full bg-gray-800 rounded-lg p-3 text-text\" rows=\"5\" placeholder=\"Enter text to translate...\"><\/textarea>\n <\/div>\n \n <div class=\"mb-4\">\n <button class=\"bg-primary hover:bg-primary-dark text-gray-900 font-medium py-2 px-4 rounded-lg\">\n Translate\n <\/button>\n <\/div>\n \n <div class=\"flex-grow border-2 border-primary rounded-lg bg-gray-800 p-4 overflow-auto\">\n <p class=\"text-text-secondary\">Translated text will appear here<\/p>\n <\/div>\n <\/div>\n `\n };\n \n workspaceContent.innerHTML = contents[type] || '<p class=\"text-text\">Workspace content not found<\/p>';\n \n \/\/ Show workspace\n workspaceContainer.classList.remove('hidden');\n }\n\n function closeWorkspace() {\n document.getElementById('workspace-container').classList.add('hidden');\n }\n\n \/\/ Settings panel functions\n function toggleApiKeyVisibility(inputId) {\n const input = document.getElementById(inputId);\n const icon = event.target;\n \n if (input.type === 'password') {\n input.type = 'text';\n icon.classList.remove('fa-eye');\n icon.classList.add('fa-eye-slash');\n } else {\n input.type = 'password';\n icon.classList.remove('fa-eye-slash');\n icon.classList.add('fa-eye');\n }\n }\n\n function saveApiKeys() {\n \/\/ In a real implementation, this would save to a secure backend\n \/\/ For demo purposes, we'll just show a success message\n const notification = document.createElement('div');\n notification.className = 'fixed bottom-4 right-4 bg-green-600 text-white p-4 rounded-lg shadow-lg';\n notification.innerHTML = '<i class=\"fas fa-check-circle mr-2\"><\/i>API Keys saved successfully!';\n document.body.appendChild(notification);\n \n setTimeout(() => {\n notification.remove();\n }, 3000);\n }\n\n function handleFileUpload(event) {\n const files = event.target.files;\n const uploadedFilesContainer = document.getElementById('uploaded-files');\n \n for (let i = 0; i < files.length; i++) {\n const file = files[i];\n const fileItem = document.createElement('div');\n fileItem.className = 'flex items-center justify-between bg-gray-800 p-2 rounded';\n fileItem.innerHTML = `\n <div class=\"flex items-center\">\n <i class=\"fas fa-file text-primary mr-2\"><\/i>\n <span class=\"text-text text-sm\">${file.name}<\/span>\n <\/div>\n <button class=\"text-red-500 hover:text-red-400\" onclick=\"this.parentElement.remove()\">\n <i class=\"fas fa-trash\"><\/i>\n <\/button>\n `;\n uploadedFilesContainer.appendChild(fileItem);\n }\n }\n\n function addPlugin() {\n const pluginInput = document.getElementById('new-plugin');\n const pluginName = pluginInput.value.trim();\n \n if (pluginName) {\n \/\/ In a real implementation, this would add the plugin\n \/\/ For demo purposes, we'll just add it to the list\n const pluginContainer = document.querySelector('.plugin-item').parentElement;\n const newPlugin = document.createElement('div');\n newPlugin.className = 'plugin-item';\n newPlugin.innerHTML = `\n <span>${pluginName}<\/span>\n <button class=\"bg-green-600 hover:bg-green-700 text-white text-xs py-1 px-2 rounded\">Active<\/button>\n `;\n pluginContainer.appendChild(newPlugin);\n \n pluginInput.value = '';\n \n \/\/ Show success notification\n const notification = document.createElement('div');\n notification.className = 'fixed bottom-4 right-4 bg-green-600 text-white p-4 rounded-lg shadow-lg';\n notification.innerHTML = `<i class=\"fas fa-check-circle mr-2\"><\/i>Plugin \"${pluginName}\" added successfully!`;\n document.body.appendChild(notification);\n \n setTimeout(() => {\n notification.remove();\n }, 3000);\n }\n }\n\n \/\/ Help modal functions\n function openHelpModal() {\n document.getElementById('help-modal').style.display = 'block';\n }\n\n function closeHelpModal() {\n document.getElementById('help-modal').style.display = 'none';\n }\n\n function toggleFaq(element) {\n const faqItem = element.parentElement;\n faqItem.classList.toggle('active');\n }\n\n document.addEventListener('DOMContentLoaded', () => {\n const chatForm = document.getElementById('chat-form');\n const chatContainer = document.getElementById('chat-container');\n const messageInput = document.getElementById('message-input');\n const newChatBtn = document.getElementById('new-chat-btn');\n const sendBtn = document.getElementById('send-btn');\n const stopBtn = document.getElementById('stop-btn');\n const sidebarToggle = document.getElementById('sidebar-toggle');\n const sidebar = document.getElementById('sidebar');\n const suggestionButtons = document.querySelectorAll('.suggestion-btn');\n const commentsCtn = document.getElementById('comments-ctn');\n const settingsToggle = document.getElementById('settings-toggle');\n const settingsPanel = document.getElementById('settings-panel');\n const settingsIcon = document.getElementById('settings-icon');\n const helpBtn = document.getElementById('help-btn');\n \n \/\/ Load saved messages\n loadMessages();\n \n \/\/ Initialize comments plugin\n initComments();\n \n \/\/ Toggle sidebar on mobile\n sidebarToggle.onclick = () => {\n sidebar.classList.toggle('sidebar-collapsed');\n sidebar.classList.toggle('sidebar-expanded');\n };\n \n \/\/ Toggle settings panel\n settingsToggle.onclick = () => {\n settingsPanel.classList.toggle('hidden');\n settingsIcon.classList.toggle('fa-chevron-down');\n settingsIcon.classList.toggle('fa-chevron-up');\n };\n \n \/\/ Open help modal\n helpBtn.onclick = openHelpModal;\n \n \/\/ Stop generation if in progress\n stopBtn.onclick = () => {\n if (currentGenerationPromise && typeof currentGenerationPromise.stop === 'function') {\n currentGenerationPromise.stop();\n }\n };\n \n \/\/ Event listener for form submission\n chatForm.addEventListener('submit', async (e) => {\n e.preventDefault();\n const message = messageInput.value.trim();\n if (message) {\n addMessage(message, true);\n messageInput.value = '';\n \n \/\/ Hide suggested prompts after user message\n document.getElementById('suggested-prompts').hidden = true;\n \n \/\/ Generate AI response\n await generateResponse(message);\n }\n });\n \n \/\/ Event listener for new chat button\n newChatBtn.addEventListener('click', () => {\n messages = [];\n saveMessages();\n chatContainer.innerHTML = '';\n document.getElementById('suggested-prompts').hidden = false;\n addMessage(\"Hello! I'm your creative assistant. I can help you brainstorm, write scripts, create prompts, develop stories, invent products, and much more. What would you like to create today?\", false);\n });\n \n \/\/ Event listeners for suggestion buttons\n suggestionButtons.forEach(button => {\n button.addEventListener('click', () => {\n messageInput.value = button.textContent;\n chatForm.dispatchEvent(new Event('submit'));\n });\n });\n \n \/\/ Close help modal when clicking outside of it\n window.onclick = (event) => {\n const helpModal = document.getElementById('help-modal');\n if (event.target === helpModal) {\n closeHelpModal();\n }\n };\n });\n <\/script>\n\n \n <script>\n if (typeof commentsPlugin !== 'undefined') {\n document.getElementById('comments-ctn').innerHTML = commentsPlugin({\n channel: \"adult-ai-feedback\",\n width: \"100%\", \n height: \"100%\"\n });\n }\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Adult.AI – Creative Content Assistant Adult.AI Creative Content Assistant History New Chat Help Create Content Scripts Movies, ads, videos Prompts […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","pagelayer_contact_templates":[],"_pagelayer_content":"","_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_kadence_starter_templates_imported_post":false,"footnotes":"","_wpscppro_dont_share_socialmedia":false,"_wpscppro_custom_social_share_image":0,"_facebook_share_type":"","_twitter_share_type":"","_linkedin_share_type":"","_pinterest_share_type":"","_linkedin_share_type_page":"","_instagram_share_type":"","_medium_share_type":"","_threads_share_type":"","_google_business_share_type":"","_selected_social_profile":[],"_wpsp_enable_custom_social_template":false,"_wpsp_social_scheduling":{"enabled":false,"datetime":null,"platforms":[],"status":"template_only","dateOption":"today","timeOption":"now","customDays":"","customHours":"","customDate":"","customTime":"","schedulingType":"absolute"},"_wpsp_active_default_template":true},"categories":[1],"tags":[],"class_list":["post-712","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Taonga Admin","author_link":"https:\/\/taonga.nxfanz.com\/?author=1"},"uagb_comment_info":0,"uagb_excerpt":"Adult.AI – Creative Content Assistant Adult.AI Creative Content Assistant History New Chat Help Create Content Scripts Movies, ads, videos Prompts […]","_links":{"self":[{"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/posts\/712","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=712"}],"version-history":[{"count":1,"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/posts\/712\/revisions"}],"predecessor-version":[{"id":713,"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/posts\/712\/revisions\/713"}],"wp:attachment":[{"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=712"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=712"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=712"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

Notice: Function _load_textdomain_just_in_time was called incorrectly. Translation loading for the astra-sites domain was triggered too early. This is usually an indicator for some code in the plugin or theme running too early. Translations should be loaded at the init action or later. Please see Debugging in WordPress for more information. (This message was added in version 6.7.0.) in /home/dpjrmkpe/taonga.nxfanz.com/wp-includes/functions.php on line 6131

Warning: include_once(/home/dpjrmkpe/taonga.nxfanz.com/wp-content/plugins/theai/includes/functions.php): Failed to open stream: No such file or directory in /home/dpjrmkpe/taonga.nxfanz.com/wp-content/plugins/theai/theai.php on line 118

Warning: include_once(): Failed opening '/home/dpjrmkpe/taonga.nxfanz.com/wp-content/plugins/theai/includes/functions.php' for inclusion (include_path='.:/opt/cpanel/ea-php81/root/usr/share/pear') in /home/dpjrmkpe/taonga.nxfanz.com/wp-content/plugins/theai/theai.php on line 118

Warning: include_once(/home/dpjrmkpe/taonga.nxfanz.com/wp-content/plugins/theai/includes/api-settings.php): Failed to open stream: No such file or directory in /home/dpjrmkpe/taonga.nxfanz.com/wp-content/plugins/theai/theai.php on line 119

Warning: include_once(): Failed opening '/home/dpjrmkpe/taonga.nxfanz.com/wp-content/plugins/theai/includes/api-settings.php' for inclusion (include_path='.:/opt/cpanel/ea-php81/root/usr/share/pear') in /home/dpjrmkpe/taonga.nxfanz.com/wp-content/plugins/theai/theai.php on line 119

Warning: session_start(): Session cannot be started after headers have already been sent in /home/dpjrmkpe/taonga.nxfanz.com/wp-content/plugins/chatbot-ai-free-models/includes/class-chatbot-main.php on line 88

Warning: Cannot modify header information - headers already sent by (output started at /home/dpjrmkpe/taonga.nxfanz.com/wp-includes/functions.php:6131) in /home/dpjrmkpe/taonga.nxfanz.com/wp-includes/rest-api/class-wp-rest-server.php on line 1902

Warning: Cannot modify header information - headers already sent by (output started at /home/dpjrmkpe/taonga.nxfanz.com/wp-includes/functions.php:6131) in /home/dpjrmkpe/taonga.nxfanz.com/wp-includes/rest-api/class-wp-rest-server.php on line 1902

Warning: Cannot modify header information - headers already sent by (output started at /home/dpjrmkpe/taonga.nxfanz.com/wp-includes/functions.php:6131) in /home/dpjrmkpe/taonga.nxfanz.com/wp-includes/rest-api/class-wp-rest-server.php on line 1902

Warning: Cannot modify header information - headers already sent by (output started at /home/dpjrmkpe/taonga.nxfanz.com/wp-includes/functions.php:6131) in /home/dpjrmkpe/taonga.nxfanz.com/wp-includes/rest-api/class-wp-rest-server.php on line 1902

Warning: Cannot modify header information - headers already sent by (output started at /home/dpjrmkpe/taonga.nxfanz.com/wp-includes/functions.php:6131) in /home/dpjrmkpe/taonga.nxfanz.com/wp-includes/rest-api/class-wp-rest-server.php on line 1902

Warning: Cannot modify header information - headers already sent by (output started at /home/dpjrmkpe/taonga.nxfanz.com/wp-includes/functions.php:6131) in /home/dpjrmkpe/taonga.nxfanz.com/wp-includes/rest-api/class-wp-rest-server.php on line 1902

Warning: Cannot modify header information - headers already sent by (output started at /home/dpjrmkpe/taonga.nxfanz.com/wp-includes/functions.php:6131) in /home/dpjrmkpe/taonga.nxfanz.com/wp-includes/rest-api/class-wp-rest-server.php on line 1902

Warning: Cannot modify header information - headers already sent by (output started at /home/dpjrmkpe/taonga.nxfanz.com/wp-includes/functions.php:6131) in /home/dpjrmkpe/taonga.nxfanz.com/wp-includes/rest-api/class-wp-rest-server.php on line 1902
{"id":712,"date":"2025-08-18T03:42:29","date_gmt":"2025-08-18T03:42:29","guid":{"rendered":"https:\/\/taonga.nxfanz.com\/?p=712"},"modified":"2025-08-18T03:42:29","modified_gmt":"2025-08-18T03:42:29","slug":"generator-adult-ai","status":"publish","type":"post","link":"https:\/\/taonga.nxfanz.com\/?p=712","title":{"rendered":"generator.adult.ai"},"content":{"rendered":"\n\n\n\n \n \n Adult.AI – Creative Content Assistant<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n <script>\n document.addEventListener('DOMContentLoaded', function() {\n tailwind.config = {\n theme: {\n extend: {\n colors: {\n primary: '#FBBF24', \/\/ Yellow accent\n 'primary-dark': '#F59E0B', \/\/ Darker yellow for hover states\n dark: '#111827', \/\/ Dark background\n 'dark-light': '#1f2937', \/\/ Lighter dark for surfaces\n text: '#FFFFFF', \/\/ Studio white text\n 'text-secondary': '#E5E7EB' \/\/ Slightly dimmed white for secondary text\n }\n }\n }\n }\n });\n <\/script>\n <style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600;700&display=swap');\n\n body {\n font-family: 'Poppins', sans-serif;\n background: linear-gradient(to bottom, #1f2937, #111827);\n min-height: 100vh;\n text-align: left; \/* Override default center alignment *\/\n color: #FFFFFF; \/* Set default text color to studio white *\/\n }\n\n .chat-bubble {\n max-width: 80%;\n animation: fadeIn 0.3s ease-out;\n border-radius: 20px;\n }\n\n .user-bubble {\n border-bottom-right-radius: 4px;\n background: linear-gradient(to right, #FBBF24, #F59E0B); \/* Yellow gradient *\/\n }\n\n .ai-bubble {\n border-bottom-left-radius: 4px;\n background-color: #374151; \/* Slightly lighter dark to contrast with white text *\/\n }\n\n .typing-indicator {\n display: flex;\n padding: 10px 15px;\n }\n\n .typing-indicator span {\n display: inline-block;\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background-color: #d1d5db;\n margin: 0 3px;\n animation: typing 1.4s infinite both;\n }\n\n .typing-indicator span:nth-child(2) {\n animation-delay: 0.2s;\n }\n\n .typing-indicator span:nth-child(3) {\n animation-delay: 0.4s;\n }\n\n @keyframes typing {\n\n 0%,\n 60%,\n 100% {\n transform: translateY(0);\n }\n\n 30% {\n transform: translateY(-5px);\n }\n }\n\n @keyframes fadeIn {\n from {\n opacity: 0;\n transform: translateY(10px);\n }\n\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n .content-card:hover {\n transform: translateY(-5px);\n box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);\n }\n\n .gallery-item {\n transition: all 0.3s ease;\n }\n\n .gallery-item:hover {\n transform: scale(1.03);\n }\n\n .category-badge {\n transition: all 0.2s ease;\n }\n\n .category-badge:hover {\n transform: scale(1.05);\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n }\n\n \/* Mobile sidebar toggle *\/\n .sidebar-collapsed {\n width: 0;\n opacity: 0;\n overflow: hidden;\n }\n\n .sidebar-expanded {\n width: 100%;\n opacity: 1;\n overflow: auto;\n }\n\n \/* Tool card styles *\/\n .tool-card {\n transition: all 0.3s ease;\n border: 2px solid transparent;\n }\n\n .tool-card:hover {\n border-color: #FBBF24;\n transform: translateY(-3px);\n }\n\n .tool-card.active {\n border-color: #FBBF24;\n background-color: rgba(251, 191, 36, 0.1);\n }\n\n \/* Workspace window styles *\/\n .workspace-window {\n border: 2px solid #FBBF24;\n background-color: rgba(31, 41, 55, 0.7);\n backdrop-filter: blur(10px);\n }\n\n .workspace-header {\n background-color: rgba(251, 191, 36, 0.2);\n border-bottom: 1px solid #FBBF24;\n }\n\n \/* Settings panel styles *\/\n .settings-panel {\n background-color: #1f2937;\n border: 2px solid #FBBF24;\n border-radius: 12px;\n padding: 20px;\n margin-top: 20px;\n }\n\n .settings-section {\n margin-bottom: 25px;\n }\n\n .settings-section h3 {\n color: #FBBF24;\n margin-bottom: 15px;\n font-size: 18px;\n }\n\n .api-key-input {\n position: relative;\n }\n\n .api-key-input input {\n padding-right: 40px;\n }\n\n .api-key-toggle {\n position: absolute;\n right: 10px;\n top: 50%;\n transform: translateY(-50%);\n cursor: pointer;\n color: #9CA3AF;\n }\n\n .file-upload-area {\n border: 2px dashed #4B5563;\n border-radius: 8px;\n padding: 20px;\n text-align: center;\n transition: all 0.3s ease;\n cursor: pointer;\n }\n\n .file-upload-area:hover {\n border-color: #FBBF24;\n background-color: rgba(251, 191, 36, 0.05);\n }\n\n .plugin-item {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 10px;\n background-color: #374151;\n border-radius: 6px;\n margin-bottom: 8px;\n }\n\n \/* Modal styles *\/\n .modal {\n display: none;\n position: fixed;\n z-index: 1000;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n overflow: auto;\n background-color: rgba(0, 0, 0, 0.8);\n }\n\n .modal-content {\n background-color: #1f2937;\n margin: 5% auto;\n padding: 30px;\n border: 2px solid #FBBF24;\n border-radius: 12px;\n width: 80%;\n max-width: 800px;\n max-height: 80vh;\n overflow-y: auto;\n }\n\n .modal-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 20px;\n border-bottom: 1px solid #374151;\n padding-bottom: 15px;\n }\n\n .modal-header h2 {\n color: #FBBF24;\n font-size: 24px;\n }\n\n .close-modal {\n color: #9CA3AF;\n font-size: 28px;\n font-weight: bold;\n cursor: pointer;\n }\n\n .close-modal:hover {\n color: #FBBF24;\n }\n\n .faq-item {\n margin-bottom: 20px;\n }\n\n .faq-question {\n font-weight: 600;\n color: #FBBF24;\n margin-bottom: 8px;\n cursor: pointer;\n }\n\n .faq-answer {\n color: #E5E7EB;\n line-height: 1.6;\n display: none;\n }\n\n .faq-item.active .faq-answer {\n display: block;\n }\n\n .how-to-section {\n margin-bottom: 25px;\n }\n\n .how-to-section h3 {\n color: #FBBF24;\n margin-bottom: 15px;\n font-size: 20px;\n }\n\n .how-to-steps {\n counter-reset: step-counter;\n }\n\n .how-to-step {\n counter-increment: step-counter;\n margin-bottom: 15px;\n padding-left: 40px;\n position: relative;\n }\n\n .how-to-step:before {\n content: counter(step-counter);\n position: absolute;\n left: 0;\n top: 0;\n background-color: #FBBF24;\n color: #111827;\n width: 28px;\n height: 28px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: bold;\n }\n <\/style>\n<\/head>\n\n<body>\n <div class=\"min-h-screen flex flex-col\">\n \n <header class=\"sticky top-0 z-10 bg-dark-light bg-opacity-90 backdrop-blur-sm border-b border-primary\">\n <div class=\"container mx-auto px-4 py-3 flex items-center justify-between\">\n <div class=\"flex items-center\">\n <button id=\"sidebar-toggle\" class=\"md:hidden mr-4 text-text-secondary hover:text-text\">\n <i class=\"fas fa-bars text-xl\"><\/i>\n <\/button>\n <div class=\"bg-gradient-to-r from-yellow-400 to-yellow-500 w-10 h-10 rounded-xl flex items-center justify-center\">\n <i class=\"fas fa-brain text-xl text-gray-900\"><\/i>\n <\/div>\n <div class=\"ml-4\">\n <h1 class=\"text-xl font-bold text-text\">Adult.AI<\/h1>\n <p class=\"text-xs text-text-secondary\">Creative Content Assistant<\/p>\n <\/div>\n <\/div>\n\n <div class=\"flex items-center space-x-4\">\n <div class=\"relative\">\n <button class=\"bg-dark-light hover:bg-gray-700 rounded-lg px-4 py-2 text-sm text-text transition\">\n <i class=\"fas fa-history mr-2\"><\/i>History\n <\/button>\n <\/div>\n <button id=\"new-chat-btn\" class=\"bg-primary hover:bg-primary-dark rounded-lg px-4 py-2 text-sm text-gray-900 font-medium transition flex items-center\">\n <i class=\"fas fa-plus mr-2\"><\/i>New Chat\n <\/button>\n <button id=\"help-btn\" class=\"bg-dark-light hover:bg-gray-700 rounded-lg px-4 py-2 text-sm text-text transition\">\n <i class=\"fas fa-question-circle mr-2\"><\/i>Help\n <\/button>\n <div class=\"w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center cursor-pointer\">\n <i class=\"fas fa-user text-text-secondary\"><\/i>\n <\/div>\n <\/div>\n <\/div>\n <\/header>\n\n <div class=\"flex-grow flex flex-col md:flex-row container mx-auto\">\n \n <aside id=\"sidebar\" class=\"sidebar-collapsed md:sidebar-expanded md:w-1\/4 p-4 bg-dark-light rounded-xl m-4 transition-all duration-300 md:opacity-100 md:w-1\/4 md:overflow-auto border-2 border-primary\">\n <h2 class=\"text-lg font-semibold mb-4 text-text\">Create Content<\/h2>\n\n <div class=\"space-y-3\">\n <div class=\"category-badge bg-gray-800 rounded-lg p-4 flex items-center cursor-pointer\">\n <div class=\"bg-yellow-400 w-8 h-8 rounded-lg flex items-center justify-center mr-3\">\n <i class=\"fas fa-scroll text-gray-900\"><\/i>\n <\/div>\n <div>\n <h3 class=\"font-medium text-text\">Scripts<\/h3>\n <p class=\"text-xs text-text-secondary\">Movies, ads, videos<\/p>\n <\/div>\n <\/div>\n\n <div class=\"category-badge bg-gray-800 rounded-lg p-4 flex items-center cursor-pointer\">\n <div class=\"bg-yellow-500 w-8 h-8 rounded-lg flex items-center justify-center mr-3\">\n <i class=\"fas fa-keyboard text-gray-900\"><\/i>\n <\/div>\n <div>\n <h3 class=\"font-medium text-text\">Prompts<\/h3>\n <p class=\"text-xs text-text-secondary\">AI guidance & inspiration<\/p>\n <\/div>\n <\/div>\n\n <div class=\"category-badge bg-gray-800 rounded-lg p-4 flex items-center cursor-pointer\">\n <div class=\"bg-yellow-400 w-8 h-8 rounded-lg flex items-center justify-center mr-3\">\n <i class=\"fas fa-book-open text-gray-900\"><\/i>\n <\/div>\n <div>\n <h3 class=\"font-medium text-text\">Stories<\/h3>\n <p class=\"text-xs text-text-secondary\">Creative writing & fiction<\/p>\n <\/div>\n <\/div>\n\n <div class=\"category-badge bg-gray-800 rounded-lg p-4 flex items-center cursor-pointer\">\n <div class=\"bg-yellow-500 w-8 h-8 rounded-lg flex items-center justify-center mr-3\">\n <i class=\"fas fa-box text-gray-900\"><\/i>\n <\/div>\n <div>\n <h3 class=\"font-medium text-text\">Products<\/h3>\n <p class=\"text-xs text-text-secondary\">Ideas & development<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"mt-8\">\n <h2 class=\"text-lg font-semibold mb-4 text-text\">Recent Content<\/h2>\n <div class=\"space-y-4\">\n <div class=\"bg-gray-800 rounded-lg p-3 text-sm cursor-pointer hover:bg-gray-700 transition\">\n <div class=\"flex justify-between\">\n <p class=\"font-medium text-text\">Sci-fi story concepts<\/p>\n <span class=\"text-text-secondary text-xs\">Today<\/span>\n <\/div>\n <p class=\"text-text-secondary truncate\">Exploring intergalactic diplomacy concepts…<\/p>\n <\/div>\n\n <div class=\"bg-gray-800 rounded-lg p-3 text-sm cursor-pointer hover:bg-gray-700 transition\">\n <div class=\"flex justify-between\">\n <p class=\"font-medium text-text\">Product naming<\/p>\n <span class=\"text-text-secondary text-xs\">Yesterday<\/span>\n <\/div>\n <p class=\"text-text-secondary truncate\">Names for new eco-friendly home appliance…<\/p>\n <\/div>\n\n <div class=\"bg-gray-800 rounded-lg p-3 text-sm cursor-pointer hover:bg-gray-700 transition\">\n <div class=\"flex justify-between\">\n <p class=\"font-medium text-text\">Social media posts<\/p>\n <span class=\"text-text-secondary text-xs\">2 days ago<\/span>\n <\/div>\n <p class=\"text-text-secondary truncate\">Engaging content for fitness brand…<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"mt-8\">\n <button id=\"settings-toggle\" class=\"w-full bg-gray-800 hover:bg-gray-700 rounded-lg p-4 flex items-center justify-between transition\">\n <div class=\"flex items-center\">\n <div class=\"bg-yellow-400 w-8 h-8 rounded-lg flex items-center justify-center mr-3\">\n <i class=\"fas fa-cog text-gray-900\"><\/i>\n <\/div>\n <h3 class=\"font-medium text-text\">Settings<\/h3>\n <\/div>\n <i id=\"settings-icon\" class=\"fas fa-chevron-down text-text-secondary transition-transform\"><\/i>\n <\/button>\n \n <div id=\"settings-panel\" class=\"settings-panel hidden\">\n \n <div class=\"settings-section\">\n <h3>API Keys<\/h3>\n <div class=\"space-y-3\">\n <div class=\"api-key-input\">\n <label class=\"block text-sm text-text-secondary mb-1\">OpenAI API Key<\/label>\n <div class=\"relative\">\n <input type=\"password\" id=\"openai-key\" class=\"w-full bg-gray-800 rounded-lg p-3 text-text\" placeholder=\"sk-...\" value=\"sk-\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\">\n <span class=\"api-key-toggle\" onclick=\"toggleApiKeyVisibility('openai-key')\">\n <i class=\"fas fa-eye\"><\/i>\n <\/span>\n <\/div>\n <\/div>\n \n <div class=\"api-key-input\">\n <label class=\"block text-sm text-text-secondary mb-1\">Stability AI API Key<\/label>\n <div class=\"relative\">\n <input type=\"password\" id=\"stability-key\" class=\"w-full bg-gray-800 rounded-lg p-3 text-text\" placeholder=\"sk-...\" value=\"sk-\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\">\n <span class=\"api-key-toggle\" onclick=\"toggleApiKeyVisibility('stability-key')\">\n <i class=\"fas fa-eye\"><\/i>\n <\/span>\n <\/div>\n <\/div>\n \n <button class=\"bg-primary hover:bg-primary-dark text-gray-900 font-medium py-2 px-4 rounded-lg w-full\" onclick=\"saveApiKeys()\">\n Save API Keys\n <\/button>\n <\/div>\n <\/div>\n \n \n <div class=\"settings-section\">\n <h3>Upload Files<\/h3>\n <div class=\"file-upload-area\" onclick=\"document.getElementById('file-upload').click()\">\n <i class=\"fas fa-cloud-upload-alt text-3xl text-primary mb-3\"><\/i>\n <p class=\"text-text-secondary\">Drag & drop files here or click to browse<\/p>\n <input type=\"file\" id=\"file-upload\" class=\"hidden\" multiple onchange=\"handleFileUpload(event)\">\n <\/div>\n <div id=\"uploaded-files\" class=\"mt-3 space-y-2\"><\/div>\n <\/div>\n \n \n <div class=\"settings-section\">\n <h3>Plugin Integration<\/h3>\n <div class=\"space-y-3\">\n <div class=\"plugin-item\">\n <span>Image Enhancement<\/span>\n <button class=\"bg-green-600 hover:bg-green-700 text-white text-xs py-1 px-2 rounded\">Active<\/button>\n <\/div>\n <div class=\"plugin-item\">\n <span>Text-to-Speech<\/span>\n <button class=\"bg-gray-600 hover:bg-gray-700 text-white text-xs py-1 px-2 rounded\">Inactive<\/button>\n <\/div>\n <div class=\"plugin-item\">\n <span>Video Effects<\/span>\n <button class=\"bg-green-600 hover:bg-green-700 text-white text-xs py-1 px-2 rounded\">Active<\/button>\n <\/div>\n \n <div class=\"flex mt-2\">\n <input type=\"text\" id=\"new-plugin\" class=\"flex-grow bg-gray-800 rounded-l-lg p-2 text-text\" placeholder=\"Plugin name or URL\">\n <button class=\"bg-primary hover:bg-primary-dark text-gray-900 font-medium py-2 px-4 rounded-r-lg\" onclick=\"addPlugin()\">\n Add\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/aside>\n\n \n <div class=\"flex-grow flex flex-col p-4 md:p-0\">\n \n <div class=\"mt-4 mb-4\">\n <h2 class=\"text-lg font-semibold mb-4 ml-2 text-text\">Creative Tools<\/h2>\n <div class=\"grid grid-cols-2 md:grid-cols-4 gap-4\">\n <div class=\"tool-card bg-gray-800 rounded-xl p-4 cursor-pointer\" onclick=\"openWorkspace('image')\">\n <div class=\"bg-yellow-400 w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-3\">\n <i class=\"fas fa-image text-2xl text-gray-900\"><\/i>\n <\/div>\n <h3 class=\"font-medium text-text text-center\">Image Generator<\/h3>\n <\/div>\n\n <div class=\"tool-card bg-gray-800 rounded-xl p-4 cursor-pointer\" onclick=\"openWorkspace('video')\">\n <div class=\"bg-yellow-500 w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-3\">\n <i class=\"fas fa-video text-2xl text-gray-900\"><\/i>\n <\/div>\n <h3 class=\"font-medium text-text text-center\">Video Editor<\/h3>\n <\/div>\n\n <div class=\"tool-card bg-gray-800 rounded-xl p-4 cursor-pointer\" onclick=\"openWorkspace('audio')\">\n <div class=\"bg-yellow-400 w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-3\">\n <i class=\"fas fa-music text-2xl text-gray-900\"><\/i>\n <\/div>\n <h3 class=\"font-medium text-text text-center\">Audio Generator<\/h3>\n <\/div>\n\n <div class=\"tool-card bg-gray-800 rounded-xl p-4 cursor-pointer\" onclick=\"openWorkspace('code')\">\n <div class=\"bg-yellow-500 w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-3\">\n <i class=\"fas fa-code text-2xl text-gray-900\"><\/i>\n <\/div>\n <h3 class=\"font-medium text-text text-center\">Code Editor<\/h3>\n <\/div>\n \n <div class=\"tool-card bg-gray-800 rounded-xl p-4 cursor-pointer\" onclick=\"openWorkspace('writing')\">\n <div class=\"bg-yellow-400 w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-3\">\n <i class=\"fas fa-pen-fancy text-2xl text-gray-900\"><\/i>\n <\/div>\n <h3 class=\"font-medium text-text text-center\">Writing Assistant<\/h3>\n <\/div>\n\n <div class=\"tool-card bg-gray-800 rounded-xl p-4 cursor-pointer\" onclick=\"openWorkspace('design')\">\n <div class=\"bg-yellow-500 w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-3\">\n <i class=\"fas fa-palette text-2xl text-gray-900\"><\/i>\n <\/div>\n <h3 class=\"font-medium text-text text-center\">Design Tools<\/h3>\n <\/div>\n\n <div class=\"tool-card bg-gray-800 rounded-xl p-4 cursor-pointer\" onclick=\"openWorkspace('data')\">\n <div class=\"bg-yellow-400 w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-3\">\n <i class=\"fas fa-database text-2xl text-gray-900\"><\/i>\n <\/div>\n <h3 class=\"font-medium text-text text-center\">Data Analysis<\/h3>\n <\/div>\n\n <div class=\"tool-card bg-gray-800 rounded-xl p-4 cursor-pointer\" onclick=\"openWorkspace('translation')\">\n <div class=\"bg-yellow-500 w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-3\">\n <i class=\"fas fa-language text-2xl text-gray-900\"><\/i>\n <\/div>\n <h3 class=\"font-medium text-text text-center\">Translation<\/h3>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"bg-dark-light rounded-xl p-4 flex-grow flex flex-col mb-4 border-2 border-primary\">\n <div id=\"chat-container\" class=\"flex-grow overflow-y-auto space-y-6 p-4\"><\/div>\n\n \n <div id=\"suggested-prompts\" class=\"px-4 mt-4\">\n <h3 class=\"text-sm font-medium mb-3 text-text\">Try asking:<\/h3>\n <div class=\"flex flex-wrap gap-2\">\n <button class=\"suggestion-btn bg-gray-800 hover:bg-gray-700 py-2 px-4 rounded-xl text-sm text-text transition\">\n Create a story about space exploration\n <\/button>\n <button class=\"suggestion-btn bg-gray-800 hover:bg-gray-700 py-2 px-4 rounded-xl text-sm text-text transition\">\n Suggest product ideas for eco-friendly living\n <\/button>\n <button class=\"suggestion-btn bg-gray-800 hover:bg-gray-700 py-2 px-4 rounded-xl text-sm text-text transition\">\n Write a short script for a thriller scene\n <\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"mt-4 relative\">\n <form id=\"chat-form\" class=\"flex rounded-xl overflow-hidden border border-gray-700 bg-gray-800\">\n <div class=\"flex-grow flex items-center px-4\">\n <button type=\"button\" class=\"text-text-secondary hover:text-text mr-3\">\n <i class=\"fas fa-plus-circle\"><\/i>\n <\/button>\n <input id=\"message-input\" type=\"text\" placeholder=\"Ask anything or create content...\" autocomplete=\"off\" class=\"w-full bg-transparent py-4 focus:outline-none placeholder-text-secondary text-sm text-text\">\n <\/div>\n <div id=\"form-actions\" class=\"flex items-center\">\n <button type=\"submit\" id=\"send-btn\" class=\"bg-primary hover:bg-primary-dark py-4 px-6 text-gray-900 font-medium transition\">\n <i class=\"fas fa-paper-plane\"><\/i>\n <\/button>\n <button type=\"button\" id=\"stop-btn\" hidden class=\"bg-red-600 hover:bg-red-700 py-4 px-6 text-text font-medium transition\">\n <i class=\"fas fa-stop\"><\/i>\n <\/button>\n <\/div>\n <\/form>\n <div class=\"absolute bottom-3 right-16 text-sm text-text-secondary\">\n <i class=\"fas fa-microphone\"><\/i>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"content-gallery\" class=\"mt-6 mb-4\">\n <h2 class=\"text-lg font-semibold mb-4 ml-2 text-text\">Recently Generated Content<\/h2>\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4\">\n <div class=\"content-card bg-dark-light rounded-xl p-4 transition cursor-pointer border-2 border-primary\">\n <div class=\"flex justify-between items-start\">\n <div class=\"bg-yellow-400 w-10 h-10 rounded-lg flex items-center justify-center\">\n <i class=\"fas fa-scroll text-gray-900\"><\/i>\n <\/div>\n <button class=\"text-text-secondary hover:text-text\">\n <i class=\"fas fa-ellipsis-h\"><\/i>\n <\/button>\n <\/div>\n <h3 class=\"font-medium mt-3 text-text\">Sci-Fi Short Story<\/h3>\n <p class=\"text-text-secondary text-sm mt-2\">A space explorer discovers a planet where emotions are tangible objects…<\/p>\n <\/div>\n\n <div class=\"content-card bg-dark-light rounded-xl p-4 transition cursor-pointer border-2 border-primary\">\n <div class=\"flex justify-between items-start\">\n <div class=\"bg-yellow-500 w-10 h-10 rounded-lg flex items-center justify-center\">\n <i class=\"fas fa-box text-gray-900\"><\/i>\n <\/div>\n <button class=\"text-text-secondary hover:text-text\">\n <i class=\"fas fa-ellipsis-h\"><\/i>\n <\/button>\n <\/div>\n <h3 class=\"font-medium mt-3 text-text\">Product Concept<\/h3>\n <p class=\"text-text-secondary text-sm mt-2\">Smart hydration bottle that tracks water intake and syncs with health apps…<\/p>\n <\/div>\n\n <div class=\"content-card bg-dark-light rounded-xl p-4 transition cursor-pointer border-2 border-primary\">\n <div class=\"flex justify-between items-start\">\n <div class=\"bg-yellow-400 w-10 h-10 rounded-lg flex items-center justify-center\">\n <i class=\"fas fa-keyboard text-gray-900\"><\/i>\n <\/div>\n <button class=\"text-text-secondary hover:text-text\">\n <i class=\"fas fa-ellipsis-h\"><\/i>\n <\/button>\n <\/div>\n <h3 class=\"font-medium mt-3 text-text\">AI Art Prompts<\/h3>\n <p class=\"text-text-secondary text-sm mt-2\">Series of prompts for generating cyberpunk cityscapes with neon aesthetics…<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <section class=\"mt-auto mb-4 p-4\">\n <h2 class=\"text-lg font-semibold mb-4 ml-2 text-text\">Community Feedback<\/h2>\n <div id=\"comments-ctn\" style=\"width:100%; height:400px;\"><\/div>\n <\/section>\n <\/div>\n\n \n <div id=\"workspace-container\" class=\"fixed inset-0 bg-black bg-opacity-70 z-50 hidden flex items-center justify-center p-4\">\n <div class=\"workspace-window rounded-xl w-full max-w-4xl h-5\/6 flex flex-col\">\n <div class=\"workspace-header p-4 rounded-t-xl flex justify-between items-center\">\n <h3 id=\"workspace-title\" class=\"text-lg font-semibold text-text\">Workspace<\/h3>\n <button onclick=\"closeWorkspace()\" class=\"text-text-secondary hover:text-text\">\n <i class=\"fas fa-times text-xl\"><\/i>\n <\/button>\n <\/div>\n <div id=\"workspace-content\" class=\"flex-grow p-4 overflow-auto\">\n \n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"help-modal\" class=\"modal\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <h2>Help & Support<\/h2>\n <span class=\"close-modal\" onclick=\"closeHelpModal()\">×<\/span>\n <\/div>\n \n <div class=\"how-to-section\">\n <h3>How to Use Adult.AI<\/h3>\n <div class=\"how-to-steps\">\n <div class=\"how-to-step\">\n <p><strong>Getting Started:<\/strong> Create an account or sign in to access all features. Set up your API keys in the Settings panel for full functionality.<\/p>\n <\/div>\n <div class=\"how-to-step\">\n <p><strong>Creating Content:<\/strong> Use the chat interface to describe what you want to create. The AI will generate content based on your prompts.<\/p>\n <\/div>\n <div class=\"how-to-step\">\n <p><strong>Using Tools:<\/strong> Select a tool from the Creative Tools section to open a specialized workspace with parameters specific to that tool.<\/p>\n <\/div>\n <div class=\"how-to-step\">\n <p><strong>Managing Files:<\/strong> Upload your own files, models, or data in the Settings panel to enhance your creative projects.<\/p>\n <\/div>\n <div class=\"how-to-step\">\n <p><strong>Expanding Features:<\/strong> Add plugins in the Settings panel to extend the capabilities of Adult.AI with specialized tools.<\/p>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"faq-section\">\n <h3>Frequently Asked Questions<\/h3>\n \n <div class=\"faq-item\">\n <div class=\"faq-question\" onclick=\"toggleFaq(this)\">How do I add my API keys?<\/div>\n <div class=\"faq-answer\">\n Navigate to the Settings panel in the sidebar. Under the API Keys section, enter your keys for services like OpenAI or Stability AI. Click “Save API Keys” to store them securely.\n <\/div>\n <\/div>\n \n <div class=\"faq-item\">\n <div class=\"faq-question\" onclick=\"toggleFaq(this)\">Can I upload my own models or data?<\/div>\n <div class=\"faq-answer\">\n Yes! In the Settings panel, use the File Upload section to upload your own files, trained models, or data. These will be available for use in the various tools.\n <\/div>\n <\/div>\n \n <div class=\"faq-item\">\n <div class=\"faq-question\" onclick=\"toggleFaq(this)\">How do I add new plugins?<\/div>\n <div class=\"faq-answer\">\n In the Settings panel, go to the Plugin Integration section. Enter the plugin name or URL in the input field and click “Add”. You can manage active and inactive plugins from this section.\n <\/div>\n <\/div>\n \n <div class=\"faq-item\">\n <div class=\"faq-question\" onclick=\"toggleFaq(this)\">What tools are available?<\/div>\n <div class=\"faq-answer\">\n Adult.AI offers a variety of creative tools including Image Generator, Video Editor, Audio Generator, Code Editor, Writing Assistant, Design Tools, Data Analysis, and Translation. Each tool has its own specialized workspace.\n <\/div>\n <\/div>\n \n <div class=\"faq-item\">\n <div class=\"faq-question\" onclick=\"toggleFaq(this)\">How do I save my work?<\/div>\n <div class=\"faq-answer\">\n Your chat history is automatically saved. For generated content, use the save button within each tool’s workspace. You can also download your creations directly to your device.\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n \/\/ Initialize message storage\n let messages = [];\n let currentGenerationPromise = null;\n\n \/\/ Load messages from localStorage on page load\n function loadMessages() {\n if (localStorage.messages) {\n messages = JSON.parse(localStorage.messages);\n chatContainer.innerHTML = '';\n messages.forEach(msg => addMessageToList(msg.content, msg.isUser));\n } else {\n \/\/ Show initial welcome message if no history\n addMessage(\"Hello! I'm your creative assistant. I can help you brainstorm, write scripts, create prompts, develop stories, invent products, and much more. What would you like to create today?\", false);\n messages.push({ isUser: false, content: \"Hello! I'm your creative assistant. I can help you brainstorm, write scripts, create prompts, develop stories, invent products, and much more. What would you like to create today?\" });\n saveMessages();\n }\n }\n\n \/\/ Save messages to localStorage\n function saveMessages() {\n localStorage.messages = JSON.stringify(messages);\n }\n\n \/\/ Add a message to the chat (without saving to storage)\n function addMessageToList(message, isUser = false) {\n const messageDiv = document.createElement('div');\n messageDiv.className = `chat-bubble ${isUser ? 'user-bubble ml-auto' : 'ai-bubble'} p-4`;\n const senderIcon = isUser ? \n '<div class=\"bg-gray-900 w-8 h-8 rounded-lg flex items-center justify-center mr-3\"><i class=\"fas fa-user text-yellow-400\"><\/i><\/div>' :\n '<div class=\"bg-yellow-500 w-8 h-8 rounded-lg flex items-center justify-center mr-3\"><i class=\"fas fa-robot text-gray-900\"><\/i><\/div>';\n \n messageDiv.innerHTML = `\n <div class=\"flex items-start\">\n ${senderIcon}\n <div>\n <p class=\"font-medium ${isUser ? 'text-gray-900' : 'text-text'}\">${isUser ? 'You' : 'Adult.AI'}<\/p>\n <p class=\"mt-2 ${isUser ? 'text-gray-900' : 'text-text'}\">${message}<\/p>\n <\/div>\n <\/div>\n `;\n \n chatContainer.appendChild(messageDiv);\n chatContainer.scrollTop = chatContainer.scrollHeight;\n }\n\n \/\/ Add a new message to chat and save to storage\n function addMessage(message, isUser = false) {\n addMessageToList(message, isUser);\n messages.push({ isUser, content: message });\n saveMessages();\n }\n\n \/\/ Create AI instruction based on conversation history\n function createInstruction(userMessage) {\n let conversation = messages.map(m => \n `${m.isUser ? 'Human' : 'Adult.AI'}: ${m.content}`\n ).join('\\n');\n \n return `You are Adult.AI, a creative content assistant. The human and you are having a conversation.\n\n${conversation}\n\nNow the human says: ${userMessage}\n\nAdult.AI:`;\n }\n\n \/\/ Create an empty AI message container for streaming responses\n function startAIMessage() {\n const messageDiv = document.createElement('div');\n messageDiv.className = 'chat-bubble ai-bubble p-4 w-full md:w-3\/4';\n messageDiv.innerHTML = `\n <div class=\"flex items-start\">\n <div class=\"bg-yellow-500 w-8 h-8 rounded-lg flex items-center justify-center mr-3\">\n <i class=\"fas fa-robot text-gray-900\"><\/i>\n <\/div>\n <div>\n <p class=\"font-medium text-text\">Adult.AI<\/p>\n <p class=\"mt-2 text-text\"><\/p>\n <\/div>\n <\/div>\n `;\n chatContainer.appendChild(messageDiv);\n return messageDiv.querySelector('p.mt-2');\n }\n\n \/\/ Generate AI response with streaming\n async function generateResponse(message) {\n \/\/ Disable input and show stop button\n sendBtn.hidden = true;\n stopBtn.hidden = false;\n messageInput.disabled = true;\n \n \/\/ Create AI message container for streaming\n const contentEl = startAIMessage();\n let fullText = '';\n \n try {\n currentGenerationPromise = generateText({\n instruction: createInstruction(message),\n onChunk: (data) => {\n fullText += data.textChunk;\n contentEl.textContent = fullText;\n }\n });\n \n await currentGenerationPromise;\n \n \/\/ Save the completed AI response\n messages.push({ isUser: false, content: fullText });\n saveMessages();\n } catch (error) {\n console.error(\"Error generating response:\", error);\n contentEl.textContent = \"Sorry, I encountered an error. Please try again.\";\n } finally {\n \/\/ Reset form controls\n sendBtn.hidden = false;\n stopBtn.hidden = true;\n messageInput.disabled = false;\n currentGenerationPromise = null;\n }\n }\n\n \/\/ Initialize comments plugin\n function initComments() {\n if (typeof commentsPlugin !== 'undefined') {\n commentsCtn.innerHTML = commentsPlugin({\n channel: \"adult-ai-feedback\",\n width: \"100%\", \n height: \"100%\"\n });\n }\n }\n\n \/\/ Workspace functions\n function openWorkspace(type) {\n const workspaceContainer = document.getElementById('workspace-container');\n const workspaceTitle = document.getElementById('workspace-title');\n const workspaceContent = document.getElementById('workspace-content');\n \n \/\/ Set title based on workspace type\n const titles = {\n 'image': 'Image Generator',\n 'video': 'Video Editor',\n 'audio': 'Audio Generator',\n 'code': 'Code Editor',\n 'writing': 'Writing Assistant',\n 'design': 'Design Tools',\n 'data': 'Data Analysis',\n 'translation': 'Translation'\n };\n \n workspaceTitle.textContent = titles[type] || 'Workspace';\n \n \/\/ Set content based on workspace type\n const contents = {\n 'image': `\n <div class=\"flex flex-col h-full\">\n <div class=\"mb-4\">\n <label class=\"block text-sm font-medium text-text mb-2\">Describe the image you want to create:<\/label>\n <textarea class=\"w-full bg-gray-800 rounded-lg p-3 text-text\" rows=\"3\" placeholder=\"A futuristic city with neon lights...\"><\/textarea>\n <\/div>\n \n <div class=\"grid grid-cols-2 gap-4 mb-4\">\n <div>\n <label class=\"block text-sm font-medium text-text mb-2\">Style<\/label>\n <select class=\"w-full bg-gray-800 rounded-lg p-3 text-text\">\n <option>Photorealistic<\/option>\n <option>Digital Art<\/option>\n <option>Oil Painting<\/option>\n <option>Watercolor<\/option>\n <option>Cartoon<\/option>\n <option>Anime<\/option>\n <\/select>\n <\/div>\n \n <div>\n <label class=\"block text-sm font-medium text-text mb-2\">Size<\/label>\n <select class=\"w-full bg-gray-800 rounded-lg p-3 text-text\">\n <option>512x512<\/option>\n <option>768x768<\/option>\n <option>1024x1024<\/option>\n <\/select>\n <\/div>\n <\/div>\n \n <div class=\"mb-4\">\n <button class=\"bg-primary hover:bg-primary-dark text-gray-900 font-medium py-2 px-4 rounded-lg\">\n Generate Image\n <\/button>\n <\/div>\n \n <div class=\"flex-grow border-2 border-primary rounded-lg flex items-center justify-center bg-gray-800\">\n <div class=\"text-center\">\n <i class=\"fas fa-image text-4xl text-primary mb-3\"><\/i>\n <p class=\"text-text-secondary\">Generated images will appear here<\/p>\n <\/div>\n <\/div>\n <\/div>\n `,\n 'video': `\n <div class=\"flex flex-col h-full\">\n <div class=\"mb-4\">\n <label class=\"block text-sm font-medium text-text mb-2\">Upload your video:<\/label>\n <div class=\"border-2 border-dashed border-primary rounded-lg p-8 text-center\">\n <i class=\"fas fa-cloud-upload-alt text-3xl text-primary mb-3\"><\/i>\n <p class=\"text-text-secondary\">Drag & drop your video file here<\/p>\n <button class=\"mt-3 bg-gray-700 hover:bg-gray-600 text-text py-2 px-4 rounded-lg\">\n Browse Files\n <\/button>\n <\/div>\n <\/div>\n \n <div class=\"grid grid-cols-2 gap-4 mb-4\">\n <div>\n <label class=\"block text-sm font-medium text-text mb-2\">Effect<\/label>\n <select class=\"w-full bg-gray-800 rounded-lg p-3 text-text\">\n <option>Color Correction<\/option>\n <option>Slow Motion<\/option>\n <option>Time-lapse<\/option>\n <option>Stabilization<\/option>\n <option>Green Screen<\/option>\n <\/select>\n <\/div>\n \n <div>\n <label class=\"block text-sm font-medium text-text mb-2\">Quality<\/label>\n <select class=\"w-full bg-gray-800 rounded-lg p-3 text-text\">\n <option>720p<\/option>\n <option>1080p<\/option>\n <option>4K<\/option>\n <\/select>\n <\/div>\n <\/div>\n \n <div class=\"flex-grow border-2 border-primary rounded-lg flex items-center justify-center bg-gray-800\">\n <div class=\"text-center\">\n <i class=\"fas fa-video text-4xl text-primary mb-3\"><\/i>\n <p class=\"text-text-secondary\">Video editor will appear here<\/p>\n <\/div>\n <\/div>\n <\/div>\n `,\n 'audio': `\n <div class=\"flex flex-col h-full\">\n <div class=\"mb-4\">\n <label class=\"block text-sm font-medium text-text mb-2\">Describe the audio you want to create:<\/label>\n <textarea class=\"w-full bg-gray-800 rounded-lg p-3 text-text\" rows=\"3\" placeholder=\"Ambient music with piano and strings...\"><\/textarea>\n <\/div>\n \n <div class=\"grid grid-cols-2 gap-4 mb-4\">\n <div>\n <label class=\"block text-sm font-medium text-text mb-2\">Genre<\/label>\n <select class=\"w-full bg-gray-800 rounded-lg p-3 text-text\">\n <option>Ambient<\/option>\n <option>Classical<\/option>\n <option>Electronic<\/option>\n <option>Jazz<\/option>\n <option>Rock<\/option>\n <option>Hip Hop<\/option>\n <\/select>\n <\/div>\n \n <div>\n <label class=\"block text-sm font-medium text-text mb-2\">Duration<\/label>\n <select class=\"w-full bg-gray-800 rounded-lg p-3 text-text\">\n <option>30 seconds<\/option>\n <option>1 minute<\/option>\n <option>3 minutes<\/option>\n <option>5 minutes<\/option>\n <\/select>\n <\/div>\n <\/div>\n \n <div class=\"mb-4\">\n <button class=\"bg-primary hover:bg-primary-dark text-gray-900 font-medium py-2 px-4 rounded-lg\">\n Generate Audio\n <\/button>\n <\/div>\n \n <div class=\"flex-grow border-2 border-primary rounded-lg flex items-center justify-center bg-gray-800\">\n <div class=\"text-center\">\n <i class=\"fas fa-music text-4xl text-primary mb-3\"><\/i>\n <p class=\"text-text-secondary\">Audio player will appear here<\/p>\n <\/div>\n <\/div>\n <\/div>\n `,\n 'code': `\n <div class=\"flex flex-col h-full\">\n <div class=\"mb-4\">\n <label class=\"block text-sm font-medium text-text mb-2\">Select language:<\/label>\n <select class=\"w-full bg-gray-800 rounded-lg p-3 text-text\">\n <option>JavaScript<\/option>\n <option>Python<\/option>\n <option>HTML\/CSS<\/option>\n <option>Java<\/option>\n <option>C++<\/option>\n <option>Rust<\/option>\n <\/select>\n <\/div>\n \n <div class=\"mb-4\">\n <label class=\"block text-sm font-medium text-text mb-2\">Describe what you want to create:<\/label>\n <textarea class=\"w-full bg-gray-800 rounded-lg p-3 text-text\" rows=\"2\" placeholder=\"A function that calculates fibonacci numbers...\"><\/textarea>\n <\/div>\n \n <div class=\"mb-4\">\n <button class=\"bg-primary hover:bg-primary-dark text-gray-900 font-medium py-2 px-4 rounded-lg\">\n Generate Code\n <\/button>\n <\/div>\n \n <div class=\"flex-grow border-2 border-primary rounded-lg bg-gray-800 overflow-hidden\">\n <div class=\"p-3 bg-gray-900 border-b border-primary\">\n <div class=\"flex space-x-2\">\n <div class=\"w-3 h-3 rounded-full bg-red-500\"><\/div>\n <div class=\"w-3 h-3 rounded-full bg-yellow-500\"><\/div>\n <div class=\"w-3 h-3 rounded-full bg-green-500\"><\/div>\n <\/div>\n <\/div>\n <textarea class=\"w-full h-64 bg-gray-900 p-4 text-text font-mono text-sm\" placeholder=\"\/\/ Write your code here...\"><\/textarea>\n <\/div>\n \n <div class=\"mt-4 flex justify-end\">\n <button class=\"bg-primary hover:bg-primary-dark text-gray-900 font-medium py-2 px-4 rounded-lg\">\n Run Code\n <\/button>\n <\/div>\n <\/div>\n `,\n 'writing': `\n <div class=\"flex flex-col h-full\">\n <div class=\"mb-4\">\n <label class=\"block text-sm font-medium text-text mb-2\">Content Type<\/label>\n <select class=\"w-full bg-gray-800 rounded-lg p-3 text-text\">\n <option>Blog Post<\/option>\n <option>Article<\/option>\n <option>Story<\/option>\n <option>Script<\/option>\n <option>Poem<\/option>\n <option>Email<\/option>\n <\/select>\n <\/div>\n \n <div class=\"mb-4\">\n <label class=\"block text-sm font-medium text-text mb-2\">Topic<\/label>\n <input type=\"text\" class=\"w-full bg-gray-800 rounded-lg p-3 text-text\" placeholder=\"The future of renewable energy\">\n <\/div>\n \n <div class=\"mb-4\">\n <label class=\"block text-sm font-medium text-text mb-2\">Tone<\/label>\n <select class=\"w-full bg-gray-800 rounded-lg p-3 text-text\">\n <option>Professional<\/option>\n <option>Casual<\/option>\n <option>Friendly<\/option>\n <option>Humorous<\/option>\n <option>Inspiring<\/option>\n <\/select>\n <\/div>\n \n <div class=\"mb-4\">\n <button class=\"bg-primary hover:bg-primary-dark text-gray-900 font-medium py-2 px-4 rounded-lg\">\n Generate Content\n <\/button>\n <\/div>\n \n <div class=\"flex-grow border-2 border-primary rounded-lg bg-gray-800 p-4 overflow-auto\">\n <p class=\"text-text-secondary\">Generated content will appear here<\/p>\n <\/div>\n <\/div>\n `,\n 'design': `\n <div class=\"flex flex-col h-full\">\n <div class=\"mb-4\">\n <label class=\"block text-sm font-medium text-text mb-2\">Design Type<\/label>\n <select class=\"w-full bg-gray-800 rounded-lg p-3 text-text\">\n <option>Logo<\/option>\n <option>Poster<\/option>\n <option>Social Media Graphic<\/option>\n <option>Website Mockup<\/option>\n <option>Business Card<\/option>\n <option>Infographic<\/option>\n <\/select>\n <\/div>\n \n <div class=\"mb-4\">\n <label class=\"block text-sm font-medium text-text mb-2\">Description<\/label>\n <textarea class=\"w-full bg-gray-800 rounded-lg p-3 text-text\" rows=\"3\" placeholder=\"A modern logo for a tech company...\"><\/textarea>\n <\/div>\n \n <div class=\"grid grid-cols-2 gap-4 mb-4\">\n <div>\n <label class=\"block text-sm font-medium text-text mb-2\">Color Scheme<\/label>\n <select class=\"w-full bg-gray-800 rounded-lg p-3 text-text\">\n <option>Monochrome<\/option>\n <option>Vibrant<\/option>\n <option>Pastel<\/option>\n <option>Earth Tones<\/option>\n <option>Neon<\/option>\n <\/select>\n <\/div>\n \n <div>\n <label class=\"block text-sm font-medium text-text mb-2\">Style<\/label>\n <select class=\"w-full bg-gray-800 rounded-lg p-3 text-text\">\n <option>Minimalist<\/option>\n <option>Modern<\/option>\n <option>Vintage<\/option>\n <option>Abstract<\/option>\n <option>Corporate<\/option>\n <\/select>\n <\/div>\n <\/div>\n \n <div class=\"mb-4\">\n <button class=\"bg-primary hover:bg-primary-dark text-gray-900 font-medium py-2 px-4 rounded-lg\">\n Generate Design\n <\/button>\n <\/div>\n \n <div class=\"flex-grow border-2 border-primary rounded-lg flex items-center justify-center bg-gray-800\">\n <div class=\"text-center\">\n <i class=\"fas fa-palette text-4xl text-primary mb-3\"><\/i>\n <p class=\"text-text-secondary\">Generated designs will appear here<\/p>\n <\/div>\n <\/div>\n <\/div>\n `,\n 'data': `\n <div class=\"flex flex-col h-full\">\n <div class=\"mb-4\">\n <label class=\"block text-sm font-medium text-text mb-2\">Upload your data file:<\/label>\n <div class=\"border-2 border-dashed border-primary rounded-lg p-8 text-center\">\n <i class=\"fas fa-cloud-upload-alt text-3xl text-primary mb-3\"><\/i>\n <p class=\"text-text-secondary\">Drag & drop your CSV or Excel file here<\/p>\n <button class=\"mt-3 bg-gray-700 hover:bg-gray-600 text-text py-2 px-4 rounded-lg\">\n Browse Files\n <\/button>\n <\/div>\n <\/div>\n \n <div class=\"mb-4\">\n <label class=\"block text-sm font-medium text-text mb-2\">Analysis Type<\/label>\n <select class=\"w-full bg-gray-800 rounded-lg p-3 text-text\">\n <option>Summary Statistics<\/option>\n <option>Visualization<\/option>\n <option>Prediction Model<\/option>\n <option>Clustering<\/option>\n <option>Correlation Analysis<\/option>\n <\/select>\n <\/div>\n \n <div class=\"mb-4\">\n <button class=\"bg-primary hover:bg-primary-dark text-gray-900 font-medium py-2 px-4 rounded-lg\">\n Analyze Data\n <\/button>\n <\/div>\n \n <div class=\"flex-grow border-2 border-primary rounded-lg flex items-center justify-center bg-gray-800\">\n <div class=\"text-center\">\n <i class=\"fas fa-chart-bar text-4xl text-primary mb-3\"><\/i>\n <p class=\"text-text-secondary\">Data analysis results will appear here<\/p>\n <\/div>\n <\/div>\n <\/div>\n `,\n 'translation': `\n <div class=\"flex flex-col h-full\">\n <div class=\"mb-4\">\n <label class=\"block text-sm font-medium text-text mb-2\">Source Language<\/label>\n <select class=\"w-full bg-gray-800 rounded-lg p-3 text-text\">\n <option>English<\/option>\n <option>Spanish<\/option>\n <option>French<\/option>\n <option>German<\/option>\n <option>Chinese<\/option>\n <option>Japanese<\/option>\n <option>Arabic<\/option>\n <option>Russian<\/option>\n <\/select>\n <\/div>\n \n <div class=\"mb-4\">\n <label class=\"block text-sm font-medium text-text mb-2\">Target Language<\/label>\n <select class=\"w-full bg-gray-800 rounded-lg p-3 text-text\">\n <option>Spanish<\/option>\n <option>English<\/option>\n <option>French<\/option>\n <option>German<\/option>\n <option>Chinese<\/option>\n <option>Japanese<\/option>\n <option>Arabic<\/option>\n <option>Russian<\/option>\n <\/select>\n <\/div>\n \n <div class=\"mb-4\">\n <label class=\"block text-sm font-medium text-text mb-2\">Text to Translate<\/label>\n <textarea class=\"w-full bg-gray-800 rounded-lg p-3 text-text\" rows=\"5\" placeholder=\"Enter text to translate...\"><\/textarea>\n <\/div>\n \n <div class=\"mb-4\">\n <button class=\"bg-primary hover:bg-primary-dark text-gray-900 font-medium py-2 px-4 rounded-lg\">\n Translate\n <\/button>\n <\/div>\n \n <div class=\"flex-grow border-2 border-primary rounded-lg bg-gray-800 p-4 overflow-auto\">\n <p class=\"text-text-secondary\">Translated text will appear here<\/p>\n <\/div>\n <\/div>\n `\n };\n \n workspaceContent.innerHTML = contents[type] || '<p class=\"text-text\">Workspace content not found<\/p>';\n \n \/\/ Show workspace\n workspaceContainer.classList.remove('hidden');\n }\n\n function closeWorkspace() {\n document.getElementById('workspace-container').classList.add('hidden');\n }\n\n \/\/ Settings panel functions\n function toggleApiKeyVisibility(inputId) {\n const input = document.getElementById(inputId);\n const icon = event.target;\n \n if (input.type === 'password') {\n input.type = 'text';\n icon.classList.remove('fa-eye');\n icon.classList.add('fa-eye-slash');\n } else {\n input.type = 'password';\n icon.classList.remove('fa-eye-slash');\n icon.classList.add('fa-eye');\n }\n }\n\n function saveApiKeys() {\n \/\/ In a real implementation, this would save to a secure backend\n \/\/ For demo purposes, we'll just show a success message\n const notification = document.createElement('div');\n notification.className = 'fixed bottom-4 right-4 bg-green-600 text-white p-4 rounded-lg shadow-lg';\n notification.innerHTML = '<i class=\"fas fa-check-circle mr-2\"><\/i>API Keys saved successfully!';\n document.body.appendChild(notification);\n \n setTimeout(() => {\n notification.remove();\n }, 3000);\n }\n\n function handleFileUpload(event) {\n const files = event.target.files;\n const uploadedFilesContainer = document.getElementById('uploaded-files');\n \n for (let i = 0; i < files.length; i++) {\n const file = files[i];\n const fileItem = document.createElement('div');\n fileItem.className = 'flex items-center justify-between bg-gray-800 p-2 rounded';\n fileItem.innerHTML = `\n <div class=\"flex items-center\">\n <i class=\"fas fa-file text-primary mr-2\"><\/i>\n <span class=\"text-text text-sm\">${file.name}<\/span>\n <\/div>\n <button class=\"text-red-500 hover:text-red-400\" onclick=\"this.parentElement.remove()\">\n <i class=\"fas fa-trash\"><\/i>\n <\/button>\n `;\n uploadedFilesContainer.appendChild(fileItem);\n }\n }\n\n function addPlugin() {\n const pluginInput = document.getElementById('new-plugin');\n const pluginName = pluginInput.value.trim();\n \n if (pluginName) {\n \/\/ In a real implementation, this would add the plugin\n \/\/ For demo purposes, we'll just add it to the list\n const pluginContainer = document.querySelector('.plugin-item').parentElement;\n const newPlugin = document.createElement('div');\n newPlugin.className = 'plugin-item';\n newPlugin.innerHTML = `\n <span>${pluginName}<\/span>\n <button class=\"bg-green-600 hover:bg-green-700 text-white text-xs py-1 px-2 rounded\">Active<\/button>\n `;\n pluginContainer.appendChild(newPlugin);\n \n pluginInput.value = '';\n \n \/\/ Show success notification\n const notification = document.createElement('div');\n notification.className = 'fixed bottom-4 right-4 bg-green-600 text-white p-4 rounded-lg shadow-lg';\n notification.innerHTML = `<i class=\"fas fa-check-circle mr-2\"><\/i>Plugin \"${pluginName}\" added successfully!`;\n document.body.appendChild(notification);\n \n setTimeout(() => {\n notification.remove();\n }, 3000);\n }\n }\n\n \/\/ Help modal functions\n function openHelpModal() {\n document.getElementById('help-modal').style.display = 'block';\n }\n\n function closeHelpModal() {\n document.getElementById('help-modal').style.display = 'none';\n }\n\n function toggleFaq(element) {\n const faqItem = element.parentElement;\n faqItem.classList.toggle('active');\n }\n\n document.addEventListener('DOMContentLoaded', () => {\n const chatForm = document.getElementById('chat-form');\n const chatContainer = document.getElementById('chat-container');\n const messageInput = document.getElementById('message-input');\n const newChatBtn = document.getElementById('new-chat-btn');\n const sendBtn = document.getElementById('send-btn');\n const stopBtn = document.getElementById('stop-btn');\n const sidebarToggle = document.getElementById('sidebar-toggle');\n const sidebar = document.getElementById('sidebar');\n const suggestionButtons = document.querySelectorAll('.suggestion-btn');\n const commentsCtn = document.getElementById('comments-ctn');\n const settingsToggle = document.getElementById('settings-toggle');\n const settingsPanel = document.getElementById('settings-panel');\n const settingsIcon = document.getElementById('settings-icon');\n const helpBtn = document.getElementById('help-btn');\n \n \/\/ Load saved messages\n loadMessages();\n \n \/\/ Initialize comments plugin\n initComments();\n \n \/\/ Toggle sidebar on mobile\n sidebarToggle.onclick = () => {\n sidebar.classList.toggle('sidebar-collapsed');\n sidebar.classList.toggle('sidebar-expanded');\n };\n \n \/\/ Toggle settings panel\n settingsToggle.onclick = () => {\n settingsPanel.classList.toggle('hidden');\n settingsIcon.classList.toggle('fa-chevron-down');\n settingsIcon.classList.toggle('fa-chevron-up');\n };\n \n \/\/ Open help modal\n helpBtn.onclick = openHelpModal;\n \n \/\/ Stop generation if in progress\n stopBtn.onclick = () => {\n if (currentGenerationPromise && typeof currentGenerationPromise.stop === 'function') {\n currentGenerationPromise.stop();\n }\n };\n \n \/\/ Event listener for form submission\n chatForm.addEventListener('submit', async (e) => {\n e.preventDefault();\n const message = messageInput.value.trim();\n if (message) {\n addMessage(message, true);\n messageInput.value = '';\n \n \/\/ Hide suggested prompts after user message\n document.getElementById('suggested-prompts').hidden = true;\n \n \/\/ Generate AI response\n await generateResponse(message);\n }\n });\n \n \/\/ Event listener for new chat button\n newChatBtn.addEventListener('click', () => {\n messages = [];\n saveMessages();\n chatContainer.innerHTML = '';\n document.getElementById('suggested-prompts').hidden = false;\n addMessage(\"Hello! I'm your creative assistant. I can help you brainstorm, write scripts, create prompts, develop stories, invent products, and much more. What would you like to create today?\", false);\n });\n \n \/\/ Event listeners for suggestion buttons\n suggestionButtons.forEach(button => {\n button.addEventListener('click', () => {\n messageInput.value = button.textContent;\n chatForm.dispatchEvent(new Event('submit'));\n });\n });\n \n \/\/ Close help modal when clicking outside of it\n window.onclick = (event) => {\n const helpModal = document.getElementById('help-modal');\n if (event.target === helpModal) {\n closeHelpModal();\n }\n };\n });\n <\/script>\n\n \n <script>\n if (typeof commentsPlugin !== 'undefined') {\n document.getElementById('comments-ctn').innerHTML = commentsPlugin({\n channel: \"adult-ai-feedback\",\n width: \"100%\", \n height: \"100%\"\n });\n }\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Adult.AI – Creative Content Assistant Adult.AI Creative Content Assistant History New Chat Help Create Content Scripts Movies, ads, videos Prompts […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","pagelayer_contact_templates":[],"_pagelayer_content":"","_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_kadence_starter_templates_imported_post":false,"footnotes":"","_wpscppro_dont_share_socialmedia":false,"_wpscppro_custom_social_share_image":0,"_facebook_share_type":"","_twitter_share_type":"","_linkedin_share_type":"","_pinterest_share_type":"","_linkedin_share_type_page":"","_instagram_share_type":"","_medium_share_type":"","_threads_share_type":"","_google_business_share_type":"","_selected_social_profile":[],"_wpsp_enable_custom_social_template":false,"_wpsp_social_scheduling":{"enabled":false,"datetime":null,"platforms":[],"status":"template_only","dateOption":"today","timeOption":"now","customDays":"","customHours":"","customDate":"","customTime":"","schedulingType":"absolute"},"_wpsp_active_default_template":true},"categories":[1],"tags":[],"class_list":["post-712","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Taonga Admin","author_link":"https:\/\/taonga.nxfanz.com\/?author=1"},"uagb_comment_info":0,"uagb_excerpt":"Adult.AI – Creative Content Assistant Adult.AI Creative Content Assistant History New Chat Help Create Content Scripts Movies, ads, videos Prompts […]","_links":{"self":[{"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/posts\/712","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=712"}],"version-history":[{"count":1,"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/posts\/712\/revisions"}],"predecessor-version":[{"id":713,"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/posts\/712\/revisions\/713"}],"wp:attachment":[{"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=712"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=712"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=712"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}