Spaces:

doeqoth
/

Imageopl

Running

App Files Files Community

doeqoth commited on Jan 23

Commit

00c76ab

verified ·

1 Parent(s): 4d5e265

<!DOCTYPE html>

Browse files

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HuggingSpace Dashboard</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-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">HuggingSpace Dashboard</h1>
<p class="text-gray-600">Manage your Hugging Face Space assets with ease</p>
</div>
<button id="uploadBtn" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg flex items-center">
<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">

</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 items-center">
<button id="exportBtn" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg flex items-center mr-4">
<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>


<div id="uploadModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden">
<div class="bg-white rounded-lg p-6 w-96">
<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-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg w-full">
Upload
</button>
</div>
</div>

<script src="components/navbar.js"></script>
<script src="script.js"></script>
<script>feather.replace();</script>
</body>
</html>// Sample initial data
let assetsData = [
{
id: 1,
name: "nature-image.jpg",
type: "image/jpeg",
url: "https://huggingface.co/spaces/username/space/resolve/main/nature-image.jpg",
preview: "http://static.photos/nature/320x240/1"
},
{
id: 2,
name: "logo.png",
type: "image/png",
url: "https://huggingface.co/spaces/username/space/resolve/main/logo.png",
preview: "http://static.photos/abstract/320x240/2"
},
{
id: 3,
name: "document.pdf",
type: "application/pdf",
url: "https://huggingface.co/spaces/username/space/resolve/main/document.pdf",
preview: "http://static.photos/office/320x240/3"
}
];

// DOM Elements
const assetsTable = document.getElementById('assetsTable');
const uploadBtn = document.getElementById('uploadBtn');
const uploadModal = document.getElementById('uploadModal');
const closeModal = document.getElementById('closeModal');
const fileInput = document.getElementById('fileInput');
const confirmUpload = document.getElementById('confirmUpload');
const exportBtn = document.getElementById('exportBtn');
const jsonData = document.getElementById('jsonData');

// Initialize the dashboard
document.addEventListener('DOMContentLoaded', () => {
renderAssetsTable();
updateJsonData();
});

// Render assets table
function renderAssetsTable() {
assetsTable.innerHTML = '';

assetsData.forEach(asset => {
const row = document.createElement('tr');
row.className = 'hover:bg-gray-50';

row.innerHTML = `
<td class="px-6 py-4 whitespace-nowrap">
<img src="${asset.preview}" alt="${asset.name}" class="file-preview">
</td>
<td class="px-6 py-4 whitespace-nowrap editable-cell" data-id="${asset.id}" data-field="name">${asset.name}</td>
<td class="px-6 py-4 whitespace-nowrap">${asset.type}</td>
<td class="px-6 py-4 whitespace-nowrap url-cell">${asset.url}</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium table-actions">
<button class="text-indigo-600 hover:text-indigo-900" data-action="copy" data-url="${asset.url}">
<i data-feather="copy"></i>
</button>
<button class="text-red-600 hover:text-red-900" data-action="delete" data-id="${asset.id}">
<i data-feather="trash-2"></i>
</button>
</td>
`;

assetsTable.appendChild(row);
});

// Reinitialize feather icons
feather.replace();

// Add event listeners for editable cells
document.querySelectorAll('.editable-cell').forEach(cell => {
cell.addEventListener('dblclick', makeEditable);
});

// Add event listeners for action buttons
document.querySelectorAll('[data-action="copy"]').forEach(button => {
button.addEventListener('click', copyUrl);
});

document.querySelectorAll('[data-action="delete"]').forEach(button => {
button.addEventListener('click', deleteAsset);
});
}

