1.0 Czym jest ChatGPT?

ChatGPT to chatbot oparty na sztucznej inteligencji (AI), stworzony przez OpenAI. Termin "ChatGPT" łączy w sobie słowa "Chat", które nawiązuje do funkcji chatbota w systemie, oraz "GPT", co oznacza Generative Pre-trained Transformer i jest rodzajem dużego modelu językowego (LLM). Podstawowe modele GPT firmy OpenAI, a mianowicie GPT-3.5 i GPT-4, stanowią podstawę dla ChatGPT, który został udoskonalony (metoda uczenia transferowego) pod kątem zastosowań konwersacyjnych wykorzystujących połączenie technik uczenia nadzorowanego i uczenia przez wzmocnienie, co obejmuje uczenie maszynowe, przetwarzanie języka naturalnego oraz sztuczną inteligencję. ChatGPT potrafi rozumieć i generować tekst przypominający ludzki.

W tym artykułe pokażemy, jak stworzyć aplikację MAUI, która korzysta z API OpenAI ChatGPT do odbierania wiadomości, oferowania wyników na podstawie zapytań użytkowników, a następnie eksportowania tych wyników jako pliku PDF do późniejszego wykorzystania za pomocą IronPDF.

1.1 Skonfiguruj konto OpenAI

Aby zarejestrować konto OpenAI, wykonaj następujące czynności:

• Odwiedź oficjalną stronę OpenAI.
• Na stronie głównej witryny znajdź i kliknij przycisk "Zarejestruj się". Spowoduje to przejście do formularza tworzenia konta.
• Wypełnij niezbędne pola formularza rejestracyjnego.
• Kliknij link weryfikacyjny wysłany na zarejestrowany adres e-mail, aby potwierdzić swój adres e-mail.
• Jeśli rejestracja przebiegła pomyślnie, powinieneś uzyskać dostęp do swojego konta OpenAI, wprowadzając dane logowania podane podczas rejestracji.

1.2 Uzyskanie klucza API OpenAI

• Aby uzyskać dostęp do OpenAI, przejdź na stronę internetową i zaloguj się przy użyciu danych swojego konta.

  Wejdź na stronę OpenAI

• Przejdź do sekcji API platformy OpenAI. Następnie przejdź do Ustawienia konta > Wyświetl klucz API, gdzie możesz go znaleźć.

• Teraz możesz utworzyć nowy tajny klucz API.

  Utwórz klucze API

2.0 Pierwsze kroki z aplikacją .NET MAUI

Do tworzenia aplikacji .NET MAUI napisanej w języku C# konieczne jest zainstalowanie programu Visual Studio 2022 oraz .NET Framework 7. Następnie wykonaj kolejne kroki, aby utworzyć i napisać aplikację .NET MAUI.

2.1 Otwórz program Visual Studio

Otwórz program Visual Studio, a następnie wybierz z menu opcję "Utwórz nowy projekt" i wpisz ".NET MAUI" w polu wyszukiwania.

2.2 Wybierz aplikację .NET MAUI

W programie Visual Studio wybierz szablon aplikacji .NET MAUI z listy wyników wyszukiwania. Po wybraniu go nadaj mu odpowiednią nazwę i wybierz lokalizację projektu. Po zakończeniu konfiguracji kliknij "Dalej".

Utwórz nową aplikację .NET MAUI w programie Visual Studio

2.3 Wybierz framework

Wybierz odpowiedni framework; Niemniej jednak zaleca się na przykład wybór najnowszej wersji .NET Framework. Po wybraniu wersji frameworka naciśnij przycisk Utwórz w programie Visual Studio.

Skonfiguruj nowy projekt

W programie Visual Studio 2022 zostanie utworzony nowy projekt .NET MAUI. .NET MAUI domyślnie tworzy prostą aplikację z licznikiem.

Wybór platformy .NET Framework

Modyfikując aplikację .NET MAUI, można zintegrować ChatGPT OpenAI i eksportować wyniki do plików PDF przy użyciu biblioteki IronPDF C# PDF na tej wersji platformy.

