Delete app.js

app.js

@@ -1,533 +0,0 @@
-// Portfolio Application JavaScript
-
-// Application Data
-const portfolioData = {
-    sampleUrls: [
-        "https://example.com",
-        "https://news.bbc.com", 
-        "https://github.com",
-        "https://stackoverflow.com",
-        "https://amazon.com"
-    ],
-    demoResults: {
-        "https://example.com": "OTHER",
-        "https://news.bbc.com": "NEWS/BLOG",
-        "https://github.com": "OTHER", 
-        "https://stackoverflow.com": "OTHER",
-        "https://amazon.com": "E-COMMERCE"
-    },
-    sampleText: "The latest developments in artificial intelligence and machine learning are revolutionizing industries across the globe. From healthcare to finance, companies are implementing AI solutions to improve efficiency and decision-making. However, these advancements also raise important questions about ethics, privacy, and the future of work.",
-    sampleData: [
-        { month: 'Jan', sales: 4000, visitors: 2400, conversion: 6.0 },
-        { month: 'Feb', sales: 3000, visitors: 1398, conversion: 4.7 },
-        { month: 'Mar', sales: 2000, visitors: 9800, conversion: 2.0 },
-        { month: 'Apr', sales: 2780, visitors: 3908, conversion: 7.1 },
-        { month: 'May', sales: 1890, visitors: 4800, conversion: 3.9 },
-        { month: 'Jun', sales: 2390, visitors: 3800, conversion: 6.3 }
-    ]
-};
-
-// Tab Navigation
-function initTabs() {
-    const tabBtns = document.querySelectorAll('.tab-btn');
-    const tabContents = document.querySelectorAll('.tab-content');
-    
-    tabBtns.forEach(btn => {
-        btn.addEventListener('click', () => {
-            const targetTab = btn.dataset.tab;
-            
-            // Remove active class from all buttons and contents
-            tabBtns.forEach(b => b.classList.remove('active'));
-            tabContents.forEach(c => c.classList.remove('active'));
-            
-            // Add active class to clicked button and corresponding content
-            btn.classList.add('active');
-            document.getElementById(targetTab).classList.add('active');
-        });
-    });
-}
-
-// Web Scraping Tab Functions
-function initScrapingTab() {
-    const urlsInput = document.getElementById('urls-input');
-    const sampleUrlsBtn = document.getElementById('sample-urls-btn');
-    const startScrapingBtn = document.getElementById('start-scraping-btn');
-    const progressSection = document.getElementById('scraping-progress');
-    const resultsSection = document.getElementById('scraping-results');
-    const resultsContainer = document.getElementById('results-container');
-    const exportBtn = document.getElementById('export-results-btn');
-    
-    let scrapingResults = {};
-
-    sampleUrlsBtn.addEventListener('click', () => {
-        urlsInput.value = portfolioData.sampleUrls.join('\n');
-    });
-
-    startScrapingBtn.addEventListener('click', () => {
-        const urls = urlsInput.value.trim().split('\n').filter(url => url.trim());
-        
-        if (urls.length === 0) {
-            alert('Please enter at least one URL to scrape.');
-            return;
-        }
-
-        startScrapingProcess(urls);
-    });
-
-    exportBtn.addEventListener('click', () => {
-        const dataStr = JSON.stringify(scrapingResults, null, 2);
-        const dataBlob = new Blob([dataStr], { type: 'application/json' });
-        const url = URL.createObjectURL(dataBlob);
-        const link = document.createElement('a');
-        link.href = url;
-        link.download = 'scraping_results.json';
-        link.click();
-        URL.revokeObjectURL(url);
-    });
-
-    function startScrapingProcess(urls) {
-        // Reset and show progress
-        progressSection.classList.remove('hidden');
-        resultsSection.classList.add('hidden');
-        scrapingResults = {};
-        
-        const progressFill = document.getElementById('progress-fill');
-        const progressText = document.getElementById('progress-text');
-        
-        let currentIndex = 0;
-        const totalUrls = urls.length;
-        
-        function processNextUrl() {
-            if (currentIndex >= totalUrls) {
-                // Complete
-                progressText.textContent = 'Classification complete!';
-                setTimeout(() => {
-                    progressSection.classList.add('hidden');
-                    displayResults();
-                }, 1000);
-                return;
-            }
-            
-            const currentUrl = urls[currentIndex].trim();
-            const progress = ((currentIndex + 1) / totalUrls) * 100;
-            
-            progressFill.style.width = `${progress}%`;
-            progressText.textContent = `Processing: ${currentUrl} (${currentIndex + 1}/${totalUrls})`;
-            
-            // Simulate processing time
-            setTimeout(() => {
-                // Get classification result (use demo data if available, otherwise simulate)
-                const classification = portfolioData.demoResults[currentUrl] || simulateClassification(currentUrl);
-                scrapingResults[currentUrl] = classification;
-                
-                currentIndex++;
-                processNextUrl();
-            }, 1000 + Math.random() * 1500); // Random delay between 1-2.5s
-        }
-        
-        processNextUrl();
-    }
-    
-    function simulateClassification(url) {
-        const classifications = ['NEWS/BLOG', 'E-COMMERCE', 'OTHER', 'SOCIAL MEDIA', 'EDUCATIONAL'];
-        return classifications[Math.floor(Math.random() * classifications.length)];
-    }
-    
-    function displayResults() {
-        resultsContainer.innerHTML = '';
-        
-        Object.entries(scrapingResults).forEach(([url, classification]) => {
-            const resultItem = document.createElement('div');
-            resultItem.className = 'result-item';
-            
-            resultItem.innerHTML = `
-                <a href="${url}" target="_blank" class="result-url">${url}</a>
-                <span class="result-classification">${classification}</span>
-            `;
-            
-            resultsContainer.appendChild(resultItem);
-        });
-        
-        resultsSection.classList.remove('hidden');
-    }
-}
-
-// Computer Vision Tab Functions
-function initCVTab() {
-    const imageUpload = document.getElementById('image-upload');
-    const processBtn = document.getElementById('process-image-btn');
-    const cvMode = document.getElementById('cv-mode');
-    const cvResults = document.getElementById('cv-results');
-    const originalImage = document.getElementById('original-image');
-    const processedResult = document.getElementById('processed-result');
-    
-    let uploadedImageData = null;
-    
-    imageUpload.addEventListener('change', (e) => {
-        const file = e.target.files[0];
-        if (file) {
-            const reader = new FileReader();
-            reader.onload = (e) => {
-                uploadedImageData = e.target.result;
-                originalImage.src = uploadedImageData;
-                processBtn.disabled = false;
-            };
-            reader.readAsDataURL(file);
-        }
-    });
-    
-    processBtn.addEventListener('click', () => {
-        if (!uploadedImageData) return;
-        
-        processBtn.textContent = 'Processing...';
-        processBtn.classList.add('loading');
-        processBtn.disabled = true;
-        
-        // Simulate processing
-        setTimeout(() => {
-            const mode = cvMode.value;
-            displayCVResults(mode);
-            
-            processBtn.textContent = 'Process Image';
-            processBtn.classList.remove('loading');
-            processBtn.disabled = false;
-        }, 2000);
-    });
-    
-    function displayCVResults(mode) {
-        let resultHTML = '';
-        
-        switch (mode) {
-            case 'face-detection':
-                resultHTML = `
-                    <div class="face-detection-result">
-                        <h4>Face Detection Results</h4>
-                        <p><strong>Faces detected:</strong> ${Math.floor(Math.random() * 3) + 1}</p>
-                        <p><strong>Confidence:</strong> ${(Math.random() * 0.3 + 0.7).toFixed(2)}</p>
-                        <p><strong>Processing time:</strong> ${(Math.random() * 2 + 0.5).toFixed(1)}s</p>
-                        <div class="status success">✓ Detection Complete</div>
-                    </div>
-                `;
-                break;
-            case 'edge-detection':
-                resultHTML = `
-                    <div class="face-detection-result">
-                        <h4>Edge Detection Results</h4>
-                        <p><strong>Edges detected:</strong> ${Math.floor(Math.random() * 1000) + 500}</p>
-                        <p><strong>Algorithm:</strong> Canny Edge Detection</p>
-                        <p><strong>Threshold:</strong> Low: 50, High: 150</p>
-                        <div class="status success">✓ Edge Detection Complete</div>
-                    </div>
-                `;
-                break;
-            case 'color-analysis':
-                resultHTML = `
-                    <div class="face-detection-result">
-                        <h4>Color Analysis Results</h4>
-                        <p><strong>Dominant colors:</strong> 5 detected</p>
-                        <p><strong>Color space:</strong> RGB</p>
-                        <p><strong>Brightness:</strong> ${Math.floor(Math.random() * 100)}%</p>
-                        <div class="status success">✓ Analysis Complete</div>
-                    </div>
-                `;
-                break;
-        }
-        
-        processedResult.innerHTML = resultHTML;
-        cvResults.classList.remove('hidden');
-    }
-}
-
-// Text Analysis Tab Functions
-function initTextTab() {
-    const textInput = document.getElementById('text-input');
-    const sampleTextBtn = document.getElementById('sample-text-btn');
-    const analyzeBtn = document.getElementById('analyze-text-btn');
-    const analysisType = document.getElementById('analysis-type');
-    const textResults = document.getElementById('text-results');
-    const textOutput = document.getElementById('text-analysis-output');
-    
-    sampleTextBtn.addEventListener('click', () => {
-        textInput.value = portfolioData.sampleText;
-    });
-    
-    analyzeBtn.addEventListener('click', () => {
-        const text = textInput.value.trim();
-        
-        if (!text) {
-            alert('Please enter text to analyze.');
-            return;
-        }
-        
-        analyzeBtn.textContent = 'Analyzing...';
-        analyzeBtn.classList.add('loading');
-        analyzeBtn.disabled = true;
-        
-        // Simulate analysis
-        setTimeout(() => {
-            const type = analysisType.value;
-            displayTextResults(text, type);
-            
-            analyzeBtn.textContent = 'Analyze Text';
-            analyzeBtn.classList.remove('loading');
-            analyzeBtn.disabled = false;
-        }, 1500);
-    });
-    
-    function displayTextResults(text, type) {
-        let resultHTML = '';
-        
-        switch (type) {
-            case 'sentiment':
-                const sentiments = ['positive', 'negative', 'neutral'];
-                const sentiment = sentiments[Math.floor(Math.random() * sentiments.length)];
-                const confidence = (Math.random() * 0.4 + 0.6).toFixed(2);
-                
-                resultHTML = `
-                    <div class="analysis-result sentiment-${sentiment}">
-                        <h4>Sentiment Analysis</h4>
-                        <p><strong>Sentiment:</strong> ${sentiment.toUpperCase()}</p>
-                        <p><strong>Confidence:</strong> ${confidence}</p>
-                        <p><strong>Text length:</strong> ${text.length} characters</p>
-                        <p><strong>Words:</strong> ${text.split(' ').length}</p>
-                    </div>
-                `;
-                break;
-                
-            case 'classification':
-                const categories = ['Technology', 'Business', 'Science', 'Education', 'General'];
-                const category = categories[Math.floor(Math.random() * categories.length)];
-                
-                resultHTML = `
-                    <div class="analysis-result">
-                        <h4>Text Classification</h4>
-                        <p><strong>Category:</strong> ${category}</p>
-                        <p><strong>Confidence:</strong> ${(Math.random() * 0.3 + 0.7).toFixed(2)}</p>
-                        <p><strong>Model:</strong> Fine-tuned Mistral 7B</p>
-                    </div>
-                `;
-                break;
-                
-            case 'summary':
-                const summaryLength = Math.min(text.length / 3, 150);
-                const summary = text.substring(0, summaryLength) + '...';
-                
-                resultHTML = `
-                    <div class="analysis-result">
-                        <h4>Text Summarization</h4>
-                        <p><strong>Summary:</strong></p>
-                        <p>${summary}</p>
-                        <p><strong>Compression ratio:</strong> ${(summaryLength / text.length * 100).toFixed(1)}%</p>
-                    </div>
-                `;
-                break;
-                
-            case 'keywords':
-                const keywords = ['artificial intelligence', 'machine learning', 'efficiency', 'decision-making', 'technology', 'innovation'];
-                const selectedKeywords = keywords.sort(() => 0.5 - Math.random()).slice(0, 4);
-                
-                resultHTML = `
-                    <div class="analysis-result">
-                        <h4>Keyword Extraction</h4>
-                        <p><strong>Key terms identified:</strong></p>
-                        <div class="tech-grid">
-                            ${selectedKeywords.map(keyword => `<span class="tech-tag">${keyword}</span>`).join('')}
-                        </div>
-                        <p><strong>Keywords found:</strong> ${selectedKeywords.length}</p>
-                    </div>
-                `;
-                break;
-        }
-        
-        textOutput.innerHTML = resultHTML;
-        textResults.classList.remove('hidden');
-    }
-}
-
-// Data Visualization Tab Functions
-function initDataVizTab() {
-    const csvUpload = document.getElementById('csv-upload');
-    const sampleDataBtn = document.getElementById('sample-data-btn');
-    const generateChartBtn = document.getElementById('generate-chart-btn');
-    const chartType = document.getElementById('chart-type');
-    const dataPreview = document.getElementById('data-preview');
-    const chartContainer = document.getElementById('chart-container');
-    const dataTable = document.getElementById('data-table');
-    
-    let currentData = null;
-    let chart = null;
-    
-    sampleDataBtn.addEventListener('click', () => {
-        currentData = portfolioData.sampleData;
-        displayDataPreview();
-        generateChartBtn.disabled = false;
-    });
-    
-    csvUpload.addEventListener('change', (e) => {
-        const file = e.target.files[0];
-        if (file) {
-            const reader = new FileReader();
-            reader.onload = (e) => {
-                try {
-                    const csv = e.target.result;
-                    currentData = parseCSV(csv);
-                    displayDataPreview();
-                    generateChartBtn.disabled = false;
-                } catch (error) {
-                    alert('Error parsing CSV file. Please check the format.');
-                }
-            };
-            reader.readAsText(file);
-        }
-    });
-    
-    generateChartBtn.addEventListener('click', () => {
-        if (!currentData) return;
-        
-        generateVisualization();
-    });
-    
-    chartType.addEventListener('change', () => {
-        if (currentData && chart) {
-            generateVisualization();
-        }
-    });
-    
-    function parseCSV(csv) {
-        const lines = csv.split('\n').filter(line => line.trim());
-        const headers = lines[0].split(',');
-        
-        return lines.slice(1).map(line => {
-            const values = line.split(',');
-            const obj = {};
-            headers.forEach((header, index) => {
-                const value = values[index]?.trim();
-                obj[header.trim()] = isNaN(value) ? value : parseFloat(value);
-            });
-            return obj;
-        });
-    }
-    
-    function displayDataPreview() {
-        if (!currentData || currentData.length === 0) return;
-        
-        const headers = Object.keys(currentData[0]);
-        const previewData = currentData.slice(0, 5); // Show first 5 rows
-        
-        let tableHTML = `
-            <div class="data-table">
-                <table>
-                    <thead>
-                        <tr>${headers.map(h => `<th>${h}</th>`).join('')}</tr>
-                    </thead>
-                    <tbody>
-                        ${previewData.map(row => 
-                            `<tr>${headers.map(h => `<td>${row[h]}</td>`).join('')}</tr>`
-                        ).join('')}
-                    </tbody>
-                </table>
-            </div>
-            <p><strong>Total rows:</strong> ${currentData.length}</p>
-        `;
-        
-        dataTable.innerHTML = tableHTML;
-        dataPreview.classList.remove('hidden');
-    }
-    
-    function generateVisualization() {
-        const type = chartType.value;
-        const canvas = document.getElementById('data-chart');
-        
-        // Destroy existing chart
-        if (chart) {
-            chart.destroy();
-        }
-        
-        // Prepare data based on sample dataset structure
-        const labels = currentData.map(item => item.month || item[Object.keys(item)[0]]);
-        const datasets = [];
-        
-        // Get numeric columns
-        const numericColumns = Object.keys(currentData[0]).filter(key => 
-            key !== 'month' && typeof currentData[0][key] === 'number'
-        );
-        
-        const colors = ['#1FB8CD', '#FFC185', '#B4413C', '#ECEBD5', '#5D878F'];
-        
-        if (type === 'pie') {
-            // Use first numeric column for pie chart
-            const column = numericColumns[0];
-            datasets.push({
-                data: currentData.map(item => item[column]),
-                backgroundColor: colors.slice(0, currentData.length),
-                borderWidth: 1
-            });
-        } else {
-            // Line, bar, scatter charts
-            numericColumns.forEach((column, index) => {
-                datasets.push({
-                    label: column.charAt(0).toUpperCase() + column.slice(1),
-                    data: currentData.map(item => item[column]),
-                    backgroundColor: colors[index % colors.length],
-                    borderColor: colors[index % colors.length],
-                    borderWidth: 2,
-                    fill: type === 'line' ? false : true
-                });
-            });
-        }
-        
-        chart = new Chart(canvas, {
-            type: type,
-            data: {
-                labels: labels,
-                datasets: datasets
-            },
-            options: {
-                responsive: true,
-                maintainAspectRatio: false,
-                plugins: {
-                    title: {
-                        display: true,
-                        text: 'Data Visualization'
-                    },
-                    legend: {
-                        display: type !== 'pie'
-                    }
-                },
-                scales: type === 'pie' ? {} : {
-                    y: {
-                        beginAtZero: true
-                    }
-                }
-            }
-        });
-        
-        chartContainer.classList.remove('hidden');
-    }
-}
-
-// Initialize Application
-document.addEventListener('DOMContentLoaded', () => {
-    initTabs();
-    initScrapingTab();
-    initCVTab();
-    initTextTab();
-    initDataVizTab();
-});
-
-// Utility Functions
-function sleep(ms) {
-    return new Promise(resolve => setTimeout(resolve, ms));
-}
-
-function formatBytes(bytes, decimals = 2) {
-    if (bytes === 0) return '0 Bytes';
-    
-    const k = 1024;
-    const dm = decimals < 0 ? 0 : decimals;
-    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
-    
-    const i = Math.floor(Math.log(bytes) / Math.log(k));
-    
-    return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
-}