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

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

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

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

3. หลังฝึกสอนเสร็จ แสดงผลลัพธ์
   - กราฟ predicted vs actual values
   - ค่า MSE/RMSE บน validation set

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

DL69/wk11/
├── 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, val_loss) → เรียกทุก epoch
    """
    import torch
    import torch.nn as nn

    # 1. โหลดข้อมูลอนุกรมเวลา
    #    data = read_csv('data/temperature.csv')

    # 2. Sliding window → supervised learning
    #    window_size = 24  (เช่น 24 ชั่วโมงย้อนหลัง)
    #    X[i] = data[i:i+window_size]
    #    y[i] = data[i+window_size]

    # 3. Train/Val split (80/20)

    # 4. สร้างโมเดล LSTM
    class LSTMModel(nn.Module):
        def __init__(self):
            super().__init__()
            self.lstm = nn.LSTM(input_size=1,
                              hidden_size=64,
                              num_layers=2,
                              batch_first=True)
            self.fc = nn.Linear(64, 1)

        def forward(self, x):
            out, _ = self.lstm(x)
            return self.fc(out[:, -1, :])

    # 5. Training loop
    for epoch in range(num_epochs):
        # forward, loss, backward, step
        # เรียก on_progress(epoch, loss, val_loss)
        pass

    # 6. บันทึกผลลัพธ์
    #    - predicted vs actual plot → PNG
    #    - training loss curve → PNG

<!-- dashboard/templates/dashboard/index.html -->
<!DOCTYPE html>
<html lang="th">
<head>
  <title>Timeseries LSTM 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, valLoss: 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>Val Loss: <span x-text="valLoss"></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);
      valLoss = m.val_loss.toFixed(4);
      drawChart(m.epoch, m.loss, m.val_loss);
    };
  }
  </script>
</body>
</html>

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

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

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

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

# 5. ตรวจสอบไฟล์ผลลัพธ์
ls dashboard/static/dashboard/
#    → loss_curve.png
#    → prediction_plot.png

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

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

# ตรวจสอบก่อนส่ง
uv sync
uv run manage.py runserver
# → หน้า landing แสดงรหัสและชื่อ
# → กดเริ่มฝึกสอน → SSE ทำงาน
# → ได้ prediction_plot.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, val_loss อัปเดต

# 5. ผลลัพธ์ครบถ้วน?
#    - loss_curve.png มีอยู่
#    - prediction_plot.png มีอยู่

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