Update app.py

app.py

@@ -5,7 +5,9 @@ import base64
 from pathlib import Path
 import os
 import shutil
-import time
+import io
+from PIL import Image
+import fitz  # PyMuPDF
 
 # Set page configuration
 st.set_page_config(page_title="LaTeX Editor & Compiler", page_icon="📝", layout="wide")
@@ -56,24 +58,32 @@ def get_download_link(pdf_data, filename="document.pdf"):
     b64_pdf = base64.b64encode(pdf_data).decode()
     return f'<a href="data:application/pdf;base64,{b64_pdf}" download="{filename}" class="download-button">Download PDF</a>'
 
-# Convert PDF to images for preview (safer than embedding PDF)
-def pdf_preview(pdf_data):
-    # Save PDF to a temporary file
+# Convert PDF to image for preview
+def render_pdf_preview(pdf_data):
     if not pdf_data:
-        return st.error("No PDF data to preview")
+        return None
     
-    st.warning("PDF preview is not available due to browser security restrictions.")
-    st.info("Please download the PDF using the button below to view it.")
-    
-    # Provide download button with more prominent styling
-    st.markdown(
-        f"""
-        <div style="text-align: center; margin: 30px 0;">
-            {get_download_link(pdf_data)}
-        </div>
-        """, 
-        unsafe_allow_html=True
-    )
+    try:
+        # Create a file-like object from the PDF data
+        pdf_stream = io.BytesIO(pdf_data)
+        
+        # Open PDF with PyMuPDF (fitz)
+        pdf_document = fitz.open(stream=pdf_stream, filetype="pdf")
+        
+        # Render pages as images
+        images = []
+        for page_num in range(min(3, len(pdf_document))):  # Preview first 3 pages max
+            page = pdf_document.load_page(page_num)
+            pix = page.get_pixmap(matrix=fitz.Matrix(2, 2))  # Zoom factor 2 for better resolution
+            img_data = pix.tobytes("png")
+            img = Image.open(io.BytesIO(img_data))
+            images.append(img)
+        
+        pdf_document.close()
+        return images
+    except Exception as e:
+        st.error(f"Error rendering PDF preview: {str(e)}")
+        return None
 
 # LaTeX package reference
 latex_packages = {
@@ -256,15 +266,23 @@ Your conclusion here.
 \end{document}
 """
 
-# Add custom CSS
+# Add custom CSS with improved sidebar styling
 st.markdown("""
 <style>
+    /* Editor styling */
     .editor-container {
         border: 1px solid #ccc;
         border-radius: 5px;
         padding: 10px;
         background-color: #f8f9fa;
     }
+    .stTextArea textarea {
+        font-family: 'Courier New', Courier, monospace !important;
+        font-size: 14px !important;
+        line-height: 1.5 !important;
+    }
+    
+    /* Download button styling */
     .download-button {
         display: inline-block;
         padding: 0.7em 1.4em;
@@ -283,56 +301,91 @@ st.markdown("""
         background-color: #45a049;
         box-shadow: 0 4px 8px rgba(0,0,0,0.3);
     }
-    .stTextArea textarea {
-        font-family: 'Courier New', Courier, monospace !important;
-        font-size: 14px !important;
-        line-height: 1.5 !important;
+    
+    /* Sidebar styling */
+    .sidebar .sidebar-content {
+        background-color: #f0f2f6;
     }
+    
+    /* LaTeX command styling */
     .latex-command {
-        background-color: #f1f1f1;
-        padding: 2px 4px;
-        border-radius: 3px;
-        font-family: monospace;
+        background-color: #e9ecef;
+        padding: 4px 8px;
+        border-radius: 4px;
+        font-family: 'Courier New', Courier, monospace;
+        color: #1e1e1e;
         cursor: pointer;
+        display: inline-block;
+        margin-bottom: 4px;
+        border: 1px solid #ced4da;
     }
-    .reference-tabs .stTabs {
-        background-color: #f5f5f5;
-        border-radius: 5px;
-        padding: 10px;
+    .latex-command:hover {
+        background-color: #d0d7de;
+        border-color: #adb5bd;
+    }
+    
+    /* Command description styling */
+    .command-description {
+        color: #495057;
+        padding-left: 8px;
+        display: inline-block;
+    }
+    
+    /* Category title styling */
+    .category-title {
+        font-weight: bold;
+        color: #212529;
+        margin-top: 15px;
+        margin-bottom: 8px;
+    }
+    
+    /* Expander styling */
+    .streamlit-expanderHeader {
+        font-weight: bold;
+        color: #212529;
+        background-color: #e9ecef;
+        border-radius: 4px;
+    }
+    
+    /* Command list container */
+    .command-list {
+        background-color: #f8f9fa;
+        border-radius: 4px;
+        padding: 8px;
+        border: 1px solid #dee2e6;
+    }
+    
+    /* Insert button styling */
+    .insert-button {
+        background-color: #007bff;
+        color: white;
+        border: none;
+        border-radius: 4px;
+        padding: 2px 8px;
+        margin-left: 8px;
+        cursor: pointer;
+        font-size: 12px;
+    }
+    .insert-button:hover {
+        background-color: #0069d9;
     }
-    .stMarkdown h4 {
-        margin-top: 0.5rem !important;
-        margin-bottom: 0.5rem !important;
+    
+    /* PDF preview container */
+    .pdf-preview-container {
+        border: 1px solid #dee2e6;
+        border-radius: 5px;
+        padding: 15px;
+        background-color: #f8f9fa;
     }
-    .command-category {
-        margin-bottom: 15px !important;
+    
+    /* PDF page image */
+    .pdf-page-image {
+        border: 1px solid #dee2e6;
+        margin-bottom: 15px;
     }
 </style>
 """, unsafe_allow_html=True)
 
-# JavaScript for copying commands (optional, may not work in all environments)
-st.markdown("""
-<script>
-document.addEventListener('DOMContentLoaded', (event) => {
-    // Add click handlers to copy LaTeX commands
-    document.querySelectorAll('.latex-command').forEach(element => {
-        element.addEventListener('click', function() {
-            const textToCopy = this.textContent;
-            const textArea = document.querySelector('.stTextArea textarea');
-            if (textArea) {
-                const start = textArea.selectionStart;
-                const end = textArea.selectionEnd;
-                const value = textArea.value;
-                textArea.value = value.substring(0, start) + textToCopy + value.substring(end);
-                textArea.selectionStart = textArea.selectionEnd = start + textToCopy.length;
-                textArea.focus();
-            }
-        });
-    });
-});
-</script>
-""", unsafe_allow_html=True)
-
 # Main application
 def main():
     st.title("LaTeX Editor & PDF Compiler")
@@ -345,9 +398,13 @@ def main():
         # Show packages.txt content suggestion
         with st.expander("Required packages.txt content"):
             st.code("""texlive
+texlive-latex-base
 texlive-latex-extra
 texlive-fonts-recommended
-texlive-science""", language="text")
+texlive-science
+python3-dev
+python3-pip
+poppler-utils""", language="text")
     
     # Create layout with sidebar
     col1, col2 = st.columns([3, 2])
@@ -386,9 +443,9 @@ texlive-science""", language="text")
                 st.rerun()
     
     with col2:
-        st.subheader("PDF Output")
+        st.subheader("PDF Preview")
         
-        # PDF compilation and download
+        # PDF compilation and preview
         if 'compile_clicked' in st.session_state and st.session_state.compile_clicked:
             with st.spinner("Compiling LaTeX to PDF..."):
                 pdf_data, stdout, stderr = latex_to_pdf(latex_code)
@@ -396,7 +453,18 @@ texlive-science""", language="text")
                 if pdf_data:
                     st.session_state.pdf_data = pdf_data
                     st.success("PDF compiled successfully!")
-                    pdf_preview(pdf_data)
+                    
+                    # Render preview
+                    preview_images = render_pdf_preview(pdf_data)
+                    if preview_images:
+                        st.write("PDF Preview (First Pages):")
+                        for i, img in enumerate(preview_images):
+                            st.image(img, caption=f"Page {i+1}", use_column_width=True, 
+                                    clamp=True, output_format="PNG")
+                    
+                    # Download button
+                    st.markdown(get_download_link(pdf_data), unsafe_allow_html=True)
+                    
                     st.session_state.compile_clicked = False
                 else:
                     st.error("Compilation Error")
@@ -407,9 +475,17 @@ texlive-science""", language="text")
         
         # Display previous PDF if available
         elif 'pdf_data' in st.session_state and st.session_state.pdf_data:
-            pdf_preview(st.session_state.pdf_data)
+            preview_images = render_pdf_preview(st.session_state.pdf_data)
+            if preview_images:
+                st.write("PDF Preview (First Pages):")
+                for i, img in enumerate(preview_images):
+                    st.image(img, caption=f"Page {i+1}", use_column_width=True, 
+                            clamp=True, output_format="PNG")
+            
+            # Download button
+            st.markdown(get_download_link(st.session_state.pdf_data), unsafe_allow_html=True)
         else:
-            st.info("Compile your LaTeX document to generate a PDF for download")
+            st.info("Compile your LaTeX document to see the PDF preview")
     
     # LaTeX Reference Sidebar
     st.sidebar.title("LaTeX Reference")
@@ -429,13 +505,16 @@ texlive-science""", language="text")
             if filtered_commands:
                 found = True
                 with st.sidebar.expander(f"{category} ({len(filtered_commands)} results)"):
+                    st.markdown('<div class="command-list">', unsafe_allow_html=True)
                     for cmd, desc in filtered_commands.items():
-                        cmd_display = cmd.replace("\\", "\\\\")  # Escape backslashes for display
-                        st.markdown(f"<div class='latex-command' title='Click to copy'>{cmd}</div> - {desc}", unsafe_allow_html=True)
-                        if st.button(f"Insert '{cmd}'", key=f"btn_{cmd}"):
-                            # Insert at cursor not supported directly, but we can append
-                            st.session_state.latex_code += f"\n{cmd}"
-                            st.rerun()
+                        col1, col2 = st.columns([3, 1])
+                        with col1:
+                            st.markdown(f'<div><span class="latex-command">{cmd}</span> <span class="command-description">{desc}</span></div>', unsafe_allow_html=True)
+                        with col2:
+                            if st.button("Insert", key=f"btn_{cmd}", help=f"Insert {cmd} into editor"):
+                                st.session_state.latex_code += f"\n{cmd}"
+                                st.rerun()
+                    st.markdown('</div>', unsafe_allow_html=True)
         
         # Search packages
         for category, packages in latex_packages.items():
@@ -445,37 +524,51 @@ texlive-science""", language="text")
             if filtered_packages:
                 found = True
                 with st.sidebar.expander(f"Packages: {category} ({len(filtered_packages)} results)"):
+                    st.markdown('<div class="command-list">', unsafe_allow_html=True)
                     for pkg, desc in filtered_packages.items():
-                        pkg_display = pkg.replace("\\", "\\\\")  # Escape backslashes for display
-                        st.markdown(f"<div class='latex-command' title='Click to copy'>{pkg}</div> - {desc}", unsafe_allow_html=True)
-                        if st.button(f"Insert '{pkg}'", key=f"btn_{pkg}"):
-                            st.session_state.latex_code += f"\n{pkg}"
-                            st.rerun()
+                        col1, col2 = st.columns([3, 1])
+                        with col1:
+                            st.markdown(f'<div><span class="latex-command">{pkg}</span> <span class="command-description">{desc}</span></div>', unsafe_allow_html=True)
+                        with col2:
+                            if st.button("Insert", key=f"btn_{pkg}", help=f"Insert {pkg} into editor"):
+                                st.session_state.latex_code += f"\n{pkg}"
+                                st.rerun()
+                    st.markdown('</div>', unsafe_allow_html=True)
         
         if not found:
             st.sidebar.info("No matching commands or packages found")
     
     else:
         # Display full reference when not searching
-        tabs = st.sidebar.tabs(["Commands", "Packages"])
+        tab1, tab2 = st.sidebar.tabs(["Commands", "Packages"])
         
-        with tabs[0]:
+        with tab1:
             for category, commands in latex_commands.items():
-                with st.expander(category):
+                with st.expander(category, expanded=category=="Math"):
+                    st.markdown('<div class="command-list">', unsafe_allow_html=True)
                     for cmd, desc in commands.items():
-                        st.markdown(f"<div class='latex-command'>{cmd}</div> - {desc}", unsafe_allow_html=True)
-                        if st.button(f"Insert '{cmd}'", key=f"btn_{cmd}"):
-                            st.session_state.latex_code += f"\n{cmd}"
-                            st.rerun()
+                        col1, col2 = st.columns([3, 1])
+                        with col1:
+                            st.markdown(f'<div><span class="latex-command">{cmd}</span> <span class="command-description">{desc}</span></div>', unsafe_allow_html=True)
+                        with col2:
+                            if st.button("Insert", key=f"btn_{cmd}", help=f"Insert {cmd} into editor"):
+                                st.session_state.latex_code += f"\n{cmd}"
+                                st.rerun()
+                    st.markdown('</div>', unsafe_allow_html=True)
         
-        with tabs[1]:
+        with tab2:
             for category, packages in latex_packages.items():
                 with st.expander(category):
+                    st.markdown('<div class="command-list">', unsafe_allow_html=True)
                     for pkg, desc in packages.items():
-                        st.markdown(f"<div class='latex-command'>{pkg}</div> - {desc}", unsafe_allow_html=True)
-                        if st.button(f"Insert '{pkg}'", key=f"btn_{pkg}"):
-                            st.session_state.latex_code += f"\n{pkg}"
-                            st.rerun()
+                        col1, col2 = st.columns([3, 1])
+                        with col1:
+                            st.markdown(f'<div><span class="latex-command">{pkg}</span> <span class="command-description">{desc}</span></div>', unsafe_allow_html=True)
+                        with col2:
+                            if st.button("Insert", key=f"btn_{pkg}", help=f"Insert {pkg} into editor"):
+                                st.session_state.latex_code += f"\n{pkg}"
+                                st.rerun()
+                    st.markdown('</div>', unsafe_allow_html=True)
 
 if __name__ == "__main__":
     main()