代码运行效果图:前提是你有一个可用的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即可