2c:null 2d:["$","title",null,{"children":"Tagged Image Searcher | MyWorkspace | Observable"}] 32:Teef,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; }; 33:[] 30:{"id":"04b33f3f85f0934d","slug":"tagged-image-searcher","title":"Tagged Image Searcher","thumbnail":"b9e242cfa6b1601efc56755b46c37b89388a445dd95386678a67f6b0f5c9bdcc","access_level":"public","create_time":"$D2025-04-14T22:10:01.355Z","update_time":"$D2025-04-22T22:52:37.062Z","view_time":null,"first_public_time":"$D2025-04-21T07:02:46.083Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"a86976d1951f51ae","login":"lang-min-neu","name":"MyWorkspace","avatar_url":"https://avatars-next.observableusercontent.com/98a049ab37444353e44bb8d72da6a106de0bb0c9f136d9a746c702c730878dac","tier":"starter_2024","bio":""},"version":193,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"990152ba3989c5af","login":"lang-min","name":"Lang Min","avatar_url":"https://avatars-next.observableusercontent.com/6e9a941d6faa87b18a9a07713f2575f9abe722f6fcf72cab177262d8d43d8f07","tier":null,"bio":""}],"members":[{"type":"individual","id":"990152ba3989c5af","login":"lang-min","name":"Lang Min","avatar_url":"https://avatars-next.observableusercontent.com/6e9a941d6faa87b18a9a07713f2575f9abe722f6fcf72cab177262d8d43d8f07","tier":null,"role":"editor"},{"type":"team","id":"a86976d1951f51ae","login":"lang-min-neu","name":"MyWorkspace","avatar_url":"https://avatars-next.observableusercontent.com/98a049ab37444353e44bb8d72da6a106de0bb0c9f136d9a746c702c730878dac","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Tagged Image Searcher","cells":[{"id":0,"value":"# Tagged Image Searcher","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":70,"value":"## Description","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":78,"value":"Tagged Image Searcher is a simple application that allows users to upload up to ten pictures at a time, attach tags to each one, and search for images by clicking on checkboxes that are generated based on entered tags. It also use some other widgets.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":72,"value":"## What it does","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":80,"value":"This widget uses the Photo Tag Adder and allows users to\n1. choose how many photos they want to upload (up to ten)\n2. call upload widget\n3. view images and tags they just uploaded and attached\n4. list all recorded tags\n5. generate a list of checkboxes for further searching\n6. search certain images by clicking on checkboxes\n7. view the results","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":166,"value":"## How to use","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":168,"value":"Please follow the steps:\n1. choose the number of photos you want to upload\n2. click \"Generate Image Uploaders\" button\n3. click \"Choose File\" button to select a picture\n4. type the tags that you want to attach to this picture\n5. click \"submit\" button to complete uploading\n6. repeat for other uploaders\n7. click \"Show Collection\" button to view all the recorded tags\n8. click \"Generate Checkboxes\" button to have the list of checkboxes\n9. select the checkboxes you want\n10. click \"Show Results\" button to view images that match the selected tags","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":170,"value":"## Formats it accepts","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":172,"value":"Any image in .jpg, .jpeg, and .png format is fine.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":76,"value":"## How to import","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":174,"value":"To import, use this line
\n```\nimport { TaggedImageSearcher } from \"@lang-min-neu/tagged-image-searcher\"\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":182,"value":"## Widget & library used","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":184,"value":"Widget\n1. Photo Tag Adder - Lang Min\n2. Reactive Widget - John Guerra\n3. Search Checkbox - John Guerra\n\nLibrary\n1. Arquero","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":157,"value":"## Other links & files","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":159,"value":"Example
\n[View on Codepen](https://codepen.io/Lang-Min/pen/dPPpVZw)\n\nPDF document
\n[View on Google Docs](https://docs.google.com/document/d/1M2wawyfAKoDDS53CTc8Trjis3dlrLP05MOkaA1fx7hE/edit?usp=sharing)\n\nDemo Video
\n[Watch on YouTube](https://youtu.be/jcEdRZhS58Q)\n\nBluesky Post
\n[View on Bluesky](https://bsky.app/profile/langminneu.bsky.social/post/3lngrewwqo22c)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":74,"value":"## ---------- Program starts here ----------","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":24,"value":"viewof all = TaggedImageSearcher();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"import { aq, op } from '@uwdata/arquero'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"import {ImageTagAdder} from \"@lang-min-neu/photo-tag-adder\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"import {ReactiveWidget} from \"@john-guerra/reactive-widgets\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"import {searchCheckbox} from \"@john-guerra/search-checkbox\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"