Update app.py

app.py

@@ -61,23 +61,19 @@ class Role:
 History = List[Tuple[str, str]]
 Messages = List[Dict[str, str]]
 
+# 이미지 캐시를 메모리에 저장
+IMAGE_CACHE = {}
+
 def get_image_base64(image_path):
+    if image_path in IMAGE_CACHE:
+        return IMAGE_CACHE[image_path]
     try:
-        # 이미지 캐싱을 위한 딕셔너리
-        if not hasattr(get_image_base64, 'cache'):
-            get_image_base64.cache = {}
-            
-        # 캐시된 이미지가 있으면 반환
-        if image_path in get_image_base64.cache:
-            return get_image_base64.cache[image_path]
-            
         with open(image_path, "rb") as image_file:
             encoded_string = base64.b64encode(image_file.read()).decode()
-            get_image_base64.cache[image_path] = encoded_string
+            IMAGE_CACHE[image_path] = encoded_string
             return encoded_string
     except:
-        # 이미지 로드 실패시 기본 이미지 반환
-        return get_image_base64('default.png')
+        return IMAGE_CACHE.get('default.png', '')
         
 def history_to_messages(history: History, system: str) -> Messages:
     messages = [{'role': Role.SYSTEM, 'content': system}]
@@ -446,18 +442,18 @@ def load_json_data():
         }        
     ]
 
-# 템플릿 HTML 캐시 저장
-template_html_cache = None
+# 전역 변수로 템플릿 데이터 캐시
+TEMPLATE_CACHE = None
 
 def load_session_history(selected_session=None):
-    global template_html_cache
+    global TEMPLATE_CACHE
     
     try:
-        # 캐시된 HTML이 있으면 바로 반환
-        if template_html_cache:
-            return gr.HTML(value=template_html_cache)
-            
-        json_data = load_json_data()
+        if TEMPLATE_CACHE:
+            return TEMPLATE_CACHE
+
+        # 최소한의 카드만 먼저 로드 (첫 12개)
+        json_data = load_json_data()[:12]
         
         html_content = """
         <style>
@@ -466,7 +462,6 @@ def load_session_history(selected_session=None):
                 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
                 gap: 20px;
                 padding: 20px;
-                contain: content;
             }
             .prompt-card {
                 background: white;
@@ -474,12 +469,11 @@ def load_session_history(selected_session=None):
                 border-radius: 8px;
                 padding: 15px;
                 cursor: pointer;
-                transition: transform 0.2s ease;
                 box-shadow: 0 2px 5px rgba(0,0,0,0.1);
-                will-change: transform;
             }
             .prompt-card:hover {
                 transform: translateY(-2px);
+                transition: transform 0.2s;
             }
             .card-image {
                 width: 100%;
@@ -487,9 +481,6 @@ def load_session_history(selected_session=None):
                 object-fit: cover;
                 border-radius: 4px;
                 margin-bottom: 10px;
-                background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
-                background-size: 200% 100%;
-                animation: loading 1.5s infinite;
             }
             .card-name {
                 font-weight: bold;
@@ -505,23 +496,18 @@ def load_session_history(selected_session=None):
                 -webkit-line-clamp: 6;
                 -webkit-box-orient: vertical;
                 overflow: hidden;
-                text-overflow: ellipsis;
                 height: 90px;
                 background-color: #f8f9fa;
                 padding: 8px;
                 border-radius: 4px;
             }
-            @keyframes loading {
-                0% { background-position: 200% 0; }
-                100% { background-position: -200% 0; }
-            }
         </style>
-        <div class="prompt-grid">
+        <div class="prompt-grid" id="promptGrid">
         """
 
         for item in json_data:
             html_content += f"""
-            <div class="prompt-card" onclick="copyToInput('{html.escape(item.get('prompt', ''))}')">
+            <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>
@@ -530,31 +516,27 @@ def load_session_history(selected_session=None):
 
         html_content += """
         <script>
-        function copyToInput(prompt) {
+        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 }));
-                // 드로어 닫기
-                const closeBtn = document.querySelector('.session-drawer .close-btn');
-                if (closeBtn) closeBtn.click();
+                document.querySelector('.session-drawer .close-btn').click();
             }
         }
         </script>
         </div>
         """
         
-        # HTML 캐시 저장
-        template_html_cache = html_content
-        
-        return gr.HTML(value=html_content)
+        TEMPLATE_CACHE = gr.HTML(value=html_content)
+        return TEMPLATE_CACHE
         
     except Exception as e:
         print(f"Error in load_session_history: {str(e)}")
         return gr.HTML("Error loading templates")
 
 
-
 # Demo 인스턴스 생성
 demo_instance = Demo()
 
@@ -706,13 +688,14 @@ with gr.Blocks(css_paths="app.css",theme=theme) as demo:
 
 
 
-
 # 세션 버튼 클릭 이벤트 수정
             sessionBtn.click(
                 fn=lambda: (gr.update(open=True), load_session_history()),
                 inputs=[],
-                outputs=[session_drawer, session_history]
+                outputs=[session_drawer, session_history],
+                queue=False  # 큐 비활성화로 즉시 실행
             )
+
 # 세션 드로어 닫기 이벤트 수정  
             session_drawer.close(
                 lambda: (gr.update(open=False), gr.HTML("")),