File size: 5,092 Bytes
b035bda 186cf97 0d6b94b 186cf97 0d6b94b 186cf97 0d6b94b 186cf97 0d6b94b 186cf97 0d6b94b 186cf97 0d6b94b 186cf97 0d6b94b 186cf97 b035bda 186cf97 b035bda 186cf97 b035bda 186cf97 b035bda 186cf97 b035bda 186cf97 b035bda |
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 133 134 135 136 137 138 139 140 |
<!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>
|