Upload 8 files

Dockerfile

@@ -0,0 +1,27 @@
+# Usa una imagen base oficial de Python
+FROM python:3.10
+
+# Agrega un usuario no root
+RUN useradd -m -u 1000 app
+
+# Establece el directorio de trabajo dentro del contenedor
+WORKDIR /home/app
+RUN pip install --upgrade pip
+
+# Instala Flask en el entorno del contenedor
+RUN pip install -r requirements.txt
+
+# Copia solo los archivos necesarios para evitar copiar todo el directorio de trabajo
+COPY --chown=app:app . .
+RUN mkdir /home/app/templates/
+COPY --chown=app:app community.html /home/app/templates/community.html
+COPY --chown=app:app index.html /home/app/templates/index.html
+COPY --chown=app:app result.html /home/app/templates/result.html
+COPY --chown=app:app viewer.html /home/app/templates/viewer.html
+
+
+# Expone el puerto en el que Flask se ejecutará dentro del contenedor
+EXPOSE 7860
+
+# Comando para ejecutar la aplicación Flask
+CMD ["python", "app.py"]

app.py

@@ -0,0 +1,199 @@
+from flask import Flask, render_template, request, redirect, url_for, flash, send_file
+from werkzeug.utils import secure_filename
+import cv2
+import numpy as np
+import os
+from PIL import Image
+import uuid
+import json
+
+app = Flask(__name__)
+app.secret_key = 'clave_secreta_para_flash'
+
+# Configuración de carpetas
+UPLOAD_FOLDER = 'static/uploads'
+COMMUNITY_FOLDER = 'static/community'
+THUMBNAILS_FOLDER = 'static/thumbnails'
+ALLOWED_EXTENSIONS = {'png', 'jpg', 'jpeg'}
+
+# Crear directorios si no existen
+for folder in [UPLOAD_FOLDER, COMMUNITY_FOLDER, THUMBNAILS_FOLDER]:
+    os.makedirs(folder, exist_ok=True)
+
+app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
+
+def allowed_file(filename):
+    return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS
+
+def create_thumbnail(image_path, thumbnail_path, size=(1280, 720)):
+    """Crear miniatura comprimida para vista rápida"""
+    try:
+        with Image.open(image_path) as img:
+            # Calcular dimensiones manteniendo aspecto
+            img.thumbnail(size, Image.Resampling.LANCZOS)
+            # Guardar con compresión alta
+            img.save(thumbnail_path, 'JPEG', quality=70, optimize=True)
+            return True
+    except Exception as e:
+        print(f"Error creando thumbnail: {e}")
+        return False
+
+def process_panorama(image_files):
+    imgs = []
+    for file in image_files:
+        img = cv2.imdecode(np.fromfile(file, dtype=np.uint8), cv2.IMREAD_COLOR)
+        if img is not None:
+            imgs.append(img)
+
+    if len(imgs) < 2:
+        return None, "Se necesitan al menos 2 imágenes válidas."
+
+    try:
+        stitcher = cv2.Stitcher_create(mode=cv2.Stitcher_PANORAMA)
+        status, pano = stitcher.stitch(imgs)
+
+        if status != cv2.Stitcher_OK:
+            return None, "No se pudo crear el panorama. Asegúrate de que las imágenes tengan suficiente solapamiento."
+
+        # Recortar bordes negros
+        pano_rgb = cv2.cvtColor(pano, cv2.COLOR_BGR2RGB)
+        mask = np.any(pano_rgb != [0, 0, 0], axis=2)
+        coords = np.column_stack(np.where(mask))
+        
+        if coords.size > 0:
+            y_min, x_min = coords.min(axis=0)
+            y_max, x_max = coords.max(axis=0)
+            if y_min <= y_max and x_min <= x_max:
+                cropped = pano_rgb[y_min:y_max+1, x_min:x_max+1]
+                return Image.fromarray(cropped), None
+
+        return Image.fromarray(pano_rgb), None
+
+    except Exception as e:
+        return None, f"Error al procesar las imágenes: {str(e)}"
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/community')
+def community():
+    """Página de comunidad con vistas tipo YouTube"""
+    community_images = []
+    for filename in os.listdir(COMMUNITY_FOLDER):
+        if filename.endswith(('.jpg', '.jpeg', '.png')):
+            # Crear thumbnail si no existe
+            thumbnail_name = f"thumb_{filename}"
+            thumbnail_path = os.path.join(THUMBNAILS_FOLDER, thumbnail_name)
+            if not os.path.exists(thumbnail_path):
+                create_thumbnail(
+                    os.path.join(COMMUNITY_FOLDER, filename),
+                    thumbnail_path
+                )
+            
+            community_images.append({
+                'filename': filename,
+                'thumbnail': f'thumbnails/{thumbnail_name}',
+                'full_image': f'community/{filename}'
+            })
+    
+    return render_template('community.html', images=community_images)
+
+@app.route('/viewer/<filename>')
+def panorama_viewer(filename):
+    """Visualizador de panorama cilíndrico"""
+    image_path = f'community/{filename}'
+    return render_template('viewer.html', image_path=image_path, filename=filename)
+
+@app.route('/upload', methods=['POST'])
+def upload_files():
+    if 'files[]' not in request.files:
+        flash('No se seleccionaron archivos')
+        return redirect(url_for('index'))
+
+    files = request.files.getlist('files[]')
+    if not files or files[0].filename == '':
+        flash('No se seleccionaron archivos')
+        return redirect(url_for('index'))
+
+    # Verificar y guardar archivos temporalmente
+    temp_paths = []
+    for file in files:
+        if file and allowed_file(file.filename):
+            filename = secure_filename(file.filename)
+            filepath = os.path.join(app.config['UPLOAD_FOLDER'], filename)
+            file.save(filepath)
+            temp_paths.append(filepath)
+
+    if len(temp_paths) < 2:
+        flash('Se necesitan al menos 2 imágenes')
+        return redirect(url_for('index'))
+
+    # Procesar panorama
+    result_image, error = process_panorama(temp_paths)
+
+    # Limpiar archivos temporales
+    for path in temp_paths:
+        try:
+            os.remove(path)
+        except:
+            pass
+
+    if error:
+        flash(error)
+        return redirect(url_for('index'))
+
+    # Guardar resultado
+    result_filename = f'result_{uuid.uuid4().hex[:8]}.jpg'
+    result_path = os.path.join(app.config['UPLOAD_FOLDER'], result_filename)
+    result_image.save(result_path, 'JPEG', quality=95)
+
+    return render_template('result.html', result_image=f'uploads/{result_filename}', filename=result_filename)
+
+@app.route('/share', methods=['POST'])
+def share_panorama():
+    result_path = request.form.get('result_path')
+    if not result_path:
+        flash('No hay imagen para compartir')
+        return redirect(url_for('index'))
+
+    try:
+        # Generar nombre único para la imagen compartida
+        original_filename = os.path.basename(result_path)
+        shared_filename = f'shared_{uuid.uuid4().hex[:8]}.jpg'
+        original_path = os.path.join('static', result_path)
+        shared_path = os.path.join(COMMUNITY_FOLDER, shared_filename)
+
+        # Copiar imagen a la carpeta de comunidad
+        Image.open(original_path).save(shared_path, 'JPEG', quality=95)
+        
+        # Crear thumbnail para la nueva imagen
+        thumbnail_name = f"thumb_{shared_filename}"
+        thumbnail_path = os.path.join(THUMBNAILS_FOLDER, thumbnail_name)
+        create_thumbnail(shared_path, thumbnail_path)
+
+        # Eliminar imagen temporal
+        os.remove(original_path)
+
+        flash('¡Imagen compartida exitosamente!')
+    except Exception as e:
+        flash(f'Error al compartir la imagen: {str(e)}')
+
+    return redirect(url_for('community'))
+
+@app.route('/download/<filename>')
+def download_file(filename):
+    """Descargar archivo de resultado"""
+    try:
+        file_path = os.path.join(app.config['UPLOAD_FOLDER'], filename)
+        if os.path.exists(file_path):
+            return send_file(file_path, as_attachment=True, download_name=f'panorama_{filename}')
+        else:
+            flash('Archivo no encontrado')
+            return redirect(url_for('index'))
+    except Exception as e:
+        flash(f'Error al descargar: {str(e)}')
+        return redirect(url_for('index'))
+
+if __name__ == '__main__':
+    app.run(debug=True)

