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

曂沅仴駦 发表于 2024-6-19 21:28:49

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

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

大型模子的出现为很多领域带来了革命性的变化，从自然语言处理到盘算机视觉，乃至是医学和金融领域。然而，对于很多开辟者来说，使用一些开源的模子进行实验和应用却是一个挑战，因为它们通常需要昂贵的硬件资源来运行。大多数情况下，使用这些模子需要拥有一台配备高性能GPU的服务器，而这每每是一项昂贵的投资。而 OpenRouter 为使用者提供了部分开源模子的实现，可以通过API免费使用，重要聚焦在7B规模大小的模子，比如谷歌的 gemma-7b ，Mistral AI 的 mistral-7b-instruct，肯定程度避免了自己去部署大模子的成本。
本文就基于 OpenRouter 中免费模子接口的本事，使用谷歌的 gemma-7b 模子，搭建自己的大模子助手，实现效果如下：
https://img-blog.csdnimg.cn/direct/76be5c48af3e49dab42e4de9f9833604.png
https://img-blog.csdnimg.cn/direct/f1de95cbed9b4014a6a2fc0c378ff735.png
https://img-blog.csdnimg.cn/direct/8ac184cc3efd4506ac64ce4392651b71.png
二、OpenRouter 使用

在实验前起首了解下 OpenRouter 是什么。OpenRouter 是一款整合了各类大模子的中间署理商，而且在国内无需梯子即可访问，通过 OpenRouter 可以调用超 100 种良好的大模子，此中包罗比较盛行的 OpenAI 的 ChatGPT 系列（包罗GPT4V），Anthropic 的 Claude 系列，谷歌的 PaLM 和 Gemini 系列等，而且更换模子仅需修改模子的名字即可，无需修改调用代码得逻辑：
https://img-blog.csdnimg.cn/direct/7f0da7bfa8ba4d10bade92580528ea0e.png
https://img-blog.csdnimg.cn/direct/f77868b610a3434eb35bd0a0cd8f5f75.png
https://img-blog.csdnimg.cn/direct/38b53f6aa189487e8e653b8a4e0f94ee.png
官方地点如下：
   https://openrouter.ai/
OpenRouter 没有对QQ邮箱做限定，支持 QQ 邮箱登录注册，肯定程度上给国内的一些用户提供了便利，并且还免费提供了一批7B的模子，包罗 nous-capybara-7b、mistral-7b-instruct、mythomist-7b、toppy-m-7b、cinematika-7b、gemma-7b-it：
https://img-blog.csdnimg.cn/direct/a95a707074054ea59b451b3f1cbca6f3.png
因此，当我们没有 GPU 服务器的时候，又想借助开源模子搭建一套自己的大模子助手时，就可以考虑使用 OpenRouter 了，注意使用前需要先注册账号，并生成 Api key：
https://img-blog.csdnimg.cn/direct/46f88677390943289ff944a1ac99696f.png
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']['message']['content']

if __name__ == '__main__':
    print(llm("你好，介绍一下你自己"))
运行输出：
https://img-blog.csdnimg.cn/direct/61fd8bc6ae974e048595be4f4779968c.png
使用 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.message.content


if __name__ == '__main__':
    print(llm("你好，介绍一下你自己"))

运行输出：
https://img-blog.csdnimg.cn/direct/184ce02e3f334f1c988e2e80da13b7c5.png
流式输出示例：
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.delta.content
            print(msg, end='', flush=True)


if __name__ == '__main__':
    llm("你好，介绍一下你自己")
运行输出：
https://img-blog.csdnimg.cn/direct/c8b9a0d0e4294cbab5376f6852db6b1c.png
三、搭建大模子助手

上面简单认识了 OpenRouter 的本事，下面基于 OpenRouter 上谷歌的 gemma-7b 模子搭建一个自己的大模子助手，简单的实行过程如下。
https://img-blog.csdnimg.cn/direct/cd379bcb09314209af5b222e9a6a9c92.png#pic_center
此中后端服务使用 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.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()

https://img-blog.csdnimg.cn/direct/6a28b42ecfae471a8526f6641ae10975.png
下面可以使用 Postman 进行测试：
请求内容：
{
        "questions":"你好，介绍下你自己",
        "history":[]
}
输出示例：
https://img-blog.csdnimg.cn/direct/a78891ed5845406790c6bc5d951a8729.png
从结果看接口访问正常，下面开始前端的搭建。
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>

运行效果：
https://img-blog.csdnimg.cn/direct/76be5c48af3e49dab42e4de9f9833604.png
https://img-blog.csdnimg.cn/direct/f1de95cbed9b4014a6a2fc0c378ff735.png
https://img-blog.csdnimg.cn/direct/8ac184cc3efd4506ac64ce4392651b71.png
到此，我们自己的大模子助手就根本做好了！

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

查看完整版本: 无需 GPU 服务器，借助 OpenRouter 零成本搭建自己的大模子助手