Widget:Imagesearch
<head> <meta charset="UTF-8" /> <title>Search Form</title> <style> table, th, td { border: 1px solid black; border-collapse: collapse; padding: 8px; } img { max-width: 100px; } </style> </head> <body>
Search
<form id="searchForm"> <input type="text" id="freeSearch" name="freeSearch" />
<select id="category" name="category"> <option value="">-- Select Category --</option> <option value="landscape">landscape</option> <option value="painting">painting</option> <option value="building">building</option> <option value="map">map</option> </select>
<input type="range" id="threshold" name="threshold" min="0" max="1" step="0.01" value="0.61" />
<button type="submit">Send</button> </form>
Results
<script> document.getElementById('searchForm').addEventListener('submit', async function(event) { event.preventDefault();
const freeSearch = document.getElementById('freeSearch').value.trim(); const category = document.getElementById('category').value; const threshold = document.getElementById('threshold').value;
let queryValue = ; if (freeSearch && category) { alert("Please fill only one: Free Search OR Category."); return; } else if (freeSearch) { queryValue = freeSearch; } else if (category) { queryValue = category; } else { alert("Please enter a search term or select a category."); return; }
const url = `http://localhost:5001/search?query=${encodeURIComponent(queryValue)}&threshold=${threshold}&show_url=true`;
try { const response = await fetch(url); if (!response.ok) throw new Error("Network response was not ok.");
const data = await response.json();
const resultsDiv = document.getElementById('results'); if (!data.result || data.result.length === 0) {
resultsDiv.innerHTML = "
No results found.
";
return; }
// Build result table
let tableHTML = "
";data.result.forEach(item => { tableHTML += `
`; }); tableHTML += "| ID | Score | Image | URL |
|---|---|---|---|
| ${item.id} | ${item.score.toFixed(4)} | <img src="${item.url}" alt="${item.id}" /> | <a href="${item.url}" target="_blank">${item.url}</a> |
";
resultsDiv.innerHTML = tableHTML;
} catch (error) {
document.getElementById('results').innerHTML = `
Error: ${error.message}
`;
} }); </script>
<script> const thresholdSlider = document.getElementById('threshold'); const thresholdValueDisplay = document.getElementById('thresholdValue');
thresholdSlider.addEventListener('input', () => { thresholdValueDisplay.textContent = thresholdSlider.value; }); </script> </body>