| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Unreal AI Assistant - Map Creation Tool</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> |
| .gradient-bg { |
| background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); |
| } |
| .sidebar-item:hover .sidebar-icon { |
| transform: scale(1.1); |
| color: #38b2ac; |
| } |
| .chat-message-ai { |
| background-color: #2d3748; |
| border-radius: 18px 18px 18px 4px; |
| } |
| .chat-message-user { |
| background-color: #4299e1; |
| border-radius: 18px 18px 4px 18px; |
| } |
| .asset-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); |
| } |
| .progress-ring__circle { |
| transition: stroke-dashoffset 0.35s; |
| transform: rotate(-90deg); |
| transform-origin: 50% 50%; |
| } |
| @keyframes pulse { |
| 0%, 100% { opacity: 1; } |
| 50% { opacity: 0.5; } |
| } |
| .animate-pulse-slow { |
| animation: pulse 3s infinite; |
| } |
| </style> |
| </head> |
| <body class="gradient-bg text-gray-100 min-h-screen flex"> |
| |
| <div class="w-20 bg-gray-900 flex flex-col items-center py-6 space-y-8"> |
| <div class="text-teal-400 text-2xl font-bold"> |
| <i class="fas fa-robot"></i> |
| </div> |
| |
| <div class="flex flex-col items-center space-y-8"> |
| <div class="sidebar-item group cursor-pointer"> |
| <div class="sidebar-icon text-gray-400 group-hover:text-teal-400 transition-all duration-200"> |
| <i class="fas fa-map-marked-alt text-2xl"></i> |
| </div> |
| <div class="text-xs mt-1 text-gray-400 group-hover:text-teal-400">Map Builder</div> |
| </div> |
| |
| <div class="sidebar-item group cursor-pointer"> |
| <div class="sidebar-icon text-gray-400 group-hover:text-teal-400 transition-all duration-200"> |
| <i class="fas fa-project-diagram text-2xl"></i> |
| </div> |
| <div class="text-xs mt-1 text-gray-400 group-hover:text-teal-400">Blueprints</div> |
| </div> |
| |
| <div class="sidebar-item group cursor-pointer"> |
| <div class="sidebar-icon text-gray-400 group-hover:text-teal-400 transition-all duration-200"> |
| <i class="fas fa-mountain text-2xl"></i> |
| </div> |
| <div class="text-xs mt-1 text-gray-400 group-hover:text-teal-400">Landscape</div> |
| </div> |
| |
| <div class="sidebar-item group cursor-pointer"> |
| <div class="sidebar-icon text-gray-400 group-hover:text-teal-400 transition-all duration-200"> |
| <i class="fas fa-city text-2xl"></i> |
| </div> |
| <div class="text-xs mt-1 text-gray-400 group-hover:text-teal-400">City Builder</div> |
| </div> |
| |
| <div class="sidebar-item group cursor-pointer"> |
| <div class="sidebar-icon text-gray-400 group-hover:text-teal-400 transition-all duration-200"> |
| <i class="fas fa-cog text-2xl"></i> |
| </div> |
| <div class="text-xs mt-1 text-gray-400 group-hover:text-teal-400">Settings</div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="flex-1 flex flex-col"> |
| |
| <div class="bg-gray-800 p-4 flex justify-between items-center border-b border-gray-700"> |
| <div class="flex items-center space-x-4"> |
| <h1 class="text-xl font-bold text-teal-400">Unreal AI Assistant</h1> |
| <div class="flex items-center space-x-2 bg-gray-700 px-3 py-1 rounded-full"> |
| <div class="w-2 h-2 bg-green-500 rounded-full"></div> |
| <span class="text-xs">Connected to UE5</span> |
| </div> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <button class="bg-teal-600 hover:bg-teal-700 px-4 py-2 rounded-lg text-sm font-medium transition-all"> |
| <i class="fas fa-play mr-2"></i>Test in Editor |
| </button> |
| <div class="relative"> |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-8 h-8 rounded-full cursor-pointer"> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="flex-1 flex overflow-hidden"> |
| |
| <div class="w-1/3 bg-gray-800 border-r border-gray-700 flex flex-col"> |
| <div class="p-4 border-b border-gray-700"> |
| <h2 class="font-semibold text-lg">AI Assistant</h2> |
| <p class="text-sm text-gray-400">Describe what you want to build and the AI will help</p> |
| </div> |
| |
| <div class="flex-1 overflow-y-auto p-4 space-y-4" id="chat-container"> |
| <div class="flex items-start space-x-2"> |
| <div class="bg-teal-500 p-2 rounded-full"> |
| <i class="fas fa-robot text-white"></i> |
| </div> |
| <div class="chat-message-ai p-3 max-w-xs"> |
| <p>Hello! I'm your Unreal Engine AI assistant. How can I help you with your project today?</p> |
| </div> |
| </div> |
| |
| <div class="flex items-start space-x-2 justify-end"> |
| <div class="chat-message-user p-3 max-w-xs"> |
| <p>I need a Fortnite-style map with a medieval castle in the center and some surrounding villages.</p> |
| </div> |
| <div class="bg-blue-500 p-2 rounded-full"> |
| <i class="fas fa-user text-white"></i> |
| </div> |
| </div> |
| |
| <div class="flex items-start space-x-2"> |
| <div class="bg-teal-500 p-2 rounded-full"> |
| <i class="fas fa-robot text-white"></i> |
| </div> |
| <div class="chat-message-ai p-3 max-w-xs"> |
| <p>Great! I'll create a landscape with these features: |
| <ul class="list-disc pl-5 mt-2 space-y-1"> |
| <li>Central castle with towers</li> |
| <li>3 surrounding villages</li> |
| <li>Forest areas for cover</li> |
| <li>River running through map</li> |
| </ul> |
| Should I proceed? |
| </p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="p-4 border-t border-gray-700"> |
| <div class="relative"> |
| <input type="text" placeholder="Describe what you want to build..." |
| class="w-full bg-gray-700 rounded-lg py-3 pl-4 pr-12 focus:outline-none focus:ring-2 focus:ring-teal-500"> |
| <button class="absolute right-3 top-3 text-gray-400 hover:text-teal-400"> |
| <i class="fas fa-paper-plane"></i> |
| </button> |
| </div> |
| <div class="flex justify-between mt-2 text-xs text-gray-500"> |
| <span>AI understands: Map Building, Blueprints, Landscape, Materials</span> |
| <button class="text-teal-400 hover:underline">Examples</button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="flex-1 bg-gray-900 flex flex-col"> |
| <div class="p-4 border-b border-gray-700 flex justify-between items-center"> |
| <h2 class="font-semibold">Map Preview</h2> |
| <div class="flex space-x-2"> |
| <button class="bg-gray-700 hover:bg-gray-600 p-2 rounded-lg"> |
| <i class="fas fa-expand"></i> |
| </button> |
| <button class="bg-gray-700 hover:bg-gray-600 p-2 rounded-lg"> |
| <i class="fas fa-camera"></i> |
| </button> |
| </div> |
| </div> |
| |
| <div class="flex-1 flex items-center justify-center relative"> |
| |
| <div class="w-full h-full bg-gray-800 flex items-center justify-center"> |
| <div class="text-center"> |
| <div class="text-6xl mb-4 text-gray-600"> |
| <i class="fas fa-globe-europe"></i> |
| </div> |
| <p class="text-gray-500">3D Viewport will appear here</p> |
| <p class="text-xs text-gray-600 mt-2">Connected to Unreal Engine 5.2</p> |
| </div> |
| </div> |
| |
| |
| <div class="absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center hidden" id="progress-overlay"> |
| <div class="text-center"> |
| <div class="relative w-20 h-20 mx-auto mb-4"> |
| <svg class="w-full h-full" viewBox="0 0 100 100"> |
| <circle class="text-gray-700" stroke-width="8" stroke="currentColor" fill="transparent" r="40" cx="50" cy="50"/> |
| <circle class="text-teal-500 progress-ring__circle" stroke-width="8" stroke-linecap="round" stroke="currentColor" fill="transparent" r="40" cx="50" cy="50" stroke-dasharray="251.2" stroke-dashoffset="125.6"/> |
| </svg> |
| <div class="absolute inset-0 flex items-center justify-center"> |
| <span class="text-white font-bold text-xl">75%</span> |
| </div> |
| </div> |
| <p class="text-white font-medium">Generating Landscape</p> |
| <p class="text-gray-400 text-sm mt-1">Creating terrain with erosion patterns...</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="p-4 border-t border-gray-700"> |
| <div class="flex justify-between items-center"> |
| <div> |
| <h3 class="font-medium">Current Task</h3> |
| <p class="text-sm text-gray-400">Building castle foundation</p> |
| </div> |
| <div class="flex space-x-2"> |
| <button class="bg-teal-600 hover:bg-teal-700 px-3 py-1 rounded text-sm"> |
| <i class="fas fa-check mr-1"></i> Approve |
| </button> |
| <button class="bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded text-sm"> |
| <i class="fas fa-redo mr-1"></i> Regenerate |
| </button> |
| <button class="bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded text-sm"> |
| <i class="fas fa-pause mr-1"></i> Pause |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="w-80 bg-gray-800 border-l border-gray-700 flex flex-col"> |
| <div class="p-4 border-b border-gray-700"> |
| <h2 class="font-semibold text-lg">Assets & Tools</h2> |
| <div class="flex mt-2 space-x-2"> |
| <button class="bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded text-sm flex-1"> |
| <i class="fas fa-search mr-1"></i> Search |
| </button> |
| <button class="bg-gray-700 hover:bg-gray-600 p-1 rounded text-sm"> |
| <i class="fas fa-sliders-h"></i> |
| </button> |
| </div> |
| </div> |
| |
| <div class="flex-1 overflow-y-auto p-4 space-y-4"> |
| <div> |
| <h3 class="font-medium text-sm text-gray-400 mb-2">Suggested Assets</h3> |
| <div class="grid grid-cols-2 gap-3"> |
| <div class="asset-card bg-gray-700 rounded-lg p-2 cursor-pointer transition-all duration-200"> |
| <div class="bg-gray-600 rounded-md h-20 flex items-center justify-center"> |
| <i class="fas fa-chess-rook text-2xl text-gray-400"></i> |
| </div> |
| <p class="text-xs mt-1 truncate">Castle Tower</p> |
| <p class="text-xxs text-gray-400">Medieval Pack</p> |
| </div> |
| <div class="asset-card bg-gray-700 rounded-lg p-2 cursor-pointer transition-all duration-200"> |
| <div class="bg-gray-600 rounded-md h-20 flex items-center justify-center"> |
| <i class="fas fa-home text-2xl text-gray-400"></i> |
| </div> |
| <p class="text-xs mt-1 truncate">Village House</p> |
| <p class="text-xxs text-gray-400">Fantasy Pack</p> |
| </div> |
| <div class="asset-card bg-gray-700 rounded-lg p-2 cursor-pointer transition-all duration-200"> |
| <div class="bg-gray-600 rounded-md h-20 flex items-center justify-center"> |
| <i class="fas fa-tree text-2xl text-gray-400"></i> |
| </div> |
| <p class="text-xs mt-1 truncate">Pine Tree</p> |
| <p class="text-xxs text-gray-400">Nature Pack</p> |
| </div> |
| <div class="asset-card bg-gray-700 rounded-lg p-2 cursor-pointer transition-all duration-200"> |
| <div class="bg-gray-600 rounded-md h-20 flex items-center justify-center"> |
| <i class="fas fa-water text-2xl text-gray-400"></i> |
| </div> |
| <p class="text-xs mt-1 truncate">River Material</p> |
| <p class="text-xxs text-gray-400">Water Pack</p> |
| </div> |
| </div> |
| </div> |
| |
| <div> |
| <h3 class="font-medium text-sm text-gray-400 mb-2">Quick Actions</h3> |
| <div class="space-y-2"> |
| <button class="w-full bg-gray-700 hover:bg-teal-600 p-2 rounded-lg text-sm flex items-center space-x-2 transition-all"> |
| <i class="fas fa-mountain text-gray-400"></i> |
| <span>Generate Terrain</span> |
| </button> |
| <button class="w-full bg-gray-700 hover:bg-teal-600 p-2 rounded-lg text-sm flex items-center space-x-2 transition-all"> |
| <i class="fas fa-road text-gray-400"></i> |
| <span>Add Paths</span> |
| </button> |
| <button class="w-full bg-gray-700 hover:bg-teal-600 p-2 rounded-lg text-sm flex items-center space-x-2 transition-all"> |
| <i class="fas fa-leaf text-gray-400"></i> |
| <span>Add Foliage</span> |
| </button> |
| <button class="w-full bg-gray-700 hover:bg-teal-600 p-2 rounded-lg text-sm flex items-center space-x-2 transition-all"> |
| <i class="fas fa-lightbulb text-gray-400"></i> |
| <span>Optimize Lighting</span> |
| </button> |
| </div> |
| </div> |
| |
| <div> |
| <h3 class="font-medium text-sm text-gray-400 mb-2">Task Queue</h3> |
| <div class="space-y-2"> |
| <div class="bg-gray-700 p-2 rounded-lg text-sm flex items-start space-x-2"> |
| <div class="w-4 h-4 bg-teal-500 rounded-full mt-1 flex-shrink-0 animate-pulse-slow"></div> |
| <div> |
| <p>Building castle foundation</p> |
| <p class="text-xxs text-gray-400">In progress - 75%</p> |
| </div> |
| </div> |
| <div class="bg-gray-700 p-2 rounded-lg text-sm flex items-start space-x-2 opacity-70"> |
| <div class="w-4 h-4 bg-gray-500 rounded-full mt-1 flex-shrink-0"></div> |
| <div> |
| <p>Place village structures</p> |
| <p class="text-xxs text-gray-400">Pending</p> |
| </div> |
| </div> |
| <div class="bg-gray-700 p-2 rounded-lg text-sm flex items-start space-x-2 opacity-70"> |
| <div class="w-4 h-4 bg-gray-500 rounded-full mt-1 flex-shrink-0"></div> |
| <div> |
| <p>Generate terrain textures</p> |
| <p class="text-xxs text-gray-400">Pending</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| |
| document.querySelector('.fa-paper-plane').addEventListener('click', function() { |
| const input = document.querySelector('input[type="text"]'); |
| if (input.value.trim() === '') return; |
| |
| |
| const chatContainer = document.getElementById('chat-container'); |
| const userMessage = document.createElement('div'); |
| userMessage.className = 'flex items-start space-x-2 justify-end'; |
| userMessage.innerHTML = ` |
| <div class="chat-message-user p-3 max-w-xs"> |
| <p>${input.value}</p> |
| </div> |
| <div class="bg-blue-500 p-2 rounded-full"> |
| <i class="fas fa-user text-white"></i> |
| </div> |
| `; |
| chatContainer.appendChild(userMessage); |
| |
| |
| const progressOverlay = document.getElementById('progress-overlay'); |
| progressOverlay.classList.remove('hidden'); |
| |
| |
| input.value = ''; |
| |
| |
| setTimeout(() => { |
| progressOverlay.classList.add('hidden'); |
| |
| |
| const aiResponse = document.createElement('div'); |
| aiResponse.className = 'flex items-start space-x-2'; |
| aiResponse.innerHTML = ` |
| <div class="bg-teal-500 p-2 rounded-full"> |
| <i class="fas fa-robot text-white"></i> |
| </div> |
| <div class="chat-message-ai p-3 max-w-xs"> |
| <p>I've started working on your request. I'm currently generating the terrain based on medieval landscape patterns. Would you like me to focus on any specific architectural style for the castle?</p> |
| </div> |
| `; |
| chatContainer.appendChild(aiResponse); |
| |
| |
| chatContainer.scrollTop = chatContainer.scrollHeight; |
| }, 3000); |
| }); |
| |
| |
| document.querySelector('input[type="text"]').addEventListener('keypress', function(e) { |
| if (e.key === 'Enter') { |
| document.querySelector('.fa-paper-plane').click(); |
| } |
| }); |
| </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=87geier/ue5" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
