LangSmith observability 추가 및 UI 개선

- LangSmith 추적 기능 추가 (observability)
- .env에 LANGCHAIN_TRACING_V2, LANGCHAIN_API_KEY 설정
- .env.example 템플릿 파일 생성
- pyproject.toml에 langsmith 의존성 추가
- README에 설정 방법 상세 문서화

- Chatbot UI 기능 개선
- Like/Dislike 버튼 추가 (gr.Blocks로 구조 변경)
- Copy, Copy All, Share 버튼 추가
- Clear 버튼 기본 포함

- ML Pipeline 예제 확장
- 전체 파이프라인 예제 (4단계)
- 조합 예제 추가 (2-3단계 조합)
- 단일 기능 예제 유지
- 다양한 시나리오 테스트 가능

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

.env.example

@@ -0,0 +1,8 @@
+# OpenAI API Key
+OPENAI_API_KEY=your-openai-api-key-here
+
+# LangSmith Observability (Optional)
+# Get your API key from https://smith.langchain.com/
+LANGCHAIN_TRACING_V2=true
+LANGCHAIN_API_KEY=your-langsmith-api-key-here
+LANGCHAIN_PROJECT=langgraph-ui

README.md

@@ -40,11 +40,22 @@ uv sync
 ```
 
 2. Set up environment variables:
-Create a `.env` file in the root directory:
-```
+Create a `.env` file in the root directory (or copy from `.env.example`):
+```bash
+# Required
 OPENAI_API_KEY=your-openai-api-key-here
+
+# Optional: LangSmith Observability
+LANGCHAIN_TRACING_V2=true
+LANGCHAIN_API_KEY=your-langsmith-api-key-here
+LANGCHAIN_PROJECT=langgraph-ui
 ```
 
