Upload via Flask App

huggingface-uploader/README.md

@@ -0,0 +1,154 @@
+# HuggingFace Uploader
+
+A Flask web application for uploading files and folders to Hugging Face Spaces, Models, and Datasets.
+
+## Features
+
+- 🌐 **Web-based Interface**: Clean, modern UI with drag-and-drop support
+- 📁 **ZIP Support**: Upload entire folders by compressing them to ZIP
+- 🚀 **Multiple Repository Types**: Support for Spaces, Models, and Datasets
+- 📊 **Progress Tracking**: Real-time upload progress monitoring
+- 🔄 **Background Processing**: Non-blocking uploads with threading
+- 🧹 **Auto Cleanup**: Automatic cleanup of temporary files
+- 📱 **Responsive Design**: Works on desktop and mobile devices
+
+## Installation
+
+1. **Clone or download the files**
+2. **Install dependencies**:
+   ```bash
+   pip install -r requirements.txt
+   ```
+
+## Directory Structure
+
+```
+huggingface-uploader/
+├── app.py              # Main Flask application
+├── requirements.txt    # Python dependencies
+├── README.md          # This file
+├── templates/
+│   └── index.html     # Web interface template
+└── uploads/           # Temporary upload directory (auto-created)
+```
+
+## Usage
+
+1. **Start the application**:
+   ```bash
+   python app.py
+   ```
+
+2. **Open your browser** and navigate to `http://localhost:5000`
+
+3. **Fill in the form**:
+   - **Hugging Face Token**: Get from [HuggingFace Settings](https://huggingface.co/settings/tokens)
+   - **Repository ID**: Format as `username/repository-name`
+   - **Repository Type**: Choose between Space, Model, or Dataset
+   - **Commit Message**: Describe your upload
+   - **File**: Select a file or ZIP folder
+
+4. **Upload**: Click "Upload to HuggingFace" and monitor progress
+
+## Supported File Types
+
+- **Archives**: ZIP
+- **Code**: Python (.py), JavaScript (.js), HTML (.html), CSS (.css), JSON (.json)
+- **Documents**: Text (.txt), Markdown (.md), PDF (.pdf)
+- **Images**: PNG, JPG, JPEG, GIF
+
+## Configuration
+
+### Environment Variables
+
+You can customize the application by modifying these variables in `app.py`:
+
+```python
+UPLOAD_FOLDER = 'uploads'                    # Temporary upload directory
+MAX_CONTENT_LENGTH = 500 * 1024 * 1024     # Max file size (500MB)
+SECRET_KEY = 'your-secret-key-change-this'  # Flask secret key
+```
+
+### Security
+
+- Change the `SECRET_KEY` in production
+- Consider adding authentication for production use
+- Implement rate limiting for public deployments
+
+## API Endpoints
+
+- `GET /` - Main upload interface
+- `POST /upload` - Handle file uploads
+- `GET /progress/<upload_id>` - Get upload progress
+- `GET /cleanup` - Manual cleanup of old files
+
+## Error Handling
+
+The application includes comprehensive error handling for:
+- Invalid file types
+- Missing required fields
+- HuggingFace API errors
+- Network connectivity issues
+- File size limitations
+
+## Auto-Cleanup
+
+The application automatically cleans up temporary files older than 1 hour. You can also trigger manual cleanup by visiting `/cleanup`.
+
+## Development
+
+To run in development mode:
+```bash
+python app.py
+```
+
+The application runs on `http://localhost:5000` with debug mode enabled.
+
+## Deployment
+
+For production deployment:
+
+1. Set `debug=False` in `app.py`
+2. Change the `SECRET_KEY` to a secure random value
+3. Configure a proper web server (e.g., nginx + gunicorn)
+4. Set up proper file permissions
+5. Consider implementing authentication
+
+## Troubleshooting
+
+### Common Issues
+
+1. **"No module named 'huggingface_hub'"**
+   - Run: `pip install -r requirements.txt`
+
+2. **"Permission denied" errors**
+   - Ensure the application has write permissions to the uploads directory
+
+3. **Upload fails with authentication error**
+   - Verify your HuggingFace token is correct and has proper permissions
+
+4. **File too large**
+   - Check if your file exceeds the 500MB limit
+
+### Logs
+
+The application logs errors to the console. Check the terminal output for detailed error messages.
+
+## Contributing
+
+1. Fork the repository
+2. Create a feature branch
+3. Make your changes
+4. Test thoroughly
+5. Submit a pull request
+
+## License
+
+This project is open source and available under the MIT License.
+
+## Support
+
+For support, please:
+1. Check the troubleshooting section above
+2. Review the HuggingFace documentation
+3. Open an issue on the project repository

huggingface-uploader/app.py

@@ -0,0 +1,276 @@
+import os
+import shutil
+import tempfile
+import zipfile
+from datetime import datetime
+from flask import Flask, render_template, request, jsonify, flash, redirect, url_for
+from werkzeug.utils import secure_filename
+from huggingface_hub import HfApi, upload_folder
+import threading
+import time
+import logging
+import traceback
+
+# Configure logging
+logging.basicConfig(level=logging.INFO)
+logger = logging.getLogger(__name__)
+
+app = Flask(__name__)
+app.secret_key = os.environ.get('SECRET_KEY', 'your-secret-key-change-this')
+
+# Configuration
+UPLOAD_FOLDER = 'uploads'
+ALLOWED_EXTENSIONS = {'txt', 'pdf', 'png', 'jpg', 'jpeg', 'gif', 'py', 'js', 'html', 'css', 'json', 'md', 'zip', 'yml', 'yaml', 'toml', 'cfg', 'ini', 'conf', 'log', 'xml', 'svg', 'ico', 'woff', 'woff2', 'ttf', 'eot', 'mp4', 'mp3', 'wav', 'avi', 'mov', 'webm', 'webp', 'tiff', 'bmp'}
+# Common files without extensions
+ALLOWED_NO_EXTENSION_FILES = {'dockerfile', 'makefile', 'readme', 'license', 'changelog', 'authors', 'contributors', 'copying', 'install', 'news', 'todo', 'requirements', 'pipfile', 'procfile', 'cmakelists', 'gitignore', 'gitattributes', 'dockerignore', 'editorconfig', 'flake8', 'pylintrc', 'pre-commit-config', 'travis', 'appveyor', 'circle', 'azure-pipelines'}
+
+MAX_CONTENT_LENGTH = 500 * 1024 * 1024  # 500MB max file size
+
+app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
+app.config['MAX_CONTENT_LENGTH'] = MAX_CONTENT_LENGTH
+
+# Ensure upload directory exists
+os.makedirs(UPLOAD_FOLDER, exist_ok=True)
+
+# Global variables for tracking upload progress
+upload_progress = {}
+upload_status = {}
+
+def allowed_file(filename):
+    """Check if file is allowed based on extension or known files without extensions"""
+    if '.' in filename:
+        extension = filename.rsplit('.', 1)[1].lower()
+        return extension in ALLOWED_EXTENSIONS
+    else:
+        # Check if it's a known file without extension
+        return filename.lower() in ALLOWED_NO_EXTENSION_FILES
+
+def extract_zip(zip_path, extract_to):
+    """Extract ZIP file to specified directory"""
+    with zipfile.ZipFile(zip_path, 'r') as zip_ref:
+        zip_ref.extractall(extract_to)
+
+def create_zip_from_files(files, zip_path):
+    """Create a ZIP file from uploaded files"""
+    with zipfile.ZipFile(zip_path, 'w', zipfile.ZIP_DEFLATED) as zipf:
+        for file in files:
+            if file.filename:
+                # Save file temporarily
+                temp_path = os.path.join(tempfile.gettempdir(), secure_filename(file.filename))
+                file.save(temp_path)
+                
+                # Add to ZIP with the original filename
+                zipf.write(temp_path, file.filename)
+                
+                # Clean up temp file
+                os.remove(temp_path)
+
+def upload_to_huggingface(upload_id, folder_path, repo_id, hf_token, commit_message, repo_type="space"):
+    """Upload folder to Hugging Face in a separate thread"""
+    try:
+        logger.info(f"Starting upload {upload_id} to {repo_id}")
+        upload_status[upload_id] = "Initializing..."
+        upload_progress[upload_id] = 0
+        
+        # Initialize API
+        logger.info(f"Initializing HfApi for {upload_id}")
+        api = HfApi(token=hf_token)
+        
+        # Test token validity
+        try:
+            logger.info(f"Testing token validity for {upload_id}")
+            user_info = api.whoami()
+            logger.info(f"Token valid for user: {user_info.get('name', 'Unknown')}")
+        except Exception as e:
+            logger.error(f"Token validation failed for {upload_id}: {str(e)}")
+            upload_status[upload_id] = f"Invalid token: {str(e)}"
+            return
+        
+        upload_status[upload_id] = "Uploading to Hugging Face..."
+        upload_progress[upload_id] = 25
+        
+        logger.info(f"Starting upload for {upload_id}: {folder_path} -> {repo_id}")
+        
+        # Always upload as folder to maintain directory structure
+        if os.path.isfile(folder_path):
+            logger.info(f"Converting single file to folder structure: {folder_path}")
+            # Create a temporary folder for single file
+            temp_folder = os.path.join(os.path.dirname(folder_path), f"temp_folder_{upload_id}")
+            os.makedirs(temp_folder, exist_ok=True)
+            
+            # Copy the file to the temporary folder with original name
+            filename = os.path.basename(folder_path)
+            temp_file_path = os.path.join(temp_folder, filename)
+            shutil.copy2(folder_path, temp_file_path)
+            
+            # Upload the temporary folder
+            upload_folder(
+                folder_path=temp_folder,
+                repo_id=repo_id,
+                repo_type=repo_type,
+                token=hf_token,
+                commit_message=commit_message,
+                ignore_patterns=[".git", "__pycache__", "*.pyc", ".env", "*.log"]
+            )
+            
+            # Clean up temporary folder
+            shutil.rmtree(temp_folder)
+            
+        else:
+            logger.info(f"Uploading folder: {folder_path}")
+            # Folder upload
+            upload_folder(
+                folder_path=folder_path,
+                repo_id=repo_id,
+                repo_type=repo_type,
+                token=hf_token,
+                commit_message=commit_message,
+                ignore_patterns=[".git", "__pycache__", "*.pyc", ".env", "*.log"]
+            )
+        
+        upload_progress[upload_id] = 100
+        upload_status[upload_id] = "Upload completed successfully!"
+        logger.info(f"Upload {upload_id} completed successfully")
+        
+    except Exception as e:
+        error_msg = f"Upload error: {str(e)}"
+        logger.error(f"Upload {upload_id} failed: {error_msg}")
+        logger.error(f"Full traceback: {traceback.format_exc()}")
+        upload_status[upload_id] = error_msg
+        upload_progress[upload_id] = 0
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/upload', methods=['POST'])
+def upload_file():
+    try:
+        # Get form data
+        hf_token = request.form.get('hf_token')
+        repo_id = request.form.get('repo_id')
+        repo_type = request.form.get('repo_type', 'space')
+        commit_message = request.form.get('commit_message', 'Upload via Flask App')
+        
+        logger.info(f"Upload request: repo_id={repo_id}, repo_type={repo_type}")
+        
+        if not hf_token or not repo_id:
+            return jsonify({'error': 'Hugging Face token and repository ID are required'}), 400
+        
+        # Check if files were uploaded
+        if 'files' not in request.files:
+            return jsonify({'error': 'No files selected'}), 400
+        
+        files = request.files.getlist('files')
+        if not files or all(file.filename == '' for file in files):
+            return jsonify({'error': 'No files selected'}), 400
+        
+        # Generate unique upload ID and timestamp for internal tracking
+        timestamp = datetime.now().strftime("%Y%m%d_%H%M%S")
+        upload_id = f"upload_{timestamp}"
+        
+        # Handle multiple files and folder structures
+        if len(files) == 1 and not any('/' in file.filename for file in files):
+            # Single file upload
+            file = files[0]
+            if file and allowed_file(file.filename):
+                # Use original filename without timestamp
+                filename = secure_filename(file.filename)
+                
+                # Create unique folder for this upload to avoid conflicts
+                upload_folder_path = os.path.join(app.config['UPLOAD_FOLDER'], f"upload_{timestamp}")
+                os.makedirs(upload_folder_path, exist_ok=True)
+                
+                # Save uploaded file with original name
+                file_path = os.path.join(upload_folder_path, filename)
+                file.save(file_path)
+                logger.info(f"File saved: {file_path}")
+                
+                # Handle ZIP files
+                if filename.lower().endswith('.zip'):
+                    extract_folder = os.path.join(upload_folder_path, "extracted")
+                    os.makedirs(extract_folder, exist_ok=True)
+                    extract_zip(file_path, extract_folder)
+                    upload_path = extract_folder
+                    logger.info(f"ZIP extracted to: {extract_folder}")
+                else:
+                    upload_path = file_path
+            else:
+                return jsonify({'error': f'File type not allowed: {file.filename}'}), 400
+        else:
+            # Multiple files or folder structure - create folder structure
+            folder_path = os.path.join(app.config['UPLOAD_FOLDER'], f"folder_{timestamp}")
+            os.makedirs(folder_path, exist_ok=True)
+            
+            # Save all files to the folder, preserving directory structure
+            for file in files:
+                if file and file.filename and allowed_file(file.filename):
+                    # Use the original filename which may include directory structure
+                    filename = file.filename
+                    # Ensure the filename is safe but preserve directory structure
+                    safe_filename = filename.replace('\\', '/').strip('/')
+                    file_path = os.path.join(folder_path, safe_filename)
+                    
+                    # Create subdirectories if needed (for folder uploads)
+                    os.makedirs(os.path.dirname(file_path), exist_ok=True)
+                    file.save(file_path)
+                    logger.info(f"File saved: {file_path}")
+                elif file and file.filename:
+                    return jsonify({'error': f'File type not allowed: {file.filename}'}), 400
+            
+            upload_path = folder_path
+            logger.info(f"Folder created: {folder_path}")
+        
+        # Start upload in background thread
+        thread = threading.Thread(
+            target=upload_to_huggingface,
+            args=(upload_id, upload_path, repo_id, hf_token, commit_message, repo_type)
+        )
+        thread.daemon = True
+        thread.start()
+        
+        return jsonify({
+            'success': True,
+            'upload_id': upload_id,
+            'message': 'Upload started successfully!'
+        })
+        
+    except Exception as e:
+        logger.error(f"Upload endpoint error: {str(e)}")
+        logger.error(f"Full traceback: {traceback.format_exc()}")
+        return jsonify({'error': str(e)}), 500
+
+@app.route('/progress/<upload_id>')
+def get_progress(upload_id):
+    """Get upload progress"""
+    progress = upload_progress.get(upload_id, 0)
+    status = upload_status.get(upload_id, "Unknown")
+    
+    return jsonify({
+        'progress': progress,
+        'status': status,
+        'completed': progress == 100 and 'Error' not in status
+    })
+
+@app.route('/cleanup')
+def cleanup():
+    """Clean up old uploaded files"""
+    try:
+        # Remove files older than 1 hour
+        cutoff_time = time.time() - 3600  # 1 hour
+        
+        for filename in os.listdir(app.config['UPLOAD_FOLDER']):
+            file_path = os.path.join(app.config['UPLOAD_FOLDER'], filename)
+            if os.path.getctime(file_path) < cutoff_time:
+                if os.path.isfile(file_path):
+                    os.remove(file_path)
+                elif os.path.isdir(file_path):
+                    shutil.rmtree(file_path)
+        
+        return jsonify({'message': 'Cleanup completed'})
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+if __name__ == '__main__':
+    port = int(os.environ.get('PORT', 7860))  # Hugging Face Spaces uses port 7860
+    app.run(debug=False, host='0.0.0.0', port=port, use_reloader=False)

huggingface-uploader/app1.py

@@ -0,0 +1,263 @@
+import os
+import shutil
+import tempfile
+import zipfile
+from datetime import datetime
+from flask import Flask, render_template, request, jsonify, flash, redirect, url_for
+from werkzeug.utils import secure_filename
+from huggingface_hub import HfApi, upload_folder
+import threading
+import time
+import logging
+import traceback
+
+# Configure logging
+logging.basicConfig(level=logging.INFO)
+logger = logging.getLogger(__name__)
+
+app = Flask(__name__)
+app.secret_key = 'your-secret-key-change-this'  # Change this in production
+
+# Configuration
+UPLOAD_FOLDER = 'uploads'
+ALLOWED_EXTENSIONS = {'txt', 'pdf', 'png', 'jpg', 'jpeg', 'gif', 'py', 'js', 'html', 'css', 'json', 'md', 'zip'}
+MAX_CONTENT_LENGTH = 500 * 1024 * 1024  # 500MB max file size
+
+app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
+app.config['MAX_CONTENT_LENGTH'] = MAX_CONTENT_LENGTH
+
+# Ensure upload directory exists
+os.makedirs(UPLOAD_FOLDER, exist_ok=True)
+
+# Global variables for tracking upload progress
+upload_progress = {}
+upload_status = {}
+
+def allowed_file(filename):
+    return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS
+
+def extract_zip(zip_path, extract_to):
+    """Extract ZIP file to specified directory"""
+    with zipfile.ZipFile(zip_path, 'r') as zip_ref:
+        zip_ref.extractall(extract_to)
+
+def create_zip_from_files(files, zip_path):
+    """Create a ZIP file from uploaded files"""
+    with zipfile.ZipFile(zip_path, 'w', zipfile.ZIP_DEFLATED) as zipf:
+        for file in files:
+            if file.filename:
+                # Save file temporarily
+                temp_path = os.path.join(tempfile.gettempdir(), secure_filename(file.filename))
+                file.save(temp_path)
+                
+                # Add to ZIP with the original filename
+                zipf.write(temp_path, file.filename)
+                
+                # Clean up temp file
+                os.remove(temp_path)
+
+def upload_to_huggingface(upload_id, folder_path, repo_id, hf_token, commit_message, repo_type="space"):
+    """Upload folder to Hugging Face in a separate thread"""
+    try:
+        logger.info(f"Starting upload {upload_id} to {repo_id}")
+        upload_status[upload_id] = "Initializing..."
+        upload_progress[upload_id] = 0
+        
+        # Initialize API
+        logger.info(f"Initializing HfApi for {upload_id}")
+        api = HfApi(token=hf_token)
+        
+        # Test token validity
+        try:
+            logger.info(f"Testing token validity for {upload_id}")
+            user_info = api.whoami()
+            logger.info(f"Token valid for user: {user_info.get('name', 'Unknown')}")
+        except Exception as e:
+            logger.error(f"Token validation failed for {upload_id}: {str(e)}")
+            upload_status[upload_id] = f"Invalid token: {str(e)}"
+            return
+        
+        upload_status[upload_id] = "Uploading to Hugging Face..."
+        upload_progress[upload_id] = 25
+        
+        logger.info(f"Starting upload for {upload_id}: {folder_path} -> {repo_id}")
+        
+        # Always upload as folder to maintain directory structure
+        if os.path.isfile(folder_path):
+            logger.info(f"Converting single file to folder structure: {folder_path}")
+            # Create a temporary folder for single file
+            temp_folder = os.path.join(os.path.dirname(folder_path), f"temp_folder_{upload_id}")
+            os.makedirs(temp_folder, exist_ok=True)
+            
+            # Copy the file to the temporary folder
+            filename = os.path.basename(folder_path)
+            temp_file_path = os.path.join(temp_folder, filename)
+            shutil.copy2(folder_path, temp_file_path)
+            
+            # Upload the temporary folder
+            upload_folder(
+                folder_path=temp_folder,
+                repo_id=repo_id,
+                repo_type=repo_type,
+                token=hf_token,
+                commit_message=commit_message,
+                ignore_patterns=[".git", "__pycache__", "*.pyc", ".env", "*.log"]
+            )
+            
+            # Clean up temporary folder
+            shutil.rmtree(temp_folder)
+            
+        else:
+            logger.info(f"Uploading folder: {folder_path}")
+            # Folder upload
+            upload_folder(
+                folder_path=folder_path,
+                repo_id=repo_id,
+                repo_type=repo_type,
+                token=hf_token,
+                commit_message=commit_message,
+                ignore_patterns=[".git", "__pycache__", "*.pyc", ".env", "*.log"]
+            )
+        
+        upload_progress[upload_id] = 100
+        upload_status[upload_id] = "Upload completed successfully!"
+        logger.info(f"Upload {upload_id} completed successfully")
+        
+    except Exception as e:
+        error_msg = f"Upload error: {str(e)}"
+        logger.error(f"Upload {upload_id} failed: {error_msg}")
+        logger.error(f"Full traceback: {traceback.format_exc()}")
+        upload_status[upload_id] = error_msg
+        upload_progress[upload_id] = 0
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/upload', methods=['POST'])
+def upload_file():
+    try:
+        # Get form data
+        hf_token = request.form.get('hf_token')
+        repo_id = request.form.get('repo_id')
+        repo_type = request.form.get('repo_type', 'space')
+        commit_message = request.form.get('commit_message', 'Upload via Flask App')
+        
+        logger.info(f"Upload request: repo_id={repo_id}, repo_type={repo_type}")
+        
+        if not hf_token or not repo_id:
+            return jsonify({'error': 'Hugging Face token and repository ID are required'}), 400
+        
+        # Check if files were uploaded
+        if 'files' not in request.files:
+            return jsonify({'error': 'No files selected'}), 400
+        
+        files = request.files.getlist('files')
+        if not files or all(file.filename == '' for file in files):
+            return jsonify({'error': 'No files selected'}), 400
+        
+        # Generate unique upload ID and timestamp
+        timestamp = datetime.now().strftime("%Y%m%d_%H%M%S")
+        upload_id = f"upload_{timestamp}"
+        
+        # Handle multiple files and folder structures
+        if len(files) == 1 and not any('/' in file.filename for file in files):
+            # Single file upload
+            file = files[0]
+            if file and allowed_file(file.filename):
+                filename = secure_filename(file.filename)
+                unique_filename = f"{timestamp}_{filename}"
+                
+                # Save uploaded file
+                file_path = os.path.join(app.config['UPLOAD_FOLDER'], unique_filename)
+                file.save(file_path)
+                logger.info(f"File saved: {file_path}")
+                
+                # Handle ZIP files
+                if filename.lower().endswith('.zip'):
+                    extract_folder = os.path.join(app.config['UPLOAD_FOLDER'], f"extracted_{timestamp}")
+                    os.makedirs(extract_folder, exist_ok=True)
+                    extract_zip(file_path, extract_folder)
+                    upload_path = extract_folder
+                    logger.info(f"ZIP extracted to: {extract_folder}")
+                else:
+                    upload_path = file_path
+            else:
+                return jsonify({'error': 'File type not allowed'}), 400
+        else:
+            # Multiple files or folder structure - create folder structure
+            folder_path = os.path.join(app.config['UPLOAD_FOLDER'], f"folder_{timestamp}")
+            os.makedirs(folder_path, exist_ok=True)
+            
+            # Save all files to the folder, preserving directory structure
+            for file in files:
+                if file and file.filename and allowed_file(file.filename):
+                    # Use the original filename which may include directory structure
+                    filename = file.filename
+                    # Ensure the filename is safe but preserve directory structure
+                    safe_filename = filename.replace('\\', '/').strip('/')
+                    file_path = os.path.join(folder_path, safe_filename)
+                    
+                    # Create subdirectories if needed (for folder uploads)
+                    os.makedirs(os.path.dirname(file_path), exist_ok=True)
+                    file.save(file_path)
+                    logger.info(f"File saved: {file_path}")
+                elif file and file.filename:
+                    return jsonify({'error': f'File type not allowed: {file.filename}'}), 400
+            
+            upload_path = folder_path
+            logger.info(f"Folder created: {folder_path}")
+        
+        # Start upload in background thread
+        thread = threading.Thread(
+            target=upload_to_huggingface,
+            args=(upload_id, upload_path, repo_id, hf_token, commit_message, repo_type)
+        )
+        thread.daemon = True
+        thread.start()
+        
+        return jsonify({
+            'success': True,
+            'upload_id': upload_id,
+            'message': 'Upload started successfully!'
+        })
+        
+    except Exception as e:
+        logger.error(f"Upload endpoint error: {str(e)}")
+        logger.error(f"Full traceback: {traceback.format_exc()}")
+        return jsonify({'error': str(e)}), 500
+
+@app.route('/progress/<upload_id>')
+def get_progress(upload_id):
+    """Get upload progress"""
+    progress = upload_progress.get(upload_id, 0)
+    status = upload_status.get(upload_id, "Unknown")
+    
+    return jsonify({
+        'progress': progress,
+        'status': status,
+        'completed': progress == 100 and 'Error' not in status
+    })
+
+@app.route('/cleanup')
+def cleanup():
+    """Clean up old uploaded files"""
+    try:
+        # Remove files older than 1 hour
+        cutoff_time = time.time() - 3600  # 1 hour
+        
+        for filename in os.listdir(app.config['UPLOAD_FOLDER']):
+            file_path = os.path.join(app.config['UPLOAD_FOLDER'], filename)
+            if os.path.getctime(file_path) < cutoff_time:
+                if os.path.isfile(file_path):
+                    os.remove(file_path)
+                elif os.path.isdir(file_path):
+                    shutil.rmtree(file_path)
+        
+        return jsonify({'message': 'Cleanup completed'})
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+if __name__ == '__main__':
+    # Disable auto-reloader to prevent background thread interruption
+    app.run(debug=True, host='0.0.0.0', port=5000, use_reloader=False)

huggingface-uploader/app2.py

@@ -0,0 +1,328 @@
+import os
+import shutil
+import tempfile
+import zipfile
+from datetime import datetime
+from flask import Flask, render_template, request, jsonify, flash, redirect, url_for
+from werkzeug.utils import secure_filename
+from huggingface_hub import HfApi, upload_folder
+import threading
+import time
+import logging
+import traceback
+
+# Configure logging
+logging.basicConfig(level=logging.INFO)
+logger = logging.getLogger(__name__)
+
+app = Flask(__name__)
+app.secret_key = 'your-secret-key-change-this'  # Change this in production
+
+# Configuration
+UPLOAD_FOLDER = 'uploads'
+ALLOWED_EXTENSIONS = {'txt', 'pdf', 'png', 'jpg', 'jpeg', 'gif', 'py', 'js', 'html', 'css', 'json', 'md', 'zip', 'tar', 'gz', 'tgz', 'ipynb', 'xlsx', 'docx', 'csv', 'xml', 'yaml', 'yml', 'toml', 'ini', 'cfg', 'log', 'sql', 'sh', 'bat', 'ps1', 'r', 'cpp', 'c', 'java', 'php', 'rb', 'go', 'rs', 'swift', 'kt', 'scala', 'pl', 'lua', 'dart', 'vue', 'tsx', 'ts', 'jsx', 'sass', 'scss', 'less', 'styl', 'woff', 'woff2', 'ttf', 'otf', 'eot', 'svg', 'ico', 'webp', 'mp4', 'webm', 'ogg', 'mp3', 'wav', 'flac', 'aac', 'pkl', 'h5', 'hdf5', 'npy', 'npz', 'pt', 'pth', 'onnx', 'pb', 'tflite', 'safetensors', 'bin', 'model', 'weights', 'ckpt', 'checkpoint'}
+MAX_CONTENT_LENGTH = 1024 * 1024 * 1024  # 1GB max file size
+
+app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
+app.config['MAX_CONTENT_LENGTH'] = MAX_CONTENT_LENGTH
+
+# Ensure upload directory exists
+os.makedirs(UPLOAD_FOLDER, exist_ok=True)
+
+# Global variables for tracking upload progress
+upload_progress = {}
+upload_status = {}
+upload_history = []
+
+def allowed_file(filename):
+    return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS
+
+def extract_zip(zip_path, extract_to):
+    """Extract ZIP file to specified directory"""
+    try:
+        with zipfile.ZipFile(zip_path, 'r') as zip_ref:
+            zip_ref.extractall(extract_to)
+        return True
+    except Exception as e:
+        logger.error(f"Error extracting ZIP: {str(e)}")
+        return False
+
+def extract_tar(tar_path, extract_to):
+    """Extract TAR file to specified directory"""
+    try:
+        import tarfile
+        with tarfile.open(tar_path, 'r:*') as tar_ref:
+            tar_ref.extractall(extract_to)
+        return True
+    except Exception as e:
+        logger.error(f"Error extracting TAR: {str(e)}")
+        return False
+
+def create_zip_from_files(files, zip_path):
+    """Create a ZIP file from uploaded files"""
+    with zipfile.ZipFile(zip_path, 'w', zipfile.ZIP_DEFLATED) as zipf:
+        for file in files:
+            if file.filename:
+                # Save file temporarily
+                temp_path = os.path.join(tempfile.gettempdir(), secure_filename(file.filename))
+                file.save(temp_path)
+                
+                # Add to ZIP with the original filename
+                zipf.write(temp_path, file.filename)
+                
+                # Clean up temp file
+                os.remove(temp_path)
+
+def upload_to_huggingface(upload_id, folder_path, repo_id, hf_token, commit_message, repo_type="space", create_repo=False):
+    """Upload folder to Hugging Face in a separate thread"""
+    try:
+        logger.info(f"Starting upload {upload_id} to {repo_id}")
+        upload_status[upload_id] = "Initializing..."
+        upload_progress[upload_id] = 0
+        
+        # Initialize API
+        logger.info(f"Initializing HfApi for {upload_id}")
+        api = HfApi(token=hf_token)
+        
+        # Test token validity
+        try:
+            logger.info(f"Testing token validity for {upload_id}")
+            user_info = api.whoami()
+            logger.info(f"Token valid for user: {user_info.get('name', 'Unknown')}")
+        except Exception as e:
+            logger.error(f"Token validation failed for {upload_id}: {str(e)}")
+            upload_status[upload_id] = f"Invalid token: {str(e)}"
+            return
+        
+        # Create repository if requested
+        if create_repo:
+            try:
+                upload_status[upload_id] = "Creating repository..."
+                upload_progress[upload_id] = 10
+                api.create_repo(repo_id=repo_id, repo_type=repo_type, exist_ok=True)
+                logger.info(f"Repository created/exists: {repo_id}")
+            except Exception as e:
+                logger.error(f"Repository creation failed for {upload_id}: {str(e)}")
+                upload_status[upload_id] = f"Repository creation failed: {str(e)}"
+                return
+        
+        upload_status[upload_id] = "Uploading to Hugging Face..."
+        upload_progress[upload_id] = 25
+        
+        logger.info(f"Starting upload for {upload_id}: {folder_path} -> {repo_id}")
+        
+        # Always upload as folder to maintain directory structure
+        if os.path.isfile(folder_path):
+            logger.info(f"Converting single file to folder structure: {folder_path}")
+            # Create a temporary folder for single file
+            temp_folder = os.path.join(os.path.dirname(folder_path), f"temp_folder_{upload_id}")
+            os.makedirs(temp_folder, exist_ok=True)
+            
+            # Copy the file to the temporary folder
+            filename = os.path.basename(folder_path)
+            temp_file_path = os.path.join(temp_folder, filename)
+            shutil.copy2(folder_path, temp_file_path)
+            
+            # Upload the temporary folder
+            upload_folder(
+                folder_path=temp_folder,
+                repo_id=repo_id,
+                repo_type=repo_type,
+                token=hf_token,
+                commit_message=commit_message,
+                ignore_patterns=[".git", "__pycache__", "*.pyc", ".env", "*.log", ".DS_Store", "Thumbs.db"]
+            )
+            
+            # Clean up temporary folder
+            shutil.rmtree(temp_folder)
+            
+        else:
+            logger.info(f"Uploading folder: {folder_path}")
+            # Folder upload
+            upload_folder(
+                folder_path=folder_path,
+                repo_id=repo_id,
+                repo_type=repo_type,
+                token=hf_token,
+                commit_message=commit_message,
+                ignore_patterns=[".git", "__pycache__", "*.pyc", ".env", "*.log", ".DS_Store", "Thumbs.db"]
+            )
+        
+        upload_progress[upload_id] = 100
+        upload_status[upload_id] = "Upload completed successfully!"
+        logger.info(f"Upload {upload_id} completed successfully")
+        
+        # Add to history
+        upload_history.append({
+            'upload_id': upload_id,
+            'repo_id': repo_id,
+            'repo_type': repo_type,
+            'status': 'success',
+            'timestamp': datetime.now().isoformat(),
+            'message': 'Upload completed successfully!'
+        })
+        
+    except Exception as e:
+        error_msg = f"Upload error: {str(e)}"
+        logger.error(f"Upload {upload_id} failed: {error_msg}")
+        logger.error(f"Full traceback: {traceback.format_exc()}")
+        upload_status[upload_id] = error_msg
+        upload_progress[upload_id] = 0
+        
+        # Add to history
+        upload_history.append({
+            'upload_id': upload_id,
+            'repo_id': repo_id,
+            'repo_type': repo_type,
+            'status': 'error',
+            'timestamp': datetime.now().isoformat(),
+            'message': error_msg
+        })
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/upload', methods=['POST'])
+def upload_file():
+    try:
+        # Get form data
+        hf_token = request.form.get('hf_token')
+        repo_id = request.form.get('repo_id')
+        repo_type = request.form.get('repo_type', 'space')
+        commit_message = request.form.get('commit_message', 'Upload via HuggingFace Uploader Pro')
+        create_repo = request.form.get('create_repo') == 'true'
+        
+        logger.info(f"Upload request: repo_id={repo_id}, repo_type={repo_type}, create_repo={create_repo}")
+        
+        if not hf_token or not repo_id:
+            return jsonify({'error': 'Hugging Face token and repository ID are required'}), 400
+        
+        # Check if files were uploaded
+        if 'files' not in request.files:
+            return jsonify({'error': 'No files selected'}), 400
+        
+        files = request.files.getlist('files')
+        if not files or all(file.filename == '' for file in files):
+            return jsonify({'error': 'No files selected'}), 400
+        
+        # Generate unique upload ID and timestamp
+        timestamp = datetime.now().strftime("%Y%m%d_%H%M%S")
+        upload_id = f"upload_{timestamp}"
+        
+        # Handle multiple files and folder structures
+        if len(files) == 1 and not any('/' in file.filename for file in files):
+            # Single file upload
+            file = files[0]
+            if file and allowed_file(file.filename):
+                filename = secure_filename(file.filename)
+                unique_filename = f"{timestamp}_{filename}"
+                
+                # Save uploaded file
+                file_path = os.path.join(app.config['UPLOAD_FOLDER'], unique_filename)
+                file.save(file_path)
+                logger.info(f"File saved: {file_path}")
+                
+                # Handle archive files
+                if filename.lower().endswith('.zip'):
+                    extract_folder = os.path.join(app.config['UPLOAD_FOLDER'], f"extracted_{timestamp}")
+                    os.makedirs(extract_folder, exist_ok=True)
+                    if extract_zip(file_path, extract_folder):
+                        upload_path = extract_folder
+                        logger.info(f"ZIP extracted to: {extract_folder}")
+                    else:
+                        return jsonify({'error': 'Failed to extract ZIP file'}), 400
+                elif filename.lower().endswith(('.tar', '.tar.gz', '.tgz')):
+                    extract_folder = os.path.join(app.config['UPLOAD_FOLDER'], f"extracted_{timestamp}")
+                    os.makedirs(extract_folder, exist_ok=True)
+                    if extract_tar(file_path, extract_folder):
+                        upload_path = extract_folder
+                        logger.info(f"TAR extracted to: {extract_folder}")
+                    else:
+                        return jsonify({'error': 'Failed to extract TAR file'}), 400
+                else:
+                    upload_path = file_path
+            else:
+                return jsonify({'error': 'File type not allowed'}), 400
+        else:
+            # Multiple files or folder structure - create folder structure
+            folder_path = os.path.join(app.config['UPLOAD_FOLDER'], f"folder_{timestamp}")
+            os.makedirs(folder_path, exist_ok=True)
+            
+            # Save all files to the folder, preserving directory structure
+            for file in files:
+                if file and file.filename and allowed_file(file.filename):
+                    # Use the original filename which may include directory structure
+                    filename = file.filename
+                    # Ensure the filename is safe but preserve directory structure
+                    safe_filename = filename.replace('\\', '/').strip('/')
+                    file_path = os.path.join(folder_path, safe_filename)
+                    
+                    # Create subdirectories if needed (for folder uploads)
+                    os.makedirs(os.path.dirname(file_path), exist_ok=True)
+                    file.save(file_path)
+                    logger.info(f"File saved: {file_path}")
+                elif file and file.filename:
+                    return jsonify({'error': f'File type not allowed: {file.filename}'}), 400
+            
+            upload_path = folder_path
+            logger.info(f"Folder created: {folder_path}")
+        
+        # Start upload in background thread
+        thread = threading.Thread(
+            target=upload_to_huggingface,
+            args=(upload_id, upload_path, repo_id, hf_token, commit_message, repo_type, create_repo)
+        )
+        thread.daemon = True
+        thread.start()
+        
+        return jsonify({
+            'success': True,
+            'upload_id': upload_id,
+            'message': 'Upload started successfully!'
+        })
+        
+    except Exception as e:
+        logger.error(f"Upload endpoint error: {str(e)}")
+        logger.error(f"Full traceback: {traceback.format_exc()}")
+        return jsonify({'error': str(e)}), 500
+
+@app.route('/progress/<upload_id>')
+def get_progress(upload_id):
+    """Get upload progress"""
+    progress = upload_progress.get(upload_id, 0)
+    status = upload_status.get(upload_id, "Unknown")
+    
+    return jsonify({
+        'progress': progress,
+        'status': status,
+        'completed': progress == 100 and 'error' not in status.lower()
+    })
+
+@app.route('/history')
+def get_history():
+    """Get upload history"""
+    return jsonify({'history': upload_history})
+
+@app.route('/cleanup')
+def cleanup():
+    """Clean up old uploaded files"""
+    try:
+        # Remove files older than 1 hour
+        cutoff_time = time.time() - 3600  # 1 hour
+        
+        for filename in os.listdir(app.config['UPLOAD_FOLDER']):
+            file_path = os.path.join(app.config['UPLOAD_FOLDER'], filename)
+            if os.path.getctime(file_path) < cutoff_time:
+                if os.path.isfile(file_path):
+                    os.remove(file_path)
+                elif os.path.isdir(file_path):
+                    shutil.rmtree(file_path)
+        
+        return jsonify({'message': 'Cleanup completed'})
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+if __name__ == '__main__':
+    # For local development
+    app.run(debug=True, host='0.0.0.0', port=7860)

huggingface-uploader/requirements.txt

@@ -0,0 +1,3 @@
+Flask
+huggingface-hub
+Werkzeug

huggingface-uploader/templates/index.html

@@ -0,0 +1,481 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>HuggingFace Uploader</title>
+    <style>
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            background-color: #f8f9fa;
+        }
+        .container {
+            background: white;
+            padding: 30px;
+            border-radius: 10px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+        }
+        h1 {
+            color: #333;
+            text-align: center;
+            margin-bottom: 30px;
+        }
+        .form-group {
+            margin-bottom: 20px;
+        }
+        label {
+            display: block;
+            margin-bottom: 5px;
+            font-weight: 600;
+            color: #555;
+        }
+        input, select, textarea {
+            width: 100%;
+            padding: 12px;
+            border: 2px solid #ddd;
+            border-radius: 5px;
+            font-size: 14px;
+            transition: border-color 0.3s;
+        }
+        input:focus, select:focus, textarea:focus {
+            outline: none;
+            border-color: #007bff;
+        }
+        .file-input-container {
+            border: 2px dashed #ddd;
+            border-radius: 5px;
+            padding: 20px;
+            text-align: center;
+            background-color: #f9f9f9;
+            transition: all 0.3s;
+        }
+        .file-input-container:hover {
+            border-color: #007bff;
+            background-color: #f0f8ff;
+        }
+        .file-input-container.drag-over {
+            border-color: #007bff;
+            background-color: #e6f3ff;
+        }
+        #files {
+            display: none;
+        }
+        .file-input-label {
+            display: inline-block;
+            background-color: #007bff;
+            color: white;
+            padding: 10px 20px;
+            border-radius: 5px;
+            cursor: pointer;
+            margin-bottom: 10px;
+            transition: background-color 0.3s;
+        }
+        .file-input-label:hover {
+            background-color: #0056b3;
+        }
+        .upload-modes {
+            display: flex;
+            gap: 10px;
+            margin-bottom: 15px;
+        }
+        .upload-mode {
+            flex: 1;
+            padding: 10px;
+            border: 2px solid #ddd;
+            border-radius: 5px;
+            text-align: center;
+            cursor: pointer;
+            transition: all 0.3s;
+        }
+        .upload-mode.active {
+            border-color: #007bff;
+            background-color: #e6f3ff;
+        }
+        .upload-mode:hover {
+            border-color: #007bff;
+        }
+        .file-list {
+            margin-top: 15px;
+            padding: 10px;
+            background-color: #f8f9fa;
+            border-radius: 5px;
+            max-height: 200px;
+            overflow-y: auto;
+        }
+        .file-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 5px 0;
+            border-bottom: 1px solid #eee;
+        }
+        .file-item:last-child {
+            border-bottom: none;
+        }
+        .remove-file {
+            color: #dc3545;
+            cursor: pointer;
+            font-weight: bold;
+        }
+        .remove-file:hover {
+            text-decoration: underline;
+        }
+        .btn {
+            background-color: #28a745;
+            color: white;
+            padding: 12px 30px;
+            border: none;
+            border-radius: 5px;
+            font-size: 16px;
+            cursor: pointer;
+            transition: background-color 0.3s;
+            width: 100%;
+        }
+        .btn:hover {
+            background-color: #218838;
+        }
+        .btn:disabled {
+            background-color: #6c757d;
+            cursor: not-allowed;
+        }
+        .progress-container {
+            margin-top: 20px;
+            display: none;
+        }
+        .progress-bar {
+            width: 100%;
+            height: 20px;
+            background-color: #e9ecef;
+            border-radius: 10px;
+            overflow: hidden;
+        }
+        .progress-fill {
+            height: 100%;
+            background-color: #28a745;
+            transition: width 0.3s ease;
+            width: 0%;
+        }
+        .progress-text {
+            text-align: center;
+            margin-top: 10px;
+            font-weight: 600;
+        }
+        .error {
+            color: #dc3545;
+            background-color: #f8d7da;
+            border: 1px solid #f5c6cb;
+            padding: 10px;
+            border-radius: 5px;
+            margin-top: 10px;
+        }
+        .success {
+            color: #155724;
+            background-color: #d4edda;
+            border: 1px solid #c3e6cb;
+            padding: 10px;
+            border-radius: 5px;
+            margin-top: 10px;
+        }
+        .help-text {
+            font-size: 12px;
+            color: #6c757d;
+            margin-top: 5px;
+        }
+        .folder-instructions {
+            background-color: #fff3cd;
+            border: 1px solid #ffeaa7;
+            padding: 10px;
+            border-radius: 5px;
+            margin-top: 10px;
+            font-size: 14px;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>🤗 HuggingFace Uploader</h1>
+        
+        <form id="uploadForm" enctype="multipart/form-data">
+            <div class="form-group">
+                <label for="hf_token">HuggingFace Token:</label>
+                <input type="password" id="hf_token" name="hf_token" required 
+                       placeholder="hf_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx">
+                <div class="help-text">Get your token from: https://huggingface.co/settings/tokens</div>
+            </div>
+            
+            <div class="form-group">
+                <label for="repo_id">Repository ID:</label>
+                <input type="text" id="repo_id" name="repo_id" required 
+                       placeholder="your-username/repository-name">
+                <div class="help-text">Format: username/repository-name</div>
+            </div>
+            
+            <div class="form-group">
+                <label for="repo_type">Repository Type:</label>
+                <select id="repo_type" name="repo_type">
+                    <option value="space">Space</option>
+                    <option value="model">Model</option>
+                    <option value="dataset">Dataset</option>
+                </select>
+            </div>
+            
+            <div class="form-group">
+                <label for="commit_message">Commit Message:</label>
+                <textarea id="commit_message" name="commit_message" rows="2" 
+                          placeholder="Upload via Flask App">Upload via Flask App</textarea>
+            </div>
+            
+            <div class="form-group">
+                <label>Upload Type:</label>
+                <div class="upload-modes">
+                    <div class="upload-mode active" data-mode="folder">
+                        📁 Folder
+                    </div>
+                    <div class="upload-mode" data-mode="files">
+                        📄 Files
+                    </div>
+                    <div class="upload-mode" data-mode="zip">
+                        📦 ZIP Archive
+                    </div>
+                </div>
+            </div>
+            
+            <div class="form-group">
+                <label>Select Files:</label>
+                <div class="file-input-container" id="fileInputContainer">
+                    <label for="files" class="file-input-label">
+                        📎 Choose Files or Drag & Drop
+                    </label>
+                    <input type="file" id="files" name="files" multiple webkitdirectory style="display: none;">
+                    <div id="uploadInstructions">
+                        <p>📁 <strong>Folder Mode:</strong> Click "Choose Files" and select a folder to upload all its contents</p>
+                        <p>All files and subdirectories will be uploaded maintaining the folder structure</p>
+                    </div>
+                </div>
+                <div class="folder-instructions">
+                    <strong>Note:</strong> When uploading folders, the browser will ask you to select a folder. 
+                    All files in the selected folder (including subfolders) will be uploaded to your HuggingFace repository with the same directory structure.
+                </div>
+                <div id="fileList" class="file-list" style="display: none;"></div>
+            </div>
+            
+            <button type="submit" class="btn" id="uploadBtn">🚀 Upload to HuggingFace</button>
+        </form>
+        
+        <div class="progress-container" id="progressContainer">
+            <div class="progress-bar">
+                <div class="progress-fill" id="progressFill"></div>
+            </div>
+            <div class="progress-text" id="progressText">Starting upload...</div>
+        </div>
+        
+        <div id="message"></div>
+    </div>
+
+    <script>
+        let selectedFiles = [];
+        let currentMode = 'folder';
+        
+        // Upload mode switching
+        document.querySelectorAll('.upload-mode').forEach(mode => {
+            mode.addEventListener('click', function() {
+                document.querySelectorAll('.upload-mode').forEach(m => m.classList.remove('active'));
+                this.classList.add('active');
+                currentMode = this.dataset.mode;
+                
+                const fileInput = document.getElementById('files');
+                const instructions = document.getElementById('uploadInstructions');
+                
+                if (currentMode === 'zip') {
+                    fileInput.removeAttribute('webkitdirectory');
+                    fileInput.removeAttribute('multiple');
+                    fileInput.setAttribute('accept', '.zip');
+                    instructions.innerHTML = '<p>📦 Select a ZIP file to upload</p>';
+                } else if (currentMode === 'folder') {
+                    fileInput.setAttribute('webkitdirectory', '');
+                    fileInput.setAttribute('multiple', '');
+                    fileInput.removeAttribute('accept');
+                    instructions.innerHTML = `
+                        <p>📁 <strong>Folder Mode:</strong> Click "Choose Files" and select a folder to upload all its contents</p>
+                        <p>All files and subdirectories will be uploaded maintaining the folder structure</p>
+                    `;
+                } else {
+                    fileInput.removeAttribute('webkitdirectory');
+                    fileInput.setAttribute('multiple', '');
+                    fileInput.removeAttribute('accept');
+                    instructions.innerHTML = `
+                        <p>📄 <strong>Files Mode:</strong> Select one or more individual files</p>
+                        <p>Files will be uploaded to the root of your repository</p>
+                    `;
+                }
+                
+                // Clear previous selections
+                selectedFiles = [];
+                updateFileList();
+            });
+        });
+        
+        // File input handling
+        const fileInput = document.getElementById('files');
+        const fileInputContainer = document.getElementById('fileInputContainer');
+        const fileList = document.getElementById('fileList');
+        
+        fileInput.addEventListener('change', function(e) {
+            selectedFiles = Array.from(e.target.files);
+            updateFileList();
+        });
+        
+        // Drag and drop handling
+        fileInputContainer.addEventListener('dragover', function(e) {
+            e.preventDefault();
+            fileInputContainer.classList.add('drag-over');
+        });
+        
+        fileInputContainer.addEventListener('dragleave', function(e) {
+            e.preventDefault();
+            fileInputContainer.classList.remove('drag-over');
+        });
+        
+        fileInputContainer.addEventListener('drop', function(e) {
+            e.preventDefault();
+            fileInputContainer.classList.remove('drag-over');
+            
+            const items = Array.from(e.dataTransfer.items);
+            selectedFiles = [];
+            
+            items.forEach(item => {
+                if (item.kind === 'file') {
+                    selectedFiles.push(item.getAsFile());
+                }
+            });
+            
+            updateFileList();
+        });
+        
+        function updateFileList() {
+            if (selectedFiles.length === 0) {
+                fileList.style.display = 'none';
+                return;
+            }
+            
+            fileList.style.display = 'block';
+            fileList.innerHTML = '';
+            
+            selectedFiles.forEach((file, index) => {
+                const fileItem = document.createElement('div');
+                fileItem.className = 'file-item';
+                const displayName = file.webkitRelativePath || file.name;
+                fileItem.innerHTML = `
+                    <span>📄 ${displayName} (${formatFileSize(file.size)})</span>
+                    <span class="remove-file" onclick="removeFile(${index})">✕</span>
+                `;
+                fileList.appendChild(fileItem);
+            });
+        }
+        
+        function removeFile(index) {
+            selectedFiles.splice(index, 1);
+            updateFileList();
+        }
+        
+        function formatFileSize(bytes) {
+            if (bytes === 0) return '0 Bytes';
+            const k = 1024;
+            const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+            const i = Math.floor(Math.log(bytes) / Math.log(k));
+            return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+        }
+        
+        // Form submission
+        document.getElementById('uploadForm').addEventListener('submit', function(e) {
+            e.preventDefault();
+            
+            if (selectedFiles.length === 0) {
+                showMessage('Please select files to upload', 'error');
+                return;
+            }
+            
+            const formData = new FormData();
+            formData.append('hf_token', document.getElementById('hf_token').value);
+            formData.append('repo_id', document.getElementById('repo_id').value);
+            formData.append('repo_type', document.getElementById('repo_type').value);
+            formData.append('commit_message', document.getElementById('commit_message').value);
+            
+            // Add files to form data
+            selectedFiles.forEach(file => {
+                formData.append('files', file);
+            });
+            
+            // Show progress
+            document.getElementById('progressContainer').style.display = 'block';
+            document.getElementById('uploadBtn').disabled = true;
+            document.getElementById('uploadBtn').textContent = 'Uploading...';
+            
+            fetch('/upload', {
+                method: 'POST',
+                body: formData
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.success) {
+                    showMessage(data.message, 'success');
+                    checkProgress(data.upload_id);
+                } else {
+                    showMessage(data.error || 'Upload failed', 'error');
+                    resetForm();
+                }
+            })
+            .catch(error => {
+                showMessage('Error: ' + error.message, 'error');
+                resetForm();
+            });
+        });
+        
+        function checkProgress(uploadId) {
+            const progressFill = document.getElementById('progressFill');
+            const progressText = document.getElementById('progressText');
+            
+            const interval = setInterval(() => {
+                fetch(`/progress/${uploadId}`)
+                .then(response => response.json())
+                .then(data => {
+                    progressFill.style.width = data.progress + '%';
+                    progressText.textContent = data.status;
+                    
+                    if (data.completed || data.progress === 100) {
+                        clearInterval(interval);
+                        if (data.status.includes('Error')) {
+                            showMessage(data.status, 'error');
+                        } else {
+                            showMessage('Upload completed successfully! 🎉', 'success');
+                        }
+                        resetForm();
+                    }
+                })
+                .catch(error => {
+                    clearInterval(interval);
+                    showMessage('Error checking progress: ' + error.message, 'error');
+                    resetForm();
+                });
+            }, 2000);
+        }
+        
+        function showMessage(message, type) {
+            const messageDiv = document.getElementById('message');
+            messageDiv.className = type;
+            messageDiv.textContent = message;
+            messageDiv.style.display = 'block';
+        }
+        
+        function resetForm() {
+            document.getElementById('uploadBtn').disabled = false;
+            document.getElementById('uploadBtn').textContent = '🚀 Upload to HuggingFace';
+            document.getElementById('progressContainer').style.display = 'none';
+            document.getElementById('progressFill').style.width = '0%';
+        }
+    </script>
+</body>
+</html>

huggingface-uploader/templates/index1.html

@@ -0,0 +1,481 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>HuggingFace Uploader</title>
+    <style>
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            background-color: #f8f9fa;
+        }
+        .container {
+            background: white;
+            padding: 30px;
+            border-radius: 10px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+        }
+        h1 {
+            color: #333;
+            text-align: center;
+            margin-bottom: 30px;
+        }
+        .form-group {
+            margin-bottom: 20px;
+        }
+        label {
+            display: block;
+            margin-bottom: 5px;
+            font-weight: 600;
+            color: #555;
+        }
+        input, select, textarea {
+            width: 100%;
+            padding: 12px;
+            border: 2px solid #ddd;
+            border-radius: 5px;
+            font-size: 14px;
+            transition: border-color 0.3s;
+        }
+        input:focus, select:focus, textarea:focus {
+            outline: none;
+            border-color: #007bff;
+        }
+        .file-input-container {
+            border: 2px dashed #ddd;
+            border-radius: 5px;
+            padding: 20px;
+            text-align: center;
+            background-color: #f9f9f9;
+            transition: all 0.3s;
+        }
+        .file-input-container:hover {
+            border-color: #007bff;
+            background-color: #f0f8ff;
+        }
+        .file-input-container.drag-over {
+            border-color: #007bff;
+            background-color: #e6f3ff;
+        }
+        #files {
+            display: none;
+        }
+        .file-input-label {
+            display: inline-block;
+            background-color: #007bff;
+            color: white;
+            padding: 10px 20px;
+            border-radius: 5px;
+            cursor: pointer;
+            margin-bottom: 10px;
+            transition: background-color 0.3s;
+        }
+        .file-input-label:hover {
+            background-color: #0056b3;
+        }
+        .upload-modes {
+            display: flex;
+            gap: 10px;
+            margin-bottom: 15px;
+        }
+        .upload-mode {
+            flex: 1;
+            padding: 10px;
+            border: 2px solid #ddd;
+            border-radius: 5px;
+            text-align: center;
+            cursor: pointer;
+            transition: all 0.3s;
+        }
+        .upload-mode.active {
+            border-color: #007bff;
+            background-color: #e6f3ff;
+        }
+        .upload-mode:hover {
+            border-color: #007bff;
+        }
+        .file-list {
+            margin-top: 15px;
+            padding: 10px;
+            background-color: #f8f9fa;
+            border-radius: 5px;
+            max-height: 200px;
+            overflow-y: auto;
+        }
+        .file-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 5px 0;
+            border-bottom: 1px solid #eee;
+        }
+        .file-item:last-child {
+            border-bottom: none;
+        }
+        .remove-file {
+            color: #dc3545;
+            cursor: pointer;
+            font-weight: bold;
+        }
+        .remove-file:hover {
+            text-decoration: underline;
+        }
+        .btn {
+            background-color: #28a745;
+            color: white;
+            padding: 12px 30px;
+            border: none;
+            border-radius: 5px;
+            font-size: 16px;
+            cursor: pointer;
+            transition: background-color 0.3s;
+            width: 100%;
+        }
+        .btn:hover {
+            background-color: #218838;
+        }
+        .btn:disabled {
+            background-color: #6c757d;
+            cursor: not-allowed;
+        }
+        .progress-container {
+            margin-top: 20px;
+            display: none;
+        }
+        .progress-bar {
+            width: 100%;
+            height: 20px;
+            background-color: #e9ecef;
+            border-radius: 10px;
+            overflow: hidden;
+        }
+        .progress-fill {
+            height: 100%;
+            background-color: #28a745;
+            transition: width 0.3s ease;
+            width: 0%;
+        }
+        .progress-text {
+            text-align: center;
+            margin-top: 10px;
+            font-weight: 600;
+        }
+        .error {
+            color: #dc3545;
+            background-color: #f8d7da;
+            border: 1px solid #f5c6cb;
+            padding: 10px;
+            border-radius: 5px;
+            margin-top: 10px;
+        }
+        .success {
+            color: #155724;
+            background-color: #d4edda;
+            border: 1px solid #c3e6cb;
+            padding: 10px;
+            border-radius: 5px;
+            margin-top: 10px;
+        }
+        .help-text {
+            font-size: 12px;
+            color: #6c757d;
+            margin-top: 5px;
+        }
+        .folder-instructions {
+            background-color: #fff3cd;
+            border: 1px solid #ffeaa7;
+            padding: 10px;
+            border-radius: 5px;
+            margin-top: 10px;
+            font-size: 14px;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>🤗 HuggingFace Uploader</h1>
+        
+        <form id="uploadForm" enctype="multipart/form-data">
+            <div class="form-group">
+                <label for="hf_token">HuggingFace Token:</label>
+                <input type="password" id="hf_token" name="hf_token" required 
+                       placeholder="hf_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx">
+                <div class="help-text">Get your token from: https://huggingface.co/settings/tokens</div>
+            </div>
+            
+            <div class="form-group">
+                <label for="repo_id">Repository ID:</label>
+                <input type="text" id="repo_id" name="repo_id" required 
+                       placeholder="your-username/repository-name">
+                <div class="help-text">Format: username/repository-name</div>
+            </div>
+            
+            <div class="form-group">
+                <label for="repo_type">Repository Type:</label>
+                <select id="repo_type" name="repo_type">
+                    <option value="space">Space</option>
+                    <option value="model">Model</option>
+                    <option value="dataset">Dataset</option>
+                </select>
+            </div>
+            
+            <div class="form-group">
+                <label for="commit_message">Commit Message:</label>
+                <textarea id="commit_message" name="commit_message" rows="2" 
+                          placeholder="Upload via Flask App">Upload via Flask App</textarea>
+            </div>
+            
+            <div class="form-group">
+                <label>Upload Type:</label>
+                <div class="upload-modes">
+                    <div class="upload-mode active" data-mode="folder">
+                        📁 Folder
+                    </div>
+                    <div class="upload-mode" data-mode="files">
+                        📄 Files
+                    </div>
+                    <div class="upload-mode" data-mode="zip">
+                        📦 ZIP Archive
+                    </div>
+                </div>
+            </div>
+            
+            <div class="form-group">
+                <label>Select Files:</label>
+                <div class="file-input-container" id="fileInputContainer">
+                    <label for="files" class="file-input-label">
+                        📎 Choose Files or Drag & Drop
+                    </label>
+                    <input type="file" id="files" name="files" multiple webkitdirectory style="display: none;">
+                    <div id="uploadInstructions">
+                        <p>📁 <strong>Folder Mode:</strong> Click "Choose Files" and select a folder to upload all its contents</p>
+                        <p>All files and subdirectories will be uploaded maintaining the folder structure</p>
+                    </div>
+                </div>
+                <div class="folder-instructions">
+                    <strong>Note:</strong> When uploading folders, the browser will ask you to select a folder. 
+                    All files in the selected folder (including subfolders) will be uploaded to your HuggingFace repository with the same directory structure.
+                </div>
+                <div id="fileList" class="file-list" style="display: none;"></div>
+            </div>
+            
+            <button type="submit" class="btn" id="uploadBtn">🚀 Upload to HuggingFace</button>
+        </form>
+        
+        <div class="progress-container" id="progressContainer">
+            <div class="progress-bar">
+                <div class="progress-fill" id="progressFill"></div>
+            </div>
+            <div class="progress-text" id="progressText">Starting upload...</div>
+        </div>
+        
+        <div id="message"></div>
+    </div>
+
+    <script>
+        let selectedFiles = [];
+        let currentMode = 'folder';
+        
+        // Upload mode switching
+        document.querySelectorAll('.upload-mode').forEach(mode => {
+            mode.addEventListener('click', function() {
+                document.querySelectorAll('.upload-mode').forEach(m => m.classList.remove('active'));
+                this.classList.add('active');
+                currentMode = this.dataset.mode;
+                
+                const fileInput = document.getElementById('files');
+                const instructions = document.getElementById('uploadInstructions');
+                
+                if (currentMode === 'zip') {
+                    fileInput.removeAttribute('webkitdirectory');
+                    fileInput.removeAttribute('multiple');
+                    fileInput.setAttribute('accept', '.zip');
+                    instructions.innerHTML = '<p>📦 Select a ZIP file to upload</p>';
+                } else if (currentMode === 'folder') {
+                    fileInput.setAttribute('webkitdirectory', '');
+                    fileInput.setAttribute('multiple', '');
+                    fileInput.removeAttribute('accept');
+                    instructions.innerHTML = `
+                        <p>📁 <strong>Folder Mode:</strong> Click "Choose Files" and select a folder to upload all its contents</p>
+                        <p>All files and subdirectories will be uploaded maintaining the folder structure</p>
+                    `;
+                } else {
+                    fileInput.removeAttribute('webkitdirectory');
+                    fileInput.setAttribute('multiple', '');
+                    fileInput.removeAttribute('accept');
+                    instructions.innerHTML = `
+                        <p>📄 <strong>Files Mode:</strong> Select one or more individual files</p>
+                        <p>Files will be uploaded to the root of your repository</p>
+                    `;
+                }
+                
+                // Clear previous selections
+                selectedFiles = [];
+                updateFileList();
+            });
+        });
+        
+        // File input handling
+        const fileInput = document.getElementById('files');
+        const fileInputContainer = document.getElementById('fileInputContainer');
+        const fileList = document.getElementById('fileList');
+        
+        fileInput.addEventListener('change', function(e) {
+            selectedFiles = Array.from(e.target.files);
+            updateFileList();
+        });
+        
+        // Drag and drop handling
+        fileInputContainer.addEventListener('dragover', function(e) {
+            e.preventDefault();
+            fileInputContainer.classList.add('drag-over');
+        });
+        
+        fileInputContainer.addEventListener('dragleave', function(e) {
+            e.preventDefault();
+            fileInputContainer.classList.remove('drag-over');
+        });
+        
+        fileInputContainer.addEventListener('drop', function(e) {
+            e.preventDefault();
+            fileInputContainer.classList.remove('drag-over');
+            
+            const items = Array.from(e.dataTransfer.items);
+            selectedFiles = [];
+            
+            items.forEach(item => {
+                if (item.kind === 'file') {
+                    selectedFiles.push(item.getAsFile());
+                }
+            });
+            
+            updateFileList();
+        });
+        
+        function updateFileList() {
+            if (selectedFiles.length === 0) {
+                fileList.style.display = 'none';
+                return;
+            }
+            
+            fileList.style.display = 'block';
+            fileList.innerHTML = '';
+            
+            selectedFiles.forEach((file, index) => {
+                const fileItem = document.createElement('div');
+                fileItem.className = 'file-item';
+                const displayName = file.webkitRelativePath || file.name;
+                fileItem.innerHTML = `
+                    <span>📄 ${displayName} (${formatFileSize(file.size)})</span>
+                    <span class="remove-file" onclick="removeFile(${index})">✕</span>
+                `;
+                fileList.appendChild(fileItem);
+            });
+        }
+        
+        function removeFile(index) {
+            selectedFiles.splice(index, 1);
+            updateFileList();
+        }
+        
+        function formatFileSize(bytes) {
+            if (bytes === 0) return '0 Bytes';
+            const k = 1024;
+            const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+            const i = Math.floor(Math.log(bytes) / Math.log(k));
+            return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+        }
+        
+        // Form submission
+        document.getElementById('uploadForm').addEventListener('submit', function(e) {
+            e.preventDefault();
+            
+            if (selectedFiles.length === 0) {
+                showMessage('Please select files to upload', 'error');
+                return;
+            }
+            
+            const formData = new FormData();
+            formData.append('hf_token', document.getElementById('hf_token').value);
+            formData.append('repo_id', document.getElementById('repo_id').value);
+            formData.append('repo_type', document.getElementById('repo_type').value);
+            formData.append('commit_message', document.getElementById('commit_message').value);
+            
+            // Add files to form data
+            selectedFiles.forEach(file => {
+                formData.append('files', file);
+            });
+            
+            // Show progress
+            document.getElementById('progressContainer').style.display = 'block';
+            document.getElementById('uploadBtn').disabled = true;
+            document.getElementById('uploadBtn').textContent = 'Uploading...';
+            
+            fetch('/upload', {
+                method: 'POST',
+                body: formData
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.success) {
+                    showMessage(data.message, 'success');
+                    checkProgress(data.upload_id);
+                } else {
+                    showMessage(data.error || 'Upload failed', 'error');
+                    resetForm();
+                }
+            })
+            .catch(error => {
+                showMessage('Error: ' + error.message, 'error');
+                resetForm();
+            });
+        });
+        
+        function checkProgress(uploadId) {
+            const progressFill = document.getElementById('progressFill');
+            const progressText = document.getElementById('progressText');
+            
+            const interval = setInterval(() => {
+                fetch(`/progress/${uploadId}`)
+                .then(response => response.json())
+                .then(data => {
+                    progressFill.style.width = data.progress + '%';
+                    progressText.textContent = data.status;
+                    
+                    if (data.completed || data.progress === 100) {
+                        clearInterval(interval);
+                        if (data.status.includes('Error')) {
+                            showMessage(data.status, 'error');
+                        } else {
+                            showMessage('Upload completed successfully! 🎉', 'success');
+                        }
+                        resetForm();
+                    }
+                })
+                .catch(error => {
+                    clearInterval(interval);
+                    showMessage('Error checking progress: ' + error.message, 'error');
+                    resetForm();
+                });
+            }, 2000);
+        }
+        
+        function showMessage(message, type) {
+            const messageDiv = document.getElementById('message');
+            messageDiv.className = type;
+            messageDiv.textContent = message;
+            messageDiv.style.display = 'block';
+        }
+        
+        function resetForm() {
+            document.getElementById('uploadBtn').disabled = false;
+            document.getElementById('uploadBtn').textContent = '🚀 Upload to HuggingFace';
+            document.getElementById('progressContainer').style.display = 'none';
+            document.getElementById('progressFill').style.width = '0%';
+        }
+    </script>
+</body>
+</html>

