Update app.py

app.py

@@ -1,11 +1,11 @@
 """
-Square Theory Generator - True Implementation
-============================================
-2025-05-28 | Based on the actual Square Theory concept
-------------------------------------------------------
+Square Theory Brand Generator
+=============================
+2025-05-28 | Square Theory를 활용한 브랜드 네이밍 & 슬로건 생성기
+----------------------------------------------------------
 
-Square Theory: 4개의 단어가 의미적 관계로 연결되어 사각형을 이루는 언어유희
-예: PUB QUIZ / BAR EXAM (PUB-BAR 동의어, QUIZ-EXAM 동의어)
+Square Theory를 브랜딩에 적용: 브랜드명이 Square를 완성하는 구조
+예: GRUBHUB = GRUB(음식) + HUB(중심) → 음식 배달의 중심
 """
 
 import os
@@ -22,63 +22,82 @@ if not os.getenv("OPENAI_API_KEY"):
 
 client = OpenAI()
 
-# Square Theory 전용 프롬프트
-SQUARE_THEORY_PROMPT = """
-당신은 Square Theory 전문가입니다. Square Theory는 4개의 단어가 사각형의 꼭짓점을 이루고, 
-각 변이 의미적 관계(동의어, 구문, 운율 등)로 연결되는 언어 구조입니다.
+# Square Theory 브랜딩 전용 프롬프트
+BRANDING_SQUARE_PROMPT = """
+당신은 Square Theory를 활용한 브랜드 네이밍 전문가입니다. 
 
-핵심 원칙:
-1. 4개의 단어가 사각형의 꼭짓점을 형성
-2. 인접한 단어들은 특정 관계로 연결 (변)
-3. 대변의 단어들은 직접 연결되지 않지만, 다른 변들을 통해 놀라운 일치를 이룸
-4. 전체 구조가 "아하!" 모먼트를 만들어야 함
+Square Theory는 4개의 단어가 의미적 관계로 연결되어 사각형을 이루는 구조입니다.
+이를 브랜딩에 적용하면, 브랜드명이 Square를 완성하며 "아하!" 모먼트를 만듭니다.
 
-예시:
-- PUB QUIZ / BAR EXAM: PUB-BAR(동의어), QUIZ-EXAM(동의어), PUB QUIZ(구문), BAR EXAM(구문)
-- BOOTY CALL / BUTT DIAL: BOOTY-BUTT(동의어), CALL-DIAL(동의어), BOOTY CALL(구문), BUTT DIAL(구문)
-- TOP GUN / TSHIRT CANNON: TOP-TSHIRT(위치), GUN-CANNON(무기), TOP GUN(구문), TSHIRT CANNON(구문)
+성공적인 브랜드 Square 예시:
+1. GRUBHUB: GRUB(음식) + HUB(중심) = 음식 배달의 중심지
+2. Brand New (리브랜딩 블로그): BRAND + NEW = 새로운 브랜드 = 업데이트된 브랜드
+3. Crosscord: CROSSWORD + DISCORD = 크로스워드 커뮤니티 서버
 
-사용자가 시드 단어나 컨셉을 제공하면, 이를 포함하는 Square Theory 구조들을 생성하세요.
+브랜드 Square 생성 원칙:
+1. 브랜드명은 두 단어의 조합 (합성어, 포트맨토, 또는 구문)
+2. 각 단어는 비즈니스의 핵심 속성과 연결
+3. 전체 Square가 브랜드의 정체성을 강화
+4. 슬로건은 Square의 의미를 확장
 
-각 제안은 다음 형식의 JSON으로:
+사용자 입력(업종/키워드)을 받아 다음 형식의 JSON 배열을 생성하세요:
 {
+  "brand_name": "브랜드명",
+  "brand_type": "compound/portmanteau/phrase",
   "tl": "왼쪽상단 단어",
   "tr": "오른쪽상단 단어", 
   "bl": "왼쪽하단 단어",
   "br": "오른쪽하단 단어",
-  "top_edge": "상단 관계 설명 (tl-tr)",
-  "bottom_edge": "하단 관계 설명 (bl-br)",
-  "left_edge": "왼쪽 관계 설명 (tl-bl)",
-  "right_edge": "오른쪽 관계 설명 (tr-br)",
-  "top_phrase": "tl + tr 구문",
-  "bottom_phrase": "bl + br 구문",
-  "explanation": "왜 이 사각형이 흥미로운지",
-  "cleverness_score": 1-10
+  "top_edge": "상단 관계",
+  "bottom_edge": "하단 관계",
+  "left_edge": "왼쪽 관계",
+  "right_edge": "오른쪽 관계",
+  "slogan": "브랜드 슬로건",
+  "tagline": "짧은 태그라인",
+  "business_description": "비즈니스 설명",
+  "why_it_works": "왜 이 Square가 효과적인지",
+  "target_audience": "타겟 고객",
+  "brand_personality": "브랜드 개성",
+  "impact_score": 1-10
 }
 
-창의적이고 놀라운 연결을 만드는 것이 핵심입니다. 단순한 동의어 나열이 아닌, 
-대변 사이의 숨겨진 연결이 드러날 때의 "아하!" 모먼트를 목표로 하세요.
+창의적이면서도 기억하기 쉽고, 비즈니스 본질을 담은 브랜드를 만드세요.
 """
 
-def call_square_theory_llm(seed: str, mode: str = "word") -> List[Dict]:
-    """Square Theory 생성"""
+# 업종별 예시
+INDUSTRY_EXAMPLES = [
+    "카페/커피숍",
+    "피트니스/헬스장", 
+    "교육/에듀테크",
+    "뷰티/화장품",
+    "음식 배달",
+    "여행/관광",
+    "금융/핀테크",
+    "패션/의류",
+    "반려동물",
+    "친환경/지속가능"
+]
+
+def generate_brand_squares(industry: str, keywords: str, count: int = 5) -> List[Dict]:
+    """Square Theory 기반 브랜드 생성"""
     
-    if mode == "word":
-        user_prompt = f"시드 단어 '{seed}'를 포함하는 Square Theory 구조를 5-10개 생성하세요."
-    elif mode == "concept":
-        user_prompt = f"'{seed}' 주제와 관련된 Square Theory 구조를 5-10개 생성하세요."
-    else:  # pair
-        user_prompt = f"'{seed}'와 비슷한 형태의 Square Theory 구조를 5-10개 생성하세요."
+    user_prompt = f"""
+업종: {industry}
+키워드: {keywords}
+
+위 정보를 바탕으로 Square Theory를 활용한 브랜드 {count}개를 생성하세요.
+각 브랜드는 완전한 Square를 형성해야 하며, 브랜드명이 Square의 핵심이 되어야 합니다.
+"""
     
     try:
         response = client.chat.completions.create(
             model="gpt-4o",
             messages=[
-                {"role": "system", "content": SQUARE_THEORY_PROMPT},
+                {"role": "system", "content": BRANDING_SQUARE_PROMPT},
                 {"role": "user", "content": user_prompt}
             ],
-            temperature=0.8,
-            max_tokens=3000,
+            temperature=0.85,
+            max_tokens=4000,
             response_format={"type": "json_object"}
         )
         
@@ -87,8 +106,8 @@ def call_square_theory_llm(seed: str, mode: str = "word") -> List[Dict]:
         
         # 응답 정규화
         if isinstance(data, dict):
-            if "squares" in data:
-                results = data["squares"]
+            if "brands" in data:
+                results = data["brands"]
             elif "results" in data:
                 results = data["results"]
             else:
@@ -97,212 +116,316 @@ def call_square_theory_llm(seed: str, mode: str = "word") -> List[Dict]:
             results = data
             
         # 점수순 정렬
-        results.sort(key=lambda x: x.get("cleverness_score", 0), reverse=True)
+        results.sort(key=lambda x: x.get("impact_score", 0), reverse=True)
         
-        return results[:10]
+        return results[:count]
         
     except Exception as e:
-        raise RuntimeError(f"Square Theory 생성 실패: {e}")
+        raise RuntimeError(f"브랜드 생성 실패: {e}")
 
-def visualize_square(square: Dict) -> str:
-    """Square Theory 시각화"""
+def visualize_brand_square(brand: Dict) -> str:
+    """브랜드 Square 시각화"""
     
-    tl, tr = square.get('tl', '?'), square.get('tr', '?')
-    bl, br = square.get('bl', '?'), square.get('br', '?')
+    brand_name = brand.get('brand_name', 'BRAND')
+    tl, tr = brand.get('tl', '?'), brand.get('tr', '?')
+    bl, br = brand.get('bl', '?'), brand.get('br', '?')
     
-    top_edge = square.get('top_edge', '관계')
-    bottom_edge = square.get('bottom_edge', '관계')
-    left_edge = square.get('left_edge', '관계')
-    right_edge = square.get('right_edge', '관계')
+    # 브랜드명 분해 (compound/portmanteau인 경우)
+    if brand.get('brand_type') == 'compound':
+        parts = brand_name.split()
+        brand_part1 = parts[0] if len(parts) > 0 else brand_name[:len(brand_name)//2]
+        brand_part2 = parts[1] if len(parts) > 1 else brand_name[len(brand_name)//2:]
+    else:
+        # 포트맨토의 경우 대략적으로 분할
+        mid = len(brand_name) // 2
+        brand_part1 = brand_name[:mid+1]
+        brand_part2 = brand_name[mid-1:]
     
     return f"""
