Tensorflow Library Dynamicaly Loaded

This commit is contained in:
devansh bawari 2021-07-14 14:16:25 +05:30
parent 0d4e9b6ef2
commit 154f22bcbf
4 changed files with 210 additions and 150 deletions

File diff suppressed because one or more lines are too long

View File

@ -1,5 +1,5 @@
{
"/js/velocity.js": "/js/velocity.js?id=1c12a991b9a3d04715bd",
"/js/velocity.js": "/js/velocity.js?id=3d77b8601fe8d17ef0bf",
"/css/velocity-admin.css": "/css/velocity-admin.css?id=4322502d80a0e4a0affd",
"/css/velocity.css": "/css/velocity.css?id=170046c99c8d10e332ef"
}

View File

@ -1,17 +1,17 @@
import Vue from 'vue';
import accounting from 'accounting';
import VueCarousel from 'vue-carousel';
import VueToast from 'vue-toast-notification';
import 'vue-toast-notification/dist/index.css';
import de from 'vee-validate/dist/locale/de';
import ar from 'vee-validate/dist/locale/ar';
import fa from 'vee-validate/dist/locale/fa';
import fr from 'vee-validate/dist/locale/fr';
import nl from 'vee-validate/dist/locale/nl';
import tr from 'vee-validate/dist/locale/tr';
import VeeValidate, { Validator } from 'vee-validate';
import axios from 'axios';
import 'lazysizes';
import Vue from "vue";
import accounting from "accounting";
import VueCarousel from "vue-carousel";
import VueToast from "vue-toast-notification";
import "vue-toast-notification/dist/index.css";
import de from "vee-validate/dist/locale/de";
import ar from "vee-validate/dist/locale/ar";
import fa from "vee-validate/dist/locale/fa";
import fr from "vee-validate/dist/locale/fr";
import nl from "vee-validate/dist/locale/nl";
import tr from "vee-validate/dist/locale/tr";
import VeeValidate, { Validator } from "vee-validate";
import axios from "axios";
import "lazysizes";
window.axios = axios;
window.VeeValidate = VeeValidate;
@ -27,79 +27,98 @@ Vue.use(VeeValidate, {
dictionary: {
ar: ar,
de: de,
fa: fa,
fr: fr,
nl: nl,
tr: tr,
fa: fa,
fr: fr,
nl: nl,
tr: tr
}
});
Vue.filter('currency', function (value, argument) {
Vue.filter("currency", function(value, argument) {
return accounting.formatMoney(value, argument);
})
});
window.Vue = Vue;
window.Carousel = VueCarousel;
// UI components
Vue.component("vue-slider", require("vue-slider-component"));
Vue.component('mini-cart', require('./UI/components/mini-cart'));
Vue.component('modal-component', require('./UI/components/modal'));
Vue.component("mini-cart", require("./UI/components/mini-cart"));
Vue.component("modal-component", require("./UI/components/modal"));
Vue.component("add-to-cart", require("./UI/components/add-to-cart"));
Vue.component('star-ratings', require('./UI/components/star-rating'));
Vue.component('quantity-btn', require('./UI/components/quantity-btn'));
Vue.component('proceed-to-checkout', require('./UI/components/proceed-to-checkout'));
Vue.component('sidebar-component', require('./UI/components/sidebar'));
Vue.component("star-ratings", require("./UI/components/star-rating"));
Vue.component("quantity-btn", require("./UI/components/quantity-btn"));
Vue.component(
"proceed-to-checkout",
require("./UI/components/proceed-to-checkout")
);
Vue.component("sidebar-component", require("./UI/components/sidebar"));
Vue.component("product-card", require("./UI/components/product-card"));
Vue.component("wishlist-component", require("./UI/components/wishlist"));
Vue.component('carousel-component', require('./UI/components/carousel'));
Vue.component('child-sidebar', require('./UI/components/child-sidebar'));
Vue.component('card-list-header', require('./UI/components/card-header'));
Vue.component('magnify-image', require('./UI/components/image-magnifier'));
Vue.component('compare-component', require('./UI/components/product-compare'));
Vue.component("shimmer-component", require("./UI/components/shimmer-component"));
Vue.component('responsive-sidebar', require('./UI/components/responsive-sidebar'));
Vue.component('product-quick-view', require('./UI/components/product-quick-view'));
Vue.component('product-quick-view-btn', require('./UI/components/product-quick-view-btn'));
Vue.component('recently-viewed', require('./UI/components/recently-viewed'));
Vue.component('product-collections', require('./UI/components/product-collections'));
Vue.component('hot-category', require('./UI/components/hot-category'));
Vue.component('popular-category', require('./UI/components/popular-category'));
Vue.component("carousel-component", require("./UI/components/carousel"));
Vue.component("child-sidebar", require("./UI/components/child-sidebar"));
Vue.component("card-list-header", require("./UI/components/card-header"));
Vue.component("magnify-image", require("./UI/components/image-magnifier"));
Vue.component("compare-component", require("./UI/components/product-compare"));
Vue.component(
"shimmer-component",
require("./UI/components/shimmer-component")
);
Vue.component(
"responsive-sidebar",
require("./UI/components/responsive-sidebar")
);
Vue.component(
"product-quick-view",
require("./UI/components/product-quick-view")
);
Vue.component(
"product-quick-view-btn",
require("./UI/components/product-quick-view-btn")
);
Vue.component("recently-viewed", require("./UI/components/recently-viewed"));
Vue.component(
"product-collections",
require("./UI/components/product-collections")
);
Vue.component("hot-category", require("./UI/components/hot-category"));
Vue.component("popular-category", require("./UI/components/popular-category"));
window.eventBus = new Vue();
$(document).ready(function () {
$(document).ready(function() {
// define a mixin object
Vue.mixin(require('./UI/components/trans'));
Vue.mixin(require("./UI/components/trans"));
Vue.mixin({
data: function () {
data: function() {
return {
'imageObserver': null,
'navContainer': false,
'headerItemsCount': 0,
'sharedRootCategories': [],
'responsiveSidebarTemplate': '',
'responsiveSidebarKey': Math.random(),
'baseUrl': document.querySelector("script[src$='velocity.js']").getAttribute('baseUrl')
}
imageObserver: null,
navContainer: false,
headerItemsCount: 0,
sharedRootCategories: [],
responsiveSidebarTemplate: "",
responsiveSidebarKey: Math.random(),
baseUrl: document
.querySelector("script[src$='velocity.js']")
.getAttribute("baseUrl")
};
},
methods: {
redirect: function (route) {
route ? window.location.href = route : '';
redirect: function(route) {
route ? (window.location.href = route) : "";
},
debounceToggleSidebar: function (id, {target}, type) {
// setTimeout(() => {
this.toggleSidebar(id, target, type);
// }, 500);
debounceToggleSidebar: function(id, { target }, type) {
this.toggleSidebar(id, target, type);
},
toggleSidebar: function (id, {target}, type) {
toggleSidebar: function(id, { target }, type) {
if (
Array.from(target.classList)[0] == "main-category"
|| Array.from(target.parentElement.classList)[0] == "main-category"
Array.from(target.classList)[0] == "main-category" ||
Array.from(target.parentElement.classList)[0] ==
"main-category"
) {
let sidebar = $(`#sidebar-level-${id}`);
if (sidebar && sidebar.length > 0) {
@ -110,16 +129,20 @@ $(document).ready(function () {
}
}
} else if (
Array.from(target.classList)[0] == "category"
|| Array.from(target.classList)[0] == "category-icon"
|| Array.from(target.classList)[0] == "category-title"
|| Array.from(target.classList)[0] == "category-content"
|| Array.from(target.classList)[0] == "rango-arrow-right"
Array.from(target.classList)[0] == "category" ||
Array.from(target.classList)[0] == "category-icon" ||
Array.from(target.classList)[0] == "category-title" ||
Array.from(target.classList)[0] == "category-content" ||
Array.from(target.classList)[0] == "rango-arrow-right"
) {
let parentItem = target.closest('li');
let parentItem = target.closest("li");
if (target.id || parentItem.id.match('category-')) {
let subCategories = $(`#${target.id ? target.id : parentItem.id} .sub-categories`);
if (target.id || parentItem.id.match("category-")) {
let subCategories = $(
`#${
target.id ? target.id : parentItem.id
} .sub-categories`
);
if (subCategories && subCategories.length > 0) {
let subCategories1 = Array.from(subCategories)[0];
@ -128,7 +151,9 @@ $(document).ready(function () {
if (type == "mouseover") {
this.show(subCategories1);
let sidebarChild = subCategories1.find('.sidebar');
let sidebarChild = subCategories1.find(
".sidebar"
);
this.show(sidebarChild);
} else if (type == "mouseout") {
this.hide(subCategories1);
@ -143,48 +168,53 @@ $(document).ready(function () {
}
},
show: function (element) {
show: function(element) {
element.show();
element.mouseleave(({target}) => {
$(target.closest('.sidebar')).hide();
element.mouseleave(({ target }) => {
$(target.closest(".sidebar")).hide();
});
},
hide: function (element) {
hide: function(element) {
element.hide();
},
toggleButtonDisability ({event, actionType}) {
let button = event.target.querySelector('button[type=submit]');
toggleButtonDisability({ event, actionType }) {
let button = event.target.querySelector("button[type=submit]");
button ? button.disabled = actionType : '';
button ? (button.disabled = actionType) : "";
},
onSubmit: function (event) {
this.toggleButtonDisability({event, actionType: true});
onSubmit: function(event) {
this.toggleButtonDisability({ event, actionType: true });
if(typeof tinyMCE !== 'undefined')
tinyMCE.triggerSave();
if (typeof tinyMCE !== "undefined") tinyMCE.triggerSave();
this.$validator.validateAll().then(result => {
if (result) {
event.target.submit();
} else {
this.toggleButtonDisability({event, actionType: false});
this.toggleButtonDisability({
event,
actionType: false
});
eventBus.$emit('onFormError')
eventBus.$emit("onFormError");
}
});
},
isMobile: function () {
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i|/mobi/i.test(navigator.userAgent)) {
isMobile: function() {
if (
/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i |
/mobi/i.test(navigator.userAgent)
) {
if (this.isMaxWidthCrossInLandScape()) {
return false;
}
return true
return true;
} else {
return false
return false;
}
},
@ -192,7 +222,15 @@ $(document).ready(function () {
return window.innerWidth > 900;
},
getDynamicHTML: function (input) {
loadDynamicScript: function(src, onScriptLoaded) {
let dynamicScript = document.createElement("script");
dynamicScript.setAttribute("src", src);
document.body.appendChild(dynamicScript);
dynamicScript.addEventListener("load", onScriptLoaded, false);
},
getDynamicHTML: function(input) {
var _staticRenderFns;
const { render, staticRenderFns } = Vue.compile(input);
@ -205,7 +243,7 @@ $(document).ready(function () {
try {
var output = render.call(this, this.$createElement);
} catch (exception) {
console.log(this.__('error.something_went_wrong'));
console.log(this.__("error.something_went_wrong"));
}
this.$options.staticRenderFns = _staticRenderFns;
@ -213,7 +251,7 @@ $(document).ready(function () {
return output;
},
getStorageValue: function (key) {
getStorageValue: function(key) {
let value = window.localStorage.getItem(key);
if (value) {
@ -223,11 +261,11 @@ $(document).ready(function () {
return value;
},
setStorageValue: function (key, value) {
setStorageValue: function(key, value) {
window.localStorage.setItem(key, JSON.stringify(value));
return true;
},
}
}
});
@ -235,31 +273,31 @@ $(document).ready(function () {
el: "#app",
VueToast,
data: function () {
data: function() {
return {
modalIds: {},
miniCartKey: 0,
quickView: false,
productDetails: [],
showPageLoader: false,
}
showPageLoader: false
};
},
created: function () {
created: function() {
setTimeout(() => {
document.body.classList.remove("modal-open");
}, 0);
window.addEventListener('click', () => {
let modals = document.getElementsByClassName('sensitive-modal');
window.addEventListener("click", () => {
let modals = document.getElementsByClassName("sensitive-modal");
Array.from(modals).forEach(modal => {
modal.classList.add('hide');
modal.classList.add("hide");
});
});
},
mounted: function () {
mounted: function() {
setTimeout(() => {
this.addServerErrors();
}, 0);
@ -272,24 +310,26 @@ $(document).ready(function () {
},
methods: {
onSubmit: function (event) {
this.toggleButtonDisability({event, actionType: true});
onSubmit: function(event) {
this.toggleButtonDisability({ event, actionType: true });
if(typeof tinyMCE !== 'undefined')
tinyMCE.triggerSave();
if (typeof tinyMCE !== "undefined") tinyMCE.triggerSave();
this.$validator.validateAll().then(result => {
if (result) {
event.target.submit();
} else {
this.toggleButtonDisability({event, actionType: false});
this.toggleButtonDisability({
event,
actionType: false
});
eventBus.$emit('onFormError')
eventBus.$emit("onFormError");
}
});
},
toggleButtonDisable (value) {
toggleButtonDisable(value) {
var buttons = document.getElementsByTagName("button");
for (var i = 0; i < buttons.length; i++) {
@ -297,18 +337,18 @@ $(document).ready(function () {
}
},
addServerErrors: function (scope = null) {
addServerErrors: function(scope = null) {
for (var key in serverErrors) {
var inputNames = [];
key.split('.').forEach(function(chunk, index) {
if(index) {
inputNames.push('[' + chunk + ']')
key.split(".").forEach(function(chunk, index) {
if (index) {
inputNames.push("[" + chunk + "]");
} else {
inputNames.push(chunk)
inputNames.push(chunk);
}
})
});
var inputName = inputNames.join('');
var inputName = inputNames.join("");
const field = this.$validator.fields.find({
name: inputName,
@ -326,47 +366,53 @@ $(document).ready(function () {
}
},
addFlashMessages: function () {
addFlashMessages: function() {
if (window.flashMessages.alertMessage)
window.alert(window.flashMessages.alertMessage);
},
showModal: function (id) {
showModal: function(id) {
this.$set(this.modalIds, id, true);
},
loadCategories: function () {
this.$http.get(`${this.baseUrl}/categories`)
.then(response => {
this.sharedRootCategories = response.data.categories;
$(`<style type='text/css'> .sub-categories{ min-height:${response.data.categories.length * 30}px;} </style>`).appendTo("head");
})
.catch(error => {
console.log('failed to load categories');
})
},
addIntersectionObserver: function () {
this.imageObserver = new IntersectionObserver((entries, imgObserver) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
const lazyImage = entry.target
lazyImage.src = lazyImage.dataset.src
}
loadCategories: function() {
this.$http
.get(`${this.baseUrl}/categories`)
.then(response => {
this.sharedRootCategories = response.data.categories;
$(
`<style type='text/css'> .sub-categories{ min-height:${response
.data.categories.length * 30}px;} </style>`
).appendTo("head");
})
});
.catch(error => {
console.log("failed to load categories");
});
},
showLoader: function () {
$('#loader').show();
$('.overlay-loader').show();
addIntersectionObserver: function() {
this.imageObserver = new IntersectionObserver(
(entries, imgObserver) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const lazyImage = entry.target;
lazyImage.src = lazyImage.dataset.src;
}
});
}
);
},
showLoader: function() {
$("#loader").show();
$(".overlay-loader").show();
document.body.classList.add("modal-open");
},
hideLoader: function () {
$('#loader').hide();
$('.overlay-loader').hide();
hideLoader: function() {
$("#loader").hide();
$(".overlay-loader").hide();
document.body.classList.remove("modal-open");
}
@ -376,10 +422,10 @@ $(document).ready(function () {
window.app = app;
// for compilation of html coming from server
Vue.component('vnode-injector', {
Vue.component("vnode-injector", {
functional: true,
props: ['nodes'],
render(h, {props}) {
props: ["nodes"],
render(h, { props }) {
return props.nodes;
}
});

View File

@ -175,9 +175,6 @@
</div>
</script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs" defer></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/mobilenet" defer></script>
<script type="text/x-template" id="image-search-component-template">
<div class="d-inline-block image-search-container" v-if="image_search_status">
<label for="image-search-container">
@ -188,7 +185,7 @@
class="d-none"
ref="image_search_input"
id="image-search-container"
v-on:change="uploadImage()" />
v-on:change="loadLibrary()" />
<img
class="d-none"
@ -368,6 +365,7 @@
Vue.component('image-search-component', {
template: '#image-search-component-template',
data: function() {
return {
uploadedImageUrl: '',
@ -376,6 +374,22 @@
},
methods: {
/**
* This method will dynamically load the scripts. Because image search library
* only used when someone clicks or interact with the image button. This will
* reduce some data usage for mobile user.
*/
loadLibrary: function() {
this.loadDynamicScript('https://cdn.jsdelivr.net/npm/@tensorflow/tfjs', () => {
this.loadDynamicScript('https://cdn.jsdelivr.net/npm/@tensorflow-models/mobilenet', () => {
this.uploadImage();
});
});
},
/**
* This method will analyze the image and load the sets on the bases of trained model.
*/
uploadImage: function() {
var imageInput = this.$refs.image_search_input;
@ -467,9 +481,9 @@
alert('Only images (.jpeg, .jpg, .png, ..) are allowed.');
}
}
}
},
}
});
})()
})();
</script>
@endpush