Skip to content

Commit 203d559

Browse files
jadehameljadehamel
authored
Refactoring the codebase the to best practises
1 parent c0481cd commit 203d559

File tree

3 files changed

+122
-139
lines changed

3 files changed

+122
-139
lines changed

‎index.html

Lines changed: 16 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -4,48 +4,31 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>A.I. Agent Interface</title>
7-
<link rel="stylesheet" href="styles.css">
7+
<link rel="stylesheet" href="style.css">
88
</head>
99
<body>
1010
<div id="chat-container">
1111
<div class="input-container">
12-
My Custom A.I. Agent
12+
<h2>My Custom A.I. Agent</h2>
1313
</div>
1414
<div class="input-container">
1515
<table width="100%">
1616
<tr>
1717
<td id="agent-bot-setting">
18-
<table>
19-
<tr>
20-
<td>Bot: </td>
21-
<td>
22-
<select id="agentBot" name="agentBot">
23-
<option value="chatGPT" selected>ChatGPT</option>
24-
<option value="Llama">Llama</option>
25-
</select>
26-
</td>
27-
</tr>
28-
</table>
18+
<label for="agentBot">Bot:</label>
19+
<select id="agentBot" name="agentBot">
20+
<option value="chatGPT" selected>ChatGPT</option>
21+
<option value="Llama">Llama</option>
22+
<option value="Custom">Custom</option>
23+
</select>
2924
</td>
3025
<td id="agent-end-point-setting">
31-
<table>
32-
<tr>
33-
<td>EndPoint: </td>
34-
<td>
35-
<input type="text" id="agentEndPoint" name="agentEndPoint" value=" https://api.openai.com/v1/chat/completions">
36-
</td>
37-
</tr>
38-
</table>
39-
</td>
26+
<label for="agentEndPoint">EndPoint:</label>
27+
<input type="text" id="agentEndPoint" name="agentEndPoint" value="https://api.openai.com/v1/chat/completions">
28+
</td>
4029
<td id="agent-model-setting">
41-
<table>
42-
<tr>
43-
<td>Model: </td>
44-
<td>
45-
<input type="text" id="agentModel" name="agentModel" value="gpt-3.5-turbo">
46-
</td>
47-
</tr>
48-
</table>
30+
<label for="agentModel">Model:</label>
31+
<input type="text" id="agentModel" name="agentModel" value="gpt-3.5-turbo">
4932
</td>
5033
</tr>
5134
</table>
@@ -56,13 +39,11 @@
5639
<button id="send-button">Send</button>
5740
</div>
5841
<div class="input-container">
59-
Agent Role
60-
</div>
61-
<div class="input-container">
62-
<textarea wrap="hard" id="agentRole" name="agentRole" placeholder="Provide your agent role...">You are a friendly and helpful assistant named Alex. You are knowledgeable in technology, science, and literature. Always be polite and use simple, easy-to-understand language.</textarea>
42+
<label for="agentRole">Agent Role</label>
43+
<textarea id="agentRole" name="agentRole" placeholder="Provide your agent role...">You are a friendly and helpful assistant named Alex. You are knowledgeable in technology, science, and literature. Always be polite and use simple, easy-to-understand language.</textarea>
6344
</div>
6445
<div class="input-container">
65-
<input type="text" id="apikeyInput" name="apikey" placeholder="YOU API KEY...">
46+
<input type="text" id="apikeyInput" name="apikey" placeholder="YOUR API KEY...">
6647
</div>
6748
<div id="link-container">
6849
<a href="https://platform.openai.com/api-keys" target="_blank">Get your OpenAI API KEY</a>

‎script.js

