Spaces:

doeqoth
/

Imageopl

Running

App Files Files Community

doeqoth commited on Jan 23

Commit

5ea2408

verified ·

1 Parent(s): 00c76ab

ปรับให้ใช้งานได้จริงยืนยันตัวตนด้วยการใส่ API หรือถ้าเป็นตัวผมเองไม่ต้องยืนยันตัวตนปรับใช้กับฐานข้อมูลจริงเลยนะโดยให้มีการยืนยันตัวตนการเข้าถึงข้อมูลในครั้งแรกก็ได้แล้วก็สามารถแก้ไขข้อมูลในตารางได้ด้วยหัวข้อต่างๆต้องทำให้มันสามารถเปลี่ยนได้

Browse files

Files changed (4) hide show

components/footer.js +72 -0
index.html +34 -5
script.js +229 -82
style.css +10 -1

components/footer.js ADDED Viewed

	@@ -0,0 +1,72 @@

+class CustomFooter extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          width: 100%;
+          margin-top: auto;
+        }
+        footer {
+          background-color: #f8fafc;
+          padding: 1.5rem 0;
+          border-top: 1px solid #e2e8f0;
+        }
+        .footer-container {
+          max-width: 1200px;
+          margin: 0 auto;
+          padding: 0 1rem;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }
+        .footer-links {
+          display: flex;
+          gap: 1rem;
+        }
+        .footer-links a {
+          color: #64748b;
+          text-decoration: none;
+          font-size: 0.875rem;
+        }
+        .footer-links a:hover {
+          color: #6366f1;
+        }
+        .copyright {
+          color: #64748b;
+          font-size: 0.875rem;
+        }
+        @media (max-width: 768px) {
+          .footer-container {
+            flex-direction: column;
+            gap: 1rem;
+            text-align: center;
+          }
+        }
+      </style>
+      <footer>
+        <div class="footer-container">
+          <div class="copyright">
+            &copy; ${new Date().getFullYear()} HuggingSpace Asset Manager
+          </div>
+          <div class="footer-links">
+            <a href="https://huggingface.co/docs" target="_blank">Documentation</a>
+            <a href="https://huggingface.co/support" target="_blank">Support</a>
+            <a href="https://huggingface.co/privacy" target="_blank">Privacy</a>
+          </div>
+        </div>
+      </footer>
+    `;
+  }
+}
+customElements.define('custom-footer', CustomFooter);

index.html CHANGED Viewed

@@ -29,14 +29,14 @@
 </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>
@@ -72,9 +72,38 @@
             </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>
@@ -93,10 +122,10 @@
             </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>

 </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>
         </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>
         </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>

script.js CHANGED Viewed

@@ -1,65 +1,150 @@
-// 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() {
@@ -70,16 +155,14 @@ class AssetManager {
     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'),
@@ -89,38 +172,110 @@ class HuggingSpaceApp {
       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 `
@@ -207,8 +362,7 @@ class HuggingSpaceApp {
       this.elements.fileInput.value = '';
     }
   }
