-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathchatbot.html
132 lines (114 loc) · 4.47 KB
/
chatbot.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
127
128
129
130
131
132
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chatbot</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #2e2e2e; /* Dark background */
color: #ffffff; /* Light text color */
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* Full viewport height */
}
.container {
width: 800px; /* Fixed width for the container */
}
#chat-log {
border: 1px solid #444; /* Darker border */
padding: 10px;
height: 300px;
overflow-y: scroll;
background-color: #1e1e1e; /* Dark background for chat log */
color: #ffffff; /* Light text color */
margin-bottom: 10px; /* Spacing between chat log and input */
text-align: left;
white-space: pre-wrap;
}
#user-input::placeholder {
color: #bbb; /* Light gray placeholder text */
}
.input-container {
display: flex; /* Use flexbox to align children */
width: 100%; /* Ensure full width */
}
#user-input {
flex: 1; /* Allow input to grow and take space */
padding: 10px; /* Padding for the input */
border: 1px solid #444; /* Dark border */
background-color: #333; /* Dark background for input */
color: #ffffff; /* Light text for input */
outline: none; /* Remove outline */
margin-right: 5px; /* Space between input and button */
display: inline-block;
}
#user-input::placeholder {
color: #bbb; /* Light gray placeholder text */
}
button {
padding: 10px 20px; /* Padding for button */
border: none; /* No border for button */
background-color: #444; /* Dark background for button */
color: #ffffff; /* Light text for button */
cursor: pointer; /* Hand cursor on hover */
margin-left: -5px; /* Slight overlap with input */
vertical-align: top; /* Align button with input */
}
button:hover {
background-color: #666; /* Lighter gray on hover */
}
</style>
</head>
<body>
<div class="container">
<h1>Chatbot</h1>
<div id="chat-log"></div>
<div class="input-container">
<input type="text" id="user-input" placeholder="Type your message..." />
<button id="send-button">Send</button>
</div>
</div>
<script>
const messages = [
{ role: 'system', content: 'Respond conversationally as a helpful AI assistant with no more than 3 sentences in a response.' }
];
async function generateText(messages) {
const randomSeed = Math.floor(Math.random() * 1000000);
const response = await fetch('https://text.pollinations.ai/', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
messages: messages,
seed: randomSeed,
jsonMode: false,
model: 'openai',
}),
});
const data = await response.text(); // Get the plain text response
return data; // Return the text response
}
async function sendMessage() {
const userInput = document.getElementById('user-input').value;
if (userInput.trim() === "") return; // Prevent empty messages
messages.push({ role: 'user', content: userInput }); // Add user's message
const aiResponse = await generateText(messages); // Get AI's response
messages.push({ role: 'assistant', content: aiResponse }); // Add AI's response
// Update chat log
const chatLog = document.getElementById('chat-log');
chatLog.innerHTML += `<strong>You:</strong> ${userInput}<br>`;
chatLog.innerHTML += `<strong>AI:</strong> ${aiResponse}<br>`;
chatLog.scrollTop = chatLog.scrollHeight; // Scroll to the bottom
document.getElementById('user-input').value = ''; // Clear input field
}
document.getElementById('send-button').addEventListener('click', sendMessage);
document.getElementById('user-input').addEventListener('keypress', function (e) {
if (e.key === 'Enter') sendMessage(); // Allow sending with 'Enter'
});
</script>
</body>
</html>