Lines changed: 75 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,80 +1,69 @@
11
document.addEventListener('DOMContentLoaded', function() {
2-
var apiKeyInput = document.getElementById('apikeyInput');
3-
var agentRole = document.getElementById('agentRole');
4-
var agentBot = document.getElementById('agentBot');
5-
var chatBox = document.getElementById('chat-box');
6-
var endPoint = "https://api.openai.com/v1/chat/completions";
7-
var AgentModel = "gpt-3.5-turbo";
8-
var AgentEndPoint = "https://api.openai.com/v1/chat/completions";
9-
var botModel = document.getElementById('agentModel');
10-
var botEndPoint = document.getElementById('agentEndPoint');
11-
botModel.value = AgentModel;
12-
botEndPoint.value = endPoint;
2+
const apiKeyInput = document.getElementById('apikeyInput');
3+
const agentRole = document.getElementById('agentRole');
4+
const agentBot = document.getElementById('agentBot');
5+
const chatBox = document.getElementById('chat-box');
6+
const botModel = document.getElementById('agentModel');
7+
const botEndPoint = document.getElementById('agentEndPoint');
138

14-
function getCookieValue(cookieName) {
15-
var name = cookieName + '=';
16-
var decodedCookie = decodeURIComponent(document.cookie);
17-
var cookieArray = decodedCookie.split(';');
18-
for (var i = 0; i < cookieArray.length; i++) {
19-
var cookie = cookieArray[i].trim();
20-
if (cookie.indexOf(name) === 0) {
21-
return cookie.substring(name.length, cookie.length);
22-
}
23-
}
24-
return '';
25-
}
26-
27-
var agentApiKeyValue = getCookieValue('agent_apikey');
28-
if (agentApiKeyValue !== '') {
29-
apiKeyInput.value = agentApiKeyValue;
30-
}
9+
const DEFAULT_API_ENDPOINT = "https://api.openai.com/v1/chat/completions";
10+
const DEFAULT_MODEL = "gpt-3.5-turbo";
3111

32-
apiKeyInput.addEventListener('input', function() {
33-
var apiKeyValue = apiKeyInput.value;
34-
document.cookie = 'agent_apikey=' + encodeURIComponent(apiKeyValue);
35-
});
12+
botModel.value = DEFAULT_MODEL;
13+
botEndPoint.value = DEFAULT_API_ENDPOINT;
3614

37-
var agentRoleValue = getCookieValue('agent_role');
38-
if (agentRoleValue !== '') {
39-
agentRole.value = agentRoleValue;
40-
}
15+
loadSettings();
4116

42-
agentRole.addEventListener('input', function() {
43-
var agentRoleValue = agentRole.value;
44-
document.cookie = 'agent_role=' + encodeURIComponent(agentRoleValue);
17+
apiKeyInput.addEventListener('input', saveApiKey);
18+
agentRole.addEventListener('input', saveAgentRole);
19+
agentBot.addEventListener('change', updateBotSettings);
20+
document.getElementById('send-button').addEventListener('click', sendMessage);
21+
document.getElementById('user-input').addEventListener('keypress', function(event) {
22+
if (event.key === 'Enter') sendMessage();
4523
});
4624

47-
var agentBotValue = getCookieValue('agent_bot');
48-
if (agentBotValue !== '') {
49-
agentBot.value = agentBotValue;
25+
function loadSettings() {
26+
apiKeyInput.value = getCookieValue('agent_apikey') || '';
27+
agentRole.value = getCookieValue('agent_role') || agentRole.placeholder;
28+
agentBot.value = getCookieValue('agent_bot') || 'chatGPT';
29+
updateBotSettings();
5030
}
5131

52-
// Event listener for Agent Bot select changes
53-
agentBot.addEventListener('change', function(event) {
54-
var agentBotValue = agentBot.value;
55-
AgentEndPoint = (agentBotValue === "Llama") ? "http://localhost:1234/v1/chat/completions" : "https://api.openai.com/v1/chat/completions";
56-
document.cookie = 'agent_bot=' + encodeURIComponent(agentBotValue);
57-
botModel.value = "gpt-3.5-turbo";
58-
botEndPoint.value = AgentEndPoint;
59-
});
32+
function saveApiKey() {
33+
setCookie('agent_apikey', apiKeyInput.value);
34+
}
6035

61-
// Event listener for send button click
62-
document.getElementById('send-button').addEventListener('click', sendMessage);
36+
function saveAgentRole() {
37+
setCookie('agent_role', agentRole.value);
38+
}
6339

64-
// Event listener for user input enter key press
65-
document.getElementById('user-input').addEventListener('keypress', function(event) {
66-
if (event.key === 'Enter') {
67-
sendMessage();
40+
function updateBotSettings() {
41+
const agentBotValue = agentBot.value;
42+
43+
let endPoint = '';
44+
let model = '';
45+
46+
if (agentBotValue === "Llama") {
47+
endPoint = "http://localhost:1234/v1/chat/completions";
48+
model = "llama-model";
49+
} else if (agentBotValue === "chatGPT") {
50+
endPoint = DEFAULT_API_ENDPOINT;
51+
model = DEFAULT_MODEL;
52+
} else if (agentBotValue === "Custom") {
53+
endPoint = '';
54+
model = '';
6855
}
69-
});
56+
57+
setCookie('agent_bot', agentBotValue);
58+
botModel.value = model;
59+
botEndPoint.value = endPoint;
60+
}
7061

7162
async function sendMessage() {
7263
const inputField = document.getElementById('user-input');
7364
const userMessage = inputField.value.trim();
7465

75-
if (userMessage === '') {
76-
return;
77-
}
66+
if (!userMessage) return;
7867

7968
appendMessage('user', userMessage);
8069
inputField.value = '';
@@ -94,12 +83,14 @@ document.addEventListener('DOMContentLoaded', function() {
9483
}
9584

9685
async function getBotResponse(userMessage) {
97-
const apiKey = apiKeyInput.value || 'YOUR_API_KEY'; // Replace with your OpenAI API key
98-
const endpoint = AgentEndPoint || 'https://api.openai.com/v1/chat/completions';
86+
const apiKey = apiKeyInput.value || 'YOUR_API_KEY';
87+
const endpoint = botEndPoint.value;
88+
const model = botModel.value;
89+
9990
const payload = {
100-
model: AgentModel,
91+
model: model,
10192
messages: [
102-
{ role: "system", content: agentRole.value || "You are a friendly and helpful assistant named Alex. You are knowledgeable in technology, science, and literature. Always be polite and use simple, easy-to-understand language." },
93+
{ role: "system", content: agentRole.value },
10394
{ role: "user", content: userMessage }
10495
],
10596
max_tokens: 150,
@@ -123,15 +114,29 @@ document.addEventListener('DOMContentLoaded', function() {
123114
if (data.choices && data.choices.length > 0) {
124115
return data.choices[0].message.content.trim();
125116
} else {
126-
if (data.error && data.error.message) {
127-
return '(' + data.error.code + ') ' + data.error.message;
128-
} else {
129-
return 'Sorry, I am having trouble responding at the moment. Please try again later.';
130-
}
117+
return data.error ? `(${data.error.code}) ${data.error.message}` : 'Sorry, I am having trouble responding at the moment. Please try again later.';
131118
}
132119
} catch (error) {
133120
console.error('Error:', error);
134121
return 'Sorry, I am having trouble responding at the moment. Please try again later.';
135122
}
136123
}
137-
});
124+
125+
function getCookieValue(cookieName) {
126+
const name = cookieName + '=';
127+
const decodedCookie = decodeURIComponent(document.cookie);
128+
const cookieArray = decodedCookie.split(';');
129+
for (const cookie of cookieArray) {
130+
let c = cookie.trim();
131+
if (c.indexOf(name) === 0) return c.substring(name.length, c.length);
132+
}
133+
return '';
134+
}
135+
136+
function setCookie(cookieName, cookieValue, days = 365) {
137+
const d = new Date();
138+
d.setTime(d.getTime() + (days * 24 * 60 * 60 * 1000));
139+
const expires = `expires=${d.toUTCString()}`;
140+
document.cookie = `${cookieName}=${encodeURIComponent(cookieValue)};${expires};path=/`;
141+
}
142+
});

0 commit comments

Comments
 (0)