无需 GPU 服务器，借助 OpenRouter 零成本搭建自己的大模子助手 ...

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

大型模子的出现为很多领域带来了革命性的变化，从自然语言处理到盘算机视觉，乃至是医学和金融领域。然而，对于很多开辟者来说，使用一些开源的模子进行实验和应用却是一个挑战，因为它们通常需要昂贵的硬件资源来运行。大多数情况下，使用这些模子需要拥有一台配备高性能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 模子：

1. import requests
2. import json
4. url = "https://openrouter.ai/api/v1/chat/completions"
5. model = "google/gemma-7b-it:free"
6. request_headers = {
7.     "Authorization": "Bearer 你的api_key",
8.     "HTTP-Referer": "http://localhost:8088",
9.     "X-Title": "test"
10. }
11. default_prompt = "You are an AI assistant that helps people find information."
13. def llm(user_prompt,system_prompt=default_prompt):
14.     messages = [
15.         {"role": "system", "content": system_prompt},
16.         {"role": "user", "content": user_prompt},
17.     ]
18.     request_json = {
19.         "model": model,
20.         "messages": messages,
21.         "max_tokens": 2048
22.     }
23.     respose = requests.request(
24.         url=url,
25.         method="POST",
26.         json=request_json,
27.         headers=request_headers
28.     )
29.     return json.loads(respose.content.decode('utf-8'))['choices'][0]['message']['content']
31. if __name__ == '__main__':
32.     print(llm("你好，介绍一下你自己"))

复制代码

运行输出：

使用 OpenAI 的 client.chat.completions.create 方式，调用 gemma-7b 模子：

1. from openai import OpenAI
3. model = "google/gemma-7b-it:free"
4. default_prompt = "You are an AI assistant that helps people find information."
5. client = OpenAI(
6.     base_url="https://openrouter.ai/api/v1",
7.     api_key="你的api_key",
8. )
10. def llm(user_prompt, system_prompt=default_prompt):
11.     messages = [
12.         {"role": "system", "content": system_prompt},
13.         {"role": "user", "content": user_prompt},
14.     ]
15.     completion = client.chat.completions.create(
16.         extra_headers={
17.             "HTTP-Referer": "http://localhost:8088",
18.             "X-Title": "test",
19.         },
20.         model=model,
21.         messages=messages,
22.         max_tokens = 2048
23.     )
24.     return completion.choices[0].message.content
27. if __name__ == '__main__':
28.     print(llm("你好，介绍一下你自己"))

复制代码

运行输出：

流式输出示例：

1. from openai import OpenAI
3. model = "google/gemma-7b-it:free"
4. default_prompt = "You are an AI assistant that helps people find information."
5. client = OpenAI(
6.     base_url="https://openrouter.ai/api/v1",
7.     api_key="你的api_key",
8. )
10. def llm(user_prompt, system_prompt=default_prompt):
11.     messages = [
12.         {"role": "system", "content": system_prompt},
13.         {"role": "user", "content": user_prompt},
14.     ]
15.     completion = client.chat.completions.create(
16.         extra_headers={
17.             "HTTP-Referer": "http://localhost:8088",
18.             "X-Title": "test",
19.         },
20.         model=model,
21.         messages=messages,
22.         max_tokens = 2048,
23.         stream=True
24.     )
25.     for respose in completion:
26.         if respose and respose.choices and len(respose.choices) > 0:
27.             msg = respose.choices[0].delta.content
28.             print(msg, end='', flush=True)
31. if __name__ == '__main__':
32.     llm("你好，介绍一下你自己")

复制代码

运行输出：

三、搭建大模子助手

上面简单认识了 OpenRouter 的本事，下面基于 OpenRouter 上谷歌的 gemma-7b 模子搭建一个自己的大模子助手，简单的实行过程如下。

此中后端服务使用 Python + tornado 实现 Web 服务，前端使用根本的 Html + Jquery 的方式。
3.1 服务端搭建

所属依赖版本如下：

1. openai==0.27.8
2. tornado==6.3.2

复制代码

构建问答助手接口 server.py ：
接口我们吸取两个参数 questions 和 history ，此中 history 由后端维护并追加谈天记录，前端只负责临时存储，每次请求携带上一次请求返回的 history 即可，调用 OpenRouter 使用 OpenAI 库的方式。
团体实现逻辑如下：

