Upload 5 files

app.py

@@ -2,10 +2,13 @@ import os
 import asyncio
 import logging
 from telethon import TelegramClient
+from telethon.errors import SessionPasswordNeededError, PhoneCodeInvalidError, AuthKeyError
 from huggingface_hub import upload_file
 from dotenv import load_dotenv
-from flask import Flask, request, render_template, jsonify
-import threading
+from fastapi import FastAPI, Form, HTTPException
+from fastapi.responses import HTMLResponse, FileResponse
+from fastapi.staticfiles import StaticFiles
+import uvicorn
 
 # === Load secrets from .env ===
 load_dotenv()
@@ -58,7 +61,7 @@ def upload_to_dataset(filepath):
         logging.error(f"[!] Upload failed: {filepath} — {e}")
         return False, f"❌ Upload failed: {os.path.basename(filepath)} — {e}"
 
-# === Main file processing logic ===
+# === Main file processing logic with improved error handling ===
 async def process_filenames(name_input):
     if not client:
         return "❌ Error: Telegram client not initialized. Please check your API credentials."
@@ -67,14 +70,26 @@ async def process_filenames(name_input):
         return "❌ Error: Channel username not configured."
     
     try:
-        await client.start()
-
+        # Check if client is already connected
+        if not client.is_connected():
+            await client.connect()
+        
+        # Check if we're authorized
+        if not await client.is_user_authorized():
+            return "❌ Error: Telegram client not authorized. This application requires a pre-authenticated session file."
+        
         filenames = [name.strip().lower() for name in name_input.replace(",", "\n").splitlines() if name.strip()]
         results = []
         found = set()
 
-        messages = [msg async for msg in client.iter_messages(CHANNEL, limit=300)]
-        total = len(messages)
+        # Use a more conservative approach to message iteration
+        try:
+            messages = []
+            async for msg in client.iter_messages(CHANNEL, limit=300):
+                messages.append(msg)
+        except Exception as e:
+            logging.error(f"Error iterating messages: {e}")
+            return f"❌ Error accessing channel messages: {str(e)}"
 
         for i, msg in enumerate(messages):
             if msg.media and msg.file:
@@ -86,9 +101,13 @@ async def process_filenames(name_input):
                         path = f"downloads/{fname}"
 
                         if not os.path.exists(path):
-                            await msg.download_media(file=path)
-                            success, msg_text = upload_to_dataset(path)
-                            results.append(msg_text)
+                            try:
+                                await msg.download_media(file=path)
+                                success, msg_text = upload_to_dataset(path)
+                                results.append(msg_text)
+                            except Exception as download_error:
+                                logging.error(f"Download error for {fname}: {download_error}")
+                                results.append(f"❌ Download failed: {fname} — {str(download_error)}")
                         else:
                             results.append(f"⏩ Already exists: {fname}")
                         break
@@ -100,52 +119,63 @@ async def process_filenames(name_input):
 
         return "\n".join(results) if results else "❌ No files matched."
     
+    except AuthKeyError:
+        logging.error("Auth key error - session may be corrupted")
+        return "❌ Error: Session authentication failed. The session file may be corrupted or expired."
+    except SessionPasswordNeededError:
+        logging.error("Two-factor authentication required")
+        return "❌ Error: Two-factor authentication is enabled. This application requires a pre-authenticated session."
+    except EOFError as e:
+        logging.error(f"EOF Error: {e}")
+        return "❌ Error: Connection interrupted. This may be due to network issues or session problems."
     except Exception as e:
         logging.error(f"Error in process_filenames: {e}")
         return f"❌ Error: {str(e)}"
 
-def run_async_in_thread(coro):
-    """Run async function in a separate thread with its own event loop"""
-    def run_in_thread():
-        loop = asyncio.new_event_loop()
-        asyncio.set_event_loop(loop)
-        try:
-            return loop.run_until_complete(coro)
-        finally:
-            loop.close()
-    
-    import concurrent.futures
-    with concurrent.futures.ThreadPoolExecutor() as executor:
-        future = executor.submit(run_in_thread)
-        return future.result()
+# === FastAPI App ===
+app = FastAPI(title="Hugging Face Uploader", description="Upload files from Telegram to Hugging Face datasets")
+
+@app.get("/", response_class=HTMLResponse)
+async def index():
+    """Serve the main HTML page"""
+    try:
+        with open("index.html", "r", encoding="utf-8") as f:
+            return HTMLResponse(content=f.read())
+    except FileNotFoundError:
+        raise HTTPException(status_code=404, detail="index.html not found")
 
-app = Flask(__name__)
+@app.get("/style.css")
+async def get_css():
+    """Serve the CSS file"""
+    return FileResponse("style.css", media_type="text/css")
 
-@app.route('/')
-def index():
-    return render_template('index.html')
+@app.get("/script.js")
+async def get_js():
+    """Serve the JavaScript file"""
+    return FileResponse("script.js", media_type="application/javascript")
 
-@app.route('/upload', methods=['POST'])
-def upload():
+@app.post("/upload")
+async def upload(filenames: str = Form(...)):
+    """Handle file upload requests"""
     try:
-        filenames_input = request.form.get('filenames', '').strip()
-        if not filenames_input:
-            return "❌ Error: No filenames provided", 400
+        if not filenames.strip():
+            raise HTTPException(status_code=400, detail="❌ Error: No filenames provided")
         
         # Check if credentials are configured
         if not client:
-            return "❌ Error: Application not configured. Please set up your .env file with API credentials.", 500
+            raise HTTPException(status_code=500, detail="❌ Error: Application not configured. Please set up your environment variables with API credentials.")
         
-        # Run the async function in a separate thread
-        results = run_async_in_thread(process_filenames(filenames_input))
-        return results
+        # Process filenames using the async function
+        results = await process_filenames(filenames)
+        return {"results": results}
     
     except Exception as e:
         logging.error(f"Error in upload route: {e}")
-        return f"❌ Error: {str(e)}", 500
+        raise HTTPException(status_code=500, detail=f"❌ Error: {str(e)}")
 
-@app.route('/health')
-def health():
+@app.get("/health")
+async def health():
+    """Health check endpoint"""
     status = {
         "status": "healthy",
         "message": "Hugging Face Uploader is running",
@@ -153,12 +183,18 @@ def health():
             "telegram": bool(client),
             "huggingface": bool(HF_TOKEN and REPO_ID),
             "channel": bool(CHANNEL)
+        },
+        "files": {
+            "index_html_exists": os.path.exists("index.html"),
+            "style_css_exists": os.path.exists("style.css"),
+            "script_js_exists": os.path.exists("script.js"),
+            "session_file_exists": os.path.exists("my_session.session")
         }
     }
-    return jsonify(status)
+    return status
 
-@app.route('/config')
-def config():
+@app.get("/config")
+async def config():
     """Show configuration status"""
     config_status = {
         "API_ID": "✅ Set" if API_ID else "❌ Missing",
@@ -167,19 +203,60 @@ def config():
         "CHANNEL_USERNAME": "✅ Set" if CHANNEL else "❌ Missing",
         "DATASET_REPO": "✅ Set" if REPO_ID else "❌ Missing"
     }
+    return config_status
+
+@app.get("/debug")
+async def debug():
+    """Debug endpoint to check file structure"""
+    import glob
     
-    return jsonify(config_status)
+    debug_info = {
+        "current_directory": os.getcwd(),
+        "files_in_current_dir": os.listdir('.'),
+        "html_exists": os.path.exists('index.html'),
+        "css_exists": os.path.exists('style.css'),
+        "js_exists": os.path.exists('script.js'),
+        "session_file_exists": os.path.exists('my_session.session'),
+        "downloads_folder_exists": os.path.exists('downloads'),
+        "log_file_exists": os.path.exists('upload.log')
+    }
+    
+    return debug_info
+
+@app.get("/session-info")
+async def session_info():
+    """Check Telegram session status"""
+    if not client:
+        return {"error": "Client not initialized"}
+    
+    try:
+        session_status = {
+            "session_file_exists": os.path.exists('my_session.session'),
+            "client_initialized": bool(client),
+            "session_file_size": os.path.getsize('my_session.session') if os.path.exists('my_session.session') else 0
+        }
+        return session_status
+    except Exception as e:
+        return {"error": str(e)}
 
 if __name__ == '__main__':
