Up

Dockerfile

@@ -0,0 +1,19 @@
+FROM python:3.9-slim
+
+WORKDIR /app
+
+# Copy requirements first to leverage Docker cache
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy application code
+COPY . .
+
+# Create upload directory
+RUN mkdir -p static/uploads
+
+# Expose port for Hugging Face Spaces (uses port 7860)
+EXPOSE 7860
+
+# Run the application
+CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "7860"]

app.py

@@ -0,0 +1,227 @@
+from fastapi import FastAPI, File, UploadFile, Request, HTTPException, Form, Depends, status
+from fastapi.responses import HTMLResponse, FileResponse, RedirectResponse
+from fastapi.staticfiles import StaticFiles
+from fastapi.templating import Jinja2Templates
+from fastapi.security import HTTPBasic, HTTPBasicCredentials
+import shutil
+import os
+import uuid
+import base64
+from pathlib import Path
+import uvicorn
+from typing import List, Optional
+import secrets
+from starlette.middleware.sessions import SessionMiddleware
+from fastapi.security import OAuth2PasswordRequestForm
+from fastapi.responses import JSONResponse
+
+# Create FastAPI app
+app = FastAPI(title="Image Uploader")
+
+# Add session middleware
+app.add_middleware(
+    SessionMiddleware, 
+    secret_key="YOUR_SECRET_KEY_CHANGE_THIS_IN_PRODUCTION"
+)
+
+# Create uploads directory if it doesn't exist
+UPLOAD_DIR = Path("static/uploads")
+UPLOAD_DIR.mkdir(parents=True, exist_ok=True)
+
+# Mount static directory
+app.mount("/static", StaticFiles(directory="static"), name="static")
+
+# Set up Jinja2 templates
+templates = Jinja2Templates(directory="templates")
+
+# Set up security
+security = HTTPBasic()
+
+# Hardcoded credentials (in a real app, use proper hashed passwords in a database)
+USERNAME = "detomo"
+PASSWORD = "itweek2025"
+
+def get_file_extension(filename: str) -> str:
+    """Get the file extension from a filename."""
+    return os.path.splitext(filename)[1].lower()
+
+def is_valid_image(extension: str) -> bool:
+    """Check if the file extension is a valid image type."""
+    return extension in ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp']
+
+def authenticate(request: Request):
+    """Check if user is authenticated."""
+    is_authenticated = request.session.get("authenticated", False)
+    return is_authenticated
+
+def verify_auth(request: Request):
+    """Verify authentication."""
+    if not authenticate(request):
+        raise HTTPException(
+            status_code=status.HTTP_401_UNAUTHORIZED,
+            detail="Not authenticated",
+            headers={"WWW-Authenticate": "Basic"},
+        )
+    return True
+
+@app.get("/login", response_class=HTMLResponse)
+async def login_page(request: Request):
+    """Render the login page."""
+    # If already authenticated, redirect to home
+    if authenticate(request):
+        return RedirectResponse(url="/", status_code=status.HTTP_302_FOUND)
+    
+    return templates.TemplateResponse(
+        "login.html", 
+        {"request": request}
+    )
+
+@app.post("/login")
+async def login(request: Request, form_data: OAuth2PasswordRequestForm = Depends()):
+    """Handle login form submission."""
+    if form_data.username == USERNAME and form_data.password == PASSWORD:
+        request.session["authenticated"] = True
+        return RedirectResponse(url="/", status_code=status.HTTP_302_FOUND)
+    else:
+        return templates.TemplateResponse(
+            "login.html", 
+            {"request": request, "error": "Invalid username or password"}
+        )
+
+@app.get("/logout")
+async def logout(request: Request):
+    """Handle logout."""
+    request.session.pop("authenticated", None)
+    return RedirectResponse(url="/login", status_code=status.HTTP_302_FOUND)
+
+@app.get("/", response_class=HTMLResponse)
+async def home(request: Request):
+    """Render the home page with authentication check."""
+    # Check if user is authenticated
+    if not authenticate(request):
+        return RedirectResponse(url="/login", status_code=status.HTTP_302_FOUND)
+    
+    # Get all uploaded images
+    uploaded_images = []
+    
+    if UPLOAD_DIR.exists():
+        for file in UPLOAD_DIR.iterdir():
+            if is_valid_image(get_file_extension(file.name)):
+                image_url = f"/static/uploads/{file.name}"
+                uploaded_images.append({
+                    "name": file.name,
+                    "url": image_url,
+                    "embed_url": f"{request.base_url}static/uploads/{file.name}"
+                })
+    
+    return templates.TemplateResponse(
+        "index.html", 
+        {"request": request, "uploaded_images": uploaded_images}
+    )
+
+@app.post("/upload/")
+async def upload_image(request: Request, file: UploadFile = File(...)):
+    """Handle image upload with authentication check."""
+    # Check if user is authenticated
+    if not authenticate(request):
+        return JSONResponse(
+            status_code=status.HTTP_401_UNAUTHORIZED,
+            content={"detail": "Not authenticated"}
+        )
+    
+    # Check if the file is an image
+    extension = get_file_extension(file.filename)
+    if not is_valid_image(extension):
+        raise HTTPException(status_code=400, detail="Only image files are allowed")
+    
+    # Generate a unique filename to prevent overwrites
+    unique_filename = f"{uuid.uuid4()}{extension}"
+    file_path = UPLOAD_DIR / unique_filename
+    
+    # Save the file
+    with file_path.open("wb") as buffer:
+        shutil.copyfileobj(file.file, buffer)
+    
+    # Return the file URL and embed code
+    file_url = f"/static/uploads/{unique_filename}"
+    
+    # For base64 encoding
+    file.file.seek(0)  # Reset file pointer to beginning
+    contents = await file.read()
+    base64_encoded = base64.b64encode(contents).decode("utf-8")
+    
+    # Determine MIME type
+    mime_type = {
+        '.jpg': 'image/jpeg',
+        '.jpeg': 'image/jpeg',
+        '.png': 'image/png',
+        '.gif': 'image/gif',
+        '.bmp': 'image/bmp',
+        '.webp': 'image/webp'
+    }.get(extension, 'application/octet-stream')
+    
+    return {
+        "success": True,
+        "file_name": unique_filename,
+        "file_url": file_url,
+        "full_url": f"{request.base_url}static/uploads/{unique_filename}",
+        "embed_html": f'<img src="{request.base_url}static/uploads/{unique_filename}" alt="Uploaded Image" />',
+        "base64_data": f"data:{mime_type};base64,{base64_encoded[:20]}...{base64_encoded[-20:]}",
+        "base64_embed": f'<img src="data:{mime_type};base64,{base64_encoded}" alt="Embedded Image" />'
+    }
+
+@app.get("/view/{file_name}")
+async def view_image(request: Request, file_name: str):
+    """View a specific image with authentication check."""
+    # Check if user is authenticated
+    if not authenticate(request):
+        return RedirectResponse(url="/login", status_code=status.HTTP_302_FOUND)
+    
+    file_path = UPLOAD_DIR / file_name
+    
+    if not file_path.exists():
+        raise HTTPException(status_code=404, detail="Image not found")
+    
+    image_url = f"/static/uploads/{file_name}"
+    embed_url = f"{request.base_url}static/uploads/{file_name}"
+    
+    return templates.TemplateResponse(
+        "view.html", 
+        {
+            "request": request, 
+            "image_url": image_url,
+            "file_name": file_name,
+            "embed_url": embed_url
+        }
+    )
+
+@app.delete("/delete/{file_name}")
+async def delete_image(request: Request, file_name: str):
+    """Delete an image with authentication check."""
+    # Check if user is authenticated
+    if not authenticate(request):
+        return JSONResponse(
+            status_code=status.HTTP_401_UNAUTHORIZED,
+            content={"detail": "Not authenticated"}
+        )
+    
+    file_path = UPLOAD_DIR / file_name
+    
+    if not file_path.exists():
+        raise HTTPException(status_code=404, detail="Image not found")
+    
+    os.remove(file_path)
+    
+    return {"success": True, "message": f"Image {file_name} has been deleted"}
+
+# Health check endpoint for Hugging Face Spaces
+@app.get("/healthz")
+async def health_check():
+    return {"status": "ok"}
+
+if __name__ == "__main__":
+    # For local development
+    uvicorn.run("app:app", host="127.0.0.1", port=8000, reload=True)
+    
+    # For production/Hugging Face (uncomment when deploying)
+    # uvicorn.run("app:app", host="0.0.0.0", port=7860)

