app.py

"""
Ultimate Brand Theory Generator
===============================
2025-05-28 | 15개 이론을 통합한 종합 브랜드 생성기
-----------------------------------------------------

통합된 이론들:
1. Square Theory - 의미적 사각형 구조
2. Conceptual Blending - 개념 혼합
3. Sound Symbolism - 음향 상징주의
4. Linguistic Relativity - 언어 상대성
5. Archetype Theory - 원형 이론
6. Jobs-to-be-Done - 할 일 이론
7. SCAMPER Method - 창의적 변형
8. Design Thinking - 디자인 사고
9. Biomimicry - 생체모방
10. Cognitive Load - 인지 부하
11. Von Restorff Effect - 고립 효과
12. Network Effects - 네트워크 효과
13. Memetics - 밈 이론
14. Color Psychology - 색상 심리학
15. Gestalt Principles - 게슈탈트 원칙
"""

import os
import json
import gradio as gr
import openai
from openai import OpenAI
from datetime import datetime
from typing import List, Dict, Tuple, Optional
import random

# OpenAI 클라이언트
if not os.getenv("OPENAI_API_KEY"):
    raise EnvironmentError("OPENAI_API_KEY 환경 변수를 설정하세요.")

client = OpenAI()

# 이론별 설명
THEORY_DESCRIPTIONS = {
    "square": "4개의 단어가 의미적 관계로 연결되어 사각형을 이루는 구조입니다. 대변의 숨겨진 연결이 '아하!' 모먼트를 만듭니다.",
    "blending": "두 개 이상의 개념을 혼합하여 새로운 의미를 창출합니다. Netflix(Net+Flix)처럼 혁신적인 개념을 탄생시킵니다.",
    "sound": "음소와 의미 간의 연관성을 활용합니다. 'i,e'는 가볍고 빠른 느낌, 'o,u'는 무겁고 느린 느낌을 전달합니다.",
    "linguistic": "언어별 사고방식 차이를 고려한 글로벌 브랜드를 만듭니다. 문화적 뉘앙스와 현지화 전략을 반영합니다.",
    "archetype": "Jung의 12가지 보편적 원형을 활용합니다. Hero(Nike), Creator(Apple)처럼 무의식적 감정 연결을 만듭니다.",
    "jobs": "고객이 해결하려는 '일'에 초점을 맞춥니다. 기능적, 감정적, 사회적 차원의 니즈를 통합적으로 해결합니다.",
    "scamper": "7가지 창의적 기법(대체, 결합, 적응, 수정, 용도변경, 제거, 역전)으로 혁신적인 브랜드를 만듭니다.",
    "design": "인간 중심 혁신을 추구합니다. 바람직함(인간), 실현가능성(기술), 생존가능성(비즈니스)의 교집합을 찾습니다.",
    "biomimicry": "자연에서 영감을 받은 브랜드를 만듭니다. 38억년 진화의 지혜를 브랜딩에 적용합니다.",
    "cognitive": "인지 처리를 최소화하는 브랜드를 만듭니다. 1-3음절의 쉬운 발음으로 즉각적 인식과 기억을 돕습니다.",
    "vonrestorff": "독특하고 기억에 남는 브랜드를 만듭니다. 카테고리 관습을 의도적으로 위반하여 30배 더 잘 기억되게 합니다.",
    "network": "네트워크 가치를 극대화하는 브랜드를 만듭니다. 사용자가 많을수록 가치가 증가하는 구조를 설계합니다.",
    "memetics": "문화적으로 복제되고 진화하는 브랜드를 만듭니다. 밈처럼 자연스럽게 퍼져나가는 바이럴 요소를 내재화합니다.",
    "color": "색상 연상과 감정을 활용한 브랜드를 만듭니다. 빨강(열정), 파랑(신뢰), 초록(자연) 등 색상 심리를 적용합니다.",
    "gestalt": "지각 원리를 활용한 브랜드를 만듭니다. 전체가 부분의 합보다 크다는 원칙으로 통합적 브랜드 경험을 설계합니다."
}

# ===== 1. SQUARE THEORY =====
SQUARE_THEORY_PROMPT = """
당신은 Square Theory 전문가입니다. Square Theory는 4개의 단어가 의미적 관계로 연결되어 사각형을 이루는 구조입니다.
브랜드명이 Square를 완성하며 "아하!" 모먼트를 만들어야 합니다.

사용자 입력(업종/키워드)을 받아 다음 JSON 형식의 배열을 생성하세요:
{
  "brand_name": "브랜드명",
  "tl": "왼쪽상단", "tr": "오른쪽상단", "bl": "왼쪽하단", "br": "오른쪽하단",
  "top_edge": "상단 관계", "bottom_edge": "하단 관계",
  "left_edge": "왼쪽 관계", "right_edge": "오른쪽 관계",
  "slogan": "슬로건",
  "explanation": "왜 효과적인지"
}

반드시 유효한 JSON 형식으로 응답하세요.
"""

# ===== 2. CONCEPTUAL BLENDING =====
CONCEPTUAL_BLENDING_PROMPT = """
당신은 Conceptual Blending Theory 전문가입니다. 두 개 이상의 개념을 혼합하여 새로운 의미를 창출합니다.

다음 JSON 형식으로 브랜드를 생성하세요:
{
  "brand_name": "브랜드명",
  "input_space1": "첫 번째 개념",
  "input_space2": "두 번째 개념",
  "generic_space": "공통 구조",
  "blended_space": "혼합된 새로운 의미",
  "emergent_properties": "창발적 속성들",
  "slogan": "슬로건",
  "explanation": "혼합이 효과적인 이유"
}

예시: Netflix = Net(인터넷) + Flix(영화) → 온라인 스트리밍의 새로운 개념
반드시 유효한 JSON 형식으로 응답하세요.
"""

