无需GPU服务器，借助OpenRouter零成本搭建自己的大模型助手
作者： 狂热JAVA小毕超 来源： 狂热JAVA小毕超
一、搭建自己的大模型助手
大型模型的出现为许多领域带来了革命性的变化，从自然语言处理到计算机视觉，甚至是医学和金融领域。然而，对于许多开发者来说，使用一些开源的模型进行实验和应用却是一个挑战，因为它们通常需要昂贵的硬件资源来运行。大多数情况下，使用这些模型需要拥有一台配备高性能GPU 的服务器，而这往往是一项昂贵的投资。而 OpenRouter 为使用者提供了部分开源模型的实现，可以通过API 免费使用，主要聚焦在7B 规模大小的模型，比如谷歌的 gemma-7b ，Mistral AI 的 mistral-7b-instruct ，一定程度避免了自己去部署大模型的成本。
本文就基于 OpenRouter 中免费模型接口的能力，使用谷歌的 gemma-7b 模型，搭建自己的大模型助手，实现效果如下：
二、OpenRouter 使用
在实验前首先了解下 OpenRouter 是什么。OpenRouter 是一款整合了各类大模型的中间代理商，而且在国内无需梯子即可访问，通过 OpenRouter 可以调用超 100 种优秀的大模型，其中包括比较流行的 OpenAI 的 ChatGPT 系列（包括GPT4V ），Anthropic 的 Claude 系列，谷歌的 PaLM 和 Gemini 系列等，而且更换模型仅需修改模型的名字即可，无需修改调用代码得逻辑：
官方地址如下：
OpenRouter 没有对QQ 邮箱做限制，支持 QQ 邮箱登录注册，一定程度上给国内的一些用户提供了便利，并且还免费提供了一批7B 的模型，包括 nous-capybara-7b、mistral-7b-instruct、mythomist-7b、toppy-m-7b、cinematika-7b、gemma-7b-it ：
因此，当我们没有 GPU 服务器的时候，又想借助开源模型搭建一套自己的大模型助手时，就可以考虑使用 OpenRouter 了，注意使用前需要先注册账号，并生成 Api key ：
OpenRouter 主要以 http 的交互方式，因此几乎可以使用任何支持 http 的语言和框架去调用 ，同时也支持通过 OpenAI 的 client.chat.completions.create 方式调用：
例如：使用 Python 语言 http 的方式，调用 gemma-7b 模型：
import requests
import json
url = "https://openrouter.ai/api/v1/chat/completions"
model = "google/gemma-7b-it:free"
request_headers = {
"Authorization": "Bearer 你的api_key",
"HTTP-Referer": "http://localhost:8088",
"X-Title": "test"
}
default_prompt = "You are an AI assistant that helps people find information."
def llm(user_prompt,system_prompt=default_prompt):
messages = [
{"role": "system", "content": system_prompt},
{"role": "user", "content": user_prompt},
]
request_json = {
"model": model,
"messages": messages,
"max_tokens": 2048
}
respose = requests.request(
url=url,
method="POST",
json=request_json,
headers=request_headers
)
return json.loads(respose.content.decode('utf-8'))['choices'][0]['message']['content']
if __name__ == '__main__':
print(llm("你好，介绍一下你自己"))
运行输出：
使用 OpenAI 的 client.chat.completions.create 方式，调用 gemma-7b 模型：
from openai import OpenAI
model = "google/gemma-7b-it:free"
default_prompt = "You are an AI assistant that helps people find information."
client = OpenAI(
base_url="https://openrouter.ai/api/v1",
api_key="你的api_key",
)
def llm(user_prompt, system_prompt=default_prompt):
messages = [
{"role": "system", "content": system_prompt},
{"role": "user", "content": user_prompt},
]
completion = client.chat.completions.create(
extra_headers={
"HTTP-Referer": "http://localhost:8088",
"X-Title": "test",
},
model=model,
messages=messages,
max_tokens = 2048
)
return completion.choices[0].message.content
if __name__ == '__main__':
print(llm("你好，介绍一下你自己"))
运行输出：
流式输出示例：
from openai import OpenAI
model = "google/gemma-7b-it:free"
default_prompt = "You are an AI assistant that helps people find information."
client = OpenAI(
base_url="https://openrouter.ai/api/v1",
api_key="你的api_key",
)
def llm(user_prompt, system_prompt=default_prompt):
messages = [
{"role": "system", "content": system_prompt},
{"role": "user", "content": user_prompt},
]
completion = client.chat.completions.create(
extra_headers={
"HTTP-Referer": "http://localhost:8088",
"X-Title": "test",
},
model=model,
messages=messages,
max_tokens = 2048,
stream=True
)
for respose in completion:
if respose and respose.choices and len(respose.choices) > 0:
msg = respose.choices[0].delta.content
print(msg, end='', flush=True)
if __name__ == '__main__':
llm("你好，介绍一下你自己")
运行输出：
三、搭建大模型助手
上面简单认识了 OpenRouter 的能力，下面基于 OpenRouter 上谷歌的 gemma-7b 模型搭建一个自己的大模型助手，简单的执行过程如下。
其中后端服务使用 Python + tornado 实现 Web 服务，前端使用基础的 Html + Jquery 的方式。
3.1 服务端搭建
所属依赖版本如下：
openai==0.27.8
tornado==6.3.2
构建问答助手接口 server.py ：
接口我们接收两个参数 questions 和 history ，其中 history 由后端维护并追加聊天记录，前端只负责临时存储，每次请求携带上一次请求返回的 history 即可，调用 OpenRouter 使用 OpenAI 库的方式。
整体实现逻辑如下：
from tornado.concurrent import run_on_executor
from tornado.web import RequestHandler
import tornado.gen
from openai import OpenAI
import json
class Assistant(RequestHandler):
model = "google/gemma-7b-it:free"
client = OpenAI(
base_url="https://openrouter.ai/api/v1",
api_key="你的api_key",
)
default_prompt = "You are an AI assistant that helps people find information."
def prepare(self):
self.executor = self.application.pool
def set_default_headers(self):
self.set_header('Access-Control-Allow-Origin', "*")
self.set_header('Access-Control-Allow-Headers', "Origin, X-Requested-With, Content-Type, Accept")
self.set_header('Access-Control-Allow-Methods', "GET, POST, PUT, DELETE, OPTIONS")
@tornado.gen.coroutine
def post(self):
json_data = json.loads(self.request.body)
if 'questions' not in json_data or 'history' not in json_data:
self.write({
"code": 400,
"message": "缺少必填参数"
})
return
questions = json_data['questions']
history = json_data['history']
result = yield self.do_handler(questions, history)
self.write(result)
@run_on_executor
def do_handler(self, questions, history):
try:
answer, history = self.llm(questions, history)
return {
"code": 200,
"message": "success",
"answer": answer,
"history": history
}
except Exception as e:
return {
"code": 400,
"message": str(e)
}
def llm(self, user_prompt, messages, system_prompt=default_prompt):
if not messages:
messages = []
messages.append({"role": "user", "content": user_prompt})
completion = self.client.chat.completions.create(
extra_headers={
"HTTP-Referer": "http://localhost:8088",
"X-Title": "test",
},
model=self.model,
messages=messages,
max_tokens=2048
)
answer = completion.choices[0].message.content
messages.append({"role": "assistant", "content": answer})
return answer, messages
路由配置，并启动服务 app.py ：
import tornado.web
import tornado.ioloop
import tornado.httpserver
import os
from concurrent.futures.thread import ThreadPoolExecutor
from server import Assistant
## 配置
class Config():
port = 8081
base_path = os.path.dirname(__file__)
settings = {
# "debug":True,
# "autore load":True,
"static_path": os.path.join(base_path, "resources/static"),
"template_path": os.path.join(base_path, "resources/templates"),
"autoescape": None
}
# 路由
class Application(tornado.web.Application):
def __init__(self):
handlers = [
("/assistant", Assistant),
("/(.*)$", tornado.web.StaticFileHandler, {
"path": os.path.join(Config.base_path, "resources/static"),
"default_filename": "index.html"
})
]
super(Application, self).__init__(handlers, **Config.settings)
self.pool = ThreadPoolExecutor(10)
if __name__ == '__main__':
app = Application()
httpserver = tornado.httpserver.HTTPServer(app)
httpserver.listen(Config.port)
print("start success", "prot = ", Config.port)
print("http://localhost:" + str(Config.port) + "/")
tornado.ioloop.IOLoop.current().start()
下面可以使用 Postman 进行测试：
请求内容：
{
"questions":"你好，介绍下你自己",
"history":[]
}
输出示例：
从结果看接口访问正常，下面开始前端的搭建。
3.2 前端搭建
前端需要构建一个问答聊天界面，需要注意的是，模型返回的内容可能是 MD 格式，前端需要解析成html 格式展示，整体实现过程如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AI 聊天对话</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
display: flex;
height: 100vh;
}
.left-panel {
flex: 15%;
background-color: #f2f2f2;
padding: 10px;
}
.right-panel {
flex: 85%;
background-color: #ffffff;
display: flex;
flex-direction: column;
}
.chat-log {
flex: 1;
overflow-y: auto;
padding: 20px;
}
.chat-bubble {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.user-bubble {
justify-content: flex-end;
}
.bubble-content {
padding: 10px 15px;
border-radius: 20px;
}
.user-bubble .bubble-content {
background-color: #d6eaff;
color: #000000;
}
.ai-bubble .bubble-content {
background-color: #e5ece7;
color: #000;
}
.input-area {
display: flex;
align-items: center;
padding: 20px;
}
.input-text {
flex: 1;
padding: 10px;
margin-right: 10px;
}
.submit-button {
padding: 10px 20px;
background-color: #2196f3;
color: #ffffff;
border: none;
cursor: pointer;
}
li {
margin-top: 10px;
}
a {
text-decoration: none;
}
table {
border: 1px solid #000;
border-collapse: collapse;
}
table td, table th {
border: 1px solid #000;
}
table td, table th {
padding: 10px;
}
.language-sql {
width: 95%;
background-color: #F6F6F6;
padding: 10px;
font-weight: bold;
border-radius: 5px;
word-wrap: break-word;
white-space: pre-line;
/* overflow-wrap: break-word; */
display: block;
}
select {
width: 100%;
height: 30px;
border: 2px solid #6089a4;
font-size: 15px;
margin-top: 5px;
}
.recommendation{
color: #1c4cf3;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="left-panel">
<h2>智能问答助手</h2>
<h3>常用问题</h3>
<div class="recommendation">帮我写一个Java快速排序</div>
<div class="recommendation">Java 8有什么新特性</div>
<div class="recommendation">JVM优化建议</div>
<div class="recommendation">内存占用高,如何优化</div>
<div class="recommendation">MySQL优化建议</div>
<div class="recommendation">MySQL如何查看执行计划</div>
</div>
<div class="right-panel">
<div class="chat-log" id="chat-log">
</div>
<div class="input-area">
<input type="text" id="user-input" class="input-text" placeholder="请输入您的问题,回车或点击发送确定。">
<button id="submit" style="margin-left: 10px;width: 100px" onclick="sendMessage()" class="submit-button">
发送
</button>
<button style="margin-left: 20px;width: 100px;background-color: red" onclick="clearChat()"
class="submit-button">清除记录
</button>
</div>
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script>
// 聊天历史记录
var messageHistory = [];
// 添加AI信息
function addAIMessage(message) {
$("#chat-log").append(
"<div class=\"chat-bubble ai-bubble\">\n" +
" <div class=\"bubble-content\">" + message + "</div>\n" +
"</div>"
)
}
// 添加人类信息
function addUserMessage(message) {
$("#chat-log").append(
"<div class=\"chat-bubble user-bubble\">\n" +
" <div class=\"bubble-content\">" + message + "</div>\n" +
"</div>"
)
}
// 滑动到底部
function slideBottom() {
let chatlog = document.getElementById("chat-log");
chatlog.scrollTop = chatlog.scrollHeight;
}
// 调用api
function chatApi(message) {
slideBottom();
data = {
questions: message,
history: messageHistory
};
$.ajax({
url: "http://127.0.0.1:8081/assistant",
type: "POST",
contentType: "application/json",
dataType: "json",
data: JSON.stringify(data),
success: function (res) {
if (res.code === 200) {
let answer = res.answer;
answer = marked.parse(answer);
addAIMessage(answer);
messageHistory = res.history;
} else {
addAIMessage("服务接口调用错误。");
}
},
error: function (e) {
addAIMessage("服务接口调用异常。");
}
});
}
// 发送消息
function sendMessage() {
let userInput = $('#user-input');
let userMessage = userInput.val();
if (userMessage.trim() === '') {
return;
}
userInput.val("");
addUserMessage(userMessage);
chatApi(userMessage);
}
// 清空聊天记录
function clearChat() {
$("#chat-log").empty();
messageHistory = [];
addAIMessage("你好，请输入你想问的问题。");
}
// 初始化
function init() {
addAIMessage("你好，请输入你想问的问题。");
var submit = $("#submit");
var userInput = $("#user-input");
var focus = false;
// 监听输入框焦点
userInput.focus(function () {
focus = true;
}).blur(function () {
focus = false;
});
// 回车监听事件
document.addEventListener("keydown", function (event) {
if (event.keyCode === 13) {
console.log(focus);
if (focus) {
submit.click();
}
}
});
}
init();
</script>
</body>
</html>
运行效果：
到此，我们自己的大模型助手就基本做好了！
更多AI工具，参考Github-AiBard123，国内AiBard123
