Project Art Hierarchy тут нужно ещё видлеть иерархию проекта и файлов арта и превью будут небольшие ы в чате должно уже быть сообщение и вызвана тула которая сделала рескин 4 файлов и показывает было стало
9327360 verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ArtStyle Transformer Copilot</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| </head> | |
| <body class="bg-gray-100"> | |
| <custom-navbar></custom-navbar> | |
| <div class="container mx-auto p-4"> | |
| <div class="flex flex-col md:flex-row gap-6 h-[calc(100vh-150px)]"> | |
| <!-- Art Preview Panel --> | |
| <div class="w-full md:w-1/3 bg-white rounded-xl shadow-lg overflow-hidden"> | |
| <div class="p-4 border-b border-gray-200"> | |
| <h2 class="text-xl font-semibold text-gray-800">Project Art Hierarchy</h2> | |
| </div> | |
| <div class="p-4 overflow-y-auto h-full"> | |
| <div class="art-preview"> | |
| <div class="art-hierarchy mb-4"> | |
| <h3 class="font-medium mb-2">Art Asset Structure</h3> | |
| <div class="tree-view"> | |
| <div class="tree-item active"> | |
| <i data-feather="folder" class="w-4 h-4 mr-1"></i> | |
| <span>Game Assets/</span> | |
| </div> | |
| <div class="tree-item pl-4"> | |
| <i data-feather="folder" class="w-4 h-4 mr-1"></i> | |
| <span>Characters/</span> | |
| </div> | |
| <div class="tree-item pl-4"> | |
| <i data-feather="folder" class="w-4 h-4 mr-1"></i> | |
| <span>Environment/</span> | |
| </div> | |
| <div class="tree-item pl-4"> | |
| <i data-feather="folder" class="w-4 h-4 mr-1"></i> | |
| <span>UI/</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="preview-grid grid grid-cols-2 gap-4"> | |
| <div class="art-item cursor-pointer transition-all hover:scale-105" data-art="bg1"> | |
| <img src="http://static.photos/abstract/320x240/1" alt="Background 1" class="w-full h-auto rounded-lg"> | |
| <p class="text-sm text-center mt-2">Background.png</p> | |
| </div> | |
| <div class="art-item cursor-pointer transition-all hover:scale-105" data-art="char1"> | |
| <img src="http://static.photos/people/320x240/1" alt="Character 1" class="w-full h-auto rounded-lg"> | |
| <p class="text-sm text-center mt-2">Hero.png</p> | |
| </div> | |
| <div class="art-item cursor-pointer transition-all hover:scale-105" data-art="ui1"> | |
| <img src="http://static.photos/technology/320x240/1" alt="UI Elements" class="w-full h-auto rounded-lg"> | |
| <p class="text-sm text-center mt-2">Buttons.png</p> | |
| </div> | |
| <div class="art-item cursor-pointer transition-all hover:scale-105" data-art="item1"> | |
| <img src="http://static.photos/minimal/320x240/1" alt="Items" class="w-full h-auto rounded-lg"> | |
| <p class="text-sm text-center mt-2">Inventory.png</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Chat and Comparison Panel --> | |
| <div class="w-full md:w-2/3 flex flex-col"> | |
| <div class="bg-white rounded-xl shadow-lg flex-1 flex flex-col overflow-hidden"> | |
| <div class="p-4 border-b border-gray-200"> | |
| <h2 class="text-xl font-semibold text-gray-800">Style Transformation Chat</h2> | |
| </div> | |
| <!-- Comparison View --> | |
| <div class="flex-1 p-4 overflow-y-auto"> | |
| <div class="comparison-view"> | |
| <div class="chat-message mb-4 p-4 bg-blue-50 rounded-lg"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mr-3"> | |
| <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center"> | |
| <i data-feather="cpu" class="w-4 h-4 text-blue-600"></i> | |
| </div> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium text-gray-800">ArtBot</p> | |
| <p class="text-sm text-gray-600 mt-1">I've processed 4 files with "Cyberpunk Neon" style. Here are the results:</p> | |
| </div> | |
| </div> | |
| </div> | |
| <h3 class="text-lg font-medium mb-4">Style Transformation Results</h3> | |
| <div class="grid grid-cols-1 gap-6"> | |
| <div class="comparison-item"> | |
| <h4 class="text-sm font-medium mb-2">Background.png</h4> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div> | |
| <h5 class="text-xs font-medium text-gray-500 mb-1">Original</h5> | |
| <img src="http://static.photos/abstract/320x240/1" alt="Original" class="w-full h-auto rounded-lg border border-gray-200"> | |
| </div> | |
| <div> | |
| <h5 class="text-xs font-medium text-gray-500 mb-1">Transformed</h5> | |
| <img src="http://static.photos/abstract/320x240/2" alt="Transformed" class="w-full h-auto rounded-lg border border-purple-500"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="comparison-item"> | |
| <h4 class="text-sm font-medium mb-2">Hero.png</h4> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div> | |
| <h5 class="text-xs font-medium text-gray-500 mb-1">Original</h5> | |
| <img src="http://static.photos/people/320x240/1" alt="Original" class="w-full h-auto rounded-lg border border-gray-200"> | |
| </div> | |
| <div> | |
| <h5 class="text-xs font-medium text-gray-500 mb-1">Transformed</h5> | |
| <img src="http://static.photos/people/320x240/2" alt="Transformed" class="w-full h-auto rounded-lg border border-purple-500"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="comparison-item"> | |
| <h4 class="text-sm font-medium mb-2">Buttons.png</h4> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div> | |
| <h5 class="text-xs font-medium text-gray-500 mb-1">Original</h5> | |
| <img src="http://static.photos/technology/320x240/1" alt="Original" class="w-full h-auto rounded-lg border border-gray-200"> | |
| </div> | |
| <div> | |
| <h5 class="text-xs font-medium text-gray-500 mb-1">Transformed</h5> | |
| <img src="http://static.photos/technology/320x240/2" alt="Transformed" class="w-full h-auto rounded-lg border border-purple-500"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Chat Input --> | |
| <div class="p-4 border-t border-gray-200"> | |
| <div class="flex items-center gap-2"> | |
| <input type="text" id="style-prompt" placeholder="Describe the style you want (e.g. 'cyberpunk neon style')" | |
| class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <button id="transform-btn" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition"> | |
| Transform | |
| </button> | |
| </div> | |
| <div class="mt-2 text-xs text-gray-500"> | |
| Example prompts: "pixel art style", "watercolor painting", "dark fantasy theme" | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <custom-footer></custom-footer> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/footer.js"></script> | |
| <script src="script.js"></script> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| <script src="https://deepsite.hf.co/deepsite-badge.js"></script> | |
| </body> | |
| </html> |