Upload via Flask App

huggingface-uploader/Dockerfile

@@ -0,0 +1,25 @@
+FROM python:3.9-slim
+
+WORKDIR /app
+
+# Install system dependencies
+RUN apt-get update && apt-get install -y \
+    build-essential \
+    && rm -rf /var/lib/apt/lists/*
+
+# Copy requirements and install Python dependencies
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy application files
+COPY app.py .
+COPY templates/ templates/
+
+# Create uploads directory
+RUN mkdir -p uploads
+
+# Expose port
+EXPOSE 7860
+
+# Run the application
+CMD ["gunicorn", "--bind", "0.0.0.0:7860", "--timeout", "300", "--workers", "1", "app: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,284 @@
+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', 'dockerfile.dev', 'dockerfile.prod', 'dockerfile.test'}
+
+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"""
+    # Get just the filename without path for checking
+    basename = os.path.basename(filename).lower()
+    
+    if '.' in basename:
+        extension = basename.rsplit('.', 1)[1].lower()
+        return extension in ALLOWED_EXTENSIONS
+    else:
+        # Check if it's a known file without extension
+        return basename 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:
+                    # Check if file is allowed
+                    if not allowed_file(file.filename):
+                        logger.warning(f"File type not allowed, skipping: {file.filename}")
+                        continue
+                    
+                    # 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:
+                    logger.warning(f"File skipped: {file.filename}")
+            
+            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,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/app2.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/requirements.txt

@@ -0,0 +1,4 @@
+Flask
+huggingface-hub
+Werkzeug
+gunicorn

huggingface-uploader/templates/index.html

@@ -0,0 +1,749 @@
+<!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>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+            max-width: 900px;
+            margin: 0 auto;
+            padding: 20px;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            position: relative;
+        }
+
+        body::before {
+            content: '';
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: 
+                radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
+                radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%);
+            pointer-events: none;
+            z-index: -1;
+        }
+
+        .container {
+            background: rgba(255, 255, 255, 0.95);
+            backdrop-filter: blur(10px);
+            padding: 40px;
+            border-radius: 20px;
+            box-shadow: 
+                0 20px 40px rgba(0, 0, 0, 0.1),
+                0 0 0 1px rgba(255, 255, 255, 0.2);
+            border: 1px solid rgba(255, 255, 255, 0.3);
+            position: relative;
+            overflow: hidden;
+        }
+
+        .container::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 4px;
+            background: linear-gradient(90deg, #ff6b6b, #ffd93d, #6bcf7f, #4ecdc4, #45b7d1);
+            border-radius: 20px 20px 0 0;
+        }
+
+        h1 {
+            color: #2c3e50;
+            text-align: center;
+            margin-bottom: 40px;
+            font-size: 2.5em;
+            font-weight: 800;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        }
+
+        .form-group {
+            margin-bottom: 25px;
+            position: relative;
+        }
+
+        label {
+            display: block;
+            margin-bottom: 8px;
+            font-weight: 600;
+            color: #34495e;
+            font-size: 14px;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
+
+        input, select, textarea {
+            width: 100%;
+            padding: 16px 20px;
+            border: 2px solid #e0e6ed;
+            border-radius: 12px;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            background: rgba(255, 255, 255, 0.9);
+            backdrop-filter: blur(5px);
+        }
+
+        input:focus, select:focus, textarea:focus {
+            outline: none;
+            border-color: #667eea;
+            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+            transform: translateY(-2px);
+        }
+
+        .file-input-container {
+            border: 3px dashed #e0e6ed;
+            border-radius: 16px;
+            padding: 40px 20px;
+            text-align: center;
+            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+            transition: all 0.3s ease;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .file-input-container::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
+            transition: left 0.6s ease;
+        }
+
+        .file-input-container:hover::before {
+            left: 100%;
+        }
+
+        .file-input-container:hover {
+            border-color: #667eea;
+            background: linear-gradient(135deg, #f0f8ff 0%, #e6f3ff 100%);
+            transform: translateY(-2px);
+            box-shadow: 0 10px 30px rgba(102, 126, 234, 0.2);
+        }
+
+        .file-input-container.drag-over {
+            border-color: #667eea;
+            background: linear-gradient(135deg, #e6f3ff 0%, #d1ecf1 100%);
+            transform: scale(1.02);
+            box-shadow: 0 15px 40px rgba(102, 126, 234, 0.3);
+        }
+
+        #files {
+            display: none;
+        }
+
+        .file-input-label {
+            display: inline-block;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            padding: 16px 32px;
+            border-radius: 12px;
+            cursor: pointer;
+            margin-bottom: 15px;
+            transition: all 0.3s ease;
+            font-weight: 600;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
+            position: relative;
+            overflow: hidden;
+        }
+
+        .file-input-label::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+            transition: left 0.6s ease;
+        }
+
+        .file-input-label:hover::before {
+            left: 100%;
+        }
+
+        .file-input-label:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
+        }
+
+        .upload-modes {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 15px;
+            margin-bottom: 25px;
+        }
+
+        .upload-mode {
+            padding: 20px 15px;
+            border: 2px solid #e0e6ed;
+            border-radius: 12px;
+            text-align: center;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            font-weight: 600;
+            background: rgba(255, 255, 255, 0.9);
+            backdrop-filter: blur(5px);
+            position: relative;
+            overflow: hidden;
+        }
+
+        .upload-mode::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+
+        .upload-mode span {
+            position: relative;
+            z-index: 1;
+        }
+
+        .upload-mode.active {
+            border-color: #667eea;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            transform: translateY(-2px);
+            box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
+        }
+
+        .upload-mode:hover {
+            border-color: #667eea;
+            transform: translateY(-2px);
+            box-shadow: 0 8px 25px rgba(102, 126, 234, 0.2);
+        }
+
+        .file-list {
+            margin-top: 20px;
+            padding: 20px;
+            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+            border-radius: 12px;
+            max-height: 250px;
+            overflow-y: auto;
+            border: 1px solid rgba(0, 0, 0, 0.05);
+            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
+        }
+
+        .file-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 12px 0;
+            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+            transition: all 0.3s ease;
+        }
+
+        .file-item:last-child {
+            border-bottom: none;
+        }
+
+        .file-item:hover {
+            background: rgba(102, 126, 234, 0.05);
+            border-radius: 8px;
+            padding: 12px 10px;
+        }
+
+        .remove-file {
+            color: #e74c3c;
+            cursor: pointer;
+            font-weight: bold;
+            padding: 6px 10px;
+            border-radius: 6px;
+            transition: all 0.3s ease;
+            background: rgba(231, 76, 60, 0.1);
+        }
+
+        .remove-file:hover {
+            background: #e74c3c;
+            color: white;
+            transform: scale(1.1);
+        }
+
+        .btn {
+            background: linear-gradient(135deg, #00b894 0%, #00a085 100%);
+            color: white;
+            padding: 18px 40px;
+            border: none;
+            border-radius: 12px;
+            font-size: 18px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            width: 100%;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            box-shadow: 0 4px 15px rgba(0, 184, 148, 0.3);
+            position: relative;
+            overflow: hidden;
+        }
+
+        .btn::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+            transition: left 0.6s ease;
+        }
+
+        .btn:hover::before {
+            left: 100%;
+        }
+
+        .btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 25px rgba(0, 184, 148, 0.4);
+        }
+
+        .btn:disabled {
+            background: linear-gradient(135deg, #95a5a6 0%, #7f8c8d 100%);
+            cursor: not-allowed;
+            transform: none;
+            box-shadow: none;
+        }
+
+        .progress-container {
+            margin-top: 30px;
+            display: none;
+        }
+
+        .progress-bar {
+            width: 100%;
+            height: 12px;
+            background: linear-gradient(135deg, #ecf0f1 0%, #bdc3c7 100%);
+            border-radius: 6px;
+            overflow: hidden;
+            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
+            position: relative;
+        }
+
+        .progress-fill {
+            height: 100%;
+            background: linear-gradient(90deg, #00b894, #00a085, #fdcb6e, #e17055);
+            background-size: 200% 100%;
+            animation: progressShine 2s linear infinite;
+            transition: width 0.3s ease;
+            width: 0%;
+            border-radius: 6px;
+            box-shadow: 0 0 10px rgba(0, 184, 148, 0.5);
+        }
+
+        @keyframes progressShine {
+            0% { background-position: 200% 0; }
+            100% { background-position: -200% 0; }
+        }
+
+        .progress-text {
+            text-align: center;
+            margin-top: 15px;
+            font-weight: 600;
+            color: #2c3e50;
+            font-size: 16px;
+        }
+
+        .error {
+            color: #e74c3c;
+            background: linear-gradient(135deg, #fdcbcb 0%, #fecaca 100%);
+            border: 1px solid #f5c6cb;
+            padding: 16px 20px;
+            border-radius: 12px;
+            margin-top: 20px;
+            box-shadow: 0 4px 15px rgba(231, 76, 60, 0.1);
+            border-left: 4px solid #e74c3c;
+        }
+
+        .success {
+            color: #00b894;
+            background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
+            border: 1px solid #c3e6cb;
+            padding: 16px 20px;
+            border-radius: 12px;
+            margin-top: 20px;
+            box-shadow: 0 4px 15px rgba(0, 184, 148, 0.1);
+            border-left: 4px solid #00b894;
+        }
+
+        .help-text {
+            font-size: 13px;
+            color: #7f8c8d;
+            margin-top: 8px;
+            font-style: italic;
+        }
+
+        .folder-instructions {
+            background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
+            border: 1px solid #ffeaa7;
+            padding: 16px 20px;
+            border-radius: 12px;
+            margin-top: 20px;
+            font-size: 14px;
+            box-shadow: 0 4px 15px rgba(255, 234, 167, 0.2);
+            border-left: 4px solid #fdcb6e;
+        }
+
+        #uploadInstructions {
+            font-size: 16px;
+            color: #2c3e50;
+            line-height: 1.6;
+        }
+
+        #uploadInstructions p {
+            margin-bottom: 10px;
+        }
+
+        #uploadInstructions strong {
+            color: #667eea;
+        }
+
+        /* Responsive design */
+        @media (max-width: 768px) {
+            .container {
+                padding: 20px;
+                margin: 10px;
+            }
+
+            .upload-modes {
+                grid-template-columns: 1fr;
+            }
+
+            h1 {
+                font-size: 2em;
+            }
+
+            .file-input-container {
+                padding: 30px 15px;
+            }
+        }
+
+        /* Smooth scrollbar for file list */
+        .file-list::-webkit-scrollbar {
+            width: 6px;
+        }
+
+        .file-list::-webkit-scrollbar-track {
+            background: rgba(0, 0, 0, 0.1);
+            border-radius: 3px;
+        }
+
+        .file-list::-webkit-scrollbar-thumb {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-radius: 3px;
+        }
+
+        .file-list::-webkit-scrollbar-thumb:hover {
+            background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
+        }
+    </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">
+                        <span>📁 Folder</span>
+                    </div>
+                    <div class="upload-mode" data-mode="files">
+                        <span>📄 Files</span>
+                    </div>
+                    <div class="upload-mode" data-mode="zip">
+                        <span>📦 ZIP Archive</span>
+                    </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,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/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()