-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
126 lines (112 loc) · 4.59 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>two-tier ChatGPT Clone</title>
</head>
<body>
<h1>ChatAI</h1>
<form id="inputform" onsubmit="searchQuestion(event)">
<fieldset>
<legend>Input</legend>
<label id="questionLabel" for="chatGPT">Enter your question:</label>
<textarea id="chatGPT" name="question" required aria-labelledby="questionLabel"></textarea>
<button type="submit" aria-label="Answer">Answer</button>
</fieldset>
<div id="history">
<label>Q&A History:</label>
<ul id="questionList"></ul>
<button id="clearHistoryBtn" onclick="clearHistory()" aria-label="Clear History">Clear History</button>
</div>
</form>
<script>
var questionHistory = JSON.parse(localStorage.getItem('questionHistory')) || [];
function searchQuestion(event) {
event.preventDefault();
var question = document.getElementById('chatGPT').value;
makeChatGPTApiCall(question)
.then(response => {
updateQuestionHistory(question, response.answer);
})
.catch(error => {
console.error("API Error:", error);
alert("Failed to fetch data. Please try again.");
});
}
function updateQuestionHistory(question, answer) {
var questionItem = document.createElement('li');
var answerItem = document.createElement('li');
questionItem.innerHTML = `<strong>Q:</strong> ${question}`;
answerItem.innerHTML = `<strong>A:</strong> ${answer}`;
var questionList = document.getElementById('questionList');
questionList.appendChild(questionItem);
questionList.appendChild(answerItem);
questionHistory.push({ question, answer });
localStorage.setItem('questionHistory', JSON.stringify(questionHistory));
}
function makeChatGPTApiCall(question) {
var apiUrl = 'http://localhost:3000/api/chat';
var messages = questionHistory.map(entry => ({
role: 'system',
content: 'You are a helpful assistant.',
}, {
role: 'user',
content: entry.question,
}));
messages.push({ role: 'user', content: question });
return fetch(apiUrl, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
conversation: messages, // Send the entire conversation history
}),
})
.then(response => {
if (!response.ok) {
throw new Error('API request failed: ' + response.statusText);
}
return response.json();
})
.then(data => {
// Handle the response data as needed
console.log('API Response:', data);
return data; // Return the response for further processing
})
.catch(error => {
console.error('API Error:', error.message);
console.log('API Response:', error.response);
throw error;
});
}
function clearHistory() {
localStorage.removeItem('questionHistory');
var questionList = document.getElementById('questionList');
questionList.innerHTML = "";
questionHistory = [];
}
(function () {
displayQuestionHistory();
})();
document.getElementById('clearHistoryBtn').addEventListener('click', function (event) {
event.preventDefault();
clearHistory();
});
function displayQuestionHistory() {
var questionList = document.getElementById('questionList');
questionHistory.forEach(entry => {
var questionItem = document.createElement('li');
var answerItem = document.createElement('li');
questionItem.innerHTML = `<strong>Q:</strong> ${entry.question}`;
answerItem.innerHTML = `<strong>A:</strong> ${entry.answer}`;
questionList.appendChild(questionItem);
questionList.appendChild(answerItem);
});
}
</script>
</body>
</html>