REACT UI MECHANICS
React ile AI Uygulamaların Geliştirimi — 1
React UI Mekaniklerinde bu blog yazi serisinde AI uygulamalarını ve ChatGPT , Gemini gibi Web ortamlarını nasıl geliştirebileceğimizi analiz edip , bu konuda örnekler geliştirip bunların mantıklarını anlatıyor olacağım .
UI Mekanikleri çok önemsediğim bir konu. Çünkü template veya tasarım bir şekilde kullanıcı ile etkileşime girmesi ve canlı hale gelmesi gerekiyor. İşte bu kısımda UI Mekanikeri dediğimiz temel kavramlar devreye giriyor .
Bundan önceki yazılarımda
- React Temel Mekanikleri
- Hesap Makinesi Mekanikleri
- Admin Tool Mekanikleri
- CRUD işlem Mekanikleri
konuları üzerinde durmuştum. Bu yazımda da AI uygulamaları için ChatView’ ler üzerinde duracağım.
Bunlardan bir tanesi Gemini arayüzü.
Bir diğeride ChatGPT arayüzü.
Bu ekranları incelediğimizde ekranda şu şekilde UI Mekaniklerinin olduğunu görebiliriz.
- New Chat
- Previous Chats List
- ChatView
- Message List
- Input Area , (Text, Picture, Audio Support)
- Help Assistant Text, Desc
- ChatGPT ‘de AI Model Seçimi
Tüm bu konuları OnurDayibasi.dev üzerinden örnekler ile anlatmaya çalışıyor olacağım.
Burada Bazı Kafa Karıştırıcı İşlerden Bahsedeyim;
1. Mesajlaşma Konuları
- Bu kısımda backend Mock’ lamak bazı nedenlerden dolayı zor olacağı için ChatGPT SDK üzerinden anlatıyor olacağım.
- Bunun yerine mesaj iletişimi WebSocket veya hybrid bir yöntem tercih edilebilir
2. Farklı Input Türlerinin Support Edilmesi
- Kullanıcı Metin alanına Text girebildiği gibi girdiyi Audio olarak alıp Speech to Text dönüştürme veya Image vision ile işleme ve kullanma işlemlerini nasıl yapabileceğimiz konusuna değiniyor olacağız
3. UI Etkileşimleri
- Input alanı giriş yaptığımızda o alanın büyüklüğü kelime sayısına göre örneğin 2,3 satıra çıkabilmeli , durma göre da içerisinde scroll olabilmeli
- Aynı şekilde mesaj listesinin bulunduğu kısımda bir asistan, bir kullanıcının mesajları alt alta listelenirken en son yazılan mesaja odaklanmayı yapabilmek gerekiyor
- Kullanıcı mesaj yazdı ve o sırada asistanın cevap vermesi bekleniyor, kullanıcı bir takım uyarılar verilerek metin yazması veya bu metni göndermesi engellenmesi gerekiyor
- Ekranın herhangi bir yerinden düğmelere basılarak da input message gönderilebileceği unutulmamalı, özetle input msg ve send kısımları ekranlardaki bileşenlere çok iyi dağıtılması gerekiyor.
4. Routing
- Örneğin önceden oluşturduğumuz bir chat thread gitmek istiyoruz, bu durumda /chat/threadId ile önceki tarihli konuşmanın tüm bilgilerini fetch edebileceğimiz yapılar oluşturmamız gerekiyor
Özetle sunucu ile iletişim , bazen tüm konuşma tarihçesini çekerken, diğer kısımlarda daha canlı ve karşılıklı etkileşime dayalı olacak.
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.