-    print("Starting Hugging Face Uploader...")
+    print("Starting Hugging Face Uploader with FastAPI...")
     print("Configuration status:")
     print(f"  API_ID: {'✅ Set' if API_ID else '❌ Missing'}")
     print(f"  API_HASH: {'✅ Set' if API_HASH else '❌ Missing'}")
     print(f"  HF_TOKEN: {'✅ Set' if HF_TOKEN else '❌ Missing'}")
     print(f"  CHANNEL_USERNAME: {'✅ Set' if CHANNEL else '❌ Missing'}")
     print(f"  DATASET_REPO: {'✅ Set' if REPO_ID else '❌ Missing'}")
-    print("\nTo configure, copy .env.example to .env and fill in your credentials.")
-    print("Visit http://localhost:5000 to use the application.")
+    print(f"\nFile structure:")
+    print(f"  index.html exists: {os.path.exists('index.html')}")
+    print(f"  style.css exists: {os.path.exists('style.css')}")
+    print(f"  script.js exists: {os.path.exists('script.js')}")
+    print(f"  Session file exists: {os.path.exists('my_session.session')}")
+    print("\n⚠️  IMPORTANT: This application requires a pre-authenticated Telegram session.")
+    print("   You must create the session file locally first, then upload it to your deployment.")
+    print("\nTo configure, set environment variables in your deployment environment.")
+    print("Visit http://localhost:7860 to use the application.")
     
-    app.run(host='0.0.0.0', port=5000, debug=True)
+    # Use port 7860 for Hugging Face Spaces compatibility
+    uvicorn.run(app, host="0.0.0.0", port=7860)
 

index.html

@@ -4,76 +4,91 @@
     <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">
+    <link rel="stylesheet" href="/style.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>
+                <h1 class="title">🤗 Hugging Face Uploader</h1>
+                <p class="subtitle">Upload files from Telegram channels 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>
-
+            <div class="upload-section">
                 <form id="uploadForm" class="upload-form">
-                    <div class="input-group">
-                        <label for="filenames">Filenames (comma or newline separated)</label>
+                    <div class="form-group">
+                        <label for="filenames" class="form-label">
+                            📁 Enter filenames to search and upload
+                        </label>
                         <textarea 
                             id="filenames" 
                             name="filenames" 
-                            placeholder="e.g.&#10;report.pdf&#10;summary.docx&#10;meeting_notes.txt"
+                            class="form-textarea"
+                            placeholder="Enter filenames (one per line or comma-separated)&#10;Example:&#10;document.pdf&#10;image.jpg, video.mp4"
                             rows="6"
                             required
                         ></textarea>
-                        <div class="input-hint">
-                            <i class="fas fa-info-circle"></i>
-                            Separate multiple filenames with commas or new lines
+                        <div class="form-hint">
+                            💡 Tip: You can enter multiple filenames separated by 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
+                    <div class="form-actions">
+                        <button type="submit" class="btn btn-primary" id="uploadBtn">
+                            <span class="btn-icon">🚀</span>
+                            <span class="btn-text">Start Upload</span>
+                        </button>
+                        <button type="button" class="btn btn-secondary" id="clearBtn">
+                            <span class="btn-icon">🗑️</span>
+                            <span class="btn-text">Clear</span>
                         </button>
                     </div>
-                    <div class="results-content" id="resultsContent"></div>
+                </form>
+            </div>
+
+            <div class="results-section" id="resultsSection" style="display: none;">
+                <div class="results-header">
+                    <h3 class="results-title">📊 Upload Results</h3>
+                    <button class="btn btn-ghost" id="clearResultsBtn">
+                        <span class="btn-icon">✖️</span>
+                        Clear Results
+                    </button>
                 </div>
+                <div class="results-content" id="resultsContent"></div>
+            </div>
+
+            <div class="loading-section" id="loadingSection" style="display: none;">
+                <div class="loading-spinner"></div>
+                <p class="loading-text">Processing your request...</p>
             </div>
         </main>
 
         <footer class="footer">