-  handleFileUpload() {
     const files = this.elements.fileInput.files;
     if (files.length === 0) {
@@ -216,19 +370,17 @@ class HuggingSpaceApp {
       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();
@@ -243,11 +395,6 @@ class HuggingSpaceApp {
   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

+// Real Hugging Face API integration
 class AssetManager {
   constructor() {
+    this.assets = [];
+    this.currentId = 0;
+    this.token = null;
+    this.spaceName = null;
+    this.username = null;
   }
+  async authenticate(token) {
+    this.token = token;
+    try {
+      const response = await fetch('https://huggingface.co/api/whoami-v2', {
+        headers: {
+          'Authorization': `Bearer ${token}`
+        }
+      });
+      const userData = await response.json();
+      this.username = userData.name;
+      return true;
+    } catch (error) {
+      console.error('Authentication failed:', error);
+      return false;
+    }
   }
+  async loadAssets(spaceName) {
+    this.spaceName = spaceName;
+    try {
+      const response = await fetch(`https://huggingface.co/api/spaces/${this.username}/${spaceName}/files`, {
+        headers: {
+          'Authorization': `Bearer ${this.token}`
+        }
+      });
+      const files = await response.json();
+      this.assets = files.map(file => ({
+        id: ++this.currentId,
+        name: file.path.split('/').pop(),
+        type: this.getFileType(file.path),
+        url: `https://huggingface.co/spaces/${this.username}/${spaceName}/resolve/main/${file.path}`,
+        preview: this.getPreviewUrl(file.path),
+        path: file.path,
+        lastModified: file.lastModified
+      }));
+      return this.assets;
+    } catch (error) {
+      console.error('Failed to load assets:', error);
+      return [];
+    }
   }
+  getFileType(filename) {
+    const extension = filename.split('.').pop().toLowerCase();
+    const types = {
+      'jpg': 'image/jpeg',
+      'jpeg': 'image/jpeg',
+      'png': 'image/png',
+      'gif': 'image/gif',
+      'pdf': 'application/pdf',
+      'txt': 'text/plain',
+      'csv': 'text/csv',
+      'json': 'application/json'
     };
+    return types[extension] || 'application/octet-stream';
   }
+  getPreviewUrl(filename) {
+    const extension = filename.split('.').pop().toLowerCase();
+    if (['jpg', 'jpeg', 'png', 'gif'].includes(extension)) {
+      return `https://huggingface.co/spaces/${this.username}/${this.spaceName}/preview/${filename}`;
+    }
+    return `http://static.photos/office/320x240/${Math.floor(Math.random() * 100)}`;
+  }
+  async addAsset(file) {
+    const formData = new FormData();
+    formData.append('file', file);
+    try {
+      const response = await fetch(`https://huggingface.co/api/spaces/${this.username}/${this.spaceName}/upload`, {
+        method: 'POST',
+        headers: {
+          'Authorization': `Bearer ${this.token}`
+        },
+        body: formData
+      });
+      if (response.ok) {
+        const newAsset = {
+          id: ++this.currentId,
+          name: file.name,
+          type: file.type || this.getFileType(file.name),
+          url: `https://huggingface.co/spaces/${this.username}/${this.spaceName}/resolve/main/${file.name}`,
+          preview: this.getPreviewUrl(file.name),
+          path: file.name,
+          lastModified: new Date().toISOString()
+        };
+        this.assets.push(newAsset);
+        return newAsset;
+      }
+      return null;
+    } catch (error) {
+      console.error('Failed to upload file:', error);
+      return null;
+    }
+  }
+  async updateAsset(id, updates) {
+    const asset = this.assets.find(a => a.id === id);
+    if (!asset) return null;
+    // For Hugging Face, updating means deleting and re-uploading
+    if (updates.file) {
+      await this.deleteAsset(id);
+      return await this.addAsset(updates.file);
+    } else {
+      // For metadata updates
+      const index = this.assets.findIndex(a => a.id === id);
+      this.assets[index] = { ...asset, ...updates };
       return this.assets[index];
     }
   }
+  async deleteAsset(id) {
+    const asset = this.assets.find(a => a.id === id);
+    if (!asset) return false;
+    try {
+      const response = await fetch(`https://huggingface.co/api/spaces/${this.username}/${this.spaceName}/delete/${asset.path}`, {
+        method: 'DELETE',
+        headers: {
+          'Authorization': `Bearer ${this.token}`
+        }
+      });
+      if (response.ok) {
+        this.assets = this.assets.filter(a => a.id !== id);
+        return true;
+      }
+      return false;
+    } catch (error) {
+      console.error('Failed to delete file:', error);
+      return false;
+    }
   }
   getAssets() {
     return JSON.stringify(this.assets, null, 2);
   }
 }
+// Main application with authentication
 class HuggingSpaceApp {
   constructor() {
     this.assetManager = new AssetManager();
     this.initElements();
     this.initEventListeners();
+    this.checkAuth();
+}
   initElements() {
     this.elements = {
       assetsTable: document.getElementById('assetsTable'),
       fileInput: document.getElementById('fileInput'),
       confirmUpload: document.getElementById('confirmUpload'),
       exportBtn: document.getElementById('exportBtn'),
+      jsonData: document.getElementById('jsonData'),
+      authModal: document.getElementById('authModal'),
+      tokenInput: document.getElementById('tokenInput'),
+      spaceInput: document.getElementById('spaceInput'),
+      authSubmit: document.getElementById('authSubmit'),
+      authError: document.getElementById('authError'),
+      userInfo: document.getElementById('userInfo')
     };
+}
   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());
+    this.elements.authSubmit.addEventListener('click', () => this.handleAuth());
+}
+  async checkAuth() {
+    const token = localStorage.getItem('hfToken');
+    const space = localStorage.getItem('hfSpace');
+    if (token && space) {
+      const authenticated = await this.assetManager.authenticate(token);
+      if (authenticated) {
+        await this.assetManager.loadAssets(space);
+        this.render();
+        this.elements.authModal.classList.add('hidden');
+        this.updateUserInfo();
+        return;
+      }
+    }
+    this.elements.authModal.classList.remove('hidden');
   }
+  async handleAuth() {
+    const token = this.elements.tokenInput.value.trim();
+    const space = this.elements.spaceInput.value.trim();
+    if (!token || !space) {
+      this.elements.authError.textContent = 'Please enter both token and space name';
+      return;
+    }
+    const authenticated = await this.assetManager.authenticate(token);
+    if (!authenticated) {
+      this.elements.authError.textContent = 'Invalid token. Please check and try again.';
+      return;
+    }
+    try {
+      await this.assetManager.loadAssets(space);
+      localStorage.setItem('hfToken', token);
+      localStorage.setItem('hfSpace', space);
+      this.elements.authModal.classList.add('hidden');
+      this.render();
+      this.updateUserInfo();
+    } catch (error) {
+      this.elements.authError.textContent = 'Failed to load space. Please check space name and try again.';
+    }
   }
+  updateUserInfo() {
+    if (this.assetManager.username && this.assetManager.spaceName) {
+      this.elements.userInfo.innerHTML = `
+        <div class="flex items-center gap-2">
+          <span class="font-medium">${this.assetManager.username}</span>
+          <span class="text-gray-500">/</span>
+          <span class="font-medium">${this.assetManager.spaceName}</span>
+        </div>
+      `;
+    }
+  }
+  async render() {
+    await this.renderAssetsTable();
+    this.updateJsonPreview();
+}
+  async renderAssetsTable() {
     const { assetsTable } = this.elements;
     assetsTable.innerHTML = '';
+    const assets = this.assetManager.getAssets();
+    if (assets.length === 0) {
+      assetsTable.innerHTML = `
+        <tr>
+          <td colspan="5" class="px-6 py-4 text-center text-gray-500">
+            No assets found. Upload files to get started.
+          </td>
+        </tr>
+      `;
+      return;
+    }
+    assets.forEach(asset => {
       const row = document.createElement('tr');
       row.className = 'hover:bg-gray-50';
       row.innerHTML = this.createAssetRowHTML(asset);
       assetsTable.appendChild(row);
       this.addRowEventListeners(row, asset.id);
     });
     feather.replace();
+}
   createAssetRowHTML(asset) {
     return `
       this.elements.fileInput.value = '';
     }
   }
+  async handleFileUpload() {
     const files = this.elements.fileInput.files;
     if (files.length === 0) {
       return;
     }
+    try {
+      for (const file of files) {
+        await this.assetManager.addAsset(file);
+      }
+      await this.render();
+      this.toggleModal(false);
+    } catch (error) {
+      alert('Failed to upload files. Please try again.');
+      console.error(error);
+    }
+}
   exportData() {
     const dataStr = this.assetManager.exportAsJSON();
   updateJsonPreview() {
     this.elements.jsonData.value = this.assetManager.exportAsJSON();
   }
 }
 // Initialize the application when DOM is loaded

style.css CHANGED Viewed

@@ -27,7 +27,6 @@ body {
   object-fit: cover;
   border-radius: 0.25rem;
 }
 .url-cell {
   max-width: 200px;
   overflow: hidden;
@@ -35,6 +34,16 @@ body {
   white-space: nowrap;
 }
 .editable-cell {
   cursor: pointer;
   transition: background-color 0.2s;

   object-fit: cover;
   border-radius: 0.25rem;
 }
 .url-cell {
   max-width: 200px;
   overflow: hidden;
   white-space: nowrap;
 }
+#authModal input {
+  margin-bottom: 0.5rem;
+}
+#userInfo {
+  background-color: rgba(99, 102, 241, 0.1);
+  padding: 0.5rem 1rem;
+  border-radius: 0.5rem;
+  font-size: 0.875rem;
+}
 .editable-cell {
   cursor: pointer;
   transition: background-color 0.2s;