Cara Membuat Generator Gambar di React Menggunakan DALL-E API

Kecerdasan buatan terus meningkat dan sekarang dapat membuat gambar yang menakjubkan. Contoh viral baru-baru ini menggambarkan orang terkaya dan paling berpengaruh di dunia dengan pakaian robek, tinggal di lingkungan kumuh. Yang mengesankan tentang gambar ini adalah detail tingkat tinggi yang ditangkap baik pada orang maupun lingkungannya.

Model bahasa seperti DALL-E dan Midjourney mendukung kemampuan menghasilkan gambar ini, mengambil deskripsi tekstual sebagai input dan menghasilkan gambar yang menawan.

Pelajari cara mengintegrasikan DALL-E API OpenAI untuk menghasilkan gambar dalam aplikasi React.

Pembuatan Gambar Menggunakan Model Bahasa DALL-E OpenAI

Bagaimana sebenarnya model bahasa DALL-E menghasilkan gambar? Tanpa menggali terlalu dalam ke dalam kerumitan pembuatan gambar AI, DALL-E pertama-tama menginterpretasikan deskripsi tekstual yang diberikan kepadanya sebagai masukan menggunakan pemrosesan bahasa alami (NLP). Itu kemudian membuat gambar realistis yang sangat cocok dengan deskripsi yang diberikan.

Petunjuk input dapat menyertakan deskripsi tekstual dari seseorang, objek, atau adegan. Selain itu, itu juga dapat mencakup detail seperti warna, bentuk, dan ukuran tertentu. Terlepas dari kerumitan atau kesederhanaan teks input, DALL-E akan menghasilkan gambar yang sangat cocok dengan deskripsi input.

Penting untuk diperhatikan bahwa model bahasa, seperti model lainnya, dilatih pada kumpulan data yang besar dengan jutaan data gambar untuk mempelajari cara mengidentifikasi dan menghasilkan gambar fotorealistik dari yang diberikan input.

Memulai Dengan API DALL-E OpenAI

API DALL-E OpenAI tersedia untuk digunakan sebagai beta publik. Untuk mengintegrasikan API untuk digunakan dalam aplikasi React Anda, Anda memerlukan kunci untuk API OpenAI. Pergilah ke OpenAIdan masuk ke halaman ikhtisar akun Anda untuk mengambil kunci API Anda.

Setelah Anda masuk, klik ikon profil pengguna di bagian kanan atas halaman ikhtisar Anda. Selanjutnya, pilih dan klik Lihat kunci API.

Pada halaman pengaturan API Keys, klik pada Buat Kunci Rahasia Baru tombol, berikan nama untuk kunci API Anda, dan klik Buat Kunci Rahasia untuk menghasilkan kunci API Anda.

Buat Proyek Bereaksi

Jalankan perintah di bawah ini di terminal Anda untuk membuat proyek React baru secara lokal. Catatan, Anda harus menginstal Node.js.

Lihat dua artikel ini untuk mempelajari caranya instal Node.js di Windows Dan cara menginstal Node.js di Ubuntu.

mkdir Bereaksi-proyek 
cd Bereaksi-proyek
npx buat-reaksi-aplikasi-gambar-generator-aplikasi
cd image-generator-app
mulai npm

Atau, alih-alih menggunakan perintah create-react-app, Anda dapat menggunakan Vite untuk menyiapkan proyek React Anda. Vite adalah alat build yang dirancang untuk membuat aplikasi web dengan cepat dan efisien.

Integrasikan API DALL-E OpenAI untuk Menghasilkan Gambar

Setelah aplikasi React Anda aktif dan berjalan, instal pustaka Node.js OpenAI untuk digunakan dalam aplikasi React Anda.

npm instal openai

Selanjutnya, di direktori root folder proyek Anda, buat yang baru .env file untuk menyimpan kunci API Anda.

REACT_APP_OPENAI_API_KEY = "KUNCI API"

Anda dapat menemukan kode proyek ini di sini repositori GitHub.

Buat Komponen Pembuat Gambar

Dalam /src direktori, buat folder baru, beri nama komponen, dan buat file baru di dalamnya bernama ImageGenerator.js. Tambahkan kode di bawah ini ke file ini.

Mulailah dengan mengimpor modul yang diperlukan:

impor'../Aplikasi.css'; 
impor { status penggunaan } dari"reaksi"; 
impor { Konfigurasi, OpenAIApi } dari"buka";

Modul Konfigurasi mengonfigurasi klien API OpenAI untuk penggunaan, sedangkan modul OpenAIApi menyediakan metode untuk berinteraksi dengan API OpenAI. Kedua modul ini memungkinkan untuk mengakses dan menggunakan fitur DALL-E dari aplikasi React.

Selanjutnya, tentukan komponen fungsional dan tambahkan kode berikut ke dalamnya:

