使用 Laravel 和 OpenAI API 构建一个简单的应用程序
目录
- 简介
- 创建Laravel应用程序
- 注册OpenAI账户
- 安装OpenAI PHP客户端
- 创建AI控制器
- 配置Inertia.js
- 创建前端页面
- 发送请求到OpenAI
- 处理OpenAI的响应
- 保存对话记录
- 总结
简介
欢迎来到本教程!在本教程中,我们将创建一个简单的Laravel应用程序,该应用程序将使用OpenAI API来回答用户提出的问题。我们将使用Inertia.js作为前端框架,并使用OpenAI PHP客户端来与OpenAI API进行通信。
创建Laravel应用程序
首先,我们需要创建一个新的Laravel应用程序。打开终端并导航到您要保存应用程序的目录中。然后,运行以下命令来创建新的Laravel项目:
Composer create-project --prefer-dist laravel/laravel laravel-openai
该命令将使用Composer创建一个名为"laravel-openai"的新Laravel项目。
注册OpenAI账户
在开始构建应用程序之前,我们需要先注册一个OpenAI账户并获取API密钥。您可以在OpenAI官方网站上注册账户,并通过生成新的秘密密钥来获取API密钥。请确保妥善保管您的API密钥,不要在公共代码库或公共位置中公开显示。
安装OpenAI PHP客户端
为了与OpenAI API进行通信,我们将使用OpenAI PHP客户端。您可以在GitHub的OpenAI PHP客户端官方页面上找到相关信息和文档。运行以下命令来安装OpenAI PHP客户端:
composer require openai/php-api-client
这将通过Composer将OpenAI PHP客户端作为依赖项安装到您的Laravel项目中。
创建AI控制器
现在,让我们创建一个名为"AiController"的控制器来处理与OpenAI API的通信。运行以下命令创建控制器:
php artisan make:controller AiController
创建成功后,打开"app/Http/Controllers/AiController.php"文件,并更新代码以实现与OpenAI的交互逻辑。您可以在OpenAI PHP客户端的文档中找到更多关于如何使用该客户端的信息。您需要使用您在注册OpenAI账户时生成的API密钥来进行身份验证。在控制器中,您可以定义一些方法来处理不同的请求,并将结果返回给前端。您还可以通过调用OpenAI API来查找和处理问题的答案。
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use OpenAI;
class AiController extends Controller
{
public function index()
{
return inertia('Index');
}
public function makeRequest(Request $request)
{
$prompt = $request->prompt;
$completion = OpenAI::complete([
'engine' => 'davinci',
'prompt' => $prompt,
'max_tokens' => 100,
]);
$response = $completion['choices'][0]['text'];
return response()->json([
'response' => $response,
]);
}
}
在上面的代码中,我们定义了一个名为"index"的方法,用于渲染前端页面。我们还定义了一个名为"makeRequest"的方法,用于处理发送到该路由的POST请求。在该方法中,我们使用OpenAI PHP客户端的"complete"方法来获取问题的答案。然后,我们将答案作为JSON数据返回给前端。
配置Inertia.js
为了在Laravel应用程序中使用Inertia.js,我们需要进行一些配置。首先,我们需要安装Inertia.js的Composer依赖项。运行以下命令来安装依赖项:
composer require inertiajs/inertia-laravel
安装完成后,打开app/Providers/InertiaServiceProvider.php
文件,并将以下代码添加到"register"方法中:
use Inertia\Inertia;
Inertia::share([
'app' => [
'name' => config('app.name'),
'url' => config('app.url'),
],
]);
这将在每个Inertia响应中共享一个名为"app"的全局对象,其中包含应用程序的名称和URL。
接下来,我们需要在Laravel应用程序的路由文件中添加必要的路由和中间件。打开routes/web.php
文件,并添加以下代码:
use App\Http\Controllers\AiController;
use Illuminate\Support\Facades\Route;
Route::get('/', [AiController::class, 'index'])->name('index');
Route::post('/ai', [AiController::class, 'makeRequest'])->name('ai.makeRequest');
上述代码将定义"index"路由和"ai"路由,分别对应AiController的"index"方法和"makeRequest"方法。"index"路由用于渲染前端页面,"ai"路由用于处理对OpenAI的请求。
创建前端页面
现在,让我们创建一个简单的前端页面来显示问题和答案。为此,我们将使用Vue.js和Inertia.js。创建一个名为"Index.vue"的Vue组件,并在页面上显示问题输入框和提交按钮。
<template>
<div>
<h1>提问</h1>
<input type="text" v-model="form.prompt" placeholder="请输入您的问题" />
<button @click="sendRequest">发送请求</button>
<h2>答案</h2>
<p>{{ response }}</p>
</div>
</template>
<script>
import { useForm } from '@inertiajs/inertia-vue3';
export default {
setup() {
const { data, post } = useForm({
prompt: '',
});
const sendRequest = async () => {
const response = await post(route('ai.makeRequest'), data);
// Update the response in the component's state
this.response = response.data.response;
};
return {
form: data.value,
response: '',
sendRequest,
};
},
};
</script>
<style scoped>
h1 {
font-size: 24px;
margin-bottom: 16px;
}
input[type="text"] {
width: 300px;
padding: 8px;
margin-right: 16px;
}
button {
padding: 8px 16px;
background-color: #4caf50;
color: white;
border: none;
}
</style>
上面的代码定义了一个名为"Index"的Vue组件,其中包含一个问题输入框和一个提交按钮。当用户点击提交按钮时,将向后端发送表示问题的POST请求。后端控制器将使用OpenAI PHP客户端发送请求到OpenAI API,并获取问题的答案。然后,将答案更新到组件的状态中,以便在页面上显示。
发送请求到OpenAI
现在,让我们修改控制器中的"makeRequest"方法,以将问题发送到OpenAI API,并获取答案。我们将使用OpenAI PHP客户端的"complete"方法来实现这一点。
public function makeRequest(Request $request)
{
$prompt = $request->prompt;
$completion = OpenAI::complete([
'engine' => 'text-davinci-003',
'prompt' => $prompt,
'max_tokens' => 100,
]);
$response = $completion['choices'][0]['text'];
return response()->json([
'response' => $response,
]);
}
上述代码中,我们将问题作为请求的一部分发送到OpenAI API的complete
方法中。我们指定使用text-davinci-003
引擎,限制答案的最大长度为100个tokens。然后,我们将答案作为JSON响应返回给前端。
处理OpenAI的响应
在前端页面上,我们将使用Vue组件的data
来存储问题和答案。当用户点击提交按钮时,我们将使用inertia-vue3
库提供的post
方法将问题和答案发送到后端控制器。在收到来自服务器的响应后,我们将更新组件的状态,并将答案显示在页面上。
保存对话记录
如果您想要将用户的问题和OpenAI的答案保存到数据库中,可以在控制器的makeRequest
方法中添加该逻辑。将答案保存到数据库的步骤将因您使用的数据库类型而异。您可以使用Laravel的数据库查询构建器或Eloquent模型来执行保存操作。
总结
在本教程中,我们介绍了如何使用Laravel、Inertia.js和OpenAI PHP客户端创建一个简单的应用程序。我们通过OpenAI API来回答用户的问题,并在前端页面上显示答案。通过这个例子,您可以掌握使用OpenAI API的基本知识,并将其应用于您自己的项目中。
如果您还有任何问题,请随时在评论中提问!感谢您的观看,希望您能从本教程中受益!