Neden?
Kaplumbağa deden
Ciddi ol la biraz
Ya chatgpt vardı bende zaten. Mayıs sonu gibi almıştım, bu zaman diliminde almam ne için aldığımı yeterince açıklıyor zaten :):):):):):):):)öhöhmöhmöhmöhmö Öyle 1 hafta kullandıktan sonra işim bitince böyle bir şey deneyeyim dedim. Açıkcası çok da bir beklentim yoktu ama kendi kem küm javascript bilgimi ve araştırmamı da üstüne koyunca şaşırtıcı şekilde kullanılabilir bir ürün ortaya çıktı.
Niye gif picker yapıyosun
Çünkü Discord’da gif atmayı seviyorum bazen güzel oturuyor yerine göre.
Fakat sorun şuydu ki, favoriler’de 250’ye yakın gif vardı ve atacağım gifi discordun lanet gif seçicisinde bulana kadar chatteki konu geçmiş oluyordu, yani gifin oturması için yeri ile beraber zamanı da önemli…
Boğuştuğum arayüz de şöyle bişey işte(ama bu liste kaydırdıkça bitmiyor kaydırdıkça bitmiyor, bir arama seçeneğin yok, ve gifler sadece kaydırdıkça yükleniyor. dolayısıyla yavaş yavaş kaydırman gerekiyor hepsine bakabilmen için)
bunun üzerine benden fikir çıkar:
Siklenmeyince iş başa düştü dedim. Sonra tam olarak kodlama beceremediğimi hatırladım. Sonra chatgpt’ye 390tl verdiğim aklıma geldi. (dolar 19 buçuk liraydı erken aldım.) Dedim ki ben buna yaptırırım.. Yaptırdım da abi ama sonradan aklıma geldi bunu yazmak…
Veee chatgpt’ye site yaptırmak başlıklı twitter threadı başlar… (haziran 15)
İşte o meşhur thread…
2 gündür chatgpt4 kullanarak şunun üzerinde çalışıyordum; https://pcislocked.net/gif bu sitede istediğim fonksiyonlar şu şekilde idi;
1) dark theme (tabii ki de aq, default dark theme. sağ üstteki tuşla istenirse geçiş.) son 6 saat içinde yapmıştım ama yapılı hali çöpe gitti. detayını anlatıcam.
2) nsfw gifleri ana sayfada direkt suratınıza vurmak yerine blurlama özelliği. görmek istiyorsanız sağ üstteki show nsfw tuşunu açıp görüyorsunuz. şu anda blurlama kısmı var ama yarım yamalak çalışıyor tuş, hepsini blurluyor falan.
3) ekran genişliğine göre sıralıyor genelde 2-3 sütun oluyor desktopta mobilde de tek sütun aşağı doğru.
4) giflerin hepsi başlıklı ve açıklamalı etiketli olacak (bi 50 tane gifi etiketledim test için yeterli diyip). sitedeki arama motoru ile aranabilecek.
5) bütün gifleri sistem aynı anda yüklemeyecek ki 2gb download yapıp ananızı sikmesin. ilk aşamada sadece gösterilen 15 gifi göster ekranda şeklinde yaptım ama bu bile 70-100mb kullanıyor ilk yüklemede, ileride jpg thumbnail + fareyle gelince oynat tarzı bişey düşünüyorum
6) 15 giften fazlasını yüklemek için load more tuşuna basınca 15 tane daha yüklüyor. götü yiyen tümünü yükleye basıp pcyi sikebilir. düzgün çalışan halini son 6 saatte yapmıştım.
7) en önemli fonksiyon ise linki kopyala tuşu. gifi seçtikten sonra discorda atmak için tıklayınca linki alacaksınız gidip dcye ataibleceksiniz.
8) üstte geri tuşu ve belirttiğim nsfw ve dark theme tuşları altta da iletişm vesaire olacak, basit bu, bunlar var zaten.
9) giflerin veri tabanı basit bir json dosyası yaptım. bu dosyaya veri girmek için bir arayüzü ilk gün içinde pythondan bitirdim chatgpt ile. şöyle gözüküyor ve yeterli gayet bence internal use için. listeden entry seçtikten sonra gife göre alanları doldurup kaydediyorsun.
şu arayüzün bile içinde bir sürü detay var aslında ilk günde bitmiş olması bayağı çılgınca. üstelik ilk günde diğer biten şeyler;
json dosyasının yapısı
discorddaki eski gif kanalından giflerin linklerini çekip metne kaydeden bir python scripti
sonrasında ben bu eski gifleri yeni kanala attım. başka bir script ise bu kanala atılan giflerin discordcdn linklerini database’a(yoksa) otomatik ekliyor.
yapıldı bitti yazdığım ne varsa ilk günde yapıldı sayabiliriz. bugün ikinci günün sonu ve ilerlemem sıfır. çünkü chatgpt ilk gün ne kadar performanslı ve süper iyi kod yazdıysa nedense bugün o kadar kötü ve saçma sapan hatalar yapmaya başladı aq
çok detayına girmicem en son sikerim dedim ve en son çalışan kod sürümüne döndürdüm, o da öğleden sonra 4 civarı falan olan hali ve şu anda da sitede o var. dolayısıyla son 6 saatte neye uğraştıysam yarrama gitti. valo oynasam allaha sövüp bronza düşsem daha faydalıydı aq
şu haliyle bile gayet işimi karşılar bu arada. nsfw toggle bana lazım değil, giflerin bir anda yüklenmesi de dert değil çünkü zaten bir kere yükleniyor ve tarayıcı önbellekte tuttuğu sürece sorun yok vesaire vesaire. o yüzden bu haliyle de bırakabilirim
amacım https://7tv.app/emotes (resim 1) sayfasına benzer ama biraz da tipi instagrama çekmiş pratik bir galeri sayfası oluşturmak böylece discordun lanet favoriler sayfasında (resim 2) aradığım gifi bulmak için 35 saat kaydırmam gerekmez.
dert aramışım gibi gelebilir ama 246 tane favori gif sadece eski arşivden çıkanlar.
üçüncü günde devam ederim buraya yazmaya. bir yandan siteyi boş yapma köşesine çevirince başlangıçta koyacak içerik çıkartmak için yazıyorum buraya, twitter sikimde oldugundan degil.
17 haziran;
üşendim
18 haziran;
devam ettim eklediklerim:
- üstte yapışıp kalan başlık(header)
- nsfw tuşunu toggle yerine her gife uyarı olarak yaptım ama koymadım siteye bitmedi daha
- copy link tuşunun animasyonunu tekrar yaptım
- siteyı yarı türkçe yarı ingilizce durumdan kurtarmak için çoklu dil desteği yapacaktım onu da kaldırdım site türkgilizce olacak direkt
- dark theme finalized
- color schemes kinda finalized
ayrıca hazır chatgptye sayfa yaptırıyorken ana sayfayı da yeniledim zaten blogu kurunca gidecek diye yine basit bişey oldu (thread dışı dipnot: blog kurunca gittiği için bir mahiyeti kalmadı zaten)
mobil uyumluluğu başından beri vardı btw bakınız light theme + mobil emulated:
eklenecek şeyler
- preload
- web previews over cloudflare not discord
- fix nsfw
- tarayıcı içi local storage ile şunlar istemcide tutulacak bana gönderilmeyecek
- favori gifler
- son kullanılan gifler
- dark/light toggle son konumu
- son 5 arama geçmişi
motorun altında tuşlar olcak favoriler ve sonra 6-7 tane önden benim sectigim kategori. fiiltre tuşları bunlar. filtre yokken default sıra son kullanılanlar sırası, kullanılan yoksa database sırası. bunu da random olarak degistiricem
thread dışı dipnot: bahsettiğim şey alttaki tuşçuklar gibi ama tıklayınca searcha yazıyor direkt:
- arama önerileri(yazdıkça çıkan)
- arama motoru hızlandırılacak
bu arada söylemeyi unuttum her gif modülünün arkasına ufak renk de ekledim böyle kart kart gözüküyolar böylece bence en iyi değişiklik ama yazmayı unuttum
ekleyip de ekledigimi unuttugum seyler:
- çalışan dark theme tuşu
- transparan giflerin arkasına ızgara
- copy link tuşuna animasyon
- arama kutusuna yazı ekledim + kutuyu ortaladım
- gif bluru taşıyodu fixed
- arama kutusu bazen yazılıp silindikten sonra bütün gifler yükleniyodu
—thread sonu—
Thread ile alakalı bazı ek notlar:
- Bu bahsettiğim editor.py tek bir python dosyasından oluşuyor, indirmek için buraya tıklayıp inceleyebilirsiniz.
- Threadın ilk kısmı yazılırken bu saydığım özelliklerden bitmiş olanlar;
- dark theme
- nsfw blur(gösterme tuşunu da başta yapmıştım ama final sürümde blur kaldırmayı tamamen kapatma kararı aldım)
- responsive layout
- arama motoru ve gifi etiketleme
- giflerin hepsini yüklememe sistemi yarım yamalak vardı, o haliyle prodda şuan
- load more tuşu da aynı şekilde
- linki kopyala tuşu da yapılmıştı kolay
- header ve footer da kolaydı zaten
- bu veri tabanı olayı ilk 2 günün birini tek başına yedi zaten. başta mariadb falan düşündüm ama sonra gereksiz yere kanser olmak istemedim ve ayrıca serverless yapmak varken niye kanser olayım ki… database = basit bir json dosyası. hatta buyrun.
- bu 1 günü yiyen şey js dosyası veya layout olmadı, gifleri yapay zekaya falan girdirmedim. fakat ss’de gördüğünüz gui’yi python ile tkinter kullanarak yaptırdım. çok da üstüne eğilmedim açıkcası, baktım guide gifler oynamıyor, ben de onla uğraşmak yerine alta gidip open in irfanview tuşu koydum. basit düşünmek lazım.
- Bu kadar özellik saydım ettim ama şu anki prod halinde ÇALIŞAN özellikler;
- Dark theme (tuşlu, browserdan tercih çekme yok, default dark)
- Hepsini yüklememe
- Load more tuşu
- Load all tuşu
- nsfw bluru
- blur taşması gizlendi
- header/footer(headerda geri tuşu darkmode toggleu footerda status linki vs)
- arama kutusu
- kutu ortada
- yazınca anında aramaya başlıyor
- responsive tasarım(ekran genişliğine göre sütun sayısı, giflerin her birinin genişliği limitli, vesaire)
- gifler transparan ise arkalarında ızgara var
- giflerin başlığı ve açıklaması var
- linki kopyala tuşu
- animasyonlu hawli bişe basınca tick oluyo falan böyle
- database yapıldı zaten
- editor.py yapıldı zaten
- Son halinde ÇALIŞMAYAN özellikler;
- preload ekranı(ve bir ihtimal mobil veri uyarısı falan da koyabilirdim oraya)
- nsfw blurunu kaldırma(vardı sonra ben bozdum)
- load more tuşunda animasyon ve yüklenene kadar gif modallarını ekrana çıkartmama türevi şeyler
- gifleri cloudflare üzerinden servis etme(siteye girdiğinizde discordcdn’den giflerin sıkıştırılmamış bir versiyonunu çekiyor
- arama önerileri(pre-defined olacaktı)
- arama etiketleri(basit bir algoritma ile en çok geçen etiketleri gösterecekti, örnek kurtlar vadisi)
- adam akıllı bir gif caching sistemi
- local storage kullanacağı hayal edilen hiç bir özellik
- arama geçmişi
- favoriler sistemi
- son kullanılan(linki kopyalanan) gifleri önce gösterme
- dark/light theme hatırlama
- dil tercihin hatırlama
- hem frontend hem de database’da çoklu dil desteği(türkçe ve ingilizce)
- ayrıca renk şemaları o kadar consistent değil hala ama olsun.
- ayrıca aramaya bişey yazıp sildikten sonra default 20 yerine 40 gifin sıralanması bugu. bunu çözmüştüm sonra geri geldi lanet bir bug neden bilmiyorum.
- ayrıca çoğu gifi hala etiketlemedim ama bu yazıyı attıktan sonra halledecem muhtemelen
- Threadda eklememişim, bu python aracını yaptırırken kod yazmadıysam da kod yazacağım kadar prompt yazdım. Paylaşmak isterdim ama o kadar çok şey var ki yazının yarısı prompt oluyor o yüzden geri sildim.
Kapanış
Niye bu kadar uzattın işsiz misin diye soracaklar olabilir. Ben de kendime sordum. Evet işim gücüm yok. Güzel bir deney oldu yazmak istedim kenarda dursun. Çok şeyapmayın. pcislocked ismini 2013’ten beri tanıyanlar zaten işsizliğin işin doğası olduğunu iyi bilir.
Programlama bilgim genel olarak pythonda orta seviye diyebilirim. Sonuçta discordda çalışan botun kodunun tamamını elle yazdım, bizim zamanımızda bu çet gibiti falan yoktu yigenim. Dolayısıyla belki editor.py’ı kendim de yazabilirdim, ama her ne kadar az biraz javascriptin yapısını bilsem de mantığını %15 falan biliyorum o yüzden chatgpt olmasa bu gif frontendi yapabilir miydim, muhtemelen yapamazdım.
ChatGPT yardımı olmasaydı da bir şekilde bir alternatif üretirdim bu soruna ama şu andaki sayfa kadar estetik olmazdı muhtemelen. Asıl alma sebebim için de buna benzer cümleler kuruyorum aslında, chatgpt olmasa da o dersi ben geçerim kanka biliyon mu hesabı..
Ama bu tarz yapay zeka programlarının tamamının olayı bu zaten, bazı popüler yayımlardaki gibi bizi işimizden kovmak veya dünyayı ele geçirmek falan değil yapılmış olma amaçları. Bunların hepsi bir çeşit araç. Çekiç kendi başına çivi çakamıyorsa bu da tek başına şimdilik bir sike yaramıyor. Ama kullanabildiğimiz zaman güzel şeyler yapıyoruz buradaki gibi.
Diyeceklerim bu kadar.
Ayrıca chatgpt plus almayın. aldığınız zaman gpt3 çok kötü geliyor gözünüze bu sefer hiç kullanasınız gelmiyor. zaten kur falan da uçtu artık nah alırsınız…