# ===== 3. SOUND SYMBOLISM =====
SOUND_SYMBOLISM_PROMPT = """
당신은 Sound Symbolism 전문가입니다. 음소와 의미 간의 연관성을 활용합니다.

음향 원칙:
- 전설모음(i,e): 작고, 빠르고, 가벼움
- 후설모음(o,u): 크고, 느리고, 무거움
- 유음(l,r,m,n): 부드럽고 유연함
- 파열음(p,t,k,b,d,g): 강하고 역동적

다음 JSON 형식으로 브랜드를 생성하세요:
{
  "brand_name": "브랜드명",
  "phonetic_analysis": "음성 분석",
  "sound_meaning": "음향이 전달하는 의미",
  "target_emotion": "목표 감정",
  "industry_fit": "업종 적합성",
  "pronunciation_guide": "발음 가이드",
  "slogan": "슬로건"
}

반드시 유효한 JSON 형식으로 응답하세요.
"""

# ===== 4. LINGUISTIC RELATIVITY =====
LINGUISTIC_RELATIVITY_PROMPT = """
당신은 Linguistic Relativity 전문가입니다. 언어별 사고방식 차이를 고려합니다.

다음 JSON 형식으로 다언어 브랜드를 생성하세요:
{
  "brand_name": "글로벌 브랜드명",
  "korean_adaptation": "한국어 적응",
  "english_meaning": "영어 의미",
  "cultural_considerations": "문화적 고려사항",
  "avoid_meanings": "피해야 할 의미들",
  "localization_strategy": "현지화 전략",
  "slogan": "슬로건"
}

반드시 유효한 JSON 형식으로 응답하세요.
"""

# ===== 5. ARCHETYPE THEORY =====
ARCHETYPE_THEORY_PROMPT = """
당신은 Jung의 Archetype Theory 전문가입니다. 12가지 원형 중 하나를 선택하여 브랜드를 만듭니다.

12 원형: Innocent, Hero, Outlaw, Explorer, Creator, Ruler, Magician, Lover, Caregiver, Jester, Sage, Regular Guy

다음 JSON 형식으로 브랜드를 생성하세요:
{
  "brand_name": "브랜드명",
  "archetype": "선택된 원형",
  "archetype_traits": "원형의 특징들",
  "brand_personality": "브랜드 성격",
  "visual_direction": "시각적 방향",
  "voice_tone": "목소리 톤",
  "slogan": "슬로건",
  "mythology_reference": "신화적 참조"
}

반드시 유효한 JSON 형식으로 응답하세요.
"""

# ===== 6. JOBS-TO-BE-DONE =====
JOBS_TO_BE_DONE_PROMPT = """
당신은 Jobs-to-be-Done Theory 전문가입니다. 고객이 해결하려는 '일'에 초점을 맞춥니다.

다음 JSON 형식으로 브랜드를 생성하세요:
{
  "brand_name": "브랜드명",
  "functional_job": "기능적 일",
  "emotional_job": "감정적 일", 
  "social_job": "사회적 일",
  "job_statement": "핵심 Job 문장",
  "outcome_metrics": "성과 지표",
  "slogan": "슬로건",
  "value_proposition": "가치 제안"
}

반드시 유효한 JSON 형식으로 응답하세요.
"""

# ===== 7. SCAMPER METHOD =====
SCAMPER_PROMPT = """
당신은 SCAMPER Method 전문가입니다. 7가지 창의적 기법을 적용합니다.

S - Substitute (대체)
C - Combine (결합)
A - Adapt (적응)
M - Modify/Magnify (수정/확대)
P - Put to another use (다른 용도)
E - Eliminate (제거)
R - Reverse (역전)

다음 JSON 형식으로 브랜드를 생성하세요:
{
  "brand_name": "브랜드명",
  "scamper_technique": "사용된 기법",
  "original_concept": "원래 개념",
  "transformation": "변형 과정",
  "innovative_aspect": "혁신적 측면",
  "slogan": "슬로건"
}

반드시 유효한 JSON 형식으로 응답하세요.
"""

# ===== 8. DESIGN THINKING =====
DESIGN_THINKING_PROMPT = """
당신은 IDEO의 Design Thinking 전문가입니다. 인간 중심 혁신을 추구합니다.

다음 JSON 형식으로 브랜드를 생성하세요:
{
  "brand_name": "브랜드명",
  "user_insight": "사용자 통찰",
  "pain_point": "해결하는 문제점",
  "desirability": "바람직함 (인간)",
  "feasibility": "실현가능성 (기술)",
  "viability": "생존가능성 (비즈니스)",
  "prototype_concept": "프로토타입 컨셉",
  "slogan": "슬로건"
}

반드시 유효한 JSON 형식으로 응답하세요.
"""

# ===== 9. BIOMIMICRY =====
BIOMIMICRY_PROMPT = """
당신은 Biomimicry 전문가입니다. 자연에서 영감을 받은 브랜드를 만듭니다.

다음 JSON 형식으로 브랜드를 생성하세요:
{
  "brand_name": "브랜드명",
  "natural_inspiration": "자연적 영감원",
  "biomimetic_principle": "생체모방 원리",
  "form_function": "형태와 기능",
  "sustainability_aspect": "지속가능성 측면",
  "adaptation_strategy": "적응 전략",
  "slogan": "슬로건"
}

반드시 유효한 JSON 형식으로 응답하세요.
"""

# ===== 10. COGNITIVE LOAD =====
COGNITIVE_LOAD_PROMPT = """
당신은 Cognitive Load Theory 전문가입니다. 인지 처리를 최소화하는 브랜드를 만듭니다.

다음 JSON 형식으로 브랜드를 생성하세요:
{
  "brand_name": "브랜드명",
  "syllable_count": "음절 수",
  "processing_ease": "처리 용이성 점수",
  "memory_hooks": "기억 고리",
  "pronunciation_simplicity": "발음 단순성",
  "cognitive_fluency": "인지적 유창성",
  "slogan": "슬로건"
}

반드시 유효한 JSON 형식으로 응답하세요.
"""