requirements.txt

@@ -0,0 +1,7 @@
+fastapi 
+uvicorn 
+python-multipart 
+jinja2 
+aiofiles
+itsdangerous
+python-jose

templates/index.html

@@ -0,0 +1,271 @@
+<!-- templates/index.html -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Image Uploader</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
+    <style>
+        .upload-container {
+            background-color: #f8f9fa;
+            padding: 20px;
+            border-radius: 8px;
+            margin-bottom: 30px;
+        }
+        .image-card {
+            margin-bottom: 20px;
+            transition: transform 0.3s;
+        }
+        .image-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
+        }
+        .copy-btn {
+            cursor: pointer;
+        }
+        .image-preview {
+            max-height: 200px;
+            object-fit: cover;
+            width: 100%;
+        }
+        .code-container {
+            background-color: #f5f5f5;
+            padding: 10px;
+            border-radius: 4px;
+            margin-top: 10px;
+            font-family: monospace;
+            font-size: 0.8rem;
+            overflow-x: auto;
+            white-space: nowrap;
+        }
+        .hidden {
+            display: none;
+        }
+        #uploadProgress {
+            margin-top: 10px;
+        }
+        .success-message {
+            background-color: #d1e7dd;
+            color: #0f5132;
+            padding: 15px;
+            border-radius: 4px;
+            margin-top: 15px;
+        }
+    </style>
+</head>
+<body>
+    <div class="container py-5">
+        <div class="d-flex justify-content-between align-items-center mb-4">
+            <h1>🖼️ Image Uploader & Embed Link Generator</h1>
+            <a href="/logout" class="btn btn-outline-danger">Logout</a>
+        </div>
+        
+        <div class="upload-container">
+            <h2>Upload New Image</h2>
+            <form id="uploadForm" enctype="multipart/form-data">
+                <div class="mb-3">
+                    <label for="file" class="form-label">Select an image to upload</label>
+                    <input class="form-control" type="file" id="file" name="file" accept="image/*">
+                </div>
+                <button type="submit" class="btn btn-primary">Upload & Generate Links</button>
+            </form>
+            
+            <div id="uploadProgress" class="progress hidden">
+                <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%"></div>
+            </div>
+            
+            <div id="uploadResult" class="hidden success-message">
+                <h4>✅ Upload Successful!</h4>
+                <div id="previewContainer" class="mt-3">
+                    <img id="imagePreview" class="img-fluid img-thumbnail mb-3" alt="Uploaded image preview">
+                </div>
+                
+                <h5>Embed Options:</h5>
+                
+                <div class="mb-3">
+                    <h6>1. Direct URL (hosted on this server)</h6>
+                    <div class="input-group">
+                        <input type="text" id="directUrl" class="form-control" readonly>
+                        <button class="btn btn-outline-secondary copy-btn" data-target="directUrl">Copy</button>
+                    </div>
+                </div>
+                
+                <div class="mb-3">
+                    <h6>2. HTML Embed Code</h6>
+                    <div class="code-container" id="htmlEmbed"></div>
+                    <button class="btn btn-sm btn-outline-secondary mt-2 copy-btn" data-target="htmlEmbed">Copy HTML</button>
+                </div>
+                
+                <div class="mb-3">
+                    <h6>3. Base64 Embed (works anywhere without hosting)</h6>
+                    <div class="code-container" id="base64Embed">Base64 code is truncated for display. Use the copy button to get the full code.</div>
+                    <button class="btn btn-sm btn-outline-secondary mt-2 copy-btn" data-target="base64Embed">Copy Base64 HTML</button>
+                </div>
+                
+                <p class="text-muted mt-3">
+                    <small>Tip: Base64 encoding embeds the image directly in your HTML, so you don't need to host the image separately.</small>
+                </p>
+            </div>
+        </div>
+        
+        <div class="row">
+            <div class="col-12">
+                <h2 class="mb-4">Your Uploaded Images</h2>
+                
+                {% if not uploaded_images %}
+                <div class="alert alert-info">
+                    No images have been uploaded yet. Upload your first image above!
+                </div>
+                {% else %}
+                <div class="row">
+                    {% for image in uploaded_images %}
+                    <div class="col-md-4">
+                        <div class="card image-card">
+                            <img src="{{ image.url }}" class="card-img-top image-preview" alt="{{ image.name }}">
+                            <div class="card-body">
+                                <h5 class="card-title text-truncate">{{ image.name }}</h5>
+                                <div class="d-flex justify-content-between mt-3">
+                                    <a href="/view/{{ image.name }}" class="btn btn-sm btn-primary">View Details</a>
+                                    <button class="btn btn-sm btn-danger delete-btn" data-filename="{{ image.name }}">Delete</button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    {% endfor %}
+                </div>
+                {% endif %}
+            </div>
+        </div>
+    </div>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const uploadForm = document.getElementById('uploadForm');
+            const uploadProgress = document.getElementById('uploadProgress');
+            const progressBar = uploadProgress.querySelector('.progress-bar');
+            const uploadResult = document.getElementById('uploadResult');
+            
+            // Handle form submission
+            uploadForm.addEventListener('submit', function(e) {
+                e.preventDefault();
+                
+                const fileInput = document.getElementById('file');
+                if (!fileInput.files.length) {
+                    alert('Please select a file to upload.');
+                    return;
+                }
+                
+                const file = fileInput.files[0];
+                const formData = new FormData();
+                formData.append('file', file);
+                
+                // Show progress
+                uploadProgress.classList.remove('hidden');
+                progressBar.style.width = '0%';
+                
+                const xhr = new XMLHttpRequest();
+                
+                xhr.upload.addEventListener('progress', function(e) {
+                    if (e.lengthComputable) {
+                        const percentComplete = (e.loaded / e.total) * 100;
+                        progressBar.style.width = percentComplete + '%';
+                    }
+                });
+                
+                xhr.addEventListener('load', function() {
+                    if (xhr.status === 200) {
+                        const response = JSON.parse(xhr.responseText);
+                        
+                        // Update preview
+                        document.getElementById('imagePreview').src = response.file_url;
+                        document.getElementById('directUrl').value = window.location.origin + response.file_url;
+                        document.getElementById('htmlEmbed').textContent = response.embed_html;
+                        
+                        // Store the full base64 embed, but display truncated version
+                        const base64EmbedEl = document.getElementById('base64Embed');
+                        base64EmbedEl.textContent = 'Base64 embed code (truncated for display): ' + 
+                            response.base64_embed.substring(0, 50) + '...' + 
+                            response.base64_embed.substring(response.base64_embed.length - 20);
+                        base64EmbedEl.dataset.fullCode = response.base64_embed;
+                        
+                        // Show results
+                        uploadResult.classList.remove('hidden');
+                        
+                        // Reset form for next upload
+                        uploadForm.reset();
+                        
+                        // Refresh the page after 2 seconds to show the new image in the gallery
+                        setTimeout(() => {
+                            window.location.reload();
+                        }, 2000);
+                    } else {
+                        alert('Upload failed. Please try again.');
+                    }
+                    
+                    uploadProgress.classList.add('hidden');
+                });
+                
+                xhr.addEventListener('error', function() {
+                    alert('Upload failed. Please try again.');
+                    uploadProgress.classList.add('hidden');
+                });
+                
+                xhr.open('POST', '/upload/');
+                xhr.send(formData);
+            });
+            
+            // Handle copy buttons
+            document.querySelectorAll('.copy-btn').forEach(function(btn) {
+                btn.addEventListener('click', function() {
+                    const targetId = this.dataset.target;
+                    const targetEl = document.getElementById(targetId);
+                    
+                    let textToCopy;
+                    if (targetEl.tagName === 'INPUT') {
+                        textToCopy = targetEl.value;
+                    } else {
+                        // For base64, we have the full code in the data attribute
+                        textToCopy = targetEl.dataset.fullCode || targetEl.textContent;
+                    }
+                    
+                    navigator.clipboard.writeText(textToCopy).then(() => {
+                        // Change button text temporarily
+                        const originalText = this.textContent;
+                        this.textContent = 'Copied!';
+                        setTimeout(() => {
+                            this.textContent = originalText;
+                        }, 1500);
+                    }).catch(err => {
+                        console.error('Failed to copy text: ', err);
+                    });
+                });
+            });
+            
+            // Handle delete buttons
+            document.querySelectorAll('.delete-btn').forEach(function(btn) {
+                btn.addEventListener('click', function() {
+                    const filename = this.dataset.filename;
+                    if (confirm(`Are you sure you want to delete ${filename}?`)) {
+                        fetch(`/delete/${filename}`, {
+                            method: 'DELETE'
+                        })
+                        .then(response => response.json())
+                        .then(data => {
+                            if (data.success) {
+                                window.location.reload();
+                            } else {
+                                alert('Failed to delete the image.');
+                            }
+                        })
+                        .catch(error => {
+                            console.error('Error:', error);
+                            alert('An error occurred while deleting the image.');
+                        });
+                    }
+                });
+            });
+        });
+    </script>
+</body>
+</html>

