Update app-backup.py

app-backup.py

@@ -994,6 +994,7 @@ HTML = """
   <title>🎨 AI 플립북 - Comic Style</title>
   <link rel="stylesheet" href="/static/flipbook.css">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/9.1.6/marked.min.js"></script>
   <link href="https://fonts.googleapis.com/css2?family=Bangers&family=Comic+Neue:wght@400;700&display=swap" rel="stylesheet">
   <script src="/static/three.js"></script>
   <script src="/static/iscroll.js"></script>
@@ -1479,6 +1480,124 @@ HTML = """
     border-bottom-left-radius: 4px;
   }
 
+  /* 마크다운 렌더링 스타일 */
+  .chat-content.markdown-body {
+    font-size: 14px;
+    line-height: 1.6;
+  }
+
+  .chat-content.markdown-body h1,
+  .chat-content.markdown-body h2,
+  .chat-content.markdown-body h3,
+  .chat-content.markdown-body h4 {
+    margin: 12px 0 8px 0;
+    font-family: 'Bangers', cursive;
+    color: #3B82F6;
+    border-bottom: 2px solid #E5E7EB;
+    padding-bottom: 4px;
+  }
+
+  .chat-content.markdown-body h1 { font-size: 1.4em; }
+  .chat-content.markdown-body h2 { font-size: 1.25em; }
+  .chat-content.markdown-body h3 { font-size: 1.1em; }
+  .chat-content.markdown-body h4 { font-size: 1em; }
+
+  .chat-content.markdown-body p {
+    margin: 8px 0;
+  }
+
+  .chat-content.markdown-body strong {
+    color: #8B5CF6;
+    font-weight: 700;
+  }
+
+  .chat-content.markdown-body em {
+    color: #059669;
+    font-style: italic;
+  }
+
+  .chat-content.markdown-body ul,
+  .chat-content.markdown-body ol {
+    margin: 8px 0;
+    padding-left: 20px;
+  }
+
+  .chat-content.markdown-body li {
+    margin: 4px 0;
+    position: relative;
+  }
+
+  .chat-content.markdown-body ul li::marker {
+    color: #EF4444;
+  }
+
+  .chat-content.markdown-body ol li::marker {
+    color: #3B82F6;
+    font-weight: 700;
+  }
+
+  .chat-content.markdown-body blockquote {
+    margin: 10px 0;
+    padding: 8px 12px;
+    border-left: 4px solid #FACC15;
+    background: #FEF9C3;
+    border-radius: 0 8px 8px 0;
+    font-style: italic;
+  }
+
+  .chat-content.markdown-body code {
+    background: #F3F4F6;
+    padding: 2px 6px;
+    border-radius: 4px;
+    font-family: 'Consolas', monospace;
+    font-size: 0.9em;
+    color: #EF4444;
+  }
+
+  .chat-content.markdown-body pre {
+    background: #1F2937;
+    color: #F9FAFB;
+    padding: 12px;
+    border-radius: 8px;
+    overflow-x: auto;
+    margin: 10px 0;
+  }
+
+  .chat-content.markdown-body pre code {
+    background: transparent;
+    color: inherit;
+    padding: 0;
+  }
+
+  .chat-content.markdown-body hr {
+    border: none;
+    border-top: 2px dashed #D1D5DB;
+    margin: 12px 0;
+  }
+
+  .chat-content.markdown-body a {
+    color: #3B82F6;
+    text-decoration: underline;
+  }
+
+  .chat-content.markdown-body table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 10px 0;
+  }
+
+  .chat-content.markdown-body th,
+  .chat-content.markdown-body td {
+    border: 2px solid #E5E7EB;
+    padding: 8px;
+    text-align: left;
+  }
+
+  .chat-content.markdown-body th {
+    background: #F3F4F6;
+    font-weight: 700;
+  }
+
   .chat-time {
     font-size: 11px;
     color: #6B7280;
@@ -1842,12 +1961,28 @@ HTML = """
       const messagesContainer = $id('aiChatMessages');
       const messageElement = document.createElement('div');
       messageElement.className = `chat-message ${isUser ? 'user' : 'ai'}`;
+      
+      // AI 메시지는 마크다운을 HTML로 변환
+      let displayContent = content;
+      if (!isUser && typeof marked !== 'undefined') {
+        try {
+          marked.setOptions({
+            breaks: true,  // 줄바꿈을 <br>로 변환
+            gfm: true      // GitHub Flavored Markdown
+          });
+          displayContent = marked.parse(content);
+        } catch (e) {
+          console.error('마크다운 파싱 오류:', e);
+          displayContent = content;
+        }
+      }
+      
       messageElement.innerHTML = `
         <div class="chat-avatar">
           <i class="fas ${isUser ? 'fa-user' : 'fa-robot'}"></i>
         </div>
         <div class="chat-bubble">
-          <div class="chat-content">${content}</div>
+          <div class="chat-content markdown-body">${displayContent}</div>
           <div class="chat-time">${formatTime()}</div>
         </div>
       `;