Introduction
Currently, designing an eCommerce website involves considerable effort in curating content for end users, requiring the collaboration of various professionals, including marketing managers, graphic designers, and artists. The purpose of this Proof of Concept (POC) is to streamline the process for eCommerce website managers to generate and upload media to SmartEdit using Artificial Intelligence, thereby reducing the time involved. We will explore the integration of Generative AI directly into SmartEdit enabling users to create images within the platform using diverse AWS AI services. Users will provide a brief description of their expectations to the service, which will then generate and return the most suitable image.
Current Process
New Improved Process
Current vs New Improved Process
What is SmartEdit & SAP Commerce Cloud?
SAP Commerce Cloud is a versatile omnichannel e-commerce platform that facilitates personalised customer experiences. It offers businesses a unified solution to manage digital commerce across various channels, employing modules like product catalogue management, order processing and marketing automation. Notable for its tailored content delivery and recommendations, SAP Commerce Cloud optimises customer engagement. By integrating data and touchpoints, it enables businesses to provide consistent and convenient shopping experiences, enhancing competitiveness in the e-commerce arena.
SmartEdit is a Content Management System (CMS) integrated with SAP Commerce, that empowers end users to customise storefront content without necessitating developer intervention. It is an Angular application with an embedded frame, which renders the specified storefront and content slots inside the frame with all the components. There are different content slots like Header, Footer, etc.; within each, different types of components such as Paragraphs, Images, and Carousel.
Here, we will target the Media selector component with our custom modal to allow the user to select an image from their PC locally or have AI generate one for them.
Architecture
Our solution’s architecture involves the SmartEdit component initiating an API call to a Lambda function with user prompts. The Lambda function communicates with a Sagemaker Model Endpoint to produce an image based on the prompts. The image is then transformed into Base64 bytes by the Lambda function for integration into SmartEdit, ensuring a concise and efficient process.
Solution Architecture
How to Customise SmartEdit?
Pre-requisites
- Angular
- Java
- SAP Commerce Cloud
- AWS
Create a Custom SmartEdit Extension
Since SmartEdit is already included in the platform modules, we must create a custom extension to override it. We can do it using the ant extgen command with the following parameters:
- Template Name: ysmarteditmodule
- Name: aismartedit
- Package: com.fair.aismartedit
Add the new extension to the localextensions.xml file for it to be built and loaded.
<extension name="aismartedit" />
And finally, build and update the system using ant all followed by ant update system.
Write Code to Override the Components
Once in the custom extension, we must focus on the <extensionName>container folder inside the apps folder. This is where we will write the code to customise the container where the storefront is loaded and the components inside it.
We can create different toolbar items and custom components inside the src folder, which can be injected into our SmartEdit application through the <extensionName>container.ts file. In our case, the file is called aismarteditcontainer.ts.
To inject our custom component, we will be adding two new providers to the existing list of providers, which will have our custom component.
{
provide: MEDIA_FILE_SELECTOR_CUSTOM_TOKEN,
useValue: {
component: CustomMediaFileSelectorComponent
}
},
{
provide: MEDIA_SELECTOR_I18N_KEY_TOKEN,
useValue: {
...MEDIA_SELECTOR_I18N_KEY,
UPLOAD: 'Pick Asset'
}
}
Over here, the first provider is responsible for overriding the OOTB Media selection component with our custom one. CustomMediaFileSelectorComponent is a 2-level component, responsible for opening up a new modal, which triggers an internal call of a new component to render the buttons and options on the modal.
Upon clicking the button to select a new image, the custom component calls in the modalService to open the modal with our custom popup.
this.modalService.open({
component: CustomMediaFileBrowseModalComponent,
templateConfig: {
title: 'Select Media',
isDismissButtonVisible: true
},
data: {
onSelect: (fileList: FileList): void => this.onSelectFile(fileList)
}
});
In the above method, we call the CustomMediaFileBrowseModalComponent, where we have defined what appears on the modal and the actions the buttons perform.
Inside the CustomMediaFileBrowseModalComponent, we have a template defined in the @component tag.
@Component({
selector: 'custom-media-file-browser-modal',
templateUrl: './CustomMediaFileBrowserComponent.html'
})
This tells the component to render whatever is defined in CustomMediaFileBrowserComponent.html.
In our use case, we have 2 options:
- To select an image from the local storage – This is the default option available in standard SmartEdit.
- To create an image using AI – Our approach here involves taking an idea as an input from the user and then obtaining an AI-generated image encoded in base64 bytes from an AWS Lambda function which is connected to a SageMaker Endpoint. Subsequently, the lambda function converts this image into a file list object which can be feeded directly into the SmartEdit image selection dialog. This process ensures seamless integration of the generated image into SmartEdit’s standard image selection flow, promoting reusability and providing ease of use.
Upon selection of the image, the user can edit the meta-data of the image and then proceed to upload it to SmartEdit. Once uploaded, the user can see a preview of the image on the site before pushing it to the online version for the customers.
Conclusion
The integration of Generative AI into SmartEdit will revolutionise how users engage in content creation. The interaction between human creativity and AI assistance can yield content that is not only more efficient and engaging but also of higher quality. This transformation benefits both individual users and businesses that rely on effective communication strategies. With the continuous evolution of AI technology, the scope for SmartEdit’s growth and impact is considerable.
In addition to this integration, we are actively exploring the inclusion of AI text generation within SmartEdit. The prospect of extending this feature to multiple business applications will enhance the efficiency of various processes.