huggingface-uploader/templates/index2.html

@@ -0,0 +1,962 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>🤗 HuggingFace Uploader Pro</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            padding: 20px;
+        }
+        
+        .container {
+            max-width: 900px;
+            margin: 0 auto;
+            background: white;
+            border-radius: 20px;
+            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
+            overflow: hidden;
+        }
+        
+        .header {
+            background: linear-gradient(135deg, #ff6b6b 0%, #feca57 100%);
+            color: white;
+            padding: 30px;
+            text-align: center;
+        }
+        
+        .header h1 {
+            font-size: 2.5em;
+            margin-bottom: 10px;
+            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
+        }
+        
+        .header p {
+            font-size: 1.1em;
+            opacity: 0.9;
+        }
+        
+        .content {
+            padding: 40px;
+        }
+        
+        .tabs {
+            display: flex;
+            margin-bottom: 30px;
+            border-bottom: 2px solid #f0f0f0;
+        }
+        
+        .tab {
+            padding: 15px 25px;
+            cursor: pointer;
+            border: none;
+            background: none;
+            font-size: 16px;
+            font-weight: 600;
+            color: #666;
+            border-bottom: 3px solid transparent;
+            transition: all 0.3s ease;
+        }
+        
+        .tab.active {
+            color: #007bff;
+            border-bottom-color: #007bff;
+        }
+        
+        .tab:hover {
+            background-color: #f8f9fa;
+        }
+        
+        .tab-content {
+            display: none;
+        }
+        
+        .tab-content.active {
+            display: block;
+        }
+        
+        .form-group {
+            margin-bottom: 25px;
+        }
+        
+        .form-row {
+            display: flex;
+            gap: 20px;
+        }
+        
+        .form-row .form-group {
+            flex: 1;
+        }
+        
+        label {
+            display: block;
+            margin-bottom: 8px;
+            font-weight: 600;
+            color: #333;
+            font-size: 14px;
+        }
+        
+        input, select, textarea {
+            width: 100%;
+            padding: 12px 16px;
+            border: 2px solid #e1e5e9;
+            border-radius: 8px;
+            font-size: 14px;
+            transition: all 0.3s ease;
+            background-color: #fff;
+        }
+        
+        input:focus, select:focus, textarea:focus {
+            outline: none;
+            border-color: #007bff;
+            box-shadow: 0 0 0 3px rgba(0,123,255,0.1);
+        }
+        
+        .checkbox-group {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        
+        .checkbox-group input[type="checkbox"] {
+            width: auto;
+            margin: 0;
+        }
+        
+        .file-upload-section {
+            background: #f8f9fa;
+            border-radius: 12px;
+            padding: 30px;
+            margin: 25px 0;
+            border: 2px dashed #dee2e6;
+            transition: all 0.3s ease;
+        }
+        
+        .file-upload-section.drag-over {
+            border-color: #007bff;
+            background-color: #e6f3ff;
+            transform: scale(1.02);
+        }
+        
+        .upload-modes {
+            display: flex;
+            gap: 15px;
+            margin-bottom: 25px;
+        }
+        
+        .upload-mode {
+            flex: 1;
+            padding: 20px;
+            border: 2px solid #e1e5e9;
+            border-radius: 12px;
+            text-align: center;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            background: white;
+        }
+        
+        .upload-mode.active {
+            border-color: #007bff;
+            background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
+            color: white;
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(0,123,255,0.3);
+        }
+        
+        .upload-mode:hover:not(.active) {
+            border-color: #007bff;
+            transform: translateY(-1px);
+        }
+        
+        .upload-mode .icon {
+            font-size: 2em;
+            margin-bottom: 10px;
+        }
+        
+        .upload-mode .title {
+            font-weight: 600;
+            margin-bottom: 5px;
+        }
+        
+        .upload-mode .description {
+            font-size: 12px;
+            opacity: 0.8;
+        }
+        
+        .file-input-container {
+            text-align: center;
+            padding: 40px;
+            background: white;
+            border-radius: 12px;
+            border: 2px dashed #dee2e6;
+            transition: all 0.3s ease;
+        }
+        
+        .file-input-container:hover {
+            border-color: #007bff;
+            background-color: #f8f9ff;
+        }
+        
+        .file-input-label {
+            display: inline-block;
+            background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
+            color: white;
+            padding: 15px 30px;
+            border-radius: 50px;
+            cursor: pointer;
+            font-weight: 600;
+            transition: all 0.3s ease;
+            margin-bottom: 15px;
+        }
+        
+        .file-input-label:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(0,123,255,0.3);
+        }
+        
+        .file-list {
+            margin-top: 20px;
+            max-height: 300px;
+            overflow-y: auto;
+            background: white;
+            border-radius: 8px;
+            border: 1px solid #e1e5e9;
+        }
+        
+        .file-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 12px 16px;
+            border-bottom: 1px solid #f0f0f0;
+            transition: background-color 0.2s ease;
+        }
+        
+        .file-item:last-child {
+            border-bottom: none;
+        }
+        
+        .file-item:hover {
+            background-color: #f8f9fa;
+        }
+        
+        .file-info {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        
+        .file-icon {
+            font-size: 1.2em;
+        }
+        
+        .file-name {
+            font-weight: 500;
+            color: #333;
+        }
+        
+        .file-size {
+            color: #666;
+            font-size: 0.9em;
+        }
+        
+        .remove-file {
+            background: #ff4757;
+            color: white;
+            border: none;
+            border-radius: 50%;
+            width: 24px;
+            height: 24px;
+            cursor: pointer;
+            font-size: 12px;
+            transition: all 0.2s ease;
+        }
+        
+        .remove-file:hover {
+            background: #ff3742;
+            transform: scale(1.1);
+        }
+        
+        .upload-btn {
+            background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
+            color: white;
+            border: none;
+            padding: 15px 40px;
+            border-radius: 50px;
+            font-size: 16px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            width: 100%;
+            margin-top: 20px;
+        }
+        
+        .upload-btn:hover:not(:disabled) {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(40,167,69,0.3);
+        }
+        
+        .upload-btn:disabled {
+            opacity: 0.6;
+            cursor: not-allowed;
+        }
+        
+        .progress-container {
+            margin-top: 20px;
+            display: none;
+        }
+        
+        .progress-bar {
+            width: 100%;
+            height: 20px;
+            background: #e1e5e9;
+            border-radius: 10px;
+            overflow: hidden;
+            position: relative;
+        }
+        
+        .progress-fill {
+            height: 100%;
+            background: linear-gradient(90deg, #007bff 0%, #0056b3 100%);
+            width: 0%;
+            transition: width 0.3s ease;
+            position: relative;
+        }
+        
+        .progress-text {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            color: white;
+            font-weight: 600;
+            font-size: 12px;
+            text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
+        }
+        
+        .status-text {
+            margin-top: 10px;
+            text-align: center;
+            color: #666;
+            font-size: 14px;
+        }
+        
+        .alert {
+            padding: 15px 20px;
+            border-radius: 8px;
+            margin-bottom: 20px;
+            font-weight: 500;
+        }
+        
+        .alert-success {
+            background: #d4edda;
+            color: #155724;
+            border: 1px solid #c3e6cb;
+        }
+        
+        .alert-error {
+            background: #f8d7da;
+            color: #721c24;
+            border: 1px solid #f5c6cb;
+        }
+        
+        .alert-info {
+            background: #d1ecf1;
+            color: #0c5460;
+            border: 1px solid #bee5eb;
+        }
+        
+        .history-item {
+            background: #f8f9fa;
+            border-radius: 8px;
+            padding: 15px;
+            margin-bottom: 15px;
+            border-left: 4px solid #007bff;
+        }
+        
+        .history-item.success {
+            border-left-color: #28a745;
+        }
+        
+        .history-item.error {
+            border-left-color: #dc3545;
+        }
+        
+        .history-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 8px;
+        }
+        
+        .history-repo {
+            font-weight: 600;
+            color: #333;
+        }
+        
+        .history-time {
+            color: #666;
+            font-size: 0.9em;
+        }
+        
+        .history-status {
+            display: flex;
+            align-items: center;
+            gap: 5px;
+        }
+        
+        .status-badge {
+            padding: 4px 8px;
+            border-radius: 12px;
+            font-size: 0.8em;
+            font-weight: 600;
+        }
+        
+        .status-badge.success {
+            background: #d4edda;
+            color: #155724;
+        }
+        
+        .status-badge.error {
+            background: #f8d7da;
+            color: #721c24;
+        }
+        
+        .help-text {
+            font-size: 0.9em;
+            color: #666;
+            margin-top: 5px;
+        }
+        
+        .help-section {
+            margin-bottom: 30px;
+        }
+        
+        .help-section h4 {
+            color: #333;
+            margin-bottom: 15px;
+            font-size: 1.2em;
+        }
+        
+        .help-section ul, .help-section ol {
+            margin-left: 20px;
+            margin-bottom: 15px;
+        }
+        
+        .help-section li {
+            margin-bottom: 8px;
+            line-height: 1.5;
+        }
+        
+        .help-section code {
+            background: #f8f9fa;
+            padding: 2px 6px;
+            border-radius: 4px;
+            font-family: 'Courier New', monospace;
+            font-size: 0.9em;
+        }
+        
+        .help-section a {
+            color: #007bff;
+            text-decoration: none;
+        }
+        
+        .help-section a:hover {
+            text-decoration: underline;
+        }
+        
+        .hidden {
+            display: none;
+        }
+        
+        @media (max-width: 768px) {
+            .form-row {
+                flex-direction: column;
+            }
+            
+            .upload-modes {
+                flex-direction: column;
+            }
+            
+            .tabs {
+                flex-wrap: wrap;
+            }
+            
+            .tab {
+                flex: 1;
+                min-width: 120px;
+            }
+            
+            .container {
+                margin: 10px;
+            }
+            
+            .content {
+                padding: 20px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1>🤗 HuggingFace Uploader Pro</h1>
+            <p>Upload your files and folders to HuggingFace Hub with ease</p>
+        </div>
+        
+        <div class="content">
+            <div class="tabs">
+                <button class="tab active" onclick="showTab('upload')">📤 Upload</button>
+                <button class="tab" onclick="showTab('history')">📊 History</button>
+                <button class="tab" onclick="showTab('help')">❓ Help</button>
+            </div>
+            
+            <div id="upload" class="tab-content active">
+                <form id="uploadForm" enctype="multipart/form-data">
+                    <div class="form-row">
+                        <div class="form-group">
+                            <label for="hf_token">HuggingFace Token *</label>
+                            <input type="password" id="hf_token" name="hf_token" required 
+                                   placeholder="hf_xxxxxxxxxxxx">
+                            <div class="help-text">Get your token from <a href="https://huggingface.co/settings/tokens" target="_blank">HuggingFace Settings</a></div>
+                        </div>
+                        <div class="form-group">
+                            <label for="repo_id">Repository ID *</label>
+                            <input type="text" id="repo_id" name="repo_id" required 
+                                   placeholder="username/repository-name">
+                            <div class="help-text">Format: username/repository-name</div>
+                        </div>
+                    </div>
+                    
+                    <div class="form-row">
+                        <div class="form-group">
+                            <label for="repo_type">Repository Type</label>
+                            <select id="repo_type" name="repo_type">
+                                <option value="space">Space</option>
+                                <option value="model">Model</option>
+                                <option value="dataset">Dataset</option>
+                            </select>
+                        </div>
+                        <div class="form-group">
+                            <label for="commit_message">Commit Message</label>
+                            <input type="text" id="commit_message" name="commit_message" 
+                                   placeholder="Upload via HuggingFace Uploader Pro">
+                        </div>
+                    </div>
+                    
+                    <div class="form-group">
+                        <div class="checkbox-group">
+                            <input type="checkbox" id="create_repo" name="create_repo">
+                            <label for="create_repo">Create repository if it doesn't exist</label>
+                        </div>
+                    </div>
+                    
+                    <div class="file-upload-section" id="dropZone">
+                        <div class="upload-modes">
+                            <div class="upload-mode active" id="fileMode" onclick="setUploadMode('file')">
+                                <div class="icon">📄</div>
+                                <div class="title">Files</div>
+                                <div class="description">Upload individual files or archives</div>
+                            </div>
+                            <div class="upload-mode" id="folderMode" onclick="setUploadMode('folder')">
+                                <div class="icon">📁</div>
+                                <div class="title">Folder</div>
+                                <div class="description">Upload entire folder structure</div>
+                            </div>
+                        </div>
+                        
+                        <div class="file-input-container">
+                            <label for="fileInput" class="file-input-label">
+                                <span id="uploadModeText">📤 Choose Files</span>
+                            </label>
+                            <input type="file" id="fileInput" name="files" multiple style="display: none;">
+                            <div id="dragText">or drag and drop files here</div>
+                        </div>
+                        
+                        <div id="fileList" class="file-list hidden"></div>
+                    </div>
+                    
+                    <button type="submit" class="upload-btn" id="uploadBtn">
+                        🚀 Upload to HuggingFace
+                    </button>
+                    
+                    <div class="progress-container" id="progressContainer">
+                        <div class="progress-bar">
+                            <div class="progress-fill" id="progressFill">
+                                <div class="progress-text" id="progressText">0%</div>
+                            </div>
+                        </div>
+                        <div class="status-text" id="statusText">Preparing upload...</div>
+                    </div>
+                </form>
+                
+                <div id="alertContainer"></div>
+            </div>
+            
+            <div id="history" class="tab-content">
+                <h3>Upload History</h3>
+                <div id="historyList">
+                    <div class="alert-info">No upload history available.</div>
+                </div>
+            </div>
+            
+            <div id="help" class="tab-content">
+                <div class="help-section">
+                    <h4>🚀 Getting Started</h4>
+                    <ol>
+                        <li>Get your HuggingFace token from <a href="https://huggingface.co/settings/tokens" target="_blank">Settings</a></li>
+                        <li>Enter your repository ID in the format: <code>username/repository-name</code></li>
+                        <li>Select the repository type (Space, Model, or Dataset)</li>
+                        <li>Choose your files or folders to upload</li>
+                        <li>Click "Upload to HuggingFace" and wait for completion</li>
+                    </ol>
+                </div>
+                
+                <div class="help-section">
+                    <h4>📁 Supported File Types</h4>
+                    <ul>
+                        <li><strong>Code:</strong> .py, .js, .html, .css, .json, .md, .yaml, .yml, .toml, .ini, .cfg</li>
+                        <li><strong>Documents:</strong> .txt, .pdf, .docx, .csv, .xml</li>
+                        <li><strong>Images:</strong> .png, .jpg, .jpeg, .gif, .svg, .ico, .webp</li>
+                        <li><strong>Media:</strong> .mp4, .webm, .ogg, .mp3, .wav, .flac, .aac</li>
+                        <li><strong>Archives:</strong> .zip, .tar, .gz, .tgz (automatically extracted)</li>
+                        <li><strong>ML Models:</strong> .pkl, .h5, .hdf5, .pt, .pth, .onnx, .pb, .tflite, .safetensors</li>
+                        <li><strong>Notebooks:</strong> .ipynb</li>
+                        <li><strong>Fonts:</strong> .woff, .woff2, .ttf, .otf, .eot</li>
+                    </ul>
+                </div>
+                
+                <div class="help-section">
+                    <h4>🔧 Features</h4>
+                    <ul>
+                        <li><strong>Drag & Drop:</strong> Simply drag files into the upload area</li>
+                        <li><strong>Folder Upload:</strong> Maintain directory structure when uploading folders</li>
+                        <li><strong>Archive Extraction:</strong> ZIP and TAR files are automatically extracted</li>
+                        <li><strong>Progress Tracking:</strong> Real-time upload progress and status</li>
+                        <li><strong>Auto Repository Creation:</strong> Create new repositories on the fly</li>
+                        <li><strong>Upload History:</strong> Track all your uploads</li>
+                    </ul>
+                </div>
+                
+                <div class="help-section">
+                    <h4>🛠️ Tips</h4>
+                    <ul>
+                        <li>Use descriptive commit messages for better version control</li>
+                        <li>Large files may take longer to upload - be patient!</li>
+                        <li>Check the file type restrictions before uploading</li>
+                        <li>Repository names should be lowercase with hyphens</li>
+                        <li>Make sure your HuggingFace token has write permissions</li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        let selectedFiles = [];
+        let uploadMode = 'file';
+        
+        // Tab switching
+        function showTab(tabName) {
+            // Hide all tabs
+            document.querySelectorAll('.tab-content').forEach(tab => {
+                tab.classList.remove('active');
+            });
+            document.querySelectorAll('.tab').forEach(tab => {
+                tab.classList.remove('active');
+            });
+            
+            // Show selected tab
+            document.getElementById(tabName).classList.add('active');
+            event.target.classList.add('active');
+            
+            // Load history if history tab is selected
+            if (tabName === 'history') {
+                loadHistory();
+            }
+        }
+        
+        // Upload mode switching
+        function setUploadMode(mode) {
+            uploadMode = mode;
+            document.querySelectorAll('.upload-mode').forEach(el => {
+                el.classList.remove('active');
+            });
+            document.getElementById(mode + 'Mode').classList.add('active');
+            
+            const fileInput = document.getElementById('fileInput');
+            const modeText = document.getElementById('uploadModeText');
+            
+            if (mode === 'folder') {
+                fileInput.setAttribute('webkitdirectory', '');
+                fileInput.setAttribute('directory', '');
+                modeText.textContent = '📁 Choose Folder';
+            } else {
+                fileInput.removeAttribute('webkitdirectory');
+                fileInput.removeAttribute('directory');
+                modeText.textContent = '📤 Choose Files';
+            }
+            
+            // Clear selected files when switching modes
+            selectedFiles = [];
+            updateFileList();
+        }
+        
+        // Drag and drop functionality
+        const dropZone = document.getElementById('dropZone');
+        const fileInput = document.getElementById('fileInput');
+        
+        dropZone.addEventListener('dragover', (e) => {
+            e.preventDefault();
+            dropZone.classList.add('drag-over');
+        });
+        
+        dropZone.addEventListener('dragleave', (e) => {
+            e.preventDefault();
+            dropZone.classList.remove('drag-over');
+        });
+        
+        dropZone.addEventListener('drop', (e) => {
+            e.preventDefault();
+            dropZone.classList.remove('drag-over');
+            
+            const files = Array.from(e.dataTransfer.files);
+            handleFiles(files);
+        });
+        
+        fileInput.addEventListener('change', (e) => {
+            const files = Array.from(e.target.files);
+            handleFiles(files);
+        });
+        
+        function handleFiles(files) {
+            selectedFiles = files;
+            updateFileList();
+        }
+        
+        function updateFileList() {
+            const fileList = document.getElementById('fileList');
+            
+            if (selectedFiles.length === 0) {
+                fileList.classList.add('hidden');
+                return;
+            }
+            
+            fileList.classList.remove('hidden');
+            fileList.innerHTML = '';
+            
+            selectedFiles.forEach((file, index) => {
+                const fileItem = document.createElement('div');
+                fileItem.className = 'file-item';
+                
+                const fileIcon = getFileIcon(file.name);
+                const fileSize = formatFileSize(file.size);
+                
+                fileItem.innerHTML = `
+                    <div class="file-info">
+                        <span class="file-icon">${fileIcon}</span>
+                        <span class="file-name">${file.name}</span>
+                        <span class="file-size">(${fileSize})</span>
+                    </div>
+                    <button type="button" class="remove-file" onclick="removeFile(${index})">×</button>
+                `;
+                
+                fileList.appendChild(fileItem);
+            });
+        }
+        
+        function removeFile(index) {
+            selectedFiles.splice(index, 1);
+            updateFileList();
+        }
+        
+        function getFileIcon(filename) {
+            const ext = filename.split('.').pop().toLowerCase();
+            const iconMap = {
+                'py': '🐍', 'js': '💛', 'html': '🌐', 'css': '🎨',
+                'json': '📋', 'md': '📝', 'txt': '📄', 'pdf': '📕',
+                'png': '🖼️', 'jpg': '🖼️', 'jpeg': '🖼️', 'gif': '🖼️',
+                'zip': '📦', 'tar': '📦', 'gz': '📦', 'tgz': '📦',
+                'ipynb': '📓', 'xlsx': '📊', 'csv': '📈',
+                'mp4': '🎬', 'mp3': '🎵', 'wav': '🎵'
+            };
+            return iconMap[ext] || '📄';
+        }
+        
+        function formatFileSize(bytes) {
+            if (bytes === 0) return '0 Bytes';
+            const k = 1024;
+            const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+            const i = Math.floor(Math.log(bytes) / Math.log(k));
+            return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+        }
+        
+        // Form submission
+        document.getElementById('uploadForm').addEventListener('submit', async (e) => {
+            e.preventDefault();
+            
+            if (selectedFiles.length === 0) {
+                showAlert('Please select files to upload', 'error');
+                return;
+            }
+            
+            const formData = new FormData();
+            formData.append('hf_token', document.getElementById('hf_token').value);
+            formData.append('repo_id', document.getElementById('repo_id').value);
+            formData.append('repo_type', document.getElementById('repo_type').value);
+            formData.append('commit_message', document.getElementById('commit_message').value);
+            formData.append('create_repo', document.getElementById('create_repo').checked);
+            
+            selectedFiles.forEach(file => {
+                formData.append('files', file);
+            });
+            
+            const uploadBtn = document.getElementById('uploadBtn');
+            const progressContainer = document.getElementById('progressContainer');
+            
+            uploadBtn.disabled = true;
+            uploadBtn.textContent = '⏳ Uploading...';
+            progressContainer.style.display = 'block';
+            
+            try {
+                const response = await fetch('/upload', {
+                    method: 'POST',
+                    body: formData
+                });
+                
+                const result = await response.json();
+                
+                if (response.ok) {
+                    showAlert('Upload started successfully!', 'success');
+                    pollProgress(result.upload_id);
+                } else {
+                    throw new Error(result.error || 'Upload failed');
+                }
+            } catch (error) {
+                showAlert(error.message, 'error');
+                resetUploadForm();
+            }
+        });
+        
+        function pollProgress(uploadId) {
+            const interval = setInterval(async () => {
+                try {
+                    const response = await fetch(`/progress/${uploadId}`);
+                    const data = await response.json();
+                    
+                    updateProgress(data.progress, data.status);
+                    
+                    if (data.completed || data.status.toLowerCase().includes('error')) {
+                        clearInterval(interval);
+                        resetUploadForm();
+                        
+                        if (data.completed) {
+                            showAlert('Upload completed successfully!', 'success');
+                        } else {
+                            showAlert(data.status, 'error');
+                        }
+                    }
+                } catch (error) {
+                    clearInterval(interval);
+                    resetUploadForm();
+                    showAlert('Failed to get upload progress', 'error');
+                }
+            }, 2000);
+        }
+        
+        function updateProgress(progress, status) {
+            const progressFill = document.getElementById('progressFill');
+            const progressText = document.getElementById('progressText');
+            const statusText = document.getElementById('statusText');
+            
+            progressFill.style.width = `${progress}%`;
+            progressText.textContent = `${progress}%`;
+            statusText.textContent = status;
+        }
+        
+        function resetUploadForm() {
+            const uploadBtn = document.getElementById('uploadBtn');
+            const progressContainer = document.getElementById('progressContainer');
+            
+            uploadBtn.disabled = false;
+            uploadBtn.textContent = '🚀 Upload to HuggingFace';
+            progressContainer.style.display = 'none';
+            
+            // Reset progress
+            updateProgress(0, 'Ready to upload');
+        }
+        
+        function showAlert(message, type) {
+            const alertContainer = document.getElementById('alertContainer');
+            const alertDiv = document.createElement('div');
+            alertDiv.className = `alert alert-${type}`;
+            alertDiv.textContent = message;
+            
+            alertContainer.innerHTML = '';
+            alertContainer.appendChild(alertDiv);
+            
+            // Auto-hide after 5 seconds
+            setTimeout(() => {
+                alertDiv.remove();
+            }, 5000);
+        }
+        
+        // Load upload history
+        async function loadHistory() {
+            try {
+                const response = await fetch('/history');
+                const data = await response.json();
+                const historyList = document.getElementById('historyList');
+                
+                if (data.history.length === 0) {
+                    historyList.innerHTML = '<div class="alert-info">No upload history available.</div>';
+                    return;
+                }
+                
+                historyList.innerHTML = '';
+                data.history.forEach(item => {
+                    const historyItem = document.createElement('div');
+                    historyItem.className = `history-item ${item.status}`;
+                    
+                    const timestamp = new Date(item.timestamp).toLocaleString();
+                    
+                    historyItem.innerHTML = `
+                        <div class="history-header">
+                            <span class="history-repo">${item.repo_id}</span>
+                            <span class="history-time">${timestamp}</span>
+                        </div>
+                        <div class="history-status">
+                            <span class="status-badge ${item.status}">${item.status}</span>
+                            <span>${item.repo_type}</span>
+                        </div>
+                        <div class="history-message">${item.message}</div>
+                    `;
+                    
+                    historyList.appendChild(historyItem);
+                });
+            } catch (error) {
+                document.getElementById('historyList').innerHTML = 
+                    '<div class="alert-error">Failed to load history</div>';
+            }
+        }
+        
+        // Initialize
+        document.addEventListener('DOMContentLoaded', () => {
+            // Set default upload mode
+            setUploadMode('file');
+            
+            // Load history on page load
+            loadHistory();
+        });
+    </script>
+</body>
+</html>

huggingface-uploader/test.py

@@ -0,0 +1,50 @@
+from huggingface_hub import HfApi
+import tempfile
+import os
+
+# Replace with your actual token
+HF_TOKEN = ""
+REPO_ID = "Alamgirapi/HuggingFace_Uploader"
+
+def test_token():
+    try:
+        # Initialize API
+        api = HfApi(token=HF_TOKEN)
+        
+        # Test token validity
+        print("Testing token validity...")
+        user_info = api.whoami()
+        print(f"Token valid for user: {user_info.get('name', 'Unknown')}")
+        
+        # Test if repo exists and is accessible
+        print(f"Testing repository access: {REPO_ID}")
+        repo_info = api.repo_info(repo_id=REPO_ID, repo_type="space")
+        print(f"Repository accessible: {repo_info.id}")
+        
+        # Test upload with a simple file
+        print("Testing file upload...")
+        with tempfile.NamedTemporaryFile(mode='w', suffix='.txt', delete=False) as f:
+            f.write("Test upload from Python script")
+            temp_file = f.name
+        
+        try:
+            from huggingface_hub import upload_file
+            upload_file(
+                path_or_fileobj=temp_file,
+                path_in_repo="test_upload.txt",
+                repo_id=REPO_ID,
+                repo_type="space",
+                token=HF_TOKEN,
+                commit_message="Test upload"
+            )
+            print("✅ Upload successful!")
+        finally:
+            os.unlink(temp_file)
+            
+    except Exception as e:
+        print(f"❌ Error: {str(e)}")
+        import traceback
+        traceback.print_exc()
+
+if __name__ == "__main__":
+    test_token()