Merge pull request #2 from spryker-eco/feature/demo/dev-ai-integrations

AI Feature integrations

.editorconfig

@@ -0,0 +1,13 @@
+; This file is for unifying the coding style for different editors and IDEs.
+; More information at https://editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 4
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.bat]
+end_of_line = crlf

.gitattributes

@@ -0,0 +1,31 @@
+# Set the default behavior, in case people don't have core.autocrlf set.
+* eol=lf
+* text=auto
+
+# Denote all files that are truly binary and should not be modified.
+*.png binary
+*.jpg binary
+*.gif binary
+*.jpeg binary
+*.zip binary
+*.phar binary
+*.ttf binary
+*.woff binary
+*.woff2 binary
+*.eot binary
+*.ico binary
+*.mo binary
+*.pdf binary
+*.xsd binary
+*.ts binary
+*.exe binary
+
+# Remove files for archives generated using `git archive`
+dependency.json export-ignore
+.coveralls.yml export-ignore
+.travis.yml export-ignore
+.editorconfig export-ignore
+.gitattributes export-ignore
+.gitignore export-ignore
+architecture-baseline.json export-ignore
+psalm-report.json export-ignore linguist-generated=true

.github/workflows/ci.yml

@@ -0,0 +1,58 @@
+name: CI
+
+on:
+    push:
+        branches:
+            - 'master'
+    pull_request:
+    workflow_dispatch:
+
+jobs:
+    validation:
+        name: Validation
+        runs-on: ubuntu-latest
+
+        steps:
+            - uses: actions/checkout@v3
+
+            - name: Setup PHP
+              uses: shivammathur/setup-php@v2
+              with:
+                  php-version: '8.2'
+                  extensions: mbstring, intl, bcmath
+                  coverage: none
+
+            - name: Composer Install
+              run: composer install --prefer-dist --no-interaction --profile
+
+            - name: Run validation
+              run: composer validate
+
+            - name: Syntax check
+              run: find ./src -path src -prune -o -type f -name '*.php' -print0 | xargs -0 -n1 -P4 php -l -n | (! grep -v "No syntax errors detected" )
+
+            - name: Run CodeStyle checks
+              run: composer cs-check
+
+            - name: Run PHPStan
+              run: composer stan
+
+    lowest:
+        name: Prefer Lowest
+        runs-on: ubuntu-latest
+
+        steps:
+            - uses: actions/checkout@v3
+
+            - name: Setup PHP
+              uses: shivammathur/setup-php@v2
+              with:
+                  php-version: '8.1'
+                  extensions: mbstring, intl, bcmath
+                  coverage: none
+
+            - name: Composer Install
+              run: composer install --prefer-dist --no-interaction --profile
+
+            - name: Composer Update
+              run: composer update --prefer-lowest --prefer-dist --no-interaction --profile -vvv

.gitignore

@@ -0,0 +1,30 @@
+# IDEs
+/.idea
+/.project
+/nbproject
+/.buildpath
+/.settings
+*.sublime-*
+*.AppleDouble
+*.AppleDB
+*.AppleDesktop
+
+# built client resources
+/src/*/Zed/*/Static/Public
+/src/*/Zed/*/Static/Assets/sprite
+
+# propel classes
+/src/*/Zed/*/Persistence/Propel/Base/*
+/src/*/Zed/*/Persistence/Propel/Map/*
+
+# OS
+.DS_Store
+
+# grunt stuff
+.grunt
+.sass-cache
+/node_modules/
+/tests/_output/*
+!/tests/_output/.gitkeep
+vendor
+composer.lock

.license

@@ -0,0 +1,4 @@
+/**
+ * MIT License
+ * For full license information, please view the LICENSE file that was distributed with this source code.
+ */

CHANGELOG.md

@@ -0,0 +1,3 @@
+# ProductManagementAi Changelog
+
+[Release Changelog](https://github.com/spryker-eco/product-management-ai/releases)

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016-present Spryker Systems GmbH
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1 +1,9 @@
-# product-management-ai
+# ProductManagementAi Module
+
+ProductManagementAi module provides the functionality to manage products with AI.
+
+## Installation
+
+```
+composer require spryker-eco/prduct-management-ai
+```

architecture-baseline.json

@@ -0,0 +1 @@
+[]

assets/Zed/js/ai-category-suggestion.js

@@ -0,0 +1,67 @@
+import { AiProductManagement } from './ai-product-management';
+
+export class AiCategorySuggestion extends AiProductManagement {
+    names = ['description', 'name'];
+    triggerSelector = '.js-ai-category-trigger';
+
+    preparePayload(trigger) {
+        const fieldElement = trigger.getAttribute('data-product-info-field');
+        const dataFields = document.querySelectorAll(fieldElement);
+
+        this.data = {};
+
+        for (const { name, value } of dataFields) {
+            const informationalPart = this.names.find((part) => name.includes(`[${part}]`));
+
+            if (!informationalPart || !value) {
+                continue;
+            }
+
+            this.data[`product_${informationalPart}`] ??= value;
+
+            if (Object.keys(this.data).length === this.names.length) {
+                return;
+            }
+        }
+    }
+
+    async processAiAction() {
+        if (Object.keys(this.data).length !== this.names.length) {
+            this.modal.classList.add(this.states.empty);
+            this.modal.classList.remove(this.states.loading);
+
+            return;
+        }
+
+        const select = this.modal.querySelector('.js-ai-category-select');
+
+        select.replaceChildren();
+
+        try {
+            const { categories } = await (await fetch(this.url, {
+                method: 'POST',
+                body: new URLSearchParams(this.data),
+            })).json();
+            const fragment = document.createDocumentFragment();
+
+            for (const [text, id] of Object.entries(categories)) {
+                fragment.append(new Option(text, id, true, true));
+            }
+
+            select.append(fragment);
+        } finally {
+            this.modal.classList.remove(this.states.loading);
+            select.dispatchEvent(new Event('change'));
+        }
+    }
+
+    onApply() {
+        const { selectedOptions } = this.modal.querySelector('.js-ai-category-select');
+
+        for (const option of this.fieldElement.options) {
+            option.selected = [...selectedOptions].some(_option => _option.value === option.value);
+        }
+
+        this.fieldElement.dispatchEvent(new Event('change'));
+    };
+}

assets/Zed/js/ai-image-alt-text.js

@@ -0,0 +1,52 @@
+import { AiProductManagement } from './ai-product-management';
+
+export class AiImageAltText extends AiProductManagement {
+    triggerSelector = '.js-ai-alt-image-trigger';
+
+    preparePayload(trigger) {
+        const inputLocale = this.fieldElement.name.split('[')[1].split(']')[0].replace('image_set_', '');
+        const patterns = JSON.parse(trigger.getAttribute('data-product-field-pattern'));
+
+        this.data = {
+            locale: inputLocale === 'default' ? 'en_US' : inputLocale,
+        };
+
+        for (const pattern of patterns) {
+            const value = document.querySelector(`[name="${pattern.replace('%locale%', this.data.locale)}"]`)?.value;
+
+            if (value) {
+                this.data.imageUrl = value;
+
+                return;
+            }
+        }
+    }
+
+    async processAiAction() {
+        if (!this.data.imageUrl) {
+            this.modal.classList.add(this.states.empty);
+            this.modal.classList.remove(this.states.loading);
+
+            return;
+        }
+
+        const input = this.modal.querySelector('.js-ai-alt-text-input');
+
+        input.value = '';
+
+        try {
+            const { altText } = await (await fetch(this.url, {
+                method: 'POST',
+                body: new URLSearchParams(this.data),
+            })).json();
+
+            input.value = decodeURI(altText || '');
+        } finally {
+            this.modal.classList.remove(this.states.loading);
+        }
+    }
+
+    onApply() {
+        this.fieldElement.value = this.modal.querySelector('.js-ai-alt-text-input').value;
+    };
+}

assets/Zed/js/ai-product-management.js

@@ -0,0 +1,65 @@
+export class AiProductManagement {
+    constructor() {
+        this.onApply = this.onApply.bind(this);
+        this.onAgain = this.onAgain.bind(this);
+    }
+
+    states = {
+        loading: 'is-loading',
+        empty: 'is-empty',
+    }
+
+    data = null;
+    modal = null;
+    fieldElement = null;
+    triggerSelector = null;
+    url = null;
+
+    init() {
+        document.querySelectorAll(this.triggerSelector).forEach((trigger) => {
+            trigger.addEventListener('click', this.onTriggerClick.bind(this));
+        })
+    }
+
+    refreshElements() {
+        this.data = null;
+        this.modal.classList.remove(this.states.loading, this.states.empty);
+        this.modal.querySelector('.js-ai-product-management-apply').removeEventListener('click', this.onApply);
+        this.modal.querySelector('.js-ai-product-management-again').removeEventListener('click', this.onAgain);
+
+        this.modal.querySelector('.js-ai-product-management-apply').addEventListener('click', this.onApply);
+        this.modal.querySelector('.js-ai-product-management-again').addEventListener('click', this.onAgain);
+    }
+
+    onTriggerClick(event) {
+        const trigger = event.currentTarget;
+
+        this.modal = document.getElementById(trigger.getAttribute('popovertarget'));
+        this.fieldElement = trigger.parentElement.querySelector(`${trigger.getAttribute('data-field-selector')}`);
+        this.url = trigger.dataset.url;
+
+        this.refreshElements();
+
+        this.modal.classList.add(this.states.loading);
+
+        this.preparePayload(trigger);
+        this.processAiAction();
+    }
+
+    onAgain() {
+        this.modal.classList.add(this.states.loading);
+        this.processAiAction();
+    }
+
+    preparePayload() {
+        throw new Error('Method `preparePayload` at AiProductManagement class is not implemented.');
+    }
+
+    processAiAction() {
+        throw new Error('Method `processAiAction` at AiProductManagement class is not implemented.');
+    }
+
+    onApply() {
+        throw new Error('Method `onApply` at AiProductManagement class is not implemented.');
+    }
+}