রিয়েল এস্টেট প্রাইস প্রেডিকশন প্রজেক্ট: ওয়েব ইউজার ইন্টারফেস তৈরি

ভূমিকা

আমরা আমাদের আগের পর্বগুলোতে একটি মেশিন লার্নিং মডেল তৈরি করেছি এবং সেটি ব্যবহারের জন্য পাইথন ফ্ল্যাঙ্ক (Flask) সার্ভার তৈরি করেছি। এই পর্বে আমরা শিখব কীভাবে সেই মডেলটির জন্য একটি ওয়েবসাইট বা ইউজার ইন্টারফেস (UI) তৈরি করতে হয়। এটি এমন একটি ওয়েবসাইট যেখানে ইউজার তাদের বাড়ির তথ্য (যেমন- এরিয়া, রুমের সংখ্যা) দিলে ওয়েবসাইটটি আমাদের মেশিন লার্নিং মডেল ব্যবহার করে সেই বাড়ির দাম কত হতে পারে তার একটি অনুমান (Prediction) দেখাবে।

---

ওয়েবসাইটের গঠন এবং প্রস্তুতি

ভিডিও রেফারেন্স: [00:06]

একটি ওয়েবসাইট তৈরি করতে সাধারণত তিনটি মূল ফাইলের প্রয়োজন হয়: ১. HTML (app.html): এটি ওয়েবসাইটের কঙ্কাল বা কাঠামোর মতো। কোথায় বাটন থাকবে, কোথায় ইনপুট বক্স থাকবে তা এখানে ঠিক করা হয়। ২. CSS (app.css): এটি ওয়েবসাইটের সাজসজ্জার কাজ করে (যেমন- রং, ফন্ট বা ডিজাইনের স্টাইল)। ৩. JavaScript (app.js): এটি ওয়েবসাইটের মস্তিষ্ক। এটি সার্ভারের সাথে যোগাযোগ করে তথ্য আদান-প্রদান করে।

সহজ ভাষায় বলতে গেলে, HTML দিয়ে আপনি ঘর বানান, CSS দিয়ে সেখানে রঙ-চুনকাম করেন এবং JavaScript হলো ইলেকট্রিক সুইচ, যা টিপলে লাইট জ্বলে বা সার্ভারের কাছ থেকে ডেটা নিয়ে আসে।

---

ওয়েবসাইট ডিজাইন ও ডেটা লোড করা

ভিডিও রেফারেন্স: [02:44], [05:47]

আমাদের মেইন লক্ষ্য হলো ইউজার যখন ওয়েবসাইটে আসবে, তখন সে যেন তার পছন্দের এলাকা (Location) সিলেক্ট করতে পারে। এই এলাকাগুলোর নাম আমাদের আগে তৈরি করা সার্ভার থেকে আসবে।

জাভাস্ক্রিপ্ট কোড (সার্ভার থেকে ডেটা আনার জন্য):

JavaScript

window.onload = function() {
    var url = "http://127.0.0.1:5000/get_location_names"; // সার্ভার থেকে ডেটা আনার লিঙ্ক
    $.get(url, function(data, status) {
        if(data) {
            var locations = data.locations;
            // এই লুপ দিয়ে ড্রপডাউনে লোকেশনগুলো যোগ করা হচ্ছে
            for(var i in locations) {
                var opt = new Option(locations[i]);
                $('#uiLocations').append(opt);
            }
        }
    });
} 

ব্যাখ্যা: window.onload ফাংশনটি পেজ লোড হওয়ার সাথে সাথে রান করে। এটি $.get এর মাধ্যমে আমাদের পাইথন সার্ভারে একটি রিকোয়েস্ট পাঠায় এবং সার্ভার থেকে লোকেশনের লিস্ট নিয়ে ড্রপডাউন মেনুতে সাজিয়ে দেয়।

---

প্রাইস প্রেডিকশন ফিচার

ভিডিও রেফারেন্স: [07:42]