fungsiImageGenerator() {
const [prompt, setPrompt] = useState("");
const [hasil, setResult] = useState("");
const [memuat, setLoading] = useState(PALSU);
const [placeholder, setPlaceholder] = useState(
"Cari singa dengan Paint Brushes mengecat lukisan mona lisa..."
 );
const konfigurasi = baru Konfigurasi({
 apiKey: process.env. REACT_APP_OPENAI_API_KEY,
 });

const buka = baru OpenAIApi (konfigurasi);

const generateImage = asinkron () => {
 setPlaceholder(`Cari ${prompt}..`);
 setLoading(BENAR);
mencoba {
const res = menunggu openai.createImage({
 prompt: prompt,
 N: 1,
 ukuran: "512x512",
 });
 setLoading(PALSU);
 setResult (res.data.data[0].url);
 } menangkap (kesalahan) {
 setLoading(PALSU);
menghibur.kesalahan(`Kesalahan menghasilkan gambar: ${error.response.data.error.message}`);
 }
 };

Kode ini mendefinisikan komponen fungsional React yang disebut ImageGenerator. Komponen menggunakan beberapa variabel status untuk mengelola prompt input, hasil output, status pemuatan, dan teks placeholder.

Komponen juga membuat a konfigurasi objek untuk klien OpenAI API, yang menyertakan kunci API yang diambil dari variabel lingkungan.

Asinkron generateImage fungsi akan berjalan ketika pengguna mengklik tombol, meneruskan prompt pengguna.

Kemudian, itu memanggil openai.createImage metode untuk menghasilkan gambar berdasarkan prompt yang diberikan. Metode ini mengembalikan objek respons yang menyertakan URL gambar yang dihasilkan.

Jika panggilan API berhasil, kode memperbarui hasil variabel status dengan URL, dan setel status pemuatan ke PALSU. Jika panggilan API gagal, status pemuatan tetap disetel ke PALSU, tetapi juga mencatat pesan kesalahan ke konsol.

Terakhir, render elemen React JSX yang membentuk komponen pembuat Gambar.

kembali (
"wadah">
 { memuat? (
 <>
Membuat gambar... Mohon Tunggu...</h3>
 </>
 ): (
 <>
Hasilkan Gambar menggunakan Open AI API</h2>


 NamaKelas="masukan aplikasi"
 placeholder={placeholder}
 onChange={(e) => setPrompt (e.target.nilai)}
 baris="10"
 kolom="100"
 />
Hasilkan Gambar</button>
 { hasil.panjang > 0? (
"hasil-gambar" src={hasil} alt="hasil" />
 ): (
 <>
 </>
 )}
 </>
 )}
 </div>
 )
}
eksporbawaan ImageGenerator

Kode komponen ini secara kondisional merender elemen yang berbeda berdasarkan nilai dari memuat variabel negara.

Jika memuat benar, ini menunjukkan pesan pemuatan. Sebaliknya, Jika memuat salah, itu menunjukkan antarmuka utama untuk menghasilkan gambar menggunakan API OpenAI yang terdiri dari textarea yang menangkap permintaan pengguna dan tombol kirim.

Itu hasil variabel negara menyimpan URL gambar yang dihasilkan yang kemudian ditampilkan di browser.

Perbarui Komponen App.js

Tambahkan kode ini ke file App.js Anda:

impor'./App.css';
impor ImageGenerator dari'./component/ImageGenerator';
fungsiAplikasi() {
kembali (

"Aplikasi">
"Tajuk-aplikasi">

 </header>
 </div>
 );
}
eksporbawaan Aplikasi;

Sekarang Anda dapat melanjutkan dan menjalankan server pengembangan untuk memperbarui perubahan dan menavigasi ke http://localhost: 3000 dengan browser Anda untuk menguji fungsionalitas pembuatan gambar.

Untuk mendapatkan hasil terbaik saat menggunakan alat AI untuk menghasilkan gambar, pastikan untuk memberikan prompt mendetail di area teks. Ini berarti mendeskripsikan gambar selengkap mungkin, tanpa meninggalkan detail.

Proses ini disebut Rekayasa Prompt, dan melibatkan penyediaan petunjuk terperinci sehingga model bahasa dapat memberikan hasil terbaik berdasarkan masukan pengguna yang diberikan.

Mengingat lonjakan baru-baru ini dalam perangkat lunak AI yang tersedia di pasar, mengejar karir di Prompt Engineering bisa menjadi peluang yang menguntungkan.

Maksimalkan Kekuatan Model Bahasa dalam Pengembangan Perangkat Lunak

Alat AI yang ditenagai oleh model bahasa besar telah menggemparkan bidang Pengembangan Perangkat Lunak karena fitur dan kemampuannya yang luar biasa.

Alat-alat ini memiliki potensi untuk meningkatkan ekosistem perangkat lunak saat ini dengan memungkinkan pengembang mengintegrasikan fitur-fitur AI yang keren yang meningkatkan penggunaan berbagai produk—memanfaatkan teknologi AI menghadirkan peluang unik untuk membangun perangkat lunak secara inovatif cara.