Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Cosmic AI Assistant</title> | |
| <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet"> | |
| <link href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/all.min.css" rel="stylesheet"> | |
| <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --space-bg-primary: #050518; | |
| --space-bg-secondary: #0a0a2d; | |
| --space-accent-primary: #7b2cbf; | |
| --space-accent-secondary: #c77dff; | |
| --space-accent-tertiary: #00b4d8; | |
| --space-text-primary: #e6e6fa; | |
| --space-text-secondary: #b8b8d4; | |
| --space-shadow: rgba(123, 44, 191, 0.4); | |
| --space-glow: 0 0 8px rgba(199, 125, 255, 0.6); | |
| --space-nebula: linear-gradient(135deg, #7b2cbf 0%, #3a0ca3 50%, #4361ee 100%); | |
| } | |
| body { | |
| font-family: 'Quicksand', sans-serif; | |
| background-color: var(--space-bg-primary); | |
| color: var(--space-text-primary); | |
| min-height: 100vh; | |
| overflow-x: hidden; | |
| } | |
| h1, h2, h3, h4, h5, h6 { | |
| font-family: 'Space Mono', monospace; | |
| letter-spacing: 1px; | |
| } | |
| .cosmic-gradient { | |
| background: var(--space-nebula); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| text-shadow: var(--space-glow); | |
| } | |
| .bg-cosmic { | |
| background-color: var(--space-bg-secondary); | |
| } | |
| .text-cosmic { | |
| color: var(--space-text-primary); | |
| } | |
| .text-cosmic-secondary { | |
| color: var(--space-text-secondary); | |
| } | |
| .border-cosmic { | |
| border-color: rgba(123, 44, 191, 0.3); | |
| } | |
| .cosmic-card { | |
| background: rgba(10, 10, 45, 0.7); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(123, 44, 191, 0.3); | |
| border-radius: 0.75rem; | |
| transition: all 0.3s ease; | |
| box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6); | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| .cosmic-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(135deg, rgba(123, 44, 191, 0.1) 0%, rgba(0, 180, 216, 0.1) 100%); | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| pointer-events: none; | |
| } | |
| .cosmic-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 8px 30px rgba(123, 44, 191, 0.3); | |
| } | |
| .cosmic-card:hover::before { | |
| opacity: 1; | |
| } | |
| .cosmic-button { | |
| background: linear-gradient(135deg, var(--space-accent-primary) 0%, var(--space-accent-secondary) 100%); | |
| color: white; | |
| position: relative; | |
| overflow: hidden; | |
| transition: all 0.3s ease; | |
| } | |
| .cosmic-button::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: -100%; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); | |
| transition: all 0.8s ease; | |
| } | |
| .cosmic-button:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 5px 15px rgba(123, 44, 191, 0.4); | |
| } | |
| .cosmic-button:hover::before { | |
| left: 100%; | |
| } | |
| .cosmic-input { | |
| background: rgba(5, 5, 24, 0.6); | |
| border: 1px solid rgba(123, 44, 191, 0.5); | |
| color: var(--space-text-primary); | |
| transition: all 0.3s ease; | |
| } | |
| .cosmic-input:focus { | |
| outline: none; | |
| border-color: var(--space-accent-secondary); | |
| box-shadow: 0 0 0 3px rgba(199, 125, 255, 0.2), var(--space-glow); | |
| } | |
| .stars-container { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -1; | |
| overflow: hidden; | |
| } | |
| .star { | |
| position: absolute; | |
| background-color: #ffffff; | |
| border-radius: 50%; | |
| animation: twinkle 4s infinite ease-in-out; | |
| } | |
| @keyframes twinkle { | |
| 0%, 100% { opacity: 0.2; transform: scale(0.8); } | |
| 50% { opacity: 1; transform: scale(1.2); } | |
| } | |
| #particlesCanvas { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -1; | |
| } | |
| .feature-icon { | |
| transition: transform 0.3s ease; | |
| } | |
| .cosmic-card:hover .feature-icon { | |
| transform: scale(1.2); | |
| } | |
| .message { | |
| max-width: 80%; | |
| padding: 0.8rem 1.2rem; | |
| border-radius: 12px; | |
| animation: messageAppear 0.3s ease; | |
| } | |
| .user-message { | |
| align-self: flex-end; | |
| background: linear-gradient(135deg, var(--space-accent-primary) 0%, var(--space-accent-secondary) 100%); | |
| color: white; | |
| border-bottom-right-radius: 0; | |
| } | |
| .bot-message { | |
| align-self: flex-start; | |
| background: rgba(5, 5, 24, 0.8); | |
| color: var(--space-text-primary); | |
| border-bottom-left-radius: 0; | |
| border: 1px solid rgba(123, 44, 191, 0.3); | |
| } | |
| @keyframes messageAppear { | |
| from { | |
| opacity: 0; | |
| transform: translateY(10px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .cosmic-upload__dropzone { | |
| background: rgba(10, 10, 45, 0.6); | |
| border: 2px dashed rgba(123, 44, 191, 0.5); | |
| transition: all 0.3s ease; | |
| cursor: pointer; | |
| } | |
| .cosmic-upload__dropzone.active { | |
| background: rgba(10, 10, 45, 0.8); | |
| border-color: var(--space-accent-secondary); | |
| box-shadow: 0 0 20px rgba(123, 44, 191, 0.3); | |
| } | |
| .feature-transition { | |
| transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), | |
| opacity 0.5s ease; | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| .feature-transition.active { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| .cosmos-loader { | |
| width: 80px; | |
| height: 80px; | |
| position: relative; | |
| margin: 2rem auto; | |
| } | |
| .cosmos-loader::before, | |
| .cosmos-loader::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| border-radius: 50%; | |
| border: 4px solid transparent; | |
| border-top-color: var(--space-accent-primary); | |
| animation: spin 1.5s linear infinite; | |
| } | |
| .cosmos-loader::before { | |
| border-top-color: var(--space-accent-primary); | |
| z-index: 1; | |
| animation-duration: 1.5s; | |
| } | |
| .cosmos-loader::after { | |
| border-top-color: var(--space-accent-secondary); | |
| border-right-color: var(--space-accent-secondary); | |
| z-index: 0; | |
| animation-duration: 2s; | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| .planet { | |
| width: 150px; | |
| height: 150px; | |
| background: linear-gradient(135deg, var(--space-accent-primary) 0%, var(--space-accent-secondary) 100%); | |
| border-radius: 50%; | |
| position: relative; | |
| box-shadow: 0 0 30px rgba(123, 44, 191, 0.5); | |
| } | |
| .planet::before { | |
| content: ''; | |
| position: absolute; | |
| width: 160px; | |
| height: 30px; | |
| background: rgba(123, 44, 191, 0.3); | |
| border-radius: 50%; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%) rotateX(80deg); | |
| } | |
| .orbit { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| border: 1px dashed rgba(123, 44, 191, 0.5); | |
| border-radius: 50%; | |
| transform: translate(-50%, -50%); | |
| } | |
| .moon { | |
| position: absolute; | |
| background: rgba(10, 10, 45, 0.9); | |
| border: 1px solid rgba(123, 44, 191, 0.5); | |
| border-radius: 50%; | |
| transform-origin: 50% 100px; | |
| animation: orbit 20s linear infinite; | |
| box-shadow: 0 0 10px rgba(199, 125, 255, 0.4); | |
| } | |
| @keyframes orbit { | |
| 0% { transform: rotate(0deg) translateX(100px); } | |
| 100% { transform: rotate(360deg) translateX(100px); } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Stars Background --> | |
| <div class="stars-container" id="starsContainer"></div> | |
| <!-- Particles Canvas --> | |
| <canvas id="particlesCanvas"></canvas> | |
| <!-- Navigation --> | |
| <nav class="fixed top-0 left-0 w-full bg-opacity-90 bg-cosmic border-b border-cosmic z-50 py-3 px-6"> | |
| <div class="container mx-auto flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <h1 class="text-2xl font-bold"> | |
| <span class="cosmic-gradient">Cosmic AI</span> | |
| </h1> | |
| </div> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#home" class="text-cosmic-secondary hover:text-cosmic transition-colors duration-300">Home</a> | |
| <a href="#features" class="text-cosmic-secondary hover:text-cosmic transition-colors duration-300">Features</a> | |
| <a href="#chat" class="text-cosmic-secondary hover:text-cosmic transition-colors duration-300">Chat</a> | |
| <a href="#about" class="text-cosmic-secondary hover:text-cosmic transition-colors duration-300">About</a> | |
| </div> | |
| <div class="md:hidden"> | |
| <button id="menuToggle" class="text-cosmic"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Mobile Menu --> | |
| <div id="mobileMenu" class="md:hidden hidden bg-cosmic absolute top-full left-0 w-full border-b border-cosmic"> | |
| <div class="container mx-auto py-4 px-6 flex flex-col space-y-4"> | |
| <a href="#home" class="text-cosmic-secondary">Home</a> | |
| <a href="#features" class="text-cosmic-secondary">Features</a> | |
| <a href="#chat" class="text-cosmic-secondary">Chat</a> | |
| <a href="#about" class="text-cosmic-secondary">About</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section id="home" class="pt-24 pb-12"> | |
| <div class="container mx-auto px-6"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-12 md:mb-0"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-6 leading-tight"> | |
| Explore the Universe of <span class="cosmic-gradient">Artificial Intelligence</span> | |
| </h1> | |
| <p class="text-lg text-cosmic-secondary mb-8"> | |
| Your cosmic companion for intelligent document analysis, image processing, and data visualization. Powered by advanced AI models for an out-of-this-world experience. | |
| </p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <a href="#features" class="cosmic-button py-3 px-8 rounded-lg text-center font-semibold"> | |
| Explore Features | |
| </a> | |
| <a href="#chat" class="bg-transparent border border-cosmic py-3 px-8 rounded-lg text-center text-cosmic hover:bg-cosmic hover:bg-opacity-20 transition-colors duration-300"> | |
| Start Chat | |
| </a> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <div class="relative"> | |
| <div class="planet"></div> | |
| <div class="orbit w-[250px] h-[250px]"></div> | |
| <div class="orbit w-[350px] h-[350px]"></div> | |
| <div class="moon w-10 h-10 text-xs flex items-center justify-center text-cosmic">AI</div> | |
| <div class="moon w-8 h-8 text-xs flex items-center justify-center text-cosmic" style="animation-delay: -5s">ML</div> | |
| <div class="moon w-12 h-12 text-xs flex items-center justify-center text-cosmic" style="animation-delay: -10s">NLP</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section id="features" class="py-16"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6"> | |
| <span class="cosmic-gradient">Stellar Capabilities</span> | |
| </h2> | |
| <p class="text-cosmic-secondary max-w-2xl mx-auto"> | |
| Harness the power of advanced AI models for a variety of tasks, from understanding documents to analyzing images and visualizing data. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Text Summary Card --> | |
| <div class="cosmic-card p-6 feature-transition"> | |
| <div class="text-center mb-6"> | |
| <div class="inline-block p-4 rounded-full bg-opacity-20 bg-cosmic mb-4"> | |
| <i class="fas fa-file-alt text-4xl feature-icon text-purple-400"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Text Summary</h3> | |
| <p class="text-cosmic-secondary"> | |
| Automatically summarize documents, articles, or long texts with AI precision. | |
| </p> | |
| </div> | |
| <button class="cosmic-button w-full py-2 rounded-lg">Try It</button> | |
| </div> | |
| <!-- Image Description Card --> | |
| <div class="cosmic-card p-6 feature-transition"> | |
| <div class="text-center mb-6"> | |
| <div class="inline-block p-4 rounded-full bg-opacity-20 bg-cosmic mb-4"> | |
| <i class="fas fa-image text-4xl feature-icon text-blue-400"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Image Description</h3> | |
| <p class="text-cosmic-secondary"> | |
| Generate detailed descriptions from images using advanced vision models. | |
| </p> | |
| </div> | |
| <button class="cosmic-button w-full py-2 rounded-lg">Try It</button> | |
| </div> | |
| <!-- Question Answering Card --> | |
| <div class="cosmic-card p-6 feature-transition"> | |
| <div class="text-center mb-6"> | |
| <div class="inline-block p-4 rounded-full bg-opacity-20 bg-cosmic mb-4"> | |
| <i class="fas fa-question-circle text-4xl feature-icon text-pink-400"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Question Answering</h3> | |
| <p class="text-cosmic-secondary"> | |
| Get precise answers to your questions using contextual understanding. | |
| </p> | |
| </div> | |
| <button class="cosmic-button w-full py-2 rounded-lg">Try It</button> | |
| </div> | |
| <!-- Visual Q&A Card --> | |
| <div class="cosmic-card p-6 feature-transition"> | |
| <div class="text-center mb-6"> | |
| <div class="inline-block p-4 rounded-full bg-opacity-20 bg-cosmic mb-4"> | |
| <i class="fas fa-eye text-4xl feature-icon text-green-400"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Visual Q&A</h3> | |
| <p class="text-cosmic-secondary"> | |
| Ask questions about image content and get intelligent responses. | |
| </p> | |
| </div> | |
| <button class="cosmic-button w-full py-2 rounded-lg">Try It</button> | |
| </div> | |
| <!-- Data Visualization Card --> | |
| <div class="cosmic-card p-6 feature-transition"> | |
| <div class="text-center mb-6"> | |
| <div class="inline-block p-4 rounded-full bg-opacity-20 bg-cosmic mb-4"> | |
| <i class="fas fa-chart-bar text-4xl feature-icon text-yellow-400"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Data Visualization</h3> | |
| <p class="text-cosmic-secondary"> | |
| Generate code to visualize your Excel data in beautiful charts. | |
| </p> | |
| </div> | |
| <button class="cosmic-button w-full py-2 rounded-lg">Try It</button> | |
| </div> | |
| <!-- Translation Card --> | |
| <div class="cosmic-card p-6 feature-transition"> | |
| <div class="text-center mb-6"> | |
| <div class="inline-block p-4 rounded-full bg-opacity-20 bg-cosmic mb-4"> | |
| <i class="fas fa-language text-4xl feature-icon text-red-400"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Translation</h3> | |
| <p class="text-cosmic-secondary"> | |
| Translate text to different languages with high accuracy. | |
| </p> | |
| </div> | |
| <button class="cosmic-button w-full py-2 rounded-lg">Try It</button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Chat Interface Section --> | |
| <section id="chat" class="py-16"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6"> | |
| <span class="cosmic-gradient">Cosmic Conversation</span> | |
| </h2> | |
| <p class="text-cosmic-secondary max-w-2xl mx-auto"> | |
| Chat with our AI assistant to explore all features or ask any questions you have. | |
| </p> | |
| </div> | |
| <div class="max-w-4xl mx-auto"> | |
| <div class="cosmic-card p-4 h-[500px] flex flex-col"> | |
| <!-- Chat Messages --> | |
| <div class="flex-1 overflow-y-auto p-4 flex flex-col space-y-4" id="chatMessages"> | |
| <div class="message bot-message"> | |
| <p>Hello! I'm your Cosmic AI Assistant. Upload a file or ask a question, and I can:</p> | |
| <ul class="list-disc pl-5 mt-2"> | |
| <li>Summarize documents</li> | |
| <li>Describe images</li> | |
| <li>Answer your questions</li> | |
| <li>Translate text</li> | |
| <li>Generate visualization code</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- File Upload Area --> | |
| <div class="cosmic-upload__dropzone rounded-lg mx-4 mb-4 p-4" id="fileDropzone"> | |
| <div class="text-center"> | |
| <i class="fas fa-cloud-upload-alt text-3xl text-purple-400 mb-2"></i> | |
| <p class="text-cosmic">Drag files here or click to upload</p> | |
| <p class="text-cosmic-secondary text-sm">Supports documents, images, and Excel files</p> | |
| <input type="file" id="fileInput" class="hidden" multiple /> | |
| </div> | |
| </div> | |
| <div id="filePreviewArea" class="hidden flex flex-wrap gap-2 mx-4 mb-4"></div> | |
| <!-- Chat Input --> | |
| <div class="p-4 flex space-x-3"> | |
| <input type="text" id="chatInput" class="cosmic-input flex-1 rounded-lg px-4 py-3" placeholder="Type your message here..."> | |
| <button id="sendButton" class="cosmic-button rounded-lg px-6"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-16"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6"> | |
| <span class="cosmic-gradient">About Cosmic AI</span> | |
| </h2> | |
| <p class="text-cosmic-secondary max-w-2xl mx-auto"> | |
| Powered by cutting-edge AI models and designed with a cosmic aesthetic for an otherworldly experience. | |
| </p> | |
| </div> | |
| <div class="max-w-4xl mx-auto cosmic-card p-8"> | |
| <p class="text-cosmic-secondary mb-6"> | |
| Cosmic AI combines multiple AI capabilities into a single, intuitive interface. Our system leverages advanced models to deliver high-quality results for a variety of tasks: | |
| </p> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="mr-4 mt-1"> | |
| <i class="fas fa-robot text-purple-400"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-cosmic">Advanced Models</h3> | |
| <p class="text-cosmic-secondary">Powered by state-of-the-art AI models including BART for summarization, BLIP for image captioning, and Gemini for conversation.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="mr-4 mt-1"> | |
| <i class="fas fa-brain text-purple-400"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-cosmic">Intelligent Processing</h3> | |
| <p class="text-cosmic-secondary">Our system automatically detects your intent and selects the most appropriate model for each task.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="mr-4 mt-1"> | |
| <i class="fas fa-shield-alt text-purple-400"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-cosmic">Privacy-Focused</h3> | |
| <p class="text-cosmic-secondary">Your data is processed securely and not stored beyond the current session unless explicitly specified.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="mr-4 mt-1"> | |
| <i class="fas fa-expand-arrows-alt text-purple-400"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-cosmic">Continuously Evolving</h3> | |
| <p class="text-cosmic-secondary">We're constantly improving our models and adding new capabilities to expand what's possible.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="py-8 border-t border-cosmic"> | |
| <div class="container mx-auto px-6"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-6 md:mb-0"> | |
| <h2 class="text-xl font-bold"> | |
| <span class="cosmic-gradient">Cosmic AI</span> | |
| </h2> | |
| <p class="text-cosmic-secondary mt-2">Your AI companion for the digital universe</p> | |
| </div> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-cosmic-secondary hover:text-cosmic transition-colors duration-300"> | |
| <i class="fab fa-github"></i> | |
| </a> | |
| <a href="#" class="text-cosmic-secondary hover:text-cosmic transition-colors duration-300"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-cosmic-secondary hover:text-cosmic transition-colors duration-300"> | |
| <i class="fab fa-linkedin"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="mt-8 text-center text-cosmic-secondary text-sm"> | |
| <p>© 2023 Cosmic AI. All rights reserved.</p> | |
| <p class="mt-2">Powered by advanced AI models and cosmic inspiration.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Mobile Menu Toggle | |
| const menuToggle = document.getElementById('menuToggle'); | |
| const mobileMenu = document.getElementById('mobileMenu'); | |
| menuToggle.addEventListener('click', function() { | |
| mobileMenu.classList.toggle('hidden'); | |
| }); | |
| // Stars Background | |
| function createStars() { | |
| const starsContainer = document.getElementById('starsContainer'); | |
| starsContainer.innerHTML = ''; | |
| const starCount = Math.min(300, window.innerWidth * 0.15); | |
| for (let i = 0; i < starCount; i++) { | |
| const star = document.createElement('div'); | |
| star.classList.add('star'); | |
| // Random positioning | |
| const x = Math.random() * 100; | |
| const y = Math.random() * 100; | |
| const delay = Math.random() * 5; | |
| const size = Math.random() * 2 + 1; | |
| star.style.left = `${x}%`; | |
| star.style.top = `${y}%`; | |
| star.style.width = `${size}px`; | |
| star.style.height = `${size}px`; | |
| star.style.animationDelay = `${delay}s`; | |
| starsContainer.appendChild(star); | |
| } | |
| } | |
| // Particles System | |
| function initParticles() { | |
| const canvas = document.getElementById('particlesCanvas'); | |
| canvas.width = window.innerWidth; | |
| canvas.height = window.innerHeight; | |
| const ctx = canvas.getContext('2d'); | |
| const particles = []; | |
| const particleCount = Math.min(100, window.innerWidth * 0.05); | |
| class Particle { | |
| constructor() { | |
| this.x = Math.random() * canvas.width; | |
| this.y = Math.random() * canvas.height; | |
| this.size = Math.random() * 1.5 + 0.5; | |
| this.speedX = Math.random() * 0.5 - 0.25; | |
| this.speedY = Math.random() * 0.5 - 0.25; | |
| this.color = this.getRandomColor(); | |
| } | |
| getRandomColor() { | |
| const colors = [ | |
| 'rgba(123, 44, 191, 0.8)', // Purple | |
| 'rgba(199, 125, 255, 0.8)', // Light purple | |
| 'rgba(0, 180, 216, 0.8)', // Cyan | |
| 'rgba(67, 97, 238, 0.8)', // Blue | |
| 'rgba(255, 255, 255, 0.8)' // White | |
| ]; | |
| return colors[Math.floor(Math.random() * colors.length)]; | |
| } | |
| update() { | |
| this.x += this.speedX; | |
| this.y += this.speedY; | |
| // Wrap around edges | |
| if (this.x > canvas.width) this.x = 0; | |
| if (this.x < 0) this.x = canvas.width; | |
| if (this.y > canvas.height) this.y = 0; | |
| if (this.y < 0) this.y = canvas.height; | |
| } | |
| draw() { | |
| ctx.fillStyle = this.color; | |
| ctx.beginPath(); | |
| ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); | |
| ctx.fill(); | |
| } | |
| } | |
| for (let i = 0; i < particleCount; i++) { | |
| particles.push(new Particle()); | |
| } | |
| function animate() { | |
| ctx.clearRect(0, 0, canvas.width, canvas.height); | |
| // Draw connections between nearby particles | |
| ctx.strokeStyle = 'rgba(255, 255, 255, 0.05)'; | |
| ctx.lineWidth = 0.5; | |
| for (let i = 0; i < particles.length; i++) { | |
| for (let j = i; j < particles.length; j++) { | |
| const dx = particles[i].x - particles[j].x; | |
| const dy = particles[i].y - particles[j].y; | |
| const distance = Math.sqrt(dx * dx + dy * dy); | |
| if (distance < 100) { | |
| ctx.beginPath(); | |
| ctx.moveTo(particles[i].x, particles[i].y); | |
| ctx.lineTo(particles[j].x, particles[j].y); | |
| ctx.stroke(); | |
| } | |
| } | |
| } | |
| // Update and draw particles | |
| particles.forEach(particle => { | |
| particle.update(); | |
| particle.draw(); | |
| }); | |
| requestAnimationFrame(animate); | |
| } | |
| animate(); | |
| } | |
| // Feature reveal animation | |
| function revealFeatures() { | |
| const features = document.querySelectorAll('.feature-transition'); | |
| features.forEach((feature, index) => { | |
| // Add delay based on index | |
| setTimeout(() => { | |
| feature.classList.add('active'); | |
| }, index * 150); | |
| }); | |
| } | |
| // Chat Interface | |
| const chatInput = document.getElementById('chatInput'); | |
| const sendButton = document.getElementById('sendButton'); | |
| const chatMessages = document.getElementById('chatMessages'); | |
| function addMessage(text, isUser = false) { | |
| const messageDiv = document.createElement('div'); | |
| messageDiv.classList.add('message'); | |
| messageDiv.classList.add(isUser ? 'user-message' : 'bot-message'); | |
| messageDiv.textContent = text; | |
| chatMessages.appendChild(messageDiv); | |
| chatMessages.scrollTop = chatMessages.scrollHeight; | |
| } | |
| function handleUserMessage() { | |
| const message = chatInput.value.trim(); | |
| if (message === '') return; | |
| addMessage(message, true); | |
| chatInput.value = ''; | |
| // Simulate AI response | |
| setTimeout(() => { | |
| let response; | |
| if (message.toLowerCase().includes('help')) { | |
| response = "I can help with document summarization, image description, question answering, translation, and data visualization. What would you like to know?"; | |
| } else if (message.toLowerCase().includes('summarize')) { | |
| response = "To summarize a document, simply upload it using the upload area or drag and drop. I'll analyze it and provide a concise summary."; | |
| } else if (message.toLowerCase().includes('translate')) { | |
| response = "I can translate text to various languages. Just tell me what you want to translate and the target language."; | |
| } else if (message.toLowerCase().includes('image') || message.toLowerCase().includes('picture')) { | |
| response = "For image description or visual Q&A, upload an image and I'll analyze it for you."; | |
| } else { | |
| response = "I'm your Cosmic AI Assistant. I can help with various tasks including summarization, image analysis, and answering questions. What would you like me to do?"; | |
| } | |
| addMessage(response); | |
| }, 1000); | |
| } | |
| sendButton.addEventListener('click', handleUserMessage); | |
| chatInput.addEventListener('keypress', function(e) { | |
| if (e.key === 'Enter') { | |
| handleUserMessage(); | |
| } | |
| }); | |
| // File Upload Handling | |
| const dropzone = document.getElementById('fileDropzone'); | |
| const fileInput = document.getElementById('fileInput'); | |
| const previewArea = document.getElementById('filePreviewArea'); | |
| dropzone.addEventListener('click', () => { | |
| fileInput.click(); | |
| }); | |
| dropzone.addEventListener('dragover', (e) => { | |
| e.preventDefault(); | |
| dropzone.classList.add('active'); | |
| }); | |
| dropzone.addEventListener('dragleave', () => { | |
| dropzone.classList.remove('active'); | |
| }); | |
| dropzone.addEventListener('drop', (e) => { | |
| e.preventDefault(); | |
| dropzone.classList.remove('active'); | |
| if (e.dataTransfer.files.length) { | |
| handleFiles(e.dataTransfer.files); | |
| } | |
| }); | |
| fileInput.addEventListener('change', () => { | |
| if (fileInput.files.length) { | |
| handleFiles(fileInput.files); | |
| } | |
| }); | |
| function handleFiles(files) { | |
| previewArea.innerHTML = ''; | |
| previewArea.classList.remove('hidden'); | |
| Array.from(files).forEach(file => { | |
| const fileElement = document.createElement('div'); | |
| fileElement.className = 'cosmic-card p-2 flex items-center space-x-2'; | |
| let iconClass = 'fas fa-file'; | |
| if (file.type.startsWith('image/')) { | |
| iconClass = 'fas fa-image'; | |
| } else if (file.type.includes('pdf')) { | |
| iconClass = 'fas fa-file-pdf'; | |
| } else if (file.type.includes('word') || file.type.includes('document')) { | |
| iconClass = 'fas fa-file-word'; | |
| } else if (file.type.includes('excel') || file.type.includes('sheet')) { | |
| iconClass = 'fas fa-file-excel'; | |
| } | |
| const fileSize = (file.size / 1024).toFixed(1) + ' KB'; | |
| fileElement.innerHTML = ` | |
| <div class="text-purple-400"> | |
| <i class="${iconClass}"></i> | |
| </div> | |
| <div class="flex-1 overflow-hidden"> | |
| <div class="truncate text-sm text-cosmic">${file.name}</div> | |
| <div class="text-xs text-cosmic-secondary">${fileSize}</div> | |
| </div> | |
| <button class="text-cosmic-secondary hover:text-red-400 transition-colors duration-300 file-remove"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| `; | |
| const removeButton = fileElement.querySelector('.file-remove'); | |
| removeButton.addEventListener('click', (e) => { | |
| e.stopPropagation(); | |
| fileElement.remove(); | |
| if (previewArea.children.length === 0) { | |
| previewArea.classList.add('hidden'); | |
| } | |
| }); | |
| previewArea.appendChild(fileElement); | |
| }); | |
| // Simulate processing response | |
| addMessage(`I've received ${files.length} file(s). How would you like me to process them?`); | |
| } | |
| // Initialize everything | |
| createStars(); | |
| initParticles(); | |
| revealFeatures(); | |
| // Handle window resize | |
| window.addEventListener('resize', () => { | |
| createStars(); | |
| const canvas = document.getElementById('particlesCanvas'); | |
| canvas.width = window.innerWidth; | |
| canvas.height = window.innerHeight; | |
| initParticles(); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |