Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Department Roadmap Builder</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> | |
| .timeline-item:not(:last-child)::after { | |
| content: ''; | |
| position: absolute; | |
| left: 24px; | |
| top: 32px; | |
| height: calc(100% - 32px); | |
| width: 2px; | |
| background-color: #e5e7eb; | |
| } | |
| .draggable { | |
| cursor: move; | |
| user-select: none; | |
| } | |
| .dropzone { | |
| min-height: 100px; | |
| transition: background-color 0.3s; | |
| } | |
| .dropzone.active { | |
| background-color: rgba(59, 130, 246, 0.1); | |
| border: 1px dashed #3b82f6; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <!-- Header --> | |
| <header class="mb-8"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <h1 class="text-3xl font-bold text-gray-800">AI Department Roadmap Builder</h1> | |
| <p class="text-gray-600">Strategic planning tool for AI initiatives</p> | |
| </div> | |
| <div class="flex space-x-4"> | |
| <button id="exportBtn" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center"> | |
| <i class="fas fa-file-export mr-2"></i> Export | |
| </button> | |
| <button id="printBtn" class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-lg flex items-center"> | |
| <i class="fas fa-print mr-2"></i> Print | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <div class="grid grid-cols-1 lg:grid-cols-4 gap-6"> | |
| <!-- Left Panel - Components --> | |
| <div class="lg:col-span-1 bg-white rounded-xl shadow p-6"> | |
| <h2 class="text-xl font-semibold mb-4 text-gray-800">Roadmap Components</h2> | |
| <div class="space-y-4"> | |
| <div class="component-group"> | |
| <h3 class="font-medium text-gray-700 mb-2 flex items-center"> | |
| <i class="fas fa-layer-group mr-2 text-blue-500"></i> Strategic Goals | |
| </h3> | |
| <div class="space-y-2"> | |
| <div draggable="true" class="draggable bg-blue-50 border border-blue-200 rounded-lg p-3 text-blue-800" data-type="goal"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-bullseye mr-2"></i> | |
| <span>Improve AI Model Accuracy</span> | |
| </div> | |
| </div> | |
| <div draggable="true" class="draggable bg-blue-50 border border-blue-200 rounded-lg p-3 text-blue-800" data-type="goal"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-bullseye mr-2"></i> | |
| <span>Reduce Model Bias</span> | |
| </div> | |
| </div> | |
| <div draggable="true" class="draggable bg-blue-50 border border-blue-200 rounded-lg p-3 text-blue-800" data-type="goal"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-bullseye mr-2"></i> | |
| <span>Enhance Explainability</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="component-group"> | |
| <h3 class="font-medium text-gray-700 mb-2 flex items-center"> | |
| <i class="fas fa-tasks mr-2 text-green-500"></i> Initiatives | |
| </h3> | |
| <div class="space-y-2"> | |
| <div draggable="true" class="draggable bg-green-50 border border-green-200 rounded-lg p-3 text-green-800" data-type="initiative"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-project-diagram mr-2"></i> | |
| <span>Model Optimization</span> | |
| </div> | |
| </div> | |
| <div draggable="true" class="draggable bg-green-50 border border-green-200 rounded-lg p-3 text-green-800" data-type="initiative"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-project-diagram mr-2"></i> | |
| <span>Data Pipeline Upgrade</span> | |
| </div> | |
| </div> | |
| <div draggable="true" class="draggable bg-green-50 border border-green-200 rounded-lg p-3 text-green-800" data-type="initiative"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-project-diagram mr-2"></i> | |
| <span>Ethics Framework</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="component-group"> | |
| <h3 class="font-medium text-gray-700 mb-2 flex items-center"> | |
| <i class="fas fa-calendar-check mr-2 text-purple-500"></i> Milestones | |
| </h3> | |
| <div class="space-y-2"> | |
| <div draggable="true" class="draggable bg-purple-50 border border-purple-200 rounded-lg p-3 text-purple-800" data-type="milestone"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-flag-checkered mr-2"></i> | |
| <span>Model Validation</span> | |
| </div> | |
| </div> | |
| <div draggable="true" class="draggable bg-purple-50 border border-purple-200 rounded-lg p-3 text-purple-800" data-type="milestone"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-flag-checkered mr-2"></i> | |
| <span>Deployment</span> | |
| </div> | |
| </div> | |
| <div draggable="true" class="draggable bg-purple-50 border border-purple-200 rounded-lg p-3 text-purple-800" data-type="milestone"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-flag-checkered mr-2"></i> | |
| <span>Audit Completion</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="component-group"> | |
| <h3 class="font-medium text-gray-700 mb-2 flex items-center"> | |
| <i class="fas fa-users mr-2 text-yellow-500"></i> Resources | |
| </h3> | |
| <div class="space-y-2"> | |
| <div draggable="true" class="draggable bg-yellow-50 border border-yellow-200 rounded-lg p-3 text-yellow-800" data-type="resource"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-user-tie mr-2"></i> | |
| <span>Research Team</span> | |
| </div> | |
| </div> | |
| <div draggable="true" class="draggable bg-yellow-50 border border-yellow-200 rounded-lg p-3 text-yellow-800" data-type="resource"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-server mr-2"></i> | |
| <span>GPU Cluster</span> | |
| </div> | |
| </div> | |
| <div draggable="true" class="draggable bg-yellow-50 border border-yellow-200 rounded-lg p-3 text-yellow-800" data-type="resource"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-money-bill-wave mr-2"></i> | |
| <span>Budget Allocation</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <h3 class="font-medium text-gray-700 mb-2 flex items-center"> | |
| <i class="fas fa-plus-circle mr-2 text-red-500"></i> Custom Component | |
| </h3> | |
| <div class="flex"> | |
| <input type="text" id="customComponent" placeholder="New component name" class="flex-1 border rounded-l-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <button id="addCustomBtn" class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-r-lg"> | |
| Add | |
| </button> | |
| </div> | |
| <select id="customType" class="mt-2 w-full border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <option value="goal">Strategic Goal</option> | |
| <option value="initiative">Initiative</option> | |
| <option value="milestone">Milestone</option> | |
| <option value="resource">Resource</option> | |
| </select> | |
| </div> | |
| </div> | |
| <!-- Main Roadmap Area --> | |
| <div class="lg:col-span-3"> | |
| <div class="bg-white rounded-xl shadow p-6 mb-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-xl font-semibold text-gray-800">AI Department Roadmap</h2> | |
| <div class="flex space-x-2"> | |
| <select id="timeframe" class="border rounded-lg px-3 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <option value="quarterly">Quarterly View</option> | |
| <option value="yearly">Yearly View</option> | |
| <option value="3year">3-Year Plan</option> | |
| </select> | |
| <button id="clearAllBtn" class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-3 py-1 rounded-lg text-sm"> | |
| Clear All | |
| </button> | |
| </div> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <div id="roadmapTimeline" class="min-w-full"> | |
| <!-- Timeline will be generated here --> | |
| <div class="relative"> | |
| <!-- Q1 --> | |
| <div class="timeline-item relative pb-8 pl-10"> | |
| <div class="absolute left-0 top-0 w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center text-white font-bold"> | |
| Q1 | |
| </div> | |
| <div class="dropzone p-3 rounded-lg border border-dashed border-gray-300" data-timeframe="q1"> | |
| <h3 class="font-medium text-gray-700 mb-2">Q1 2024</h3> | |
| <div class="space-y-2" id="q1-items"></div> | |
| </div> | |
| </div> | |
| <!-- Q2 --> | |
| <div class="timeline-item relative pb-8 pl-10"> | |
| <div class="absolute left-0 top-0 w-8 h-8 rounded-full bg-green-500 flex items-center justify-center text-white font-bold"> | |
| Q2 | |
| </div> | |
| <div class="dropzone p-3 rounded-lg border border-dashed border-gray-300" data-timeframe="q2"> | |
| <h3 class="font-medium text-gray-700 mb-2">Q2 2024</h3> | |
| <div class="space-y-2" id="q2-items"></div> | |
| </div> | |
| </div> | |
| <!-- Q3 --> | |
| <div class="timeline-item relative pb-8 pl-10"> | |
| <div class="absolute left-0 top-0 w-8 h-8 rounded-full bg-yellow-500 flex items-center justify-center text-white font-bold"> | |
| Q3 | |
| </div> | |
| <div class="dropzone p-3 rounded-lg border border-dashed border-gray-300" data-timeframe="q3"> | |
| <h3 class="font-medium text-gray-700 mb-2">Q3 2024</h3> | |
| <div class="space-y-2" id="q3-items"></div> | |
| </div> | |
| </div> | |
| <!-- Q4 --> | |
| <div class="timeline-item relative pb-8 pl-10"> | |
| <div class="absolute left-0 top-0 w-8 h-8 rounded-full bg-purple-500 flex items-center justify-center text-white font-bold"> | |
| Q4 | |
| </div> | |
| <div class="dropzone p-3 rounded-lg border border-dashed border-gray-300" data-timeframe="q4"> | |
| <h3 class="font-medium text-gray-700 mb-2">Q4 2024</h3> | |
| <div class="space-y-2" id="q4-items"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Roadmap Summary --> | |
| <div class="bg-white rounded-xl shadow p-6"> | |
| <h2 class="text-xl font-semibold mb-4 text-gray-800">Roadmap Summary</h2> | |
| <div id="roadmapSummary" class="space-y-4"> | |
| <div class="text-center text-gray-500 py-8"> | |
| <i class="fas fa-road text-4xl mb-2 text-gray-300"></i> | |
| <p>Your roadmap summary will appear here</p> | |
| <p class="text-sm">Drag and drop components to build your AI department roadmap</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Drag and drop functionality | |
| const draggables = document.querySelectorAll('.draggable'); | |
| const dropzones = document.querySelectorAll('.dropzone'); | |
| let draggedItem = null; | |
| // Add event listeners for draggable items | |
| draggables.forEach(item => { | |
| item.addEventListener('dragstart', function() { | |
| draggedItem = this; | |
| setTimeout(() => { | |
| this.style.opacity = '0.5'; | |
| }, 0); | |
| }); | |
| item.addEventListener('dragend', function() { | |
| this.style.opacity = '1'; | |
| }); | |
| }); | |
| // Add event listeners for drop zones | |
| dropzones.forEach(zone => { | |
| zone.addEventListener('dragover', function(e) { | |
| e.preventDefault(); | |
| this.classList.add('active'); | |
| }); | |
| zone.addEventListener('dragleave', function() { | |
| this.classList.remove('active'); | |
| }); | |
| zone.addEventListener('drop', function(e) { | |
| e.preventDefault(); | |
| this.classList.remove('active'); | |
| if (draggedItem) { | |
| const clone = draggedItem.cloneNode(true); | |
| clone.classList.add('mt-2'); | |
| // Add delete button to the cloned item | |
| const deleteBtn = document.createElement('button'); | |
| deleteBtn.innerHTML = '<i class="fas fa-times"></i>'; | |
| deleteBtn.className = 'ml-2 text-red-500 hover:text-red-700 float-right'; | |
| deleteBtn.addEventListener('click', function() { | |
| clone.remove(); | |
| updateRoadmapSummary(); | |
| }); | |
| clone.appendChild(deleteBtn); | |
| const itemsContainer = this.querySelector('div[id$="-items"]'); | |
| itemsContainer.appendChild(clone); | |
| updateRoadmapSummary(); | |
| } | |
| }); | |
| }); | |
| // Add custom component | |
| document.getElementById('addCustomBtn').addEventListener('click', function() { | |
| const componentName = document.getElementById('customComponent').value.trim(); | |
| const componentType = document.getElementById('customType').value; | |
| if (componentName) { | |
| let bgColor, borderColor, textColor, icon; | |
| switch(componentType) { | |
| case 'goal': | |
| bgColor = 'bg-blue-50'; | |
| borderColor = 'border-blue-200'; | |
| textColor = 'text-blue-800'; | |
| icon = 'fa-bullseye'; | |
| break; | |
| case 'initiative': | |
| bgColor = 'bg-green-50'; | |
| borderColor = 'border-green-200'; | |
| textColor = 'text-green-800'; | |
| icon = 'fa-project-diagram'; | |
| break; | |
| case 'milestone': | |
| bgColor = 'bg-purple-50'; | |
| borderColor = 'border-purple-200'; | |
| textColor = 'text-purple-800'; | |
| icon = 'fa-flag-checkered'; | |
| break; | |
| case 'resource': | |
| bgColor = 'bg-yellow-50'; | |
| borderColor = 'border-yellow-200'; | |
| textColor = 'text-yellow-800'; | |
| icon = 'fa-user-tie'; | |
| break; | |
| } | |
| const newComponent = document.createElement('div'); | |
| newComponent.className = `draggable ${bgColor} border ${borderColor} rounded-lg p-3 ${textColor}`; | |
| newComponent.setAttribute('draggable', 'true'); | |
| newComponent.setAttribute('data-type', componentType); | |
| newComponent.innerHTML = ` | |
| <div class="flex items-center"> | |
| <i class="fas ${icon} mr-2"></i> | |
| <span>${componentName}</span> | |
| </div> | |
| `; | |
| // Add drag events to the new component | |
| newComponent.addEventListener('dragstart', function() { | |
| draggedItem = this; | |
| setTimeout(() => { | |
| this.style.opacity = '0.5'; | |
| }, 0); | |
| }); | |
| newComponent.addEventListener('dragend', function() { | |
| this.style.opacity = '1'; | |
| }); | |
| // Add to the appropriate component group | |
| const componentGroups = document.querySelectorAll('.component-group'); | |
| componentGroups.forEach(group => { | |
| const heading = group.querySelector('h3'); | |
| if (heading.textContent.includes(componentType.replace(/([A-Z])/g, ' $1').replace(/^./, str => str.toUpperCase()))) { | |
| group.querySelector('.space-y-2').appendChild(newComponent); | |
| } | |
| }); | |
| document.getElementById('customComponent').value = ''; | |
| } | |
| }); | |
| // Update roadmap summary | |
| function updateRoadmapSummary() { | |
| const summaryContainer = document.getElementById('roadmapSummary'); | |
| summaryContainer.innerHTML = ''; | |
| const quarters = ['q1', 'q2', 'q3', 'q4']; | |
| let hasContent = false; | |
| quarters.forEach(q => { | |
| const quarterItems = document.getElementById(`${q}-items`).children; | |
| if (quarterItems.length > 0) { | |
| hasContent = true; | |
| const quarterSection = document.createElement('div'); | |
| quarterSection.className = 'bg-gray-50 rounded-lg p-4'; | |
| const quarterTitle = document.createElement('h3'); | |
| quarterTitle.className = 'font-semibold text-lg mb-2'; | |
| quarterTitle.textContent = document.querySelector(`[data-timeframe="${q}"] h3`).textContent; | |
| quarterSection.appendChild(quarterTitle); | |
| const itemsList = document.createElement('ul'); | |
| itemsList.className = 'space-y-2'; | |
| Array.from(quarterItems).forEach(item => { | |
| const listItem = document.createElement('li'); | |
| listItem.className = 'flex items-center'; | |
| const itemType = item.getAttribute('data-type'); | |
| let typeBadge; | |
| switch(itemType) { | |
| case 'goal': | |
| typeBadge = '<span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded mr-2">Goal</span>'; | |
| break; | |
| case 'initiative': | |
| typeBadge = '<span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded mr-2">Initiative</span>'; | |
| break; | |
| case 'milestone': | |
| typeBadge = '<span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded mr-2">Milestone</span>'; | |
| break; | |
| case 'resource': | |
| typeBadge = '<span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded mr-2">Resource</span>'; | |
| break; | |
| } | |
| listItem.innerHTML = ` | |
| ${typeBadge} | |
| <span>${item.querySelector('span').textContent}</span> | |
| `; | |
| itemsList.appendChild(listItem); | |
| }); | |
| quarterSection.appendChild(itemsList); | |
| summaryContainer.appendChild(quarterSection); | |
| } | |
| }); | |
| if (!hasContent) { | |
| summaryContainer.innerHTML = ` | |
| <div class="text-center text-gray-500 py-8"> | |
| <i class="fas fa-road text-4xl mb-2 text-gray-300"></i> | |
| <p>Your roadmap summary will appear here</p> | |
| <p class="text-sm">Drag and drop components to build your AI department roadmap</p> | |
| </div> | |
| `; | |
| } | |
| } | |
| // Clear all button | |
| document.getElementById('clearAllBtn').addEventListener('click', function() { | |
| if (confirm('Are you sure you want to clear all items from the roadmap?')) { | |
| const itemContainers = document.querySelectorAll('[id$="-items"]'); | |
| itemContainers.forEach(container => { | |
| container.innerHTML = ''; | |
| }); | |
| updateRoadmapSummary(); | |
| } | |
| }); | |
| // Export button | |
| document.getElementById('exportBtn').addEventListener('click', function() { | |
| alert('Export functionality would be implemented here. In a real app, this would generate a PDF or image of the roadmap.'); | |
| }); | |
| // Print button | |
| document.getElementById('printBtn').addEventListener('click', function() { | |
| window.print(); | |
| }); | |
| // Timeframe selector | |
| document.getElementById('timeframe').addEventListener('change', function() { | |
| // In a real app, this would change the view of the timeline | |
| alert(`View changed to ${this.value}. In a real app, this would adjust the timeline display.`); | |
| }); | |
| }); | |
| </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=aceeee/roadmap-builder" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |