I will show you how to create a web app that would be running ChatGPT-3.5-turbo model under the hood. It will look like this ChatGPT-based chat but the code below MUST be run locally and not deployed online as it will expose your API keys.
Web app building steps overview:
- Get your API key from platform.open.ai
- Make a new folder and create an index.txt file
- Copy-paste the code that is below (labelled index.txt)
- Create in the same folder as index.txt the app.txt file and copy paste the code below (labelled app.txt)
- In app.txt replace YOUR_API_KEY (in two places) with your API key
- Rename your index.txt and app.txt into index.html and app.js, respectively
- Double click the index file and start chatting
GO TO: https://platform.open.ai
I. Get your API key
Register at platform.open.ai and go to Personal → View API keys.
Click on Create secret key. Copy and save the key in your notebook.
II. Make a new folder and create an index.txt file in it
III. Copy-paste the code that is below
Code for copying into index.txt
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ChatGPT App</title>
</head>
<body>
<center>
<h1>ChatGPT App</h1>
<form id="chat-form">
<label for="user-input">Your Question (You can separate text lines by pressing ENTER):</label>
<br>
<textarea id="user-input" style="width: 80%; height: 100px;" required></textarea>
<br>
<button type="submit" style="background-color: rgb(83, 72, 236); font-size: 24px;">Ask ChatGPT</button>
</form>
<h1>ChatGPT reply</h1>
<div id="response-container">
<p id="chatgpt-response"></p>
<p id="please-wait" style="display: none;">Please wait...</p>
</div>
</center>
<script src="app.js"></script>
</body>
</html>Save the file
IV. In the same folder create app.txt file and copy paste the code below
Code for app.txt file (updated to save and prompt back the previous messages imitating chat memory suggested by Reddit users SanFranLocal and turnip_burrito)
document.addEventListener('DOMContentLoaded', () => {
let past_conversations = [];
document.getElementById('chat-form').addEventListener('submit', async (event) => {
event.preventDefault();
const userInput = document.getElementById('user-input').value;
past_conversations.push({ role: 'user', content: userInput });
const pleaseWait = document.getElementById('please-wait');
const chatGPTResponseElement = document.getElementById('chatgpt-response');
pleaseWait.style.display = 'block';
chatGPTResponseElement.innerText = '';
try {
const chatGPTResponse = await getChatGPTResponse(past_conversations);
past_conversations.push({ role: 'assistant', content: chatGPTResponse });
chatGPTResponseElement.innerText = chatGPTResponse;
} catch (error) {
chatGPTResponseElement.innerText = 'Error: Could not fetch the response.';
} finally {
pleaseWait.style.display = 'none';
}
});
});
async function getChatGPTResponse(past_conversations) {
const apiKey = 'YOUR_API_KEY';
const url = 'https://api.openai.com/v1/chat/completions';
const headers = new Headers({
'Content-Type': 'application/json',
'Authorization': `Bearer YOUR_API_KEY`,
});
const body = JSON.stringify({
'model': 'gpt-3.5-turbo-0301',
'messages': past_conversations,
'temperature': 0.7,
});
const response = await fetch(url, {
method: 'POST',
headers: headers,
body: body,
});
if (response.ok) {
const data = await response.json();
const assistantMessage = data.choices[0].message;
return assistantMessage ? assistantMessage.content.trim() : '';
} else {
throw new Error(`Error: ${response.status}`);
}
}V. In app.txt replace YOUR_API_KEY (in two places) with your API key
(do not use my API key – it is revoked)
Save the file
VI. Rename your index.txt and app.txt into index.html and app.js, respectively
VII. Double-click on index.html and start chatting with GPT-3.5-turbo
Alternatively right-click index.html and launch it e.g. Chrome.
This is it. The app is done.
It will work locally on your computer. To share it with others the web app must be deployed on a server e.g. on GitHub for free. I will talk about it in another post.
Comments
Leave a Reply
Your email address will not be published. Required fields are marked *