-<div style="max-width: 600px; margin: 20px auto; font-family: 'Courier New', monospace;">
-    <div style="position: relative; width: 100%; height: 300px; background: #f8f9fa; border-radius: 8px; padding: 20px;">
+<div style="max-width: 700px; margin: 20px auto; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;">
+    
+    <!-- 브랜드명 헤더 -->
+    <div style="text-align: center; margin-bottom: 30px;">
+        <h2 style="font-size: 2.5em; margin: 0; color: #2c3e50; letter-spacing: -1px;">{brand_name}</h2>
+        <p style="font-size: 1.2em; color: #7f8c8d; margin: 10px 0; font-style: italic;">"{brand.get('slogan', '')}"</p>
+        <p style="font-size: 0.9em; color: #95a5a6; margin: 5px 0;">{brand.get('tagline', '')}</p>
+    </div>
+    
+    <!-- Square 다이어그램 -->
+    <div style="position: relative; width: 100%; height: 350px; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); border-radius: 12px; padding: 30px; box-shadow: 0 10px 30px rgba(0,0,0,0.1);">
+        
+        <!-- 중앙 브랜드명 -->
+        <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 20px 40px; border-radius: 12px; box-shadow: 0 5px 20px rgba(0,0,0,0.15); z-index: 10;">
+            <div style="font-size: 1.8em; font-weight: bold; color: #2c3e50; text-align: center;">{brand_name}</div>
+            <div style="font-size: 0.9em; color: #7f8c8d; text-align: center; margin-top: 5px;">{brand.get('brand_type', 'compound')}</div>
+        </div>
         
-        <!-- 꼭짓점 (단어들) -->
-        <div style="position: absolute; top: 20px; left: 20px; background: #3498db; color: white; padding: 15px 25px; border-radius: 8px; font-weight: bold; font-size: 1.2em; box-shadow: 0 2px 4px rgba(0,0,0,0.2);">
+        <!-- 꼭짓점 -->
+        <div style="position: absolute; top: 30px; left: 30px; background: #3498db; color: white; padding: 12px 20px; border-radius: 8px; font-weight: 600; box-shadow: 0 3px 10px rgba(52, 152, 219, 0.3);">
             {tl}
         </div>
-        <div style="position: absolute; top: 20px; right: 20px; background: #e74c3c; color: white; padding: 15px 25px; border-radius: 8px; font-weight: bold; font-size: 1.2em; box-shadow: 0 2px 4px rgba(0,0,0,0.2);">
+        <div style="position: absolute; top: 30px; right: 30px; background: #e74c3c; color: white; padding: 12px 20px; border-radius: 8px; font-weight: 600; box-shadow: 0 3px 10px rgba(231, 76, 60, 0.3);">
             {tr}
         </div>
-        <div style="position: absolute; bottom: 20px; left: 20px; background: #f39c12; color: white; padding: 15px 25px; border-radius: 8px; font-weight: bold; font-size: 1.2em; box-shadow: 0 2px 4px rgba(0,0,0,0.2);">
+        <div style="position: absolute; bottom: 30px; left: 30px; background: #f39c12; color: white; padding: 12px 20px; border-radius: 8px; font-weight: 600; box-shadow: 0 3px 10px rgba(243, 156, 18, 0.3);">
             {bl}
         </div>