templates/login.html

@@ -0,0 +1,76 @@
+<!-- templates/login.html -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Login - Image Uploader</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
+    <style>
+        body {
+            background-color: #f5f5f5;
+            height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .login-container {
+            max-width: 400px;
+            padding: 40px;
+            background: white;
+            border-radius: 10px;
+            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+        }
+        .login-title {
+            text-align: center;
+            margin-bottom: 30px;
+            color: #1565C0;
+        }
+        .login-form {
+            margin-bottom: 20px;
+        }
+        .error-message {
+            background-color: #f8d7da;
+            color: #721c24;
+            padding: 10px;
+            border-radius: 4px;
+            margin-bottom: 20px;
+        }
+        .login-footer {
+            text-align: center;
+            margin-top: 20px;
+            color: #6c757d;
+            font-size: 0.9rem;
+        }
+    </style>
+</head>
+<body>
+    <div class="login-container">
+        <h2 class="login-title">🖼️ Image Uploader</h2>
+        
+        {% if error %}
+        <div class="error-message">
+            {{ error }}
+        </div>
+        {% endif %}
+        
+        <form class="login-form" method="post" action="/login">
+            <div class="mb-3">
+                <label for="username" class="form-label">Username</label>
+                <input type="text" class="form-control" id="username" name="username" required>
+            </div>
+            <div class="mb-3">
+                <label for="password" class="form-label">Password</label>
+                <input type="password" class="form-control" id="password" name="password" required>
+            </div>
+            <div class="d-grid">
+                <button type="submit" class="btn btn-primary">Login</button>
+            </div>
+        </form>
+        
+        <div class="login-footer">
+            Enter your credentials to access the Image Uploader
+        </div>
+    </div>
+</body>
+</html>

templates/view.html

@@ -0,0 +1,136 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>View Image: {{ file_name }}</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
+    <style>
+        .image-container {
+            background-color: #f8f9fa;
+            padding: 20px;
+            border-radius: 8px;
+            margin-bottom: 30px;
+        }
+        .embed-options {
+            background-color: #fff;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+        }
+        .code-container {
+            background-color: #f5f5f5;
+            padding: 10px;
+            border-radius: 4px;
+            margin-top: 10px;
+            font-family: monospace;
+            font-size: 0.8rem;
+            overflow-x: auto;
+            white-space: nowrap;
+        }
+        .copy-btn {
+            cursor: pointer;
+        }
+    </style>
+</head>
+<body>
+    <div class="container py-5">
+        <div class="d-flex justify-content-between align-items-center mb-4">
+            <h1>Image Details: {{ file_name }}</h1>
+            <a href="/" class="btn btn-outline-primary">Back to Gallery</a>
+        </div>
+        
+        <div class="row">
+            <div class="col-md-8">
+                <div class="image-container">
+                    <img src="{{ image_url }}" class="img-fluid" alt="{{ file_name }}">
+                </div>
+            </div>
+            
+            <div class="col-md-4">
+                <div class="embed-options">
+                    <h3>Embed Options</h3>
+                    
+                    <div class="mb-3">
+                        <h5>1. Direct URL</h5>
+                        <div class="input-group">
+                            <input type="text" id="directUrl" class="form-control" value="{{ embed_url }}" readonly>
+                            <button class="btn btn-outline-secondary copy-btn" data-target="directUrl">Copy</button>
+                        </div>
+                        <small class="text-muted">Use this URL to link directly to the image.</small>
+                    </div>
+                    
+                    <div class="mb-3">
+                        <h5>2. HTML Embed Code</h5>
+                        <div class="code-container" id="htmlEmbed">&lt;img src="{{ embed_url }}" alt="{{ file_name }}" /&gt;</div>
+                        <button class="btn btn-sm btn-outline-secondary mt-2 copy-btn" data-target="htmlEmbed">Copy HTML</button>
+                        <small class="text-muted d-block mt-2">Use this code to embed the image in an HTML page.</small>
+                    </div>
+                    
+                    <div class="mb-3">
+                        <h5>3. Markdown Embed</h5>
+                        <div class="code-container" id="markdownEmbed">![{{ file_name }}]({{ embed_url }})</div>
+                        <button class="btn btn-sm btn-outline-secondary mt-2 copy-btn" data-target="markdownEmbed">Copy Markdown</button>
+                    </div>
+                    
+                    <div class="mt-4">
+                        <button class="btn btn-danger delete-btn" data-filename="{{ file_name }}">Delete Image</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            // Handle copy buttons
+            document.querySelectorAll('.copy-btn').forEach(function(btn) {
+                btn.addEventListener('click', function() {
+                    const targetId = this.dataset.target;
+                    const targetEl = document.getElementById(targetId);
+                    
+                    let textToCopy;
+                    if (targetEl.tagName === 'INPUT') {
+                        textToCopy = targetEl.value;
+                    } else {
+                        textToCopy = targetEl.textContent;
+                    }
+                    
+                    navigator.clipboard.writeText(textToCopy).then(() => {
+                        // Change button text temporarily
+                        const originalText = this.textContent;
+                        this.textContent = 'Copied!';
+                        setTimeout(() => {
+                            this.textContent = originalText;
+                        }, 1500);
+                    }).catch(err => {
+                        console.error('Failed to copy text: ', err);
+                    });
+                });
+            });
+            
+            // Handle delete button
+            document.querySelector('.delete-btn').addEventListener('click', function() {
+                const filename = this.dataset.filename;
+                if (confirm(`Are you sure you want to delete ${filename}?`)) {
+                    fetch(`/delete/${filename}`, {
+                        method: 'DELETE'
+                    })
+                    .then(response => response.json())
+                    .then(data => {
+                        if (data.success) {
+                            window.location.href = '/';
+                        } else {
+                            alert('Failed to delete the image.');
+                        }
+                    })
+                    .catch(error => {
+                        console.error('Error:', error);
+                        alert('An error occurred while deleting the image.');
+                    });
+                }
+            });
+        });
+    </script>
+</body>
+</html>