Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>NeonJulia - The Future of Compiler Tech</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Roboto+Mono:wght@300;500&display=swap'); | |
| .cyber-glitch { | |
| position: relative; | |
| } | |
| .cyber-glitch:hover::before { | |
| content: ''; | |
| position: absolute; | |
| top: -2px; | |
| left: -2px; | |
| right: -2px; | |
| bottom: -2px; | |
| background: linear-gradient(45deg, #00ff00, #00ffff, #ff00ff, #00ff00); | |
| z-index: -1; | |
| filter: blur(5px); | |
| opacity: 0.7; | |
| animation: glitch 0.5s linear infinite; | |
| } | |
| @keyframes glitch { | |
| 0% { transform: translate(0); } | |
| 20% { transform: translate(-2px, 2px); } | |
| 40% { transform: translate(-2px, -2px); } | |
| 60% { transform: translate(2px, 2px); } | |
| 80% { transform: translate(2px, -2px); } | |
| 100% { transform: translate(0); } | |
| } | |
| .neon-text { | |
| text-shadow: 0 0 5px #00ff00, 0 0 10px #00ff00, 0 0 15px #00ff00; | |
| } | |
| .code-display { | |
| background: rgba(0, 0, 0, 0.7); | |
| border-left: 3px solid #00ff00; | |
| font-family: 'Roboto Mono', monospace; | |
| } | |
| .grid-circuit { | |
| background-image: | |
| linear-gradient(to right, rgba(0, 255, 0, 0.3) 1px, transparent 1px), | |
| linear-gradient(to bottom, rgba(0, 255, 0, 0.3) 1px, transparent 1px); | |
| background-size: 20px 20px; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-black text-white font-sans overflow-x-hidden"> | |
| <div id="vanta-bg" class="fixed inset-0 -z-10"></div> | |
| <!-- Navigation --> | |
| <nav class="container mx-auto px-6 py-4 flex justify-between items-center"> | |
| <div class="text-2xl font-bold neon-text font-['Orbitron']">NeonJulia</div> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#" class="hover:text-green-400 transition">Technology</a> | |
| <a href="#" class="hover:text-purple-400 transition">Benchmarks</a> | |
| <a href="#" class="hover:text-cyan-400 transition">Team</a> | |
| <a href="#" class="hover:text-pink-400 transition">Blog</a> | |
| </div> | |
| <button class="cyber-glitch px-6 py-2 bg-gradient-to-r from-green-500 to-purple-600 rounded-md font-bold hover:from-green-600 hover:to-purple-700 transition-all"> | |
| Get Early Access | |
| </button> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="container mx-auto px-6 py-20 md:py-32"> | |
| <div class="grid md:grid-cols-2 gap-12 items-center"> | |
| <div class="space-y-8"> | |
| <h1 class="text-4xl md:text-6xl font-bold font-['Orbitron'] neon-text"> | |
| The Future of Julia: <span class="text-transparent bg-clip-text bg-gradient-to-r from-green-400 to-purple-500">Memory-Safe, Embedded, and Blazing Fast</span> | |
| </h1> | |
| <p class="text-lg md:text-xl text-gray-300"> | |
| Revolutionizing compiler technology with Reactant.jl and MLIR to transform Julia into the ultimate low-level, memory-safe language for embedded systems. | |
| </p> | |
| <div class="flex space-x-4"> | |
| <button class="cyber-glitch px-8 py-3 bg-gradient-to-r from-green-500 to-cyan-500 rounded-md font-bold text-black hover:shadow-lg hover:shadow-green-500/30 transition-all"> | |
| Join the Revolution | |
| </button> | |
| <button class="px-8 py-3 border-2 border-green-500 rounded-md font-bold hover:bg-green-500/10 transition-all"> | |
| Watch Demo <i data-feather="play" class="inline ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <div class="code-display p-6 rounded-lg backdrop-blur-sm"> | |
| <pre class="text-green-400"> | |
| <span class="text-purple-400">using</span> Reactant | |
| <span class="text-purple-400">using</span> MLIR | |
| <span class="text-cyan-400">@reactant</span> <span class="text-yellow-400">function</span> kernel(x) | |
| y = x * <span class="text-purple-400">2.5f0</span> | |
| z = y + <span class="text-purple-400">1.0f0</span> | |
| <span class="text-purple-400">return</span> z | |
| <span class="text-yellow-400">end</span> | |
| <span class="text-gray-500"># Compiles to optimized MLIR</span> | |
| <span class="text-gray-500"># with full AOT capabilities</span> | |
| ir = lower_to_mlir(kernel)</pre> | |
| </div> | |
| <div class="absolute -top-4 -left-4 w-16 h-16 border-t-2 border-l-2 border-green-500"></div> | |
| <div class="absolute -bottom-4 -right-4 w-16 h-16 border-b-2 border-r-2 border-purple-500"></div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Mission Section --> | |
| <section class="grid-circuit py-20"> | |
| <div class="container mx-auto px-6"> | |
| <div class="max-w-4xl mx-auto text-center space-y-8"> | |
| <h2 class="text-3xl md:text-4xl font-bold font-['Orbitron'] neon-text"> | |
| <span class="text-transparent bg-clip-text bg-gradient-to-r from-green-400 to-purple-500">Extending Julia's Power with MLIR</span> | |
| </h2> | |
| <p class="text-xl text-gray-300"> | |
| We're bridging the gap between Julia's high-level productivity and low-level performance by leveraging MLIR for world-class AOT compilation. Our stack brings Mojo/Taichi/Triton-style optimizations to Julia's ecosystem. | |
| </p> | |
| <div class="grid md:grid-cols-3 gap-8 pt-12"> | |
| <div class="bg-black/70 p-6 rounded-lg border border-gray-800 hover:border-green-500 transition-all"> | |
| <i data-feather="cpu" class="w-12 h-12 text-green-500 mx-auto mb-4"></i> | |
| <h3 class="text-xl font-bold mb-2">Memory Safety</h3> | |
| <p class="text-gray-400">Zero-cost abstractions with Rust-like memory guarantees</p> | |
| </div> | |
| <div class="bg-black/70 p-6 rounded-lg border border-gray-800 hover:border-purple-500 transition-all"> | |
| <i data-feather="zap" class="w-12 h-12 text-purple-500 mx-auto mb-4"></i> | |
| <h3 class="text-xl font-bold mb-2">AOT Compilation</h3> | |
| <p class="text-gray-400">Full ahead-of-time compilation for embedded targets</p> | |
| </div> | |
| <div class="bg-black/70 p-6 rounded-lg border border-gray-800 hover:border-cyan-500 transition-all"> | |
| <i data-feather="layers" class="w-12 h-12 text-cyan-500 mx-auto mb-4"></i> | |
| <h3 class="text-xl font-bold mb-2">MLIR Integration</h3> | |
| <p class="text-gray-400">Direct optimization through MLIR's compiler infrastructure</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Technical Showcase --> | |
| <section class="py-20 container mx-auto px-6"> | |
| <div class="grid md:grid-cols-2 gap-12 items-center"> | |
| <div class="space-y-6"> | |
| <h2 class="text-3xl md:text-4xl font-bold font-['Orbitron'] neon-text"> | |
| <span class="text-transparent bg-clip-text bg-gradient-to-r from-green-400 to-purple-500">From Julia to Optimized MLIR</span> | |
| </h2> | |
| <p class="text-lg text-gray-300"> | |
| Our compiler transforms idiomatic Julia code into highly optimized MLIR, enabling performance that rivals hand-written C++ while maintaining Julia's expressiveness. | |
| </p> | |
| <div class="space-y-4"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-green-500 flex items-center justify-center mr-4"> | |
| <i data-feather="check" class="w-4 h-4 text-black"></i> | |
| </div> | |
| <span>2-5x faster than native Julia</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-green-500 flex items-center justify-center mr-4"> | |
| <i data-feather="check" class="w-4 h-4 text-black"></i> | |
| </div> | |
| <span>Memory-safe by construction</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-green-500 flex items-center justify-center mr-4"> | |
| <i data-feather="check" class="w-4 h-4 text-black"></i> | |
| </div> | |
| <span>Seamless hardware acceleration</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <div class="bg-gradient-to-br from-green-900/30 to-purple-900/30 p-1 rounded-lg"> | |
| <div class="bg-black p-6 rounded-lg"> | |
| <div class="flex space-x-2 mb-4"> | |
| <div class="w-3 h-3 rounded-full bg-red-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-yellow-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> | |
| </div> | |
| <pre class="text-xs overflow-x-auto"> | |
| <span class="text-green-500">// -----// IR Dump After Optimization //----- //</span> | |
| <span class="text-cyan-500">func.func</span> <span class="text-yellow-500">@kernel</span>(%arg0: <span class="text-purple-500">f32</span>) -> <span class="text-purple-500">f32</span> { | |
| %0 = <span class="text-yellow-500">arith.mulf</span> %arg0, <span class="text-purple-500">2.5</span> : <span class="text-purple-500">f32</span> | |
| %1 = <span class="text-yellow-500">arith.addf</span> %0, <span class="text-purple-500">1.0</span> : <span class="text-purple-500">f32</span> | |
| <span class="text-yellow-500">return</span> %1 : <span class="text-purple-500">f32</span> | |
| }</pre> | |
| </div> | |
| </div> | |
| <div class="absolute -bottom-4 -right-4 w-16 h-16 border-b-2 border-r-2 border-purple-500"></div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Comparison Section --> | |
| <section class="py-20 bg-gradient-to-b from-black to-purple-900/10"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold font-['Orbitron'] neon-text mb-4"> | |
| <span class="text-transparent bg-clip-text bg-gradient-to-r from-green-400 to-purple-500">Julia vs. The Competition</span> | |
| </h2> | |
| <p class="text-xl text-gray-300 max-w-2xl mx-auto"> | |
| We're positioning Julia as the ultimate alternative to Rust and C++ for embedded and high-performance computing. | |
| </p> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="w-full bg-black/70 backdrop-blur-sm border border-gray-800 rounded-lg"> | |
| <thead> | |
| <tr class="border-b border-gray-800"> | |
| <th class="p-4 text-left font-['Orbitron'] text-green-400">Feature</th> | |
| <th class="p-4 text-center font-['Orbitron'] text-purple-400">Julia + Reactant</th> | |
| <th class="p-4 text-center font-['Orbitron']">Rust</th> | |
| <th class="p-4 text-center font-['Orbitron']">C++</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr class="border-b border-gray-800 hover:bg-gray-900/50 transition"> | |
| <td class="p-4">Memory Safety</td> | |
| <td class="p-4 text-center text-green-400"><i data-feather="check-circle"></i></td> | |
| <td class="p-4 text-center text-green-400"><i data-feather="check-circle"></i></td> | |
| <td class="p-4 text-center text-red-400"><i data-feather="x-circle"></i></td> | |
| </tr> | |
| <tr class="border-b border-gray-800 hover:bg-gray-900/50 transition"> | |
| <td class="p-4">AOT Compilation</td> | |
| <td class="p-4 text-center text-green-400"><i data-feather="check-circle"></i></td> | |
| <td class="p-4 text-center text-green-400"><i data-feather="check-circle"></i></td> | |
| <td class="p-4 text-center text-green-400"><i data-feather="check-circle"></i></td> | |
| </tr> | |
| <tr class="border-b border-gray-800 hover:bg-gray-900/50 transition"> | |
| <td class="p-4">MLIR Integration</td> | |
| <td class="p-4 text-center text-green-400"><i data-feather="check-circle"></i></td> | |
| <td class="p-4 text-center text-yellow-400"><i data-feather="alert-circle"></i></td> | |
| <td class="p-4 text-center text-yellow-400"><i data-feather="alert-circle"></i></td> | |
| </tr> | |
| <tr class="border-b border-gray-800 hover:bg-gray-900/50 transition"> | |
| <td class="p-4">Embedded Ready</td> | |
| <td class="p-4 text-center text-green-400"><i data-feather="check-circle"></i></td> | |
| <td class="p-4 text-center text-green-400"><i data-feather="check-circle"></i></td> | |
| <td class="p-4 text-center text-green-400"><i data-feather="check-circle"></i></td> | |
| </tr> | |
| <tr class="hover:bg-gray-900/50 transition"> | |
| <td class="p-4">High-Level Productivity</td> | |
| <td class="p-4 text-center text-green-400"><i data-feather="check-circle"></i></td> | |
| <td class="p-4 text-center text-red-400"><i data-feather="x-circle"></i></td> | |
| <td class="p-4 text-center text-red-400"><i data-feather="x-circle"></i></td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-32 relative overflow-hidden"> | |
| <div class="absolute inset-0 bg-gradient-to-r from-green-900/10 to-purple-900/10 -skew-y-6"></div> | |
| <div class="container mx-auto px-6 relative"> | |
| <div class="max-w-3xl mx-auto text-center space-y-8"> | |
| <h2 class="text-3xl md:text-5xl font-bold font-['Orbitron'] neon-text"> | |
| Ready to Revolutionize <span class="text-transparent bg-clip-text bg-gradient-to-r from-green-400 to-purple-500">Compiler Technology?</span> | |
| </h2> | |
| <p class="text-xl text-gray-300"> | |
| Join us in building the future of Julia as a memory-safe, embedded powerhouse with world-class performance. | |
| </p> | |
| <button class="cyber-glitch px-10 py-4 bg-gradient-to-r from-green-500 to-purple-600 rounded-md font-bold text-lg hover:from-green-600 hover:to-purple-700 hover:shadow-lg hover:shadow-purple-500/30 transition-all"> | |
| Get Early Access <i data-feather="arrow-right" class="inline ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Cyber IDE Section --> | |
| <section class="py-16 border-t border-green-500/30"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl md:text-4xl font-bold font-['Orbitron'] neon-text mb-8 text-center"> | |
| <span class="text-transparent bg-clip-text bg-gradient-to-r from-green-400 to-purple-500">Live Julia IDE</span> | |
| </h2> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <!-- Code Editor --> | |
| <div class="md:col-span-2 bg-black/70 backdrop-blur-sm border border-green-500/30 rounded-lg overflow-hidden"> | |
| <div class="flex items-center bg-gray-900 px-4 py-2 border-b border-green-500/30"> | |
| <div class="flex space-x-2 mr-4"> | |
| <div class="w-3 h-3 rounded-full bg-red-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-yellow-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> | |
| </div> | |
| <div class="text-sm text-green-400">main.jl</div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="code-display"> | |
| <pre class="text-green-400" id="live-code" contenteditable="true"> | |
| <span class="text-purple-400">using</span> Reactant | |
| <span class="text-purple-400">using</span> MLIR | |
| <span class="text-cyan-400">@reactant</span> <span class="text-yellow-400">function</span> vecadd(a, b) | |
| c = similar(a) | |
| <span class="text-yellow-400">@inbounds</span> <span class="text-yellow-400">for</span> i <span class="text-yellow-400">in</span> eachindex(a) | |
| c[i] = a[i] + b[i] | |
| <span class="text-yellow-400">end</span> | |
| <span class="text-purple-400">return</span> c | |
| <span class="text-yellow-400">end</span> | |
| <span class="text-gray-500"># Compile to MLIR and run</span> | |
| a = rand(Float32, 1000) | |
| b = rand(Float32, 1000) | |
| compiled = lower_to_mlir(vecadd) | |
| result = compiled(a, b)</pre> | |
| </div> | |
| </div> | |
| <div class="bg-gray-900 px-4 py-3 border-t border-green-500/30 flex justify-between items-center"> | |
| <div class="text-xs text-gray-400">NEONJULIA v0.4.2</div> | |
| <button class="cyber-glitch px-4 py-1 bg-gradient-to-r from-green-500 to-cyan-500 rounded text-sm font-bold"> | |
| Run Code <i data-feather="play" class="inline ml-1 w-3 h-3"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Cyber Copilot --> | |
| <div class="bg-black/70 backdrop-blur-sm border border-purple-500/30 rounded-lg overflow-hidden"> | |
| <div class="bg-gray-900 px-4 py-2 border-b border-purple-500/30 flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-gradient-to-r from-purple-500 to-pink-500 flex items-center justify-center mr-2"> | |
| <i data-feather="cpu" class="w-4 h-4 text-white"></i> | |
| </div> | |
| <div class="font-bold text-purple-400">Cyber Copilot</div> | |
| </div> | |
| <div class="p-4 h-64 overflow-y-auto"> | |
| <div class="chat-message mb-4"> | |
| <div class="text-xs text-purple-400 mb-1">CYBERCOPILOT:</div> | |
| <div class="text-sm bg-gray-800/50 p-2 rounded"> | |
| Welcome to the NeonJulia IDE! I can help optimize your Reactant.jl code and explain MLIR transformations. Try asking about vectorization or memory safety! | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-900 px-4 py-3 border-t border-purple-500/30"> | |
| <div class="flex"> | |
| <input type="text" placeholder="Ask about MLIR optimizations..." | |
| class="flex-1 bg-gray-800 text-sm px-3 py-2 rounded-l focus:outline-none focus:ring-1 focus:ring-purple-500"> | |
| <button class="bg-purple-600 hover:bg-purple-700 px-3 rounded-r"> | |
| <i data-feather="send" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="py-12 border-t border-gray-800"> | |
| <div class="container mx-auto px-6"> | |
| <div class="grid md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-bold font-['Orbitron'] mb-4">NeonJulia</h3> | |
| <p class="text-gray-400">Pushing the boundaries of compiler technology with Julia and MLIR.</p> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Technology</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-green-400 transition">Reactant.jl</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-green-400 transition">MLIR Integration</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-green-400 transition">AOT Compilation</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Resources</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-purple-400 transition">Documentation</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-purple-400 transition">GitHub</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-purple-400 transition">Blog</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Connect</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-cyan-400 transition"><i data-feather="twitter"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-purple-400 transition"><i data-feather="github"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-red-400 transition"><i data-feather="youtube"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-blue-400 transition"><i data-feather="linkedin"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-500"> | |
| <p>© 2023 NeonJulia - Revolutionizing compiler technology</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Make code editor highlight on focus | |
| document.getElementById('live-code').addEventListener('focus', function() { | |
| this.parentElement.classList.add('ring-1', 'ring-green-500'); | |
| }); | |
| document.getElementById('live-code').addEventListener('blur', function() { | |
| this.parentElement.classList.remove('ring-1', 'ring-green-500'); | |
| }); | |
| // Initialize Vanta.js background | |
| VANTA.NET({ | |
| el: "#vanta-bg", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: 0x00ff00, | |
| backgroundColor: 0x0, | |
| points: 12.00, | |
| maxDistance: 22.00, | |
| spacing: 18.00 | |
| }); | |
| // Initialize Feather Icons | |
| feather.replace(); | |
| // Cyber typing effect for code editor | |
| const codeLines = [ | |
| "result = compiled(a, b)", | |
| "println(\"Vector add complete\")", | |
| "println(\"Performance: \", @allocated compiled(a, b), \" bytes allocated\")", | |
| "# Try optimizing with @reactant macro!", | |
| "lower_to_mlir(vecadd, optimize=true)" | |
| ]; | |
| let currentLine = 0; | |
| setInterval(() => { | |
| const editor = document.getElementById('live-code'); | |
| if(currentLine < codeLines.length) { | |
| editor.innerHTML += '\n' + codeLines[currentLine]; | |
| editor.scrollTop = editor.scrollHeight; | |
| currentLine++; | |
| } | |
| }, 3000); | |
| </script> | |
| </body> | |
| </html> | |