|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Dataset Repository Explorer</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"> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
primary: '#3b82f6', |
|
|
secondary: '#1e40af', |
|
|
accent: '#60a5fa', |
|
|
dark: '#0f172a', |
|
|
light: '#f8fafc' |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<style> |
|
|
.file-tree { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.file-item:hover { |
|
|
background-color: rgba(59, 130, 246, 0.1); |
|
|
} |
|
|
.collapsible-content { |
|
|
max-height: 0; |
|
|
overflow: hidden; |
|
|
transition: max-height 0.3s ease-out; |
|
|
} |
|
|
.collapsible-content.active { |
|
|
max-height: 500px; |
|
|
} |
|
|
.file-icon { |
|
|
transition: transform 0.2s ease; |
|
|
} |
|
|
.file-icon.rotate { |
|
|
transform: rotate(90deg); |
|
|
} |
|
|
.stats-card { |
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease; |
|
|
} |
|
|
.stats-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
.pulse { |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
@keyframes pulse { |
|
|
0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4); } |
|
|
70% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); } |
|
|
100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gradient-to-br from-gray-50 to-gray-100 min-h-screen"> |
|
|
<div class="container mx-auto px-4 py-8"> |
|
|
|
|
|
<header class="mb-10 text-center"> |
|
|
<h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-3">Dataset Repository Explorer</h1> |
|
|
<p class="text-gray-600 max-w-2xl mx-auto">Browse and explore your dataset repository structure with detailed file information</p> |
|
|
</header> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-10"> |
|
|
<div class="stats-card bg-white rounded-xl p-6 shadow-md border border-gray-100"> |
|
|
<div class="flex items-center"> |
|
|
<div class="p-3 rounded-lg bg-blue-100 text-blue-600 mr-4"> |
|
|
<i class="fas fa-folder fa-lg"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-gray-500 text-sm">Folders</p> |
|
|
<p class="text-2xl font-bold">1</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="stats-card bg-white rounded-xl p-6 shadow-md border border-gray-100"> |
|
|
<div class="flex items-center"> |
|
|
<div class="p-3 rounded-lg bg-green-100 text-green-600 mr-4"> |
|
|
<i class="fas fa-file-csv fa-lg"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-gray-500 text-sm">CSV Files</p> |
|
|
<p class="text-2xl font-bold">3</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="stats-card bg-white rounded-xl p-6 shadow-md border border-gray-100"> |
|
|
<div class="flex items-center"> |
|
|
<div class="p-3 rounded-lg bg-purple-100 text-purple-600 mr-4"> |
|
|
<i class="fas fa-database fa-lg"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-gray-500 text-sm">Total Size</p> |
|
|
<p class="text-2xl font-bold">12.4 MB</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="stats-card bg-white rounded-xl p-6 shadow-md border border-gray-100"> |
|
|
<div class="flex items-center"> |
|
|
<div class="p-3 rounded-lg bg-amber-100 text-amber-600 mr-4"> |
|
|
<i class="fas fa-code-branch fa-lg"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-gray-500 text-sm">Last Updated</p> |
|
|
<p class="text-2xl font-bold">2 days ago</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex flex-col lg:flex-row gap-8"> |
|
|
|
|
|
<div class="lg:w-1/3"> |
|
|
<div class="bg-white rounded-2xl shadow-lg overflow-hidden"> |
|
|
<div class="bg-gradient-to-r from-primary to-secondary p-5"> |
|
|
<h2 class="text-xl font-bold text-white flex items-center"> |
|
|
<i class="fas fa-folder-tree mr-2"></i> Repository Structure |
|
|
</h2> |
|
|
</div> |
|
|
|
|
|
<div class="p-5"> |
|
|
<div class="file-tree"> |
|
|
|
|
|
<div class="file-item mb-2"> |
|
|
<div class="flex items-center cursor-pointer" onclick="toggleFolder(this)"> |
|
|
<i class="fas fa-folder text-yellow-500 mr-2 file-icon"></i> |
|
|
<span class="font-medium">my_dataset_repository</span> |
|
|
<span class="ml-auto text-gray-500 text-sm">4 items</span> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="collapsible-content pl-6 mt-2"> |
|
|
|
|
|
<div class="file-item flex items-center py-2 px-3 rounded-lg"> |
|
|
<i class="fas fa-file-alt text-blue-500 mr-2"></i> |
|
|
<span>README.md</span> |
|
|
<span class="ml-auto text-gray-500 text-sm">2.4 KB</span> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="file-item flex items-center py-2 px-3 rounded-lg"> |
|
|
<i class="fas fa-file-csv text-green-500 mr-2"></i> |
|
|
<span>train.csv</span> |
|
|
<span class="ml-auto text-gray-500 text-sm">8.2 MB</span> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="file-item flex items-center py-2 px-3 rounded-lg"> |
|
|
<i class="fas fa-file-csv text-green-500 mr-2"></i> |
|
|
<span>test.csv</span> |
|
|
<span class="ml-auto text-gray-500 text-sm">2.1 MB</span> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="file-item flex items-center py-2 px-3 rounded-lg"> |
|
|
<i class="fas fa-file-csv text-green-500 mr-2"></i> |
|
|
<span>validation.csv</span> |
|
|
<span class="ml-auto text-gray-500 text-sm">1.7 MB</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6 pt-4 border-t border-gray-200"> |
|
|
<h3 class="font-bold text-gray-700 mb-3">Quick Actions</h3> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<button class="flex items-center bg-blue-100 hover:bg-blue-200 text-blue-700 px-3 py-2 rounded-lg text-sm transition"> |
|
|
<i class="fas fa-download mr-1"></i> Download All |
|
|
</button> |
|
|
<button class="flex items-center bg-green-100 hover:bg-green-200 text-green-700 px-3 py-2 rounded-lg text-sm transition"> |
|
|
<i class="fas fa-sync-alt mr-1"></i> Refresh |
|
|
</button> |
|
|
<button class="flex items-center bg-purple-100 hover:bg-purple-200 text-purple-700 px-3 py-2 rounded-lg text-sm transition"> |
|
|
<i class="fas fa-code-branch mr-1"></i> Clone |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="lg:w-2/3"> |
|
|
<div class="bg-white rounded-2xl shadow-lg overflow-hidden mb-8"> |
|
|
<div class="bg-gradient-to-r from-primary to-secondary p-5"> |
|
|
<h2 class="text-xl font-bold text-white flex items-center"> |
|
|
<i class="fas fa-info-circle mr-2"></i> File Details |
|
|
</h2> |
|
|
</div> |
|
|
|
|
|
<div class="p-5"> |
|
|
<div class="flex items-start mb-6"> |
|
|
<div class="p-4 bg-blue-100 rounded-xl mr-4"> |
|
|
<i class="fas fa-file-csv text-3xl text-blue-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-2xl font-bold text-gray-800">train.csv</h3> |
|
|
<p class="text-gray-600">Training dataset for machine learning model</p> |
|
|
<div class="flex flex-wrap gap-2 mt-2"> |
|
|
<span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">CSV</span> |
|
|
<span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Training Data</span> |
|
|
<span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded">8.2 MB</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mb-6"> |
|
|
<img id="BiOTOKEN1365800000587THAi" src="https://placehold.co/600x400?text=Dataset+Visualization" alt="Example Element" class="w-full rounded-xl shadow-md"> |
|
|
<p class="text-center text-gray-600 mt-2 text-sm">Dataset Visualization</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> |
|
|
<div class="bg-gray-50 p-4 rounded-xl"> |
|
|
<h4 class="font-bold text-gray-700 mb-2">Dataset Overview</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li class="flex justify-between"> |
|
|
<span class="text-gray-600">Rows:</span> |
|
|
<span class="font-medium">42,840</span> |
|
|
</li> |
|
|
<li class="flex justify-between"> |
|
|
<span class="text-gray-600">Columns:</span> |
|
|
<span class="font-medium">18</span> |
|
|
</li> |
|
|
<li class="flex justify-between"> |
|
|
<span class="text-gray-600">Missing Values:</span> |
|
|
<span class="font-medium">0.2%</span> |
|
|
</li> |
|
|
<li class="flex justify-between"> |
|
|
<span class="text-gray-600">Last Modified:</span> |
|
|
<span class="font-medium">2023-07-15</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-50 p-4 rounded-xl"> |
|
|
<h4 class="font-bold text-gray-700 mb-2">Column Types</h4> |
|
|
<div class="space-y-2"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-3 h-3 bg-blue-500 rounded-full mr-2"></div> |
|
|
<span class="text-gray-600">Numerical:</span> |
|
|
<span class="ml-auto font-medium">12</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-3 h-3 bg-green-500 rounded-full mr-2"></div> |
|
|
<span class="text-gray-600">Categorical:</span> |
|
|
<span class="ml-auto font-medium">5</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-3 h-3 bg-amber-500 rounded-full mr-2"></div> |
|
|
<span class="text-gray-600">Text:</span> |
|
|
<span class="ml-auto font-medium">1</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="border-t border-gray-200 pt-4"> |
|
|
<h4 class="font-bold text-gray-700 mb-3">Preview (First 5 rows)</h4> |
|
|
<div class="overflow-x-auto"> |
|
|
<table class="min-w-full bg-white rounded-lg overflow-hidden"> |
|
|
<thead class="bg-gray-100"> |
|
|
<tr> |
|
|
<th class="py-2 px-4 text-left text-gray-600 font-medium">ID</th> |
|
|
<th class="py-2 px-4 text-left text-gray-600 font-medium">Feature 1</th> |
|
|
<th class="py-2 px-4 text-left text-gray-600 font-medium">Feature 2</th> |
|
|
<th class="py-2 px-4 text-left text-gray-600 font-medium">Target</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody> |
|
|
<tr class="border-b border-gray-100"> |
|
|
<td class="py-2 px-4">1</td> |
|
|
<td class="py-2 px-4">0.84</td> |
|
|
<td class="py-2 px-4">Category A</td> |
|
|
<td class="py-2 px-4">1</td> |
|
|
</tr> |
|
|
<tr class="border-b border-gray-100"> |
|
|
<td class="py-2 px-4">2</td> |
|
|
<td class="py-2 px-4">0.67</td> |
|
|
<td class="py-2 px-4">Category B</td> |
|
|
<td class="py-2 px-4">0</td> |
|
|
</tr> |
|
|
<tr class="border-b border-gray-100"> |
|
|
<td class="py-2 px-4">3</td> |
|
|
<td class="py-2 px-4">0.92</td> |
|
|
<td class="py-2 px-4">Category A</td> |
|
|
<td class="py-2 px-4">1</td> |
|
|
</tr> |
|
|
<tr class="border-b border-gray-100"> |
|
|
<td class="py-2 px-4">4</td> |
|
|
<td class="py-2 px-4">0.45</td> |
|
|
<td class="py-2 px-4">Category C</td> |
|
|
<td class="py-2 px-4">0</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="py-2 px-4">5</td> |
|
|
<td class="py-2 px-4">0.78</td> |
|
|
<td class="py-2 px-4">Category B</td> |
|
|
<td class="py-2 px-4">1</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-2xl shadow-lg overflow-hidden"> |
|
|
<div class="bg-gradient-to-r from-primary to-secondary p-5"> |
|
|
<h2 class="text-xl font-bold text-white flex items-center"> |
|
|
<i class="fas fa-history mr-2"></i> Recent Activity |
|
|
</h2> |
|
|
</div> |
|
|
|
|
|
<div class="p-5"> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex items-start"> |
|
|
<div class="p-2 bg-green-100 rounded-full mr-3"> |
|
|
<i class="fas fa-plus text-green-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="font-medium">New file added</p> |
|
|
<p class="text-gray-600 text-sm">validation.csv was added to the repository</p> |
|
|
<p class="text-gray-400 text-xs mt-1">2 days ago</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="p-2 bg-blue-100 rounded-full mr-3"> |
|
|
<i class="fas fa-edit text-blue-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="font-medium">File updated</p> |
|
|
<p class="text-gray-600 text-sm">train.csv was modified with additional data</p> |
|
|
<p class="text-gray-400 text-xs mt-1">5 days ago</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="p-2 bg-purple-100 rounded-full mr-3"> |
|
|
<i class="fas fa-file-alt text-purple-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="font-medium">Documentation updated</p> |
|
|
<p class="text-gray-600 text-sm">README.md was updated with new information</p> |
|
|
<p class="text-gray-400 text-xs mt-1">1 week ago</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-2xl shadow-lg overflow-hidden mt-8"> |
|
|
<div class="bg-gradient-to-r from-primary to-secondary p-5"> |
|
|
<h2 class="text-xl font-bold text-white flex items-center"> |
|
|
<i class="fas fa-clipboard-check mr-2"></i> Data Quality Report |
|
|
</h2> |
|
|
</div> |
|
|
|
|
|
<div class="p-5"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6"> |
|
|
<div class="bg-blue-50 p-5 rounded-xl border border-blue-100"> |
|
|
<div class="flex items-center"> |
|
|
<div class="p-3 bg-blue-100 rounded-lg mr-4"> |
|
|
<i class="fas fa-exchange-alt text-blue-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-gray-600">Overlapping Rows</p> |
|
|
<p class="text-2xl font-bold">0</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-500 text-sm mt-3">Rows present in both train and test sets</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-green-50 p-5 rounded-xl border border-green-100"> |
|
|
<div class="flex items-center"> |
|
|
<div class="p-3 bg-green-100 rounded-lg mr-4"> |
|
|
<i class="fas fa-layer-group text-green-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-gray-600">Total Unique Rows</p> |
|
|
<p class="text-2xl font-bold">85,680</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-500 text-sm mt-3">Combined unique rows from both datasets</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-amber-50 p-5 rounded-xl border border-amber-100"> |
|
|
<div class="flex items-center"> |
|
|
<div class="p-3 bg-amber-100 rounded-lg mr-4"> |
|
|
<i class="fas fa-percentage text-amber-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-gray-600">Overlap Percentage</p> |
|
|
<p class="text-2xl font-bold">0%</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-500 text-sm mt-3">Percentage of overlapping rows</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-50 p-5 rounded-xl"> |
|
|
<h3 class="font-bold text-gray-700 mb-3">Analysis Summary</h3> |
|
|
<div class="flex items-start"> |
|
|
<div class="p-2 bg-green-100 rounded-full mr-3 mt-1"> |
|
|
<i class="fas fa-check-circle text-green-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="font-medium text-gray-800">No Data Leakage Detected</p> |
|
|
<p class="text-gray-600 text-sm">There are no overlapping rows between training and test datasets, indicating proper data partitioning.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start mt-4"> |
|
|
<div class="p-2 bg-blue-100 rounded-full mr-3 mt-1"> |
|
|
<i class="fas fa-info-circle text-blue-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="font-medium text-gray-800">Recommendation</p> |
|
|
<p class="text-gray-600 text-sm">The dataset partitioning follows best practices. Proceed with confidence in your model evaluation process.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<footer class="mt-12 text-center text-gray-600 text-sm"> |
|
|
<p>Dataset Repository Explorer © 2023 | Created with Tailwind CSS</p> |
|
|
</footer> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
function toggleFolder(element) { |
|
|
const icon = element.querySelector('.file-icon'); |
|
|
const content = element.nextElementSibling; |
|
|
|
|
|
icon.classList.toggle('rotate'); |
|
|
content.classList.toggle('active'); |
|
|
} |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
const folder = document.querySelector('.file-item > .flex'); |
|
|
if (folder) { |
|
|
toggleFolder(folder); |
|
|
} |
|
|
}); |
|
|
</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=APAOLO/googleedgeai-onmicrosoft-com" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
