站点图标 AI技术聚合

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

xiaoxingxing

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

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

运行效果：


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

版权声明：本文为博主作者：小毕超原创文章，版权归属原作者，如果侵权，请联系我们删除！

原文链接：https://blog.csdn.net/qq_43692950/article/details/136481039

退出移动版