8. 웹사이트 전체를 아는 챗봇, SiteGPT

🎯 이 챕터에서 배울 것

• SitemapLoader를 사용하여 웹사이트의 사이트맵(sitemap.xml)을 읽고 모든 페이지의 URL을 자동으로 수집하는 방법
• BeautifulSoup과 파싱 함수를 사용하여 스크래핑한 HTML에서 불필요한 부분(헤더, 푸터 등)을 제거하고 순수 텍스트만 추출하는 방법
• Map-ReRank 체인: 검색된 여러 문서 각각에 대해 답변과 점수를 생성(Map)한 후, 가장 점수가 높은 답변을 선택하여 최종 답변을 구성(ReRank)하는 고급 RAG 기법
• LCEL을 사용하여 Map-ReRank 체인을 직접 구현하는 방법
• Streamlit을 사용하여 SiteGPT의 전체 UI와 상호작용 로직을 완성하는 방법

---

효율적인 웹 스크래핑

🎯 이번 단계에서 배울 것

• AsyncChromiumLoader의 한계와 SitemapLoader의 필요성을 이해합니다.
• SitemapLoader를 사용하여 웹사이트의 모든 페이지를 효율적으로 로드합니다.
• 사용자 정의 파싱 함수와 BeautifulSoup을 사용하여 HTML을 정리하고 원하는 텍스트만 추출합니다.

📝 1단계: Sitemap으로 웹사이트 전체 로드하기

전체 코드 (pages/04_SiteGPT.py):

from langchain.document_loaders import SitemapLoader
from langchain.text_splitter import RecursiveCharacterTextSplitter
import streamlit as st

# 1. HTML에서 불필요한 부분을 제거하는 파싱 함수
def parse_page(soup):
    header = soup.find("header")
    footer = soup.find("footer")
    if header:
        header.decompose() # <header> 태그 제거
    if footer:
        footer.decompose() # <footer> 태그 제거
    return (
        str(soup.get_text())
        .replace("\n", " ")
        .replace("\xa0", " ")
        .replace("CloseSearch Submit Blog", "")
    )

@st.cache_data(show_spinner="Loading website...")
def load_website(url):
    splitter = RecursiveCharacterTextSplitter.from_tiktoken_encoder(
        chunk_size=1000,
        chunk_overlap=200,
    )
    # 2. SitemapLoader 초기화
    loader = SitemapLoader(
        url, # sitemap.xml 파일의 URL
        filter_urls=[r"^(.*\/blog\/).*"], # 특정 패턴의 URL만 필터링 (선택 사항)
        parsing_function=parse_page, # 각 페이지에 적용할 파싱 함수
    )
    loader.requests_per_second = 2 # 서버 부하를 줄이기 위해 요청 속도 조절
    docs = loader.load_and_split(text_splitter=splitter)
    # ... 벡터 스토어 생성 로직 ...

🔍 코드 상세 설명

1. SitemapLoader

• AsyncChromiumLoader가 단일 페이지만 로드하는 반면, SitemapLoader는 웹사이트의 sitemap.xml 파일을 분석하여 사이트 내의 모든 페이지 URL 목록을 가져옵니다. 그 후 각 URL을 방문하여 콘텐츠를 스크래핑합니다.
• 왜 사용하는가?: 단 하나의 URL(sitemap.xml)만으로 웹사이트 전체를 학습 데이터로 만들 수 있어 매우 효율적입니다.
• filter_urls: 정규식을 사용하여 원하는 URL 패턴(예: 블로그 포스트만)을 가진 페이지만 스크래핑하도록 필터링할 수 있습니다.

2. 사용자 정의 파싱 함수 (parsing_function)

• SitemapLoader는 각 페이지의 HTML 콘텐츠를 BeautifulSoup 객체(soup)로 변환하여 parsing_function에 전달합니다.
• 이 함수 내에서 soup.find(...).decompose()와 같은 메소드를 사용하여 광고, 네비게이션 바, 푸터 등 답변 생성에 방해가 되는 불필요한 HTML 요소를 제거할 수 있습니다. 이를 통해 더 깨끗하고 관련성 높은 텍스트만 추출하여 LLM에 제공할 수 있습니다.

✅ 체크리스트

• beautifulsoup4 라이브러리를 설치했나요?
• 대상 웹사이트의 sitemap.xml URL을 찾았나요? (보통 https://example.com/sitemap.xml)
• SitemapLoader를 사용하여 사이트맵을 로드하고, parsing_function으로 HTML을 정리했나요?

---

Map-ReRank 체인 구현하기

🎯 이번 단계에서 배울 것

• Map-ReRank 체인의 동작 원리를 이해합니다.
• Map 단계: 검색된 각 문서에 대해 개별적으로 답변과 점수를 생성하는 체인을 만듭니다.
• ReRank (Reduce) 단계: 생성된 여러 답변과 점수를 보고, 가장 신뢰도 높은 최종 답변을 선택(또는 종합)하는 체인을 만듭니다.

📝 1단계: Map-ReRank 로직 구현

전체 코드 (pages/04_SiteGPT.py):

# ... (imports, llm 설정)

# 1. Map 단계 프롬프트: 각 문서에 대해 답변과 점수를 생성
answers_prompt = ChatPromptTemplate.from_template(
    """Using ONLY the following context answer the user's question. ... Then, give a score to the answer between 0 and 5. ... Context: {context} ... Question: {question}"""
)

# Map 단계 실행 함수
def get_answers(inputs):
    docs = inputs["docs"]
    question = inputs["question"]
    answers_chain = answers_prompt | llm
    return {
        "question": question,
        "answers": [
            {
                "answer": answers_chain.invoke({"question": question, "context": doc.page_content}).content,
                "source": doc.metadata["source"],
                "date": doc.metadata["lastmod"],
            }
            for doc in docs
        ],
    }

# 2. ReRank(Reduce) 단계 프롬프트: 여러 답변 중 최고를 선택
choose_prompt = ChatPromptTemplate.from_messages([
    ("system", "Use ONLY the following pre-existing answers to answer the user's question. Use the answers that have the highest score ... Cite sources ... Answers: {answers}"),
    ("human", "{question}"),
])

# ReRank 단계 실행 함수
def choose_answer(inputs):
    answers = inputs["answers"]
    question = inputs["question"]
    choose_chain = choose_prompt | llm
    condensed = "\n\n".join(f"{answer['answer']}\nSource:{answer['source']}\nDate:{answer['date']}\n" for answer in answers)
    return choose_chain.invoke({"question": question, "answers": condensed})

# 3. 최종 체인 결합
chain = (
    {"docs": retriever, "question": RunnablePassthrough()}
    | RunnableLambda(get_answers)
    | RunnableLambda(choose_answer)
)

🔍 코드 상세 설명

1. Map-ReRank의 동작 원리
stuff 방식이 모든 문서를 한 번에 컨텍스트에 넣는 것과 달리, Map-ReRank는 더 정교한 접근 방식을 사용합니다.

• Map: 검색된 문서가 5개라면, 5개의 문서 각각에 대해 answers_prompt를 실행하여 5개의 독립적인 답변과 점수를 생성합니다. 이는 각 문서가 질문에 얼마나 관련이 있는지를 평가하는 과정입니다.

• ReRank (Reduce): 생성된 5개의 답변+점수 텍스트를 모두 모아 choose_prompt의 컨텍스트({answers})로 전달합니다. 그리고 LLM에게 이 중에서 가장 점수가 높고 최신 정보인 것을 바탕으로 최종 답변을 선택하거나 종합하라고 지시합니다.

• 왜 사용하는가?: stuff 방식보다 더 많은 문서를 처리할 수 있으며, 각 문서의 관련성을 개별적으로 평가하므로 최종 답변의 정확성과 신뢰도가 높아집니다. LLM이 여러 소스를 비교하고 대조하여 가장 좋은 답변을 찾도록 유도할 수 있습니다.

✅ 체크리스트

• Map 단계에 해당하는 answers_prompt와 get_answers 함수를 작성했나요?
• ReRank 단계에 해당하는 choose_prompt와 choose_answer 함수를 작성했나요?
• LCEL을 사용하여 retriever -> get_answers -> choose_answer 순서로 전체 체인을 올바르게 연결했나요?

---

SiteGPT UI 완성

🎯 이번 단계에서 배울 것

• st.text_input을 사용하여 사용자로부터 질문을 받습니다.
• 완성된 Map-ReRank 체인을 실행하고, 최종 결과를 st.markdown으로 화면에 표시합니다.

📝 1단계: Streamlit UI와 체인 연동

전체 코드 (pages/04_SiteGPT.py):

# ... (이전 코드)

if url:
    if ".xml" not in url:
        # ... 오류 처리 ...
    else:
        retriever = load_website(url)
        query = st.text_input("Ask a question to the website.")
        if query:
            chain = (
                {
                    "docs": retriever,
                    "question": RunnablePassthrough(),
                }
                | RunnableLambda(get_answers)
                | RunnableLambda(choose_answer)
            )
            result = chain.invoke(query)
            st.markdown(result.content.replace("$", "\$")) # $ 문자가 LaTeX로 렌더링되는 것을 방지

🔍 코드 상세 설명

이제 모든 조각이 맞춰졌습니다.

1. 사용자가 사이드바에 sitemap.xml URL을 입력합니다.
2. load_website(url) 함수가 호출되어 웹사이트 전체를 로드하고, 분할하고, 임베딩하여 retriever를 생성합니다. 이 과정은 @st.cache_data 덕분에 URL당 한 번만 실행됩니다.
3. 사용자가 st.text_input에 질문(query)을 입력합니다.
4. 질문이 입력되면, 우리가 구성한 Map-ReRank 체인이 invoke(query)로 실행됩니다.
5. 체인의 최종 결과(result.content)가 st.markdown을 통해 사용자에게 표시됩니다.

✅ 체크리스트

• st.text_input을 사용하여 사용자 질문을 받는 UI를 추가했나요?
• 질문이 입력되었을 때, 완성된 체인을 invoke하고 그 결과를 화면에 출력했나요?
• SiteGPT가 웹사이트 콘텐츠에 기반하여 정확한 답변과 출처를 제공하는지 테스트했나요?

---

출처 : https://nomadcoders.co/fullstack-gpt