community.html

@@ -0,0 +1,146 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Comunidad de Panoramas</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
+    <style>
+        .video-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+            gap: 20px;
+            margin-top: 20px;
+        }
+        .video-card {
+            background: white;
+            border-radius: 12px;
+            overflow: hidden;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+            transition: transform 0.2s, box-shadow 0.2s;
+            cursor: pointer;
+        }
+        .video-card:hover {
+            transform: translateY(-4px);
+            box-shadow: 0 4px 16px rgba(0,0,0,0.15);
+        }
+        .thumbnail-container {
+            position: relative;
+            width: 100%;
+            height: 180px;
+            overflow: hidden;
+        }
+        .thumbnail {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            transition: transform 0.3s;
+        }
+        .video-card:hover .thumbnail {
+            transform: scale(1.05);
+        }
+        .play-overlay {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            background: rgba(0,0,0,0.7);
+            color: white;
+            border-radius: 50%;
+            width: 60px;
+            height: 60px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 24px;
+            opacity: 0;
+            transition: opacity 0.3s;
+        }
+        .video-card:hover .play-overlay {
+            opacity: 1;
+        }
+        .video-info {
+            padding: 15px;
+        }
+        .video-title {
+            font-weight: 600;
+            margin-bottom: 8px;
+            color: #333;
+        }
+        .video-meta {
+            color: #666;
+            font-size: 14px;
+        }
+        .empty-state {
+            text-align: center;
+            padding: 60px 20px;
+            color: #666;
+        }
+        .empty-state i {
+            font-size: 64px;
+            margin-bottom: 20px;
+            color: #ddd;
+        }
+    </style>
+</head>
+<body class="bg-light">
+    <div class="container py-4">
+        <div class="d-flex justify-content-between align-items-center mb-4">
+            <h1 class="mb-0">Comunidad de Panoramas</h1>
+            <a href="{{ url_for('index') }}" class="btn btn-primary">
+                <i class="bi bi-plus-circle"></i> Crear Panorama
+            </a>
+        </div>
+
+        {% with messages = get_flashed_messages() %}
+            {% if messages %}
+                {% for message in messages %}
+                    <div class="alert alert-success alert-dismissible fade show" role="alert">
+                        {{ message }}
+                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+                    </div>
+                {% endfor %}
+            {% endif %}
+        {% endwith %}
+
+        {% if images %}
+            <div class="video-grid">
+                {% for image in images %}
+                    <div class="video-card" onclick="openPanorama('{{ image.filename }}')">                        <div class="thumbnail-container">
+                            <img src="{{ url_for('static', filename=image.thumbnail) }}" 
+                                 class="thumbnail" 
+                                 alt="Panorama thumbnail">
+                            <div class="play-overlay">
+                                <i class="bi bi-play-fill"></i>
+                            </div>
+                        </div>
+                        <div class="video-info">
+                            <div class="video-title">Panorama {{ loop.index }}</div>
+                            <div class="video-meta">
+                                <i class="bi bi-eye"></i> Vista panorámica
+                            </div>
+                        </div>
+                    </div>
+                {% endfor %}
+            </div>
+        {% else %}
+            <div class="empty-state">
+                <i class="bi bi-images"></i>
+                <h3>No hay panoramas aún</h3>
+                <p>Sé el primero en compartir un panorama con la comunidad</p>
+                <a href="{{ url_for('index') }}" class="btn btn-primary">
+                    <i class="bi bi-plus-circle"></i> Crear mi primer panorama
+                </a>
+            </div>
+        {% endif %}
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    <script>
+        function openPanorama(filename) {
+            window.open(`{{ url_for('panorama_viewer', filename='') }}${filename}`, '_blank');
+        }
+    </script>
+</body>
+</html>

index.html

@@ -0,0 +1,156 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Generador de Panoramas</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <style>
+        .preview-container {
+            max-height: 300px;
+            overflow-y: auto;
+        }
+        .community-image {
+            max-width: 100%;
+            height: auto;
+            margin-bottom: 15px;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }
+        .upload-area {
+            border: 2px dashed #ccc;
+            border-radius: 8px;
+            padding: 20px;
+            text-align: center;
+            background-color: #f8f9fa;
+            cursor: pointer;
+        }
+        .upload-area:hover {
+            border-color: #0d6efd;
+            background-color: #f1f3f5;
+        }
+        #fileList {
+            margin-top: 10px;
+            padding: 0;
+            list-style: none;
+        }
+    </style>
+</head>
+<body class="bg-light">
+    <div class="container py-5">
+        <div class="d-flex justify-content-between align-items-center mb-4">
+            <h1 class="mb-0">Generador de Panoramas</h1>
+            <a href="{{ url_for('community') }}" class="btn btn-outline-primary">
+                <i class="bi bi-people"></i> Ver Comunidad
+            </a>
+        </div>
+
+        {% with messages = get_flashed_messages() %}
+            {% if messages %}
+                {% for message in messages %}
+                    <div class="alert alert-info alert-dismissible fade show" role="alert">
+                        {{ message }}
+                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+                    </div>
+                {% endfor %}
+            {% endif %}
+        {% endwith %}
+
+        <div class="row">
+            <div class="col-md-8 mb-4">
+                <div class="card">
+                    <div class="card-body">
+                        <h5 class="card-title">Crear Nuevo Panorama</h5>
+                        <form action="{{ url_for('upload_files') }}" method="post" enctype="multipart/form-data">
+                            <div class="upload-area mb-3" id="dropZone" onclick="document.getElementById('fileInput').click();">
+                                <i class="bi bi-cloud-upload"></i>
+                                <p class="mb-0">Haz clic aquí o arrastra tus imágenes</p>
+                                <small class="text-muted">Selecciona al menos 2 imágenes</small>
+                                <input type="file" id="fileInput" name="files[]" multiple accept=".jpg,.jpeg,.png" style="display: none;" onchange="updateFileList()">
+                            </div>
+                            <ul id="fileList" class="list-group"></ul>
+                            <button type="submit" class="btn btn-primary mt-3" id="submitBtn" disabled>Crear Panorama</button>
+                        </form>
+                    </div>
+                </div>
+            </div>
+
+            <div class="col-md-4">
+                <div class="card">
+                    <div class="card-body">
+                        <h5 class="card-title">Instrucciones</h5>
+                        <div class="text-muted">
+                            <p><strong>1.</strong> Selecciona al menos 2 imágenes que se solapen</p>
+                            <p><strong>2.</strong> Haz clic en "Crear Panorama"</p>
+                            <p><strong>3.</strong> Espera el procesamiento</p>
+                            <p><strong>4.</strong> Descarga o comparte tu resultado</p>
+                            <hr>
+                            <p class="text-center">
+                                <a href="{{ url_for('community') }}" class="btn btn-sm btn-outline-primary">
+                                    Ver panoramas de la comunidad
+                                </a>
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    <script>
+        function updateFileList() {
+            const input = document.getElementById('fileInput');
+            const fileList = document.getElementById('fileList');
+            const submitBtn = document.getElementById('submitBtn');
+            
+            fileList.innerHTML = '';
+            submitBtn.disabled = input.files.length < 2;
+
+            Array.from(input.files).forEach(file => {
+                const li = document.createElement('li');
+                li.className = 'list-group-item d-flex justify-content-between align-items-center';
+                li.textContent = file.name;
+                fileList.appendChild(li);
+            });
+        }
+
+        // Drag and drop functionality
+        const dropZone = document.getElementById('dropZone');
+
+        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+            dropZone.addEventListener(eventName, preventDefaults, false);
+        });
+
+        function preventDefaults(e) {
+            e.preventDefault();
+            e.stopPropagation();
+        }
+
+        ['dragenter', 'dragover'].forEach(eventName => {
+            dropZone.addEventListener(eventName, highlight, false);
+        });
+
+        ['dragleave', 'drop'].forEach(eventName => {
+            dropZone.addEventListener(eventName, unhighlight, false);
+        });
+
+        function highlight(e) {
+            dropZone.classList.add('bg-light');
+        }
+
+        function unhighlight(e) {
+            dropZone.classList.remove('bg-light');
+        }
+
+        dropZone.addEventListener('drop', handleDrop, false);
+
+        function handleDrop(e) {
+            const dt = e.dataTransfer;
+            const files = dt.files;
+            document.getElementById('fileInput').files = files;
+            updateFileList();
+        }
+    </script>
+</body>
+</html>

main.py