সবশেষে ইউজার যখন 'Estimate Price' বাটনে ক্লিক করবে, তখন আমাদের একটি ফাংশন দরকার যা ইউজারের দেওয়া তথ্যগুলো (যেমন- স্কয়ার ফিট, বেডরুম, বাথরুম, লোকেশন) সার্ভারে পাঠাবে এবং সেখান থেকে দামের রেজাল্ট নিয়ে আসবে।

জাভাস্ক্রিপ্ট কোড (দাম দেখার জন্য):

JavaScript

function onClickedEstimatePrice() {
    var sqft = document.getElementById("uiSqft");
    var bhk = getBHKValue(); // বাটন থেকে বিএইচকে এর মান নেওয়া
    var bath = getBathValue(); // বাটন থেকে বাথরুমের মান নেওয়া
    var location = document.getElementById("uiLocations");
    var estPrice = document.getElementById("uiEstimatedPrice");

    var url = "http://127.0.0.1:5000/predict_home_price";

    $.post(url, {
        total_sqft: parseFloat(sqft.value),
        bhk: bhk,
        bath: bath,
        location: location.value
    }, function(data, status) {
        estPrice.innerHTML = "<h2>" + data.estimated_price.toString() + " Lakh</h2>";
    });
} 

ব্যাখ্যা: $.post ব্যবহার করে আমরা ইউজারের দেওয়া তথ্য সার্ভারে পাঠাচ্ছি। সার্ভার থেকে যে রেজাল্ট আসছে, সেটি estPrice এলিমেন্টের মাধ্যমে ওয়েবসাইটে দেখানো হচ্ছে।

---

বিশ্লেষণ ও চিন্তা-ভাবনা

এই প্রজেক্টটি পুরো ডাটা সায়েন্স লাইফসাইকেলের একটি দারুণ উদাহরণ। ডাটা সায়েন্টিস্ট হিসেবে শুধুমাত্র মডেল বানানোই শেষ কথা নয়, সেই মডেলটি যেন সাধারণ মানুষ ব্যবহার করতে পারে, তার জন্য একটি ইউজার ফ্রেন্ডলি ইন্টারফেস বানানো খুবই জরুরি।

বাস্তবতা ও পরামর্শ:

• কেন এটি গুরুত্বপূর্ণ: কোনো কোম্পানির বড় কোনো মডেলে যদি সাধারণ মানুষ অ্যাক্সেস না পায়, তবে সেটির গুরুত্ব কমে যায়। তাই বেসিক ওয়েব ডেভেলপমেন্ট (HTML/CSS/JS) জানা থাকলে আপনি নিজের মডেল নিজেই টেস্ট করতে পারবেন।

• বিকল্প উপায়: আপনি চাইলে ফ্রন্টএন্ডের জন্য আরও আধুনিক ফ্রেমওয়ার্ক যেমন- React বা Streamlit ব্যবহার করতে পারেন। স্ট্রিটলিট (Streamlit) ডাটা সায়েন্টিস্টদের জন্য খুব সহজ, কারণ এতে আলাদা করে HTML/JS লিখতে হয় না, পুরোটা পাইথন দিয়েই করা যায়।

• ভবিষ্যৎ পদক্ষেপ: এই প্রজেক্টটিকে আরও উন্নত করতে আপনি সেখানে একটি ম্যাপ ইন্টিগ্রেশন বা প্রপার্টির ছবির অপশন যোগ করতে পারেন।

এই পুরো সিরিজটি আমাদের দেখিয়েছে কীভাবে একটি কাঁচা ডাটা থেকে শুরু করে একটি পূর্ণাঙ্গ ওয়েব অ্যাপ্লিকেশন তৈরি করা যায়। আপনার প্রজেক্টটি লোকালহোস্টে সাকসেসফুলি রান করছে মানে আপনি একজন এন্ড-টু-এন্ড ডাটা সায়েন্স প্রজেক্টের ধারণা পেয়েছেন।

ভিডিও লিঙ্ক: https://www.youtube.com/watch?v=rD2xumR98w8

[

Machine Learning & Data Science Project - 7 : Website or UI (Real Estate Price Prediction Project)

codebasics · 147K views

](http://www.youtube.com/watch?v=rD2xumR98w8)