LinkedIn
I will showcase my simple project of integrating ChatGPT as a chat page on a local computer that is run by a browser.
As a tech enthusiast, I have always been interested in exploring the potential of artificial intelligence and its applications in various fields. I have been following OpenAI and using Davinci and Ada before ChatGPT was buplicly known. With the advancements in natural language processing, I decided to integrate one of the most powerful language models – ChatGPT – into a chat app that can be accessed locally through a browser.
The primary aim of this example was to create a web page that can provide users with an interactive and engaging conversation experience, while leveraging the power of ChatGPT to generate intelligent and contextually relevant responses.
To achieve this, I used JavaScript to develop a web-based chat app that is run by a browser. The frontend is designed using HTML, CSS, and JavaScript.
Overall, this simple project was a great learning experience for me, and it helped me gain a deeper understanding of natural language processing and web development principles. Integrating this functionality to Salesforce, I hope to showcase my ability to design and build Lightning Web Components that leverage the latest technologies and provide real-world value to users.
function sendUserInput() {
const userInput = document.getElementById("user-input").value;
const chatContainer = document.getElementById("chat-container");
// Add user input bubble
const userBubble = document.createElement("div");
userBubble.className = "chat-bubble chat-bubble-user";
const userMessage = document.createElement("p");
userMessage.textContent = userInput;
userBubble.appendChild(userMessage);
chatContainer.appendChild(userBubble);
var myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");
myHeaders.append("Accept", "application/json");
myHeaders.append("Authorization", "**** API HERE ****");
var raw = JSON.stringify({
"model": "gpt-3.5-turbo",
"messages": [{
"role": "user",
"content": userInput
}]
});
var requestOptions = {
method: 'POST',
headers: myHeaders,
body: raw,
redirect: 'follow'
};
console.log(requestOptions);
fetch("https://api.openai.com/v1/chat/completions", requestOptions)
.then(response => response.json())
.then(result => {
// Add ChatGPT response bubble
const gptBubble = document.createElement("div");
gptBubble.className = "chat-bubble chat-bubble-gpt";
const gptMessage = document.createElement("p");
console.log(result.choices[0].text);
gptMessage.textContent = result.choices[0].message.content;
gptBubble.appendChild(gptMessage);
chatContainer.appendChild(gptBubble);
})
.catch(error => console.log('error', error));
}