2023年的深度学习入门指南(13) - 写后端

Jtag特工

已于 2023-10-11 19:23:56 修改

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏：算法文章标签：深度学习人工智能

于 2023-05-13 03:04:43 首次发布

本文链接：https://blog.youkuaiyun.com/lusing/article/details/130653049

算法专栏收录该内容

5 篇文章

订阅专栏

2023年的深度学习入门指南(13) - 写后端

我们前面学习了用python在本机上写前端，也学习了使用HTML在本机写前端。同理，我们可以写Windows应用，mac应用，iOS应用，Android应用等等以适合各种终端。其实，最通用的终端就是Web前端。

为了使用Web前端，我们需要写后端，也就是服务端代码。

写后端可以有哪些好处？
首先，有了后端，我们就可以将数据存储到数据库里进行存储和进一步的分析。
其次，有了后端，我们可以接多个API提供方，提供1+1>2的效果。
第三，后端运行在服务器上，我们可以使用服务器的计算资源，而不是自己的电脑的计算资源，更加稳定。
最后，有了后端，我们就可以提供服务给其他小伙伴使用了。

基于开源项目修改自己的后端

chatgpt的生态如此丰富，我们有大量的开源项目可以参考。我们可以直接使用这些项目，当然多数情况肯定是要进行一些自己的修改，要不然直接用第三方的现成产品就好了。通过修改这些开源项目，可以大大加速上线时间，也方便满足我们的需求。

我们这里选用chatgpt-demo项目来作为讲解的例子，它的地址在：https://github.com/anse-app/chatgpt-demo。

运行chatgpt-demo

我个人选取它作为例子的原因是因为它是基于astro写的，代码看起来比较清爽。Astro是基于Node.js的，跟前端一样都是js，对于新同学入门的话比较友好。

我们首先clone这个项目：

git clone https://github.com/anse-app/chatgpt-demo

第二步，我们安装Node.js，可以直接从Nodejs.org下载安装包，也可以使用nvm来安装。nvm请参照：https://github.com/nvm-sh/nvm。

第三步，我们安装依赖：

npm install pnpm -g
pnpm install

pnpm的速度要比npm快很多，所以我们这里使用pnpm。

第四步，修改配置文件。

找到目录下的.env.example文件，将它复制一份并命名为.env，然后修改里面的配置。
最主要修改的有三个参数，其中只有第一个是强制要求的：

第一个是OPENAI_API_KEY，这个是我们的OpenAI API Key
第二个是HTTPS_PROXY，如果你需要使用代理的话，可以在这里设置，否则不用设置
第三个是SITE_PASSWORD，这个是我们的密码，如果不设置的话，就是公开的，任何人都可以访问

# Your API Key for OpenAI
OPENAI_API_KEY=你的API Key
# Provide proxy for OpenAI API. e.g. http://127.0.0.1:7890
HTTPS_PROXY=
# Custom base url for OpenAI API. default: https://api.openai.com
OPENAI_API_BASE_URL=
# Inject analytics or other scripts before </head> of the page
HEAD_SCRIPTS=
# Secret string for the project. Use for generating signatures for API calls
PUBLIC_SECRET_KEY=
# Set password for site, support multiple password separated by comma. If not set, site will be public
SITE_PASSWORD=你的密码
# ID of the model to use. https://platform.openai.com/docs/api-reference/models/list
OPENAI_API_MODEL=gpt-4

第五步，运行：

pnpm start --host

注意，这里我们使用了–host参数，这样我们就可以在外网访问这个应用了。

输出结果如下：

> chatgpt-api-demo@0.0.1 start /root/code/chatgpt-demo
> astro dev "--host"

  🚀  astro  v2.1.3 started in 355ms
  
  ┃ Local    http://localhost:3000/
  ┃ Network  http://192.168.0.189:3000/

第六步，访问。

我们就可以访问我们的gpt应用了。如果你设置了密码，那么就需要输入密码才能访问。
地址参照你运行pnpm start --host的输出结果。比如我的就是：http://192.168.0.189:3000/

下面是我的运行结果，我修改了一点，跟你的可能不一样：

下面的官方的结果：

定制化自己的chatgpt-demo

下面我们就可以进行自己的定制了。选这个Astro工程的原因为就是修改起来很方便，比如首页的头部的代码，大家可以看到就是非常简单的几个标题字符串，大家想改成什么就改成什么。

---
import { model } from '../utils/openAI'
import Logo from './Logo.astro'
import Themetoggle from './Themetoggle.astro'
---

<header>
  <div class="fb items-center">
    <Logo />
    <Themetoggle />
  </div>
  <div class="fi mt-2">
    <span class="gpt-title">旭伦GPT</span>
    <span class="gpt-subtitle">1.0</span>
  </div>
  <p mt-1 op-60>Powered by OpenAI API ({model}).</p>
</header>

我们可以看到，这里的代码是astro的代码，它的语法跟HTML非常相似，但是它可以直接使用js，所以我们可以在这里写js代码。

我们来看主页的内容，基本上就是header, footer加上一段检查密码的代码：

---
import Layout from '../layouts/Layout.astro'
import Header from '../components/Header.astro'
import Footer from '../components/Footer.astro'
import Generator from '../components/Generator'
import '../message.css'
import 'katex/dist/katex.min.css'
import 'highlight.js/styles/atom-one-dark.css'
---

<Layout title="Xulun GPT">
  <main >
    <Header />
    <Generator client:load />
    <Footer />
  </main>
</Layout>

<script>
async function checkCurrentAuth() {
  const password = localStorage.getItem('pass')
  const response = await fetch('/api/auth', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      pass: password,
    }),
  })
  const responseJson = await response.json()
  if (responseJson.code !== 0)
    window.location.href = '/password'
}
checkCurrentAuth()
</script>

运行一下修改的，我的就变成了这样：

最后我们再看一下chatgpt-demo里面是如何调用openai的：

export const model = import.meta.env.OPENAI_API_MODEL || 'gpt-3.5-turbo'

export const generatePayload = (apiKey: string, messages: ChatMessage[]): RequestInit & { dispatcher?: any } => ({
  headers: {
    'Content-Type': 'application/json',
    'Authorization': `Bearer ${apiKey}`,
  },
  method: 'POST',
  body: JSON.stringify({
    model,
    messages,
    temperature: 0.6,
    stream: true,
  }),
})

我们看到了stream: true，这是以流式的方式来访问openai的API.

接下来我们看来流是如何处理的：

  const stream = new ReadableStream({
    async start(controller) {
      const streamParser = (event: ParsedEvent | ReconnectInterval) => {
        if (event.type === 'event') {
          const data = event.data
          if (data === '[DONE]') {
            controller.close()
            return
          }
          try {
            const json = JSON.parse(data)
            const text = json.choices[0].delta?.content || ''
            const queue = encoder.encode(text)
            controller.enqueue(queue)
          } catch (e) {
            controller.error(e)
          }
        }
      }

      const parser = createParser(streamParser)
      for await (const chunk of rawResponse.body as any)
        parser.feed(decoder.decode(chunk))
    },
  })

这段代码创建了一个ReadableStream对象，它是用于处理流式数据的Web API。

在这段代码中，只使用了start方法，这个方法在流被构造或者需要提供数据时会被调用。start方法接收一个controller参数，这个参数是一个ReadableStreamDefaultController对象，它提供了enqueue、close和error等方法，可以用来控制流的状态。

解析事件流的工作是通过createParser方法创建的parser对象来完成的。这个parser对象会对服务器发送的每一块数据（chunk）进行解析，然后调用streamParser函数处理解析后的事件。

streamParser函数会检查事件的类型，如果事件类型为event，它就会提取出事件中的数据，然后尝试将数据解析为JSON格式，并提取出其中的文本信息。如果数据是[DONE]，它就会关闭流。如果在解析或提取过程中出现错误，它就会调用controller.error方法并传入错误对象，使得流进入错误状态。

基本上我们可以理解为，如果一个chunk是[DONE]，那么就关闭流，否则就把chunk解析成json，然后把json里面的delta.content字段的内容放入到流里面。

