Upload script.js

script.js

@@ -0,0 +1,218 @@
+let apiKey = localStorage.getItem('rapidapi-key');
+let uploadCount = parseInt(localStorage.getItem('upload-count') || '0');
+let currentImageUrl = null; // Store the current image URL
+
+// Initialize the app
+document.addEventListener('DOMContentLoaded', () => {
+    updateUploadCount();
+    updateApiStatus();
+    
+    // Load API key if exists
+    if (apiKey) {
+        document.getElementById('apiKey').value = apiKey;
+    }
+
+    // Event listener for image URL input
+    const imageUrlInput = document.getElementById('imageUrlInput');
+    imageUrlInput.addEventListener('input', (e) => {
+        currentImageUrl = e.target.value.trim();
+        updateApiStatus(); // Re-evaluate check button state after URL input
+    });
+});
+
+function updateUploadCount() {
+    document.getElementById('uploadCount').textContent = uploadCount;
+}
+
+function updateApiStatus() {
+    const statusIndicator = document.getElementById('apiStatus');
+    const statusDot = statusIndicator.querySelector('.status-dot');
+    const statusText = statusIndicator.querySelector('.status-text');
+    const checkBtn = document.getElementById('checkBtn');
+    
+    const imageUrlProvided = currentImageUrl && isValidUrl(currentImageUrl);
+
+    if (apiKey) {
+        statusDot.classList.add('active');
+        statusText.textContent = 'API Key Configured';
+        // Only enable check button if an image URL is also provided and valid
+        checkBtn.disabled = !imageUrlProvided;
+    } else {
+        statusDot.classList.remove('active');
+        statusText.textContent = 'API Key Required';
+        checkBtn.disabled = true;
+    }
+}
+
+function saveApiKey() {
+    const input = document.getElementById('apiKey');
+    const btn = input.nextElementSibling;
+    
+    if (!input.value.trim()) {
+        showNotification('Please enter a valid API key', 'error');
+        return;
+    }
+    
+    btn.classList.add('loading');
+    
+    // Simulate API key validation
+    setTimeout(() => {
+        apiKey = input.value.trim();
+        localStorage.setItem('rapidapi-key', apiKey);
+        btn.classList.remove('loading');
+        updateApiStatus();
+        showNotification('API key saved successfully!', 'success');
+    }, 1000);
+}
+
+function clearAll() {
+    document.getElementById('imageUrlInput').value = '';
+    currentImageUrl = null;
+    document.getElementById('resultSection').style.display = 'none';
+    updateApiStatus(); // Update check button state after clearing
+}
+
+function isValidUrl(string) {
+    try {
+        new URL(string);
+        return true;
+    } catch (_) {
+        return false;
+    }
+}
+
+async function checkAuthenticity() {
+    const checkBtn = document.getElementById('checkBtn');
+    
+    if (!currentImageUrl || !isValidUrl(currentImageUrl)) {
+        showNotification('Please enter a valid image URL to analyze', 'error');
+        return;
+    }
+
+    if (!apiKey) {
+        showNotification('Please save your RapidAPI key first.', 'error');
+        return;
+    }
+    
+    checkBtn.classList.add('loading');
+    
+    try {
+        const response = await fetch('https://product-authentication-api-fake-vs-real-item-detector.p.rapidapi.com/check', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'x-rapidapi-host': 'product-authentication-api-fake-vs-real-item-detector.p.rapidapi.com',
+                'x-rapidapi-key': apiKey
+            },
+            body: JSON.stringify({
+                image_url: currentImageUrl // Send the provided image URL to the API
+            })
+        });
+        
+        if (!response.ok) {
+            throw new Error(`API Error: ${response.status}`);
+        }
+        
+        const result = await response.json();
+        displayResult(result); 
+        
+        // Update upload count
+        uploadCount++;
+        localStorage.setItem('upload-count', uploadCount.toString());
+        updateUploadCount();
+        
+    } catch (error) {
+        console.error('Error:', error);
+        showNotification('Authentication check failed. Please try again.', 'error');
+        
+        // For demo purposes, show a mock result even on error
+        const mockResult = {
+            status: 'fake', // Changed to fake for an example of error result
+            brand: 'Unknown',
+            description: 'Could not verify authenticity. Please try another image or check the URL.'
+        };
+        displayResult(mockResult);
+    } finally {
+        checkBtn.classList.remove('loading');
+    }
+}
+
+function displayResult(result) {
+    const resultSection = document.getElementById('resultSection');
+    const resultBadge = document.getElementById('resultBadge');
+    const resultImage = document.getElementById('resultImage');
+    const resultBrand = document.getElementById('resultBrand');
+    const resultStatus = document.getElementById('resultStatus');
+    const resultDescription = document.getElementById('resultDescription');
+    
+    // Update badge
+    resultBadge.className = `result-badge ${result.status}`;
+    resultBadge.querySelector('.badge-text').textContent = result.status === 'real' ? 'Authentic' : 'Fake';
+    
+    // Update image - use the URL stored in currentImageUrl
+    resultImage.src = currentImageUrl;
+    
+    // Update details
+    resultBrand.textContent = result.brand || 'Unknown';
+    resultStatus.textContent = result.status === 'real' ? 'Authentic Product' : 'Counterfeit Product';
+    resultDescription.textContent = result.description || 'No description available';
+    
+    // Show result section with animation
+    resultSection.style.display = 'block';
+    setTimeout(() => {
+        resultSection.scrollIntoView({ behavior: 'smooth' });
+    }, 100);
+    
+    showNotification(`Product analyzed: ${result.status === 'real' ? 'Authentic' : 'Counterfeit'}`, result.status === 'real' ? 'success' : 'warning');
+}
+
+function showNotification(message, type = 'info') {
+    // Create notification element
+    const notification = document.createElement('div');
+    notification.className = `notification ${type}`;
+    notification.textContent = message;
+    
+    // Style the notification
+    Object.assign(notification.style, {
+        position: 'fixed',
+        top: '20px',
+        right: '20px',
+        padding: '1rem 1.5rem',
+        borderRadius: '12px',
+        fontWeight: '600',
+        fontSize: '0.875rem',
+        zIndex: '1000',
+        transform: 'translateX(400px)',
+        transition: 'transform 0.3s ease',
+        maxWidth: '300px',
+        boxShadow: '0 10px 25px rgba(0,0,0,0.1)'
+    });
+    
+    // Set colors based on type
+    const colors = {
+        success: { bg: '#10B981', color: 'white' },
+        error: { bg: '#EF4444', color: 'white' },
+        warning: { bg: '#F59E0B', color: 'white' },
+        info: { bg: '#3B82F6', color: 'white' }
+    };
+    
+    notification.style.backgroundColor = colors[type].bg;
+    notification.style.color = colors[type].color;
+    
+    document.body.appendChild(notification);
+    
+    // Animate in
+    setTimeout(() => {
+        notification.style.transform = 'translateX(0)';
+    }, 10);
+    
+    // Remove after delay
+    setTimeout(() => {
+        notification.style.transform = 'translateX(400px)';
+        setTimeout(() => {
+            if (notification.parentNode) {
+                notification.parentNode.removeChild(notification);
+            }
+        }, 300);
+    }, 3000);
+}