使用 Laravel 和 OpenAI API 建立一個簡單的應用程式
目錄
- 簡介
- Laravel 應用程式
- Open AI 平台
- 安裝 Open AI PHP 客戶端
- 建立 AI 控制器
- 設定路由
- 安裝 Inertia.js 依賴項
- 前端設置
- 使用表單和發送請求
- 顯示回應
Laravel 應用程式和 Open AI 簡介
在這個教程中,我們將建立一個簡單的 Laravel 應用程式,並使用 Open AI API 進行處理。首先,我們將設置 Laravel 應用程式並安裝必要的套件。然後,我們將註冊 Open AI 平台並獲取我們的 API 金鑰。最後,我們將建立一個控制器來處理 Open AI 的請求並顯示回應。
Laravel 應用程式
首先,我們需要建立一個新的 Laravel 應用程式。您可以使用 Laravel CLI 或 Composer 命令來創建新項目。在這個教程中,我們將使用 Composer 命令。
請打開終端機並運行以下命令:
composer create-project --prefer-dist laravel/laravel open-ai
此命令將使用 Laravel 的預設配置在名為 "open-ai" 的資料夾中創建一個新的 Laravel 應用程式。
接下來,我們需要安裝所需的 Composer 套件。在這個教程中,我們將使用 "OpenAI/php" 套件來與 Open AI API 進行交互。
請在終端機中導航到您的 Laravel 項目資料夾並運行以下命令:
composer require openai/php
這將安裝 "openai/php" 套件並使其可用於我們的項目。
Open AI 平台
在開始開發之前,我們需要註冊 Open AI 帳戶並獲取 API 金鑰。
您可以訪問 Open AI 官方網站(https://platform.openai.com)並使用您的 Google 帳戶註冊,或使用您的郵件地址註冊。
註冊完成後,您需要進入「個人」頁面並點擊「Create a new secret key」按鈕以獲取 API 金鑰。請儲存這個金鑰,稍後我們將在代碼中使用它來進行身份驗證。
完成這些步驟後,我們就可以開始編寫我們的應用程式代碼了。
安裝 Open AI PHP 客戶端
為了方便與 Open AI API 進行交互,我們可以使用 Open AI PHP 客戶端。該客戶端已經與 Open AI API 集成,可以幫助我們輕鬆地進行請求。
您可以在 GitHub 上找到官方的 Open AI PHP 客戶端(https://github.com/openai/php-client)。
為了使用 Open AI PHP 客戶端,我們需要安裝它。
請打開終端機,導航到 Laravel 項目資料夾並運行以下命令:
composer require openai/php-client
這將下載並安裝 Open AI PHP 客戶端。
安裝完成後,我們可以開始編寫我們的控制器,這將幫助我們發送請求並處理 Open AI 的回應。
建立 AI 控制器
在 Laravel 中,控制器用於處理請求和回應。我們將建立一個 AI 控制器來進行與 Open AI API 的交互。
首先,我們需要創建一個新的控制器。請在終端機中導航到 Laravel 項目資料夾並運行以下命令:
php artisan make:controller AIController
這將創建一個名為 "AIController" 的新控制器。
接下來,我們將在控制器中添加一些功能。請打開 "AIController.php" 文件並將以下代碼添加到文件中:
use OpenAI\OpenAI;
class AIController extends Controller
{
public function index()
{
// Add your code here
}
}
這將為我們的控制器創建一個基本的骨架。
現在,我們需要使用 Composer 自動加載器導入 Open AI PHP 客戶端。在 "AIController.php" 文件的頂部,請添加以下代碼:
use OpenAI\OpenAI;
這將導入 Open AI PHP 客戶端類。
接下來,我們需要設置 API 金鑰。在 "AIController.php" 文件的 "index" 函數中,請添加以下代碼:
$openai = new OpenAI('YOUR_API_KEY');
請將 "YOUR_API_KEY" 替換為您從 Open AI 平台獲取的 API 金鑰。此代碼將創建一個使用您的 API 金鑰進行身份驗證的 Open AI PHP 客戶端對象。
現在,我們可以繼續編寫我們的請求邏輯。在 "index" 函數中,請添加以下代碼:
$response = $openai->complete('davinci', ['Prompt' => 'Hello, world!']);
這將使用 Open AI PHP 客戶端對象發送一個測試請求到 Open AI API。
這只是一個簡單的示例,我們將繼續改進它。我們將在下一步中將請求發送到路由。
設定路由
在 Laravel 中,我們可以使用路由來處理 HTTP 請求。我們將設定一個路由,以便在打開我們的應用程式時調用 AI 控制器中的 "index" 函數。
打開 "routes/web.php" 文件並將以下代碼添加到文件的底部:
Route::get('/', 'AIController@index');
這將創建一個根路由,將使用 AI 控制器中的 "index" 函數來處理請求。
現在,我們的 Laravel 應用程式已經準備好發送請求到 Open AI API 並處理回應。讓我們繼續安裝 Inertia.js 依賴項,這將幫助我們在前端部分使用 Vue.js。
安裝 Inertia.js 依賴項
Inertia.js 是一個現代的前端框架,可以讓我們在 Laravel 應用程式中使用 Vue.js。它與 Laravel 項目非常緊密地集成在一起,可以幫助我們簡化前後端之間的數據傳輸。
為了使用 Inertia.js,我們需要安裝一些必要的依賴項。
首先,我們需要安裝 "inertiajs/inertia-laravel" 和 "inertiajs/inertia" 套件。
在終端機中導航到 Laravel 項目資料夾並運行以下命令:
composer require inertiajs/inertia-laravel inertiajs/inertia
這將安裝必要的 Inertia.js 依賴項。
安裝完成後,我們需要設置 Inertia.js 以及其他必要的前端資源。
前端設置
首先,我們需要在 Laravel 應用程式中設置 Inertia.js。請打開 "config/app.php" 文件並在 "providers" 數組中添加以下代碼:
Inertia\ServiceProvider::class,
這將向 Laravel 添加 Inertia.js 服務提供者。
接下來,我們還需要設置中間件以支援 Inertia.js。
請打開 "app/Http/Kernel.php" 文件並找到 "$middlewareGroups" 數組。
在 "web" 中間件組中添加以下代碼:
\Inertia\Middleware::class,
這將在 Laravel 應用程式中啟用 Inertia.js 中間件。
現在,我們需要創建一個基本的 Inertia.js 布局。請打開 "resources/views/app.blade.php" 文件並將以下代碼添加到文件中:
<!DOCTYPE html>
<html>
<head>
<title>Laravel Open AI</title>
<link href="{{ mix('/css/app.css') }}" rel="stylesheet">
@routes
@inertia
</head>
<body>
@inertia
<script src="{{ mix('/js/app.js') }}" defer></script>
</body>
</html>
這將創建一個基本的 HTML 模板,並包含必要的 CSS 和 JavaScript 檔案。
接下來,我們需要設置前端資源。
請打開 "webpack.mix.js" 文件並將以下代碼添加到文件中:
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
//
]);
這將告訴 Laravel Mix 如何編譯我們的 JavaScript 和 CSS 文件。
現在,我們需要創建一個資料夾來存放我們的前端組件。請在 Laravel 項目資料夾中創建一個名為 "resources/js/Pages" 的資料夾。
在 "Pages" 資料夾中,創建一個名為 "Index.vue" 的新 Vue 組件。將以下代碼添加到 "Index.vue" 文件中:
<template>
<div>
<h1>Hello, world!</h1>
</div>
</template>
<script>
export default {
//
}
</script>
這將創建一個基本的 Vue 組件,並顯示一個簡單的標題。
現在,我們已經完成了前端設置。我們可以使用表單來發送請求並在前端顯示回應。
使用表單和發送請求
在編寫表單之前,我們需要安裝 Vue 相關的依賴項。
在終端機中導航到 Laravel 項目資料夾並運行以下命令:
npm install -D @inertiajs/inertia@^0.10 @inertiajs/inertia-vue@^0.3 vue@^2.6 vue-loader@^15
這將安裝必要的 Vue 相關依賴項。
接下來,我們需要編寫一些表單和請求邏輯。
請打開 "resources/js/Pages/Index.vue" 文件並將以下代碼添加到文件中:
<template>
<div>
<h1>Hello, world!</h1>
<form @submit.prevent="submitForm">
<label for="prompt">Your prompt:</label>
<input type="text" v-model="form.prompt">
<button type="submit">Send Request</button>
</form>
<div v-if="response">
<h2>Response:</h2>
<p v-html="response"></p>
</div>
</div>
</template>
<script>
import { useInertia, useForm } from '@inertiajs/inertia-vue';
export default {
setup() {
const { post } = useInertia();
const form = useForm({
prompt: ''
});
const submitForm = () => {
post('ai', { prompt: form.prompt })
.then(response => {
// Handle response here
});
};
return {
form,
submitForm
};
}
}
</script>
這將創建一個包含表單的 Vue 組件。我們使用 v-model
將輸入項目綁定到表單對象中的 prompt
屬性。
當用戶提交表單時,我們將使用 post
方法發送請求到 /ai
路由。將回應存儲在 response
變數中以便顯示。
現在,我們已經完成了整個應用程式的開發部分。您可以運行 Laravel 應用程式並在瀏覽器中檢視結果。
顯示回應
為了顯示回應,我們需要更新 Index.vue
文件。
請打開 resources/js/Pages/Index.vue
文件並將以下代碼添加到文件中:
<template>
<div>
<h1>Hello, world!</h1>
<form @submit.prevent="submitForm">
<label for="prompt">Your prompt:</label>
<input type="text" v-model="form.prompt">
<button type="submit">Send Request</button>
</form>
<div v-if="response">
<h2>Response:</h2>
<p v-html="response"></p>
</div>
</div>
</template>
<script>
import { useInertia, useForm } from '@inertiajs/inertia-vue';
export default {
setup() {
const { post } = useInertia();
const form = useForm({
prompt: ''
});
const submitForm = () => {
post('ai', { prompt: form.prompt })
.then(response => {
// Handle response here
console.log(response);
if (response.success) {
this.response = response.data;
} else {
this.response = 'Error: ' + response.message;
}
});
};
return {
form,
submitForm,
response: ''
};
}
}
</script>
現在,當我們收到回應時,它將顯示在頁面上。
這就是整個開發過程!現在您可以運行 Laravel 應用程式並在瀏覽器中使用 Open AI API 進行交互。
結論
在本教程中,我們學習了如何建立一個簡單的 Laravel 應用程式,並使用 Open AI API 進行交互。我們安裝了必要的套件,設置了 API 金鑰,並建立了一個控制器來處理請求。我們還學習了如何在前端部分使用 Inertia.js 來進行視圖渲染。最後,我們使用表單來發送請求並在前端顯示回應。
這只是一個簡單的示例,您可以擴展這個應用程式以進行更多的功能和定制。希望這個教程對您有所幫助!
優點:
- 簡單的 Laravel 應用程式架構
- 支持 Open AI API
- 使用 Inertia.js 來提供現代化的前端體驗
缺點:
- 沒有使用真實的數據庫
- 沒有進行身份驗證
- 沒有進行表單驗證
下一步:
- 優化用戶體驗和介面設計
- 支持更多的 Open AI 功能和模型
- 實現真實的數據庫儲存和身份驗證
這個教程僅用於演示目的,實際應用時請遵循最佳實踐和安全標準。謝謝觀看這個教程,希望對您有所幫助!
FAQs:
Q: 如何註冊 Open AI 帳戶?
A: 您可以訪問 Open AI 官方網站(https://platform.openai.com)並使用您的 Google 帳戶註冊,或使用郵件地址註冊。
Q: 如何獲取 API 金鑰?
A: 註冊完 Open AI 帳戶後,您需要前往「個人」頁面並點擊「Create a new secret key」按鈕以獲取 API 金鑰。
Q: 如何安裝 Laravel 應用程式所需的套件?
A: 您可以使用 Composer 命令在 Laravel 應用程式中安裝所需的套件。請在終端機中導航到項目資料夾並運行以下命令:composer install
Q: 如何運行 Laravel 應用程式?
A: 在終端機中導航到項目資料夾並運行以下命令:php artisan serve
。然後在瀏覽器中打開指定的 URL。
Q: 如何設置 Laravel 的路由?
A: 在 "routes/web.php" 文件中定義您的路由。您可以使用 "Route" 類的不同方法來定義不同類型的路由。
Q: 如何處理表單提交?
A: 在控制器中定義一個函數來處理表單提交。您可以使用 "Request" 對象來獲取提交的表單數據並進行相應的處理。
Q: 如何在前端顯示回應?
A: 將回應數據傳遞給前端並在 Vue 組件中顯示。
資源: