Streamlit na polowaniu razem z FastAPI

Wprowadzenie

W tym poradniku nauczysz się, jak stworzyć asystenta czatu AI, wykorzystując Streamlit jako frontend i FastAPI jako backend. Asystent będzie posiadał funkcję krótkotrwałej pamięci, umożliwiając użytkownikom zadawanie pytań i otrzymywanie odpowiedzi od AI w czasie rzeczywistym (strumieniowo).

W tym przewodniku omówimy następujące tematy:

1. Konfiguracja środowiska

2. Budowanie frontendu

3. Tworzenie backendu

4. Integracja frontendu z backendem

5. Obsługa strumieniowych odpowiedzi

Może to wyglądać na skomplikowane, ale obiecuję, że jest łatwiejsze, niż się wydaje. Zaczynajmy!

Wprowadzimy następujące tematy:

• Streamlit na polowaniu razem z FastAPI

  • Wprowadzenie

  • Konfiguracja środowiska

  • Budowa frontendu

    • Krok 1: Importowanie bibliotek i ładowanie zmienny …

    • Krok 2: Konfiguracja strony Streamlit i tytułu

    • Krok 3: Definicja funkcji do pobierania odpowiedzi …

    • Krok 4: Inicjalizacja historii czatu w stanie sesj …

    • Krok 5: Wyświetlanie historii czatu

    • Krok 6: Obsługa wprowadzania użytkownika i wyświet …

  • Tworzenie backendu

    • Krok 1: Importowanie bibliotek i ładowanie zmienny …

    • Krok 2: Inicjalizacja aplikacji FastAPI

    • Krok 3: Definicja modeli zapytania i odpowiedzi

    • Krok 4: Inicjalizacja klienta OpenAI

    • Krok 5: Definicja endpointu do zadawania pytań

  • Integracja frontendu z backendem

    • Krok 1: Uruchomienie serwera FastAPI

    • Krok 2: Uruchomienie aplikacji Streamlit

  • Podsumowanie

  • Kod źródłowy (dostępny tylko dla zalogowanych)

Konfiguracja środowiska

Zanim zaczniemy kodować, skonfigurujmy nasze środowisko. Upewnij się, że masz zainstalowany Python, a następnie zainstaluj niezbędne pakiety:

Następnie utwórz plik .env w głównym katalogu projektu, aby przechowywać zmienne środowiskowe, takie jak klucz API OpenAI.

Budowa frontendu

Nasz frontend zostanie zbudowany za pomocą Streamlit, frameworka, który pozwala tworzyć aplikacje internetowe za pomocą minimalnego kodu.

Krok 1: Importowanie bibliotek i ładowanie zmiennych środowiskowych

Wyjaśnienie:

• Importujemy niezbędne biblioteki: streamlit do tworzenia interfejsu webowego, requests do wysyłania zapytań HTTP, dotenv do ładowania zmiennych środowiskowych oraz json do obsługi danych w formacie JSON.

• Ładujemy zmienne środowiskowe z pliku .env.

Krok 2: Konfiguracja strony Streamlit i tytułu

Wyjaśnienie:

• Konfigurujemy stronę Streamlit, ustawiając tytuł i ikonę strony.

• Wyświetlamy tytuł aplikacji webowej na "AI_Fresh Assistant".

Krok 3: Definicja funkcji do pobierania odpowiedzi z backendu

Wyjaśnienie:

• Definiujemy funkcję get_response, która przyjmuje zapytanie użytkownika i historię czatu jako argumenty.

• Wysyłamy zapytanie POST do serwera backendowego z zapytaniem użytkownika i historią czatu.

• Jeśli odpowiedź ma status 200 (OK), strumieniowo przetwarzamy odpowiedź i zwracamy każdą linię osobno.

• Jeśli serwer zwróci błąd, zwracamy kod statusu błędu.

Krok 4: Inicjalizacja historii czatu w stanie sesji

Wyjaśnienie:

• Inicjalizujemy historię czatu w stanie sesji, jeśli jeszcze nie istnieje. st.session_state przechowuje dane, które trwają przez całą sesję użytkownika.