@@ -0,0 +1,348 @@
+import tkinter as tk
+from tkinter import ttk, filedialog, messagebox
+from PIL import Image, ImageTk
+import cv2
+import numpy as np
+import os
+import threading
+
+# Desactivar OpenCL en OpenCV para evitar posibles errores
+cv2.ocl.setUseOpenCL(False)
+
+class PanoramaApp(tk.Tk):
+    def __init__(self):
+        super().__init__()
+        self.title("Generador de Panorama")
+        self.geometry("950x650") # Aumentar un poco el tamaño inicial
+        self.minsize(700, 500) # Aumentar el tamaño mínimo
+
+        # Configurar grid para que todos los elementos crezcan con la ventana
+        self.grid_columnconfigure(0, weight=1) # Columna para el marco principal
+        self.grid_rowconfigure(0, weight=0)   # barra superior
+        self.grid_rowconfigure(1, weight=1)   # área de imagen
+
+        # --------- Barra superior con controles ---------
+        toolbar = ttk.Frame(self)
+        toolbar.grid(row=0, column=0, sticky="nsew", padx=5, pady=5)
+        # Configurar columnas de la toolbar
+        toolbar.grid_columnconfigure(0, weight=1) # Botón seleccionar
+        toolbar.grid_columnconfigure(1, weight=1) # Contador imágenes
+        toolbar.grid_columnconfigure(2, weight=1) # Label Modo
+        toolbar.grid_columnconfigure(3, weight=1) # Combobox Modo
+        toolbar.grid_columnconfigure(4, weight=1) # Botón Crear
+
+        self.btn_select = ttk.Button(toolbar, text="Seleccionar Imágenes", command=self.seleccionar_imagenes)
+        self.btn_select.grid(row=0, column=0, padx=5, pady=5, sticky="w")
+
+        self.lbl_count = ttk.Label(toolbar, text="0 imágenes seleccionadas")
+        self.lbl_count.grid(row=0, column=1, padx=5, pady=5, sticky="w")
+
+        # --- Nuevo: Selector de Modo de Stitching ---
+        self.lbl_mode = ttk.Label(toolbar, text="Modo de Unión:")
+        self.lbl_mode.grid(row=0, column=2, padx=(20,2), pady=5, sticky="e")
+
+        self.stitching_mode_var = tk.StringVar(self)
+        # Opciones disponibles y valor por defecto
+        self.stitching_modes = {
+            "Panorama (giro fijo)": "panorama",
+            "Escaneo (ángulos varios)": "scans"
+        }
+        # Obtener las claves para mostrar en el combobox
+        mode_display_names = list(self.stitching_modes.keys())
+        self.stitching_mode_var.set(mode_display_names[0]) # Por defecto "Panorama (giro fijo)"
+
+        self.mode_combobox = ttk.Combobox(toolbar,
+                                          textvariable=self.stitching_mode_var,
+                                          values=mode_display_names,
+                                          state="readonly", # No permitir escribir
+                                          width=20)
+        self.mode_combobox.grid(row=0, column=3, padx=5, pady=5, sticky="w")
+        # ---------------------------------------------
+
+        self.btn_stitch = ttk.Button(toolbar, text="Crear Panorama", command=self.crear_panorama, state="disabled")
+        self.btn_stitch.grid(row=0, column=4, padx=5, pady=5, sticky="e")
+
+
+        # --------- Área para mostrar el resultado ---------
+        display_frame = ttk.Frame(self, relief="sunken")
+        display_frame.grid(row=1, column=0, sticky="nsew", padx=5, pady=5)
+        display_frame.grid_rowconfigure(0, weight=1)
+        display_frame.grid_columnconfigure(0, weight=1)
+
+        self.canvas = tk.Canvas(display_frame, bg="#333333")
+        self.canvas.grid(row=0, column=0, sticky="nsew")
+
+        # --------- Menú contextual para el canvas ---------
+        self.context_menu = tk.Menu(self.canvas, tearoff=0)
+        self.context_menu.add_command(label="Guardar Panorama...", command=self.guardar_panorama)
+
+        # Bind events
+        self.canvas.bind("<Configure>", self._on_canvas_resize)
+        self.canvas.bind("<Button-3>", self._show_context_menu) # Clic derecho
+
+        # Variables internas
+        self.rutas_imagenes = []
+        self.panorama_tk = None
+        self.final_panorama_img_np = None
+        self.stitch_thread = None
+
+    def seleccionar_imagenes(self):
+        # Si hay un proceso de stitching corriendo, no permitir seleccionar nuevas imágenes
+        if self.stitch_thread and self.stitch_thread.is_alive():
+            messagebox.showwarning("Proceso en curso", "Por favor, espera a que termine el proceso actual.")
+            return
+
+        rutas = filedialog.askopenfilenames(
+            title="Selecciona las imágenes",
+            filetypes=[("Imágenes JPEG/PNG", "*.jpg *.jpeg *.png"), ("Todos los archivos", "*.*")]
+        )
+        if not rutas:
+            return
+
+        self.rutas_imagenes = list(rutas)
+        count = len(self.rutas_imagenes)
+        self.lbl_count.config(text=f"{count} imagen(es) seleccionada(s)")
+
+        # Limpiar el canvas y variables de imagen anterior
+        self.canvas.delete("all")
+        self.panorama_tk = None
+        self.final_panorama_img_np = None
+
+        # Habilitar el botón de crear panorama solo si hay al menos 2 imágenes
+        if count >= 2:
+            self.btn_stitch.config(state="normal")
+        else:
+            self.btn_stitch.config(state="disabled")
+
+    def crear_panorama(self):
+        if len(self.rutas_imagenes) < 2:
+            messagebox.showwarning("Atención", "Selecciona al menos 2 imágenes para crear un panorama.")
+            return
+
+        # Deshabilitar botones y mostrar estado
+        self.btn_stitch.config(text="Procesando...", state="disabled")
+        self.btn_select.config(state="disabled")
+        self.mode_combobox.config(state="disabled") # Deshabilitar selector de modo
+        self.update_idletasks() # Forzar actualización de la GUI
+
+        # Limpiar el canvas y variables de imagen anterior antes de empezar
+        self.canvas.delete("all")
+        self.panorama_tk = None
+        self.final_panorama_img_np = None
+
+        # Obtener el modo de stitching seleccionado
+        selected_mode_display = self.stitching_mode_var.get()
+        # Mapear el nombre mostrado al valor interno de OpenCV
+        stitching_mode_internal = self.stitching_modes.get(selected_mode_display, "panorama") # Por defecto "panorama"
+
+        # Iniciar el proceso de stitching en un hilo separado
+        self.stitch_thread = threading.Thread(
+            target=self._process_stitching_in_thread,
+            args=(self.rutas_imagenes, stitching_mode_internal)
+        )
+        self.stitch_thread.start()
+
+    def _process_stitching_in_thread(self, rutas_imagenes, stitching_mode):
+        """
+        Método que contiene la lógica pesada de stitching, ejecutada en un hilo.
+        stitching_mode: "panorama" o "scans"
+        """
+        imgs = []
+        for ruta in rutas_imagenes:
+            try:
+                img = cv2.imdecode(np.fromfile(ruta, dtype=np.uint8), cv2.IMREAD_COLOR)
+                if img is None:
+                    self.after(0, self._on_stitching_complete, cv2.Stitcher_ERR_NEED_MORE_IMGS, None, None, f"No se pudo leer la imagen: {os.path.basename(ruta)}. Asegúrate de que es un archivo de imagen válido y no está corrupto.")
+                    return
+                imgs.append(img)
+            except Exception as e:
+                self.after(0, self._on_stitching_complete, cv2.Stitcher_ERR_OTHER, None, None, f"Error al cargar {os.path.basename(ruta)}: {e}")
+                return
+
+        if len(imgs) < 2:
+            self.after(0, self._on_stitching_complete, cv2.Stitcher_ERR_NEED_MORE_IMGS, None, None, "Se necesitan al menos 2 imágenes válidas.")
+            return
+
+        # Determinar el modo de Stitcher basado en la selección del usuario
+        stitcher_mode_cv = cv2.Stitcher_PANORAMA # Por defecto
+        if stitching_mode == "scans":
+            try:
+                # Comprobar si cv2.Stitcher_SCANS existe
+                stitcher_mode_cv = cv2.Stitcher_SCANS
+            except AttributeError:
+                self.after(0, self._on_stitching_complete, cv2.Stitcher_ERR_OTHER, None, None, "Tu versión de OpenCV no soporta el modo 'SCANS'. Utilizando 'PANORAMA'.")
+                stitcher_mode_cv = cv2.Stitcher_PANORAMA # Vuelve a Panorama si no existe SCANS
+
+        # Crear el objeto Stitcher
+        try:
+            stitcher = cv2.Stitcher_create(mode=stitcher_mode_cv)
+        except AttributeError:
+            # Para versiones antiguas de OpenCV (<4.0) o si create(mode) no existe
+            try:
+                stitcher = cv2.createStitcher(False) # False indica no usar calibración de cámara
+                self.after(0, self._on_stitching_complete, cv2.Stitcher_ERR_OTHER, None, None, "Tu versión de OpenCV es antigua. Usando createStitcher() sin modo específico.")
+            except AttributeError:
+                self.after(0, self._on_stitching_complete, cv2.Stitcher_ERR_OTHER, None, None, "Tu versión de OpenCV no soporta Stitcher o está mal instalada.")
+                return
+
+        status, pano = stitcher.stitch(imgs)
+
+        if status != cv2.Stitcher_OK:
+            # Llamar a la función de completado con error en el hilo principal
+            self.after(0, self._on_stitching_complete, status, None, None, None)
+            return
+
+        # ======== Bloque para recortar los bordes negros ========
+        # Convertir de BGR (OpenCV) a RGB (para Pillow/visualización y procesamiento con numpy)
+        pano_rgb = cv2.cvtColor(pano, cv2.COLOR_BGR2RGB)
+
+        # Crear una máscara booleana: True donde el píxel no es (0,0,0) (negro)
+        # np.any(..., axis=2) verifica si CUALQUIER canal RGB no es 0 para ese píxel.
+        # Esto es más robusto que solo == [0,0,0] si el negro es (0,0,1) por ejemplo.
+        mask = np.any(pano_rgb != [0, 0, 0], axis=2)
+
+        # Encontrar las coordenadas mínimas y máximas de la región válida (no negra)
+        coords = np.column_stack(np.where(mask))
+        cropped = pano_rgb # Inicializar con la imagen completa por si no hay contenido válido
+
+        if coords.size > 0:
+            y_min, x_min = coords.min(axis=0)
+            y_max, x_max = coords.max(axis=0)
+            # Asegurarse de que las coordenadas son válidas
+            if y_min <= y_max and x_min <= x_max:
+                cropped = pano_rgb[y_min:y_max+1, x_min:x_max+1]
+            # else: Si las coordenadas no son válidas, `cropped` se queda como `pano_rgb`
+        # ===============================================================
+
+        # Llamar a la función de completado con el resultado en el hilo principal
+        self.after(0, self._on_stitching_complete, status, pano, cropped, None)
+
+    def _on_stitching_complete(self, status, pano, cropped, error_message=None):
+        """
+        Método llamado en el hilo principal cuando el stitching termina.
+        """
+        # Restaurar el estado de los botones y el selector de modo
+        self.btn_stitch.config(text="Crear Panorama", state="normal")
+        self.btn_select.config(state="normal")
+        self.mode_combobox.config(state="readonly") # Habilitar selector de modo
+
+        if status != cv2.Stitcher_OK:
+            msg = "No se pudo crear el panorama."
+            if error_message:
+                msg += f"\nDetalles: {error_message}"
+            else:
+                msg += f" (código de error {status})"
+
+            if status == cv2.Stitcher_ERR_NEED_MORE_IMGS:
+                msg += "\nAsegúrate de que las imágenes tienen suficiente solapamiento o características distintivas."
+            elif status == cv2.Stitcher_ERR_HOMOGRAPHY_EST_FAIL:
+                msg += "\nFallo en la estimación de la homografía. Asegúrate de que las imágenes se solapan bien y no hay distorsión excesiva, o prueba con el otro modo de unión."
+            elif status == cv2.Stitcher_ERR_CAMERA_PARAMS_ADJUST_FAIL:
+                msg += "\nFallo al ajustar parámetros de cámara."
+            elif status == cv2.Stitcher_ERR_NO_FEATURES:
+                msg += "\nNo se encontraron suficientes características distintivas en las imágenes. Prueba con imágenes más detalladas o con más solapamiento."
+
+            messagebox.showerror("Error de Panorama", msg)
+            self.final_panorama_img_np = None # Asegurar que no haya imagen inválida almacenada
+        else:
+            # Almacenar la imagen numpy recortada (en RGB) para redimensionar y guardar
+            self.final_panorama_img_np = cropped
+            self._display_panorama()
+            messagebox.showinfo("Proceso Completado", "Panorama creado exitosamente. Puedes guardarlo con clic derecho.")
+
+        self.stitch_thread = None # Liberar la referencia al hilo
+
+    def _display_panorama(self, event=None):
+        """
+        Redimensiona y muestra self.final_panorama_img_np en el canvas.
+        Llamado después de completar el stitching y en cada redimensionamiento del canvas.
+        """
+        if self.final_panorama_img_np is None:
+            self.canvas.delete("all")
+            self.panorama_tk = None
+            return
+
+        w_canvas = self.canvas.winfo_width()
+        h_canvas = self.canvas.winfo_height()
+
+        if w_canvas <= 1 or h_canvas <= 1:
+            return
+
+        pil_img = Image.fromarray(self.final_panorama_img_np)
+
+        original_w, original_h = pil_img.size
+        
+        # Calcular el nuevo tamaño manteniendo la relación de aspecto, ajustándose al canvas
+        ratio_w = w_canvas / original_w
+        ratio_h = h_canvas / original_h
+        ratio = min(ratio_w, ratio_h) # Para que quepa completamente dentro del canvas
+
+        new_w = int(original_w * ratio)
+        new_h = int(original_h * ratio)
+
+        new_w = max(1, new_w)
+        new_h = max(1, new_h)
+
+        try:
+            pil_img_resized = pil_img.resize((new_w, new_h), Image.Resampling.LANCZOS)
+        except AttributeError:
+            pil_img_resized = pil_img.resize((new_w, new_h), Image.LANCZOS)
+
+        self.panorama_tk = ImageTk.PhotoImage(pil_img_resized)
+        self.canvas.delete("all")
+
+        x = (w_canvas - new_w) // 2
+        y = (h_canvas - new_h) // 2
+
+        self.canvas.create_image(x, y, anchor="nw", image=self.panorama_tk)
+
+    def _on_canvas_resize(self, event):
+        """
+        Maneja el evento de redimensionamiento del canvas.
+        """
+        self._display_panorama(event)
+
+    def _show_context_menu(self, event):
+        """
+        Muestra el menú contextual si hay una imagen de panorama.
+        """
+        if self.final_panorama_img_np is not None:
+            try:
+                self.context_menu.post(event.x_root, event.y_root)
+            finally:
+                self.context_menu.grab_release()
+
+    def guardar_panorama(self):
+        """
+        Guarda la imagen del panorama (la versión recortada de numpy).
+        """
+        if self.final_panorama_img_np is None:
+            messagebox.showinfo("Nada para guardar", "No hay un panorama generado para guardar.")
+            return
+
+        ruta_guardado = filedialog.asksaveasfilename(
+            defaultextension=".jpg",
+            filetypes=[("JPEG", "*.jpg"), ("PNG", "*.png"), ("Todos los archivos", "*.*")],
+            title="Guardar panorama como..."
+        )
+
+        if ruta_guardado:
+            try:
+                img_to_save_bgr = cv2.cvtColor(self.final_panorama_img_np, cv2.COLOR_RGB2BGR)
+
+                ext = os.path.splitext(ruta_guardado)[1].lower()
+                if ext in [".jpg", ".jpeg"]:
+                    cv2.imwrite(ruta_guardado, img_to_save_bgr, [int(cv2.IMWRITE_JPEG_QUALITY), 95])
+                elif ext == ".png":
+                    cv2.imwrite(ruta_guardado, img_to_save_bgr)
+                else:
+                    cv2.imwrite(ruta_guardado, img_to_save_bgr)
+
+                messagebox.showinfo("Guardado Exitoso", f"Panorama guardado en:\n{ruta_guardado}")
+
+            except Exception as e:
+                messagebox.showerror("Error al Guardar", f"No se pudo guardar el archivo:\n{e}")
+
+if __name__ == "__main__":
+    app = PanoramaApp()
+    app.mainloop()