+To get a LangSmith API key:
+- Sign up at [LangSmith](https://smith.langchain.com/)
+- Create an API key in your settings
+- LangSmith provides observability for all agent executions, traces, and performance metrics
+
 3. Run the application:
 ```bash
 uv run python app.py
@@ -54,13 +65,17 @@ The application will start on `http://localhost:7860`
 
 ### HuggingFace Spaces Deployment
 
-To deploy on HuggingFace Spaces, you need to set the `OPENAI_API_KEY` as a secret:
+To deploy on HuggingFace Spaces, set these secrets:
 
 1. Go to your Space settings
 2. Navigate to "Repository secrets"
-3. Add a new secret:
+3. Add required secret:
    - Name: `OPENAI_API_KEY`
    - Value: your OpenAI API key
+4. (Optional) Add LangSmith secrets for observability:
+   - `LANGCHAIN_TRACING_V2=true`
+   - `LANGCHAIN_API_KEY=your-langsmith-api-key`
+   - `LANGCHAIN_PROJECT=langgraph-ui`
 
 ## Project Structure
 
@@ -78,6 +93,7 @@ To deploy on HuggingFace Spaces, you need to set the `OPENAI_API_KEY` as a secre
 - [LangGraph](https://langchain-ai.github.io/langgraph/) - Agent orchestration
 - [LangChain](https://langchain.com/) - LLM framework
 - [OpenAI](https://openai.com/) - LLM provider
+- [LangSmith](https://smith.langchain.com/) - Observability and monitoring (optional)
 - [uv](https://github.com/astral-sh/uv) - Python package manager
 
 Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

app.py

@@ -187,6 +187,14 @@ def generate_response_basic_chatbot(message, history):
         yield response
 
 
+def handle_like(data: gr.LikeData):
+    """Like/dislike 이벤트 핸들러"""
+    if data.liked:
+        print(f"👍 Upvoted: {data.value}")
+    else:
+        print(f"👎 Downvoted: {data.value}")
+
+
 def generate_response_ml_pipeline(message, history):
     """ML Pipeline 워크플로우에 대한 nested thought 응답 생성"""
     inputs = {
@@ -367,36 +375,63 @@ def generate_response_ml_pipeline(message, history):
         yield response
 
 
-# Create Basic Chatbot interface
-basic_chatbot_demo = gr.ChatInterface(
-    generate_response_basic_chatbot,
-    type="messages",
-    title="🤖 Multi-Agent Chatbot",
-    description="Research와 Math 에이전트가 협력하여 작업을 수행합니다. 각 에이전트의 사고 과정을 실시간으로 확인할 수 있습니다.",
-    examples=[
-        "2024년의 FAANG companies 총 근로자규모에 대한 분석을 한국어로 부탁해!",
-        "123과 456을 곱하고 그 결과에 789를 더해줘",
-        "구글의 직원 수를 찾아서 애플의 직원 수와 비교해줘"
-    ],
-    cache_examples=False
-)
-
-# Create ML Pipeline interface
-ml_pipeline_demo = gr.ChatInterface(
-    generate_response_ml_pipeline,
-    type="messages",
-    title="🔬 ML Pipeline Automation",
-    description="데이터 추출, 사전학습, 파인튜닝, 평가 단계를 거치는 완전한 ML 파이프라인입니다. 각 전문가 에이전트의 작업 과정을 단계별로 확인할 수 있습니다.",
-    examples=[
-        "user_events 테이블에서 2024-01-01부터 2024-12-31까지 이벤트 데이터를 추출하고, 모델을 사전학습한 후 5개 클래스 분류 모델을 학습하고 평가해줘",
-        "customer_logs 테이블에서 2024년 1분기 데이터를 추출하고, GPT2 모델로 사전학습 후 감성분석용 3클래스 분류 모델 만들어줘",
-        "transaction_data 테이블에서 최근 6개월 데이터로 이상거래 탐지 모델 학습하고 성능 평가 부탁해",
-        "준비된 데이터(/data/pretraining/corpus.txt)로 GPT-2 모델을 3 에포크 사전학습만 해줘",
-        "사전학습된 모델(/models/pretrained/checkpoint)으로 감성분석 3클래스 분류 파인튜닝만 진행해줘",
-        "학습된 모델(/models/finetuned/model)을 테스트 데이터(/data/test.jsonl)로 평가만 해줘"
-    ],
-    cache_examples=False
-)
+# Create interfaces with Blocks for like functionality
+with gr.Blocks() as basic_chatbot_demo:
+    basic_chatbot = gr.Chatbot(
+        type="messages",
+        show_copy_button=True,
+        show_copy_all_button=True,
+        show_share_button=True
+    )
+    basic_chatbot.like(handle_like, None, None)
+
+    gr.ChatInterface(
+        generate_response_basic_chatbot,
+        type="messages",
+        chatbot=basic_chatbot,
+        title="🤖 Multi-Agent Chatbot",
+        description="Research와 Math 에이전트가 협력하여 작업을 수행합니다. 각 에이전트의 사고 과정을 실시간으로 확인할 수 있습니다.",
+        examples=[
+            "2024년의 FAANG companies 총 근로자규모에 대한 분석을 한국어로 부탁해!",
+            "123과 456을 곱하고 그 결과에 789를 더해줘",
+            "구글의 직원 수를 찾아서 애플의 직원 수와 비교해줘"
+        ],
+        cache_examples=False
+    )
+
+with gr.Blocks() as ml_pipeline_demo:
+    ml_pipeline_chatbot = gr.Chatbot(
+        type="messages",
+        show_copy_button=True,
+        show_copy_all_button=True,
+        show_share_button=True
+    )
+    ml_pipeline_chatbot.like(handle_like, None, None)
+
+    gr.ChatInterface(
+        generate_response_ml_pipeline,
+        type="messages",
+        chatbot=ml_pipeline_chatbot,
+        title="🔬 ML Pipeline Automation",
+        description="데이터 추출, 사전학습, 파인튜닝, 평가 단계를 거치는 완전한 ML 파이프라인입니다. 각 전문가 에이전트의 작업 과정을 단계별로 확인할 수 있습니다.",
+        examples=[
+            # 전체 파이프라인 예제
+            "user_events 테이블에서 2024-01-01부터 2024-12-31까지 이벤트 데이터를 추출하고, 모델을 사전학습한 후 5개 클래스 분류 모델을 학습하고 평가해줘",
+            "transaction_data 테이블에서 최근 6개월 데이터로 이상거래 탐지 모델을 처음부터 끝까지 만들어줘",
+
+            # 조합 예제 (2-3단계)
+            "customer_logs 테이블에서 2024년 데이터를 추출하고 GPT-2 모델 사전학습까지만 해줘",
+            "준비된 데이터(/data/corpus.txt)로 모델을 사전학습하고, 그 모델로 감성분석 3클래스 분류 파인튜닝까지 진행해줘",
+            "사전학습된 모델(/models/pretrained/gpt2)로 spam detection 2클래스 분류 모델 학습하고 성능 평가해줘",
+            "product_reviews 테이블에서 2024��� 리뷰 데이터 추출하고 바로 별점 예측 5클래스 분류 모델 파인튜닝해줘",
+
+            # 단일 기능 예제
+            "준비된 데이터(/data/pretraining/corpus.txt)로 GPT-2 모델을 3 에포크 사전학습만 해줘",
+            "사전학습된 모델(/models/pretrained/checkpoint)으로 감성분석 3클래스 분류 파인튜닝만 진행해줘",
+            "학습된 모델(/models/finetuned/model)을 테스트 데이터(/data/test.jsonl)로 평가만 해줘"
+        ],
+        cache_examples=False
+    )
 
 # Create tabbed interface
 demo = gr.TabbedInterface(

pyproject.toml

@@ -11,6 +11,7 @@ dependencies = [
     "langchain-teddynote",
     "gradio>=5.41.0",
     "python-dotenv",
+    "langsmith",
 ]
 
 [build-system]