Yapay Zeka Modelini Web Uygulamasına Dönüştür (React + Flask)

Projenin Amacı  Bu projenin temel amacı, kendi eğittiğin yapay zekâ modelini yalnızca bir dosya olarak bırakmayıp, insanların tarayıcıdan kullanabileceği gerçek bir web uygulamasına dönüştürmektir.Bu sistemde kullanıcılar, tarayıcı üzerinden veri girişi yapacak, arka plandaki model bu veriyi işleyecek ve sonucu anında ekranda gösterecek. Yapı iki ana kısımdan oluşur: Bunu da okuyun Laravel ile RESTful API Geliştirme

Mehmet Ali Uçar tarafından
yayınlandı
4 dk 21 sn 4 dk 21 sn okuma süresi 6
Gemini Generated Image Pijibppijibppiji 1 Maykairos
Google News Google News Flipboard Flipboard Sesli oku Yazıyı beğen Favorilere Ekle 0 Yorumlar
Daha fazla

Projenin Amacı 

Bu projenin temel amacı, kendi eğittiğin yapay zekâ modelini yalnızca bir dosya olarak bırakmayıp, insanların tarayıcıdan kullanabileceği gerçek bir web uygulamasına dönüştürmektir.
Bu sistemde kullanıcılar, tarayıcı üzerinden veri girişi yapacak, arka plandaki model bu veriyi işleyecek ve sonucu anında ekranda gösterecek.

Yapı iki ana kısımdan oluşur:

  • Backend (Flask / Python): Modeli barındırır, tahmin işlemini yapar, API uç noktalarını oluşturur.

  • Frontend (React / JavaScript): Kullanıcının göreceği arayüzdür; Flask API’sine istek atar, gelen tahmin sonucunu gösterir.

Yani Flask, modelin “beyni” olurken, React onun “yüzü” görevini üstlenir.
Bu sayede kullanıcı etkileşimi, modern bir web deneyimiyle birleşir.

Bu projenin sonunda:
✅ Modelini gerçek kullanıcılarla test edebilirsin
✅ API mantığını öğrenmiş olursun
✅ Full-stack (uçtan uca) bir proje portföyüne eklersin
✅ React + Flask entegrasyonunu kavrarsın

O zaman benle beraber adımlara başlayalım bu konuya hakim biri olarak sana anlatacağım inşallah

1. Gerekli Teknolojilerin Kurulumu

İlk olarak sisteminde aşağıdaki yazılımların kurulu olduğundan emin ol:

  • Python 3.8+

  • Node.js ve npm

  • Flask (Python web framework’ü)

  • React (Frontend framework’ü)

Komut satırında bu kontrolleri yapabilirsin:

python --version
node -v
npm -v

Gerekli kütüphaneler:

pip install flask flask-cors joblib
npx create-react-app ai-web-app

“flask-cors” eklentisi React tarafının Flask API’ye erişimine izin verir.

2. Flask Backend Oluşturma

Yeni bir klasör oluştur:

mkdir flask-backend
cd flask-backend

app.py adlı dosyayı oluştur ve içine şunu yaz:

from flask import Flask, request, jsonify
from flask_cors import CORS
import joblib

app = Flask(__name__)
CORS(app)

model = joblib.load("model.pkl")

@app.route("/predict", methods=["POST"])
def predict():
data = request.json
prediction = model.predict([data["features"]])
return jsonify({"prediction": prediction.tolist()})

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

Burada model.pkl senin önceden eğittiğin modeli temsil ediyor.
Flask bu modeli yükler ve API üzerinden gelen veriyi tahmin eder.

3. React Frontend Kurulumu

React tarafında “ai-web-app” klasörüne gir:

cd ai-web-app

src/App.js dosyasını düzenle:

import React, { useState } from "react";

function App() {
const [input, setInput] = useState("");
const [result, setResult] = useState("");

const handlePredict = async () => {
const response = await fetch("http://127.0.0.1:5000/predict", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ features: [parseFloat(input)] }),
});
const data = await response.json();
setResult(data.prediction[0]);
};

return (
<div className="app">
<h1>AI Tahmin Uygulaması</h1>
<input
type="number"
value={input}
onChange={(e) => setInput(e.target.value)}
placeholder="Veri girin"
/>
<button onClick={handlePredict}>Tahmin Et</button>
<p>Sonuç: {result}</p>
</div>
);
}

export default App;

Burada React arayüzü, Flask API’ye istek atıyor.
Gelen tahmin sonucu ekranda anında gösteriliyor.

4. Flask ve React’i Aynı Anda Çalıştırma

İki terminal aç:

  • Birinde Flask’ı çalıştır:

    python app.py

  • Diğerinde React’i çalıştır:

    npm start

Artık tarayıcıdan http://localhost:3000 adresine girdiğinde, web uygulaman hazır 🎯

5. Modeli Güncelleme veya Yeniden Eğitme

Yeni veri geldiğinde modeli yeniden eğitip model.pkl dosyasını güncelleyebilirsin.
Flask API yeniden başlatıldığında, yeni model otomatik olarak devreye girer.

Gerçek dünyada bu süreç “model deployment pipeline” olarak adlandırılır.

6. Projeyi Yayına Alma (Deployment)

Uygulamayı canlıya almak için:

  • Flask tarafını Render, Railway veya Vercel Serverless Functions gibi platformlarda barındırabilirsin.

  • React kısmını Vercel, Netlify ya da GitHub Pages üzerinde yayınlayabilirsin.

Yani kısaca:
Flask API → Sunucuya
React UI → Web hosting servisine

Sonra API adresini React tarafında fetch("https://senin-api-adresin/predict") olarak güncellersin.

7. Güvenlik ve Performans İyileştirmeleri

Gerçek kullanıcılar gireceği için:

  • Input validation ekle

  • Flask’ta gereksiz loglamayı kapat

  • Modeli cache’e alarak tahmin süresini kısalt

Örneğin Flask’ta “gunicorn” gibi bir WSGI server kullanmak performansı ciddi artırır.

8. Projeyi Geliştirme Fikirleri

Bu temel projeyi geliştirmek için şunları ekleyebilirsin:

  • Çoklu veri girişi (örneğin 3-5 input alanı)

  • Tahmin geçmişini listeleme

  • Grafiksel çıktı (örneğin tahmin doğruluk oranı grafiği)

  • Kullanıcıdan alınan verileri veritabanına kaydetme (SQLite veya Firebase)

  • Login sistemi ekleyerek kişiselleştirilmiş deneyim

Ben olsam tahmin geçmişini kaydedip modelin hangi verilerde daha iyi çalıştığını analiz ederdim.
Bu hem kullanıcıya şeffaflık kazandırır hem de modelin zayıf noktalarını gösterir.

Ve Bugün Ögrendigimiz  Gerçek Bir Yapay Zekâ Uygulaması

Bu adımlar sonunda artık elinde tam işlevli bir yapay zekâ web uygulaması olacak.
Kullanıcı tarayıcıdan veri girecek → React bu veriyi Flask’a gönderecek → Flask modeli çalıştırıp sonucu geri döndürecek → React anında sonucu gösterecek.

Yani basit bir model, artık insanlarla etkileşime giren bir uygulama haline geldi.
Ve bu tam olarak yazılım dünyasında “değer üretmek” anlamına geliyor

Yazar Hakkında

Mehmet Ali Uçar 245 yazı
Tüm yazıları

Benzer Yazılar

High Concurrency Patterns Rehberi 4 dk
Yazılım

High Concurrency Patterns Rehberi
Algoritma mı Framework mü? Yazılıma Başlayanların En Büyük Yanılgısı 4 dk
Donanım

Algoritma mı Framework mü? Yazılıma Başlayanların En Büyük Yanılgısı
Yapay Zeka ve Yazılım: Kodlama Dünyasında Yeni Dönem 4 dk
Yapay Zeka

Yapay Zeka ve Yazılım: Kodlama Dünyasında Yeni Dönem

Bir Cevap Yaz

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir.

0/30 karakter