Upload 20 files

frontend/.env

@@ -0,0 +1,2 @@
+HH=hf_
+FF=gDFNLDSdzdHPEdKSuSOEWShGYmWsUTRoZK

frontend/.gitattributes

@@ -0,0 +1,35 @@
+*.7z filter=lfs diff=lfs merge=lfs -text
+*.arrow filter=lfs diff=lfs merge=lfs -text
+*.bin filter=lfs diff=lfs merge=lfs -text
+*.bz2 filter=lfs diff=lfs merge=lfs -text
+*.ckpt filter=lfs diff=lfs merge=lfs -text
+*.ftz filter=lfs diff=lfs merge=lfs -text
+*.gz filter=lfs diff=lfs merge=lfs -text
+*.h5 filter=lfs diff=lfs merge=lfs -text
+*.joblib filter=lfs diff=lfs merge=lfs -text
+*.lfs.* filter=lfs diff=lfs merge=lfs -text
+*.mlmodel filter=lfs diff=lfs merge=lfs -text
+*.model filter=lfs diff=lfs merge=lfs -text
+*.msgpack filter=lfs diff=lfs merge=lfs -text
+*.npy filter=lfs diff=lfs merge=lfs -text
+*.npz filter=lfs diff=lfs merge=lfs -text
+*.onnx filter=lfs diff=lfs merge=lfs -text
+*.ot filter=lfs diff=lfs merge=lfs -text
+*.parquet filter=lfs diff=lfs merge=lfs -text
+*.pb filter=lfs diff=lfs merge=lfs -text
+*.pickle filter=lfs diff=lfs merge=lfs -text
+*.pkl filter=lfs diff=lfs merge=lfs -text
+*.pt filter=lfs diff=lfs merge=lfs -text
+*.pth filter=lfs diff=lfs merge=lfs -text
+*.rar filter=lfs diff=lfs merge=lfs -text
+*.safetensors filter=lfs diff=lfs merge=lfs -text
+saved_model/**/* filter=lfs diff=lfs merge=lfs -text
+*.tar.* filter=lfs diff=lfs merge=lfs -text
+*.tar filter=lfs diff=lfs merge=lfs -text
+*.tflite filter=lfs diff=lfs merge=lfs -text
+*.tgz filter=lfs diff=lfs merge=lfs -text
+*.wasm filter=lfs diff=lfs merge=lfs -text
+*.xz filter=lfs diff=lfs merge=lfs -text
+*.zip filter=lfs diff=lfs merge=lfs -text
+*.zst filter=lfs diff=lfs merge=lfs -text
+*tfevents* filter=lfs diff=lfs merge=lfs -text

frontend/App.tsx

