Upload 3 files

App.tsx

@@ -0,0 +1,229 @@
+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, CheckCircle2, HelpCircle, Terminal } 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-white font-sans selection:bg-indigo-100 selection:text-indigo-900">
+      
+      {/* Decorative Background */}
+      <div className="fixed inset-0 z-0 pointer-events-none overflow-hidden">
+        <div className="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] rounded-full bg-indigo-100/50 blur-[120px]" />
+        <div className="absolute bottom-[10%] right-[-5%] w-[30%] h-[30%] rounded-full bg-purple-100/50 blur-[100px]" />
+      </div>
+
+      {/* Navbar */}
+      <header className="fixed top-0 w-full z-50 glass-effect border-b border-gray-100/50">
+        <div className="max-w-6xl mx-auto px-6 h-16 flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <div className="bg-gradient-to-r from-indigo-600 to-violet-600 p-2 rounded-lg text-white">
+                <Rocket className="w-5 h-5" />
+            </div>
+            <span className="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-gray-900 to-gray-600">
+                DataTwan
+            </span>
+          </div>
+          <nav className="hidden md:flex items-center gap-8 text-sm font-medium text-gray-600">
+             <a href="#upload" className="hover:text-indigo-600 transition-colors">Upload</a>
+             <a href="#features" className="hover:text-indigo-600 transition-colors">Features</a>
+             <a href="#faq" className="hover:text-indigo-600 transition-colors">FAQ</a>
+             <a 
+                href="https://huggingface.co/TwanAPI/DataTwan" 
+                target="_blank" 
+                rel="noreferrer"
+                className="px-4 py-2 rounded-full bg-gray-900 text-white hover:bg-gray-800 transition-colors"
+             >
+                View Repository
+             </a>
+          </nav>
+        </div>
+      </header>
+
+      <main className="relative z-10 pt-24 pb-20">
+        
+        {/* Hero Section */}
+        <section className="max-w-4xl mx-auto px-6 text-center mb-16">
+          <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-indigo-50 border border-indigo-100 text-indigo-600 text-xs font-semibold uppercase tracking-wide mb-6">
+            <span className="w-2 h-2 rounded-full bg-indigo-500 animate-pulse" />
+            V2.0 is Live: Faster Uploads
+          </div>
+          <h1 className="text-4xl md:text-6xl font-extrabold text-gray-900 tracking-tight mb-6">
+            The Ultimate <span className="text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 to-violet-600">Hugging Face</span> Dataset Uploader
+          </h1>
+          <p className="text-lg md:text-xl text-gray-600 mb-8 max-w-2xl mx-auto leading-relaxed">
+            Drag, drop, and deploy your machine learning datasets securely to the cloud. 
+            Optimized for large files, bulk processing, and ease of use.
+          </p>
+        </section>
+
+        {/* Upload Container */}
+        <section id="upload" className="max-w-3xl mx-auto px-6 mb-24">
+            <div className="bg-white/80 backdrop-blur-xl rounded-3xl shadow-2xl border border-white/20 ring-1 ring-black/5 p-2 md:p-8">
+                
+                {/* File Uploader Component */}
+                <div className="mb-8">
+                    <FileUploader 
+                        onFilesAdded={addFiles} 
+                        disabled={isUploading} 
+                    />
+                </div>
+
+                {/* Queue List */}
+                <div className="mb-6">
+                     <UploadList 
+                        files={files} 
+                        onRemove={removeFile} 
+                        onPathChange={updateFilePath}
+                    />
+                </div>
+                
+                {/* Action Button */}
+                {files.length > 0 && (
+                    <div className="flex justify-end">
+                        <button
+                            onClick={startUpload}
+                            disabled={!hasPendingFiles || isUploading}
+                            className={`
+                                group relative overflow-hidden flex items-center gap-3 px-8 py-4 rounded-xl font-bold shadow-lg transition-all duration-300
+                                ${!hasPendingFiles || isUploading 
+                                    ? 'bg-gray-100 text-gray-400 cursor-not-allowed' 
+                                    : 'bg-gradient-to-r from-indigo-600 to-violet-600 text-white hover:shadow-indigo-200 hover:shadow-xl hover:-translate-y-1 active:translate-y-0'}
+                            `}
+                        >
+                            {isUploading ? (
+                                <>
+                                    <div className="absolute inset-0 bg-white/20 animate-[shimmer_2s_infinite]" />
+                                    <Rocket className="w-5 h-5 animate-spin" />
+                                    <span>Processing Files...</span>
+                                </>
+                            ) : (
+                                <>
+                                    <Upload className="w-5 h-5 group-hover:scale-110 transition-transform" />
+                                    <span>Start Secure Upload</span>
+                                </>
+                            )}
+                        </button>
+                    </div>
+                )}
+            </div>
+        </section>
+
+        {/* SEO Content: Features */}
+        <section id="features" className="max-w-6xl mx-auto px-6 py-16">
+            <div className="text-center mb-12">
+                <h2 className="text-3xl font-bold text-gray-900">Why use DataTwan?</h2>
+                <p className="text-gray-500 mt-2">Built for Data Scientists and ML Engineers</p>
+            </div>
+            
+            <div className="grid md:grid-cols-3 gap-8">
+                <div className="p-6 bg-white rounded-2xl shadow-sm border border-gray-100 hover:shadow-md transition-shadow">
+                    <div className="w-12 h-12 bg-blue-50 rounded-xl flex items-center justify-center mb-4 text-blue-600">
+                        <ShieldCheck className="w-6 h-6" />
+                    </div>
+                    <h3 className="text-lg font-bold text-gray-900 mb-2">Secure API Proxy</h3>
+                    <p className="text-gray-600 text-sm leading-relaxed">
+                        Your files are routed through a secure backend proxy. Credentials are never exposed to the client-side browser, ensuring maximum security for your repositories.
+                    </p>
+                </div>
+                
+                <div className="p-6 bg-white rounded-2xl shadow-sm border border-gray-100 hover:shadow-md transition-shadow">
+                    <div className="w-12 h-12 bg-purple-50 rounded-xl flex items-center justify-center mb-4 text-purple-600">
+                        <Zap className="w-6 h-6" />
+                    </div>
+                    <h3 className="text-lg font-bold text-gray-900 mb-2">Lightning Fast</h3>
+                    <p className="text-gray-600 text-sm leading-relaxed">
+                        Optimized for speed. Our bulk upload algorithm handles multiple files simultaneously, reducing the time it takes to push your datasets to Hugging Face.
+                    </p>
+                </div>
+
+                <div className="p-6 bg-white rounded-2xl shadow-sm border border-gray-100 hover:shadow-md transition-shadow">
+                    <div className="w-12 h-12 bg-indigo-50 rounded-xl flex items-center justify-center mb-4 text-indigo-600">
+                        <Terminal className="w-6 h-6" />
+                    </div>
+                    <h3 className="text-lg font-bold text-gray-900 mb-2">Auto-Formatting</h3>
+                    <p className="text-gray-600 text-sm leading-relaxed">
+                        Automatic filename sanitization. Timestamps are added, and special characters are converted to English slugs to ensure compatibility with Linux/Unix systems.
+                    </p>
+                </div>
+            </div>
+        </section>
+
+        {/* SEO Content: FAQ */}
+        <section id="faq" className="max-w-4xl mx-auto px-6 py-16 bg-gray-50 rounded-3xl my-12">
+             <div className="text-center mb-10">
+                <h2 className="text-3xl font-bold text-gray-900">Frequently Asked Questions</h2>
+            </div>
+            <div className="space-y-4">
+                <details className="group bg-white rounded-xl shadow-sm border border-gray-200">
+                    <summary className="flex justify-between items-center font-medium cursor-pointer list-none p-6 text-gray-900">
+                        <span>Is this tool free to use?</span>
+                        <span className="transition group-open:rotate-180">
+                            <HelpCircle className="w-5 h-5 text-gray-400" />
+                        </span>
+                    </summary>
+                    <div className="text-gray-600 px-6 pb-6 text-sm leading-relaxed border-t border-gray-100 pt-4">
+                        Yes, DataTwan Uploader is 100% free. It utilizes the standard Hugging Face API to manage your datasets without any hidden costs.
+                    </div>
+                </details>
+                
+                <details className="group bg-white rounded-xl shadow-sm border border-gray-200">
+                    <summary className="flex justify-between items-center font-medium cursor-pointer list-none p-6 text-gray-900">
+                        <span>What types of files can I upload?</span>
+                        <span className="transition group-open:rotate-180">
+                            <HelpCircle className="w-5 h-5 text-gray-400" />
+                        </span>
+                    </summary>
+                    <div className="text-gray-600 px-6 pb-6 text-sm leading-relaxed border-t border-gray-100 pt-4">
+                        You can upload any file type supported by Hugging Face (JSON, CSV, Parquet, Images, Text, etc.). The tool automatically sanitizes filenames to prevent errors.
+                    </div>
+                </details>
+
+                 <details className="group bg-white rounded-xl shadow-sm border border-gray-200">
+                    <summary className="flex justify-between items-center font-medium cursor-pointer list-none p-6 text-gray-900">
+                        <span>Where are my files stored?</span>
+                        <span className="transition group-open:rotate-180">
+                            <HelpCircle className="w-5 h-5 text-gray-400" />
+                        </span>
+                    </summary>
+                    <div className="text-gray-600 px-6 pb-6 text-sm leading-relaxed border-t border-gray-100 pt-4">
+                        Files are uploaded directly to the <strong>TwanAPI/DataTwan</strong> repository on Hugging Face. We do not store your files on our servers; they are streamed directly to the destination.
+                    </div>
+                </details>
+            </div>
+        </section>
+
+      </main>
+
+      {/* Footer */}
+      <footer className="bg-gray-900 text-gray-400 py-12 border-t border-gray-800">
+        <div className="max-w-6xl mx-auto px-6 flex flex-col md:flex-row justify-between items-center gap-6">
+            <div className="flex items-center gap-2">
+                 <Rocket className="w-5 h-5 text-indigo-500" />
+                 <span className="text-white font-bold text-lg">DataTwan</span>
+            </div>
+            <div className="text-sm">
+                &copy; {new Date().getFullYear()} DataTwan. All rights reserved.
+            </div>
+            <div className="flex gap-6">
+                <a href="#" className="hover:text-white transition-colors">Privacy Policy</a>
+                <a href="#" className="hover:text-white transition-colors">Terms of Service</a>
+            </div>
+        </div>
+      </footer>
+    </div>
+  );
+}

