style(poc4): simplify login and architecture screens
This commit is contained in:
devmrko
@@ -1323,7 +1323,24 @@ html, body, [data-testid="stAppViewContainer"], .stApp {
|
|||||||
.kb-hero h1 { margin: 0; color: #12324a; font-size: 2rem; font-weight: 700; }
|
.kb-hero h1 { margin: 0; color: #12324a; font-size: 2rem; font-weight: 700; }
|
||||||
.kb-hero p { margin: 10px 0 0; max-width: 680px; line-height: 1.6; }
|
.kb-hero p { margin: 10px 0 0; max-width: 680px; line-height: 1.6; }
|
||||||
.kb-ci-panel { flex: 0 0 auto; }
|
.kb-ci-panel { flex: 0 0 auto; }
|
||||||
.kb-ci-panel img { display: block; width: 148px; height: auto; }
|
.kb-ci-panel img { display: block; width: 112px; height: auto; }
|
||||||
|
|
||||||
|
.st-key-kb_login_container { max-width: 560px; margin: 56px auto 0; }
|
||||||
|
.kb-login-brand { text-align: center; }
|
||||||
|
.kb-login-logo { display: block; width: 180px; height: auto; margin: 0 auto 12px; }
|
||||||
|
.kb-login-kicker { color: #5f7280; font-size: 0.75rem; font-weight: 700; }
|
||||||
|
.kb-login-brand h1 { margin: 12px 0 8px; color: #12324a; font-size: 1.8rem; }
|
||||||
|
.kb-login-brand p { margin: 0 0 22px; color: #5f7280; }
|
||||||
|
.st-key-kb_login_container [data-testid="stForm"] {
|
||||||
|
padding: 20px; border: 1px solid #d9e4ec; border-radius: 8px;
|
||||||
|
background: #ffffff; box-shadow: none;
|
||||||
|
}
|
||||||
|
.st-key-kb_login_container [data-testid="stFormSubmitButton"] button {
|
||||||
|
background: #004b87; color: #ffffff; border: 1px solid #004b87; box-shadow: none;
|
||||||
|
}
|
||||||
|
.st-key-kb_login_container [data-testid="stFormSubmitButton"] button:hover {
|
||||||
|
background: #006aab; border-color: #006aab; color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
.kb-vpd-card {
|
.kb-vpd-card {
|
||||||
margin: 10px 0; padding: 14px; border: 1px solid #d9e4ec;
|
margin: 10px 0; padding: 14px; border: 1px solid #d9e4ec;
|
||||||
@@ -1957,7 +1974,6 @@ def _render_kb_header() -> None:
|
|||||||
<section class="kb-hero">
|
<section class="kb-hero">
|
||||||
<div class="kb-hero-main">
|
<div class="kb-hero-main">
|
||||||
<div class="kb-brand-row">
|
<div class="kb-brand-row">
|
||||||
<div class="kb-mini-mark">HMM</div>
|
|
||||||
<div>
|
<div>
|
||||||
<div class="kb-brand-name">HMM Digital Operations Demo</div>
|
<div class="kb-brand-name">HMM Digital Operations Demo</div>
|
||||||
<div class="kb-brand-sub">Connect Values · Navigate Growth · AI 업무 질의</div>
|
<div class="kb-brand-sub">Connect Values · Navigate Growth · AI 업무 질의</div>
|
||||||
@@ -5894,111 +5910,25 @@ def _render_chat_history(conversation_id: str, page_key: str) -> None:
|
|||||||
|
|
||||||
|
|
||||||
def _render_architecture_tab() -> None:
|
def _render_architecture_tab() -> None:
|
||||||
architecture_html = """
|
st.subheader("운영 아키텍처")
|
||||||
<section aria-labelledby="kb-arch-title">
|
st.caption("사용자 권한을 기준으로 AI 질의, MCP 도구, Oracle Database를 연결합니다.")
|
||||||
<div class="kb-section-title input" id="kb-arch-title"
|
experience, integration, security = st.columns(3)
|
||||||
role="heading" aria-level="3">
|
with experience:
|
||||||
전체 시스템 구성
|
st.markdown("**01 · 사용자와 권한**")
|
||||||
</div>
|
st.write("사용자 역할과 담당 범위를 요청 컨텍스트에 적용합니다.")
|
||||||
<div class="kb-arch-lead">
|
with integration:
|
||||||
사용자 권한 컨텍스트가 AI 라우터와 MCP 도구를 거쳐 Oracle Database의
|
st.markdown("**02 · AI와 MCP**")
|
||||||
정형 데이터·약관 지식·보안 정책으로 연결되는 현재 DEMO 실행 구조입니다.
|
st.write("질의에 맞는 데이터·지식 검색 도구를 선택합니다.")
|
||||||
</div>
|
with security:
|
||||||
|
st.markdown("**03 · 데이터와 보안**")
|
||||||
|
st.write("VPD와 감사 정책으로 데이터 접근을 통제합니다.")
|
||||||
|
|
||||||
<div class="kb-arch-map" aria-label="시스템 요청 처리 아키텍처">
|
st.divider()
|
||||||
<div class="kb-arch-stage experience">
|
st.markdown("#### 질의 처리 흐름")
|
||||||
<span class="kb-arch-stage-label">01 · AI Experience</span>
|
|
||||||
<strong>사용자 권한 기반 AI 업무 경험</strong>
|
|
||||||
<div class="kb-arch-experience-grid">
|
|
||||||
<div class="kb-arch-experience-item">
|
|
||||||
<strong>사용자·권한</strong>
|
|
||||||
<span>VPD 사용자와 Bearer Token으로 역할·지점·담당 범위를 요청 컨텍스트에 결합</span>
|
|
||||||
</div>
|
|
||||||
<div class="kb-arch-experience-item">
|
|
||||||
<strong>KB손해보험 AI 업무 에이전트</strong>
|
|
||||||
<span>OCI Compute · 아키텍처·시나리오·감사로그·보안관리</span>
|
|
||||||
</div>
|
|
||||||
<div class="kb-arch-experience-item">
|
|
||||||
<strong>OCI GenAI Router</strong>
|
|
||||||
<span>질의 분류, 단일·멀티툴 판단, GPT·Grok·Llama 기반 최종 답변 합성</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="kb-arch-arrow" aria-hidden="true">→</div>
|
|
||||||
|
|
||||||
<div class="kb-arch-stage green">
|
|
||||||
<span class="kb-arch-stage-label">02 · MCP INTEGRATION</span>
|
|
||||||
<strong>정형·벡터 MCP</strong>
|
|
||||||
<p>업무 SQL과 보험 약관 근거를 목적별 도구로 조회</p>
|
|
||||||
<div class="kb-arch-detail">kb_mcp · ords.query.kb_select_ai_vpd</div>
|
|
||||||
<div class="kb-arch-detail">kb_vector_mcp · hybrid_rerank_search</div>
|
|
||||||
</div>
|
|
||||||
<div class="kb-arch-arrow" aria-hidden="true">→</div>
|
|
||||||
|
|
||||||
<div class="kb-arch-stage security">
|
|
||||||
<span class="kb-arch-stage-label">03 · DATA & SECURITY</span>
|
|
||||||
<strong>Oracle ADB KBAIPOC</strong>
|
|
||||||
<p>POC_2 · KB_* · Select AI · Vector Search</p>
|
|
||||||
<div class="kb-arch-detail">VPD RLS/CLS · DBMS_FGA · Unified Audit Trail</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="kb-arch-lower">
|
|
||||||
<div>
|
|
||||||
<h3 class="kb-arch-section-title">질의 처리 흐름</h3>
|
|
||||||
<div class="kb-arch-step">
|
|
||||||
<span class="kb-arch-step-no">1</span>
|
|
||||||
<div><strong>권한 컨텍스트 생성</strong><span>선택한 사용자 토큰과 질문을 세션 요청에 결합합니다.</span></div>
|
|
||||||
</div>
|
|
||||||
<div class="kb-arch-step">
|
|
||||||
<span class="kb-arch-step-no">2</span>
|
|
||||||
<div><strong>AI 실행 계획 수립</strong><span>선택 LLM이 단일 도구 또는 멀티툴 실행 경로를 판단합니다.</span></div>
|
|
||||||
</div>
|
|
||||||
<div class="kb-arch-step">
|
|
||||||
<span class="kb-arch-step-no">3</span>
|
|
||||||
<div><strong>MCP 근거 조회</strong><span>정형 Select AI/VPD와 약관 Hybrid·Rerank 검색을 필요한 만큼 호출합니다.</span></div>
|
|
||||||
</div>
|
|
||||||
<div class="kb-arch-step">
|
|
||||||
<span class="kb-arch-step-no">4</span>
|
|
||||||
<div><strong>DB 보안 정책 적용</strong><span>행·컬럼 접근 통제 후 민감 컬럼 접근을 FGA 감사 로그로 기록합니다.</span></div>
|
|
||||||
</div>
|
|
||||||
<div class="kb-arch-step">
|
|
||||||
<span class="kb-arch-step-no">5</span>
|
|
||||||
<div><strong>결과 합성·표시</strong><span>원본 MCP 결과를 보존하고 AI 답변, 진행 상태와 감사 결과를 화면에 표시합니다.</span></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<h3 class="kb-arch-section-title">구성 요소 설명</h3>
|
|
||||||
<div class="kb-arch-controls">
|
|
||||||
<div class="kb-arch-control">
|
|
||||||
<strong>정형 업무 데이터</strong>
|
|
||||||
<span>POC_2의 KB_CUSTOMERS, KB_CONTRACTS, KB_CLAIMS 등 KB_* 핵심 테이블을 Select AI로 조회합니다.</span>
|
|
||||||
</div>
|
|
||||||
<div class="kb-arch-control blue">
|
|
||||||
<strong>약관 지식 검색</strong>
|
|
||||||
<span>OCI Embedding, Oracle Vector Search와 OCI Rerank를 결합해 자사·타사 약관 근거를 찾습니다.</span>
|
|
||||||
</div>
|
|
||||||
<div class="kb-arch-control green">
|
|
||||||
<strong>데이터 보안</strong>
|
|
||||||
<span>Bearer Token의 사용자 식별자를 기준으로 VPD 행·컬럼 정책을 적용하고 접근 결과를 반환합니다.</span>
|
|
||||||
</div>
|
|
||||||
<div class="kb-arch-control red">
|
|
||||||
<strong>관리·감사</strong>
|
|
||||||
<span>보안 운영 포털에서 정책을 관리하고, 감사로그 탭은 Wallet 연결로 FGA 정책과 Unified Audit Trail을 조회합니다.</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
"""
|
|
||||||
st.markdown(
|
st.markdown(
|
||||||
"\n".join(
|
"1. 사용자 권한과 질문을 요청에 반영합니다. \n"
|
||||||
line.strip()
|
"2. AI가 필요한 MCP 도구를 선택합니다. \n"
|
||||||
for line in architecture_html.splitlines()
|
"3. Oracle Database에서 근거를 조회하고 결과를 표시합니다."
|
||||||
if line.strip()
|
|
||||||
),
|
|
||||||
unsafe_allow_html=True,
|
|
||||||
)
|
)
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user