2.4 Zainstaluj pakiet OpenAI

Wpisz następujące polecenie w konsoli menedżera pakietów NuGet.

Install-Package OpenAI

To polecenie zainstaluje pakiet OpenAI, który zapewnia dostęp do API niezbędnego do interakcji z ChatGPT przy użyciu języka C#.

2.5 Zainstaluj IronPDF

Wpisz następujące polecenie, aby zainstalować pakiet IronPDF:

Install-Package IronPdf

Powyższe polecenie instaluje IronPDF w projekcie MAUI. IronPDF służy do renderowania treści HTML do plików PDF i jest kluczowym elementem eksportowania danych z aplikacji do dokumentu PDF.

3.0 Czym jest IronPDF?

Dzięki IronPDF, solidnej platformie SDK do przetwarzania plików PDF, programiści mogą szybko tworzyć, odczytywać i edytować dokumenty PDF. Biblioteka IronPDF wykorzystuje silnik Chrome do konwersji HTML na PDF. Wśród wielu komponentów internetowych obsługiwanych przez bibliotekę znajdują się MAUI, Xamarin, Blazor, Unity, aplikacje HoloLens, Windows Forms, HTML, ASPX, Razor HTML, .NET Core, ASP.NET oraz WPF. Programowanie w środowisku Microsoft .NET i .NET Core może być wykorzystywane zarówno w tradycyjnych aplikacjach dla systemu Windows, jak i w aplikacjach internetowych ASP.NET.

Korzystając z HTML5, JavaScript, CSS i obrazów, IronPDF umożliwia tworzenie atrakcyjnych plików PDF z nagłówkiem i stopką. Biblioteka API zawiera solidny konwerter HTML na PDF, który obsługuje pliki PDF, a także samodzielne narzędzie i silnik do konwersji PDF, niezależne od jakichkolwiek zewnętrznych źródeł.

• Użytkownicy mogą generować pliki PDF za pomocą IronPDF z różnych źródeł, w tym plików graficznych, HTML, HTML5, ASPX oraz Razor/MVC View.
• Biblioteka oferuje programy do wyszukiwania tekstu, wyodrębniania tekstu i obrazów ze stron PDF oraz konwertowania stron PDF na obrazy. Oferuje również program do interaktywnego wypełniania i przesyłania formularzy.
• Biblioteka udostępnia również linki jako podstawę publikacji w formacie PDF, a także wykorzystuje agenty użytkownika, serwery proxy, pliki cookie, nagłówki HTTP oraz zmienne formularzy do uwierzytelniania za pomocą formularzy logowania HTML.
• IronPDF akceptuje nazwy użytkowników i hasła w zamian za dostęp do plików PDF chronionych hasłem.

Aby dowiedzieć się więcej o IronPDF, zapoznaj się ze stronami samouczka dotyczącego konwersji HTML do PDF.

4.0 Eksportuj wynik API ChatGPT za pomocą IronPDF

Dodaj poniższy kod do pliku "MauiProgram.cs":

builder.Services.AddChatGpt(options =>
{
    options.UseOpenAI("API key here"); // Replace with your actual OpenAI API key
    options.DefaultModel = OpenAIChatGptModels.Gpt35Turbo; // Set the default model
    options.MessageLimit = 10; // Limit number of messages per session
    options.MessageExpiration = TimeSpan.FromMinutes(5); // Set message expiration time
});

builder.Services.AddChatGpt(options =>
{
    options.UseOpenAI("API key here"); // Replace with your actual OpenAI API key
    options.DefaultModel = OpenAIChatGptModels.Gpt35Turbo; // Set the default model
    options.MessageLimit = 10; // Limit number of messages per session
    options.MessageExpiration = TimeSpan.FromMinutes(5); // Set message expiration time
});

