개발자로서 현장에서 일하면서 새로 접하는 기술들이나 알게된 정보 등을 정리하기 위한 블로그입니다. 운 좋게 미국에서 큰 회사들의 프로젝트에서 컬설턴트로 일하고 있어서 새로운 기술들을 접할 기회가 많이 있습니다. 미국의 IT 프로젝트에서 사용되는 툴들에 대해 많은 분들과 정보를 공유하고 싶습니다.
오늘은 이전에 개발한 AI 웹 어플리케이션의 소스코드를 개선하는 **리팩토링(refactoring)** 작업과 새로운 기능을 추가하는 **확장(enhancement)** 작업을 진행했습니다.
리팩토링 작업에서는 Streamlit의 `session_state`가 서로 다른 페이지 간에 메시지 데이터를 공유하는 문제를 해결했습니다. API 키는 공유가 필요한 부분에서만 동일하게 사용하고, 각 페이지에서 개별적으로 관리해야 하는 메시지 부분은 분리하여 처리했습니다.
확장 작업으로는 기존에 Anthropic의 Claude 모델만 사용 가능했던 것을 OpenAI의 ChatGPT도 사용할 수 있도록 기능을 추가했습니다. 이를 통해 더 다양한 모델을 활용할 수 있게 되었습니다.
그 외에도 Visual Studio Code에서 변경된 파일을 커밋하고 GitHub에 푸시하는 방법, 그리고 GitLens를 사용해 로컬 파일과 서버 파일을 비교하는 방법 등 실무에서 유용하게 사용되는 팁들을 공유했습니다.
또한, 기대한 결과가 나오지 않았을 때 차분하게 문제를 검증하고 해결해 나가는 과정을 보여드렸습니다. 이는 개발자에게 필수적인 문제 해결 능력을 키우는 데 도움이 될 것입니다.
LangGraph에 새로운 툴을 추가하는 방법을 배우기 위해 Quick Start 튜토리얼의 소스코드를 Streamlit과 결합해 웹 페이지에 표시하도록 구현한 소스코드도 함께 확인하실 수 있습니다.
이 소스코드에는 하나의 에러가 있는데, 이 에러는 여러분과 함께 해결해 볼 과제로 남겨두었습니다. 다음 시간까지 함께 고민해 보시길 바랍니다.
Today, I focused on refining the AI web application we previously developed by undertaking some critical refactoring and implementing enhancements.
The refactoring work addressed an issue where session_state in Streamlit was unintentionally sharing message data across different pages. By ensuring that shared API keys are used consistently while individual messages are managed separately, the application now functions more reliably across various pages.
On the enhancement side, I expanded the application's capabilities by integrating OpenAI's ChatGPT alongside Anthropic's Claude, offering more flexibility in model usage.
In addition to these improvements, I also covered some practical tips for developers. These include committing changes in Visual Studio Code, pushing updates to GitHub, and using GitLens to compare local and server-side files. These insights are grounded in real-world scenarios and are essential for efficient development workflows.
Moreover, you'll see how to methodically troubleshoot when results don't match expectations—a vital skill in any developer's toolkit.
As part of my journey into LangGraph, I also combined the Quick Start tutorial code with Streamlit to create an interactive web page. This integration serves as an excellent example of adding tools to enhance LangGraph functionality.
Lastly, I've left one error in the code as a challenge for you to solve before our next session. It’s an excellent opportunity for us to explore problem-solving together.
이번 시간에는 지난번 LangChain의 RetrievalChain 을 배울 때 사용했던 소스코드를 그대로 사용할 겁니다.
그 소스코드에 Streamlit 의 Session 관련 기능들을 사용해서 ChatBot 기능을 구현해 봅니다.
주요 스트림릿 툴들은 st.session_state(), st.session_message 그리고 st.session_input 등입니다.
이 각 툴들은 어떤 역할을 하고 또 어떻게 사용해야 되는지 알아봅니다.
지난 시간에 배웠던 랭체인의 create_history_aware_retriever 도 챗봇 기능을 구현하기 위해 지원되는 기능입니다.
둘 다 사용자의 질문과 인공지능의 대답을 저장해 두고 다음 질문 할 때 그 history와 함께 새로운 질문을 인공지능에 보내서 인공지능이 그동안의 질문과 답변을 참고해서 질문의 의미를 좀 더 정확하게 파악할 수 있게 해 좀 더 해당 질문에 정확한 답변을 보낼 수 있도록 해 주는 겁니다.
그리고 그 질문과 답변 history를 브라우저에 표시할 수도 있어서 사용자도 질문과 답변 히스토리를 볼 수 있도록 해 줍니다.
랭체인은 스크립트 내 변수에 해당 히스토리를 저장해서 사용하고 스트림릿은 세션단위에서 그 히스토리를 저장해서 사용합니다.
그렇기 때문에 둘 다 새로운 브라우저에서 대화를 할 때는 이전 히스토리를 사용할 수 없습니다.
이렇게 해당 정보가 휘발되지 않고 다른 브라우저에서 볼 수도 있고 컴퓨터를 껐다가 켜도 그 정보를 사용할 수 있도록 려면 스크립트 내 변수나 브라우저 세션 등 임시 저장공간에 저장을 하지않고 파일이나 DB 등 제 3의 장소에 저장해서 사용해야 합니다.
오늘은 스트림릿에서 제공하는 st.session_state 를 사용해서 간단하게 챗봇을 구현하는 기술을 배워 봅니다.
