Update app.py

app.py

@@ -3,6 +3,14 @@ import google.generativeai as genai
 from PIL import Image
 import os
 import json
+import tempfile
+import re
+import time
+import logging
+
+# 로깅 설정
+logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(levelname)s - %(message)s')
+logger = logging.getLogger(__name__)
 
 # Gemini API 키 설정 (환경 변수에서 가져오거나 직접 입력)
 GEMINI_API_KEY = os.environ.get("GEMINI_API_KEY", "")
@@ -149,7 +157,7 @@ def generate_prompt_with_gemini(product_name, background_info, additional_info="
         )
         response = model.generate_content(
             prompt_request,
-            generation_config=genai.types.GenerationConfig(
+            generation_config=genai.GenerationConfig(
                 temperature=0.7,
                 top_p=0.95,
                 top_k=64,
@@ -163,210 +171,554 @@ def generate_prompt_with_gemini(product_name, background_info, additional_info="
     except Exception as e:
         return f"프롬프트 생성 중 오류가 발생했습니다: {str(e)}"
 
-def create_app():
-    with gr.Blocks(title="고급 상품 이미지 배경 프롬프트 생성기") as demo:
-        gr.Markdown("# 고급 상품 이미지 배경 프롬프트 생성기")
-        gr.Markdown("상품 이미지를 업로드하고 옵션을 선택하면 고품질 상업용 프롬프트가 생성됩니다.")
+# 이미지 생성에 필요한 함수들
+def save_binary_file(file_name, data):
+    with open(file_name, "wb") as f:
+        f.write(data)
+
+def translate_prompt_to_english(prompt):
+    if not re.search("[가-힣]", prompt):
+        return prompt
+    
+    prompt = prompt.replace("#1", "IMAGE_TAG_ONE")
+    prompt = prompt.replace("#2", "IMAGE_TAG_TWO")
+    prompt = prompt.replace("#3", "IMAGE_TAG_THREE")
+    
+    try:
+        if not GEMINI_API_KEY:
+            logger.error("Gemini API 키가 설정되지 않았습니다.")
+            prompt = prompt.replace("IMAGE_TAG_ONE", "#1")
+            prompt = prompt.replace("IMAGE_TAG_TWO", "#2")
+            prompt = prompt.replace("IMAGE_TAG_THREE", "#3")
+            return prompt
+            
+        model = genai.GenerativeModel('gemini-2.0-flash')
+        translation_prompt = f"""
+        Translate the following Korean text to English:
         
-        # 상품명 섹션
-        with gr.Row():
-            product_name = gr.Textbox(label="상품명 (한국어 입력)", placeholder="예: 스킨케어 튜브, 텀블러 등", interactive=True)
+        {prompt}
         
-        # 배경 유형을 선택하기 위한 라디오 버튼
-        background_type = gr.Radio(
-            choices=["심플 배경", "스튜디오 배경", "자연 환경", "실내 환경", "추상/특수 배경"],
-            label="배경 유형",
-            value="심플 배경"
+        IMPORTANT: The tokens IMAGE_TAG_ONE, IMAGE_TAG_TWO, and IMAGE_TAG_THREE are special tags 
+        and must be preserved exactly as is in your translation. Do not translate these tokens.
+        """
+        
+        logger.info(f"Translation prompt: {translation_prompt}")
+        response = model.generate_content(
+            translation_prompt,
+            generation_config=genai.GenerationConfig(
+                temperature=0.2,
+                top_p=0.95,
+                top_k=40,
+                max_output_tokens=512
+            )
         )
         
-        # 각 배경 유형에 맞는 드롭다운 컴포넌트들 (처음에는 심플 배경만 표시)
-        with gr.Row():
-            # 좌측 컬럼 - 입력 컨트롤
-            with gr.Column(scale=1):
-                image_input = gr.Image(label="상품 이미지 업로드", type="pil")
-                
-                # 심플 배경 선택 드롭다운
-                simple_dropdown = gr.Dropdown(
-                    choices=list(SIMPLE_BACKGROUNDS.keys()),
-                    value=list(SIMPLE_BACKGROUNDS.keys())[0] if SIMPLE_BACKGROUNDS else None,
-                    label="심플 배경 선택",
-                    visible=True,
-                    interactive=True
-                )
-                
-                # 스튜디오 배경 선택 드롭다운
-                studio_dropdown = gr.Dropdown(
-                    choices=list(STUDIO_BACKGROUNDS.keys()),
-                    value=list(STUDIO_BACKGROUNDS.keys())[0] if STUDIO_BACKGROUNDS else None,
-                    label="스튜디오 배경 선택",
-                    visible=False,
-                    interactive=True
-                )
-                
-                # 자연 환경 선택 드롭다운
-                nature_dropdown = gr.Dropdown(
-                    choices=list(NATURE_BACKGROUNDS.keys()),
-                    value=list(NATURE_BACKGROUNDS.keys())[0] if NATURE_BACKGROUNDS else None,
-                    label="자연 환경 선택",
-                    visible=False,
-                    interactive=True
-                )
-                
-                # 실내 환경 선택 드롭다운
-                indoor_dropdown = gr.Dropdown(
-                    choices=list(INDOOR_BACKGROUNDS.keys()),
-                    value=list(INDOOR_BACKGROUNDS.keys())[0] if INDOOR_BACKGROUNDS else None,
-                    label="실내 환경 선택",
-                    visible=False,
-                    interactive=True
-                )
-                
-                # 추상/특수 배경 선택 드롭다운
-                abstract_dropdown = gr.Dropdown(
-                    choices=list(ABSTRACT_BACKGROUNDS.keys()),
-                    value=list(ABSTRACT_BACKGROUNDS.keys())[0] if ABSTRACT_BACKGROUNDS else None,
-                    label="추상/특수 배경 선택",
-                    visible=False,
-                    interactive=True
-                )
-                
-                # 추가 요청사항
-                additional_info = gr.Textbox(
-                    label="추가 요청사항 (선택사항)",
-                    placeholder="예: 고급스러운 느낌, 밝은 조명, 자연스러운 보조적인 객체를 추가해주세요 등",
-                    lines=3,
-                    interactive=True
-                )
-                
-                submit_btn = gr.Button("프롬프트 생성", variant="primary")
-            
-            # 우측 컬럼 - 출력 결과
-            with gr.Column(scale=1):
-                prompt_output = gr.Textbox(label="생성된 프롬프트", lines=10)
-                image_preview = gr.Image(label="업로드된 이미지 (#1)", type="pil")
-                preview_html = gr.HTML("프롬프트 생성 시 여기에 미리보기가 표시됩니다.")
+        translated_text = response.text
         
-        # 배경 유형에 따라 드롭다운 표시 업데이트
-        def update_dropdowns(bg_type):
-            return {
-                simple_dropdown: gr.update(visible=(bg_type == "심플 배경")),
-                studio_dropdown: gr.update(visible=(bg_type == "스튜디오 배경")),
-                nature_dropdown: gr.update(visible=(bg_type == "자연 환경")),
-                indoor_dropdown: gr.update(visible=(bg_type == "실내 환경")),
-                abstract_dropdown: gr.update(visible=(bg_type == "추상/특수 배경"))
-            }
+        if translated_text.strip():
+            translated_text = translated_text.replace("IMAGE_TAG_ONE", "#1")
+            translated_text = translated_text.replace("IMAGE_TAG_TWO", "#2")
+            translated_text = translated_text.replace("IMAGE_TAG_THREE", "#3")
+            logger.info(f"Translated text: {translated_text.strip()}")
+            return translated_text.strip()
+        else:
+            logger.warning("번역 결과가 없습니다. 원본 프롬프트 사용")
+            prompt = prompt.replace("IMAGE_TAG_ONE", "#1")
+            prompt = prompt.replace("IMAGE_TAG_TWO", "#2")
+            prompt = prompt.replace("IMAGE_TAG_THREE", "#3")
+            return prompt
+    except Exception as e:
+        logger.exception("번역 중 오류 발생:")
+        prompt = prompt.replace("IMAGE_TAG_ONE", "#1")
+        prompt = prompt.replace("IMAGE_TAG_TWO", "#2")
+        prompt = prompt.replace("IMAGE_TAG_THREE", "#3")
+        return prompt
+
+def preprocess_prompt(prompt, image1, image2, image3):
+    has_img1 = image1 is not None
+    has_img2 = image2 is not None
+    has_img3 = image3 is not None
+
+    if "#1" in prompt and not has_img1:
+        prompt = prompt.replace("#1", "첫 번째 이미지(없음)")
+    else:
+        prompt = prompt.replace("#1", "첫 번째 이미지")
+
+    if "#2" in prompt and not has_img2:
+        prompt = prompt.replace("#2", "두 번째 이미지(없음)")
+    else:
+        prompt = prompt.replace("#2", "두 번째 이미지")
+
+    if "#3" in prompt and not has_img3:
+        prompt = prompt.replace("#3", "세 번째 이미지(없음)")
+    else:
+        prompt = prompt.replace("#3", "세 번째 이미지")
+
+    if "1. 이미지 변경" in prompt:
+        desc_match = re.search(r'#1을 "(.*?)"으로 바꿔라', prompt)
+        if desc_match:
+            description = desc_match.group(1)
+            prompt = f"첫 번째 이미지를 {description}으로 변경해주세요. 원본 이미지의 주요 내용은 유지하되 새로운 스타일과 분위기로 재해석해주세요."
+        else:
+            prompt = "첫 번째 이미지를 창의적으로 변형해주세요. 더 생생하고 예술적인 버전으로 만들어주세요."
+
+    elif "2. 글자지우기" in prompt:
+        text_match = re.search(r'#1에서 "(.*?)"를 지워라', prompt)
+        if text_match:
+            text_to_remove = text_match.group(1)
+            prompt = f"첫 번째 이미지에서 '{text_to_remove}' 텍스트를 찾아 자연스럽게 제거해주세요. 텍스트가 있던 부분을 배경과 조화롭게 채워주세요."
+        else:
+            prompt = "첫 번째 이미지에서 모든 텍스트를 찾아 자연스럽게 제거해주세요. 깔끔한 이미지로 만들어주세요."
+
+    elif "4. 옷바꾸기" in prompt:
+        prompt = "첫 번째 이미지의 인물 의상을 두 번째 이미지의 의상으로 변경해주세요. 의상의 스타일과 색상은 두 번째 이미지를 따르되, 신체 비율과 포즈는 첫 번째 이미지를 유지해주세요."
+
+    elif "5. 배경바꾸기" in prompt:
+        prompt = "첫 번째 이미지의 배경을 두 번째 이미지의 배경으로 변경해주세요. 첫 번째 이미지의 주요 피사체는 유지하고, 두 번째 이미지의 배경과 조화롭게 합성해주세요."
+
+    elif "6. 이미지 합성(상품포함)" in prompt:
+        prompt = "첫 번째 이미지와 두 번째 이미지(또는 세 번째 이미지)를 자연스럽게 합성해주세요. 모든 이미지의 주요 요소를 포함하고, 특히 상품이 돋보이도록 조화롭게 통합해주세요."
+
+    prompt += " 이미지를 생성해주세요. 이미지에 텍스트나 글자를 포함하지 마세요."
+    return prompt
+
+def generate_with_images(prompt, images, variation_index=0):
+    try:
+        if not GEMINI_API_KEY:
+            return None, "API 키가 설정되지 않았습니다. 환경변수를 확인해주세요."
+
+        model = genai.GenerativeModel('gemini-2.0-flash-exp-image-generation')
+        logger.info(f"Gemini API 요청 시작 - 프롬프트: {prompt}, 변형 인덱스: {variation_index}")
+
+        variation_suffixes = [
+            " Create this as the first variation. Do not add any text, watermarks, or labels to the image.",
+            " Create this as the second variation with more vivid colors. Do not add any text, watermarks, or labels to the image.",
+            " Create this as the third variation with a more creative style. Do not add any text, watermarks, or labels to the image.",
+            " Create this as the fourth variation with enhanced details. Do not add any text, watermarks, or labels to the image."
+        ]
         
-        # 배경 유형 변경 이벤트 처리
-        background_type.change(
-            fn=update_dropdowns,
-            inputs=[background_type],
-            outputs=[simple_dropdown, studio_dropdown, nature_dropdown, indoor_dropdown, abstract_dropdown]
+        if variation_index < len(variation_suffixes):
+            prompt = prompt + variation_suffixes[variation_index]
+        else:
+            prompt = prompt + " Do not add any text, watermarks, or labels to the image."
+
+        contents = [prompt]
+        for idx, img in enumerate(images, 1):
+            if img is not None:
+                contents.append(img)
+                logger.info(f"이미지 #{idx} 추가됨")
+
+        response = model.generate_content(
+            contents=contents,
+            generation_config=genai.GenerationConfig(
+                temperature=1,
+                top_p=0.95,
+                top_k=40,
+                max_output_tokens=8192
+            )
         )
-        
-        # 선택된 배경 정보 가져오기
-        def get_selected_background_info(bg_type, simple, studio, nature, indoor, abstract):
-            if bg_type == "심플 배경":
-                return {
-                    "category": "심플 배경",
-                    "name": simple,
-                    "english": SIMPLE_BACKGROUNDS.get(simple, "white background")
-                }
-            elif bg_type == "스튜디오 배경":
-                return {
-                    "category": "스튜디오 배경",
-                    "name": studio,
-                    "english": STUDIO_BACKGROUNDS.get(studio, "product photography studio")
-                }
-            elif bg_type == "자연 환경":
-                return {
-                    "category": "자연 환경",
-                    "name": nature,
-                    "english": NATURE_BACKGROUNDS.get(nature, "natural environment")
-                }
-            elif bg_type == "실내 환경":
-                return {
-                    "category": "실내 환경",
-                    "name": indoor,
-                    "english": INDOOR_BACKGROUNDS.get(indoor, "indoor environment")
-                }
-            elif bg_type == "추상/특수 배경":
-                return {
-                    "category": "추상/특수 배경",
-                    "name": abstract,
-                    "english": ABSTRACT_BACKGROUNDS.get(abstract, "abstract background")
-                }
-            else:
-                return {
-                    "category": "기본 배경",
-                    "name": "화이트 배경",
-                    "english": "white background"
-                }
-        
-        # 프롬프트 생성 함수
-        def generate_output(image, bg_type, simple, studio, nature, indoor, abstract, product_text, additional_text):
-            if image is None:
-                gr.Warning("이미지를 업로드해주세요.")
-                return "이미지를 업로드해주세요.", None, "이미지를 업로드 후 프롬프트를 생성해주세요."
+
+        with tempfile.NamedTemporaryFile(suffix=".png", delete=False) as tmp:
+            temp_path = tmp.name
+            result_text = ""
+            image_found = False
             
-            product_text = product_text.strip() or "제품"
+            if hasattr(response, 'candidates') and response.candidates:
+                candidate = response.candidates[0]
+                if hasattr(candidate, 'content') and candidate.content:
+                    for part in candidate.content.parts:
+                        if hasattr(part, 'text') and part.text:
+                            result_text += part.text
+                            logger.info(f"응답 텍스트: {part.text}")
+                        elif hasattr(part, 'inline_data') and part.inline_data:
+                            save_binary_file(temp_path, part.inline_data.data)
+                            image_found = True
+                            logger.info("응답에서 이미지 추출 성공")
             
-            # 배경 정보 가져오기
-            background_info = get_selected_background_info(bg_type, simple, studio, nature, indoor, abstract)
+            if not image_found:
+                return None, f"API에서 이미지를 생성하지 못했습니다. 응답 텍스트: {result_text}"
             
-            try:
-                prompt = generate_prompt_with_gemini(product_text, background_info, additional_text)
-                
-                if not GEMINI_API_KEY:
-                    gr.Warning("Gemini API 키가 설정되지 않았습니다. 키를 발급받아 설정해주세요.")
-                    prompt = """
-[Gemini API 키 누락]
-API 키 설정 방법:
-1. 환경 변수: export GEMINI_API_KEY="your-api-key"
-2. 코드 내 직접 입력: GEMINI_API_KEY = "your-api-key"
-키 발급: https://makersuite.google.com/
-"""
-                    return prompt, image, "API 키를 설정해야 합니다."
-                
-                # 프롬프트 요약 HTML 생성
-                preview = f"""
-                <div style="padding:10px; border:1px solid #ddd; border-radius:8px; margin-top:10px;">
-                    <h3>프롬프트 요약</h3>
-                    <p><strong>총 길이:</strong> {len(prompt)} 글자</p>
-                    <p><strong>배경:</strong> {background_info['category']} &gt; {background_info['name']}</p>
-                    <p><strong>주요 요소:</strong> {", ".join([kw for kw in ["commercial photography", "product", "square format", "centered", "detailed"] if kw.lower() in prompt.lower()])}</p>
-                    <p><strong>미드저니 파라미터:</strong> {" ".join([param for param in ["--ar 1:1", "--s 750", "--q 2"] if param in prompt])}</p>
-                </div>
-                """
-                
-                return prompt, image, preview
-            except Exception as e:
-                error_msg = f"프롬프트 생성 중 오류 발생: {str(e)}"
-                gr.Error(error_msg)
-                return error_msg, image, "오류가 발생했습니다."
+            result_img = Image.open(temp_path)
+            if result_img.mode == "RGBA":
+                result_img = result_img.convert("RGB")
+            
+            return result_img, f"이미지가 성공적으로 생성되었습니다. {result_text}"
+    except Exception as e:
+        logger.exception("이미지 생성 중 오류 발생:")
+        return None, f"오류 발생: {str(e)}"
+
+def process_images_with_prompt(image1, image2, image3, prompt, variation_index=0, max_retries=3):
+    retry_count = 0
+    last_error = None
+    
+    while retry_count < max_retries:
+        try:
+            images = [image1, image2, image3]
+            valid_images = [img for img in images if img is not None]
+            if not valid_images:
+                return None, "적어도 하나의 이미지를 업로드해주세요.", ""
+
+            if prompt and prompt.strip():
+                processed_prompt = preprocess_prompt(prompt, image1, image2, image3)
+                if re.search("[가-힣]", processed_prompt):
+                    final_prompt = translate_prompt_to_english(processed_prompt)
+                else:
+                    final_prompt = processed_prompt
+            else:
+                if len(valid_images) == 1:
+                    final_prompt = "Please creatively transform this image into a more vivid and artistic version. Do not include any text or watermarks in the generated image."
+                    logger.info("Default prompt generated for single image")
+                elif len(valid_images) == 2:
+                    final_prompt = "Please seamlessly composite these two images, integrating their key elements harmoniously into a single image. Do not include any text or watermarks in the generated image."
+                    logger.info("Default prompt generated for two images")
+                else:
+                    final_prompt = "Please creatively composite these three images, combining their main elements into a cohesive and natural scene. Do not include any text or watermarks in the generated image."
+                    logger.info("Default prompt generated for three images")
+
+            result_img, status = generate_with_images(final_prompt, valid_images, variation_index)
+            if result_img is not None:
+                return result_img, status, final_prompt
+            else:
+                last_error = status
+                retry_count += 1
+                logger.warning(f"이미지 생성 실패, 재시도 {retry_count}/{max_retries}: {status}")
+                time.sleep(1)
+        except Exception as e:
+            last_error = str(e)
+            retry_count += 1
+            logger.exception(f"이미지 처리 중 오류 발생, 재시도 {retry_count}/{max_retries}:")
+            time.sleep(1)
+    
+    return None, f"최대 재시도 횟수({max_retries}회) 초과 후 실패: {last_error}", prompt
+
+def generate_multiple_images(image1, image2, image3, prompt, progress=gr.Progress()):
+    results = []
+    statuses = []
+    prompts = []
+    
+    num_images = 4
+    max_retries = 3
+    
+    progress(0, desc="이미지 생성 준비 중...")
+    
+    for i in range(num_images):
+        progress((i / num_images), desc=f"{i+1}/{num_images} 이미지 생성 중...")
+        result_img, status, final_prompt = process_images_with_prompt(image1, image2, image3, prompt, i, max_retries)
         
-        # 프롬프트 생성 버튼 클릭 이벤트
-        submit_btn.click(
-            fn=generate_output,
-            inputs=[
-                image_input,
-                background_type,
-                simple_dropdown,
-                studio_dropdown,
-                nature_dropdown,
-                indoor_dropdown,
-                abstract_dropdown,
-                product_name,
-                additional_info
-            ],
-            outputs=[
-                prompt_output,
-                image_preview,
-                preview_html
-            ]
-        )
+        if result_img is not None:
+            results.append(result_img)
+            statuses.append(f"이미지 #{i+1}: {status}")
+            prompts.append(f"이미지 #{i+1}: {final_prompt}")
+        else:
+            results.append(None)
+            statuses.append(f"이미지 #{i+1} 생성 실패: {status}")
+            prompts.append(f"이미지 #{i+1}: {final_prompt}")
+        
+        time.sleep(1)
+    
+    progress(1.0, desc="이미지 생성 완료!")
+    
+    while len(results) < 4:
+        results.append(None)
     
-    return demo
+    combined_status = "\n".join(statuses)
+    combined_prompts = "\n".join(prompts)
+    
+    return results[0], results[1], results[2], results[3], combined_status, combined_prompts
+
+# 커스텀 CSS 스타일
+custom_css = """
+:root {
+    --primary-color: #5561e9;
+    --secondary-color: #6c8aff;
+    --accent-color: #ff6b6b;
+    --background-color: #f0f5ff;
+    --card-bg: #ffffff;
+    --text-color: #334155;
+    --border-radius: 18px;
+    --shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
+}
+
+body {
+    font-family: 'Pretendard', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
+    background-color: var(--background-color);
+    color: var(--text-color);
+    line-height: 1.6;
+}
+
+/* Gradio 컨테이너 오버라이드 */
+.gradio-container {
+    max-width: 100% !important;
+    margin: 0 auto !important;
+    padding: 0 !important;
+    background-color: var(--background-color) !important;
+}
+
+/* 상단 헤더 */
+.app-header {
+    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+    color: white;
+    padding: 2rem;
+    border-radius: var(--border-radius);
+    margin-bottom: 1.5rem;
+    box-shadow: var(--shadow);
+    text-align: center;
+}
+
+.app-header h1 {
+    margin: 0;
+    font-size: 2.5rem;
+    font-weight: 700;
+    letter-spacing: -0.5px;
+}
+
+.app-header p {
+    margin: 0.75rem 0 0;
+    font-size: 1.1rem;
+    opacity: 0.9;
+}
+
+/* 패널 스타일링 */
+.panel {
+    background-color: var(--card-bg);
+    border-radius: var(--border-radius);
+    box-shadow: var(--shadow);
+    padding: 1.5rem;
+    margin-bottom: 1.5rem;
+    border: 1px solid rgba(0, 0, 0, 0.04);
+    transition: transform 0.3s ease;
+}
+
+.panel:hover {
+    transform: translateY(-5px);
+}
+
+/* 섹션 제목 */
+.section-title {
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: var(--primary-color);
+    margin-bottom: 1rem;
+    padding-bottom: 0.5rem;
+    border-bottom: 2px solid var(--secondary-color);
+    display: flex;
+    align-items: center;
+}
+
+.section-title i {
+    margin-right: 0.5rem;
+    font-size: 1.4rem;
+}
+
+/* 버튼 스타일링 */
+.custom-button {
+    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+    color: white !important;
+    border: none !important;
+    border-radius: calc(var(--border-radius) - 5px) !important;
+    padding: 0.8rem 1.2rem !important;
+    font-weight: 600 !important;
+    cursor: pointer !important;
+    transition: all 0.3s ease !important;
+    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
+    text-transform: none !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+}
+
+.custom-button:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08) !important;
+}
+
+.custom-button.primary {
+    background: linear-gradient(135deg, var(--accent-color), #ff9a8b) !important;
+}
+
+.custom-button i {
+    margin-right: 0.5rem;
+}
+
+/* 이미지 컨테이너 */
+.image-container {
+    border-radius: var(--border-radius);
+    overflow: hidden;
+    border: 1px solid rgba(0, 0, 0, 0.08);
+    transition: all 0.3s ease;
+    background-color: white;
+}
+
+.image-container:hover {
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+}
+
+/* 탭 컨테이너 */
+.custom-tabs {
+    background-color: transparent !important;
+    border: none !important;
+    margin-bottom: 1rem;
+}
+
+.custom-tabs button {
+    background-color: rgba(255, 255, 255, 0.7) !important;
+    border: none !important;
+    border-radius: var(--border-radius) var(--border-radius) 0 0 !important;
+    padding: 0.8rem 1.5rem !important;
+    font-weight: 600 !important;
+    color: var(--text-color) !important;
+    transition: all 0.3s ease !important;
+}
+
+.custom-tabs button[aria-selected="true"] {
+    background-color: var(--primary-color) !important;
+    color: white !important;
+}
+
+/* 입력 필드 */
+.custom-input {
+    border-radius: calc(var(--border-radius) - 5px) !important;
+    border: 1px solid rgba(0, 0, 0, 0.1) !important;
+    padding: 0.8rem 1rem !important;
+    transition: all 0.3s ease !important;
+}
+
+.custom-input:focus {
+    border-color: var(--primary-color) !important;
+    box-shadow: 0 0 0 2px rgba(85, 97, 233, 0.2) !important;
+}
+
+/* 사용자 매뉴얼 */
+.user-manual {
+    background-color: white;
+    padding: 2rem;
+    border-radius: var(--border-radius);
+    box-shadow: var(--shadow);
+    margin-top: 2rem;
+}
+
+.manual-title {
+    font-size: 1.8rem;
+    font-weight: 700;
+    color: var(--primary-color);
+    margin-bottom: 1.5rem;
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.manual-title i {
+    margin-right: 0.5rem;
+    font-size: 1.8rem;
+}
+
+.manual-section {
+    margin-bottom: 1.5rem;
+    padding: 1.2rem;
+    background-color: #f8faff;
+    border-radius: calc(var(--border-radius) - 5px);
+}
+
+.manual-section-title {
+    font-size: 1.3rem;
+    font-weight: 700;
+    margin-bottom: 1rem;
+    color: var(--primary-color);
+    display: flex;
+    align-items: center;
+}
+
+.manual-section-title i {
+    margin-right: 0.5rem;
+    font-size: 1.2rem;
+}
+
+.manual-text {
+    font-size: 1rem;
+    line-height: 1.7;
+}
+
+.manual-text strong {
+    color: var(--accent-color);
+}
+
+.tip-box {
+    background-color: rgba(255, 107, 107, 0.1);
+    border-left: 3px solid var(--accent-color);
+    padding: 1rem 1.2rem;
+    margin: 1rem 0;
+    border-radius: 8px;
+}
+
+/* 버튼 그룹 */
+.button-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+    gap: 0.8rem;
+    margin-bottom: 1.2rem;
+}
+
+/* 로딩 애니메이션 */
+.progress-container {
+    background-color: rgba(255, 255, 255, 0.9);
+    border-radius: var(--border-radius);
+    padding: 2rem;
+    box-shadow: var(--shadow);
+    text-align: center;
+}
+
+.progress-bar {
+    height: 8px;
+    border-radius: 4px;
+    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
+    margin: 1rem 0;
+}
+
+/* 예시 그리드 */
+.examples-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+    gap: 1rem;
+    margin: 1.5rem 0;
+}
+
+.example-card {
+    background: white;
+    border-radius: var(--border-radius);
+    overflow: hidden;
+    box-shadow: var(--shadow);
+    transition: transform 0.3s ease;
+}
+
+.example-card:hover {
+    transform: translateY(-5px);
+}
+
+/* 반응형 */
+@media (max-width: 768px) {
+    .button-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+/* 전체 인터페이스 둥근 모서리 */
+.block, .prose, .gr-prose, .gr-form, .gr-panel {
+    border-radius: var(--border-radius) !important;
+}
+
+/* 메인 컨텐츠 스크롤바 */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: rgba(0, 0, 0, 0.05);
+    border-radius: 10px;
+}
 
-if __name__ == "__main__":
-    app = create_app()
-    app.launch()
+::-webkit-scrollbar-thumb {
+    background: var(--secondary-color);
+    border-radius: 10px;
+}