Update app.py

app.py

@@ -82,9 +82,30 @@ class NovelDatabase:
                 )
             ''')
             
+            # Completed novels table for gallery
+            cursor.execute('''
+                CREATE TABLE IF NOT EXISTS completed_novels (
+                    novel_id INTEGER PRIMARY KEY AUTOINCREMENT,
+                    session_id TEXT UNIQUE NOT NULL,
+                    title TEXT NOT NULL,
+                    author_query TEXT NOT NULL,
+                    language TEXT NOT NULL,
+                    genre TEXT,
+                    summary TEXT,
+                    thumbnail_text TEXT,
+                    full_content TEXT NOT NULL,
+                    word_count INTEGER,
+                    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+                    downloads INTEGER DEFAULT 0,
+                    FOREIGN KEY (session_id) REFERENCES sessions(session_id)
+                )
+            ''')
+            
             # Create indices
             cursor.execute('CREATE INDEX IF NOT EXISTS idx_session_id ON stages(session_id)')
             cursor.execute('CREATE INDEX IF NOT EXISTS idx_stage_number ON stages(stage_number)')
+            cursor.execute('CREATE INDEX IF NOT EXISTS idx_created_at ON completed_novels(created_at)')
+            cursor.execute('CREATE INDEX IF NOT EXISTS idx_language ON completed_novels(language)')
             
             conn.commit()
     
@@ -206,6 +227,119 @@ class NovelDatabase:
             ''', (final_novel, session_id))
             conn.commit()
     
+    @staticmethod
+    def save_completed_novel(session_id: str, final_novel: str):
+        """Save completed novel to gallery"""
+        try:
+            with NovelDatabase.get_db() as conn:
+                cursor = conn.cursor()
+                
+                # Get session info
+                cursor.execute('SELECT user_query, language FROM sessions WHERE session_id = ?', (session_id,))
+                session = cursor.fetchone()
+                if not session:
+                    return
+                
+                # Extract title from novel content
+                title_match = re.search(r'#\s*\[?([^\]\n]+)\]?', final_novel)
+                title = title_match.group(1).strip() if title_match else f"Novel from {session['user_query'][:30]}..."
+                
+                # Extract summary (first substantial paragraph after title)
+                lines = final_novel.split('\n')
+                summary = ""
+                for line in lines[10:]:  # Skip headers
+                    if len(line.strip()) > 50:
+                        summary = line.strip()[:200] + "..."
+                        break
+                
+                # Create thumbnail text (first 500 characters of actual content)
+                content_start = final_novel.find("[Page 1]") if "[Page 1]" in final_novel else final_novel.find("[페이지 1]")
+                if content_start > 0:
+                    thumbnail_text = final_novel[content_start:content_start+500].strip()
+                else:
+                    thumbnail_text = final_novel[:500].strip()
+                
+                # Count words
+                word_count = len(final_novel.split())
+                
+                # Check if already exists
+                cursor.execute('SELECT novel_id FROM completed_novels WHERE session_id = ?', (session_id,))
+                existing = cursor.fetchone()
+                
+                if existing:
+                    # Update existing
+                    cursor.execute('''
+                        UPDATE completed_novels 
+                        SET title = ?, summary = ?, thumbnail_text = ?, 
+                            full_content = ?, word_count = ?
+                        WHERE session_id = ?
+                    ''', (title, summary, thumbnail_text, final_novel, word_count, session_id))
+                else:
+                    # Insert new
+                    cursor.execute('''
+                        INSERT INTO completed_novels 
+                        (session_id, title, author_query, language, summary, 
+                         thumbnail_text, full_content, word_count)
+                        VALUES (?, ?, ?, ?, ?, ?, ?, ?)
+                    ''', (session_id, title, session['user_query'], session['language'],
+                          summary, thumbnail_text, final_novel, word_count))
+                
+                conn.commit()
+                logger.info(f"Saved novel '{title}' to gallery")
+        except Exception as e:
+            logger.error(f"Error saving completed novel: {str(e)}")
+    
+    @staticmethod
+    def get_gallery_novels(language: Optional[str] = None, limit: int = 50) -> List[Dict]:
+        """Get novels for gallery display"""
+        with NovelDatabase.get_db() as conn:
+            cursor = conn.cursor()
+            
+            if language:
+                cursor.execute('''
+                    SELECT novel_id, session_id, title, author_query, language,
+                           genre, summary, thumbnail_text, word_count, 
+                           created_at, downloads
+                    FROM completed_novels 
+                    WHERE language = ?
+                    ORDER BY created_at DESC 
+                    LIMIT ?
+                ''', (language, limit))
+            else:
+                cursor.execute('''
+                    SELECT novel_id, session_id, title, author_query, language,
+                           genre, summary, thumbnail_text, word_count, 
+                           created_at, downloads
+                    FROM completed_novels 
+                    ORDER BY created_at DESC 
+                    LIMIT ?
+                ''', (limit,))
+            
+            return cursor.fetchall()
+    
+    @staticmethod
+    def get_novel_content(novel_id: int) -> Optional[Dict]:
+        """Get full novel content"""
+        with NovelDatabase.get_db() as conn:
+            cursor = conn.cursor()
+            cursor.execute('''
+                SELECT * FROM completed_novels 
+                WHERE novel_id = ?
+            ''', (novel_id,))
+            return cursor.fetchone()
+    
+    @staticmethod
+    def increment_download_count(novel_id: int):
+        """Increment download counter"""
+        with NovelDatabase.get_db() as conn:
+            cursor = conn.cursor()
+            cursor.execute('''
+                UPDATE completed_novels 
+                SET downloads = downloads + 1 
+                WHERE novel_id = ?
+            ''', (novel_id,))
+            conn.commit()
+    
     @staticmethod
     def get_active_sessions() -> List[Dict]:
         """Get all active sessions"""
@@ -235,7 +369,7 @@ class NovelWritingSystem:
         
         # Session management
         self.current_session_id = None
-        self.auto_scroll = False  # Auto-scroll control
+        self.auto_scroll = False  # Auto-scroll control (default: OFF)
         
         # 소설 작성 진행 상태
         self.novel_state = {
@@ -1568,6 +1702,9 @@ Last page content from Writer {writer_num}..."""
             # Save final novel to DB
             NovelDatabase.update_final_novel(self.current_session_id, final_novel)
             
+            # Save to gallery
+            NovelDatabase.save_completed_novel(self.current_session_id, final_novel)
+            
             # Final yield
             yield final_novel, stages
             
@@ -1663,7 +1800,7 @@ Last page content from Writer {writer_num}..."""
         return ""
 
 # Gradio Interface Functions
-def process_query(query: str, language: str, session_id: str = None) -> Generator[Tuple[str, str, str], None, None]:
+def process_query(query: str, language: str, session_id: str = None, auto_scroll: bool = False) -> Generator[Tuple[str, str, str], None, None]:
     """Process query and yield updates"""
     if not query.strip() and not session_id:
         if language == "Korean":
@@ -1673,11 +1810,12 @@ def process_query(query: str, language: str, session_id: str = None) -> Generato
         return
     
     system = NovelWritingSystem()
+    system.auto_scroll = auto_scroll  # Set auto-scroll preference
     
     try:
         for final_novel, stages in system.process_novel_stream(query, language, session_id):
             # Format stages for display with scroll control
-            stages_html = format_stages_html(stages, language, system.auto_scroll)
+            stages_html = format_stages_html(stages, language, auto_scroll)
             
             status = "🔄 Processing..." if not final_novel else "✅ Complete!"
             
@@ -1690,11 +1828,190 @@ def process_query(query: str, language: str, session_id: str = None) -> Generato
         else:
             yield "", "", f"❌ Error occurred: {str(e)}"
 
+def create_novel_thumbnail(novel_data: Dict) -> str:
+    """Create HTML thumbnail for a novel"""
+    novel_id = novel_data['novel_id']
+    title = novel_data['title']
+    summary = novel_data['summary'] or novel_data['thumbnail_text'][:150] + "..."
+    word_count = novel_data['word_count']
+    created = datetime.fromisoformat(novel_data['created_at'])
+    date_str = created.strftime("%Y-%m-%d")
+    downloads = novel_data['downloads']
+    language = novel_data['language']
+    
+    # Language-specific labels
+    if language == "Korean":
+        word_label = "단어"
+        download_label = "다운로드"
+    else:
+        word_label = "words"
+        download_label = "downloads"
+    
+    # Create color based on novel_id for variety
+    colors = ['#667eea', '#f59e0b', '#10b981', '#ef4444', '#3b82f6', '#8b5cf6', '#ec4899', '#14b8a6']
+    color = colors[novel_id % len(colors)]
+    
+    return f'''
+    <div class="novel-card" data-novel-id="{novel_id}">
+        <div class="novel-card-header" style="background: linear-gradient(135deg, {color}, {color}dd);">
+            <h3>{title}</h3>
+        </div>
+        <div class="novel-card-body">
+            <p class="novel-summary">{summary}</p>
+            <div class="novel-meta">
+                <span>📅 {date_str}</span>
+                <span>📝 {word_count:,} {word_label}</span>
+                <span>⬇️ {downloads} {download_label}</span>
+            </div>
+        </div>
+        <div class="novel-card-actions">
+            <button class="view-btn" onclick="viewNovel({novel_id})">👁️ View</button>
+            <button class="download-btn" onclick="downloadNovel({novel_id})">📥 Download</button>
+        </div>
+    </div>
+    '''
+
+def get_gallery_html(language: Optional[str] = None) -> str:
+    """Get gallery HTML with all novels"""
+    try:
+        novels = NovelDatabase.get_gallery_novels(language)
+        
+        if not novels:
+            if language == "Korean":
+                return '<div class="gallery-empty">아직 완성된 소설이 없습니다.</div>'
+            else:
+                return '<div class="gallery-empty">No completed novels yet.</div>'
+        
+        gallery_html = '<div class="novel-gallery">'
+        for novel in novels:
+            gallery_html += create_novel_thumbnail(novel)
+        gallery_html += '</div>'
+        
+        # Add JavaScript for interactions
+        gallery_html += '''
+        <script>
+        function viewNovel(novelId) {
+            // Trigger view event
+            const event = new CustomEvent('viewNovel', { detail: { novelId: novelId } });
+            window.dispatchEvent(event);
+        }
+        
+        function downloadNovel(novelId) {
+            // Trigger download event
+            const event = new CustomEvent('downloadNovel', { detail: { novelId: novelId } });
+            window.dispatchEvent(event);
+        }
+        </script>
+        '''
+        
+        return gallery_html
+    except Exception as e:
+        logger.error(f"Error getting gallery HTML: {str(e)}")
+        return '<div class="gallery-empty">Error loading gallery.</div>'
+
+def view_novel(novel_id: int, language: str) -> str:
+    """View full novel content"""
+    if not novel_id:
+        return ""
+    
+    novel = NovelDatabase.get_novel_content(novel_id)
+    if not novel:
+        if language == "Korean":
+            return "소설을 찾을 수 없습니다."
+        else:
+            return "Novel not found."
+    
+    # Format novel for display
+    content = novel['full_content']
+    
+    # Add view header
+    header = f"""
+    <div class="novel-view-header">
+        <h1>{novel['title']}</h1>
+        <div class="novel-view-meta">
+            <span>📅 {novel['created_at']}</span>
+            <span>📝 {novel['word_count']:,} words</span>
+            <span>🌐 {novel['language']}</span>
+        </div>
+        <div class="novel-view-query">
+            <strong>Original prompt:</strong> {novel['author_query']}
+        </div>
+    </div>
+    <hr>
+    """
+    
+    return header + content
+
+def download_novel_from_gallery(novel_id: int, format: str) -> Optional[str]:
+    """Download novel from gallery"""
+    if not novel_id:
+        return None
+    
+    novel = NovelDatabase.get_novel_content(novel_id)
+    if not novel:
+        return None
+    
+    # Increment download count
+    NovelDatabase.increment_download_count(novel_id)
+    
+    # Create file
+    content = novel['full_content']
+    title = re.sub(r'[^\w\s-]', '', novel['title']).strip()[:50]
+    timestamp = datetime.now().strftime("%Y%m%d_%H%M%S")
+    
+    if format == "DOCX" and DOCX_AVAILABLE:
+        # Create DOCX
+        doc = Document()
+        
+        # Add title
+        title_para = doc.add_heading(novel['title'], 0)
+        title_para.alignment = WD_ALIGN_PARAGRAPH.CENTER
+        
+        # Add metadata
+        doc.add_paragraph(f"Created: {novel['created_at']}")
+        doc.add_paragraph(f"Original prompt: {novel['author_query']}")
+        doc.add_paragraph("")
+        
+        # Parse and add content
+        lines = content.split('\n')
+        for line in lines:
+            if line.startswith('#'):
+                level = len(line.split()[0])
+                text = line.lstrip('#').strip()
+                if text:  # Only add non-empty headings
+                    doc.add_heading(text, min(level, 3))
+            elif line.strip():
+                doc.add_paragraph(line)
+        
+        # Save
+        temp_dir = tempfile.gettempdir()
+        filename = f"{title}_{timestamp}.docx"
+        filepath = os.path.join(temp_dir, filename)
+        doc.save(filepath)
+        
+        return filepath
+    else:
+        # TXT format
+        temp_dir = tempfile.gettempdir()
+        filename = f"{title}_{timestamp}.txt"
+        filepath = os.path.join(temp_dir, filename)
+        
+        with open(filepath, 'w', encoding='utf-8') as f:
+            f.write(f"Title: {novel['title']}\n")
+            f.write(f"Created: {novel['created_at']}\n")
+            f.write(f"Original prompt: {novel['author_query']}\n")
+            f.write("\n" + "="*50 + "\n\n")
+            f.write(content)
+        
+        return filepath
+
 def format_stages_html(stages: List[Dict[str, str]], language: str, auto_scroll: bool = False) -> str:
     """Format stages into HTML with scroll control"""
-    scroll_behavior = "auto" if auto_scroll else "manual"
     
-    html = f'<div class="stages-container" data-scroll="{scroll_behavior}">'
+    # Generate unique ID for this container
+    container_id = f"stages-container-{int(time.time() * 1000)}"
+    
+    html = f'<div id="{container_id}" class="stages-container" data-scroll="{"auto" if auto_scroll else "manual"}">'
     
     for idx, stage in enumerate(stages):
         status_icon = "✅" if stage.get("status") == "complete" else ("⏳" if stage.get("status") == "active" else "❌")
@@ -1715,28 +2032,153 @@ def format_stages_html(stages: List[Dict[str, str]], language: str, auto_scroll:
     
     html += '</div>'
     
-    # Add JavaScript for scroll control
-    if not auto_scroll:
-        html += '''
-        <script>
-        // Prevent auto-scrolling when content updates
-        const container = document.querySelector('.stages-container[data-scroll="manual"]');
-        if (container) {
-            let userScrolled = false;
-            container.addEventListener('scroll', () => {
-                userScrolled = true;
-            });
+    # Add powerful JavaScript for scroll control
+    html += f'''
+    <script>
+    (function() {{
+        const containerId = "{container_id}";
+        const container = document.getElementById(containerId);
+        
+        if (!container) return;
+        
+        // Check if this is manual scroll mode
+        const isManualMode = container.getAttribute('data-scroll') === 'manual';
+        
+        // Get or create scroll controller
+        if (!window.novelScrollController) {{
+            window.novelScrollController = {{
+                savedPosition: 0,
+                userHasScrolled: false,
+                isLocked: false
+            }};
+        }}
+        
+        const scrollController = window.novelScrollController;
+        
+        if (isManualMode) {{
+            // Restore saved position immediately
+            if (scrollController.userHasScrolled || scrollController.isLocked) {{
+                container.scrollTop = scrollController.savedPosition;
+            }}
             
-            // Override scroll behavior on content update
-            const observer = new MutationObserver(() => {
-                if (!userScrolled) {
-                    // Don't auto-scroll
-                }
-            });
-            observer.observe(container, { childList: true, subtree: true });
-        }
-        </script>
-        '''
+            // Save position on ANY scroll event
+            let saveTimeout;
+            const saveScrollPosition = () => {{
+                clearTimeout(saveTimeout);
+                saveTimeout = setTimeout(() => {{
+                    scrollController.savedPosition = container.scrollTop;
+                    scrollController.userHasScrolled = true;
+                }}, 10);
+            }};
+            
+            container.addEventListener('scroll', saveScrollPosition, {{ passive: true }});
+            
+            // Aggressively maintain scroll position during updates
+            const lockScrollPosition = () => {{
+                if (scrollController.userHasScrolled || scrollController.isLocked) {{
+                    container.scrollTop = scrollController.savedPosition;
+                }}
+            }};
+            
+            // Multiple strategies to maintain scroll position
+            // 1. MutationObserver
+            const observer = new MutationObserver((mutations) => {{
+                const shouldLock = scrollController.userHasScrolled || scrollController.isLocked;
+                if (shouldLock) {{
+                    // Capture position before changes
+                    const beforeScroll = container.scrollTop;
+                    scrollController.savedPosition = beforeScroll;
+                    
+                    // Restore after DOM settles
+                    requestAnimationFrame(() => {{
+                        container.scrollTop = scrollController.savedPosition;
+                        
+                        // Double-check after a short delay
+                        setTimeout(() => {{
+                            if (container.scrollTop !== scrollController.savedPosition) {{
+                                container.scrollTop = scrollController.savedPosition;
+                            }}
+                        }}, 0);
+                    }});
+                }}
+            }});
+            
+            observer.observe(container, {{
+                childList: true,
+                subtree: true,
+                characterData: true
+            }});
+            
+            // 2. Periodic position check
+            let checkInterval = setInterval(() => {{
+                if ((scrollController.userHasScrolled || scrollController.isLocked) && 
+                    container.scrollTop !== scrollController.savedPosition) {{
+                    const diff = Math.abs(container.scrollTop - scrollController.savedPosition);
+                    // Only restore if difference is significant (not user scrolling)
+                    if (diff > 100) {{
+                        container.scrollTop = scrollController.savedPosition;
+                    }}
+                }}
+            }}, 100);
+            
+            // 3. Intersection Observer for visible elements
+            const visibleStages = new Set();
+            const intersectionObserver = new IntersectionObserver((entries) => {{
+                entries.forEach(entry => {{
+                    if (entry.isIntersecting) {{
+                        visibleStages.add(entry.target.id);
+                    }} else {{
+                        visibleStages.delete(entry.target.id);
+                    }}
+                }});
+                
+                // Save first visible stage
+                if (visibleStages.size > 0) {{
+                    scrollController.firstVisibleStage = Array.from(visibleStages)[0];
+                }}
+            }}, {{ threshold: 0.1 }});
+            
+            // Observe all stage sections
+            container.querySelectorAll('.stage-section').forEach(stage => {{
+                intersectionObserver.observe(stage);
+            }});
+            
+            // Clean up on container removal
+            container.addEventListener('DOMNodeRemoved', () => {{
+                clearInterval(checkInterval);
+                observer.disconnect();
+                intersectionObserver.disconnect();
+            }});
+            
+        }} else {{
+            // Auto-scroll mode
+            const scrollToBottom = () => {{
+                requestAnimationFrame(() => {{
+                    container.scrollTop = container.scrollHeight;
+                }});
+            }};
+            
+            const observer = new MutationObserver(scrollToBottom);
+            observer.observe(container, {{ childList: true, subtree: true }});
+            
+            scrollToBottom();
+        }}
+        
+        // Listen for lock command
+        window.addEventListener('lockNovelScroll', () => {{
+            scrollController.isLocked = true;
+            scrollController.savedPosition = container.scrollTop;
+        }});
+        
+        // Listen for reset command
+        window.addEventListener('novelScrollReset', () => {{
+            scrollController.savedPosition = 0;
+            scrollController.userHasScrolled = false;
+            scrollController.isLocked = false;
+        }});
+    }})();
+    </script>
+    '''
     
     return html
 
@@ -1758,13 +2200,13 @@ def get_active_sessions(language: str) -> List[Tuple[str, str, str]]:
         logger.error(f"Error getting active sessions: {str(e)}")
         return []
 
-def resume_session(session_id: str, language: str) -> Generator[Tuple[str, str, str], None, None]:
+def resume_session(session_id: str, language: str, auto_scroll: bool = False) -> Generator[Tuple[str, str, str], None, None]:
     """Resume an existing session"""
     if not session_id:
         return
     
     # Process with existing session ID
-    yield from process_query("", language, session_id)
+    yield from process_query("", language, session_id, auto_scroll)
 
 def toggle_auto_scroll(current_state: bool) -> bool:
     """Toggle auto-scroll state"""
@@ -1809,7 +2251,7 @@ def download_novel(novel_text: str, format: str, language: str) -> str:
         
         return filepath
 
-# Custom CSS with improved scroll handling
+# Custom CSS with improved scroll handling and gallery styles
 custom_css = """
 .gradio-container {
     background: linear-gradient(135deg, #1e3c72, #2a5298);
@@ -1819,17 +2261,28 @@ custom_css = """
 .stages-container {
     max-height: 600px;
     overflow-y: auto;
+    overflow-x: hidden;
     padding: 20px;
     background-color: rgba(255, 255, 255, 0.05);
     border-radius: 12px;
     backdrop-filter: blur(10px);
-    scroll-behavior: smooth;
     position: relative;
 }
 
-/* Disable auto-scroll when user has scrolled */
+/* Disable smooth scrolling in manual mode to prevent unwanted behavior */
 .stages-container[data-scroll="manual"] {
-    scroll-behavior: auto;
+    scroll-behavior: auto !important;
+}
+
+/* Auto-scroll mode */
+.stages-container[data-scroll="auto"] {
+    scroll-behavior: smooth;
+}
+
+/* Lock scroll position when user has scrolled */
+.stages-container.user-scrolled {
+    overflow-y: auto !important;
+    overscroll-behavior-y: contain;
 }
 
 .stage-section {
@@ -1848,6 +2301,7 @@ custom_css = """
     align-items: center;
     gap: 10px;
     color: white;
+    user-select: none;
 }
 
 .stage-header:hover {
@@ -1862,18 +2316,28 @@ custom_css = """
     padding: 15px;
     max-height: 400px;
     overflow-y: auto;
+    overflow-x: hidden;
     background-color: rgba(0, 0, 0, 0.3);
     border-radius: 8px;
     margin-top: 10px;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
 }
 
 .stage-content pre {
     white-space: pre-wrap;
     word-wrap: break-word;
+    overflow-wrap: break-word;
     color: #e0e0e0;
     font-family: 'Courier New', monospace;
     line-height: 1.6;
     margin: 0;
+    max-width: 100%;
+}
+
+/* Prevent layout shift during updates */
+.stages-container > * {
+    transition: none !important;
 }
 
 #novel-output {
@@ -1919,17 +2383,171 @@ custom_css = """
     color: white;
 }
 
-/* Scroll position indicator */
-.scroll-indicator {
-    position: absolute;
-    right: 5px;
-    top: 5px;
-    background: rgba(255, 255, 255, 0.2);
-    padding: 5px 10px;
-    border-radius: 15px;
+/* Scroll control indicator */
+.scroll-control-info {
+    background-color: rgba(255, 255, 255, 0.2);
+    color: white;
+    padding: 8px 12px;
+    border-radius: 4px;
+    margin-bottom: 10px;
+    text-align: center;
+    font-size: 0.9em;
+}
+
+/* Override Gradio's default scroll behavior */
+.generating .stages-container[data-scroll="manual"] {
+    overflow-y: auto !important;
+}
+
+/* Gallery Styles */
+.novel-gallery {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 20px;
+    padding: 20px;
+    max-height: 70vh;
+    overflow-y: auto;
+}
+
+.novel-card {
+    background: rgba(255, 255, 255, 0.95);
+    border-radius: 12px;
+    overflow: hidden;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    cursor: pointer;
+}
+
+.novel-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
+}
+
+.novel-card-header {
+    padding: 15px;
+    color: white;
+    font-weight: bold;
+}
+
+.novel-card-header h3 {
+    margin: 0;
+    font-size: 1.2em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.novel-card-body {
+    padding: 15px;
+}
+
+.novel-summary {
+    color: #333;
+    font-size: 0.9em;
+    line-height: 1.5;
+    height: 80px;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 4;
+    -webkit-box-orient: vertical;
+}
+
+.novel-meta {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 10px;
     font-size: 0.8em;
+    color: #666;
+}
+
+.novel-card-actions {
+    display: flex;
+    gap: 10px;
+    padding: 15px;
+    background-color: rgba(0, 0, 0, 0.05);
+}
+
+.novel-card-actions button {
+    flex: 1;
+    padding: 8px 16px;
+    border: none;
+    border-radius: 6px;
+    cursor: pointer;
+    font-weight: bold;
+    transition: background-color 0.3s ease;
+}
+
+.view-btn {
+    background-color: #3b82f6;
+    color: white;
+}
+
+.view-btn:hover {
+    background-color: #2563eb;
+}
+
+.download-btn {
+    background-color: #10b981;
     color: white;
 }
+
+.download-btn:hover {
+    background-color: #059669;
+}
+
+.gallery-empty {
+    text-align: center;
+    padding: 50px;
+    color: #666;
+    font-size: 1.2em;
+}
+
+/* Novel View Styles */
+.novel-view-header {
+    background-color: rgba(255, 255, 255, 0.9);
+    padding: 20px;
+    border-radius: 8px;
+    margin-bottom: 20px;
+}
+
+.novel-view-header h1 {
+    margin: 0 0 10px 0;
+    color: #1e3c72;
+}
+
+.novel-view-meta {
+    display: flex;
+    gap: 20px;
+    color: #666;
+    font-size: 0.9em;
+    margin-bottom: 10px;
+}
+
+.novel-view-query {
+    color: #555;
+    font-style: italic;
+    padding: 10px;
+    background-color: rgba(0, 0, 0, 0.05);
+    border-radius: 4px;
+}
+
+/* Gallery Filter Styles */
+.gallery-controls {
+    background-color: rgba(255, 255, 255, 0.9);
+    padding: 15px;
+    border-radius: 8px;
+    margin-bottom: 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.gallery-stats {
+    display: flex;
+    gap: 20px;
+    font-size: 0.9em;
+    color: #666;
+}
 """
 
 # Create Gradio Interface
@@ -1952,7 +2570,7 @@ def create_interface():
         """)
         
         # State management
-        auto_scroll_state = gr.State(False)
+        auto_scroll_state = gr.State(False)  # Default to manual scroll
         current_session_id = gr.State(None)
         
         with gr.Row():
@@ -1992,11 +2610,22 @@ def create_interface():
                             refresh_btn = gr.Button("🔄 Refresh / 새로고침", scale=1)
                             resume_btn = gr.Button("▶️ Resume / 재개", variant="secondary", scale=1)
                     
-                    # Scroll control
-                    auto_scroll_checkbox = gr.Checkbox(
-                        label="Auto-scroll / 자동 스크롤",
-                        value=False
-                    )
+                    # Scroll control with lock option
+                    with gr.Row():
+                        auto_scroll_checkbox = gr.Checkbox(
+                            label="Auto-scroll / 자동 스크롤",
+                            value=False
+                        )
+                        lock_scroll_btn = gr.Button("🔒 Lock Scroll Position / 스크롤 위치 고정", scale=2)
+                    
+                    gr.HTML("""
+                    <div class="scroll-control-info">
+                        <strong>Scroll Control:</strong><br>
+                        - Uncheck "Auto-scroll" to manually control scrolling<br>
+                        - Click "Lock Scroll Position" to force-lock current position<br>
+                        - Scroll will be preserved even during updates
+                    </div>
+                    """)
                     
                     gr.HTML("""
                     <div style="margin-top: 20px; padding: 15px; background: rgba(255,255,255,0.1); border-radius: 8px; color: white;">
@@ -2040,10 +2669,49 @@ def create_interface():
                         label="Downloaded File / 다운로드된 파일",
                         visible=False
                     )
+            
+            with gr.Tab("🎨 Gallery / 갤러리"):
+                # Gallery controls
+                with gr.Row():
+                    gallery_language = gr.Radio(
+                        choices=["All", "English", "Korean"],
+                        value="All",
+                        label="Filter by Language / 언어별 필터"
+                    )
+                    refresh_gallery_btn = gr.Button("🔄 Refresh Gallery / 갤러리 새로고침")
+                
+                # Gallery display
+                gallery_display = gr.HTML(
+                    value="<div class='gallery-empty'>Loading gallery...</div>",
+                    elem_id="novel-gallery-display"
+                )
+                
+                # Novel viewer (hidden by default)
+                with gr.Group(visible=False) as novel_viewer:
+                    novel_view_content = gr.Markdown(
+                        value="",
+                        elem_id="novel-view-content"
+                    )
+                    
+                    with gr.Row():
+                        close_viewer_btn = gr.Button("❌ Close / 닫기")
+                        download_viewed_btn = gr.Button("📥 Download This Novel / 이 소설 다운로드")
+                    
+                    download_viewed_file = gr.File(
+                        label="Downloaded File",
+                        visible=False
+                    )
+                
+                # Hidden state for selected novel
+                selected_novel_id = gr.State(None)
         
         # Hidden state for novel text
         novel_text_state = gr.State("")
         
+        # Hidden HTML components for JavaScript injection
+        js_injector = gr.HTML(value="", visible=False)
+        gallery_js = gr.HTML(value="", visible=False)
+        
         # Examples
         with gr.Row():
             gr.Examples(
@@ -2059,6 +2727,14 @@ def create_interface():
                 label="💡 Example Themes / 예제 주제"
             )
         
+        # Footer
+        gr.HTML("""
+        <div style="text-align: center; padding: 20px; color: #ccc;">
+            <p>All generated novels are automatically saved to the gallery for future reference.</p>
+            <p>모든 생성된 소설은 갤러리에 자동으로 저장되어 나중에 열람할 수 있습니다.</p>
+        </div>
+        """)
+        
         # Event handlers
         def update_novel_state(process, novel, status):
             return process, novel, status, novel
@@ -2071,9 +2747,60 @@ def create_interface():
                 logger.error(f"Error refreshing sessions: {str(e)}")
                 return gr.update(choices=[])
         
+        def toggle_scroll_mode(checked):
+            """Toggle scroll mode and reset tracking"""
+            # Inject JavaScript to reset scroll tracking
+            reset_script = """
+            <script>
+            window.dispatchEvent(new Event('novelScrollReset'));
+            </script>
+            """
+            return checked, gr.update(value=reset_script)
+        
+        # Gallery interactions
+        def refresh_gallery(language_filter):
+            """Refresh gallery display"""
+            lang = None if language_filter == "All" else language_filter
+            return get_gallery_html(lang)
+        
+        # Gallery-specific handlers
+        def view_novel_handler(novel_id):
+            """Handle viewing a novel from gallery"""
+            if not novel_id:
+                return gr.update(visible=False), "", None
+            
+            try:
+                novel_id = int(novel_id)
+                content = view_novel(novel_id, language_select.value)
+                return gr.update(visible=True), content, novel_id
+            except Exception as e:
+                logger.error(f"Error viewing novel: {str(e)}")
+                return gr.update(visible=False), "", None
+        
+        def close_viewer():
+            """Close novel viewer"""
+            return gr.update(visible=False), ""
+        
+        def download_viewed_novel(novel_id, format_type):
+            """Download the currently viewed novel"""
+            if not novel_id:
+                return gr.update(visible=False)
+            
+            try:
+                file_path = download_novel_from_gallery(novel_id, format_type)
+                if file_path:
+                    return gr.update(value=file_path, visible=True)
+            except Exception as e:
+                logger.error(f"Error downloading novel: {str(e)}")
+            
+            return gr.update(visible=False)
+        
+        # Add HTML component for JavaScript injection
+        js_injector = gr.HTML(value="", visible=False)
+        
         submit_btn.click(
             fn=process_query,
-            inputs=[query_input, language_select, current_session_id],
+            inputs=[query_input, language_select, current_session_id, auto_scroll_checkbox],
             outputs=[process_display, novel_output, status_text]
         ).then(
             fn=update_novel_state,
@@ -2087,7 +2814,7 @@ def create_interface():
             outputs=[current_session_id]
         ).then(
             fn=resume_session,
-            inputs=[current_session_id, language_select],
+            inputs=[current_session_id, language_select, auto_scroll_checkbox],
             outputs=[process_display, novel_output, status_text]
         )
         
@@ -2097,8 +2824,8 @@ def create_interface():
         )
         
         clear_btn.click(
-            fn=lambda: ("", "", "🔄 Ready", "", None),
-            outputs=[process_display, novel_output, status_text, novel_text_state, current_session_id]
+            fn=lambda: ("", "", "🔄 Ready", "", None, '<script>window.dispatchEvent(new Event("novelScrollReset"));</script>'),
+            outputs=[process_display, novel_output, status_text, novel_text_state, current_session_id, js_injector]
         )
         
         auto_scroll_checkbox.change(
@@ -2107,6 +2834,64 @@ def create_interface():
             outputs=[auto_scroll_state]
         )
         
+        def lock_scroll_position():
+            """Force lock the current scroll position"""
+            lock_script = """
+            <div id="scroll-lock-script">
+            <script>
+            (function() {
+                // Trigger lock event
+                window.dispatchEvent(new Event('lockNovelScroll'));
+                
+                // Visual feedback
+                const containers = document.querySelectorAll('.stages-container');
+                containers.forEach(container => {
+                    // Flash border to indicate lock
+                    container.style.border = '3px solid #4CAF50';
+                    container.style.boxShadow = '0 0 10px rgba(76, 175, 80, 0.5)';
+                    
+                    setTimeout(() => {
+                        container.style.border = '';
+                        container.style.boxShadow = '';
+                    }, 1500);
+                });
+                
+                // Show confirmation message
+                const msg = document.createElement('div');
+                msg.innerHTML = '<strong>🔒 Scroll Position Locked!</strong><br>The view will stay at current position';
+                msg.style.cssText = `
+                    position: fixed; 
+                    top: 50%; 
+                    left: 50%; 
+                    transform: translate(-50%, -50%);
+                    background: #4CAF50; 
+                    color: white; 
+                    padding: 20px 30px; 
+                    border-radius: 8px; 
+                    z-index: 9999;
+                    font-size: 16px;
+                    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
+                    text-align: center;
+                `;
+                document.body.appendChild(msg);
+                
+                // Fade out animation
+                msg.style.transition = 'opacity 0.5s ease';
+                setTimeout(() => {
+                    msg.style.opacity = '0';
+                    setTimeout(() => msg.remove(), 500);
+                }, 2000);
+            })();
+            </script>
+            </div>
+            """
+            return gr.update(value=lock_script)
+        
+        lock_scroll_btn.click(
+            fn=lock_scroll_position,
+            outputs=[js_injector]
+        )
+        
         def handle_download(novel_text, format_type, language):
             if not novel_text:
                 return gr.update(visible=False)
@@ -2123,11 +2908,119 @@ def create_interface():
             outputs=[download_file]
         )
         
-        # Load sessions on startup
+        # Gallery-specific handlers
+        def view_novel_handler(novel_id):
+            """Handle viewing a novel from gallery"""
+            if not novel_id:
+                return gr.update(visible=False), "", None
+            
+            try:
+                novel_id = int(novel_id)
+                content = view_novel(novel_id, language_select.value)
+                return gr.update(visible=True), content, novel_id
+            except:
+                return gr.update(visible=False), "", None
+        
+        def close_viewer():
+            """Close novel viewer"""
+            return gr.update(visible=False), ""
+        
+        def download_viewed_novel(novel_id, format_type):
+            """Download the currently viewed novel"""
+            if not novel_id:
+                return gr.update(visible=False)
+            
+            try:
+                file_path = download_novel_from_gallery(novel_id, format_type)
+                if file_path:
+                    return gr.update(value=file_path, visible=True)
+            except Exception as e:
+                logger.error(f"Error downloading novel: {str(e)}")
+            
+            return gr.update(visible=False)
+        
+        # Gallery event handlers
+        refresh_gallery_btn.click(
+            fn=refresh_gallery,
+            inputs=[gallery_language],
+            outputs=[gallery_display]
+        )
+        
+        gallery_language.change(
+            fn=refresh_gallery,
+            inputs=[gallery_language],
+            outputs=[gallery_display]
+        )
+        
+        # Novel viewer interactions
+        selected_novel_id.change(
+            fn=view_novel_handler,
+            inputs=[selected_novel_id],
+            outputs=[novel_viewer, novel_view_content, selected_novel_id]
+        )
+        
+        close_viewer_btn.click(
+            fn=close_viewer,
+            outputs=[novel_viewer, novel_view_content]
+        )
+        
+        download_viewed_btn.click(
+            fn=download_viewed_novel,
+            inputs=[selected_novel_id, format_select],
+            outputs=[download_viewed_file]
+        )
+        
+        # Add JavaScript for gallery interactions
+        interface.load(
+            fn=lambda: gr.update(value="""
+            <script>
+            // Listen for view novel events
+            window.addEventListener('viewNovel', function(e) {
+                const novelId = e.detail.novelId;
+                // Find the hidden input for selected_novel_id and update it
+                const inputs = document.querySelectorAll('input[type="hidden"]');
+                for (let input of inputs) {
+                    if (input.value === '' || !isNaN(input.value)) {
+                        input.value = novelId;
+                        input.dispatchEvent(new Event('input', { bubbles: true }));
+                        break;
+                    }
+                }
+            });
+            
+            // Listen for download novel events
+            window.addEventListener('downloadNovel', function(e) {
+                const novelId = e.detail.novelId;
+                // Update selected novel and trigger download
+                const inputs = document.querySelectorAll('input[type="hidden"]');
+                for (let input of inputs) {
+                    if (input.value === '' || !isNaN(input.value)) {
+                        input.value = novelId;
+                        input.dispatchEvent(new Event('input', { bubbles: true }));
+                        setTimeout(() => {
+                            // Click download button
+                            const downloadBtn = document.querySelector('#download-viewed-btn');
+                            if (downloadBtn) downloadBtn.click();
+                        }, 100);
+                        break;
+                    }
+                }
+            });
+            </script>
+            """),
+            outputs=[gallery_js]
+        )
+        
+        # Load sessions and gallery on startup
         interface.load(
             fn=refresh_sessions,
             outputs=[session_dropdown]
         )
+        
+        interface.load(
+            fn=lambda: get_gallery_html(None),
+            outputs=[gallery_display]
+        )
     
     return interface