Voice Assistant for E-commerce Stores

E-commerce Voice Assistant

Tap the mic and try saying "Search for laptops" or "Find a smart watch".

Tap to speak

Products

Product Search Results

Report Date:

Search Query: ""

Product NameCategoryPrice ($)

No products found for your search.

`; return; } productsToRender.forEach(p => { productResults.insertAdjacentHTML('beforeend', `
${p.name}

${p.name}

${p.category}

${formatUSD(p.price)}

`); }); } // --- SPEECH RECOGNITION LOGIC --- function setupSpeechRecognition() { if (SpeechRecognition) { recognition = new SpeechRecognition(); recognition.continuous = false; recognition.lang = 'en-US'; recognition.onstart = () => { isListening = true; statusDisplay.textContent = 'Listening...'; micBtn.classList.add('listening', 'bg-red-500', 'hover:bg-red-600'); }; recognition.onresult = (event) => { const transcript = event.results[0][0].transcript; statusDisplay.innerHTML = `You said: "${transcript}"`; processCommand(transcript); }; recognition.onerror = (event) => { statusDisplay.textContent = `Error: ${event.error}. Please try again.`; }; recognition.onend = () => { isListening = false; micBtn.classList.remove('listening', 'bg-red-500', 'hover:bg-red-600'); if (statusDisplay.textContent === 'Listening...') { statusDisplay.textContent = 'Tap to speak'; } }; } else { statusDisplay.textContent = "Sorry, your browser doesn't support speech recognition."; micBtn.disabled = true; } } function processCommand(command) { command = command.toLowerCase(); if (command.includes('search for') || command.includes('find') || command.includes('show me')) { const query = command.replace(/search for|find|show me/g, '').trim(); lastSearchQuery = query; const results = products.filter(p => p.name.toLowerCase().includes(query) || p.category.toLowerCase().includes(query)); lastSearchResults = results; renderProducts(results); speak(`Showing ${results.length} results for ${query}`); downloadPdfBtn.disabled = results.length === 0; } else { speak("I'm sorry, I didn't understand that. Please try a search command like 'find laptops'."); } } // --- EVENT HANDLERS --- micBtn.addEventListener('click', () => { if (isListening) { recognition.stop(); } else { recognition.start(); } }); downloadPdfBtn.addEventListener('click', generatePdf); // --- PDF GENERATION --- async function generatePdf() { const { jsPDF } = window.jspdf; const pdfReportElement = document.getElementById('pdf-report'); document.getElementById('pdf-date').textContent = new Date().toLocaleDateString('en-US'); document.getElementById('pdf-query').textContent = lastSearchQuery; const pdfTableBody = document.getElementById('pdf-table-body'); pdfTableBody.innerHTML = ''; lastSearchResults.forEach(p => { pdfTableBody.insertAdjacentHTML('beforeend', `${p.name}${p.category}${p.price.toFixed(2)}`); }); const canvas = await html2canvas(pdfReportElement, { scale: 2 }); const imgData = canvas.toDataURL('image/jpeg', 0.85); const pdf = new jsPDF('p', 'mm', 'a4'); const pdfWidth = pdf.internal.pageSize.getWidth(); const pdfHeight = (canvas.height * pdfWidth) / canvas.width; pdf.addImage(imgData, 'JPEG', 0, 0, pdfWidth, pdfHeight); pdf.save(`Product-Search-Results-${lastSearchQuery}.pdf`); } // --- INITIALIZATION --- function init() { renderProducts(products); // Show all products initially setupSpeechRecognition(); } init(); });
Scroll to Top