Merhaba Sevgili Dostlar;
Bugün Sizlere Daha önce yapılmayan veya çok az sayıda yapılan bir Projeyi göstereceğim.
Bu projemizde javascript ile Yapay Zeka benzeri bir Sesli Asistan yani "Google Asistan, Siri" benzerinde bir asistan olacak.
Tabii siz bunu daha da geliştirerek daha büyük kapsamlı ve kelime haznesi büyük olan bir Sesli Asistan yapabilirsiniz, Ben burada sadece 5-6 Kelime Ekleyeceğim ve gerisi sizde.
Şimdi ilk olarak "assistant.html" adında veya başka bir ad ile html dosyası oluşturuyoruz.İlk satıra " ! "(ünlem) işareti koyarak enter tuşuna basıyoruz.
Ekrana gelen yazılarda düzenleme yapmayı Web Yazılımı Ders v1.0 ile öğrenmiştik.
Daha Sonra bu kodu,
<script src="http://code.responsivevoice.org/responsivevoice.js"></script>
Sayfanızın <head></head> arasına yapıştırın.
Bu Kod Sesli Asistanımızın Ses Kütüphanesidir bu olmazsa olmazdır.
Şimdi Küçük bir Html Koduyla bir input ve button ekleyelim.
Kişi inputa yani kutuya Örnek: Merhaba, yazdığında Sesli Asistan'da ona Sana da Merhaba Diyecek.
Hemen bir Html Kodu Yazalım.
<center>
<form name="form1" id="form1" onsubmit="return validateForm()">
<input type="text" name="input1" id="input1" placeholder="Sesli Asistana
Soru Sor..." />
<br/>
<button type="submit" id="submitBtn">Gönder</button>
</form>
</center>
Burada center ile içine yazdığımız kodları sayfanın Merkezine yerleştirdik.
Bir form oluşturarak javascript ile inputu tanımaya yardımcı olduk.
Button ile tıklandığında Javascript kodu çalışarak inputa yazılan soruyu algılayıp ona göre cevap verecek.
Şimdi ise ortama biraz renk ve şekil verelim ve bunun için CSS Kullanalım.
body {
background-color: rgb(230, 230, 230);
background-color: rgba(230, 230, 230, 0.596);
color: black;
}
#input1 {
background-color: rgb(241, 241, 241);
color: rgb(27, 27, 27);
border: 1px #333 solid;
border-radius: 20px;
width: 300px;
height: 40px;
outline: 0;
text-align: center;
font-size: 17px;
position: absolute;
top: 10%;
left: 39%;
transition: box-shadow 1s;
}
#input1:hover {
box-shadow: 0 0 20px rgb(114, 114, 114);
}
#submitBtn {
background-color: rgb(32, 122, 206);
color: #fff;
border: 1px rgb(32, 122, 206);
border-radius: 5px;
width: 200px;
height: 40px;
font-size: 16px;
outline: 0;
transition: all 1s;
text-align: center;
position: absolute;
top: 20%;
left: 43%;
}
#submitBtn:hover {
width: 180px;
height: 35px;
font-size: 13px;
}
Artık Sayfamıza bir Renk ve Görüntü Geldi şimdi Sırada Asıl olay yani Sesli Asistanımızı Hayata Geçirmek var.
Hemen Javascript kodumuzu yazalım.
var tarih = new Date();
var yil=tarih.getFullYear();
var ay=tarih.getMonth();
var gun=tarih.getDay();
var saat=tarih.getHours();
var dakika=tarih.getMinutes();
var saniye=tarih.getSeconds();
Burada ki kod ile Tarih ve Saat bilgilerine erişiyoruz.
Şimdi Konuşma Dili ve Ses Tonunu Seçelim.
responsiveVoice.setDefaultVoice("Turkish Male");
Eğer Turkish Male yazan yere Turkish Female yazarsanız konuşma tonu kadın olacaktır.
Şimdi ise Kelime Haznesini Birkaç Kelime Ekleyelim.
function validateForm() {
var x = document.forms["form1"]["input1"].value;
if (x == "merhaba") {
responsiveVoice.speak("Sanada Merhaba Dostum.");
return false;
}
if (x == "nasılsın") {
responsiveVoice.speak("Ben iyiyim sen nasılsın?");
return false;
}
if (x == "saat kaç") {
responsiveVoice.speak("Şuan Türkiyede Saat: "+saat+"/"+dakika+"Geçiyo
r.");
return false;
}
if (x == "mossarb") {
responsiveVoice.speak("Mossarb.net sizin Yazılım Dünyasına ilk Adımın
ızı Atmanıza Yardımcı Olur.");
return false;
}
else {
responsiveVoice.speak("Üzgünüm ama dediğinizi anlayamadım.");
return false;
}
}
Burada if ile eğer x yani input'a merhaba yazarsa ona cevap olarak sende "Sana da Merhaba Dostum" de kodunu uyguladık.
else komutu ile eğer kişinin yazdığı kelimeyi anlamazsa ona Hata Mesajı versin.
Bu Kelimeleri Geliştirerek Daha Büyük ve Geniş Kapsamlı Google Asistan veya Siri gibi bir Sesli Asistan Yapabilirsiniz.
Kelime Eklemek için Gerekli Kod:
if (x == "ÖRNEK KELİME") {
responsiveVoice.speak("KELİMEYE UYGUN ÖRNEK CEVAP");
return false;
}
Bu Kodu Kullanıp Örnek yerleri siliniz, kendi kelimenizi ve kelimeye uygun cevabınızı yazınız.
Tüm Kod:
<!DOCTYPE html>
<html lang="tr">
<head>
<script src="http://code.responsivevoice.org/responsivevoice.js"></script>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sesli Asistan - Mossarb</title>
</head>
<body>
<center>
<form name="form1" id="form1" onsubmit="return validateForm()">
<input type="text" name="input1" id="input1" placeholder="Sesli Asistana
Soru Sor..." />
<br/>
<button type="submit" id="submitBtn">Gönder</button>
</form>
</center>
<style>
body {
background-color: rgb(230, 230, 230);
background-color: rgba(230, 230, 230, 0.596);
color: black;
}
#input1 {
background-color: rgb(241, 241, 241);
color: rgb(27, 27, 27);
border: 1px #333 solid;
border-radius: 20px;
width: 300px;
height: 40px;
outline: 0;
text-align: center;
font-size: 17px;
position: absolute;
top: 10%;
left: 39%;
transition: box-shadow 1s;
}
#input1:hover {
box-shadow: 0 0 20px rgb(114, 114, 114);
}
#submitBtn {
background-color: rgb(32, 122, 206);
color: #fff;
border: 1px rgb(32, 122, 206);
border-radius: 5px;
width: 200px;
height: 40px;
font-size: 16px;
outline: 0;
transition: all 1s;
text-align: center;
position: absolute;
top: 20%;
left: 43%;
}
#submitBtn:hover {
width: 180px;
height: 35px;
font-size: 13px;
}
</style>
<script>
var tarih = new Date();
var yil=tarih.getFullYear();
var ay=tarih.getMonth();
var gun=tarih.getDay();
var saat=tarih.getHours();
var dakika=tarih.getMinutes();
var saniye=tarih.getSeconds();
responsiveVoice.setDefaultVoice("Turkish Male"); // Turkish Male yazan ye
ri Turkish Female Yaparsanız Konuşan Kişi Kadın Olacaktır.
function validateForm() {
var x = document.forms["form1"]["input1"].value;
if (x == "merhaba") {
responsiveVoice.speak("Sanada Merhaba Dostum.");
return false;
}
if (x == "nasılsın") {
responsiveVoice.speak("Ben iyiyim sen nasılsın?");
return false;
}
if (x == "saat kaç") {
responsiveVoice.speak("Şuan Türkiyede Saat: "+saat+"/"+dakika+"Geçiyo
r.");
return false;
}
if (x == "mossarb") {
responsiveVoice.speak("Mossarb.net sizin Yazılım Dünyasına ilk Adımın
ızı Atmanıza Yardımcı Olur.");
return false;
}
else {
responsiveVoice.speak("Üzgünüm ama dediğinizi anlayamadım.");
return false;
}
}
</script>
</body>
</html>
<!-- Mossarb.net -->
JavaScript ile Sesli Asistan Dersi Bitti.
Yazılıma Devam Et
Resim Kaynağı:
Resim Kaynağına Git
0 Yorumlar