Phase P~S 전체 작업물: 검증 스크립트, 블록 템플릿, 설계 문서, 코드 수정
포함 내용: - Phase P/Q/R/S 설계 문서 (IMPROVEMENT-PHASE-*.md) - 영역별 검증 스크립트 (scripts/verify_*.py, test_*.py) - 블록 템플릿 추가 (cards, emphasis 변형) - 코드 수정: block_search, content_editor, design_director, slide_measurer - catalog.yaml 블록 목록 업데이트 - CLAUDE.md, PROGRESS.md, README.md 업데이트 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
175
scripts/verify_claude_1_2.py
Normal file
175
scripts/verify_claude_1_2.py
Normal file
@@ -0,0 +1,175 @@
|
||||
"""검증 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())
|
||||
Reference in New Issue
Block a user