Salesforce Integration with OpenAI : Revolutionizing Image Generation [2024]

 <!–Lightning card for OpenAI–>

    <lightning-card title=“Image Generator”>

        <lightning-spinner alternative-text=“Loading…” variant=“brand” if:true={IsSpinner}>

        </lightning-spinner>

        <div class=“slds-p-around–small”>

            <template if:true={data}>

                <img src={data}/>

            </template>

            <B>Describe about the image</B>

            <lightning-textarea name=“input1” value={question} onchange={handleChange}></lightning-textarea>

        </div>

        <div class=“slds-align_absolute-center”>

            <lightning-button variant=“brand” label=“Generate Image” title=“Primary action” onclick={handleClick}

                class=“slds-m-left_x-small”></lightning-button>

        </div>

    </lightning-card>

</template>

//Importing the Apex method to use in Js Controller

import getOpenAIResponse from ‘@salesforce/apex/ImageGeneratorUsingOpenAI.getOpenAIResponse’;

import { ShowToastEvent } from ‘lightning/platformShowToastEvent’;

export default class ImageGenerationUsingOpenAI extends LightningElement {

    @track question;

    @track IsSpinner = false;

    @track lstData = [];

    data;

    // this method will used to store the Input Value in the Variable

    handleChange(event) {

        this.question = event.target.value;

        console.log(this.question);

    }

    //This method is used to call the Apex to send the request to the Open-AI

    handleClick() {

        // to start the spinner

        this.IsSpinner = true;

        getOpenAIResponse({ messageBody: this.question })

            .then(result => {

                if (result.isSuccess == true) {

                    //update the data to the apex response

                    this.data = result.response;

                    //to stop the spinner 

                    this.IsSpinner = false;

                }

                else{

                   this.showToast(result.message,result.response,result.message); 

                }

            });

    }

    showToast(title,msg,variant) {

    const event = new ShowToastEvent({

        title: title,

        message: msg,

        variant: variant,

    });

    this.IsSpinner = false;

    this.dispatchEvent(event);

}

}

public class ImageGeneratorUsingOpenAI {

    //this class is used to Handel the Event from the ImageGenerationUsingOpenAI

.

    @AuraEnabled

    public static AuraResponse getOpenAIResponse(String messageBody) {

        AuraResponse auraResponse;

        IntegrateChatGPTWithSalesforce__mdt newIntegrateChatGPTWithSalesforce = [SELECT URL__c,Access_token__c

                                                                                 FROM IntegrateChatGPTWithSalesforce__mdt 

                                                                                 WHERE Label = ‘DalleImageGeneration’ ];

        String requestBodyJson = ‘{“prompt”: “‘+messageBody+‘”}’;

        String endpointUrl = newIntegrateChatGPTWithSalesforce.URL__c;

        string accessToken = newIntegrateChatGPTWithSalesforce.Access_token__c;

        Http http = new Http();

        HttpRequest request = new HttpRequest();

        HttpResponse response;

        if(string.isNotBlank(endpointUrl)){

            request.setEndpoint(endpointUrl);

        }

        request.setMethod(‘POST’);

        request.setHeader(‘Content-Type’, ‘application/json’);

        if(string.isNotBlank(accessToken)){

            request.setHeader(‘Authorization’, ‘Bearer ‘ + accessToken); 

        }

        // Set the JSON data as the request body

        request.setBody(requestBodyJson);

                try {

            response = http.send(request);

            // Process the response here

            if (response.getStatusCode() == 200) {

                // Successful response

                String responseBody = response.getBody();

                fromJSON responseWrapper = (fromJSON) JSON.deserialize(responseBody, fromJSON.class);

                Integer createdValue = responseWrapper.created;

                List<cls_data> dataList = responseWrapper.data;

                String urlValue;

                // Access the URL(s) inside the data list

                for (cls_data dataItem : dataList) {

                    urlValue = dataItem.url;

                }

                if(string.isnotblank(urlValue)){

                    AuraResponse = new AuraResponse(true, ‘SUCCESS’, urlValue);  

                }

                // Process the responseBody JSON data

            } else {

                // Error handling for non-200 status codes

                AuraResponse = new AuraResponse(false, ‘Error’, response.getStatus());

            }

        } catch (Exception ex) {

            // Exception handling

            AuraResponse = new AuraResponse(false, ‘Error’, ex.getMessage());

        }

        return AuraResponse;    

    }

    public class AuraResponse {

        @auraEnabled public Boolean isSuccess;

        @auraEnabled  public string message;

        @auraEnabled  public string response;

        public AuraResponse(Boolean isSuccess,

                            string message,

                            string response) {

                                this.isSuccess = isSuccess;

                                this.message = message;

                                this.response = response;

                            }

    }

    public class fromJSON{

        public Integer created;

        public cls_data[] data;

    }

    public class cls_data {

        public String url;  

    }

}