Spaces:

Heartsync
/

aibook

Running

App Files Files Community

seawolf2357 commited on Jan 13

Commit

b9c1b54

1 Parent(s): 6c1d009

Update app.py

Browse files

Files changed (1) hide show

app.py +415 -183

app.py CHANGED Viewed

@@ -787,9 +787,10 @@ HTML = """
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>AI 플립북</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="/static/three.js"></script>
   <script src="/static/iscroll.js"></script>
   <script src="/static/mark.js"></script>
@@ -801,23 +802,24 @@ HTML = """
   <script src="/static/flipbook.swipe.js"></script>
   <script src="/static/flipbook.webgl.js"></script>
   <style>
   :root {
-    --primary-color: #a5d8ff;
-    --secondary-color: #ffd6e0;
-    --tertiary-color: #c3fae8;
-    --accent-color: #d0bfff;
-    --ai-color: #86e8ab;
-    --ai-hover: #65d68a;
-    --bg-color: #f8f9fa;
-    --text-color: #495057;
     --card-bg: #ffffff;
-    --shadow-sm: 0 2px 8px rgba(0,0,0,0.05);
-    --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
-    --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
     --radius-sm: 8px;
     --radius-md: 12px;
-    --radius-lg: 16px;
-    --transition: all 0.3s ease;
   }
   * {
@@ -826,24 +828,131 @@ HTML = """
   body {
     margin: 0;
-    background: var(--bg-color);
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    color: var(--text-color);
-    background-image: linear-gradient(135deg, #2a0845 0%, #6441a5 50%, #c9a8ff 100%);
     background-attachment: fixed;
     min-height: 100vh;
   }
   .floating-ai {
     position: fixed;
     top: 20px;
-    left: 20px;
-    width: 60px;
-    height: 60px;
     border-radius: 50%;
-    background: rgba(134, 232, 171, 0.95);
-    backdrop-filter: blur(10px);
-    box-shadow: var(--shadow-md);
     z-index: 9999;
     display: flex;
     justify-content: center;
@@ -854,8 +963,13 @@ HTML = """
   }
   .floating-ai:hover {
-    transform: scale(1.05);
-    box-shadow: var(--shadow-lg);
   }
   .floating-ai .icon {
@@ -864,78 +978,52 @@ HTML = """
     align-items: center;
     width: 100%;
     height: 100%;
-    font-size: 22px;
     color: white;
     transition: var(--transition);
   }
-  .floating-ai .title {
     position: absolute;
-    left: 70px;
-    background: rgba(255, 255, 255, 0.95);
-    padding: 8px 20px;
-    border-radius: 20px;
-    box-shadow: var(--shadow-sm);
-    font-weight: 600;
-    font-size: 14px;
     white-space: nowrap;
     pointer-events: none;
     opacity: 0;
-    transform: translateX(-10px);
     transition: all 0.3s ease;
-    color: var(--text-color);
   }
-  .floating-ai:hover .title {
     opacity: 1;
     transform: translateX(0);
   }
-  .header-info {
-    position: fixed;
-    top: 15px;
-    left: 50%;
-    transform: translateX(-50%);
-    text-align: center;
-    z-index: 100;
-    background: rgba(255, 255, 255, 0.9);
-    backdrop-filter: blur(10px);
-    padding: 12px 30px;
-    border-radius: 25px;
-    box-shadow: var(--shadow-md);
-  }
-  .header-info .title {
-    font-size: 1.3rem;
-    font-weight: 700;
-    background-image: linear-gradient(120deg, #8e74eb 0%, #9d66ff 100%);
-    -webkit-background-clip: text;
-    background-clip: text;
-    color: transparent;
-    margin-bottom: 4px;
-  }
-  .header-info .description {
-    font-size: 0.8rem;
-    color: #666;
-    max-width: 400px;
-  }
   #viewer {
     width: 90%;
-    height: 85vh;
     max-width: 90%;
     margin: 0;
     background: var(--card-bg);
-    border: none;
-    border-radius: var(--radius-lg);
     position: fixed;
-    top: 55%;
     left: 50%;
     transform: translate(-50%, -50%);
     z-index: 1000;
     box-shadow: var(--shadow-lg);
-    max-height: calc(85vh - 40px);
     overflow: hidden;
   }
@@ -943,18 +1031,17 @@ HTML = """
     z-index: 2000 !important;
     opacity: 1 !important;
     bottom: 0 !important;
-    background-color: rgba(255,255,255,0.9) !important;
-    backdrop-filter: blur(10px) !important;
-    border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important;
     padding: 12px 0 !important;
-    box-shadow: 0 -4px 20px rgba(0,0,0,0.1) !important;
   }
   .flipbook-container .fb3d-menu-bar > ul > li > img,
   .flipbook-container .fb3d-menu-bar > ul > li > div {
     opacity: 1 !important;
     transform: scale(1.2) !important;
-    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.1)) !important;
   }
   .flipbook-container .fb3d-menu-bar > ul > li {
@@ -962,13 +1049,16 @@ HTML = """
   }
   .flipbook-container .fb3d-menu-bar > ul > li > span {
-    background-color: rgba(0,0,0,0.7) !important;
-    color: white !important;
     border-radius: var(--radius-sm) !important;
     padding: 8px 12px !important;
     font-size: 13px !important;
     bottom: 55px !important;
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
   }
   @keyframes spin {
@@ -976,14 +1066,15 @@ HTML = """
     100% { transform: rotate(360deg); }
   }
   .loading-container {
     position: fixed;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     text-align: center;
-    background: rgba(255, 255, 255, 0.95);
-    backdrop-filter: blur(10px);
     padding: 40px;
     border-radius: var(--radius-md);
     box-shadow: var(--shadow-lg);
@@ -991,35 +1082,37 @@ HTML = """
   }
   .loading-spinner {
-    border: 4px solid rgba(100, 65, 165, 0.2);
-    border-top: 4px solid #6441a5;
     border-radius: 50%;
-    width: 50px;
-    height: 50px;
     margin: 0 auto;
     animation: spin 1s linear infinite;
   }
   .loading-text {
     margin-top: 20px;
-    font-size: 16px;
-    color: var(--text-color);
-    font-weight: 500;
   }
   .progress-bar-container {
-    width: 200px;
-    height: 6px;
-    background-color: rgba(0,0,0,0.1);
-    border-radius: 3px;
     margin-top: 15px;
     overflow: hidden;
   }
   .progress-bar {
     height: 100%;
-    background: linear-gradient(to right, #6441a5, #c9a8ff);
-    border-radius: 3px;
     transition: width 0.3s ease;
   }
@@ -1028,25 +1121,28 @@ HTML = """
     bottom: 20px;
     left: 50%;
     transform: translateX(-50%);
-    background: rgba(255, 255, 255, 0.9);
-    padding: 10px 20px;
-    border-radius: 20px;
-    box-shadow: var(--shadow-md);
     font-size: 14px;
-    color: var(--text-color);
     z-index: 9998;
   }
-  /* AI 채팅 컨테이너 */
   #aiChatContainer {
     position: fixed;
     top: 0;
     right: 0;
-    width: 400px;
     height: 100%;
-    background: rgba(255, 255, 255, 0.98);
-    backdrop-filter: blur(10px);
-    box-shadow: -5px 0 20px rgba(0, 0, 0, 0.15);
     z-index: 10000;
     transform: translateX(100%);
     transition: transform 0.3s ease;
@@ -1063,14 +1159,17 @@ HTML = """
     justify-content: space-between;
     align-items: center;
     padding: 20px;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-    background: linear-gradient(135deg, #86e8ab 0%, #65d68a 100%);
   }
   #aiChatHeader h3 {
     margin: 0;
     color: white;
-    font-size: 18px;
     display: flex;
     align-items: center;
   }
@@ -1080,29 +1179,32 @@ HTML = """
   }
   #aiChatClose {
-    background: rgba(255,255,255,0.3);
-    border: none;
     cursor: pointer;
     font-size: 18px;
-    color: white;
-    width: 35px;
-    height: 35px;
-    border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: var(--transition);
   }
   #aiChatClose:hover {
-    background: rgba(255,255,255,0.5);
-    transform: scale(1.1);
   }
   #aiChatMessages {
     flex: 1;
     overflow-y: auto;
     padding: 20px;
   }
   .chat-message {
@@ -1116,24 +1218,26 @@ HTML = """
   }
   .chat-avatar {
-    width: 35px;
-    height: 35px;
-    border-radius: 50%;
     display: flex;
     justify-content: center;
     align-items: center;
     flex-shrink: 0;
   }
   .chat-message.user .chat-avatar {
     margin-left: 10px;
-    background: var(--accent-color);
     color: white;
   }
   .chat-message.ai .chat-avatar {
     margin-right: 10px;
-    background: var(--ai-color);
     color: white;
   }
@@ -1142,30 +1246,35 @@ HTML = """
   }
   .chat-content {
-    padding: 12px 16px;
-    border-radius: 18px;
     word-break: break-word;
     font-size: 14px;
-    line-height: 1.5;
   }
   .chat-message.user .chat-content {
-    background: var(--accent-color);
     color: white;
     border-bottom-right-radius: 4px;
   }
   .chat-message.ai .chat-content {
-    background: #f1f3f5;
-    color: #333;
     border-bottom-left-radius: 4px;
   }
   .chat-time {
-    font-size: 10px;
-    color: #999;
-    margin-top: 5px;
     text-align: right;
   }
   .chat-message.ai .chat-time {
@@ -1175,49 +1284,59 @@ HTML = """
   #aiChatForm {
     display: flex;
     padding: 15px 20px;
-    border-top: 1px solid rgba(0, 0, 0, 0.1);
-    background: #fafafa;
   }
   #aiChatInput {
     flex: 1;
-    padding: 12px 18px;
-    border: 2px solid #e9ecef;
     border-radius: 25px;
     font-size: 14px;
     outline: none;
     transition: var(--transition);
   }
   #aiChatInput:focus {
-    border-color: var(--ai-color);
-    box-shadow: 0 0 0 3px rgba(134, 232, 171, 0.2);
   }
   #aiChatSubmit {
-    background: var(--ai-color);
-    border: none;
     color: white;
-    width: 45px;
-    height: 45px;
     border-radius: 50%;
-    margin-left: 10px;
     display: flex;
     justify-content: center;
     align-items: center;
     cursor: pointer;
     transition: var(--transition);
   }
   #aiChatSubmit:hover {
-    background: var(--ai-hover);
-    transform: scale(1.05);
   }
   #aiChatSubmit:disabled {
-    background: #ccc;
     cursor: not-allowed;
     transform: none;
   }
   .typing-indicator {
@@ -1228,17 +1347,18 @@ HTML = """
   .typing-indicator .chat-avatar {
     margin-right: 10px;
-    background: var(--ai-color);
     color: white;
   }
   .typing-indicator span {
-    height: 8px;
-    width: 8px;
-    background: var(--ai-color);
     border-radius: 50%;
     display: inline-block;
-    margin-right: 4px;
     animation: typing 1s infinite;
   }
@@ -1246,8 +1366,8 @@ HTML = """
   .typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
   @keyframes typing {
-    0%, 100% { transform: translateY(0); opacity: 0.5; }
-    50% { transform: translateY(-5px); opacity: 1; }
   }
   .error-container {
@@ -1256,7 +1376,8 @@ HTML = """
     left: 50%;
     transform: translate(-50%, -50%);
     text-align: center;
-    background: rgba(255, 255, 255, 0.95);
     padding: 40px;
     border-radius: var(--radius-md);
     box-shadow: var(--shadow-lg);
@@ -1264,54 +1385,137 @@ HTML = """
   }
   .error-container i {
-    font-size: 48px;
-    color: #e74c3c;
     margin-bottom: 20px;
   }
   .error-container p {
     font-size: 16px;
-    color: var(--text-color);
     margin-bottom: 20px;
   }
   .error-container button {
-    padding: 10px 25px;
-    background: var(--accent-color);
     color: white;
-    border: none;
-    border-radius: 25px;
     cursor: pointer;
-    font-size: 14px;
     transition: var(--transition);
   }
   .error-container button:hover {
-    transform: translateY(-2px);
-    box-shadow: var(--shadow-md);
   }
   @media (max-width: 768px) {
     .header-info {
-      padding: 10px 20px;
       max-width: 90%;
     }
     .header-info .title {
-      font-size: 1.1rem;
     }
     .header-info .description {
-      font-size: 0.7rem;
     }
     .floating-ai {
-      width: 50px;
-      height: 50px;
     }
     .floating-ai .icon {
-      font-size: 18px;
     }
     #aiChatContainer {
@@ -1320,23 +1524,43 @@ HTML = """
     #viewer {
       width: 95%;
-      height: 80vh;
-      top: 58%;
     }
   }
   </style>
 </head>
 <body>
   <div class="header-info">
-    <div class="title">AI 플립북</div>
-    <div class="description">나만의 PDF 전자책을 더욱 가치있게 입체적인 비주얼과 AI챗봇을 통해 상호 인터렉티브를 지원합니다.</div>
   </div>
   <div id="aiButton" class="floating-ai">
     <div class="icon"><i class="fas fa-robot"></i></div>
-    <div class="title">AI 어시스턴트</div>
   </div>
   <div id="aiChatContainer">
     <div id="aiChatHeader">
       <h3><i class="fas fa-robot"></i> AI 어시스턴트</h3>
@@ -1349,9 +1573,17 @@ HTML = """
     </form>
   </div>
   <div id="viewer"></div>
   <div id="loadingPages" class="loading-pages" style="display:none;">페이지 로딩 중... <span id="loadingPagesCount">0%</span></div>
 <script>
     let fb = null;
     const viewer = document.getElementById('viewer');
@@ -1473,7 +1705,7 @@ HTML = """
         if (statusData.status === 'analyzing') {
           removeTypingIndicator();
           const progress = statusData.progress || 0;
-          addChatMessage(`안녕하세요! 현재 PDF를 AI가 분석하고 있습니다. 📊<br><br>진행률: <strong>${progress}%</strong><br><small style="color:#999;">분석이 완료되면 자동으로 알려드리겠습니다.</small>`);
           hasLoadedSummary = true;
           isAiProcessing = false;
@@ -1484,7 +1716,7 @@ HTML = """
         if (statusData.status === 'error') {
           removeTypingIndicator();
-          addChatMessage(`안녕하세요! PDF 분석 중 오류가 발생했습니다. ⚠️<br><br><small style="color:#e74c3c;">${statusData.error || '알 수 없는 오류'}</small><br><br>페이지를 새로고침하거나 잠시 후 다시 시도해주세요.`);
           hasLoadedSummary = true;
           isAiProcessing = false;
           return;
@@ -1492,7 +1724,7 @@ HTML = """
         if (statusData.status === 'not_started') {
           removeTypingIndicator();
-          addChatMessage(`안녕하세요! PDF 분석이 아직 시작되지 않았습니다. 🔄<br><br><small style="color:#999;">잠시만 기다려주세요...</small>`);
           hasLoadedSummary = true;
           isAiProcessing = false;
           startAnalysisPolling();
@@ -1507,16 +1739,16 @@ HTML = """
         if (data.summary) {
           const pageInfo = data.analyzed_pages ? ` (${data.analyzed_pages}/${data.total_pages}페이지 분석완료)` : '';
-          addChatMessage(`안녕하세요! 이 PDF에 대해 무엇이든 질문해주세요.${pageInfo}<br><br><strong>📄 PDF 요약:</strong><br>${data.summary}`);
         } else {
-          addChatMessage("안녕하세요! PDF에 대해 질문해주세요. 최선을 다해 답변하겠습니다.");
         }
         hasLoadedSummary = true;
       } catch (error) {
         console.error("PDF 요약 로드 오류:", error);
         removeTypingIndicator();
-        addChatMessage("안녕하세요! PDF에 대해 질문해주세요.");
         hasLoadedSummary = true;
       } finally {
         isAiProcessing = false;
@@ -1663,7 +1895,7 @@ HTML = """
         let width, height;
         if (aspectRatio > 1) {
-          height = Math.min(windowHeight * 0.85, windowHeight - 100);
           width = height * aspectRatio * 0.75;
           if (width > windowWidth * 0.9) {
             width = windowWidth * 0.9;
@@ -1672,8 +1904,8 @@ HTML = """
         } else {
           width = Math.min(windowWidth * 0.95, windowWidth - 20);
           height = width / aspectRatio * 0.85;
-          if (height > windowHeight * 0.8) {
-            height = windowHeight * 0.8;
             width = height * aspectRatio * 0.85;
           }
         }

 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <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">
+  <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>
   <script src="/static/mark.js"></script>
   <script src="/static/flipbook.swipe.js"></script>
   <script src="/static/flipbook.webgl.js"></script>
   <style>
+  /* ============================================
+     Comic Style CSS - Z-Image Style Applied
+     ============================================ */
   :root {
+    --primary-color: #3B82F6;
+    --secondary-color: #8B5CF6;
+    --accent-color: #FACC15;
+    --ai-color: #10B981;
+    --ai-hover: #059669;
+    --bg-yellow: #FEF9C3;
+    --text-dark: #1F2937;
     --card-bg: #ffffff;
+    --shadow-comic: 5px 5px 0 #1F2937;
+    --shadow-lg: 8px 8px 0 #1F2937;
+    --border-comic: 3px solid #1F2937;
     --radius-sm: 8px;
     --radius-md: 12px;
+    --transition: all 0.2s ease;
   }
   * {
   body {
     margin: 0;
+    font-family: 'Comic Neue', cursive, sans-serif;
+    color: var(--text-dark);
+    background-color: var(--bg-yellow);
+    background-image: radial-gradient(#1F2937 1px, transparent 1px);
+    background-size: 20px 20px;
     background-attachment: fixed;
     min-height: 100vh;
   }
+  /* HOME Button Container - Z-Image Style */
+  .home-button-container {
+    position: fixed;
+    top: 15px;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 15px;
+    padding: 12px 25px;
+    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
+    border: 4px solid #1F2937;
+    border-radius: 12px;
+    box-shadow: 6px 6px 0 #1F2937;
+    z-index: 9998;
+  }
+  .home-button {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 25px;
+    background: linear-gradient(135deg, #FACC15 0%, #F59E0B 100%);
+    color: #1F2937;
+    font-family: 'Bangers', cursive;
+    font-size: 1.4rem;
+    letter-spacing: 2px;
+    text-decoration: none;
+    border: 3px solid #1F2937;
+    border-radius: 8px;
+    box-shadow: 4px 4px 0 #1F2937;
+    transition: all 0.2s ease;
+    cursor: pointer;
+  }
+  .home-button:hover {
+    background: linear-gradient(135deg, #FDE047 0%, #FACC15 100%);
+    transform: translate(-2px, -2px);
+    box-shadow: 6px 6px 0 #1F2937;
+    text-decoration: none;
+    color: #1F2937;
+  }
+  .home-button:active {
+    transform: translate(2px, 2px);
+    box-shadow: 2px 2px 0 #1F2937;
+  }
+  .url-display {
+    font-family: 'Comic Neue', cursive;
+    font-size: 1.1rem;
+    font-weight: 700;
+    color: #FFF;
+    background: rgba(0,0,0,0.3);
+    padding: 8px 16px;
+    border-radius: 6px;
+    border: 2px solid rgba(255,255,255,0.3);
+  }
+  /* Header Info - Comic Style */
+  .header-info {
+    position: fixed;
+    top: 85px;
+    left: 50%;
+    transform: translateX(-50%);
+    text-align: center;
+    z-index: 100;
+    background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
+    border: 4px solid #1F2937;
+    padding: 15px 35px;
+    border-radius: 12px;
+    box-shadow: var(--shadow-lg);
+  }
+  .header-info .title {
+    font-family: 'Bangers', cursive;
+    font-size: 2rem;
+    color: #FFF;
+    text-shadow: 3px 3px 0 #1F2937;
+    letter-spacing: 3px;
+    margin-bottom: 6px;
+  }
+  .header-info .description {
+    font-family: 'Comic Neue', cursive;
+    font-size: 0.95rem;
+    font-weight: 700;
+    color: #FEF9C3;
+    max-width: 500px;
+  }
+  .stats-badge {
+    display: inline-block;
+    background: #FACC15;
+    color: #1F2937;
+    padding: 5px 12px;
+    border-radius: 20px;
+    font-size: 0.85rem;
+    margin: 3px;
+    font-weight: 700;
+    border: 2px solid #1F2937;
+    box-shadow: 2px 2px 0 #1F2937;
+  }
+  /* Floating AI Button - Comic Style */
   .floating-ai {
     position: fixed;
     top: 20px;
+    right: 20px;
+    width: 65px;
+    height: 65px;
     border-radius: 50%;
+    background: linear-gradient(135deg, #EF4444 0%, #F97316 100%);
+    border: 4px solid #1F2937;
+    box-shadow: 5px 5px 0 #1F2937;
     z-index: 9999;
     display: flex;
     justify-content: center;
   }
   .floating-ai:hover {
+    transform: translate(-2px, -2px);
+    box-shadow: 7px 7px 0 #1F2937;
+  }
+  .floating-ai:active {
+    transform: translate(2px, 2px);
+    box-shadow: 3px 3px 0 #1F2937;
   }
   .floating-ai .icon {
     align-items: center;
     width: 100%;
     height: 100%;
+    font-size: 26px;
     color: white;
+    text-shadow: 2px 2px 0 #1F2937;
     transition: var(--transition);
   }
+  .floating-ai .ai-title {
     position: absolute;
+    right: 75px;
+    background: #FFF;
+    padding: 10px 20px;
+    border-radius: 8px;
+    border: 3px solid #1F2937;
+    box-shadow: 4px 4px 0 #1F2937;
+    font-family: 'Bangers', cursive;
+    font-size: 1.1rem;
+    letter-spacing: 1px;
     white-space: nowrap;
     pointer-events: none;
     opacity: 0;
+    transform: translateX(10px);
     transition: all 0.3s ease;
+    color: var(--text-dark);
   }
+  .floating-ai:hover .ai-title {
     opacity: 1;
     transform: translateX(0);
   }
+  /* Viewer Container - Comic Style */
   #viewer {
     width: 90%;
+    height: 78vh;
     max-width: 90%;
     margin: 0;
     background: var(--card-bg);
+    border: 4px solid #1F2937;
+    border-radius: var(--radius-md);
     position: fixed;
+    top: 58%;
     left: 50%;
     transform: translate(-50%, -50%);
     z-index: 1000;
     box-shadow: var(--shadow-lg);
+    max-height: calc(78vh - 40px);
     overflow: hidden;
   }
     z-index: 2000 !important;
     opacity: 1 !important;
     bottom: 0 !important;
+    background: linear-gradient(135deg, #FACC15 0%, #F59E0B 100%) !important;
+    border-top: 3px solid #1F2937 !important;
+    border-radius: 0 0 var(--radius-md) var(--radius-md) !important;
     padding: 12px 0 !important;
   }
   .flipbook-container .fb3d-menu-bar > ul > li > img,
   .flipbook-container .fb3d-menu-bar > ul > li > div {
     opacity: 1 !important;
     transform: scale(1.2) !important;
+    filter: drop-shadow(2px 2px 0 #1F2937) !important;
   }
   .flipbook-container .fb3d-menu-bar > ul > li {
   }
   .flipbook-container .fb3d-menu-bar > ul > li > span {
+    background: #FFF !important;
+    color: #1F2937 !important;
+    border: 2px solid #1F2937 !important;
     border-radius: var(--radius-sm) !important;
     padding: 8px 12px !important;
     font-size: 13px !important;
     bottom: 55px !important;
+    font-family: 'Comic Neue', cursive !important;
+    font-weight: 700 !important;
+    box-shadow: 3px 3px 0 #1F2937 !important;
   }
   @keyframes spin {
     100% { transform: rotate(360deg); }
   }
+  /* Loading Container - Comic Style */
   .loading-container {
     position: fixed;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     text-align: center;
+    background: #FFF;
+    border: 4px solid #1F2937;
     padding: 40px;
     border-radius: var(--radius-md);
     box-shadow: var(--shadow-lg);
   }
   .loading-spinner {
+    border: 5px solid #FEF9C3;
+    border-top: 5px solid #3B82F6;
     border-radius: 50%;
+    width: 55px;
+    height: 55px;
     margin: 0 auto;
     animation: spin 1s linear infinite;
   }
   .loading-text {
     margin-top: 20px;
+    font-family: 'Bangers', cursive;
+    font-size: 1.3rem;
+    color: var(--text-dark);
+    letter-spacing: 1px;
   }
   .progress-bar-container {
+    width: 220px;
+    height: 20px;
+    background: #FEF9C3;
+    border: 3px solid #1F2937;
+    border-radius: 10px;
     margin-top: 15px;
     overflow: hidden;
   }
   .progress-bar {
     height: 100%;
+    background: linear-gradient(to right, #3B82F6, #8B5CF6);
+    border-radius: 7px;
     transition: width 0.3s ease;
   }
     bottom: 20px;
     left: 50%;
     transform: translateX(-50%);
+    background: #FFF;
+    border: 3px solid #1F2937;
+    padding: 12px 25px;
+    border-radius: 25px;
+    box-shadow: 4px 4px 0 #1F2937;
+    font-family: 'Comic Neue', cursive;
     font-size: 14px;
+    font-weight: 700;
+    color: var(--text-dark);
     z-index: 9998;
   }
+  /* AI Chat Container - Comic Style */
   #aiChatContainer {
     position: fixed;
     top: 0;
     right: 0;
+    width: 420px;
     height: 100%;
+    background: #FFF;
+    border-left: 4px solid #1F2937;
+    box-shadow: -8px 0 0 #1F2937;
     z-index: 10000;
     transform: translateX(100%);
     transition: transform 0.3s ease;
     justify-content: space-between;
     align-items: center;
     padding: 20px;
+    border-bottom: 4px solid #1F2937;
+    background: linear-gradient(135deg, #EF4444 0%, #F97316 100%);
   }
   #aiChatHeader h3 {
     margin: 0;
     color: white;
+    font-family: 'Bangers', cursive;
+    font-size: 1.5rem;
+    letter-spacing: 2px;
+    text-shadow: 2px 2px 0 #1F2937;
     display: flex;
     align-items: center;
   }
   }
   #aiChatClose {
+    background: #FFF;
+    border: 3px solid #1F2937;
     cursor: pointer;
     font-size: 18px;
+    color: #1F2937;
+    width: 40px;
+    height: 40px;
+    border-radius: 8px;
     display: flex;
     align-items: center;
     justify-content: center;
+    box-shadow: 3px 3px 0 #1F2937;
     transition: var(--transition);
   }
   #aiChatClose:hover {
+    background: #FACC15;
+    transform: translate(-2px, -2px);
+    box-shadow: 5px 5px 0 #1F2937;
   }
   #aiChatMessages {
     flex: 1;
     overflow-y: auto;
     padding: 20px;
+    background: #FEF9C3;
   }
   .chat-message {
   }
   .chat-avatar {
+    width: 40px;
+    height: 40px;
+    border-radius: 8px;
+    border: 3px solid #1F2937;
     display: flex;
     justify-content: center;
     align-items: center;
     flex-shrink: 0;
+    box-shadow: 2px 2px 0 #1F2937;
   }
   .chat-message.user .chat-avatar {
     margin-left: 10px;
+    background: linear-gradient(135deg, #8B5CF6 0%, #A855F7 100%);
     color: white;
   }
   .chat-message.ai .chat-avatar {
     margin-right: 10px;
+    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
     color: white;
   }
   }
   .chat-content {
+    padding: 14px 18px;
+    border-radius: 12px;
+    border: 3px solid #1F2937;
     word-break: break-word;
+    font-family: 'Comic Neue', cursive;
     font-size: 14px;
+    font-weight: 700;
+    line-height: 1.6;
+    box-shadow: 3px 3px 0 #1F2937;
   }
   .chat-message.user .chat-content {
+    background: linear-gradient(135deg, #8B5CF6 0%, #A855F7 100%);
     color: white;
     border-bottom-right-radius: 4px;
   }
   .chat-message.ai .chat-content {
+    background: #FFF;
+    color: #1F2937;
     border-bottom-left-radius: 4px;
   }
   .chat-time {
+    font-size: 11px;
+    color: #6B7280;
+    margin-top: 6px;
     text-align: right;
+    font-weight: 700;
   }
   .chat-message.ai .chat-time {
   #aiChatForm {
     display: flex;
     padding: 15px 20px;
+    border-top: 4px solid #1F2937;
+    background: #FFF;
+    gap: 10px;
   }
   #aiChatInput {
     flex: 1;
+    padding: 14px 20px;
+    border: 3px solid #1F2937;
     border-radius: 25px;
+    font-family: 'Comic Neue', cursive;
     font-size: 14px;
+    font-weight: 700;
     outline: none;
     transition: var(--transition);
+    background: #FEF9C3;
   }
   #aiChatInput:focus {
+    border-color: #3B82F6;
+    box-shadow: 3px 3px 0 #3B82F6;
   }
   #aiChatSubmit {
+    background: linear-gradient(135deg, #EF4444 0%, #F97316 100%);
+    border: 3px solid #1F2937;
     color: white;
+    width: 50px;
+    height: 50px;
     border-radius: 50%;
     display: flex;
     justify-content: center;
     align-items: center;
     cursor: pointer;
+    box-shadow: 3px 3px 0 #1F2937;
     transition: var(--transition);
   }
   #aiChatSubmit:hover {
+    transform: translate(-2px, -2px);
+    box-shadow: 5px 5px 0 #1F2937;
+  }
+  #aiChatSubmit:active {
+    transform: translate(2px, 2px);
+    box-shadow: 1px 1px 0 #1F2937;
   }
   #aiChatSubmit:disabled {
+    background: #9CA3AF;
     cursor: not-allowed;
     transform: none;
+    box-shadow: 3px 3px 0 #1F2937;
   }
   .typing-indicator {
   .typing-indicator .chat-avatar {
     margin-right: 10px;
+    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
     color: white;
   }
   .typing-indicator span {
+    height: 10px;
+    width: 10px;
+    background: #10B981;
     border-radius: 50%;
     display: inline-block;
+    margin-right: 5px;
+    border: 2px solid #1F2937;
     animation: typing 1s infinite;
   }
   .typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
   @keyframes typing {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-8px); }
   }
   .error-container {
     left: 50%;
     transform: translate(-50%, -50%);
     text-align: center;
+    background: #FFF;
+    border: 4px solid #1F2937;
     padding: 40px;
     border-radius: var(--radius-md);
     box-shadow: var(--shadow-lg);
   }
   .error-container i {
+    font-size: 50px;
+    color: #EF4444;
     margin-bottom: 20px;
+    text-shadow: 3px 3px 0 #1F2937;
   }
   .error-container p {
+    font-family: 'Comic Neue', cursive;
     font-size: 16px;
+    font-weight: 700;
+    color: var(--text-dark);
     margin-bottom: 20px;
   }
   .error-container button {
+    padding: 12px 30px;
+    background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
     color: white;
+    border: 3px solid #1F2937;
+    border-radius: 8px;
     cursor: pointer;
+    font-family: 'Bangers', cursive;
+    font-size: 1.2rem;
+    letter-spacing: 1px;
+    box-shadow: 4px 4px 0 #1F2937;
     transition: var(--transition);
   }
   .error-container button:hover {
+    transform: translate(-2px, -2px);
+    box-shadow: 6px 6px 0 #1F2937;
+  }
+  /* Footer - Comic Style */
+  .footer-comic {
+    position: fixed;
+    bottom: 10px;
+    right: 10px;
+    text-align: center;
+    padding: 10px 20px;
+    background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
+    border: 3px solid #1F2937;
+    border-radius: 10px;
+    box-shadow: 4px 4px 0 #1F2937;
+    z-index: 100;
+  }
+  .footer-comic p {
+    font-family: 'Comic Neue', cursive;
+    color: #FFF;
+    margin: 3px 0;
+    font-weight: 700;
+    font-size: 0.85rem;
+  }
+  .footer-comic a {
+    color: #FACC15;
+    text-decoration: none;
+    font-weight: 700;
+  }
+  .footer-comic a:hover {
+    text-decoration: underline;
+  }
+  /* Scrollbar - Comic Style */
+  ::-webkit-scrollbar {
+    width: 14px;
+    height: 14px;
+  }
+  ::-webkit-scrollbar-track {
+    background: #FEF9C3;
+    border: 2px solid #1F2937;
+  }
+  ::-webkit-scrollbar-thumb {
+    background: linear-gradient(135deg, #3B82F6, #8B5CF6);
+    border: 2px solid #1F2937;
+    border-radius: 7px;
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    background: linear-gradient(135deg, #EF4444, #F97316);
+  }
+  ::selection {
+    background: #FACC15;
+    color: #1F2937;
   }
   @media (max-width: 768px) {
+    .home-button-container {
+      padding: 10px 15px;
+      gap: 10px;
+      flex-wrap: wrap;
+    }
+    .home-button {
+      font-size: 1.1rem;
+      padding: 8px 18px;
+    }
+    .url-display {
+      font-size: 0.9rem;
+      padding: 6px 12px;
+    }
     .header-info {
+      top: 80px;
+      padding: 12px 20px;
       max-width: 90%;
     }
     .header-info .title {
+      font-size: 1.5rem;
     }
     .header-info .description {
+      font-size: 0.8rem;
     }
     .floating-ai {
+      width: 55px;
+      height: 55px;
+      top: 15px;
+      right: 15px;
     }
     .floating-ai .icon {
+      font-size: 22px;
     }
     #aiChatContainer {
     #viewer {
       width: 95%;
+      height: 72vh;
+      top: 60%;
+    }
+    .footer-comic {
+      display: none;
     }
   }
   </style>
 </head>
 <body>
+  <!-- HOME Button Container - Z-Image Style -->
+  <div class="home-button-container">
+    <a href="https://ginigen.ai" target="_blank" class="home-button">
+      🏠 HOME
+    </a>
+    <span class="url-display">🌐 ginigen.ai</span>
+  </div>
+  <!-- Header Info - Comic Style -->
   <div class="header-info">
+    <div class="title">📚 AI 플립북 📚</div>
+    <div class="description">나만의 PDF 전자책을 더욱 가치있게! 입체적인 비주얼과 AI챗봇을 통해 상호 인터렉티브를 지원합니다.</div>
+    <div style="margin-top:10px">
+      <span class="stats-badge">⚡ 빠른 로딩</span>
+      <span class="stats-badge">🤖 AI 챗봇</span>
+      <span class="stats-badge">📖 3D 플립북</span>
+    </div>
   </div>
+  <!-- Floating AI Button - Comic Style -->
   <div id="aiButton" class="floating-ai">
     <div class="icon"><i class="fas fa-robot"></i></div>
+    <div class="ai-title">🤖 AI 어시스턴트</div>
   </div>
+  <!-- AI Chat Container -->
   <div id="aiChatContainer">
     <div id="aiChatHeader">
       <h3><i class="fas fa-robot"></i> AI 어시스턴트</h3>
     </form>
   </div>
+  <!-- PDF Viewer -->
   <div id="viewer"></div>
   <div id="loadingPages" class="loading-pages" style="display:none;">페이지 로딩 중... <span id="loadingPagesCount">0%</span></div>
+  <!-- Footer - Comic Style -->
+  <div class="footer-comic">
+    <p style="font-family:'Bangers',cursive;font-size:1.1rem;letter-spacing:1px">📚 AI FLIPBOOK 📚</p>
+    <p>Powered by VLM + 3D FlipBook</p>
+    <p><a href="https://ginigen.ai" target="_blank">🏠 ginigen.ai</a></p>
+  </div>
 <script>
     let fb = null;
     const viewer = document.getElementById('viewer');
         if (statusData.status === 'analyzing') {
           removeTypingIndicator();
           const progress = statusData.progress || 0;
+          addChatMessage(`안녕하세요! 💥 현재 PDF를 AI가 분석하고 있습니다. 📊<br><br>진행률: <strong>${progress}%</strong><br><small style="color:#6B7280;">분석이 완료되면 자동으로 알려드리겠습니다.</small>`);
           hasLoadedSummary = true;
           isAiProcessing = false;
         if (statusData.status === 'error') {
           removeTypingIndicator();
+          addChatMessage(`안녕하세요! 💥 PDF 분석 중 오류가 발생했습니다. ⚠️<br><br><small style="color:#EF4444;">${statusData.error || '알 수 없��� 오류'}</small><br><br>페이지를 새로고침하거나 잠시 후 다시 시도해주세요.`);
           hasLoadedSummary = true;
           isAiProcessing = false;
           return;
         if (statusData.status === 'not_started') {
           removeTypingIndicator();
+          addChatMessage(`안녕하세요! 💥 PDF 분석이 아직 시작되지 않았습니다. 🔄<br><br><small style="color:#6B7280;">잠시만 기다려주세요...</small>`);
           hasLoadedSummary = true;
           isAiProcessing = false;
           startAnalysisPolling();
         if (data.summary) {
           const pageInfo = data.analyzed_pages ? ` (${data.analyzed_pages}/${data.total_pages}페이지 분석완료)` : '';
+          addChatMessage(`안녕하세요! 💥 이 PDF에 대해 무엇이든 질문해주세요.${pageInfo}<br><br><strong>📄 PDF 요약:</strong><br>${data.summary}`);
         } else {
+          addChatMessage("안녕하세요! 💥 PDF에 대해 질문해주세요. 최선을 다해 답변하겠습니다.");
         }
         hasLoadedSummary = true;
       } catch (error) {
         console.error("PDF 요약 로드 오류:", error);
         removeTypingIndicator();
+        addChatMessage("안녕하세요! 💥 PDF에 대해 질문해주세요.");
         hasLoadedSummary = true;
       } finally {
         isAiProcessing = false;
         let width, height;
         if (aspectRatio > 1) {
+          height = Math.min(windowHeight * 0.78, windowHeight - 150);
           width = height * aspectRatio * 0.75;
           if (width > windowWidth * 0.9) {
             width = windowWidth * 0.9;
         } else {
           width = Math.min(windowWidth * 0.95, windowWidth - 20);
           height = width / aspectRatio * 0.85;
+          if (height > windowHeight * 0.72) {
+            height = windowHeight * 0.72;
             width = height * aspectRatio * 0.85;
           }
         }