Upload 5 files

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>
+  );
+};

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>
+    );
+};

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>
+  );
+};

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>
+    );
+};

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>
+  );
+};