(sws) ์ง€์‹ ๊ธฐ๋ฐ˜ – SWS ์ปค๋ฎค๋‹ˆํ‹ฐ

๐Ÿš€ Laravel ChatGPT ๊ฐ„๋‹จ ์„ค์น˜ ๊ฐ€์ด๋“œ

์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜
์ž‘์„ฑ์ž
shop2world shop2world
์ž‘์„ฑ์ผ
2025-04-14 08:45
์กฐํšŒ
70




๐Ÿš€ Laravel ChatGPT ๊ฐ„๋‹จ ์„ค์น˜ ๊ฐ€์ด๋“œ

์ด ๊ฐ€์ด๋“œ๋Š” Plesk Laravel Toolkit์„ ์‚ฌ์šฉํ•˜๋Š” SWS ์›นํ˜ธ์ŠคํŒ… ๊ณ ๊ฐ์„ ์œ„ํ•œ ์„ค์น˜ ์•ˆ๋‚ด์„œ์ž…๋‹ˆ๋‹ค.
์ดˆ๋ณด์ž๋„ ๋น ๋ฅด๊ฒŒ ๋”ฐ๋ผํ•  ์ˆ˜ ์žˆ๋„๋ก ๋‹จ๊ณ„๋ฅผ ํ•˜๋‚˜ํ•˜๋‚˜ ์„ค๋ช…๋“œ๋ฆด๊ฒŒ์š”! ๐Ÿ˜Ž


1๏ธโƒฃ Laravel ์„ค์น˜

  1. Plesk ๊ด€๋ฆฌ์ž ํŽ˜์ด์ง€ ์ ‘์†

  2. ์ขŒ์ธก ๋ฉ”๋‰ด์—์„œ Laravel Toolkit ์„ ํƒ

  3. Install Application ํด๋ฆญ

  4. Install Skeleton ์„ ํƒ

  5. ์„ค์น˜ํ•  ๋„๋ฉ”์ธ ์„ ํƒ ํ›„ ์„ค์น˜ ์ง„ํ–‰


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์™€ ์‹ค์‹œ๊ฐ„์œผ๋กœ ๋Œ€ํ™”ํ•  ์ˆ˜ ์žˆ๋Š” ์ฑ—๋ด‡ ํŽ˜์ด์ง€๊ฐ€ ๋‚˜ํƒ€๋‚ฉ๋‹ˆ๋‹ค! ๐Ÿง ๐Ÿ’ฌ