Install Visual Search powered by OpenAI

Visual Search enables users to search across the product catalog by uploading an image. This document describes how to install Visual Search.

Install the feature core

Follow the steps in the following sections to install the Visual Search feature core.

Prerequisites

Install the required features:

1) Install the required modules

Install the required module:

composer require spryker-eco/image-search-ai:"^0.1.1" --update-with-dependencies

2) Add translations

1. Append the glossary according to your configuration:

>
search.with.your-images.title,Search with your images,en_US
search.with.your-images.title,Bildern suchen,de_DE
search.with.your-images.content,Upload an image to find similar products,en_US
search.with.your-images.content,"Laden Sie ein Bild hoch, um ähnliche Produkte zu finden",de_DE
search.with.your-images.error,Something went wrong. Please try another image,en_US
search.with.your-images.error,Etwas ist schiefgelaufen. Bitte versuchen Sie es mit einem anderen Bild,de_DE
search.with.your-images.button,Upload an image,en_US
search.with.your-images.button,Bild hochladen,de_DE
search.with.your.images.photo.button,Take a photo,en_US
search.with.your.images.photo.button,Foto aufnehmen,de_DE
search.with.your-images.no-results,"No results found. Please try another image.",en_US
search.with.your-images.no-results,"Keine Ergebnisse gefunden. Bitte versuchen Sie es mit einem anderen Bild.",de_DE

3) Enable controllers

Register the following route providers on the Storefront:

src/Pyz/Yves/Router/RouterDependencyProvider.php

<?php

namespace Pyz\Yves\Router;

use Spryker\Yves\Router\RouterDependencyProvider as SprykerRouterDependencyProvider;
use SprykerEco\Yves\ImageSearchAi\Plugin\Router\ImageSearchAiRouteProviderPlugin;

class RouterDependencyProvider extends SprykerRouterDependencyProvider
{
    /**
     * @return array<\Spryker\Yves\RouterExtension\Dependency\Plugin\RouteProviderPluginInterface>
     */
    protected function getRouteProvider(): array
    {
        return [
            new ImageSearchAiRouteProviderPlugin(),
        ];
    }
}

4) Set up widgets

1. To enable widgets, register the following plugins:

src/Pyz/Yves/ShopApplication/ShopApplicationDependencyProvider.php

<?php

namespace Pyz\Yves\ShopApplication;

use SprykerEco\Yves\ImageSearchAi\Widget\ImageSearchAiWidget;
use SprykerShop\Yves\ShopApplication\ShopApplicationDependencyProvider as SprykerShopApplicationDependencyProvider;

class ShopApplicationDependencyProvider extends SprykerShopApplicationDependencyProvider
{
    /**
     * @return array<string>
     */
    protected function getGlobalWidgets(): array
    {
        return [
            ImageSearchAiWidget::class,
        ];
    }
}

Integrate the feature frontend

1. Integrate the frontend part using the example integration in Demo Shops:

• B2B
• B2C
• B2B Marketplace
• B2C Marketplace

2. Apply the frontend changes:

npm install
console frontend:project:install-dependencies
console frontend:yves:build