Update app.py

app.py

@@ -61,6 +61,24 @@ class Role:
 History = List[Tuple[str, str]]
 Messages = List[Dict[str, str]]
 
+def get_image_base64(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
+            return encoded_string
+    except:
+        # 이미지 로드 실패시 기본 이미지 반환
+        return get_image_base64('default.png')
+        
 def history_to_messages(history: History, system: str) -> Messages:
     messages = [{'role': Role.SYSTEM, 'content': system}]
     for h in history:
@@ -234,10 +252,7 @@ def send_to_sandbox(code):
     data_uri = f"data:text/html;charset=utf-8;base64,{encoded_html}"
     return f"<iframe src=\"{data_uri}\" width=\"100%\" height=\"920px\"></iframe>"
 
-def get_image_base64(image_path):
-    with open(image_path, "rb") as image_file:
-        encoded_string = base64.b64encode(image_file.read()).decode()
-    return encoded_string
+
 
 theme = gr.themes.Soft()
 
@@ -431,31 +446,40 @@ def load_json_data():
         }        
     ]
 
+# 전역 변수로 템플릿 HTML 캐시 저장
+template_html_cache = None
+
 def load_session_history(selected_session=None):
+    global template_html_cache
+    
     try:
+        # 캐시된 HTML이 있으면 바로 반환
+        if template_html_cache:
+            return gr.HTML(value=template_html_cache)
+            
         json_data = load_json_data()
         
         html_content = """
         <style>
             .prompt-grid {
                 display: grid;
-                grid-template-columns: repeat(3, 1fr);
+                grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
                 gap: 20px;
                 padding: 20px;
+                contain: content;
             }
             .prompt-card {
                 background: white;
                 border: 1px solid #eee;
                 border-radius: 8px;
                 padding: 15px;
-                transition: all 0.3s ease;
-                box-shadow: 0 2px 5px rgba(0,0,0,0.1);
-                min-height: 300px;
                 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);
-                box-shadow: 0 4px 10px rgba(0,0,0,0.15);
             }
             .card-image {
                 width: 100%;
@@ -463,6 +487,9 @@ 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;
@@ -483,7 +510,10 @@ def load_session_history(selected_session=None):
                 background-color: #f8f9fa;
                 padding: 8px;
                 border-radius: 4px;
-                border: 1px solid #eee;
+            }
+            @keyframes loading {
+                0% { background-position: 200% 0; }
+                100% { background-position: -200% 0; }
             }
         </style>
         <div class="prompt-grid">
@@ -491,17 +521,30 @@ def load_session_history(selected_session=None):
 
         for item in json_data:
             html_content += f"""
-            <div class="prompt-card">
-                <img src="{item.get('image_url', '')}" class="card-image" alt="{html.escape(item.get('name', ''))}">
+            <div class="prompt-card" onclick="copyPrompt(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 copyPrompt(card) {
+            const prompt = card.getAttribute('data-prompt');
+            const textarea = document.querySelector('.ant-input-textarea-large textarea');
+            if (textarea) {
+                textarea.value = prompt;
+                textarea.dispatchEvent(new Event('input', { bubbles: true }));
+            }
+        }
+        </script>
         </div>
         """
         
+        # HTML 캐시 저장
+        template_html_cache = html_content
+        
         return gr.HTML(value=html_content)
         
     except Exception as e:
@@ -512,8 +555,6 @@ def load_session_history(selected_session=None):
 demo_instance = Demo()
 
 
-
-
 with gr.Blocks(css_paths="app.css",theme=theme) as demo:
     history = gr.State([])
     setting = gr.State({
@@ -661,12 +702,24 @@ 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],
+                _js="""
+                () => {
+                    document.body.style.cursor = 'wait';
+                    const drawer = document.querySelector('.session-drawer');
+                    if (drawer) drawer.style.opacity = '0';
+                    setTimeout(() => {
+                        if (drawer) drawer.style.opacity = '1';
+                        document.body.style.cursor = 'default';
+                    }, 100);
+                }
+                """
             )
+
+
 # 세션 드로어 닫기 이벤트 수정  
             session_drawer.close(
                 lambda: (gr.update(open=False), gr.HTML("")),