Merge branch 'tensorflow' into patch-2

This commit is contained in:
Shubham Mehrotra 2020-06-17 16:28:59 +05:30
commit 12965457c8
4 changed files with 125 additions and 2 deletions

View File

@ -221,6 +221,7 @@ $(document).ready(function () {
miniCartKey: 0,
quickView: false,
productDetails: [],
showPageLoader: false,
}
},
@ -331,6 +332,14 @@ $(document).ready(function () {
})
});
},
showLoader: function () {
this.showPageLoader = true;
},
hideLoader: function () {
this.showPageLoader = false;
}
}
});

View File

@ -2445,3 +2445,20 @@
display: inline-block;
}
}
.image-search-container {
top: 9px;
right: 45px;
z-index: 10;
cursor: pointer;
position: absolute;
background: #fff;
height: 24px !important;
}
.camera-icon {
width: 24px;
display: inline-block;
background-size: cover;
background-image: url(/vendor/webkul/ui/assets/images/Camera.svg);
}

View File

@ -103,8 +103,10 @@
name="term"
type="search"
class="form-control"
:value="searchedQuery.term ? searchedQuery.term.split('+').join(' ') : ''"
placeholder="{{ __('velocity::app.header.search-text') }}" />
placeholder="{{ __('velocity::app.header.search-text') }}"
:value="searchedQuery.term ? searchedQuery.term.split('+').join(' ') : ''" />
<image-search-component></image-search-component>
<button class="btn" type="submit" id="header-search-icon">
<i class="fs16 fw6 rango-search"></i>
@ -154,6 +156,9 @@
</div>
</script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/mobilenet"></script>
<script type="text/x-template" id="sidebar-categories-template">
<div class="wrapper" v-if="rootCategories">
Hello World
@ -164,6 +169,26 @@
</div>
</script>
<script type="text/x-template" id="image-search-component-template">
<div class="d-inline-block">
<label class="image-search-container" for="image-search-container">
<i class="icon camera-icon"></i>
<input
type="file"
class="d-none"
ref="image_search_input"
id="image-search-container"
v-on:change="uploadImage()" />
<img
class="d-none"
id="uploaded-image-url"
:src="uploadedImageUrl" />
</label>
</div>
</script>
<script type="text/javascript">
(() => {
Vue.component('cart-btn', {
@ -319,5 +344,73 @@
}
}
});
Vue.component('image-search-component', {
template: '#image-search-component-template',
data: function() {
return {
uploadedImageUrl: ''
}
},
methods: {
uploadImage: function() {
debugger
this.$root.showLoader();
var formData = new FormData();
formData.append('image', this.$refs.image_search_input.files[0]);
axios.post(
"{{ route('shop.image.search.upload') }}",
formData,
{
headers: {
'Content-Type': 'multipart/form-data'
}
}
).then(response => {
var net;
this.uploadedImageUrl = response.data;
(async () => {
try {
var queryString = '';
var analysedResult = [];
debugger
net = await mobilenet.load();
const imgElement = document.getElementById('uploaded-image-url');
const result = await net.classify(imgElement);
result.forEach(value => {
queryString = value.className.split(',');
if (queryString.length > 1) {
analysedResult = analysedResult.concat(queryString)
} else {
analysedResult.push(queryString[0])
}
})
localStorage.searchedImageUrl = this.uploadedImageUrl;
queryString = localStorage.searched_terms = analysedResult.join('_');
this.$root.hideLoader();
window.location.href = "{{ route('shop.search.index') }}" + '?term=' + queryString + '&image-search=1';
} catch (error) {
this.$root.hideLoader();
};
})();
}).catch(() => {
debugger
this.$root.hideLoader();
});
}
}
});
})()
</script>

View File

@ -130,6 +130,10 @@
</div>
</div>
<div class="modal-parent" style="top: 0" v-if="showPageLoader">
<overlay-loader :is-open="showPageLoader"></overlay-loader>
</div>
</div>
<!-- below footer -->