Tech Mastery: Deep Dives into AEM, Cloud Technologies, AI Innovations, and Advanced Marketing Strate

 You may get the following error while using the AEM mail action to send the details captured through an AEM form(form built based on AEM foundation or core form components)

org.apache.sling.auth.core.AuthUtil isRedirectValid: Redirect target must not be an URL 

com.day.cq.wcm.foundation.forms.impl.MailServlet Invalid redirect specified:

This error can happen in multiple scenarios; some are below

Defining the external page as the Thank you page for the form - AEM Mail Servlet won't support external URLs as the thank you page due to security restriction

Defining the internal AEM page with complete URL, including protocol and domain - Even though the AEM page sites inside the AEM, as you specified the full URL, the mail servlet treat the URL as external.

Mismatch in the etc. map configuration - The etc. map configuration will help you to map the content path to the complete URLs - domain mapping with shortened URL based on your setup; if your etc. map configuration is enabled with the upper case for the domain names(e.g., www.Test.com), then you will see this issue even though only the content path specified as the thank you page. The reason is the Mail servlet URL comparison is case sensitive, even though the form URL and the thank you page URL are enabled through the same domain. 

Apache Sling :: Connection Timeout Agent provides a Java agent that uses the instrumentation API to add connect and read timeouts to connections made via HTTP or HTTPs. It only applies these timeouts if none were set explicitly.

Connection Timeout Agent:

The agent is intended as an additional layer of control when running untrusted client code that may make calls without explicitly setting timeouts. Setting timeouts in client code is always recommended rather than relying on this agent.

It currently supports setting timeouts for HTTP connections done using:

• java.net.URL and/or java.net.URLConnection
• Apache Commons HttpClient 3.x
• Apache HttpComponents Client 4.x
• OK Http

How to enable Connection Timeout Agent?

Enable the agent configurations through Java CLI.

You can check out the code from Tags · apache/sling-org-apache-sling-connection-timeout-agent (github.com) and build locally (mvn clean install)

I am using the snapshot version for testing with Connect timeout as 20 secs and Read time out as 60 secs (Copy org.apache.sling.connection-timeout-agent-1.0.3-SNAPSHOT-jar-with-dependencies.jar next to the AEM jar file)

java -javaagent:org.apache.sling.connection-timeout-agent-1.0.3-SNAPSHOT-jar-with-dependencies.jar=20000,60000 -jar aem-sdk-quickstart-2022.9.8722.20220912T101352Z-220800.jar

• <agent-connect-timeout> - connection timeout in milliseconds to apply via the agent
• <agent-read-timeout>- read timeout in milliseconds to apply via the agent
• <logspec> - if set to v, it will enter verbose mode and print additional information to System.out

For testing purposes, the servlet code enabled as part of my last post How to Connect Adobe Experience Manager (AEM) with ChatGPT | by Albin Issac | Apr, 2023 | Medium was not enabled with connection/read timeouts; enabled the connection timeout as one means the connection should fail all the times

java -javaagent:org.apache.sling.connection-timeout-agent-1.0.3-SNAPSHOT-jar-with-dependencies.jar=1,60000 -jar aem-sdk-quickstart-2022.9.8722.20220912T101352Z-220800.jar

Yes, the connection started failing every time; it started working without any issue when I set 20 seconds as the Connection timeout and 60 seconds as the read timeout.

org.apache.http.conn.ConnectTimeoutException: Connect to api.openai.com:443 [api.openai.com/, api.openai.com/] failed: connect timed out

The configurations can be monitored through JMX — org.apache.sling.cta

The AMS started enabling the connection timeout agent for the customers hosted on the AMS platform — The default connection timeout will be set to 20 seconds, and the default read timeout will be set to 60 seconds. But you can work with the AMS team to adjust the timeout values based on your custom need. The agent can be configured in on-prem/custom cloud-hosted versions of AEM if required.

I assume AEM as Cloud Services by default enabled with the Connection Time out agent — These timeout values are 10 seconds for connect calls and 60 seconds for read calls for connections. Refer to AEM as a Cloud Service Development Guidelines | Adobe Experience Manager (Outgoing HTTP Connections) for more details; not sure if the customers can adjust the global timeout values.

Anyhow recommended to always set the connection and read time outs in the code as the global configurations can lead to different issues.

Refer to Apache Sling :: Connection Timeout Agent for more details on Connection Timeout Agent.

 ChatGPT is an AI language model developed by OpenAI, capable of generating human-like text based on input. The model is trained on a large corpus of text data and can generate responses to questions, summarize long texts, write stories, and much more.

The OpenAI API can integrate AI models with different systems.

AEM already enables some of the Generative AI capabilities like — Content Creation, Summarization, rewriting, etc., also Adobe Integrate Adobe Firefly (a range of creative AI models to AEM DAM) to simplify content creation and management. I will explain this in more detail in another post.

