diff --git a/roop/Frontend/app.py b/roop/Frontend/app.py
index 19880e8..f462b71 100644
--- a/roop/Frontend/app.py
+++ b/roop/Frontend/app.py
@@ -1,8 +1,12 @@
-from flask import Flask, render_template, request, redirect, url_for
+from flask import Flask, render_template, request, redirect, url_for, jsonify, flash
 import os
 import base64
+import secrets
+secret_key = secrets.token_hex(16)
 
 app = Flask(__name__)
+app.secret_key = secret_key
+
 captureCounter = 0
 
 @app.route('/')
@@ -34,16 +38,17 @@ def upload():
     img_path = os.path.join('roop/images/', img_name)
     with open(img_path, 'wb') as img_file:
         img_file.write(img_bytes)
+    flash(f"Imagen guardada correctamente", "success")
+    return redirect(url_for('index'))
 
-    # Ejecutar el comando para procesar la imagen
-    if character_name == 'Unknown':
-        return redirect(url_for('index'))
-    
-    # Procesar la imagen con el comando específico
-    command = f"%cd '/content/roop' && python run.py -s '{character_name}.png' -t 'brad org.mp4' -o 'face_restored_video3.mp4' --keep-frames --keep-fps --temp-frame-quality 1 --output-video-quality 1 --execution-provider cuda --frame-processor face_swapper face_enhancer"
-    os.system(command)
 
-    return redirect(url_for('index'))
+@app.route('/transform', methods=['POST'])
+def transform():
+    command = request.json.get('command')
+    if command:
+        os.system(command)
+        return jsonify({'message': 'Transformación completada'})
+    return jsonify({'message': 'Error: comando de transformación no proporcionado'}), 400
 
 
 if __name__ == '__main__':
diff --git a/roop/Frontend/templates/index.html b/roop/Frontend/templates/index.html
index 967c32e..dbb5a84 100644
--- a/roop/Frontend/templates/index.html
+++ b/roop/Frontend/templates/index.html
@@ -23,7 +23,18 @@
                         </div>
                 </header>
         </div>
-
+        <div id="message" style="display: none;"></div>
+
+        {% with messages = get_flashed_messages() %}
+        {% if messages %}
+        <ul class="flash-messages">
+                {% for message in messages %}
+                <li>{{ message }}</li>
+                {% endfor %}
+        </ul>
+        {% endif %}
+        {% endwith %}
+        
         <div class="container">
 
                 <div class="slide">
@@ -94,11 +105,12 @@
                                         <div class="name">Scarlet Witch</div>
                                         <div class="des">¿Que tanto te pareces a tu superheroe favorito?
                                         </div>
-                                        <button id="capture-btn-6" data-name="Scarlet Width">Tomar Foto</button>
+                                        <button id="capture-btn-6" data-name="Scarlet Witch">Tomar Foto</button>
                                         <button id="close-btn-6" style="display: none;">Cerrar</button>
                                         <canvas id="canvas-6" style="display: none;"></canvas>
                                         <video id="video-6" style="display: none;"></video>
                                         <button id="transform-btn-6">Transformar</button>
+                                        
                                 </div>
                         </div>
 
@@ -108,11 +120,11 @@
                         <button class="prev"><i class="fa-solid fa-arrow-left"></i></button>
                         <button class="next"><i class="fa-solid fa-arrow-right"></i></button>
                 </div>
-                <div id="message"></div>
-
+              
         </div>
+
         <script>
