Genetik Algoritma ile Elde Edilen Uyumlu Renklerin Web Şablonları Üzerinde Gerçeklenmesi Şerif Okumuş Melih Orhan Bilgisayar Mühendisliği Bölümü, Süleyman Demirel Üniversitesi, Isparta {serifokumus,melihorhan}@yahoo.com.tr Abstract - Bu tez çalışmasında, yapay zekânın güçlü tekniklerinden olan genetik algoritma yardımıyla, web sayfalarındaki renk uyumluluk probleminin çözümü üzerinde durulmuştur. W3C standartlarında elde edilen uyumlu renkler, web tabanlı yazılımlar yardımıyla web şablonları (template) üzerinde test edilmiştir. Problemin farklı boyutları için, çözüm başarısı değişik parametre değerleri kullanılarak ölçülmüştür. Problemin çıkan sonuçlarının daha iyi görülebilmesini sağlayacak şekilde web yardımıyla görselleştirme aracı geliştirilmiştir. Geliştirilen bu araç yardımıyla web sayfalarında değişik genetik algoritma parametreleri kullanılarak uyumlu renkler elde edilebilmekte ve sitilleri önceden belirlenebilen web şablonları üzerinde uyumlu renkler test edilebilmektedir. Anahtar Kelimeler: - Renk; renk uyumluluk; genetik algoritma; web; web şablonları I. GİRİŞ Web sayfa tasarımı, firmanın kurumsal kimliğinin en güzel bir biçimde ulusal ve uluslararası ağ ortamında tanıtımı ve dışa açılan en önemli pencerelerinden bir tanesidir. Web tasarım, işitsel ve görsel öğeler içeren web sayfalarıdır. Web sayfasının tasarımında en önemli unsurlarından biri renk kullanımıdır. Renk, nerdeyse bir sitenin başarısını tanımlamada içerik ve gezinti kadar önemlidir ve tasarımın etkili bir bileşenidir. Renk, siteye sadece görsel bir çekicilik katmaz, aynı zamanda hedef kitleye gönderdiği mesajdan ötürü de önemlidir. Yapay zekâ günümüzde çoğu yazılımda önemli bir işlevi yerine getirmektedir. En küçük yazılımda bile çok basitte olsa bir yapay zekâ tekniği kullanılmaktadır. Bu tekniklerin bazıları yıllardır var olan teknikler olmasına rağmen bazıları da yeni sayılabilir. Bu tezin kapsamında web sayfalarında önemli bir problem olan renk uyumsuzluğu genetik algoritma yardımıyla çözülmektedir. Farklı parametre ve teknikler yardımıyla çözümlerin nasıl farklılaştığı incelenmektedir. Üretilen çözümler web 2.0 yardımıyla HTML şablon üzerinde W3C standartları ile test edilmektedir. Problem olarak web sayfaları için arka plan ve yazı rengi arasında uyumsuzluk ele alınmaktadır. Bu problemin çözümünde interaktif optimizasyon teknikleri kullanılması amaçlandı. Bu nedenle çalışmada yazı rengi ile arka plan renginin seçilmesi genetik algoritma kullanılanılarak aşıldı. Genetik algoritmalar (GA), karmaşık düzenli problemlerin çözümünü gerçekleştirmek amacıyla, kromozomların yeni diziler üretme esasını temel alan, sezgisel bir araştırma yöntemidir [1]. Genetik algoritmalar John Holland [2] tarafından 1975 yılında icat edilmiş ve öğrencileri ve iş arkadaşları tarafından geliştirilmiştir. Algoritma popülasyon (toplum) adı verilen ve kromozomlarla temsil edilen bir çözüm kümesi ile başlamaktadır. Bir toplumdaki çözümler yeni toplumların üretilmesinde kullanılmaktadır. Bu işlem, yeni toplumun eskisinden daha iyi olacağı umuduyla yapılmaktadır. Yeni çözümler (yavru) üretmek için alınan çözümler uygunluklarına (fitness) göre seçilmektedir. Daha uygun olan tekrar üretim için daha fazla şansa sahiptir. Tablo 1 de genetik algoritmanın çalışma adımları gösterilmiştir. Adım Yapılan İşlem 1 Gösterim (kodlama) yönetiminin belirlenmesi 2 Başlangıç toplumun (ilk nesil) oluşturulması 3 Başlangıç toplumundaki her bireyin performansının amaç fonksiyonuna göre hesaplanması 4 Yeni neslin oluşturulmasında kullanılacak bireylerin seçilmesi 5 Seçilmiş bireylere genetik işlemlerin uygulanarak yeni neslin elde edilmesi 6 Yeni neslin bireylerinin performanslarının uygunluk fonksiyonuna göre hesaplanması 7 Bitiş koşulu sağlanmamışsa yeni nesli tekrar 3. aşamaya gönderilmesi 8 Bitiş koşulu sağlanmışsa en iyi bireyin sonuç olarak dönülmesi Tablo 1: Genetik algoritmanın çalışma prensibi II. A. Sistem tanımı MATERYAL Bu sistemde genetik algoritmaların gerçekleştirildiği bir genetik hesaplama birimi, veri tabanı birimi ve grafik kullanıcı ara yüzünün gerçekleştirildiği ara yüz biriminden oluşmaktadır. Her birimler sadece ilgili görevlerini gerçekleştirmektedir. Sistemin ana mimari yapısı Resim 1 de incelenebilir. Mimariden de anlaşılacağı gibi sistem birbiriyle haberleşen, sorumlulukları dağıtılmış birimlerden oluşmaktadır.
Genetik Hesaplama Birimi Ara yüz birimi Veri tabanı birimi 2)) + (maksimum (Mavi renk 1, Mavi renk 2) -minimum (Mavi renk 1, Mavi renk 2)) (2) Kullandığımız diğer bir kriterde renklerin karşıtlık oranı denilen contrast ratiodur. The W3C s [4] WCAG [5] contrast rationun formülü aşağıdaki gibidir. B. Teknoloji seçimi Resim 1: MVC sistem modeli Yazılım, Java tabanlı web uygulamalarını kolaylaştırmak için MVC yapısına uygun olarak geliştirilmiş JSF 2.0 web teknolojisiyle gerçekleştirilmiştir. Kullanıcılar sadece Java 1.6 veya daha üzeri bir jdk kullanarak web server üzerinde çalıştırabilirler. Grafik ara yüzü Ajax üzerinde inşa edilmiş Primefaces 2.1 ile oluşturulmuştur. Veri tabanı olarak MySQL kullanılmıştır. A. Renk teorisi III. METHOT Renk teorisi renklerin karışımında uygulanılan prensipleri içerir. Bu teoriye göre ikili birbiriyle uyumlumu renkler renk çemberinde karşılıklı, üçlü uyumlu renkler üçgen, dörtlü renkler ise dikdörtgen şeklinde karşılıklı bulunur. İngiliz fizikçi Isaac Newton güneş ışığını elmas bir prizmadan geçirerek, renkleri ayırmayı başarmıştır (Newton, 1670). Bir odayı kararttıktan sonra güneş ışığının ince bir delikten odaya girmesini sağlamış, bu ışığın önüne bir prizma koyarak parçalanış halini, tıpkı gökkuşağında olduğu gibi yedi rengi yukarıdan aşağıya doğru bir perdeye aksettirmeyi sağlamıştır. Güneş ışığını meydana getiren yedi rengin (renk tayfının) görkemi, gizemi bugün üzerinde birçok incelemeler yapılan son derece olumlu sonuçlar alınan çalışmaları ve araştırmaları beraberinde getirmiş, Renk Bilim ini bir bilim dalı olarak ortaya koymuştur. Günümüzde tanımlanan birçok renk modeli mevcuttur. Bunlardan en çok bilinenler RGB ve CMYK tır. RGB bilgisayar için CMYK ise baskı renkleri için uygun bir modeldir. RGB kırmızı, yeşil ve mavi renklerin uygun oranlarda karışımı esasına dayalıdır. Color brightness (Renk Parlaklığı,) aşağıdaki formülle değeri hesaplanmaktadır: ((R X 299) + (G X 587) + (B X 114)) / 1000 (1) Color difference (Renk Farkı) aşağıdaki formülle değeri hesaplanmaktadır: (maksimum (Kırmızı renk 1, Kırmızı renk 2) - minimum (Kırmızı renk 1, Kırmızı renk 2)) + (maksimum (Yeşil renk 1, Yeşil renk 2) - minimum (Yeşil renk 1, Yeşil renk Burada L nispi lüminans değeridir. [3]. Maks değer Min değer Brightness Differences 255 0 Color Differences 765 0 Contrast Ratio 21 1 Tablo 2: Renk niteliklerinin maks ve min değerleri İki renk uyumlu diyebilmemiz için ; 1. Brightness Differences>125 2. Color Differences>500 3. Contrast Ratio>4.5 Bu şartları sağladığı takdirde bu renkler kendi arasında uyumludur. B. Genetik algoritmanın uygulanması Bireyler, Kullanıcının girebildiği n sayıda bireyden oluşan bir toplum kullanılmaktadır. Her birey aslında bir web şablonu temsil etmektedir. Web şablonları için oluşturulmuş rasgele renkler ise genleri temsil etmektedir. Kromozomları kodlamak için değer kodlaması kullanılmaktadır.(resim 2)Kromozomun genleri olarak her rengin RGB kodları tutulmaktadır. Başlangıç popülasyonu, Bu sistemde başlangıç popülasyonu rastgele üretildi. Başlangıç popülasyonu problemin kısıtlarını ihlal etmeyecek bir biçimde rastgele olarak üretilebilir veya sezgisel bir şekilde belirlenebilir Her ne kadar sezgisel belirlenen ilk bireyler, genetik algoritmaların biraz daha hızlı yakınsamasını sağlayabilmişse de, çok çeşitli problemlerde erken yakınsamaya yol açabileceği görülmüştür. Birey seçimi, Bir çok birey seçimi teknikleri vardır. Bu projede rulet tekerleği seçimi kullanılmıştır. Holland [2] tarafından kullanılan rulet tekerleği (rulet-wheel) yöntemi olarak adlandırılan ilk seçim yöntemi adayların olasılık dağılımına göre seçilmesine dayanıyordu. Buna göre herhangi bir adayın seçilme şansı, onun bütün popülasyon içindeki performansına göre rasgele belirlenmektedir. Böylelikle performansı yüksek olan adayların şansı daha yüksek olmaktadır. Ayrıca elitisimde elde edilen iyi bireylerin gelecek nesilde bozulmaması için uygulandı. (3)
Resim 2: Kromozom yapısı(değer kodlama) C. Fitness fonksiyonu Bireylerin ne kadar başarılı olduğunu bulmamız uygunluklarını bulmamızla mümkündür. Uygunluk formülü de bireylerin toplum içerisindeki uzaklık sıralamasındaki yeridir. Bu nedenle her bireyin uzaklığının hesaplanması gerekmektedir. Bu hesaplama aşağıdaki formüle göre gerçekleştirilmektedir: Birey sayısı En iyi maliyet En kötü maliyet 10 244,24 157,88 50 281,01 155,52 100 294,96 147,94 200 291,6 143,67 Tablo 3: Birey sayısının etkisi (4) n: Renk sayısı. Her şablon üzerinde arka plan ve yazı rengi ile 8 renk bulunmaktadır. k(j): İki renk arasındaki parlaklık değeridir. l(j): İki renk arasındaki renk fark değeridir. m: m eşik değeridir. Bu değer %60 olarak verilmiştir. IV. DENEYSEL SONUÇLAR Genetik algoritmanın başarısını ölçmek ve en uygun genetik algoritma parametreleri ve kriterleri için yazılımı farklı seçimler için ürettiği maliyet miktarı denendi. Bu denemeler istatiksel doğruluğu bir nebze de olsa elde edebilmek için 10 kere aynı değerlerle çalıştırmak ve bu değerlerin aritmetik ortalamasını almak şeklinde gerçekleştirildi. Bu denemeler tarafımızdan üç başlığa ayrıldı. A. Birey ve nesil sayısının etkisi Bu bölümdeki amaç birey sayısının ve nesil sayısının değişiminin genetik algoritma üzerinde oluşturduğu farklılığı bulmak ve en uygun birey ve nesil sayılarına ulaşabilmektir. Birey sayısının etkisini hesaplamak için aşağıdaki kriterler sabit tutularak birey sayısı değiştirildi: Resim 3: Birey sayısının etkisi Nesil sayısının etkisinin hesaplamak için de yukarıdaki kriterlerden farklı olarak birey sayısı 20 ye sabitlendi. Tablo 3 incelendiği zaman nesil ilerledikçe maliyet değeri değişmektedir. Nesil sayısındaki artış, maliyet değerini oldukça fazla etkilemiştir. En iyi sonuç, nesil sayısı 500 olduğunda alınmıştır. Nesil En iyi maliyet En kötü maliyet 5 174,34 75,51 25 195,5 88,09 50 228,04 112,18 100 262,06 143,07 150 268,7 158,42 500 275,41 159,32 2000 271,88 155,55 Tablo 4: Nesil sayısının etkisi Tablo 2 yardımıyla birey sayısı artışının web şablonlardaki renk uyumluluk kalitesini arttırdığını ancak belli bir sayıdan sonra süredeki artışın göz önüne alınması gerektiği ortaya çıkmaktadır. Bu nedenle birey sayısının nesil sayısına da bağlı olmak şartıyla uygun bir değer seçilmesi genetik algoritmanın verimini arttıracaktır. Yukarıda belirtilen kriterler için birey sayısının uygun değeri 100 dür. Resim 4: Nesil sayısının etkisi
B. Çaprazlama olasılığının etkisi Olasılıkları hesaplamak için hesaplanan olasılık değiştirilerek diğer olasılık sabit tutulmuştur. Diğer kriterler için aşağıdaki sabit değerler kullanılmıştır: Tablo 4 yardımıyla çaprazlama olasılığının artışı ile iyi sonuçlar döndürdüğü gözlenmiştir. Bu gözlem sonucunda süredeki değişimi de göz önüne alarak en iyi olasılık değerinin 0,5 ten büyük değerler olduğu ortaya çıkmıştır. Resim 6: Mutasyon olasılığının etkisi Çaprazlama olasılığı En iyi maliyet En kötü maliyet 0,1 174,34 75,51 0,3 195,5 88,09 0,5 270,62 158,86 0,7 275,41 159,32 0,9 286,08 159,38 Tablo 5: Çaprazlama olasılığının etkisi Resim 7: Swing ilk populasyon test ekranı Resim 5: Çaprazlama olasılığının etkisi C. Mutasyon olasılığının etkisi Tablo 5 yardımıyla mutasyon olasılığının artışının olumlu etkilemediği gözlenmiştir. Bu gözlem sonucunda en iyi olasılık değerinin 0,01 olduğu ortaya çıkmıştır. Mutasyon olasılığı En iyi maliyet En kötü maliyet 0,01 275,41 159,32 0,03 269,34 152,34 0,1 262,42 134,6 0,3 243,53 139,54 Tablo 6: Mutasyon olasılığının etkisi Resim 8: Genetik algoritma giriş ve çıkış ekranı GA sonucu oluşan en yüksek maliyet 400 en düşük 0 fakat 400 çıkması matematiksel doğru olmasına rağmen bizim istemediğimiz bir durumdur.renkler hep siyah ve beyaz renklerden oluşmaktadır bu durumda.bizim için en maliyetleri kabul ettiğimiz 225 ile 325 arasıdır.0-225 arasını kötü 325-400 arasını istenmeyen durum olarak belirledik.ayrıca tüm test sonuçlarında istenmeyen durum örneği görülmedi.resim 9(a) üretilen iyi renklere ait şablonlar resim 9(b) de ise kötü diye nitelendirdiğimiz sonuçlar mevcuttur.ayrıca tüm populasyonları Resim 11 görüldüğü şekilde incelenebilir ve önizileyip kaydedilelir.
(a) Resim 11: Wizard başlangıcı;style seçimi (b) Resim 10: Tüm populasyonun maliyet ve renk çiftleri V. SONUÇ Bu çalışmada, web sayfalarındaki renk uyumsuzluk probleminin GA kullanılarak giderebileceği gösterilmiştir. Bunun için Java mimarisi üzerine inşa edilmiş web uygulamaları geliştirmek için kullanılan JSF teknolojisi ile etkileşimli bir program geliştirilmiştir. Ayrıca yeni bir fitness metodu üzerinde genetik algoritma uygulandı. Kullanıcılar gerekli verileri web üzerinden interaktif olarak girebilmektedir. Uygun web şablon elde edildiğinde şablon bilgilerini veri tabanına kaydedip saklayabilmektedir. VI. REFERANSLAR Resim 9: En iyi templateler (a) ve en kötü templeteler(b) [1] Lee, C.Y., Kim, S.J.. Parallel genetic algorithms for the earliness-tardiness job scheduling problem with general penalty weights. Computer & Industrial Enginnering, 28(2), 231-243, 1995 [2] J. H. Holland, Adaptation in natural and artificial systems, Ann Arbor, MI: University of Michigan Press, 1975. [3] L. Troiano, C. Birtolo, and G. Cirillo, Interactive Genetic Algorithm for choosing suitable colors in User Interface [4] Web content accessibility guidelines 2.0. Technical Report 11, W3C, December 2007. [5] Web Content Accessibility guidelines (WCAG) 2.0 W3C Recommendation 11 December 2008