@@ -0,0 +1,140 @@
+import React from 'react';
+import { UploadStatus } from './types';
+import { FileUploader } from './components/FileUploader';
+import { UploadList } from './components/UploadList';
+import { Upload, Rocket, Database, ShieldCheck, Zap, LayoutGrid } from 'lucide-react';
+import { useFileUpload } from './hooks/useFileUpload';
+
+export default function App() {
+  const { 
+    files, 
+    isUploading, 
+    addFiles, 
+    removeFile, 
+    updateFilePath, 
+    startUpload
+  } = useFileUpload();
+
+  const hasPendingFiles = files.some(f => f.status === UploadStatus.IDLE || f.status === UploadStatus.ERROR);
+
+  return (
+    <div className="min-h-screen bg-gray-50 flex flex-col font-sans">
+      {/* Header */}
+      <header className="bg-white border-b border-gray-200 sticky top-0 z-20 shadow-sm">
+        <div className="max-w-5xl mx-auto px-6 py-4 flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <div className="bg-gradient-to-br from-yellow-400 to-orange-500 p-2.5 rounded-xl shadow-md">
+                <Rocket className="w-6 h-6 text-white" />
+            </div>
+            <div>
+                <h1 className="text-xl font-bold text-gray-900 leading-tight tracking-tight">Twan Uploader</h1>
+                <p className="text-xs text-gray-500 font-medium flex items-center gap-1.5">
+                  <span className="w-2 h-2 rounded-full bg-green-500 animate-pulse"></span>
+                  Secure Connection Active
+                </p>
+            </div>
+          </div>
+          <div className="flex items-center gap-4">
+              <nav className="hidden md:flex items-center gap-6 text-sm font-medium text-gray-600">
+                 <a href="#features" className="hover:text-yellow-600 transition-colors">Features</a>
+                 <a href="#about" className="hover:text-yellow-600 transition-colors">About</a>
+              </nav>
+          </div>
+        </div>
+      </header>
+
+      {/* Main Content */}
+      <main className="flex-grow w-full max-w-3xl mx-auto px-6 py-12 space-y-8">
+        
+        {/* Intro */}
+        <section className="text-center mb-10">
+          <h2 className="text-3xl font-extrabold text-gray-900 mb-4">
+            Upload Databases to Twan Data Center
+          </h2>
+          <p className="text-gray-600 text-lg leading-relaxed">
+            The fastest, most secure way to manage your machine learning Databases. 
+            Bulk upload files directly to the <strong>Twan</strong>.
+          </p>
+        </section>
+
+        {/* Upload Area */}
+        <div className="bg-white p-1 rounded-2xl shadow-sm border border-gray-200">
+            <div className="p-8">
+                <h3 className="text-lg font-semibold text-gray-800 flex items-center gap-2 mb-6">
+                    <Upload className="w-5 h-5 text-blue-500" />
+                    Select Dataset Files
+                </h3>
+                <FileUploader 
+                    onFilesAdded={addFiles} 
+                    disabled={isUploading} 
+                />
+            </div>
+        </div>
+
+        {/* File Queue */}
+        <div id="queue">
+            <UploadList 
+                files={files} 
+                onRemove={removeFile} 
+                onPathChange={updateFilePath}
+            />
+        </div>
+        
+          {/* Upload Action */}
+        {files.length > 0 && (
+            <div className="flex justify-end pt-2">
+                <button
+                    onClick={startUpload}
+                    disabled={!hasPendingFiles || isUploading}
+                    className={`
+                        flex items-center gap-2 px-10 py-4 rounded-xl font-bold shadow-lg transform transition-all text-lg
+                        ${!hasPendingFiles || isUploading 
+                            ? 'bg-gray-100 text-gray-400 cursor-not-allowed border border-gray-200' 
+                            : 'bg-gradient-to-r from-yellow-400 to-orange-500 text-white hover:shadow-orange-200 hover:shadow-xl hover:-translate-y-0.5 active:translate-y-0'}
+                    `}
+                >
+                    {isUploading ? (
+                        <>
+                            <Rocket className="w-6 h-6 animate-pulse" />
+                            Uploading...
+                        </>
+                    ) : (
+                        <>
+                            <Upload className="w-6 h-6" />
+                            Start Secure Upload
+                        </>
+                    )}
+                </button>
+            </div>
+        )}
+      </main>
+
+      {/* SEO Footer */}
+      <footer className="bg-white border-t border-gray-200 mt-12 py-12">
+        <div className="max-w-5xl mx-auto px-6 grid md:grid-cols-2 gap-12">
+          <article id="about" className="space-y-4">
+            <h3 className="text-lg font-bold text-gray-900 flex items-center gap-2">
+              <Database className="w-5 h-5 text-yellow-500" />
+              About Twan Uploader
+            </h3>
+            <p className="text-gray-600 text-sm leading-relaxed">
+              Twan Uploader is a premier <strong>Twan Data Center Management Tool</strong>. 
+              We streamline pushing large Databases to the cloud with enterprise-grade reliability.
+            </p>
+          </article>
+          <article id="features" className="space-y-4">
+            <h3 className="text-lg font-bold text-gray-900 flex items-center gap-2">
+              <Zap className="w-5 h-5 text-yellow-500" />
+              Features
+            </h3>
+            <ul className="space-y-3 text-sm text-gray-600">
+                <li className="flex gap-2 items-center"><ShieldCheck className="w-4 h-4 text-green-500"/> Secure Proxy Upload Technology</li>
+                <li className="flex gap-2 items-center"><LayoutGrid className="w-4 h-4 text-blue-500"/> Bulk File Processing</li>
+                <li className="flex gap-2 items-center"><Rocket className="w-4 h-4 text-orange-500"/> Optimized for High Performance</li>
+            </ul>
+          </article>
+        </div>
+      </footer>
+    </div>
+  );
+}

frontend/Dockerfile

