Upload 6 files

static/css/style.css

@@ -0,0 +1,378 @@
+/* Reset and base styles */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    min-height: 100vh;
+    color: #333;
+    line-height: 1.6;
+}
+
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 20px;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+/* Header styles */
+.header {
+    text-align: center;
+    margin-bottom: 40px;
+    padding: 40px 0;
+}
+
+.header-content {
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(10px);
+    border-radius: 20px;
+    padding: 40px;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.logo {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 15px;
+    margin-bottom: 15px;
+}
+
+.logo i {
+    font-size: 2.5rem;
+    color: #fff;
+    background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.logo h1 {
+    font-size: 2.5rem;
+    font-weight: 700;
+    color: #fff;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.subtitle {
+    font-size: 1.1rem;
+    color: rgba(255, 255, 255, 0.9);
+    font-weight: 400;
+}
+
+/* Main content */
+.main-content {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+}
+
+.upload-card {
+    background: #fff;
+    border-radius: 20px;
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+    padding: 40px;
+    width: 100%;
+    max-width: 600px;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.upload-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
+}
+
+.card-header {
+    text-align: center;
+    margin-bottom: 30px;
+}
+
+.card-header h2 {
+    font-size: 1.8rem;
+    font-weight: 600;
+    color: #2d3748;
+    margin-bottom: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+}
+
+.card-header h2 i {
+    color: #667eea;
+}
+
+.card-header p {
+    color: #718096;
+    font-size: 1rem;
+}
+
+/* Form styles */
+.upload-form {
+    margin-bottom: 30px;
+}
+
+.input-group {
+    margin-bottom: 25px;
+}
+
+.input-group label {
+    display: block;
+    font-weight: 500;
+    color: #2d3748;
+    margin-bottom: 8px;
+    font-size: 0.95rem;
+}
+
+.input-group textarea {
+    width: 100%;
+    padding: 15px;
+    border: 2px solid #e2e8f0;
+    border-radius: 12px;
+    font-size: 1rem;
+    font-family: inherit;
+    resize: vertical;
+    transition: border-color 0.3s ease, box-shadow 0.3s ease;
+    background: #f7fafc;
+}
+
+.input-group textarea:focus {
+    outline: none;
+    border-color: #667eea;
+    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+    background: #fff;
+}
+
+.input-hint {
+    margin-top: 8px;
+    font-size: 0.85rem;
+    color: #718096;
+    display: flex;
+    align-items: center;
+    gap: 5px;
+}
+
+.input-hint i {
+    color: #667eea;
+}
+
+/* Button styles */
+.upload-btn {
+    width: 100%;
+    padding: 15px 30px;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: #fff;
+    border: none;
+    border-radius: 12px;
+    font-size: 1.1rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    position: relative;
+    overflow: hidden;
+}
+
+.upload-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
+}
+
+.upload-btn:active {
+    transform: translateY(0);
+}
+
+.upload-btn:disabled {
+    opacity: 0.7;
+    cursor: not-allowed;
+    transform: none;
+}
+
+.btn-text {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+}
+
+.loading-spinner {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+}
+
+/* Results section */
+.results-section {
+    margin-top: 30px;
+    padding-top: 30px;
+    border-top: 2px solid #e2e8f0;
+}
+
+.results-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+}
+
+.results-header h3 {
+    font-size: 1.3rem;
+    font-weight: 600;
+    color: #2d3748;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.results-header h3 i {
+    color: #667eea;
+}
+
+.clear-btn {
+    padding: 8px 16px;
+    background: #e53e3e;
+    color: #fff;
+    border: none;
+    border-radius: 8px;
+    font-size: 0.9rem;
+    cursor: pointer;
+    transition: background 0.3s ease;
+    display: flex;
+    align-items: center;
+    gap: 5px;
+}
+
+.clear-btn:hover {
+    background: #c53030;
+}
+
+.results-content {
+    background: #f7fafc;
+    border: 2px solid #e2e8f0;
+    border-radius: 12px;
+    padding: 20px;
+    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+    font-size: 0.9rem;
+    line-height: 1.6;
+    white-space: pre-wrap;
+    max-height: 400px;
+    overflow-y: auto;
+}
+
+.results-content:empty::before {
+    content: "No results yet...";
+    color: #a0aec0;
+    font-style: italic;
+}
+
+/* Result status styling */
+.results-content .success {
+    color: #38a169;
+}
+
+.results-content .error {
+    color: #e53e3e;
+}
+
+.results-content .warning {
+    color: #d69e2e;
+}
+
+/* Footer */
+.footer {
+    text-align: center;
+    padding: 20px 0;
+    margin-top: 40px;
+    color: rgba(255, 255, 255, 0.8);
+    font-size: 0.9rem;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+    .container {
+        padding: 15px;
+    }
+    
+    .header-content {
+        padding: 30px 20px;
+    }
+    
+    .logo h1 {
+        font-size: 2rem;
+    }
+    
+    .upload-card {
+        padding: 30px 20px;
+    }
+    
+    .results-header {
+        flex-direction: column;
+        gap: 15px;
+        align-items: stretch;
+    }
+    
+    .clear-btn {
+        align-self: flex-end;
+    }
+}
+
+@media (max-width: 480px) {
+    .logo {
+        flex-direction: column;
+        gap: 10px;
+    }
+    
+    .logo h1 {
+        font-size: 1.8rem;
+    }
+    
+    .card-header h2 {
+        font-size: 1.5rem;
+        flex-direction: column;
+        gap: 5px;
+    }
+}
+
+/* Animation for results appearing */
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.results-section {
+    animation: fadeInUp 0.5s ease;
+}
+
+/* Custom scrollbar for results */
+.results-content::-webkit-scrollbar {
+    width: 8px;
+}
+
+.results-content::-webkit-scrollbar-track {
+    background: #e2e8f0;
+    border-radius: 4px;
+}
+
+.results-content::-webkit-scrollbar-thumb {
+    background: #cbd5e0;
+    border-radius: 4px;
+}
+
+.results-content::-webkit-scrollbar-thumb:hover {
+    background: #a0aec0;
+}
+

static/js/script.js

@@ -0,0 +1,159 @@
+document.addEventListener('DOMContentLoaded', function() {
+    const uploadForm = document.getElementById('uploadForm');
+    const uploadBtn = document.getElementById('uploadBtn');
+    const btnText = uploadBtn.querySelector('.btn-text');
+    const loadingSpinner = uploadBtn.querySelector('.loading-spinner');
+    const resultsSection = document.getElementById('resultsSection');
+    const resultsContent = document.getElementById('resultsContent');
+    const clearBtn = document.getElementById('clearBtn');
+    const filenamesInput = document.getElementById('filenames');
+
+    // Form submission handler
+    uploadForm.addEventListener('submit', async function(e) {
+        e.preventDefault();
+        
+        const filenames = filenamesInput.value.trim();
+        if (!filenames) {
+            alert('Please enter at least one filename');
+            return;
+        }
+
+        // Show loading state
+        setLoadingState(true);
+        
+        try {
+            const formData = new FormData();
+            formData.append('filenames', filenames);
+            
+            const response = await fetch('/upload', {
+                method: 'POST',
+                body: formData
+            });
+            
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            
+            const results = await response.text();
+            displayResults(results);
+            
+        } catch (error) {
+            console.error('Upload error:', error);
+            displayResults(`❌ Error: ${error.message}`);
+        } finally {
+            setLoadingState(false);
+        }
+    });
+
+    // Clear results handler
+    clearBtn.addEventListener('click', function() {
+        resultsContent.textContent = '';
+        resultsSection.style.display = 'none';
+    });
+
+    // Auto-resize textarea
+    filenamesInput.addEventListener('input', function() {
+        this.style.height = 'auto';
+        this.style.height = Math.min(this.scrollHeight, 200) + 'px';
+    });
+
+    // Functions
+    function setLoadingState(isLoading) {
+        uploadBtn.disabled = isLoading;
+        
+        if (isLoading) {
+            btnText.style.display = 'none';
+            loadingSpinner.style.display = 'flex';
+        } else {
+            btnText.style.display = 'flex';
+            loadingSpinner.style.display = 'none';
+        }
+    }
+
+    function displayResults(results) {
+        // Format results with proper styling
+        const formattedResults = formatResults(results);
+        resultsContent.innerHTML = formattedResults;
+        resultsSection.style.display = 'block';
+        
+        // Scroll to results
+        resultsSection.scrollIntoView({ 
+            behavior: 'smooth', 
+            block: 'start' 
+        });
+    }
+
+    function formatResults(results) {
+        if (!results) return '<span class="error">No results received</span>';
+        
+        return results.split('\n').map(line => {
+            line = line.trim();
+            if (!line) return '';
+            
+            if (line.startsWith('✅')) {
+                return `<div class="success">${escapeHtml(line)}</div>`;
+            } else if (line.startsWith('❌')) {
+                return `<div class="error">${escapeHtml(line)}</div>`;
+            } else if (line.startsWith('⏩')) {
+                return `<div class="warning">${escapeHtml(line)}</div>`;
+            } else {
+                return `<div>${escapeHtml(line)}</div>`;
+            }
+        }).join('');
+    }
+
+    function escapeHtml(text) {
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+
+    // Add some interactive effects
+    const uploadCard = document.querySelector('.upload-card');
+    
+    // Add subtle hover effect to form elements
+    const formElements = document.querySelectorAll('input, textarea, button');
+    formElements.forEach(element => {
+        element.addEventListener('focus', function() {
+            uploadCard.style.transform = 'translateY(-2px)';
+        });
+        
+        element.addEventListener('blur', function() {
+            uploadCard.style.transform = 'translateY(-5px)';
+        });
+    });
+
+    // Add keyboard shortcuts
+    document.addEventListener('keydown', function(e) {
+        // Ctrl/Cmd + Enter to submit form
+        if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
+            e.preventDefault();
+            uploadForm.dispatchEvent(new Event('submit'));
+        }
+        
+        // Escape to clear results
+        if (e.key === 'Escape' && resultsSection.style.display !== 'none') {
+            clearBtn.click();
+        }
+    });
+
+    // Add tooltip for keyboard shortcuts
+    const tooltip = document.createElement('div');
+    tooltip.innerHTML = `
+        <div style="position: fixed; bottom: 20px; right: 20px; background: rgba(0,0,0,0.8); color: white; padding: 10px; border-radius: 8px; font-size: 0.8rem; z-index: 1000;">
+            <div><kbd>Ctrl+Enter</kbd> Submit form</div>
+            <div><kbd>Esc</kbd> Clear results</div>
+        </div>
+    `;
+    
+    // Show tooltip on first visit
+    setTimeout(() => {
+        document.body.appendChild(tooltip);
+        setTimeout(() => {
+            tooltip.style.opacity = '0';
+            tooltip.style.transition = 'opacity 0.5s';
+            setTimeout(() => tooltip.remove(), 500);
+        }, 3000);
+    }, 1000);
+});
+