# ===== 11. VON RESTORFF EFFECT =====
VON_RESTORFF_PROMPT = """
당신은 Von Restorff Effect 전문가입니다. 독특하고 기억에 남는 브랜드를 만듭니다.

다음 JSON 형식으로 브랜드를 생성하세요:
{
  "brand_name": "브랜드명",
  "category_norm": "카테고리 표준",
  "deviation_strategy": "일탈 전략",
  "uniqueness_factors": "독특성 요소들",
  "memorability_score": "기억성 점수",
  "attention_triggers": "주의 트리거",
  "slogan": "슬로건"
}

반드시 유효한 JSON 형식으로 응답하세요.
"""

# ===== 12. NETWORK EFFECTS =====
NETWORK_EFFECTS_PROMPT = """
당신은 Network Effects 전문가입니다. 네트워크 가치를 극대화하는 브랜드를 만듭니다.

다음 JSON 형식으로 브랜드를 생성하세요:
{
  "brand_name": "브랜드명",
  "network_type": "네트워크 유형",
  "viral_coefficient": "바이럴 계수",
  "sharing_ease": "공유 용이성",
  "community_aspect": "커뮤니티 측면",
  "network_value": "네트워크 가치",
  "slogan": "슬로건"
}

반드시 유효한 JSON 형식으로 응답하세요.
"""

# ===== 13. MEMETICS =====
MEMETICS_PROMPT = """
당신은 Memetics 전문가입니다. 문화적으로 복제되고 진화하는 브랜드를 만듭니다.

다음 JSON 형식으로 브랜드를 생성하세요:
{
  "brand_name": "브랜드명",
  "meme_structure": "밈 구조",
  "replication_ease": "복제 용이성",
  "mutation_potential": "변이 잠재력",
  "cultural_fitness": "문화적 적합도",
  "transmission_channels": "전달 채널",
  "slogan": "슬로건"
}

반드시 유효한 JSON 형식으로 응답하세요.
"""

# ===== 14. COLOR PSYCHOLOGY =====
COLOR_PSYCHOLOGY_PROMPT = """
당신은 Color Psychology 전문가입니다. 색상 연상과 감정을 활용한 브랜드를 만듭니다.

다음 JSON 형식으로 브랜드를 생성하세요:
{
  "brand_name": "브랜드명",
  "primary_color": "주 색상",
  "color_meaning": "색상 의미",
  "emotional_response": "감정적 반응",
  "cultural_associations": "문화적 연상",
  "industry_alignment": "업종 정렬",
  "slogan": "슬로건"
}

반드시 유효한 JSON 형식으로 응답하세요.
"""

# ===== 15. GESTALT PRINCIPLES =====
GESTALT_PROMPT = """
당신은 Gestalt Theory 전문가입니다. 지각 원리를 활용한 브랜드를 만듭니다.

다음 JSON 형식으로 브랜드를 생성하세요:
{
  "brand_name": "브랜드명",
  "gestalt_principle": "활용 원칙",
  "visual_structure": "시각적 구조",
  "perceptual_grouping": "지각적 그룹화",
  "figure_ground": "전경-배경 관계",
  "closure_effect": "폐쇄 효과",
  "slogan": "슬로건"
}

반드시 유효한 JSON 형식으로 응답하세요.
"""

# 이론별 프롬프트 매핑
THEORY_PROMPTS = {
    "square": SQUARE_THEORY_PROMPT,
    "blending": CONCEPTUAL_BLENDING_PROMPT,
    "sound": SOUND_SYMBOLISM_PROMPT,
    "linguistic": LINGUISTIC_RELATIVITY_PROMPT,
    "archetype": ARCHETYPE_THEORY_PROMPT,
    "jobs": JOBS_TO_BE_DONE_PROMPT,
    "scamper": SCAMPER_PROMPT,
    "design": DESIGN_THINKING_PROMPT,
    "biomimicry": BIOMIMICRY_PROMPT,
    "cognitive": COGNITIVE_LOAD_PROMPT,
    "vonrestorff": VON_RESTORFF_PROMPT,
    "network": NETWORK_EFFECTS_PROMPT,
    "memetics": MEMETICS_PROMPT,
    "color": COLOR_PSYCHOLOGY_PROMPT,
    "gestalt": GESTALT_PROMPT
}

def generate_by_theory(industry: str, keywords: str, theory: str, count: int = 3) -> Tuple[str, str]:
    """특정 이론으로 브랜드 생성"""
    
    if not industry or not keywords:
        return "⚠️ 업종과 키워드를 입력해주세요.", ""
    
    prompt = THEORY_PROMPTS.get(theory, SQUARE_THEORY_PROMPT)
    user_input = f"""업종: {industry}
키워드: {keywords}

위 정보로 {count}개의 브랜드를 생성하세요. 
반드시 JSON 형식으로 응답하세요. 
결과는 브랜드 객체들의 JSON 배열이어야 합니다."""
    
    try:
        response = client.chat.completions.create(
            model="gpt-4o-mini",  # 경제적인 모델
            messages=[
                {"role": "system", "content": prompt},
                {"role": "user", "content": user_input}
            ],
            temperature=0.8,
            max_tokens=2000,
            response_format={"type": "json_object"}
        )
        
        content = response.choices[0].message.content
        data = json.loads(content)
        
        # 응답 정규화
        if isinstance(data, dict):
            if "results" in data:
                results = data["results"]
            elif "brands" in data:
                results = data["brands"]
            elif "brand_name" in data:
                # 단일 브랜드를 배열로 변환
                results = [data]
            else:
                # 래핑된 응답 처리
                results = []
                for key, value in data.items():
                    if isinstance(value, list):
                        results = value
                        break
                    elif isinstance(value, dict) and "brand_name" in value:
                        results = [value]
                        break
        else:
            results = data
            
        if not isinstance(results, list):
            results = [results]
        
        # 마크다운 생성
        markdown = generate_theory_markdown(theory, results, industry, keywords)
        
        # HTML 시각화 생성
        html = generate_theory_visualization(theory, results)
        
        return markdown, html
        
    except Exception as e:
        error_msg = f"❌ {theory} 이론 오류: {str(e)}"
        print(error_msg)  # 디버깅용
        return error_msg, ""

def generate_theory_markdown(theory: str, results: List[Dict], industry: str, keywords: str) -> str:
    """이론별 맞춤 마크다운 생성"""
    
    theory_names = {
        "square": "Square Theory",
        "blending": "Conceptual Blending",
        "sound": "Sound Symbolism",
        "linguistic": "Linguistic Relativity",
        "archetype": "Archetype Theory",
        "jobs": "Jobs-to-be-Done",
        "scamper": "SCAMPER Method",
        "design": "Design Thinking",
        "biomimicry": "Biomimicry",
        "cognitive": "Cognitive Load Theory",
        "vonrestorff": "Von Restorff Effect",
        "network": "Network Effects",
        "memetics": "Memetics",
        "color": "Color Psychology",
        "gestalt": "Gestalt Principles"
    }
    
    theory_icons = {
        "square": "🟦",
        "blending": "🔀",
        "sound": "🔊",
        "linguistic": "🌐",
        "archetype": "🎭",
        "jobs": "✅",
        "scamper": "🔧",
        "design": "💭",
        "biomimicry": "🌿",
        "cognitive": "🧠",
        "vonrestorff": "⚡",
        "network": "🌍",
        "memetics": "🧬",
        "color": "🎨",
        "gestalt": "👁️"
    }
    
    markdown = f"""# {theory_icons[theory]} {theory_names[theory]}

<div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 20px; border-radius: 10px; margin-bottom: 20px;">
    <h3 style="margin: 0 0 10px 0;">이론 개요</h3>
    <p style="margin: 0; line-height: 1.6;">{THEORY_DESCRIPTIONS[theory]}</p>
</div>

**업종**: {industry} | **키워드**: {keywords}  
*생성 시각: {datetime.now().strftime('%Y-%m-%d %H:%M:%S')}*

---
"""
    
    for idx, result in enumerate(results, 1):
        brand_name = result.get('brand_name', 'N/A')
        slogan = result.get('slogan', 'N/A')
        
        markdown += f"\n## {idx}. {brand_name}\n"
        markdown += f"**슬로건**: *\"{slogan}\"*\n\n"
        
        # 이론별 특수 필드 표시
        if theory == "square":
            markdown += f"""
### Square 구조
```
[{result.get('tl')}] ─({result.get('top_edge')})─ [{result.get('tr')}]
   │                                        │
({result.get('left_edge')})              ({result.get('right_edge')})
   │                                        │
[{result.get('bl')}] ─({result.get('bottom_edge')})─ [{result.get('br')}]
```
"""
        elif theory == "blending":
            markdown += f"""
### 개념 혼합
- **입력 공간 1**: {result.get('input_space1')}
- **입력 공간 2**: {result.get('input_space2')}
- **일반 공간**: {result.get('generic_space')}
- **혼합 공간**: {result.get('blended_space')}
- **창발적 속성**: {result.get('emergent_properties')}
"""
        elif theory == "sound":
            markdown += f"""
### 음향 분석
- **음성 분석**: {result.get('phonetic_analysis')}
- **음향 의미**: {result.get('sound_meaning')}
- **목표 감정**: {result.get('target_emotion')}
- **발음 가이드**: {result.get('pronunciation_guide')}
"""
        elif theory == "archetype":
            markdown += f"""
### 원형 분석
- **원형**: {result.get('archetype')}
- **원형 특징**: {result.get('archetype_traits')}
- **브랜드 성격**: {result.get('brand_personality')}
- **목소리 톤**: {result.get('voice_tone')}
"""
        
        # 설명 추가
        explanation = result.get('explanation', result.get('value_proposition', ''))
        if explanation:
            markdown += f"\n💡 **핵심 가치**: {explanation}\n"
        
        markdown += "\n---\n"
    
    return markdown

def generate_theory_visualization(theory: str, results: List[Dict]) -> str:
    """이론별 맞춤 시각화 생성"""
    
    html_parts = []
    
    for idx, result in enumerate(results, 1):
        if theory == "square":
            html_parts.append(visualize_square_brand(result))
        elif theory == "blending":
            html_parts.append(visualize_conceptual_blend(result))
        elif theory == "sound":
            html_parts.append(visualize_sound_symbolism(result))
        elif theory == "archetype":
            html_parts.append(visualize_archetype(result))
        elif theory == "color":
            html_parts.append(visualize_color_psychology(result))
        else:
            html_parts.append(visualize_generic_brand(result, theory))
    
    return "\n".join(html_parts)

