LLM+js实现大模型对话
代码运行效果图：前提是你有一个可用的openai服务，然后用下面一个html页即可启动
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat with OpenAI</title>
<style>
body {
font-family: Arial, sans-serif;
}
#chat-container {
width: 400px;
margin: 0 auto;
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
}
#chat-messages {
height: 300px;
overflow-y: scroll;
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
margin-bottom: 10px;
}
#user-input {
width: 70%;
padding: 5px;
}
#send-button {
padding: 5px 10px;
}
</style>
</head>
<body>
<div id="chat-container">
<h2>Chat with OpenAI</h2>
<div id="chat-messages"></div>
<input type="text" id="user-input" placeholder="Type your message">
<button id="send-button">Send</button>
</div>
<script>
// 替换为你的OpenAI API密钥
const apiKey = 'YOUR_API_KEY';
const apiUrl = 'http://10.130.7.6:8000/v1/chat/completions'; //你的openai服务地址
document.getElementById('send-button').addEventListener('click', function () {
const userInput = document.getElementById('user-input').value;
if (userInput.trim() === '') return;
const chatMessages = document.getElementById('chat-messages');
const userMessageElement = document.createElement('p');
userMessageElement.style.color = 'blue';
userMessageElement.textContent = `You: ${userInput}`;
chatMessages.appendChild(userMessageElement);
fetch(apiUrl, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${apiKey}`
},
body: JSON.stringify({
"model": "Qwen2.5-7B-Instruct", // 你可以选择其他合适的模型
"messages": [{"role": "user", "content": userInput}]
})
})
.then(response => response.json())
.then(data => {
const assistantReply = data.choices[0].message.content;
const assistantMessageElement = document.createElement('p');
assistantMessageElement.style.color = 'green';
assistantMessageElement.textContent = `Assistant: ${assistantReply}`;
chatMessages.appendChild(assistantMessageElement);
})
.catch(error => {
console.error('Error:', error);
const errorMessageElement = document.createElement('p');
errorMessageElement.style.color ='red';
errorMessageElement.textContent = 'Error occurred while fetching response.';
chatMessages.appendChild(errorMessageElement);
});
document.getElementById('user-input').value = '';
});
</script>
</body>
</html>运行方式
可直接用python启动建议webui，进入html所在页面（可直接在pycharm控制台里运行）：
D:\gradio_project\new_inference0310\0402> python -m http.server 8000然后打开浏览器访问http://127.0.0.1:8000/test.html即可