Spaces:
Running
Running
Artistic Intelligence Re-imagining AI application in art The term Artificial Intelligence automatically invokes negative associations in my mind. Something artificial is not authentic, original or real, but a forgery or a fake imitation of reality. Art as an expression is a very subjective thing. To me, art has always been defined by an emotional response. Does the artwork invoke a strong feeling? Positive or negative, true art should not leave a person indifferent. AI models are "trained" on enormous amounts of data. A large part of that data consists of art created throughout human existence, hundreds of thousands of paintings and drawings, sculptures and other creative expressions are part of this database. A living gallery where artists submit their work to become part of an ever-evolving tapestry of AI generated art. Large models will be fine tuned on artists work, creating new strands of art. The spectators are part of the story, photographed upon entry, their portraits will be integrated into Loras in real time, mini trained models that are mixed into the main database and manifested in the art. Patrons of the gallery will see representations of themselves in the artwork showcased withing the gallery. These methods to locally train large generative AI models are just the tip of the iceberg when it comes to innovation and adaptation of Ai in the creative field. The goal is to utilize the powerful AI tools not as a means of art creation and interpretation but as a catalyst and a vehicle to bring new and exciting ideas to life. The computational speed and generative power of large generative models are constantly improving and with a wider variety of tools available to the public every day, the sky is no longer the limit. Creating an interactive art gallery is a way to integrate the viewer into the creative process, trully immersing them into the art itself. The gallery patrons will have the ability to manipulate multiple aspects of the generative art in real time. By accesing terminals located throughout the space, the viewers can input concepts and terms that will affect the main generation happening on the walls. By entering prompts like "Summer", "War", or even "Puppies", these terms will trigger the model to infuse the live generation with new visual elements that will transform the narrative and guide it into new dimensions. This is a conceptual proposal with visual aides to show potential investors and foundations a new and exciting innovative way to represent AI as a tool and vehicle for creative spaces and common spaces, these would be gallery spaces. - Initial Deployment
8432b34 verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Artistic Intelligence - Reimagining AI in Art</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Roboto:wght@300;400;700&display=swap'); | |
| body { | |
| font-family: 'Roboto', sans-serif; | |
| background-color: #0a0a0a; | |
| color: #f8f8f8; | |
| overflow-x: hidden; | |
| } | |
| .title-font { | |
| font-family: 'Playfair Display', serif; | |
| } | |
| .gallery-wall { | |
| background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); | |
| height: 70vh; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .art-piece { | |
| position: absolute; | |
| transition: all 0.5s ease; | |
| transform-origin: center; | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); | |
| border: 2px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .art-piece:hover { | |
| transform: scale(1.05); | |
| z-index: 100; | |
| box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5); | |
| } | |
| .pulse-animation { | |
| animation: pulse 6s infinite alternate; | |
| } | |
| @keyframes pulse { | |
| 0% { opacity: 0.8; } | |
| 100% { opacity: 1; } | |
| } | |
| .terminal { | |
| background: rgba(0, 0, 0, 0.7); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| backdrop-filter: blur(10px); | |
| } | |
| .model-visualization { | |
| background: conic-gradient(from 90deg at 50% 50%, #1a1a2e, #16213e, #1a1a2e); | |
| animation: rotate 30s linear infinite; | |
| } | |
| @keyframes rotate { | |
| 0% { background-position: 0% 50%; } | |
| 100% { background-position: 100% 50%; } | |
| } | |
| .capture-area { | |
| border: 2px dashed rgba(255, 255, 255, 0.3); | |
| transition: all 0.3s ease; | |
| } | |
| .capture-area.active { | |
| border-color: #4ade80; | |
| background-color: rgba(74, 222, 128, 0.05); | |
| } | |
| #liveCanvas { | |
| display: none; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Navigation --> | |
| <nav class="bg-black bg-opacity-80 fixed w-full z-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex items-center justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <span class="text-2xl font-bold title-font text-white">AI✖Art</span> | |
| </div> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-10 flex items-baseline space-x-4"> | |
| <a href="#concept" class="text-white hover:text-purple-300 px-3 py-2 text-sm font-medium">Concept</a> | |
| <a href="#experience" class="text-white hover:text-purple-300 px-3 py-2 text-sm font-medium">Experience</a> | |
| <a href="#technology" class="text-white hover:text-purple-300 px-3 py-2 text-sm font-medium">Technology</a> | |
| <a href="#contact" class="text-white hover:text-purple-300 px-3 py-2 text-sm font-medium">Contact</a> | |
| </div> | |
| </div> | |
| <div class="md:hidden"> | |
| <button id="mobile-menu-button" class="text-white hover:text-purple-300 focus:outline-none"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div id="mobile-menu" class="hidden md:hidden bg-black pb-3 px-2"> | |
| <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> | |
| <a href="#concept" class="text-white block px-3 py-2 text-base font-medium">Concept</a> | |
| <a href="#experience" class="text-white block px-3 py-2 text-base font-medium">Experience</a> | |
| <a href="#technology" class="text-white block px-3 py-2 text-base font-medium">Technology</a> | |
| <a href="#contact" class="text-white block px-3 py-2 text-base font-medium">Contact</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <header class="relative pt-24 pb-40 md:pt-32 md:pb-56 px-4 sm:px-6 lg:px-8 overflow-hidden"> | |
| <div class="absolute inset-0 w-full h-full bg-[url('https://images.unsplash.com/photo-1579547945413-497e1b99dac0?auto=format&fit=crop&w=1920')] bg-cover bg-center opacity-20"></div> | |
| <div class="max-w-7xl mx-auto relative z-10"> | |
| <div class="text-center"> | |
| <h1 class="text-4xl md:text-6xl font-bold title-font mb-6 text-transparent bg-clip-text bg-gradient-to-r from-purple-400 via-pink-500 to-red-500"> | |
| Artistic Intelligence | |
| </h1> | |
| <h2 class="text-xl md:text-3xl font-semibold mb-8">Reimagining AI's Role in Creative Expression</h2> | |
| <p class="max-w-3xl mx-auto text-lg md:text-xl mb-10"> | |
| A living gallery where human creativity merges with AI to create an ever-evolving tapestry of interactive art. | |
| </p> | |
| <a href="#concept" class="inline-flex items-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700 transition duration-300"> | |
| Explore the Concept | |
| <i class="fas fa-arrow-down ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Concept Section --> | |
| <section id="concept" class="py-20 px-4 sm:px-6 lg:px-8 bg-gradient-to-b from-gray-900 to-black"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-5xl font-bold title-font mb-4">The Gallery Concept</h2> | |
| <div class="h-1 w-24 bg-gradient-to-r from-purple-500 to-blue-500 mx-auto mb-6"></div> | |
| <p class="max-w-3xl mx-auto text-lg text-gray-300"> | |
| A revolutionary approach where spectators become integral participants in the artistic process | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-10"> | |
| <div class="bg-gray-800 bg-opacity-50 rounded-xl p-6 hover:bg-opacity-70 transition duration-300 border border-gray-700 hover:border-purple-500"> | |
| <div class="text-purple-400 mb-4"> | |
| <i class="fas fa-paint-brush text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Artistic Database</h3> | |
| <p class="text-gray-300"> | |
| Fine-tuned on thousands of artist submissions, our AI models learn artistic styles while preserving human originality | |
| </p> | |
| </div> | |
| <div class="bg-gray-800 bg-opacity-50 rounded-xl p-6 hover:bg-opacity-70 transition duration-300 border border-gray-700 hover:border-pink-500"> | |
| <div class="text-pink-400 mb-4"> | |
| <i class="fas fa-user-astronaut text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Visitor Integration</h3> | |
| <p class="text-gray-300"> | |
| Your portrait becomes part of the art through real-time LoRA training, creating unique personal connections | |
| </p> | |
| </div> | |
| <div class="bg-gray-800 bg-opacity-50 rounded-xl p-6 hover:bg-opacity-70 transition duration-300 border border-gray-700 hover:border-blue-500"> | |
| <div class="text-blue-400 mb-4"> | |
| <i class="fas fa-sliders-h text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Interactive Control</h3> | |
| <p class="text-gray-300"> | |
| Gallery terminals allow visitors to influence the evolving artwork with concepts and keywords | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Experience Section --> | |
| <section id="experience" class="py-20 px-4 sm:px-6 lg:px-8 bg-black"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-5xl font-bold title-font mb-4">The Visitor Experience</h2> | |
| <div class="h-1 w-24 bg-gradient-to-r from-pink-500 to-red-500 mx-auto mb-6"></div> | |
| </div> | |
| <!-- Gallery Wall Simulation --> | |
| <div class="gallery-wall rounded-xl mb-20 relative"> | |
| <div id="artContainer" class="w-full h-full relative"> | |
| <!-- Art pieces will be dynamically added here --> | |
| </div> | |
| <div class="absolute bottom-5 left-1/2 transform -translate-x-1/2 w-full px-4"> | |
| <div class="max-w-lg mx-auto terminal p-4 rounded-lg"> | |
| <div class="flex items-center"> | |
| <span class="text-green-400 mr-2">></span> | |
| <input type="text" id="promptInput" class="flex-1 bg-transparent border-none text-white focus:ring-0 focus:outline-none" placeholder="Type your concept here (e.g. Summer, War, Puppies)..."> | |
| <button id="submitPrompt" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-1 rounded"> | |
| Generate | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Capture Section --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-10 items-center mb-20"> | |
| <div class="p-8 bg-gray-900 rounded-xl"> | |
| <h3 class="text-2xl font-bold mb-4">Become Part of the Art</h3> | |
| <p class="text-gray-300 mb-6"> | |
| As you enter the gallery, our system captures your portrait and creates a personalized LoRA model that integrates your features into the artwork throughout your visit. | |
| </p> | |
| <div class="capture-area rounded-lg p-4 text-center cursor-pointer" id="captureArea"> | |
| <div id="cameraView" class="relative"> | |
| <video id="video" class="w-full rounded" autoplay playsinline style="display: none;"></video> | |
| <canvas id="liveCanvas" width="640" height="480"></canvas> | |
| <div id="placeholder" class="p-10"> | |
| <i class="fas fa-camera text-6xl text-gray-600 mb-4"></i> | |
| <p class="text-gray-400">Click to enable camera</p> | |
| </div> | |
| </div> | |
| <button id="captureBtn" class="mt-4 bg-purple-600 hover:bg-purple-700 text-white px-6 py-2 rounded-lg transition duration-300 hidden"> | |
| Capture Portrait | |
| </button> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="model-visualization p-8 rounded-xl h-full flex items-center justify-center"> | |
| <div class="text-center"> | |
| <div class="text-5xl mb-4"> | |
| <i class="fas fa-brain text-blue-400"></i> | |
| <i class="fas fa-plus mx-6 text-white"></i> | |
| <i class="fas fa-portrait text-pink-400"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-2">Real-Time LoRA Training</h3> | |
| <p class="text-gray-300"> | |
| Your portrait becomes part of the generative process, influencing the artistic output without copying your likeness directly. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Terminal Section --> | |
| <div class="bg-gray-900 rounded-xl p-8"> | |
| <h3 class="text-2xl font-bold mb-6">Interactive Concept Terminals</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <div> | |
| <p class="text-gray-300 mb-6"> | |
| Strategically placed throughout the gallery, these terminals allow visitors to input keywords that influence the ongoing art generation. The collective input creates a dynamic, community-driven artistic experience. | |
| </p> | |
| <ul class="text-gray-300 space-y-2"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-400 mr-2"></i> | |
| Multiple terminals per gallery space | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-400 mr-2"></i> | |
| Touch-screen interface with concept suggestions | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-400 mr-2"></i> | |
| Real-time visualization of concept influence | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="terminal p-6 rounded-lg"> | |
| <div class="mb-4"> | |
| <div class="text-green-400 font-mono">Loading concept terminal...</div> | |
| <div class="text-green-400 font-mono">Connection established to main gallery AI</div> | |
| <div class="text-green-400 font-mono">Current active concepts:</div> | |
| <div class="text-yellow-300 font-mono ml-4">- Celebration (weight: 0.34)</div> | |
| <div class="text-yellow-300 font-mono ml-4">- Nature (weight: 0.28)</div> | |
| <div class="text-yellow-300 font-mono ml-4">- Urban (weight: 0.18)</div> | |
| </div> | |
| <div class="flex items-center"> | |
| <span class="text-green-400 font-mono mr-2">> ADD_CONCEPT: </span> | |
| <input type="text" value="Harmony" class="font-mono bg-transparent border-b border-green-400 text-white focus:outline-none"> | |
| <button class="ml-2 px-3 py-1 bg-green-700 text-white rounded font-mono text-sm">Submit</button> | |
| </div> | |
| <div class="mt-4 text-blue-300 font-mono">Concept "Harmony" added with initial weight 0.15</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Technology Section --> | |
| <section id="technology" class="py-20 px-4 sm:px-6 lg:px-8 bg-gradient-to-t from-gray-900 to-black"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-5xl font-bold title-font mb-4">Under the Hood</h2> | |
| <div class="h-1 w-24 bg-gradient-to-r from-blue-500 to-cyan-500 mx-auto mb-6"></div> | |
| <p class="max-w-3xl mx-auto text-lg text-gray-300"> | |
| Cutting edge technology powering a new kind of artistic experience | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-10 mb-20"> | |
| <div class="bg-gray-800 bg-opacity-50 rounded-xl p-8 border border-gray-700"> | |
| <h3 class="text-2xl font-bold mb-6">Technical Architecture</h3> | |
| <div class="space-y-6"> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-2 text-blue-300 flex items-center"> | |
| <i class="fas fa-project-diagram mr-3"></i> | |
| Model Architecture | |
| </h4> | |
| <p class="text-gray-300"> | |
| Our system combines large foundational models (Stable Diffusion XL) with dynamically trained LoRA adapters created from visitor portraits and submitted artist works. | |
| </p> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-2 text-purple-300 flex items-center"> | |
| <i class="fas fa-tachometer-alt mr-3"></i> | |
| Real-Time Processing | |
| </h4> | |
| <p class="text-gray-300"> | |
| Custom-built rendering clusters with optimized inference pipelines generate artwork at 30 second intervals, incorporating the latest visitor inputs and portraits. | |
| </p> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-2 text-green-300 flex items-center"> | |
| <i class="fas fa-user-shield mr-3"></i> | |
| Privacy Considerations | |
| </h4> | |
| <p class="text-gray-300"> | |
| All visitor portraits are processed locally within the gallery, with trained LoRA models containing no personally identifiable information. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 bg-opacity-50 rounded-xl p-8 border border-gray-700 flex items-center"> | |
| <div> | |
| <h3 class="text-2xl font-bold mb-6">Innovative Features</h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="text-yellow-400 mt-1 mr-3"> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold">Dynamic Style Blending</h4> | |
| <p class="text-gray-300 text-sm"> | |
| The system intelligently blends artistic styles based on visitor demographics and behavior patterns. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="text-red-400 mt-1 mr-3"> | |
| <i class="fas fa-fire"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold">Emotion Detection</h4> | |
| <p class="text-gray-300 text-sm"> | |
| Optional facial analysis adjusts output to complement or contrast with visitor emotional states. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="text-green-400 mt-1 mr-3"> | |
| <i class="fas fa-history"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold">Memory System</h4> | |
| <p class="text-gray-300 text-sm"> | |
| Repeat visitors trigger the system to recall their previous LoRA adaptations for continuity. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="text-purple-400 mt-1 mr-3"> | |
| <i class="fas fa-users"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold">Social Integration</h4> | |
| <p class="text-gray-300 text-sm"> | |
| Groups can link their profiles to create combined artistic influences during their visit. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Business Model Section --> | |
| <div class="bg-gradient-to-r from-purple-900 to-blue-900 rounded-xl p-8"> | |
| <h3 class="text-2xl font-bold mb-6">Business Potential</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div class="bg-black bg-opacity-30 p-6 rounded-lg"> | |
| <h4 class="text-xl font-semibold mb-3 text-center">Artist Partnerships</h4> | |
| <p class="text-gray-300 text-center"> | |
| Gallery takes 20% commission on digital/physical artwork sales generated from artist-contributed styles | |
| </p> | |
| </div> | |
| <div class="bg-black bg-opacity-30 p-6 rounded-lg"> | |
| <h4 class="text-xl font-semibold mb-3 text-center">Visitor Experiences</h4> | |
| <p class="text-gray-300 text-center"> | |
| Ticket sales ($25-$35), memberships, and private event bookings ($5,000+) | |
| </p> | |
| </div> | |
| <div class="bg-black bg-opacity-30 p-6 rounded-lg"> | |
| <h4 class="text-xl font-semibold mb-3 text-center">Corporate Applications</h4> | |
| <p class="text-gray-300 text-center"> | |
| Custom installations for tech campuses, museums, and public spaces ($100k+) | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20 px-4 sm:px-6 lg:px-8 bg-black"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-5xl font-bold title-font mb-4">Begin the Conversation</h2> | |
| <div class="h-1 w-24 bg-gradient-to-r from-purple-500 to-pink-500 mx-auto mb-6"></div> | |
| <p class="max-w-2xl mx-auto text-lg text-gray-300"> | |
| Interested in bringing this innovative art experience to your institution or city? Get in touch with our team. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-10"> | |
| <div> | |
| <form class="space-y-6"> | |
| <div> | |
| <label for="name" class="block text-sm font-medium text-gray-300 mb-1">Name</label> | |
| <input type="text" id="name" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent text-white"> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-sm font-medium text-gray-300 mb-1">Email</label> | |
| <input type="email" id="email" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent text-white"> | |
| </div> | |
| <div> | |
| <label for="organization" class="block text-sm font-medium text-gray-300 mb-1">Organization</label> | |
| <input type="text" id="organization" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent text-white"> | |
| </div> | |
| <div> | |
| <label for="message" class="block text-sm font-medium text-gray-300 mb-1">Message</label> | |
| <textarea id="message" rows="4" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent text-white"></textarea> | |
| </div> | |
| <div> | |
| <button type="submit" class="w-full bg-gradient-to-r from-purple-600 to-pink-600 text-white font-medium py-3 px-4 rounded-lg hover:from-purple-700 hover:to-pink-700 transition duration-300"> | |
| Send Inquiry | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="bg-gray-900 p-8 rounded-xl w-full"> | |
| <h3 class="text-xl font-bold mb-4">Contact Information</h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="text-purple-400 mt-1 mr-4"> | |
| <i class="fas fa-envelope"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold">Email</h4> | |
| <p class="text-gray-400">info@artisticintelligence.com</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="text-blue-400 mt-1 mr-4"> | |
| <i class="fas fa-map-marker-alt"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold">Headquarters</h4> | |
| <p class="text-gray-400">123 Creative Lane, San Francisco, CA 94107</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="text-green-400 mt-1 mr-4"> | |
| <i class="fas fa-calendar-alt"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold">Pitch Meetings</h4> | |
| <p class="text-gray-400">Available Tuesdays & Thursdays with prior scheduling</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="text-yellow-400 mt-1 mr-4"> | |
| <i class="fas fa-users"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold">Investor Relations</h4> | |
| <p class="text-gray-400">investors@artisticintelligence.com</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 py-12 px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-6 md:mb-0"> | |
| <span class="text-2xl font-bold title-font text-white">AI✖Art</span> | |
| <p class="text-gray-400 mt-2">Reimagining AI's role in creative spaces</p> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white transition duration-300"> | |
| <i class="fab fa-twitter text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition duration-300"> | |
| <i class="fab fa-instagram text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition duration-300"> | |
| <i class="fab fa-linkedin text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition duration-300"> | |
| <i class="fab fa-github text-xl"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="mt-8 pt-8 border-t border-gray-800 text-center md:text-left"> | |
| <p class="text-gray-400 text-sm"> | |
| © 2023 Artistic Intelligence. All rights reserved. | |
| <span class="block md:inline mt-2 md:mt-0 md:ml-4"> | |
| Concept by Creative AI Research Group. | |
| </span> | |
| </p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // Gallery wall simulation | |
| const artContainer = document.getElementById('artContainer'); | |
| const artPieces = [ | |
| { name: 'Abstract Composition', style: 'abstract' }, | |
| { name: 'Portrait Study', style: 'portrait' }, | |
| { name: 'Urban Landscape', style: 'urban' }, | |
| { name: 'Surreal Dreamscape', style: 'dream' }, | |
| { name: 'Geometric Harmony', style: 'geometric' }, | |
| { name: 'Botanical Illustrations', style: 'nature' }, | |
| { name: 'Cyberpunk Cityscape', style: 'futurism' }, | |
| { name: 'Impressionist Seascape', style: 'impression' } | |
| ]; | |
| // Generate random art pieces on the wall | |
| function generateArtPieces() { | |
| artContainer.innerHTML = ''; | |
| artPieces.forEach((piece, index) => { | |
| const size = Math.random() * 200 + 150; // Random size between 150 and 350 | |
| const left = Math.random() * (100 - (size/1000 * 100)) + (size/1000 * 10); | |
| const top = Math.random() * (80 - (size/1000 * 80)) + (size/1000 * 5); | |
| const rotation = Math.random() * 15 - 7.5; // Random rotation between -7.5 and 7.5 degrees | |
| const delay = Math.random() * 5; | |
| const artPiece = document.createElement('div'); | |
| artPiece.className = `art-piece pulse-animation`; | |
| artPiece.style.width = `${size}px`; | |
| artPiece.style.height = `${size}px`; | |
| artPiece.style.left = `${left}%`; | |
| artPiece.style.top = `${top}%`; | |
| artPiece.style.transform = `rotate(${rotation}deg)`; | |
| artPiece.style.animationDelay = `${delay}s`; | |
| artPiece.style.backgroundImage = `url('https://source.unsplash.com/random/${Math.floor(size)}x${Math.floor(size)}/?${piece.style},art')`; | |
| artPiece.style.backgroundSize = 'cover'; | |
| artPiece.style.backgroundPosition = 'center'; | |
| artPiece.addEventListener('click', function() { | |
| alert(`Viewing: ${piece.name}`); | |
| }); | |
| artContainer.appendChild(artPiece); | |
| }); | |
| } | |
| generateArtPieces(); | |
| // Prompt input functionality | |
| document.getElementById('submitPrompt').addEventListener('click', function() { | |
| const prompt = document.getElementById('promptInput').value.trim(); | |
| if (prompt) { | |
| alert(`Concept "${prompt}" will now influence the gallery's artwork generation.`); | |
| // In a real implementation, this would send the prompt to the AI system | |
| document.getElementById('promptInput').value = ''; | |
| // Simulate adding the concept to terminal display | |
| const terminal = document.querySelector('.terminal .font-mono'); | |
| const newConcept = document.createElement('div'); | |
| newConcept.className = 'text-yellow-300 font-mono ml-4'; | |
| newConcept.textContent = `- ${prompt} (weight: ${(Math.random()*0.2 + 0.1).toFixed(2)})`; | |
| terminal.appendChild(newConcept); | |
| // Refresh some art pieces to simulate change | |
| setTimeout(() => { | |
| const pieces = document.querySelectorAll('.art-piece'); | |
| for (let i = 0; i < 2; i++) { | |
| const randomIndex = Math.floor(Math.random() * pieces.length); | |
| pieces[randomIndex].style.opacity = 0; | |
| setTimeout(() => { | |
| pieces[randomIndex].style.backgroundImage = `url('https://source.unsplash.com/random/${Math.floor(Math.random()*200 + 150)}x${Math.floor(Math.random()*200 + 150)}/?${prompt},art')`; | |
| pieces[randomIndex].style.opacity = 1; | |
| }, 500); | |
| } | |
| }, 1000); | |
| } | |
| }); | |
| // Enable pressing Enter to submit prompt | |
| document.getElementById('promptInput').addEventListener('keypress', function(e) { | |
| if (e.key === 'Enter') { | |
| document.getElementById('submitPrompt').click(); | |
| } | |
| }); | |
| // Camera capture functionality | |
| const captureArea = document.getElementById('captureArea'); | |
| const video = document.getElementById('video'); | |
| const canvas = document.getElementById('liveCanvas'); | |
| const placeholder = document.getElementById('placeholder'); | |
| const captureBtn = document.getElementById('captureBtn'); | |
| let stream = null; | |
| captureArea.addEventListener('click', async function() { | |
| if (!stream) { | |
| try { | |
| stream = await navigator.mediaDevices.getUserMedia({ video: true }); | |
| video.srcObject = stream; | |
| video.style.display = 'block'; | |
| placeholder.style.display = 'none'; | |
| captureBtn.classList.remove('hidden'); | |
| // Start showing live preview on canvas | |
| const ctx = canvas.getContext('2d'); | |
| canvas.style.display = 'block'; | |
| function drawVideoToCanvas() { | |
| ctx.drawImage(video, 0, 0, canvas.width, canvas.height); | |
| requestAnimationFrame(drawVideoToCanvas); | |
| } | |
| drawVideoToCanvas(); | |
| captureArea.classList.add('active'); | |
| } catch (err) { | |
| console.error("Error accessing camera:", err); | |
| alert("Could not access the camera. Please ensure you've granted permission."); | |
| } | |
| } | |
| }); | |
| captureBtn.addEventListener('click', function() { | |
| alert("Portrait captured! Your features will now influence the gallery's artwork."); | |
| // In a real implementation, this would send the captured image to the LoRA training system | |
| // Simulate processing | |
| captureBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Processing...'; | |
| setTimeout(() => { | |
| captureBtn.innerHTML = 'Processing complete!'; | |
| setTimeout(() => { | |
| video.style.display = 'none'; | |
| canvas.style.display = 'none'; | |
| placeholder.style.display = 'block'; | |
| placeholder.innerHTML = '<i class="fas fa-check-circle text-6xl text-green-400 mb-4"></i><p class="text-green-400">You are now part of the art!</p>'; | |
| captureBtn.classList.add('hidden'); | |
| if (stream) { | |
| stream.getTracks().forEach(track => track.stop()); | |
| stream = null; | |
| } | |
| }, 1000); | |
| }, 2000); | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| if (targetId === '#') return; | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| targetElement.scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| } | |
| // Close mobile menu if open | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| if (!mobileMenu.classList.contains('hidden')) { | |
| mobileMenu.classList.add('hidden'); | |
| } | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=GooGooPanda/aixart" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |