Genetik Algoritma ile Elde Edilen Uyumlu Renklerin

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
1
2
3
4
5
6
7
8
Yapılan İşlem
Gösterim (kodlama) yönetiminin belirlenmesi
Başlangıç toplumun (ilk nesil) oluşturulması
Başlangıç toplumundaki her bireyin performansının
amaç fonksiyonuna göre hesaplanması
Yeni
neslin
oluşturulmasında
kullanılacak
bireylerin seçilmesi
Seçilmiş bireylere genetik işlemlerin uygulanarak
yeni neslin elde edilmesi
Yeni
neslin
bireylerinin
performanslarının
uygunluk fonksiyonuna göre hesaplanması
Bitiş koşulu sağlanmamışsa yeni nesli tekrar 3.
aşamaya gönderilmesi
Bitiş koşulu sağlanmışsa en iyi bireyin sonuç
olarak dönülmesi
Tablo 1: Genetik algoritmanın çalışma prensibi
II.
MATERYAL
A. Sistem tanımı
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
2)) + (maksimum (Mavi renk 1, Mavi renk 2) -minimum
(Mavi renk 1, Mavi renk 2))
(2)
Veri tabanı birimi
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.
Ara yüz birimi
Resim 1: MVC sistem modeli
(3)
Burada L nispi lüminans değeridir. [3].
B. Teknoloji seçimi
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.
Brightness Differences
Color Differences
Contrast Ratio
Maks değer
255
765
21
Min değer
0
0
1
Tablo 2: Renk niteliklerinin maks ve min değerleri
İki renk uyumlu diyebilmemiz için ;
III.
METHOT
1.
2.
3.
A. Renk teorisi
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ığı,)
formülle değeri hesaplanmaktadır:
((R X 299) + (G X 587) + (B X 114)) / 1000
aşağıdaki
(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
Brightness Differences>125
Color Differences>500
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ı.
Resim 2: Kromozom yapısı(Değer kodlama)
C. Fitness fonksiyonu
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
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:
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.
Resim 3: Birey sayısının etkisi
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 değişiminin genetik
oluşturduğu farklılığı bulmak ve en
sayılarına ulaşabilmektir. Birey
hesaplamak için aşağıdaki kriterler
sayısı değiştirildi:
sayısının ve nesil
algoritma üzerinde
uygun birey ve nesil
sayısının etkisini
sabit tutularak birey
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
5
25
50
100
150
500
2000
En iyi maliyet En kötü maliyet
174,34
75,51
195,5
88,09
228,04
112,18
262,06
143,07
268,7
158,42
275,41
159,32
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.
Resim 9: En iyi templateler (a) ve en kötü templeteler(b)
REFERANSLAR
[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