Update app.py

app.py

@@ -320,47 +320,50 @@ def process_generation(original_prompt, aspect_ratio, resolution, request: gr.Re
     """이미지 생성 처리 - HF OAuth 사용"""
     # 로그인 확인
     if not request.username:
-        yield "❌ 로그인이 필요합니다. 우측 상단에서 HuggingFace로 로그인해주세요.", None, None, None, "로그인 필요"
+        yield "❌ 로그인이 필요합니다. 상단에서 HuggingFace로 로그인해주세요.", None, None, None, "🔐 로그인이 필요합니다"
         return
     
     # 유저 정보 가져오기/생성
     user = get_or_create_user(request.username)
+    admin_badge = " 👑 관리자" if user["is_admin"] else ""
     
     if not user["is_active"]:
-        yield "❌ 비활성화된 계정입니다.", None, None, None, "계정 비활성화"
+        yield "❌ 비활성화된 계정입니다.", None, None, None, f"**👋 {request.username}**{admin_badge} | ❌ 비활성화"
         return
     
     # 사용량 확인
     allowed, current, limit = check_usage_limit(user["id"], user["daily_limit"])
     if not allowed:
-        yield f"❌ 일일 한도({limit}회) 초과", None, None, None, f"{current}/{limit}"
+        yield f"❌ 일일 한도({limit}회) 초과", None, None, None, f"**👋 {request.username}**{admin_badge} | 사용량: {current}/{limit} ❌ 초과"
         return
     
     fw_key = FIREWORKS_API_KEY
     fl_key = FAL_KEY
     
     if not fw_key or not fl_key:
-        yield "❌ API 키가 설정되지 않았습니다.", None, None, None, f"{current}/{limit}"
+        yield "❌ API 키가 설정되지 않았습니다.", None, None, None, f"**👋 {request.username}**{admin_badge} | 사용량: {current}/{limit}"
         return
     
-    yield f"⚡ 프롬프트 증강 중... ({current}/{limit})", None, None, None, f"{current}/{limit}"
+    status_base = f"**👋 {request.username}**{admin_badge}"
+    
+    yield f"⚡ 프롬프트 증강 중...", None, None, None, f"{status_base} | 사용량: {current}/{limit}"
     
     enhanced = enhance_prompt(original_prompt, fw_key)
     if enhanced.startswith("❌"):
-        yield enhanced, None, None, None, f"{current}/{limit}"
+        yield enhanced, None, None, None, f"{status_base} | 사용량: {current}/{limit}"
         return
     
-    yield "✅ 프롬프트 증강 완료\n⚡ 원본 이미지 생성 중...", enhanced, None, None, f"{current}/{limit}"
+    yield "✅ 프롬프트 증강 완료\n⚡ 원본 이미지 생성 중...", enhanced, None, None, f"{status_base} | 사용량: {current}/{limit}"
     original_image = generate_image(original_prompt, fl_key, aspect_ratio, resolution)
     
-    yield "✅ 원본 이미지 완료\n⚡ 증강 이미지 생성 중...", enhanced, original_image, None, f"{current}/{limit}"
+    yield "✅ 원본 이미지 완료\n⚡ 증강 이미지 생성 중...", enhanced, original_image, None, f"{status_base} | 사용량: {current}/{limit}"
     enhanced_image = generate_image(enhanced, fl_key, aspect_ratio, resolution)
     
     # 사용량 증가 및 저장
     new_count = increment_usage(user["id"])
     save_generation(user["id"], original_prompt, enhanced, enhanced_image or original_image, "success" if enhanced_image else "partial")
     
-    yield f"✅ 완료! 사용량: {new_count}/{limit}", enhanced, original_image, enhanced_image, f"{new_count}/{limit}"
+    yield f"✅ 완료! 사용량: {new_count}/{limit}", enhanced, original_image, enhanced_image, f"{status_base} | 사용량: {new_count}/{limit}"
 
 # ============================================
 # CSS - 밝은 프로페셔널 테마
@@ -564,6 +567,63 @@ a.hf-login-btn:hover {
     box-shadow: 0 6px 16px rgba(255, 157, 0, 0.4);
 }
 
+/* Gradio LoginButton 스타일 오버라이드 */
+.hf-login-btn button,
+button.hf-login-btn,
+.hf-login-btn > button {
+    background: linear-gradient(135deg, #ff9d00 0%, #ffb347 100%) !important;
+    color: #000 !important;
+    font-weight: 600 !important;
+    font-size: 0.9rem !important;
+    padding: 10px 20px !important;
+    border-radius: 25px !important;
+    border: none !important;
+    cursor: pointer !important;
+    box-shadow: 0 4px 12px rgba(255, 157, 0, 0.3) !important;
+    transition: all 0.2s ease !important;
+}
+
+.hf-login-btn button:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 6px 16px rgba(255, 157, 0, 0.4) !important;
+}
+
+/* 로그아웃 버튼 */
+.logout-btn button,
+button.logout-btn {
+    background: #f3f4f6 !important;
+    color: #4b5563 !important;
+    font-weight: 500 !important;
+    font-size: 0.85rem !important;
+    padding: 8px 16px !important;
+    border-radius: 20px !important;
+    border: 1px solid #e5e7eb !important;
+}
+
+.logout-btn button:hover {
+    background: #e5e7eb !important;
+}
+
+/* 사용량 정보 */
+.usage-info {
+    display: flex;
+    align-items: center;
+    padding: 8px 16px;
+    background: #f0f9ff;
+    border-radius: 20px;
+    font-size: 0.9rem;
+}
+
+/* 헤더 Row */
+.header-row {
+    background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%);
+    border-radius: 16px;
+    padding: 10px 20px;
+    margin-bottom: 20px;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+    align-items: center;
+}
+
 .hf-login-btn svg {
     width: 20px;
     height: 20px;
@@ -633,47 +693,6 @@ examples = [
     ["바다 위 일몰과 작은 돛단배"],
 ]
 
-def get_header_html(request: gr.Request):
-    """헤더 HTML 생성 - 로그인 상태에 따라 다른 버튼 표시"""
-    if request.username:
-        user = get_or_create_user(request.username)
-        usage = get_daily_usage(user["id"])
-        admin_icon = '<span class="admin-crown">👑</span>' if user["is_admin"] else ''
-        
-        return f'''
-        <div class="header-container">
-            <div class="header-left">
-                <h1 class="cyber-title" style="margin:0; font-size:2rem;">🚀 PROMPT ENHANCER</h1>
-                <p style="color: #4b5563; font-size: 0.95rem; margin: 4px 0 0 0;">AI-Powered Image Generation</p>
-            </div>
-            <div class="header-right">
-                <span class="usage-badge">📊 오늘 사용량: <strong>{usage}/{user["daily_limit"]}</strong></span>
-                <div class="user-badge">
-                    {admin_icon}
-                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
-                    {request.username}
-                </div>
-            </div>
-        </div>
-        '''
-    else:
-        return '''
-        <div class="header-container">
-            <div class="header-left">
-                <h1 class="cyber-title" style="margin:0; font-size:2rem;">🚀 PROMPT ENHANCER</h1>
-                <p style="color: #4b5563; font-size: 0.95rem; margin: 4px 0 0 0;">AI-Powered Image Generation</p>
-            </div>
-            <div class="header-right">
-                <a href="/login/huggingface" class="hf-login-btn">
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" fill="currentColor">
-                        <path d="M37.5 45c-5.5 0-10 4.5-10 10s4.5 10 10 10 10-4.5 10-10-4.5-10-10-10zm45 0c-5.5 0-10 4.5-10 10s4.5 10 10 10 10-4.5 10-10-4.5-10-10-10zM60 85c-11 0-20-6.3-20-14h40c0 7.7-9 14-20 14z"/>
-                    </svg>
-                    HuggingFace로 로그인
-                </a>
-            </div>
-        </div>
-        '''
-
 def get_user_info(request: gr.Request):
     """현재 로그인한 유저 정보 반환"""
     if not request.username:
@@ -766,13 +785,23 @@ def admin_change_limit(user_id, new_limit, request: gr.Request):
 # Gradio 앱 빌드
 with gr.Blocks(title="AI PROMPT ENHANCER", css=CUSTOM_CSS) as demo:
     
-    # 동적 헤더 (로그인 상태에 따라 변경)
-    header_html = gr.HTML()
+    # 헤더 영역
+    with gr.Row(elem_classes=["header-row"]):
+        with gr.Column(scale=3):
+            gr.HTML('''
+                <div style="padding: 20px 0;">
+                    <h1 class="cyber-title" style="margin:0; font-size:2rem;">🚀 PROMPT ENHANCER</h1>
+                    <p style="color: #4b5563; font-size: 0.95rem; margin: 4px 0 0 0;">AI-Powered Image Generation</p>
+                </div>
+            ''')
+        with gr.Column(scale=1):
+            with gr.Row():
+                usage_info = gr.Markdown("", elem_classes=["usage-info"])
+                login_btn = gr.LoginButton(value="🤗 HuggingFace 로그인", size="sm", elem_classes=["hf-login-btn"])
+                logout_btn = gr.LogoutButton(value="로그아웃", size="sm", elem_classes=["logout-btn"])
     
-    # 유저 정보 표시 (숨김 - 헤더에서 처리)
-    with gr.Row(visible=False):
-        user_info_display = gr.Markdown("")
-        usage_display = gr.Markdown("")
+    # 유저 정보 표시
+    user_status = gr.Markdown("")
     
     with gr.Tabs() as tabs:
         # Tab 1: 이미지 생성
@@ -823,15 +852,30 @@ with gr.Blocks(title="AI PROMPT ENHANCER", css=CUSTOM_CSS) as demo:
     
     # ========== 이벤트 핸들러 ==========
     
-    # 페이지 로드 시 헤더와 유저 정보 표시
-    demo.load(get_header_html, None, [header_html])
-    demo.load(get_user_info, None, [user_info_display, usage_display])
+    # 페이지 로드 시 유저 상태 표시
+    def show_user_status(request: gr.Request):
+        if request.username:
+            user = get_or_create_user(request.username)
+            usage = get_daily_usage(user["id"])
+            admin_badge = " 👑 관리자" if user["is_admin"] else ""
+            return f"**👋 {request.username}**{admin_badge} | 사용량: {usage}/{user['daily_limit']}"
+        return "🔐 로그인이 필요합니다"
+    
+    def show_usage_info(request: gr.Request):
+        if request.username:
+            user = get_or_create_user(request.username)
+            usage = get_daily_usage(user["id"])
+            return f"📊 **{usage}/{user['daily_limit']}**"
+        return ""
+    
+    demo.load(show_user_status, None, [user_status])
+    demo.load(show_usage_info, None, [usage_info])
     
     # 이미지 생성
     generate_btn.click(
         process_generation,
         [prompt_input, aspect_ratio, resolution],
-        [status_text, enhanced_output, original_image_output, enhanced_image_output, usage_display]
+        [status_text, enhanced_output, original_image_output, enhanced_image_output, user_status]
     )
     
     # 내 계정 탭