-            <p>&copy; 2024 Hugging Face Uploader. Built with Flask.</p>
+            <div class="footer-content">
+                <div class="status-indicators">
+                    <div class="status-item" id="configStatus">
+                        <span class="status-icon">⚙️</span>
+                        <span class="status-text">Configuration</span>
+                        <span class="status-badge" id="configBadge">Checking...</span>
+                    </div>
+                    <div class="status-item" id="healthStatus">
+                        <span class="status-icon">💚</span>
+                        <span class="status-text">Health</span>
+                        <span class="status-badge" id="healthBadge">Checking...</span>
+                    </div>
+                </div>
+                <div class="footer-links">
+                    <a href="/health" target="_blank" class="footer-link">Health Check</a>
+                    <a href="/config" target="_blank" class="footer-link">Configuration</a>
+                    <a href="/debug" target="_blank" class="footer-link">Debug Info</a>
+                </div>
+            </div>
         </footer>
     </div>
 
-    <script src="{{ url_for('static', filename='js/script.js') }}"></script>
+    <script src="/script.js"></script>
 </body>
 </html>
 

requirements.txt

@@ -1,4 +1,7 @@
-telethon==1.34.0
-flask
-huggingface_hub==0.23.0
+fastapi==0.104.1
+uvicorn[standard]==0.24.0
+telethon==1.36.0
+huggingface-hub==0.26.5
 python-dotenv==1.0.1
+python-multipart==0.0.6
+

script.js