1. from tornado.concurrent import run_on_executor
2. from tornado.web import RequestHandler
3. import tornado.gen
4. from openai import OpenAI
5. import json
7. class Assistant(RequestHandler):
8.     model = "google/gemma-7b-it:free"
9.     client = OpenAI(
10.         base_url="https://openrouter.ai/api/v1",
11.         api_key="你的api_key",
12.     )
13.     default_prompt = "You are an AI assistant that helps people find information."
15.     def prepare(self):
16.         self.executor = self.application.pool
18.     def set_default_headers(self):
19.         self.set_header('Access-Control-Allow-Origin', "*")
20.         self.set_header('Access-Control-Allow-Headers', "Origin, X-Requested-With, Content-Type, Accept")
21.         self.set_header('Access-Control-Allow-Methods', "GET, POST, PUT, DELETE, OPTIONS")
23.     @tornado.gen.coroutine
24.     def post(self):
25.         json_data = json.loads(self.request.body)
26.         if 'questions' not in json_data or 'history' not in json_data:
27.             self.write({
28.                 "code": 400,
29.                 "message": "缺少必填参数"
30.             })
31.             return
32.         questions = json_data['questions']
33.         history = json_data['history']
34.         result = yield self.do_handler(questions, history)
35.         self.write(result)
37.     @run_on_executor
38.     def do_handler(self, questions, history):
39.         try:
40.             answer, history = self.llm(questions, history)
41.             return {
42.                 "code": 200,
43.                 "message": "success",
44.                 "answer": answer,
45.                 "history": history
46.             }
47.         except Exception as e:
48.             return {
49.                 "code": 400,
50.                 "message": str(e)
51.             }
53.     def llm(self, user_prompt, messages, system_prompt=default_prompt):
54.         if not messages:
55.             messages = []
56.         messages.append({"role": "user", "content": user_prompt})
57.         completion = self.client.chat.completions.create(
58.             extra_headers={
59.                 "HTTP-Referer": "http://localhost:8088",
60.                 "X-Title": "test",
61.             },
62.             model=self.model,
63.             messages=messages,
64.             max_tokens=2048
65.         )
66.         answer = completion.choices[0].message.content
67.         messages.append({"role": "assistant", "content": answer})
68.         return answer, messages

复制代码

路由配置，并启动服务 app.py ：

1. import tornado.web
2. import tornado.ioloop
3. import tornado.httpserver
4. import os
5. from concurrent.futures.thread import ThreadPoolExecutor
6. from server import Assistant
8. ## 配置
9. class Config():
10.     port = 8081
11.     base_path = os.path.dirname(__file__)
12.     settings = {
13.         # "debug":True,
14.         # "autore load":True,
15.         "static_path": os.path.join(base_path, "resources/static"),
16.         "template_path": os.path.join(base_path, "resources/templates"),
17.         "autoescape": None
18.     }
20. # 路由
21. class Application(tornado.web.Application):
22.     def __init__(self):
23.         handlers = [
24.             ("/assistant", Assistant),
25.             ("/(.*)$", tornado.web.StaticFileHandler, {
26.                 "path": os.path.join(Config.base_path, "resources/static"),
27.                 "default_filename": "index.html"
28.             })
29.         ]
30.         super(Application, self).__init__(handlers, **Config.settings)
31.         self.pool = ThreadPoolExecutor(10)
34. if __name__ == '__main__':
35.     app = Application()
37.     httpserver = tornado.httpserver.HTTPServer(app)
39.     httpserver.listen(Config.port)
41.     print("start success", "prot = ", Config.port)
43.     print("http://localhost:" + str(Config.port) + "/")
45.     tornado.ioloop.IOLoop.current().start()

复制代码

下面可以使用 Postman 进行测试：
请求内容：

1. {
2.         "questions":"你好，介绍下你自己",
3.         "history":[]
4. }

复制代码

输出示例：

从结果看接口访问正常，下面开始前端的搭建。
3.2 前端搭建

前端需要构建一个问答谈天界面，需要注意的是，模子返回的内容可能是 MD 格式，前端需要剖析成html 格式展示，团体实现过程如下：