templates/index.html

@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Hugging Face Uploader</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+</head>
+<body>
+    <div class="container">
+        <header class="header">
+            <div class="header-content">
+                <div class="logo">
+                    <i class="fas fa-cloud-upload-alt"></i>
+                    <h1>Hugging Face Uploader</h1>
+                </div>
+                <p class="subtitle">Upload files from Telegram to Hugging Face datasets</p>
+            </div>
+        </header>
+
+        <main class="main-content">
+            <div class="upload-card">
+                <div class="card-header">
+                    <h2><i class="fas fa-file-upload"></i> File Upload</h2>
+                    <p>Enter filenames to search and upload from Telegram channel</p>
+                </div>
+
+                <form id="uploadForm" class="upload-form">
+                    <div class="input-group">
+                        <label for="filenames">Filenames (comma or newline separated)</label>
+                        <textarea 
+                            id="filenames" 
+                            name="filenames" 
+                            placeholder="e.g.&#10;report.pdf&#10;summary.docx&#10;meeting_notes.txt"
+                            rows="6"
+                            required
+                        ></textarea>
+                        <div class="input-hint">
+                            <i class="fas fa-info-circle"></i>
+                            Separate multiple filenames with commas or new lines
+                        </div>
+                    </div>
+
+                    <button type="submit" class="upload-btn" id="uploadBtn">
+                        <span class="btn-text">
+                            <i class="fas fa-upload"></i>
+                            Start Upload
+                        </span>
+                        <div class="loading-spinner" style="display: none;">
+                            <i class="fas fa-spinner fa-spin"></i>
+                            Processing...
+                        </div>
+                    </button>
+                </form>
+
+                <div class="results-section" id="resultsSection" style="display: none;">
+                    <div class="results-header">
+                        <h3><i class="fas fa-list-check"></i> Upload Results</h3>
+                        <button class="clear-btn" id="clearBtn">
+                            <i class="fas fa-trash"></i>
+                            Clear
+                        </button>
+                    </div>
+                    <div class="results-content" id="resultsContent"></div>
+                </div>
+            </div>
+        </main>
+
+        <footer class="footer">
+            <p>&copy; 2024 Hugging Face Uploader. Built with Flask.</p>
+        </footer>
+    </div>
+
+    <script src="{{ url_for('static', filename='js/script.js') }}"></script>
+</body>
+</html>
+

templates/readme.md

@@ -0,0 +1 @@
+markit