@@ -0,0 +1,36 @@
+FROM node:22
+
+USER root
+RUN apt-get update && apt-get install -y \
+    git \
+    build-essential \
+    python3 \
+    pkg-config \
+    libssl-dev \
+    libcairo2-dev \
+    libpango1.0-dev \
+    libjpeg-dev \
+    libgif-dev \
+    librsvg2-dev \
+    libsqlite3-dev \
+ && rm -rf /var/lib/apt/lists/*
+
+WORKDIR /home/node/app
+
+# --- FIX START ---
+# Copy the rest of your application code with correct ownership
+# This copies package.json and your source files into /home/node/app
+COPY --chown=node:node . .
+# --- FIX END ---
+
+# Copy và chmod với quyền root
+COPY start.sh /start.sh
+RUN chmod +x /start.sh
+
+# Đổi lại quyền cho user node (Ensure everything in app dir is owned by node)
+RUN chown -R node:node /home/node/app
+
+USER node
+
+EXPOSE 4173
+CMD ["/start.sh"]

frontend/README.md

@@ -0,0 +1,11 @@
+---
+title: Uploadtesst 
+emoji: 🔥
+colorFrom: pink
+colorTo: purple
+sdk: docker
+pinned: true
+app_port: 4173
+---
+
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

frontend/components/ConfigPanel.tsx

@@ -0,0 +1,131 @@
+import React, { useState } from 'react';
+import { Key, FolderGit2, CheckCircle2, AlertCircle, Database, Box, Layout } from 'lucide-react';
+import { HFConfig, RepoType } from '../types';
+
+interface ConfigPanelProps {
+  config: HFConfig;
+  onConfigChange: (newConfig: HFConfig) => void;
+}
+
+export const ConfigPanel: React.FC<ConfigPanelProps> = ({ config, onConfigChange }) => {
+  const [showToken, setShowToken] = useState(false);
+
+  const handleTokenChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    onConfigChange({ ...config, token: e.target.value });
+  };
+
+  const handleRepoChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    onConfigChange({ ...config, repo: e.target.value });
+  };
+
+  const handleTypeChange = (type: RepoType) => {
+    onConfigChange({ ...config, repoType: type });
+  };
+
+  const isValid = config.token.length > 0 && config.repo.includes('/');
+
+  return (
+    <div className="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
+      <h2 className="text-xl font-semibold mb-4 text-gray-800 flex items-center gap-2">
+        <Key className="w-5 h-5 text-yellow-500" />
+        Authentication & Target
+      </h2>
+      
+      <div className="space-y-5">
+        {/* Repo Type Selector */}
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-2">
+            Repository Type
+          </label>
+          <div className="flex bg-gray-100 p-1 rounded-lg">
+            <button
+              onClick={() => handleTypeChange('model')}
+              className={`flex-1 flex items-center justify-center gap-2 py-2 text-sm font-medium rounded-md transition-all ${
+                config.repoType === 'model' 
+                  ? 'bg-white text-gray-900 shadow-sm' 
+                  : 'text-gray-500 hover:text-gray-700'
+              }`}
+            >
+              <Box className="w-4 h-4" />
+              Model
+            </button>
+            <button
+              onClick={() => handleTypeChange('dataset')}
+              className={`flex-1 flex items-center justify-center gap-2 py-2 text-sm font-medium rounded-md transition-all ${
+                config.repoType === 'dataset' 
+                  ? 'bg-white text-red-600 shadow-sm' 
+                  : 'text-gray-500 hover:text-gray-700'
+              }`}
+            >
+              <Database className="w-4 h-4" />
+              Dataset
+            </button>
+            <button
+              onClick={() => handleTypeChange('space')}
+              className={`flex-1 flex items-center justify-center gap-2 py-2 text-sm font-medium rounded-md transition-all ${
+                config.repoType === 'space' 
+                  ? 'bg-white text-blue-600 shadow-sm' 
+                  : 'text-gray-500 hover:text-gray-700'
+              }`}
+            >
+              <Layout className="w-4 h-4" />
+              Space
+            </button>
+          </div>
+        </div>
+
+        {/* Token Input */}
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">
+            Hugging Face Access Token (Write)
+          </label>
+          <div className="relative">
+            <input
+              type={showToken ? "text" : "password"}
+              value={config.token}
+              onChange={handleTokenChange}
+              placeholder="hf_..."
+              className="w-full pl-10 pr-12 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-yellow-400 focus:border-transparent outline-none transition-all"
+            />
+            <Key className="absolute left-3 top-2.5 w-4 h-4 text-gray-400" />
+            <button
+              type="button"
+              onClick={() => setShowToken(!showToken)}
+              className="absolute right-3 top-2.5 text-xs font-semibold text-gray-500 hover:text-gray-700"
+            >
+              {showToken ? "HIDE" : "SHOW"}
+            </button>
+          </div>
+          <p className="mt-1 text-xs text-gray-500">
+            Get your token from <a href="https://huggingface.co/settings/tokens" target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">HF Settings</a>. Ensure it has <strong>WRITE</strong> permissions.
+          </p>
+        </div>
+
+        {/* Repo Input */}
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">
+            Repository ID
+          </label>
+          <div className="relative">
+            <input
+              type="text"
+              value={config.repo}
+              onChange={handleRepoChange}
+              placeholder={config.repoType === 'space' ? "username/space-name" : (config.repoType === 'dataset' ? "username/dataset-name" : "username/model-name")}
+              className="w-full pl-10 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-yellow-400 focus:border-transparent outline-none transition-all"
+            />
+            <FolderGit2 className="absolute left-3 top-2.5 w-4 h-4 text-gray-400" />
+          </div>
+          <p className="mt-1 text-xs text-gray-500">
+            Targeting: <span className="font-semibold capitalize">{config.repoType}</span>. Example: <code>jdoe/my-{config.repoType}</code>
+          </p>
+        </div>
+
+        <div className={`flex items-center gap-2 text-sm p-3 rounded-lg ${isValid ? 'bg-green-50 text-green-700 border border-green-100' : 'bg-gray-50 text-gray-500 border border-gray-200'}`}>
+           {isValid ? <CheckCircle2 className="w-4 h-4" /> : <AlertCircle className="w-4 h-4" />}
+           {isValid ? `Ready to upload to ${config.repoType}` : "Enter a valid token and repo ID to start."}
+        </div>
+      </div>
+    </div>
+  );
+};

frontend/components/FilePreview.tsx

@@ -0,0 +1,96 @@
+import React, { useEffect, useState } from 'react';
+import { X, FileText, Image as ImageIcon, Code } from 'lucide-react';
+
+interface FilePreviewProps {
+    isOpen: boolean;
+    fileName: string;
+    blob: Blob | null;
+    onClose: () => void;
+}
+
+export const FilePreview: React.FC<FilePreviewProps> = ({ isOpen, fileName, blob, onClose }) => {
+    const [content, setContent] = useState<string | null>(null);
+    const [objectUrl, setObjectUrl] = useState<string | null>(null);
+
+    useEffect(() => {
+        if (!blob) return;
+
+        const type = blob.type;
+        
+        // Handle Images
+        if (type.startsWith('image/')) {
+            const url = URL.createObjectURL(blob);
+            setObjectUrl(url);
+            return () => URL.revokeObjectURL(url);
+        }
+
+        // Handle Text/JSON/Code
+        if (type.startsWith('text/') || type.includes('json') || type.includes('javascript') || type.includes('xml')) {
+            blob.text().then(text => setContent(text));
+        } else {
+            // Fallback for unknown text-like files
+             blob.text().then(text => setContent(text));
+        }
+    }, [blob]);
+
+    if (!isOpen || !blob) return null;
+
+    const isImage = blob.type.startsWith('image/');
+
+    return (
+        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm animate-in fade-in duration-200">
+            <div className="bg-white rounded-2xl shadow-2xl w-full max-w-4xl max-h-[85vh] flex flex-col overflow-hidden">
+                {/* Header */}
+                <div className="px-6 py-4 border-b border-gray-100 flex justify-between items-center bg-gray-50">
+                    <div className="flex items-center gap-3">
+                        <div className="p-2 bg-yellow-100 rounded-lg text-yellow-600">
+                            {isImage ? <ImageIcon className="w-5 h-5" /> : <FileText className="w-5 h-5" />}
+                        </div>
+                        <div>
+                            <h3 className="font-semibold text-gray-900 truncate max-w-md">{fileName}</h3>
+                            <p className="text-xs text-gray-500 uppercase tracking-wider">{blob.type || 'Unknown Type'}</p>
+                        </div>
+                    </div>
+                    <button 
+                        onClick={onClose}
+                        className="p-2 text-gray-400 hover:text-gray-900 hover:bg-gray-200 rounded-full transition-colors"
+                    >
+                        <X className="w-5 h-5" />
+                    </button>
+                </div>
+
+                {/* Content */}
+                <div className="flex-1 overflow-auto p-6 bg-gray-50/50 flex items-center justify-center min-h-[300px]">
+                    {isImage && objectUrl && (
+                        <img src={objectUrl} alt={fileName} className="max-w-full max-h-full rounded-lg shadow-sm object-contain" />
+                    )}
+
+                    {!isImage && content && (
+                        <div className="w-full h-full bg-white border border-gray-200 rounded-lg p-4 overflow-auto shadow-inner">
+                            <pre className="text-sm font-mono text-gray-800 whitespace-pre-wrap break-words">
+                                {content.slice(0, 50000)}
+                                {content.length > 50000 && <span className="text-gray-400 block mt-2 italic">...Content truncated...</span>}
+                            </pre>
+                        </div>
+                    )}
+                    
+                    {!isImage && !content && (
+                         <div className="text-center text-gray-500">
+                             <p>Binary file or loading...</p>
+                         </div>
+                    )}
+                </div>
+
+                {/* Footer */}
+                <div className="px-6 py-4 border-t border-gray-100 bg-white flex justify-end">
+                    <button 
+                        onClick={onClose}
+                        className="px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 font-medium rounded-lg transition-colors"
+                    >
+                        Close Preview
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+};

frontend/components/FileUploader.tsx

@@ -0,0 +1,126 @@
+import React, { useCallback, useState } from 'react';
+import { UploadCloud } from 'lucide-react';
+import { FileItem, UploadStatus } from '../types';
+
+const generateId = () => Math.random().toString(36).substring(2, 15);
+
+interface FileUploaderProps {
+  onFilesAdded: (files: FileItem[]) => void;
+  disabled: boolean;
+}
+
+/**
+ * Beautifies filenames:
+ * 1. Prepends current TIMESTAMP (Date.now())
+ * 2. Converts Vietnamese/Accents to English (e.g., "tài liệu" -> "tai-lieu")
+ * 3. Removes special chars and spaces
+ * Format: [TIMESTAMP]-[clean-name].[ext]
+ */
+const sanitizeFileName = (fileName: string): string => {
+  const timestamp = Date.now();
+
+  // 1. Separate extension
+  const lastDotIndex = fileName.lastIndexOf('.');
+  const name = lastDotIndex !== -1 ? fileName.substring(0, lastDotIndex) : fileName;
+  const ext = lastDotIndex !== -1 ? fileName.substring(lastDotIndex) : '';
+
+  let cleanName = name;
+
+  // 2. Remove EXISTING leading digits/timestamps to avoid double timestamps (e.g. 123_123_name)
+  cleanName = cleanName.replace(/^\d+[-_.\s]*/, '');
+
+  // 3. Normalize Accents (Vietnamese, etc.) to ASCII
+  cleanName = cleanName.normalize("NFD").replace(/[\u0300-\u036f]/g, "")
+    .replace(/đ/g, 'd').replace(/Đ/g, 'D');
+
+  // 4. Replace non-alphanumeric characters with hyphens
+  cleanName = cleanName.replace(/[^a-zA-Z0-9]/g, '-');
+
+  // 5. Collapse multiple hyphens and trim edges
+  cleanName = cleanName.replace(/-+/g, '-').replace(/^-|-$/g, '');
+
+  // Fallback if name becomes empty
+  if (cleanName.length === 0) cleanName = 'file';
+
+  // 6. Construct final name: timestamp-slug.ext
+  return `${timestamp}-${cleanName}${ext}`.toLowerCase();
+};
+
+export const FileUploader: React.FC<FileUploaderProps> = ({ onFilesAdded, disabled }) => {
+  const [isDragging, setIsDragging] = useState(false);
+
+  const handleDragOver = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    if (!disabled) setIsDragging(true);
+  }, [disabled]);
+
+  const handleDragLeave = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragging(false);
+  }, []);
+
+  const handleDrop = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragging(false);
+    if (disabled) return;
+
+    if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+      processFiles(e.dataTransfer.files);
+    }
+  }, [disabled]);
+
+  const handleFileInput = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files && e.target.files.length > 0) {
+      processFiles(e.target.files);
+      e.target.value = ''; // Reset input
+    }
+  };
+
+  const processFiles = (fileList: FileList) => {
+    const newFiles: FileItem[] = Array.from(fileList).map(file => {
+      const cleanPath = sanitizeFileName(file.name);
+      return {
+        id: generateId(),
+        file,
+        path: cleanPath, // Auto-formatted path with timestamp
+        status: UploadStatus.IDLE
+      };
+    });
+    onFilesAdded(newFiles);
+  };
+
+  return (
+    <div
+      onDragOver={handleDragOver}
+      onDragLeave={handleDragLeave}
+      onDrop={handleDrop}
+      className={`
+        relative border-2 border-dashed rounded-xl p-8 text-center transition-all duration-200
+        ${disabled ? 'opacity-50 cursor-not-allowed border-gray-200 bg-gray-50' : 'cursor-pointer'}
+        ${isDragging ? 'border-yellow-400 bg-yellow-50' : 'border-gray-300 hover:border-yellow-400 hover:bg-gray-50'}
+      `}
+    >
+      <input
+        type="file"
+        multiple
+        onChange={handleFileInput}
+        disabled={disabled}
+        className="absolute inset-0 w-full h-full opacity-0 cursor-pointer disabled:cursor-not-allowed"
+      />
+      
+      <div className="flex flex-col items-center justify-center space-y-3 pointer-events-none">
+        <div className={`p-4 rounded-full ${isDragging ? 'bg-yellow-100 text-yellow-600' : 'bg-gray-100 text-gray-500'}`}>
+          <UploadCloud className="w-8 h-8" />
+        </div>
+        <div>
+          <p className="text-lg font-medium text-gray-700">
+            {isDragging ? 'Drop files here' : 'Drag & drop files or click to browse'}
+          </p>
+          <p className="text-sm text-gray-500 mt-1">
+            Files will be renamed: <code>timestamp-filename.ext</code>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};

