|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>ChatGPT Interface</title> |
|
<style> |
|
body { |
|
font-family: Arial, sans-serif; |
|
display: flex; |
|
flex-direction: column; |
|
height: 100vh; |
|
margin: 0; |
|
background-color: #f7f7f8; |
|
} |
|
#chatbox { |
|
flex-grow: 1; |
|
padding: 20px; |
|
overflow-y: auto; |
|
border-bottom: 1px solid #ccc; |
|
background-color: #ffffff; |
|
} |
|
.message { |
|
margin: 10px 0; |
|
display: flex; |
|
} |
|
.user .message-content { |
|
background-color: #d1e7dd; |
|
align-self: flex-end; |
|
} |
|
.assistant .message-content { |
|
background-color: #f8d7da; |
|
align-self: flex-start; |
|
} |
|
.message-content { |
|
padding: 10px; |
|
border-radius: 10px; |
|
max-width: 80%; |
|
} |
|
#inputArea { |
|
display: flex; |
|
padding: 10px; |
|
border-top: 1px solid #ccc; |
|
background-color: #fff; |
|
} |
|
#inputArea input, #inputArea button { |
|
padding: 10px; |
|
font-size: 16px; |
|
} |
|
#inputArea input { |
|
flex-grow: 1; |
|
margin-right: 10px; |
|
} |
|
#config { |
|
display: none; |
|
padding: 10px; |
|
border-top: 1px solid #ccc; |
|
background-color: #fff; |
|
} |
|
#config input { |
|
width: 100%; |
|
padding: 10px; |
|
margin: 5px 0; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<div id="chatbox"></div> |
|
<div id="inputArea"> |
|
<input type="text" id="message" placeholder="Type a message"> |
|
<button onclick="sendMessage()">Send</button> |
|
</div> |
|
<div id="config"> |
|
<label for="systemMessage">System message:</label> |
|
<input type="text" id="systemMessage" value="You are a helpful, respectful and honest assistant. Always answer as helpfully as possible, while being safe. Your answers should not include any harmful, unethical, racist, sexist, toxic, dangerous, or illegal content. Please ensure that your responses are socially unbiased and positive in nature. If a question does not make any sense, or is not factually coherent, explain why instead of answering something not correct. If you don't know the answer to a question, please don't share false information."> |
|
<label for="maxTokens">Max new tokens:</label> |
|
<input type="number" id="maxTokens" value="2000" min="1" max="2048" step="1"> |
|
<label for="temperature">Temperature:</label> |
|
<input type="number" id="temperature" value="0.7" min="0.1" max="4.0" step="0.1"> |
|
<label for="topP">Top-p (nucleus sampling):</label> |
|
<input type="number" id="topP" value="0.95" min="0.1" max="1.0" step="0.05"> |
|
</div> |
|
|
|
<script> |
|
let history = []; |
|
|
|
function appendMessage(role, content) { |
|
const chatbox = document.getElementById('chatbox'); |
|
const messageDiv = document.createElement('div'); |
|
messageDiv.classList.add(role, 'message'); |
|
const contentDiv = document.createElement('div'); |
|
contentDiv.classList.add('message-content'); |
|
contentDiv.textContent = content; |
|
messageDiv.appendChild(contentDiv); |
|
chatbox.appendChild(messageDiv); |
|
chatbox.scrollTop = chatbox.scrollHeight; |
|
} |
|
|
|
async function sendMessage() { |
|
const messageInput = document.getElementById('message'); |
|
const message = messageInput.value; |
|
const systemMessage = document.getElementById('systemMessage').value; |
|
const maxTokens = parseInt(document.getElementById('maxTokens').value); |
|
const temperature = parseFloat(document.getElementById('temperature').value); |
|
const topP = parseFloat(document.getElementById('topP').value); |
|
|
|
appendMessage('user', message); |
|
history.push([message, null]); |
|
|
|
const ws = new WebSocket("ws://" + location.host + "/ws"); |
|
|
|
ws.onopen = () => { |
|
ws.send(JSON.stringify({ |
|
message: message, |
|
history: history, |
|
system_message: systemMessage, |
|
max_tokens: maxTokens, |
|
temperature: temperature, |
|
top_p: topP |
|
})); |
|
}; |
|
|
|
let response = ""; |
|
ws.onmessage = (event) => { |
|
const data = JSON.parse(event.data); |
|
if (data.end) { |
|
appendMessage('assistant', response); |
|
history[history.length - 1][1] = response; |
|
} else { |
|
const token = data.token; |
|
response += token; |
|
} |
|
}; |
|
|
|
messageInput.value = ''; |
|
} |
|
</script> |
|
</body> |
|
</html> |
|
|
