C.E.L_Slide_test2/scripts/verify_claude_1_2.py

"""검증 1, 2 재시도 — Claude API 직접 호출.

Kei는 콘텐츠 분석/판단. Claude가 HTML 코드 생성.
"""
from __future__ import annotations
import asyncio, json, sys, time, datetime, base64, re
from pathlib import Path

ROOT = Path(__file__).parent.parent
sys.path.insert(0, str(ROOT))


async def main():
    from src.slide_measurer import measure_rendered_heights, capture_slide_screenshot
    from src.config import settings
    import anthropic

    out_dir = ROOT / "data" / "runs" / f"verify_claude_{datetime.datetime.now().strftime('%Y%m%d_%H%M%S')}"
    out_dir.mkdir(parents=True, exist_ok=True)
    print(f"출력: {out_dir}\n")

    client = anthropic.AsyncAnthropic(api_key=settings.anthropic_api_key)
    t0 = time.time()

    # ═══════════════════════════════════════
    # 검증 1: 배경 사례 박스
    # ═══════════════════════════════════════
    print("=== 검증 1: 배경 사례 박스 (Claude) ===")

    prompt_1 = """다음 콘텐츠를 다크 배경 박스 HTML로 만들어라.

## 크기
- width: 100%, height: 176px (고정, overflow 금지)

## 콘텐츠 (축약 금지, 그대로 사용)
- 제목: "현실 — 용어의 혼용"
- 본문: "건설산업에서 DX와 BIM이 동일 개념으로 인식되고 있다. 실질적으로 DX는 산업 전반의 프로세스를 혁신하는 상위개념이며, BIM은 3차원 모델 기반의 정보 관리 도구로서 DX의 하위 기술에 해당한다."
- 사례 1: "스마트 건설 활성화 방안(2022.07)" / "추진과제: 건설산업 디지털화 / 실행과제: BIM 전면 도입, BIM 전문인력 양성"
- 사례 2: "제7차 건설기술진흥 기본계획(2023.12)" / "추진방향: 디지털 전환을 통한 스마트 건설 확산 / 추진과제: BIM 도입으로 건설산업 디지털화"

## 디자인
- 배경: linear-gradient(135deg, #1e293b, #0f172a), border-radius: 8px
- width: 100%, height: 176px
- 제목: 13px bold #93c5fd
- 본문: 12px #e2e8f0, "DX와 BIM"을 <strong> 처리
- 사례 2개 가로 나란히 (flex/grid)
- 사례 카드: rgba(255,255,255,0.06), border-left: 3px solid #60a5fa
- 사례 제목: 11px bold #fbbf24
- 사례 내용: 10px #cbd5e1

HTML + inline <style>만 반환. 설명 없이 코드만."""

    html_1 = await _call_claude(client, prompt_1)
    if html_1:
        wrapped = _wrap(html_1, 707)
        s = await asyncio.to_thread(capture_slide_screenshot, wrapped)
        _save(out_dir, "verify1.html", wrapped)
        if s:
            (out_dir / "verify1.png").write_bytes(base64.b64decode(s))
        print(f"  [{time.time()-t0:.0f}s] 완료. HTML {len(html_1)}자")
    else:
        print(f"  [{time.time()-t0:.0f}s] ❌ 실패")

    # ═══════════════════════════════════════
    # 검증 2: DX 포함 관계 (카드 구조)
    # ═══════════════════════════════════════
    print("\n=== 검증 2: DX 포함 관계 (Claude) ===")

    prompt_2 = """다음 포함 관계를 시각화하는 HTML을 만들어라.

## 크기
- width: 100%, max-height: 293px

## 구조 (정확히 이 구조를 따르라)

1. 제목: "DX와 핵심기술의 올바른 관계" (14px bold #2563eb 가운데)

2. DX 큰 박스:
   - border: 3px solid #2563eb, border-radius: 14px
   - background: linear-gradient(180deg, #eff6ff, #dbeafe)
   - position: relative
   - 라벨 배지 (absolute top:-11px left:50% transform:translateX(-50%)):
     "DX — 디지털 전환 (상위개념)" background:#2563eb color:white font-size:12px font-weight:900 padding:3px 18px border-radius:10px
   - 설명 (11px #1e40af 가운데):
     "BIM, GIS, 디지털 트윈 등 핵심기술의 융합을 통해서만 실현 가능"
   - 카드 3개 가로 나란히 (gap:10px):
     각 카드: background:white, border:2px solid #93c5fd, border-radius:8px, padding:10px, text-align:center
     각 카드 상단 원형 아이콘: 36px, background:linear-gradient(135deg,#93c5fd,#2563eb), color:white, font-weight:900
     - G | GIS | "지리적 데이터를 공간 분석하여 시각적으로 표현, 위치기반 정보 제공"
     - B | BIM | "시설물 생애주기 정보를 3차원 모델 기반으로 통합·관리하는 도구"
     - T | 디지털 트윈 | "현실 세계의 물리적 객체를 디지털 환경에 동일하게 구현"
     카드 설명: 10px #64748b

3. 핵심 메시지 박스 (DX 박스 아래):
   - background:#f0f9ff, border:2px solid #bae6fd, border-radius:8px, padding:10px, text-align:center
   - "BIM ≠ DX — BIM은 DX를 실현하기 위한 핵심 기술 중 하나일 뿐이다"
   - "BIM ≠ DX" 부분: color:#dc2626 font-weight:900
   - 나머지: 13px bold #0c4a6e

HTML + inline <style>만 반환. 설명 없이 코드만."""

    html_2 = await _call_claude(client, prompt_2)
    if html_2:
        wrapped = _wrap(html_2, 707)
        s = await asyncio.to_thread(capture_slide_screenshot, wrapped)
        _save(out_dir, "verify2.html", wrapped)
        if s:
            (out_dir / "verify2.png").write_bytes(base64.b64decode(s))
        print(f"  [{time.time()-t0:.0f}s] 완료. HTML {len(html_2)}자")
    else:
        print(f"  [{time.time()-t0:.0f}s] ❌ 실패")

    print(f"\n총 소요: {time.time()-t0:.0f}초")
    print(f"결과: {out_dir}")


