Update app.py

app.py

@@ -85,136 +85,6 @@ def render_pdf_preview(pdf_data):
         st.error(f"Error rendering PDF preview: {str(e)}")
         return None
 
-# LaTeX package reference
-latex_packages = {
-    "Document": {
-        "\\usepackage{geometry}": "Page layout customization",
-        "\\usepackage{fancyhdr}": "Custom headers and footers",
-        "\\usepackage{titlesec}": "Title formatting",
-        "\\usepackage{hyperref}": "Hyperlinks and PDF metadata"
-    },
-    "Math": {
-        "\\usepackage{amsmath}": "Enhanced math formatting",
-        "\\usepackage{amssymb}": "Mathematical symbols",
-        "\\usepackage{mathtools}": "Extensions to amsmath",
-        "\\usepackage{physics}": "Physics notation"
-    },
-    "Graphics": {
-        "\\usepackage{graphicx}": "Include images",
-        "\\usepackage{tikz}": "Create vector graphics",
-        "\\usepackage{pgfplots}": "Create plots",
-        "\\usepackage{float}": "Better figure placement"
-    },
-    "Tables": {
-        "\\usepackage{tabularx}": "Flexible tables",
-        "\\usepackage{booktabs}": "Professional tables",
-        "\\usepackage{colortbl}": "Colored tables",
-        "\\usepackage{multirow}": "Multi-row cells"
-    },
-    "Content": {
-        "\\usepackage{listings}": "Code syntax highlighting",
-        "\\usepackage{minted}": "Advanced code highlighting",
-        "\\usepackage{biblatex}": "Bibliography management",
-        "\\usepackage{xcolor}": "Color support"
-    }
-}
-
-# LaTeX commands reference
-latex_commands = {
-    "Document Structure": {
-        "\\documentclass{article}": "Specifies the type of document",
-        "\\begin{document}": "Starts the document content",
-        "\\end{document}": "Ends the document content",
-        "\\title{...}": "Sets the document title",
-        "\\author{...}": "Sets the document author",
-        "\\date{...}": "Sets the document date",
-        "\\maketitle": "Prints the title, author, and date"
-    },
-    "Sections": {
-        "\\section{...}": "Creates a section",
-        "\\subsection{...}": "Creates a subsection",
-        "\\subsubsection{...}": "Creates a subsubsection",
-        "\\paragraph{...}": "Creates a paragraph heading",
-        "\\tableofcontents": "Generates a table of contents"
-    },
-    "Text Formatting": {
-        "\\textbf{...}": "Bold text",
-        "\\textit{...}": "Italic text",
-        "\\underline{...}": "Underlined text",
-        "\\emph{...}": "Emphasized text",
-        "\\texttt{...}": "Typewriter text",
-        "\\textsc{...}": "Small caps text",
-        "\\textsf{...}": "Sans-serif text",
-        "\\color{red}{...}": "Colored text (requires xcolor)"
-    },
-    "Math": {
-        "$...$": "Inline math mode",
-        "$$...$$": "Display math mode",
-        "\\begin{equation}...\\end{equation}": "Numbered equation",
-        "\\begin{align}...\\end{align}": "Aligned equations",
-        "\\frac{num}{denom}": "Fraction",
-        "\\dfrac{num}{denom}": "Display fraction",
-        "\\sqrt{...}": "Square root",
-        "\\sqrt[n]{...}": "nth root",
-        "\\sum_{lower}^{upper}": "Summation",
-        "\\prod_{lower}^{upper}": "Product",
-        "\\int_{lower}^{upper}": "Integral",
-        "\\lim_{x \\to value}": "Limit",
-        "\\vec{...}": "Vector",
-        "\\overline{...}": "Overline",
-        "\\hat{...}": "Hat accent",
-        "\\partial": "Partial derivative"
-    },
-    "Lists": {
-        "\\begin{itemize}...\\end{itemize}": "Bulleted list",
-        "\\begin{enumerate}...\\end{enumerate}": "Numbered list",
-        "\\begin{description}...\\end{description}": "Description list",
-        "\\item": "List item",
-        "\\item[custom]": "Custom label item"
-    },
-    "Tables": {
-        "\\begin{table}...\\end{table}": "Table environment",
-        "\\begin{tabular}{cols}...\\end{tabular}": "Create a table",
-        "\\hline": "Horizontal line in table",
-        "\\cline{i-j}": "Partial horizontal line",
-        "cell1 & cell2 & cell3 \\\\": "Table row",
-        "\\multicolumn{n}{align}{content}": "Span multiple columns"
-    },
-    "Figures": {
-        "\\begin{figure}...\\end{figure}": "Figure environment",
-        "\\includegraphics[width=0.8\\textwidth]{filename}": "Include an image",
-        "\\caption{...}": "Add a caption to a figure or table",
-        "\\label{...}": "Add a label for cross-referencing",
-        "\\ref{...}": "Reference a labeled item"
-    },
-    "Citations": {
-        "\\cite{key}": "Citation",
-        "\\bibliography{file}": "Bibliography source",
-        "\\bibliographystyle{style}": "Bibliography style"
-    }
-}
-
-# Flatten commands and shortcuts dictionary for autocomplete
-flat_commands = {}
-for category, commands in latex_commands.items():
-    for cmd, desc in commands.items():
-        cmd_parts = cmd.split("{")[0].strip()  # Get just the command part
-        flat_commands[cmd_parts] = {"full": cmd, "desc": desc, "category": category}
-
-# Add common math shortcuts
-math_shortcuts = {
-    "\\fr": "\\frac{}{}", 
-    "\\eq": "\\begin{equation}\n\n\\end{equation}",
-    "\\al": "\\begin{align}\n\n\\end{align}",
-    "\\it": "\\item ",
-    "\\bf": "\\textbf{}",
-    "\\sq": "\\sqrt{}",
-    "\\vec": "\\vec{}",
-    "\\int": "\\int_{}^{}",
-    "\\sum": "\\sum_{}^{}",
-    "\\lim": "\\lim_{\\to }"
-}
-
 # Default LaTeX template
 default_template = r"""\documentclass{article}
 \usepackage[utf8]{inputenc}
@@ -287,252 +157,239 @@ Your conclusion here.
 \end{document}
 """
 
-# Add custom CSS with improved sidebar styling
+# Add VS Code-like 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;
+    /* VS Code-like styling */
+    .vscode-editor textarea {
+        font-family: 'Consolas', 'Monaco', 'Courier New', monospace !important;
         font-size: 14px !important;
         line-height: 1.5 !important;
+        background-color: #1e1e1e !important;
+        color: #d4d4d4 !important;
+        padding: 10px !important;
+        border-radius: 4px !important;
+        border: 1px solid #252526 !important;
+    }
+    
+    /* Editor container styling */
+    .vscode-container {
+        background-color: #1e1e1e;
+        border-radius: 6px;
+        padding: 8px;
+        border: 1px solid #333;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    }
+    
+    /* Make scrollbars VS Code style */
+    .vscode-editor textarea::-webkit-scrollbar {
+        width: 14px;
+        height: 14px;
+    }
+    
+    .vscode-editor textarea::-webkit-scrollbar-thumb {
+        background-color: #424242;
+        border-radius: 7px;
+        border: 3px solid #1e1e1e;
+    }
+    
+    .vscode-editor textarea::-webkit-scrollbar-track {
+        background-color: #1e1e1e;
+    }
+    
+    /* Button styling */
+    .vscode-button {
+        background-color: #0e639c;
+        color: white;
+        border: none;
+        padding: 8px 12px;
+        border-radius: 2px;
+        cursor: pointer;
+        font-size: 13px;
+        margin-right: 10px;
+        margin-top: 10px;
+        transition: background-color 0.2s;
+    }
+    
+    .vscode-button:hover {
+        background-color: #1177bb;
     }
     
     /* Download button styling */
     .download-button {
         display: inline-block;
         padding: 0.7em 1.4em;
-        background-color: #4CAF50;
+        background-color: #3d995e;
         color: white !important;
         text-align: center;
         text-decoration: none;
-        font-size: 18px;
-        border-radius: 4px;
+        font-size: 14px;
+        border-radius: 2px;
         transition: background-color 0.3s;
         margin-top: 10px;
-        font-weight: bold;
-        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+        font-weight: normal;
     }
     .download-button:hover {
-        background-color: #45a049;
-        box-shadow: 0 4px 8px rgba(0,0,0,0.3);
+        background-color: #4eb772;
     }
     
-    /* Sidebar styling */
-    .sidebar .sidebar-content {
-        background-color: #f0f2f6;
+    /* Status bar styling */
+    .status-bar {
+        background-color: #007acc;
+        color: white;
+        padding: 2px 8px;
+        font-size: 12px;
+        border-radius: 2px 2px 0 0;
+        display: flex;
+        justify-content: space-between;
     }
     
-    /* LaTeX command styling */
-    .latex-command {
-        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;
-    }
-    .latex-command:hover {
-        background-color: #d0d7de;
-        border-color: #adb5bd;
+    /* Terminal/output styling */
+    .terminal-output {
+        background-color: #1e1e1e;
+        color: #cccccc;
+        padding: 10px;
+        font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        font-size: 12px;
+        border-radius: 0 0 4px 4px;
+        border-top: 1px solid #333;
+        max-height: 200px;
+        overflow-y: auto;
     }
     
-    /* Command description styling */
-    .command-description {
-        color: #495057;
-        padding-left: 8px;
-        display: inline-block;
+    /* PDF preview container */
+    .pdf-preview-container {
+        border: 1px solid #333;
+        border-radius: 4px;
+        padding: 15px;
+        background-color: #252526;
     }
     
-    /* Category title styling */
-    .category-title {
-        font-weight: bold;
-        color: #212529;
-        margin-top: 15px;
-        margin-bottom: 8px;
+    /* Info and error messages */
+    .stInfo {
+        background-color: #063b49;
+        color: #bbbbbb;
+        border: 1px solid #145b6c;
     }
     
-    /* Expander styling */
-    .streamlit-expanderHeader {
-        font-weight: bold;
-        color: #212529;
-        background-color: #e9ecef;
-        border-radius: 4px;
+    .stError {
+        background-color: #5a1d1d;
+        color: #bbbbbb;
+        border: 1px solid #6c2b2b;
     }
     
-    /* Command list container */
-    .command-list {
-        background-color: #f8f9fa;
-        border-radius: 4px;
-        padding: 8px;
-        border: 1px solid #dee2e6;
+    .stSuccess {
+        background-color: #143d27;
+        color: #bbbbbb;
+        border: 1px solid #1e5a3a;
     }
     
-    /* 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;
+    /* Hide Streamlit elements */
+    #MainMenu {visibility: hidden;}
+    footer {visibility: hidden;}
+    
+    /* Customize the rest of Streamlit UI */
+    .stApp {
+        background-color: #252526;
     }
     
-    /* Hint box styling */
-    .hint-box {
-        background-color: #f8f9fa;
-        border: 1px solid #dee2e6;
-        border-radius: 4px;
-        padding: 10px;
-        margin-top: 5px;
+    h1, h2, h3, h4, h5, h6, p, div {
+        color: #cccccc;
     }
     
-    /* Shortcut span */
-    .shortcut-span {
-        background-color: #e9ecef;
-        padding: 2px 6px;
-        border-radius: 3px;
-        font-family: monospace;
-        margin-right: 10px;
+    .stTabs [data-baseweb="tab-list"] {
+        background-color: #2d2d2d;
     }
     
-    /* Shortcut tip */
-    .shortcut-tip {
-        font-style: italic;
-        color: #6c757d;
-        font-size: 0.85em;
+    .stTabs [data-baseweb="tab"] {
+        color: #cccccc;
     }
 </style>
 """, unsafe_allow_html=True)
 
+# Function to create a VS Code-like editor
+def vs_code_editor(key, height=500):
+    editor_html = f"""
+    <div class="vscode-container">
+        <div class="status-bar">
+            <span>document.tex - LaTeX</span>
+            <span>UTF-8</span>
+        </div>
+    </div>
+    """
+    st.markdown(editor_html, unsafe_allow_html=True)
+    
+    # Create the actual editor with VS Code styling
+    return st.text_area("", value=st.session_state.get(key, ""), 
+                        height=height, key=key, label_visibility="collapsed",
+                        help="Type your LaTeX code here")
+
 # Main application
 def main():
-    st.title("LaTeX Editor & PDF Compiler")
+    # Set up a clean, dark theme
+    st.markdown("<h1 style='color: #cccccc; margin-bottom: 20px;'>LaTeX Editor</h1>", unsafe_allow_html=True)
     
     # Initialize session state
     if 'latex_code' not in st.session_state:
         st.session_state.latex_code = default_template
     if 'show_preview' not in st.session_state:
         st.session_state.show_preview = False
-    if 'last_word' not in st.session_state:
-        st.session_state.last_word = ""
     
     # Display installation status
     if not is_pdflatex_installed():
         st.warning("⚠️ LaTeX is not installed correctly. The PDF compilation feature will not work.")
-        st.info("For Hugging Face Spaces, make sure you have a packages.txt file with the necessary LaTeX packages.")
     
-    # Create layout
+    # Create layout - full width editor
     col1, col2 = st.columns([3, 2])
     
     with col1:
-        st.subheader("LaTeX Editor")
-        
-        # Setup autocompletion hints
-        hint_container = st.empty()
-        
-        # Detect what's being typed for autocompletion
-        current_text = st.session_state.latex_code
-        if '\\' in current_text:
-            # Find the last command being typed
-            lines = current_text.split('\n')
-            for line in reversed(lines):
-                if '\\' in line:
-                    last_slash_pos = line.rfind('\\')
-                    command_start = line[last_slash_pos:]
-                    # Extract the command without arguments
-                    command_parts = command_start.split('{')[0].split(' ')[0].strip()
-                    if command_parts and command_parts != st.session_state.last_word:
-                        st.session_state.last_word = command_parts
-                        
-                        # Show hints for matching commands
-                        matching_commands = []
-                        
-                        # Check for shortcut matches
-                        shortcut_matches = []
-                        for shortcut, expansion in math_shortcuts.items():
-                            if shortcut.startswith(command_parts):
-                                shortcut_matches.append((shortcut, expansion))
-                        
-                        # Check for command matches
-                        command_matches = []
-                        for cmd, info in flat_commands.items():
-                            if cmd.startswith(command_parts):
-                                command_matches.append((cmd, info))
-                        
-                        # Combine shortcuts and commands
-                        matches = shortcut_matches + command_matches[:5]  # Limit to top 5 commands
-                        
-                        if matches:
-                            hint_html = '<div class="hint-box"><p><strong>Suggestions:</strong></p>'
-                            for match, info in matches:
-                                if isinstance(info, dict):
-                                    hint_html += f'<div><span class="shortcut-span">{match}</span> {info["desc"]}</div>'
-                                else:
-                                    hint_html += f'<div><span class="shortcut-span">{match}</span> expands to <code>{info}</code></div>'
-                            hint_html += '<p class="shortcut-tip">Use the sidebar to insert full commands</p></div>'
-                            hint_container.markdown(hint_html, unsafe_allow_html=True)
-                            break
-        
-        # LaTeX editor
-        latex_code = st.text_area(
-            "Edit your LaTeX document:",
-            value=st.session_state.latex_code,
-            height=500,
-            key="latex_editor"
-        )
+        # VS Code-like editor with custom class for styling
+        st.markdown('<div class="vscode-editor">', unsafe_allow_html=True)
+        latex_code = vs_code_editor("latex_editor", height=500)
+        st.markdown('</div>', unsafe_allow_html=True)
         st.session_state.latex_code = latex_code
         
-        # Control buttons
-        col1_1, col1_2, col1_3 = st.columns(3)
+        # Control buttons with VS Code styling
+        st.markdown("""
+        <div style="display: flex; gap: 10px;">
+            <button class="vscode-button" onclick="document.querySelector('[data-testid=\\\"stFormSubmitButton\\\"]').click()">
+                Compile PDF
+            </button>
+            <button class="vscode-button" onclick="document.querySelector('[key=\\\"load_template\\\"]').click()">
+                Load Template
+            </button>
+            <button class="vscode-button" onclick="document.querySelector('[key=\\\"clear_editor\\\"]').click()">
+                Clear Editor
+            </button>
+        </div>
+        """, unsafe_allow_html=True)
         
-        with col1_1:
-            if st.button("Compile PDF", use_container_width=True):
-                st.session_state.compile_clicked = True
+        # Hidden buttons to handle the clicks
+        if st.button("Compile PDF", key="compile", help="Compile LaTeX to PDF"):
+            st.session_state.compile_clicked = True
         
-        with col1_2:
-            if st.button("Load Template", use_container_width=True):
-                st.session_state.latex_code = default_template
-                st.rerun()
+        if st.button("Load Template", key="load_template", help="Load default template"):
+            st.session_state.latex_code = default_template
+            st.rerun()
         
-        with col1_3:
-            if st.button("Clear Editor", use_container_width=True):
-                st.session_state.latex_code = ""
-                st.rerun()
-        
-        # Display available shortcuts
-        with st.expander("LaTeX Shortcuts"):
-            st.markdown("### Quick Shortcuts")
-            for shortcut, expansion in math_shortcuts.items():
-                st.markdown(f"<span class='shortcut-span'>{shortcut}</span> → <code>{expansion}</code>", unsafe_allow_html=True)
+        if st.button("Clear Editor", key="clear_editor", help="Clear editor content"):
+            st.session_state.latex_code = ""
+            st.rerun()
     
     with col2:
-        st.subheader("PDF Output")
+        st.markdown("<h3 style='color: #cccccc; margin-bottom: 10px;'>Output</h3>", unsafe_allow_html=True)
         
         # PDF compilation
         if 'compile_clicked' in st.session_state and st.session_state.compile_clicked:
-            with st.spinner("Compiling LaTeX to PDF..."):
+            with st.spinner("Compiling..."):
                 pdf_data, stdout, stderr = latex_to_pdf(latex_code)
                 
                 if pdf_data:
                     st.session_state.pdf_data = pdf_data
-                    st.success("PDF compiled successfully!")
+                    st.success("Compilation successful")
                     
                     # Toggle button for preview
-                    if st.button("Show/Hide Preview", use_container_width=True):
+                    if st.button("Toggle Preview", help="Show or hide the PDF preview"):
                         st.session_state.show_preview = not st.session_state.show_preview
                     
                     # Download button always available
@@ -540,25 +397,32 @@ def main():
                     
                     # Optional preview
                     if st.session_state.show_preview:
+                        st.markdown('<div class="pdf-preview-container">', unsafe_allow_html=True)
                         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_container_width=True, 
                                         output_format="PNG")
+                        st.markdown('</div>', unsafe_allow_html=True)
+                    
+                    # Terminal output in collapsible section
+                    with st.expander("Terminal Output"):
+                        st.markdown('<div class="terminal-output">', unsafe_allow_html=True)
+                        st.text(stdout)
+                        st.markdown('</div>', unsafe_allow_html=True)
                     
                     st.session_state.compile_clicked = False
                 else:
-                    st.error("Compilation Error")
-                    with st.expander("Error Details"):
-                        st.text(stdout)
-                        st.text(stderr)
+                    st.error("Compilation failed")
+                    st.markdown('<div class="terminal-output">', unsafe_allow_html=True)
+                    st.text(stderr)
+                    st.markdown('</div>', unsafe_allow_html=True)
                     st.session_state.compile_clicked = False
         
         # Display previous PDF if available
         elif 'pdf_data' in st.session_state and st.session_state.pdf_data:
             # Toggle button for preview
-            if st.button("Show/Hide Preview", use_container_width=True):
+            if st.button("Toggle Preview", help="Show or hide the PDF preview"):
                 st.session_state.show_preview = not st.session_state.show_preview
             
             # Download button always available
@@ -566,76 +430,15 @@ def main():
             
             # Optional preview
             if st.session_state.show_preview:
+                st.markdown('<div class="pdf-preview-container">', unsafe_allow_html=True)
                 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_container_width=True, 
                                 output_format="PNG")
-        else:
-            st.info("Compile your LaTeX document to generate a PDF for download")
-    
-    # LaTeX Reference Sidebar
-    st.sidebar.title("LaTeX Reference")
-    
-    # Command search
-    quick_search = st.sidebar.text_input("Find LaTeX Commands", "")
-    
-    if quick_search:
-        # Find and display matching commands
-        matching_cmds = []
-        for category, commands in latex_commands.items():
-            for cmd, desc in commands.items():
-                cmd_without_backslash = cmd.replace("\\", "").lower()
-                if quick_search.lower() in cmd_without_backslash:
-                    matching_cmds.append((cmd, desc, category))
-        
-        if matching_cmds:
-            st.sidebar.markdown("### Matching Commands")
-            for cmd, desc, category in matching_cmds[:15]:  # Limit to 15 results
-                col1, col2 = st.sidebar.columns([4, 1])
-                with col1:
-                    st.markdown(f"<div><span class='latex-command'>{cmd}</span> <small>{category}</small></div>", unsafe_allow_html=True)
-                with col2:
-                    if st.button("Insert", key=f"quick_{cmd}"):
-                        # Update LaTeX code with the inserted command
-                        st.session_state.latex_code += f"\n{cmd}"
-                        st.rerun()
-        else:
-            st.sidebar.info("No matching commands found")
-    
-    # Regular categories
-    tab1, tab2 = st.sidebar.tabs(["Commands", "Packages"])
-    
-    with tab1:
-        for category, commands in latex_commands.items():
-            with st.expander(category, expanded=category=="Math"):
-                st.markdown('<div class="command-list">', unsafe_allow_html=True)
-                for cmd, desc in commands.items():
-                    col1, col2 = st.sidebar.columns([4, 1])
-                    with col1:
-                        st.markdown(f"<div><span class='latex-command'>{cmd}</span></div>", unsafe_allow_html=True)
-                    with col2:
-                        if st.button("Insert", key=f"btn_{cmd}"):
-                            # Update LaTeX code with the inserted command
-                            st.session_state.latex_code += f"\n{cmd}"
-                            st.rerun()
-                st.markdown('</div>', unsafe_allow_html=True)
-    
-    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():
-                    col1, col2 = st.sidebar.columns([4, 1])
-                    with col1:
-                        st.markdown(f"<div><span class='latex-command'>{pkg}</span></div>", unsafe_allow_html=True)
-                    with col2:
-                        if st.button("Insert", key=f"btn_{pkg}"):
-                            # Update LaTeX code with the inserted command
-                            st.session_state.latex_code += f"\n{pkg}"
-                            st.rerun()
                 st.markdown('</div>', unsafe_allow_html=True)
+        else:
+            st.info("Click 'Compile PDF' to generate output")
 
 if __name__ == "__main__":
     main()