OK。现在需要什么功能，你就可以在这个工程的基础上修改了。
如果遇到无法连接之类的问题，可以参考这个：https://github.com/anse-app/chatgpt-demo/discussions/270

自己写后端

光用别人的东西，可能对于细节就缺失了一些了解。而且，主流的后端还是基于Spring Boot框架，使用Java或者是Kotlin来写的。

编译Spring Boot工程的话，我们需要maven或者是gradle这样的构建工具，它有中心仓库，可以自动下载依赖。写Spring Boot的话，我们最好有个趁手的IDE，比如IntelliJ IDEA或者是Visual Studio Code。

IDEA

写主类

我们都知道，Java应用需要一个主类，这个主类需要有main方法，这个main方法是程序的入口。

在Spring Boot应用里面，这个工作交给SpringApplication类来完成。我们的main方法如下：

package cn.lusing.chat.chat

import org.springframework.boot.autoconfigure.SpringBootApplication
import org.springframework.boot.runApplication

@SpringBootApplication
class ChatApplication

fun main(args: Array<String>) {
	runApplication<ChatApplication>(*args)
}

为了能让这个应用运行起来，我们需要写一个pom.xml:

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>3.0.6</version>
		<relativePath/> <!-- lookup parent from repository -->
	</parent>
	<groupId>cn.lusing.chat</groupId>
	<artifactId>chat</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<name>chat</name>
	<description>Demo project for Spring Boot</description>
	<properties>
		<java.version>17</java.version>
		<kotlin.version>1.8.21</kotlin.version>
	</properties>
	<dependencies>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>
		<dependency>
			<groupId>com.fasterxml.jackson.module</groupId>
			<artifactId>jackson-module-kotlin</artifactId>
		</dependency>
		<dependency>
			<groupId>org.jetbrains.kotlin</groupId>
			<artifactId>kotlin-reflect</artifactId>
		</dependency>
		<dependency>
			<groupId>org.jetbrains.kotlin</groupId>
			<artifactId>kotlin-stdlib-jdk8</artifactId>
		</dependency>

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
		</dependency>
        <dependency>
            <groupId>org.jetbrains.kotlin</groupId>
            <artifactId>kotlin-stdlib-jdk8</artifactId>
            <version>${kotlin.version}</version>
        </dependency>
        <dependency>
            <groupId>org.jetbrains.kotlin</groupId>
            <artifactId>kotlin-test</artifactId>
            <version>${kotlin.version}</version>
            <scope>test</scope>
        </dependency>
    </dependencies>

	<build>
		<sourceDirectory>src/main/kotlin</sourceDirectory>
		<testSourceDirectory>src/test/kotlin</testSourceDirectory>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
				<executions>
					<execution>
						<goals>
							<!-- 生成可执行 JAR 包 -->
							<goal>repackage</goal>
						</goals>
					</execution>
				</executions>
			</plugin>
			<plugin>
				<groupId>org.jetbrains.kotlin</groupId>
				<artifactId>kotlin-maven-plugin</artifactId>
                <version>${kotlin.version}</version>
                <executions>
                    <execution>
                        <id>compile</id>
                        <phase>compile</phase>
                        <goals>
                            <goal>compile</goal>
                        </goals>
                    </execution>
                    <execution>
                        <id>test-compile</id>
                        <phase>test-compile</phase>
                        <goals>
                            <goal>test-compile</goal>
                        </goals>
                    </execution>
                </executions>
                <configuration>
					<args>
						<arg>-Xjsr305=strict</arg>
					</args>
					<compilerPlugins>
						<plugin>spring</plugin>
					</compilerPlugins>
                    <jvmTarget>17</jvmTarget>
                </configuration>
				<dependencies>
					<dependency>
						<groupId>org.jetbrains.kotlin</groupId>
						<artifactId>kotlin-maven-allopen</artifactId>
						<version>${kotlin.version}</version>
					</dependency>
				</dependencies>
			</plugin>
		</plugins>
	</build>
</project>

有了这个xml文件，我们就可以使用maven来编译我们的工程了。

编译：

mvn compile

生成可执行jar包：

mvn package

然后运行：

java -jar target/chat-0.0.1-SNAPSHOT.jar

也可以直接在IDE里面运行。

