Image 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{flex-shrink:0;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 i=(await t.json()).hits.hits;if(i.length>0){conceptSearchLoadingDiv.hide(),conceptSearchPreloadResults.hide(),conceptSearchTotalResults.append(“Found “+i.length+” results.”).show();for(let e in i){let a=i[e]._source.url,t=i[e]._source.image,o=i[e]._source.title,r=i[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,i,o=imageSearchbox.val();if(“text”==searchType?(t=txtTokenizationendpoint,i=JSON.stringify({clip_version_id:”ViT-B-16″,text:o})):”image”==searchType&&(t=imageTokenizationendpoint,i=JSON.stringify({clip_version_id:”ViT-B-16″,image:[{type:”base64″,value:base64Data}]})),o.length>2||”image”==searchType){let o=await fetch(t,{method:”POST”,headers:{Accept:”*/*”,”Content-Type”:”application/json”,Origin:”jh67lm5pmk.execute-api.us-east-1.amazonaws.com”},body:i});if(e=(await o.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}}}}),i=await fetch(apigatewayendpoint,{method:”POST”,headers:{Accept:”*/*”,Authorization:”Basic YWRtaW46WmFRMUB3U3g=”,”Content-Type”:”application/json”},body:t});a=(await i.json()).hits.hits}if(a&&a.length>0)for(var r in imageSearchLoadingDiv.hide(),imageSearchTotalResults.prepend(“

Found “+a.length+” results.

“).show(),a){let e=a[r]._source.url,t=””;a[r]._source.image&&(t=a[r]._source.image);let i=a[r]._source.title,o=a[r]._source.price;a[r]._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 i=new FileReader;i.readAsDataURL(e),i.onloadend=()=>{imageDisplay.append(`\n

\n \n \n

\n `)}};function isMobile(){let e=!1;var a;return a=navigator.userAgent||navigator.vendor||window.opera,(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))&&(e=!0),e}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(),isMobile()?($(“#image-upload-button-container-desktop”)&&$(“#image-upload-button-container-desktop”).hide(),$(“#image-upload-button-container-mobile”)&&$(“#image-upload-button-container-mobile”).show()):($(“#image-upload-button-container-desktop”)&&$(“#image-upload-button-container-mobile”).hide(),$(“#image-upload-button-container-mobile”)&&$(“#image-upload-button-container-desktop”).show())};