一、搭建自己的大模型助手

大型模型的出现为许多领域带来了革命性的变化，从自然语言处理到计算机视觉，甚至是医学和金融领域。然而，对于许多开发者来说，使用一些开源的模型进行实验和应用却是一个挑战，因为它们通常需要昂贵的硬件资源来运行。大多数情况下，使用这些模型需要拥有一台配备高性能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 系列等，而且更换模型仅需修改模型的名字即可，无需修改调用代码得逻辑：

官方地址如下：

https://openrouter.ai/

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 requestsimport jsonurl = "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 OpenAImodel = "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.contentif __name__ == '__main__': print(llm("你好，介绍一下你自己"))

运行输出：

流式输出示例：

from openai import OpenAImodel = "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.8tornado==6.3.2

构建问答助手接口 server.py ：

接口我们接收两个参数 questions 和 history ，其中 history 由后端维护并追加聊天记录，前端只负责临时存储，每次请求携带上一次请求返回的 history 即可，调用 OpenRouter 使用 OpenAI 库的方式。

整体实现逻辑如下：

from tornado.concurrent import run_on_executorfrom tornado.web import RequestHandlerimport tornado.genfrom openai import OpenAIimport jsonclass 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.webimport tornado.ioloopimport tornado.httpserverimport osfrom concurrent.futures.thread import ThreadPoolExecutorfrom 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>

运行效果：

到此，我们自己的大模型助手就基本做好了！