update UI/UX

app.py

@@ -19,7 +19,6 @@ Your role is to:
 4. Maintain a {personality} tone throughout the conversation
 5. Consider the user's expertise level ({expertise_level}) when explaining
 
-
 Please respond in {language}."""
     return base_prompt
 
@@ -36,11 +35,11 @@ def respond(
     genre,
     mood,
 ):
-    # 시스템 프롬프트 생성
+    # Create system prompt
     system_message = create_system_prompt(agent_type, personality, expertise_level, language)
     messages = [{"role": "system", "content": system_message}]
 
-    # 사용자 입력에 장르와 기분 정보 추가
+    # Add genre and mood information to user input
     enhanced_message = f"Genre: {genre}\nMood: {mood}\nUser request: {message}"
     
     for val in history:
@@ -68,20 +67,20 @@ def reset_chat():
 
 def show_settings_changed_info(agent_type, personality, expertise_level, language):
     return f"""
-    새로운 Agent 설정:
-    - 유형: {agent_type}
-    - 성격: {personality}
-    - 설명 수준: {expertise_level}
-    - 응답 언어: {language}
+    New Agent Settings:
+    - Type: {agent_type}
+    - Personality: {personality}
+    - Expertise Level: {expertise_level}
+    - Response Language: {language}
     
-    대화가 초기화되었습니다. 새로운 설정으로 대화를 시작해주세요.
+    Chat has been reset. Please start a new conversation with the updated settings.
     """
 
 """
 For information on how to customize the ChatInterface, peruse the gradio docs: https://www.gradio.app/docs/chatinterface
 """
 
-# 커스텀 CSS 스타일
+# Custom CSS styles
 custom_css = """
 :root {
     --primary-color: #2196f3;
@@ -109,7 +108,7 @@ custom_css = """
     padding: var(--spacing-unit);
 }
 
-/* 채팅 컨테이너 스타일 */
+/* Chat container styles */
 .chat-container {
     display: flex;
     flex-direction: column;
@@ -120,7 +119,7 @@ custom_css = """
     margin-bottom: var(--spacing-unit);
 }
 
-/* 채팅 메시지 스타일 */
+/* Chat message styles */
 .chat-message {
     padding: var(--spacing-unit);
     margin: calc(var(--spacing-unit) / 2);
@@ -128,29 +127,23 @@ custom_css = """
     max-width: 85%;
     line-height: 1.5;
     position: relative;
-    animation: fadeIn 0.3s ease-in-out;
-}
-
-@keyframes fadeIn {
-    from { opacity: 0; transform: translateY(10px); }
-    to { opacity: 1; transform: translateY(0); }
 }
 
-/* 사용자 메시지 스타일 */
+/* User message styles */
 .user-message {
     background-color: var(--chat-user-bg);
     margin-left: auto;
     border-bottom-right-radius: 4px;
 }
 
-/* 봇 메시지 스타일 */
+/* Bot message styles */
 .bot-message {
     background-color: var(--chat-bot-bg);
     margin-right: auto;
     border-bottom-left-radius: 4px;
 }
 
-/* 입력 영역 스타일 */
+/* Input area styles */
 .input-container {
     display: flex;
     gap: var(--spacing-unit);
@@ -163,7 +156,7 @@ custom_css = """
     border-bottom-right-radius: 12px;
 }
 
-/* 입력 필드 스타일 */
+/* Input field styles */
 input[type="text"] {
     flex: 1;
     padding: calc(var(--spacing-unit) * 0.75);
@@ -179,7 +172,7 @@ input[type="text"]:focus {
     outline: none;
 }
 
-/* 버튼 스타일 */
+/* Button styles */
 button {
     padding: calc(var(--spacing-unit) * 0.75) calc(var(--spacing-unit) * 1.5);
     border: none;
@@ -195,7 +188,7 @@ button:hover {
     background-color: var(--primary-hover);
 }
 
-/* 설정 패널 스타일 */
+/* Settings panel styles */
 .settings-panel {
     background: var(--panel-bg);
     padding: var(--spacing-unit);
@@ -204,7 +197,7 @@ button:hover {
     margin-bottom: var(--spacing-unit);
 }
 
-/* 드롭다운 스타일 */
+/* Dropdown styles */
 select {
     width: 100%;
     padding: calc(var(--spacing-unit) * 0.5);
@@ -214,37 +207,37 @@ select {
     background-color: var(--panel-bg);
 }
 
-/* 슬라이더 스타일 */
+/* Slider styles */
 input[type="range"] {
     width: 100%;
     margin: calc(var(--spacing-unit) * 0.5) 0;
 }
 
-/* 마크다운 스타일 */
+/* Markdown styles */
 .markdown {
     color: var(--text-color);
     margin-bottom: var(--spacing-unit);
 }
 
-/* 그룹 스타일 */
+/* Group styles */
 .group {
     margin-bottom: var(--spacing-unit);
 }
 
-/* 라벨 스타일 */
+/* Label styles */
 label {
     color: var(--text-color);
     margin-bottom: calc(var(--spacing-unit) * 0.5);
     font-weight: 500;
 }
 
-/* 헤더 스타일 */
+/* Header styles */
 h1, h2, h3 {
     color: var(--text-color);
     margin-bottom: var(--spacing-unit);
 }
 
-/* 스크롤바 스타일 */
+/* Scrollbar styles */
 ::-webkit-scrollbar {
     width: 8px;
 }
@@ -267,8 +260,8 @@ with gr.Blocks(css=custom_css) as demo:
     gr.Markdown("""
     # 🎬 Personalized Movie Recommender
     
-    안녕하세요! 당신만을 위한 영화 추천 시스템입니다. 
-    선호하는 장르와 현재 기분을 알려주시면, 맞춤형 영화를 추천해드립니다.
+    Welcome to your personalized movie recommendation system!
+    Tell us your preferred genres and current mood, and we'll recommend the perfect movies for you.
     """)
     
     with gr.Row():
@@ -280,63 +273,63 @@ with gr.Blocks(css=custom_css) as demo:
                     avatar_images=("👤", "🎬"),
                     bubble_full_width=False,
                     elem_classes=["chat-message"],
-                    type="messages"  # OpenAI 스타일 메시지 형식 사용
+                    type="messages"
                 )
                 with gr.Group(elem_classes="input-container"):
                     msg = gr.Textbox(
-                        placeholder="어떤 영화를 찾고 계신가요?",
+                        placeholder="What kind of movie are you looking for?",
                         show_label=False,
                         container=False
                     )
                     with gr.Row():
-                        submit = gr.Button("추천 받기", variant="primary", size="sm")
-                        clear = gr.Button("대화 초기화", size="sm")
+                        submit = gr.Button("Get Recommendations", variant="primary", size="sm")
+                        clear = gr.Button("Clear Chat", size="sm")
         
         with gr.Column(scale=1):
             with gr.Group(elem_classes="settings-panel"):
-                gr.Markdown("### 🎯 추천 설정")
+                gr.Markdown("### 🎯 Recommendation Settings")
                 genre = gr.Dropdown(
-                    choices=["액션", "코미디", "드라마", "로맨스", "스릴러", "SF", "판타지", "애니메이션"],
-                    label="선호하는 장르",
+                    choices=["Action", "Comedy", "Drama", "Romance", "Thriller", "Sci-Fi", "Fantasy", "Animation"],
+                    label="Preferred Genres",
                     multiselect=True
                 )
                 mood = gr.Dropdown(
-                    choices=["신나는", "감성적인", "긴장감 있는", "편안한", "신비로운"],
-                    label="현재 기분",
+                    choices=["Exciting", "Emotional", "Suspenseful", "Relaxing", "Mysterious"],
+                    label="Current Mood",
                     multiselect=True
                 )
             
             with gr.Group(elem_classes="settings-panel"):
-                gr.Markdown("### 🤖 Agent 설정")
+                gr.Markdown("### 🤖 Agent Settings")
                 agent_type = gr.Dropdown(
-                    choices=["전문가", "친구", "영화 평론가", "큐레이터"],
-                    label="Agent 유형",
-                    value="전문가"
+                    choices=["Expert", "Friend", "Film Critic", "Curator"],
+                    label="Agent Type",
+                    value="Expert"
                 )
                 personality = gr.Dropdown(
-                    choices=["친근한", "전문적인", "유머러스한", "감성적인", "객관적인"],
-                    label="성격",
-                    value="친근한"
+                    choices=["Friendly", "Professional", "Humorous", "Emotional", "Objective"],
+                    label="Personality",
+                    value="Friendly"
                 )
                 expertise_level = gr.Dropdown(
-                    choices=["초보자", "중급자", "전문가"],
-                    label="설명 수준",
-                    value="중급자"
+                    choices=["Beginner", "Intermediate", "Expert"],
+                    label="Explanation Level",
+                    value="Intermediate"
                 )
                 language = gr.Dropdown(
-                    choices=["한국어", "영어", "일본어"],
-                    label="응답 언어",
-                    value="한국어"
+                    choices=["English", "Korean", "Japanese"],
+                    label="Response Language",
+                    value="English"
                 )
             
             with gr.Group(elem_classes="settings-panel"):
-                gr.Markdown("### ⚙️ 고급 설정")
+                gr.Markdown("### ⚙️ Advanced Settings")
                 max_tokens = gr.Slider(
                     minimum=1,
                     maximum=2048,
                     value=512,
                     step=1,
-                    label="최대 토큰 수"
+                    label="Max Tokens"
                 )
                 temperature = gr.Slider(
                     minimum=0.1,
@@ -353,7 +346,7 @@ with gr.Blocks(css=custom_css) as demo:
                     label="Top-p"
                 )
 
-    # 설정 변경 시 채팅 초기화 및 알림 표시
+    # Reset chat and show notification when settings change
     for component in [agent_type, personality, expertise_level, language]:
         component.change(
             fn=show_settings_changed_info,