# 시각화 함수들 (일부만 예시)
def visualize_square_brand(brand: Dict) -> str:
    """Square Theory 시각화"""
    return f"""
<div style="max-width: 700px; margin: 20px auto; font-family: -apple-system, sans-serif;">
    <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 30px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.2);">
        <h2 style="text-align: center; color: white; margin-bottom: 10px;">{brand.get('brand_name', 'Brand')}</h2>
        <p style="text-align: center; font-style: italic; color: rgba(255,255,255,0.9);">"{brand.get('slogan', '')}"</p>
        
        <div style="position: relative; width: 100%; height: 300px; background: rgba(255,255,255,0.1); border-radius: 12px; padding: 30px; margin-top: 20px;">
            <!-- Square 구조 시각화 -->
            <div style="position: absolute; top: 30px; left: 30px; background: rgba(255,255,255,0.9); color: #667eea; padding: 15px 20px; border-radius: 8px; font-weight: bold; box-shadow: 0 4px 15px rgba(0,0,0,0.1);">
                {brand.get('tl', '?')}
            </div>
            <div style="position: absolute; top: 30px; right: 30px; background: rgba(255,255,255,0.9); color: #e74c3c; padding: 15px 20px; border-radius: 8px; font-weight: bold; box-shadow: 0 4px 15px rgba(0,0,0,0.1);">
                {brand.get('tr', '?')}
            </div>
            <div style="position: absolute; bottom: 30px; left: 30px; background: rgba(255,255,255,0.9); color: #f39c12; padding: 15px 20px; border-radius: 8px; font-weight: bold; box-shadow: 0 4px 15px rgba(0,0,0,0.1);">
                {brand.get('bl', '?')}
            </div>
            <div style="position: absolute; bottom: 30px; right: 30px; background: rgba(255,255,255,0.9); color: #27ae60; padding: 15px 20px; border-radius: 8px; font-weight: bold; box-shadow: 0 4px 15px rgba(0,0,0,0.1);">
                {brand.get('br', '?')}
            </div>
            
            <!-- 브랜드명 중앙 -->
            <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 20px 40px; border-radius: 12px; box-shadow: 0 8px 25px rgba(0,0,0,0.15);">
                <div style="font-size: 1.8em; font-weight: bold; color: #2c3e50; text-align: center;">{brand.get('brand_name', 'Brand')}</div>
            </div>
        </div>
    </div>
</div>
"""

def visualize_conceptual_blend(brand: Dict) -> str:
    """Conceptual Blending 시각화"""
    brand_name = brand.get('brand_name', 'Brand')
    input1 = brand.get('input_space1', 'Concept 1')
    input2 = brand.get('input_space2', 'Concept 2')
    blended = brand.get('blended_space', 'Blended Concept')
    slogan = brand.get('slogan', '')
    
    return f"""
<div style="max-width: 700px; margin: 20px auto; font-family: -apple-system, sans-serif;">
    <div style="background: linear-gradient(135deg, #ff6b6b 0%, #4ecdc4 100%); padding: 40px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.2);">
        <h2 style="text-align: center; color: white; margin-bottom: 20px;">{brand_name}</h2>
        
        <div style="display: flex; justify-content: space-around; align-items: center; margin: 30px 0;">
            <div style="text-align: center; padding: 30px; background: rgba(255,255,255,0.9); color: #ff6b6b; border-radius: 50%; width: 140px; height: 140px; display: flex; align-items: center; justify-content: center; box-shadow: 0 5px 20px rgba(0,0,0,0.2);">
                <div>
                    <strong>Input 1</strong><br>
                    <span style="font-size: 0.9em;">{input1}</span>
                </div>
            </div>
            
            <div style="font-size: 3em; color: white;">+</div>
            
            <div style="text-align: center; padding: 30px; background: rgba(255,255,255,0.9); color: #4ecdc4; border-radius: 50%; width: 140px; height: 140px; display: flex; align-items: center; justify-content: center; box-shadow: 0 5px 20px rgba(0,0,0,0.2);">
                <div>
                    <strong>Input 2</strong><br>
                    <span style="font-size: 0.9em;">{input2}</span>
                </div>
            </div>
            
            <div style="font-size: 3em; color: white;">=</div>
            
            <div style="text-align: center; padding: 30px; background: white; color: #2c3e50; border-radius: 20px; width: 180px; height: 180px; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 25px rgba(0,0,0,0.3);">
                <div>
                    <strong style="font-size: 1.2em;">Blend</strong><br>
                    <span style="font-size: 0.95em;">{blended}</span>
                </div>
            </div>
        </div>
        
        <p style="text-align: center; font-style: italic; color: white; font-size: 1.1em; margin-top: 20px;">"{slogan}"</p>
    </div>
</div>
"""

def visualize_sound_symbolism(brand: Dict) -> str:
    """Sound Symbolism 시각화"""
    return f"""
<div style="max-width: 700px; margin: 20px auto; font-family: -apple-system, sans-serif;">
    <div style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); padding: 40px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.2);">
        <h2 style="text-align: center; color: white; margin-bottom: 20px;">{brand.get('brand_name', 'Brand')}</h2>
        
        <div style="text-align: center; margin: 30px 0;">
            <div style="font-size: 4em; letter-spacing: 0.3em; color: white; text-shadow: 2px 2px 4px rgba(0,0,0,0.2); font-weight: bold;">
                {brand.get('brand_name', 'BRAND')}
            </div>
        </div>
        
        <div style="background: rgba(255,255,255,0.9); padding: 25px; border-radius: 15px; margin: 20px 0;">
            <div style="text-align: center; margin-bottom: 15px;">
                <strong style="color: #fa709a; font-size: 1.2em;">음성 분석</strong><br>
                <span style="color: #555;">{brand.get('phonetic_analysis', '')}</span>
            </div>
            
            <div style="text-align: center;">
                <strong style="color: #fee140; font-size: 1.2em;">음향이 전달하는 감정</strong><br>
                <span style="color: #555;">{brand.get('sound_meaning', '')}</span>
            </div>
        </div>
        
        <div style="text-align: center; color: white; font-style: italic;">
            발음: {brand.get('pronunciation_guide', '')}
        </div>
    </div>
</div>
"""

