Pick the demo approach
☐ I want a demo this week, minimal effort          → Streamlit or Gradio
☐ I want a custom UI and to learn front end basics → React + FastAPI
☐ I target product or ML engineering roles         → React + FastAPI + deployment
☐ My work is mostly analysis, not models           → A clear notebook + written report

# pip install streamlit joblib scikit-learn
import joblib
import streamlit as st

model = joblib.load("price_model.joblib")
area = st.number_input("Area (sq ft)", 300, 5000, 900)
rooms = st.slider("Bedrooms", 1, 5, 2)
if st.button("Predict"):
    st.write("Estimated price:", round(model.predict([[area, rooms]])[0]))
# run: streamlit run app.py

import joblib
import pandas as pd
from sklearn.linear_model import LinearRegression
from sklearn.pipeline import make_pipeline
from sklearn.preprocessing import StandardScaler

df = pd.read_csv("flats.csv")             # columns: area, rooms, price
X, y = df[["area", "rooms"]], df["price"]
model = make_pipeline(StandardScaler(), LinearRegression()).fit(X, y)
joblib.dump(model, "price_model.joblib")   # scaler + model saved together

import joblib
import pandas as pd
from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware
from pydantic import BaseModel, Field

app = FastAPI()
app.add_middleware(CORSMiddleware, allow_origins=["http://localhost:5173"],
                   allow_methods=["POST"], allow_headers=["*"])
model = joblib.load("price_model.joblib")

class Flat(BaseModel):
    area: float = Field(gt=100, lt=10000)
    rooms: int = Field(ge=1, le=10)

@app.post("/predict")
def predict(f: Flat):
    X = pd.DataFrame([{"area": f.area, "rooms": f.rooms}])
    return {"price": round(float(model.predict(X)[0]))}

import { useState } from "react";

export default function PriceForm() {
  const [area, setArea] = useState(900);
  const [rooms, setRooms] = useState(2);
  const [price, setPrice] = useState(null);
  const [loading, setLoading] = useState(false);

  async function predict(e) {
    e.preventDefault();
    setLoading(true);
    const res = await fetch("http://localhost:8000/predict", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ area: Number(area), rooms: Number(rooms) }),
    });
    const data = await res.json();
    setPrice(data.price);
    setLoading(false);
  }

  return (
    <form onSubmit={predict}>
      <input type="number" value={area} onChange={e => setArea(e.target.value)} />
      <input type="number" value={rooms} onChange={e => setRooms(e.target.value)} />
      <button disabled={loading}>{loading ? "Predicting..." : "Predict"}</button>
      {price !== null && <p>Estimated price: ₹{price.toLocaleString("en-IN")}</p>}
    </form>
  );
}

# terminal 1 — API
uvicorn api:app --reload --port 8000

# terminal 2 — React app (Vite)
npm create vite@latest model-demo -- --template react
cd model-demo && npm install && npm run dev
# open http://localhost:5173

Model Demo Project Plan
Problem: ______________ (e.g. flat price estimate)
Data: public dataset ______________
Model: baseline + improved model, metrics recorded
API: FastAPI /predict with input validation
UI: React form + result + one chart
Deploy: API on a cloud service, UI on a static host
README: problem, data, metrics, limitations, demo link

# Flat Price Estimator
## Try it: <demo link>
## Problem
## Data and cleaning
## Model and metrics (MAE, R²) vs baseline
## Architecture: React → FastAPI → scikit-learn pipeline
## Limitations and ethical notes
## How to run locally

Demo walkthrough (2 minutes)
1. Show the live demo, enter values, get a prediction
2. Explain the data and the main feature effects
3. State the metric and how it beats the baseline
4. Mention one limitation honestly
5. Explain the architecture in one sentence