Integrating AEM with ChatGPT empowers content authors to easily create content that meets the SEO requirements, e.g., create a title/description for a page, create a story on a topic, summarize the content, etc.; the ChatGPT generated content can be optimized further based on the need.

In this post, let us see how to integrate AEM with ChatGPT to empower the authors with content authoring.

As a first step, enable a servlet connecting the chatgpt model with the user prompt and returning the response.

ChatServlet.java

package com.chatgpt.core.servlets;

import javax.servlet.Servlet;
import javax.servlet.ServletException;
import java.io.IOException;
import java.util.logging.Logger;
import java.util.ArrayList;
import java.util.List;

import org.apache.sling.api.servlets.SlingSafeMethodsServlet;
import org.osgi.service.component.annotations.Component;
import org.apache.sling.api.SlingHttpServletRequest;
import org.apache.sling.api.SlingHttpServletResponse;
import org.apache.sling.api.servlets.HttpConstants;
import org.osgi.framework.Constants;

import com.chatgpt.core.beans.ChatGptRequest;
import com.chatgpt.core.beans.ChatGptResponse;
import com.fasterxml.jackson.databind.ObjectMapper;

import org.apache.http.HttpResponse;
import org.apache.http.client.HttpClient;
import org.apache.http.client.methods.HttpPost;
import org.apache.http.entity.StringEntity;
import org.apache.http.impl.client.HttpClients;
import org.apache.http.util.EntityUtils;

@Component(
    immediate = true,
    service = Servlet.class,
    property = {
        Constants.SERVICE_DESCRIPTION + "=ChatGPT Integration",
        "sling.servlet.methods=" + HttpConstants.METHOD_GET,
        "sling.servlet.paths=" + "/bin/chat",
        "sling.servlet.extensions={\"json\"}"
    }
)
public class ChatServlet extends SlingSafeMethodsServlet {

    private static final Logger LOGGER = Logger.getLogger(ChatServlet.class.getName());

    private static final String CHATGPT_API_ENDPOINT = "https://api.openai.com/v1/chat/completions";

    private static final HttpClient client = HttpClients.createDefault();
    private static final ObjectMapper MAPPER = new ObjectMapper();

    @Override
    protected void doGet(SlingHttpServletRequest request, SlingHttpServletResponse response) throws ServletException, IOException {
        String prompt = request.getParameter("prompt");
        String message = generateMessage(prompt);
        response.getWriter().write(message);
    }

    private static String generateMessage(String prompt) throws IOException {

            // Generate the chat message using ChatGPT API
            String requestBody = MAPPER.writeValueAsString(new ChatGptRequest(prompt,"gpt-3.5-turbo","user"));
            HttpPost request = new HttpPost(CHATGPT_API_ENDPOINT);
            request.addHeader("Authorization", "Bearer <Open API Token>");
            request.addHeader("Content-Type", "application/json");
            request.setEntity(new StringEntity(requestBody));
            HttpResponse response = client.execute(request);
            ChatGptResponse chatGptResponse = MAPPER.readValue(EntityUtils.toString(response.getEntity()), ChatGptResponse.class);
            String message = chatGptResponse.getChoices().get(0).getMessage().getContent();
                 
            return message;   

    }

        
    public static void main(String[] args) {
        try {
            System.out.println(generateMessage("What is Adobe AEM"));
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
    
}

Change the gpt model based on your need, gpt-3.5-turbo is the latest model currently available for API access; the model details can be found Models — OpenAI API

The ‘role’ can take one of three values: ‘system’, ‘user’ or the ‘assistant’.

These roles help define the context of the conversation; even you can specify the previous conversation context by adding messages with different roles, user — the message sent by the user, and assistant — the response from API.

Not mandatory to specify all the roles; I have used only the user role to generate the response; you can use other roles to give more context to the conversation.

ChatGptRequest.java

package com.chatgpt.core.beans;

import lombok.Data;
import java.util.List;
import java.util.ArrayList;

@Data
public class ChatGptRequest {
        private final int max_tokens;
    private final String model;
    private List<Message> messages;

    public ChatGptRequest(String prompt,String model, String role)
    {
        this.max_tokens=100;
        this.model=model;
        this.messages=new ArrayList<>();
        Message message=new Message();
        message.setRole(role);
        message.setContent(prompt);
        this.messages.add(message);
    } 
    
}

max_tokens — specifies the maximum number of tokens the API should generate in response to a prompt. Tokens are the individual words and punctuation marks that make up the text. Adjust the max_tokens based on your prompts and the expected response.

ChatGptResponse.java

package com.chatgpt.core.beans;

import java.util.List;

import com.fasterxml.jackson.annotation.JsonIgnoreProperties;

import lombok.Data;

@Data
@JsonIgnoreProperties(ignoreUnknown = true )
public class ChatGptResponse {
    private List<Choice> choices;

    @Data
    @JsonIgnoreProperties(ignoreUnknown = true )
    public static class Choice {
        private Message message;            

    }
}

Message.java

package com.chatgpt.core.beans;

import com.fasterxml.jackson.annotation.JsonIgnoreProperties;

import lombok.Data;

@Data
@JsonIgnoreProperties(ignoreUnknown = true )
public class Message {
    private String role; 
    private String content;             

}

Now Generate the OpenAI API Key through Account API Keys — OpenAI API

Replace <Open API Token> in the servlet with the actual token; ensure the token is secured, and you can keep the token as an OSGI configuration.

The API is billed based on the token usage; some free tokens are enabled for initial API testing; after that, you should enable the billing details to use the API.

Now the servlet can be invoked as http://localhost:4502/bin/chat.json?prompt=<<Prompt>> e.g., http://localhost:4502/bin/chat.json?prompt=what is AEM

The servlet can be invoked from components, pages, or toolbars to generate the required content.

In this post lets us see how to add a button on the title component edit toolbar to integrate with the above servlet to generate the content whenever required — the condition on the action can be changed to enable the chatgpt action on all the components or specific components (also the servlet can be invoked in multiple other ways).

Create a client library under your project with the below JS and add cq.authoring.editor.sites.page.hook for the categories.

ToolbarAction.CHATGPT.js

(function ($, channel, window, undefined) {
  "use strict";

  var ACTION_ICON = "coral-Icon--gear";
  var ACTION_TITLE = "CHATGPT";
  var ACTION_NAME = "ChatGPT";

  var chatgptAction = new Granite.author.ui.ToolbarAction({
    name: ACTION_NAME,
    icon: ACTION_ICON,
    text: ACTION_TITLE,
    execute: function (editable) {
      showDialog();
    },
    condition: function (editable) {
      return editable && editable.type === "chatgptintegration/components/title";
    },
    isNonMulti: true,
  });

  channel.on("cq-layer-activated", function (event) {
    if (event.layer === "Edit") {
      Granite.author.EditorFrame.editableToolbar.registerAction("CHATGPT", chatgptAction);
    }
  });


function showDialog() {
  // Create the dialog
  var dialog = new Coral.Dialog().set({
    id: 'chatgptDialog',
    header: {
      innerHTML: 'Generate Content through ChatGPT'
    },
    content: {
      innerHTML: '<form class="coral-Form coral-Form--vertical"><section class="coral-Form-fieldset"><div class="coral-Form-fieldwrapper"><textarea is="coral-textarea" class="coral-Form-field" placeholder="Enter your prompt" id="textarea1"  name="name"></textarea></div><div class="coral-Form-fieldwrapper"> <textarea is="coral-textarea" class="coral-Form-field" placeholder="Result will be displayed here" id="textarea2"  name="name"></textarea></div></section></form>'
    },
    footer: {
      innerHTML: '<button is="coral-button" variant="primary">Generate</button><button is="coral-button" variant="primary" coral-close>Close</button>'
    }
  });

    // Add an event listener to the submit button
    dialog.footer.querySelector("button").addEventListener("click", function () {
      var textarea1Value = dialog.content.querySelector("#textarea1").value;
      var servletUrl = "/bin/chat?prompt=" + encodeURIComponent(textarea1Value);

       dialog.content.querySelector("#textarea2").value = 'Generating...';

      // Send a request to the servlet
      var xhr = new XMLHttpRequest();
      xhr.open("GET", servletUrl);
      xhr.onreadystatechange = function () {
        if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
          dialog.content.querySelector("#textarea2").value = xhr.responseText;
        }
      };
      xhr.send();
    });

    // Open the dialog
    document.body.appendChild(dialog);
    dialog.show();
  }
})(jQuery, jQuery(document), this);

js.txt

#base=js
ToolbarAction.CHATGPT.js

Now the Title component edit toolbar displays the chatgpt actions.

Clicking on the action will display the dialog to generate the required content through the chatgpt integration.

Enter the prompt for generating the content and Click on Generate button.

Now the authors can use the chatgpt integration to perform the different content operations through ChatGPT —Generate the content, Summarize, generate a title, generate a description, etc.; modify the content based on the business context.

AEM already enables some of the Generative AI capabilities like — Content Creation, Summarization, rewriting, etc., also Adobe Integrate Adobe Firefly (a range of creative AI models to AEM DAM) to simplify content creation and management. I will explain this in more detail in another post.

AEM Project Reference— youttubedata/aem/chatgptintegration at master · techforum-repo/youttubedata (github.com)