// Make cell editable
function makeEditable(e) {
const cell = e.target;
const originalValue = cell.textContent;
const id = cell.dataset.id;
const field = cell.dataset.field;

cell.innerHTML = `<input type="text" value="${originalValue}" class="w-full p-1 border border-gray-300 rounded">`;
const input = cell.querySelector('input');
input.focus();

input.addEventListener('blur', () => {
const newValue = input.value;
cell.textContent = newValue;

// Update data
const asset = assetsData.find(a => a.id == id);
if (asset) {
asset[field] = newValue;
updateJsonData();
}
});

input.addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
input.blur();
}
});
}

// Copy URL to clipboard
function copyUrl(e) {
const url = e.target.closest('button').dataset.url;
navigator.clipboard.writeText(url).then(() => {
// Show feedback
const originalHTML = e.target.closest('button').innerHTML;
e.target.closest('button').innerHTML = '<i data-feather="check"></i>';
feather.replace();

setTimeout(() => {
e.target.closest('button').innerHTML = originalHTML;
feather.replace();
}, 2000);
});
}

// Delete asset
function deleteAsset(e) {
const id = e.target.closest('button').dataset.id;
assetsData = assetsData.filter(asset => asset.id != id);
renderAssetsTable();
updateJsonData();
}

// Upload files
uploadBtn.addEventListener('click', () => {
uploadModal.classList.remove('hidden');
});

closeModal.addEventListener('click', () => {
uploadModal.classList.add('hidden');
fileInput.value = '';
});

confirmUpload.addEventListener('click', () => {
const files = fileInput.files;

if (files.length === 0) {
alert('Please select files to upload');
return;
}

// Simulate file upload and generate new assets
for (let i = 0; i < files.length; i++) {
const file = files[i];
const newAsset = {
id: assetsData.length + 1,
name: file.name,
type: file.type || 'unknown',
url: `https://huggingface.co/spaces/username/space/resolve/main/${file.name}`,
preview: `http://static.photos/${getRandomCategory()}/320x240/${assetsData.length + 1}`
};

assetsData.push(newAsset);
}

renderAssetsTable();
updateJsonData();

// Close modal and reset
uploadModal.classList.add('hidden');
fileInput.value = '';
});

// Export as JSON
exportBtn.addEventListener('click', () => {
const dataStr = JSON.stringify(assetsData, null, 2);
const dataUri = 'data:application/json;charset=utf-8,'+ encodeURIComponent(dataStr);

const exportFileDefaultName = 'huggingspace-data.json';

const linkElement = document.c

Files changed (5) hide show

README.md +8 -5
components/navbar.js +136 -0
index.html +102 -19
script.js +256 -0
style.css +67 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Huggingspace Asset Manager
-emoji: 👁
-colorFrom: pink
-colorTo: pink
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: HuggingSpace Asset Manager 🚀
+colorFrom: purple
+colorTo: purple
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/navbar.js ADDED Viewed

	@@ -0,0 +1,136 @@

+class CustomNavbar extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          width: 100%;
+        }
+        .navbar {
+          background: linear-gradient(135deg, var(--primary-500) 0%, var(--secondary-500) 100%);
+          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+          color: white;
+        }
+        .nav-container {
+          max-width: 1200px;
+          margin: 0 auto;
+          padding: 0 1rem;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          height: 64px;
+        }
+        .logo {
+          display: flex;
+          align-items: center;
+          font-weight: 700;
+          font-size: 1.25rem;
+          text-decoration: none;
+          color: white;
+        }
+        .logo svg {
+          margin-right: 0.5rem;
+        }
+        .nav-links {
+          display: flex;
+          list-style: none;
+          gap: 1.5rem;
+        }
+        .nav-links a {
+          color: rgba(255, 255, 255, 0.9);
+          text-decoration: none;
+          font-weight: 500;
+          transition: color 0.3s ease;
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+        }
+        .nav-links a:hover {
+          color: white;
+        }
+        .user-menu {
+          display: flex;
+          align-items: center;
+          gap: 0.75rem;
+        }
+        .user-avatar {
+          width: 32px;
+          height: 32px;
+          border-radius: 50%;
+          background-color: rgba(255, 255, 255, 0.2);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        @media (max-width: 768px) {
+          .nav-links {
+            display: none;
+          }
+          .nav-container {
+            padding: 0 1rem;
+          }
+        }
+      </style>
+      <nav class="navbar">
+        <div class="nav-container">
+          <a href="#" class="logo">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
+              <polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline>
+              <line x1="12" y1="22.08" x2="12" y2="12"></line>
+            </svg>
+            <span>HuggingSpace</span>
+          </a>
+          <ul class="nav-links">
+            <li><a href="#">
+              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
+                <polyline points="9 22 9 12 15 12 15 22"></polyline>
+              </svg>
+              Dashboard
+            </a></li>
+            <li><a href="#">
+              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 2h5a2 2 0 0 1 2 2z"></path>
+              </svg>
+              Spaces
+            </a></li>
+            <li><a href="#">
+              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <circle cx="12" cy="12" r="3"></circle>
+                <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
+              </svg>
+              Settings
+            </a></li>
+          </ul>
+          <div class="user-menu">
+            <div class="user-avatar">
+              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
+                <circle cx="12" cy="7" r="4"></circle>
+              </svg>
+            </div>
+            <span>User</span>
+          </div>
+        </div>
+      </nav>
+    `;
+  }
+}
+customElements.define('custom-navbar', CustomNavbar);

index.html CHANGED Viewed

@@ -1,19 +1,102 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!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>
+            <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>
+    <!-- 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>
+    <script src="components/navbar.js"></script>
+    <script src="script.js"></script>
+    <script>feather.replace();</script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,256 @@

+// Enhanced asset management with more flexibility
+class AssetManager {
+  constructor() {
+    this.assets = this.loadAssets() || [
+      {
+        id: 1,
+        name: "nature-image.jpg",
+        type: "image/jpeg",
+        url: "https://huggingface.co/spaces/username/space/resolve/main/nature-image.jpg",
+        preview: "http://static.photos/nature/320x240/1"
+      },
+      {
+        id: 2,
+        name: "logo.png",
+        type: "image/png",
+        url: "https://huggingface.co/spaces/username/space/resolve/main/logo.png",
+        preview: "http://static.photos/abstract/320x240/2"
+      },
+      {
+        id: 3,
+        name: "document.pdf",
+        type: "application/pdf",
+        url: "https://huggingface.co/spaces/username/space/resolve/main/document.pdf",
+        preview: "http://static.photos/office/320x240/3"
+      }
+    ];
+    this.currentId = this.assets.length > 0 ? Math.max(...this.assets.map(a => a.id)) : 0;
+  }
+  loadAssets() {
+    const saved = localStorage.getItem('huggingSpaceAssets');
+    return saved ? JSON.parse(saved) : null;
+  }
+  saveAssets() {
+    localStorage.setItem('huggingSpaceAssets', JSON.stringify(this.assets));
+  }
+  addAsset(asset) {
+    this.currentId++;
+    const newAsset = {
+      id: this.currentId,
+      ...asset
+    };
+    this.assets.push(newAsset);
+    this.saveAssets();
+    return newAsset;
+  }
+  updateAsset(id, updates) {
+    const index = this.assets.findIndex(a => a.id === id);
+    if (index !== -1) {
+      this.assets[index] = { ...this.assets[index], ...updates };
+      this.saveAssets();
+      return this.assets[index];
+    }
+    return null;
+  }
+  deleteAsset(id) {
+    this.assets = this.assets.filter(a => a.id !== id);
+    this.saveAssets();
+  }
+  getAssets() {
+    return [...this.assets];
+  }
+  exportAsJSON() {
+    return JSON.stringify(this.assets, null, 2);
+  }
+}
+// Main application
+class HuggingSpaceApp {
+  constructor() {
+    this.assetManager = new AssetManager();
+    this.initElements();
+    this.initEventListeners();
+    this.render();
+  }
+  initElements() {
+    this.elements = {
+      assetsTable: document.getElementById('assetsTable'),
+      uploadBtn: document.getElementById('uploadBtn'),
+      uploadModal: document.getElementById('uploadModal'),
+      closeModal: document.getElementById('closeModal'),
+      fileInput: document.getElementById('fileInput'),
+      confirmUpload: document.getElementById('confirmUpload'),
+      exportBtn: document.getElementById('exportBtn'),
+      jsonData: document.getElementById('jsonData')
+    };
+  }
+  initEventListeners() {
+    this.elements.uploadBtn.addEventListener('click', () => this.toggleModal(true));
+    this.elements.closeModal.addEventListener('click', () => this.toggleModal(false));
+    this.elements.confirmUpload.addEventListener('click', () => this.handleFileUpload());
+    this.elements.exportBtn.addEventListener('click', () => this.exportData());
+  }
+  render() {
+    this.renderAssetsTable();
+    this.updateJsonPreview();
+  }
+  renderAssetsTable() {
+    const { assetsTable } = this.elements;
+    assetsTable.innerHTML = '';
+    this.assetManager.getAssets().forEach(asset => {
+      const row = document.createElement('tr');
+      row.className = 'hover:bg-gray-50';
+      row.innerHTML = this.createAssetRowHTML(asset);
+      assetsTable.appendChild(row);
+      // Add event listeners for this row
+      this.addRowEventListeners(row, asset.id);
+    });
+    feather.replace();
+  }
+  createAssetRowHTML(asset) {
+    return `
+      <td class="px-6 py-4 whitespace-nowrap">
+        <img src="${asset.preview}" alt="${asset.name}" class="file-preview">
+      </td>
+      <td class="px-6 py-4 whitespace-nowrap editable-cell" data-id="${asset.id}" data-field="name">${asset.name}</td>
+      <td class="px-6 py-4 whitespace-nowrap editable-cell" data-id="${asset.id}" data-field="type">${asset.type}</td>
+      <td class="px-6 py-4 whitespace-nowrap url-cell editable-cell" data-id="${asset.id}" data-field="url">${asset.url}</td>
+      <td class="px-6 py-4 whitespace-nowrap text-sm font-medium table-actions">
+        <button class="text-primary-500 hover:text-primary-600" data-action="copy" data-url="${asset.url}">
+          <i data-feather="copy"></i>
+        </button>
+        <button class="text-red-500 hover:text-red-600" data-action="delete" data-id="${asset.id}">
+          <i data-feather="trash-2"></i>
+        </button>
+      </td>
+    `;
+  }
+  addRowEventListeners(row, assetId) {
+    // Editable cells
+    row.querySelectorAll('.editable-cell').forEach(cell => {
+      cell.addEventListener('dblclick', () => this.makeCellEditable(cell));
+    });
+    // Action buttons
+    row.querySelector('[data-action="copy"]')?.addEventListener('click', (e) => this.copyUrl(e));
+    row.querySelector('[data-action="delete"]')?.addEventListener('click', (e) => this.deleteAsset(e));
+  }
+  makeCellEditable(cell) {
+    const originalValue = cell.textContent;
+    const id = parseInt(cell.dataset.id);
+    const field = cell.dataset.field;
+    cell.innerHTML = `<input type="text" value="${originalValue}" class="w-full p-1 border border-gray-300 rounded">`;
+    const input = cell.querySelector('input');
+    input.focus();
+    const handleBlur = () => {
+      const newValue = input.value;
+      cell.textContent = newValue;
+      this.assetManager.updateAsset(id, { [field]: newValue });
+      this.updateJsonPreview();
+      // Re-add event listeners
+      cell.addEventListener('dblclick', () => this.makeCellEditable(cell));
+    };
+    input.addEventListener('blur', handleBlur);
+    input.addEventListener('keypress', (e) => {
+      if (e.key === 'Enter') {
+        handleBlur();
+      }
+    });
+  }
+  copyUrl(e) {
+    const url = e.target.closest('button').dataset.url;
+    navigator.clipboard.writeText(url).then(() => {
+      const originalHTML = e.target.closest('button').innerHTML;
+      e.target.closest('button').innerHTML = '<i data-feather="check"></i>';
+      feather.replace();
+      setTimeout(() => {
+        e.target.closest('button').innerHTML = originalHTML;
+        feather.replace();
+      }, 2000);
+    });
+  }
+  deleteAsset(e) {
+    const id = parseInt(e.target.closest('button').dataset.id);
+    if (confirm('Are you sure you want to delete this asset?')) {
+      this.assetManager.deleteAsset(id);
+      this.render();
+    }
+  }
+  toggleModal(show) {
+    this.elements.uploadModal.classList.toggle('hidden', !show);
+    if (!show) {
+      this.elements.fileInput.value = '';
+    }
+  }
+  handleFileUpload() {
+    const files = this.elements.fileInput.files;
+    if (files.length === 0) {
+      alert('Please select files to upload');
+      return;
+    }
+    Array.from(files).forEach(file => {
+      const newAsset = {
+        name: file.name,
+        type: file.type || 'unknown',
+        url: `https://huggingface.co/spaces/username/space/resolve/main/${file.name}`,
+        preview: `http://static.photos/${this.getRandomCategory()}/320x240/${this.assetManager.currentId + 1}`
+      };
+      this.assetManager.addAsset(newAsset);
+    });
+    this.render();
+    this.toggleModal(false);
+  }
+  exportData() {
+    const dataStr = this.assetManager.exportAsJSON();
+    const dataUri = 'data:application/json;charset=utf-8,'+ encodeURIComponent(dataStr);
+    const linkElement = document.createElement('a');
+    linkElement.setAttribute('href', dataUri);
+    linkElement.setAttribute('download', 'hugging-space-assets.json');
+    linkElement.click();
+  }
+  updateJsonPreview() {
+    this.elements.jsonData.value = this.assetManager.exportAsJSON();
+  }
+  getRandomCategory() {
+    const categories = ['nature', 'office', 'people', 'technology', 'abstract'];
+    return categories[Math.floor(Math.random() * categories.length)];
+  }
+}
+// Initialize the application when DOM is loaded
+document.addEventListener('DOMContentLoaded', () => {
+  new HuggingSpaceApp();
+});

