使用 Laravel 和 OpenAI API 构建一个简单的应用程序

Find AI Tools
No difficulty
No complicated process
Find ai tools

使用 Laravel 和 OpenAI API 构建一个简单的应用程序

目录

  1. 简介
  2. 创建Laravel应用程序
  3. 注册OpenAI账户
  4. 安装OpenAI PHP客户端
  5. 创建AI控制器
  6. 配置Inertia.js
  7. 创建前端页面
  8. 发送请求到OpenAI
  9. 处理OpenAI的响应
  10. 保存对话记录
  11. 总结

简介

欢迎来到本教程!在本教程中,我们将创建一个简单的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的基本知识,并将其应用于您自己的项目中。

如果您还有任何问题,请随时在评论中提问!感谢您的观看,希望您能从本教程中受益!

Most people like

Are you spending too much time looking for ai tools?
App rating
4.9
AI Tools
100k+
Trusted Users
5000+
WHY YOU SHOULD CHOOSE TOOLIFY

TOOLIFY is the best ai tool source.