DALL-E API'si için basit bir ön uç oluşturun ve bugün yapay zeka tarafından oluşturulan içerikle denemeye başlayın.

Yapay zeka sürekli gelişiyor ve artık şaşırtıcı görüntüler yaratabiliyor. Yakın tarihli bir viral örnek, dünyanın en zengin ve en etkili kişilerini yırtık giysiler içinde, gecekondu ortamında yaşarken gösteriyor. Görüntülerde etkileyici olan şey, hem insanlar hem de çevrelerinde yakalanan yüksek düzeyde ayrıntıdır.

DALL-E ve Midjourney gibi dil modelleri, metinsel açıklamaları girdi olarak alarak ve büyüleyici görüntüler oluşturarak bu görüntü oluşturma yeteneklerini güçlendirir.

Bir React uygulamasında görüntüler oluşturmak için OpenAI'nin DALL-E API'sini nasıl entegre edeceğinizi öğrenin.

OpenAI'nin DALL-E Dil Modelini Kullanarak Görüntü Oluşturma

DALL-E dil modeli aslında görüntüleri nasıl oluşturur? DALL-E, yapay zeka görüntü oluşturmanın karmaşıklıklarına çok derinlemesine girmeden önce kendisine beslenen metinsel açıklamaları doğal dil işleme (NLP) kullanarak girdiler olarak yorumlar. Daha sonra, verilen açıklamaya yakından uyan gerçekçi bir görüntü oluşturur.

instagram viewer

Giriş istemleri, bir kişinin, nesnenin veya sahnenin metinsel açıklamalarını içerebilir. Ek olarak, belirli bir renk, şekil ve boyut gibi ayrıntıları da içerebilir. Giriş metninin karmaşıklığı veya basitliği ne olursa olsun, DALL-E, giriş açıklamasıyla yakından eşleşen bir görüntü oluşturacaktır.

Diğer modeller gibi dil modelinin de büyük bir veri kümesi üzerinde eğitildiğini belirtmek önemlidir. verilenlerden fotogerçekçi görüntülerin nasıl tanımlanacağını ve üretileceğini öğrenmek için milyonlarca görüntü verisi ile girişler.

OpenAI'nin DALL-E API'sine Başlarken

OpenAI'nin DALL-E API'si, herkese açık bir beta olarak kullanılabilir. API'yi React uygulamanızda kullanmak üzere entegre etmek için OpenAI'nin API'si için bir anahtara ihtiyacınız olacak. Başını aşmak OpenAIve API anahtarınızı almak için hesabınıza genel bakış sayfanızda oturum açın.

Oturum açtıktan sonra, genel bakış sayfanızın sağ üst kısmındaki kullanıcı profili simgesini tıklayın. Ardından, seçin ve tıklayın API anahtarlarını görüntüle.

API Anahtarları ayarları sayfasında, Yeni Gizli Anahtar Oluştur düğmesini tıklayın, API anahtarınız için bir ad girin ve tıklayın Gizli Anahtar Oluştur API anahtarınızı oluşturmak için.

Bir React Projesi Oluşturun

Yerel olarak yeni bir React projesi oluşturmak için terminalinizde aşağıdaki komutları çalıştırın. Not, Node.js kurulu olmalıdır.

Nasıl yapılacağını öğrenmek için bu iki makaleye bakın. Node.js'yi Windows'a yükleyin Ve Ubuntu'da Node.js nasıl kurulur.

mkdir Tepki projesi 
cd React-project
npx oluştur-tepki-uygulaması görüntü oluşturucu-uygulaması
cd görüntü üreteci uygulaması
Npm başlangıç

Alternatif olarak, create-react-app komutunu kullanmak yerine, React projenizi ayarlamak için Vite. Vite, web uygulamalarını hızlı ve verimli bir şekilde oluşturmak için tasarlanmış bir oluşturma aracıdır.

Görüntüler Oluşturmak için OpenAI'nin DALL-E API'sini Entegre Edin

React uygulamanızı kurup çalıştırdıktan sonra, React uygulamalarınızda kullanmak için OpenAI'nin Node.js kitaplığını yükleyin.

npm kurulumu aç

Ardından, proje klasörünüzün kök dizininde yeni bir tane oluşturun. .env API anahtarınızı tutmak için dosya.

REACT_APP_OPENAI_API_KEY = "API ANAHTARI"

Bu projenin kodunu burada bulabilirsiniz. GitHub deposu.

Bir Görüntü Oluşturucu Bileşeni Oluşturun

İçinde /src dizin, yeni bir klasör oluşturun, adlandırın bileşenlerve içinde adında yeni bir dosya oluşturun. ImageGenerator.js. Bu dosyaya aşağıdaki kodu ekleyin.

Gerekli modülleri içe aktararak başlayın:

içe aktarmak'../Uygulama.css'; 
içe aktarmak { kullanımDevlet } itibaren"tepki"; 
içe aktarmak { Yapılandırma, OpenAIApi } itibaren"açık";

Yapılandırma modülü, OpenAI'nin API istemcisini kullanım için yapılandırırken OpenAIApi modülü, OpenAI'nin API'si ile etkileşim için yöntemler sağlar. Bu iki modül, DALL-E'nin özelliklerine React uygulamasından erişmeyi ve bunları kullanmayı mümkün kılar.

Ardından, işlevsel bir bileşen tanımlayın ve ona aşağıdaki kodu ekleyin:

işlevImageGenerator() {
sabit [soru, setPrompt] = useState("");
sabit [sonuç, setResult] = useState("");
sabit [yükleniyor, yükleniyor] = useState(YANLIŞ);
sabit [yer tutucu, setPlaceholder] = useState(
"Mona Lisa tablosunu boyayan Boya Fırçaları ile aslanı arayın..."
 );


sabit konfigürasyon = yeni Yapılandırma({
 apiKey: process.env. REACT_APP_OPENAI_API_KEY,
 });

sabit açık = yeni OpenAIApi (yapılandırma);

sabit görüntü oluştur = zaman uyumsuz () => {
 yer tutucu ayarla(`Ara ${soru}..`);
 yüklemeyi ayarla(doğru);


denemek {
sabit res = beklemek openai.createImage({
 istem: istem,
 N: 1,
 boyut: "512x512",
 });
 yüklemeyi ayarla(YANLIŞ);
 setResult (res.data.data[0].url);
 } yakalamak (hata) {
 yüklemeyi ayarla(YANLIŞ);
konsol.hata(`Görüntü oluşturulurken hata oluştu: ${hata.response.data.error.message}`);
 }
 };

Bu kod, adı verilen bir React işlevsel bileşenini tanımlar. ImageGenerator. Bileşen, girdi istemini, çıktı sonucunu, yükleme durumunu ve yer tutucu metni yönetmek için birkaç durum değişkeni kullanır.

Bileşen ayrıca bir yapılandırma ortam değişkeninden alınan API anahtarını içeren OpenAI API istemcisi için nesne.

eşzamansız Görüntü oluştur işlev, kullanıcı bir düğmeyi tıklattığında, kullanıcı isteminden geçerek çalışır.

Ardından, openai.createImage verilen komut istemine göre bir görüntü oluşturma yöntemi. Bu yöntem, oluşturulan resim URL'sini içeren bir yanıt nesnesi döndürür.

API çağrısı başarılı olursa kod, sonuç durum değişkeni ve yükleme durumunu şu şekilde ayarlar: YANLIŞ. API çağrısı başarısız olursa, yükleme durumunu yine de olarak ayarlar. YANLIŞ, ancak konsola bir hata mesajı da kaydeder.

Son olarak, Görüntü oluşturucu bileşenini oluşturan React JSX öğelerini işleyin.

geri dönmek (
"konteyner">
 { Yükleniyor? (
 <>
Resim oluşturuluyor... Lütfen Bekleyiniz.../h3>
 </>
 ): (
 <>
Open AI API kullanarak bir Görüntü oluşturun</h2>




 sınıfAdı="uygulama girişi"
 yer tutucu={yer tutucu}
 onChange={(e) => setPrompt (e.target.value)}
 satırlar="10"
 sütunlar="100"
 />




 { sonuç.uzunluk > 0? (
"sonuç resmi" src={sonuç} alt="sonuç" />
 ): (
 <>
 </>
 )}
 </>
 )}
 </div>
 )
}


ihracatvarsayılan ImageGenerator

Bu bileşenin kodu, değerine bağlı olarak koşullu olarak farklı öğeler oluşturur. Yükleniyor durum değişkeni.

Eğer Yükleniyor doğrudur, bir yükleme mesajı gösterir. Tersine, eğer Yükleniyor yanlışsa, kullanıcı istemlerini yakalayan bir metin alanından ve bir gönder düğmesinden oluşan OpenAI API kullanarak bir görüntü oluşturmak için ana arayüzü gösterir.

bu sonuç durum değişkeni, daha sonra tarayıcıda işlenen oluşturulan resim URL'sini tutar.

App.js Bileşenini Güncelleyin

Bu kodu App.js dosyanıza ekleyin:

içe aktarmak'./Uygulama.css';
içe aktarmak ImageGenerator itibaren'./bileşen/ImageGenerator';
işlevUygulama() {
geri dönmek (


"Uygulama">
"Uygulama başlığı">

 </header>
 </div>
 );
}


ihracatvarsayılan Uygulama;

Artık değişiklikleri güncellemek ve şuraya gitmek için geliştirme sunucusunu çalıştırabilirsiniz: http://localhost: 3000 görüntü oluşturma işlevini test etmek için tarayıcınızla.

Bir görüntü oluşturmak için bir AI aracı kullanırken mümkün olan en iyi sonuçları elde etmek için, textarea'da ayrıntılı bir bilgi istemi sağladığınızdan emin olun. Bu, hiçbir ayrıntıyı atlamadan görüntüyü olabildiğince kapsamlı bir şekilde açıklamak anlamına gelir.

Bu süreç İstem Mühendisliği olarak adlandırılır ve dil modelinin sağlanan kullanıcı girdilerine dayalı olarak en iyi sonuçları üretebilmesi için ayrıntılı bilgi istemleri sağlamayı içerir.

Piyasada bulunan AI yazılımındaki son artış göz önüne alındığında, Prompt Engineering'de kariyer peşinde koşmak kazançlı bir fırsat olabilir.

Yazılım Geliştirmede Dil Modellerinin Gücünü En Üst Düzeye Çıkarın

Büyük dil modelleriyle desteklenen AI araçları, inanılmaz özellikleri ve yetenekleri nedeniyle Yazılım Geliştirme alanını fırtına gibi ele geçirdi.

Bu araçlar, geliştiricilerin harika AI özelliklerini entegre etmesine izin vererek mevcut yazılım ekosistemini iyileştirme potansiyeline sahiptir. farklı ürünlerin kullanımını geliştiren yapay zeka teknolojisini kullanmak, yazılımları yenilikçi bir şekilde oluşturmak için benzersiz bir fırsat sunar. yollar.