C.E.L_Slide_test2/scripts/verify_core_samples.py

"""본심 4가지 샘플: 이미지와 텍스트가 어우러지는 방식."""
from __future__ import annotations
import asyncio, sys, datetime, base64
from pathlib import Path

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


async def main():
    from src.slide_measurer import capture_slide_screenshot

    out_dir = ROOT / "data" / "runs" / f"core_samples_{datetime.datetime.now().strftime('%Y%m%d_%H%M%S')}"
    out_dir.mkdir(parents=True, exist_ok=True)

    img_path = Path("D:/ad-hoc/cel/public/assets/images/dx1.png")
    img_b64 = base64.b64encode(img_path.read_bytes()).decode()
    img_src = f"data:image/png;base64,{img_b64}"

    common_css = """
* { margin:0; padding:0; box-sizing:border-box; }
.core {
    width: 767px;
    font-family: 'Pretendard Variable', sans-serif;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 14px 18px;
    overflow: hidden;
    word-break: keep-all;
}
.core-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.core-label {
    background: #1e293b;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 12px;
    border-radius: 4px;
}
.popup-link {
    font-size: 10px;
    color: #2563eb;
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
}
.core-text {
    font-size: 12px;
    color: #1e293b;
    line-height: 1.75;
}
.bp {
    padding-left: 14px;
    text-indent: -14px;
    margin-bottom: 5px;
}
.bp::before {
    content: '•';
    display: inline-block;
    width: 14px;
    text-indent: 0;
    color: #1e293b;
    font-weight: 700;
}
.sp {
    padding-left: 28px;
    text-indent: -14px;
    margin-bottom: 4px;
    font-size: 11px;
    color: #475569;
}
.sp::before {
    content: '◦';
    display: inline-block;
    width: 14px;
    text-indent: 0;
    color: #64748b;
}
.core-text b { font-weight: 700; color: #1e293b; }
.key-msg {
    background: #f0f9ff;
    border: 2px solid #bae6fd;
    border-radius: 6px;
    padding: 5px 12px;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: #0c4a6e;
    margin-top: 8px;
    clear: both;
}
.key-msg em {
    color: #dc2626;
    font-style: normal;
    font-weight: 900;
}
"""

    text_content = """
        <div class="bp">DX는 BIM과 같은 디지털기술을 기반으로 산업 전반의 <b>프로세스를 혁신하는 상위개념</b></div>
        <div class="bp">건설산업의 DX는 GIS(공간정보), BIM, 디지털 트윈(가상환경)의 <b>기술융합을 통해서만 실현 또는 구현 가능</b></div>
        <div class="sp"><b>GIS의 역할</b> : 지리적 데이터를 공간 분석하여 시각적으로 표현, 위치기반 정보 제공</div>
        <div class="sp"><b>BIM의 역할</b> : 형상정보와 내용정보가 포함된 3D모델로, 건설 정보 기반의 Process와 Product를 제공. 시설물의 생애주기동안 발생한 모든 정보를 3차원 모델 기반으로 통합·관리하는 정보 관리 도구</div>
        <div class="sp"><b>디지털 트윈</b> : 현실 세계의 물리적 객체나 시스템을 디지털 환경에 동일하게 구현하는 기술</div>
        <div class="bp">DX는 이들 기술을 통합하여 업무방식과 가치 창출 구조를 <b>근본적으로 전환하는 과정 및 결과</b></div>
"""

    key_msg = """
    <div class="key-msg">
        <em>BIM ≠ DX</em> — BIM은 건설산업의 디지털전환(DX)을 수행하는 과정에서 가장 기초가 되는 일부분이다
    </div>
"""

    header = """
    <div class="core-header">
        <div class="core-label">DX와 BIM의 관계</div>
        <span class="popup-link">📊 DX와 BIM의 상세 비교</span>
    </div>
"""

    # 샘플 A: float right, 이미지 border/shadow 없이 자연스럽게
    sample_a = f"""<style>{common_css}
.s-a .fi {{ float: right; margin: 45px 0 8px 12px; width: 260px; }}
.s-a .fi img {{ width: 100%; }}
.s-a .fi .cap {{ font-size: 9px; color: #94a3b8; text-align: center; margin-top: 2px; }}
</style>
<div class="core s-a">
    {header}
    <div class="core-text">
        <div class="fi"><img src="{img_src}"><div class="cap">건설산업의 DX</div></div>
        {text_content}
    </div>
    {key_msg}
</div>"""

    # 샘플 B: float right, 살짝 큰 이미지, 연한 배경
    sample_b = f"""<style>{common_css}
.s-b .fi {{ float: right; margin: 40px 0 8px 16px; width: 300px; background: #f8fafc; border-radius: 8px; padding: 8px; }}
.s-b .fi img {{ width: 100%; }}
.s-b .fi .cap {{ font-size: 9px; color: #94a3b8; text-align: center; margin-top: 3px; }}
</style>
<div class="core s-b">
    {header}
    <div class="core-text">
        <div class="fi"><img src="{img_src}"><div class="cap">건설산업의 DX</div></div>
        {text_content}
    </div>
    {key_msg}
</div>"""

    # 샘플 C: float right, 이미지 더 아래로 (BIM 역할과 맞춤)
    sample_c = f"""<style>{common_css}
.s-c .fi {{ float: right; margin: 65px 0 8px 12px; width: 250px; }}
.s-c .fi img {{ width: 100%; }}
.s-c .fi .cap {{ font-size: 9px; color: #94a3b8; text-align: center; margin-top: 2px; }}
</style>
<div class="core s-c">
    {header}
    <div class="core-text">
        <div class="fi"><img src="{img_src}"><div class="cap">건설산업의 DX</div></div>
        {text_content}
    </div>
    {key_msg}
</div>"""

    # 샘플 D: float left (이미지가 왼쪽)
    sample_d = f"""<style>{common_css}
.s-d .fi {{ float: left; margin: 45px 14px 8px 0; width: 260px; }}
.s-d .fi img {{ width: 100%; }}
.s-d .fi .cap {{ font-size: 9px; color: #94a3b8; text-align: center; margin-top: 2px; }}
</style>
<div class="core s-d">
    {header}
    <div class="core-text">
        <div class="fi"><img src="{img_src}"><div class="cap">건설산업의 DX</div></div>
        {text_content}
    </div>
    {key_msg}
</div>"""

    samples = {"A_float_clean": sample_a, "B_float_bg": sample_b, "C_float_lower": sample_c, "D_float_left": sample_d}

    for name, html in samples.items():
        wrapped = 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;
}}
</style>
</head><body>
<div class="slide">
{html}
</div>
</body></html>"""
        (out_dir / f"{name}.html").write_text(wrapped, encoding="utf-8")
        s = await asyncio.to_thread(capture_slide_screenshot, wrapped)
        if s:
            (out_dir / f"{name}.png").write_bytes(base64.b64decode(s))
        print(f"  {name} 완료")

    print(f"\n결과: {out_dir}")


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)
    asyncio.run(main())