Update app.py

app.py

@@ -442,6 +442,95 @@ def load_json_data():
         }        
     ]
 
+def load_best_templates():
+    json_data = load_json_data()[:12]  # 베스트 템플릿
+    return create_template_html("🏆 베스트 템플릿", json_data)
+
+def load_trending_templates():
+    json_data = load_json_data()[12:24]  # 트렌딩 템플릿
+    return create_template_html("🔥 트렌딩 템플릿", json_data)
+
+def load_new_templates():
+    json_data = load_json_data()[24:36]  # NEW 템플릿
+    return create_template_html("✨ NEW 템플릿", json_data)
+
+def create_template_html(title, items):
+    html_content = """
+    <style>
+        .prompt-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 20px;
+            padding: 20px;
+        }
+        .prompt-card {
+            background: white;
+            border: 1px solid #eee;
+            border-radius: 8px;
+            padding: 15px;
+            cursor: pointer;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+        }
+        .prompt-card:hover {
+            transform: translateY(-2px);
+            transition: transform 0.2s;
+        }
+        .card-image {
+            width: 100%;
+            height: 180px;
+            object-fit: cover;
+            border-radius: 4px;
+            margin-bottom: 10px;
+        }
+        .card-name {
+            font-weight: bold;
+            margin-bottom: 8px;
+            font-size: 16px;
+            color: #333;
+        }
+        .card-prompt {
+            font-size: 11px;
+            line-height: 1.4;
+            color: #666;
+            display: -webkit-box;
+            -webkit-line-clamp: 6;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+            height: 90px;
+            background-color: #f8f9fa;
+            padding: 8px;
+            border-radius: 4px;
+        }
+    </style>
+    <div class="prompt-grid">
+    """
+
+    for item in items:
+        html_content += f"""
+        <div class="prompt-card" onclick="copyToInput(this)" data-prompt="{html.escape(item.get('prompt', ''))}">
+            <img src="{item.get('image_url', '')}" class="card-image" loading="lazy" alt="{html.escape(item.get('name', ''))}">
+            <div class="card-name">{html.escape(item.get('name', ''))}</div>
+            <div class="card-prompt">{html.escape(item.get('prompt', ''))}</div>
+        </div>
+        """
+
+    html_content += """
+    <script>
+    function copyToInput(card) {
+        const prompt = card.dataset.prompt;
+        const textarea = document.querySelector('.ant-input-textarea-large textarea');
+        if (textarea) {
+            textarea.value = prompt;
+            textarea.dispatchEvent(new Event('input', { bubbles: true }));
+            document.querySelector('.session-drawer .close-btn').click();
+        }
+    }
+    </script>
+    </div>
+    """
+    return gr.HTML(value=html_content)
+
+    
 # 전역 변수로 템플릿 데이터 캐시
 TEMPLATE_CACHE = None
 
@@ -649,26 +738,6 @@ with gr.Blocks(css_paths="app.css",theme=theme) as demo:
                         elem_classes="close-btn"
                     )
 
-# 세션 드로어에서 카드 클릭 시 실행할 함수 (Drawer 컴포넌트들 다음에 위치)
-            def execute_history_item(evt: gr.SelectData):  # gr.SelectData로 이벤트 데이터 받기
-                try:
-                    # 클릭된 카드의 데이터 가져오기
-                    prompt = evt.value["prompt"]
-                    response = evt.value["response"]
-                    
-                    # 코드 실행
-                    code = remove_code_block(response) if '```html' in response else response
-                    
-                    return (
-                        gr.update(value=prompt),  # 입력 필드 업데이트
-                        send_to_sandbox(code),  # 코드 실행
-                        gr.update(active_key="render"),  # 탭 상태 업데이트
-                        gr.update(open=False)  # 세션 드로어 닫기
-                    )
-                except Exception as e:
-                    print(f"Error executing history item: {e}")
-                    return None, None, gr.update(active_key="empty"), gr.update(open=True)
-            
             # 메인 컨텐츠를 위한 Row
             with antd.Row(gutter=[32, 12]) as layout:    
                 # 좌측 패널
