merdan
/
sarga
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/Webkul/Velocity/publishable/assets/js/velocity.js vendored
View File

File diff suppressed because one or more lines are too long

2
packages/Webkul/Velocity/publishable/assets/mix-manifest.json
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-admin.css": "/css/velocity-admin.css?id=4322502d80a0e4a0affd",
"/css/velocity.css": "/css/velocity.css?id=170046c99c8d10e332ef" "/css/velocity.css": "/css/velocity.css?id=170046c99c8d10e332ef"
} }

330
packages/Webkul/Velocity/src/Resources/assets/js/app.js vendored
View File

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

26
packages/Webkul/Velocity/src/Resources/views/shop/UI/particals.blade.php
View File

@ -175,9 +175,6 @@
</div> </div>
</script> </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"> <script type="text/x-template" id="image-search-component-template">
<div class="d-inline-block image-search-container" v-if="image_search_status"> <div class="d-inline-block image-search-container" v-if="image_search_status">
<label for="image-search-container"> <label for="image-search-container">
@ -188,7 +185,7 @@
class="d-none" class="d-none"
ref="image_search_input" ref="image_search_input"
id="image-search-container" id="image-search-container"
v-on:change="uploadImage()" /> v-on:change="loadLibrary()" />
<img <img
class="d-none" class="d-none"
@ -368,6 +365,7 @@
Vue.component('image-search-component', { Vue.component('image-search-component', {
template: '#image-search-component-template', template: '#image-search-component-template',
data: function() { data: function() {
return { return {
uploadedImageUrl: '', uploadedImageUrl: '',
@ -376,6 +374,22 @@
}, },
methods: { 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() { uploadImage: function() {
var imageInput = this.$refs.image_search_input; var imageInput = this.$refs.image_search_input;
@ -467,9 +481,9 @@
alert('Only images (.jpeg, .jpg, .png, ..) are allowed.'); alert('Only images (.jpeg, .jpg, .png, ..) are allowed.');
} }
} }
} },
} }
}); });
})() })();
</script> </script>
@endpush @endpush