builder.Services.AddChatGpt(Sub(options)
	options.UseOpenAI("API key here") ' Replace with your actual OpenAI API key
	options.DefaultModel = OpenAIChatGptModels.Gpt35Turbo ' Set the default model
	options.MessageLimit = 10 ' Limit number of messages per session
	options.MessageExpiration = TimeSpan.FromMinutes(5) ' Set message expiration time
End Sub)

builder.Services.AddChatGpt(Sub(options)
	options.UseOpenAI("API key here") ' Replace with your actual OpenAI API key
	options.DefaultModel = OpenAIChatGptModels.Gpt35Turbo ' Set the default model
	options.MessageLimit = 10 ' Limit number of messages per session
	options.MessageExpiration = TimeSpan.FromMinutes(5) ' Set message expiration time
End Sub)

Ten fragment kodu rejestruje usługę dla interfejsu API ChatGPT, z której mogą następnie korzystać inne klasy lub strony w aplikacji.

Dodaj poniższy kod na stronie głównej aplikacji w metodzie ładowania strony. Pomaga to uzyskać instancję usługi ChatGPT i zapisać ją w lokalnym obiekcie.

_chatGptClient = Handler.MauiContext.Services.GetService<IChatGptClient>();

_chatGptClient = Handler.MauiContext.Services.GetService<IChatGptClient>();

_chatGptClient = Handler.MauiContext.Services.GetService(Of IChatGptClient)()

_chatGptClient = Handler.MauiContext.Services.GetService(Of IChatGptClient)()

Ten kod pobiera instancję klienta ChatGPT od dostawcy usług, umożliwiając stronie głównej interakcję z API ChatGPT.

Następnie utwórz interfejs użytkownika podobny do tego przedstawionego w poniższym kodzie XAML:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ChatGPT_MauiApp.MainPage"
             BackgroundColor="black">
    <StackLayout>
        <StackLayout Orientation="Horizontal" Spacing="25" Padding="30,0">
            <ScrollView WidthRequest="700" HeightRequest="200" x:Name="scrollView">
                <TableView Intent="Data" WidthRequest="700" x:Name="Table_View" BackgroundColor="DarkSlateGrey">
                    <TableRoot>
                        <!-- TableSection can be populated with dynamic data -->
                    </TableRoot>
                </TableView>
            </ScrollView>
        </StackLayout>
        <StackLayout Padding="30,0">
            <Editor
                x:Name="Userquest"
                Text=""
                HorizontalOptions="Start"
                FontSize="12"
                Placeholder=" Enter your Queries"
                HeightRequest="25" WidthRequest="700" />
        </StackLayout>
        <StackLayout Padding="30,10,10,0">
            <FlexLayout>
                <Button
                    x:Name="Sendquery"
                    Text="Send Query"
                    SemanticProperties.Hint="Click to send query to BOT"
                    Clicked="SendqueryClicked"
                    HorizontalOptions="Center" 
                    BackgroundColor="Green"
                    TextColor="WhiteSmoke" />
                <Button
                    x:Name="Export"
                    Text="Export"
                    SemanticProperties.Hint="Click to export data"
                    Clicked="OnExportClicked"
                    HorizontalOptions="Center" 
                    BackgroundColor="DodgerBlue"
                    TextColor="WhiteSmoke" />
            </FlexLayout>
        </StackLayout>
    </StackLayout>
</ContentPage>

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ChatGPT_MauiApp.MainPage"
             BackgroundColor="black">
    <StackLayout>
        <StackLayout Orientation="Horizontal" Spacing="25" Padding="30,0">
            <ScrollView WidthRequest="700" HeightRequest="200" x:Name="scrollView">
                <TableView Intent="Data" WidthRequest="700" x:Name="Table_View" BackgroundColor="DarkSlateGrey">
                    <TableRoot>
                        <!-- TableSection can be populated with dynamic data -->
                    </TableRoot>
                </TableView>
            </ScrollView>
        </StackLayout>
        <StackLayout Padding="30,0">
            <Editor
                x:Name="Userquest"
                Text=""
                HorizontalOptions="Start"
                FontSize="12"
                Placeholder=" Enter your Queries"
                HeightRequest="25" WidthRequest="700" />
        </StackLayout>
        <StackLayout Padding="30,10,10,0">
            <FlexLayout>
                <Button
                    x:Name="Sendquery"
                    Text="Send Query"
                    SemanticProperties.Hint="Click to send query to BOT"
                    Clicked="SendqueryClicked"
                    HorizontalOptions="Center" 
                    BackgroundColor="Green"
                    TextColor="WhiteSmoke" />
                <Button
                    x:Name="Export"
                    Text="Export"
                    SemanticProperties.Hint="Click to export data"
                    Clicked="OnExportClicked"
                    HorizontalOptions="Center" 
                    BackgroundColor="DodgerBlue"
                    TextColor="WhiteSmoke" />
            </FlexLayout>
        </StackLayout>
    </StackLayout>
