🌡️ Compute Pressure API 완벽 가이드: 브라우저 발열·CPU 부하 감지와 적응형 성능 제어

[ nominal ]  ──(부하 증가)──>  [ fair ]  ──(서멀 경고)──>  [ serious ]  ──(한계치)──>  [ critical ]
     │                            │                             │                          │
   정상                         안정적 부하                     심각한 발열                치명적 과부하
 최상의 품질 유지             일부 비필수 작업 유예           해상도/연산 주기 대폭 감소     최소 기능만 유지

// 1. 브라우저 지원 여부 확인
if ('PressureObserver' in window) {
  try {
    // 2. 콜백 함수 정의
    const handlePressureChange = (records, observer) => {
      for (const record of records) {
        console.log(`[Pressure Source]: ${record.source}`);
        console.log(`[Current State]: ${record.state}`);
        console.log(`[Timestamp]: ${record.time}`);

        switch (record.state) {
          case 'nominal':
            applyQualityProfile('ultra');
            break;
          case 'fair':
            applyQualityProfile('high');
            break;
          case 'serious':
            applyQualityProfile('medium');
            break;
          case 'critical':
            applyQualityProfile('low');
            break;
        }
      }
    };

    // 3. 옵저버 생성
    const observer = new PressureObserver(handlePressureChange);

    // 4. CPU 소스 관측 시작 (샘플링 간격 설정 가능: 단위 ms)
    await observer.observe('cpu', {
      sampleInterval: 1000 // 최소 1000ms 간격으로 수집 (브라우저 정책에 따라 더 길어질 수 있음)
    });
    console.log('Compute Pressure 관측이 시작되었습니다.');
  } catch (error) {
    console.error('PressureObserver 시작 실패:', error);
  }
} else {
  console.warn('이 브라우저는 Compute Pressure API를 지원하지 않습니다.');
}

// 특정 소스 해제
observer.unobserve('cpu');

// 전체 옵저버 해제
observer.disconnect();

class AdaptiveVideoProcessor {
  constructor(videoElement, canvasElement) {
    this.video = videoElement;
    this.canvas = canvasElement;
    this.ctx = canvasElement.getContext('2d');
    
    // 해상도 스케일 계수 (1.0 = 원본 해상도)
    this.scaleFactor = 1.0;
    this.blurRadius = 15;
    this.isRunning = false;
    this.observer = null;
  }

  async init() {
    if ('PressureObserver' in window) {
      this.observer = new PressureObserver((records) => {
        const latest = records[records.length - 1];
        this.adjustQuality(latest.state);
      });

      await this.observer.observe('cpu', { sampleInterval: 1500 });
    }
    this.startRenderLoop();
  }

  adjustQuality(state) {
    console.info(`[VideoEngine] 시스템 압력 변경 감지: ${state}`);
    switch (state) {
      case 'nominal':
        this.scaleFactor = 1.0; // 1080p 전체 해상도 처리
        this.blurRadius = 15;
        break;
      case 'fair':
        this.scaleFactor = 0.75; // 75% 스케일 다운
        this.blurRadius = 10;
        break;
      case 'serious':
        this.scaleFactor = 0.5; // 50% 스케일 다운 (연산량 1/4)
        this.blurRadius = 6;
        break;
      case 'critical':
        this.scaleFactor = 0.25; // 필터 연산 최소화 혹은 바이패스
        this.blurRadius = 0; // 블러 효과 끔
        break;
    }
  }

  startRenderLoop() {
    this.isRunning = true;
    const render = () => {
      if (!this.isRunning) return;

      const targetWidth = Math.floor(this.video.videoWidth * this.scaleFactor);
      const targetHeight = Math.floor(this.video.videoHeight * this.scaleFactor);

      if (this.canvas.width !== targetWidth && targetWidth > 0) {
        this.canvas.width = targetWidth;
        this.canvas.height = targetHeight;
      }

      if (this.blurRadius > 0) {
        this.ctx.filter = `blur(${this.blurRadius}px)`;
      } else {
        this.ctx.filter = 'none';
      }

      this.ctx.drawImage(this.video, 0, 0, targetWidth, targetHeight);
      requestAnimationFrame(render);
    };
    requestAnimationFrame(render);
  }

  destroy() {
    this.isRunning = false;
    if (this.observer) {
      this.observer.disconnect();
    }
  }
}

class AdaptiveModelScheduler {
  constructor(inferenceEngine) {
    this.engine = inferenceEngine;
    this.yieldDelayMs = 0;
    this.batchChunkSize = 8;
    this.observer = null;
  }

  async startMonitoring() {
    if (!('PressureObserver' in window)) return;

    this.observer = new PressureObserver((records) => {
      const state = records[records.length - 1].state;
      this.reschedule(state);
    });

    await this.observer.observe('cpu', { sampleInterval: 2000 });
  }

  reschedule(state) {
    switch (state) {
      case 'nominal':
        this.yieldDelayMs = 0;      // 풀 스피드 추론
        this.batchChunkSize = 8;
        break;
      case 'fair':
        this.yieldDelayMs = 5;      // 이벤트 루프에 짧은 양보
        this.batchChunkSize = 4;
        break;
      case 'serious':
        this.yieldDelayMs = 25;     // UI 프레임 확보를 위한 명시적 슬립
        this.batchChunkSize = 2;
        break;
      case 'critical':
        this.yieldDelayMs = 80;     // 심각한 쿨다운 딜레이
        this.batchChunkSize = 1;
        break;
    }
  }

  async *generateStream(promptTokens) {
    let processed = 0;
    while (processed < promptTokens.length) {
      const chunk = promptTokens.slice(processed, processed + this.batchChunkSize);
      const output = await this.engine.forward(chunk);
      processed += chunk.length;
      yield output;

      // 시스템 압력 상태에 따라 메인 스레드에 제어권 반환 및 열 방출 유도
      if (this.yieldDelayMs > 0) {
        await new Promise((r) => setTimeout(r, this.yieldDelayMs));
      }
    }
  }
}

[부하 높음: serious] ──> 품질 다운그레이드 ──> [즉시 부하 하강: nominal] ──> 즉시 품질 업그레이드 ──> [다시 발열: serious] (무한 반복!)

class PressureHysteresisManager {
  constructor(onQualityChange) {
    this.onQualityChange = onQualityChange;
    this.currentState = 'nominal';
    this.upgradeTimer = null;
    this.COOLDOWN_PERIOD_MS = 10000; // 10초간 안정 상태가 유지되어야 업그레이드
  }

  processRecord(record) {
    const newState = record.state;
    const severityOrder = { nominal: 0, fair: 1, serious: 2, critical: 3 };

    const currentSeverity = severityOrder[this.currentState];
    const newSeverity = severityOrder[newState];

    if (newSeverity > currentSeverity) {
      // 1. 부하가 심해지면 지체 없이 즉각 다운그레이드
      if (this.upgradeTimer) {
        clearTimeout(this.upgradeTimer);
        this.upgradeTimer = null;
      }
      this.currentState = newState;
      this.onQualityChange(this.currentState);
    } else if (newSeverity < currentSeverity) {
      // 2. 부하가 낮아졌다면 즉시 올리지 않고 쿨다운 대기
      if (!this.upgradeTimer) {
        this.upgradeTimer = setTimeout(() => {
          this.currentState = newState;
          this.onQualityChange(this.currentState);
          this.upgradeTimer = null;
          console.log(`[Hysteresis] 하드웨어가 10초간 안정되어 품질을 ${newState}로 복구합니다.`);
        }, this.COOLDOWN_PERIOD_MS);
      }
    }
  }
}