Zbuduj klon chatgpt z Laravel

OpenAI wydało zupełnie nowy interfejs API, który pozwala korzystać z potężnego modelu AI, który również zasila ChatGPT. Zobaczmy, jak możemy go wykorzystać i zbudować klon ChatGPT za pomocą Laravel 10. Jeśli chcesz przejść bezpośrednio do kodu źródłowego, możesz go znaleźć na GitHubie.

Nowy model AI nazywa się gpt-3.5-turbo i jest 10 razy (!) tańszy niż najmocniejszy model DaVinci, co jest niesamowite.

Monitowanie o ten model działa nieco inaczej, ponieważ ma na celu automatyczne uzupełnianie "czatu". Oznacza to, że nie wysyłasz prostego ciągu jako monitu, ale zamiast tego wysyłasz rozmowę na czacie, którą model AI następnie automatycznie uzupełni.

Oto spojrzenie na gotową wersję naszego klonu ChatGPT:

Pierwsze kroki

Aby rozpocząć, utworzymy nową aplikację Laravel 10 przy użyciu laravel new chatgpt-clone, a następnie zainstalujemy klienta PHP OpenAI za pomocą kompozytora wymagającego openai-php / laravel.

Następną rzeczą, którą musimy zrobić, to opublikować plik konfiguracyjny pakietu i skonfigurować nasz klucz API OpenAI.

Aby opublikować plik konfiguracyjny, uruchom następujące polecenie:

php artisan vendor:publish --provider="OpenAI\Laravel\ServiceProvider"

Następnie możesz ustawić klucz interfejsu API OpenAI w pliku .env w następujący sposób:

OPENAI_API_KEY=sk-...

Tworzenie prostego interfejsu użytkownika

Ponieważ chcemy interfejsu użytkownika w stylu czatu, dodajmy proste pole wprowadzania do naszego pliku welcome.blade.php, a także przycisk "Zresetuj rozmowę", tak jak mamy w ChatGPT, aby zresetować bieżącą rozmowę. Umieszczamy również pole wprowadzania w formularzu, który po prostu publikuje na głównej trasie naszej aplikacji Laravel.

<form class="p-4 flex space-x-4 justify-center items-center" action="/" method="post">
    @csrf
    <label for="message">Laravel Question:</label>
    <input id="message" type="text" name="message" autocomplete="off" class="border rounded-md  p-2 flex-1" />
    <a class="bg-gray-800 text-white p-2 rounded-md" href="/reset">Reset Conversation</a>
</form>

Budowanie "podpowiedzi"

Jak wspomniałem powyżej, monit w tym przypadku działa nieco inaczej. Jest to mieszanka wiadomości pochodzących od użytkownika, a także odpowiedzi, które otrzymujemy od OpenAI. Dzięki temu możemy zadawać pytania, które odnoszą się do poprzednich wiadomości i odpowiedzi.

Nowe API czatu pozwala nam również zdefiniować wiadomość "systemową", która jest pewnego rodzaju ogólną instrukcją dla modelu czatu, aby powiedzieć mu, jaki powinien być jego ogólny cel.

Ponieważ te "wiadomości" muszą z czasem rosnąć, musimy je gdzieś przechowywać. W przypadku tego prostego klonu będziemy po prostu przechowywać wiadomości w sesji. Jako wartość domyślną, umieścimy tam nasz komunikat "system":

Route::post('/', function (Request $request) {
    $messages = $request->session()->get('messages', [
        ['role' => 'system', 'content' => 'You are LaravelGPT - A ChatGPT clone. Answer as concisely as possible.']
    ]);
    
    $messages[] = ['role' => 'user', 'content' => $request->input('message')];
    
    // ...
});

Jak widać, natychmiast dodajemy wiadomość użytkownika do tej tablicy $messages.

Następnie możemy użyć tej tablicy i wykonać żądanie API.

$response = OpenAI::chat()->create([
    'model' => 'gpt-3.5-turbo',
    'messages' => $messages
]);

To da nam odpowiedź na czat OpenAI, którą również chcemy dodać do naszej tablicy wiadomości. Zauważ, że

$messages[] = ['role' => 'assistant', 'content' => $response->choices[0]->message->content];

tym razem dodaliśmy wiadomość z rolą "asystent" do tablicy, aby wskazać, że ta wiadomość pochodzi z interfejsu API, a nie z użytkownika.

Teraz nasza tablica $messages zawiera wszystkie potrzebne wiadomości i możemy przechowywać je z powrotem w sesji i przekierowywać z powrotem.

$request->session()->put('messages', $messages);

return redirect('/');

i... To wszystko! Następnym razem, gdy użytkownik wyśle wiadomość, ponownie wykorzystamy wiadomości z sesji i dołączymy do niej nową wiadomość - tak jak robi to ChatGPT.

Kończenie interfejsu użytkownika

Ponieważ mamy teraz wszystkie wiadomości (te z odpowiedzi OpenAI i od użytkownika) w sesji, wszystko, co musimy zrobić, to przekazać je do widoku i wyświetlić je użytkownikowi.

Aby nie wyświetlać wewnętrznego komunikatu "system", możemy usunąć go z naszej tablicy wiadomości przed przekazaniem go do naszego widoku.

Route::get('/', function () {
    $messages = collect(session('messages', []))->reject(fn ($message) => $message['role'] === 'system');

    return view('welcome', [
        'messages' => $messages
    ]);
});

W widoku po prostu zapętlam teraz wiadomości, nadając im inny kolor tła w zależności od tego, czy pochodzi od użytkownika, czy od asystenta, a następnie użyj parsera Markdown dla treści:

@foreach($messages as $message)
    <div class="flex rounded-lg p-4 @if ($message['role'] === 'assistant') bg-green-200 flex-reverse @else bg-blue-200 @endif ">
        <div class="ml-4">
            <div class="text-lg">
                @if ($message['role'] === 'assistant')
                    <a href="#" class="font-medium text-gray-900">LaravelGPT</a>
                @else
                    <a href="#" class="font-medium text-gray-900">You</a>
                @endif
            </div>
            <div class="mt-1">
                <p class="text-gray-600">
                    {!! \Illuminate\Mail\Markdown::parse($message['content']) !!}
                </p>
            </div>
        </div>
    </div>
@endforeach

I to wszystko, co musisz zrobić, dzięki nowemu interfejsowi API uzupełniania czatu OpenAI, aby samodzielnie zbudować klon ChatGPT. Całkiem oszałamiające, prawda?