</ContentPage>

Powyższy ContentPage definiuje układ UI aplikacji. Użytkownicy mogą wprowadzać zapytania, komunikować się z interfejsem API ChatGPT za pomocą przycisku "Wyślij zapytanie" oraz eksportować wyniki do pliku PDF za pomocą przycisku "Eksportuj". Wyniki są wyświetlane w TableView.

Poniżej znajduje się logika kodu odpowiedzialna za obsługę kliknięć przycisków i eksport danych:

private void OnExportClicked(object sender, EventArgs e)
{
    StringBuilder db = new();

    foreach (var tableSection in Table_View.Root.ToList())
    {
        foreach (var cell in tableSection)
        {
            if (cell is TextCell textCell)
            {
                db.Append("<p style='color:red;text-align:left;'>" + textCell.Text + "</p>");
                db.Append("<p style='color:black;text-align:justify;'>" + textCell.Detail + "</p>");
            }
        }
    }

    // Create and save the PDF
    var renderer = new IronPdf.ChromePdfRenderer();
    var pdf = renderer.RenderHtmlAsPdf(db.ToString());
    pdf.SaveAs("F:\\Download\\Demo.pdf");
}

private async void SendqueryClicked(object sender, EventArgs e)
{
    if (!string.IsNullOrEmpty(Userquest.Text))
    {
        var query = Userquest.Text;
        Userquest.Text = "";
        var tableSection = AddQueryToTable(query);
        ChatGptResponse response = await _chatGptClient.AskAsync(_sessionGuid, query);
        var resp = response.GetMessage();
        AddResponseToTable(tableSection, resp);
    }
}

private TableSection AddQueryToTable(string query)
{
    var textCell = new TextCell
    {
        Text = query,
        TextColor = Colors.Red,
        DetailColor = Colors.WhiteSmoke,
        Detail = ""
    };

    var tableSection = new TableSection { textCell };
    Table_View.Root.Add(tableSection);
    return tableSection;
}

private void AddResponseToTable(TableSection section, string response)
{
    if (section.FirstOrDefault() is TextCell textCell)
    {
        textCell.Detail = response;
    }
}

private void OnExportClicked(object sender, EventArgs e)
{
    StringBuilder db = new();

    foreach (var tableSection in Table_View.Root.ToList())
    {
        foreach (var cell in tableSection)
        {
            if (cell is TextCell textCell)
            {
                db.Append("<p style='color:red;text-align:left;'>" + textCell.Text + "</p>");
                db.Append("<p style='color:black;text-align:justify;'>" + textCell.Detail + "</p>");
            }
        }
    }

    // Create and save the PDF
    var renderer = new IronPdf.ChromePdfRenderer();
    var pdf = renderer.RenderHtmlAsPdf(db.ToString());
    pdf.SaveAs("F:\\Download\\Demo.pdf");
}

private async void SendqueryClicked(object sender, EventArgs e)
{
    if (!string.IsNullOrEmpty(Userquest.Text))
    {
        var query = Userquest.Text;
        Userquest.Text = "";
        var tableSection = AddQueryToTable(query);
        ChatGptResponse response = await _chatGptClient.AskAsync(_sessionGuid, query);
        var resp = response.GetMessage();
        AddResponseToTable(tableSection, resp);
    }
}

private TableSection AddQueryToTable(string query)
{
    var textCell = new TextCell
    {
        Text = query,
        TextColor = Colors.Red,
        DetailColor = Colors.WhiteSmoke,
        Detail = ""
    };

    var tableSection = new TableSection { textCell };
    Table_View.Root.Add(tableSection);
    return tableSection;
}

private void AddResponseToTable(TableSection section, string response)
{
    if (section.FirstOrDefault() is TextCell textCell)
    {
        textCell.Detail = response;
    }
}

Private Sub OnExportClicked(ByVal sender As Object, ByVal e As EventArgs)
	Dim db As New StringBuilder()

	For Each tableSection In Table_View.Root.ToList()
		For Each cell In tableSection
			Dim tempVar As Boolean = TypeOf cell Is TextCell
			Dim textCell As TextCell = If(tempVar, CType(cell, TextCell), Nothing)
			If tempVar Then
				db.Append("<p style='color:red;text-align:left;'>" & textCell.Text & "</p>")
				db.Append("<p style='color:black;text-align:justify;'>" & textCell.Detail & "</p>")
			End If
		Next cell
	Next tableSection

	' Create and save the PDF
	Dim renderer = New IronPdf.ChromePdfRenderer()
	Dim pdf = renderer.RenderHtmlAsPdf(db.ToString())
	pdf.SaveAs("F:\Download\Demo.pdf")
End Sub

Private Async Sub SendqueryClicked(ByVal sender As Object, ByVal e As EventArgs)
	If Not String.IsNullOrEmpty(Userquest.Text) Then
		Dim query = Userquest.Text
		Userquest.Text = ""
		Dim tableSection = AddQueryToTable(query)
		Dim response As ChatGptResponse = Await _chatGptClient.AskAsync(_sessionGuid, query)
		Dim resp = response.GetMessage()
		AddResponseToTable(tableSection, resp)
	End If
End Sub

Private Function AddQueryToTable(ByVal query As String) As TableSection
	Dim textCell As New TextCell With {
		.Text = query,
		.TextColor = Colors.Red,
		.DetailColor = Colors.WhiteSmoke,
		.Detail = ""
	}

	Dim tableSection As New TableSection From {textCell}
	Table_View.Root.Add(tableSection)
	Return tableSection
End Function

Private Sub AddResponseToTable(ByVal section As TableSection, ByVal response As String)
	Dim tempVar As Boolean = TypeOf section.FirstOrDefault() Is TextCell
	Dim textCell As TextCell = If(tempVar, CType(section.FirstOrDefault(), TextCell), Nothing)
	If tempVar Then
		textCell.Detail = response
	End If
End Sub

Private Sub OnExportClicked(ByVal sender As Object, ByVal e As EventArgs)
	Dim db As New StringBuilder()

	For Each tableSection In Table_View.Root.ToList()
		For Each cell In tableSection
			Dim tempVar As Boolean = TypeOf cell Is TextCell
			Dim textCell As TextCell = If(tempVar, CType(cell, TextCell), Nothing)
			If tempVar Then
				db.Append("<p style='color:red;text-align:left;'>" & textCell.Text & "</p>")
				db.Append("<p style='color:black;text-align:justify;'>" & textCell.Detail & "</p>")
			End If
		Next cell
	Next tableSection

	' Create and save the PDF
	Dim renderer = New IronPdf.ChromePdfRenderer()
	Dim pdf = renderer.RenderHtmlAsPdf(db.ToString())
	pdf.SaveAs("F:\Download\Demo.pdf")
End Sub

Private Async Sub SendqueryClicked(ByVal sender As Object, ByVal e As EventArgs)
	If Not String.IsNullOrEmpty(Userquest.Text) Then
		Dim query = Userquest.Text
		Userquest.Text = ""
		Dim tableSection = AddQueryToTable(query)
		Dim response As ChatGptResponse = Await _chatGptClient.AskAsync(_sessionGuid, query)
		Dim resp = response.GetMessage()
		AddResponseToTable(tableSection, resp)
	End If
End Sub

Private Function AddQueryToTable(ByVal query As String) As TableSection
	Dim textCell As New TextCell With {
		.Text = query,
		.TextColor = Colors.Red,
		.DetailColor = Colors.WhiteSmoke,
		.Detail = ""
	}

	Dim tableSection As New TableSection From {textCell}
	Table_View.Root.Add(tableSection)
	Return tableSection
End Function

Private Sub AddResponseToTable(ByVal section As TableSection, ByVal response As String)
	Dim tempVar As Boolean = TypeOf section.FirstOrDefault() Is TextCell
	Dim textCell As TextCell = If(tempVar, CType(section.FirstOrDefault(), TextCell), Nothing)
	If tempVar Then
		textCell.Detail = response
	End If
End Sub

Wyjaśnienie:

• Metoda OnExportClicked tworzy PDF z treści HTML zebranych z UI przy użyciu IronPDF. Wygenerowany plik PDF jest zapisywany w określonej lokalizacji.

• Metoda SendqueryClicked pobiera zapytanie użytkownika, wysyła je do OpenAI API używając _chatGptClient, i wyświetla odpowiedź. Dodaje również zapytanie i odpowiedź do TableView.

• Metody pomocnicze AddQueryToTable i AddResponseToTable pomagają w aktualizowaniu komponentów UI z zapytaniami użytkownika i odpowiedziami chatbota.

Po dodaniu powyższego kodu spróbuj uruchomić swoje rozwiązanie. Wpisz zapytanie i pobierz wynik, klikając przycisk "Wyślij zapytanie". Wyśle zapytanie użytkownika do interfejsu API ChatGPT, pobierze wynik i wyświetli komunikat na ekranie.

Dodaj zapytanie tekstowe do aplikacji

Kliknij przycisk "Eksportuj", aby wyeksportować wyniki do pliku PDF.

Eksportowany plik PDF

Udało nam się stworzyć chatbota przy użyciu ChatGPT i wyeksportować tę rozmowę za pomocą IronPDF do aplikacji MAUI. Korzystając z powyższej koncepcji, można dołączyć obrazy, pliki audio i wideo z API ChatGPT, aby uzyskać dokładniejsze wyniki.

5.0 Podsumowanie

Celem tego artykułu jest stworzenie aplikacji MAUI, która wykorzystuje API OpenAI ChatGPT do odbierania wiadomości, oferowania wyników na podstawie zapytań użytkowników oraz eksportowania tych wyników jako pliku PDF. Aby poprawić jakość sugestii, zachęcamy do eksperymentowania poprzez zmianę pytań. Aby sprawdzić, czy różne modele dają lepsze wyniki, można także eksperymentować z modyfikacją wartości wyliczeniowej ChatGptModels w metodzie AddChatGpt w "MauiProgram.cs".

API ChatGPT to potężny program oparty na sztucznej inteligencji, który pozwala nam dostarczać wyniki na podstawie zapytania użytkownika. Koszt korzystania z API ChatGPT jest obliczany na podstawie liczby wysłanych żądań. IronPDF służy do wysyłania żądań API i eksportowania wyników do plików PDF do wykorzystania w przyszłości, co pozwala uniknąć wielokrotnego wysyłania tych samych żądań API.

Dzięki IronPDF możemy tworzyć pliki PDF za pomocą zaledwie kilku wierszy kodu. Ta aplikacja jest odpowiednia dla początkujących i wymaga jedynie podstawowej wiedzy do korzystania z niej. Żaden inny pakiet nie jest w żaden sposób zależny od IronPDF. Na przykład jest to biblioteka dostępna w jednym pakiecie. Programiści IronPDF mogą wybierać spośród różnych licencji dostosowanych do ich wymagań. Dostępna jest również bezpłatna wersja próbna. Pełne informacje na temat cen i licencji IronPDF można znaleźć na stronie licencyjnej IronPDF.