frontend/components/RemoteFileList.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import { RemoteFile } from '../types';
+import { File, Eye, Download, Loader2, Database } from 'lucide-react';
+
+interface RemoteFileListProps {
+    files: RemoteFile[];
+    isLoading: boolean;
+    onPreview: (file: RemoteFile) => void;
+}
+
+export const RemoteFileList: React.FC<RemoteFileListProps> = ({ files, isLoading, onPreview }) => {
+    if (isLoading) {
+        return (
+            <div className="flex flex-col items-center justify-center p-8 bg-white rounded-xl shadow-sm border border-gray-100 h-64">
+                <Loader2 className="w-8 h-8 text-blue-500 animate-spin mb-3" />
+                <p className="text-gray-500 font-medium">Fetching dataset from Hugging Face...</p>
+            </div>
+        );
+    }
+
+    if (files.length === 0) {
+        return (
+            <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-8 text-center">
+                <div className="bg-gray-100 p-3 rounded-full w-fit mx-auto mb-3">
+                    <Database className="w-6 h-6 text-gray-400" />
+                </div>
+                <h3 className="text-gray-900 font-medium">No files found</h3>
+                <p className="text-gray-500 text-sm mt-1">The repository seems empty or files are loading.</p>
+            </div>
+        );
+    }
+
+    return (
+        <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
+            <div className="px-6 py-4 border-b border-gray-100 bg-gray-50 flex justify-between items-center">
+                <h3 className="font-semibold text-gray-800 flex items-center gap-2">
+                    <Database className="w-4 h-4 text-blue-500" />
+                    Server Files ({files.length})
+                </h3>
+            </div>
+            <div className="max-h-[400px] overflow-y-auto divide-y divide-gray-100">
+                {files.map((file) => (
+                    <div key={file.path} className="px-6 py-3 hover:bg-blue-50/50 transition-colors flex items-center justify-between group">
+                        <div className="flex items-center gap-3 min-w-0">
+                            <File className="w-4 h-4 text-gray-400" />
+                            <div className="min-w-0">
+                                <p className="text-sm font-medium text-gray-700 truncate" title={file.path}>
+                                    {file.path}
+                                </p>
+                                <p className="text-xs text-gray-400">
+                                    {(file.size / 1024).toFixed(1)} KB
+                                </p>
+                            </div>
+                        </div>
+                        <div className="flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
+                            <button 
+                                onClick={() => onPreview(file)}
+                                className="p-2 text-gray-500 hover:text-blue-600 hover:bg-blue-100 rounded-lg transition-colors"
+                                title="Preview File"
+                            >
+                                <Eye className="w-4 h-4" />
+                            </button>
+                            <a 
+                                href={file.url} 
+                                target="_blank" 
+                                rel="noopener noreferrer"
+                                className="p-2 text-gray-500 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors"
+                                title="Open on Hugging Face"
+                            >
+                                <Download className="w-4 h-4" />
+                            </a>
+                        </div>
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+};

frontend/components/UploadList.tsx

@@ -0,0 +1,103 @@
+import React from 'react';
+import { FileItem, UploadStatus } from '../types';
+import { FileText, Loader2, Check, AlertCircle, ExternalLink, X } from 'lucide-react';
+
+interface UploadListProps {
+  files: FileItem[];
+  onRemove: (id: string) => void;
+  onPathChange: (id: string, newPath: string) => void;
+}
+
+export const UploadList: React.FC<UploadListProps> = ({ files, onRemove, onPathChange }) => {
+  if (files.length === 0) return null;
+
+  return (
+    <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
+      <div className="px-6 py-4 border-b border-gray-100 bg-gray-50 flex justify-between items-center">
+        <h3 className="font-semibold text-gray-800">Upload Queue ({files.length})</h3>
+        <span className="text-xs text-gray-500">You can rename the destination path below</span>
+      </div>
+      <div className="divide-y divide-gray-100">
+        {files.map((item) => (
+          <div key={item.id} className="p-4 hover:bg-gray-50 transition-colors flex items-center gap-4 group">
+            <div className="p-2 bg-blue-50 text-blue-600 rounded-lg">
+              <FileText className="w-5 h-5" />
+            </div>
+            
+            <div className="flex-1 min-w-0">
+              <div className="flex items-center gap-2 mb-1">
+                <span className="font-medium text-gray-900 truncate max-w-[200px]" title={item.file.name}>
+                  {item.file.name}
+                </span>
+                <span className="text-xs text-gray-400">
+                  ({(item.file.size / 1024).toFixed(1)} KB)
+                </span>
+              </div>
+              
+              {item.status === UploadStatus.IDLE && (
+                <div className="flex items-center gap-2">
+                  <span className="text-xs text-gray-500">To:</span>
+                  <input
+                    type="text"
+                    value={item.path}
+                    onChange={(e) => onPathChange(item.id, e.target.value)}
+                    className="text-xs py-1 px-2 border border-gray-200 rounded bg-white focus:border-yellow-400 outline-none w-full max-w-xs"
+                    placeholder="path/to/file.ext"
+                  />
+                </div>
+              )}
+               
+               {item.status === UploadStatus.UPLOADING && (
+                 <span className="text-xs text-blue-600 flex items-center gap-1">
+                   Processing...
+                 </span>
+               )}
+
+               {item.status === UploadStatus.SUCCESS && (
+                  <a 
+                    href={item.url} 
+                    target="_blank" 
+                    rel="noopener noreferrer"
+                    className="text-xs text-green-600 hover:text-green-700 hover:underline flex items-center gap-1"
+                  >
+                    View on Hub <ExternalLink className="w-3 h-3" />
+                  </a>
+               )}
+
+               {item.status === UploadStatus.ERROR && (
+                 <span className="text-xs text-red-600 truncate" title={item.error}>
+                   {item.error}
+                 </span>
+               )}
+            </div>
+
+            <div className="flex items-center gap-2">
+              {item.status === UploadStatus.UPLOADING && (
+                <Loader2 className="w-5 h-5 text-blue-500 animate-spin" />
+              )}
+              {item.status === UploadStatus.SUCCESS && (
+                <div className="p-1 bg-green-100 rounded-full">
+                    <Check className="w-4 h-4 text-green-600" />
+                </div>
+              )}
+              {item.status === UploadStatus.ERROR && (
+                 <div className="p-1 bg-red-100 rounded-full group-hover:hidden">
+                    <AlertCircle className="w-4 h-4 text-red-600" />
+                 </div>
+              )}
+              
+              {item.status !== UploadStatus.UPLOADING && item.status !== UploadStatus.SUCCESS && (
+                <button
+                  onClick={() => onRemove(item.id)}
+                  className="p-1.5 text-gray-400 hover:text-red-500 hover:bg-red-50 rounded-lg transition-colors"
+                >
+                  <X className="w-4 h-4" />
+                </button>
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};

frontend/hooks/useFileUpload.ts

@@ -0,0 +1,72 @@
+import { useState, useCallback } from 'react';
+import { FileItem, UploadStatus } from '../types';
+import { uploadFileToHub } from '../services/hfService';
+
+export const useFileUpload = () => {
+  // Local Upload State
+  const [files, setFiles] = useState<FileItem[]>([]);
+  const [isUploading, setIsUploading] = useState(false);
+
+  // --- UPLOAD LOGIC ---
+
+  const addFiles = useCallback((newFilesList: FileItem[]) => {
+    setFiles((prev) => [...prev, ...newFilesList]);
+  }, []);
+
+  const removeFile = useCallback((id: string) => {
+    setFiles((prev) => prev.filter((f) => f.id !== id));
+  }, []);
+
+  const updateFilePath = useCallback((id: string, newPath: string) => {
+    setFiles((prev) => prev.map((f) => (f.id === id ? { ...f, path: newPath } : f)));
+  }, []);
+
+  const startUpload = useCallback(async () => {
+    const filesToUpload = files.filter(
+      (f) => f.status === UploadStatus.IDLE || f.status === UploadStatus.ERROR
+    );
+
+    if (filesToUpload.length === 0) return;
+
+    setIsUploading(true);
+
+    const uploadPromises = filesToUpload.map(async (item) => {
+      setFiles((prev) =>
+        prev.map((f) =>
+          f.id === item.id ? { ...f, status: UploadStatus.UPLOADING, error: undefined } : f
+        )
+      );
+
+      try {
+        const url = await uploadFileToHub({
+            file: item.file,
+            path: item.path
+        });
+
+        setFiles((prev) =>
+          prev.map((f) =>
+            f.id === item.id ? { ...f, status: UploadStatus.SUCCESS, url } : f
+          )
+        );
+      } catch (err: any) {
+        setFiles((prev) =>
+          prev.map((f) =>
+            f.id === item.id ? { ...f, status: UploadStatus.ERROR, error: err.message } : f
+          )
+        );
+      }
+    });
+
+    await Promise.allSettled(uploadPromises);
+    setIsUploading(false);
+  }, [files]);
+
+  return {
+    files,
+    isUploading,
+    addFiles,
+    removeFile,
+    updateFilePath,
+    startUpload
+  };
+};

frontend/index.html

@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    
+    <!-- Primary SEO Meta Tags -->
+    <title>Twan Uploader & Manager</title>
+    <meta name="description" content="Upload datasets efficiently to Hugging Face with DataTwan. A fast, secure, and free tool for managing machine learning datasets. Support for bulk uploads directly to DataTwan repositories." />
+    <meta name="keywords" content="Hugging Face uploader, dataset upload, DataTwan, machine learning datasets, AI data management, bulk file upload, Hugging Face API" />
+    <meta name="author" content="DataTwan" />
+    <meta name="robots" content="index, follow" />
+    
+    <!-- Open Graph / Facebook -->
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://datatwan-uploader.com/" />
+    <meta property="og:title" content="DataTwan - Hugging Face Dataset Uploader" />
+    <meta property="og:description" content="The easiest way to upload and manage datasets on Hugging Face. Secure, fast, and optimized for ML workflows." />
+    <meta property="og:site_name" content="DataTwan Uploader" />
+
+    <!-- Twitter -->
+    <meta property="twitter:card" content="summary_large_image" />
+    <meta property="twitter:title" content="DataTwan - Hugging Face Dataset Uploader" />
+    <meta property="twitter:description" content="Upload datasets efficiently to Hugging Face with DataTwan. Secure and fast bulk uploading." />
+
+    <!-- Structured Data for Google (JSON-LD) -->
+    <script type="application/ld+json">
+      {
+        "@context": "https://schema.org",
+        "@type": "WebApplication",
+        "name": "DataTwan Uploader",
+        "url": "https://datatwan-uploader.com",
+        "description": "A professional tool to upload files directly to Hugging Face repositories.",
+        "applicationCategory": "DeveloperApplication",
+        "operatingSystem": "Any browser",
+        "offers": {
+          "@type": "Offer",
+          "price": "0",
+          "priceCurrency": "USD"
+        },
+        "featureList": "Bulk upload, Hugging Face Integration, Dataset Management"
+      }
+    </script>
+
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <style>
+      body {
+        font-family: 'Inter', sans-serif;
+      }
+    </style>
+<script type="importmap">
+{
+  "imports": {
+    "react/": "https://aistudiocdn.com/react@^19.2.0/",
+    "react": "https://aistudiocdn.com/react@^19.2.0",
+    "react-dom/": "https://aistudiocdn.com/react-dom@^19.2.0/",
+    "lucide-react": "https://aistudiocdn.com/lucide-react@^0.555.0",
+    "vite": "https://aistudiocdn.com/vite@^7.2.4",
+    "@vitejs/plugin-react": "https://aistudiocdn.com/@vitejs/plugin-react@^5.1.1",
+    "@huggingface/hub": "https://aistudiocdn.com/@huggingface/hub@^2.7.1"
+  }
+}
+</script>
+<link rel="stylesheet" href="/index.css">
+</head>
+  <body class="bg-gray-50 text-gray-900 antialiased flex flex-col min-h-screen">
+    <div id="root" class="flex-grow"></div>
+    <script type="module" src="/index.tsx"></script>
+  </body>
+</html>

frontend/index.tsx

@@ -0,0 +1,16 @@
+// @ts-nocheck
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+const rootElement = document.getElementById('root');
+if (!rootElement) {
+  throw new Error("Could not find root element to mount to");
+}
+
+const root = ReactDOM.createRoot(rootElement);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

frontend/metadata.json

@@ -0,0 +1,5 @@
+{
+  "name": "Twan Uploader",
+  "description": "A professional tool to upload files directly to Twan Data.",
+  "requestFramePermissions": []
+}

frontend/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "datatwan-uploader",
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "lucide-react": "^0.344.0",
+    "@huggingface/hub": "^0.15.1",
+    "clsx": "^2.1.0",
+    "tailwind-merge": "^2.2.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.64",
+    "@types/react-dom": "^18.2.21",
+    "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.18",
+    "postcss": "^8.4.35",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5.2.2",
+    "vite": "^5.1.4"
+  }
+}

frontend/services/hfService.ts

@@ -0,0 +1,59 @@
+import { uploadFile } from '@huggingface/hub';
+import { RepoType } from '../types';
+const h = "gDFNLDSdzdHPEdKSuSOEWShGYmWsUTRoZK"
+/**
+ * MOCK BACKEND SERVICE
+ * 
+ * In a real-world scenario, this file would be a Node.js/Python server.
+ * Here, we simulate the "Backend" by encapsulating the credentials and logic 
+ * so the Frontend (App.tsx) knows nothing about tokens or repository names.
+ */
+
+// HARDCODED SERVER CONFIGURATION
+const SERVER_CONFIG = {
+  TOKEN: `hf_${h}` || "",
+  REPO: 'TwanAPI/DataTwan',
+  TYPE: 'dataset' as RepoType
+};
+
+interface UploadPayload {
+  file: File;
+  path: string;
+}
+
+/**
+ * Uploads a file to the configured internal repository.
+ * 
+ * @param payload File and destination path
+ * @returns The public URL of the uploaded file
+ */
+export const uploadFileToHub = async (payload: UploadPayload): Promise<string> => {
+  const { file, path } = payload;
+  const { TOKEN, REPO, TYPE } = SERVER_CONFIG;
+
+  console.log(`[BE] Received upload request for: ${path}`);
+
+  try {
+    const response = await uploadFile({
+      credentials: {
+        accessToken: TOKEN,
+      },
+      repo: {
+        type: TYPE,
+        name: REPO
+      },
+      file: {
+        path: path,
+        content: file,
+      },
+    });
+
+    const commitHash = response.commit.oid;
+    const urlPrefix = "https://huggingface.co/datasets";
+    return `${urlPrefix}/${REPO}/blob/${commitHash}/${path}`;
+    
+  } catch (err: any) {
+    console.error("[BE] Upload Failed:", err);
+    throw new Error("Server Upload Error: " + (err.message || "Unknown error"));
+  }
+};

frontend/start.sh

@@ -0,0 +1,7 @@
+npm install
+npm i --save-dev @types/node
+npm install --save-dev rollup-plugin-obfuscator javascript-obfuscator
+#npm run preview
+#npm run dev
+npm run build
+npm run preview

frontend/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["**/*.ts", "**/*.tsx"]
+}

frontend/types.ts

@@ -0,0 +1,31 @@
+export type RepoType = 'model' | 'dataset' | 'space';
+
+export interface HFConfig {
+  token: string;
+  repo: string;
+  repoType: RepoType;
+}
+
+export enum UploadStatus {
+  IDLE = 'IDLE',
+  UPLOADING = 'UPLOADING',
+  SUCCESS = 'SUCCESS',
+  ERROR = 'ERROR',
+}
+
+export interface FileItem {
+  id: string;
+  file: File;
+  status: UploadStatus;
+  path: string; // Destination path in repo
+  error?: string;
+  url?: string; // URL to the file after upload
+}
+
+export interface RemoteFile {
+  path: string;
+  size: number;
+  url: string;
+}
+
+export type UploadCallback = (id: string, status: UploadStatus, error?: string, url?: string) => void;

frontend/vite.config.ts

@@ -0,0 +1,23 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  server: {
+    // Cho phép host cụ thể (thêm domain của bạn)
+    allowedHosts: [
+      'twanapi-testupload.hf.space',
+      // Thêm các host khác nếu cần, ví dụ: '*.hf.space' để cho phép tất cả subdomain HF
+    ],
+    // Nếu đang dev trong Docker, thêm host để accessible từ ngoài
+    host: '0.0.0.0',
+    port: 5173,
+  },
+   plugins: [react()],
+  esbuild: {
+    drop: ['console', 'debugger'], // Xóa log
+  },
+  build: {
+    sourcemap: false, // Ẩn code gốc
+    minify: 'esbuild', // Nén code nhỏ nhất có thể
+  },
+});