运行起来的效果是像这样的：


  .   ____          _            __ _ _
 /\\ / ___'_ __ _ _(_)_ __  __ _ \ \ \ \
( ( )\___ | '_ | '_| | '_ \/ _` | \ \ \ \
 \\/  ___)| |_)| | | | | || (_| |  ) ) ) )
  '  |____| .__|_| |_|_| |_\__, | / / / /
 =========|_|==============|___/=/_/_/_/
 :: Spring Boot ::                (v3.0.6)

2023-05-13T01:32:16.879+08:00  INFO 5925 --- [           main] cn.lusing.chat.chat.ChatApplicationKt    : Starting ChatApplicationKt using Java 17.0.6 with PID 5925 (/Users/liuziying/working/misc/java/chat/chat/target/classes started by liuziying in /Users/liuziying/working/misc/java/chat)
2023-05-13T01:32:16.884+08:00  INFO 5925 --- [           main] cn.lusing.chat.chat.ChatApplicationKt    : No active profile set, falling back to 1 default profile: "default"
2023-05-13T01:32:17.868+08:00  INFO 5925 --- [           main] o.s.b.w.embedded.tomcat.TomcatWebServer  : Tomcat initialized with port(s): 8080 (http)
2023-05-13T01:32:17.879+08:00  INFO 5925 --- [           main] o.apache.catalina.core.StandardService   : Starting service [Tomcat]
2023-05-13T01:32:17.880+08:00  INFO 5925 --- [           main] o.apache.catalina.core.StandardEngine    : Starting Servlet engine: [Apache Tomcat/10.1.8]
2023-05-13T01:32:17.984+08:00  INFO 5925 --- [           main] o.a.c.c.C.[Tomcat].[localhost].[/]       : Initializing Spring embedded WebApplicationContext
2023-05-13T01:32:17.986+08:00  INFO 5925 --- [           main] w.s.c.ServletWebServerApplicationContext : Root WebApplicationContext: initialization completed in 1044 ms
2023-05-13T01:32:18.240+08:00  INFO 5925 --- [           main] o.s.b.a.w.s.WelcomePageHandlerMapping    : Adding welcome page: class path resource [static/index.html]
2023-05-13T01:32:18.373+08:00  INFO 5925 --- [           main] o.s.b.w.embedded.tomcat.TomcatWebServer  : Tomcat started on port(s): 8080 (http) with context path ''
2023-05-13T01:32:18.383+08:00  INFO 5925 --- [           main] cn.lusing.chat.chat.ChatApplicationKt    : Started ChatApplicationKt in 1.905 seconds (process running for 2.373)

写一个处理Rest API的类

Rest是Resource Representational State Transfer的缩写，直译为表现层状态转移，是一种软件架构风格，用于设计和实现Web服务。

Rest的核心思想是将网络上的资源用统一资源标识符（URI）来表示，并通过HTTP协议提供的方法（如GET、POST、PUT、DELETE等）来对资源进行操作。

Rest的优点是简化了接口的设计，提高了可读性和可维护性，适用于各种客户端和平台。

我们的服务端代码就要基于Rest API来提供服务。

我们先写一个最简单的例子让大家理解一下Rest API的工作方式：

package cn.lusing.chat.chat
import org.springframework.web.bind.annotation.*

@CrossOrigin(origins = ["*"])
@RestController
class MainController{
    @RequestMapping("/api/v1/chat/{message}")
    fun hello(@PathVariable(name="message") message : String) : String {
        return "Hello,Chat!$message";
    }

    @PostMapping("/api/v1/chat2")
    fun hello2(@RequestBody json: String) : String {
        return "{'data':'$json'}";
    }
}

我们以一个get请求和一个post请求为例，给大家讲解下Rest API是如何工作的。

我们先来看get请求，这个请求的地址是：http://localhost:8080/api/v1/chat/chatgpt。

我们通过浏览器访问这个地址，可以看到返回的结果是：Hello,Chat!chatgpt。其中，chatgpt就是我们传入的参数，大家可以换一个试试效果。

但是，在URL里面传递参数，有时候是不方便的，比如我们要传递一个很长的文本，这个文本可能会超过URL的长度限制。这个时候，我们就需要使用post请求。

Post请求就无法将参数放在URL里面了，我们需要把参数放在请求的body里面。我们可以使用curl命令来测试一下：

curl -X POST http://127.0.0.1:8080/api/v1/chat2 -d '{message:"aaa"}'

返回值如下：

{'data':'%7Bmessage%3A%22aaa%22%7D='}%

我们可以看到，我们传入的参数是{message:“aaa”}，但是返回的结果是%7Bmessage%3A%22aaa%22%7D=。这是因为我们传入的参数是json格式的，而返回的结果是url编码的格式。

写首页

我们的首页就是一个html文件，我们可以直接把它放在resources/static/index.html里面。

<!DOCTYPE html>
<html>
<head>
    <title>智能问答系统 Powered by chatgpt</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="p-6 bg-gray-200">
    <h1 class="text-3xl mb-4">Chat Interface</h1>
    <input type="text" id="message" placeholder="Type your message here" class="px-4 py-2 mb-4 w-full border-2 border-gray-300 rounded">
    <button id="send" class="px-4 py-2 bg-blue-500 text-white rounded">Send</button>
    <div id="response" class="mt-4 p-4 border-2 border-gray-300 rounded"></div>

    <script>
        document.querySelector("#send").addEventListener('click', async () => {
            const message = document.querySelector("#message").value;
            try {
                const response = await fetch('/api/v1/chat2', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ message })
                });
                const data = await response.text();
                document.querySelector("#response").textContent = data;
            } catch (error) {
                console.error('Error:', error);
            }
        });
    </script>
</body>
</html>

我们可以看到，这个页面有一个输入框，一个按钮，一个输出框。我们在输入框里面输入内容，然后点击按钮，就可以把输入的内容发送到后端，然后后端返回一个结果，这个结果就显示在输出框里面。

运行的效果如下：

调用openai API

下面我们就剩最后一道工序了，把用户的输入传给openai，然后把openai的结果返回给用户:

package cn.lusing.chat.chat

import java.io.OutputStreamWriter
import java.net.HttpURLConnection
import java.net.URL

fun chatWithOpenAI(apiKey: String, message: String): String {
    val url = URL("https://api.openai.com/v1/chat/completions")
    with(url.openConnection() as HttpURLConnection) {
        requestMethod = "POST" // 设置请求类型为 POST

        // 设置请求头
        setRequestProperty("Content-Type", "application/json")
        setRequestProperty("Authorization", "Bearer $apiKey")

        // 设置请求体
        val body = """
            {
                "model": "gpt-3.5-turbo",
                "messages": [
                    {
                        "role": "system",
                        "content": "You are a helpful assistant."
                    },
                    {
                        "role": "user",
                        "content": "$message"
                    }
                ]
            }
        """.trimIndent()

        doOutput = true
        OutputStreamWriter(outputStream).use {
            it.write(body)
        }

        // 返回响应
        return inputStream.bufferedReader().use { it.readText() }
    }
}

我们修改一下Controller的方法：

    @PostMapping("/api/v1/chat2")
    fun hello2(@RequestBody json: String): String {
        val jsonNode = objectMapper.readTree(json)
        val message = jsonNode.get("message")?.asText()
        val apiKey = "你的key"
        return chatWithOpenAI(apiKey, "$message");
    }

我们来看下效果：

链路已经通了。

后面调调格式，首先把data改成data?.choices[0]?.message?.content：

        document.querySelector("#send").addEventListener('click', async () => {
            const message = document.querySelector("#message").value;
            try {
                const response = await fetch('/api/v1/chat2', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ message })
                });
                const data = await response.json();
                document.querySelector("#response").textContent = data?.choices[0]?.message?.content;
            } catch (error) {
                console.error('Error:', error);
            }
        });

再给response div改个增加个pre的样式：

<div id="response" class="mt-4 p-4 border-2 border-gray-300 rounded" style="white-space: pre;"></div>

效果如下：

代码格式没有highlight，我们之前在前端的时候搞过了，这里就不再重复了。

小结

恭喜，从此您解锁了调用大模型的后端能力。