Spaces:

sheikhcoders
/

browser-automation-tool

Sleeping

File size: 11,768 Bytes

#!/usr/bin/env python3
"""
Browser Automation Tool - Flask Interface (No Gradio Dependencies)
"""

from flask import Flask, render_template_string, request, jsonify
import time
from selenium import webdriver
from selenium.webdriver.chrome.options import Options
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
import io
from PIL import Image
import base64

app = Flask(__name__)

def setup_driver(headless=True, window_size="1920,1080"):
    """Setup Chrome driver with options"""
    chrome_options = Options()
    if headless:
        chrome_options.add_argument("--headless")
    chrome_options.add_argument("--no-sandbox")
    chrome_options.add_argument("--disable-dev-shm-usage")
    chrome_options.add_argument(f"--window-size={window_size}")
    chrome_options.add_argument("--disable-gpu")
    
    driver = webdriver.Chrome(options=chrome_options)
    return driver

def navigate_and_screenshot(url, headless=True, window_size="1920,1080"):
    """Navigate to URL and return screenshot as base64"""
    try:
        driver = setup_driver(headless, window_size)
        driver.get(url)
        time.sleep(3)
        
        # Take screenshot and convert to base64
        screenshot = driver.get_screenshot_as_png()
        driver.quit()
        
        # Convert to base64 for web display
        import base64
        screenshot_b64 = base64.b64encode(screenshot).decode('utf-8')
        
        return {
            "success": True,
            "screenshot": screenshot_b64,
            "message": "Screenshot captured successfully"
        }
    except Exception as e:
        return {
            "success": False,
            "error": str(e),
            "message": "Error capturing screenshot"
        }

def extract_text_content(url, headless=True):
    """Extract text content from URL"""
    try:
        driver = setup_driver(headless)
        driver.get(url)
        time.sleep(2)
        
        title = driver.title
        html = driver.page_source
        
        # Simple text extraction
        from bs4 import BeautifulSoup
        soup = BeautifulSoup(html, 'html.parser')
        text = soup.get_text()[:1000] + "..." if len(soup.get_text()) > 1000 else soup.get_text()
        
        driver.quit()
        
        return {
            "success": True,
            "title": title,
            "content": text,
            "message": "Content extracted successfully"
        }
    except Exception as e:
        return {
            "success": False,
            "error": str(e),
            "message": "Error extracting content"
        }