def visualize_archetype(brand: Dict) -> str:
    """Archetype Theory 시각화"""
    archetype_colors = {
        "Hero": "#e74c3c",
        "Creator": "#9b59b6",
        "Sage": "#3498db",
        "Explorer": "#1abc9c",
        "Innocent": "#f1c40f",
        "Jester": "#e67e22",
        "Lover": "#e91e63",
        "Caregiver": "#00bcd4",
        "Ruler": "#795548",
        "Magician": "#673ab7",
        "Outlaw": "#212121",
        "Regular Guy": "#607d8b"
    }
    
    archetype = brand.get('archetype', 'Hero')
    color = archetype_colors.get(archetype, "#3498db")
    
    return f"""
<div style="max-width: 700px; margin: 20px auto; font-family: -apple-system, sans-serif;">
    <div style="background: linear-gradient(135deg, {color} 0%, #2c3e50 100%); padding: 40px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.2);">
        <h2 style="text-align: center; color: white; margin-bottom: 30px;">{brand.get('brand_name', 'Brand')}</h2>
        
        <div style="text-align: center; margin: 30px 0;">
            <div style="display: inline-block; padding: 50px; background: rgba(255,255,255,0.15); color: white; border-radius: 50%; width: 250px; height: 250px; border: 3px solid rgba(255,255,255,0.3);">
                <h3 style="margin: 0 0 15px 0; font-size: 2em;">{archetype}</h3>
                <p style="margin: 0; font-size: 1em; line-height: 1.5;">{brand.get('archetype_traits', '')}</p>
            </div>
        </div>
        
        <div style="background: rgba(255,255,255,0.9); padding: 25px; border-radius: 15px; margin: 20px 0;">
            <p style="margin: 10px 0;"><strong style="color: {color};">브랜드 성격</strong>: {brand.get('brand_personality', '')}</p>
            <p style="margin: 10px 0;"><strong style="color: {color};">목소리 톤</strong>: {brand.get('voice_tone', '')}</p>
        </div>
        
        <p style="text-align: center; font-style: italic; font-size: 1.3em; color: white; margin-top: 30px;">"{brand.get('slogan', '')}"</p>
    </div>
</div>
"""

def visualize_color_psychology(brand: Dict) -> str:
    """Color Psychology 시각화"""
    color = brand.get('primary_color', '#3498db')
    
    return f"""
<div style="max-width: 700px; margin: 20px auto; font-family: -apple-system, sans-serif;">
    <div style="background: #f8f9fa; padding: 40px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.1);">
        <h2 style="text-align: center; color: #2c3e50; margin-bottom: 30px;">{brand.get('brand_name', 'Brand')}</h2>
        
        <div style="text-align: center; margin: 30px 0;">
            <div style="display: inline-block; width: 300px; height: 300px; background: {color}; border-radius: 20px; box-shadow: 0 15px 40px rgba(0,0,0,0.3); position: relative; overflow: hidden;">
                <div style="position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: white; font-size: 1.5em; font-weight: bold; text-shadow: 2px 2px 4px rgba(0,0,0,0.5);">
                    {brand.get('primary_color', '')}
                </div>
            </div>
        </div>
        
        <div style="background: white; padding: 25px; border-radius: 15px; box-shadow: 0 5px 15px rgba(0,0,0,0.1);">
            <p style="margin: 10px 0;"><strong style="color: {color};">색상 의미</strong>: {brand.get('color_meaning', '')}</p>
            <p style="margin: 10px 0;"><strong style="color: {color};">감정적 반응</strong>: {brand.get('emotional_response', '')}</p>
            <p style="margin: 10px 0;"><strong style="color: {color};">문화적 연상</strong>: {brand.get('cultural_associations', '')}</p>
        </div>
        
        <p style="text-align: center; font-style: italic; margin-top: 30px; color: #7f8c8d; font-size: 1.2em;">"{brand.get('slogan', '')}"</p>
    </div>
</div>
"""

def visualize_generic_brand(brand: Dict, theory: str) -> str:
    """일반적인 브랜드 시각화"""
    # JSON을 HTML로 변환 (f-string 밖에서 처리)
    json_str = json.dumps(brand, ensure_ascii=False, indent=2)
    
    theory_gradients = {
        "jobs": "linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)",
        "scamper": "linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%)",
        "design": "linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%)",
        "biomimicry": "linear-gradient(135deg, #d4fc79 0%, #96e6a1 100%)",
        "cognitive": "linear-gradient(135deg, #fa709a 0%, #fee140 100%)",
        "vonrestorff": "linear-gradient(135deg, #f093fb 0%, #f5576c 100%)",
        "network": "linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)",
        "memetics": "linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)",
        "gestalt": "linear-gradient(135deg, #fd6585 0%, #0d25b9 100%)"
    }
    
    gradient = theory_gradients.get(theory, "linear-gradient(135deg, #667eea 0%, #764ba2 100%)")
    
    html = f"""
<div style="max-width: 700px; margin: 20px auto; font-family: -apple-system, sans-serif;">
    <div style="background: {gradient}; padding: 40px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.2);">
        <h2 style="text-align: center; color: white; margin-bottom: 10px;">{brand.get('brand_name', 'Brand')}</h2>
        <p style="text-align: center; font-style: italic; color: rgba(255,255,255,0.9); margin-bottom: 30px; font-size: 1.2em;">"{brand.get('slogan', '')}"</p>
        
        <div style="background: rgba(255,255,255,0.95); padding: 25px; border-radius: 15px; font-family: 'Courier New', monospace; font-size: 0.9em;">
            <pre style="margin: 0; white-space: pre-wrap; color: #2c3e50;">{json_str}</pre>
        </div>
    </div>
</div>
"""
    return html