style.css CHANGED Viewed

@@ -1,28 +1,77 @@
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+:root {
+  --primary-500: #6366F1;
+  --primary-600: #4F46E5;
+  --secondary-500: #8B5CF6;
+  --secondary-600: #7C3AED;
+  --dark-color: #1E293B;
+  --light-color: #F8FAFC;
+}
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: 'Inter', sans-serif;
+}
 body {
+  background-color: var(--light-color);
+  color: var(--dark-color);
+}
+.file-preview {
+  max-width: 100px;
+  max-height: 100px;
+  object-fit: cover;
+  border-radius: 0.25rem;
+}
+.url-cell {
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
+.editable-cell {
+  cursor: pointer;
+  transition: background-color 0.2s;
 }
+.editable-cell:hover {
+  background-color: rgba(99, 102, 241, 0.1);
 }
+.editable-cell input {
+  width: 100%;
+  padding: 0.25rem 0.5rem;
+  border: 1px solid #E2E8F0;
+  border-radius: 0.25rem;
+  outline: none;
 }
+.table-actions button {
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+  margin-right: 0.5rem;
+  transition: background-color 0.2s;
 }
+.table-actions button:hover {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .container {
+    padding: 1rem;
+  }
+  table {
+    display: block;
+    overflow-x: auto;
+    white-space: nowrap;
+  }
+}