@@ -693,6 +762,11 @@ with gr.Blocks(css_paths="app.css",theme=theme) as demo:
                             execute_btn = antd.Button("Code 실행", type="default", size="large")
                             clear_btn = antd.Button("Clear", type="default", size="large")
 
+                        # 템플릿 버튼들 추가
+                        with antd.Flex(gap="small", justify="space-between", style={"marginTop": "10px"}):
+                            best_btn = antd.Button("🏆 베스트 템플릿", type="default", size="large")
+                            trending_btn = antd.Button("🔥 트렌딩 템플릿", type="default", size="large")
+                            new_btn = antd.Button("✨ NEW 템플릿", type="default", size="large")
                                            
                 # 우측 패널
                 with antd.Col(span=24, md=16):
@@ -711,25 +785,6 @@ with gr.Blocks(css_paths="app.css",theme=theme) as demo:
                             with antd.Tabs.Item(key="render"):
                                 sandbox = gr.HTML(elem_classes="html_content")
 
-            # Code 실행 버튼 이벤트 핸들러 함수 정의
-            def execute_code(query: str):
-                if not query or query.strip() == '':
-                    return None, gr.update(active_key="empty")
-                
-                try:
-                    # HTML 코드 블록 확인
-                    if '```html' in query and '```' in query:
-                        # HTML 코드 블록 추출
-                        code = remove_code_block(query)
-                    else:
-                        # 입력된 텍스트를 그대로 코드로 사용
-                        code = query.strip()
-                    
-                    return send_to_sandbox(code), gr.update(active_key="render")
-                except Exception as e:
-                    print(f"Error executing code: {str(e)}")
-                    return None, gr.update(active_key="empty")
-
             # 이벤트 핸들러들
             execute_btn.click(
                 fn=execute_code,
@@ -761,7 +816,26 @@ with gr.Blocks(css_paths="app.css",theme=theme) as demo:
                 outputs=[history_drawer]
             )
 
-# 세션 버튼 클릭 이벤트 수정
+            # 템플릿 버튼 이벤트 핸들러
+            best_btn.click(
+                fn=lambda: (gr.update(open=True), load_best_templates()),
+                outputs=[session_drawer, session_history],
+                queue=False
+            )
+
+            trending_btn.click(
+                fn=lambda: (gr.update(open=True), load_trending_templates()),
+                outputs=[session_drawer, session_history],
+                queue=False
+            )
+
+            new_btn.click(
+                fn=lambda: (gr.update(open=True), load_new_templates()),
+                outputs=[session_drawer, session_history],
+                queue=False
+            )
+
+            # 기존 세션 버튼 이벤트
             sessionBtn.click(
                 fn=lambda: (gr.update(open=True), load_session_history()),
                 inputs=[],
@@ -769,9 +843,6 @@ with gr.Blocks(css_paths="app.css",theme=theme) as demo:
                 queue=False
             )
 
-
-
-# 세션 드로어 닫기 이벤트 수정  
             session_drawer.close(
                 lambda: (gr.update(open=False), gr.HTML("")),
                 outputs=[session_drawer, session_history]
@@ -782,8 +853,6 @@ with gr.Blocks(css_paths="app.css",theme=theme) as demo:
                 outputs=[session_drawer, session_history]
             )
 
-            
-
             btn.click(
                 demo_instance.generation_code,
                 inputs=[input, setting, history],
@@ -796,8 +865,6 @@ with gr.Blocks(css_paths="app.css",theme=theme) as demo:
                 outputs=[history]
             )
 
-# 마지막 부분을 다음과 같이 수정하세요
-
 if __name__ == "__main__":
     try:
         demo_instance = Demo()