async def _call_claude(client, prompt: str) -> str | None:
    try:
        response = await client.messages.create(
            model="claude-sonnet-4-20250514",
            max_tokens=8192,
            messages=[{"role": "user", "content": prompt}],
        )
        text = response.content[0].text if response.content else ""
        if not text:
            return None

        # ```html ... ``` 추출
        match = re.search(r"```html\s*(.*?)```", text, re.DOTALL)
        if match:
            return match.group(1).strip()

        # HTML 직접 추출
        match = re.search(r"(<(?:div|style)[^>]*>.*)", text, re.DOTALL)
        if match:
            return match.group(1).strip()

        return text.strip()
    except Exception as e:
        print(f"  Claude API 오류: {e}")
        return None


def _wrap(inner_html: str, width: int) -> str:
    return f"""<!DOCTYPE html>
<html lang="ko"><head><meta charset="UTF-8">
<style>
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');
* {{ margin: 0; padding: 0; box-sizing: border-box; }}
.slide {{
    width: 1280px; height: 720px; overflow: hidden;
    background: white;
    font-family: 'Pretendard Variable', sans-serif;
    display: flex; align-items: center; justify-content: center;
}}
.test-container {{ width: {width}px; }}
</style>
</head><body>
<div class="slide"><div class="test-container">
{inner_html}
</div></div>
</body></html>"""


def _save(d, n, data):
    (d / n).write_text(data if isinstance(data, str) else json.dumps(data, ensure_ascii=False, indent=2), encoding="utf-8")


if __name__ == "__main__":
    import logging
    logging.basicConfig(level=logging.INFO, format="%(asctime)s %(levelname)s %(message)s", datefmt="%H:%M:%S")
    logging.getLogger("selenium").setLevel(logging.WARNING)
    logging.getLogger("urllib3").setLevel(logging.WARNING)
    logging.getLogger("httpx").setLevel(logging.WARNING)
    asyncio.run(main())