UI redesign, Added image background removal, Added discord webhook

Author: MizaelS

app.py

@@ -1,16 +1,22 @@
 from flask import Flask, render_template, request, send_file
 from PIL import Image
-from flask import send_file
 Image.MAX_IMAGE_PIXELS = None
+from rembg import remove
 import os
+import io
+from discord_webhook import DiscordWebhook
 
 app = Flask(__name__)
 
+webhook_url = ""
+
 @app.route('/')
 def index():
+    client_ip = request.remote_addr
+    webhook = DiscordWebhook(url=webhook_url, content=f'Un usuario ha abierto la página. IP: {client_ip}')
+    webhook.execute()
     return render_template('index.html')
 
-
 @app.route('/convert', methods=['POST'])
 def convert_image():
     file = request.files['file']
@@ -24,6 +30,8 @@ def convert_image():
 
         # Enviar archivo y luego eliminarlo
         try:
+            webhook = DiscordWebhook(url=webhook_url, content='Un usuario ha convertido una imagen')
+            webhook.execute()
             return send_file(filename, as_attachment=True)
         finally:
             os.remove(filename)
@@ -46,13 +54,41 @@ def resize_image():
 
         # Enviar archivo y luego eliminarlo
         try:
+            webhook = DiscordWebhook(url=webhook_url, content='Un usuario ha redimensionado una imagen')
+            webhook.execute()
             return send_file(filename, as_attachment=True)
         finally:
             os.remove(filename)
     else:
         return 'Error: Todos los campos son requeridos.'
-
+    
+@app.route('/remove_background', methods=['POST'])
+def remove_background():
+    file = request.files['file']
+    
+    if file:
+        print("Recibido archivo")
+        img_bytes = file.read()
+        print("Leídos bytes del archivo")
+        output_bytes = remove(img_bytes)
+        print("Fondo removido")
+        output_img = Image.open(io.BytesIO(output_bytes))
+        filename = 'background_removed.png'
+        output_img.save(filename)
+        print("Imagen guardada")
+        
+        # Enviar archivo y luego eliminarlo
+        try:
+            print("Enviando archivo")
+            webhook = DiscordWebhook(url=webhook_url, content='Un usuario ha removido el fondo de una imagen')
+            webhook.execute()
+            return send_file(filename, as_attachment=True)
+        finally:
+            print("Eliminando archivo")
+            os.remove(filename)
+    else:
+        print("Error: Todos los campos son requeridos.")
+        return 'Error: Todos los campos son requeridos.'
 
 if __name__ == '__main__':
     app.run(host='0.0.0.0', debug=True)
-

backgroundremover.py

@@ -0,0 +1,43 @@
+import os
+from datetime import datetime
+from rembg import remove
+
+class BackgroundRemover:
+    def __init__(self, input_folder, output_folder):
+        self.input_folder = input_folder
+        self.output_folder = output_folder
+
+    def process_images(self):
+        today = datetime.now().strftime('%Y-%m-%d %H-%M-%S')
+        processed_folder = os.path.join(self.output_folder, today)
+        os.makedirs(processed_folder, exist_ok=True)
+
+        for filename in os.listdir(self.input_folder):
+            if filename.endswith(('.png', '.jpg', '.jpeg',)):
+                input_path = os.path.join(self.input_folder, filename)
+                output_path = os.path.join(processed_folder, filename)
+                try:
+                    self._remove_background(input_path, output_path)
+                    self._move_originals(input_path, processed_folder)
+                except Exception as e:
+                    print(f"Error processing {filename}: {e}")
+
+    def _remove_background(self, input_p, output_p):
+        with open(input_p, 'rb') as inp, open(output_p, 'wb') as outp:
+            background_output = remove(inp.read())
+            outp.write(background_output)
+
+    def _move_originals(self, input_p, dest_p):
+        originals_folder = os.path.join(dest_p, 'originals')
+        os.makedirs(originals_folder, exist_ok=True)
+
+        filename = os.path.basename(input_p)
+        new_path = os.path.join(originals_folder, filename)
+        os.rename(input_p, new_path)
+
+if __name__ == '__main__':
+    input_folder = "input"
+    output_folder = "output"
+
+    remover = BackgroundRemover(input_folder, output_folder)
+    remover.process_images()

static/css/styles.css

@@ -1,15 +1,15 @@
 .active {
-    background-color: #0d6efd !important;
+    background-color: #3498db !important;
     color: white;
 }
 
 body {
     font-family: 'Arial', sans-serif;
-    background-color: #f8f9fa;
+    background-color: #ecf0f1;
 }
 
 h1 {
-    color: #343a40;
+    color: #2c3e50;
 }
 
 .card {
@@ -20,33 +20,34 @@ h1 {
 
 .btn {
     border-radius: 5px;
+    transition: background-color 0.3s, color 0.3s;
 }
 
 .btn-secondary {
-    background-color: #343a40;
+    background-color: #2c3e50;
     border: none;
 }
 
 .btn-secondary:hover {
-    background-color: #23272b;
+    background-color: #1a252f;
 }
 
 .btn-secondary.active {
-    background-color: #0d6efd;
+    background-color: #3498db;
     border: none;
 }
 
 .btn-primary {
-    background-color: #0d6efd;
+    background-color: #3498db;
     border: none;
 }
 
 .btn-primary:hover {
-    background-color: #0056b3;
+    background-color: #2980b9;
 }
 
 .form-label {
-    color: #343a40;
+    color: #2c3e50;
 }
 
 .form-control {
@@ -80,3 +81,24 @@ h1 {
     color: black;
 }
 
+
+.footer {
+    background-color: #f8f9fa;
+    border-top: 1px solid #e7e7e7;
+}
+
+.footer a {
+    margin: 0 5px;
+}
+
+.footer img {
+    vertical-align: middle;
+}
+
+.footer .text-right {
+    text-align: right;
+    margin-left: auto;
+}
+
+
+

static/js/scripts.js

@@ -12,20 +12,28 @@ function submitForm(formId) {
         xhr.upload.onprogress = function(event) {
             if (event.lengthComputable) {
                 var percentage = (event.loaded / event.total) * 100;
-                document.getElementById('progress').innerText = '' + percentage.toFixed(2) + '%';
+                document.getElementById('progress').innerText = 'Cargando imagen: ' + percentage.toFixed(2) + '%';
+                if (percentage === 100) {
+                    document.getElementById('progress').innerText = 'Procesando imagen...';
+                }
             }
         };
 
         xhr.onreadystatechange = function() {
             if (xhr.readyState == 4 && xhr.status == 200) {
-                var blob = new Blob([xhr.response], { type: 'application/octet-stream' });
+                var blob;
+                if (formId === 'removeBackgroundForm') {
+                    blob = new Blob([xhr.response], { type: 'image/png' });
+                } else {
+                    blob = new Blob([xhr.response], { type: 'application/octet-stream' });
+                }
                 var link = document.createElement('a');
                 link.href = window.URL.createObjectURL(blob);
-                var fileInput = formId === 'resizeForm' ? document.getElementById('file') : document.getElementById('convertFile');
+                var fileInput = formId === 'resizeForm' ? document.getElementById('file') : (formId === 'convertForm' ? document.getElementById('convertFile') : document.getElementById('removeBackgroundFile'));
                 var fileName = fileInput.files[0].name;
                 var fileExtension = fileName.split('.').pop();
-                var format = formId === 'resizeForm' ? 'resizeFormat' : 'convertFormat';
-                var selectedFormat = document.getElementById(format).value.toLowerCase();
+                var format = formId === 'resizeForm' ? 'resizeFormat' : (formId === 'convertForm' ? 'convertFormat' : 'png');
+                var selectedFormat = document.getElementById(format) ? document.getElementById(format).value.toLowerCase() : 'png';
                 link.download = fileName.replace(fileExtension, selectedFormat);
                 link.click();
                 document.getElementById('loading').style.display = 'none';
@@ -41,16 +49,42 @@ function submitForm(formId) {
 }
 
 
+
+
+
 document.getElementById('resizeButton').addEventListener('click', function () {
     document.getElementById('resizeDiv').style.display = 'block';
     document.getElementById('convertDiv').style.display = 'none';
+    document.getElementById('removeBackgroundDiv').style.display = 'none';
     document.getElementById('resizeButton').classList.add('active');
     document.getElementById('convertButton').classList.remove('active');
+    document.getElementById('removeBackgroundButton').classList.remove('active');
 });
 
 document.getElementById('convertButton').addEventListener('click', function () {
     document.getElementById('convertDiv').style.display = 'block';
     document.getElementById('resizeDiv').style.display = 'none';
+    document.getElementById('removeBackgroundDiv').style.display = 'none';
     document.getElementById('convertButton').classList.add('active');
     document.getElementById('resizeButton').classList.remove('active');
+    document.getElementById('removeBackgroundButton').classList.remove('active');
 });
+
+document.getElementById('removeBackgroundButton').addEventListener('click', function () {
+    document.getElementById('removeBackgroundDiv').style.display = 'block';
+    document.getElementById('resizeDiv').style.display = 'none';
+    document.getElementById('convertDiv').style.display = 'none';
+    document.getElementById('removeBackgroundButton').classList.add('active');
+    document.getElementById('resizeButton').classList.remove('active');
+    document.getElementById('convertButton').classList.remove('active');
+});
+
+document.getElementById('teramont-logo').addEventListener('mouseover', function () {
+    this.style.filter = 'grayscale(0%)';
+});
+
+document.getElementById('teramont-logo').addEventListener('mouseout', function () {
+    this.style.filter = 'grayscale(100%)';
+});
+
+

templates/index.html

@@ -7,14 +7,16 @@
     <title>Redimensionador y Convertidor de Imágenes</title>
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
     <link rel="stylesheet" href="/static/css/styles.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
 </head>
 
 <body class="container mt-5">
     <h1 class="text-center">Redimensionador y Convertidor de Imágenes</h1>
 
     <div class="d-flex justify-content-center my-4">
-        <button id="resizeButton" class="btn btn-secondary mx-2">Redimensionar Imagen</button>
-        <button id="convertButton" class="btn btn-secondary mx-2">Convertir Formato de Imagen</button>
+        <button id="resizeButton" class="btn btn-secondary mx-2"><i class="fas fa-expand-arrows-alt"></i> Redimensionar Imagen</button>
+        <button id="convertButton" class="btn btn-secondary mx-2"><i class="fas fa-exchange-alt"></i> Convertir Formato de Imagen</button>
+        <button id="removeBackgroundButton" class="btn btn-secondary mx-2"><i class="fas fa-cut"></i> Remover fondo de imagen</button>
     </div>
 
     <div id="resizeDiv" class="card p-4 mb-4">
@@ -40,7 +42,7 @@ <h2>Redimensionar Imagen</h2>
                     <option value="WEBP">WEBP</option>
                 </select>
             </div>
-            <button type="submit" class="btn btn-primary">Redimensionar</button>
+            <button type="submit" class="btn btn-primary"><i class="fas fa-expand-arrows-alt"></i> Redimensionar</button>
         </form>
     </div>
 
@@ -61,14 +63,45 @@ <h2>Convertir Formato de Imagen</h2>
             </div>
             <button type="submit" class="btn btn-primary">Convertir</button>
         </form>
-    </div>    
+    </div>
+    
+    <div id="removeBackgroundDiv" class="card p-4 mb-4" style="display:none;">
+        <h2>Remover Fondo de Imagen</h2>
+        <form id="removeBackgroundForm" action="/remove_background" method="POST" enctype="multipart/form-data" onsubmit="return submitForm('removeBackgroundForm')" class="mb-4 needs-validation" novalidate>
+            <div class="mb-3">
+                <label for="removeBackgroundFile" class="form-label">Selecciona una imagen:</label>
+                <input type="file" class="form-control" id="removeBackgroundFile" name="file" required>
+            </div>
+            <button type="submit" class="btn btn-primary">Remover Fondo</button>
+        </form>
+    </div>
 
     <div id="loading" class="text-center">
         <div class="spinner-border text-primary" role="status">
             <span class="sr-only"></span>
         </div>
         <div id="progress" class="progress-text"></div>
-    </div>       
+    </div>
+    
+    <footer class="footer mt-auto py-3">
+        <div class="container">
+            <div class="row">
+                <div class="col-md-6">
+                    <span>Herramienta desarrollada por Mizael S.</span>
+                    <a href="https://github.com/MizaelS/Image-Processing-Web-App" target="_blank">
+                        <i class="fab fa-github"></i>
+                    </a>
+                </div>
+                <div class="col-md-6 text-right">
+                    <span>Powered by</span>
+                    <a href="https://www.teramont.net/" target="_blank">
+                        <img src="https://www.teramont.net/assets/images/theme/logo/teramont-logo.png" alt="Teramont Logo" width="100">
+                    </a>
+                </div>
+            </div>
+        </div>
+    </footer>
+        
 
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
     <script src="/static/js/scripts.js"></script>