@@ -1,159 +1,257 @@
 document.addEventListener('DOMContentLoaded', function() {
+    // DOM elements
     const uploadForm = document.getElementById('uploadForm');
+    const filenamesTextarea = document.getElementById('filenames');
     const uploadBtn = document.getElementById('uploadBtn');
-    const btnText = uploadBtn.querySelector('.btn-text');
-    const loadingSpinner = uploadBtn.querySelector('.loading-spinner');
+    const clearBtn = document.getElementById('clearBtn');
+    const clearResultsBtn = document.getElementById('clearResultsBtn');
     const resultsSection = document.getElementById('resultsSection');
     const resultsContent = document.getElementById('resultsContent');
-    const clearBtn = document.getElementById('clearBtn');
-    const filenamesInput = document.getElementById('filenames');
+    const loadingSection = document.getElementById('loadingSection');
+    const configBadge = document.getElementById('configBadge');
+    const healthBadge = document.getElementById('healthBadge');
+
+    // Initialize the application
+    init();
 
-    // Form submission handler
-    uploadForm.addEventListener('submit', async function(e) {
+    async function init() {
+        await checkConfiguration();
+        await checkHealth();
+        setupEventListeners();
+        setupKeyboardShortcuts();
+    }
+
+    function setupEventListeners() {
+        // Form submission
+        uploadForm.addEventListener('submit', handleUpload);
+        
+        // Clear buttons
+        clearBtn.addEventListener('click', clearForm);
+        clearResultsBtn.addEventListener('click', clearResults);
+        
+        // Auto-resize textarea
+        filenamesTextarea.addEventListener('input', autoResizeTextarea);
+        
+        // Real-time validation
+        filenamesTextarea.addEventListener('input', validateInput);
+    }
+
+    function setupKeyboardShortcuts() {
+        document.addEventListener('keydown', function(e) {
+            // Ctrl+Enter or Cmd+Enter to submit
+            if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
+                e.preventDefault();
+                if (!uploadBtn.disabled) {
+                    handleUpload(e);
+                }
+            }
+            
+            // Escape to clear results
+            if (e.key === 'Escape') {
+                clearResults();
+            }
+        });
+    }
+
+    async function handleUpload(e) {
         e.preventDefault();
         
-        const filenames = filenamesInput.value.trim();
+        const filenames = filenamesTextarea.value.trim();
         if (!filenames) {
-            alert('Please enter at least one filename');
+            showError('Please enter at least one filename');
             return;
         }
 
-        // Show loading state
-        setLoadingState(true);
-        
+        setLoading(true);
+        clearResults();
+
         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 errorData = await response.json();
+                throw new Error(errorData.detail || `HTTP ${response.status}`);
             }
-            
-            const results = await response.text();
-            displayResults(results);
+
+            const data = await response.json();
+            displayResults(data.results);
             
         } catch (error) {
             console.error('Upload error:', error);
-            displayResults(`❌ Error: ${error.message}`);
+            showError(`Upload failed: ${error.message}`);
         } finally {
-            setLoadingState(false);
+            setLoading(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';
-    });
+    function displayResults(results) {
+        if (!results) {
+            showError('No results received from server');
+            return;
+        }
 
-    // Functions
-    function setLoadingState(isLoading) {
-        uploadBtn.disabled = isLoading;
+        resultsContent.innerHTML = '';
+        
+        // Split results by lines and process each
+        const lines = results.split('\n').filter(line => line.trim());
         
+        lines.forEach(line => {
+            const resultDiv = document.createElement('div');
+            resultDiv.className = 'result-line';
+            
+            // Determine result type and apply appropriate styling
+            if (line.includes('✅')) {
+                resultDiv.classList.add('result-success');
+            } else if (line.includes('❌')) {
+                resultDiv.classList.add('result-error');
+            } else if (line.includes('⏩')) {
+                resultDiv.classList.add('result-info');
+            } else {
+                resultDiv.classList.add('result-warning');
+            }
+            
+            resultDiv.textContent = line;
+            resultsContent.appendChild(resultDiv);
+        });
+
+        resultsSection.style.display = 'block';
+        resultsSection.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+    }
+
+    function showError(message) {
+        resultsContent.innerHTML = '';
+        const errorDiv = document.createElement('div');
+        errorDiv.className = 'result-line result-error';
+        errorDiv.textContent = `❌ ${message}`;
+        resultsContent.appendChild(errorDiv);
+        resultsSection.style.display = 'block';
+    }
+
+    function setLoading(isLoading) {
         if (isLoading) {
-            btnText.style.display = 'none';
-            loadingSpinner.style.display = 'flex';
+            loadingSection.style.display = 'block';
+            uploadBtn.disabled = true;
+            uploadBtn.querySelector('.btn-text').textContent = 'Processing...';
         } else {
-            btnText.style.display = 'flex';
-            loadingSpinner.style.display = 'none';
+            loadingSection.style.display = 'none';
+            uploadBtn.disabled = false;
+            uploadBtn.querySelector('.btn-text').textContent = 'Start Upload';
         }
     }
 
-    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 clearForm() {
+        filenamesTextarea.value = '';
+        filenamesTextarea.style.height = 'auto';
+        validateInput();
+        filenamesTextarea.focus();
+    }
+
+    function clearResults() {
+        resultsSection.style.display = 'none';
+        resultsContent.innerHTML = '';
     }
 
-    function formatResults(results) {
-        if (!results) return '<span class="error">No results received</span>';
+    function autoResizeTextarea() {
+        filenamesTextarea.style.height = 'auto';
+        filenamesTextarea.style.height = filenamesTextarea.scrollHeight + 'px';
+    }
+
+    function validateInput() {
+        const value = filenamesTextarea.value.trim();
+        uploadBtn.disabled = !value;
         
-        return results.split('\n').map(line => {
-            line = line.trim();
-            if (!line) return '';
+        if (value) {
+            uploadBtn.classList.remove('btn-disabled');
+        } else {
+            uploadBtn.classList.add('btn-disabled');
+        }
+    }
+
+    async function checkConfiguration() {
+        try {
+            const response = await fetch('/config');
+            const config = await response.json();
+            
+            const allConfigured = Object.values(config).every(status => status.includes('✅'));
             
-            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>`;
+            if (allConfigured) {
+                configBadge.textContent = 'Ready';
+                configBadge.className = 'status-badge success';
             } else {
-                return `<div>${escapeHtml(line)}</div>`;
+                configBadge.textContent = 'Incomplete';
+                configBadge.className = 'status-badge warning';
             }
-        }).join('');
+        } catch (error) {
+            console.error('Config check failed:', error);
+            configBadge.textContent = 'Error';
+            configBadge.className = 'status-badge error';
+        }
     }
 
-    function escapeHtml(text) {
-        const div = document.createElement('div');
-        div.textContent = text;
-        return div.innerHTML;
+    async function checkHealth() {
+        try {
+            const response = await fetch('/health');
+            const health = await response.json();
+            
+            if (health.status === 'healthy') {
+                healthBadge.textContent = 'Healthy';
+                healthBadge.className = 'status-badge success';
+            } else {
+                healthBadge.textContent = 'Issues';
+                healthBadge.className = 'status-badge warning';
+            }
+        } catch (error) {
+            console.error('Health check failed:', error);
+            healthBadge.textContent = 'Error';
+            healthBadge.className = 'status-badge error';
+        }
     }
 
-    // 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)';
-        });
-    });
+    // Refresh status indicators every 30 seconds
+    setInterval(() => {
+        checkConfiguration();
+        checkHealth();
+    }, 30000);
 
-    // 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'));
-        }
+    // Show keyboard shortcuts hint on first visit
+    if (!localStorage.getItem('keyboardHintShown')) {
+        setTimeout(() => {
+            showKeyboardHint();
+            localStorage.setItem('keyboardHintShown', 'true');
+        }, 2000);
+    }
+
+    function showKeyboardHint() {
+        const hint = document.createElement('div');
+        hint.className = 'keyboard-hint';
+        hint.innerHTML = '💡 Tip: Use Ctrl+Enter to upload, Esc to clear results';
+        document.body.appendChild(hint);
         
-        // Escape to clear results
-        if (e.key === 'Escape' && resultsSection.style.display !== 'none') {
-            clearBtn.click();
+        setTimeout(() => hint.classList.add('show'), 100);
+        setTimeout(() => {
+            hint.classList.remove('show');
+            setTimeout(() => document.body.removeChild(hint), 300);
+        }, 4000);
+    }
+
+    // Add some visual feedback for better UX
+    uploadBtn.addEventListener('mouseenter', function() {
+        if (!this.disabled) {
+            this.style.transform = 'translateY(-2px)';
         }
     });
 
-    // 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);
+    uploadBtn.addEventListener('mouseleave', function() {
+        this.style.transform = 'translateY(0)';
+    });
+
+    // Initialize textarea validation
+    validateInput();
 });
 

style.css

@@ -6,373 +6,421 @@
 }
 
 body {
-    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
+    line-height: 1.6;
+    color: #333;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     min-height: 100vh;
-    color: #333;
-    line-height: 1.6;
+    padding: 20px;
 }
 
 .container {
-    max-width: 1200px;
+    max-width: 800px;
     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);
+    background: rgba(255, 255, 255, 0.95);
     border-radius: 20px;
-    padding: 40px;
-    border: 1px solid rgba(255, 255, 255, 0.2);
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+    backdrop-filter: blur(10px);
+    overflow: hidden;
+    animation: slideUp 0.6s ease-out;
 }
 
-.logo {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 15px;
-    margin-bottom: 15px;
+@keyframes slideUp {
+    from {
+        opacity: 0;
+        transform: translateY(30px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
 }
 
-.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;
+/* Header */
+.header {
+    background: linear-gradient(135deg, #ff6b6b 0%, #feca57 100%);
+    color: white;
+    padding: 40px 30px;
+    text-align: center;
 }
 
-.logo h1 {
+.title {
     font-size: 2.5rem;
     font-weight: 700;
-    color: #fff;
-    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    margin-bottom: 10px;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }
 
 .subtitle {
     font-size: 1.1rem;
-    color: rgba(255, 255, 255, 0.9);
-    font-weight: 400;
+    opacity: 0.9;
+    font-weight: 300;
 }
 
 /* Main content */
 .main-content {
-    flex: 1;
-    display: flex;
-    justify-content: center;
-    align-items: flex-start;
+    padding: 40px 30px;
 }
 
-.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;
+.upload-section {
     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 {
+.form-group {
     margin-bottom: 25px;
 }
 
-.input-group label {
+.form-label {
     display: block;
-    font-weight: 500;
-    color: #2d3748;
-    margin-bottom: 8px;
-    font-size: 0.95rem;
+    font-size: 1.1rem;
+    font-weight: 600;
+    color: #2c3e50;
+    margin-bottom: 10px;
 }
 
-.input-group textarea {
+.form-textarea {
     width: 100%;
     padding: 15px;
-    border: 2px solid #e2e8f0;
+    border: 2px solid #e1e8ed;
     border-radius: 12px;
     font-size: 1rem;
-    font-family: inherit;
+    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
     resize: vertical;
-    transition: border-color 0.3s ease, box-shadow 0.3s ease;
-    background: #f7fafc;
+    transition: all 0.3s ease;
+    background: #f8f9fa;
 }
 
-.input-group textarea:focus {
+.form-textarea:focus {
     outline: none;
     border-color: #667eea;
     box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
-    background: #fff;
+    background: white;
 }
 
-.input-hint {
+.form-hint {
+    font-size: 0.9rem;
+    color: #6c757d;
     margin-top: 8px;
-    font-size: 0.85rem;
-    color: #718096;
-    display: flex;
-    align-items: center;
-    gap: 5px;
+    font-style: italic;
 }
 
-.input-hint i {
-    color: #667eea;
+.form-actions {
+    display: flex;
+    gap: 15px;
+    flex-wrap: wrap;
 }
 
-/* Button styles */
-.upload-btn {
-    width: 100%;
-    padding: 15px 30px;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    color: #fff;
+/* Buttons */
+.btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 12px 24px;
     border: none;
-    border-radius: 12px;
-    font-size: 1.1rem;
+    border-radius: 10px;
+    font-size: 1rem;
     font-weight: 600;
     cursor: pointer;
     transition: all 0.3s ease;
+    text-decoration: none;
     position: relative;
     overflow: hidden;
 }
 
-.upload-btn:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
+.btn::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+    transition: left 0.5s;
+}
+
+.btn:hover::before {
+    left: 100%;
+}
+
+.btn-primary {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
 }
 
-.upload-btn:active {
-    transform: translateY(0);
+.btn-primary:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
 }
 
-.upload-btn:disabled {
-    opacity: 0.7;
+.btn-primary:disabled {
+    background: #95a5a6;
     cursor: not-allowed;
     transform: none;
+    box-shadow: none;
 }
 
-.btn-text {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 10px;
+.btn-secondary {
+    background: #f8f9fa;
+    color: #495057;
+    border: 2px solid #dee2e6;
 }
 
-.loading-spinner {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 10px;
+.btn-secondary:hover {
+    background: #e9ecef;
+    border-color: #adb5bd;
+    transform: translateY(-1px);
+}
+
+.btn-ghost {
+    background: transparent;
+    color: #6c757d;
+    border: 1px solid #dee2e6;
+    padding: 8px 16px;
+    font-size: 0.9rem;
+}
+
+.btn-ghost:hover {
+    background: #f8f9fa;
+    color: #495057;
 }
 
 /* Results section */
 .results-section {
     margin-top: 30px;
-    padding-top: 30px;
-    border-top: 2px solid #e2e8f0;
+    border: 2px solid #e1e8ed;
+    border-radius: 12px;
+    overflow: hidden;
+    animation: fadeIn 0.5s ease-out;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
 }
 
 .results-header {
+    background: #f8f9fa;
+    padding: 15px 20px;
+    border-bottom: 1px solid #e1e8ed;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 20px;
 }
 
-.results-header h3 {
-    font-size: 1.3rem;
+.results-title {
+    font-size: 1.2rem;
     font-weight: 600;
-    color: #2d3748;
+    color: #2c3e50;
+    margin: 0;
+}
+
+.results-content {
+    padding: 20px;
+    background: white;
+    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+    font-size: 0.9rem;
+    line-height: 1.8;
+    white-space: pre-wrap;
+    max-height: 400px;
+    overflow-y: auto;
+}
+
+/* Loading section */
+.loading-section {
+    text-align: center;
+    padding: 40px 20px;
+    animation: fadeIn 0.3s ease-out;
+}
+
+.loading-spinner {
+    width: 50px;
+    height: 50px;
+    border: 4px solid #f3f3f3;
+    border-top: 4px solid #667eea;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    margin: 0 auto 20px;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+.loading-text {
+    font-size: 1.1rem;
+    color: #6c757d;
+    font-weight: 500;
+}
+
+/* Footer */
+.footer {
+    background: #f8f9fa;
+    padding: 25px 30px;
+    border-top: 1px solid #e1e8ed;
+}
+
+.footer-content {
     display: flex;
+    justify-content: space-between;
     align-items: center;
-    gap: 10px;
+    flex-wrap: wrap;
+    gap: 20px;
 }
 
-.results-header h3 i {
-    color: #667eea;
+.status-indicators {
+    display: flex;
+    gap: 20px;
+    flex-wrap: wrap;
 }
 
-.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;
+.status-item {
     display: flex;
     align-items: center;
-    gap: 5px;
+    gap: 8px;
+    font-size: 0.9rem;
 }
 
-.clear-btn:hover {
-    background: #c53030;
+.status-badge {
+    padding: 4px 8px;
+    border-radius: 6px;
+    font-size: 0.8rem;
+    font-weight: 600;
+    background: #e9ecef;
+    color: #495057;
 }
 
-.results-content {
-    background: #f7fafc;
-    border: 2px solid #e2e8f0;
-    border-radius: 12px;
-    padding: 20px;
-    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+.status-badge.success {
+    background: #d4edda;
+    color: #155724;
+}
+
+.status-badge.error {
+    background: #f8d7da;
+    color: #721c24;
+}
+
+.status-badge.warning {
+    background: #fff3cd;
+    color: #856404;
+}
+
+.footer-links {
+    display: flex;
+    gap: 15px;
+    flex-wrap: wrap;
+}
+
+.footer-link {
+    color: #6c757d;
+    text-decoration: none;
     font-size: 0.9rem;
-    line-height: 1.6;
-    white-space: pre-wrap;
-    max-height: 400px;
-    overflow-y: auto;
+    padding: 5px 10px;
+    border-radius: 6px;
+    transition: all 0.3s ease;
 }
 
-.results-content:empty::before {
-    content: "No results yet...";
-    color: #a0aec0;
-    font-style: italic;
+.footer-link:hover {
+    background: #e9ecef;
+    color: #495057;
 }
 
-/* Result status styling */
-.results-content .success {
-    color: #38a169;
+/* Result styling */
+.result-line {
+    margin: 5px 0;
+    padding: 8px 12px;
+    border-radius: 6px;
+    border-left: 4px solid transparent;
 }
 
-.results-content .error {
-    color: #e53e3e;
+.result-success {
+    background: #d4edda;
+    border-left-color: #28a745;
+    color: #155724;
 }
 
-.results-content .warning {
-    color: #d69e2e;
+.result-error {
+    background: #f8d7da;
+    border-left-color: #dc3545;
+    color: #721c24;
 }
 
-/* Footer */
-.footer {
-    text-align: center;
-    padding: 20px 0;
-    margin-top: 40px;
-    color: rgba(255, 255, 255, 0.8);
-    font-size: 0.9rem;
+.result-warning {
+    background: #fff3cd;
+    border-left-color: #ffc107;
+    color: #856404;
+}
+
+.result-info {
+    background: #d1ecf1;
+    border-left-color: #17a2b8;
+    color: #0c5460;
 }
 
 /* Responsive design */
 @media (max-width: 768px) {
+    body {
+        padding: 10px;
+    }
+    
     .container {
-        padding: 15px;
+        border-radius: 15px;
     }
     
-    .header-content {
+    .header {
         padding: 30px 20px;
     }
     
-    .logo h1 {
+    .title {
         font-size: 2rem;
     }
     
-    .upload-card {
+    .main-content {
         padding: 30px 20px;
     }
     
-    .results-header {
+    .form-actions {
         flex-direction: column;
-        gap: 15px;
-        align-items: stretch;
     }
     
-    .clear-btn {
-        align-self: flex-end;
-    }
-}
-
-@media (max-width: 480px) {
-    .logo {
-        flex-direction: column;
-        gap: 10px;
+    .btn {
+        justify-content: center;
+        width: 100%;
     }
     
-    .logo h1 {
-        font-size: 1.8rem;
-    }
-    
-    .card-header h2 {
-        font-size: 1.5rem;
+    .footer-content {
         flex-direction: column;
-        gap: 5px;
-    }
-}
-
-/* Animation for results appearing */
-@keyframes fadeInUp {
-    from {
-        opacity: 0;
-        transform: translateY(20px);
+        text-align: center;
     }
-    to {
-        opacity: 1;
-        transform: translateY(0);
+    
+    .status-indicators {
+        justify-content: center;
     }
 }
 
-.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;
+/* Keyboard shortcuts hint */
+.keyboard-hint {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    background: rgba(0, 0, 0, 0.8);
+    color: white;
+    padding: 10px 15px;
+    border-radius: 8px;
+    font-size: 0.8rem;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    pointer-events: none;
+    z-index: 1000;
 }
 
-.results-content::-webkit-scrollbar-thumb {
-    background: #cbd5e0;
-    border-radius: 4px;
+.keyboard-hint.show {
+    opacity: 1;
 }
 
-.results-content::-webkit-scrollbar-thumb:hover {
-    background: #a0aec0;
+/* Smooth scrolling */
+html {
+    scroll-behavior: smooth;
 }