Update app.py

app.py

@@ -16,6 +16,7 @@ import modelscope_studio.components.legacy as legacy
 import modelscope_studio.components.antd as antd
 
 import html
+import urllib.parse
 
 # SystemPrompt 부분을 직접 정의
 SystemPrompt = """너의 이름은 'MOUSE'이다. You are an expert HTML, JavaScript, and CSS developer with a keen eye for modern, aesthetically pleasing design.
@@ -440,6 +441,13 @@ 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">
         """
@@ -454,7 +462,8 @@ def load_session_history(selected_session):
             
             cards_html += f"""
             <div class="prompt-card" 
-                 onclick="executeHistoryItem(`{escaped_prompt}`, `{escaped_response}`)">
+                 onclick="executeHistoryItem(decodeURIComponent('{urllib.parse.quote(escaped_prompt)}'), 
+                                          decodeURIComponent('{urllib.parse.quote(escaped_response)}'))">
                 <div>{short_prompt}</div>
                 <div class="timestamp">{formatted_time}</div>
             </div>
@@ -464,27 +473,49 @@ def load_session_history(selected_session):
         </div>
         <script>
         function executeHistoryItem(prompt, response) {
-            // 입력 필드 업데이트
-            document.querySelector('textarea').value = prompt;
-            
-            // 코드 실행
-            const code = response.includes('```html') ? 
-                response.match(/```html\\n([\\s\\S]*?)\\n```/)[1] : 
-                response;
-            
-            const encodedHtml = btoa(code);
-            const dataUri = `data:text/html;charset=utf-8;base64,${encodedHtml}`;
-            
-            // iframe 업데이트
-            document.querySelector('.html_content iframe').src = dataUri;
-            
-            // 세션 드로어 닫기
-            document.querySelector('.session-drawer').style.display = 'none';
-            
-            // 렌더 탭으로 변경
-            document.querySelector('[data-testid="tab-render"]').click();
+            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)));
+                    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';
+                    }
+                    
+                    // 렌더 탭으로 변경
+                    const renderTab = document.querySelector('[data-testid="tab-render"]');
+                    if (renderTab) {
+                        renderTab.click();
+                    }
+                }
+            } catch (error) {
+                console.error('Error executing history item:', error);
+            }
         }
         </script>
+        <div class="code-display"></div>
         """
         
         return gr.HTML(value=cards_html)