-                for (let i = 1; i <= 6; i++) {
+        for (let i = 1; i <= 6; i++) {
                         const captureBtn = document.getElementById(`capture-btn-${i}`);
                         const closeBtn = document.getElementById(`close-btn-${i}`);
                         const canvas = document.getElementById(`canvas-${i}`);
@@ -157,7 +169,8 @@
                                                                 .then(data => {
                                                                         console.log('Image uploaded successfully', data);
                                                                         // Show a success message
-                                                                        messageElement.textContent = 'Foto tomada exitosamente!';
+                                                                        messageElement.textContent = data.message;
+                                                                        messageElement.style.display = 'block'; // Mostrar el mensaje de éxito
                                                                         // Stop the video stream and hide the video element
                                                                         stream.getTracks().forEach(track => track.stop());
                                                                         video.srcObject = null;
@@ -168,6 +181,7 @@
                                                                 .catch(error => {
                                                                         console.error('There was a problem with your fetch operation:', error);
                                                                 });
+
                                                 });
 
                                                 closeBtn.addEventListener('click', () => {
@@ -192,38 +206,38 @@
 
         </script>
         <script>
-                // Agregar evento al botón de transformación de cada superhéroe
-                        for (let i = 1; i <= 6; i++) {
-                                const transformBtn = document.getElementById(`transform-btn-${i}`);
-                                const characterName = transformBtn.getAttribute('data-name');
-                                const characterVideo = transformBtn.getAttribute('data-video');
-
-                                transformBtn.addEventListener('click', () => {
-                                        // Ejecutar el comando de transformación
-                                        const command = `%cd "/content/roop" && python run.py -s "/content/roop/images/${characterName}.png" -t "/content/roop/videos/${characterVideo}" -o "resultado.mp4" --keep-frames --keep-fps --temp-frame-quality 1 --output-video-quality 1 --execution-provider cuda --frame-processor face_swapper face_enhancer`;
-                                        fetch('/transform', {
-                                                method: 'POST',
-                                                body: JSON.stringify({ command: command }),
-                                                headers: {
-                                                        'Content-Type': 'application/json'
+        for (let i = 1; i <= 6; i++) {
+                        const transformBtn = document.getElementById(`transform-btn-${i}`);
+                        const characterName = transformBtn.getAttribute('data-name');
+                        const characterVideo = transformBtn.getAttribute('data-video');
+
+                        transformBtn.addEventListener('click', () => {
+                                // Ejecutar el comando de transformación
+                                const command = `%cd "/content/Proyecto_ia" && python run.py -s "/content/Proyecto_ia/roop/images/${characterName}.png" -t "/content/Proyecto_ia/roop/videos/${characterVideo}" -o "resultado.mp4" --keep-frames --keep-fps --temp-frame-quality 1 --output-video-quality 1 --execution-provider cuda --frame-processor face_swapper face_enhancer`;
+                                fetch('/transform', {
+                                        method: 'POST',
+                                        body: JSON.stringify({ command: command }),
+                                        headers: {
+                                                'Content-Type': 'application/json'
+                                        }
+                                })
+                                        .then(response => {
+                                                if (!response.ok) {
+                                                        throw new Error('Network response was not ok');
                                                 }
+                                                return response.json();
                                         })
-                                                .then(response => {
-                                                        if (!response.ok) {
-                                                                throw new Error('Network response was not ok');
-                                                        }
-                                                        return response.json();
-                                                })
-                                                .then(data => {
-                                                        console.log('Transformation completed', data);
-                                                        // Mostrar un mensaje de éxito
-                                                        messageElement.textContent = 'Transformación completada!';
-                                                })
-                                                .catch(error => {
-                                                        console.error('There was a problem with your fetch operation:', error);
-                                                });
-                                });
-                        }
+                                        .then(data => {
+                                                console.log('Transformation completed', data);
+                                                // Mostrar un mensaje de éxito
+                                                messageElement.textContent = 'Transformación completada!';
+                                        })
+                                        .catch(error => {
+                                                console.error('There was a problem with your fetch operation:', error);
+                                        });
+                        });
+                }
+
 
         </script>
 </body>
diff --git a/roop/images/Black Widow.png b/roop/images/Black Widow.png
index f9b5d80..0ae05d6 100644
Binary files a/roop/images/Black Widow.png and b/roop/images/Black Widow.png differ
diff --git a/roop/images/Captain America.png b/roop/images/Captain America.png
new file mode 100644
index 0000000..a7a180e
Binary files /dev/null and b/roop/images/Captain America.png differ