Krok 5: Wyświetlanie historii czatu

Wyjaśnienie:

• Iterujemy przez historię czatu i wyświetlamy każdą wiadomość w zależności od tego, czy została wysłana przez AI, czy użytkownika. st.chat_message umożliwia tworzenie wiadomości w stylu czatu.

Krok 6: Obsługa wprowadzania użytkownika i wyświetlanie odpowiedzi

Wyjaśnienie:

• Pobieramy wprowadzenie użytkownika i dodajemy je do historii czatu.

• Wyświetlamy wiadomość użytkownika w czacie.

• Wysyłamy wiadomość użytkownika do backendu i strumieniowo wyświetlamy odpowiedź AI, aktualizując historię czatu.

Tworzenie backendu

Nasz backend zostanie zaimplementowany za pomocą FastAPI, nowoczesnego, szybkiego frameworka do tworzenia API.

Krok 1: Importowanie bibliotek i ładowanie zmiennych środowiskowych

Wyjaśnienie:

• Importujemy niezbędne biblioteki: os do zmiennych środowiskowych, json do obsługi danych JSON, FastAPI do tworzenia serwera webowego, StreamingResponse do strumieniowego przesyłania odpowiedzi, pydantic do walidacji danych oraz OpenAI do interakcji z API OpenAI.

• Ładujemy zmienne środowiskowe z pliku .env.

Krok 2: Inicjalizacja aplikacji FastAPI

Wyjaśnienie:

• Inicjalizujemy aplikację FastAPI, co pozwala nam na tworzenie endpointów do obsługi zapytań HTTP.

Krok 3: Definicja modeli zapytania i odpowiedzi

Wyjaśnienie:

Definiujemy modele Pydantic do walidacji danych. QuestionRequest zawiera pytanie użytkownika i historię czatu, a AnswerResponse zawiera odpowiedź AI.

Na frontendzie używamy zmiennych chat_history i question, które przesyłają pytanie wraz z całą historią rozmowy do API. Historia rozmowy jest przechowywana po stronie frontendu.

Krok 4: Inicjalizacja klienta OpenAI

Wyjaśnienie:

• Inicjalizujemy klienta OpenAI za pomocą klucza API ze zmiennych środowiskowych. Klient ten pozwala nam na interakcję z API OpenAI.

Krok 5: Definicja endpointu do zadawania pytań

Wyjaśnienie:

• Definiujemy endpoint /ask/, który akceptuje zapytanie POST z pytaniem użytkownika i historią czatu.

• Tworzymy kontekst dla asystenta AI z określonymi zasadami i historią czatu.

• Używamy API OpenAI do uzyskania odpowiedzi od asystenta AI.

• Strumieniowo przesyłamy odpowiedź do frontend, jeśli strumieniowanie jest włączone, w przeciwnym razie zwracamy pełną odpowiedź.

• Jeżeli chcesz sprawdzić, jak działa czat bez streamingu, to zmień streaming z True na False

Integracja frontendu z backendem

Krok 1: Uruchomienie serwera FastAPI

Uruchom serwer FastAPI za pomocą następującego polecenia:

Wyjaśnienie:

• To polecenie uruchamia serwer FastAPI i włącza automatyczne przeładowywanie dla środowiska deweloperskiego.

Krok 2: Uruchomienie aplikacji Streamlit

Uruchom aplikację Streamlit za pomocą następującego polecenia:

Wyjaśnienie:

• To polecenie uruchamia aplikację Streamlit, która otworzy się automatycznie w przeglądarce

Podsumowanie

W tym tutorialu nauczyliśmy się, jak stworzyć asystenta czatu AI za pomocą Streamlit na frontendzie i FastAPI na backendzie, implementując funkcję zapamiętywania rozmowy oraz funkcję streamowania odpowiedzi, która ulepsza doświadczenia użytkownika. Omówiliśmy konfigurację środowiska, budowanie frontendu, tworzenie backendu oraz integrację obu komponentów. Postępując zgodnie z tymi krokami, możesz stworzyć potężnego asystenta AI, który może obsługiwać zapytania użytkowników i dostarczać inteligentne odpowiedzi.