# Gradio UI
with gr.Blocks(
    title="Ultimate Brand Theory Generator",
    theme=gr.themes.Soft(),
    css="""
    .gradio-container {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }
    .tab-nav button {
        font-size: 0.9em !important;
        padding: 10px 15px !important;
    }
    """
) as demo:
    gr.Markdown("""
    <div style="text-align: center; padding: 30px 0;">
        <h1 style="font-size: 2.5em; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 10px;">
            🌟 Ultimate Brand Theory Generator
        </h1>
        <p style="font-size: 1.2em; color: #7f8c8d;">15개 이론을 활용한 종합 브랜드 생성기</p>
    </div>
    """)
    
    with gr.Row():
        with gr.Column(scale=1, min_width=300):
            gr.Markdown("""
            <div style="background: #f8f9fa; padding: 20px; border-radius: 10px; margin-bottom: 20px;">
                <h3 style="margin-top: 0;">📝 브랜드 정보 입력</h3>
            </div>
            """)
            
            industry_input = gr.Textbox(
                label="🏭 업종",
                placeholder="예: 카페, 피트니스, 교육, 뷰티...",
                value="카페/커피숍"
            )
            
            keywords_input = gr.Textbox(
                label="🔑 핵심 키워드",
                placeholder="프리미엄, 편안한, 도시적인, 친환경...",
                info="브랜드가 담아야 할 핵심 가치나 특징들",
                lines=2
            )
            
            gr.Markdown("""
            <div style="background: #e3f2fd; padding: 15px; border-radius: 8px; margin-top: 20px;">
                <h4 style="margin-top: 0; color: #1976d2;">💡 사용 방법</h4>
                <ol style="margin: 10px 0; padding-left: 20px;">
                    <li>업종과 키워드를 입력하세요</li>
                    <li>원하는 이론 탭을 선택하세요</li>
                    <li>각 탭의 생성 버튼을 클릭하세요</li>
                </ol>
                <p style="margin: 0; font-size: 0.9em; color: #555;">
                    각 이론은 독립적으로 작동하므로 원하는 것만 선택해서 생성할 수 있습니다.
                </p>
            </div>
            """)
        
        with gr.Column(scale=3):
            # 15개 탭 생성
            with gr.Tabs():
                # 1. Square Theory
                with gr.Tab("🟦 Square Theory"):
                    with gr.Row():
                        square_btn = gr.Button("Square Theory로 생성", variant="primary", size="sm")
                    square_output = gr.Markdown()
                    square_visual = gr.HTML()
                    square_btn.click(
                        lambda i, k: generate_by_theory(i, k, "square"),
                        inputs=[industry_input, keywords_input],
                        outputs=[square_output, square_visual]
                    )
                
                # 2. Conceptual Blending
                with gr.Tab("🔀 Conceptual Blending"):
                    with gr.Row():
                        blending_btn = gr.Button("Conceptual Blending으로 생성", variant="primary", size="sm")
                    blending_output = gr.Markdown()
                    blending_visual = gr.HTML()
                    blending_btn.click(
                        lambda i, k: generate_by_theory(i, k, "blending"),
                        inputs=[industry_input, keywords_input],
                        outputs=[blending_output, blending_visual]
                    )
                
                # 3. Sound Symbolism
                with gr.Tab("🔊 Sound Symbolism"):
                    with gr.Row():
                        sound_btn = gr.Button("Sound Symbolism으로 생성", variant="primary", size="sm")
                    sound_output = gr.Markdown()
                    sound_visual = gr.HTML()
                    sound_btn.click(
                        lambda i, k: generate_by_theory(i, k, "sound"),
                        inputs=[industry_input, keywords_input],
                        outputs=[sound_output, sound_visual]
                    )
                
                # 4. Linguistic Relativity
                with gr.Tab("🌐 Linguistic Relativity"):
                    with gr.Row():
                        linguistic_btn = gr.Button("Linguistic Relativity로 생성", variant="primary", size="sm")
                    linguistic_output = gr.Markdown()
                    linguistic_visual = gr.HTML()
                    linguistic_btn.click(
                        lambda i, k: generate_by_theory(i, k, "linguistic"),
                        inputs=[industry_input, keywords_input],
                        outputs=[linguistic_output, linguistic_visual]
                    )
                
                # 5. Archetype Theory
                with gr.Tab("🎭 Archetype Theory"):
                    with gr.Row():
                        archetype_btn = gr.Button("Archetype Theory로 생성", variant="primary", size="sm")
                    archetype_output = gr.Markdown()
                    archetype_visual = gr.HTML()
                    archetype_btn.click(
                        lambda i, k: generate_by_theory(i, k, "archetype"),
                        inputs=[industry_input, keywords_input],
                        outputs=[archetype_output, archetype_visual]
                    )
                
                # 6. Jobs-to-be-Done
                with gr.Tab("✅ Jobs-to-be-Done"):
                    with gr.Row():
                        jobs_btn = gr.Button("Jobs-to-be-Done으로 생성", variant="primary", size="sm")
                    jobs_output = gr.Markdown()
                    jobs_visual = gr.HTML()
                    jobs_btn.click(
                        lambda i, k: generate_by_theory(i, k, "jobs"),
                        inputs=[industry_input, keywords_input],
                        outputs=[jobs_output, jobs_visual]
                    )
                
                # 7. SCAMPER
                with gr.Tab("🔧 SCAMPER Method"):
                    with gr.Row():
                        scamper_btn = gr.Button("SCAMPER Method로 생성", variant="primary", size="sm")
                    scamper_output = gr.Markdown()
                    scamper_visual = gr.HTML()
                    scamper_btn.click(
                        lambda i, k: generate_by_theory(i, k, "scamper"),
                        inputs=[industry_input, keywords_input],
                        outputs=[scamper_output, scamper_visual]
                    )
                
                # 8. Design Thinking
                with gr.Tab("💭 Design Thinking"):
                    with gr.Row():
                        design_btn = gr.Button("Design Thinking으로 생성", variant="primary", size="sm")
                    design_output = gr.Markdown()
                    design_visual = gr.HTML()
                    design_btn.click(
                        lambda i, k: generate_by_theory(i, k, "design"),
                        inputs=[industry_input, keywords_input],
                        outputs=[design_output, design_visual]
                    )
                
                # 9. Biomimicry
                with gr.Tab("🌿 Biomimicry"):
                    with gr.Row():
                        biomimicry_btn = gr.Button("Biomimicry로 생성", variant="primary", size="sm")
                    biomimicry_output = gr.Markdown()
                    biomimicry_visual = gr.HTML()
                    biomimicry_btn.click(
                        lambda i, k: generate_by_theory(i, k, "biomimicry"),
                        inputs=[industry_input, keywords_input],
                        outputs=[biomimicry_output, biomimicry_visual]
                    )
                
                # 10. Cognitive Load
                with gr.Tab("🧠 Cognitive Load"):
                    with gr.Row():
                        cognitive_btn = gr.Button("Cognitive Load로 생성", variant="primary", size="sm")
                    cognitive_output = gr.Markdown()
                    cognitive_visual = gr.HTML()
                    cognitive_btn.click(
                        lambda i, k: generate_by_theory(i, k, "cognitive"),
                        inputs=[industry_input, keywords_input],
                        outputs=[cognitive_output, cognitive_visual]
                    )
                
                # 11. Von Restorff
                with gr.Tab("⚡ Von Restorff Effect"):
                    with gr.Row():
                        vonrestorff_btn = gr.Button("Von Restorff Effect로 생성", variant="primary", size="sm")
                    vonrestorff_output = gr.Markdown()
                    vonrestorff_visual = gr.HTML()
                    vonrestorff_btn.click(
                        lambda i, k: generate_by_theory(i, k, "vonrestorff"),
                        inputs=[industry_input, keywords_input],
                        outputs=[vonrestorff_output, vonrestorff_visual]
                    )
                
                # 12. Network Effects
                with gr.Tab("🌍 Network Effects"):
                    with gr.Row():
                        network_btn = gr.Button("Network Effects로 생성", variant="primary", size="sm")
                    network_output = gr.Markdown()
                    network_visual = gr.HTML()
                    network_btn.click(
                        lambda i, k: generate_by_theory(i, k, "network"),
                        inputs=[industry_input, keywords_input],
                        outputs=[network_output, network_visual]
                    )
                
                # 13. Memetics
                with gr.Tab("🧬 Memetics"):
                    with gr.Row():
                        memetics_btn = gr.Button("Memetics로 생성", variant="primary", size="sm")
                    memetics_output = gr.Markdown()
                    memetics_visual = gr.HTML()
                    memetics_btn.click(
                        lambda i, k: generate_by_theory(i, k, "memetics"),
                        inputs=[industry_input, keywords_input],
                        outputs=[memetics_output, memetics_visual]
                    )
                
                # 14. Color Psychology
                with gr.Tab("🎨 Color Psychology"):
                    with gr.Row():
                        color_btn = gr.Button("Color Psychology로 생성", variant="primary", size="sm")
                    color_output = gr.Markdown()
                    color_visual = gr.HTML()
                    color_btn.click(
                        lambda i, k: generate_by_theory(i, k, "color"),
                        inputs=[industry_input, keywords_input],
                        outputs=[color_output, color_visual]
                    )
                
                # 15. Gestalt Principles
                with gr.Tab("👁️ Gestalt Principles"):
                    with gr.Row():
                        gestalt_btn = gr.Button("Gestalt Principles로 생성", variant="primary", size="sm")
                    gestalt_output = gr.Markdown()
                    gestalt_visual = gr.HTML()
                    gestalt_btn.click(
                        lambda i, k: generate_by_theory(i, k, "gestalt"),
                        inputs=[industry_input, keywords_input],
                        outputs=[gestalt_output, gestalt_visual]
                    )
    
    gr.Markdown("""
    <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 30px; border-radius: 15px; margin-top: 40px;">
        <h3 style="margin-top: 0;">🎯 활용 가이드</h3>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 20px;">
            <div>
                <h4>1. 비교 분석</h4>
                <p style="margin: 5px 0;">각 이론의 결과를 비교하여 가장 적합한 브랜드 선택</p>
            </div>
            <div>
                <h4>2. 하이브리드 접근</h4>
                <p style="margin: 5px 0;">여러 이론의 장점을 결합한 새로운 브랜드 창조</p>
            </div>
            <div>
                <h4>3. 타겟별 선택</h4>
                <p style="margin: 5px 0;">목표 고객층에 따라 가장 효과적인 이론 선택</p>
            </div>
            <div>
                <h4>4. A/B 테스트</h4>
                <p style="margin: 5px 0;">다양한 이론 기반 브랜드로 시장 테스트</p>
            </div>
        </div>
    </div>
    
    <div style="margin-top: 30px; padding: 20px; background: #f8f9fa; border-radius: 10px;">
        <h3 style="margin-top: 0;">📚 각 이론의 강점</h3>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 15px; margin-top: 15px;">
            <div>
                <strong style="color: #3498db;">즉각적 이해</strong>: Cognitive Load, Sound Symbolism
            </div>
            <div>
                <strong style="color: #e74c3c;">감정적 연결</strong>: Archetype, Color Psychology
            </div>
            <div>
                <strong style="color: #f39c12;">차별화</strong>: Von Restorff, SCAMPER
            </div>
            <div>
                <strong style="color: #27ae60;">바이럴 잠재력</strong>: Memetics, Network Effects
            </div>
            <div>
                <strong style="color: #9b59b6;">문제 해결</strong>: Jobs-to-be-Done, Design Thinking
            </div>
            <div>
                <strong style="color: #1abc9c;">혁신성</strong>: Biomimicry, Conceptual Blending
            </div>
            <div>
                <strong style="color: #34495e;">구조적 완성도</strong>: Square Theory, Gestalt
            </div>
        </div>
    </div>
    """)

if __name__ == "__main__":
    demo.launch(
        server_name="0.0.0.0",
        server_port=7860,
        share=False
    )