1. <!DOCTYPE html>
2. <html>
3. <head>
4.     <meta charset="UTF-8">
5.     <title>AI 聊天对话</title>
6.     <style>
7.         body {
8.             font-family: Arial, sans-serif;
9.             margin: 0;
10.             padding: 0;
11.         }
13.         .container {
14.             display: flex;
15.             height: 100vh;
16.         }
18.         .left-panel {
19.             flex: 15%;
20.             background-color: #f2f2f2;
21.             padding: 10px;
22.         }
24.         .right-panel {
25.             flex: 85%;
26.             background-color: #ffffff;
27.             display: flex;
28.             flex-direction: column;
29.         }
31.         .chat-log {
32.             flex: 1;
33.             overflow-y: auto;
34.             padding: 20px;
35.         }
37.         .chat-bubble {
38.             display: flex;
39.             align-items: center;
40.             margin-bottom: 10px;
41.         }
43.         .user-bubble {
44.             justify-content: flex-end;
45.         }
47.         .bubble-content {
48.             padding: 10px 15px;
49.             border-radius: 20px;
50.         }
52.         .user-bubble .bubble-content {
53.             background-color: #d6eaff;
54.             color: #000000;
55.         }
57.         .ai-bubble .bubble-content {
58.             background-color: #e5ece7;
59.             color: #000;
60.         }
62.         .input-area {
63.             display: flex;
64.             align-items: center;
65.             padding: 20px;
66.         }
68.         .input-text {
69.             flex: 1;
70.             padding: 10px;
71.             margin-right: 10px;
72.         }
74.         .submit-button {
75.             padding: 10px 20px;
76.             background-color: #2196f3;
77.             color: #ffffff;
78.             border: none;
79.             cursor: pointer;
80.         }
82.         li {
83.             margin-top: 10px;
84.         }
86.         a {
87.             text-decoration: none;
88.         }
90.         table {
91.             border: 1px solid #000;
92.             border-collapse: collapse;
93.         }
95.         table td, table th {
96.             border: 1px solid #000;
97.         }
99.         table td, table th {
100.             padding: 10px;
101.         }
103.         .language-sql {
104.             width: 95%;
105.             background-color: #F6F6F6;
106.             padding: 10px;
107.             font-weight: bold;
108.             border-radius: 5px;
109.             word-wrap: break-word;
110.             white-space: pre-line;
111.             /* overflow-wrap: break-word; */
112.             display: block;
113.         }
115.         select {
116.             width: 100%;
117.             height: 30px;
118.             border: 2px solid #6089a4;
119.             font-size: 15px;
120.             margin-top: 5px;
121.         }
122.         .recommendation{
123.             color: #1c4cf3;
124.             margin-top: 10px;
125.         }
127.     </style>
128. </head>
129. <body>
130. <div class="container">
131.     <div class="left-panel">
132.         <h2>智能问答助手</h2>
133.         <h3>常用问题</h3>
134.         <div class="recommendation">帮我写一个Java快速排序</div>
135.         <div class="recommendation">Java 8有什么新特性</div>
136.         <div class="recommendation">JVM优化建议</div>
137.         <div class="recommendation">内存占用高,如何优化</div>
138.         <div class="recommendation">MySQL优化建议</div>
139.         <div class="recommendation">MySQL如何查看执行计划</div>
140.     </div>
141.     <div class="right-panel">
142.         <div class="chat-log" id="chat-log">
144.         </div>
145.         <div class="input-area">
146.             <input type="text" id="user-input" class="input-text" placeholder="请输入您的问题,回车或点击发送确定。">
147.             <button id="submit" style="margin-left: 10px;width: 100px" onclick="sendMessage()" class="submit-button">
148.                 发送
149.             </button>
150.             <button style="margin-left: 20px;width: 100px;background-color: red" onclick="clearChat()"
151.                     class="submit-button">清除记录
152.             </button>
153.         </div>
154.     </div>
155. </div>
156. <script type="text/javascript" src="http://code.jquery.com/jquery-3.7.0.min.js"></script>
157. <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
158. <script>
159.     // 聊天历史记录
160.     var messageHistory = [];
162.     // 添加AI信息
163.     function addAIMessage(message) {
164.         $("#chat-log").append(
165.             "<div class="chat-bubble ai-bubble">\n" +
166.             "    <div class="bubble-content">" + message + "</div>\n" +
167.             "</div>"
168.         )
169.     }
171.     // 添加人类信息
172.     function addUserMessage(message) {
173.         $("#chat-log").append(
174.             "<div class="chat-bubble user-bubble">\n" +
175.             "    <div class="bubble-content">" + message + "</div>\n" +
176.             "</div>"
177.         )
178.     }
180.     // 滑动到底部
181.     function slideBottom() {
182.         let chatlog = document.getElementById("chat-log");
183.         chatlog.scrollTop = chatlog.scrollHeight;
184.     }
186.     // 调用api
187.     function chatApi(message) {
188.         slideBottom();
189.         data = {
190.             questions: message,
191.             history: messageHistory
192.         };
193.         $.ajax({
194.             url: "http://127.0.0.1:8081/assistant",
195.             type: "POST",
196.             contentType: "application/json",
197.             dataType: "json",
198.             data: JSON.stringify(data),
199.             success: function (res) {
200.                 if (res.code === 200) {
201.                     let answer = res.answer;
202.                     answer = marked.parse(answer);
203.                     addAIMessage(answer);
204.                     messageHistory = res.history;
205.                 } else {
206.                     addAIMessage("服务接口调用错误。");
207.                 }
208.             },
209.             error: function (e) {
210.                 addAIMessage("服务接口调用异常。");
211.             }
212.         });
213.     }
215.     // 发送消息
216.     function sendMessage() {
217.         let userInput = $('#user-input');
218.         let userMessage = userInput.val();
219.         if (userMessage.trim() === '') {
220.             return;
221.         }
222.         userInput.val("");
223.         addUserMessage(userMessage);
224.         chatApi(userMessage);
225.     }
227.     // 清空聊天记录
228.     function clearChat() {
229.         $("#chat-log").empty();
230.         messageHistory = [];
231.         addAIMessage("你好，请输入你想问的问题。");
232.     }
234.     // 初始化
235.     function init() {
236.         addAIMessage("你好，请输入你想问的问题。");
237.         var submit = $("#submit");
238.         var userInput = $("#user-input");
239.         var focus = false;
240.         // 监听输入框焦点
241.         userInput.focus(function () {
242.             focus = true;
243.         }).blur(function () {
244.             focus = false;
245.         });
246.         // 回车监听事件
247.         document.addEventListener("keydown", function (event) {
248.             if (event.keyCode === 13) {
249.                 console.log(focus);
250.                 if (focus) {
251.                     submit.click();
252.                 }
253.             }
254.         });
255.     }
256.     init();
257. </script>
258. </body>
259. </html>

复制代码

运行效果：

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。