Derin Öğrenme Modellerini Kullanan Bir Web Uygulamasının Geliştirilmesi

Merhaba,
Bu yazımızda Keras ile eğitilen bir derin öğrenme modelini kullanmak ve test etmek için bir web uygulamasını nasıl geliştirip ücretsiz olarak host edebiliriz birlikte görelim.

Python Flask ile Web Uygulaması

Flask, Python tabanlı web uygulamaları geliştirebileceğiniz mikroçatı(microframework)’dır.

Öncelikle Flask'ı yükleyelim.

pip3 install Flask

Yeni bir app.py python dosyası oluşturalım ve aşağıdaki python kodlarını yazalım.

from flask import Flask

app = Flask(__name__)

@app.route("/")
def main():
    return "Merhaba Flask ;)"

if __name__ == "__main__":
    app.run()

 @app.route("/") ile  localhost:5000/ adresine istek gönderildiğinde ve def main(): fonksiyonu ile dönecek içerik için çağrılacak fonksiyon tanımlanıyor.

Terminalden oluşturduğumuz app.py kodumuzu çalıştıralım

python app.py

Terminalde Running on http://127.0.0.1:5000/ çıktısını gördüğümüzde tarayıcımızdan http://localhost:5000/ adresine gittiğimizde main() fonksiyonunda döndüğümüz string değerini göreceğiz.

Flask ile HTML Template Kullanma

Yeni bir templates klasörü açalım ve templates klasörü içerisine bir index.html dosyası oluşturalım ve aşağıdaki html kodlarını yazalım.

<!doctype html>
<html lang="en">
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  <title>Merhaba Flask! Html demosu.</title>
</head>
<body>
  <div class="container">
    <div class="py-5 text-center">
      <h1>Merhaba Flask! Html demosu.</h1>

      <button type="submit" class="btn btn-primary">TEST</button>
    </div>
  </div>
  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>

 

app.py python dosyamızda render_template paketini import edelim ve main() fonksiyonunu, yeni oluşturduğumuz index.html'i çağırması için aşağıdaki şekilde yeniden düzenliyoruz.

Terminalden yeniden app.py'yi çalıştırdığımızda aşağıdaki gibi html sayfasını göreceğiz.

 

Python Flask ile basit bir web uygulamasınu bu şekilde geliştirebilirsiniz.

Derin Öğrenme Web Uygulaması Geliştirme

Şimdi web uygulamamızı geliştirerek derin öğrenme modelini nasıl çalıştırabileceğimize bakalım.

Gerekli Keras paketlerini, resim sınıflandırma için kullanacağımız ağımız olan ResNet50 paketini ve ön işlemler için gerekli diğer paketleri ekleyelim.

from keras.applications import ResNet50
from keras.preprocessing.image import img_to_array
from keras.applications import imagenet_utils
from PIL import Image
import numpy as np
from flask import Flask, render_template, request, jsonify, send_from_directory
import io
import werkzeug
import datetime
import os

Resim sınıflandırma için ImageNet veriseti ile eğitilmiş modelimizi ve ağırlık dosyalarını yükleyelim.

model = ResNet50(weights="imagenet")

Form post metodu ile gönderilen resim dosyasını modelin uygun giriş formata getiren bazı ön işlemler uygulandıktan sonra modele gönderilip tahmin (prediction) sonucunun alındığı ve json formatında geri döndürdüğümüz predict() fonksiyonunu aşağıdaki gibi tanımlayalım.

@app.route("/predict", methods=["POST"])
def predict():
	# initialize the data dictionary that will be returned from the
	# view
	data = {"success": False}

	# ensure an image was properly uploaded to our endpoint
	if request.method == "POST" and request.files['image']:
		imagefile = request.files["image"].read()
		image = Image.open(io.BytesIO(imagefile))


		# preprocess the image and prepare it for classification
		image = prepare_image(image, target=(224, 224))

		# classify the input image and then initialize the list
		# of predictions to return to the client
		preds = model.predict(image)
		results = imagenet_utils.decode_predictions(preds)
		data["predictions"] = []

		# loop over the results and add them to the list of
		# returned predictions
		for (imagenetID, label, prob) in results[0]:
			r = {"label": label, "probability": float(prob)}
			data["predictions"].append(r)

		# indicate that the request was a success
		data["success"] = True

		print(data)

	# return the data dictionary as a JSON response
	return jsonify(data)

 

Son olarak geriye kalan bu servisi başlatmak.

if __name__ == "__main__":
	print("START FLASK")

	port = int(os.environ.get('PORT', 5000))
	app.run(host='0.0.0.0', port=port)

 

Uygulamamızın bu hali ile bir REST API olarak kullanabilir durumdayız.

Terminalden uygulamamızı çalıştırdıktan sonra başka bir terminalden http://0.0.0.0:5000/predict adresine örnek bir resmimizi curl ile post ediyoruz.
Örnek olarak amerikan papağını resmini sınıflandırmaya çalışalım:

Aşağıdaki gibi göndermiş olduğumuz resim modelde sınıflandırarak json sonucunu bize dönüyor.
Sonuçlar arasında en yüksek oranla %99 macaw olarak sınıflandırma yaptığını görüyoruz.


Şimdi ise yazmış olduğumuz API'yi kullanarak web arayüzünden bir resim dosyayı seçerek sınıflandırmayı gerçekleştirelim.

Bunun için index.html sayfamıza kullanıcının resim yükleyebilmesi için bir form ve dosya yükleme elementleri ekleyelim.

				<form id="upload-file" method="post" enctype="multipart/form-data">
					<div class="form-group">
						<label for="InputFile">Resim Dosyası:</label>
						<input name="image" type="file" class="form-control-file" id="InputFile" aria-describedby="fileHelp">
						<small id="fileHelp" class="form-text text-muted">Tanımak istediğiniz resmi bilgisayarınızdan seçiniz</small>
					</div>

					<button id="upload-file-btn" type="button" class="btn btn-primary">Gönder</button>
				</form>

 

Kullanıcı dosya yükleme elementi ile resim dosyasını seçtikten sonra 'Gönder' buttonuna tıklandığında, jquery ajax ile seçilen dosyayı app.py python kodunda tanımladığımız predict() fonksiyonunu çağıran REST API'mize POST isteği gönderelim.

		$('#upload-file-btn').click(function () {
			$('.loader').show();
			$("#results").html('');

			var form_data = new FormData($('#upload-file')[0]);
			$.ajax({
				type: 'POST',
				url: '/predict',
				data: form_data,
				contentType: false,
				cache: false,
				processData: false,
				async: false,
				success: function (data) {
					console.log(data.success);

					$('.loader').hide();

					$.each(data.predictions, function (i, item) {
						console.log(item);
						label = item["label"];
						prob = item["probability"].toFixed(2);
						percent = prob * 100;

						$("#results").append('<label>' + percent + '% ' + label + '</label><div class="progress"><div class="progress-bar" role="progressbar" aria-valuenow="' + percent + '" aria-valuemin="0" aria-valuemax="100" style="width:' + percent + '%"></div></div>');
					});
				},
			});
		});

 

Uygulamanın tüm kaynak kodlarına buradan ulaşabilirsiniz.
Kaynak kodları Keras kütüphanesi yüklü bir bilgisayara indirerek çalıştırabilir veya online şekilde yayınlamak isterseniz yazıyı okumaya devam edebilirsiniz.

Web Uygulamasını Heroku Üzerinde Yayınlama

Heroku, birçok dil desteği olan, uygulama alt yapısı sağlayan bir bulut platformudur.

Heroku’ya uygun düzenlemeleri yapmak ve kendiniz heroku uygulaması oluşturmak isterseniz gerekli adımları Sıddık Açıl’ın aşağıdaki buradaki yazısına göz atabilirsiniz.

Veya herhangi bir işlem yapmadan Heroku üzerinden bir hesap oluşturarak bu uygulamaya özel olarak hazırladığım aşağıdaki button ile tek tıkla kendi heroku hesabınız altında hızlıca yayına alabilirsiniz.

Görüşlerinizi aşağıdaki yorum bölümüne yazabilirsiniz.
Sorularınızı Türkiye’nin yapay zeka alanındaki tek soru&cevap platformu olan Deep Learning Türkiye’nin Soru&Cevap Sitesi’nde sorabilirsiniz.

Kaynaklar:

 

[HATA ÇÖZÜMÜ] Heroku için Uzaktan MySQL Kullanımı

Merhaba,
Heroku üzerindeki bir uygulamanız için kendi veritabanınıza uzaktan erişim sağlamak için;
Veritabanınızın bulunduğu hostingin cPanel'inde "Remote MySQL (MYSQL Uzaktan Erişim)" bölümüne giriniz.
Burada veritabına erişim sağlayacak IP listesine, Heroku'daki uygulamanız AWS üzerinde barındırıldığından %.compute-1.amazonaws.com şeklinde AWS adresini ekleyiniz.

Bu sayede Heroku'dan uzak veritabanına erişim yetkisi aşılmış olacak.

 

Facebook Messenger Chatbot Demo Geliştirme ve Yayınlama

