Qwik Resumability กับ MLOps Workflow — วิธีสร้าง

Qwik กับ MLOps Dashboard

MLOps Dashboard เป็นเครื่องมือสำคัญสำหรับ ML Engineers ในการ Monitor Model Performance, Track Experiments, จัดการ Pipeline และดู Metrics ต่างๆ ปัญหาคือ Dashboard มักมี Components จำนวนมาก เช่น Charts, Tables, Metrics Cards, Log Viewers ทำให้โหลดช้าเมื่อใช้ Framework แบบ Hydration

เนื้อหาเกี่ยวข้อง — แนะนำให้อ่าน Airbyte ETL Production Setup Guide

Qwik แก้ปัญหานี้ด้วย Resumability JavaScript โหลดเฉพาะ Component ที่ User กำลัง Interact ทำให้ Dashboard ที่มี 50+ Components โหลดเร็วเท่ากับที่มี 5 Components เพราะ Initial JavaScript Bundle แทบเป็นศูนย์

เนื้อหาเกี่ยวข้อง — ดูเพิ่มเติมเรื่อง financial freedom examples

Model Monitoring Component

// src/components/drift-monitor.tsx
// Data Drift & Model Performance Monitor
import { component$, useSignal, useVisibleTask$ } from '@builder.io/qwik';

interface DriftData {
  feature: string;
  psi: number;          // Population Stability Index
  ks_stat: number;      // Kolmogorov-Smirnov Statistic
  status: 'stable' | 'warning' | 'drift';
  timestamp: string;
}

interface ModelPerf {
  accuracy: number;
  precision: number;
  recall: number;
  f1: number;
  latency_p50: number;
  latency_p99: number;
  throughput: number;
}

export const DriftMonitor = component$<{ modelName: string | null }>(
  (props) => {
    const driftData = useSignal<DriftData[]>([]);
    const perfData = useSignal<ModelPerf | null>(null);
    const isLoading = useSignal(true);

    // useVisibleTask$ — โหลดเฉพาะเมื่อ Component Visible
    useVisibleTask$(async ({ track, cleanup }) => {
      track(() => props.modelName);
      if (!props.modelName) return;

      const fetchData = async () => {
        try {
          const [driftRes, perfRes] = await Promise.all([
            fetch(`/api/monitoring/drift/`),
            fetch(`/api/monitoring/performance/`),
          ]);
          driftData.value = await driftRes.json();
          perfData.value = await perfRes.json();
        } catch (e) {
          console.error('Monitoring fetch error:', e);
        } finally {
          isLoading.value = false;
        }
      };

      await fetchData();
      const interval = setInterval(fetchData, 30000);
      cleanup(() => clearInterval(interval));
    });

    if (isLoading.value) {
      return <div class="text-zinc-400">Loading monitoring data...</div>;
    }

    return (
      <div class="space-y-6">
        <h2 class="text-xl font-semibold">
          Model: {props.modelName}
        </h2>

        {/* Performance Metrics */}
        {perfData.value && (
          <div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
            <PerfCard label="Accuracy"
              value={`%`}
              threshold={0.9} current={perfData.value.accuracy} />
            <PerfCard label="F1 Score"
              value={perfData.value.f1.toFixed(3)}
              threshold={0.85} current={perfData.value.f1} />
            <PerfCard label="Latency P99"
              value={`ms`}
              threshold={100} current={perfData.value.latency_p99}
              inverse />
            <PerfCard label="Throughput"
              value={`/s`}
              threshold={100} current={perfData.value.throughput} />
          </div>
        )}

        {/* Drift Table */}
        <div class="bg-zinc-900 rounded-xl border border-zinc-800 overflow-hidden">
          <div class="px-5 py-3 border-b border-zinc-800">
            <h3 class="font-medium">Feature Drift Detection</h3>
          </div>
          <table class="w-full text-sm">
            <thead class="text-zinc-400 border-b border-zinc-800">
              <tr>
                <th class="px-5 py-3 text-left">Feature</th>
                <th class="px-5 py-3 text-left">PSI</th>
                <th class="px-5 py-3 text-left">KS Stat</th>
                <th class="px-5 py-3 text-left">Status</th>
              </tr>
            </thead>
            <tbody>
              {driftData.value.map((d) => (
                <tr key={d.feature} class="border-b border-zinc-800/50">
                  <td class="px-5 py-3 font-mono">{d.feature}</td>
                  <td class="px-5 py-3">{d.psi.toFixed(4)}</td>
                  <td class="px-5 py-3">{d.ks_stat.toFixed(4)}</td>
                  <td class="px-5 py-3">
                    <span class={`px-2 py-1 rounded text-xs font-medium
                      `}>
                      {d.status.toUpperCase()}
                    </span>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    );
  }
);

const PerfCard = component$<{
  label: string; value: string;
  threshold: number; current: number; inverse?: boolean;
}>((props) => {
  const isGood = props.inverse
    ? props.current <= props.threshold
    : props.current >= props.threshold;

  return (
    <div class={`rounded-xl p-4 border `}>
      <p class="text-sm text-zinc-400">{props.label}</p>
      <p class="text-2xl font-bold mt-1">{props.value}</p>
    </div>
  );
});

MLOps Workflow Automation

Qwik Resumability คืออะไร

Qwik ใช้ Resumability แทน Hydration JavaScript โหลดเฉพาะ Component ที่ User Interact Serialize State ใน HTML แล้ว Resume ทำให้ Initial Load เร็วมาก เหมาะกับ Dashboard ที่มี Components เยอะ

แนะนำเพิ่มเติม — SiamCafeBook

เนื้อหาเกี่ยวข้อง — อ่านต่อ: CrewAI Multi-Agent Consensus Algorithm