requirements.txt

@@ -0,0 +1,5 @@
+flask==2.3.3
+Werkzeug==2.3.7
+opencv-python==4.8.0.76
+numpy==1.25.2
+Pillow==10.0.0

result.html

@@ -0,0 +1,195 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Resultado del Panorama</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <style>
+        .panorama-container {
+            position: relative;
+            width: 100%;
+            max-height: 70vh;
+            overflow: hidden;
+            margin-bottom: 20px;
+            border-radius: 8px;
+            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+        }
+        .panorama-image {
+            width: 100%;
+            height: auto;
+            display: block;
+        }
+        .action-buttons {
+            margin-top: 20px;
+            display: flex;
+            gap: 10px;
+            justify-content: center;
+        }
+    </style>
+</head>
+<body class="bg-light">
+    <div class="container py-5">
+        <h1 class="text-center mb-4">¡Tu Panorama está Listo!</h1>
+
+        {% with messages = get_flashed_messages() %}
+            {% if messages %}
+                {% for message in messages %}
+                    <div class="alert alert-info alert-dismissible fade show" role="alert">
+                        {{ message }}
+                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+                    </div>
+                {% endfor %}
+            {% endif %}
+        {% endwith %}
+
+        <div class="card">
+            <div class="card-body">
+                <div class="panorama-container">
+                    <img src="{{ url_for('static', filename=result_image) }}" 
+                         class="panorama-image" 
+                         alt="Panorama generado">
+                </div>
+
+                <div class="action-buttons">
+                    <a href="{{ url_for('download_file', filename=filename) }}" 
+                       class="btn btn-primary">
+                        <i class="bi bi-download"></i> Descargar Panorama
+                    </a>
+
+                    <button type="button" class="btn btn-info" onclick="openViewer()">
+                        <i class="bi bi-eye"></i> Vista Cilíndrica
+                    </button>
+
+                    <form action="{{ url_for('share_panorama') }}" method="post" style="display: inline;">
+                        <input type="hidden" name="result_path" value="{{ result_image }}">
+                        <button type="submit" class="btn btn-success">
+                            <i class="bi bi-share"></i> Compartir con la Comunidad
+                        </button>
+                    </form>
+
+                    <a href="{{ url_for('index') }}" class="btn btn-outline-secondary">
+                        <i class="bi bi-plus-circle"></i> Crear Otro Panorama
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    <script>
+        function openViewer() {
+            // Crear modal para vista cilíndrica
+            const modal = document.createElement('div');
+            modal.className = 'modal fade';
+            modal.setAttribute('tabindex', '-1');
+            modal.setAttribute('role', 'dialog');
+            modal.setAttribute('aria-hidden', 'true');
+            modal.innerHTML = `
+                <div class="modal-dialog modal-xl">
+                    <div class="modal-content">
+                        <div class="modal-header">
+                            <h5 class="modal-title">Vista Panorámica Cilíndrica</h5>
+                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                        </div>
+                        <div class="modal-body p-0">
+                            <div id="panoramaViewer" style="height: 500px; width: 100%;"></div>
+                        </div>
+                    </div>
+                </div>
+            `;
+            document.body.appendChild(modal);
+            
+            const modalInstance = new bootstrap.Modal(modal);
+            
+            // Cargar el visor panorámico después de que el modal se muestre completamente
+            modal.addEventListener('shown.bs.modal', function() {
+                loadPanoramaViewer();
+            });
+            
+            modalInstance.show();
+            
+            modal.addEventListener('hidden.bs.modal', function () {
+                document.body.removeChild(modal);
+            });
+        }
+        
+        function loadPanoramaViewer() {
+            const viewer = document.getElementById('panoramaViewer');
+            const imageUrl = '{{ url_for("static", filename=result_image) }}';
+            
+            // Crear canvas para el visor panorámico
+            const canvas = document.createElement('canvas');
+            canvas.width = viewer.offsetWidth;
+            canvas.height = viewer.offsetHeight;
+            canvas.style.cursor = 'grab';
+            viewer.appendChild(canvas);
+            
+            const ctx = canvas.getContext('2d');
+            const img = new Image();
+            
+            let isDragging = false;
+            let lastX = 0;
+            let offsetX = 0;
+            
+            img.onload = function() {
+                drawPanorama();
+            };
+            
+            function drawPanorama() {
+                ctx.clearRect(0, 0, canvas.width, canvas.height);
+                
+                // Calcular escala para ajustar la imagen al canvas
+                const scale = canvas.height / img.height;
+                const scaledWidth = img.width * scale;
+                
+                // Dibujar la imagen con offset para simular rotación
+                ctx.drawImage(img, offsetX, 0, scaledWidth, canvas.height);
+                
+                // Si la imagen no cubre todo el ancho, repetir
+                if (scaledWidth + offsetX < canvas.width) {
+                    ctx.drawImage(img, offsetX + scaledWidth, 0, scaledWidth, canvas.height);
+                }
+                if (offsetX > 0) {
+                    ctx.drawImage(img, offsetX - scaledWidth, 0, scaledWidth, canvas.height);
+                }
+            }
+            
+            // Eventos de mouse para arrastrar
+            canvas.addEventListener('mousedown', (e) => {
+                isDragging = true;
+                lastX = e.clientX;
+                canvas.style.cursor = 'grabbing';
+            });
+            
+            canvas.addEventListener('mousemove', (e) => {
+                if (isDragging) {
+                    const deltaX = e.clientX - lastX;
+                    offsetX += deltaX;
+                    
+                    // Mantener el offset en un rango válido
+                    const scale = canvas.height / img.height;
+                    const scaledWidth = img.width * scale;
+                    if (offsetX > scaledWidth) offsetX -= scaledWidth;
+                    if (offsetX < -scaledWidth) offsetX += scaledWidth;
+                    
+                    drawPanorama();
+                    lastX = e.clientX;
+                }
+            });
+            
+            canvas.addEventListener('mouseup', () => {
+                isDragging = false;
+                canvas.style.cursor = 'grab';
+            });
+            
+            canvas.addEventListener('mouseleave', () => {
+                isDragging = false;
+                canvas.style.cursor = 'grab';
+            });
+            
+            img.src = imageUrl;
+        }
+    </script>
+</body>
+</html>

