๐ Laravel ChatGPT ๊ฐ๋จ ์ค์น ๊ฐ์ด๋

๐ Laravel ChatGPT ๊ฐ๋จ ์ค์น ๊ฐ์ด๋
์ด ๊ฐ์ด๋๋ Plesk Laravel Toolkit์ ์ฌ์ฉํ๋ SWS ์นํธ์คํ
๊ณ ๊ฐ์ ์ํ ์ค์น ์๋ด์์
๋๋ค.
์ด๋ณด์๋ ๋น ๋ฅด๊ฒ ๋ฐ๋ผํ ์ ์๋๋ก ๋จ๊ณ๋ฅผ ํ๋ํ๋ ์ค๋ช
๋๋ฆด๊ฒ์! ๐
1๏ธโฃ Laravel ์ค์น
-
Plesk ๊ด๋ฆฌ์ ํ์ด์ง ์ ์
-
์ข์ธก ๋ฉ๋ด์์ Laravel Toolkit ์ ํ
-
Install Application
ํด๋ฆญ -
Install Skeleton
์ ํ -
์ค์นํ ๋๋ฉ์ธ ์ ํ ํ ์ค์น ์งํ
2๏ธโฃ OpenAI ํจํค์ง ์ค์น
Laravel Toolkit์ Composer ์น์
์์ ์๋ ๋ช
๋ น์ด๋ฅผ ์คํํ์ธ์.
๐ก ๋ช
๋ น์ด ์
๋ ฅ ์์น๋ "Composer" ํญ์
๋๋ค!
composer require openai-php/client openai-php/laravel
3๏ธโฃ ํ์ํ ํ์ผ ์์ฑ
์๋ 3๊ฐ์ ํ์ผ์ ์์ฑํ๊ณ ๊ฐ๊ฐ์ ์ฝ๋๋ฅผ ๋ถ์ฌ ๋ฃ์ด ์ฃผ์ธ์. โ๏ธ
๐ ํ์ผ 1: routes/web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ChatController;
Route::get('/', [ChatController::class, 'index']);
Route::post('/chat', [ChatController::class, 'ask'])->name('chat.ask');
๐ ํ์ผ 2: app/Http/Controllers/ChatController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use OpenAI\Laravel\Facades\OpenAI;
class ChatController extends Controller
{
public function index()
{
return view('chat');
}
public function ask(Request $request)
{
$response = OpenAI::chat()->create([
'model' => 'gpt-3.5-turbo',
'messages' => [
['role' => 'user', 'content' => $request->message],
],
]);
return response()->json([
'message' => $response->choices[0]->message->content,
]);
}
}
๐ ํ์ผ 3: resources/views/chat.blade.php
<!DOCTYPE html>
<html>
<head>
<title>ChatGPT Demo</title>
<meta name="csrf-token" content="{{ csrf_token() }}">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.chat-container { max-width: 800px; margin: 50px auto; padding: 20px; }
.chat-box { height: 400px; border: 1px solid #ccc; overflow-y: auto; padding: 20px; margin-bottom: 20px; }
.message { margin-bottom: 10px; padding: 10px; border-radius: 5px; }
.user-message { background-color: #e3f2fd; margin-left: 20%; }
.bot-message { background-color: #f5f5f5; margin-right: 20%; }
</style>
</head>
<body>
<div class="chat-container">
<div class="chat-box" id="chatBox"></div>
<div class="input-group">
<input type="text" id="messageInput" placeholder="๋ฉ์์ง๋ฅผ ์
๋ ฅํ์ธ์...">
<button onclick="sendMessage()">์ ์ก</button>
</div>
</div>
<script>
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
function sendMessage() {
const message = $('#messageInput').val();
if (!message) return;
$('#chatBox').append(`<div class="message user-message">${message}</div>`);
$('#messageInput').val('');
$.ajax({
url: '/chat',
method: 'POST',
data: { message: message },
success: function(response) {
$('#chatBox').append(`<div class="message bot-message">${response.message}</div>`);
$('#chatBox').scrollTop($('#chatBox')[0].scrollHeight);
},
error: function(xhr) {
$('#chatBox').append(`<div class="message bot-message">โ ์ค๋ฅ๊ฐ ๋ฐ์ํ์ต๋๋ค</div>`);
}
});
}
$('#messageInput').keypress(function(e) {
if (e.which == 13) sendMessage();
});
</script>
</body>
</html>
๐ 4. OpenAI API ํค ์ค์
.env
ํ์ผ์ ๋ค์ ์ค์ ์ถ๊ฐํ์ธ์:
OPENAI_API_KEY=your-api-key-here
๐ ์ฃผ์์ฌํญ: ๋ฐ๋์ ์ ํจํ OpenAI API ํค๋ฅผ ์ฌ์ฉํด์ผ ์ ์ ์๋ํฉ๋๋ค!
๐ ์ค์น ์๋ฃ!
์ด์ ๋ธ๋ผ์ฐ์ ์์ ํด๋น ๋๋ฉ์ธ์ ์ด๋ฉด
ChatGPT์ ์ค์๊ฐ์ผ๋ก ๋ํํ ์ ์๋ ์ฑ๋ด ํ์ด์ง๊ฐ ๋ํ๋ฉ๋๋ค! ๐ง ๐ฌ