Bagikan melalui

Mulai cepat: Menambahkan DALL-E ke aplikasi desktop Windows .NET MAUI Anda

  • Artikel

Dalam mulai cepat ini, kami akan menunjukkan cara mengintegrasikan kemampuan pembuatan gambar DALL-E ke dalam aplikasi desktop Windows .NET MAUI Anda.

Prasyarat

  • Visual Studio 2022 17.8 atau lebih tinggi, dengan beban kerja UI Aplikasi Multi-platform .NET terinstal. Untuk informasi selengkapnya, lihat instalasi.
  • Proyek .NET MAUI fungsional dengan integrasi OpenAI tempat kemampuan ini akan diintegrasikan. Lihat Membuat aplikasi rekomendasi dengan .NET MAUI dan ChatGPT - kami akan menunjukkan cara mengintegrasikan DALL-E ke dalam antarmuka pengguna dari cara ini.
  • Kunci OPENAI API dari dasbor pengembang OpenAI Anda.
  • Paket .NET OpenAI NuGet versi 2.0.0 atau yang lebih baru diinstal di proyek Anda. Versi ini saat ini dalam pra-rilis. Jika Anda telah mengikuti tutorial .NET MAUI ChatGPT, Anda akan menginstal dan mengonfigurasi dependensi ini.

Masalah apa yang akan kita pecahkan?

Anda ingin menambahkan kemampuan pembuatan gambar DALL-E ke aplikasi desktop Windows .NET MAUI Anda untuk memberi pengguna pengalaman interaktif yang kaya. Mereka sudah dapat menggunakan aplikasi untuk menghasilkan rekomendasi berbasis teks, dan Anda ingin menambahkan kemampuan untuk menghasilkan gambar yang memvisualisasikan aktivitas di lokasi yang telah mereka masukkan.

Mengatur variabel lingkungan Anda

Untuk menggunakan OpenAI SDK, Anda harus mengatur variabel lingkungan dengan kunci API Anda. Dalam contoh ini, kita akan menggunakan OPENAI_API_KEY variabel lingkungan. Setelah Anda memiliki kunci API dari dasbor pengembang OpenAI, Anda dapat mengatur variabel lingkungan dari baris perintah sebagai berikut:

setx OPENAI_API_KEY <your-api-key>

Perhatikan bahwa metode ini berfungsi untuk pengembangan di Windows, tetapi Anda harus menggunakan metode yang lebih aman untuk aplikasi produksi dan untuk dukungan seluler. Misalnya, Anda dapat menyimpan kunci API di brankas kunci aman yang dapat diakses layanan jarak jauh atas nama aplikasi Anda. Lihat Praktik terbaik untuk keamanan kunci OpenAI untuk informasi selengkapnya.

Instal dan inisialisasi pustaka OpenAI untuk .NET

Di bagian ini, kita akan menginstal SDK ke dalam proyek .NET MAUI dan menginisialisasinya dengan kunci OPENAI API Anda.

  1. Jika Anda belum menginstal OpenAI paket NuGet, Anda dapat melakukannya dengan menjalankan dotnet add package OpenAI -IncludePrerelease dari jendela terminal Visual Studio.

  2. Setelah diinstal, Anda dapat menginisialisasi OpenAIClient instans dari SDK dengan kunci OPENAI API Anda sebagai MainPage.xaml.cs berikut:

    private OpenAIClient _chatGptClient;

public MainPage()
{
    InitializeComponent();
    this.Loaded += MainPage_Loaded;
}

private void MainPage_Loaded(object sender, EventArgs e)
{
    var openAiKey = Environment.GetEnvironmentVariable("OPENAI_API_KEY");

    _chatGptClient = new(openAiKey);
}

Mengubah UI aplikasi Anda

Selanjutnya, kita akan memodifikasi antarmuka pengguna untuk menyertakan Image kontrol yang menampilkan gambar yang dihasilkan di bawah teks rekomendasi.

  1. Jika Anda memulai dengan proyek baru, salin XAML untuk MainPage.xaml dari tutorial Buat aplikasi rekomendasi dengan .NET MAUI dan ChatGPT .

  2. StackLayout Tambahkan kontrol yang berisi Label dan CheckBox kontrol ke MainPage.xaml bawah LocationEntry kontrol untuk memungkinkan pengguna memilih apakah akan menghasilkan gambar:

    ...
<Entry
    x:Name="LocationEntry"
    Placeholder="Enter your location"
    SemanticProperties.Hint="Enter the location for recommendations"
    HorizontalOptions="Center"/>

<!-- Add this markup -->
<StackLayout Orientation="Horizontal"
                HorizontalOptions="Center">
    <Label Text="Generate image" VerticalOptions="Center"/>
    <CheckBox x:Name="IncludeImageChk" VerticalOptions="Center"/>
</StackLayout>
...

  3. Image Tambahkan kontrol di SmallLabel bawah kontrol untuk menampilkan gambar yang dihasilkan:

    ...
    <Image x:Name="GeneratedImage"
           WidthRequest="256"
           HeightRequest="256"
           HorizontalOptions="Center"/>
</VerticalStackLayout>

Menerapkan pembuatan gambar DALL-E

Di bagian ini, kita akan menambahkan metode untuk menangani pembuatan gambar dan memanggilnya dari metode yang ada GetRecommendationAsync untuk menampilkan gambar yang dihasilkan.

  1. Jika Anda memulai dengan proyek baru, pastikan kode MainPage.xaml.cs Anda sesuai dengan kode dari tutorial Buat aplikasi rekomendasi dengan .NET MAUI dan ChatGPT .

  2. Tambahkan metode bernama GetImageAsync untuk menangani pembuatan gambar. Metode baru akan memanggil OpenAI API untuk menghasilkan gambar berdasarkan perintah yang akan kita buat di langkah berikutnya. Ini mengembalikan ImageSource objek yang digunakan untuk menampilkan gambar di UI:

    public async Task<ImageSource> GetImageAsync(string prompt)
{
    // Use the DALL-E 3 model for image generation.
    ImageClient imageClient = _chatGptClient.GetImageClient("dall-e-3");

    // Generate an image based on the prompt with a 1024x1024 resolution, the default for DALL-E 3.
    ClientResult<GeneratedImage> response = await imageClient.GenerateImageAsync(prompt, 
        new ImageGenerationOptions
        {
            Size = GeneratedImageSize.W1024xH1024,
            ResponseFormat = GeneratedImageFormat.Uri
        });

    // Image generation responses provide URLs you can use to retrieve requested image(s).
    Uri imageUri = response.Value.ImageUri;

    return ImageSource.FromUri(imageUri);
}

  3. Tambahkan direktif menggunakan untuk kelas pembuatan gambar di bagian atas file:

    using OpenAI.Images;

  4. Tambahkan kode berikut ke akhir GetRecommendationAsync metode untuk memanggil GetImageAsync metode secara kondisional dan menampilkan gambar yang dihasilkan:

    if (IncludeImageChk.IsChecked)
{
    var imagePrompt = $"Show some fun things to do in {LocationEntry.Text} when visiting a {recommendationType}.";
    GeneratedImage.Source = await GetImageAsync(imagePrompt);
}

    String imagePrompt dibuat berdasarkan input lokasi pengguna dan jenis rekomendasi yang dipilih.

Jalankan dan uji

Jalankan aplikasi Anda, masukkan lokasi yang valid, dan klik salah satu tombol rekomendasi. Anda seharusnya melihat sesuatu seperti berikut:

Demo pembuatan gambar

Bagaimana kita memecahkan masalah?

Kami menambahkan kemampuan pembuatan gambar DALL-E ke aplikasi desktop Windows .NET MAUI kami. Pengguna sekarang dapat menghasilkan gambar berdasarkan lokasi yang mereka masukkan dan jenis rekomendasi yang mereka pilih. Ini memberikan pengalaman interaktif yang kaya bagi pengguna dan meningkatkan fungsionalitas aplikasi.

Membersihkan sumber daya

Penting untuk memastikan akun OpenAI Anda aman. Jika Anda tidak berencana menggunakan kunci OPENAI API untuk proyek lain, Anda harus menghapusnya dari dasbor pengembang OpenAI Anda. Anda juga harus menetapkan batas pengeluaran yang wajar pada akun OpenAI Anda untuk menghindari biaya tak terduga. Anda dapat memeriksa penggunaan dan pengeluaran Anda saat ini di dasbor OpenAI di halaman Penggunaan .

Konten terkait