Upload 9 files

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">DataTwan 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 Datasets to Hugging Face
+          </h2>
+          <p className="text-gray-600 text-lg leading-relaxed">
+            The fastest, most secure way to manage your machine learning datasets. 
+            Bulk upload files directly to the <strong>DataTwan</strong> repository.
+          </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 DataTwan Uploader
+            </h3>
+            <p className="text-gray-600 text-sm leading-relaxed">
+              DataTwan Uploader is a premier <strong>Hugging Face Dataset Management Tool</strong>. 
+              We streamline pushing large datasets 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>
+  );
+}

README.md

@@ -1,10 +1,20 @@
----
-title: Testupload
-emoji: 🐨
-colorFrom: blue
-colorTo: green
-sdk: docker
-pinned: false
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+<div align="center">
+<img width="1200" height="475" alt="GHBanner" src="https://github.com/user-attachments/assets/0aa67016-6eaf-458a-adb2-6e31a0763ed6" />
+</div>
+
+# Run and deploy your AI Studio app
+
+This contains everything you need to run your app locally.
+
+View your app in AI Studio: https://ai.studio/apps/drive/1ze_cSnjsTlEMs0ohdHMtGIuvNxtA4x4w
+
+## Run Locally
+
+**Prerequisites:**  Node.js
+
+
+1. Install dependencies:
+   `npm install`
+2. Set the `GEMINI_API_KEY` in [.env.local](.env.local) to your Gemini API key
+3. Run the app:
+   `npm run dev`

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>DataTwan - Free Hugging Face Dataset 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>

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

metadata.json

@@ -0,0 +1,5 @@
+{
+  "name": "HF Hub Uploader",
+  "description": "A professional tool to upload files directly to Hugging Face repositories using the @huggingface/hub library.",
+  "requestFramePermissions": []
+}

package.json

@@ -0,0 +1,29 @@
+{
+  "name": "datatwan-uploader",
+  "private": true,
+  "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"
+  }
+}

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"]
+}

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;

vite.config.ts

@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+});