Update app.py

app.py

@@ -442,96 +442,75 @@ def load_session_history(selected_session):
             color: #666;
             margin-top: 10px;
         }
-        .code-display {
-            margin-top: 20px;
-            padding: 20px;
-            background: #f5f5f5;
-            border-radius: 8px;
-            display: none;
-        }
         </style>
         <div class="prompt-grid">
         """
         
+        # 데이터를 JavaScript 배열로 준비
+        js_data = []
+        
         for i, (prompt, response, timestamp) in enumerate(history):
             short_prompt = prompt[:100] + "..." if len(prompt) > 100 else prompt
             formatted_time = datetime.strptime(timestamp, '%Y-%m-%d %H:%M:%S.%f').strftime('%Y-%m-%d %H:%M')
             
-            # HTML 이스케이프 처리
-            escaped_prompt = html.escape(prompt)
-            escaped_response = html.escape(response)
+            # JavaScript 데이터 배열에 추가
+            js_data.append({
+                'prompt': prompt,
+                'response': response
+            })
             
             cards_html += f"""
-            <div class="prompt-card" 
-                 onclick="executeHistoryItem(decodeURIComponent('{urllib.parse.quote(escaped_prompt)}'), 
-                                          decodeURIComponent('{urllib.parse.quote(escaped_response)}'))">
+            <div class="prompt-card" onclick="executeHistoryItem({i})">
                 <div>{short_prompt}</div>
                 <div class="timestamp">{formatted_time}</div>
             </div>
             """
         
-        cards_html += """
+        cards_html += f"""
         </div>
         <script>
-        function executeHistoryItem(prompt, response) {
-            try {
-                // 입력 필드 업데이트
-                const textarea = document.querySelector('textarea');
-                if (textarea) {
-                    textarea.value = prompt;
-                    
-                    // 코드 실행
-                    let code = response;
-                    if (response.includes('```html')) {
-                        const match = response.match(/```html\\n([\\s\\S]*?)\\n```/);
-                        if (match) {
-                            code = match[1];
-                        }
-                    }
-                    
-                    // Base64 인코딩
-                    const encodedHtml = btoa(unescape(encodeURIComponent(code.trim())));
-                    const dataUri = `data:text/html;charset=utf-8;base64,${encodedHtml}`;
-                    
-                    // iframe 업데이트
-                    const iframe = document.querySelector('.html_content iframe');
-                    if (iframe) {
-                        iframe.src = dataUri;
-                    }
-                    
-                    // 세션 드로어 닫기
-                    const drawer = document.querySelector('.session-drawer');
-                    if (drawer) {
-                        drawer.style.display = 'none';
-                    }
-                    
-                    // Code 실행 버튼 클릭 시뮬레이션
-                    setTimeout(() => {
-                        const executeBtn = document.querySelector('button:contains("Code 실행")');
-                        if (executeBtn) {
-                            executeBtn.click();
-                        }
-                        
-                        // 렌더 탭으로 변경
-                        const tabs = document.querySelectorAll('[role="tab"]');
-                        const renderTab = Array.from(tabs).find(tab => tab.getAttribute('data-value') === 'render');
-                        if (renderTab) {
-                            renderTab.click();
-                        }
-                    }, 100);
-                }
-            } catch (error) {
-                console.error('Error executing history item:', error);
-            }
-        }
-
-        // jQuery를 사용하여 텍스트 포함 여부로 버튼 찾기
-        jQuery.expr[':'].contains = function(a, i, m) {
-            return jQuery(a).text().toUpperCase()
-                .indexOf(m[3].toUpperCase()) >= 0;
-        };
+        // 데이터 저장
+        const historyData = {json.dumps(js_data)};
+        
+        function executeHistoryItem(index) {{
+            const item = historyData[index];
+            
+            // 텍스트 영역 업데이트
+            const textarea = document.querySelector('textarea');
+            if (textarea) {{
+                textarea.value = item.prompt;
+            }}
+            
+            // 코드 추출 및 실행
+            let code = item.response;
+            if (code.includes('```html')) {{
+                code = code.match(/```html\\n([\\s\\S]*?)\\n```/)[1];
+            }}
+            
+            // iframe 업데이트
+            const encodedHtml = btoa(unescape(encodeURIComponent(code.trim())));
+            const dataUri = `data:text/html;charset=utf-8;base64,${{encodedHtml}}`;
+            
+            const iframe = document.querySelector('.html_content iframe');
+            if (iframe) {{
+                iframe.src = dataUri;
+            }}
+            
+            // 실행 버튼 클릭
+            const executeButton = Array.from(document.querySelectorAll('button')).find(
+                button => button.textContent.includes('Code 실행')
+            );
+            if (executeButton) {{
+                executeButton.click();
+            }}
+            
+            // 드로어 닫기
+            const drawer = document.querySelector('.session-drawer');
+            if (drawer) {{
+                drawer.style.display = 'none';
+            }}
+        }}
         </script>
-        <div class="code-display"></div>
         """
         
         return gr.HTML(value=cards_html)