function TaggedImageSearcher() { const countInput = Inputs.number({ label: "How many images do you want to upload?", min: 1, max: 10, step: 1, value: 1 }); const generateButton = htl.html``; const uploadersContainer = htl.html`

`; const showAllButton = htl.html``; const displayContainer = htl.html`

`; const checkboxButton = htl.html``; const searchContainer = htl.html`

`; const resultButton = htl.html``; const resultContainer = htl.html`

`; const wrapper = htl.html`

Upload Images

${countInput} ${generateButton} ${uploadersContainer}

Display Collection

${showAllButton} ${displayContainer}

Search checkboxes

${checkboxButton} ${searchContainer} ${resultButton} ${resultContainer}

`; let widgetTemp = []; // store references to all ImageTagAdder widgets let widgetsData = { // store complete widgets data {file, tags} widgets: [], allTags: [] }; async function showValue() { // to match ReactiveWidget structure } generateButton.onclick = () => { uploadersContainer.innerHTML = ""; widgetTemp = []; const n = countInput.value; for (let i = 0; i < n; i++) { const label = htl.html`

Image ${i + 1}

`; const widget = ImageTagAdder(); widgetTemp.push(widget); uploadersContainer.appendChild(htl.html`

${label}${widget}

`); } }; showAllButton.onclick = async () => { displayContainer.innerHTML = ""; const n = countInput.value; try { for (let j = 0; j < n; j++) { widgetsData.widgets.push(widgetTemp[j].value); const imageTags = widgetTemp[j].value.tags.forEach((t) => { widgetsData.allTags.push(t); }); } } catch (error) { console.error("Error saving widgets data!"); } displayContainer.appendChild(htl.html`

Tags collection: ${widgetsData.allTags.join(", ")}

`); }; let selected; checkboxButton.onclick = () => { searchContainer.innerHTML = ""; selected = searchCheckbox( widgetsData.allTags, { // value: null, label: "Image Tags", } ); searchContainer.appendChild(htl.html`

${selected}

`); const mostTag = mostFrequentTag(widgetsData.allTags); searchContainer.appendChild(htl.html`

Most frequent tag: ${mostTag}

`); } resultButton.onclick = async () => { resultContainer.innerHTML = ""; const tagList = selected.value || []; if (tagList.length === 0) { resultContainer.appendChild(html`

Please select at least one tag.

`); return; } const flatData = widgetsData.widgets; const n = widgetsData.widgets.length; for (let i = 0; i < n; i++) { const filterFlag = flatData[i].tags.some(item => tagList.includes(item)); if (filterFlag) { const image = await htl.html`

${await flatData[i].file.image()}

`; resultContainer.appendChild(htl.html`

${image}

`); } } }; function mostFrequentTag(list) { const result = aq.table({ tag: list }) .groupby("tag") .count() .orderby(aq.desc("count")) .objects()[0]; return result.tag; } const result = ReactiveWidget(wrapper, { value: widgetsData, showValue }); return result; };