Update app.py

app.py

@@ -414,107 +414,112 @@ def load_session_history(selected_session):
         """, (session_id,))
         history = c.fetchall()
         conn.close()
-        
-        cards_html = """
-        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+
+        # JavaScript 데이터 준비
+        js_data = []
+        for prompt, response, _ in history:
+            js_data.append({
+                'prompt': html.escape(prompt).replace('`', '\\`'),
+                'response': html.escape(response).replace('`', '\\`')
+            })
+
+        # HTML 템플릿 준비
+        html_content = f"""
         <style>
-        .prompt-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-            gap: 20px;
-            padding: 20px;
-        }
-        .prompt-card {
-            background: white;
-            border: 1px solid #eee;
-            border-radius: 8px;
-            padding: 15px;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
-        }
-        .prompt-card:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 4px 10px rgba(0,0,0,0.15);
-        }
-        .timestamp {
-            font-size: 0.8em;
-            color: #666;
-            margin-top: 10px;
-        }
+            .prompt-grid {{
+                display: grid;
+                grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+                gap: 20px;
+                padding: 20px;
+            }}
+            .prompt-card {{
+                background: white;
+                border: 1px solid #eee;
+                border-radius: 8px;
+                padding: 15px;
+                cursor: pointer;
+                transition: all 0.3s ease;
+                box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+            }}
+            .prompt-card:hover {{
+                transform: translateY(-2px);
+                box-shadow: 0 4px 10px rgba(0,0,0,0.15);
+            }}
+            .timestamp {{
+                font-size: 0.8em;
+                color: #666;
+                margin-top: 10px;
+            }}
         </style>
+
         <div class="prompt-grid">
         """
-        
-        # 데이터를 JavaScript 배열로 준비
-        js_data = []
-        
-        for i, (prompt, response, timestamp) in enumerate(history):
+
+        # 카드 생성
+        for i, (prompt, _, 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')
             
-            # JavaScript 데이터 배열에 추가
-            js_data.append({
-                'prompt': prompt,
-                'response': response
-            })
-            
-            cards_html += f"""
+            html_content += f"""
             <div class="prompt-card" onclick="executeHistoryItem({i})">
-                <div>{short_prompt}</div>
+                <div>{html.escape(short_prompt)}</div>
                 <div class="timestamp">{formatted_time}</div>
             </div>
             """
-        
-        cards_html += f"""
+
+        # JavaScript 코드 추가
+        html_content += f"""
         </div>
         <script>
-        // 데이터 저장
-        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 historyData = {json.dumps(js_data)};
             
-            // 드로어 닫기
-            const drawer = document.querySelector('.session-drawer');
-            if (drawer) {{
-                drawer.style.display = 'none';
+            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')) {{
+                    const match = code.match(/```html\\n([\\s\\S]*?)\\n```/);
+                    if (match) {{
+                        code = match[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 buttons = document.querySelectorAll('button');
+                for (const button of buttons) {{
+                    if (button.textContent.includes('Code 실행')) {{
+                        button.click();
+                        break;
+                    }}
+                }}
+                
+                // 드로어 닫기
+                const drawer = document.querySelector('.session-drawer');
+                if (drawer) {{
+                    drawer.style.display = 'none';
+                }}
             }}
-        }}
         </script>
         """
-        
-        return gr.HTML(value=cards_html)
-        
+
+        return gr.HTML(value=html_content)
+
     except Exception as e:
         print(f"Error loading session history: {e}")
         return gr.HTML("Error loading history")