diff --git a/.gitattributes b/.gitattributes
index a6344aac8c09253b3b630fb776ae94478aa0275b..62bb4e28baf63f68e1fb89b8a7f88ac69d039d51 100644
--- a/.gitattributes
+++ b/.gitattributes
@@ -33,3 +33,30 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+static/uploads/Assignment_1_Solution.pdf filter=lfs diff=lfs merge=lfs -text
+static/uploads/b0d6064f-3245-40bc-87b5-bfbb459979fd.jpeg filter=lfs diff=lfs merge=lfs -text
+static/uploads/capture.jpg filter=lfs diff=lfs merge=lfs -text
+static/uploads/CSE331.pdf filter=lfs diff=lfs merge=lfs -text
+static/uploads/input2.png filter=lfs diff=lfs merge=lfs -text
+static/uploads/math_formula_sheet.pdf filter=lfs diff=lfs merge=lfs -text
+static/uploads/page_10.png filter=lfs diff=lfs merge=lfs -text
+static/uploads/page_11.png filter=lfs diff=lfs merge=lfs -text
+static/uploads/page_2.png filter=lfs diff=lfs merge=lfs -text
+static/uploads/page_3.png filter=lfs diff=lfs merge=lfs -text
+static/uploads/page_4.png filter=lfs diff=lfs merge=lfs -text
+static/uploads/page_5.png filter=lfs diff=lfs merge=lfs -text
+static/uploads/page_6.png filter=lfs diff=lfs merge=lfs -text
+static/uploads/page_7.png filter=lfs diff=lfs merge=lfs -text
+static/uploads/page_8.png filter=lfs diff=lfs merge=lfs -text
+static/uploads/page_9.png filter=lfs diff=lfs merge=lfs -text
+static/uploads/table_26.png filter=lfs diff=lfs merge=lfs -text
+static/uploads/table_27.png filter=lfs diff=lfs merge=lfs -text
+static/uploads/table_28.png filter=lfs diff=lfs merge=lfs -text
+static/uploads/table_29.png filter=lfs diff=lfs merge=lfs -text
+static/uploads/table_30.png filter=lfs diff=lfs merge=lfs -text
+static/uploads/table_31.png filter=lfs diff=lfs merge=lfs -text
+static/uploads/table_32.png filter=lfs diff=lfs merge=lfs -text
+static/uploads/table_33.png filter=lfs diff=lfs merge=lfs -text
+static/uploads/table_34.png filter=lfs diff=lfs merge=lfs -text
+static/uploads/table_35.png filter=lfs diff=lfs merge=lfs -text
+static/uploads/WhatsApp[[:space:]]Image[[:space:]]2025-10-26[[:space:]]at[[:space:]]01.38.22_3d87e144.jpg filter=lfs diff=lfs merge=lfs -text
diff --git a/controller/__init__.py b/controller/__init__.py
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/controller/__pycache__/__init__.cpython-311.pyc b/controller/__pycache__/__init__.cpython-311.pyc
new file mode 100644
index 0000000000000000000000000000000000000000..f88637e5126ddd6b1e42bdd939dc2131726b5e11
Binary files /dev/null and b/controller/__pycache__/__init__.cpython-311.pyc differ
diff --git a/controller/__pycache__/__init__.cpython-313.pyc b/controller/__pycache__/__init__.cpython-313.pyc
new file mode 100644
index 0000000000000000000000000000000000000000..f44cae0084140be4abbde073782d8922059e6d56
Binary files /dev/null and b/controller/__pycache__/__init__.cpython-313.pyc differ
diff --git a/controller/__pycache__/auth_controller.cpython-311.pyc b/controller/__pycache__/auth_controller.cpython-311.pyc
new file mode 100644
index 0000000000000000000000000000000000000000..d4de80028fb126d78001140164a28f070eef19a7
Binary files /dev/null and b/controller/__pycache__/auth_controller.cpython-311.pyc differ
diff --git a/controller/__pycache__/auth_controller.cpython-313.pyc b/controller/__pycache__/auth_controller.cpython-313.pyc
new file mode 100644
index 0000000000000000000000000000000000000000..e1d9b194311f9235fae976688d7635e4fbb8b292
Binary files /dev/null and b/controller/__pycache__/auth_controller.cpython-313.pyc differ
diff --git a/controller/__pycache__/bbbb.cpython-311.pyc b/controller/__pycache__/bbbb.cpython-311.pyc
new file mode 100644
index 0000000000000000000000000000000000000000..623492c524928302527966b3d6b813f226aa77f5
Binary files /dev/null and b/controller/__pycache__/bbbb.cpython-311.pyc differ
diff --git a/controller/__pycache__/chat_controller.cpython-313.pyc b/controller/__pycache__/chat_controller.cpython-313.pyc
new file mode 100644
index 0000000000000000000000000000000000000000..52e1c458fc9bf16e26eda2ca2d66ac58c3a9e93d
Binary files /dev/null and b/controller/__pycache__/chat_controller.cpython-313.pyc differ
diff --git a/controller/__pycache__/graph_controller.cpython-311.pyc b/controller/__pycache__/graph_controller.cpython-311.pyc
new file mode 100644
index 0000000000000000000000000000000000000000..b1aa6b071de60530e04778863d6f391ca30a34f7
Binary files /dev/null and b/controller/__pycache__/graph_controller.cpython-311.pyc differ
diff --git a/controller/__pycache__/graph_controller.cpython-313.pyc b/controller/__pycache__/graph_controller.cpython-313.pyc
new file mode 100644
index 0000000000000000000000000000000000000000..459f6e8f2e2b401ab50fccbf897b1884b10335db
Binary files /dev/null and b/controller/__pycache__/graph_controller.cpython-313.pyc differ
diff --git a/controller/__pycache__/latex_to_text_controller.cpython-313.pyc b/controller/__pycache__/latex_to_text_controller.cpython-313.pyc
new file mode 100644
index 0000000000000000000000000000000000000000..dc23615535549c750f8a490a578d4b4708192673
Binary files /dev/null and b/controller/__pycache__/latex_to_text_controller.cpython-313.pyc differ
diff --git a/controller/__pycache__/mathcamera_controller.cpython-311.pyc b/controller/__pycache__/mathcamera_controller.cpython-311.pyc
new file mode 100644
index 0000000000000000000000000000000000000000..d800fa4308e021fe65de40ea583bb0990d6312d3
Binary files /dev/null and b/controller/__pycache__/mathcamera_controller.cpython-311.pyc differ
diff --git a/controller/__pycache__/pdf_controller.cpython-311.pyc b/controller/__pycache__/pdf_controller.cpython-311.pyc
new file mode 100644
index 0000000000000000000000000000000000000000..bee4b02157e6b29bc6bcdd630a065a013a2ea3c2
Binary files /dev/null and b/controller/__pycache__/pdf_controller.cpython-311.pyc differ
diff --git a/controller/__pycache__/pdf_controller.cpython-313.pyc b/controller/__pycache__/pdf_controller.cpython-313.pyc
new file mode 100644
index 0000000000000000000000000000000000000000..a3a2685a9528ededddf6149c648f31e00bb7d402
Binary files /dev/null and b/controller/__pycache__/pdf_controller.cpython-313.pyc differ
diff --git a/controller/__pycache__/pdffly_controller.cpython-311.pyc b/controller/__pycache__/pdffly_controller.cpython-311.pyc
new file mode 100644
index 0000000000000000000000000000000000000000..c03eefe8e7ddff630571ee5a1ceb446d5f7a1016
Binary files /dev/null and b/controller/__pycache__/pdffly_controller.cpython-311.pyc differ
diff --git a/controller/__pycache__/pdffly_controller.cpython-313.pyc b/controller/__pycache__/pdffly_controller.cpython-313.pyc
new file mode 100644
index 0000000000000000000000000000000000000000..4704d7181d3b0c581fb0d3824df04d7c96ed409f
Binary files /dev/null and b/controller/__pycache__/pdffly_controller.cpython-313.pyc differ
diff --git a/controller/__pycache__/pdflly_controller.cpython-311.pyc b/controller/__pycache__/pdflly_controller.cpython-311.pyc
new file mode 100644
index 0000000000000000000000000000000000000000..4af8d135f31d25d44ba49c6dc7ebfcc12746178f
Binary files /dev/null and b/controller/__pycache__/pdflly_controller.cpython-311.pyc differ
diff --git a/controller/__pycache__/pdflly_controller.cpython-313.pyc b/controller/__pycache__/pdflly_controller.cpython-313.pyc
new file mode 100644
index 0000000000000000000000000000000000000000..a941113797077ccb6085f2df873f264caaa28eff
Binary files /dev/null and b/controller/__pycache__/pdflly_controller.cpython-313.pyc differ
diff --git a/controller/__pycache__/pix2text_controller.cpython-311.pyc b/controller/__pycache__/pix2text_controller.cpython-311.pyc
new file mode 100644
index 0000000000000000000000000000000000000000..92ed48528a491a62aed8c948fad785d39e039b1a
Binary files /dev/null and b/controller/__pycache__/pix2text_controller.cpython-311.pyc differ
diff --git a/controller/__pycache__/pix2text_controller.cpython-313.pyc b/controller/__pycache__/pix2text_controller.cpython-313.pyc
new file mode 100644
index 0000000000000000000000000000000000000000..32b06852a27a9cf6549c2308b68e3d86eb18e111
Binary files /dev/null and b/controller/__pycache__/pix2text_controller.cpython-313.pyc differ
diff --git a/controller/__pycache__/scribble_controller.cpython-311.pyc b/controller/__pycache__/scribble_controller.cpython-311.pyc
new file mode 100644
index 0000000000000000000000000000000000000000..55d31b15cf3211a906c1060edf5f24bbb718d8d8
Binary files /dev/null and b/controller/__pycache__/scribble_controller.cpython-311.pyc differ
diff --git a/controller/__pycache__/scribble_controller.cpython-313.pyc b/controller/__pycache__/scribble_controller.cpython-313.pyc
new file mode 100644
index 0000000000000000000000000000000000000000..44379a21c8b68761ee96950e2cdd676861a9a6de
Binary files /dev/null and b/controller/__pycache__/scribble_controller.cpython-313.pyc differ
diff --git a/controller/__pycache__/table_controller.cpython-311.pyc b/controller/__pycache__/table_controller.cpython-311.pyc
new file mode 100644
index 0000000000000000000000000000000000000000..87dc4d9c7328e9f529a65d83eebac1337372162b
Binary files /dev/null and b/controller/__pycache__/table_controller.cpython-311.pyc differ
diff --git a/controller/__pycache__/table_controller.cpython-313.pyc b/controller/__pycache__/table_controller.cpython-313.pyc
new file mode 100644
index 0000000000000000000000000000000000000000..ed560416aa00c3299f47cc5da0e5925f090939be
Binary files /dev/null and b/controller/__pycache__/table_controller.cpython-313.pyc differ
diff --git a/controller/auth_controller.py b/controller/auth_controller.py
new file mode 100644
index 0000000000000000000000000000000000000000..ddca16f3e59b00f6fb366aea01cb3b0119982585
--- /dev/null
+++ b/controller/auth_controller.py
@@ -0,0 +1,97 @@
+import os
+import time
+from flask import Blueprint, render_template, request, jsonify, redirect, url_for, session, current_app
+from flask_login import LoginManager, login_user, logout_user, login_required, current_user
+import requests
+from models.user import User
+
+auth_bp = Blueprint('auth', __name__)
+
+# Google OAuth configuration (these would normally come from environment variables)
+GOOGLE_CLIENT_ID = os.environ.get('GOOGLE_CLIENT_ID', 'your-google-client-id')
+GOOGLE_CLIENT_SECRET = os.environ.get('GOOGLE_CLIENT_SECRET', 'your-google-client-secret')
+GOOGLE_REDIRECT_URI = os.environ.get('GOOGLE_REDIRECT_URI', 'http://localhost:5000/auth/google/callback')
+
+# Initialize login manager
+login_manager = LoginManager()
+
+def init_app(app):
+    """Initialize the login manager with the app"""
+    login_manager.init_app(app)
+    # Set login view - using setattr to avoid type checking issues
+    setattr(login_manager, 'login_view', 'auth.login')
+    return login_manager
+
+@login_manager.user_loader
+def load_user(user_id):
+    return User.get(user_id)
+
+
+@auth_bp.route("/login")
+def login():
+    """Display the login page"""
+    return render_template('login.html')
+
+
+@auth_bp.route("/google/login")
+def google_login():
+    """Redirect to Google OAuth login"""
+    # In a real implementation, you would redirect to Google's OAuth endpoint
+    # For now, we'll create a dummy user for testing
+    user = User.create_or_update(
+        id="google_user_123",
+        email="user@gmail.com",
+        name="Google User",
+        picture=None
+    )
+    
+    if user:
+        login_user(user)
+        return redirect(url_for('index'))
+    else:
+        return "Failed to create user", 500
+
+
+@auth_bp.route("/guest/login", methods=['POST'])
+def guest_login():
+    """Login as a guest user"""
+    name = request.form.get('name')
+    if not name:
+        return "Name is required", 400
+    
+    # Create a guest user
+    user = User.create_or_update(
+        id=f"guest_{name.lower().replace(' ', '_')}_{int(time.time())}",
+        email=f"{name.lower().replace(' ', '.')}@guest.texlab.com",
+        name=name,
+        picture=None
+    )
+    
+    if user:
+        login_user(user)
+        return redirect(url_for('index'))
+    else:
+        return "Failed to create user", 500
+
+
+@auth_bp.route("/logout")
+@login_required
+def logout():
+    logout_user()
+    return redirect(url_for('auth.login'))
+
+
+@auth_bp.route("/user")
+def get_current_user():
+    if current_user.is_authenticated:
+        return jsonify({
+            'authenticated': True,
+            'user': {
+                'id': current_user.id,
+                'email': current_user.email,
+                'name': current_user.name,
+                'picture': current_user.picture
+            }
+        })
+    else:
+        return jsonify({'authenticated': False})
\ No newline at end of file
diff --git a/controller/graph_controller.py b/controller/graph_controller.py
new file mode 100644
index 0000000000000000000000000000000000000000..e188abd7564b6a307fb1600936a14a45cbd38d81
--- /dev/null
+++ b/controller/graph_controller.py
@@ -0,0 +1,189 @@
+import os
+from flask import Blueprint, render_template, request, jsonify
+import numpy as np
+import matplotlib
+matplotlib.use('Agg')  # Use non-interactive backend
+import matplotlib.pyplot as plt
+import base64
+from io import BytesIO
+import re
+
+graph_bp = Blueprint('graph_bp', __name__)
+
+UPLOAD_FOLDER = 'static/uploads'
+GRAPHS_FOLDER = 'static/graphs'
+os.makedirs(UPLOAD_FOLDER, exist_ok=True)
+os.makedirs(GRAPHS_FOLDER, exist_ok=True)
+
+
+def parse_plot_command(command):
+    """Parse plot command and extract function and range"""
+    # Remove extra spaces
+    command = command.strip()
+    
+    # Match patterns like "plot x^2 from -5 to 5" or "plot sin(x) from 0 to 2*pi"
+    pattern = r"plot\s+(.+?)\s+from\s+(-?[\d\*\.pi]+)\s+to\s+(-?[\d\*\.pi]+)"
+    match = re.match(pattern, command, re.IGNORECASE)
+    
+    if match:
+        function = match.group(1)
+        x_min = match.group(2)
+        x_max = match.group(3)
+        
+        # Convert pi expressions
+        x_min = x_min.replace('pi', 'np.pi')
+        x_max = x_max.replace('pi', 'np.pi')
+        
+        try:
+            x_min_val = eval(x_min)
+            x_max_val = eval(x_max)
+            return function, x_min_val, x_max_val
+        except:
+            raise ValueError("Invalid range values")
+    
+    # Match simpler patterns like "plot x^2"
+    simple_pattern = r"plot\s+(.+)"
+    simple_match = re.match(simple_pattern, command, re.IGNORECASE)
+    
+    if simple_match:
+        function = simple_match.group(1)
+        return function, -10, 10  # Default range
+    
+    raise ValueError("Invalid plot command format")
+
+
+def evaluate_function(func_str, x):
+    """Safely evaluate mathematical function"""
+    # Replace common math functions
+    func_str = func_str.replace('^', '**')
+    func_str = func_str.replace('sin', 'np.sin')
+    func_str = func_str.replace('cos', 'np.cos')
+    func_str = func_str.replace('tan', 'np.tan')
+    func_str = func_str.replace('log', 'np.log')
+    func_str = func_str.replace('exp', 'np.exp')
+    func_str = func_str.replace('sqrt', 'np.sqrt')
+    func_str = func_str.replace('abs', 'np.abs')
+    
+    # Replace x with the actual value
+    func_str = func_str.replace('x', f'({x})')
+    
+    try:
+        return eval(func_str)
+    except:
+        raise ValueError(f"Error evaluating function: {func_str}")
+
+
+def generate_tikz_latex(function, x_min, x_max):
+    """Generate TikZ/pgfplots LaTeX code for the function"""
+    # Convert function to pgfplots format
+    pgf_function = function.replace('^', '^')
+    pgf_function = pgf_function.replace('sqrt', 'sqrt')
+    
+    # Create complete LaTeX document with TikZ/pgfplots
+    latex_code = r'''\documentclass{article}
+\usepackage{pgfplots}
+\usepackage{amsmath}
+\pgfplotsset{compat=1.18}
+
+\begin{document}
+
+\begin{figure}[h]
+\centering
+\begin{tikzpicture}
+\begin{axis}[
+    xlabel={$x$},
+    ylabel={$y$},
+    grid=major,
+    width=12cm,
+    height=8cm,
+    samples=200,
+    domain=''' + f"{x_min}:{x_max}" + r''',
+    legend pos=north west,
+    axis lines=middle,
+]
+\addplot[blue, thick] {''' + pgf_function + r'''};
+\legend{$f(x)=''' + function + r'''$}
+\end{axis}
+\end{tikzpicture}
+\caption{Graph of $f(x) = ''' + function + r'''$}
+\label{fig:graph}
+\end{figure}
+
+\end{document}'''
+    
+    return latex_code
+
+
+def generate_plot(function, x_min, x_max):
+    """Generate plot and return base64 image"""
+    try:
+        # Create x values
+        x = np.linspace(x_min, x_max, 1000)
+        
+        # Evaluate function for all x values
+        y = []
+        for xi in x:
+            try:
+                yi = evaluate_function(function, xi)
+                y.append(yi)
+            except:
+                y.append(np.nan)  # Handle undefined points
+        
+        y = np.array(y)
+        
+        # Create plot
+        plt.figure(figsize=(10, 6))
+        plt.plot(x, y, linewidth=2, color='#667eea')
+        plt.grid(True, alpha=0.3)
+        plt.xlabel('x')
+        plt.ylabel('y')
+        plt.title(f'Graph of f(x) = {function}')
+        
+        # Save to base64 string
+        buffer = BytesIO()
+        plt.savefig(buffer, format='png', dpi=150, bbox_inches='tight')
+        buffer.seek(0)
+        image_base64 = base64.b64encode(buffer.getvalue()).decode()
+        plt.close()
+        
+        return image_base64
+    except Exception as e:
+        raise ValueError(f"Error generating plot: {str(e)}")
+
+
+@graph_bp.route("/graph")
+def graph_page():
+    return render_template("graph.html")
+
+
+@graph_bp.route("/graph/generate", methods=["POST"])
+def generate_graph():
+    """Generate graph from user input"""
+    try:
+        data = request.get_json()
+        if not data:
+            return jsonify({'error': 'No data provided'}), 400
+        
+        command = data.get('command', '')
+        if not command:
+            return jsonify({'error': 'No command provided'}), 400
+        
+        # Parse the command
+        function, x_min, x_max = parse_plot_command(command)
+        
+        # Generate the plot image
+        image_base64 = generate_plot(function, x_min, x_max)
+        
+        # Generate TikZ/pgfplots LaTeX code
+        latex_code = generate_tikz_latex(function, x_min, x_max)
+        
+        return jsonify({
+            'success': True,
+            'image': image_base64,
+            'function': function,
+            'range': f'[{x_min}, {x_max}]',
+            'latex': latex_code
+        })
+        
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
\ No newline at end of file
diff --git a/controller/models/__init__.py b/controller/models/__init__.py
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/controller/models/__pycache__/__init__.cpython-311.pyc b/controller/models/__pycache__/__init__.cpython-311.pyc
new file mode 100644
index 0000000000000000000000000000000000000000..5b057a2f03373d7985ccafeda66a0ee14c27800f
Binary files /dev/null and b/controller/models/__pycache__/__init__.cpython-311.pyc differ
diff --git a/controller/models/__pycache__/__init__.cpython-313.pyc b/controller/models/__pycache__/__init__.cpython-313.pyc
new file mode 100644
index 0000000000000000000000000000000000000000..5fbba3fd89ab4ce3bb338afd59aba6784432d20b
Binary files /dev/null and b/controller/models/__pycache__/__init__.cpython-313.pyc differ
diff --git a/controller/models/__pycache__/camera_to_latex.cpython-311.pyc b/controller/models/__pycache__/camera_to_latex.cpython-311.pyc
new file mode 100644
index 0000000000000000000000000000000000000000..6d8f3f9411b26d6bc826643385bd5ab0bd30aa22
Binary files /dev/null and b/controller/models/__pycache__/camera_to_latex.cpython-311.pyc differ
diff --git a/controller/models/__pycache__/camera_to_latex.cpython-313.pyc b/controller/models/__pycache__/camera_to_latex.cpython-313.pyc
new file mode 100644
index 0000000000000000000000000000000000000000..9d2d5a7431951e489db76aabc68bdcb3423c5754
Binary files /dev/null and b/controller/models/__pycache__/camera_to_latex.cpython-313.pyc differ
diff --git a/controller/models/__pycache__/math_equation.cpython-311.pyc b/controller/models/__pycache__/math_equation.cpython-311.pyc
new file mode 100644
index 0000000000000000000000000000000000000000..c67bdbc13afb0fe9b1191505ff7ad18db204b26b
Binary files /dev/null and b/controller/models/__pycache__/math_equation.cpython-311.pyc differ
diff --git a/controller/models/__pycache__/math_equation.cpython-313.pyc b/controller/models/__pycache__/math_equation.cpython-313.pyc
new file mode 100644
index 0000000000000000000000000000000000000000..4f1b13b9f7066d3e0908578e918642248d949628
Binary files /dev/null and b/controller/models/__pycache__/math_equation.cpython-313.pyc differ
diff --git a/controller/models/__pycache__/scribble_to_latex.cpython-311.pyc b/controller/models/__pycache__/scribble_to_latex.cpython-311.pyc
new file mode 100644
index 0000000000000000000000000000000000000000..9c1cc1b2b0bd26d7e4429285e6f0f03322dcf70b
Binary files /dev/null and b/controller/models/__pycache__/scribble_to_latex.cpython-311.pyc differ
diff --git a/controller/models/__pycache__/scribble_to_latex.cpython-313.pyc b/controller/models/__pycache__/scribble_to_latex.cpython-313.pyc
new file mode 100644
index 0000000000000000000000000000000000000000..292a8c46dfd9f39310d02da0ee5e1c10319fc92e
Binary files /dev/null and b/controller/models/__pycache__/scribble_to_latex.cpython-313.pyc differ
diff --git a/controller/models/camera_to_latex.py b/controller/models/camera_to_latex.py
new file mode 100644
index 0000000000000000000000000000000000000000..9d575ecdf3028cc6b8a41b38e570f9b2ad4fd45f
--- /dev/null
+++ b/controller/models/camera_to_latex.py
@@ -0,0 +1,29 @@
+# controller/models/camera_to_latex.py
+
+import base64
+import io
+from PIL import Image
+from transformers import TrOCRProcessor
+from optimum.onnxruntime import ORTModelForVision2Seq
+
+print("🔹 Loading Pix2Text model for Camera → LaTeX...")
+
+processor = TrOCRProcessor.from_pretrained("breezedeus/pix2text-mfr")
+model = ORTModelForVision2Seq.from_pretrained("breezedeus/pix2text-mfr", use_cache=False)
+
+
+def camera_to_latex(image_base64: str) -> str:
+    try:
+        # Remove header (e.g., "data:image/png;base64,")
+        image_data = image_base64.split(",")[1]
+        image_bytes = base64.b64decode(image_data)
+        image = Image.open(io.BytesIO(image_bytes)).convert("RGB")
+
+        pixel_values = processor(images=image, return_tensors="pt").pixel_values
+        generated_ids = model.generate(pixel_values)
+        text = processor.batch_decode(generated_ids, skip_special_tokens=True)[0]
+
+        return text.strip()
+    except Exception as e:
+        print(f"❌ Error in camera_to_latex: {e}")
+        return "⚠️ Error generating LaTeX"
diff --git a/controller/models/math_equation.py b/controller/models/math_equation.py
new file mode 100644
index 0000000000000000000000000000000000000000..d98248affb0969e42a8d27dfd08aae4be8160c56
--- /dev/null
+++ b/controller/models/math_equation.py
@@ -0,0 +1,37 @@
+from flask import Flask, request, jsonify, render_template
+import os
+from werkzeug.utils import secure_filename
+from pix2text import Pix2Text  # Make sure you installed it
+from PIL import Image
+
+app = Flask(__name__)
+app.config['UPLOAD_FOLDER'] = 'static/uploads'
+app.config['ALLOWED_EXTENSIONS'] = {'png', 'jpg', 'jpeg', 'gif'}
+
+p2t = Pix2Text()  # Load Pix2Text model
+
+def allowed_file(filename):
+    return '.' in filename and filename.rsplit('.', 1)[1].lower() in app.config['ALLOWED_EXTENSIONS']
+
+@app.route('/math/process', methods=['POST'])
+def process_math():
+    if 'image' not in request.files:
+        return jsonify({'success': False, 'error': 'No file part'})
+
+    file = request.files['image']
+    if file.filename == '':
+        return jsonify({'success': False, 'error': 'No selected file'})
+
+    if file and allowed_file(file.filename):
+        filename = secure_filename(file.filename)
+        filepath = os.path.join(app.config['UPLOAD_FOLDER'], filename)
+        os.makedirs(app.config['UPLOAD_FOLDER'], exist_ok=True)
+        file.save(filepath)
+
+        try:
+            result = p2t(Image.open(filepath))  # Convert image → LaTeX
+            return jsonify({'success': True, 'latex': result, 'image_path': filepath})
+        except Exception as e:
+            return jsonify({'success': False, 'error': str(e)})
+    else:
+        return jsonify({'success': False, 'error': 'Invalid file type'})
diff --git a/controller/models/scribble_to_latex.py b/controller/models/scribble_to_latex.py
new file mode 100644
index 0000000000000000000000000000000000000000..6216995dccee735247753c06aa8a59cc0efbc7fb
--- /dev/null
+++ b/controller/models/scribble_to_latex.py
@@ -0,0 +1,22 @@
+# controller/models/scribble_to_latex.py
+import base64
+from io import BytesIO
+from PIL import Image
+from .math_equation import image_to_latex  # reuse your existing pix2tex model
+
+def scribble_to_latex(image_data: str):
+    """
+    Convert scribble (base64 PNG) to LaTeX using Pix2Text model.
+    """
+    try:
+        # Decode base64 image
+        image_bytes = base64.b64decode(image_data.split(',')[1])
+        image = Image.open(BytesIO(image_bytes)).convert("RGB")
+
+        # Call your existing model
+        latex_code = image_to_latex(image)
+
+        return latex_code.strip()
+    except Exception as e:
+        print(f"❌ Error in scribble_to_latex: {e}")
+        return "⚠️ Failed to process scribble"
diff --git a/controller/pdf_controller.py b/controller/pdf_controller.py
new file mode 100644
index 0000000000000000000000000000000000000000..65709b8ede048bf2ac6f148006a296d210153ea9
--- /dev/null
+++ b/controller/pdf_controller.py
@@ -0,0 +1,166 @@
+import os
+import json
+import base64
+import io
+from flask import Blueprint, request, render_template, jsonify, current_app
+import fitz  # PyMuPDF
+import PyPDF2
+from PIL import Image
+import tempfile
+
+pdf_bp = Blueprint('pdf', __name__, url_prefix='/pdf')
+
+def extract_text_from_pdf(filepath, page_number=None, coordinates=None):
+    """Extract text from PDF using PyMuPDF for better accuracy"""
+    try:
+        doc = fitz.open(filepath)
+        
+        if page_number is not None:
+            # Extract from specific page
+            page = doc[page_number]
+            
+            if coordinates:
+                # Extract text from specific area
+                x, y, width, height = coordinates
+                rect = fitz.Rect(x, y, x + width, y + height)
+                text = page.get_text("text", clip=rect)
+            else:
+                # Extract text from entire page
+                text = page.get_text("text")
+        else:
+            # Extract from entire document
+            text = ""
+            for page in doc:
+                text += page.get_text("text")
+        
+        doc.close()
+        return text.strip()
+    except Exception as e:
+        print(f"Error extracting text with PyMuPDF: {e}")
+        # Fallback to PyPDF2
+        return extract_text_with_pypdf2(filepath, page_number, coordinates)
+
+def extract_text_with_pypdf2(filepath, page_number=None, coordinates=None):
+    """Fallback text extraction using PyPDF2"""
+    try:
+        with open(filepath, 'rb') as file:
+            reader = PyPDF2.PdfReader(file)
+            
+            if page_number is not None and page_number < len(reader.pages):
+                page = reader.pages[page_number]
+                return page.extract_text()
+            else:
+                text = ""
+                for page in reader.pages:
+                    text += page.extract_text()
+                return text
+    except Exception as e:
+        return f"Error extracting text: {str(e)}"
+
+def convert_text_to_latex(text):
+    """Simple conversion of text to LaTeX format"""
+    # This is a placeholder implementation
+    # In a real application, you would use an AI model to convert text to LaTeX
+    return text.replace('\\', '\\\\').replace('_', '\\_').replace('^', '\\^').replace('&', '\\&')
+
+@pdf_bp.route('/')
+def pdf_converter():
+    """Render the PDF converter page"""
+    return render_template('pdf.html')
+
+@pdf_bp.route('/upload', methods=['POST'])
+def upload_pdf():
+    """Handle PDF file upload"""
+    if 'pdf_file' not in request.files:
+        return jsonify({'success': False, 'error': 'No file provided'})
+    
+    file = request.files['pdf_file']
+    
+    if file.filename == '':
+        return jsonify({'success': False, 'error': 'No file selected'})
+    
+    if file and file.filename.lower().endswith('.pdf'):
+        try:
+            # Save file temporarily
+            temp_dir = tempfile.gettempdir()
+            filename = file.filename
+            filepath = os.path.join(temp_dir, filename)
+            file.save(filepath)
+            
+            # Get page count
+            with open(filepath, 'rb') as f:
+                reader = PyPDF2.PdfReader(f)
+                page_count = len(reader.pages)
+            
+            return jsonify({
+                'success': True,
+                'filename': filename,
+                'filepath': filepath,
+                'pages': page_count
+            })
+        except Exception as e:
+            return jsonify({'success': False, 'error': f'Upload failed: {str(e)}'})
+    
+    return jsonify({'success': False, 'error': 'Invalid file type. Please upload a PDF file.'})
+
+@pdf_bp.route('/process', methods=['POST'])
+def process_pdf():
+    """Process PDF and convert to LaTeX"""
+    try:
+        data = request.get_json()
+        filename = data.get('filename')
+        coordinates = data.get('coordinates')
+        page = data.get('page', 0)
+        convert_all = data.get('convert_all', False)
+        
+        if not filename:
+            return jsonify({'success': False, 'error': 'No filename provided'})
+        
+        # Get file path
+        temp_dir = tempfile.gettempdir()
+        filepath = os.path.join(temp_dir, filename)
+        
+        if not os.path.exists(filepath):
+            return jsonify({'success': False, 'error': 'File not found'})
+        
+        if convert_all:
+            # Convert entire PDF
+            text = extract_text_from_pdf(filepath)
+        elif coordinates:
+            # Convert selected area
+            text = extract_text_from_pdf(filepath, page, coordinates)
+        else:
+            # Convert specific page
+            text = extract_text_from_pdf(filepath, page)
+        
+        # Convert to LaTeX (placeholder)
+        latex = convert_text_to_latex(text)
+        
+        return jsonify({
+            'success': True,
+            'latex': latex,
+            'text': text
+        })
+    except Exception as e:
+        return jsonify({'success': False, 'error': f'Processing failed: {str(e)}'})
+
+@pdf_bp.route('/solve', methods=['POST'])
+def solve_equation():
+    """Solve mathematical equations in LaTeX"""
+    try:
+        data = request.get_json()
+        latex = data.get('latex', '')
+        
+        # This is a placeholder implementation
+        # In a real application, you would use SymPy or similar library
+        solution = {
+            'type': 'expression',
+            'result': f"Simplified: {latex}"
+        }
+        
+        return jsonify({
+            'success': True,
+            'solution': solution
+        })
+    except Exception as e:
+        return jsonify({'success': False, 'error': f'Solving failed: {str(e)}'})
\ No newline at end of file
diff --git a/controller/pdffly_controller.py b/controller/pdffly_controller.py
new file mode 100644
index 0000000000000000000000000000000000000000..98fb647ac30602f9efedeca2a3d3f1a40400be00
--- /dev/null
+++ b/controller/pdffly_controller.py
@@ -0,0 +1,274 @@
+from flask import Blueprint, request, jsonify, render_template
+import os
+import re
+import fitz  # PyMuPDF
+from PIL import Image
+from werkzeug.utils import secure_filename
+try:
+    from pix2text import Pix2Text
+    PIX2TEXT_AVAILABLE = True
+except ImportError:
+    PIX2TEXT_AVAILABLE = False
+    print("⚠️ Pix2Text not available. Install with: pip install pix2text")
+
+pdffly_bp = Blueprint('pdffly', __name__)
+UPLOAD_FOLDER = 'static/uploads'
+os.makedirs(UPLOAD_FOLDER, exist_ok=True)
+
+# Load Pix2Text model once (for efficiency)
+if PIX2TEXT_AVAILABLE:
+    print("🔹 Loading Pix2Text model for PDF → LaTeX...")
+    try:
+        p2t = Pix2Text()
+        print("✅ Pix2Text model loaded successfully")
+    except Exception as e:
+        print(f"⚠️ Error loading Pix2Text: {e}")
+        p2t = None
+else:
+    p2t = None
+
+def pdf_to_images(pdf_path):
+    """Convert PDF pages to images"""
+    doc = fitz.open(pdf_path)
+    image_paths = []
+    for i, page in enumerate(doc):
+        pix = page.get_pixmap(dpi=200)
+        img_path = os.path.join(UPLOAD_FOLDER, f"page_{i+1}.png")
+        pix.save(img_path)
+        image_paths.append(img_path)
+    doc.close()
+    return image_paths
+
+def extract_text_from_pdf(pdf_path):
+    """Extract raw text from PDF (fallback method)"""
+    doc = fitz.open(pdf_path)
+    all_text = []
+    for page_num, page in enumerate(doc):
+        text = page.get_text()
+        all_text.append(f"Page {page_num + 1}:\n{text}\n")
+    doc.close()
+    return "\n".join(all_text)
+
+def clean_latex_code(latex_str):
+    """Clean and format LaTeX code for Overleaf compilation"""
+    if not latex_str or not isinstance(latex_str, str):
+        return ""
+    
+    # Remove common OCR artifacts and spaces in commands
+    latex_str = re.sub(r'\\operatorname\*?\s*\{\s*([a-z])\s+([a-z])\s+([a-z])\s*\}', 
+                      lambda m: f'\\{m.group(1)}{m.group(2)}{m.group(3)}', latex_str)
+    
+    # Fix common math operators with spaces
+    replacements = {
+        r'\\operatorname\s*\{\s*l\s+i\s+m\s*\}': r'\\lim',
+        r'\\operatorname\s*\{\s*s\s+i\s+n\s*\}': r'\\sin',
+        r'\\operatorname\s*\{\s*c\s+o\s+s\s*\}': r'\\cos',
+        r'\\operatorname\s*\{\s*t\s+a\s+n\s*\}': r'\\tan',
+        r'\\operatorname\s*\{\s*l\s+o\s+g\s*\}': r'\\log',
+        r'\\operatorname\s*\{\s*l\s+n\s*\}': r'\\ln',
+        r'\\operatorname\s*\{\s*e\s+x\s+p\s*\}': r'\\exp',
+        r'\\operatorname\s*\{\s*m\s+a\s+x\s*\}': r'\\max',
+        r'\\operatorname\s*\{\s*m\s+i\s+n\s*\}': r'\\min',
+    }
+    
+    for pattern, replacement in replacements.items():
+        latex_str = re.sub(pattern, replacement, latex_str, flags=re.IGNORECASE)
+    
+    # Remove spaces inside any remaining \operatorname commands
+    latex_str = re.sub(r'\\operatorname\*?\s*\{([^}]+)\}', 
+                      lambda m: f'\\operatorname{{{m.group(1).replace(" ", "")}}}', latex_str)
+    
+    # Replace $$ with \[ \]
+    latex_str = re.sub(r'\$\$([^$]+)\$\$', r'\\[\1\\]', latex_str)
+    
+    # Remove obvious OCR gibberish (sequences of random chars/symbols)
+    latex_str = re.sub(r'[\x00-\x08\x0b-\x0c\x0e-\x1f\x7f-\xff]+', '', latex_str)
+    
+    # Balance braces and brackets
+    open_braces = latex_str.count('{')
+    close_braces = latex_str.count('}')
+    if open_braces > close_braces:
+        latex_str += '}' * (open_braces - close_braces)
+    elif close_braces > open_braces:
+        latex_str = '{' * (close_braces - open_braces) + latex_str
+    
+    # Balance brackets
+    open_brackets = latex_str.count('[')
+    close_brackets = latex_str.count(']')
+    if open_brackets > close_brackets:
+        latex_str += ']' * (open_brackets - close_brackets)
+    elif close_brackets > open_brackets:
+        latex_str = '[' * (close_brackets - open_brackets) + latex_str
+    
+    # Remove invalid math syntax patterns
+    latex_str = re.sub(r'\\\\+', r'\\\\', latex_str)  # Multiple backslashes
+    latex_str = re.sub(r'\s+', ' ', latex_str)  # Multiple spaces
+    
+    return latex_str.strip()
+
+def create_complete_latex_document(latex_content, title="PDF to LaTeX Conversion"):
+    """Wrap LaTeX content in a complete compilable document"""
+    document = r'''\documentclass{article}
+\usepackage{amsmath}
+\usepackage{amssymb}
+\usepackage{amsfonts}
+\usepackage{graphicx}
+
+\title{''' + title + r'''}
+\author{PDFly}
+\date{\today}
+
+\begin{document}
+
+\maketitle
+
+\begin{center}
+\textit{This document was automatically generated from a PDF file using OCR and LaTeX conversion.}
+\end{center}
+
+\section*{Content}
+
+''' + latex_content + r'''
+
+\end{document}'''
+    
+    return document
+
+@pdffly_bp.route("/", methods=["GET"])
+def pdffly_page():
+    """Render the main PDFfly page."""
+    return render_template("pdffly.html")
+
+@pdffly_bp.route('/upload', methods=['POST'])
+def upload_and_convert_pdf():
+    """Upload PDF and convert to LaTeX"""
+    if 'file' not in request.files:
+        return jsonify({'error': 'No file found'}), 400
+
+    file = request.files['file']
+    if not file or file.filename == '':
+        return jsonify({'error': 'No file selected'}), 400
+        
+    if not file.filename.lower().endswith('.pdf'):
+        return jsonify({'error': 'Only PDF files are allowed'}), 400
+
+    filename = secure_filename(file.filename)
+    pdf_path = os.path.join(UPLOAD_FOLDER, filename)
+    file.save(pdf_path)
+
+    try:
+        # Get page count
+        doc = fitz.open(pdf_path)
+        page_count = len(doc)
+        doc.close()
+
+        # Convert PDF → images
+        images = pdf_to_images(pdf_path)
+
+        # Run LaTeX recognition for each image
+        latex_results = []
+        all_latex_pages = []
+        for i, img_path in enumerate(images):
+            try:
+                if p2t:
+                    result = p2t.recognize(img_path, resized_shape=768)
+                    latex_code = result if isinstance(result, str) else str(result)
+                    # Clean the LaTeX code
+                    latex_code = clean_latex_code(latex_code)
+                    all_latex_pages.append(f"% Page {i + 1}\n{latex_code}")
+                else:
+                    # Fallback: extract text
+                    latex_code = f"Text extraction (Pix2Text not available)"
+                    all_latex_pages.append(latex_code)
+                
+                latex_results.append({
+                    'page': i + 1,
+                    'image': img_path.replace('static/', '/static/'),
+                    'latex': latex_code
+                })
+            except Exception as e:
+                latex_results.append({
+                    'page': i + 1,
+                    'image': img_path.replace('static/', '/static/'),
+                    'error': str(e)
+                })
+                all_latex_pages.append(f"% Page {i + 1}: Error - {str(e)}")
+        
+        # Create complete document
+        combined_latex = "\n\n".join(all_latex_pages)
+        complete_document = create_complete_latex_document(combined_latex, filename)
+
+        return jsonify({
+            'success': True,
+            'message': 'PDF converted successfully!',
+            'pdf_path': pdf_path.replace('static/', '/static/'),
+            'filename': filename,
+            'pages': page_count,
+            'results': latex_results,
+            'complete_document': complete_document
+        })
+    
+    except Exception as e:
+        return jsonify({
+            'success': False,
+            'error': f'Error processing PDF: {str(e)}'
+        }), 500
+
+@pdffly_bp.route('/process', methods=['POST'])
+def process_pdf():
+    """Process specific area or entire PDF"""
+    data = request.get_json()
+    filename = data.get('filename')
+    convert_all = data.get('convert_all', False)
+    page_num = data.get('page', 0)
+    coordinates = data.get('coordinates')
+    
+    if not filename:
+        return jsonify({'success': False, 'error': 'No filename provided'}), 400
+    
+    pdf_path = os.path.join(UPLOAD_FOLDER, filename)
+    
+    if not os.path.exists(pdf_path):
+        return jsonify({'success': False, 'error': 'PDF file not found'}), 404
+    
+    try:
+        if convert_all:
+            # Extract text from entire PDF
+            text = extract_text_from_pdf(pdf_path)
+            latex = f"\\text{{{text}}}"
+        else:
+            # Extract from specific page
+            doc = fitz.open(pdf_path)
+            if page_num < len(doc):
+                page = doc[page_num]
+                text = page.get_text()
+                latex = f"\\text{{{text}}}"
+            else:
+                latex = "Page not found"
+            doc.close()
+        
+        return jsonify({
+            'success': True,
+            'latex': latex
+        })
+    
+    except Exception as e:
+        return jsonify({
+            'success': False,
+            'error': str(e)
+        }), 500
+
+@pdffly_bp.route('/solve', methods=['POST'])
+def solve_latex():
+    """Solve mathematical content"""
+    data = request.get_json()
+    latex = data.get('latex', '')
+    
+    # Simple solver response
+    return jsonify({
+        'success': True,
+        'solution': {
+            'type': 'info',
+            'message': 'Math solver integration pending'
+        }
+    })
diff --git a/controller/pdflly_controller.py b/controller/pdflly_controller.py
new file mode 100644
index 0000000000000000000000000000000000000000..5984db47aaa6b71589f026bba45d6d153f82a16e
--- /dev/null
+++ b/controller/pdflly_controller.py
@@ -0,0 +1,166 @@
+import os
+import json
+import base64
+import io
+from flask import Blueprint, request, render_template, jsonify, current_app
+import fitz  # PyMuPDF
+import PyPDF2
+from PIL import Image
+import tempfile
+
+pdflly_bp = Blueprint('pdflly', __name__, url_prefix='/pdflly')
+
+def extract_text_from_pdf(filepath, page_number=None, coordinates=None):
+    """Extract text from PDF using PyMuPDF for better accuracy"""
+    try:
+        doc = fitz.open(filepath)
+        
+        if page_number is not None:
+            # Extract from specific page
+            page = doc[page_number]
+            
+            if coordinates:
+                # Extract text from specific area
+                x, y, width, height = coordinates
+                rect = fitz.Rect(x, y, x + width, y + height)
+                text = page.get_text("text", clip=rect)
+            else:
+                # Extract text from entire page
+                text = page.get_text("text")
+        else:
+            # Extract from entire document
+            text = ""
+            for page in doc:
+                text += page.get_text("text")
+        
+        doc.close()
+        return text.strip()
+    except Exception as e:
+        print(f"Error extracting text with PyMuPDF: {e}")
+        # Fallback to PyPDF2
+        return extract_text_with_pypdf2(filepath, page_number, coordinates)
+
+def extract_text_with_pypdf2(filepath, page_number=None, coordinates=None):
+    """Fallback text extraction using PyPDF2"""
+    try:
+        with open(filepath, 'rb') as file:
+            reader = PyPDF2.PdfReader(file)
+            
+            if page_number is not None and page_number < len(reader.pages):
+                page = reader.pages[page_number]
+                return page.extract_text()
+            else:
+                text = ""
+                for page in reader.pages:
+                    text += page.extract_text()
+                return text
+    except Exception as e:
+        return f"Error extracting text: {str(e)}"
+
+def convert_text_to_latex(text):
+    """Simple conversion of text to LaTeX format"""
+    # This is a placeholder implementation
+    # In a real application, you would use an AI model to convert text to LaTeX
+    return text.replace('\\', '\\\\').replace('_', '\\_').replace('^', '\\^').replace('&', '\\&')
+
+@pdflly_bp.route('/')
+def pdflly_converter():
+    """Render the PDFly converter page"""
+    return render_template('pdflly.html')
+
+@pdflly_bp.route('/upload', methods=['POST'])
+def upload_pdf():
+    """Handle PDF file upload"""
+    if 'pdf_file' not in request.files:
+        return jsonify({'success': False, 'error': 'No file provided'})
+    
+    file = request.files['pdf_file']
+    
+    if file.filename == '':
+        return jsonify({'success': False, 'error': 'No file selected'})
+    
+    if file and file.filename.lower().endswith('.pdf'):
+        try:
+            # Save file temporarily
+            temp_dir = tempfile.gettempdir()
+            filename = file.filename
+            filepath = os.path.join(temp_dir, filename)
+            file.save(filepath)
+            
+            # Get page count
+            with open(filepath, 'rb') as f:
+                reader = PyPDF2.PdfReader(f)
+                page_count = len(reader.pages)
+            
+            return jsonify({
+                'success': True,
+                'filename': filename,
+                'filepath': filepath,
+                'pages': page_count
+            })
+        except Exception as e:
+            return jsonify({'success': False, 'error': f'Upload failed: {str(e)}'})
+    
+    return jsonify({'success': False, 'error': 'Invalid file type. Please upload a PDF file.'})
+
+@pdflly_bp.route('/process', methods=['POST'])
+def process_pdf():
+    """Process PDF and convert to LaTeX"""
+    try:
+        data = request.get_json()
+        filename = data.get('filename')
+        coordinates = data.get('coordinates')
+        page = data.get('page', 0)
+        convert_all = data.get('convert_all', False)
+        
+        if not filename:
+            return jsonify({'success': False, 'error': 'No filename provided'})
+        
+        # Get file path
+        temp_dir = tempfile.gettempdir()
+        filepath = os.path.join(temp_dir, filename)
+        
+        if not os.path.exists(filepath):
+            return jsonify({'success': False, 'error': 'File not found'})
+        
+        if convert_all:
+            # Convert entire PDF
+            text = extract_text_from_pdf(filepath)
+        elif coordinates:
+            # Convert selected area
+            text = extract_text_from_pdf(filepath, page, coordinates)
+        else:
+            # Convert specific page
+            text = extract_text_from_pdf(filepath, page)
+        
+        # Convert to LaTeX (placeholder)
+        latex = convert_text_to_latex(text)
+        
+        return jsonify({
+            'success': True,
+            'latex': latex,
+            'text': text
+        })
+    except Exception as e:
+        return jsonify({'success': False, 'error': f'Processing failed: {str(e)}'})
+
+@pdflly_bp.route('/solve', methods=['POST'])
+def solve_equation():
+    """Solve mathematical equations in LaTeX"""
+    try:
+        data = request.get_json()
+        latex = data.get('latex', '')
+        
+        # This is a placeholder implementation
+        # In a real application, you would use SymPy or similar library
+        solution = {
+            'type': 'expression',
+            'result': f"Simplified: {latex}"
+        }
+        
+        return jsonify({
+            'success': True,
+            'solution': solution
+        })
+    except Exception as e:
+        return jsonify({'success': False, 'error': f'Solving failed: {str(e)}'})
\ No newline at end of file
diff --git a/controller/pix2text_controller.py b/controller/pix2text_controller.py
new file mode 100644
index 0000000000000000000000000000000000000000..261b97cf32aa048523bb8a6eb39b6e569887280d
--- /dev/null
+++ b/controller/pix2text_controller.py
@@ -0,0 +1,223 @@
+# controller/pix2text_bp.py
+import os
+import cv2
+from flask import Blueprint, render_template, request, jsonify
+from pix2text import Pix2Text
+from utils.math_solver import solve_equation
+from controller.models.camera_to_latex import camera_to_latex
+
+# Initialize Pix2Text globally once
+print("🔹 Loading Pix2Text model (mfd)...")
+try:
+    p2t = Pix2Text(analyzer_config=dict(model_name='mfd'))
+    print("✅ Pix2Text model loaded successfully.")
+except Exception as e:
+    print(f"❌ Pix2Text failed to initialize: {e}")
+    p2t = None
+
+# Flask blueprint
+pix2text_bp = Blueprint('pix2text_bp', __name__)
+
+UPLOAD_FOLDER = 'static/uploads'
+os.makedirs(UPLOAD_FOLDER, exist_ok=True)
+
+# Optional preprocessing
+def preprocess_image(image_path):
+    """Preprocess image for better OCR results"""
+    try:
+        # Read image
+        img = cv2.imread(image_path)
+        if img is None:
+            raise ValueError("Could not read image")
+        
+        # Convert to grayscale
+        gray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY)
+        
+        # Apply mild Gaussian blur to reduce noise while preserving edges
+        blurred = cv2.GaussianBlur(gray, (3, 3), 0)
+        
+        # Apply adaptive thresholding with parameters better suited for text
+        thresh = cv2.adaptiveThreshold(
+            blurred, 255, cv2.ADAPTIVE_THRESH_GAUSSIAN_C, cv2.THRESH_BINARY, 15, 2
+        )
+        
+        # Save processed image
+        processed_path = os.path.join(
+            PROCESSED_FOLDER, 
+            os.path.basename(image_path).replace('.', '_processed.')
+        )
+        cv2.imwrite(processed_path, thresh)
+        
+        return processed_path
+    except Exception as e:
+        print(f"Preprocessing error: {e}")
+        return image_path  # Return original if preprocessing fails
+
+# -----------------------------
+# Math Routes
+# -----------------------------
+@pix2text_bp.route("/math")
+def math_page():
+    return render_template("math.html")
+
+@pix2text_bp.route("/math/process", methods=["POST"])
+def process_math_image():
+    try:
+        if 'image' not in request.files:
+            return jsonify({'error': 'No image file provided'}), 400
+
+        file = request.files['image']
+        if not file.filename:
+            return jsonify({'error': 'No file selected'}), 400
+
+        filename = file.filename
+        filepath = os.path.join(UPLOAD_FOLDER, filename)
+        file.save(filepath)
+
+        # Preprocess (optional)
+        processed_path = preprocess_image(filepath)
+
+        # Run Pix2Text
+        if p2t:
+            result = p2t.recognize(processed_path)
+            if isinstance(result, dict):
+                latex = result.get('text', '')
+            elif isinstance(result, list) and result and isinstance(result[0], dict):
+                latex = result[0].get('text', '')
+            else:
+                latex = str(result)
+        else:
+            latex = "\\text{Pix2Text not initialized}"
+
+        return jsonify({
+            'success': True,
+            'latex': latex,
+            'image_path': filepath
+        })
+
+    except Exception as e:
+        print(f"❌ Error in /math/process: {e}")
+        return jsonify({'error': str(e)}), 500
+
+@pix2text_bp.route("/math/solve", methods=["POST"])
+def solve_math_equation():
+    try:
+        data = request.get_json()
+        if not data or 'latex' not in data:
+            return jsonify({'error': 'No equation provided'}), 400
+
+        solution = solve_equation(data['latex'])
+        return jsonify({'success': True, 'solution': solution})
+
+    except Exception as e:
+        print(f"❌ Error in /math/solve: {e}")
+        return jsonify({'error': str(e)}), 500
+
+# -----------------------------
+# Camera Routes
+# -----------------------------
+# @pix2text_bp.route("/camera")
+# def camera_page():
+#     return render_template("camera.html")
+
+@pix2text_bp.route("/camera")
+def camera_page():
+    """Render the camera capture page"""
+    return render_template("camera.html")
+
+
+@pix2text_bp.route("/camera/solve", methods=["POST"])
+def solve_camera_equation():
+    """Solve a LaTeX equation from camera input"""
+    try:
+        data = request.get_json()
+        if not data:
+            return jsonify({'error': 'No data provided'}), 400
+        
+        latex_equation = data.get('latex', '')
+        if not latex_equation:
+            return jsonify({'error': 'No equation provided'}), 400
+        
+        # Solve the equation
+        solution = solve_equation(latex_equation)
+        
+        return jsonify({
+            'success': True,
+            'solution': solution
+        })
+        
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+    return jsonify({'error': 'Unknown error'}), 500
+
+
+@pix2text_bp.route("/camera/process", methods=["POST"])
+def process_camera_image():
+    """Process camera captured image using Pix2Text"""
+    try:
+        if 'image' not in request.files:
+            return jsonify({'error': 'No image file provided'}), 400
+        
+        file = request.files['image']
+        if file.filename == '':
+            return jsonify({'error': 'No image file selected'}), 400
+        
+        if file and file.filename:
+            # Save original image
+            filename = file.filename
+            filepath = os.path.join(UPLOAD_FOLDER, filename)
+            file.save(filepath)
+            
+            # For camera captures, try processing the original image first
+            # as preprocessing might distort mathematical symbols
+            processed_path = filepath
+            
+            # Process with Pix2Text if available
+            if p2t:
+                print(f"Processing image: {processed_path}")
+                result = p2t.recognize(processed_path)
+                print(f"Raw result: {result}")
+                
+                # Handle different result types
+                if isinstance(result, dict):
+                    latex_code = result.get('text', '')
+                elif isinstance(result, list):
+                    # If result is a list, extract text from first item
+                    if result and isinstance(result[0], dict):
+                        latex_code = result[0].get('text', '')
+                    else:
+                        latex_code = str(result)
+                else:
+                    latex_code = str(result)
+                
+                # If we get no result or very short result, try with preprocessing
+                if len(latex_code.strip()) < 2:
+                    print("Result too short, trying with preprocessing...")
+                    processed_path = preprocess_image(filepath)
+                    result = p2t.recognize(processed_path)
+                    print(f"Preprocessed result: {result}")
+                    
+                    if isinstance(result, dict):
+                        latex_code = result.get('text', '')
+                    elif isinstance(result, list):
+                        if result and isinstance(result[0], dict):
+                            latex_code = result[0].get('text', '')
+                        else:
+                            latex_code = str(result)
+                    else:
+                        latex_code = str(result)
+                
+                print(f"Final extracted LaTeX: {latex_code}")
+            else:
+                latex_code = "\\text{Pix2Text not available}"
+            
+            return jsonify({
+                'success': True,
+                'latex': latex_code,
+                'image_path': filepath
+            })
+            
+    except Exception as e:
+        print(f"Error processing camera image: {e}")
+        return jsonify({'error': str(e)}), 500
+    return jsonify({'error': 'Unknown error'}), 500
diff --git a/controller/scribble_controller.py b/controller/scribble_controller.py
new file mode 100644
index 0000000000000000000000000000000000000000..3b80f938706fc7db0d38fa709d837ef56ca94336
--- /dev/null
+++ b/controller/scribble_controller.py
@@ -0,0 +1,159 @@
+import os
+from flask import Blueprint, render_template, request, jsonify
+import base64
+from io import BytesIO
+from PIL import Image
+import numpy as np
+import cv2
+from utils.math_solver import solve_equation
+from typing import Union, Tuple, Any
+
+# Initialize Pix2Text with MFD (Mathematical Formula Detection) model for better accuracy
+try:
+    from pix2text import Pix2Text
+    p2t = Pix2Text(analyzer_config=dict(model_name='mfd'))
+except Exception as e:
+    print(f"Warning: Could not initialize Pix2Text: {e}")
+    p2t = None
+
+scribble_bp = Blueprint('scribble_bp', __name__)
+
+UPLOAD_FOLDER = 'static/uploads'
+PROCESSED_FOLDER = 'static/processed'
+os.makedirs(UPLOAD_FOLDER, exist_ok=True)
+os.makedirs(PROCESSED_FOLDER, exist_ok=True)
+
+
+def preprocess_image(image_data):
+    """Preprocess image for better OCR results"""
+    try:
+        # Convert base64 to image
+        image_data = image_data.split(',')[1]  # Remove data URL prefix
+        image = Image.open(BytesIO(base64.b64decode(image_data)))
+        
+        # Convert to OpenCV format
+        opencv_image = cv2.cvtColor(np.array(image), cv2.COLOR_RGB2BGR)
+        
+        # Convert to grayscale
+        gray = cv2.cvtColor(opencv_image, cv2.COLOR_BGR2GRAY)
+        
+        # Apply mild Gaussian blur to reduce noise while preserving edges
+        blurred = cv2.GaussianBlur(gray, (3, 3), 0)
+        
+        # Apply adaptive thresholding with parameters better suited for handwritten text
+        thresh = cv2.adaptiveThreshold(
+            blurred, 255, cv2.ADAPTIVE_THRESH_GAUSSIAN_C, cv2.THRESH_BINARY, 15, 2
+        )
+        
+        # Save processed image
+        processed_path = os.path.join(PROCESSED_FOLDER, 'scribble_processed.png')
+        cv2.imwrite(processed_path, thresh)
+        
+        return processed_path
+    except Exception as e:
+        print(f"Preprocessing error: {e}")
+        # Save original if preprocessing fails
+        image_path = os.path.join(UPLOAD_FOLDER, 'scribble.png')
+        # Reopen image to save it
+        image = Image.open(BytesIO(base64.b64decode(image_data.split(',')[1])))
+        image.save(image_path)
+        return image_path
+
+
+@scribble_bp.route("/scribble")
+def scribble_page():
+    return render_template("scribble.html")
+
+
+@scribble_bp.route("/scribble/process", methods=["POST"])
+def process_scribble():
+    try:
+        data = request.get_json()
+        if not data:
+            return jsonify({'error': 'No data provided'}), 400
+        
+        image_data = data.get('image', '')
+        if not image_data:
+            return jsonify({'error': 'No image data provided'}), 400
+        
+        # Save original image first
+        image_path = os.path.join(UPLOAD_FOLDER, 'scribble_original.png')
+        image_data_content = image_data.split(',')[1]
+        image = Image.open(BytesIO(base64.b64decode(image_data_content)))
+        image.save(image_path)
+        
+        # Process with Pix2Text if available
+        if p2t:
+            print(f"Processing scribble with MFD model: {image_path}")
+            
+            # Try with original image first (works better for handwritten math)
+            result = p2t.recognize(image_path)
+            print(f"Original image result: {result}")
+            
+            # Handle different result types
+            if isinstance(result, dict):
+                latex_code = result.get('text', '')
+            elif isinstance(result, list):
+                # If result is a list, extract text from first item
+                if result and isinstance(result[0], dict):
+                    latex_code = result[0].get('text', '')
+                else:
+                    latex_code = str(result)
+            else:
+                latex_code = str(result)
+            
+            # If we get no result or very short result, try with preprocessing
+            if len(latex_code.strip()) < 2:
+                print("Result too short, trying with preprocessing...")
+                processed_path = preprocess_image(image_data)
+                result = p2t.recognize(processed_path)
+                print(f"Preprocessed image result: {result}")
+                
+                if isinstance(result, dict):
+                    latex_code = result.get('text', '')
+                elif isinstance(result, list):
+                    if result and isinstance(result[0], dict):
+                        latex_code = result[0].get('text', '')
+                    else:
+                        latex_code = str(result)
+                else:
+                    latex_code = str(result)
+            
+            print(f"Final extracted LaTeX: {latex_code}")
+        else:
+            latex_code = "\\text{Pix2Text not available}"
+        
+        return jsonify({
+            'success': True,
+            'latex': latex_code
+        })
+        
+    except Exception as e:
+        print(f"Error processing scribble: {e}")
+        return jsonify({'error': str(e)}), 500
+    return jsonify({'error': 'Unknown error'}), 500
+
+
+@scribble_bp.route("/scribble/solve", methods=["POST"])
+def solve_scribble_equation():
+    """Solve a LaTeX equation from scribble"""
+    try:
+        data = request.get_json()
+        if not data:
+            return jsonify({'error': 'No data provided'}), 400
+        
+        latex_equation = data.get('latex', '')
+        if not latex_equation:
+            return jsonify({'error': 'No equation provided'}), 400
+        
+        # Solve the equation
+        solution = solve_equation(latex_equation)
+        
+        return jsonify({
+            'success': True,
+            'solution': solution
+        })
+        
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+    return jsonify({'error': 'Unknown error'}), 500
\ No newline at end of file
diff --git a/controller/table_controller.py b/controller/table_controller.py
new file mode 100644
index 0000000000000000000000000000000000000000..349e50c65ec4f070ed4fd16799da039779767519
--- /dev/null
+++ b/controller/table_controller.py
@@ -0,0 +1,192 @@
+import os
+import cv2
+import numpy as np
+import base64
+import io
+from flask import Blueprint, render_template, request, jsonify
+from PIL import Image
+from utils.math_solver import solve_equation  # optional, if you use math solving
+
+# -------------------------------
+# Blueprint setup
+# -------------------------------
+table_bp = Blueprint('table_bp', __name__)
+
+UPLOAD_FOLDER = 'static/uploads'
+os.makedirs(UPLOAD_FOLDER, exist_ok=True)
+
+
+# -------------------------------
+# Core Table Detection Logic
+# -------------------------------
+def detect_table(image_path):
+    """Detect rows and columns from table image using Hough line detection."""
+    img = cv2.imread(image_path)
+    if img is None:
+        raise ValueError(f"Cannot read image at {image_path}")
+
+    gray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY)
+    gray = cv2.GaussianBlur(gray, (5, 5), 0)
+    edges = cv2.Canny(gray, 50, 150, apertureSize=3)
+
+    lines = cv2.HoughLinesP(
+        edges,
+        rho=1,
+        theta=np.pi / 180,
+        threshold=80,
+        minLineLength=60,
+        maxLineGap=15
+    )
+
+    if lines is None:
+        return 0, 0
+
+    horizontal, vertical = [], []
+
+    for x1, y1, x2, y2 in lines[:, 0]:
+        if abs(y2 - y1) < abs(x2 - x1):  # horizontal line
+            horizontal.append((y1 + y2) / 2)
+        elif abs(x2 - x1) < abs(y2 - y1):  # vertical line
+            vertical.append((x1 + x2) / 2)
+
+    def merge_lines(coords, gap=25):
+        coords = sorted(coords)
+        merged = []
+        if not coords:
+            return merged
+        group = [coords[0]]
+        for c in coords[1:]:
+            if abs(c - group[-1]) < gap:
+                group.append(c)
+            else:
+                merged.append(np.mean(group))
+                group = [c]
+        merged.append(np.mean(group))
+        return merged
+
+    horizontal = merge_lines(horizontal)
+    vertical = merge_lines(vertical)
+
+    num_rows = max(len(horizontal) - 1, 1)
+    num_cols = max(len(vertical) - 1, 1)
+    return num_rows, num_cols
+
+
+# -------------------------------
+# Generate LaTeX Table Code
+# -------------------------------
+def generate_latex_table(rows, cols):
+    col_format = '|' + '|'.join(['c'] * cols) + '|'
+    latex = f"\\begin{{tabular}}{{{col_format}}}\n\\hline\n"
+    for _ in range(rows):
+        latex += ' & '.join([''] * cols) + " \\\\ \\hline\n"
+    latex += "\\end{tabular}"
+    return latex
+
+
+# -------------------------------
+# Helpers
+# -------------------------------
+def save_base64_image(image_base64):
+    """Convert base64 image string to file and return the saved path."""
+    try:
+        if ',' in image_base64:
+            image_base64 = image_base64.split(',')[1]
+        image_bytes = base64.b64decode(image_base64)
+        image = Image.open(io.BytesIO(image_bytes)).convert("RGB")
+        filename = f"table_{len(os.listdir(UPLOAD_FOLDER)) + 1}.png"
+        filepath = os.path.join(UPLOAD_FOLDER, filename)
+        image.save(filepath)
+        return filepath
+    except Exception as e:
+        raise ValueError(f"Failed to decode base64 image: {e}")
+
+
+# -------------------------------
+# Routes
+# -------------------------------
+
+@table_bp.route("/table", methods=["GET"])
+def table_page():
+    """Render the main table-to-LaTeX page."""
+    return render_template("table.html")
+
+
+@table_bp.route("/table/process", methods=["POST"])
+def process_table_image():
+    """
+    Handles both:
+    - Uploaded image file (FormData)
+    - Base64 image (drawn or camera)
+    """
+    try:
+        # 🟢 Case 1: File upload (from drag & drop or browse)
+        if 'image' in request.files:
+            file = request.files['image']
+            if not file.filename:
+                return jsonify({'success': False, 'error': 'No file selected.'}), 400
+
+            filename = file.filename
+            filepath = os.path.join(UPLOAD_FOLDER, filename)
+            file.save(filepath)
+
+        # 🟢 Case 2: Base64 image (from canvas draw)
+        elif request.is_json:
+            data = request.get_json()
+            if 'image' not in data:
+                return jsonify({'success': False, 'error': 'No image data provided'}), 400
+            filepath = save_base64_image(data['image'])
+
+        else:
+            return jsonify({'success': False, 'error': 'Invalid image input.'}), 400
+
+        # Detect table structure
+        rows, cols = detect_table(filepath)
+        latex_code = generate_latex_table(rows, cols)
+
+        return jsonify({
+            'success': True,
+            'latex': latex_code,
+            'rows': rows,
+            'cols': cols,
+            'image_path': filepath
+        })
+
+    except Exception as e:
+        print(f"❌ Error in /table/process: {e}")
+        return jsonify({'success': False, 'error': str(e)}), 500
+
+
+@table_bp.route("/table/generate", methods=["POST"])
+def generate_table_from_input():
+    """Generate LaTeX manually from user-input rows/cols."""
+    try:
+        data = request.get_json()
+        rows = int(data.get('rows', 0))
+        cols = int(data.get('cols', 0))
+
+        if rows <= 0 or cols <= 0:
+            return jsonify({'success': False, 'error': 'Invalid rows or columns'}), 400
+
+        latex_code = generate_latex_table(rows, cols)
+
+        return jsonify({'success': True, 'latex': latex_code})
+    except Exception as e:
+        print(f"❌ Error in /table/generate: {e}")
+        return jsonify({'success': False, 'error': str(e)}), 500
+
+
+@table_bp.route("/table/solve", methods=["POST"])
+def solve_table_content():
+    """Optional: solve math expressions inside the LaTeX table (if supported)."""
+    try:
+        data = request.get_json()
+        if not data or 'latex' not in data:
+            return jsonify({'success': False, 'error': 'No LaTeX data provided'}), 400
+
+        solution = solve_equation(data['latex'])
+        return jsonify({'success': True, 'solution': solution})
+
+    except Exception as e:
+        print(f"❌ Error in /table/solve: {e}")
+        return jsonify({'success': False, 'error': str(e)}), 500
diff --git a/data/users.json b/data/users.json
new file mode 100644
index 0000000000000000000000000000000000000000..36866044464e5262b283c7e762390e71eb0042ce
--- /dev/null
+++ b/data/users.json
@@ -0,0 +1,74 @@
+{
+  "test_user_123": {
+    "id": "test_user_123",
+    "email": "test@example.com",
+    "name": "Test User",
+    "picture": null
+  },
+  "google_user_123": {
+    "id": "google_user_123",
+    "email": "user@gmail.com",
+    "name": "Google User",
+    "picture": null
+  },
+  "guest_gg_1762329533": {
+    "id": "guest_gg_1762329533",
+    "email": "gg@guest.texlab.com",
+    "name": "gg",
+    "picture": null
+  },
+  "guest_gg_1762330083": {
+    "id": "guest_gg_1762330083",
+    "email": "gg@guest.texlab.com",
+    "name": "gg",
+    "picture": null
+  },
+  "guest_syk_1762332308": {
+    "id": "guest_syk_1762332308",
+    "email": "syk@guest.texlab.com",
+    "name": "syk",
+    "picture": null
+  },
+  "guest_gg_1762333085": {
+    "id": "guest_gg_1762333085",
+    "email": "gg@guest.texlab.com",
+    "name": "gg",
+    "picture": null
+  },
+  "guest_syk_1762333094": {
+    "id": "guest_syk_1762333094",
+    "email": "syk@guest.texlab.com",
+    "name": "syk",
+    "picture": null
+  },
+  "guest_syk_1762333160": {
+    "id": "guest_syk_1762333160",
+    "email": "syk@guest.texlab.com",
+    "name": "syk",
+    "picture": null
+  },
+  "guest_syk_1762333181": {
+    "id": "guest_syk_1762333181",
+    "email": "syk@guest.texlab.com",
+    "name": "syk",
+    "picture": null
+  },
+  "guest_ali_1762333646": {
+    "id": "guest_ali_1762333646",
+    "email": "ali@guest.texlab.com",
+    "name": "ali",
+    "picture": null
+  },
+  "guest_ali_ashraf_1762334613": {
+    "id": "guest_ali_ashraf_1762334613",
+    "email": "ali.ashraf@guest.texlab.com",
+    "name": "ALI ASHRAF",
+    "picture": null
+  },
+  "guest_ashraf_1762608609": {
+    "id": "guest_ashraf_1762608609",
+    "email": "ashraf@guest.texlab.com",
+    "name": "Ashraf",
+    "picture": null
+  }
+}
\ No newline at end of file
diff --git a/models/__init__.py b/models/__init__.py
new file mode 100644
index 0000000000000000000000000000000000000000..d8cfe8af64317488d9ea63a427c282755b2ddd78
--- /dev/null
+++ b/models/__init__.py
@@ -0,0 +1 @@
+# Models package
\ No newline at end of file
diff --git a/models/__pycache__/__init__.cpython-311.pyc b/models/__pycache__/__init__.cpython-311.pyc
new file mode 100644
index 0000000000000000000000000000000000000000..870417e57c54de08e133a6c66485e00a4c8f8e96
Binary files /dev/null and b/models/__pycache__/__init__.cpython-311.pyc differ
diff --git a/models/__pycache__/__init__.cpython-313.pyc b/models/__pycache__/__init__.cpython-313.pyc
new file mode 100644
index 0000000000000000000000000000000000000000..53d3092246571789b44aa034937855687b361bab
Binary files /dev/null and b/models/__pycache__/__init__.cpython-313.pyc differ
diff --git a/models/__pycache__/user.cpython-311.pyc b/models/__pycache__/user.cpython-311.pyc
new file mode 100644
index 0000000000000000000000000000000000000000..1ae51cd66ad35004378309c8024448864df9da1f
Binary files /dev/null and b/models/__pycache__/user.cpython-311.pyc differ
diff --git a/models/__pycache__/user.cpython-313.pyc b/models/__pycache__/user.cpython-313.pyc
new file mode 100644
index 0000000000000000000000000000000000000000..6546db802bd30bfc4e64a827dd7a945c6cab389c
Binary files /dev/null and b/models/__pycache__/user.cpython-313.pyc differ
diff --git a/models/user.py b/models/user.py
new file mode 100644
index 0000000000000000000000000000000000000000..08a7b6c7e9f0a00e4253a7d465828a99bded851a
--- /dev/null
+++ b/models/user.py
@@ -0,0 +1,68 @@
+from flask_login import UserMixin
+from datetime import datetime
+import json
+import os
+
+# Simple file-based storage for users
+USERS_FILE = 'data/users.json'
+os.makedirs(os.path.dirname(USERS_FILE), exist_ok=True)
+
+# Create empty users file if it doesn't exist
+if not os.path.exists(USERS_FILE):
+    with open(USERS_FILE, 'w') as f:
+        json.dump({}, f)
+
+
+class User(UserMixin):
+    def __init__(self, id, email, name, picture=None):
+        self.id = id
+        self.email = email
+        self.name = name
+        self.picture = picture
+
+    @staticmethod
+    def get(user_id):
+        """Get user by ID"""
+        try:
+            with open(USERS_FILE, 'r') as f:
+                users = json.load(f)
+            
+            user_data = users.get(str(user_id))
+            if user_data:
+                return User(
+                    id=user_data['id'],
+                    email=user_data['email'],
+                    name=user_data['name'],
+                    picture=user_data.get('picture')
+                )
+            return None
+        except Exception:
+            return None
+
+    @staticmethod
+    def create_or_update(id, email, name, picture=None):
+        """Create or update user"""
+        try:
+            # Load existing users
+            if os.path.exists(USERS_FILE):
+                with open(USERS_FILE, 'r') as f:
+                    users = json.load(f)
+            else:
+                users = {}
+            
+            # Update or create user
+            users[str(id)] = {
+                'id': id,
+                'email': email,
+                'name': name,
+                'picture': picture
+            }
+            
+            # Save users
+            with open(USERS_FILE, 'w') as f:
+                json.dump(users, f, indent=2)
+            
+            return User(id, email, name, picture)
+        except Exception as e:
+            print(f"Error creating/updating user: {e}")
+            return None
\ No newline at end of file
diff --git a/static/.DS_Store b/static/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..e959ba552c2c8ddef4883e8c3acd8d13a80d274c
Binary files /dev/null and b/static/.DS_Store differ
diff --git a/static/images/logo.png b/static/images/logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..201d8752e86cd1fe23c013cfaed4f1d2176873f2
--- /dev/null
+++ b/static/images/logo.png
@@ -0,0 +1 @@
+This is a placeholder for the logo file. In a real implementation, you would place your actual logo image here.
\ No newline at end of file
diff --git a/static/images/logo.svg b/static/images/logo.svg
new file mode 100644
index 0000000000000000000000000000000000000000..33510b7f611cb10cb3a6ac44f94acb199cddda3b
--- /dev/null
+++ b/static/images/logo.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+  <defs>
+    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#4361ee;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#7209b7;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  <circle cx="50" cy="50" r="45" fill="url(#grad1)" />
+  <text x="50" y="65" font-family="Arial, sans-serif" font-size="40" fill="white" text-anchor="middle">TL</text>
+</svg>
\ No newline at end of file
diff --git a/static/js/scribble.js b/static/js/scribble.js
new file mode 100644
index 0000000000000000000000000000000000000000..bd48dd7d3a23c6d3b0e30874e1f1755edf0e85fd
--- /dev/null
+++ b/static/js/scribble.js
@@ -0,0 +1,48 @@
+// static/js/scribble.js
+
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
+let drawing = false;
+
+canvas.addEventListener("mousedown", () => (drawing = true));
+canvas.addEventListener("mouseup", () => (drawing = false));
+canvas.addEventListener("mousemove", draw);
+
+function draw(e) {
+  if (!drawing) return;
+  ctx.lineWidth = 4;
+  ctx.lineCap = "round";
+  ctx.strokeStyle = "#000";
+  ctx.lineTo(e.offsetX, e.offsetY);
+  ctx.stroke();
+  ctx.beginPath();
+  ctx.moveTo(e.offsetX, e.offsetY);
+}
+
+document.getElementById("clear").addEventListener("click", () => {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+});
+
+document.getElementById("convert").addEventListener("click", async () => {
+  const image = canvas.toDataURL("image/png");
+  const response = await fetch("/scribble/convert", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ image }),
+  });
+
+  const data = await response.json();
+  if (data.latex) {
+    document.getElementById("result-box").style.display = "block";
+    document.getElementById("latex-output").value = data.latex;
+  } else {
+    alert("Error generating LaTeX.");
+  }
+});
+
+document.getElementById("copy").addEventListener("click", () => {
+  const textarea = document.getElementById("latex-output");
+  textarea.select();
+  document.execCommand("copy");
+  alert("✅ LaTeX code copied!");
+});
diff --git a/static/processed/dalk_processed.png b/static/processed/dalk_processed.png
new file mode 100644
index 0000000000000000000000000000000000000000..23c85de8262d5f36729b92be6c301ec71643b327
Binary files /dev/null and b/static/processed/dalk_processed.png differ
diff --git a/static/processed/scribble_10.png b/static/processed/scribble_10.png
new file mode 100644
index 0000000000000000000000000000000000000000..af8f200d14db2fad3a9194a9bb8fea7abaad4fcc
Binary files /dev/null and b/static/processed/scribble_10.png differ
diff --git a/static/processed/scribble_11.png b/static/processed/scribble_11.png
new file mode 100644
index 0000000000000000000000000000000000000000..af8f200d14db2fad3a9194a9bb8fea7abaad4fcc
Binary files /dev/null and b/static/processed/scribble_11.png differ
diff --git a/static/processed/scribble_12.png b/static/processed/scribble_12.png
new file mode 100644
index 0000000000000000000000000000000000000000..0bb56018dea7d574c9b4637b0177175906570b42
Binary files /dev/null and b/static/processed/scribble_12.png differ
diff --git a/static/processed/scribble_13.png b/static/processed/scribble_13.png
new file mode 100644
index 0000000000000000000000000000000000000000..3b01b080c8313638639d4b74a27fbd6d5661547c
Binary files /dev/null and b/static/processed/scribble_13.png differ
diff --git a/static/processed/scribble_14.png b/static/processed/scribble_14.png
new file mode 100644
index 0000000000000000000000000000000000000000..49bab5f5b5b05fff318d5fa0bfbb3622ce1ac0f8
Binary files /dev/null and b/static/processed/scribble_14.png differ
diff --git a/static/processed/scribble_5.png b/static/processed/scribble_5.png
new file mode 100644
index 0000000000000000000000000000000000000000..4c7915d53c09e1a28d0b5905ae326ea794288a8e
Binary files /dev/null and b/static/processed/scribble_5.png differ
diff --git a/static/processed/scribble_6.png b/static/processed/scribble_6.png
new file mode 100644
index 0000000000000000000000000000000000000000..6c4b772d335f21891fb8b01e1c0a81a696639369
Binary files /dev/null and b/static/processed/scribble_6.png differ
diff --git a/static/processed/scribble_7.png b/static/processed/scribble_7.png
new file mode 100644
index 0000000000000000000000000000000000000000..0eb0c3a8d2486ce45c77e39bef7e839b9a6b5433
Binary files /dev/null and b/static/processed/scribble_7.png differ
diff --git a/static/processed/scribble_8.png b/static/processed/scribble_8.png
new file mode 100644
index 0000000000000000000000000000000000000000..1f45a50700f554a505d6a1ad0a7db7c6161cc3d3
Binary files /dev/null and b/static/processed/scribble_8.png differ
diff --git a/static/processed/scribble_9.png b/static/processed/scribble_9.png
new file mode 100644
index 0000000000000000000000000000000000000000..af8f200d14db2fad3a9194a9bb8fea7abaad4fcc
Binary files /dev/null and b/static/processed/scribble_9.png differ
diff --git a/static/processed/scribble_processed.png b/static/processed/scribble_processed.png
new file mode 100644
index 0000000000000000000000000000000000000000..aca665abb021811fb936f6f47fc493272309b80c
Binary files /dev/null and b/static/processed/scribble_processed.png differ
diff --git a/static/processed/table_processed.png b/static/processed/table_processed.png
new file mode 100644
index 0000000000000000000000000000000000000000..3c3ddd7b6e45010ed2dc1011a89a6c74dc864160
Binary files /dev/null and b/static/processed/table_processed.png differ
diff --git a/static/processed/ziyXZ_processed.png b/static/processed/ziyXZ_processed.png
new file mode 100644
index 0000000000000000000000000000000000000000..02833983917f22f983450b97ae42524f43c658e8
Binary files /dev/null and b/static/processed/ziyXZ_processed.png differ
diff --git a/static/uploads/3x.pdf b/static/uploads/3x.pdf
new file mode 100644
index 0000000000000000000000000000000000000000..bd131bb9523c48e04d131bd990bb42a1858ca3f5
Binary files /dev/null and b/static/uploads/3x.pdf differ
diff --git a/static/uploads/Assignment_1_Solution.pdf b/static/uploads/Assignment_1_Solution.pdf
new file mode 100644
index 0000000000000000000000000000000000000000..b7c211005f0e2c6055a772325e4bd220c5cbd77c
--- /dev/null
+++ b/static/uploads/Assignment_1_Solution.pdf
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:5e03f06a07396772e5230e11aaa726e9a28213e1480052537364ec77bb51cf30
+size 3337218
diff --git a/static/uploads/CSE331.pdf b/static/uploads/CSE331.pdf
new file mode 100644
index 0000000000000000000000000000000000000000..4dbc0c9b9cf19c5d51b9f3feb434fd3d024253a7
--- /dev/null
+++ b/static/uploads/CSE331.pdf
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:7a0d9cb2be01b8ab4e89aa519fc7f11af465fbcf332bc67b01afb13467b70a78
+size 3070261
diff --git a/static/uploads/WhatsApp Image 2025-10-04 at 20.08.35_65cf8de7.jpg b/static/uploads/WhatsApp Image 2025-10-04 at 20.08.35_65cf8de7.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..7f338d35c9d3e874fc9bec8a3e17394c992a6fe1
Binary files /dev/null and b/static/uploads/WhatsApp Image 2025-10-04 at 20.08.35_65cf8de7.jpg differ
diff --git a/static/uploads/WhatsApp Image 2025-10-17 at 03.38.57_567a5745.jpg b/static/uploads/WhatsApp Image 2025-10-17 at 03.38.57_567a5745.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..6ec9b4a7aa1e2068a0b7e4105793ad1227262b5d
Binary files /dev/null and b/static/uploads/WhatsApp Image 2025-10-17 at 03.38.57_567a5745.jpg differ
diff --git a/static/uploads/WhatsApp Image 2025-10-26 at 01.38.21_2cabb721.jpg b/static/uploads/WhatsApp Image 2025-10-26 at 01.38.21_2cabb721.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..bc1fdcf57afa3f60cac7e5a55eb6825679daeb5d
Binary files /dev/null and b/static/uploads/WhatsApp Image 2025-10-26 at 01.38.21_2cabb721.jpg differ
diff --git a/static/uploads/WhatsApp Image 2025-10-26 at 01.38.22_3d87e144.jpg b/static/uploads/WhatsApp Image 2025-10-26 at 01.38.22_3d87e144.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..abfc86d94f9494b484282d8fe7fda895fd8f467b
--- /dev/null
+++ b/static/uploads/WhatsApp Image 2025-10-26 at 01.38.22_3d87e144.jpg	
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:fa27299dae4ec595b5c0364ea02bf36a6d88258b8bbf5bb0f484285af0af575a
+size 102185
diff --git a/static/uploads/aaaasa.png b/static/uploads/aaaasa.png
new file mode 100644
index 0000000000000000000000000000000000000000..ae4fc11d41725345293dd561d56a17f81d7f0fcf
Binary files /dev/null and b/static/uploads/aaaasa.png differ
diff --git a/static/uploads/adas.jpg b/static/uploads/adas.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..c4a0e1d6aa44bae7f6de407d6fba5671d5cb39d1
Binary files /dev/null and b/static/uploads/adas.jpg differ
diff --git a/static/uploads/as.png b/static/uploads/as.png
new file mode 100644
index 0000000000000000000000000000000000000000..fd22cf8e34a5afc6e5ed0adafcfcc81ce2cf9ec3
Binary files /dev/null and b/static/uploads/as.png differ
diff --git a/static/uploads/asasaaws.pdf b/static/uploads/asasaaws.pdf
new file mode 100644
index 0000000000000000000000000000000000000000..012cfeacfd9e567d6961a24b9b9381687b8090c7
Binary files /dev/null and b/static/uploads/asasaaws.pdf differ
diff --git a/static/uploads/awq.png b/static/uploads/awq.png
new file mode 100644
index 0000000000000000000000000000000000000000..b90783083ab36d440c74a55bd1543660d52690e4
Binary files /dev/null and b/static/uploads/awq.png differ
diff --git a/static/uploads/azaz.png b/static/uploads/azaz.png
new file mode 100644
index 0000000000000000000000000000000000000000..5445257694b84ed7425a390dc72b65489a93f6eb
Binary files /dev/null and b/static/uploads/azaz.png differ
diff --git a/static/uploads/b0d6064f-3245-40bc-87b5-bfbb459979fd.jpeg b/static/uploads/b0d6064f-3245-40bc-87b5-bfbb459979fd.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..89c81f77bfc354b9bb544d3810d9663ade8a261e
--- /dev/null
+++ b/static/uploads/b0d6064f-3245-40bc-87b5-bfbb459979fd.jpeg
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:0ac464fc189decfa93d4e7d6c8c26215276036fe2b4dcf0051cd0e66b3f55bcb
+size 6673485
diff --git a/static/uploads/bvkil.jpg b/static/uploads/bvkil.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..6b8c02a2406ee6891b8e7345efa4647d5574f807
Binary files /dev/null and b/static/uploads/bvkil.jpg differ
diff --git a/static/uploads/capture.jpg b/static/uploads/capture.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..fc86b3cb0e3a5b548a2216c46ea370053303f2d8
--- /dev/null
+++ b/static/uploads/capture.jpg
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ada79c297bfd2a00f127f9e9a40f16d478f4fc0eec4eed7ee566db47a42c4488
+size 114650
diff --git a/static/uploads/dalk.png b/static/uploads/dalk.png
new file mode 100644
index 0000000000000000000000000000000000000000..e1d1d47720bfd3041fe20f5c2d8ef520abf1da5b
Binary files /dev/null and b/static/uploads/dalk.png differ
diff --git a/static/uploads/hdia.jpg b/static/uploads/hdia.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..7fa92e57ebd44d1d7fcc85cf7dddca74b4df9c31
Binary files /dev/null and b/static/uploads/hdia.jpg differ
diff --git a/static/uploads/input 3.png b/static/uploads/input 3.png
new file mode 100644
index 0000000000000000000000000000000000000000..b6d320717c3bcc4c59bfb6b51c75876ee5c90ff9
Binary files /dev/null and b/static/uploads/input 3.png differ
diff --git a/static/uploads/input1.png b/static/uploads/input1.png
new file mode 100644
index 0000000000000000000000000000000000000000..4d870a965b55157173656e56dddfbee0c1fb45a0
Binary files /dev/null and b/static/uploads/input1.png differ
diff --git a/static/uploads/input2.png b/static/uploads/input2.png
new file mode 100644
index 0000000000000000000000000000000000000000..66f76424c447b3990170b3151dc9b6d54fab41b8
--- /dev/null
+++ b/static/uploads/input2.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ff9866256da80ec8ea98e3dd19a9dc10024cb01c3f9081687ed831c08fc38c3f
+size 116409
diff --git a/static/uploads/math_formula_sheet.pdf b/static/uploads/math_formula_sheet.pdf
new file mode 100644
index 0000000000000000000000000000000000000000..dd4a2aa173553412e30bf04bc05d32865ae6209c
--- /dev/null
+++ b/static/uploads/math_formula_sheet.pdf
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:85061d2d2098ab8b593d10fcf6c5e20568069355f083449c5272f7a8a348970a
+size 232378
diff --git a/static/uploads/no 11.png b/static/uploads/no 11.png
new file mode 100644
index 0000000000000000000000000000000000000000..295808bdd9d937bcd70a27b51444b45b388db29f
Binary files /dev/null and b/static/uploads/no 11.png differ
diff --git a/static/uploads/page_1.png b/static/uploads/page_1.png
new file mode 100644
index 0000000000000000000000000000000000000000..4812c3bab6bf09ad80f0c23f2184c6605c34ccfb
Binary files /dev/null and b/static/uploads/page_1.png differ
diff --git a/static/uploads/page_10.png b/static/uploads/page_10.png
new file mode 100644
index 0000000000000000000000000000000000000000..0fd19b432ca9538075afddc89940c36be2ac4c3c
--- /dev/null
+++ b/static/uploads/page_10.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:02d21e78e10a3997182894111ca8849d9d12a291f3e77f5e5ae029f81005005f
+size 824066
diff --git a/static/uploads/page_11.png b/static/uploads/page_11.png
new file mode 100644
index 0000000000000000000000000000000000000000..c5003a137b02d593f7771bc50c205a0c8b60c721
--- /dev/null
+++ b/static/uploads/page_11.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:78b447c62953f89eb90b2b4e2b3615264e86b1acf481f2252b8a6e9dd8b9f887
+size 471341
diff --git a/static/uploads/page_2.png b/static/uploads/page_2.png
new file mode 100644
index 0000000000000000000000000000000000000000..544c6f2d5b3a79abd0d49cd22b0689a3d65c261e
--- /dev/null
+++ b/static/uploads/page_2.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:03d985a8a292b1377dd7b3ba20626bf12849584eff1b34642b8ebc4504c37e06
+size 215218
diff --git a/static/uploads/page_3.png b/static/uploads/page_3.png
new file mode 100644
index 0000000000000000000000000000000000000000..53afe95a9d6259fda64134a6b10dff4e60ca1dda
--- /dev/null
+++ b/static/uploads/page_3.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:3b9c32bf3a9101eec93c955138b035394c417dc4335517e8fa3bf5a1d12d830d
+size 215587
diff --git a/static/uploads/page_4.png b/static/uploads/page_4.png
new file mode 100644
index 0000000000000000000000000000000000000000..69f836b49fdbd933747b091143121e937ced6c12
--- /dev/null
+++ b/static/uploads/page_4.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f63b448235f2912cf00f8a5a1e33bb98b51d317943531322a32ac5c33d6d929a
+size 204774
diff --git a/static/uploads/page_5.png b/static/uploads/page_5.png
new file mode 100644
index 0000000000000000000000000000000000000000..5a7ed31fee2aa1f265ba34f51c5d03e9ec6c6b48
--- /dev/null
+++ b/static/uploads/page_5.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:42cfbd24b865158e722cd9642e1af03b2e0eddf1ed7c76469ee726aaca53c486
+size 685946
diff --git a/static/uploads/page_6.png b/static/uploads/page_6.png
new file mode 100644
index 0000000000000000000000000000000000000000..1833a9dadc8a7cd4639e8fc9157cb9b531913074
--- /dev/null
+++ b/static/uploads/page_6.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2eddd7f0aec783b22a6642c932a8ff0dfa1b0fd3df61d280f41a3633a01e3c74
+size 442657
diff --git a/static/uploads/page_7.png b/static/uploads/page_7.png
new file mode 100644
index 0000000000000000000000000000000000000000..6c1bcd29a65832f24ad97ba29c6c1b96c65e8711
--- /dev/null
+++ b/static/uploads/page_7.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:222b6bd8989790d0eed5d6fbb2b56966ddc476aa81cf034cbd32354045ef11b5
+size 274176
diff --git a/static/uploads/page_8.png b/static/uploads/page_8.png
new file mode 100644
index 0000000000000000000000000000000000000000..47e1706c20f3ee491ba1e4e1b664ee6d8b3a27b6
--- /dev/null
+++ b/static/uploads/page_8.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:bef85bbcc7d0d991735475132ee44d8ddf01797e71231fbb808e869404fe5a5e
+size 832772
diff --git a/static/uploads/page_9.png b/static/uploads/page_9.png
new file mode 100644
index 0000000000000000000000000000000000000000..2dd033db20a42eeb166ecbf271e652ebb1b70dfe
--- /dev/null
+++ b/static/uploads/page_9.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:05e76a9759b20e0b78067e5108e0d440f52774b7d9adafe5feac44c4552f87f7
+size 978237
diff --git a/static/uploads/papa.jpg b/static/uploads/papa.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..71c8bdae7bb3791b740980eaf16517a4833f502d
Binary files /dev/null and b/static/uploads/papa.jpg differ
diff --git a/static/uploads/saj.png b/static/uploads/saj.png
new file mode 100644
index 0000000000000000000000000000000000000000..37792efb0ffff89997bd3181e1fd77d90867749d
Binary files /dev/null and b/static/uploads/saj.png differ
diff --git a/static/uploads/scribble_original.png b/static/uploads/scribble_original.png
new file mode 100644
index 0000000000000000000000000000000000000000..95a1957d82a72860618370bcca4a29d92a8972a9
Binary files /dev/null and b/static/uploads/scribble_original.png differ
diff --git a/static/uploads/table_26.png b/static/uploads/table_26.png
new file mode 100644
index 0000000000000000000000000000000000000000..595beb64861181a59ec5fef13807df396e4b9ab5
--- /dev/null
+++ b/static/uploads/table_26.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:1f72def72489cbb99cd79fccb52a45067e68c6fa2e3356828d1df894b9ad6953
+size 370847
diff --git a/static/uploads/table_27.png b/static/uploads/table_27.png
new file mode 100644
index 0000000000000000000000000000000000000000..a467904188a0b508413018a4574b9acbd9bea945
--- /dev/null
+++ b/static/uploads/table_27.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:52f7bfc0e04c1c9a86c0c223f720ba452fc281e5c9ba91286a1469f95475cc2a
+size 358488
diff --git a/static/uploads/table_28.png b/static/uploads/table_28.png
new file mode 100644
index 0000000000000000000000000000000000000000..74bea3c380b3cade5236f82d6c277dbfe5436004
--- /dev/null
+++ b/static/uploads/table_28.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:4e5bdc24128ae2ec1c984fb4500df2a7f1a39f3f6243a431b56a171077da02ac
+size 357667
diff --git a/static/uploads/table_29.png b/static/uploads/table_29.png
new file mode 100644
index 0000000000000000000000000000000000000000..d12e22272de527b94994ab94e7614924bb5d586c
--- /dev/null
+++ b/static/uploads/table_29.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:418459ba5ae7dd7125e4d23f50037b531a1402f48ac8935387a03c906cf9a795
+size 329711
diff --git a/static/uploads/table_30.png b/static/uploads/table_30.png
new file mode 100644
index 0000000000000000000000000000000000000000..15bd37a45805419e9eddd51f2aedc068ac8c7c9b
--- /dev/null
+++ b/static/uploads/table_30.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:7ce908965d2107d8bb41086822961cdc54d153d814d7a2d5cb1b06b0eb0f3feb
+size 350304
diff --git a/static/uploads/table_31.png b/static/uploads/table_31.png
new file mode 100644
index 0000000000000000000000000000000000000000..15bd37a45805419e9eddd51f2aedc068ac8c7c9b
--- /dev/null
+++ b/static/uploads/table_31.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:7ce908965d2107d8bb41086822961cdc54d153d814d7a2d5cb1b06b0eb0f3feb
+size 350304
diff --git a/static/uploads/table_32.png b/static/uploads/table_32.png
new file mode 100644
index 0000000000000000000000000000000000000000..d79d969ef05167e21bb1c1971e4280c257c6c18e
--- /dev/null
+++ b/static/uploads/table_32.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:645e4cdf46d25b6a9bc9960c9931439df606eb53824d698f26b0bae283fa6a60
+size 388382
diff --git a/static/uploads/table_33.png b/static/uploads/table_33.png
new file mode 100644
index 0000000000000000000000000000000000000000..d79d969ef05167e21bb1c1971e4280c257c6c18e
--- /dev/null
+++ b/static/uploads/table_33.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:645e4cdf46d25b6a9bc9960c9931439df606eb53824d698f26b0bae283fa6a60
+size 388382
diff --git a/static/uploads/table_34.png b/static/uploads/table_34.png
new file mode 100644
index 0000000000000000000000000000000000000000..d79d969ef05167e21bb1c1971e4280c257c6c18e
--- /dev/null
+++ b/static/uploads/table_34.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:645e4cdf46d25b6a9bc9960c9931439df606eb53824d698f26b0bae283fa6a60
+size 388382
diff --git a/static/uploads/table_35.png b/static/uploads/table_35.png
new file mode 100644
index 0000000000000000000000000000000000000000..f83e30c2135d9a2a91bab6d7a5188d959b196886
--- /dev/null
+++ b/static/uploads/table_35.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:3329a16b149ece5f2366742078ec66802ab0a0f51f53d6ce1c52c8e1d24b941f
+size 389355
diff --git a/static/uploads/zaas.png b/static/uploads/zaas.png
new file mode 100644
index 0000000000000000000000000000000000000000..24285f6ae98beebe556f45ab46de0adad123f12a
Binary files /dev/null and b/static/uploads/zaas.png differ
diff --git a/static/uploads/ziyXZ.png b/static/uploads/ziyXZ.png
new file mode 100644
index 0000000000000000000000000000000000000000..a266f1cc57382745625d228c79b0b5eb59c944c8
Binary files /dev/null and b/static/uploads/ziyXZ.png differ
diff --git a/templates/base.html b/templates/base.html
new file mode 100644
index 0000000000000000000000000000000000000000..039c2e3122fc7ad1cb1b7746a9ebeea11a53469c
--- /dev/null
+++ b/templates/base.html
@@ -0,0 +1,1258 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>{% block title %}TexLab - Professional LaTeX Converter{% endblock %}</title>
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
+  <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
+  <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
+  <style>
+    :root {
+      --primary: #4361ee;
+      --primary-dark: #3a56d4;
+      --secondary: #7209b7;
+      --accent: #4cc9f0;
+      --success: #4caf50;
+      --dark: #212529;
+      --light: #f8f9fa;
+      --gray: #6c757d;
+      --border-radius: 12px;
+      --box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+      --transition: all 0.3s ease;
+    }
+
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    html, body {
+      height: 100%;
+    }
+
+    body {
+      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+      background-color: #fafbff;
+      color: #333;
+      line-height: 1.6;
+      min-height: 100vh;
+      display: flex;
+      flex-direction: column;
+    }
+
+    /* Header & Navigation */
+    .navbar {
+      background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+      padding: 1rem 0;
+      box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
+      flex-shrink: 0;
+    }
+
+    .navbar-brand {
+      font-weight: 700;
+      font-size: 1.8rem;
+      color: white !important;
+      display: flex;
+      align-items: center;
+    }
+
+    .navbar-brand i {
+      margin-right: 10px;
+    }
+
+    .nav-link {
+      color: rgba(255, 255, 255, 0.85) !important;
+      font-weight: 500;
+      padding: 0.5rem 1rem !important;
+      border-radius: 50px;
+      transition: var(--transition);
+      margin: 0 5px;
+    }
+
+    .nav-link:hover, .nav-link.active {
+      color: white !important;
+      background: rgba(255, 255, 255, 0.15) !important;
+    }
+
+    .user-info {
+      display: flex;
+      align-items: center;
+      color: white;
+      font-weight: 500;
+      padding: 0.5rem 1rem;
+      border-radius: 50px;
+      background: rgba(255, 255, 255, 0.15);
+      margin-left: 1rem;
+    }
+
+    .user-info i {
+      margin-right: 0.5rem;
+    }
+
+    /* Main Content */
+    .main-content {
+      flex: 1;
+      padding: 2rem 0;
+    }
+
+    .page-header {
+      text-align: center;
+      margin-bottom: 2.5rem;
+      padding: 0 1rem;
+    }
+
+    .page-title {
+      font-size: 2.2rem;
+      font-weight: 800;
+      margin-bottom: 1rem;
+      color: var(--dark);
+      background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+
+    .page-subtitle {
+      font-size: 1.1rem;
+      color: var(--gray);
+      max-width: 700px;
+      margin: 0 auto;
+    }
+
+    /* Cards */
+    .feature-card {
+      background: white;
+      border-radius: var(--border-radius);
+      padding: 2rem;
+      box-shadow: var(--box-shadow);
+      transition: var(--transition);
+      height: 100%;
+      border: 1px solid rgba(0, 0, 0, 0.05);
+    }
+
+    .feature-card:hover {
+      transform: translateY(-5px);
+      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
+    }
+
+    .feature-icon {
+      width: 70px;
+      height: 70px;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin: 0 auto 1.5rem;
+      font-size: 1.8rem;
+    }
+
+    .feature-title {
+      font-size: 1.4rem;
+      font-weight: 700;
+      margin-bottom: 1rem;
+      color: var(--dark);
+    }
+
+    .feature-description {
+      color: var(--gray);
+      margin-bottom: 1.5rem;
+      font-size: 0.95rem;
+    }
+
+    /* Buttons */
+    .btn-primary-gradient {
+      background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+      color: white;
+      border: none;
+      padding: 10px 22px;
+      border-radius: 50px;
+      font-weight: 600;
+      transition: var(--transition);
+      font-size: 0.95rem;
+      box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
+    }
+
+    .btn-primary-gradient:hover {
+      transform: translateY(-3px);
+      box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
+    }
+
+    .btn-secondary-gradient {
+      background: linear-gradient(135deg, #f72585 0%, #b5179e 100%);
+      color: white;
+      border: none;
+      padding: 10px 22px;
+      border-radius: 50px;
+      font-weight: 600;
+      transition: var(--transition);
+      font-size: 0.95rem;
+      box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
+    }
+
+    .btn-secondary-gradient:hover {
+      transform: translateY(-3px);
+      box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
+    }
+
+    .btn-accent-gradient {
+      background: linear-gradient(135deg, var(--accent) 0%, #4895ef 100%);
+      color: white;
+      border: none;
+      padding: 10px 22px;
+      border-radius: 50px;
+      font-weight: 600;
+      transition: var(--transition);
+      font-size: 0.95rem;
+      box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
+    }
+
+    .btn-accent-gradient:hover {
+      transform: translateY(-3px);
+      box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
+    }
+
+    .btn-dark-gradient {
+      background: linear-gradient(135deg, #3a0ca3 0%, #250070 100%);
+      color: white;
+      border: none;
+      padding: 10px 22px;
+      border-radius: 50px;
+      font-weight: 600;
+      transition: var(--transition);
+      font-size: 0.95rem;
+      box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
+    }
+
+    .btn-dark-gradient:hover {
+      transform: translateY(-3px);
+      box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
+    }
+
+    /* Notification */
+    .notification {
+      position: fixed;
+      top: 20px;
+      right: 20px;
+      padding: 15px 25px;
+      border-radius: 10px;
+      background: var(--success);
+      color: white;
+      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+      transform: translateX(200%);
+      transition: transform 0.3s ease;
+      z-index: 1000;
+      display: flex;
+      align-items: center;
+    }
+
+    .notification.show {
+      transform: translateX(0);
+    }
+
+    /* Footer */
+    .footer {
+      background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
+      color: #cbd5e1;
+      padding: 3rem 0 2rem;
+      flex-shrink: 0;
+      margin-top: auto;
+    }
+
+    .footer-content {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+      gap: 2rem;
+      margin-bottom: 2rem;
+    }
+
+    .footer-column h4 {
+      color: white;
+      font-size: 1.2rem;
+      margin-bottom: 1.5rem;
+      position: relative;
+      padding-bottom: 0.5rem;
+    }
+
+    .footer-column h4::after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 50px;
+      height: 3px;
+      background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+      border-radius: 3px;
+    }
+
+    .footer-column p {
+      margin-bottom: 1rem;
+      line-height: 1.7;
+    }
+
+    .footer-links {
+      list-style: none;
+      padding: 0;
+    }
+
+    .footer-links li {
+      margin-bottom: 0.8rem;
+    }
+
+    .footer-links a {
+      color: #94a3b8;
+      text-decoration: none;
+      transition: var(--transition);
+      display: flex;
+      align-items: center;
+    }
+
+    .footer-links a:hover {
+      color: white;
+      transform: translateX(5px);
+    }
+
+    .footer-links a i {
+      margin-right: 10px;
+      font-size: 0.8rem;
+    }
+
+    .social-links {
+      display: flex;
+      gap: 1rem;
+      margin-top: 1rem;
+    }
+
+    .social-link {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      background: rgba(255, 255, 255, 0.05);
+      color: white;
+      transition: var(--transition);
+    }
+
+    .social-link:hover {
+      background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+      transform: translateY(-3px);
+    }
+
+    .copyright {
+      border-top: 1px solid rgba(255, 255, 255, 0.1);
+      padding-top: 2rem;
+      text-align: center;
+      color: #94a3b8;
+      font-size: 0.9rem;
+    }
+
+    .copyright a {
+      color: #94a3b8;
+      text-decoration: none;
+    }
+
+    .copyright a:hover {
+      color: white;
+    }
+
+    /* Chat Panel */
+    .chat-toggle {
+      position: fixed;
+      bottom: 30px;
+      right: 30px;
+      width: 60px;
+      height: 60px;
+      background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+      color: white;
+      border: none;
+      border-radius: 50%;
+      cursor: pointer;
+      box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 1.5rem;
+      z-index: 999;
+      transition: var(--transition);
+    }
+
+    .chat-toggle:hover {
+      transform: scale(1.1);
+    }
+    
+    /* LaTeX to Text Toggle Button */
+    #latexToTextToggle {
+      bottom: 100px;
+      background: linear-gradient(135deg, #f72585 0%, #b5179e 100%);
+    }
+
+    .chat-panel {
+      position: fixed;
+      bottom: 100px;
+      right: 30px;
+      width: 380px;
+      height: 500px;
+      background: white;
+      border-radius: var(--border-radius);
+      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
+      display: flex;
+      flex-direction: column;
+      z-index: 1000;
+      overflow: hidden;
+      transform: translateY(20px);
+      opacity: 0;
+      visibility: hidden;
+      transition: all 0.3s ease;
+    }
+
+    .chat-panel.active {
+      transform: translateY(0);
+      opacity: 1;
+      visibility: visible;
+    }
+
+    .chat-header {
+      background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+      color: white;
+      padding: 1rem 1.5rem;
+      font-weight: 600;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .chat-close {
+      background: none;
+      border: none;
+      color: white;
+      font-size: 1.2rem;
+      cursor: pointer;
+      padding: 0;
+      width: 30px;
+      height: 30px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 50%;
+      transition: background 0.2s;
+    }
+
+    .chat-close:hover {
+      background: rgba(255, 255, 255, 0.2);
+    }
+
+    .chat-messages {
+      flex: 1;
+      overflow-y: auto;
+      padding: 1rem;
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      background: #f8f9fa;
+    }
+
+    .message {
+      max-width: 85%;
+      padding: 12px 16px;
+      border-radius: 18px;
+      position: relative;
+      font-size: 0.9rem;
+      line-height: 1.5;
+    }
+
+    .user-message {
+      align-self: flex-end;
+      background: var(--primary);
+      color: white;
+      border-bottom-right-radius: 5px;
+    }
+
+    .assistant-message {
+      align-self: flex-start;
+      background: white;
+      color: var(--dark);
+      border: 1px solid #e9ecef;
+      border-bottom-left-radius: 5px;
+    }
+
+    .message-info {
+      font-size: 0.7rem;
+      opacity: 0.7;
+      margin-top: 5px;
+      text-align: right;
+    }
+
+    .chat-input {
+      display: flex;
+      padding: 1rem;
+      background: white;
+      border-top: 1px solid #e9ecef;
+      gap: 10px;
+    }
+
+    .chat-input textarea {
+      flex: 1;
+      padding: 12px 15px;
+      border: 1px solid #dee2e6;
+      border-radius: 50px;
+      resize: none;
+      font-family: inherit;
+      height: 44px;
+      font-size: 0.9rem;
+    }
+
+    .chat-input textarea:focus {
+      outline: none;
+      border-color: var(--primary);
+      box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1);
+    }
+
+    .chat-send {
+      background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+      color: white;
+      border: none;
+      border-radius: 50%;
+      width: 44px;
+      height: 44px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: transform 0.2s;
+    }
+
+    .chat-send:hover {
+      transform: scale(1.05);
+    }
+
+    .chat-send:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+      transform: none;
+    }
+
+    .loading {
+      display: none;
+      align-self: flex-start;
+      background: white;
+      color: var(--dark);
+      padding: 12px 16px;
+      border-radius: 18px;
+      border: 1px solid #e9ecef;
+      border-bottom-left-radius: 5px;
+      font-size: 0.9rem;
+    }
+
+    .loading-dots {
+      display: flex;
+      gap: 4px;
+    }
+
+    .loading-dot {
+      width: 8px;
+      height: 8px;
+      background: var(--primary);
+      border-radius: 50%;
+      animation: bounce 1.5s infinite;
+    }
+
+    .loading-dot:nth-child(2) {
+      animation-delay: 0.2s;
+    }
+
+    .loading-dot:nth-child(3) {
+      animation-delay: 0.4s;
+    }
+
+    @keyframes bounce {
+      0%, 100% { transform: translateY(0); }
+      50% { transform: translateY(-5px); }
+    }
+
+    .welcome-message {
+      text-align: center;
+      padding: 20px;
+      color: var(--gray);
+      font-size: 0.9rem;
+    }
+
+    .welcome-message h6 {
+      color: var(--dark);
+      margin-bottom: 10px;
+      font-size: 1.1rem;
+    }
+
+    /* Responsive */
+    @media (max-width: 992px) {
+      .page-title {
+        font-size: 2rem;
+      }
+      
+      .page-subtitle {
+        font-size: 1rem;
+      }
+    }
+
+    @media (max-width: 768px) {
+      .main-content {
+        padding: 1.5rem 0;
+      }
+      
+      .page-header {
+        margin-bottom: 2rem;
+      }
+      
+      .page-title {
+        font-size: 1.8rem;
+      }
+      
+      .feature-card {
+        padding: 1.5rem;
+      }
+      
+      .chat-panel {
+        width: calc(100% - 40px);
+        height: 70vh;
+        right: 20px;
+        bottom: 90px;
+      }
+      
+      .navbar-nav {
+        text-align: center;
+        margin-top: 1rem;
+      }
+      
+      .nav-link {
+        margin: 5px 0;
+      }
+      
+      .footer-content {
+        grid-template-columns: 1fr;
+        gap: 1.5rem;
+      }
+    }
+
+    @media (max-width: 576px) {
+      .page-title {
+        font-size: 1.6rem;
+      }
+      
+      .feature-icon {
+        width: 60px;
+        height: 60px;
+        font-size: 1.5rem;
+      }
+      
+      .feature-title {
+        font-size: 1.2rem;
+      }
+    }
+    
+    /* Neutral Button */
+    .btn-neutral {
+      background: #f8f9fa;
+      color: #333;
+      border: 1px solid #ddd;
+      padding: 12px 25px;
+      border-radius: 50px;
+      font-weight: 600;
+      transition: var(--transition);
+      font-size: 1rem;
+      cursor: pointer;
+      box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
+    }
+
+    .btn-neutral:hover {
+      background: #e9ecef;
+      transform: translateY(-2px);
+      box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
+    }
+    
+    /* Buttons for LaTeX to Text panel */
+    #convertLatexBtn, #copyTextBtn {
+      border: none;
+      border-radius: 6px;
+      font-weight: 600;
+      transition: var(--transition);
+      cursor: pointer;
+      box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
+    }
+    
+    #convertLatexBtn {
+      background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+      color: white;
+    }
+    
+    #convertLatexBtn:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
+    }
+    
+    #copyTextBtn:hover {
+      background: #e9ecef;
+      transform: translateY(-2px);
+      box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
+    }
+    
+
+  </style>
+  {% block extra_css %}{% endblock %}
+</head>
+
+<body>
+  {% if request.endpoint != 'auth.login' %}
+  <nav class="navbar navbar-expand-lg navbar-dark">
+    <div class="container">
+      <a class="navbar-brand" href="/">
+        <i class="fas fa-calculator"></i>
+        <span>TexLab</span>
+      </a>
+      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div class="collapse navbar-collapse" id="navbarNav">
+        <ul class="navbar-nav me-auto">
+          <li class="nav-item">
+            <a class="nav-link" href="/math">Math</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="/scribble">Scribble</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="/camera">Camera</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="/table">Table</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="/pdffly">PDFly</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="/graph">Graph</a>
+          </li>
+        </ul>
+        <div class="d-flex align-items-center">
+          <div id="authContainer">
+            <!-- Auth content will be loaded here by JavaScript -->
+          </div>
+        </div>
+      </div>
+    </div>
+  </nav>
+  {% endif %}
+
+  <div class="container main-content">
+    {% block content %}{% endblock %}
+  </div>
+
+  {% if request.endpoint != 'auth.login' %}
+  {% if request.path == '/' %}
+  <footer class="site-footer">
+    <!-- Footer -->
+    <footer class="footer" style="width: 100%; background: #1e293b; color: #fff; padding: 2rem 1rem;">
+      <div class="container">
+        <div class="footer-content">
+          <div class="footer-column">
+            <h4>About TexLab</h4>
+            <p>
+              TexLab is a cutting-edge platform that transforms handwritten mathematical expressions, 
+              scribbles, tables, and camera captures into clean, editable LaTeX code using advanced AI models.
+            </p>
+            <div class="social-links">
+              <a href="#" class="social-link"><i class="fab fa-twitter"></i></a>
+              <a href="#" class="social-link"><i class="fab fa-facebook-f"></i></a>
+              <a href="#" class="social-link"><i class="fab fa-linkedin-in"></i></a>
+              <a href="#" class="social-link"><i class="fab fa-github"></i></a>
+            </div>
+          </div>
+          
+          <div class="footer-column">
+            <h4>Quick Links</h4>
+            <ul class="footer-links">
+              <li><a href="/"><i class="fas fa-chevron-right"></i> Home</a></li>
+              <li><a href="/math"><i class="fas fa-chevron-right"></i> Math Equations</a></li>
+              <li><a href="/scribble"><i class="fas fa-chevron-right"></i> Scribble Converter</a></li>
+              <li><a href="/camera"><i class="fas fa-chevron-right"></i> Camera Capture</a></li>
+              <li><a href="/table"><i class="fas fa-chevron-right"></i> Table Detection</a></li>
+            </ul>
+          </div>
+          
+          <div class="footer-column">
+            <h4>Resources</h4>
+            <ul class="footer-links">
+              <li><a href="/help"><i class="fas fa-chevron-right"></i> Documentation</a></li>
+              <li><a href="/tutorials"><i class="fas fa-chevron-right"></i> Tutorials</a></li>
+              <li><a href="/api"><i class="fas fa-chevron-right"></i> API Reference</a></li>
+              <li><a href="/blog"><i class="fas fa-chevron-right"></i> Blog</a></li>
+              <li><a href="/support"><i class="fas fa-chevron-right"></i> Support Center</a></li>
+            </ul>
+          </div>
+          
+          <div class="footer-column">
+            <h4>Legal</h4>
+            <ul class="footer-links">
+              <li><a href="/privacy"><i class="fas fa-chevron-right"></i> Privacy Policy</a></li>
+              <li><a href="/terms"><i class="fas fa-chevron-right"></i> Terms of Service</a></li>
+              <li><a href="/cookies"><i class="fas fa-chevron-right"></i> Cookie Policy</a></li>
+              <li><a href="/gdpr"><i class="fas fa-chevron-right"></i> GDPR Compliance</a></li>
+              <li><a href="/contact"><i class="fas fa-chevron-right"></i> Contact Us</a></li>
+            </ul>
+          </div>
+        </div>
+        
+        <div class="copyright">
+          <p>&copy; 2025 TexLab. All rights reserved. Transforming handwritten content into beautiful LaTeX since 2025.</p>
+          <p>Designed with <i class="fas fa-heart" style="color: #f72585;"></i> for mathematicians, scientists, and educators worldwide.</p>
+        </div>
+      </div>
+    </footer>
+  </footer>
+  {% endif %}
+  {% endif %}
+
+  {% if request.endpoint != 'auth.login' %}
+  <!-- Chat Toggle Button -->
+  <button class="chat-toggle" id="chatToggle">
+    <i class="fas fa-robot"></i>
+  </button>
+
+  <!-- LaTeX to Text Toggle Button -->
+  <button class="chat-toggle" id="latexToTextToggle" style="bottom: 100px;">
+    <i class="fas fa-exchange-alt"></i>
+  </button>
+
+  <!-- Chat Panel -->
+  <div class="chat-panel" id="chatPanel">
+    <div class="chat-header">
+      <h5><i class="fas fa-robot me-2"></i>TexLab Assistant</h5>
+      <button class="chat-close" id="chatClose">
+        <i class="fas fa-times"></i>
+      </button>
+    </div>
+    
+    <div class="chat-messages" id="chatMessages">
+      <div class="welcome-message">
+        <h6>Welcome to TexLab Assistant!</h6>
+        <p>I can help you with LaTeX, mathematics, and document conversion.</p>
+        <p>Try asking: "How do I write a fraction in LaTeX?"</p>
+      </div>
+    </div>
+    
+    <div class="chat-input">
+      <textarea id="messageInput" placeholder="Type your message... (Enter to send)"></textarea>
+      <button class="chat-send" id="sendButton" disabled>
+        <i class="fas fa-paper-plane"></i>
+      </button>
+    </div>
+  </div>
+
+  <!-- LaTeX to Text Panel -->
+  <div class="chat-panel" id="latexToTextPanel" style="bottom: 140px;">
+    <div class="chat-header">
+      <h5><i class="fas fa-exchange-alt me-2"></i>LaTeX to Text Converter</h5>
+      <button class="chat-close" id="latexToTextClose">
+        <i class="fas fa-times"></i>
+      </button>
+    </div>
+    
+    <div class="chat-messages" id="latexToTextMessages">
+      <div class="welcome-message">
+        <h6>Convert LaTeX to Readable Text</h6>
+        <p>Enter LaTeX code below to convert it to human-readable text.</p>
+      </div>
+    </div>
+    
+    <div style="padding: 1rem; border-top: 1px solid #e9ecef;">
+      <textarea id="latexInput" placeholder="Enter LaTeX code..." style="width: 100%; height: 80px; padding: 10px; border-radius: 8px; border: 1px solid #ddd; resize: vertical; font-family: 'Consolas', monospace;"></textarea>
+      <div style="display: flex; gap: 10px; margin-top: 10px;">
+        <button class="btn btn-primary-gradient" id="convertLatexBtn" style="flex: 1; padding: 8px; font-size: 0.9rem;">
+          <i class="fas fa-exchange-alt me-1"></i>Convert
+        </button>
+        <button class="btn btn-neutral" id="copyTextBtn" style="flex: 1; padding: 8px; font-size: 0.9rem;">
+          <i class="fas fa-copy me-1"></i>Copy Text
+        </button>
+      </div>
+      <div style="margin-top: 15px;">
+        <h6 style="margin-bottom: 8px; color: #4361ee;">Converted Text:</h6>
+        <div id="convertedTextOutput" style="background: white; border: 1px solid #e9ecef; border-radius: 8px; padding: 12px; min-height: 60px; font-size: 0.95rem;">
+          Your converted text will appear here...
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="notification" id="notification">
+    <i class="fas fa-check-circle me-2"></i>LaTeX code copied to clipboard!
+  </div>
+  {% endif %}
+
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+  {% block extra_js %}{% endblock %}
+  <script>
+    // Check if we're on the login page
+    const isLoginPage = document.querySelector('.login-container') !== null;
+    
+    if (!isLoginPage) {
+      // Load user authentication status
+      document.addEventListener('DOMContentLoaded', function() {
+        fetch('/auth/user')
+          .then(response => response.json())
+          .then(data => {
+            const authContainer = document.getElementById('authContainer');
+            if (data.authenticated) {
+              // Show user info with appropriate icon
+              if (data.user.email && data.user.email.includes('@')) {
+                // Google user
+                authContainer.innerHTML = `
+                  <div class="user-info">
+                    <i class="fab fa-google"></i>
+                    <span>${data.user.name}</span>
+                  </div>
+                  <a href="/auth/logout" class="btn btn-signin ms-2">
+                    <i class="fas fa-sign-out-alt me-1"></i>Sign Out
+                  </a>
+                `;
+              } else {
+                // Guest user
+                authContainer.innerHTML = `
+                  <div class="user-info">
+                    <i class="fas fa-user"></i>
+                    <span>Guest: ${data.user.name}</span>
+                  </div>
+                  <a href="/auth/logout" class="btn btn-signin ms-2">
+                    <i class="fas fa-sign-out-alt me-1"></i>Sign Out
+                  </a>
+                `;
+              }
+            } else {
+              authContainer.innerHTML = `
+                <a href="/auth/login" class="btn btn-signin">
+                  <i class="fas fa-sign-in-alt me-1"></i>Sign In
+                </a>
+              `;
+            }
+          })
+          .catch(error => {
+            console.error('Error checking auth status:', error);
+            // Fallback to show sign in button
+            document.getElementById('authContainer').innerHTML = `
+              <a href="/auth/login" class="btn btn-signin">
+                <i class="fas fa-sign-in-alt me-1"></i>Sign In
+              </a>
+            `;
+          });
+      });
+
+      // Chat panel functionality
+      const chatToggle = document.getElementById('chatToggle');
+      const chatPanel = document.getElementById('chatPanel');
+      const chatClose = document.getElementById('chatClose');
+      const chatMessages = document.getElementById('chatMessages');
+      const messageInput = document.getElementById('messageInput');
+      const sendButton = document.getElementById('sendButton');
+      
+      // Toggle chat panel
+      chatToggle.addEventListener('click', () => {
+        chatPanel.classList.toggle('active');
+      });
+      
+      // Close chat panel
+      chatClose.addEventListener('click', () => {
+        chatPanel.classList.remove('active');
+      });
+      
+      // Auto-resize textarea
+      messageInput.addEventListener('input', function() {
+        this.style.height = 'auto';
+        this.style.height = (this.scrollHeight > 120 ? 120 : this.scrollHeight) + 'px';
+      });
+      
+      // Enable send button when there's text
+      messageInput.addEventListener('input', function() {
+        sendButton.disabled = !this.value.trim();
+      });
+      
+      // Send message on Enter key
+      messageInput.addEventListener('keydown', function(e) {
+        if (e.key === 'Enter' && !e.shiftKey) {
+          e.preventDefault();
+          if (!sendButton.disabled) {
+            sendMessage();
+          }
+        }
+      });
+      
+      // Send button click
+      sendButton.addEventListener('click', sendMessage);
+      
+      // Generate a simple session ID
+      const sessionId = 'session_' + Date.now();
+      
+      // Send message function
+      async function sendMessage() {
+        const message = messageInput.value.trim();
+        if (!message) return;
+        
+        // Clear input and disable button
+        messageInput.value = '';
+        messageInput.style.height = '44px';
+        sendButton.disabled = true;
+        
+        // Add user message to chat
+        addMessageToChat(message, 'user');
+        
+        // Show loading indicator
+        const loadingElement = document.createElement('div');
+        loadingElement.className = 'loading';
+        loadingElement.id = 'loadingIndicator';
+        loadingElement.innerHTML = `
+          <div class="loading-dots">
+            <div class="loading-dot"></div>
+            <div class="loading-dot"></div>
+            <div class="loading-dot"></div>
+          </div>
+        `;
+        chatMessages.appendChild(loadingElement);
+        chatMessages.scrollTop = chatMessages.scrollHeight;
+        
+        try {
+          // Simulate AI response (in a real implementation, you would call your AI model)
+          // For now, we'll generate a simple response based on common LaTeX questions
+          setTimeout(() => {
+            // Remove loading indicator
+            document.getElementById('loadingIndicator').remove();
+            
+            // Generate response based on user input
+            const response = generateResponse(message);
+            
+            // Add assistant response to chat
+            addMessageToChat(response, 'assistant');
+          }, 1000);
+        } catch (error) {
+          // Remove loading indicator
+          document.getElementById('loadingIndicator').remove();
+          
+          console.error('Error:', error);
+          addMessageToChat('Sorry, I encountered an error. Please try again.', 'assistant');
+        }
+      }
+      
+      // Generate a response based on user input
+      function generateResponse(userMessage) {
+        const lowerMessage = userMessage.toLowerCase();
+        
+        if (lowerMessage.includes('fraction') || lowerMessage.includes('frac')) {
+          return 'To write a fraction in LaTeX, use \\\\frac{numerator}{denominator}. For example: \\\\frac{1}{2} produces ½.';
+        } else if (lowerMessage.includes('integral') || lowerMessage.includes('int')) {
+          return 'To write an integral in LaTeX, use \\\\int. For example: \\\\int_0^1 x^2 dx. For definite integrals, specify limits with _ and ^.';
+        } else if (lowerMessage.includes('sum') || lowerMessage.includes('sigma')) {
+          return 'To write a summation in LaTeX, use \\\\sum. For example: \\\\sum_{i=1}^{n} i. Use _ for lower limit and ^ for upper limit.';
+        } else if (lowerMessage.includes('limit') || lowerMessage.includes('lim')) {
+          return 'To write a limit in LaTeX, use \\\\lim. For example: \\\\lim_{x \\\\to 0} \\\\frac{\\\\sin x}{x} = 1.';
+        } else if (lowerMessage.includes('matrix') || lowerMessage.includes('array')) {
+          return 'To create a matrix in LaTeX, use \\\\begin{matrix} ... \\\\end{matrix}. For example:\\n\\\\begin{matrix}\\na & b \\\\\\nc & d\\n\\\\end{matrix}';
+        } else if (lowerMessage.includes('table') || lowerMessage.includes('tabular')) {
+          return 'To create a table in LaTeX, use the tabular environment. For example:\\n\\\\begin{tabular}{|c|c|}\\n\\\\hline\\nColumn 1 & Column 2 \\\\\\n\\\\hline\\nItem 1 & Item 2 \\\\\\n\\\\hline\\n\\\\end{tabular}';
+        } else if (lowerMessage.includes('equation') || lowerMessage.includes('align')) {
+          return 'To write equations in LaTeX, you can use:\\n- Inline: $E = mc^2$\\n- Display: $$E = mc^2$$\\n- Aligned: \\\\begin{align} x &= y \\\\ y &= z \\\\end{align}';
+        } else if (lowerMessage.includes('texlab') || lowerMessage.includes('help')) {
+          return "I'm the TexLab Assistant! I can help you with:\\n- LaTeX syntax and commands\\n- Mathematical notation\\n- Document conversion tips\\n- Using TexLab features\\n\\nJust ask me any LaTeX or math question!";
+        } else {
+          // Default response
+          return "I'm the TexLab Assistant. I can help you with LaTeX syntax, mathematical notation, and document conversion. Try asking me something like 'How do I write a fraction in LaTeX?' or 'How do I create a matrix?'";
+        }
+      }
+      
+      // Add message to chat UI
+      function addMessageToChat(content, sender) {
+        // Remove welcome message if it exists
+        const welcomeMessage = chatMessages.querySelector('.welcome-message');
+        if (welcomeMessage) {
+          welcomeMessage.remove();
+        }
+        
+        const messageElement = document.createElement('div');
+        messageElement.className = `message ${sender}-message`;
+        
+        const time = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+        
+        messageElement.innerHTML = `
+          <div>${content}</div>
+          <div class="message-info">${sender === 'user' ? 'You' : 'Assistant'} • ${time}</div>
+        `;
+        
+        chatMessages.appendChild(messageElement);
+        chatMessages.scrollTop = chatMessages.scrollHeight;
+        
+        // Re-enable send button
+        sendButton.disabled = false;
+      }
+      
+      // Global notification function
+      function showNotification(message) {
+        const notification = document.getElementById("notification");
+        if (notification) {
+          notification.innerHTML = `<i class="fas fa-check-circle me-2"></i>${message}`;
+          notification.classList.add('show');
+          setTimeout(() => {
+            notification.classList.remove('show');
+          }, 3000);
+        }
+      }
+      
+      // LaTeX to Text functionality
+      const latexToTextToggle = document.getElementById('latexToTextToggle');
+      const latexToTextPanel = document.getElementById('latexToTextPanel');
+      const latexToTextClose = document.getElementById('latexToTextClose');
+      const latexInput = document.getElementById('latexInput');
+      const convertLatexBtn = document.getElementById('convertLatexBtn');
+      const copyTextBtn = document.getElementById('copyTextBtn');
+      const convertedTextOutput = document.getElementById('convertedTextOutput');
+      
+      // Toggle LaTeX to Text panel
+      latexToTextToggle.addEventListener('click', () => {
+        latexToTextPanel.classList.toggle('active');
+        // Close chat panel if it's open
+        chatPanel.classList.remove('active');
+      });
+      
+      // Close LaTeX to Text panel
+      latexToTextClose.addEventListener('click', () => {
+        latexToTextPanel.classList.remove('active');
+      });
+      
+      // Convert LaTeX to text function
+      function convertLatexToText(latexStr) {
+        if (!latexStr) return "";
+        
+        // Make a copy to work with
+        let text = latexStr;
+        
+        // Remove common LaTeX commands
+        text = text.replace(/\\begin\{.*?\}/g, '');
+        text = text.replace(/\\end\{.*?\}/g, '');
+        
+        // Replace common math symbols with readable text
+        const replacements = {
+          '\\\\alpha': 'alpha',
+          '\\\\beta': 'beta',
+          '\\\\gamma': 'gamma',
+          '\\\\delta': 'delta',
+          '\\\\epsilon': 'epsilon',
+          '\\\\theta': 'theta',
+          '\\\\lambda': 'lambda',
+          '\\\\mu': 'mu',
+          '\\\\pi': 'pi',
+          '\\\\sigma': 'sigma',
+          '\\\\phi': 'phi',
+          '\\\\omega': 'omega',
+          '\\\\infty': 'infinity',
+          '\\\\int': 'integral',
+          '\\\\sum': 'sum',
+          '\\\\prod': 'product',
+          '\\\\lim': 'limit',
+          '\\\\sqrt': 'square root',
+          '\\\\frac': 'fraction',
+          '\\\\times': 'times',
+          '\\\\cdot': 'cdot',
+          '\\\\div': 'divided by',
+          '\\\\pm': 'plus or minus',
+          '\\\\mp': 'minus or plus',
+          '\\\\leq': 'less than or equal to',
+          '\\\\geq': 'greater than or equal to',
+          '\\\\neq': 'not equal to',
+          '\\\\approx': 'approximately',
+          '\\\\equiv': 'equivalent to',
+          '\\\\subset': 'subset of',
+          '\\\\subseteq': 'subset or equal to',
+          '\\\\cup': 'union',
+          '\\\\cap': 'intersection',
+          '\\\\in': 'element of',
+          '\\\\notin': 'not element of',
+          '\\\\forall': 'for all',
+          '\\\\exists': 'there exists',
+          '\\\\nexists': 'there does not exist',
+          '\\\\emptyset': 'empty set',
+          '\\\\varnothing': 'empty set',
+          '\\\\mathbb{R}': 'real numbers',
+          '\\\\mathbb{N}': 'natural numbers',
+          '\\\\mathbb{Z}': 'integers',
+          '\\\\mathbb{Q}': 'rational numbers',
+          '\\\\mathbb{C}': 'complex numbers',
+          '\\\\to': 'to',
+          '\\\\rightarrow': 'rightarrow',
+          '\\\\left': '',
+          '\\\\right': '',
+          '\\\\big': '',
+          '\\\\Big': '',
+          '\\\\bigg': '',
+          '\\\\Bigg': '',
+        };
+        
+        for (const [pattern, replacement] of Object.entries(replacements)) {
+          const regex = new RegExp(pattern, 'g');
+          text = text.replace(regex, replacement);
+        }
+        
+        // Handle fractions specifically: \frac{a}{b} -> (a over b)
+        text = text.replace(/\\frac\{([^}]*)\}\{([^}]*)\}/g, '($1 over $2)');
+        
+        // Handle subscripts: _{text} -> _text or _a -> _a
+        text = text.replace(/_\{([^}]*)\}/g, '_$1');
+        
+        // Handle superscripts: ^{text} -> ^text or ^a -> ^a
+        text = text.replace(/\^\{([^}]*)\}/g, '^$1');
+        
+        // Handle square roots: \sqrt{text} -> square root of (text)
+        text = text.replace(/\\sqrt\{([^}]*)\}/g, 'square root of ($1)');
+        
+        // Remove remaining braces
+        text = text.replace(/\{/g, '(').replace(/\}/g, ')');
+        
+        // Clean up extra spaces
+        text = text.replace(/\s+/g, ' ').trim();
+        
+        return text;
+      }
+      
+      // Convert button click handler
+      convertLatexBtn.addEventListener('click', () => {
+        const latexCode = latexInput.value.trim();
+        
+        if (!latexCode) {
+          convertedTextOutput.textContent = 'Please enter some LaTeX code to convert.';
+          return;
+        }
+        
+        try {
+          const convertedText = convertLatexToText(latexCode);
+          convertedTextOutput.textContent = convertedText;
+        } catch (error) {
+          console.error('Conversion error:', error);
+          convertedTextOutput.textContent = 'An error occurred during conversion. Please try again.';
+        }
+      });
+      
+      // Copy text button click handler
+      copyTextBtn.addEventListener('click', () => {
+        const text = convertedTextOutput.textContent;
+        if (!text || text === 'Your converted text will appear here...') {
+          showNotification('Nothing to copy!');
+          return;
+        }
+        
+        navigator.clipboard.writeText(text).then(() => {
+          showNotification('Text copied to clipboard!');
+        }).catch(err => {
+          console.error('Failed to copy:', err);
+          showNotification('Failed to copy text. Please try again.');
+        });
+      });
+    }
+  </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/templates/camera.html b/templates/camera.html
new file mode 100644
index 0000000000000000000000000000000000000000..6ef92010ee5f0e9e6394b1ae950fdd7cfa94c316
--- /dev/null
+++ b/templates/camera.html
@@ -0,0 +1,426 @@
+{% extends "base.html" %}
+
+{% block title %}Camera to LaTeX | TexLab{% endblock %}
+
+{% block extra_css %}
+<style>
+  .feature-card {
+  display: inline-block;
+  width: 100%;
+  height: auto !important;
+  padding: 20px 25px;
+  margin-bottom: 20px;
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
+}
+  .camera-container {
+    position: relative;
+    width: 100%;
+    max-width: 600px;
+    margin: 0 auto 20px;
+    border-radius: 15px;
+    overflow: hidden;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+  }
+
+  .camera-preview {
+    width: 100%;
+    display: block;
+    background: #000;
+  }
+
+  .capture-btn {
+    position: absolute;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 70px;
+    height: 70px;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.2);
+    border: 3px solid white;
+    cursor: pointer;
+    transition: all 0.2s ease;
+  }
+
+  .capture-btn:hover {
+    background: rgba(255, 255, 255, 0.3);
+    transform: translateX(-50%) scale(1.1);
+  }
+
+  .capture-btn:active {
+    transform: translateX(-50%) scale(0.95);
+  }
+
+  .capture-btn-inner {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background: white;
+  }
+
+  .image-preview {
+    max-width: 100%;
+    max-height: 400px;
+    margin: 20px auto;
+    display: block;
+    border-radius: 10px;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+  }
+
+  .latex-output {
+    background: #f8f9fa;
+    border-radius: 10px;
+    padding: 20px;
+    border: 1px solid #eee;
+    font-family: 'Consolas', 'Courier New', monospace;
+    font-size: 1.1rem;
+    white-space: pre-wrap;
+    word-break: break-all;
+    min-height: 100px;
+    margin: 20px 0;
+  }
+
+  .rendered-output {
+    background: white;
+    border-radius: 10px;
+    padding: 20px;
+    border: 1px solid #eee;
+    min-height: 100px;
+    margin: 20px 0;
+    text-align: center;
+  }
+
+  .solution-output {
+    background: #e8f5e9;
+    border-radius: 10px;
+    padding: 20px;
+    border: 1px solid #c8e6c9;
+    margin: 20px 0;
+    display: none;
+  }
+
+  .solution-title {
+    color: #2e7d32;
+    margin-bottom: 15px;
+    font-weight: 600;
+  }
+
+  .solution-content {
+    font-family: 'Consolas', 'Courier New', monospace;
+    font-size: 1.1rem;
+    white-space: pre-wrap;
+  }
+
+  .loading {
+    display: none;
+    text-align: center;
+    padding: 20px;
+  }
+
+  .spinner {
+    border: 4px solid rgba(0, 0, 0, 0.1);
+    border-radius: 50%;
+    border-top: 4px solid #667eea;
+    width: 40px;
+    height: 40px;
+    animation: spin 1s linear infinite;
+    margin: 0 auto 15px;
+  }
+
+  @keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
+
+  .button-row {
+    display: flex;
+    gap: 15px;
+    justify-content: center;
+    margin: 20px 0;
+    flex-wrap: wrap;
+  }
+
+  .permission-error {
+    text-align: center;
+    padding: 30px;
+    color: #666;
+  }
+
+  .permission-error i {
+    font-size: 3rem;
+    color: #dc3545;
+    margin-bottom: 20px;
+  }
+
+  @media (max-width: 768px) {
+    .button-row {
+      flex-direction: column;
+      align-items: center;
+    }
+    
+    .button-row .btn {
+      width: 100%;
+      max-width: 300px;
+    }
+  }
+</style>
+{% endblock %}
+
+{% block content %}
+<div class="page-header">
+  <h1 class="page-title"><i class="fas fa-camera me-2"></i>Camera to LaTeX</h1>
+  <p class="page-subtitle">
+    Capture mathematical equations with your camera and convert them to clean, editable LaTeX code.
+  </p>
+</div>
+
+<div class="row">
+  <div class="col-lg-10 mx-auto">
+    <div class="feature-card">
+      <h3 class="section-title">Capture Equation</h3>
+      
+      <div class="camera-container">
+        <video id="cameraPreview" class="camera-preview" autoplay playsinline></video>
+        <div class="capture-btn" id="captureBtn">
+          <div class="capture-btn-inner"></div>
+        </div>
+      </div>
+      
+      <div class="permission-error" id="permissionError" style="display: none;">
+        <i class="fas fa-exclamation-triangle"></i>
+        <h4>Camera Permission Required</h4>
+        <p>Please allow camera access to use this feature.</p>
+        <button id="retryPermission" class="btn btn-primary-gradient mt-3">
+          <i class="fas fa-redo me-2"></i>Retry Camera Access
+        </button>
+      </div>
+    </div>
+
+    <div class="loading" id="loading">
+      <div class="spinner"></div>
+      <p>Processing your equation... This may take a few seconds.</p>
+    </div>
+
+    <div class="feature-card" id="resultCard" style="display: none;">
+      <h3 class="section-title">Generated LaTeX</h3>
+      
+      <div class="image-preview-container" id="imagePreviewContainer" style="display: none;">
+        <h5>Captured Image:</h5>
+        <img id="imagePreview" class="image-preview" alt="Captured equation">
+      </div>
+      
+      <div class="rendered-output">
+        <h5>Rendered Equation:</h5>
+        <div id="renderedContent"></div>
+      </div>
+      
+      <div class="latex-output" id="latexOutput"></div>
+      
+      <div class="solution-output" id="solutionOutput">
+        <h5 class="solution-title"><i class="fas fa-calculator me-2"></i>Solution</h5>
+        <div class="solution-content" id="solutionContent"></div>
+      </div>
+      
+      <div class="button-row">
+        <button id="solveBtn" class="btn btn-accent-gradient">
+          <i class="fas fa-calculator me-2"></i>Solve Equation
+        </button>
+        <button id="copyBtn" class="btn btn-secondary-gradient">
+          <i class="fas fa-copy me-2"></i>Copy LaTeX
+        </button>
+        <button id="newCapture" class="btn btn-neutral">
+          <i class="fas fa-camera me-2"></i>New Capture
+        </button>
+        <a href="/" class="btn btn-neutral">
+          <i class="fas fa-home me-2"></i>Back to Home
+        </a>
+      </div>
+    </div>
+  </div>
+</div>
+{% endblock %}
+
+{% block extra_js %}
+<script>
+  // DOM elements
+  const cameraPreview = document.getElementById('cameraPreview');
+  const captureBtn = document.getElementById('captureBtn');
+  const permissionError = document.getElementById('permissionError');
+  const retryPermission = document.getElementById('retryPermission');
+  const resultCard = document.getElementById('resultCard');
+  const loading = document.getElementById('loading');
+  const imagePreview = document.getElementById('imagePreview');
+  const imagePreviewContainer = document.getElementById('imagePreviewContainer');
+  const solveBtn = document.getElementById('solveBtn');
+  const solutionOutput = document.getElementById('solutionOutput');
+  
+  // State variables
+  let currentStream = null;
+  let currentLatex = '';
+  
+  // Initialize camera
+  async function initCamera() {
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ 
+        video: { 
+          facingMode: 'environment',
+          width: { ideal: 1280 },
+          height: { ideal: 720 }
+        } 
+      });
+      
+      currentStream = stream;
+      cameraPreview.srcObject = stream;
+      permissionError.style.display = 'none';
+    } catch (err) {
+      console.error('Camera error:', err);
+      permissionError.style.display = 'block';
+      cameraPreview.style.display = 'none';
+    }
+  }
+  
+  // Retry camera permission
+  retryPermission.addEventListener('click', initCamera);
+  
+  // Capture image
+  captureBtn.addEventListener('click', async () => {
+    if (!currentStream) return;
+    
+    try {
+      loading.style.display = 'block';
+      resultCard.style.display = 'none';
+      solutionOutput.style.display = 'none';
+      
+      // Create canvas to capture image
+      const canvas = document.createElement('canvas');
+      const video = cameraPreview;
+      canvas.width = video.videoWidth;
+      canvas.height = video.videoHeight;
+      const ctx = canvas.getContext('2d');
+      ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+      
+      // Convert to blob and send to server
+      canvas.toBlob(async (blob) => {
+        const formData = new FormData();
+        formData.append('image', blob, 'capture.jpg');
+        
+        try {
+          const response = await fetch('/camera/process', {
+            method: 'POST',
+            body: formData
+          });
+          
+          const data = await response.json();
+          
+          if (data.success) {
+            currentLatex = data.latex;
+            
+            // Display image preview
+            imagePreview.src = canvas.toDataURL('image/jpeg');
+            imagePreviewContainer.style.display = 'block';
+            
+            // Display results
+            document.getElementById('latexOutput').textContent = data.latex;
+            document.getElementById('renderedContent').innerHTML = `$$${data.latex}$$`;
+            
+            // Render with MathJax if available
+            if (typeof MathJax !== 'undefined') {
+              MathJax.typesetPromise([document.getElementById('renderedContent')]);
+            }
+            
+            // Show result card
+            resultCard.style.display = 'block';
+          } else {
+            alert('Error: ' + data.error);
+          }
+        } catch (error) {
+          console.error('Processing error:', error);
+          alert('An error occurred during processing. Please try again.');
+        } finally {
+          loading.style.display = 'none';
+        }
+      }, 'image/jpeg', 0.9);
+      
+    } catch (error) {
+      console.error('Capture error:', error);
+      alert('An error occurred during capture. Please try again.');
+      loading.style.display = 'none';
+    }
+  });
+  
+  // Solve equation
+  solveBtn.addEventListener('click', async () => {
+    if (!currentLatex) return;
+    
+    try {
+      loading.style.display = 'block';
+      
+      const response = await fetch('/camera/solve', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ latex: currentLatex })
+      });
+      
+      const data = await response.json();
+      
+      if (data.success) {
+        const solution = data.solution;
+        let solutionText = '';
+        
+        if (solution.type === 'equation') {
+          solutionText = `Solutions:\n${solution.solutions.join('\n')}`;
+        } else if (solution.type === 'expression') {
+          solutionText = `Simplified:\n${solution.result}`;
+        } else if (solution.type === 'numerical') {
+          solutionText = `Numerical value:\n${solution.result}`;
+        } else if (solution.type === 'system') {
+          solutionText = `System solutions:\n${JSON.stringify(solution.solutions)}`;
+        } else if (solution.type === 'error') {
+          solutionText = `Error: ${solution.message}`;
+        }
+        
+        document.getElementById('solutionContent').textContent = solutionText;
+        solutionOutput.style.display = 'block';
+      } else {
+        alert('Error: ' + data.error);
+      }
+    } catch (error) {
+      console.error('Solving error:', error);
+      alert('An error occurred while solving the equation. Please try again.');
+    } finally {
+      loading.style.display = 'none';
+    }
+  });
+  
+  // Copy to clipboard
+  document.getElementById('copyBtn').addEventListener('click', () => {
+    const latexText = document.getElementById('latexOutput').textContent;
+    navigator.clipboard.writeText(latexText).then(() => {
+      showNotification('LaTeX code copied to clipboard!');
+    }).catch(err => {
+      console.error('Failed to copy: ', err);
+      alert('Failed to copy LaTeX code. Please try again.');
+    });
+  });
+  
+  // New capture
+  document.getElementById('newCapture').addEventListener('click', () => {
+    resultCard.style.display = 'none';
+    solutionOutput.style.display = 'none';
+  });
+  
+  // Initialize camera when page loads
+  window.addEventListener('load', initCamera);
+  
+  // Stop camera when leaving page
+  window.addEventListener('beforeunload', () => {
+    if (currentStream) {
+      currentStream.getTracks().forEach(track => track.stop());
+    }
+  });
+</script>
+{% endblock %}
\ No newline at end of file
diff --git a/templates/graph.html b/templates/graph.html
new file mode 100644
index 0000000000000000000000000000000000000000..c641542e5ea7a0dd88c1ebda8e29e6c6c1175363
--- /dev/null
+++ b/templates/graph.html
@@ -0,0 +1,342 @@
+{% extends "base.html" %}
+
+{% block title %}Graph & Plot Generator | TexLab{% endblock %}
+
+{% block extra_css %}
+<style>
+    .feature-card {
+  display: inline-block;
+  width: 100%;
+  height: auto !important;
+  padding: 20px 25px;
+  margin-bottom: 20px;
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
+}
+  .command-input {
+    border: 2px solid #ddd;
+    border-radius: 10px;
+    padding: 15px;
+    background: white;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
+    margin-bottom: 20px;
+  }
+
+  .command-input input {
+    width: 100%;
+    padding: 12px 15px;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    font-size: 1.1rem;
+    font-family: 'Consolas', 'Courier New', monospace;
+  }
+
+  .command-input input:focus {
+    outline: none;
+    border-color: #667eea;
+    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
+  }
+
+  .examples {
+    background: #e3f2fd;
+    border-radius: 10px;
+    padding: 20px;
+    margin: 20px 0;
+  }
+
+  .example-list {
+    text-align: left;
+    padding-left: 20px;
+  }
+
+  .example-list li {
+    margin-bottom: 10px;
+    font-family: 'Consolas', 'Courier New', monospace;
+    background: white;
+    padding: 8px 12px;
+    border-radius: 5px;
+    display: inline-block;
+    margin: 5px;
+  }
+
+  .graph-container {
+    text-align: center;
+    margin: 30px 0;
+    padding: 20px;
+    background: white;
+    border-radius: 10px;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
+    min-height: 300px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .graph-placeholder {
+    color: #888;
+  }
+
+  .graph-image {
+    max-width: 100%;
+    height: auto;
+    border-radius: 10px;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+  }
+
+  .loading {
+    display: none;
+    text-align: center;
+    padding: 20px;
+  }
+
+  .spinner {
+    border: 4px solid rgba(0, 0, 0, 0.1);
+    border-radius: 50%;
+    border-top: 4px solid #667eea;
+    width: 40px;
+    height: 40px;
+    animation: spin 1s linear infinite;
+    margin: 0 auto 15px;
+  }
+
+  @keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
+
+  .function-info {
+    background: #f8f9fa;
+    border-radius: 10px;
+    padding: 15px;
+    margin: 20px 0;
+    text-align: center;
+    font-family: 'Consolas', 'Courier New', monospace;
+    font-size: 1.1rem;
+  }
+
+  @media (max-width: 768px) {
+    .command-input input {
+      font-size: 1rem;
+    }
+    
+    .example-list li {
+      display: block;
+      margin: 5px 0;
+    }
+  }
+</style>
+{% endblock %}
+
+{% block content %}
+<div class="page-header">
+  <h1 class="page-title"><i class="fas fa-chart-line me-2"></i>Graph & Plot Generator</h1>
+  <p class="page-subtitle">
+    Generate beautiful mathematical graphs and plots from simple text commands.
+  </p>
+</div>
+
+<div class="row">
+  <div class="col-lg-10 mx-auto">
+    <div class="feature-card">
+      <h3 class="section-title">Create Your Graph</h3>
+      
+      <div class="command-input">
+        <input type="text" id="commandInput" placeholder="Enter a command like: plot x^2 from -5 to 5" autocomplete="off">
+      </div>
+      
+      <div class="text-center">
+        <button id="generateBtn" class="btn btn-primary-gradient">
+          <i class="fas fa-chart-line me-2"></i>Generate Graph
+        </button>
+        <button id="clearBtn" class="btn btn-neutral ms-2">
+          <i class="fas fa-eraser me-2"></i>Clear
+        </button>
+      </div>
+    </div>
+
+    <div class="examples">
+      <h5><i class="fas fa-lightbulb me-2"></i>Example Commands:</h5>
+      <ul class="example-list">
+        <li>plot x^2 from -5 to 5</li>
+        <li>plot sin(x) from 0 to 2*pi</li>
+        <li>plot x^3 - 2*x + 1 from -3 to 3</li>
+        <li>plot cos(x) from -pi to pi</li>
+        <li>plot sqrt(x) from 0 to 10</li>
+        <li>plot exp(-x^2) from -3 to 3</li>
+      </ul>
+    </div>
+
+    <div class="loading" id="loading">
+      <div class="spinner"></div>
+      <p>Generating your graph... This may take a few seconds.</p>
+    </div>
+
+    <div class="function-info" id="functionInfo" style="display: none;">
+      Function: <span id="functionText"></span> | Range: <span id="rangeText"></span>
+    </div>
+
+    <div class="graph-container">
+      <div id="graphPlaceholder" class="graph-placeholder">
+        <i class="fas fa-chart-line fa-3x mb-3"></i>
+        <h4>Your Graph Will Appear Here</h4>
+        <p class="text-muted">Enter a plot command above and click "Generate Graph"</p>
+      </div>
+      <img id="graphImage" class="graph-image" style="display: none;">
+    </div>
+
+    <div class="feature-card" id="latexCard" style="display: none;">
+      <h3 class="section-title">✅ LaTeX Code</h3>
+      
+      <div style="margin-bottom: 15px; padding: 15px; background: #e8f5e9; border-radius: 8px; text-align: left;">
+        <strong>Latex code will appear here</strong>
+        <ul style="margin: 10px 0; padding-left: 20px;">
+          
+        </ul>
+      </div>
+      
+      <!-- <div class="latex-output" id="latexOutput" style="background: #f8f9fa; border-radius: 10px; padding: 20px; border: 1px solid #eee; font-family: 'Consolas', 'Courier New', monospace; font-size: 1rem; white-space: pre-wrap; word-break: break-all; min-height: 100px; margin: 20px 0; max-height: 400px; overflow-y: auto;"></div> -->
+            <div class="latex-output" id="latexOutput" style="display: none;"></div>
+
+
+      <div class="actions" style="margin-top: 20px; text-align: center;">
+        <button id="copyLatexBtn" class="btn btn-secondary-gradient">
+          <i class="fas fa-copy me-2"></i>Copy LaTeX
+        </button>
+        <button id="downloadLatexBtn" class="btn btn-success-gradient" style="background: linear-gradient(135deg, #28a745 0%, #20c997 100%); color: white; border: none; padding: 12px 25px; border-radius: 50px; font-weight: 600; transition: all 0.3s ease;">
+          <i class="fas fa-download me-2"></i>Download .tex File
+        </button>
+        <a href="/graph" class="btn btn-neutral">
+          <i class="fas fa-redo me-2"></i>New Graph
+        </a>
+        <a href="/" class="btn btn-neutral">
+          <i class="fas fa-home me-2"></i>Back to Home
+        </a>
+      </div>
+    </div>
+  </div>
+</div>
+{% endblock %}
+
+{% block extra_js %}
+<script>
+  // DOM elements
+  const commandInput = document.getElementById('commandInput');
+  const generateBtn = document.getElementById('generateBtn');
+  const clearBtn = document.getElementById('clearBtn');
+  const graphPlaceholder = document.getElementById('graphPlaceholder');
+  const graphImage = document.getElementById('graphImage');
+  const loading = document.getElementById('loading');
+  const functionInfo = document.getElementById('functionInfo');
+  const functionText = document.getElementById('functionText');
+  const rangeText = document.getElementById('rangeText');
+  const latexCard = document.getElementById('latexCard');
+  const latexOutput = document.getElementById('latexOutput');
+  
+  // Focus on input when page loads
+  window.addEventListener('load', () => {
+    commandInput.focus();
+  });
+  
+  // Generate graph on button click
+  generateBtn.addEventListener('click', generateGraph);
+  
+  // Generate graph on Enter key
+  commandInput.addEventListener('keypress', (e) => {
+    if (e.key === 'Enter') {
+      generateGraph();
+    }
+  });
+  
+  // Clear button
+  clearBtn.addEventListener('click', () => {
+    commandInput.value = '';
+    graphPlaceholder.style.display = 'block';
+    graphImage.style.display = 'none';
+    functionInfo.style.display = 'none';
+    latexCard.style.display = 'none';
+    commandInput.focus();
+  });
+  
+  // Generate graph function
+  async function generateGraph() {
+    const command = commandInput.value.trim();
+    
+    if (!command) {
+      alert('Please enter a command');
+      return;
+    }
+    
+    try {
+      // Show loading indicator
+      loading.style.display = 'block';
+      graphPlaceholder.style.display = 'none';
+      graphImage.style.display = 'none';
+      functionInfo.style.display = 'none';
+      latexCard.style.display = 'none';
+      
+      // Send request to backend
+      const response = await fetch('/graph/generate', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ command: command })
+      });
+      
+      const data = await response.json();
+      
+      if (data.success) {
+        // Display graph
+        graphImage.src = 'data:image/png;base64,' + data.image;
+        graphImage.style.display = 'block';
+        
+        // Display function info
+        functionText.textContent = data.function;
+        rangeText.textContent = data.range;
+        functionInfo.style.display = 'block';
+        
+        // Use real TikZ/pgfplots LaTeX code from backend
+        latexOutput.textContent = data.latex;
+        latexCard.style.display = 'block';
+      } else {
+        alert('Error: ' + data.error);
+        graphPlaceholder.style.display = 'block';
+      }
+    } catch (error) {
+      console.error('Error:', error);
+      alert('An error occurred. Please try again.');
+      graphPlaceholder.style.display = 'block';
+    } finally {
+      // Hide loading indicator
+      loading.style.display = 'none';
+    }
+  }
+  
+  // Copy LaTeX to clipboard
+  document.getElementById('copyLatexBtn').addEventListener('click', () => {
+    const latexText = latexOutput.textContent;
+    navigator.clipboard.writeText(latexText).then(() => {
+      alert('✅ TikZ/pgfplots LaTeX code copied to clipboard!\nReady to paste into Overleaf.');
+    }).catch(err => {
+      console.error('Failed to copy: ', err);
+      alert('Failed to copy LaTeX code. Please try again.');
+    });
+  });
+  
+  // Download LaTeX file
+  document.getElementById('downloadLatexBtn').addEventListener('click', () => {
+    const latexText = latexOutput.textContent;
+    const blob = new Blob([latexText], { type: 'text/plain' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'graph.tex';
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+    alert('✅ LaTeX file downloaded!\nYou can now upload it to Overleaf.');
+  });
+</script>
+{% endblock %}
\ No newline at end of file
diff --git a/templates/index.html b/templates/index.html
new file mode 100644
index 0000000000000000000000000000000000000000..d595512dfcec4889765bf038d1485f14230fb3d6
--- /dev/null
+++ b/templates/index.html
@@ -0,0 +1,148 @@
+{% extends "base.html" %}
+
+{% block title %}TexLab - Professional LaTeX Converter{% endblock %}
+
+{% block content %}
+<div class="page-header">
+  <h1 class="page-title">Transform Images to LaTeX Instantly</h1>
+  <p class="page-subtitle">
+    Our powerful AI-powered platform converts mathematical equations, handwritten notes, 
+    camera captures, and tables into clean, editable LaTeX code with unmatched accuracy.
+  </p>
+</div>
+
+<div class="row g-4">
+  <div class="col-md-6 col-lg-4">
+    <div class="feature-card text-center h-100">
+      <div class="feature-icon" style="background: rgba(67, 97, 238, 0.1); color: #4361ee;">
+        <i class="fas fa-square-root-alt"></i>
+      </div>
+      <h3 class="feature-title">Math Equations</h3>
+      <p class="feature-description">
+        Upload images of printed or handwritten mathematical equations and get precise LaTeX code.
+      </p>
+      <a href="/math" class="btn btn-primary-gradient">
+        Convert Now <i class="fas fa-arrow-right ms-2"></i>
+      </a>
+    </div>
+  </div>
+
+
+ <div class="col-md-6 col-lg-4">
+    <div class="feature-card text-center h-100">
+      <div class="feature-icon" style="background: rgba(76, 201, 240, 0.1); color: #4cc9f0;">
+        <i class="fas fa-camera"></i>
+      </div>
+      <h3 class="feature-title">Capture Math Equations</h3>
+      <p class="feature-description">
+        Take a photo of any equation with your device's camera and convert it to LaTeX in real-time.
+      </p>
+      <a href="/camera" class="btn btn-accent-gradient">
+        Capture Now <i class="fas fa-arrow-right ms-2"></i>
+      </a>
+    </div>
+  </div>
+
+  <div class="col-md-6 col-lg-4">
+    <div class="feature-card text-center h-100">
+      <div class="feature-icon" style="background: rgba(247, 37, 133, 0.1); color: #f72585;">
+        <i class="fas fa-pen-fancy"></i>
+      </div>
+      <h3 class="feature-title">Handwritten Notes</h3>
+      <p class="feature-description">
+        Draw your equations directly on our digital canvas and convert them to LaTeX instantly.
+      </p>
+      <a href="/scribble" class="btn btn-secondary-gradient">
+        Start Drawing <i class="fas fa-arrow-right ms-2"></i>
+      </a>
+    </div>
+  </div>
+
+ 
+
+  <div class="col-md-6 col-lg-4">
+    <div class="feature-card text-center h-100">
+      <div class="feature-icon" style="background: rgba(133, 221, 238, 0.1); color: #85ddee;">
+        <i class="fas fa-table"></i>
+      </div>
+      <h3 class="feature-title">Table Detection</h3>
+      <p class="feature-description">
+        Automatically detect handwritten tables and convert them to perfectly formatted LaTeX tables.
+      </p>
+      <a href="/table" class="btn btn-dark-gradient">
+        Detect Tables <i class="fas fa-arrow-right ms-2"></i>
+      </a>
+    </div>
+  </div>
+
+  <div class="col-md-6 col-lg-4">
+    <div class="feature-card text-center h-100">
+      <div class="feature-icon" style="background: rgba(67, 97, 238, 0.1); color: #4361ee;">
+        <i class="fas fa-file-pdf"></i>
+      </div>
+      <h3 class="feature-title">PDFly Converter</h3>
+      <p class="feature-description">
+        Upload PDFs and use Converto to highlight areas for instant LaTeX conversion.
+      </p>
+      <a href="/pdffly" class="btn btn-primary-gradient">
+        Try PDFly <i class="fas fa-arrow-right ms-2"></i>
+      </a>
+    </div>
+  </div>
+
+  <div class="col-md-6 col-lg-4">
+    <div class="feature-card text-center h-100">
+      <div class="feature-icon" style="background: rgba(58, 12, 163, 0.1); color: #3a0ca3;">
+        <i class="fas fa-chart-line"></i>
+      </div>
+      <h3 class="feature-title">Graph & Plot Generator</h3>
+      <p class="feature-description">
+        Generate beautiful mathematical graphs and plots from simple text commands.
+      </p>
+      <a href="/graph" class="btn btn-dark-gradient">
+        Create Graph <i class="fas fa-arrow-right ms-2"></i>
+      </a>
+    </div>
+  </div>
+
+</div>
+
+{% endblock %}
+{% block extra_css %}
+<style>
+  footer {
+  width: 100%;
+  background-color: #1e293b;
+  color: white;
+  padding: 3rem 1rem;
+  box-sizing: border-box;
+}
+
+  .feature-icon {
+    width: 70px;
+    height: 70px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto 1.5rem;
+    font-size: 1.8rem;
+  }
+  
+  @media (max-width: 768px) {
+    .page-title {
+      font-size: 1.8rem;
+    }
+    
+    .page-subtitle {
+      font-size: 1rem;
+    }
+    
+    .col-md-6.col-lg-4 {
+      flex: 0 0 100%;
+      max-width: 100%;
+    }
+  }
+  
+</style>
+{% endblock %}
\ No newline at end of file
diff --git a/templates/login.html b/templates/login.html
new file mode 100644
index 0000000000000000000000000000000000000000..96a10733b52aa24fa9861ff7ea9496a2afa3b1ed
--- /dev/null
+++ b/templates/login.html
@@ -0,0 +1,280 @@
+{% extends "base.html" %}
+
+{% block title %}Login - TexLab{% endblock %}
+
+{% block content %}
+<div class="login-container">
+  <div class="login-content">
+    <div class="login-header animate__animated animate__fadeInDown">
+      <div class="logo-placeholder">
+        <img src="{{ url_for('static', filename='images/logo.svg') }}" alt="TexLab Logo" class="logo-img">
+      </div>
+      <h1 class="login-title">Welcome to TexLab</h1>
+      <p class="login-subtitle">Transform your handwritten math into beautiful LaTeX</p>
+    </div>
+    
+    <div class="login-body animate__animated animate__fadeInUp">
+      <div class="login-message">
+        <h2>Let's Dive In!</h2>
+        <p>Sign in to continue your journey with TexLab</p>
+      </div>
+      
+      <div class="login-options">
+        <a href="{{ url_for('auth.google_login') }}" class="btn btn-google">
+          <i class="fab fa-google me-2"></i>Continue with Google
+        </a>
+        
+        <div class="divider">
+          <span>OR</span>
+        </div>
+        
+        <form id="guestForm" method="POST" action="{{ url_for('auth.guest_login') }}">
+          <div class="form-group">
+            <input type="text" class="form-control" id="guestName" name="name" placeholder="Enter your name" required>
+          </div>
+          <button class="btn btn-primary btn-block" type="submit">
+            <i class="fas fa-user me-2"></i>Continue as Guest
+          </button>
+        </form>
+      </div>
+    </div>
+    
+    <div class="login-footer animate__animated animate__fadeIn">
+      <div class="small">
+        <a href="#!" class="text-decoration-none">Privacy Policy</a> 
+        &middot; 
+        <a href="#!" class="text-decoration-none">Terms of Service</a>
+      </div>
+      <div class="small mt-2">
+        &copy; 2025 TexLab. All rights reserved.
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>
+body, html {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+.login-container {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, #4361ee 0%, #7209b7 100%);
+  padding: 1rem;
+  margin: 0;
+}
+
+.login-content {
+  width: 100%;
+  max-width: 450px;
+  text-align: center;
+  color: white;
+}
+
+.login-header {
+  padding: 2rem 1rem;
+}
+
+.logo-img {
+  width: 100px;
+  height: 100px;
+  margin-bottom: 1.5rem;
+  animation: pulse 2s infinite;
+}
+
+.login-title {
+  font-size: 2.2rem;
+  font-weight: 700;
+  margin-bottom: 0.5rem;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.login-subtitle {
+  font-size: 1.1rem;
+  opacity: 0.9;
+  margin-bottom: 0;
+}
+
+.login-body {
+  padding: 2rem 1rem;
+  background: rgba(255, 255, 255, 0.15);
+  border-radius: 15px;
+  backdrop-filter: blur(10px);
+  margin: 1rem;
+}
+
+.login-message {
+  margin-bottom: 2rem;
+}
+
+.login-message h2 {
+  font-size: 1.8rem;
+  font-weight: 700;
+  margin-bottom: 0.5rem;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+}
+
+.login-message p {
+  opacity: 0.9;
+  margin-bottom: 0;
+}
+
+.login-options {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.btn-google {
+  background-color: white;
+  color: #757575;
+  border: none;
+  padding: 14px 20px;
+  border-radius: 8px;
+  font-weight: 600;
+  transition: all 0.3s ease;
+  text-align: center;
+  text-decoration: none;
+  display: block;
+  font-size: 1.1rem;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.btn-google:hover {
+  background-color: #f8f8f8;
+  transform: translateY(-3px);
+  box-shadow: 0 7px 14px rgba(0, 0, 0, 0.15);
+}
+
+.divider {
+  display: flex;
+  align-items: center;
+  text-align: center;
+  color: rgba(255, 255, 255, 0.8);
+  font-weight: 500;
+}
+
+.divider::before,
+.divider::after {
+  content: "";
+  flex: 1;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+.divider::before {
+  margin-right: 1rem;
+}
+
+.divider::after {
+  margin-left: 1rem;
+}
+
+.form-group {
+  margin-bottom: 1rem;
+}
+
+.form-control {
+  width: 100%;
+  padding: 14px 15px;
+  border: none;
+  border-radius: 8px;
+  font-size: 1.1rem;
+  transition: all 0.3s;
+  box-sizing: border-box;
+  background: rgba(255, 255, 255, 0.9);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.form-control:focus {
+  outline: none;
+  background: white;
+  box-shadow: 0 7px 14px rgba(0, 0, 0, 0.15);
+}
+
+.btn-primary {
+  background: linear-gradient(135deg, #ff6b6b 0%, #ffa502 100%);
+  color: white;
+  border: none;
+  padding: 14px 20px;
+  border-radius: 8px;
+  font-weight: 600;
+  transition: all 0.3s ease;
+  cursor: pointer;
+  font-size: 1.1rem;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.btn-primary:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 7px 14px rgba(0, 0, 0, 0.15);
+}
+
+.btn-block {
+  width: 100%;
+  display: block;
+}
+
+.login-footer {
+  padding: 1.5rem 1rem;
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.login-footer a {
+  color: rgba(255, 255, 255, 0.9);
+  text-decoration: none;
+}
+
+.login-footer a:hover {
+  text-decoration: underline;
+}
+
+@keyframes pulse {
+  0% {
+    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
+  }
+  70% {
+    box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
+  }
+}
+
+/* Remove navbar and footer on login page */
+.navbar,
+.footer,
+.chat-toggle,
+#chatPanel,
+#latexToTextPanel,
+#latexToTextToggle {
+  display: none !important;
+}
+
+.main-content {
+  padding: 0 !important;
+}
+
+/* Ensure full background coverage */
+body {
+  background: linear-gradient(135deg, #4361ee 0%, #7209b7 100%) !important;
+}
+</style>
+{% endblock %}
+
+{% block extra_js %}
+<script>
+document.getElementById('guestForm').addEventListener('submit', function(e) {
+  const guestName = document.getElementById('guestName').value.trim();
+  if (!guestName) {
+    e.preventDefault();
+    alert('Please enter your name');
+    return;
+  }
+});
+</script>
+{% endblock %}
\ No newline at end of file
diff --git a/templates/math.html b/templates/math.html
new file mode 100644
index 0000000000000000000000000000000000000000..2b5a642a8fe9016e784a56dc168e18ec3c036e6c
--- /dev/null
+++ b/templates/math.html
@@ -0,0 +1,474 @@
+{% extends "base.html" %}
+
+{% block title %}Math Equation to LaTeX | TexLab{% endblock %}
+
+{% block extra_css %}
+<style>
+  .feature-card {
+    display: inline-block;
+    width: 100%;
+    height: auto !important;
+    padding: 20px 25px;
+    margin-bottom: 20px;
+    background: #fff;
+    border-radius: 12px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
+  }
+
+  .upload-message {
+    display: none;
+    background: linear-gradient(135deg, #e3f2fd, #bbdefb);
+    /* soft sky-blue gradient */
+    color: #0d47a1;
+    /* deep blue text */
+    font-weight: 600;
+    padding: 12px 20px;
+    margin: 15px auto;
+    text-align: center;
+    border-radius: 10px;
+    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
+    width: fit-content;
+    max-width: 80%;
+    animation: fadeIn 0.4s ease-in-out;
+  }
+
+  /* Smooth fade-in animation */
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+      transform: translateY(-5px);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+
+  .upload-area {
+    border: 3px dashed #ddd;
+    border-radius: 15px;
+    padding: 40px 20px;
+    text-align: center;
+    transition: all 0.3s ease;
+    cursor: pointer;
+    background-color: #fafafa;
+    margin-bottom: 20px;
+  }
+
+  .upload-area:hover {
+    border-color: #667eea;
+    background-color: #f0f4ff;
+  }
+
+  .upload-area.dragover {
+    border-color: #667eea;
+    background-color: #e0e7ff;
+    transform: scale(1.02);
+  }
+
+  .upload-icon {
+    font-size: 3rem;
+    color: #667eea;
+    margin-bottom: 15px;
+  }
+
+  .upload-text {
+    font-size: 1.2rem;
+    color: #555;
+    margin-bottom: 10px;
+  }
+
+  .upload-hint {
+    color: #888;
+    font-size: 0.9rem;
+  }
+
+  .image-preview {
+    max-width: 100%;
+    max-height: 400px;
+    margin: 20px auto;
+    display: block;
+    border-radius: 10px;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+  }
+
+  .latex-output {
+    background: #f8f9fa;
+    border-radius: 10px;
+    padding: 20px;
+    border: 1px solid #eee;
+    font-family: 'Consolas', 'Courier New', monospace;
+    font-size: 1.1rem;
+    white-space: pre-wrap;
+    word-break: break-all;
+    min-height: 100px;
+    margin: 20px 0;
+  }
+
+  .rendered-output {
+    background: white;
+    border-radius: 10px;
+    padding: 20px;
+    border: 1px solid #eee;
+    min-height: 100px;
+    margin: 20px 0;
+    text-align: center;
+  }
+
+  .solution-output {
+    background: #e8f5e9;
+    border-radius: 10px;
+    padding: 20px;
+    border: 1px solid #c8e6c9;
+    margin: 20px 0;
+    display: none;
+  }
+
+  .solution-title {
+    color: #2e7d32;
+    margin-bottom: 15px;
+    font-weight: 600;
+  }
+
+  .solution-content {
+    font-family: 'Consolas', 'Courier New', monospace;
+    font-size: 1.1rem;
+    white-space: pre-wrap;
+  }
+
+  .loading {
+    display: none;
+    text-align: center;
+    padding: 20px;
+  }
+
+  .spinner {
+    border: 4px solid rgba(0, 0, 0, 0.1);
+    border-radius: 50%;
+    border-top: 4px solid #667eea;
+    width: 40px;
+    height: 40px;
+    animation: spin 1s linear infinite;
+    margin: 0 auto 15px;
+  }
+
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  .button-row {
+    display: flex;
+    gap: 15px;
+    justify-content: center;
+    margin: 20px 0;
+    flex-wrap: wrap;
+  }
+
+  @media (max-width: 768px) {
+    .button-row {
+      flex-direction: column;
+      align-items: center;
+    }
+
+    .button-row .btn {
+      width: 100%;
+      max-width: 300px;
+    }
+  }
+</style>
+{% endblock %}
+
+{% block content %}
+<div class="page-header">
+  <h1 class="page-title"><i class="fas fa-square-root-alt me-2"></i>Math Equation to LaTeX</h1>
+  <p class="page-subtitle">
+    Upload an image of a mathematical equation and convert it to clean, editable LaTeX code.
+  </p>
+</div>
+
+<div class="row">
+  <div class="col-lg-10 mx-auto">
+    <div class="feature-card">
+      <h3 class="section-title">Upload Equation Image</h3>
+
+
+
+
+      <form method="POST" enctype="multipart/form-data" id="uploadForm">
+        <div class="upload-area" id="dropArea">
+          <div class="upload-icon">
+            <i class="fas fa-cloud-upload-alt"></i>
+          </div>
+          <h4 class="upload-text">Drag & Drop your equation image here</h4>
+          <p class="upload-hint">or click to browse files (JPG, PNG, GIF, etc.)</p>
+          <input type="file" name="image" id="fileInput" accept="image/*" required class="d-none">
+        </div>
+
+
+        
+        <div id="uploadMessage" class="upload-message">
+          File uploaded successfully!
+        </div>
+
+        <div class="text-center" id="uploadButtonContainer" style="display:none; margin-top:15px;">
+          <button type="submit" class="btn btn-primary-gradient">
+            <i class="fas fa-upload me-2"></i>Upload & Convert
+          </button>
+        </div>
+
+      </form>
+    </div>
+
+
+
+
+    <div class="loading" id="loading">
+      <div class="spinner"></div>
+      <p>Processing your equation... This may take a few seconds.</p>
+    </div>
+
+
+
+
+    <div class="feature-card" id="resultCard" style="display: none;">
+      <h3 class="section-title">Generated LaTeX</h3>
+
+      <div class="image-preview-container" id="imagePreviewContainer" style="display: none;">
+        <h5>Original Image:</h5>
+        <img id="imagePreview" class="image-preview" alt="Uploaded equation">
+      </div>
+
+      <div class="rendered-output">
+        <h5>Rendered Equation:</h5>
+        <div id="renderedContent"></div>
+      </div>
+
+      <div class="latex-output" id="latexOutput"></div>
+
+      <div class="solution-output" id="solutionOutput">
+        <h5 class="solution-title"><i class="fas fa-calculator me-2"></i>Solution</h5>
+        <div class="solution-content" id="solutionContent"></div>
+      </div>
+
+      <div class="button-row">
+        <button id="solveBtn" class="btn btn-accent-gradient">
+          <i class="fas fa-calculator me-2"></i>Solve Equation
+        </button>
+        <button id="copyBtn" class="btn btn-secondary-gradient">
+          <i class="fas fa-copy me-2"></i>Copy LaTeX
+        </button>
+        <button id="newConversion" class="btn btn-neutral">
+          <i class="fas fa-redo me-2"></i>New Conversion
+        </button>
+        <a href="/" class="btn btn-neutral">
+          <i class="fas fa-home me-2"></i>Back to Home
+        </a>
+      </div>
+    </div>
+  </div>
+</div>
+{% endblock %}
+
+
+
+{% block extra_js %}
+<script>
+  // DOM elements
+  const dropArea = document.getElementById('dropArea');
+  const fileInput = document.getElementById('fileInput');
+  const uploadForm = document.getElementById('uploadForm');
+  const resultCard = document.getElementById('resultCard');
+  const loading = document.getElementById('loading');
+  const imagePreview = document.getElementById('imagePreview');
+  const imagePreviewContainer = document.getElementById('imagePreviewContainer');
+  const solveBtn = document.getElementById('solveBtn');
+  const solutionOutput = document.getElementById('solutionOutput');
+
+  const uploadMessage = document.getElementById('uploadMessage');
+  const uploadButtonContainer = document.getElementById('uploadButtonContainer');
+
+  // State variables
+  let currentLatex = '';
+
+  // File upload handling
+  dropArea.addEventListener('click', () => {
+    fileInput.click();
+  });
+
+
+
+  // When user picks file manually
+  fileInput.addEventListener('change', () => {
+    if (fileInput.files.length) {
+      showUploadReadyState(fileInput.files[0].name);
+    }
+  });
+
+  // When file is dropped
+  dropArea.addEventListener('drop', (e) => {
+    e.preventDefault();
+    dropArea.classList.remove('dragover');
+
+    if (e.dataTransfer.files.length) {
+      fileInput.files = e.dataTransfer.files;
+      showUploadReadyState(e.dataTransfer.files[0].name);
+    }
+  });
+
+  // Helper: show "uploaded" message and button
+  function showUploadReadyState(fileName) {
+    uploadMessage.innerHTML = `✅ <b>${fileName}</b> uploaded successfully!`;
+    uploadMessage.style.display = 'block';
+    uploadButtonContainer.style.display = 'block';
+  }
+
+  // Prevent browser defaults globally
+  document.addEventListener('dragover', (e) => e.preventDefault());
+  document.addEventListener('drop', (e) => e.preventDefault());
+
+  // Drag and Drop Events
+  dropArea.addEventListener('dragover', (e) => {
+    e.preventDefault();
+    dropArea.classList.add('dragover');
+  });
+
+  dropArea.addEventListener('dragleave', () => {
+    dropArea.classList.remove('dragover');
+  });
+
+  dropArea.addEventListener('drop', (e) => {
+    e.preventDefault();
+    dropArea.classList.remove('dragover');
+
+    if (e.dataTransfer.files.length) {
+      fileInput.files = e.dataTransfer.files;
+      uploadForm.requestSubmit(); // 🔥 triggers your async submit code
+    }
+  });
+
+
+
+  // Form submission
+  uploadForm.addEventListener('submit', async (e) => {
+    e.preventDefault();
+
+    const formData = new FormData(uploadForm);
+
+    try {
+      loading.style.display = 'block';
+      resultCard.style.display = 'none';
+      solutionOutput.style.display = 'none';
+
+      const response = await fetch('/math/process', {
+        method: 'POST',
+        body: formData
+      });
+
+      const data = await response.json();
+
+      if (data.success) {
+        currentLatex = data.latex;
+
+        // Display image preview if available
+        if (data.image_path) {
+          imagePreview.src = '/' + data.image_path;
+          imagePreviewContainer.style.display = 'block';
+        } else {
+          imagePreviewContainer.style.display = 'none';
+        }
+
+        // Display results
+        document.getElementById('latexOutput').textContent = data.latex;
+        document.getElementById('renderedContent').innerHTML = `$$${data.latex}$$`;
+
+        // Render with MathJax if available
+        if (typeof MathJax !== 'undefined') {
+          MathJax.typesetPromise([document.getElementById('renderedContent')]);
+        }
+
+        // Show result card
+        resultCard.style.display = 'block';
+      } else {
+        alert('Error: ' + data.error);
+      }
+    } catch (error) {
+      console.error('Upload error:', error);
+      alert('An error occurred during upload. Please try again.');
+    } finally {
+      loading.style.display = 'none';
+    }
+  });
+
+  // Solve equation
+  solveBtn.addEventListener('click', async () => {
+    if (!currentLatex) return;
+
+    try {
+      loading.style.display = 'block';
+
+      const response = await fetch('/math/solve', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ latex: currentLatex })
+      });
+
+      const data = await response.json();
+
+      if (data.success) {
+        const solution = data.solution;
+        let solutionText = '';
+
+        if (solution.type === 'equation') {
+          solutionText = `Solutions:\n${solution.solutions.join('\n')}`;
+        } else if (solution.type === 'expression') {
+          solutionText = `Simplified:\n${solution.result}`;
+        } else if (solution.type === 'numerical') {
+          solutionText = `Numerical value:\n${solution.result}`;
+        } else if (solution.type === 'system') {
+          solutionText = `System solutions:\n${JSON.stringify(solution.solutions)}`;
+        } else if (solution.type === 'error') {
+          solutionText = `Error: ${solution.message}`;
+        }
+
+        document.getElementById('solutionContent').textContent = solutionText;
+        solutionOutput.style.display = 'block';
+      } else {
+        alert('Error: ' + data.error);
+      }
+    } catch (error) {
+      console.error('Solving error:', error);
+      alert('An error occurred while solving the equation. Please try again.');
+    } finally {
+      loading.style.display = 'none';
+    }
+  });
+
+  // Copy to clipboard
+  document.getElementById('copyBtn').addEventListener('click', () => {
+    const latexText = document.getElementById('latexOutput').textContent;
+    navigator.clipboard.writeText(latexText).then(() => {
+      showNotification('LaTeX code copied to clipboard!');
+    }).catch(err => {
+      console.error('Failed to copy: ', err);
+      alert('Failed to copy LaTeX code. Please try again.');
+    });
+  });
+
+  // New conversion
+  document.getElementById('newConversion').addEventListener('click', () => {
+    resultCard.style.display = 'none';
+    solutionOutput.style.display = 'none';
+    uploadForm.reset();
+  });
+</script>
+{% endblock %}
\ No newline at end of file
diff --git a/templates/pdf.html b/templates/pdf.html
new file mode 100644
index 0000000000000000000000000000000000000000..2d07a80308939d2e8a16feb74f6d38d96d23c3a5
--- /dev/null
+++ b/templates/pdf.html
@@ -0,0 +1,781 @@
+{% extends "base.html" %}
+
+{% block title %}PDF to LaTeX | TexLab{% endblock %}
+
+{% block extra_css %}
+<style>
+  .upload-area {
+    border: 3px dashed #ddd;
+    border-radius: 15px;
+    padding: 40px 20px;
+    text-align: center;
+    transition: all 0.3s ease;
+    cursor: pointer;
+    background-color: #fafafa;
+    margin-bottom: 20px;
+  }
+
+  .upload-area:hover {
+    border-color: #667eea;
+    background-color: #f0f4ff;
+  }
+
+  .upload-area.dragover {
+    border-color: #667eea;
+    background-color: #e0e7ff;
+    transform: scale(1.02);
+  }
+
+  .upload-icon {
+    font-size: 3rem;
+    color: #667eea;
+    margin-bottom: 15px;
+  }
+
+  .upload-text {
+    font-size: 1.2rem;
+    color: #555;
+    margin-bottom: 10px;
+  }
+
+  .upload-hint {
+    color: #888;
+    font-size: 0.9rem;
+  }
+
+  .pdf-container {
+    position: relative;
+    margin: 20px 0;
+    border: 1px solid #ddd;
+    border-radius: 10px;
+    overflow: hidden;
+    background: #f8f9fa;
+    min-height: 500px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .pdf-placeholder {
+    text-align: center;
+    padding: 40px;
+  }
+
+  .highlight-overlay {
+    position: absolute;
+    border: 2px solid #ffc107;
+    background-color: rgba(255, 193, 7, 0.3);
+    cursor: crosshair;
+  }
+
+  .latex-output {
+    background: #f8f9fa;
+    border-radius: 10px;
+    padding: 20px;
+    border: 1px solid #eee;
+    font-family: 'Consolas', 'Courier New', monospace;
+    font-size: 1.1rem;
+    white-space: pre-wrap;
+    word-break: break-all;
+    min-height: 100px;
+    margin: 20px 0;
+  }
+
+  .rendered-output {
+    background: white;
+    border-radius: 10px;
+    padding: 20px;
+    border: 1px solid #eee;
+    min-height: 100px;
+    margin: 20px 0;
+    text-align: center;
+  }
+
+  .solution-output {
+    background: #e8f5e9;
+    border-radius: 10px;
+    padding: 20px;
+    border: 1px solid #c8e6c9;
+    margin: 20px 0;
+    display: none;
+  }
+
+  .solution-title {
+    color: #2e7d32;
+    margin-bottom: 15px;
+    font-weight: 600;
+  }
+
+  .solution-content {
+    font-family: 'Consolas', 'Courier New', monospace;
+    font-size: 1.1rem;
+    white-space: pre-wrap;
+  }
+
+  .loading {
+    display: none;
+    text-align: center;
+    padding: 20px;
+  }
+
+  .spinner {
+    border: 4px solid rgba(0, 0, 0, 0.1);
+    border-radius: 50%;
+    border-top: 4px solid #667eea;
+    width: 40px;
+    height: 40px;
+    animation: spin 1s linear infinite;
+    margin: 0 auto 15px;
+  }
+
+  @keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
+
+  .page-controls {
+    display: flex;
+    justify-content: center;
+    gap: 15px;
+    margin: 20px 0;
+  }
+
+  .page-indicator {
+    padding: 10px 20px;
+    background: #f8f9fa;
+    border-radius: 20px;
+    font-weight: 600;
+  }
+
+  .button-row {
+    display: flex;
+    gap: 15px;
+    justify-content: center;
+    margin: 20px 0;
+    flex-wrap: wrap;
+  }
+
+  .highlighter-btn {
+    background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
+    color: #333;
+    border: none;
+    padding: 12px 25px;
+    border-radius: 50px;
+    font-weight: 600;
+    transition: all 0.3s ease;
+    font-size: 1rem;
+  }
+
+  .highlighter-btn:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 5px 15px rgba(255, 193, 7, 0.4);
+  }
+
+  .highlighter-btn.active {
+    background: #ff9800;
+    box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.5);
+  }
+
+  .file-info {
+    background: #e3f2fd;
+    border-radius: 10px;
+    padding: 15px;
+    margin: 15px 0;
+    text-align: center;
+  }
+
+  @media (max-width: 768px) {
+    .pdf-container {
+      min-height: 300px;
+    }
+    
+    .button-row {
+      flex-direction: column;
+      align-items: center;
+    }
+    
+    .button-row .btn {
+      width: 100%;
+      max-width: 300px;
+    }
+  }
+</style>
+{% endblock %}
+
+{% block content %}
+<div class="page-header">
+  <h1 class="page-title"><i class="fas fa-file-pdf me-2"></i>PDF to LaTeX</h1>
+  <p class="page-subtitle">
+    Upload a PDF document, highlight areas, and convert them to clean, editable LaTeX code.
+  </p>
+</div>
+
+<div class="row">
+  <div class="col-lg-10 mx-auto">
+    <div class="feature-card">
+      <h3 class="section-title">Upload PDF Document</h3>
+      
+      <form method="POST" enctype="multipart/form-data" id="uploadForm">
+        <div class="upload-area" id="dropArea">
+          <div class="upload-icon">
+            <i class="fas fa-cloud-upload-alt"></i>
+          </div>
+          <h4 class="upload-text">Drag & Drop your PDF here</h4>
+          <p class="upload-hint">or click to browse files (PDF only)</p>
+          <input type="file" name="pdf_file" id="fileInput" accept=".pdf" required class="d-none">
+        </div>
+        
+        <div class="text-center">
+          <button type="submit" class="btn btn-primary-gradient">
+            <i class="fas fa-upload me-2"></i>Upload PDF
+          </button>
+        </div>
+      </form>
+    </div>
+
+    <div class="feature-card" id="pdfViewer" style="display: none;">
+      <h3 class="section-title">PDF Document</h3>
+      
+      <div class="file-info">
+        <i class="fas fa-file-pdf me-2"></i>
+        <span id="fileName"></span> 
+        (<span id="pageCount"></span> pages)
+      </div>
+      
+      <div class="page-controls">
+        <button id="prevPage" class="btn btn-neutral">
+          <i class="fas fa-arrow-left"></i>
+        </button>
+        <div class="page-indicator">
+          Page <span id="currentPage">1</span> of <span id="totalPages">1</span>
+        </div>
+        <button id="nextPage" class="btn btn-neutral">
+          <i class="fas fa-arrow-right"></i>
+        </button>
+      </div>
+      
+      <div class="pdf-container" id="pdfContainer">
+        <div class="pdf-placeholder">
+          <i class="fas fa-file-pdf fa-3x mb-3" style="color: #dc3545;"></i>
+          <h4>PDF Document Preview</h4>
+          <p class="text-muted">Click the Highlighter Mode button and drag to select an area for conversion</p>
+          <div style="margin-top: 30px; text-align: left; background: white; padding: 30px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1);">
+            <h5>Sample PDF Content</h5>
+            <p>This is a placeholder for your PDF document content. In a real implementation, the actual PDF pages would be rendered here.</p>
+            <p>You can highlight any area of this document to convert it to LaTeX code.</p>
+            <p><strong>Mathematical Expression:</strong> E = mc²</p>
+            <p><strong>Table:</strong></p>
+            <table class="table table-bordered">
+              <thead>
+                <tr>
+                  <th>Column 1</th>
+                  <th>Column 2</th>
+                  <th>Column 3</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td>Row 1, Col 1</td>
+                  <td>Row 1, Col 2</td>
+                  <td>Row 1, Col 3</td>
+                </tr>
+                <tr>
+                  <td>Row 2, Col 1</td>
+                  <td>Row 2, Col 2</td>
+                  <td>Row 2, Col 3</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+      
+      <div class="text-center mt-3">
+        <button id="highlighterBtn" class="highlighter-btn">
+          <i class="fas fa-highlighter me-2"></i>Highlighter Mode
+        </button>
+      </div>
+      
+      <div class="button-row">
+        <button id="convertSelectedBtn" class="btn btn-primary-gradient" disabled>
+          <i class="fas fa-cogs me-2"></i>Convert Selected Area to LaTeX
+        </button>
+        <button id="clearSelection" class="btn btn-neutral" disabled>
+          <i class="fas fa-times-circle me-2"></i>Clear Highlight
+        </button>
+        <button id="convertAllBtn" class="btn btn-dark-gradient">
+          <i class="fas fa-file-pdf me-2"></i>Convert Entire PDF
+        </button>
+      </div>
+    </div>
+
+    <div class="loading" id="loading">
+      <div class="spinner"></div>
+      <p>Processing your PDF... This may take a few seconds.</p>
+    </div>
+
+    <div class="feature-card" id="resultCard" style="display: none;">
+      <h3 class="section-title">Generated LaTeX</h3>
+      
+      <div class="rendered-output">
+        <h5>Rendered Content:</h5>
+        <div id="renderedContent"></div>
+      </div>
+      
+      <div class="latex-output" id="latexOutput"></div>
+      
+      <div class="solution-output" id="solutionOutput">
+        <h5 class="solution-title"><i class="fas fa-calculator me-2"></i>Solution</h5>
+        <div class="solution-content" id="solutionContent"></div>
+      </div>
+      
+      <div class="button-row">
+        <button id="solveBtn" class="btn btn-secondary-gradient">
+          <i class="fas fa-calculator me-2"></i>Solve Content
+        </button>
+        <button id="copyBtn" class="btn btn-primary-gradient">
+          <i class="fas fa-copy me-2"></i>Copy to Clipboard
+        </button>
+        <button id="newConversion" class="btn btn-neutral">
+          <i class="fas fa-redo me-2"></i>Convert Another Area
+        </button>
+        <a href="/pdf" class="btn btn-neutral">
+          <i class="fas fa-file-pdf me-2"></i>Upload Another PDF
+        </a>
+      </div>
+    </div>
+  </div>
+</div>
+{% endblock %}
+
+{% block extra_js %}
+<script>
+  // DOM elements
+  const dropArea = document.getElementById('dropArea');
+  const fileInput = document.getElementById('fileInput');
+  const uploadForm = document.getElementById('uploadForm');
+  const pdfViewer = document.getElementById('pdfViewer');
+  const pdfContainer = document.getElementById('pdfContainer');
+  const convertSelectedBtn = document.getElementById('convertSelectedBtn');
+  const clearSelection = document.getElementById('clearSelection');
+  const convertAllBtn = document.getElementById('convertAllBtn');
+  const resultCard = document.getElementById('resultCard');
+  const loading = document.getElementById('loading');
+  const fileName = document.getElementById('fileName');
+  const pageCount = document.getElementById('pageCount');
+  const currentPage = document.getElementById('currentPage');
+  const totalPages = document.getElementById('totalPages');
+  const prevPage = document.getElementById('prevPage');
+  const nextPage = document.getElementById('nextPage');
+  const highlighterBtn = document.getElementById('highlighterBtn');
+  const solveBtn = document.getElementById('solveBtn');
+  const solutionOutput = document.getElementById('solutionOutput');
+  
+  // State variables
+  let currentFilename = '';
+  let highlight = null;
+  let isHighlighting = false;
+  let startX, startY;
+  let isHighlighterMode = false;
+  let currentLatex = '';
+  
+  // File upload handling
+  dropArea.addEventListener('click', () => {
+    fileInput.click();
+  });
+  
+  // Drag and drop events
+  dropArea.addEventListener('dragover', (e) => {
+    e.preventDefault();
+    dropArea.classList.add('dragover');
+  });
+  
+  dropArea.addEventListener('dragleave', () => {
+    dropArea.classList.remove('dragover');
+  });
+  
+  dropArea.addEventListener('drop', (e) => {
+    e.preventDefault();
+    dropArea.classList.remove('dragover');
+    
+    if (e.dataTransfer.files.length) {
+      fileInput.files = e.dataTransfer.files;
+      uploadForm.submit();
+    }
+  });
+  
+  // Form submission
+  uploadForm.addEventListener('submit', async (e) => {
+    e.preventDefault();
+    
+    const formData = new FormData(uploadForm);
+    
+    try {
+      loading.style.display = 'block';
+      
+      const response = await fetch('/pdf/upload', {
+        method: 'POST',
+        body: formData
+      });
+      
+      const data = await response.json();
+      
+      if (data.success) {
+        currentFilename = data.filename;
+        
+        // Update file info
+        fileName.textContent = data.filename;
+        pageCount.textContent = data.pages;
+        totalPages.textContent = data.pages;
+        currentPage.textContent = 1;
+        
+        // Enable page navigation buttons
+        updatePageNavigation();
+        
+        // Show PDF viewer
+        document.querySelector('.feature-card:first-child').style.display = 'none';
+        pdfViewer.style.display = 'block';
+        
+        // Add highlighting functionality
+        addHighlightingFunctionality();
+      } else {
+        alert('Error: ' + data.error);
+      }
+    } catch (error) {
+      console.error('Upload error:', error);
+      alert('An error occurred during upload. Please try again.');
+    } finally {
+      loading.style.display = 'none';
+    }
+  });
+  
+  // Add highlighting functionality to PDF container
+  function addHighlightingFunctionality() {
+    pdfContainer.addEventListener('mousedown', startHighlight);
+    pdfContainer.addEventListener('mousemove', updateHighlight);
+    pdfContainer.addEventListener('mouseup', endHighlight);
+  }
+  
+  // Toggle highlighter mode
+  highlighterBtn.addEventListener('click', () => {
+    isHighlighterMode = !isHighlighterMode;
+    highlighterBtn.classList.toggle('active', isHighlighterMode);
+    
+    if (isHighlighterMode) {
+      highlighterBtn.innerHTML = '<i class="fas fa-highlighter me-2"></i>Highlighting Active';
+      pdfContainer.style.cursor = 'crosshair';
+    } else {
+      highlighterBtn.innerHTML = '<i class="fas fa-highlighter me-2"></i>Highlighter Mode';
+      pdfContainer.style.cursor = 'default';
+      
+      // Remove any existing highlight if exiting highlighter mode
+      if (highlight) {
+        highlight.remove();
+        highlight = null;
+        convertSelectedBtn.disabled = true;
+        clearSelection.disabled = true;
+      }
+    }
+  });
+  
+  // Start highlight
+  function startHighlight(e) {
+    if (!isHighlighterMode) return;
+    
+    isHighlighting = true;
+    const rect = pdfContainer.getBoundingClientRect();
+    startX = e.clientX - rect.left;
+    startY = e.clientY - rect.top;
+    
+    // Remove existing highlight if any
+    if (highlight) {
+      highlight.remove();
+      highlight = null;
+    }
+    
+    // Create new highlight overlay
+    highlight = document.createElement('div');
+    highlight.className = 'highlight-overlay';
+    highlight.style.left = startX + 'px';
+    highlight.style.top = startY + 'px';
+    highlight.style.width = '0px';
+    highlight.style.height = '0px';
+    
+    pdfContainer.appendChild(highlight);
+  }
+  
+  // Update highlight
+  function updateHighlight(e) {
+    if (!isHighlighting || !highlight || !isHighlighterMode) return;
+    
+    const rect = pdfContainer.getBoundingClientRect();
+    const currentX = e.clientX - rect.left;
+    const currentY = e.clientY - rect.top;
+    
+    const width = currentX - startX;
+    const height = currentY - startY;
+    
+    highlight.style.width = Math.abs(width) + 'px';
+    highlight.style.height = Math.abs(height) + 'px';
+    
+    if (width < 0) {
+      highlight.style.left = currentX + 'px';
+    }
+    
+    if (height < 0) {
+      highlight.style.top = currentY + 'px';
+    }
+  }
+  
+  // End highlight
+  function endHighlight() {
+    if (!isHighlighting) return;
+    isHighlighting = false;
+    
+    if (highlight) {
+      const rect = highlight.getBoundingClientRect();
+      const containerRect = pdfContainer.getBoundingClientRect();
+      
+      // Enable convert button if highlight is large enough
+      if (rect.width > 20 && rect.height > 20) {
+        convertSelectedBtn.disabled = false;
+        clearSelection.disabled = false;
+      } else {
+        // Remove small highlights
+        highlight.remove();
+        highlight = null;
+      }
+    }
+  }
+  
+  // Clear highlight
+  clearSelection.addEventListener('click', () => {
+    if (highlight) {
+      highlight.remove();
+      highlight = null;
+      convertSelectedBtn.disabled = true;
+      clearSelection.disabled = true;
+    }
+  });
+  
+  // Convert selected area
+  convertSelectedBtn.addEventListener('click', async () => {
+    if (!currentFilename) return;
+    
+    try {
+      loading.style.display = 'block';
+      resultCard.style.display = 'none';
+      solutionOutput.style.display = 'none';
+      
+      // Get highlight coordinates if available
+      let coordinates = null;
+      if (highlight) {
+        const rect = highlight.getBoundingClientRect();
+        const containerRect = pdfContainer.getBoundingClientRect();
+        coordinates = [
+          rect.left - containerRect.left,
+          rect.top - containerRect.top,
+          rect.width,
+          rect.height
+        ];
+      }
+      
+      const response = await fetch('/pdf/process', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+          filename: currentFilename,
+          coordinates: coordinates,
+          page: parseInt(currentPage.textContent) - 1
+        })
+      });
+      
+      const data = await response.json();
+      
+      if (data.success) {
+        currentLatex = data.latex;
+        
+        // Display results
+        document.getElementById('latexOutput').textContent = data.latex;
+        document.getElementById('renderedContent').innerHTML = `$$${data.latex}$$`;
+        
+        // Render with MathJax if available
+        if (typeof MathJax !== 'undefined') {
+          MathJax.typesetPromise([document.getElementById('renderedContent')]);
+        }
+        
+        // Show result card
+        resultCard.style.display = 'block';
+      } else {
+        alert('Error: ' + data.error);
+      }
+    } catch (error) {
+      console.error('Conversion error:', error);
+      alert('An error occurred during conversion. Please try again.');
+    } finally {
+      loading.style.display = 'none';
+    }
+  });
+  
+  // Convert entire PDF
+  convertAllBtn.addEventListener('click', async () => {
+    if (!currentFilename) return;
+    
+    try {
+      loading.style.display = 'block';
+      resultCard.style.display = 'none';
+      solutionOutput.style.display = 'none';
+      
+      const response = await fetch('/pdf/process', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+          filename: currentFilename,
+          convert_all: true
+        })
+      });
+      
+      const data = await response.json();
+      
+      if (data.success) {
+        currentLatex = data.latex;
+        
+        // Display results
+        document.getElementById('latexOutput').textContent = data.latex;
+        document.getElementById('renderedContent').innerHTML = `$$${data.latex}$$`;
+        
+        // Render with MathJax if available
+        if (typeof MathJax !== 'undefined') {
+          MathJax.typesetPromise([document.getElementById('renderedContent')]);
+        }
+        
+        // Show result card
+        resultCard.style.display = 'block';
+      } else {
+        alert('Error: ' + data.error);
+      }
+    } catch (error) {
+      console.error('Conversion error:', error);
+      alert('An error occurred during conversion. Please try again.');
+    } finally {
+      loading.style.display = 'none';
+    }
+  });
+  
+  // Solve PDF content
+  solveBtn.addEventListener('click', async () => {
+    if (!currentLatex) return;
+    
+    try {
+      loading.style.display = 'block';
+      
+      const response = await fetch('/pdf/solve', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ latex: currentLatex })
+      });
+      
+      const data = await response.json();
+      
+      if (data.success) {
+        const solution = data.solution;
+        let solutionText = '';
+        
+        if (solution.type === 'equation') {
+          solutionText = `Solutions:\n${solution.solutions.join('\n')}`;
+        } else if (solution.type === 'expression') {
+          solutionText = `Simplified:\n${solution.result}`;
+        } else if (solution.type === 'numerical') {
+          solutionText = `Numerical value:\n${solution.result}`;
+        } else if (solution.type === 'system') {
+          solutionText = `System solutions:\n${JSON.stringify(solution.solutions)}`;
+        } else if (solution.type === 'error') {
+          solutionText = `Error: ${solution.message}`;
+        }
+        
+        document.getElementById('solutionContent').textContent = solutionText;
+        solutionOutput.style.display = 'block';
+      } else {
+        alert('Error: ' + data.error);
+      }
+    } catch (error) {
+      console.error('Solving error:', error);
+      alert('An error occurred while solving the content. Please try again.');
+    } finally {
+      loading.style.display = 'none';
+    }
+  });
+  
+  // Copy to clipboard
+  document.getElementById('copyBtn').addEventListener('click', () => {
+    const latexText = document.getElementById('latexOutput').textContent;
+    navigator.clipboard.writeText(latexText).then(() => {
+      showNotification('LaTeX code copied to clipboard!');
+    }).catch(err => {
+      console.error('Failed to copy: ', err);
+      alert('Failed to copy LaTeX code. Please try again.');
+    });
+  });
+  
+  // New conversion
+  document.getElementById('newConversion').addEventListener('click', () => {
+    resultCard.style.display = 'none';
+    solutionOutput.style.display = 'none';
+    if (highlight) {
+      highlight.remove();
+      highlight = null;
+      convertSelectedBtn.disabled = true;
+      clearSelection.disabled = true;
+    }
+  });
+  
+  // Update page navigation button states
+  function updatePageNavigation() {
+    const current = parseInt(currentPage.textContent);
+    const total = parseInt(totalPages.textContent);
+    
+    prevPage.disabled = current <= 1;
+    nextPage.disabled = current >= total;
+  }
+  
+  // Page navigation
+  prevPage.addEventListener('click', () => {
+    const current = parseInt(currentPage.textContent);
+    if (current > 1) {
+      currentPage.textContent = current - 1;
+      updatePageNavigation();
+      
+      // Clear highlight when changing pages
+      if (highlight) {
+        highlight.remove();
+        highlight = null;
+        convertSelectedBtn.disabled = true;
+        clearSelection.disabled = true;
+      }
+    }
+  });
+  
+  nextPage.addEventListener('click', () => {
+    const current = parseInt(currentPage.textContent);
+    const total = parseInt(totalPages.textContent);
+    if (current < total) {
+      currentPage.textContent = current + 1;
+      updatePageNavigation();
+      
+      // Clear highlight when changing pages
+      if (highlight) {
+        highlight.remove();
+        highlight = null;
+        convertSelectedBtn.disabled = true;
+        clearSelection.disabled = true;
+      }
+    }
+  });
+</script>
+{% endblock %}
\ No newline at end of file
diff --git a/templates/pdffly.html b/templates/pdffly.html
new file mode 100644
index 0000000000000000000000000000000000000000..e03a755c4178d0421bae00756c35fd1d229eebc3
--- /dev/null
+++ b/templates/pdffly.html
@@ -0,0 +1,888 @@
+{% extends "base.html" %}
+
+{% block title %}PDFly - Convert PDF to LaTeX | TexLab{% endblock %}
+
+{% block extra_css %}
+<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
+<style>
+    .feature-card {
+  display: inline-block;
+  width: 100%;
+  height: auto !important;
+  padding: 20px 25px;
+  margin-bottom: 20px;
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
+}
+  .upload-area {
+    border: 3px dashed #ddd;
+    border-radius: 15px;
+    padding: 40px 20px;
+    text-align: center;
+    transition: all 0.3s ease;
+    cursor: pointer;
+    background-color: #fafafa;
+    margin-bottom: 20px;
+  }
+
+  .upload-area:hover {
+    border-color: #667eea;
+    background-color: #f0f4ff;
+  }
+
+  .upload-area.dragover {
+    border-color: #667eea;
+    background-color: #e0e7ff;
+    transform: scale(1.02);
+  }
+
+  .upload-icon {
+    font-size: 3rem;
+    color: #667eea;
+    margin-bottom: 15px;
+  }
+
+  .upload-text {
+    font-size: 1.2rem;
+    color: #555;
+    margin-bottom: 10px;
+  }
+
+  .upload-hint {
+    color: #888;
+    font-size: 0.9rem;
+  }
+
+  .pdf-container {
+    position: relative;
+    margin: 20px 0;
+    border: 1px solid #ddd;
+    border-radius: 10px;
+    overflow: auto;
+    background: #525659;
+    min-height: 500px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #pdfCanvas {
+    display: block;
+    margin: 0 auto;
+  }
+
+  .pdf-placeholder {
+    text-align: center;
+    padding: 40px;
+  }
+
+  .highlight-overlay {
+    position: absolute;
+    border: 2px solid #4361ee;
+    background-color: rgba(67, 97, 238, 0.3);
+    cursor: crosshair;
+  }
+
+  .latex-output {
+    background: #f8f9fa;
+    border-radius: 10px;
+    padding: 20px;
+    border: 1px solid #eee;
+    font-family: 'Consolas', 'Courier New', monospace;
+    font-size: 1.1rem;
+    white-space: pre-wrap;
+    word-break: break-all;
+    min-height: 100px;
+    margin: 20px 0;
+  }
+
+  .rendered-output {
+    background: white;
+    border-radius: 10px;
+    padding: 20px;
+    border: 1px solid #eee;
+    min-height: 100px;
+    margin: 20px 0;
+    text-align: center;
+  }
+
+  .solution-output {
+    background: #e8f5e9;
+    border-radius: 10px;
+    padding: 20px;
+    border: 1px solid #c8e6c9;
+    margin: 20px 0;
+    display: none;
+  }
+
+  .solution-title {
+    color: #2e7d32;
+    margin-bottom: 15px;
+    font-weight: 600;
+  }
+
+  .solution-content {
+    font-family: 'Consolas', 'Courier New', monospace;
+    font-size: 1.1rem;
+    white-space: pre-wrap;
+  }
+
+  .loading {
+    display: none;
+    text-align: center;
+    padding: 20px;
+  }
+
+  .spinner {
+    border: 4px solid rgba(0, 0, 0, 0.1);
+    border-radius: 50%;
+    border-top: 4px solid #667eea;
+    width: 40px;
+    height: 40px;
+    animation: spin 1s linear infinite;
+    margin: 0 auto 15px;
+  }
+
+  @keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
+
+  .page-controls {
+    display: flex;
+    justify-content: center;
+    gap: 15px;
+    margin: 20px 0;
+  }
+
+  .page-indicator {
+    padding: 10px 20px;
+    background: #f8f9fa;
+    border-radius: 20px;
+    font-weight: 600;
+  }
+
+  .button-row {
+    display: flex;
+    gap: 15px;
+    justify-content: center;
+    margin: 20px 0;
+    flex-wrap: wrap;
+  }
+
+  .highlighter-btn {
+    background: linear-gradient(135deg, #4361ee 0%, #3a0ca3 100%);
+    color: white;
+    border: none;
+    padding: 12px 25px;
+    border-radius: 50px;
+    font-weight: 600;
+    transition: all 0.3s ease;
+    font-size: 1rem;
+  }
+
+  .highlighter-btn:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 5px 15px rgba(67, 97, 238, 0.4);
+  }
+
+  .highlighter-btn.active {
+    background: #3a0ca3;
+    box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.5);
+  }
+
+  .file-info {
+    background: #e3f2fd;
+    border-radius: 10px;
+    padding: 15px;
+    margin: 15px 0;
+    text-align: center;
+  }
+
+  .btn-success-gradient {
+    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
+    color: white;
+    border: none;
+    padding: 12px 25px;
+    border-radius: 50px;
+    font-weight: 600;
+    transition: all 0.3s ease;
+  }
+
+  .btn-success-gradient:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 5px 15px rgba(40, 167, 69, 0.4);
+  }
+
+  @media (max-width: 768px) {
+    .pdf-container {
+      min-height: 300px;
+    }
+    
+    .button-row {
+      flex-direction: column;
+      align-items: center;
+    }
+    
+    .button-row .btn {
+      width: 100%;
+      max-width: 300px;
+    }
+  }
+</style>
+{% endblock %}
+
+{% block content %}
+<div class="page-header">
+  <h1 class="page-title"><i class="fas fa-bolt me-2"></i>PDFly - Smart PDF to LaTeX</h1>
+  <p class="page-subtitle">
+    Upload a PDF document, highlight areas with Converto, and convert them to clean, editable LaTeX code.
+  </p>
+</div>
+
+<div class="row">
+  <div class="col-lg-10 mx-auto">
+    <div class="feature-card">
+      <h3 class="section-title">Upload PDF Document</h3>
+      
+      <form id="uploadForm">
+        <div class="upload-area" id="dropArea">
+          <div class="upload-icon">
+            <i class="fas fa-cloud-upload-alt"></i>
+          </div>
+          <h4 class="upload-text">Drag & Drop your PDF here</h4>
+          <p class="upload-hint">or click to browse files (PDF only)</p>
+          <input type="file" name="pdf_file" id="fileInput" accept=".pdf" required class="d-none">
+        </div>
+        
+        <div class="text-center">
+          <button type="submit" class="btn btn-primary-gradient">
+            <i class="fas fa-upload me-2"></i>Upload PDF
+          </button>
+        </div>
+      </form>
+    </div>
+
+    <div class="feature-card" id="pdfViewer" style="display: none;">
+      <h3 class="section-title">PDF Document</h3>
+      
+      <div class="file-info">
+        <i class="fas fa-file-pdf me-2"></i>
+        <span id="fileName"></span> 
+        (<span id="pageCount"></span> pages)
+      </div>
+      
+      <div class="page-controls">
+        <button id="prevPage" class="btn btn-neutral">
+          <i class="fas fa-arrow-left"></i>
+        </button>
+        <div class="page-indicator">
+          Page <span id="currentPage">1</span> of <span id="totalPages">1</span>
+        </div>
+        <button id="nextPage" class="btn btn-neutral">
+          <i class="fas fa-arrow-right"></i>
+        </button>
+      </div>
+      
+      <div class="pdf-container" id="pdfContainer">
+        <canvas id="pdfCanvas" style="max-width: 100%; height: auto;"></canvas>
+      </div>
+      
+      <div class="text-center mt-3">
+        <button id="highlighterBtn" class="highlighter-btn">
+          <i class="fas fa-magic me-2"></i>Converto
+        </button>
+      </div>
+      
+      <div class="button-row">
+        <button id="convertSelectedBtn" class="btn btn-primary-gradient" disabled>
+          <i class="fas fa-cogs me-2"></i>Convert Selected Area to LaTeX
+        </button>
+        <button id="clearSelection" class="btn btn-neutral" disabled>
+          <i class="fas fa-times-circle me-2"></i>Clear Highlight
+        </button>
+        <button id="convertAllBtn" class="btn btn-dark-gradient">
+          <i class="fas fa-file-pdf me-2"></i>Convert Entire PDF
+        </button>
+      </div>
+    </div>
+
+    <div class="loading" id="loading">
+      <div class="spinner"></div>
+      <p>Processing your PDF... This may take a few seconds.</p>
+    </div>
+
+    <div class="feature-card" id="resultCard" style="display: none;">
+      <h3 class="section-title">Generated LaTeX</h3>
+      
+      <div class="rendered-output">
+        <!-- <h5>✅ Ready for Overleaf!</h5> -->
+        <div id="renderedContent"></div>
+        <div style="margin-top: 15px; padding: 15px; background: #e8f5e9; border-radius: 8px; text-align: left;">
+          <strong>Latex Code will appear here</strong>
+          <ul style="margin: 10px 0; padding-left: 20px;">
+            
+          </ul>
+        </div>
+      </div>
+      
+      <div class="latex-output" id="latexOutput" style="display: none;"></div>
+      
+      <div class="solution-output" id="solutionOutput">
+        <h5 class="solution-title"><i class="fas fa-calculator me-2"></i>Solution</h5>
+        <div class="solution-content" id="solutionContent"></div>
+      </div>
+      
+      <div class="button-row">
+        <button id="solveBtn" class="btn btn-secondary-gradient">
+          <i class="fas fa-calculator me-2"></i>Solve Content
+        </button>
+        <button id="copyBtn" class="btn btn-primary-gradient">
+          <i class="fas fa-copy me-2"></i>Copy to Clipboard
+        </button>
+        <button id="downloadLatexBtn" class="btn btn-success-gradient">
+          <i class="fas fa-download me-2"></i>Download .tex File
+        </button>
+        <button id="newConversion" class="btn btn-neutral">
+          <i class="fas fa-redo me-2"></i>Convert Another Area
+        </button>
+        <a href="/pdffly" class="btn btn-neutral">
+          <i class="fas fa-file-pdf me-2"></i>Upload Another PDF
+        </a>
+      </div>
+    </div>
+  </div>
+</div>
+{% endblock %}
+
+{% block extra_js %}
+<script>
+  // DOM elements
+  const dropArea = document.getElementById('dropArea');
+  const fileInput = document.getElementById('fileInput');
+  const uploadForm = document.getElementById('uploadForm');
+  const pdfViewer = document.getElementById('pdfViewer');
+  const pdfContainer = document.getElementById('pdfContainer');
+  const convertSelectedBtn = document.getElementById('convertSelectedBtn');
+  const clearSelection = document.getElementById('clearSelection');
+  const convertAllBtn = document.getElementById('convertAllBtn');
+  const resultCard = document.getElementById('resultCard');
+  const loading = document.getElementById('loading');
+  const fileName = document.getElementById('fileName');
+  const pageCount = document.getElementById('pageCount');
+  const currentPage = document.getElementById('currentPage');
+  const totalPages = document.getElementById('totalPages');
+  const prevPage = document.getElementById('prevPage');
+  const nextPage = document.getElementById('nextPage');
+  const highlighterBtn = document.getElementById('highlighterBtn');
+  const solveBtn = document.getElementById('solveBtn');
+  const solutionOutput = document.getElementById('solutionOutput');
+  
+  // State variables
+  let currentFilename = '';
+  let highlight = null;
+  let isHighlighting = false;
+  let startX, startY;
+  let isHighlighterMode = false;
+  let currentLatex = '';
+  let completeLatexDocument = '';
+  let pdfDoc = null;
+  let pageNum = 1;
+  let pageRendering = false;
+  let pageNumPending = null;
+  let scale = 1.5;
+  
+  // Configure PDF.js worker
+  pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';
+  
+  // File upload handling
+  dropArea.addEventListener('click', () => {
+    fileInput.click();
+  });
+  
+  // Drag and drop events
+  dropArea.addEventListener('dragover', (e) => {
+    e.preventDefault();
+    dropArea.classList.add('dragover');
+  });
+  
+  dropArea.addEventListener('dragleave', () => {
+    dropArea.classList.remove('dragover');
+  });
+  
+  dropArea.addEventListener('drop', (e) => {
+    e.preventDefault();
+    dropArea.classList.remove('dragover');
+    
+    if (e.dataTransfer.files.length) {
+      fileInput.files = e.dataTransfer.files;
+      // Trigger the form submission handler
+      const event = new Event('submit', { bubbles: true, cancelable: true });
+      uploadForm.dispatchEvent(event);
+    }
+  });
+
+  // Render PDF page
+  function renderPage(num) {
+    pageRendering = true;
+    pdfDoc.getPage(num).then(function(page) {
+      const canvas = document.getElementById('pdfCanvas');
+      const ctx = canvas.getContext('2d');
+      const viewport = page.getViewport({scale: scale});
+      
+      canvas.height = viewport.height;
+      canvas.width = viewport.width;
+      
+      const renderContext = {
+        canvasContext: ctx,
+        viewport: viewport
+      };
+      
+      const renderTask = page.render(renderContext);
+      renderTask.promise.then(function() {
+        pageRendering = false;
+        if (pageNumPending !== null) {
+          renderPage(pageNumPending);
+          pageNumPending = null;
+        }
+      });
+    });
+    
+    currentPage.textContent = num;
+  }
+  
+  // Queue page rendering
+  function queueRenderPage(num) {
+    if (pageRendering) {
+      pageNumPending = num;
+    } else {
+      renderPage(num);
+    }
+  }
+  
+  // Load and display PDF
+  function loadPDF(url) {
+    pdfjsLib.getDocument(url).promise.then(function(pdf) {
+      pdfDoc = pdf;
+      totalPages.textContent = pdf.numPages;
+      pageNum = 1;
+      renderPage(pageNum);
+      updatePageNavigation();
+    });
+  }
+
+  // Form submission
+  uploadForm.addEventListener('submit', async (e) => {
+    e.preventDefault();
+    
+    const formData = new FormData();
+    const file = fileInput.files[0];
+    
+    if (!file) {
+      alert('Please select a PDF file');
+      return;
+    }
+    
+    formData.append('file', file);
+    
+    try {
+      loading.style.display = 'block';
+      
+      const response = await fetch('/pdffly/upload', {
+        method: 'POST',
+        body: formData
+      });
+      
+      const data = await response.json();
+      
+      if (data.success) {
+        currentFilename = data.filename;
+        
+        // Update file info
+        fileName.textContent = data.filename;
+        pageCount.textContent = data.pages;
+        totalPages.textContent = data.pages;
+        currentPage.textContent = 1;
+        
+        // Load and render PDF
+        loadPDF(data.pdf_path);
+        
+        // Display all LaTeX results
+        let allLatex = '';
+        data.results.forEach(result => {
+          if (result.latex) {
+            allLatex += `Page ${result.page}:\n${result.latex}\n\n`;
+          } else if (result.error) {
+            allLatex += `Page ${result.page}: Error - ${result.error}\n\n`;
+          }
+        });
+        
+        // Store complete document
+        completeLatexDocument = data.complete_document || allLatex;
+        
+        // Show results immediately
+        currentLatex = allLatex;
+        document.getElementById('latexOutput').textContent = completeLatexDocument;
+        document.getElementById('renderedContent').innerHTML = '<p><strong>✅ PDF converted to LaTeX successfully!</strong><br><small>The code has been cleaned and formatted for Overleaf compilation.</small></p>';
+        resultCard.style.display = 'block';
+        
+        // Enable page navigation buttons
+        updatePageNavigation();
+        
+        // Show PDF viewer
+        document.querySelector('.feature-card:first-child').style.display = 'none';
+        pdfViewer.style.display = 'block';
+        
+        // Add highlighting functionality
+        addHighlightingFunctionality();
+      } else {
+        alert('Error: ' + (data.error || 'Unknown error'));
+      }
+    } catch (error) {
+      console.error('Upload error:', error);
+      alert('An error occurred during upload. Please try again.');
+    } finally {
+      loading.style.display = 'none';
+    }
+  });
+  
+  // Add highlighting functionality to PDF container
+  function addHighlightingFunctionality() {
+    pdfContainer.addEventListener('mousedown', startHighlight);
+    pdfContainer.addEventListener('mousemove', updateHighlight);
+    pdfContainer.addEventListener('mouseup', endHighlight);
+  }
+  
+  // Toggle highlighter mode
+  highlighterBtn.addEventListener('click', () => {
+    isHighlighterMode = !isHighlighterMode;
+    highlighterBtn.classList.toggle('active', isHighlighterMode);
+    
+    if (isHighlighterMode) {
+      highlighterBtn.innerHTML = '<i class="fas fa-magic me-2"></i>Converto Active';
+      pdfContainer.style.cursor = 'crosshair';
+    } else {
+      highlighterBtn.innerHTML = '<i class="fas fa-magic me-2"></i>Converto';
+      pdfContainer.style.cursor = 'default';
+      
+      // Remove any existing highlight if exiting highlighter mode
+      if (highlight) {
+        highlight.remove();
+        highlight = null;
+        convertSelectedBtn.disabled = true;
+        clearSelection.disabled = true;
+      }
+    }
+  });
+  
+  // Start highlight
+  function startHighlight(e) {
+    if (!isHighlighterMode) return;
+    
+    isHighlighting = true;
+    const rect = pdfContainer.getBoundingClientRect();
+    startX = e.clientX - rect.left;
+    startY = e.clientY - rect.top;
+    
+    // Remove existing highlight if any
+    if (highlight) {
+      highlight.remove();
+      highlight = null;
+    }
+    
+    // Create new highlight overlay
+    highlight = document.createElement('div');
+    highlight.className = 'highlight-overlay';
+    highlight.style.left = startX + 'px';
+    highlight.style.top = startY + 'px';
+    highlight.style.width = '0px';
+    highlight.style.height = '0px';
+    
+    pdfContainer.appendChild(highlight);
+  }
+  
+  // Update highlight
+  function updateHighlight(e) {
+    if (!isHighlighting || !highlight || !isHighlighterMode) return;
+    
+    const rect = pdfContainer.getBoundingClientRect();
+    const currentX = e.clientX - rect.left;
+    const currentY = e.clientY - rect.top;
+    
+    const width = currentX - startX;
+    const height = currentY - startY;
+    
+    highlight.style.width = Math.abs(width) + 'px';
+    highlight.style.height = Math.abs(height) + 'px';
+    
+    if (width < 0) {
+      highlight.style.left = currentX + 'px';
+    }
+    
+    if (height < 0) {
+      highlight.style.top = currentY + 'px';
+    }
+  }
+  
+  // End highlight
+  function endHighlight() {
+    if (!isHighlighting) return;
+    isHighlighting = false;
+    
+    if (highlight) {
+      const rect = highlight.getBoundingClientRect();
+      const containerRect = pdfContainer.getBoundingClientRect();
+      
+      // Enable convert button if highlight is large enough
+      if (rect.width > 20 && rect.height > 20) {
+        convertSelectedBtn.disabled = false;
+        clearSelection.disabled = false;
+      } else {
+        // Remove small highlights
+        highlight.remove();
+        highlight = null;
+      }
+    }
+  }
+  
+  // Clear highlight
+  clearSelection.addEventListener('click', () => {
+    if (highlight) {
+      highlight.remove();
+      highlight = null;
+      convertSelectedBtn.disabled = true;
+      clearSelection.disabled = true;
+    }
+  });
+  
+  // Convert selected area
+  convertSelectedBtn.addEventListener('click', async () => {
+    if (!currentFilename) return;
+    
+    try {
+      loading.style.display = 'block';
+      resultCard.style.display = 'none';
+      solutionOutput.style.display = 'none';
+      
+      // Get highlight coordinates if available
+      let coordinates = null;
+      if (highlight) {
+        const rect = highlight.getBoundingClientRect();
+        const containerRect = pdfContainer.getBoundingClientRect();
+        coordinates = [
+          rect.left - containerRect.left,
+          rect.top - containerRect.top,
+          rect.width,
+          rect.height
+        ];
+      }
+      
+      const response = await fetch('/pdflly/process', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+          filename: currentFilename,
+          coordinates: coordinates,
+          page: parseInt(currentPage.textContent) - 1
+        })
+      });
+      
+      const data = await response.json();
+      
+      if (data.success) {
+        currentLatex = data.latex;
+        
+        // Display results
+        document.getElementById('latexOutput').textContent = data.latex;
+        document.getElementById('renderedContent').innerHTML = `$$${data.latex}$$`;
+        
+        // Render with MathJax if available
+        if (typeof MathJax !== 'undefined') {
+          MathJax.typesetPromise([document.getElementById('renderedContent')]);
+        }
+        
+        // Show result card
+        resultCard.style.display = 'block';
+      } else {
+        alert('Error: ' + data.error);
+      }
+    } catch (error) {
+      console.error('Conversion error:', error);
+      alert('An error occurred during conversion. Please try again.');
+    } finally {
+      loading.style.display = 'none';
+    }
+  });
+  
+  // Convert entire PDF
+  convertAllBtn.addEventListener('click', async () => {
+    if (!currentFilename) return;
+    
+    try {
+      loading.style.display = 'block';
+      resultCard.style.display = 'none';
+      solutionOutput.style.display = 'none';
+      
+      const response = await fetch('/pdffly/process', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+          filename: currentFilename,
+          convert_all: true
+        })
+      });
+      
+      const data = await response.json();
+      
+      if (data.success) {
+        currentLatex = data.latex;
+        
+        // Display results
+        document.getElementById('latexOutput').textContent = data.latex;
+        document.getElementById('renderedContent').innerHTML = '<p>Full PDF content converted to LaTeX</p>';
+        
+        // Show result card
+        resultCard.style.display = 'block';
+      } else {
+        alert('Error: ' + (data.error || 'Unknown error'));
+      }
+    } catch (error) {
+      console.error('Conversion error:', error);
+      alert('An error occurred during conversion. Please try again.');
+    } finally {
+      loading.style.display = 'none';
+    }
+  });
+  
+  // Solve PDF content
+  solveBtn.addEventListener('click', async () => {
+    if (!currentLatex) return;
+    
+    try {
+      loading.style.display = 'block';
+      
+      const response = await fetch('/pdffly/solve', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ latex: currentLatex })
+      });
+      
+      const data = await response.json();
+      
+      if (data.success) {
+        const solution = data.solution;
+        let solutionText = '';
+        
+        if (solution.type === 'equation') {
+          solutionText = `Solutions:\n${solution.solutions.join('\n')}`;
+        } else if (solution.type === 'expression') {
+          solutionText = `Simplified:\n${solution.result}`;
+        } else if (solution.type === 'numerical') {
+          solutionText = `Numerical value:\n${solution.result}`;
+        } else if (solution.type === 'system') {
+          solutionText = `System solutions:\n${JSON.stringify(solution.solutions)}`;
+        } else if (solution.type === 'error') {
+          solutionText = `Error: ${solution.message}`;
+        } else {
+          solutionText = solution.message || 'Math solver integration pending';
+        }
+        
+        document.getElementById('solutionContent').textContent = solutionText;
+        solutionOutput.style.display = 'block';
+      } else {
+        alert('Error: ' + (data.error || 'Unknown error'));
+      }
+    } catch (error) {
+      console.error('Solving error:', error);
+      alert('An error occurred while solving the content. Please try again.');
+    } finally {
+      loading.style.display = 'none';
+    }
+  });
+  
+  // Copy to clipboard
+  document.getElementById('copyBtn').addEventListener('click', () => {
+    const latexText = completeLatexDocument || document.getElementById('latexOutput').textContent;
+    navigator.clipboard.writeText(latexText).then(() => {
+      alert('✅ Complete LaTeX document copied to clipboard!\nReady to paste into Overleaf.');
+    }).catch(err => {
+      console.error('Failed to copy: ', err);
+      alert('Failed to copy LaTeX code. Please try again.');
+    });
+  });
+  
+  // Download LaTeX file
+  document.getElementById('downloadLatexBtn').addEventListener('click', () => {
+    const latexText = completeLatexDocument || document.getElementById('latexOutput').textContent;
+    const blob = new Blob([latexText], { type: 'text/plain' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = (currentFilename.replace('.pdf', '') || 'converted') + '.tex';
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+    alert('✅ LaTeX file downloaded!\nYou can now upload it to Overleaf.');
+  });
+  
+  // New conversion
+  document.getElementById('newConversion').addEventListener('click', () => {
+    resultCard.style.display = 'none';
+    solutionOutput.style.display = 'none';
+    if (highlight) {
+      highlight.remove();
+      highlight = null;
+      convertSelectedBtn.disabled = true;
+      clearSelection.disabled = true;
+    }
+  });
+  
+  // Update page navigation button states
+  function updatePageNavigation() {
+    const current = parseInt(currentPage.textContent);
+    const total = parseInt(totalPages.textContent);
+    
+    prevPage.disabled = current <= 1;
+    nextPage.disabled = current >= total;
+  }
+  
+  // Page navigation
+  prevPage.addEventListener('click', () => {
+    if (pageNum <= 1) return;
+    pageNum--;
+    queueRenderPage(pageNum);
+    updatePageNavigation();
+    
+    // Clear highlight when changing pages
+    if (highlight) {
+      highlight.remove();
+      highlight = null;
+      convertSelectedBtn.disabled = true;
+      clearSelection.disabled = true;
+    }
+  });
+  
+  nextPage.addEventListener('click', () => {
+    if (pageNum >= pdfDoc.numPages) return;
+    pageNum++;
+    queueRenderPage(pageNum);
+    updatePageNavigation();
+    
+    // Clear highlight when changing pages
+    if (highlight) {
+      highlight.remove();
+      highlight = null;
+      convertSelectedBtn.disabled = true;
+      clearSelection.disabled = true;
+    }
+  });
+</script>
+{% endblock %}
\ No newline at end of file
diff --git a/templates/pdflly.html b/templates/pdflly.html
new file mode 100644
index 0000000000000000000000000000000000000000..31d4ef0276535465edbc701769b61911cade4c38
--- /dev/null
+++ b/templates/pdflly.html
@@ -0,0 +1,781 @@
+{% extends "base.html" %}
+
+{% block title %}PDFly - Convert PDF to LaTeX | TexLab{% endblock %}
+
+{% block extra_css %}
+<style>
+  .upload-area {
+    border: 3px dashed #ddd;
+    border-radius: 15px;
+    padding: 40px 20px;
+    text-align: center;
+    transition: all 0.3s ease;
+    cursor: pointer;
+    background-color: #fafafa;
+    margin-bottom: 20px;
+  }
+
+  .upload-area:hover {
+    border-color: #667eea;
+    background-color: #f0f4ff;
+  }
+
+  .upload-area.dragover {
+    border-color: #667eea;
+    background-color: #e0e7ff;
+    transform: scale(1.02);
+  }
+
+  .upload-icon {
+    font-size: 3rem;
+    color: #667eea;
+    margin-bottom: 15px;
+  }
+
+  .upload-text {
+    font-size: 1.2rem;
+    color: #555;
+    margin-bottom: 10px;
+  }
+
+  .upload-hint {
+    color: #888;
+    font-size: 0.9rem;
+  }
+
+  .pdf-container {
+    position: relative;
+    margin: 20px 0;
+    border: 1px solid #ddd;
+    border-radius: 10px;
+    overflow: hidden;
+    background: #f8f9fa;
+    min-height: 500px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .pdf-placeholder {
+    text-align: center;
+    padding: 40px;
+  }
+
+  .highlight-overlay {
+    position: absolute;
+    border: 2px solid #4361ee;
+    background-color: rgba(67, 97, 238, 0.3);
+    cursor: crosshair;
+  }
+
+  .latex-output {
+    background: #f8f9fa;
+    border-radius: 10px;
+    padding: 20px;
+    border: 1px solid #eee;
+    font-family: 'Consolas', 'Courier New', monospace;
+    font-size: 1.1rem;
+    white-space: pre-wrap;
+    word-break: break-all;
+    min-height: 100px;
+    margin: 20px 0;
+  }
+
+  .rendered-output {
+    background: white;
+    border-radius: 10px;
+    padding: 20px;
+    border: 1px solid #eee;
+    min-height: 100px;
+    margin: 20px 0;
+    text-align: center;
+  }
+
+  .solution-output {
+    background: #e8f5e9;
+    border-radius: 10px;
+    padding: 20px;
+    border: 1px solid #c8e6c9;
+    margin: 20px 0;
+    display: none;
+  }
+
+  .solution-title {
+    color: #2e7d32;
+    margin-bottom: 15px;
+    font-weight: 600;
+  }
+
+  .solution-content {
+    font-family: 'Consolas', 'Courier New', monospace;
+    font-size: 1.1rem;
+    white-space: pre-wrap;
+  }
+
+  .loading {
+    display: none;
+    text-align: center;
+    padding: 20px;
+  }
+
+  .spinner {
+    border: 4px solid rgba(0, 0, 0, 0.1);
+    border-radius: 50%;
+    border-top: 4px solid #667eea;
+    width: 40px;
+    height: 40px;
+    animation: spin 1s linear infinite;
+    margin: 0 auto 15px;
+  }
+
+  @keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
+
+  .page-controls {
+    display: flex;
+    justify-content: center;
+    gap: 15px;
+    margin: 20px 0;
+  }
+
+  .page-indicator {
+    padding: 10px 20px;
+    background: #f8f9fa;
+    border-radius: 20px;
+    font-weight: 600;
+  }
+
+  .button-row {
+    display: flex;
+    gap: 15px;
+    justify-content: center;
+    margin: 20px 0;
+    flex-wrap: wrap;
+  }
+
+  .highlighter-btn {
+    background: linear-gradient(135deg, #4361ee 0%, #3a0ca3 100%);
+    color: white;
+    border: none;
+    padding: 12px 25px;
+    border-radius: 50px;
+    font-weight: 600;
+    transition: all 0.3s ease;
+    font-size: 1rem;
+  }
+
+  .highlighter-btn:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 5px 15px rgba(67, 97, 238, 0.4);
+  }
+
+  .highlighter-btn.active {
+    background: #3a0ca3;
+    box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.5);
+  }
+
+  .file-info {
+    background: #e3f2fd;
+    border-radius: 10px;
+    padding: 15px;
+    margin: 15px 0;
+    text-align: center;
+  }
+
+  @media (max-width: 768px) {
+    .pdf-container {
+      min-height: 300px;
+    }
+    
+    .button-row {
+      flex-direction: column;
+      align-items: center;
+    }
+    
+    .button-row .btn {
+      width: 100%;
+      max-width: 300px;
+    }
+  }
+</style>
+{% endblock %}
+
+{% block content %}
+<div class="page-header">
+  <h1 class="page-title"><i class="fas fa-bolt me-2"></i>PDFly - Smart PDF to LaTeX</h1>
+  <p class="page-subtitle">
+    Upload a PDF document, highlight areas with Converto, and convert them to clean, editable LaTeX code.
+  </p>
+</div>
+
+<div class="row">
+  <div class="col-lg-10 mx-auto">
+    <div class="feature-card">
+      <h3 class="section-title">Upload PDF Document</h3>
+      
+      <form method="POST" enctype="multipart/form-data" id="uploadForm">
+        <div class="upload-area" id="dropArea">
+          <div class="upload-icon">
+            <i class="fas fa-cloud-upload-alt"></i>
+          </div>
+          <h4 class="upload-text">Drag & Drop your PDF here</h4>
+          <p class="upload-hint">or click to browse files (PDF only)</p>
+          <input type="file" name="pdf_file" id="fileInput" accept=".pdf" required class="d-none">
+        </div>
+        
+        <div class="text-center">
+          <button type="submit" class="btn btn-primary-gradient">
+            <i class="fas fa-upload me-2"></i>Upload PDF
+          </button>
+        </div>
+      </form>
+    </div>
+
+    <div class="feature-card" id="pdfViewer" style="display: none;">
+      <h3 class="section-title">PDF Document</h3>
+      
+      <div class="file-info">
+        <i class="fas fa-file-pdf me-2"></i>
+        <span id="fileName"></span> 
+        (<span id="pageCount"></span> pages)
+      </div>
+      
+      <div class="page-controls">
+        <button id="prevPage" class="btn btn-neutral">
+          <i class="fas fa-arrow-left"></i>
+        </button>
+        <div class="page-indicator">
+          Page <span id="currentPage">1</span> of <span id="totalPages">1</span>
+        </div>
+        <button id="nextPage" class="btn btn-neutral">
+          <i class="fas fa-arrow-right"></i>
+        </button>
+      </div>
+      
+      <div class="pdf-container" id="pdfContainer">
+        <div class="pdf-placeholder">
+          <i class="fas fa-file-pdf fa-3x mb-3" style="color: #dc3545;"></i>
+          <h4>PDF Document Preview</h4>
+          <p class="text-muted">Click the Converto button and drag to select an area for conversion</p>
+          <div style="margin-top: 30px; text-align: left; background: white; padding: 30px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1);">
+            <h5>Sample PDF Content</h5>
+            <p>This is a placeholder for your PDF document content. In a real implementation, the actual PDF pages would be rendered here.</p>
+            <p>You can highlight any area of this document to convert it to LaTeX code.</p>
+            <p><strong>Mathematical Expression:</strong> E = mc²</p>
+            <p><strong>Table:</strong></p>
+            <table class="table table-bordered">
+              <thead>
+                <tr>
+                  <th>Column 1</th>
+                  <th>Column 2</th>
+                  <th>Column 3</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td>Row 1, Col 1</td>
+                  <td>Row 1, Col 2</td>
+                  <td>Row 1, Col 3</td>
+                </tr>
+                <tr>
+                  <td>Row 2, Col 1</td>
+                  <td>Row 2, Col 2</td>
+                  <td>Row 2, Col 3</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+      
+      <div class="text-center mt-3">
+        <button id="highlighterBtn" class="highlighter-btn">
+          <i class="fas fa-magic me-2"></i>Converto
+        </button>
+      </div>
+      
+      <div class="button-row">
+        <button id="convertSelectedBtn" class="btn btn-primary-gradient" disabled>
+          <i class="fas fa-cogs me-2"></i>Convert Selected Area to LaTeX
+        </button>
+        <button id="clearSelection" class="btn btn-neutral" disabled>
+          <i class="fas fa-times-circle me-2"></i>Clear Highlight
+        </button>
+        <button id="convertAllBtn" class="btn btn-dark-gradient">
+          <i class="fas fa-file-pdf me-2"></i>Convert Entire PDF
+        </button>
+      </div>
+    </div>
+
+    <div class="loading" id="loading">
+      <div class="spinner"></div>
+      <p>Processing your PDF... This may take a few seconds.</p>
+    </div>
+
+    <div class="feature-card" id="resultCard" style="display: none;">
+      <h3 class="section-title">Generated LaTeX</h3>
+      
+      <div class="rendered-output">
+        <h5>Rendered Content:</h5>
+        <div id="renderedContent"></div>
+      </div>
+      
+      <div class="latex-output" id="latexOutput"></div>
+      
+      <div class="solution-output" id="solutionOutput">
+        <h5 class="solution-title"><i class="fas fa-calculator me-2"></i>Solution</h5>
+        <div class="solution-content" id="solutionContent"></div>
+      </div>
+      
+      <div class="button-row">
+        <button id="solveBtn" class="btn btn-secondary-gradient">
+          <i class="fas fa-calculator me-2"></i>Solve Content
+        </button>
+        <button id="copyBtn" class="btn btn-primary-gradient">
+          <i class="fas fa-copy me-2"></i>Copy to Clipboard
+        </button>
+        <button id="newConversion" class="btn btn-neutral">
+          <i class="fas fa-redo me-2"></i>Convert Another Area
+        </button>
+        <a href="/pdflly" class="btn btn-neutral">
+          <i class="fas fa-file-pdf me-2"></i>Upload Another PDF
+        </a>
+      </div>
+    </div>
+  </div>
+</div>
+{% endblock %}
+
+{% block extra_js %}
+<script>
+  // DOM elements
+  const dropArea = document.getElementById('dropArea');
+  const fileInput = document.getElementById('fileInput');
+  const uploadForm = document.getElementById('uploadForm');
+  const pdfViewer = document.getElementById('pdfViewer');
+  const pdfContainer = document.getElementById('pdfContainer');
+  const convertSelectedBtn = document.getElementById('convertSelectedBtn');
+  const clearSelection = document.getElementById('clearSelection');
+  const convertAllBtn = document.getElementById('convertAllBtn');
+  const resultCard = document.getElementById('resultCard');
+  const loading = document.getElementById('loading');
+  const fileName = document.getElementById('fileName');
+  const pageCount = document.getElementById('pageCount');
+  const currentPage = document.getElementById('currentPage');
+  const totalPages = document.getElementById('totalPages');
+  const prevPage = document.getElementById('prevPage');
+  const nextPage = document.getElementById('nextPage');
+  const highlighterBtn = document.getElementById('highlighterBtn');
+  const solveBtn = document.getElementById('solveBtn');
+  const solutionOutput = document.getElementById('solutionOutput');
+  
+  // State variables
+  let currentFilename = '';
+  let highlight = null;
+  let isHighlighting = false;
+  let startX, startY;
+  let isHighlighterMode = false;
+  let currentLatex = '';
+  
+  // File upload handling
+  dropArea.addEventListener('click', () => {
+    fileInput.click();
+  });
+  
+  // Drag and drop events
+  dropArea.addEventListener('dragover', (e) => {
+    e.preventDefault();
+    dropArea.classList.add('dragover');
+  });
+  
+  dropArea.addEventListener('dragleave', () => {
+    dropArea.classList.remove('dragover');
+  });
+  
+  dropArea.addEventListener('drop', (e) => {
+    e.preventDefault();
+    dropArea.classList.remove('dragover');
+    
+    if (e.dataTransfer.files.length) {
+      fileInput.files = e.dataTransfer.files;
+      uploadForm.submit();
+    }
+  });
+  
+  // Form submission
+  uploadForm.addEventListener('submit', async (e) => {
+    e.preventDefault();
+    
+    const formData = new FormData(uploadForm);
+    
+    try {
+      loading.style.display = 'block';
+      
+      const response = await fetch('/pdflly/upload', {
+        method: 'POST',
+        body: formData
+      });
+      
+      const data = await response.json();
+      
+      if (data.success) {
+        currentFilename = data.filename;
+        
+        // Update file info
+        fileName.textContent = data.filename;
+        pageCount.textContent = data.pages;
+        totalPages.textContent = data.pages;
+        currentPage.textContent = 1;
+        
+        // Enable page navigation buttons
+        updatePageNavigation();
+        
+        // Show PDF viewer
+        document.querySelector('.feature-card:first-child').style.display = 'none';
+        pdfViewer.style.display = 'block';
+        
+        // Add highlighting functionality
+        addHighlightingFunctionality();
+      } else {
+        alert('Error: ' + data.error);
+      }
+    } catch (error) {
+      console.error('Upload error:', error);
+      alert('An error occurred during upload. Please try again.');
+    } finally {
+      loading.style.display = 'none';
+    }
+  });
+  
+  // Add highlighting functionality to PDF container
+  function addHighlightingFunctionality() {
+    pdfContainer.addEventListener('mousedown', startHighlight);
+    pdfContainer.addEventListener('mousemove', updateHighlight);
+    pdfContainer.addEventListener('mouseup', endHighlight);
+  }
+  
+  // Toggle highlighter mode
+  highlighterBtn.addEventListener('click', () => {
+    isHighlighterMode = !isHighlighterMode;
+    highlighterBtn.classList.toggle('active', isHighlighterMode);
+    
+    if (isHighlighterMode) {
+      highlighterBtn.innerHTML = '<i class="fas fa-magic me-2"></i>Converto Active';
+      pdfContainer.style.cursor = 'crosshair';
+    } else {
+      highlighterBtn.innerHTML = '<i class="fas fa-magic me-2"></i>Converto';
+      pdfContainer.style.cursor = 'default';
+      
+      // Remove any existing highlight if exiting highlighter mode
+      if (highlight) {
+        highlight.remove();
+        highlight = null;
+        convertSelectedBtn.disabled = true;
+        clearSelection.disabled = true;
+      }
+    }
+  });
+  
+  // Start highlight
+  function startHighlight(e) {
+    if (!isHighlighterMode) return;
+    
+    isHighlighting = true;
+    const rect = pdfContainer.getBoundingClientRect();
+    startX = e.clientX - rect.left;
+    startY = e.clientY - rect.top;
+    
+    // Remove existing highlight if any
+    if (highlight) {
+      highlight.remove();
+      highlight = null;
+    }
+    
+    // Create new highlight overlay
+    highlight = document.createElement('div');
+    highlight.className = 'highlight-overlay';
+    highlight.style.left = startX + 'px';
+    highlight.style.top = startY + 'px';
+    highlight.style.width = '0px';
+    highlight.style.height = '0px';
+    
+    pdfContainer.appendChild(highlight);
+  }
+  
+  // Update highlight
+  function updateHighlight(e) {
+    if (!isHighlighting || !highlight || !isHighlighterMode) return;
+    
+    const rect = pdfContainer.getBoundingClientRect();
+    const currentX = e.clientX - rect.left;
+    const currentY = e.clientY - rect.top;
+    
+    const width = currentX - startX;
+    const height = currentY - startY;
+    
+    highlight.style.width = Math.abs(width) + 'px';
+    highlight.style.height = Math.abs(height) + 'px';
+    
+    if (width < 0) {
+      highlight.style.left = currentX + 'px';
+    }
+    
+    if (height < 0) {
+      highlight.style.top = currentY + 'px';
+    }
+  }
+  
+  // End highlight
+  function endHighlight() {
+    if (!isHighlighting) return;
+    isHighlighting = false;
+    
+    if (highlight) {
+      const rect = highlight.getBoundingClientRect();
+      const containerRect = pdfContainer.getBoundingClientRect();
+      
+      // Enable convert button if highlight is large enough
+      if (rect.width > 20 && rect.height > 20) {
+        convertSelectedBtn.disabled = false;
+        clearSelection.disabled = false;
+      } else {
+        // Remove small highlights
+        highlight.remove();
+        highlight = null;
+      }
+    }
+  }
+  
+  // Clear highlight
+  clearSelection.addEventListener('click', () => {
+    if (highlight) {
+      highlight.remove();
+      highlight = null;
+      convertSelectedBtn.disabled = true;
+      clearSelection.disabled = true;
+    }
+  });
+  
+  // Convert selected area
+  convertSelectedBtn.addEventListener('click', async () => {
+    if (!currentFilename) return;
+    
+    try {
+      loading.style.display = 'block';
+      resultCard.style.display = 'none';
+      solutionOutput.style.display = 'none';
+      
+      // Get highlight coordinates if available
+      let coordinates = null;
+      if (highlight) {
+        const rect = highlight.getBoundingClientRect();
+        const containerRect = pdfContainer.getBoundingClientRect();
+        coordinates = [
+          rect.left - containerRect.left,
+          rect.top - containerRect.top,
+          rect.width,
+          rect.height
+        ];
+      }
+      
+      const response = await fetch('/pdflly/process', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+          filename: currentFilename,
+          coordinates: coordinates,
+          page: parseInt(currentPage.textContent) - 1
+        })
+      });
+      
+      const data = await response.json();
+      
+      if (data.success) {
+        currentLatex = data.latex;
+        
+        // Display results
+        document.getElementById('latexOutput').textContent = data.latex;
+        document.getElementById('renderedContent').innerHTML = `$$${data.latex}$$`;
+        
+        // Render with MathJax if available
+        if (typeof MathJax !== 'undefined') {
+          MathJax.typesetPromise([document.getElementById('renderedContent')]);
+        }
+        
+        // Show result card
+        resultCard.style.display = 'block';
+      } else {
+        alert('Error: ' + data.error);
+      }
+    } catch (error) {
+      console.error('Conversion error:', error);
+      alert('An error occurred during conversion. Please try again.');
+    } finally {
+      loading.style.display = 'none';
+    }
+  });
+  
+  // Convert entire PDF
+  convertAllBtn.addEventListener('click', async () => {
+    if (!currentFilename) return;
+    
+    try {
+      loading.style.display = 'block';
+      resultCard.style.display = 'none';
+      solutionOutput.style.display = 'none';
+      
+      const response = await fetch('/pdflly/process', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+          filename: currentFilename,
+          convert_all: true
+        })
+      });
+      
+      const data = await response.json();
+      
+      if (data.success) {
+        currentLatex = data.latex;
+        
+        // Display results
+        document.getElementById('latexOutput').textContent = data.latex;
+        document.getElementById('renderedContent').innerHTML = `$$${data.latex}$$`;
+        
+        // Render with MathJax if available
+        if (typeof MathJax !== 'undefined') {
+          MathJax.typesetPromise([document.getElementById('renderedContent')]);
+        }
+        
+        // Show result card
+        resultCard.style.display = 'block';
+      } else {
+        alert('Error: ' + data.error);
+      }
+    } catch (error) {
+      console.error('Conversion error:', error);
+      alert('An error occurred during conversion. Please try again.');
+    } finally {
+      loading.style.display = 'none';
+    }
+  });
+  
+  // Solve PDF content
+  solveBtn.addEventListener('click', async () => {
+    if (!currentLatex) return;
+    
+    try {
+      loading.style.display = 'block';
+      
+      const response = await fetch('/pdflly/solve', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ latex: currentLatex })
+      });
+      
+      const data = await response.json();
+      
+      if (data.success) {
+        const solution = data.solution;
+        let solutionText = '';
+        
+        if (solution.type === 'equation') {
+          solutionText = `Solutions:\n${solution.solutions.join('\n')}`;
+        } else if (solution.type === 'expression') {
+          solutionText = `Simplified:\n${solution.result}`;
+        } else if (solution.type === 'numerical') {
+          solutionText = `Numerical value:\n${solution.result}`;
+        } else if (solution.type === 'system') {
+          solutionText = `System solutions:\n${JSON.stringify(solution.solutions)}`;
+        } else if (solution.type === 'error') {
+          solutionText = `Error: ${solution.message}`;
+        }
+        
+        document.getElementById('solutionContent').textContent = solutionText;
+        solutionOutput.style.display = 'block';
+      } else {
+        alert('Error: ' + data.error);
+      }
+    } catch (error) {
+      console.error('Solving error:', error);
+      alert('An error occurred while solving the content. Please try again.');
+    } finally {
+      loading.style.display = 'none';
+    }
+  });
+  
+  // Copy to clipboard
+  document.getElementById('copyBtn').addEventListener('click', () => {
+    const latexText = document.getElementById('latexOutput').textContent;
+    navigator.clipboard.writeText(latexText).then(() => {
+      showNotification('LaTeX code copied to clipboard!');
+    }).catch(err => {
+      console.error('Failed to copy: ', err);
+      alert('Failed to copy LaTeX code. Please try again.');
+    });
+  });
+  
+  // New conversion
+  document.getElementById('newConversion').addEventListener('click', () => {
+    resultCard.style.display = 'none';
+    solutionOutput.style.display = 'none';
+    if (highlight) {
+      highlight.remove();
+      highlight = null;
+      convertSelectedBtn.disabled = true;
+      clearSelection.disabled = true;
+    }
+  });
+  
+  // Update page navigation button states
+  function updatePageNavigation() {
+    const current = parseInt(currentPage.textContent);
+    const total = parseInt(totalPages.textContent);
+    
+    prevPage.disabled = current <= 1;
+    nextPage.disabled = current >= total;
+  }
+  
+  // Page navigation
+  prevPage.addEventListener('click', () => {
+    const current = parseInt(currentPage.textContent);
+    if (current > 1) {
+      currentPage.textContent = current - 1;
+      updatePageNavigation();
+      
+      // Clear highlight when changing pages
+      if (highlight) {
+        highlight.remove();
+        highlight = null;
+        convertSelectedBtn.disabled = true;
+        clearSelection.disabled = true;
+      }
+    }
+  });
+  
+  nextPage.addEventListener('click', () => {
+    const current = parseInt(currentPage.textContent);
+    const total = parseInt(totalPages.textContent);
+    if (current < total) {
+      currentPage.textContent = current + 1;
+      updatePageNavigation();
+      
+      // Clear highlight when changing pages
+      if (highlight) {
+        highlight.remove();
+        highlight = null;
+        convertSelectedBtn.disabled = true;
+        clearSelection.disabled = true;
+      }
+    }
+  });
+</script>
+{% endblock %}
\ No newline at end of file
diff --git a/templates/scribble.html b/templates/scribble.html
new file mode 100644
index 0000000000000000000000000000000000000000..e69950a2d1542a4f2769aa58344a29cbbf79dcd8
--- /dev/null
+++ b/templates/scribble.html
@@ -0,0 +1,533 @@
+{% extends "base.html" %}
+
+{% block title %}Scribble to LaTeX | TexLab{% endblock %}
+
+{% block extra_css %}
+<style>
+  .feature-card {
+  display: inline-block;
+  width: 100%;
+  height: auto !important;
+  padding: 20px 25px;
+  margin-bottom: 20px;
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
+}
+  .canvas-container {
+    position: relative;
+    width: 100%;
+    max-width: 800px;
+    margin: 0 auto;
+    border: 2px solid #ddd;
+    border-radius: 10px;
+    overflow: hidden;
+    background: white;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+  }
+
+  #scribbleCanvas {
+    width: 100%;
+    height: 400px;
+    cursor: crosshair;
+    display: block;
+  }
+
+  .tools {
+    display: flex;
+    gap: 10px;
+    flex-wrap: wrap;
+    justify-content: center;
+    margin: 20px 0;
+  }
+
+  .tool-btn {
+    padding: 10px 20px;
+    border-radius: 50px;
+    border: none;
+    background: #f8f9fa;
+    color: #333;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .tool-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
+  }
+
+  .tool-btn.active {
+    background: #667eea;
+    color: white;
+  }
+
+  .color-option {
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    cursor: pointer;
+    border: 2px solid transparent;
+  }
+
+  .color-option.active {
+    border-color: #333;
+    transform: scale(1.1);
+  }
+
+  .latex-output {
+    background: #f8f9fa;
+    border-radius: 10px;
+    padding: 20px;
+    border: 1px solid #eee;
+    font-family: 'Consolas', 'Courier New', monospace;
+    font-size: 1.1rem;
+    white-space: pre-wrap;
+    word-break: break-all;
+    min-height: 100px;
+    margin: 20px 0;
+  }
+
+  .rendered-output {
+    background: white;
+    border-radius: 10px;
+    padding: 20px;
+    border: 1px solid #eee;
+    min-height: 100px;
+    margin: 20px 0;
+    text-align: center;
+  }
+
+  .solution-output {
+    background: #e8f5e9;
+    border-radius: 10px;
+    padding: 20px;
+    border: 1px solid #c8e6c9;
+    margin: 20px 0;
+    display: none;
+  }
+
+  .solution-title {
+    color: #2e7d32;
+    margin-bottom: 15px;
+    font-weight: 600;
+  }
+
+  .solution-content {
+    font-family: 'Consolas', 'Courier New', monospace;
+    font-size: 1.1rem;
+    white-space: pre-wrap;
+  }
+
+  .loading {
+    display: none;
+    text-align: center;
+    padding: 20px;
+  }
+
+  .spinner {
+    border: 4px solid rgba(0, 0, 0, 0.1);
+    border-radius: 50%;
+    border-top: 4px solid #667eea;
+    width: 40px;
+    height: 40px;
+    animation: spin 1s linear infinite;
+    margin: 0 auto 15px;
+  }
+
+  @keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
+
+  .button-row {
+    display: flex;
+    gap: 15px;
+    justify-content: center;
+    margin: 20px 0;
+    flex-wrap: wrap;
+  }
+
+  @media (max-width: 768px) {
+    #scribbleCanvas {
+      height: 300px;
+    }
+    
+    .button-row {
+      flex-direction: column;
+      align-items: center;
+    }
+    
+    .button-row .btn, .button-row .tool-btn {
+      width: 100%;
+      max-width: 300px;
+    }
+  }
+</style>
+{% endblock %}
+
+{% block content %}
+<div class="page-header">
+  <h1 class="page-title"><i class="fas fa-pen-fancy me-2"></i>Scribble to LaTeX</h1>
+  <p class="page-subtitle">
+    Draw mathematical equations on the canvas and convert them to clean, editable LaTeX code.
+  </p>
+</div>
+
+<div class="row">
+  <div class="col-lg-10 mx-auto">
+    <div class="feature-card">
+      <h3 class="section-title">Draw Your Equation</h3>
+      
+      <div class="tools">
+        <button id="penTool" class="tool-btn active">
+          <i class="fas fa-pen"></i> Pen
+        </button>
+        <button id="eraserTool" class="tool-btn">
+          <i class="fas fa-eraser"></i> Eraser
+        </button>
+        <button id="undoBtn" class="tool-btn">
+          <i class="fas fa-undo"></i> Undo
+        </button>
+        <button id="clearBtn" class="tool-btn">
+          <i class="fas fa-trash"></i> Clear
+        </button>
+        
+        <div class="d-flex align-items-center gap-2">
+          <div class="color-option active" style="background: #000000;" data-color="#000000"></div>
+          <div class="color-option" style="background: #ff0000;" data-color="#ff0000"></div>
+          <div class="color-option" style="background: #0000ff;" data-color="#0000ff"></div>
+          <div class="color-option" style="background: #00ff00;" data-color="#00ff00"></div>
+        </div>
+        
+        <div class="d-flex align-items-center gap-2">
+          <label for="penSize">Size:</label>
+          <input type="range" id="penSize" min="1" max="20" value="3" style="width: 100px;">
+        </div>
+      </div>
+      
+      <div class="canvas-container">
+        <canvas id="scribbleCanvas"></canvas>
+      </div>
+      
+      <div class="text-center mt-4">
+        <button id="convertBtn" class="btn btn-primary-gradient">
+          <i class="fas fa-cogs me-2"></i>Convert to LaTeX
+        </button>
+      </div>
+    </div>
+
+    <div class="loading" id="loading">
+      <div class="spinner"></div>
+      <p>Processing your scribble... This may take a few seconds.</p>
+    </div>
+
+    <div class="feature-card" id="resultCard" style="display: none;">
+      <h3 class="section-title">Generated LaTeX</h3>
+      
+      <div class="rendered-output">
+        <h5>Rendered Equation:</h5>
+        <div id="renderedContent"></div>
+      </div>
+      
+      <div class="latex-output" id="latexOutput" style="display: none;"></div>
+      
+      <div class="solution-output" id="solutionOutput">
+        <h5 class="solution-title"><i class="fas fa-calculator me-2"></i>Solution</h5>
+        <div class="solution-content" id="solutionContent"></div>
+      </div>
+      
+      <div class="button-row">
+        <button id="solveBtn" class="btn btn-accent-gradient">
+          <i class="fas fa-calculator me-2"></i>Solve Equation
+        </button>
+        <button id="copyBtn" class="btn btn-secondary-gradient">
+          <i class="fas fa-copy me-2"></i>Copy LaTeX
+        </button>
+        <button id="newScribble" class="btn btn-neutral">
+          <i class="fas fa-redo me-2"></i>New Scribble
+        </button>
+        <a href="/" class="btn btn-neutral">
+          <i class="fas fa-home me-2"></i>Back to Home
+        </a>
+      </div>
+    </div>
+  </div>
+</div>
+{% endblock %}
+
+{% block extra_js %}
+<script>
+  // DOM elements
+  const canvas = document.getElementById('scribbleCanvas');
+  const ctx = canvas.getContext('2d');
+  const convertBtn = document.getElementById('convertBtn');
+  const resultCard = document.getElementById('resultCard');
+  const loading = document.getElementById('loading');
+  const solveBtn = document.getElementById('solveBtn');
+  const solutionOutput = document.getElementById('solutionOutput');
+  
+  // State variables
+  let isDrawing = false;
+  let lastX = 0;
+  let lastY = 0;
+  let currentTool = 'pen';
+  let currentColor = '#000000';
+  let penSize = 3;
+  let drawingHistory = [];
+  let currentLatex = '';
+  
+  // Set canvas size
+  function resizeCanvas() {
+    const container = canvas.parentElement;
+    canvas.width = container.clientWidth;
+    canvas.height = 400;
+    
+    // Set background
+    ctx.fillStyle = 'white';
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+  }
+  
+  // Initialize canvas
+  window.addEventListener('load', () => {
+    resizeCanvas();
+    window.addEventListener('resize', resizeCanvas);
+  });
+  
+  // Drawing functions
+  function startDrawing(e) {
+    isDrawing = true;
+    [lastX, lastY] = [e.offsetX, e.offsetY];
+    
+    // Save state for undo
+    saveCanvasState();
+  }
+  
+  function draw(e) {
+    if (!isDrawing) return;
+    
+    ctx.strokeStyle = currentTool === 'eraser' ? 'white' : currentColor;
+    ctx.lineWidth = penSize;
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'round';
+    
+    ctx.beginPath();
+    ctx.moveTo(lastX, lastY);
+    ctx.lineTo(e.offsetX, e.offsetY);
+    ctx.stroke();
+    
+    [lastX, lastY] = [e.offsetX, e.offsetY];
+  }
+  
+  function stopDrawing() {
+    isDrawing = false;
+  }
+  
+  // Save canvas state for undo
+  function saveCanvasState() {
+    drawingHistory.push(ctx.getImageData(0, 0, canvas.width, canvas.height));
+    // Limit history to 50 states to prevent memory issues
+    if (drawingHistory.length > 50) {
+      drawingHistory.shift();
+    }
+  }
+  
+  // Undo last action
+  function undo() {
+    if (drawingHistory.length > 0) {
+      const prevState = drawingHistory.pop();
+      ctx.putImageData(prevState, 0, 0);
+    }
+  }
+  
+  // Clear canvas
+  function clearCanvas() {
+    ctx.fillStyle = 'white';
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+    drawingHistory = [];
+  }
+  
+  // Get canvas as data URL
+  function getCanvasData() {
+    return canvas.toDataURL('image/png');
+  }
+  
+  // Event listeners for drawing
+  canvas.addEventListener('mousedown', startDrawing);
+  canvas.addEventListener('mousemove', draw);
+  canvas.addEventListener('mouseup', stopDrawing);
+  canvas.addEventListener('mouseout', stopDrawing);
+  
+  // Touch events for mobile
+  canvas.addEventListener('touchstart', (e) => {
+    e.preventDefault();
+    const touch = e.touches[0];
+    const mouseEvent = new MouseEvent('mousedown', {
+      clientX: touch.clientX,
+      clientY: touch.clientY
+    });
+    canvas.dispatchEvent(mouseEvent);
+  });
+  
+  canvas.addEventListener('touchmove', (e) => {
+    e.preventDefault();
+    const touch = e.touches[0];
+    const mouseEvent = new MouseEvent('mousemove', {
+      clientX: touch.clientX,
+      clientY: touch.clientY
+    });
+    canvas.dispatchEvent(mouseEvent);
+  });
+  
+  canvas.addEventListener('touchend', (e) => {
+    e.preventDefault();
+    const mouseEvent = new MouseEvent('mouseup', {});
+    canvas.dispatchEvent(mouseEvent);
+  });
+  
+  // Tool buttons
+  document.getElementById('penTool').addEventListener('click', () => {
+    currentTool = 'pen';
+    document.getElementById('penTool').classList.add('active');
+    document.getElementById('eraserTool').classList.remove('active');
+  });
+  
+  document.getElementById('eraserTool').addEventListener('click', () => {
+    currentTool = 'eraser';
+    document.getElementById('eraserTool').classList.add('active');
+    document.getElementById('penTool').classList.remove('active');
+  });
+  
+  // Color selection
+  document.querySelectorAll('.color-option').forEach(option => {
+    option.addEventListener('click', () => {
+      document.querySelectorAll('.color-option').forEach(opt => {
+        opt.classList.remove('active');
+      });
+      option.classList.add('active');
+      currentColor = option.dataset.color;
+    });
+  });
+  
+  // Pen size
+  document.getElementById('penSize').addEventListener('input', (e) => {
+    penSize = parseInt(e.target.value);
+  });
+  
+  // Undo button
+  document.getElementById('undoBtn').addEventListener('click', undo);
+  
+  // Clear button
+  document.getElementById('clearBtn').addEventListener('click', clearCanvas);
+  
+  // Convert button
+  convertBtn.addEventListener('click', async () => {
+    try {
+      loading.style.display = 'block';
+      resultCard.style.display = 'none';
+      solutionOutput.style.display = 'none';
+      
+      const imageData = getCanvasData();
+      
+      const response = await fetch('/scribble/process', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ image: imageData })
+      });
+      
+      const data = await response.json();
+      
+      if (data.success) {
+        currentLatex = data.latex;
+        
+        // Display results
+        document.getElementById('latexOutput').textContent = data.latex;
+        document.getElementById('renderedContent').innerHTML = `$$${data.latex}$$`;
+        
+        // Render with MathJax if available
+        if (typeof MathJax !== 'undefined') {
+          MathJax.typesetPromise([document.getElementById('renderedContent')]);
+        }
+        
+        // Show result card
+        resultCard.style.display = 'block';
+      } else {
+        alert('Error: ' + data.error);
+      }
+    } catch (error) {
+      console.error('Conversion error:', error);
+      alert('An error occurred during conversion. Please try again.');
+    } finally {
+      loading.style.display = 'none';
+    }
+  });
+  
+  // Solve equation
+  solveBtn.addEventListener('click', async () => {
+    if (!currentLatex) return;
+    
+    try {
+      loading.style.display = 'block';
+      
+      const response = await fetch('/scribble/solve', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ latex: currentLatex })
+      });
+      
+      const data = await response.json();
+      
+      if (data.success) {
+        const solution = data.solution;
+        let solutionText = '';
+        
+        if (solution.type === 'equation') {
+          solutionText = `Solutions:\n${solution.solutions.join('\n')}`;
+        } else if (solution.type === 'expression') {
+          solutionText = `Simplified:\n${solution.result}`;
+        } else if (solution.type === 'numerical') {
+          solutionText = `Numerical value:\n${solution.result}`;
+        } else if (solution.type === 'system') {
+          solutionText = `System solutions:\n${JSON.stringify(solution.solutions)}`;
+        } else if (solution.type === 'error') {
+          solutionText = `Error: ${solution.message}`;
+        }
+        
+        document.getElementById('solutionContent').textContent = solutionText;
+        solutionOutput.style.display = 'block';
+      } else {
+        alert('Error: ' + data.error);
+      }
+    } catch (error) {
+      console.error('Solving error:', error);
+      alert('An error occurred while solving the equation. Please try again.');
+    } finally {
+      loading.style.display = 'none';
+    }
+  });
+  
+  // Copy to clipboard
+  document.getElementById('copyBtn').addEventListener('click', () => {
+    const latexText = document.getElementById('latexOutput').textContent;
+    navigator.clipboard.writeText(latexText).then(() => {
+      showNotification('LaTeX code copied to clipboard!');
+    }).catch(err => {
+      console.error('Failed to copy: ', err);
+      alert('Failed to copy LaTeX code. Please try again.');
+    });
+  });
+  
+  // New scribble
+  document.getElementById('newScribble').addEventListener('click', () => {
+    resultCard.style.display = 'none';
+    solutionOutput.style.display = 'none';
+  });
+</script>
+{% endblock %}
\ No newline at end of file
diff --git a/templates/table.html b/templates/table.html
new file mode 100644
index 0000000000000000000000000000000000000000..0aa8084116dcbfbc571590033ff86ea3fde04fbd
--- /dev/null
+++ b/templates/table.html
@@ -0,0 +1,793 @@
+{% extends "base.html" %}
+
+{% block title %}Table to LaTeX | TexLab{% endblock %}
+
+{% block extra_css %}
+<style>
+  .feature-card {
+    display: inline-block;
+    width: 100%;
+    height: auto !important;
+    padding: 20px 25px;
+    margin-bottom: 20px;
+    background: #fff;
+    border-radius: 12px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
+  }
+
+  .upload-message {
+    display: none;
+    background: linear-gradient(135deg, #e3f2fd, #bbdefb);
+    /* soft sky-blue gradient */
+    color: #0d47a1;
+    /* deep blue text */
+    font-weight: 600;
+    padding: 12px 20px;
+    margin: 15px auto;
+    text-align: center;
+    border-radius: 10px;
+    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
+    width: fit-content;
+    max-width: 80%;
+    animation: fadeIn 0.4s ease-in-out;
+  }
+
+  /* Smooth fade-in animation */
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+      transform: translateY(-5px);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .mode-selector {
+    display: flex;
+    gap: 15px;
+    justify-content: center;
+    margin-bottom: 30px;
+    flex-wrap: wrap;
+  }
+
+  .mode-btn {
+    padding: 12px 25px;
+    border-radius: 50px;
+    border: 2px solid #ddd;
+    background: white;
+    color: #333;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s ease;
+  }
+
+  .mode-btn.active {
+    background: #667eea;
+    color: white;
+    border-color: #667eea;
+    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
+  }
+
+  .mode-btn:hover:not(.active) {
+    border-color: #667eea;
+    transform: translateY(-2px);
+  }
+
+  .upload-area {
+    border: 3px dashed #ddd;
+    border-radius: 15px;
+    padding: 40px 20px;
+    text-align: center;
+    transition: all 0.3s ease;
+    cursor: pointer;
+    background-color: #fafafa;
+    margin-bottom: 20px;
+  }
+
+  .upload-area:hover {
+    border-color: #667eea;
+    background-color: #f0f4ff;
+  }
+
+  .upload-area.dragover {
+    border-color: #667eea;
+    background-color: #e0e7ff;
+    transform: scale(1.02);
+  }
+
+  .upload-icon {
+    font-size: 3rem;
+    color: #667eea;
+    margin-bottom: 15px;
+  }
+
+  .upload-text {
+    font-size: 1.2rem;
+    color: #555;
+    margin-bottom: 10px;
+  }
+
+  .upload-hint {
+    color: #888;
+    font-size: 0.9rem;
+  }
+
+  .manual-input {
+    background: #f8f9fa;
+    border-radius: 15px;
+    padding: 30px;
+    margin-bottom: 20px;
+  }
+
+  .input-group {
+    display: flex;
+    gap: 15px;
+    justify-content: center;
+    flex-wrap: wrap;
+    margin-bottom: 20px;
+  }
+
+  .input-field {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .input-field label {
+    margin-bottom: 8px;
+    font-weight: 600;
+  }
+
+  .input-field input {
+    width: 100px;
+    padding: 10px;
+    border: 2px solid #ddd;
+    border-radius: 10px;
+    text-align: center;
+    font-size: 1.1rem;
+  }
+
+  .input-field input:focus {
+    outline: none;
+    border-color: #667eea;
+    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
+  }
+
+  .canvas-container {
+    position: relative;
+    width: 100%;
+    max-width: 800px;
+    margin: 0 auto;
+    border: 2px solid #ddd;
+    border-radius: 10px;
+    overflow: hidden;
+    background: white;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+    margin-bottom: 20px;
+  }
+
+  #tableCanvas {
+    width: 100%;
+    height: 400px;
+    cursor: crosshair;
+    display: block;
+  }
+
+  .image-preview {
+    max-width: 100%;
+    max-height: 400px;
+    margin: 20px auto;
+    display: block;
+    border-radius: 10px;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+  }
+
+  .latex-output {
+    background: #f8f9fa;
+    border-radius: 10px;
+    padding: 20px;
+    border: 1px solid #eee;
+    font-family: 'Consolas', 'Courier New', monospace;
+    font-size: 1.1rem;
+    white-space: pre-wrap;
+    word-break: break-all;
+    min-height: 100px;
+    margin: 20px 0;
+  }
+
+  .rendered-output {
+    background: white;
+    border-radius: 10px;
+    padding: 20px;
+    border: 1px solid #eee;
+    min-height: 100px;
+    margin: 20px 0;
+    text-align: center;
+  }
+  .table-info-card{
+    background: white;
+    border-radius: 10px;
+    padding: 20px;
+    border: 1px solid #eee;
+    min-height: 100px;
+    margin: 20px 0;
+    text-align: center;
+  }
+
+  .solution-output {
+    background: #e8f5e9;
+    border-radius: 10px;
+    padding: 20px;
+    border: 1px solid #c8e6c9;
+    margin: 20px 0;
+    display: none;
+  }
+
+  .solution-title {
+    color: #2e7d32;
+    margin-bottom: 15px;
+    font-weight: 600;
+  }
+
+  .solution-content {
+    font-family: 'Consolas', 'Courier New', monospace;
+    font-size: 1.1rem;
+    white-space: pre-wrap;
+  }
+
+  .loading {
+    display: none;
+    text-align: center;
+    padding: 20px;
+  }
+
+  .spinner {
+    border: 4px solid rgba(0, 0, 0, 0.1);
+    border-radius: 50%;
+    border-top: 4px solid #667eea;
+    width: 40px;
+    height: 40px;
+    animation: spin 1s linear infinite;
+    margin: 0 auto 15px;
+  }
+
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  .button-row {
+    display: flex;
+    gap: 15px;
+    justify-content: center;
+    margin: 20px 0;
+    flex-wrap: wrap;
+  }
+
+  @media (max-width: 768px) {
+    .mode-selector {
+      flex-direction: column;
+      align-items: center;
+    }
+
+    .mode-btn {
+      width: 100%;
+      max-width: 300px;
+    }
+
+    #tableCanvas {
+      height: 300px;
+    }
+
+    .input-group {
+      flex-direction: column;
+      align-items: center;
+    }
+
+    .button-row {
+      flex-direction: column;
+      align-items: center;
+    }
+
+    .button-row .btn {
+      width: 100%;
+      max-width: 300px;
+    }
+  }
+</style>
+{% endblock %}
+
+{% block content %}
+<div class="page-header">
+  <h1 class="page-title"><i class="fas fa-table me-2"></i>Table to LaTeX</h1>
+  <p class="page-subtitle">
+    Convert table images to clean, editable LaTeX code using AI-powered recognition.
+  </p>
+</div>
+
+<div class="row">
+  <div class="col-lg-10 mx-auto">
+    <div class="feature-card">
+      <h3 class="section-title">Choose Input Method</h3>
+
+      <div class="mode-selector">
+        <button id="cameraMode" class="mode-btn active">
+          <i class="fas fa-camera me-2"></i>Table Image
+        </button>
+        <button id="manualMode" class="mode-btn">
+          <i class="fas fa-keyboard me-2"></i>Manual Input
+        </button>
+        <button id="drawMode" class="mode-btn">
+          <i class="fas fa-pen me-2"></i>Camera Capture
+        </button>
+      </div>
+
+       <!-- Camera/Table Image Mode ....................... -->
+      <div id="cameraSection">
+        <form method="POST" enctype="multipart/form-data" id="uploadForm">
+          <div class="upload-area" id="dropArea">
+            <div class="upload-icon">
+              <i class="fas fa-cloud-upload-alt"></i>
+            </div>
+            <h4 class="upload-text">Drag & Drop your table image here</h4>
+            <p class="upload-hint">or click to browse files (JPG, PNG, GIF, etc.)</p>
+
+            <input type="file" name="image" id="fileInput" accept="image/*" required class="d-none">
+
+
+          </div>
+          <div id="uploadMessage" class="upload-message">
+            File uploaded successfully!
+          </div>
+
+          <div class="text-center" id="uploadButtonContainer" style="display:none; margin-top:15px;">
+            <button type="submit" class="btn btn-primary-gradient">
+              <i class="fas fa-upload me-2"></i>Upload & Convert
+            </button>
+          </div>
+
+        </form>
+      </div>
+
+      </form>
+    </div>
+
+    <!-- Manual Input Mode -->
+    <div id="manualSection" style="display: none;">
+      <div class="manual-input">
+        <h4 class="text-center mb-4">Specify Table Dimensions</h4>
+
+        <div class="input-group">
+          <div class="input-field">
+            <label for="rowsInput">Rows</label>
+            <input type="number" id="rowsInput" min="1" max="20" value="3">
+          </div>
+
+          <div class="input-field">
+            <label for="colsInput">Columns</label>
+            <input type="number" id="colsInput" min="1" max="10" value="3">
+          </div>
+        </div>
+
+        <div class="text-center">
+          <button id="generateBtn" class="btn btn-primary-gradient">
+            <i class="fas fa-table me-2"></i>Generate LaTeX Table
+          </button>
+        </div>
+      </div>
+    </div>
+
+
+<!-- 📷 Camera Capture Section -->
+<div id="drawSection" style="display: none;">
+  <div class="text-center mb-3">
+    <p>Capture a picture of your table below</p>
+  </div>
+
+  <div class="camera-container text-center">
+    <video id="cameraPreview" autoplay playsinline class="rounded shadow" style="width: 90%; max-width: 500px;"></video>
+    <canvas id="cameraCanvas" style="display: none;"></canvas>
+  </div>
+
+  <div class="text-center mt-3">
+    <button id="captureBtn" class="btn btn-success me-2">
+      <i class="fas fa-camera me-2"></i> Capture
+    </button>
+    <button id="convertCameraBtn" class="btn btn-primary-gradient" disabled>
+      <i class="fas fa-cogs me-2"></i> Convert to LaTeX
+    </button>
+  </div>
+
+  <div id="capturedImagePreview" class="text-center mt-3"></div>
+</div>
+
+<!-- <--RESULT SECTION --> 
+  <div class="loading" id="loading">
+    <div class="spinner"></div>
+    <p>Processing your table... This may take a few seconds.</p>
+  </div>
+
+  <div class="feature-card" id="resultCard" style="display: none;">
+    <h3 class="section-title">Generated LaTeX</h3>
+
+    <div class="image-preview-container" id="imagePreviewContainer" style="display: none;">
+      <h5>Original Image:</h5>
+      <img id="imagePreview" class="image-preview" alt="Uploaded table">
+    </div>
+
+    <div class="rendered-output">
+      <h5>Latex code will appear here for Table:</h5>
+      <div id="renderedContent"></div>
+    </div>
+
+   <div class="table-info-card" id="tableInfo" style="display: none;">
+  <h5><i class="fas fa-ruler-combined me-2"></i>Detected Table Dimensions</h5>
+  <p><strong>Rows:</strong> <span id="detectedRowCount">-</span></p>
+  <p><strong>Columns:</strong> <span id="detectedColCount">-</span></p>
+</div>
+
+    <div class="latex-output" id="latexOutput" style="display: none;"></div>
+
+    <div class="solution-output" id="solutionOutput">
+      <h5 class="solution-title"><i class="fas fa-calculator me-2"></i>Solution</h5>
+      <div class="solution-content" id="solutionContent"></div>
+    </div>
+
+    <div class="button-row">
+      <!-- <button id="solveBtn" class="btn btn-accent-gradient">
+          <i class="fas fa-calculator me-2"></i>Solve Table Content
+        </button> -->
+      <button id="copyBtn" class="btn btn-secondary-gradient">
+        <i class="fas fa-copy me-2"></i>Copy LaTeX
+      </button>
+      <button id="newConversion" class="btn btn-neutral">
+        <i class="fas fa-redo me-2"></i>New Conversion
+      </button>
+      <a href="/" class="btn btn-neutral">
+        <i class="fas fa-home me-2"></i>Back to Home
+      </a>
+    </div>
+  </div>
+</div>
+</div>
+{% endblock %}
+
+{% block extra_js %}
+<script>
+  // ----------------------------
+  // DOM elements
+  // ----------------------------
+  const cameraMode = document.getElementById('cameraMode');       // "Table Image" main upload tab
+  const captureMode = document.getElementById('drawMode');       // your Camera Capture button (id drawMode in HTML)
+  const manualMode = document.getElementById('manualMode');
+
+  const cameraSection = document.getElementById('cameraSection'); // upload form section
+  const manualSection = document.getElementById('manualSection');
+  const captureSection = document.getElementById('drawSection');  // this is where your camera HTML currently sits (id="drawSection")
+
+  const dropArea = document.getElementById('dropArea');
+  const fileInput = document.getElementById('fileInput');
+  const uploadForm = document.getElementById('uploadForm');
+
+  const generateBtn = document.getElementById('generateBtn');
+
+  const resultCard = document.getElementById('resultCard');
+  const loading = document.getElementById('loading');
+  const imagePreview = document.getElementById('imagePreview');
+  const imagePreviewContainer = document.getElementById('imagePreviewContainer');
+
+  const uploadMessage = document.getElementById('uploadMessage');
+  const uploadButtonContainer = document.getElementById('uploadButtonContainer');
+
+  // Camera capture DOM
+  const video = document.getElementById('cameraPreview');
+  const cameraCanvas = document.getElementById('cameraCanvas');
+  const captureBtn = document.getElementById('captureBtn');
+  const convertCameraBtn = document.getElementById('convertCameraBtn');
+  const capturedImagePreview = document.getElementById('capturedImagePreview');
+
+  // Result fields
+  const latexOutputEl = document.getElementById('latexOutput');
+  const renderedContent = document.getElementById('renderedContent');
+  const detectedRowCountEl = document.getElementById('detectedRowCount');
+  const detectedColCountEl = document.getElementById('detectedColCount');
+  const tableInfo = document.getElementById('tableInfo');
+
+  // Misc
+  let currentLatex = '';
+  let cameraStream = null;
+  let capturedImageBase64 = null;
+
+  // ----------------------------
+  // Mode switching
+  // ----------------------------
+  cameraMode.addEventListener('click', () => setActiveMode('upload'));
+  manualMode.addEventListener('click', () => setActiveMode('manual'));
+  captureMode.addEventListener('click', () => {
+    setActiveMode('capture');
+    startCamera(); // start stream when user opens capture mode
+  });
+
+  function setActiveMode(mode) {
+    // update active classes
+    cameraMode.classList.toggle('active', mode === 'upload');
+    manualMode.classList.toggle('active', mode === 'manual');
+    captureMode.classList.toggle('active', mode === 'capture');
+
+    // show/hide sections
+    cameraSection.style.display = mode === 'upload' ? 'block' : 'none';
+    manualSection.style.display = mode === 'manual' ? 'block' : 'none';
+    captureSection.style.display = mode === 'capture' ? 'block' : 'none';
+
+    // stop camera when leaving capture
+    if (mode !== 'capture') stopCamera();
+  }
+
+  // default mode (upload)
+  setActiveMode('upload');
+
+  // ----------------------------
+  // File upload / drag & drop
+  // ----------------------------
+  
+  
+  
+  dropArea.addEventListener('click', () => fileInput.click());
+
+  document.addEventListener('dragover', (e) => e.preventDefault());
+  document.addEventListener('drop', (e) => e.preventDefault());
+
+  dropArea.addEventListener('dragover', (e) => {
+    e.preventDefault();
+    dropArea.classList.add('dragover');
+  });
+  dropArea.addEventListener('dragleave', () => dropArea.classList.remove('dragover'));
+
+  dropArea.addEventListener('drop', (e) => {
+    e.preventDefault();
+    dropArea.classList.remove('dragover');
+    if (e.dataTransfer.files.length) {
+      fileInput.files = e.dataTransfer.files;
+      showUploadReadyState(e.dataTransfer.files[0].name);
+    }
+  });
+
+  fileInput.addEventListener('change', () => {
+    if (fileInput.files.length > 0) {
+      showUploadReadyState(fileInput.files[0].name);
+    }
+  });
+
+
+  function showUploadReadyState(fileName) {
+    uploadMessage.innerHTML = `✅ <b>${fileName}</b> uploaded successfully!`;
+    uploadMessage.style.display = 'block';
+    uploadButtonContainer.style.display = 'block';
+  }
+
+  dropArea.addEventListener('dragover', (e) => {
+    e.preventDefault();
+    dropArea.classList.add('dragover');
+  });
+
+  dropArea.addEventListener('dragleave', () => {
+    dropArea.classList.remove('dragover');
+  });
+
+  dropArea.addEventListener('drop', (e) => {
+    e.preventDefault();
+    dropArea.classList.remove('dragover');
+
+    if (e.dataTransfer.files.length) {
+      fileInput.files = e.dataTransfer.files;
+      uploadForm.requestSubmit(); // 🔥 triggers your async submit code
+    }
+  });
+
+
+
+
+
+
+  // ----------------------------
+  // Upload form submit -> /table/process
+  // ----------------------------
+  uploadForm.addEventListener('submit', async (e) => {
+    e.preventDefault();
+    const formData = new FormData(uploadForm);
+
+    try {
+      loading.style.display = 'block';
+      resultCard.style.display = 'none';
+      tableInfo.style.display = 'none';
+
+      const response = await fetch('/table/process', { method: 'POST', body: formData });
+      const data = await response.json();
+      handleProcessResult(data);
+    } catch (err) {
+      console.error('Upload error:', err);
+      alert('An error occurred during upload. Please try again.');
+    } finally {
+      loading.style.display = 'none';
+    }
+  });
+
+  // ----------------------------
+  // Manual generation -> /table/generate
+  // ----------------------------
+  generateBtn.addEventListener('click', async () => {
+    const rows = parseInt(document.getElementById('rowsInput').value);
+    const cols = parseInt(document.getElementById('colsInput').value);
+
+    if (rows <= 0 || cols <= 0) return alert('Please enter valid numbers for rows and columns');
+
+    try {
+      loading.style.display = 'block';
+      resultCard.style.display = 'none';
+      tableInfo.style.display = 'none';
+
+      const response = await fetch('/table/generate', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ rows, cols })
+      });
+      const data = await response.json();
+
+      if (data.success) {
+        currentLatex = data.latex;
+        latexOutputEl.textContent = data.latex;
+        renderedContent.innerHTML = `$$${data.latex}$$`;
+        if (typeof MathJax !== 'undefined') MathJax.typesetPromise([renderedContent]);
+
+        imagePreviewContainer.style.display = 'none';
+        resultCard.style.display = 'block';
+      } else {
+        alert('Error: ' + data.error);
+      }
+    } catch (err) {
+      console.error('Generation error:', err);
+      alert('An error occurred during generation. Please try again.');
+    } finally {
+      loading.style.display = 'none';
+    }
+  });
+
+  // ----------------------------
+  // Camera functions
+  // ----------------------------
+  async function startCamera() {
+    try {
+      if (cameraStream && cameraStream.active) return; // already running
+      cameraStream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } });
+      video.srcObject = cameraStream;
+      video.play();
+      convertCameraBtn.disabled = true; // no capture yet
+    } catch (err) {
+      console.error('Camera error:', err);
+      alert('Camera access denied or not available.');
+      // fallback: switch to upload mode
+      setActiveMode('upload');
+    }
+  }
+
+  function stopCamera() {
+    if (cameraStream) {
+      cameraStream.getTracks().forEach(track => track.stop());
+      cameraStream = null;
+    }
+    // clear preview
+    capturedImagePreview.innerHTML = '';
+    capturedImageBase64 = null;
+    convertCameraBtn.disabled = true;
+  }
+
+  // Capture snapshot from video
+  captureBtn.addEventListener('click', () => {
+    if (!video || !video.videoWidth) return alert('Camera not ready. Try again.');
+    cameraCanvas.width = video.videoWidth;
+    cameraCanvas.height = video.videoHeight;
+    const ctx = cameraCanvas.getContext('2d');
+    ctx.drawImage(video, 0, 0, cameraCanvas.width, cameraCanvas.height);
+    capturedImageBase64 = cameraCanvas.toDataURL('image/png');
+    capturedImagePreview.innerHTML = `<img src="${capturedImageBase64}" class="img-fluid rounded shadow" style="max-width:400px;">`;
+    convertCameraBtn.disabled = false;
+  });
+
+  // Send captured image to backend
+  convertCameraBtn.addEventListener('click', async () => {
+    if (!capturedImageBase64) return alert('Please capture an image first.');
+    try {
+      loading.style.display = 'block';
+      resultCard.style.display = 'none';
+      tableInfo.style.display = 'none';
+
+      const response = await fetch('/table/process', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ image: capturedImageBase64 })
+      });
+      const data = await response.json();
+      handleProcessResult(data);
+    } catch (err) {
+      console.error('Conversion error:', err);
+      alert('An error occurred during conversion. Please try again.');
+    } finally {
+      loading.style.display = 'none';
+    }
+  });
+
+  // ----------------------------
+  // Common: handle /table/process result
+  // ----------------------------
+  function handleProcessResult(data) {
+    if (!data) return alert('No response from server.');
+
+    if (data.success) {
+      currentLatex = data.latex || '';
+      latexOutputEl.textContent = currentLatex;
+
+      // show image preview if server returned an image path
+      if (data.image_path) {
+        imagePreview.src = '/' + data.image_path;
+        imagePreviewContainer.style.display = 'block';
+      } else {
+        imagePreviewContainer.style.display = 'none';
+      }
+
+      // show rendered content (MathJax)
+      renderedContent.innerHTML = `$$${currentLatex}$$`;
+      if (typeof MathJax !== 'undefined') MathJax.typesetPromise([renderedContent]);
+
+      // detected rows/cols
+      detectedRowCountEl.textContent = data.rows ?? '-';
+      detectedColCountEl.textContent = data.cols ?? '-';
+      tableInfo.style.display = 'block';
+
+      resultCard.style.display = 'block';
+
+      // stop camera (optional) when result is shown
+      // stopCamera();
+    } else {
+      alert('Error: ' + (data.error || 'Unknown error'));
+    }
+  }
+
+  // ----------------------------
+  // Copy & New conversion
+  // ----------------------------
+  document.getElementById('copyBtn').addEventListener('click', () => {
+    const latexText = latexOutputEl.textContent;
+    navigator.clipboard.writeText(latexText).then(() => {
+      // small visual feedback
+      alert('LaTeX code copied to clipboard!');
+    }).catch(err => {
+      console.error('Failed to copy:', err);
+      alert('Failed to copy LaTeX code. Please try again.');
+    });
+  });
+
+  document.getElementById('newConversion').addEventListener('click', () => {
+    resultCard.style.display = 'none';
+    tableInfo.style.display = 'none';
+    uploadForm.reset();
+    imagePreviewContainer.style.display = 'none';
+    // if camera was open, stop it
+    stopCamera();
+  });
+
+  // ----------------------------
+  // Ensure camera stops when leaving page (cleanup)
+  // ----------------------------
+  window.addEventListener('beforeunload', stopCamera);
+</script>
+
+{% endblock %}
+
diff --git a/utils/.DS_Store b/utils/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..a292f56e49e07b1b584c4550f1aadb55b0d12f63
Binary files /dev/null and b/utils/.DS_Store differ
diff --git a/utils/__pycache__/math_solver.cpython-311.pyc b/utils/__pycache__/math_solver.cpython-311.pyc
new file mode 100644
index 0000000000000000000000000000000000000000..b70d2cacad0b7ad20c27b40680d7a5b9f1e9bb6d
Binary files /dev/null and b/utils/__pycache__/math_solver.cpython-311.pyc differ
diff --git a/utils/__pycache__/math_solver.cpython-313.pyc b/utils/__pycache__/math_solver.cpython-313.pyc
new file mode 100644
index 0000000000000000000000000000000000000000..b998a635ec963d02bf47ec78dc07d760bb0f6fd5
Binary files /dev/null and b/utils/__pycache__/math_solver.cpython-313.pyc differ
diff --git a/utils/math_solver.py b/utils/math_solver.py
new file mode 100644
index 0000000000000000000000000000000000000000..ceefef5cca4732faab03b24ebd10eb5c9b5c952c
--- /dev/null
+++ b/utils/math_solver.py
@@ -0,0 +1,160 @@
+import re
+import numpy as np
+import sympy as sp
+from sympy import symbols, Eq, solve, simplify, latex
+import math
+
+def preprocess_latex(latex_str):
+    """Preprocess LaTeX string to make it compatible with SymPy"""
+    # Remove common LaTeX formatting
+    latex_str = latex_str.replace('\\left', '').replace('\\right', '')
+    latex_str = latex_str.replace('\\ ', '')
+    
+    # Handle fractions
+    latex_str = re.sub(r'\\frac\{([^}]+)\}\{([^}]+)\}', r'(\1)/(\2)', latex_str)
+    
+    # Handle square roots
+    latex_str = re.sub(r'\\sqrt\{([^}]+)\}', r'sqrt(\1)', latex_str)
+    
+    # Handle exponents
+    latex_str = re.sub(r'\^(\{[^}]+\}|\d+|[a-zA-Z])', r'**\1', latex_str)
+    latex_str = re.sub(r'\*\*(\{([^}]+)\})', r'**(\2)', latex_str)
+    
+    # Handle subscripts (for simple cases)
+    latex_str = re.sub(r'_\{([^}]+)\}', r'_\1', latex_str)
+    
+    # Handle Greek letters
+    greek_letters = {
+        '\\alpha': 'alpha', '\\beta': 'beta', '\\gamma': 'gamma', '\\delta': 'delta',
+        '\\epsilon': 'epsilon', '\\zeta': 'zeta', '\\eta': 'eta', '\\theta': 'theta',
+        '\\iota': 'iota', '\\kappa': 'kappa', '\\lambda': 'lambda', '\\mu': 'mu',
+        '\\nu': 'nu', '\\xi': 'xi', '\\pi': 'pi', '\\rho': 'rho', '\\sigma': 'sigma',
+        '\\tau': 'tau', '\\upsilon': 'upsilon', '\\phi': 'phi', '\\chi': 'chi',
+        '\\psi': 'psi', '\\omega': 'omega'
+    }
+    
+    for latex_letter, symbol in greek_letters.items():
+        latex_str = latex_str.replace(latex_letter, symbol)
+    
+    return latex_str
+
+
+def solve_equation(latex_equation):
+    """Solve a LaTeX equation using SymPy"""
+    try:
+        # Preprocess the LaTeX equation
+        processed_eq = preprocess_latex(latex_equation)
+        
+        # Handle equation solving (contains =)
+        if '=' in processed_eq:
+            # Split equation at equals sign
+            left, right = processed_eq.split('=', 1)
+            
+            # Define symbols (assume x is the variable if not specified)
+            x = symbols('x')
+            
+            # Try to parse and solve the equation
+            try:
+                left_expr = sp.sympify(left)
+                right_expr = sp.sympify(right)
+                equation = Eq(left_expr, right_expr)
+                solutions = solve(equation, x)
+                
+                # Format solutions
+                solution_str = []
+                for sol in solutions:
+                    solution_str.append(str(sol))
+                
+                return {
+                    'type': 'equation',
+                    'solutions': solution_str,
+                    'latex_solutions': [latex(sol) for sol in solutions]
+                }
+            except Exception as e:
+                # If equation solving fails, try simplification
+                try:
+                    left_expr = sp.sympify(left)
+                    right_expr = sp.sympify(right)
+                    diff = simplify(left_expr - right_expr)
+                    return {
+                        'type': 'simplification',
+                        'result': str(diff),
+                        'latex_result': latex(diff)
+                    }
+                except:
+                    return {
+                        'type': 'error',
+                        'message': f'Could not solve equation: {str(e)}'
+                    }
+        
+        # Handle expression evaluation
+        else:
+            try:
+                expr = sp.sympify(processed_eq)
+                result = simplify(expr)
+                return {
+                    'type': 'expression',
+                    'result': str(result),
+                    'latex_result': latex(result)
+                }
+            except Exception as e:
+                return {
+                    'type': 'error',
+                    'message': f'Could not evaluate expression: {str(e)}'
+                }
+                
+    except Exception as e:
+        return {
+            'type': 'error',
+            'message': f'Error processing equation: {str(e)}'
+        }
+
+
+def solve_system(equations):
+    """Solve a system of equations"""
+    try:
+        # Define symbols
+        x, y, z = symbols('x y z')
+        symbols_list = [x, y, z]
+        
+        # Parse equations
+        parsed_equations = []
+        for eq_str in equations:
+            processed_eq = preprocess_latex(eq_str)
+            if '=' in processed_eq:
+                left, right = processed_eq.split('=', 1)
+                left_expr = sp.sympify(left)
+                right_expr = sp.sympify(right)
+                parsed_equations.append(Eq(left_expr, right_expr))
+        
+        # Solve system
+        solutions = solve(parsed_equations, symbols_list[:len(parsed_equations)])
+        
+        return {
+            'type': 'system',
+            'solutions': solutions,
+            'latex_solutions': latex(solutions)
+        }
+    except Exception as e:
+        return {
+            'type': 'error',
+            'message': f'Could not solve system: {str(e)}'
+        }
+
+
+def calculate_numerical(expression):
+    """Calculate numerical value of an expression"""
+    try:
+        processed_expr = preprocess_latex(expression)
+        expr = sp.sympify(processed_expr)
+        numerical_value = float(expr.evalf())
+        return {
+            'type': 'numerical',
+            'result': numerical_value,
+            'latex_result': latex(expr)
+        }
+    except Exception as e:
+        return {
+            'type': 'error',
+            'message': f'Could not calculate numerical value: {str(e)}'
+        }
\ No newline at end of file