Upload 15 files

dashboardlogic.js

@@ -1,5 +1,5 @@
 
-import { Client } from "https://cdn.jsdelivr.net/npm/@gradio/client@1.9.0/dist/index.min.js";
+// import { Client } from "https://cdn.jsdelivr.net/npm/@gradio/client@1.9.0/dist/index.min.js";
 
 // Read/write tokens from sessionStorage
 function getReadToken() {
@@ -9,7 +9,7 @@ function getWriteToken() {
     return sessionStorage.getItem('hf_write_token') || '';
 }
 
-// Helper to add tokens to every API call
+// Helper to add tokens to every API call (kept for compatibility, but not used for server tokens)
 function withTokens(obj = {}) {
     return {
         ...obj,
@@ -18,6 +18,17 @@ function withTokens(obj = {}) {
     };
 }
 
+// Helper to call secure server-side proxy
+async function callSecureApi(fn, args) {
+    const resp = await fetch('/api/proxy', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ fn, args })
+    });
+    if (!resp.ok) throw new Error('Proxy error: ' + resp.status);
+    return await resp.json();
+}
+
 let client;
 let currentUser = null;
 let currentPassword = null;
@@ -53,18 +64,13 @@ async function initDashboard() {
     }
     
     try {
-        client = await Client.connect("pockit-cloud/main");
-        console.log('✓ Connected to API');
-        
         // Update account info
         const initials = currentUser.substring(0, 2).toUpperCase();
         document.querySelector('.avatar').textContent = initials;
         document.querySelector('.account-name').textContent = currentUser;
-        
         // Load data
         await loadUserData();
         await loadFiles();
-        
     } catch (err) {
         console.error('Init error:', err);
         showToast('Connection failed');
@@ -76,38 +82,29 @@ async function initDashboard() {
 async function loadUserData() {
     try {
         console.log('Loading user data...');
-        const result = await client.predict("/search_user", withTokens({ user_id: currentUser }));
+        const result = await callSecureApi("/search_user", withTokens({ user_id: currentUser }));
         const [log, isDev, isPro, isTester, capacityUsed, usedTotal] = result.data;
-        
-        // Determine role
+        // ...existing code...
         let role = 'free';
         if (isDev) role = 'dev';
         else if (isPro) role = 'pro';
         else if (isTester) role = 'tester';
-        
         const tag = document.getElementById('role-tag');
         tag.className = 'role-tag ' + role;
         tag.textContent = role.charAt(0).toUpperCase() + role.slice(1);
         document.getElementById('tier-val').textContent = tag.textContent;
-        
-        // Parse capacity
         const capacityPercent = Math.round(capacityUsed);
         let usedDisplay = usedTotal || '0 / 5 GB';
         let usedParts = usedDisplay.split('/');
         let usedAmount = usedParts[0].trim();
         let maxAmount = usedParts[1] ? usedParts[1].trim() : '5 GB';
-        
-        // Update storage displays
         document.querySelector('.card-bar-fill').style.width = capacityPercent + '%';
         document.querySelector('.stor-label span:last-child').textContent = usedDisplay;
         document.querySelector('.sbar-fill').style.width = capacityPercent + '%';
-        
         const storageCard = document.querySelectorAll('.card')[0];
-        storageCard.querySelector('.card-val').innerHTML = usedAmount + ' <span style="font-size:.38em;font-weight:400;color:rgba(0,0,0,.38)">(' + capacityPercent + '%)</span>';
+        storageCard.querySelector('.card-val').innerHTML = usedAmount + ' <span style="font-size:.38em;font-weight:400;color:rgba(0,0,0,.38)">( ' + capacityPercent + '%)</span>';
         storageCard.querySelector('.card-sub').textContent = usedDisplay + ' used';
-        
         document.querySelectorAll('.card')[3].querySelector('.card-sub').textContent = maxAmount + ' max capacity';
-        
         console.log('✓ User data loaded');
     } catch (err) {
         console.error('User data error:', err);
@@ -123,26 +120,21 @@ async function loadFiles() {
     try {
         console.log('Loading files...');
         loading(true);
-        const result = await client.predict("/get_files_secure", withTokens({
+        const result = await callSecureApi("/get_files_secure", withTokens({
             user_id: currentUser,
             password: currentPassword,
         }));
         // API returns [dropdown, status]
         const dropdownData = result.data[0];
-        console.log('Raw dropdownData:', dropdownData);
         let fileNames = [];
         if (dropdownData && typeof dropdownData === 'object' && dropdownData.choices) {
-            // Flatten all sub-arrays in choices
             fileNames = dropdownData.choices.flat ? dropdownData.choices.flat() : [].concat(...dropdownData.choices);
         } else if (Array.isArray(dropdownData)) {
             fileNames = dropdownData;
         } else if (typeof dropdownData === 'string') {
             fileNames = [dropdownData];
         }
-        // Convert all to string, trim, and filter empty
         fileNames = fileNames.map(f => String(f).trim()).filter(Boolean);
-        console.log('Extracted fileNames from dropdown:', fileNames);
-        // Deduplicate file names (case-insensitive, trim)
         const seen = new Set();
         const deduped = [];
         for (const name of fileNames) {
@@ -160,15 +152,13 @@ async function loadFiles() {
                 size: '—',
                 date: 'Recently',
                 type: ext ? ext.toUpperCase() : '',
-                preview: null // for preview content
+                preview: null
             };
         });
-        console.log('Final files array before render:', files);
         selected.clear();
         updateStatsCards();
         render(files);
         loading(false);
-        console.log('✓ Files loaded and rendered');
     } catch (err) {
         console.error('Files load error:', err);
         loading(false);
@@ -354,25 +344,18 @@ async function deleteFile(id) {
     
     try {
         loading(true);
-        const result = await client.predict("/delete_file_secure", withTokens({
+        const result = await callSecureApi("/delete_file_secure", withTokens({
             user_id: currentUser,
             password: currentPassword,
             filename: file.name,
         }));
-        
-        console.log('Deleted:', file.name);
-        
-        // Update storage
         const [status, capacityUsed, usedTotal] = result.data;
         const percent = Math.round(capacityUsed);
         document.querySelector('.card-bar-fill').style.width = percent + '%';
         document.querySelector('.sbar-fill').style.width = percent + '%';
         document.querySelector('.stor-label span:last-child').textContent = usedTotal;
-        
-        // Remove from array
         files.splice(id, 1);
         selected.delete(id);
-        
         updateStatsCards();
         render(files);
         loading(false);
@@ -412,43 +395,17 @@ async function downloadFile(id) {
     const file = files[id];
     try {
         loading(true);
-        // Use /get_download_link_action to get the raw download link
-        const result = await client.predict("/get_download_link_action", withTokens({
-            user_id: currentUser,
-            password: currentPassword,
-            filename: file.name,
-        }));
-        const fileUrl = result.data[0];
-        if (typeof fileUrl === 'string' && (fileUrl.startsWith('http') || fileUrl.startsWith('https'))) {
-            // Fetch as blob to force download, with optional Hugging Face token
-            const hfToken = sessionStorage.getItem('hf_read_token');
-            const fetchOptions = hfToken ? {
-                headers: { 'Authorization': 'Bearer ' + hfToken }
-            } : {};
-            const response = await fetch(fileUrl, fetchOptions);
-            if (!response.ok) {
-                console.error('Download fetch error:', {
-                    url: fileUrl,
-                    status: response.status,
-                    statusText: response.statusText
-                });
-                throw new Error('Network response was not ok (status ' + response.status + '): ' + response.statusText);
-            }
-            const blob = await response.blob();
-            const url = window.URL.createObjectURL(blob);
-            const a = document.createElement('a');
-            a.href = url;
-            a.download = file.name;
-            document.body.appendChild(a);
-            a.click();
-            setTimeout(() => {
-                document.body.removeChild(a);
-                window.URL.revokeObjectURL(url);
-            }, 100);
-            showToast('Download started: ' + file.name);
-        } else {
-            showToast('Download link error');
-        }
+        // Use /api/download endpoint to stream file securely
+        const url = `/api/download?file=${encodeURIComponent(file.name)}`;
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = file.name;
+        document.body.appendChild(a);
+        a.click();
+        setTimeout(() => {
+            document.body.removeChild(a);
+        }, 100);
+        showToast('Download started: ' + file.name);
         loading(false);
     } catch (err) {
         console.error('Download error:', err);
@@ -469,32 +426,7 @@ async function downloadPreviewFile() {
 async function handleUpload(input) {
     if (!input.files || !input.files[0]) return;
     const file = input.files[0];
-    try {
-        loading(true);
-        // Use File object and pass custom_name for filename preservation
-        console.log('Uploading file:', file, 'type:', file.constructor.name);
-        const result = await client.predict("/upload_file_secure", withTokens({
-            user_id: currentUser,
-            password: currentPassword,
-            filepath: file,
-            custom_name: file.name,
-        }));
-        console.log('Uploaded:', file.name);
-        // Update storage
-        const [status, capacityUsed, usedTotal] = result.data;
-        const percent = Math.round(capacityUsed);
-        document.querySelector('.card-bar-fill').style.width = percent + '%';
-        document.querySelector('.sbar-fill').style.width = percent + '%';
-        document.querySelector('.stor-label span:last-child').textContent = usedTotal;
-        // Reload files
-        await loadFiles();
-        showToast(file.name + ' uploaded');
-        input.value = '';
-    } catch (err) {
-        console.error('Upload error:', err);
-        loading(false);
-        showToast('Upload failed');
-    }
+    alert('Upload via proxy not yet implemented.');
 }
 
 function handleDrop(e) {

logic.js

@@ -1,5 +1,5 @@
 
-import { Client } from "https://cdn.jsdelivr.net/npm/@gradio/client@1.9.0/dist/index.min.js";
+// import { Client } from "https://cdn.jsdelivr.net/npm/@gradio/client@1.9.0/dist/index.min.js";
 
 // Read/write tokens from sessionStorage
 function getReadToken() {
@@ -18,6 +18,17 @@ function withTokens(obj = {}) {
     };
 }
 
+// Helper to call secure server-side proxy
+async function callSecureApi(fn, args) {
+    const resp = await fetch('/api/proxy', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ fn, args })
+    });
+    if (!resp.ok) throw new Error('Proxy error: ' + resp.status);
+    return await resp.json();
+}
+
 const loginForm = document.getElementById('loginForm');
 const signupForm = document.getElementById('signupForm');
 
@@ -62,15 +73,12 @@ if (signupForm) {
         const pass = document.getElementById('password').value;
 
         try {
-            const client = await Client.connect("pockit-cloud/main");
-            const result = await client.predict("/create_user", withTokens({
+            const result = await callSecureApi("/create_user", withTokens({
                 user_id: user,
                 password: pass,
             }));
-
             // Debug: log the result
             console.log("/create_user result:", result.data);
-
             let log = "";
             if (typeof result.data === "string") {
                 log = result.data.toLowerCase();
@@ -79,7 +87,6 @@ if (signupForm) {
             } else if (typeof result.data === "object" && result.data !== null) {
                 log = JSON.stringify(result.data).toLowerCase();
             }
-
             if (log.includes("success") || log.includes("user created")) {
                 sessionStorage.setItem("pockit_user", user);
                 sessionStorage.setItem("pockit_pass", pass);
@@ -105,15 +112,12 @@ if (loginForm) {
         const pass = document.getElementById('password').value;
 
         try {
-            const client = await Client.connect("pockit-cloud/main");
-            const result = await client.predict("/get_files_secure", withTokens({
+            const result = await callSecureApi("/get_files_secure", withTokens({
                 user_id: user,
                 password: pass,
             }));
-
             // Status message is at index 1 for get_files_secure
-            const status = result.data[1].toLowerCase();
-
+            const status = result.data[1]?.toLowerCase?.() || "";
             if (status.includes("found") || status.includes("success")) {
                 sessionStorage.setItem("pockit_user", user);
                 sessionStorage.setItem("pockit_pass", pass);

package.json

@@ -2,7 +2,7 @@
   "name": "hf-web",
   "version": "1.0.0",
   "dependencies": {
-    "@gradio/client": "^1.0.0",
+    "@gradio/client": "^1.9.0",
     "express": "^4.18.2"
   }
 }

server.js

@@ -1,10 +1,64 @@
-const express = require("express");
-const path = require("path");
+// server.js
+import express from "express";
+import { Client } from "@gradio/client";
+import dotenv from "dotenv";
+import fetch from "node-fetch";
+
+// Load environment variables (HF_TOKEN)
+dotenv.config();
 
 const app = express();
+const PORT = process.env.PORT || 7860;
+const HF_TOKEN = process.env.HF_TOKEN;
+
+if (!HF_TOKEN) {
+  console.error("HF_TOKEN is not set in environment variables!");
+  process.exit(1);
+}
+
+app.use(express.json({ limit: "10mb" }));
+
+// Secure proxy endpoint for Gradio API
+app.post("/api/proxy", async (req, res) => {
+  const { fn, args } = req.body;
+  if (!fn) return res.status(400).json({ error: "Missing 'fn' in request body" });
+
+  try {
+    const client = await Client.connect("pockit-cloud/main", { hf_token: HF_TOKEN });
+    const result = await client.predict(fn, args);
+    res.json({ data: result.data });
+  } catch (err) {
+    console.error("Proxy error:", err);
+    res.status(500).json({ error: "Proxy call failed", details: err.message });
+  }
+});
+
+// Download endpoint for Hugging Face Datasets
+app.get("/api/download", async (req, res) => {
+  const { file } = req.query;
+  if (!file) return res.status(400).json({ error: "Missing 'file' query param" });
+
+  // Example: file = "username/dataset/blob/main/path/to/file.txt"
+  const url = `https://huggingface.co/datasets/${file}`;
+  try {
+    const response = await fetch(url, {
+      headers: { Authorization: `Bearer ${HF_TOKEN}` },
+    });
+    if (!response.ok) {
+      return res.status(response.status).json({ error: "File fetch failed" });
+    }
+    res.setHeader("Content-Disposition", `attachment; filename=\"${file.split("/").pop()}\"`);
+    res.setHeader("Content-Type", response.headers.get("content-type") || "application/octet-stream");
+    response.body.pipe(res);
+  } catch (err) {
+    console.error("Download error:", err);
+    res.status(500).json({ error: "Download failed", details: err.message });
+  }
+});
 
-app.use(express.static(__dirname));
+// Serve static files (frontend)
+app.use(express.static("."));
 
-app.listen(7860, () => {
-  console.log("Server running on port 7860");
-});
+app.listen(PORT, () => {
+  console.log(`Server running on port ${PORT}`);
+});