Merhaba, 
Apple Siri, Microsoft Cortana, Amazon Echo(Alexa), Google Assistant gibi sesli asistanlar her geçen gün hayatımızda yer etmeye başladılar. Bunlarla birlikte botlar Telegram, Slack, Kik gibi mesajlaşma uygulamaları chatbot geliştirilmesine imkan verirken, en popüler Facebook Messenger'ın da geliştiriciler için bot platformunu ve chatbotlara özel uygulama mağazasını devreye alması yaygınlaşmasında büyük rol oynadı.

Chatbot, kullanıcıların mesajlaşma platformlarında belirlenmiş kurallar çerçevesinde hizmet eden bir servistir. Kullanıcılar telefonlarda yüzlerce uygulamalar ile dolaşmak yerine tek bir arayüz ile bir çok servisi alabiliyorlar. Yapay zeka (doğal dil işleme) desteği ile konuşmaların doğal akışını taklit edebilme yeteneği kazandırabilirsiniz.

 

Şimdi Node.js ile facebook messenger chatbotu adım adım nasıl geliştirebiliriz ve yayına alabiliriz ona bakalım.

  1. Node.js uygulamasını yayınlamak için Heroku'dan hesap açarak yeni bir uygulama oluşturalım.
  2. Uygulama adını chatbotweather olarak belirlediğimiz için oluşturduğumuz heroku üzerindeki ücretsiz uygulamamızın erişim adresi https://chatbotweather.herokuapp.com/ olacaktır.
  3. Buradan bir Facebook Uygulaması oluşturalım, bir isim ile iletişim e-postası verelim ve ürün olarak Messenger seçelim.


  4. Yeni oluşturduğunuz veya mevcut bir sayfayı seçerek sayfa erişim token'ı oluşturalım.
  5. Facebook'un hızlı bir başlangıç için bize sunduğu demo uygulamasını buradan indirelim.

  6. Örnek uygulama içerisinde config/default.json içerisindeki
    appSecret parametresini facebook uygulamamazın dashboard bölümündeki App Secret değeri ile,
    pageAccessToken parametresini 4. madde de bağladığımız sayfadan oluşturulan Page Access Token değeri ile,
    validationToken parametresini daha sonra facebook uygulamamız ile chatbotumuz arasındaki etkileşimi sağlamak için webhooks bağlantısını doğrulamak için kendimizin belirlediği bir değer ile(test_token),
    serverURL parametresini chatbot uygulamamızın yayında olduğu adres ile(https://chatbotweather.herokuapp.com/)  değiştirelim.

  7. Dilerseniz public/index.html içerisindeki messenger_app_id ve page_id parametrelerini de değiştirerek chatbota dinamik erişim buttonları oluşturabilirsiniz. 

  8. Değişiklerimizi yaptıktan sonra şimdi Heroku'ya yayınlayalım.
    Komut satırından bilgisayarınızda uygulamanızın bulunduğu klasöre gelerek sırasıyla aşağıdaki git komutları ile Heroku'ya deploy yapalım.
    heroku login
    Heroku hesabınızın kullanıcı adı ve şifresi ile giriş yapalım

    git add .
    git commit -am "ilk deploy"
    git push heroku master


  9. Tekrar facebook uygulama ayarlarına dönüyoruz. Messenger ayarlarından Setup Webhooks a tıklayarak  


    Callback URL olarak Heroku yayın adresimiz/webhook: https://chatbotweather.herokuapp.com/webhook
    Verify Token olarak uygulamamız içerisinde config/default.json dosyasında belirlediğimiz validationToken değerini: test_token
    Ve yetki alanlarının tamamını işaretleyelim.



  10. Buraya kadar başarılı şekilde geldiksey şimdi chatbotumuzu test etme zamanı
    Facebook sayfamızın mesaj gönderme bölümünden uygulamamızda text mesajlara cevap olarak tanımlanmış templateleri (image, gif, audio, video, file, button, generic, receipt, qucik reply) test edebiliriz.
          

  11. Node.js uygulamamızın app.js içerisindeki receivedMessage fonksiyonu içerisindeki örnek kodları inceleyerek kendinize göre düzenleyebilirsiniz. 
    Kullanıcıdan gelen mesaja göre API'lere istekler yaparak cevapları parse edip uygun templatelerde cevap olarak dönebilirsiniz.

Hızlı şekilde facebook messengerın örnek chatbotunu nasıl yayına alınacağını ve facebook sayfasına bağlanacağını göstermeye çalıştım. 

Sorularınız olursa yorum kısmından iletişime geçebilirsiniz.

 

İstanbul'daki nöbetçi eczaneleri bulmanıza yardımcı geliştirdiğim nöbetçi eczane chatbotunu da inceleyebilirsiniz.

Kaynak: