Update app.py

app.py

@@ -452,8 +452,9 @@ def load_session_history(selected_session=None):
         if TEMPLATE_CACHE:
             return TEMPLATE_CACHE
 
-        # 최소한의 카드만 먼저 로드 (첫 12개)
-        json_data = load_json_data()[:12]
+        json_data = load_json_data()
+        initial_items = json_data[:12]  # 초기 12개
+        remaining_items = json_data[12:]  # 나머지 항목들
         
         html_content = """
         <style>
@@ -501,11 +502,30 @@ def load_session_history(selected_session=None):
                 padding: 8px;
                 border-radius: 4px;
             }
+            #loadMore {
+                display: block;
+                margin: 20px auto;
+                padding: 10px 20px;
+                background: #1890ff;
+                color: white;
+                border: none;
+                border-radius: 4px;
+                cursor: pointer;
+            }
+            #loadMore:hover {
+                background: #40a9ff;
+            }
+            .loading {
+                text-align: center;
+                padding: 20px;
+                display: none;
+            }
         </style>
         <div class="prompt-grid" id="promptGrid">
         """
 
-        for item in json_data:
+        # 초기 12개 아이템 추가
+        for item in initial_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', ''))}">
@@ -514,19 +534,61 @@ def load_session_history(selected_session=None):
             </div>
             """
 
-        html_content += """
+        # 나머지 아이템들을 JavaScript 데이터로 저장
+        html_content += f"""
         <script>
-        function copyToInput(card) {
+        const remainingItems = {json.dumps(remaining_items)};
+        let currentIndex = 0;
+        const ITEMS_PER_LOAD = 12;
+
+        function copyToInput(card) {{
             const prompt = card.dataset.prompt;
             const textarea = document.querySelector('.ant-input-textarea-large textarea');
-            if (textarea) {
+            if (textarea) {{
                 textarea.value = prompt;
-                textarea.dispatchEvent(new Event('input', { bubbles: true }));
+                textarea.dispatchEvent(new Event('input', {{ bubbles: true }}));
                 document.querySelector('.session-drawer .close-btn').click();
-            }
-        }
+            }}
+        }}
+
+        function loadMoreItems() {{
+            const grid = document.getElementById('promptGrid');
+            const endIndex = Math.min(currentIndex + ITEMS_PER_LOAD, remainingItems.length);
+            
+            for (let i = currentIndex; i < endIndex; i++) {{
+                const item = remainingItems[i];
+                const card = document.createElement('div');
+                card.className = 'prompt-card';
+                card.onclick = () => copyToInput(card);
+                card.dataset.prompt = item.prompt;
+                
+                card.innerHTML = `
+                    <img src="${{item.image_url}}" class="card-image" loading="lazy" alt="${{item.name}}">
+                    <div class="card-name">${{item.name}}</div>
+                    <div class="card-prompt">${{item.prompt}}</div>
+                `;
+                
+                grid.appendChild(card);
+            }}
+            
+            currentIndex = endIndex;
+            
+            // 모든 아이템을 로드했으면 버튼 숨기기
+            if (currentIndex >= remainingItems.length) {{
+                document.getElementById('loadMore').style.display = 'none';
+            }}
+        }}
+
+        // 스크롤 이벤트 리스너 추가
+        document.querySelector('.session-drawer').addEventListener('scroll', function(e) {{
+            const drawer = e.target;
+            if (drawer.scrollHeight - drawer.scrollTop - drawer.clientHeight < 100) {{
+                loadMoreItems();
+            }}
+        }});
         </script>
         </div>
+        <div class="loading">Loading more items...</div>
         """
         
         TEMPLATE_CACHE = gr.HTML(value=html_content)