Concept Search

@media screen and (max-width:450px){.ct-hidden-xs{display:none!important}}@media screen and (min-width:450px){.ct-visible-xs{display:none!important}}@media screen and (max-width:689.98px){.ct-hidden-sm,.wp-demo-search-field-bar-divider,.wp-demo-search-field-bar-icon,.wp-demo-search-field-image-drop-area-drop-msg,.wp-demo-search-field-image-drop-area-prompt-msg,.wp-demo-search-field-image-drop-area-upload-button svg{display:none!important}}@media screen and (min-width:689.98px){.ct-visible-sm{display:none!important}}@media screen and (max-width:999.98px){.ct-hidden-md{display:none!important}}@media screen and (min-width:999.98px){.ct-visible-md{display:none!important}}@media screen and (max-width:1280px){.ct-hidden-lg{display:none!important}}@media screen and (min-width:1280px){.ct-visible-lg{display:none!important}}:root{–grey-grey-smoke:#F5F7FA;–grey-grey-lighter:#E6E9ED;–grey-grey-light:#CCD1D9;–grey-grey-main:#656D78;–grey-grey-dark:#353B48}body{font-family:Arial,Helvetica,sans-serif;font-size:16px}#loading,#noresults,.wp-demo-search-field-image-container input[type=file]{display:none}[data-prefix=single_page] .entry-header .page-title{–fontSize:65px;–heading-color:#ffffff}.wp-demo-layout-container{margin:0 auto;min-width:340px;max-width:1280px}.wp-demo-layout-container .handlebar-initial-fetch{padding-top:24px}.wp-demo-layout-container .tab-container{display:flex;flex-direction:column;gap:24px}.wp-demo-search-field-image-container h2,.wp-demo-search-field-image-container p{font-size:18px;font-style:normal;font-weight:700;line-height:100%;letter-spacing:.2px}.wp-demo-search-field-image-container h2{display:block;margin:0 0 var(–padding-sm) 0;font-size:1.125rem;color:#353b48!important}.wp-demo-search-field-image-container p{color:#000;text-align:center}.wp-demo-search-field-image-dialog{display:flex;position:relative;box-sizing:border-box;width:100%;max-width:1280px;padding:32px;flex-direction:column;justify-content:center;align-items:flex-start;gap:32px;border-radius:25px;border:1px solid #119ff7;background:#fff}.wp-demo-search-field-image-dialog-title{display:flex;justify-content:space-between;width:100%}.wp-demo-search-field-image-dialog-body{display:flex;width:100%;flex-direction:column;gap:32px}.wp-demo-search-field-image-close{display:flex;align-items:center;justify-content:center;width:56px;height:56px;margin:0;position:absolute;top:1px;right:1px;box-sizing:border-box;vertical-align:top;border:0;background:#fff;border-radius:50%;cursor:pointer}.wp-demo-search-field-image-close:focus,.wp-demo-search-field-image-close:focus-visible,.wp-demo-search-field-image-close:focus-within,.wp-demo-search-field-image-close:hover,.wp-demo-search-field-image-close:target{background-color:#f5f7fa}.wp-demo-search-field-image-drop-area{display:flex;padding:20px 8px;flex-direction:column;align-items:center;gap:24px;align-self:stretch;border-radius:8px;border:1px solid #e6e9ed}@media screen and (min-width:689.98px){.wp-demo-search-field-image-drop-area{padding:40px 24px}}.wp-demo-search-field-image-drop-area.active{border:1px dashed #119ff7;background:#f2faff}.wp-demo-search-field-image-drop-area.active .wp-demo-search-field-image-drop-area-error,.wp-demo-search-field-image-drop-area.active .wp-demo-search-field-image-drop-area-icon,.wp-demo-search-field-image-drop-area.active .wp-demo-search-field-image-drop-area-image-display,.wp-demo-search-field-image-drop-area.active label{visibility:hidden}.wp-demo-search-field-image-drop-area.active .wp-demo-search-field-image-drop-area-prompt-msg,.wp-demo-search-field-image-drop-area.active-upload-button{display:none}.wp-demo-search-field-image-drop-area.active .wp-demo-search-field-image-drop-area-drop-msg{display:block}.wp-demo-search-field-image-drop-area-icon{width:100px;height:100px}.wp-demo-search-field-image-drop-area-prompt-msg{display:block;pointer-events:none}.wp-demo-search-field-image-drop-area-drop-msg{display:none;pointer-events:none;color:#119ff7!important}.wp-demo-search-field-image-drop-area-image-display{text-align:center;width:220px;height:auto}.wp-demo-search-field-image-drop-area-image-display img{display:block;width:auto;height:auto;max-width:100%;max-height:100%}.wp-demo-search-field-image-drop-area-upload-button{display:flex;padding:12px 40px 12px 32px;align-items:center;gap:10px;color:#fff;background-color:#000;cursor:pointer}.wp-demo-search-field-image-drop-area-upload-button svg{width:20px;height:20px}.wp-demo-search-field-container{display:flex;justify-content:space-around;max-width:1280px;width:100%;gap:12px}.wp-demo-search-field-bar{display:flex;justify-content:space-around;background-color:#f5f7fa;padding:0 16px;align-items:center;flex:1 0 0;border-radius:100px;border:1px solid #e6e9ed;transition:all .25s ease-in-out}.wp-demo-search-field-bar:focus,.wp-demo-search-field-bar:focus-visible,.wp-demo-search-field-bar:focus-within,.wp-demo-search-field-bar:hover,.wp-demo-search-field-bar:target{border:1px solid #119ff7;background:#fff}.wp-demo-search-field-bar-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin:0;max-width:7.5rem;vertical-align:top}.wp-demo-search-field-bar-input{display:flex;padding:16px 12px;align-items:flex-start;gap:10px;flex:1 0 0;border:0;color:#353b48;background-color:transparent;font-size:16px;font-style:normal;line-height:100%}.wp-demo-search-field-bar-input:focus,.wp-demo-search-field-bar-input:focus-visible,.wp-demo-search-field-bar-input:focus-within,.wp-demo-search-field-bar-input:hover,.wp-demo-search-field-bar-input:target{outline:0}.wp-demo-search-field-bar-divider{display:flex;flex-shrink:0;border-left:1px solid #e6e9ed;height:100%}.wp-demo-search-field-bar-link{color:var(–grey-grey-main, #656D78);text-align:center;font-size:16px;font-style:normal;line-height:100%;text-decoration:none;padding:16px 24px;transition:all .25s ease-in-out}.wp-demo-search-field-bar-link:hover{color:var(–grey-grey-dark, #353B48)}.wp-demo-search-field-actions{display:flex;align-items:center;justify-content:space-between}.wp-demo-search-field-actions-button{display:flex;padding:16px;align-items:center;align-self:stretch;border-radius:100px;border:1px solid #e6e9ed;background:#f5f7fa;transition:all .25s ease-in-out}.wp-demo-search-field-actions-button:hover{border:1px solid #119ff7;background:#fff}.wp-demo-search-field-actions-icon{width:20px;height:20px}.wp-demo-result-list-container{display:grid;gap:24px;grid-template-columns:1fr}@media screen and (min-width:689.98px){.wp-demo-result-list-container{grid-template-columns:1fr 1fr}}@media screen and (min-width:999.98px){.wp-demo-result-list-container{grid-template-columns:1fr 1fr 1fr}}@media screen and (min-width:1280px){.wp-demo-result-list-container{grid-template-columns:1fr 1fr 1fr 1fr}}.wp-demo-search-result-item-container{display:flex;flex-direction:column;position:relative;padding:24px;border:1px solid #ccd1d9;background:#fff;text-align:center;gap:24px}.wp-demo-search-result-item-container:hover{border-color:#119ff7}.wp-demo-search-result-item-container img{width:200px;min-width:200px;height:200px}.wp-demo-search-result-item-container .details{display:flex;flex-direction:column;align-items:center}.wp-demo-search-result-item-container .name-price{display:flex;flex-direction:column}.wp-demo-search-result-item-container .name-price .name{display:block;margin:0 0 12px;font-size:1.125rem;font-weight:700;color:#353b48;text-decoration:none}.wp-demo-search-result-item-container .name-price .name:hover{color:#119ff7}.wp-demo-search-result-item-container .name-price .price{margin:0 0 12px;color:#353b48;font-size:16px;font-style:normal;line-height:20px}const apigatewayendpoint=”https://search-ced-tlyjvw65yhbs7acj3mar6xe2hy.us-east-1.es.amazonaws.com/product-index/_search”,txtTokenizationendpoint=”https://corsproxy.io/?”+encodeURIComponent(“http://roboflow-cluster-dev-2062668224.us-east-1.elb.amazonaws.com/clip/embed_text”),imageTokenizationendpoint=”https://corsproxy.io/?”+encodeURIComponent(“http://roboflow-cluster-dev-2062668224.us-east-1.elb.amazonaws.com/clip/embed_image”),conceptSearchLoadingDiv=$(“#concept-search-results #loading”),conceptSearchNoResults=$(“#concept-search-results #noresults”),conceptSearchTotalResults=$(“#concept-search-results #totalresults”),conceptSearchPreloadResults=$(“#concept-search-results #handlebar-initial-fetch”),conceptSearchResultDiv=$(“#concept-search-results #results”);let timer=0;const conceptSearchBox=$(“input#concept-search”);async function searchByConcept(){conceptSearchNoResults.hide(),conceptSearchTotalResults.empty().hide(),conceptSearchResultDiv.empty(),conceptSearchLoadingDiv.show();let e=conceptSearchBox.val();if(e.length>2){let a='{“size”: 25,”_source”: {“includes”: [“description”,”key”,”image”,”title”,”url”,”price”,”sku”]},”query”: {“neural”: {“Details_V”: {“query_text”: “‘+e+’”,”model_id”: “K1r6Z4sBfeKOf63xa5op”,”k”: 10}}}}’,t=await fetch(apigatewayendpoint,{method:”POST”,headers:{Accept:”*/*”,Authorization:”Basic YWRtaW46WmFRMUB3U3g=”,”Content-Type”:”application/json”},body:a});let r=(await t.json()).hits.hits;if(r.length>0){conceptSearchLoadingDiv.hide(),conceptSearchPreloadResults.hide(),conceptSearchTotalResults.append(“Found “+r.length+” results.”).show();for(let e in r){let a=r[e]._source.url,t=r[e]._source.image,i=r[e]._source.title,o=r[e]._source.price;conceptSearchResultDiv.append(`\n \n `)}}else conceptSearchNoResults.show(),conceptSearchPreloadResults.show()}else conceptSearchPreloadResults.show();conceptSearchLoadingDiv.hide()}conceptSearchBox.keyup((function(){clearTimeout(timer),timer=setTimeout(searchByConcept,250)})),conceptSearchBox.change((function(){clearTimeout(timer),timer=setTimeout(searchByConcept,250)}));const imageSearchLoadingDiv=$(“#image-search-results #loading”),imageSearchNoResults=$(“#image-search-results #noresults”),imageSearchTotalResults=$(“#image-search-results #totalresults”),imageSearchResultDiv=$(“#image-search-results #results”),imageSearchbox=$(“input#image-search”),fileupload=$(“input#upload-image-button”),imageDropAreaContainer=$(“#wp-demo-search-field-image-drop-area”),uploadButtonInput=$(“#wp-demo-search-field-image-drop-area #upload-image-button”),imageDropAreaError=$(“#wp-demo-search-field-image-drop-area #error”),imageDisplay=$(“#wp-demo-search-field-image-drop-area #image-display”);let base64Data,searchType=”text”;async function searchByImage(){imageSearchNoResults.hide(),imageSearchTotalResults.empty().hide(),imageSearchResultDiv.empty(),imageSearchLoadingDiv.show();let e,a,t,r,i=imageSearchbox.val();if(“text”==searchType?(t=txtTokenizationendpoint,r=JSON.stringify({clip_version_id:”ViT-B-16″,text:i})):”image”==searchType&&(t=imageTokenizationendpoint,r=JSON.stringify({clip_version_id:”ViT-B-16″,image:[{type:”base64″,value:base64Data}]})),i.length>2||”image”==searchType){let i=await fetch(t,{method:”POST”,headers:{Accept:”*/*”,”Content-Type”:”application/json”,Origin:”jh67lm5pmk.execute-api.us-east-1.amazonaws.com”},body:r});if(e=(await i.json()).embeddings[0],e){let t=JSON.stringify({size:25,_source:{includes:[“description”,”key”,”image”,”title”,”url”,”price”,”sku”]},query:{knn:{Image_V:{vector:e,k:5}}}}),r=await fetch(apigatewayendpoint,{method:”POST”,headers:{Accept:”*/*”,Authorization:”Basic YWRtaW46WmFRMUB3U3g=”,”Content-Type”:”application/json”},body:t});a=(await r.json()).hits.hits}if(a&&a.length>0)for(var o in imageSearchLoadingDiv.hide(),imageSearchTotalResults.prepend(“

Found “+a.length+” results.

“).show(),a){let e=a[o]._source.url,t=””;a[o]._source.image&&(t=a[o]._source.image);let r=a[o]._source.title,i=a[o]._source.price;a[o]._source.description;imageSearchResultDiv.append(`\n \n `)}else imageSearchNoResults.show()}imageSearchLoadingDiv.hide()}imageSearchbox.keyup((function(){clearTimeout(timer),searchType=”text”,timer=setTimeout(searchByImage,250)}));const getBase64=e=>{const a=new FileReader;a.readAsDataURL(e),a.onload=e=>{base64Data=e.target.result,searchByImage()},a.onerror=e=>(console.log(“Error: “,e),null)},imageError=e=>{e.src=”images/no-image.png”},fileHandler=(e,a,t)=>{if(“image”!==t.split(“/”)[0])return imageDropAreaError.text(“Please upload an image file”),!1;imageDropAreaError.text(“”);const r=new FileReader;r.readAsDataURL(e),r.onloadend=()=>{imageDisplay.append(`\n

\n \n \n

\n `)}};uploadButtonInput.on(“change”,()=>{imageDisplay.empty();const e=uploadButtonInput.prop(“files”);Array.from(e).forEach(e=>{fileHandler(e,e.name,e.type)}),searchType=”image”,base64Data=null,getBase64(e[0])}),imageDropAreaContainer.on(“dragenter”,e=>{e.preventDefault(),e.stopPropagation(),imageDropAreaContainer.addClass(“active”)}),imageDropAreaContainer.on(“dragover”,e=>{e.preventDefault(),e.stopPropagation(),imageDropAreaContainer.addClass(“active”)}),imageDropAreaContainer.on(“dragleave”,e=>{e.preventDefault(),e.stopPropagation(),imageDropAreaContainer.removeClass(“active”)}),imageDropAreaContainer.on(“drop”,e=>{e.preventDefault(),e.stopPropagation(),imageDropAreaContainer.removeClass(“active”),imageDisplay.empty();const a=e.originalEvent.dataTransfer.files;Array.from(a).forEach(e=>{fileHandler(e,e.name,e.type)}),searchType=”image”,base64Data=null,getBase64(a[0])}),window.onload=()=>{imageDropAreaError.empty()};