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

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

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

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

3. หลังฝึกสอนเสร็จ แสดงผลลัพธ์
   - ตัวอย่างข้อความที่สร้าง (samples.txt)
   - Training loss curve

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

DL69/wk13/
├── 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/
    └── corpus.txt            # ข้อความสำหรับฝึกสอน

def train(on_progress=None):
    """
    on_progress(epoch, loss, sample_text) → เรียกทุก epoch
    """
    import torch
    import torch.nn as nn

    # 1. โหลดข้อความ
    #    text = open('data/corpus.txt').read()

    # 2. สร้าง vocabulary
    #    chars = sorted(set(text))
    #    char_to_idx = {c: i for i, c in enumerate(chars)}

    # 3. สร้าง training sequences
    #    seq_length = 100
    #    X[i] = text[i:i+seq_length]
    #    y[i] = text[i+1:i+seq_length+1]

    # 4. สร้างโมเดล LSTM
    class TextGenerator(nn.Module):
        def __init__(self, vocab_size, embed_dim=64, hidden=128):
            super().__init__()
            self.embed = nn.Embedding(vocab_size, embed_dim)
            self.lstm = nn.LSTM(embed_dim, hidden, batch_first=True)
            self.fc = nn.Linear(hidden, vocab_size)

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

    # 5. Training loop
    for epoch in range(num_epochs):
        # forward, loss, backward, step
        # ทุก 10 epoch: generate sample text
        # เรียก on_progress(epoch, loss, sample)
        pass

    # 6. บันทึกผลลัพธ์
    #    - samples.txt (ตัวอย่างข้อความ)
    #    - loss_curve.png

<!-- dashboard/templates/dashboard/index.html -->
<!DOCTYPE html>
<html lang="th">
<head>
  <title>Text Generator 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, sample: '' }">

  <!-- ★ ใส่รหัสนักศึกษาและชื่อ-นามสกุลตรงนี้ -->
  <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>

  <h3>ตัวอย่างข้อความที่สร้าง:</h3>
  <pre x-text="sample"></pre>

  <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);
      if (m.sample) sample = m.sample;
      drawChart(m.epoch, m.loss);
    };
  }
  </script>
</body>
</html>

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

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

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

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

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

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

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

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

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

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