From 12e230332e24f1f84e26659f76dce11dfd5099ee Mon Sep 17 00:00:00 2001
From: admin <peancharoen.pslcp3@gmail.com>
Date: Fri, 19 Jun 2026 11:28:59 +0700
Subject: [PATCH] 690619:1128 240 #02

---
 .../ai/services/vram-monitor.service.ts       |  23 ++-
 .../ai/tests/vram-monitor.service.spec.ts     |  16 ++
 frontend/app/(admin)/admin/ai/page.tsx        | 161 +++++++++---------
 3 files changed, 120 insertions(+), 80 deletions(-)

diff --git a/backend/src/modules/ai/services/vram-monitor.service.ts b/backend/src/modules/ai/services/vram-monitor.service.ts
index 11790ebf..3f7988f1 100644
--- a/backend/src/modules/ai/services/vram-monitor.service.ts
+++ b/backend/src/modules/ai/services/vram-monitor.service.ts
@@ -138,10 +138,31 @@ export class VramMonitorService {
 
   /**
    * ตรวจสอบว่า VRAM เพียงพอสำหรับความต้องการโหลดโมเดลหรือไม่
+   * ถ้าไม่มีโมเดลโหลดอยู่เลย จะอนุญาตให้โหลดโมเดลใหม่ได้เสมอ (ป้องกัน false positive)
    */
   async hasVramCapacity(requiredMb: number): Promise<boolean> {
     const headroom = await this.getVramHeadroom();
-    return headroom.availableMb >= requiredMb;
+    // ถ้าไม่มีโมเดลโหลดอยู่เลย อนุญาตให้โหลดโมเดลใหม่ได้เสมอ
+    if (headroom.usedMb === 0 && headroom.querySuccess) {
+      this.logger.log(
+        `No models loaded in VRAM, allowing model load (required=${requiredMb}MB)`
+      );
+      return true;
+    }
+    // ถ้า query ล้มเหลว ใช้ optimistic fallback (assume no VRAM used)
+    if (!headroom.querySuccess) {
+      this.logger.log(
+        `VRAM query failed, using optimistic fallback (required=${requiredMb}MB)`
+      );
+      return true;
+    }
+    const hasCapacity = headroom.availableMb >= requiredMb;
+    if (!hasCapacity) {
+      this.logger.warn(
+        `VRAM insufficient: available=${headroom.availableMb}MB, required=${requiredMb}MB`
+      );
+    }
+    return hasCapacity;
   }
 
   /**
diff --git a/backend/src/modules/ai/tests/vram-monitor.service.spec.ts b/backend/src/modules/ai/tests/vram-monitor.service.spec.ts
index 016c88b2..935c977e 100644
--- a/backend/src/modules/ai/tests/vram-monitor.service.spec.ts
+++ b/backend/src/modules/ai/tests/vram-monitor.service.spec.ts
@@ -100,6 +100,22 @@ describe('VramMonitorService', () => {
       const result = await service.hasVramCapacity(3000); // query available is 2048MB, required 3000MB
       expect(result).toBe(false);
     });
+
+    it('ควรคืน true เมื่อไม่มีโมเดลโหลดอยู่เลย (ป้องกัน false positive)', async () => {
+      mockedAxios.get.mockResolvedValue({
+        data: {
+          models: [], // ไม่มีโมเดลโหลด
+        },
+      });
+      const result = await service.hasVramCapacity(5000); // ต้องการ 5GB แม้ availableMb = 8192MB
+      expect(result).toBe(true);
+    });
+
+    it('ควรคืน true เมื่อ query ล้มเหลว (optimistic fallback)', async () => {
+      mockedAxios.get.mockRejectedValue(new Error('Connection timeout'));
+      const result = await service.hasVramCapacity(5000);
+      expect(result).toBe(true);
+    });
   });
   describe('getVramStatus', () => {
     it('ควรคืน status ที่ถูกต้องเมื่อ Ollama คืน models', async () => {
diff --git a/frontend/app/(admin)/admin/ai/page.tsx b/frontend/app/(admin)/admin/ai/page.tsx
index 2b3c66be..a8fdea48 100644
--- a/frontend/app/(admin)/admin/ai/page.tsx
+++ b/frontend/app/(admin)/admin/ai/page.tsx
@@ -615,85 +615,6 @@ export default function AiAdminConsolePage() {
         </div>
       </div>
 
-      <Card>
-        <CardHeader>
-          <CardTitle className="flex items-center gap-2 text-lg">
-            <Power className="h-5 w-5" />
-            System Toggle
-          </CardTitle>
-        </CardHeader>
-        <CardContent>
-          <div className="flex flex-col gap-5 sm:flex-row sm:items-center sm:justify-between">
-            <div className="space-y-1">
-              <div className="text-base font-medium">
-                {aiEnabled ? 'AI พร้อมให้ผู้ใช้ทั่วไปใช้งาน' : 'AI ถูกปิดสำหรับผู้ใช้ทั่วไป'}
-              </div>
-              <div className="text-sm text-muted-foreground">
-                Superadmin ยังสามารถเข้าถึงส่วนทดสอบและดูแลระบบได้ตามสิทธิ์
-              </div>
-              <div className="text-xs text-muted-foreground flex items-center gap-1.5 pt-1 flex-wrap">
-                <span>Active Models:</span>
-                <Badge
-                  variant="outline"
-                  className="text-[10px] py-0 px-1.5 border-primary/20 text-primary bg-primary/5 font-semibold"
-                >
-                  {isHealthLoading ? 'Loading...' : toCanonicalModel(health?.activeModels?.main ?? 'np-dms-ai')}
-                </Badge>
-                <span className="text-muted-foreground/50">+</span>
-                <Badge
-                  variant="outline"
-                  className="text-[10px] py-0 px-1.5 border-purple-500/20 text-purple-600 dark:text-purple-400 bg-purple-500/5 font-semibold"
-                >
-                  {isHealthLoading ? 'Loading...' : toCanonicalModel(health?.activeModels?.ocr ?? 'np-dms-ocr')}
-                </Badge>
-              </div>
-            </div>
-            <div className="flex items-center gap-3">
-              {busy && <Loader2 className="h-4 w-4 animate-spin" />}
-              <Switch
-                checked={aiEnabled}
-                disabled={busy || isError}
-                aria-label="Toggle AI features"
-                onCheckedChange={handleToggle}
-              />
-            </div>
-          </div>
-          {isError && (
-            <div className="mt-4 rounded-md border border-destructive/30 bg-destructive/10 p-3 text-sm text-destructive">
-              ไม่สามารถโหลดสถานะ AI ได้ กรุณาลองใหม่อีกครั้ง
-            </div>
-          )}
-        </CardContent>
-      </Card>
-
-      <div className="grid gap-4 md:grid-cols-2">
-        <Card>
-          <CardHeader>
-            <CardTitle className="flex items-center gap-2 text-base">
-              <ShieldCheck className="h-5 w-5" />
-              Protection
-            </CardTitle>
-          </CardHeader>
-          <CardContent className="text-sm text-muted-foreground">
-            เมื่อปิด AI ระบบจะบล็อก AI inference endpoints สำหรับผู้ใช้ทั่วไปด้วย HTTP 503
-            และให้ผู้ใช้กรอกข้อมูลเองชั่วคราว
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader>
-            <CardTitle className="text-base">Polling</CardTitle>
-          </CardHeader>
-          <CardContent className="flex items-center justify-between gap-3 text-sm text-muted-foreground">
-            <span>
-              อัปเดตสถานะทุก 30 วินาที
-              {(isFetching || isHealthLoading) && !(isLoading || isHealthLoading) ? ' (กำลังรีเฟรช)' : ''}
-            </span>
-            <Button type="button" variant="outline" size="sm" onClick={() => void handleRefreshAll()}>
-              Refresh
-            </Button>
-          </CardContent>
-        </Card>
-      </div>
       <Tabs defaultValue="overview" className="w-full space-y-6">
         <TabsList className="grid w-full grid-cols-3 max-w-[500px]">
           <TabsTrigger value="overview">System Toggle</TabsTrigger>
@@ -701,6 +622,88 @@ export default function AiAdminConsolePage() {
           <TabsTrigger value="sandbox">3-Step Pipeline Sandbox</TabsTrigger>
         </TabsList>
 
+        <TabsContent value="overview" className="space-y-6">
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2 text-lg">
+                <Power className="h-5 w-5" />
+                System Toggle
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="flex flex-col gap-5 sm:flex-row sm:items-center sm:justify-between">
+                <div className="space-y-1">
+                  <div className="text-base font-medium">
+                    {aiEnabled ? 'AI พร้อมให้ผู้ใช้ทั่วไปใช้งาน' : 'AI ถูกปิดสำหรับผู้ใช้ทั่วไป'}
+                  </div>
+                  <div className="text-sm text-muted-foreground">
+                    Superadmin ยังสามารถเข้าถึงส่วนทดสอบและดูแลระบบได้ตามสิทธิ์
+                  </div>
+                  <div className="text-xs text-muted-foreground flex items-center gap-1.5 pt-1 flex-wrap">
+                    <span>Active Models:</span>
+                    <Badge
+                      variant="outline"
+                      className="text-[10px] py-0 px-1.5 border-primary/20 text-primary bg-primary/5 font-semibold"
+                    >
+                      {isHealthLoading ? 'Loading...' : toCanonicalModel(health?.activeModels?.main ?? 'np-dms-ai')}
+                    </Badge>
+                    <span className="text-muted-foreground/50">+</span>
+                    <Badge
+                      variant="outline"
+                      className="text-[10px] py-0 px-1.5 border-purple-500/20 text-purple-600 dark:text-purple-400 bg-purple-500/5 font-semibold"
+                    >
+                      {isHealthLoading ? 'Loading...' : toCanonicalModel(health?.activeModels?.ocr ?? 'np-dms-ocr')}
+                    </Badge>
+                  </div>
+                </div>
+                <div className="flex items-center gap-3">
+                  {busy && <Loader2 className="h-4 w-4 animate-spin" />}
+                  <Switch
+                    checked={aiEnabled}
+                    disabled={busy || isError}
+                    aria-label="Toggle AI features"
+                    onCheckedChange={handleToggle}
+                  />
+                </div>
+              </div>
+              {isError && (
+                <div className="mt-4 rounded-md border border-destructive/30 bg-destructive/10 p-3 text-sm text-destructive">
+                  ไม่สามารถโหลดสถานะ AI ได้ กรุณาลองใหม่อีกครั้ง
+                </div>
+              )}
+            </CardContent>
+          </Card>
+
+          <div className="grid gap-4 md:grid-cols-2">
+            <Card>
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2 text-base">
+                  <ShieldCheck className="h-5 w-5" />
+                  Protection
+                </CardTitle>
+              </CardHeader>
+              <CardContent className="text-sm text-muted-foreground">
+                เมื่อปิด AI ระบบจะบล็อก AI inference endpoints สำหรับผู้ใช้ทั่วไปด้วย HTTP 503
+                และให้ผู้ใช้กรอกข้อมูลเองชั่วคราว
+              </CardContent>
+            </Card>
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-base">Polling</CardTitle>
+              </CardHeader>
+              <CardContent className="flex items-center justify-between gap-3 text-sm text-muted-foreground">
+                <span>
+                  อัปเดตสถานะทุก 30 วินาที
+                  {(isFetching || isHealthLoading) && !(isLoading || isHealthLoading) ? ' (กำลังรีเฟรช)' : ''}
+                </span>
+                <Button type="button" variant="outline" size="sm" onClick={() => void handleRefreshAll()}>
+                  Refresh
+                </Button>
+              </CardContent>
+            </Card>
+          </div>
+        </TabsContent>
+
         <TabsContent value="playground" className="space-y-6">
           <Card className="border border-border/50 bg-background/50 backdrop-blur-md">
             <CardHeader>