update

Dockerfile

@@ -0,0 +1,28 @@
+FROM ubuntu:22.04
+
+# Prevent interactive prompts during installation
+ENV DEBIAN_FRONTEND=noninteractive
+
+# Install system dependencies
+RUN apt-get update && apt-get install -y \
+    python3 \
+    python3-pip \
+    texlive-full \
+    latexmk \
+    && apt-get clean \
+    && rm -rf /var/lib/apt/lists/*
+
+# Install Python dependencies
+RUN pip3 install --no-cache-dir flask flask-cors
+
+# Set working directory
+WORKDIR /app
+
+# Copy application files
+COPY . .
+
+# Expose port
+EXPOSE 7860
+
+# Run the application
+CMD ["python3", "app.py"]

README.md

@@ -1,10 +1,393 @@
 ---
-title: Texcomp
-emoji: 💻
-colorFrom: indigo
+title: LaTeX Compiler
+emoji: 📄
+colorFrom: purple
 colorTo: indigo
 sdk: docker
 pinned: false
+license: mit
+app_port: 7860
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# LaTeX Compiler Web App
+
+A full-featured LaTeX compiler web application that converts LaTeX documents to PDF using pdflatex. Built with Flask backend and vanilla JavaScript frontend, deployable on Hugging Face Spaces using Docker.
+
+## Features
+
+- 🚀 **Web Interface**: Upload `.tex` files or paste LaTeX code directly
+- 📄 **PDF Generation**: Compile LaTeX to PDF using pdflatex
+- 🔌 **REST API**: JSON and file upload endpoints
+- 🎨 **Modern UI**: Responsive design with Tailwind CSS
+- 🐳 **Docker Ready**: Easy deployment with Docker
+- 🤗 **Hugging Face Compatible**: Ready for Hugging Face Spaces
+
+## Project Structure
+
+```
+latex-compiler/
+├── app.py          # Flask backend server
+├── index.html      # Frontend interface
+├── Dockerfile      # Docker configuration
+└── README.md       # This file (with HF config)
+```
+
+## Hugging Face Spaces Deployment
+
+### Quick Deploy
+
+1. **Create a new Space:**
+   - Go to [Hugging Face Spaces](https://huggingface.co/spaces)
+   - Click "Create new Space"
+   - Choose **Docker** as the SDK
+   - Name your space (e.g., `latex-compiler`)
+
+2. **Upload files:**
+   Upload all four files to your Space:
+   - `README.md` (this file - **must include YAML frontmatter**)
+   - `Dockerfile`
+   - `app.py`
+   - `index.html`
+
+3. **Configuration:**
+   The YAML frontmatter at the top of this README configures your Space:
+   ```yaml
+   ---
+   title: LaTeX Compiler          # Your app name
+   emoji: 📄                       # Icon for your Space
+   colorFrom: purple               # Gradient start color
+   colorTo: indigo                 # Gradient end color
+   sdk: docker                     # REQUIRED: Use Docker SDK
+   pinned: false                   # Pin to your profile
+   license: mit                    # License type
+   app_port: 7860                  # REQUIRED: Port your app runs on
+   ---
+   ```
+
+4. **Wait for build:**
+   - Hugging Face will automatically build your Docker image
+   - This takes **10-15 minutes** due to texlive-full installation
+   - Watch the build logs in the "Logs" tab
+   - Once complete, your app will be live!
+
+5. **Access your Space:**
+   - Your app will be available at: `https://huggingface.co/spaces/YOUR_USERNAME/YOUR_SPACE_NAME`
+
+### Important Notes for Hugging Face
+
+- ✅ **Port 7860 is REQUIRED** - Hugging Face Spaces expects this port
+- ✅ **Docker SDK is REQUIRED** - Must be specified in YAML frontmatter
+- ✅ **README.md must have YAML frontmatter** - Configuration at the top of this file
+- ⚠️ Build time is long (~10-15 min) due to texlive-full package size
+- ⚠️ First compile may be slower as LaTeX initializes fonts
+
+## Local Development
+
+### Prerequisites
+
+- Docker installed on your system
+- OR Python 3.8+ and texlive-full for non-Docker setup
+
+### Run with Docker (Recommended)
+
+1. **Build the Docker image:**
+   ```bash
+   docker build -t latex-compiler .
+   ```
+
+2. **Run the container:**
+   ```bash
+   docker run -p 7860:7860 latex-compiler
+   ```
+
+3. **Access the application:**
+   Open your browser and navigate to `http://localhost:7860`
+
+### Run without Docker (Local Development)
+
+1. **Install dependencies:**
+   ```bash
+   # Ubuntu/Debian
+   sudo apt-get update
+   sudo apt-get install python3 python3-pip texlive-full latexmk
+   
+   # macOS
+   brew install python texlive
+   
+   # Install Python packages
+   pip3 install flask flask-cors
+   ```
+
+2. **Run the application:**
+   ```bash
+   python3 app.py
+   ```
+
+3. **Access the application:**
+   Open your browser and navigate to `http://localhost:7860`
+
+## API Documentation
+
+### Endpoints
+
+#### `POST /compile`
+
+Compile LaTeX code to PDF.
+
+**Request Method 1: JSON**
+```bash
+curl -X POST http://localhost:7860/compile \
+  -H "Content-Type: application/json" \
+  -d '{"code": "\\documentclass{article}\\begin{document}Hello World\\end{document}"}' \
+  --output output.pdf
+```
+
+**Request Method 2: File Upload**
+```bash
+curl -X POST http://localhost:7860/compile \
+  -F "file=@document.tex" \
+  --output output.pdf
+```
+
+**Success Response:**
+- Status: `200 OK`
+- Content-Type: `application/pdf`
+- Body: PDF binary data
+
+**Error Response:**
+- Status: `400 Bad Request`
+- Content-Type: `application/json`
+```json
+{
+  "error": "Compilation failed",
+  "log": "LaTeX error log details..."
+}
+```
+
+#### `GET /`
+
+Serves the web frontend interface.
+
+#### `GET /docs`
+
+Displays comprehensive API documentation.
+
+## Usage Examples
+
+### Python Example
+
+```python
+import requests
+
+latex_code = r"""
+\documentclass{article}
+\usepackage[utf8]{inputenc}
+
+\title{My Document}
+\author{John Doe}
+
+\begin{document}
+\maketitle
+
+\section{Introduction}
+This is a sample document.
+
+\end{document}
+"""
+
+response = requests.post(
+    'http://localhost:7860/compile',
+    json={'code': latex_code}
+)
+
+if response.status_code == 200:
+    with open('output.pdf', 'wb') as f:
+        f.write(response.content)
+    print("PDF created successfully!")
+else:
+    print("Error:", response.json())
+```
+
+### JavaScript Example
+
+```javascript
+const latexCode = `
+\\documentclass{article}
+\\begin{document}
+Hello from JavaScript!
+\\end{document}
+`;
+
+fetch('http://localhost:7860/compile', {
+    method: 'POST',
+    headers: {
+        'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({ code: latexCode })
+})
+.then(response => response.blob())
+.then(blob => {
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'output.pdf';
+    a.click();
+});
+```
+
+### File Upload Example
+
+```python
+import requests
+
+with open('document.tex', 'rb') as f:
+    files = {'file': f}
+    response = requests.post(
+        'http://localhost:7860/compile',
+        files=files
+    )
+
+if response.status_code == 200:
+    with open('output.pdf', 'wb') as f:
+        f.write(response.content)
+```
+
+### Using on Hugging Face Spaces
+
+```python
+import requests
+
+# Replace with your actual Space URL
+SPACE_URL = "https://YOUR_USERNAME-latex-compiler.hf.space"
+
+latex_code = r"""
+\documentclass{article}
+\begin{document}
+Hello from Hugging Face!
+\end{document}
+"""
+
+response = requests.post(
+    f'{SPACE_URL}/compile',
+    json={'code': latex_code}
+)
+
+if response.status_code == 200:
+    with open('output.pdf', 'wb') as f:
+        f.write(response.content)
+```
+
+## Features & Limitations
+
+### Supported
+
+✅ Standard LaTeX packages (texlive-full includes 99% of packages)  
+✅ Mathematical equations and symbols  
+✅ Tables, figures, and images (embedded)  
+✅ Bibliography and citations  
+✅ Custom document classes  
+✅ Multiple compilation passes (handled automatically)
+
+### Limitations
+
+⚠️ Compilation timeout: 30 seconds  
+⚠️ Recommended file size: < 10MB  
+⚠️ Only pdflatex engine (XeLaTeX and LuaLaTeX not included)  
+⚠️ No support for external file dependencies (images must be embedded or base64)
+
+## Troubleshooting
+
+### Common Errors
+
+**"Compilation failed"**
+- Check your LaTeX syntax
+- View the error log in the web interface
+- Ensure all required packages are declared
+
+**"Compilation timeout"**
+- Your document is too complex
+- Try simplifying or splitting into smaller documents
+
+**"No file selected"**
+- Ensure you've selected a `.tex` file before clicking compile
+
+### Docker Build Issues
+
+**Build fails due to texlive-full size:**
+```bash
+# Increase Docker memory limit in Docker Desktop settings
+# Recommended: 4GB+ RAM, 10GB+ disk space
+```
+
+**Port 7860 already in use:**
+```bash
+# Use a different port locally
+docker run -p 8080:7860 latex-compiler
+# Then access at http://localhost:8080
+```
+
+### Hugging Face Spaces Issues
+
+**Space stuck in "Building" state:**
+- Check the build logs for errors
+- Ensure Dockerfile is correct
+- Verify all files are uploaded
+- texlive-full installation takes 10-15 minutes (this is normal)
+
+**Space shows "Application Error":**
+- Check that `app_port: 7860` is in README.md frontmatter
+- Verify Flask app runs on host `0.0.0.0` and port `7860`
+- Review Space logs for Python errors
+
+**"Connection refused" errors:**
+- Ensure `EXPOSE 7860` is in Dockerfile
+- Verify `app.run(host='0.0.0.0', port=7860)` in app.py
+
+## Technical Stack
+
+- **Backend**: Flask 3.x (Python)
+- **Frontend**: Vanilla JavaScript + Tailwind CSS
+- **LaTeX Engine**: pdflatex (TeX Live 2022)
+- **Containerization**: Docker (Ubuntu 22.04 base)
+- **Deployment**: Hugging Face Spaces (Docker SDK)
+
+## Environment Variables (Optional)
+
+You can customize the app with environment variables:
+
+```bash
+# In Hugging Face Spaces, add these in Settings > Variables
+FLASK_ENV=production
+MAX_CONTENT_LENGTH=10485760  # 10MB limit
+```
+
+## License
+
+MIT License - feel free to use and modify!
+
+## Contributing
+
+Contributions welcome! Areas for improvement:
+- Add XeLaTeX/LuaLaTeX support
+- Implement file caching for faster recompilation
+- Add syntax highlighting in code editor
+- Support for multi-file LaTeX projects
+- Real-time preview with live updates
+- Integration with Overleaf-style collaborative editing
+
+## Support
+
+- **Hugging Face Discussions**: Use the Community tab on your Space
+- **Issues**: Report bugs via GitHub or Space discussions
+- **Documentation**: Visit `/docs` endpoint for API reference
+- **Examples**: Check the Usage Examples section above
+
+## Acknowledgments
+
+- Built for the LaTeX community
+- Powered by TeX Live and Flask
+- Hosted on Hugging Face Spaces
+
+---
+
+**Need help?** Visit the `/docs` endpoint or check Hugging Face Spaces documentation at https://huggingface.co/docs/hub/spaces-overview

app.py

@@ -0,0 +1,201 @@
+from flask import Flask, request, jsonify, send_file, render_template_string
+from flask_cors import CORS
+import os
+import subprocess
+import tempfile
+import shutil
+from pathlib import Path
+
+app = Flask(__name__)
+CORS(app)
+
+def read_file(filepath):
+    """Read index.html content"""
+    try:
+        with open(filepath, 'r', encoding='utf-8') as f:
+            return f.read()
+    except FileNotFoundError:
+        return "<h1>Frontend not found</h1><p>Please ensure index.html is in the same directory as app.py</p>"
+
+@app.route('/')
+def index():
+    """Serve the frontend HTML"""
+    html_content = read_file('index.html')
+    return render_template_string(html_content)
+
+@app.route('/docs')
+def docs():
+    """API documentation"""
+    docs_html = """
+    <!DOCTYPE html>
+    <html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>LaTeX Compiler API Documentation</title>
+        <script src="https://cdn.tailwindcss.com"></script>
+    </head>
+    <body class="bg-gray-50 p-8">
+        <div class="max-w-4xl mx-auto bg-white rounded-lg shadow-lg p-8">
+            <h1 class="text-3xl font-bold mb-6 text-gray-800">LaTeX Compiler API Documentation</h1>
+            
+            <div class="mb-8">
+                <h2 class="text-2xl font-semibold mb-4 text-gray-700">Endpoints</h2>
+                
+                <div class="mb-6 p-4 bg-blue-50 rounded-lg">
+                    <h3 class="text-xl font-semibold mb-2 text-blue-900">POST /compile</h3>
+                    <p class="mb-3 text-gray-700">Compile LaTeX code to PDF</p>
+                    
+                    <h4 class="font-semibold mb-2">Request Methods:</h4>
+                    <ul class="list-disc ml-6 mb-3 space-y-2">
+                        <li><strong>File Upload:</strong> multipart/form-data with 'file' field (.tex file)</li>
+                        <li><strong>JSON:</strong> application/json with {"code": "LaTeX source code"}</li>
+                    </ul>
+                    
+                    <h4 class="font-semibold mb-2">Success Response:</h4>
+                    <pre class="bg-gray-800 text-green-400 p-3 rounded overflow-x-auto">Content-Type: application/pdf
+PDF file binary data</pre>
+                    
+                    <h4 class="font-semibold mb-2 mt-3">Error Response:</h4>
+                    <pre class="bg-gray-800 text-red-400 p-3 rounded overflow-x-auto">{
+  "error": "Compilation failed",
+  "log": "LaTeX error log details..."
+}</pre>
+                </div>
+                
+                <div class="mb-6 p-4 bg-green-50 rounded-lg">
+                    <h3 class="text-xl font-semibold mb-2 text-green-900">GET /</h3>
+                    <p class="text-gray-700">Serve the web frontend interface</p>
+                </div>
+                
+                <div class="p-4 bg-purple-50 rounded-lg">
+                    <h3 class="text-xl font-semibold mb-2 text-purple-900">GET /docs</h3>
+                    <p class="text-gray-700">Display this API documentation</p>
+                </div>
+            </div>
+            
+            <div class="mb-8">
+                <h2 class="text-2xl font-semibold mb-4 text-gray-700">Example Usage</h2>
+                
+                <h3 class="text-lg font-semibold mb-2">cURL - JSON Request:</h3>
+                <pre class="bg-gray-800 text-white p-4 rounded overflow-x-auto mb-4">curl -X POST http://localhost:7860/compile \\
+  -H "Content-Type: application/json" \\
+  -d '{"code": "\\\\documentclass{article}\\\\begin{document}Hello World\\\\end{document}"}' \\
+  --output output.pdf</pre>
+                
+                <h3 class="text-lg font-semibold mb-2">cURL - File Upload:</h3>
+                <pre class="bg-gray-800 text-white p-4 rounded overflow-x-auto mb-4">curl -X POST http://localhost:7860/compile \\
+  -F "file=@document.tex" \\
+  --output output.pdf</pre>
+                
+                <h3 class="text-lg font-semibold mb-2">Python Example:</h3>
+                <pre class="bg-gray-800 text-white p-4 rounded overflow-x-auto">import requests
+
+latex_code = r"""
+\\documentclass{article}
+\\begin{document}
+Hello from Python!
+\\end{document}
+"""
+
+response = requests.post(
+    'http://localhost:7860/compile',
+    json={'code': latex_code}
+)
+
+if response.status_code == 200:
+    with open('output.pdf', 'wb') as f:
+        f.write(response.content)
+else:
+    print(response.json())</pre>
+            </div>
+            
+            <div class="mt-8 p-4 bg-yellow-50 rounded-lg">
+                <h3 class="font-semibold text-yellow-900 mb-2">⚠️ Notes</h3>
+                <ul class="list-disc ml-6 text-gray-700 space-y-1">
+                    <li>Maximum file size recommended: 10MB</li>
+                    <li>Compilation timeout: 30 seconds</li>
+                    <li>Temporary files are automatically cleaned up</li>
+                    <li>Only pdflatex engine is supported</li>
+                </ul>
+            </div>
+            
+            <div class="mt-6 text-center">
+                <a href="/" class="text-blue-600 hover:text-blue-800 underline">← Back to Compiler</a>
+            </div>
+        </div>
+    </body>
+    </html>
+    """
+    return docs_html
+
+@app.route('/compile', methods=['POST'])
+def compile_latex():
+    """Compile LaTeX code to PDF"""
+    temp_dir = None
+    
+    try:
+        # Create temporary directory
+        temp_dir = tempfile.mkdtemp()
+        tex_file = os.path.join(temp_dir, 'document.tex')
+        pdf_file = os.path.join(temp_dir, 'document.pdf')
+        
+        # Get LaTeX code from request
+        latex_code = None
+        
+        if request.is_json:
+            data = request.get_json()
+            latex_code = data.get('code', '')
+        elif 'file' in request.files:
+            file = request.files['file']
+            if file.filename == '':
+                return jsonify({'error': 'No file selected'}), 400
+            latex_code = file.read().decode('utf-8')
+        else:
+            return jsonify({'error': 'No LaTeX code provided. Send JSON with "code" field or upload .tex file'}), 400
+        
+        if not latex_code:
+            return jsonify({'error': 'Empty LaTeX code'}), 400
+        
+        # Write LaTeX code to file
+        with open(tex_file, 'w', encoding='utf-8') as f:
+            f.write(latex_code)
+        
+        # Compile with pdflatex
+        result = subprocess.run(
+            ['pdflatex', '-interaction=nonstopmode', '-output-directory', temp_dir, tex_file],
+            capture_output=True,
+            text=True,
+            timeout=30
+        )
+        
+        # Check if PDF was created
+        if os.path.exists(pdf_file):
+            return send_file(pdf_file, mimetype='application/pdf', as_attachment=True, download_name='compiled.pdf')
+        else:
+            # Compilation failed, return error log
+            log_file = os.path.join(temp_dir, 'document.log')
+            error_log = ''
+            if os.path.exists(log_file):
+                with open(log_file, 'r', encoding='utf-8', errors='ignore') as f:
+                    error_log = f.read()
+            
+            return jsonify({
+                'error': 'Compilation failed',
+                'log': error_log or result.stderr or result.stdout
+            }), 400
+            
+    except subprocess.TimeoutExpired:
+        return jsonify({'error': 'Compilation timeout (30s limit exceeded)'}), 408
+    except Exception as e:
+        return jsonify({'error': f'Server error: {str(e)}'}), 500
+    finally:
+        # Clean up temporary files
+        if temp_dir and os.path.exists(temp_dir):
+            try:
+                shutil.rmtree(temp_dir)
+            except Exception:
+                pass
+
+if __name__ == '__main__':
+    app.run(host='0.0.0.0', port=7860, debug=False)

index.html

@@ -0,0 +1,422 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>LaTeX Compiler - Modern PDF Generator</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+        
+        * {
+            font-family: 'Inter', sans-serif;
+        }
+        
+        .glass-effect {
+            background: rgba(255, 255, 255, 0.95);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.3);
+        }
+        
+        .gradient-bg {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        }
+        
+        .code-editor {
+            font-family: 'Courier New', monospace;
+            background: #1e1e1e;
+            color: #d4d4d4;
+        }
+        
+        .animate-fade-in {
+            animation: fadeIn 0.3s ease-in;
+        }
+        
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(-10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        
+        .btn-primary {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            transition: all 0.3s ease;
+        }
+        
+        .btn-primary:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
+        }
+        
+        .tab-active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+        }
+        
+        .tab-inactive {
+            background: #f3f4f6;
+            color: #6b7280;
+        }
+    </style>
+</head>
+<body class="min-h-screen gradient-bg">
+    <!-- Animated Background Pattern -->
+    <div class="fixed inset-0 opacity-10">
+        <div class="absolute inset-0" style="background-image: radial-gradient(circle at 2px 2px, white 1px, transparent 0); background-size: 40px 40px;"></div>
+    </div>
+
+    <div class="relative z-10 container mx-auto px-4 py-8 max-w-6xl">
+        <!-- Header -->
+        <div class="text-center mb-10">
+            <div class="inline-block mb-4">
+                <div class="text-6xl mb-2">📄</div>
+            </div>
+            <h1 class="text-5xl font-bold text-white mb-3 tracking-tight">LaTeX Compiler</h1>
+            <p class="text-xl text-purple-100 mb-4">Transform your LaTeX code into beautiful PDFs instantly</p>
+            <a href="/docs" class="inline-flex items-center text-white hover:text-purple-200 transition font-medium">
+                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                </svg>
+                API Documentation
+            </a>
+        </div>
+
+        <!-- Main Card -->
+        <div class="glass-effect rounded-2xl shadow-2xl overflow-hidden">
+            <!-- Tab Navigation -->
+            <div class="flex border-b border-gray-200 bg-gray-50">
+                <button onclick="showTextarea()" id="btnTextarea" class="flex-1 px-6 py-4 font-semibold transition tab-active">
+                    <div class="flex items-center justify-center">
+                        <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
+                        </svg>
+                        Write Code
+                    </div>
+                </button>
+                <button onclick="showFileUpload()" id="btnFile" class="flex-1 px-6 py-4 font-semibold transition tab-inactive">
+                    <div class="flex items-center justify-center">
+                        <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
+                        </svg>
+                        Upload File
+                    </div>
+                </button>
+            </div>
+
+            <div class="p-8">
+                <!-- Code Editor Section -->
+                <div id="textareaSection">
+                    <div class="mb-4 flex justify-between items-center">
+                        <label class="text-sm font-semibold text-gray-700">LaTeX Source Code</label>
+                        <button onclick="clearCode()" class="text-sm text-gray-500 hover:text-gray-700 transition">Clear</button>
+                    </div>
+                    <textarea id="latexCode" class="code-editor w-full h-96 p-4 rounded-xl border-2 border-gray-200 focus:border-purple-500 focus:ring-4 focus:ring-purple-200 transition-all resize-none" placeholder="% Start typing your LaTeX code...">% Beautiful LaTeX Document
+\documentclass[12pt]{article}
+\usepackage[utf8]{inputenc}
+\usepackage{amsmath}
+\usepackage{graphicx}
+\usepackage{xcolor}
+
+\title{\textbf{Professional LaTeX Document}}
+\author{LaTeX Compiler}
+\date{\today}
+
+\begin{document}
+
+\maketitle
+
+\begin{abstract}
+This is a professionally formatted LaTeX document demonstrating advanced typesetting capabilities.
+\end{abstract}
+
+\section{Introduction}
+Welcome to the world of \LaTeX! This powerful typesetting system enables you to create documents with exceptional quality.
+
+\section{Mathematical Excellence}
+Einstein's groundbreaking equation:
+\[
+E = mc^2
+\]
+
+\subsection{Advanced Mathematics}
+The Gaussian integral:
+\[
+\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
+\]
+
+Euler's identity, often called the most beautiful equation:
+\[
+e^{i\pi} + 1 = 0
+\]
+
+\section{Structured Content}
+\subsection{Key Features}
+\begin{itemize}
+    \item \textbf{Professional Typography:} Beautiful fonts and spacing
+    \item \textbf{Mathematical Typesetting:} Perfect equations every time
+    \item \textbf{Cross-referencing:} Automatic numbering and references
+    \item \textbf{Bibliography Support:} Manage citations effortlessly
+\end{itemize}
+
+\subsection{Quality Metrics}
+\begin{enumerate}
+    \item Document structure and organization
+    \item Visual consistency throughout
+    \item Professional appearance
+    \item Academic standards compliance
+\end{enumerate}
+
+\section{Conclusion}
+\LaTeX\ remains the gold standard for technical and academic document preparation, delivering unmatched quality and precision.
+
+\end{document}</textarea>
+                </div>
+
+                <!-- File Upload Section -->
+                <div id="fileSection" class="hidden">
+                    <div class="border-3 border-dashed border-purple-300 rounded-2xl p-12 text-center hover:border-purple-500 hover:bg-purple-50 transition-all cursor-pointer" onclick="document.getElementById('fileInput').click()">
+                        <input type="file" id="fileInput" accept=".tex" class="hidden" onchange="handleFileSelect(event)">
+                        <div class="mb-4">
+                            <svg class="mx-auto h-20 w-20 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
+                            </svg>
+                        </div>
+                        <p class="text-lg font-semibold text-gray-700 mb-2">Drop your .tex file here</p>
+                        <p class="text-sm text-gray-500 mb-4">or click to browse</p>
+                        <div class="inline-block px-6 py-2 bg-purple-100 text-purple-700 rounded-lg font-medium">
+                            Choose File
+                        </div>
+                        <p id="fileName" class="mt-6 text-base text-gray-700 font-semibold"></p>
+                    </div>
+                </div>
+
+                <!-- Compile Button -->
+                <div class="mt-8">
+                    <button onclick="compileLatex()" id="compileBtn" class="w-full btn-primary text-white py-4 px-8 rounded-xl font-bold text-lg shadow-xl flex items-center justify-center">
+                        <svg class="w-6 h-6 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
+                        </svg>
+                        Compile to PDF
+                    </button>
+                </div>
+
+                <!-- Status Messages -->
+                <div id="statusArea" class="hidden mt-6 animate-fade-in"></div>
+
+                <!-- Results -->
+                <div id="resultArea" class="hidden mt-6 animate-fade-in"></div>
+            </div>
+        </div>
+
+        <!-- Features Section -->
+        <div class="grid md:grid-cols-3 gap-6 mt-12">
+            <div class="glass-effect rounded-xl p-6 text-center">
+                <div class="text-4xl mb-3">⚡</div>
+                <h3 class="text-lg font-bold text-gray-800 mb-2">Lightning Fast</h3>
+                <p class="text-sm text-gray-600">Compile your documents in seconds with optimized pdflatex</p>
+            </div>
+            <div class="glass-effect rounded-xl p-6 text-center">
+                <div class="text-4xl mb-3">🔒</div>
+                <h3 class="text-lg font-bold text-gray-800 mb-2">Secure & Private</h3>
+                <p class="text-sm text-gray-600">Your documents are processed securely and deleted immediately</p>
+            </div>
+            <div class="glass-effect rounded-xl p-6 text-center">
+                <div class="text-4xl mb-3">📦</div>
+                <h3 class="text-lg font-bold text-gray-800 mb-2">Full TeX Live</h3>
+                <p class="text-sm text-gray-600">Access to complete LaTeX distribution with all packages</p>
+            </div>
+        </div>
+
+        <!-- Footer -->
+        <div class="text-center mt-12 text-white text-sm opacity-80">
+            <p>Powered by pdflatex • Open Source • Free Forever</p>
+        </div>
+    </div>
+
+    <script>
+        let selectedFile = null;
+
+        function showTextarea() {
+            document.getElementById('textareaSection').classList.remove('hidden');
+            document.getElementById('fileSection').classList.add('hidden');
+            document.getElementById('btnTextarea').className = 'flex-1 px-6 py-4 font-semibold transition tab-active';
+            document.getElementById('btnFile').className = 'flex-1 px-6 py-4 font-semibold transition tab-inactive';
+            selectedFile = null;
+        }
+
+        function showFileUpload() {
+            document.getElementById('textareaSection').classList.add('hidden');
+            document.getElementById('fileSection').classList.remove('hidden');
+            document.getElementById('btnFile').className = 'flex-1 px-6 py-4 font-semibold transition tab-active';
+            document.getElementById('btnTextarea').className = 'flex-1 px-6 py-4 font-semibold transition tab-inactive';
+        }
+
+        function clearCode() {
+            document.getElementById('latexCode').value = '';
+        }
+
+        function handleFileSelect(event) {
+            selectedFile = event.target.files[0];
+            if (selectedFile) {
+                document.getElementById('fileName').innerHTML = `
+                    <span class="inline-flex items-center">
+                        <svg class="w-5 h-5 mr-2 text-green-500" fill="currentColor" viewBox="0 0 20 20">
+                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
+                        </svg>
+                        ${selectedFile.name}
+                    </span>
+                `;
+            }
+        }
+
+        function showStatus(message, type = 'info') {
+            const statusArea = document.getElementById('statusArea');
+            statusArea.classList.remove('hidden');
+            
+            const styles = {
+                info: 'bg-blue-50 border-blue-200 text-blue-800',
+                success: 'bg-green-50 border-green-200 text-green-800',
+                error: 'bg-red-50 border-red-200 text-red-800',
+                warning: 'bg-yellow-50 border-yellow-200 text-yellow-800'
+            };
+            
+            const icons = {
+                info: '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>',
+                success: '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>',
+                error: '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>',
+                warning: '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>'
+            };
+            
+            statusArea.innerHTML = `
+                <div class="border-2 ${styles[type]} rounded-xl p-4 flex items-start">
+                    <svg class="w-6 h-6 mr-3 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        ${icons[type]}
+                    </svg>
+                    <p class="font-medium flex-1">${message}</p>
+                </div>
+            `;
+        }
+
+        function showResult(pdfBlob) {
+            const resultArea = document.getElementById('resultArea');
+            resultArea.classList.remove('hidden');
+            
+            const url = URL.createObjectURL(pdfBlob);
+            
+            resultArea.innerHTML = `
+                <div class="bg-gradient-to-r from-green-50 to-emerald-50 border-2 border-green-200 rounded-xl p-8 text-center">
+                    <div class="mb-6">
+                        <svg class="mx-auto h-16 w-16 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                        </svg>
+                    </div>
+                    <h3 class="text-2xl font-bold text-green-800 mb-2">Success!</h3>
+                    <p class="text-green-700 mb-6">Your PDF has been compiled successfully</p>
+                    <div class="flex flex-wrap gap-4 justify-center">
+                        <a href="${url}" download="compiled.pdf" class="inline-flex items-center px-8 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition font-semibold shadow-lg hover:shadow-xl">
+                            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
+                            </svg>
+                            Download PDF
+                        </a>
+                        <a href="${url}" target="_blank" class="inline-flex items-center px-8 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition font-semibold shadow-lg hover:shadow-xl">
+                            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
+                            </svg>
+                            Preview
+                        </a>
+                    </div>
+                </div>
+            `;
+        }
+
+        function showError(errorMsg, log) {
+            const resultArea = document.getElementById('resultArea');
+            resultArea.classList.remove('hidden');
+            
+            resultArea.innerHTML = `
+                <div class="bg-red-50 border-2 border-red-200 rounded-xl p-8">
+                    <div class="flex items-start mb-4">
+                        <svg class="h-8 w-8 text-red-500 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                        </svg>
+                        <div class="flex-1">
+                            <h3 class="text-xl font-bold text-red-800 mb-2">Compilation Failed</h3>
+                            <p class="text-red-700 mb-4">${errorMsg}</p>
+                            ${log ? `
+                                <details class="bg-white rounded-lg border-2 border-red-200 p-4 cursor-pointer hover:border-red-300 transition">
+                                    <summary class="font-semibold text-red-800 hover:text-red-900">View Error Log</summary>
+                                    <pre class="mt-4 text-xs text-gray-700 overflow-x-auto whitespace-pre-wrap max-h-80 overflow-y-auto p-3 bg-gray-50 rounded">${log}</pre>
+                                </details>
+                            ` : ''}
+                        </div>
+                    </div>
+                </div>
+            `;
+        }
+
+        async function compileLatex() {
+            const compileBtn = document.getElementById('compileBtn');
+            compileBtn.disabled = true;
+            compileBtn.innerHTML = `
+                <svg class="animate-spin w-6 h-6 mr-3" fill="none" viewBox="0 0 24 24">
+                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                </svg>
+                Compiling...
+            `;
+            
+            showStatus('🔄 Compiling your LaTeX document...', 'info');
+            document.getElementById('resultArea').classList.add('hidden');
+
+            try {
+                let response;
+                
+                if (!document.getElementById('textareaSection').classList.contains('hidden')) {
+                    const code = document.getElementById('latexCode').value;
+                    
+                    if (!code.trim()) {
+                        showStatus('⚠️ Please enter some LaTeX code', 'warning');
+                        compileBtn.disabled = false;
+                        compileBtn.innerHTML = '<svg class="w-6 h-6 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>Compile to PDF';
+                        return;
+                    }
+                    
+                    response = await fetch('/compile', {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({ code: code })
+                    });
+                } else {
+                    if (!selectedFile) {
+                        showStatus('⚠️ Please select a .tex file', 'warning');
+                        compileBtn.disabled = false;
+                        compileBtn.innerHTML = '<svg class="w-6 h-6 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>Compile to PDF';
+                        return;
+                    }
+                    
+                    const formData = new FormData();
+                    formData.append('file', selectedFile);
+                    response = await fetch('/compile', { method: 'POST', body: formData });
+                }
+
+                if (response.ok) {
+                    const blob = await response.blob();
+                    showStatus('✅ Compilation successful!', 'success');
+                    showResult(blob);
+                } else {
+                    const error = await response.json();
+                    showStatus('❌ Compilation failed', 'error');
+                    showError(error.error, error.log);
+                }
+            } catch (error) {
+                showStatus('❌ Network error', 'error');
+                showError('Failed to connect to server: ' + error.message);
+            } finally {
+                compileBtn.disabled = false;
+                compileBtn.innerHTML = '<svg class="w-6 h-6 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>Compile to PDF';
+            }
+        }
+    </script>
+</body>
+</html>