การบ้านสัปดาห์ที่ 9

# ผลลัพธ์ที่คาดหวัง:

1. เริ่ม server แล้วเห็นหน้า landing page
   ที่มีรหัสนักศึกษาและชื่อ-นามสกุล

2. กดปุ่ม "เริ่มฝึกสอน" แล้วเห็น
   - ค่า loss ลดลงแบบ real-time
   - ค่า accuracy เพิ่มขึ้นแบบ real-time
   - กราฟ loss curve อัปเดตทุก epoch

3. หลังฝึกสอนเสร็จ แสดงผลลัพธ์สุดท้าย
   - Loss curve บันทึกเป็นไฟล์ PNG
   - ตารางเปรียบเทียบ 3 learning rates

4. หน้า landing page แสดงรหัสและชื่อ
   ของนักศึกษาที่ทำโครงงาน

DL69/wk09/
├── pyproject.toml           # uv project, Python 3.13
├── manage.py
├── mysite/
│   ├── __init__.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
├── dashboard/
│   ├── __init__.py
│   ├── apps.py
│   ├── views.py             # SSE streaming endpoint
│   ├── urls.py              # / → index, /train/ → SSE
│   ├── ml/
│   │   ├── __init__.py
│   │   └── train.py         # ★ นักศึกษาเขียนโค้ดตรงนี้
│   ├── templates/
│   │   └── dashboard/
│   │       └── index.html    # ★ ใส่รหัสและชื่อตรงนี้
│   └── static/
│       └── dashboard/
│           └── (ผลลัพธ์จาก train.py)
└── data/                     # ข้อมูล (ถ้ามี)

def train(on_progress=None):
    """
    on_progress(epoch, loss, acc) → เรียกทุก epoch
    เพื่อส่งข้อมูลผ่าน SSE ไปยังเบราว์เซอร์
    """
    import torch

    # 1. สร้างข้อมูล (binary classification)
    #    ข้อมูลเส้นตรง: X = torch.randn(200, 2)
    #    y = ((X[:,0]*1.5 + X[:,1] - 0.5) > 0)

    # 2. สร้างโมเดล (perceptron)
    #    Linear(2, 1) + Sigmoid

    # 3. Training loop
    for epoch in range(num_epochs):
        # forward
        y_hat = model(X)
        loss = loss_fn(y_hat, y)

        # backward
        loss.backward()

        # update weights (手動)
        with torch.no_grad():
            for p in model.parameters():
                p -= lr * p.grad
            model.zero_grad()

        # คำนวณ accuracy
        acc = ...

        # ส่งข้อมูลผ่าน SSE
        if on_progress:
            on_progress(epoch, loss.item(), acc)

    # 4. บันทึกผลลัพธ์
    #    - loss curve → static/dashboard/loss_curve.png
    #    - ตารางเปรียบเทียบ lr

<!-- dashboard/templates/dashboard/index.html -->
<!DOCTYPE html>
<html lang="th">
<head>
  <title>Perceptron Dashboard</title>
  <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body x-data="{ training: false, epoch: 0, loss: 0, acc: 0 }">

  <!-- ★ ใส่รหัสนักศึกษาและชื่อ-นามสกุลตรงนี้ -->
  <h1>รหัสนักศึกษา: 69000000</h1>
  <h2>ชื่อ-นามสกุล: ชื่อ นามสกุล</h2>

  <button @click="startTraining()">
    เริ่มฝึกสอน
  </button>

  <p>Epoch: <span x-text="epoch"></span></p>
  <p>Loss: <span x-text="loss"></span></p>
  <p>Accuracy: <span x-text="acc"></span></p>

  <canvas id="chart"></canvas>

  <script>
  function startTraining() {
    training = true;
    const es = new EventSource('/train/');
    es.onmessage = function(e) {
      const m = JSON.parse(e.data);
      epoch = m.epoch;
      loss = m.loss.toFixed(4);
      acc = m.accuracy.toFixed(4);
      drawChart(m.epoch, m.loss, m.accuracy);
    };
  }
  </script>
</body>
</html>

# 1. Clone repo และ checkout branch
git clone <DL69-repo>
cd DL69
git checkout wk09

# 2. ติดตั้ง dependencies
uv sync

# 3. รัน server
uv run manage.py runserver

# 4. เปิดเบราว์เซอร์
#    http://127.0.0.1:8000/
#    → เห็นรหัสนักศึกษาและชื่อ
#    → กด "เริ่มฝึกสอน"
#    → เห็น loss, accuracy อัปเดตแบบ real-time
#    → หลังฝึกเสร็จ เห็น loss curve PNG

# 5. ตรวจสอบไฟล์ผลลัพธ์
ls dashboard/static/dashboard/
#    → loss_curve.png
#    → (ไฟล์อื่น ๆ ที่สร้าง)

# สร้างและ push branch
git checkout -b wk09
git add .
git commit -m "wk09: Perceptron Dashboard"
git push origin wk09

# โครงสร้างไฟล์ที่ต้องมี
DL69/wk09/
├── pyproject.toml
├── manage.py
├── mysite/
├── dashboard/
│   ├── views.py
│   ├── ml/train.py       ← โค้ดที่เขียน
│   └── templates/
│       └── dashboard/
│           └── index.html ← ใส่รหัส+ชื่อ
└── data/

# ตรวจสอบก่อนส่ง
uv sync
uv run manage.py runserver
# → หน้า landing แสดงรหัสและชื่อ
# → กดเริ่มฝึกสอน → SSE ทำงาน
# → ได้ loss_curve.png

# ตรวจสอบก่อนส่ง:

# 1. uv sync สำเร็จ?
uv sync

# 2. server รันได้?
uv run manage.py runserver

# 3. หน้า landing แสดงรหัส+ชื่อ?
#    เปิด http://127.0.0.1:8000/

# 4. SSE ทำงาน?
#    กด "เริ่มฝึกสอน" แล้วเห็น
#    epoch, loss, accuracy อัปเดต

# 5. ผลลัพธ์ครบถ้วน?
#    - loss_curve.png มีอยู่
#    - ตาราง lr เปรียบเทียบ

# 6. Branch ชื่อ wk09?
git branch
#    → * wk09