viewer.html

@@ -0,0 +1,326 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Visor Panorámico - {{ filename }}</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+            background: #000;
+            overflow: hidden;
+        }
+        .viewer-container {
+            position: relative;
+            width: 100vw;
+            height: 100vh;
+        }
+        .panorama-canvas {
+            display: block;
+            cursor: grab;
+        }
+        .panorama-canvas:active {
+            cursor: grabbing;
+        }
+        .controls {
+            position: absolute;
+            top: 20px;
+            left: 20px;
+            z-index: 1000;
+            display: flex;
+            gap: 10px;
+        }
+        .control-btn {
+            background: rgba(0,0,0,0.7);
+            border: none;
+            color: white;
+            padding: 10px 15px;
+            border-radius: 8px;
+            cursor: pointer;
+            transition: background 0.3s;
+        }
+        .control-btn:hover {
+            background: rgba(0,0,0,0.9);
+        }
+        .info-panel {
+            position: absolute;
+            bottom: 20px;
+            left: 20px;
+            right: 20px;
+            background: rgba(0,0,0,0.8);
+            color: white;
+            padding: 15px;
+            border-radius: 8px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .loading {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            color: white;
+            text-align: center;
+        }
+        .zoom-controls {
+            position: absolute;
+            top: 20px;
+            right: 20px;
+            display: flex;
+            flex-direction: column;
+            gap: 5px;
+        }
+        .zoom-btn {
+            background: rgba(0,0,0,0.7);
+            border: none;
+            color: white;
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .zoom-btn:hover {
+            background: rgba(0,0,0,0.9);
+        }
+    </style>
+</head>
+<body>
+    <div class="viewer-container">
+        <div class="loading" id="loading">
+            <div class="spinner-border" role="status">
+                <span class="visually-hidden">Cargando...</span>
+            </div>
+            <p class="mt-2">Cargando panorama...</p>
+        </div>
+        
+        <canvas id="panoramaCanvas" class="panorama-canvas" style="display: none;"></canvas>
+        
+        <div class="controls">
+            <button class="control-btn" onclick="window.close()" title="Cerrar">
+                <i class="bi bi-x-lg"></i>
+            </button>
+            <button class="control-btn" onclick="window.history.back()" title="Volver">
+                <i class="bi bi-arrow-left"></i>
+            </button>
+            <button class="control-btn" onclick="toggleFullscreen()" title="Pantalla completa">
+                <i class="bi bi-fullscreen"></i>
+            </button>
+            <button class="control-btn" onclick="resetView()" title="Reiniciar vista">
+                <i class="bi bi-arrow-clockwise"></i>
+            </button>
+        </div>
+        
+        <div class="zoom-controls">
+            <button class="zoom-btn" onclick="zoomIn()" title="Acercar">
+                <i class="bi bi-plus"></i>
+            </button>
+            <button class="zoom-btn" onclick="zoomOut()" title="Alejar">
+                <i class="bi bi-dash"></i>
+            </button>
+        </div>
+        
+        <div class="info-panel">
+            <div>
+                <strong>{{ filename }}</strong>
+                <br>
+                <small>Arrastra para rotar • Rueda del mouse para zoom</small>
+            </div>
+            <div>
+                <button class="btn btn-sm btn-outline-light" onclick="downloadImage()">
+                    <i class="bi bi-download"></i> Descargar
+                </button>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        const canvas = document.getElementById('panoramaCanvas');
+        const ctx = canvas.getContext('2d');
+        const loading = document.getElementById('loading');
+        
+        let img = new Image();
+        let isDragging = false;
+        let lastX = 0;
+        let lastY = 0;
+        let offsetX = 0;
+        let offsetY = 0;
+        let zoom = 1;
+        let minZoom = 0.5;
+        let maxZoom = 3;
+        
+        // Configurar canvas
+        function resizeCanvas() {
+            canvas.width = window.innerWidth;
+            canvas.height = window.innerHeight;
+            if (img.complete) {
+                drawPanorama();
+            }
+        }
+        
+        // Cargar imagen
+        img.onload = function() {
+            loading.style.display = 'none';
+            canvas.style.display = 'block';
+            resizeCanvas();
+            
+            // Calcular zoom inicial para ajustar la imagen
+            const scaleX = canvas.width / img.width;
+            const scaleY = canvas.height / img.height;
+            zoom = Math.max(scaleX, scaleY);
+            minZoom = zoom * 0.5;
+            maxZoom = zoom * 3;
+            
+            drawPanorama();
+        };
+        
+        img.onerror = function() {
+            loading.innerHTML = '<p>Error al cargar la imagen</p>';
+        };
+        
+        // Dibujar panorama
+        function drawPanorama() {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            
+            const scaledWidth = img.width * zoom;
+            const scaledHeight = img.height * zoom;
+            
+            // Centrar verticalmente
+            const centerY = (canvas.height - scaledHeight) / 2 + offsetY;
+            
+            // Dibujar imagen principal
+            ctx.drawImage(img, offsetX, centerY, scaledWidth, scaledHeight);
+            
+            // Repetir horizontalmente para efecto cilíndrico
+            if (scaledWidth + offsetX < canvas.width) {
+                ctx.drawImage(img, offsetX + scaledWidth, centerY, scaledWidth, scaledHeight);
+            }
+            if (offsetX > 0) {
+                ctx.drawImage(img, offsetX - scaledWidth, centerY, scaledWidth, scaledHeight);
+            }
+            
+            // Limitar desplazamiento vertical
+            const maxOffsetY = Math.max(0, (scaledHeight - canvas.height) / 2);
+            offsetY = Math.max(-maxOffsetY, Math.min(maxOffsetY, offsetY));
+        }
+        
+        // Eventos de mouse
+        canvas.addEventListener('mousedown', (e) => {
+            isDragging = true;
+            lastX = e.clientX;
+            lastY = e.clientY;
+        });
+        
+        canvas.addEventListener('mousemove', (e) => {
+            if (isDragging) {
+                const deltaX = e.clientX - lastX;
+                const deltaY = e.clientY - lastY;
+                
+                offsetX += deltaX;
+                offsetY += deltaY;
+                
+                // Mantener offset X en rango válido para efecto cilíndrico
+                const scaledWidth = img.width * zoom;
+                if (offsetX > scaledWidth) offsetX -= scaledWidth;
+                if (offsetX < -scaledWidth) offsetX += scaledWidth;
+                
+                drawPanorama();
+                lastX = e.clientX;
+                lastY = e.clientY;
+            }
+        });
+        
+        canvas.addEventListener('mouseup', () => {
+            isDragging = false;
+        });
+        
+        canvas.addEventListener('mouseleave', () => {
+            isDragging = false;
+        });
+        
+        // Zoom con rueda del mouse
+        canvas.addEventListener('wheel', (e) => {
+            e.preventDefault();
+            const zoomFactor = e.deltaY > 0 ? 0.9 : 1.1;
+            const newZoom = zoom * zoomFactor;
+            
+            if (newZoom >= minZoom && newZoom <= maxZoom) {
+                zoom = newZoom;
+                drawPanorama();
+            }
+        });
+        
+        // Eventos de teclado
+        document.addEventListener('keydown', (e) => {
+            switch(e.key) {
+                case 'Escape':
+                    if (document.fullscreenElement) {
+                        document.exitFullscreen();
+                    }
+                    break;
+                case 'f':
+                case 'F':
+                    toggleFullscreen();
+                    break;
+                case 'r':
+                case 'R':
+                    resetView();
+                    break;
+            }
+        });
+        
+        // Funciones de control
+        function zoomIn() {
+            const newZoom = zoom * 1.2;
+            if (newZoom <= maxZoom) {
+                zoom = newZoom;
+                drawPanorama();
+            }
+        }
+        
+        function zoomOut() {
+            const newZoom = zoom * 0.8;
+            if (newZoom >= minZoom) {
+                zoom = newZoom;
+                drawPanorama();
+            }
+        }
+        
+        function resetView() {
+            offsetX = 0;
+            offsetY = 0;
+            const scaleX = canvas.width / img.width;
+            const scaleY = canvas.height / img.height;
+            zoom = Math.max(scaleX, scaleY);
+            drawPanorama();
+        }
+        
+        function toggleFullscreen() {
+            if (!document.fullscreenElement) {
+                document.documentElement.requestFullscreen();
+            } else {
+                document.exitFullscreen();
+            }
+        }
+        
+        function downloadImage() {
+            const link = document.createElement('a');
+            link.download = '{{ filename }}';
+            link.href = '{{ url_for("static", filename=image_path) }}';
+            link.click();
+        }
+        
+        // Redimensionar canvas cuando cambie el tamaño de ventana
+        window.addEventListener('resize', resizeCanvas);
+        
+        // Cargar imagen
+        img.src = '{{ url_for("static", filename=image_path) }}';
+    </script>
+</body>
+</html>