File size: 6,452 Bytes
00c76ab 5ea2408 00c76ab 5ea2408 00c76ab 5ea2408 00c76ab 5ea2408 00c76ab 5ea2408 00c76ab | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HuggingSpace Asset Manager</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: {
500: '#6366F1',
600: '#4F46E5'
},
secondary: {
500: '#8B5CF6',
600: '#7C3AED'
}
}
}
}
}
</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-50 min-h-screen">
<custom-navbar></custom-navbar>
<div class="container mx-auto px-4 py-8">
<div class="flex justify-between items-center mb-8">
<div>
<h1 class="text-3xl font-bold text-gray-800">Asset Manager</h1>
<p class="text-gray-600">Manage your Hugging Face Space assets</p>
</div>
<div id="userInfo"></div>
<button id="uploadBtn" class="bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-lg flex items-center transition-colors">
<i data-feather="upload" class="mr-2"></i> Upload Files
</button>
</div>
<div class="bg-white rounded-xl shadow-md overflow-hidden">
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Preview</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">URL</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
</tr>
</thead>
<tbody id="assetsTable" class="bg-white divide-y divide-gray-200">
<!-- Table rows will be populated by JavaScript -->
</tbody>
</table>
</div>
</div>
<div class="mt-8 bg-white rounded-xl shadow-md p-6">
<h2 class="text-xl font-bold text-gray-800 mb-4">Export Data</h2>
<div class="flex flex-col md:flex-row md:items-center gap-4">
<button id="exportBtn" class="bg-secondary-500 hover:bg-secondary-600 text-white px-4 py-2 rounded-lg flex items-center transition-colors">
<i data-feather="download" class="mr-2"></i> Export as JSON
</button>
<div class="flex-1">
<textarea id="jsonData" class="w-full h-32 p-3 border border-gray-300 rounded-lg font-mono text-sm" readonly></textarea>
</div>
</div>
</div>
</div>
<!-- Auth Modal -->
<div id="authModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
<div class="bg-white rounded-lg p-6 w-full max-w-md">
<div class="flex justify-between items-center mb-4">
<h3 class="text-lg font-bold">Hugging Face Authentication</h3>
</div>
<div class="mb-4">
<label class="block text-gray-700 text-sm font-bold mb-2" for="tokenInput">
Hugging Face Token
</label>
<input type="password" id="tokenInput" class="w-full p-2 border border-gray-300 rounded-lg"
placeholder="Enter your Hugging Face token">
<p class="text-xs text-gray-500 mt-1">
Get your token from <a href="https://huggingface.co/settings/tokens" target="_blank" class="text-primary-500">Settings → Access Tokens</a>
</p>
</div>
<div class="mb-4">
<label class="block text-gray-700 text-sm font-bold mb-2" for="spaceInput">
Space Name
</label>
<input type="text" id="spaceInput" class="w-full p-2 border border-gray-300 rounded-lg"
placeholder="Enter your space name (e.g., username/space)">
</div>
<p id="authError" class="text-red-500 text-sm mb-4"></p>
<button id="authSubmit" class="bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-lg w-full transition-colors">
Connect
</button>
</div>
</div>
<!-- Upload Modal -->
<div id="uploadModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
<div class="bg-white rounded-lg p-6 w-full max-w-md">
<div class="flex justify-between items-center mb-4">
<h3 class="text-lg font-bold">Upload Files</h3>
<button id="closeModal" class="text-gray-500 hover:text-gray-700">
<i data-feather="x"></i>
</button>
</div>
<div class="mb-4">
<label class="block text-gray-700 text-sm font-bold mb-2" for="fileInput">
Select files to upload
</label>
<input type="file" id="fileInput" multiple class="w-full p-2 border border-gray-300 rounded-lg">
</div>
<button id="confirmUpload" class="bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-lg w-full transition-colors">
Upload
</button>
</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>
</body>
</html> |