-        <div style="position: absolute; bottom: 20px; right: 20px; background: #27ae60; color: white; padding: 15px 25px; border-radius: 8px; font-weight: bold; font-size: 1.2em; box-shadow: 0 2px 4px rgba(0,0,0,0.2);">
+        <div style="position: absolute; bottom: 30px; right: 30px; background: #27ae60; color: white; padding: 12px 20px; border-radius: 8px; font-weight: 600; box-shadow: 0 3px 10px rgba(39, 174, 96, 0.3);">
             {br}
         </div>
         
-        <!-- 변 (관계) -->
-        <div style="position: absolute; top: 40px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.8); color: white; padding: 5px 15px; border-radius: 4px; font-size: 0.9em;">
-            {top_edge}
+        <!-- 관계 레이블 -->
+        <div style="position: absolute; top: 45px; left: 50%; transform: translateX(-50%); background: rgba(44, 62, 80, 0.9); color: white; padding: 4px 12px; border-radius: 4px; font-size: 0.8em;">
+            {brand.get('top_edge', '관계')}
         </div>
-        <div style="position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.8); color: white; padding: 5px 15px; border-radius: 4px; font-size: 0.9em;">
-            {bottom_edge}
+        <div style="position: absolute; bottom: 45px; left: 50%; transform: translateX(-50%); background: rgba(44, 62, 80, 0.9); color: white; padding: 4px 12px; border-radius: 4px; font-size: 0.8em;">
+            {brand.get('bottom_edge', '관계')}
         </div>
-        <div style="position: absolute; top: 50%; left: 40px; transform: translateY(-50%) rotate(-90deg); background: rgba(0,0,0,0.8); color: white; padding: 5px 15px; border-radius: 4px; font-size: 0.9em;">
-            {left_edge}
+        <div style="position: absolute; top: 50%; left: 45px; transform: translateY(-50%) rotate(-90deg); background: rgba(44, 62, 80, 0.9); color: white; padding: 4px 12px; border-radius: 4px; font-size: 0.8em;">
+            {brand.get('left_edge', '관계')}
         </div>
-        <div style="position: absolute; top: 50%; right: 40px; transform: translateY(-50%) rotate(90deg); background: rgba(0,0,0,0.8); color: white; padding: 5px 15px; border-radius: 4px; font-size: 0.9em;">
-            {right_edge}
+        <div style="position: absolute; top: 50%; right: 45px; transform: translateY(-50%) rotate(90deg); background: rgba(44, 62, 80, 0.9); color: white; padding: 4px 12px; border-radius: 4px; font-size: 0.8em;">
+            {brand.get('right_edge', '관계')}
         </div>
         
         <!-- 연결선 -->
         <svg style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none;">
+            <defs>
+                <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
+                    <stop offset="0%" style="stop-color:#3498db;stop-opacity:0.5" />
+                    <stop offset="100%" style="stop-color:#e74c3c;stop-opacity:0.5" />
+                </linearGradient>
+                <linearGradient id="grad2" x1="0%" y1="0%" x2="100%" y2="0%">
+                    <stop offset="0%" style="stop-color:#f39c12;stop-opacity:0.5" />
+                    <stop offset="100%" style="stop-color:#27ae60;stop-opacity:0.5" />
+                </linearGradient>
+            </defs>
             <!-- 상단 -->
-            <line x1="80" y1="40" x2="520" y2="40" stroke="#666" stroke-width="2" stroke-dasharray="5,5"/>
+            <line x1="100" y1="45" x2="600" y2="45" stroke="url(#grad1)" stroke-width="3"/>
             <!-- 하단 -->
-            <line x1="80" y1="260" x2="520" y2="260" stroke="#666" stroke-width="2" stroke-dasharray="5,5"/>
+            <line x1="100" y1="305" x2="600" y2="305" stroke="url(#grad2)" stroke-width="3"/>
             <!-- 왼쪽 -->
-            <line x1="50" y1="70" x2="50" y2="230" stroke="#666" stroke-width="2" stroke-dasharray="5,5"/>
+            <line x1="50" y1="80" x2="50" y2="270" stroke="#7f8c8d" stroke-width="3" opacity="0.5"/>
             <!-- 오른쪽 -->
-            <line x1="550" y1="70" x2="550" y2="230" stroke="#666" stroke-width="2" stroke-dasharray="5,5"/>
+            <line x1="650" y1="80" x2="650" y2="270" stroke="#7f8c8d" stroke-width="3" opacity="0.5"/>
         </svg>
     </div>
     
-    <div style="margin-top: 20px; padding: 20px; background: #ecf0f1; border-radius: 8px;">
-        <p style="margin: 5px 0;"><strong>상단 구문:</strong> {square.get('top_phrase', 'N/A')}</p>
-        <p style="margin: 5px 0;"><strong>하단 구문:</strong> {square.get('bottom_phrase', 'N/A')}</p>
-        <p style="margin: 15px 0 5px 0; font-style: italic; color: #7f8c8d;">💡 {square.get('explanation', '')}</p>
+    <!-- 브랜드 정보 -->
+    <div style="margin-top: 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
+        <div style="background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.05);">
+            <h4 style="margin: 0 0 10px 0; color: #2c3e50;">🎯 타겟 고객</h4>
+            <p style="margin: 0; color: #7f8c8d;">{brand.get('target_audience', 'N/A')}</p>
+        </div>
+        <div style="background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.05);">
+            <h4 style="margin: 0 0 10px 0; color: #2c3e50;">✨ 브랜드 개성</h4>
+            <p style="margin: 0; color: #7f8c8d;">{brand.get('brand_personality', 'N/A')}</p>
+        </div>
+    </div>
+    
+    <div style="margin-top: 20px; background: #ecf0f1; padding: 20px; border-radius: 8px;">
+        <h4 style="margin: 0 0 10px 0; color: #2c3e50;">💡 왜 효과적인가?</h4>
+        <p style="margin: 0; color: #34495e;">{brand.get('why_it_works', '')}</p>
     </div>
 </div>
 """
 
-def generate_squares(user_input: str, mode: str) -> Tuple[str, str]:
-    """Square Theory 생성 및 표시"""
+def generate_brands(industry: str, keywords: str, count: int) -> Tuple[str, str, List[Dict]]:
+    """브랜드 생성 및 표시"""
+    
+    if not industry or not keywords:
+        return "⚠️ 업종과 키워드를 모두 입력해주세요.", "", []
     
     try:
-        squares = call_square_theory_llm(user_input, mode)
-        
-        if not squares:
-            return "Square를 생성할 수 없습니다.", ""
+        brands = generate_brand_squares(industry, keywords, count)
         
         # 마크다운 결과
         markdown_parts = [
-            f"# 🟦 Square Theory 결과",
-            f"**입력**: {user_input} ({mode} 모드)\n"
+            f"# 🏢 Square Theory 브랜드 제안",
+            f"**업종**: {industry} | **키워드**: {keywords}",
+            f"*생성 시각: {datetime.now().strftime('%Y-%m-%d %H:%M:%S')}*\n"
         ]
         
         # HTML 시각화
         html_parts = []
         
-        for idx, square in enumerate(squares, 1):
-            score = square.get('cleverness_score', 0)
+        for idx, brand in enumerate(brands, 1):
+            score = brand.get('impact_score', 0)
             
             markdown_parts.append(f"""
-### {idx}. {square.get('top_phrase', '?')} / {square.get('bottom_phrase', '?')} {'⭐' * min(score, 5)}
+## {idx}. {brand.get('brand_name', 'N/A')} {'⭐' * min(score, 5)}
 
-**구조**:
+**슬로건**: *"{brand.get('slogan', 'N/A')}"*  
+**태그라인**: {brand.get('tagline', 'N/A')}
+
+### 📐 Square 구조
 ```
-[{square.get('tl', '?')}] ─({square.get('top_edge', '?')})─ [{square.get('tr', '?')}]
-   │                                    │
-({square.get('left_edge', '?')})              ({square.get('right_edge', '?')})
-   │                                    │
-[{square.get('bl', '?')}] ─({square.get('bottom_edge', '?')})─ [{square.get('br', '?')}]
+[{brand.get('tl', '?')}] ─({brand.get('top_edge', '?')})─ [{brand.get('tr', '?')}]
+   │                                                │
+({brand.get('left_edge', '?')})                    ({brand.get('right_edge', '?')})
+   │                                                │
+[{brand.get('bl', '?')}] ─({brand.get('bottom_edge', '?')})─ [{brand.get('br', '?')}]
 ```
 
-**설명**: {square.get('explanation', 'N/A')}
+**비즈니스**: {brand.get('business_description', 'N/A')}  
+**타겟**: {brand.get('target_audience', 'N/A')}  
+**개성**: {brand.get('brand_personality', 'N/A')}  
+
+💡 **효과**: {brand.get('why_it_works', 'N/A')}
 
 ---
 """)
             
-            # 상위 5개 시각화
-            if idx <= 5:
-                html_parts.append(visualize_square(square))
+            # 모든 브랜드 시각화
+            html_parts.append(f"<h3 style='text-align: center; color: #7f8c8d; margin: 40px 0 20px 0;'>#{idx}</h3>")
+            html_parts.append(visualize_brand_square(brand))
         
-        return "\n".join(markdown_parts), "\n".join(html_parts)
+        return "\n".join(markdown_parts), "\n".join(html_parts), brands
         
     except Exception as e:
-        return f"❌ 오류: {str(e)}", ""
+        return f"❌ 오류: {str(e)}", "", []
+
+def export_brands(brands: List[Dict]) -> str:
+    """브랜드 정보 JSON 내보내기"""
+    if not brands:
+        return None
+        
+    export_data = {
+        "generated_at": datetime.now().isoformat(),
+        "total_brands": len(brands),
+        "brands": brands
+    }
+    
+    return json.dumps(export_data, ensure_ascii=False, indent=2)
 
 # Gradio UI
-with gr.Blocks(title="Square Theory Generator", theme=gr.themes.Soft()) as demo:
+with gr.Blocks(title="Square Theory Brand Generator", theme=gr.themes.Soft()) as demo:
     gr.Markdown("""
-    # 🟦 Square Theory Generator
-    ### 의미적 관계로 연결된 4단어 사각형 구조 생성기
+    # 🏢 Square Theory Brand Generator
+    ### 의미적 Square를 완성하는 브랜드 네이밍 & 슬로건 생성기
     
-    [Square Theory](https://www.lesswrong.com/posts/square-theory)는 4개의 단어가 의미적 관계로 
-    연결되어 사각형을 이루는 언어 구조입니다.
+    Square Theory를 활용해 브랜드명이 의미적 사각형을 완성하는 강력한 브랜드를 만들어보세요.
+    좋은 브랜드명은 단순한 이름이 아닌, 비즈니스의 본질을 담은 Square를 형성합니다.
     
-    **예시**: PUB QUIZ / BAR EXAM
-    - PUB ↔ BAR (동의어)
-    - QUIZ ↔ EXAM (동의어)
-    - PUB QUIZ (구문)
-    - BAR EXAM (구문)
+    **성공 사례**: GRUBHUB (GRUB+HUB), Brand New, Crosscord
     """)
     
     with gr.Row():
         with gr.Column(scale=2):
-            input_text = gr.Textbox(
-                label="입력",
-                placeholder="단어, 개념, 또는 예시 입력...",
-                lines=1
+            industry_input = gr.Dropdown(
+                choices=INDUSTRY_EXAMPLES,
+                label="🏭 업종",
+                allow_custom_value=True,
+                value="카페/커피숍"
+            )
+            
+            keywords_input = gr.Textbox(
+                label="🔑 핵심 키워드",
+                placeholder="프리미엄, 편안한, 도시적인, 친환경...",
+                info="브랜드가 담아야 할 핵심 가치나 특징들"
             )
             
-            mode_radio = gr.Radio(
-                choices=[
-                    ("단어 포함", "word"),
-                    ("주제 관련", "concept"),
-                    ("유사 패턴", "pair")
-                ],
-                label="생성 모드",
-                value="word"
+            count_slider = gr.Slider(
+                minimum=3,
+                maximum=10,
+                value=5,
+                step=1,
+                label="생성 개수"
             )
             
-            generate_btn = gr.Button("🔲 Square 생성", variant="primary")
+            generate_btn = gr.Button("🚀 브랜드 Square 생성", variant="primary", size="lg")
             
         with gr.Column(scale=1):
             gr.Markdown("""
-            ### 💡 사용법
-            
-            **단어 포함**: 특정 단어를 포함하는 Square
-            - 예: "BLACK" → JET BLACK / JETBLUE
+            ### 💡 Square Theory 브랜딩
             
-            **주제 관련**: 특정 주제의 Square
-            - 예: "음식" → 관련 Square들
+            **좋은 브랜드 Square의 조건:**
+            1. 브랜드명의 각 부분이 의미를 가짐
+            2. 비즈니스 본질과 연결
+            3. 기억하기 쉽고 발음 가능
+            4. Square가 "아하!" 모먼트 생성
             
-            **유사 패턴**: 예시와 비슷한 Square
-            - 예: "PUB QUIZ / BAR EXAM"
+            **Square 구조 예시:**
+            ```
+            GRUB ─(음식)─ FOOD
+              │             │
+            (중심)       (배달)
+              │             │
+            HUB  ─(서비스)─ DELIVERY
+            ```
             """)
     
+    # 전역 변수
+    current_brands = gr.State([])
+    
     with gr.Tabs():
-        with gr.Tab("📝 결과"):
+        with gr.Tab("📊 결과 리스트"):
             output_markdown = gr.Markdown()
         
-        with gr.Tab("🎨 시각화"):
+        with gr.Tab("🎨 브랜드 시각화"):
             output_visual = gr.HTML()
+        
+        with gr.Tab("💾 내보내기"):
+            export_btn = gr.Button("JSON 파일 생성")
+            download_file = gr.File(label="다운로드", visible=False)
     
     # 예시
     gr.Examples(
         examples=[
-            ["BLACK", "word"],
-            ["음식", "concept"],
-            ["PUB QUIZ / BAR EXAM", "pair"],
-            ["CALL", "word"],
-            ["브랜드", "concept"]
+            ["카페/커피숍", "프리미엄, 아늑한, 도시"],
+            ["피트니스/헬스장", "강력한, 커뮤니티, 변화"],
+            ["교육/에듀테크", "스마트, 재미있는, 성장"],
+            ["음식 배달", "빠른, 신선한, 다양한"],
+            ["친환경/지속가능", "자연, 미래, 순환"]
         ],
-        inputs=[input_text, mode_radio]
+        inputs=[industry_input, keywords_input]
     )
     
     # 이벤트 연��
+    def generate_and_store(industry, keywords, count):
+        markdown, html, brands = generate_brands(industry, keywords, count)
+        return markdown, html, brands
+    
     generate_btn.click(
-        fn=generate_squares,
-        inputs=[input_text, mode_radio],
-        outputs=[output_markdown, output_visual]
+        fn=generate_and_store,
+        inputs=[industry_input, keywords_input, count_slider],
+        outputs=[output_markdown, output_visual, current_brands]
+    )
+    
+    def create_export_file(brands):
+        if not brands:
+            return None
+            
+        content = export_brands(brands)
+        filename = f"square_theory_brands_{datetime.now().strftime('%Y%m%d_%H%M%S')}.json"
+        
+        with open(filename, 'w', encoding='utf-8') as f:
+            f.write(content)
+            
+        return gr.File(value=filename, visible=True)
+    
+    export_btn.click(
+        fn=create_export_file,
+        inputs=[current_brands],
+        outputs=[download_file]
     )
     
     gr.Markdown("""
     ---
-    ### 📚 Square Theory란?
+    ### 🎯 활용 방법
     
-    Square Theory는 언어의 의미적 관계를 사각형 구조로 표현하는 개념입니다.
-    좋은 Square는 다음 특징을 가집니다:
+    1. **브랜드 개발**: 생성된 Square 중 가장 강력한 것 선택
+    2. **마케팅 전략**: Square의 각 요소를 캠페인에 활용
+    3. **스토리텔링**: Square가 만드는 내러티브 활용
+    4. **확장 가능성**: Square의 각 모서리에서 서브브랜드 파생
     
-    1. **완성도**: 4개 변이 모두 의미있는 관계
-    2. **놀라움**: 대변 연결이 예상치 못한 통찰 제공
-    3. **균형**: 모든 관계가 비슷한 강도
+    ### 📚 Square Theory 브랜딩의 힘
     
-    이는 말장난, 브랜드 네이밍, 크로스워드 퍼즐 등에서 자주 발견됩니다.
+    Square를 완성하는 브랜드는:
+    - **기억하기 쉬움**: 의미적 연결이 기억을 강화
+    - **스토리가 있음**: Square 자체가 브랜드 스토리
+    - **확장 가능**: 각 요소에서 새로운 의미 파생
+    - **차별화됨**: 독특한 의미 구조로 경쟁사와 구별
     """)
 
 if __name__ == "__main__":