index.html

@@ -0,0 +1,126 @@
+<!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>DataTwan - Free Hugging Face Dataset Uploader | Bulk Upload Tool</title>
+    <meta name="description" content="The best free tool to bulk upload datasets to Hugging Face. Secure, fast, and unlimited file support. Manage your AI/ML datasets with DataTwan Uploader." />
+    <meta name="keywords" content="Hugging Face uploader, dataset upload, DataTwan, machine learning datasets, AI data management, bulk file upload, Hugging Face API, drag and drop upload" />
+    <meta name="author" content="DataTwan" />
+    <meta name="robots" content="index, follow" />
+    <link rel="canonical" href="https://datatwan-uploader.com/" />
+    
+    <!-- Open Graph / Facebook -->
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://datatwan-uploader.com/" />
+    <meta property="og:title" content="DataTwan - Ultimate Hugging Face Dataset Uploader" />
+    <meta property="og:description" content="Upload massive datasets to Hugging Face efficiently. No command line needed. Secure and free." />
+    <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",
+        "@graph": [
+          {
+            "@type": "WebApplication",
+            "name": "DataTwan Uploader",
+            "url": "https://datatwan-uploader.com",
+            "description": "A professional tool to upload files directly to Hugging Face repositories via secure API.",
+            "applicationCategory": "DeveloperApplication",
+            "operatingSystem": "Web Browser",
+            "offers": {
+              "@type": "Offer",
+              "price": "0",
+              "priceCurrency": "USD"
+            }
+          },
+          {
+            "@type": "FAQPage",
+            "mainEntity": [
+              {
+                "@type": "Question",
+                "name": "How do I upload a dataset to Hugging Face?",
+                "acceptedAnswer": {
+                  "@type": "Answer",
+                  "text": "Simply drag and drop your files into DataTwan Uploader, rename them if necessary, and click 'Start Secure Upload'. Your files will be pushed directly to the DataTwan repository."
+                }
+              },
+              {
+                "@type": "Question",
+                "name": "Is DataTwan Uploader free?",
+                "acceptedAnswer": {
+                  "@type": "Answer",
+                  "text": "Yes, DataTwan Uploader is completely free to use for managing your machine learning datasets."
+                }
+              }
+            ]
+          }
+        ]
+      }
+    </script>
+
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+    <style>
+      body {
+        font-family: 'Plus Jakarta Sans', sans-serif;
+      }
+      .glass-effect {
+        background: rgba(255, 255, 255, 0.7);
+        backdrop-filter: blur(10px);
+        -webkit-backdrop-filter: blur(10px);
+      }
+      .mesh-gradient {
+        background-color: #ffffff;
+        background-image: radial-gradient(at 0% 0%, hsla(253,16%,7%,1) 0, transparent 50%), radial-gradient(at 50% 0%, hsla(225,39%,30%,1) 0, transparent 50%), radial-gradient(at 100% 0%, hsla(339,49%,30%,1) 0, transparent 50%);
+        background-size: 100% 100%;
+        background-attachment: fixed;
+      }
+      /* Custom Scrollbar */
+      ::-webkit-scrollbar {
+        width: 8px;
+      }
+      ::-webkit-scrollbar-track {
+        background: #f1f1f1; 
+      }
+      ::-webkit-scrollbar-thumb {
+        background: #888; 
+        border-radius: 4px;
+      }
+      ::-webkit-scrollbar-thumb:hover {
+        background: #555; 
+      }
+    </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",
+    "express": "https://aistudiocdn.com/express@^5.1.0",
+    "cors": "https://aistudiocdn.com/cors@^2.8.5",
+    "multer": "https://aistudiocdn.com/multer@^2.0.2",
+    "path": "https://aistudiocdn.com/path@^0.12.7",
+    "url": "https://aistudiocdn.com/url@^0.11.4"
+  }
+}
+</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>

index.tsx

@@ -0,0 +1,15 @@
+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>
+);