# HTML Template
HTML_TEMPLATE = '''
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Browser Automation Tool - Flask</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; background: #f5f5f5; }
        .container { max-width: 1200px; margin: 0 auto; background: white; padding: 20px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
        .header { text-align: center; color: #333; margin-bottom: 30px; }
        .form-section { margin: 20px 0; padding: 20px; border: 1px solid #ddd; border-radius: 5px; }
        .form-group { margin: 10px 0; }
        label { display: block; margin-bottom: 5px; font-weight: bold; }
        input[type="text"], textarea { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; }
        button { background: #007bff; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; margin: 5px; }
        button:hover { background: #0056b3; }
        .result { margin: 20px 0; padding: 15px; border-radius: 5px; }
        .success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
        .error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
        .screenshot { max-width: 100%; height: auto; border: 1px solid #ddd; border-radius: 5px; }
        .tabs { margin: 20px 0; }
        .tab-content { display: none; }
        .tab-content.active { display: block; }
        .tab-buttons { margin-bottom: 20px; }
        .tab-buttons button { margin-right: 10px; }
        pre { background: #f8f9fa; padding: 10px; border-radius: 5px; overflow-x: auto; }
    </style>
    <script>
        async function captureScreenshot() {
            const url = document.getElementById('url').value;
            const headless = document.getElementById('headless').checked;
            
            if (!url) {
                alert('Please enter a URL');
                return;
            }
            
            const button = event.target;
            button.disabled = true;
            button.textContent = 'Capturing...';
            
            try {
                const response = await fetch('/screenshot', {
                    method: 'POST',
                    headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify({url: url, headless: headless})
                });
                
                const result = await response.json();
                displayResult('screenshot-result', result);
                
            } catch (error) {
                displayError('screenshot-result', 'Error: ' + error.message);
            } finally {
                button.disabled = false;
                button.textContent = 'Capture Screenshot';
            }
        }
        
        async function extractContent() {
            const url = document.getElementById('url').value;
            const headless = document.getElementById('headless').checked;
            
            if (!url) {
                alert('Please enter a URL');
                return;
            }
            
            const button = event.target;
            button.disabled = true;
            button.textContent = 'Extracting...';
            
            try {
                const response = await fetch('/extract', {
                    method: 'POST',
                    headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify({url: url, headless: headless})
                });
                
                const result = await response.json();
                displayResult('content-result', result);
                
            } catch (error) {
                displayError('content-result', 'Error: ' + error.message);
            } finally {
                button.disabled = false;
                button.textContent = 'Extract Content';
            }
        }
        
        function displayResult(elementId, result) {
            const element = document.getElementById(elementId);
            if (result.success) {
                element.className = 'result success';
                element.innerHTML = result.message;
                
                if (result.screenshot) {
                    element.innerHTML += '<br><br><img src="data:image/png;base64,' + result.screenshot + '" class="screenshot" alt="Screenshot">';
                }
                if (result.title) {
                    element.innerHTML += '<br><br><strong>Title:</strong> ' + result.title;
                }
                if (result.content) {
                    element.innerHTML += '<br><br><strong>Content:</strong><br><pre>' + result.content + '</pre>';
                }
            } else {
                element.className = 'result error';
                element.innerHTML = result.message + (result.error ? '<br><strong>Error:</strong> ' + result.error : '');
            }
            element.style.display = 'block';
        }
        
        function displayError(elementId, message) {
            const element = document.getElementById(elementId);
            element.className = 'result error';
            element.innerHTML = message;
            element.style.display = 'block';
        }
        
        function showTab(tabName) {
            // Hide all tab contents
            const tabContents = document.querySelectorAll('.tab-content');
            tabContents.forEach(tab => tab.classList.remove('active'));
            
            // Remove active class from all buttons
            const buttons = document.querySelectorAll('.tab-buttons button');
            buttons.forEach(btn => btn.classList.remove('active'));
            
            // Show selected tab
            document.getElementById(tabName).classList.add('active');
            event.target.classList.add('active');
        }
    </script>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🌐 Browser Automation Tool - Flask</h1>
            <p>Simple web interface for browser automation (No Gradio dependencies!)</p>
        </div>
        
        <div class="tabs">
            <div class="tab-buttons">
                <button onclick="showTab('single-url')" class="active">Single URL</button>
                <button onclick="showTab('batch-processing')">Batch Processing</button>
            </div>
            
            <div id="single-url" class="tab-content active">
                <div class="form-section">
                    <h3>🌐 Single URL Processing</h3>
                    <div class="form-group">
                        <label for="url">URL to visit:</label>
                        <input type="text" id="url" placeholder="https://example.com" value="https://example.com">
                    </div>
                    <div class="form-group">
                        <label>
                            <input type="checkbox" id="headless" checked> Headless mode
                        </label>
                    </div>
                    <button onclick="captureScreenshot()">📸 Capture Screenshot</button>
                    <button onclick="extractContent()">🔍 Extract Content</button>
                </div>
                
                <div id="screenshot-result" class="result" style="display:none;"></div>
                <div id="content-result" class="result" style="display:none;"></div>
            </div>
            
            <div id="batch-processing" class="tab-content">
                <div class="form-section">
                    <h3>⚡ Batch Processing</h3>
                    <p>Feature coming soon...</p>
                </div>
            </div>
        </div>
        
        <div class="form-section">
            <h3>✨ Features</h3>
            <ul>
                <li>🌐 <strong>Web Browser Control</strong>: Navigate websites programmatically</li>
                <li>📸 <strong>Screenshot Capture</strong>: Take screenshots of any webpage</li>
                <li>🔍 <strong>Content Extraction</strong>: Extract text content from HTML</li>
                <li>🔧 <strong>No Gradio Dependencies</strong>: Pure Flask approach</li>
                <li>⚡ <strong>Fast & Lightweight</strong>: Minimal dependencies</li>
            </ul>
        </div>
    </div>
</body>
</html>
'''

@app.route('/')
def home():
    return render_template_string(HTML_TEMPLATE)

@app.route('/screenshot', methods=['POST'])
def screenshot():
    data = request.json
    url = data.get('url', '')
    headless = data.get('headless', True)
    
    result = navigate_and_screenshot(url, headless)
    return jsonify(result)

@app.route('/extract', methods=['POST'])
def extract():
    data = request.json
    url = data.get('url', '')
    headless = data.get('headless', True)
    
    result = extract_text_content(url, headless)
    return jsonify(result)

if __name__ == "__main__":
    app.run(host="0.0.0.0", port=7860, debug=False)