aheedsajid/AuthentiCheck
0
1let apiKey = localStorage.getItem('rapidapi-key');2let uploadCount = parseInt(localStorage.getItem('upload-count') || '0');3let currentImageUrl = null; // Store the current image URL4 5// Initialize the app6document.addEventListener('DOMContentLoaded', () => {7 updateUploadCount();8 updateApiStatus();9 10 // Load API key if exists11 if (apiKey) {12 document.getElementById('apiKey').value = apiKey;13 }14 15 // Event listener for image URL input16 const imageUrlInput = document.getElementById('imageUrlInput');17 imageUrlInput.addEventListener('input', (e) => {18 currentImageUrl = e.target.value.trim();19 updateApiStatus(); // Re-evaluate check button state after URL input20 });21});22 23function updateUploadCount() {24 document.getElementById('uploadCount').textContent = uploadCount;25}26 27function updateApiStatus() {28 const statusIndicator = document.getElementById('apiStatus');29 const statusDot = statusIndicator.querySelector('.status-dot');30 const statusText = statusIndicator.querySelector('.status-text');31 const checkBtn = document.getElementById('checkBtn');32 33 const imageUrlProvided = currentImageUrl && isValidUrl(currentImageUrl);34 35 if (apiKey) {36 statusDot.classList.add('active');37 statusText.textContent = 'API Key Configured';38 // Only enable check button if an image URL is also provided and valid39 checkBtn.disabled = !imageUrlProvided;40 } else {41 statusDot.classList.remove('active');42 statusText.textContent = 'API Key Required';43 checkBtn.disabled = true;44 }45}46 47function saveApiKey() {48 const input = document.getElementById('apiKey');49 const btn = input.nextElementSibling;50 51 if (!input.value.trim()) {52 showNotification('Please enter a valid API key', 'error');53 return;54 }55 56 btn.classList.add('loading');57 58 // Simulate API key validation59 setTimeout(() => {60 apiKey = input.value.trim();61 localStorage.setItem('rapidapi-key', apiKey);62 btn.classList.remove('loading');63 updateApiStatus();64 showNotification('API key saved successfully!', 'success');65 }, 1000);66}67 68function clearAll() {69 document.getElementById('imageUrlInput').value = '';70 currentImageUrl = null;71 document.getElementById('resultSection').style.display = 'none';72 updateApiStatus(); // Update check button state after clearing73}74 75function isValidUrl(string) {76 try {77 new URL(string);78 return true;79 } catch (_) {80 return false;81 }82}83 84async function checkAuthenticity() {85 const checkBtn = document.getElementById('checkBtn');86 87 if (!currentImageUrl || !isValidUrl(currentImageUrl)) {88 showNotification('Please enter a valid image URL to analyze', 'error');89 return;90 }91 92 if (!apiKey) {93 showNotification('Please save your RapidAPI key first.', 'error');94 return;95 }96 97 checkBtn.classList.add('loading');98 99 try {100 const response = await fetch('https://product-authentication-api-fake-vs-real-item-detector.p.rapidapi.com/check', {101 method: 'POST',102 headers: {103 'Content-Type': 'application/json',104 'x-rapidapi-host': 'product-authentication-api-fake-vs-real-item-detector.p.rapidapi.com',105 'x-rapidapi-key': apiKey106 },107 body: JSON.stringify({108 image_url: currentImageUrl // Send the provided image URL to the API109 })110 });111 112 if (!response.ok) {113 throw new Error(`API Error: ${response.status}`);114 }115 116 const result = await response.json();117 displayResult(result); 118 119 // Update upload count120 uploadCount++;121 localStorage.setItem('upload-count', uploadCount.toString());122 updateUploadCount();123 124 } catch (error) {125 console.error('Error:', error);126 showNotification('Authentication check failed. Please try again.', 'error');127 128 // For demo purposes, show a mock result even on error129 const mockResult = {130 status: 'fake', // Changed to fake for an example of error result131 brand: 'Unknown',132 description: 'Could not verify authenticity. Please try another image or check the URL.'133 };134 displayResult(mockResult);135 } finally {136 checkBtn.classList.remove('loading');137 }138}139 140function displayResult(result) {141 const resultSection = document.getElementById('resultSection');142 const resultBadge = document.getElementById('resultBadge');143 const resultImage = document.getElementById('resultImage');144 const resultBrand = document.getElementById('resultBrand');145 const resultStatus = document.getElementById('resultStatus');146 const resultDescription = document.getElementById('resultDescription');147 148 // Update badge149 resultBadge.className = `result-badge ${result.status}`;150 resultBadge.querySelector('.badge-text').textContent = result.status === 'real' ? 'Authentic' : 'Fake';151 152 // Update image - use the URL stored in currentImageUrl153 resultImage.src = currentImageUrl;154 155 // Update details156 resultBrand.textContent = result.brand || 'Unknown';157 resultStatus.textContent = result.status === 'real' ? 'Authentic Product' : 'Counterfeit Product';158 resultDescription.textContent = result.description || 'No description available';159 160 // Show result section with animation161 resultSection.style.display = 'block';162 setTimeout(() => {163 resultSection.scrollIntoView({ behavior: 'smooth' });164 }, 100);165 166 showNotification(`Product analyzed: ${result.status === 'real' ? 'Authentic' : 'Counterfeit'}`, result.status === 'real' ? 'success' : 'warning');167}168 169function showNotification(message, type = 'info') {170 // Create notification element171 const notification = document.createElement('div');172 notification.className = `notification ${type}`;173 notification.textContent = message;174 175 // Style the notification176 Object.assign(notification.style, {177 position: 'fixed',178 top: '20px',179 right: '20px',180 padding: '1rem 1.5rem',181 borderRadius: '12px',182 fontWeight: '600',183 fontSize: '0.875rem',184 zIndex: '1000',185 transform: 'translateX(400px)',186 transition: 'transform 0.3s ease',187 maxWidth: '300px',188 boxShadow: '0 10px 25px rgba(0,0,0,0.1)'189 });190 191 // Set colors based on type192 const colors = {193 success: { bg: '#10B981', color: 'white' },194 error: { bg: '#EF4444', color: 'white' },195 warning: { bg: '#F59E0B', color: 'white' },196 info: { bg: '#3B82F6', color: 'white' }197 };198 199 notification.style.backgroundColor = colors[type].bg;200 notification.style.color = colors[type].color;201 202 document.body.appendChild(notification);203 204 // Animate in205 setTimeout(() => {206 notification.style.transform = 'translateX(0)';207 }, 10);208 209 // Remove after delay210 setTimeout(() => {211 notification.style.transform = 'translateX(400px)';212 setTimeout(() => {213 if (notification.parentNode) {214 notification.parentNode.removeChild(notification);215 }216 }, 300);217 }, 3000);218}