change layout

app.py

@@ -14,6 +14,7 @@ import secrets
 from starlette.middleware.sessions import SessionMiddleware
 from fastapi.security import OAuth2PasswordRequestForm
 from fastapi.responses import JSONResponse
+import json
 
 # Create FastAPI app
 app = FastAPI(title="Image Uploader")
@@ -28,12 +29,15 @@ app.add_middleware(
 UPLOAD_DIR = Path("static/uploads")
 UPLOAD_DIR.mkdir(parents=True, exist_ok=True)
 
-# Ensure upload directory has proper permissions (critical for Docker containers)
-try:
-    import os
-    os.chmod(UPLOAD_DIR, 0o777)  # Full permissions for uploads directory
-except Exception as e:
-    print(f"Warning: Could not set permissions on uploads directory: {e}")
+# Create metadata directory for storing hashtags
+METADATA_DIR = Path("static/metadata")
+METADATA_DIR.mkdir(parents=True, exist_ok=True)
+METADATA_FILE = METADATA_DIR / "image_metadata.json"
+
+# Initialize metadata file if it doesn't exist
+if not METADATA_FILE.exists():
+    with open(METADATA_FILE, "w") as f:
+        json.dump({}, f)
 
 # Mount static directory
 app.mount("/static", StaticFiles(directory="static"), name="static")
@@ -71,6 +75,42 @@ def verify_auth(request: Request):
         )
     return True
 
+def get_image_metadata():
+    """Get all image metadata including hashtags."""
+    if METADATA_FILE.exists():
+        with open(METADATA_FILE, "r") as f:
+            return json.load(f)
+    return {}
+
+def save_image_metadata(metadata):
+    """Save image metadata to the JSON file."""
+    with open(METADATA_FILE, "w") as f:
+        json.dump(metadata, f)
+
+def add_hashtags_to_image(filename, hashtags, original_filename=None):
+    """Add hashtags to an image."""
+    metadata = get_image_metadata()
+    
+    # If file exists in metadata, update its hashtags, otherwise create new entry
+    if filename in metadata:
+        metadata[filename]["hashtags"] = hashtags
+        if original_filename:
+            metadata[filename]["original_filename"] = original_filename
+    else:
+        metadata_entry = {"hashtags": hashtags, "is_new": True}
+        if original_filename:
+            metadata_entry["original_filename"] = original_filename
+        metadata[filename] = metadata_entry
+    
+    save_image_metadata(metadata)
+
+def mark_image_as_viewed(filename):
+    """Mark an image as viewed (not new)"""
+    metadata = get_image_metadata()
+    if filename in metadata:
+        metadata[filename]["is_new"] = False
+        save_image_metadata(metadata)
+
 @app.get("/login", response_class=HTMLResponse)
 async def login_page(request: Request):
     """Render the login page."""
@@ -102,33 +142,71 @@ async def logout(request: Request):
     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."""
+async def home(request: Request, search: Optional[str] = None, tag: Optional[str] = None):
+    """Render the home page with authentication check and optional search/filter."""
     # Check if user is authenticated
     if not authenticate(request):
         return RedirectResponse(url="/login", status_code=status.HTTP_302_FOUND)
     
-    # Get all uploaded images
+    # Get all uploaded images and their metadata
     uploaded_images = []
+    metadata = get_image_metadata()
     
     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}"
+                
+                # Get hashtags from metadata if available
+                hashtags = []
+                is_new = False
+                original_filename = file.name
+                
+                if file.name in metadata:
+                    hashtags = metadata[file.name].get("hashtags", [])
+                    is_new = metadata[file.name].get("is_new", False)
+                    original_filename = metadata[file.name].get("original_filename", file.name)
+                
+                # If searching/filtering, check if this image should be included
+                if search and search.lower() not in original_filename.lower() and not any(search.lower() in tag.lower() for tag in hashtags):
+                    continue
+                    
+                if tag and tag not in hashtags:
+                    continue
+                
                 uploaded_images.append({
                     "name": file.name,
                     "url": image_url,
-                    "embed_url": f"{request.base_url}static/uploads/{file.name}"
+                    "embed_url": f"{request.base_url}static/uploads/{file.name}",
+                    "hashtags": hashtags,
+                    "is_new": is_new,
+                    "original_filename": original_filename
                 })
     
+    # Get all unique hashtags for the filter dropdown
+    all_hashtags = set()
+    for img_data in metadata.values():
+        if "hashtags" in img_data:
+            all_hashtags.update(img_data["hashtags"])
+    
     return templates.TemplateResponse(
         "index.html", 
-        {"request": request, "uploaded_images": uploaded_images}
+        {
+            "request": request, 
+            "uploaded_images": uploaded_images,
+            "all_hashtags": sorted(list(all_hashtags)),
+            "current_search": search,
+            "current_tag": tag
+        }
     )
 
 @app.post("/upload/")
-async def upload_image(request: Request, file: UploadFile = File(...)):
-    """Handle image upload with authentication check."""
+async def upload_image(
+    request: Request, 
+    files: List[UploadFile] = File(...), 
+    hashtags: str = Form("")
+):
+    """Handle multiple image uploads with hashtags."""
     # Check if user is authenticated
     if not authenticate(request):
         return JSONResponse(
@@ -136,67 +214,199 @@ async def upload_image(request: Request, file: UploadFile = File(...)):
             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")
+    # Process hashtags into a list
+    hashtag_list = []
+    if hashtags:
+        # Split by spaces or commas and remove empty strings/whitespace
+        hashtag_list = [tag.strip() for tag in hashtags.replace(',', ' ').split() if tag.strip()]
     
-    # Generate a unique filename to prevent overwrites
-    unique_filename = f"{uuid.uuid4()}{extension}"
-    file_path = UPLOAD_DIR / unique_filename
+    results = []
+    duplicates = []
     
-    # Save the file
-    try:
-        # Make sure parent directory exists with proper permissions
-        file_path.parent.mkdir(parents=True, exist_ok=True)
-        try:
-            os.chmod(file_path.parent, 0o777)
-        except Exception as e:
-            print(f"Warning: Could not set permissions: {e}")
-            
-        # Save file contents
-        with open(file_path, "wb") as buffer:
+    # First, check for duplicate filenames
+    metadata = get_image_metadata()
+    all_files = {}
+    if UPLOAD_DIR.exists():
+        for file in UPLOAD_DIR.iterdir():
+            if is_valid_image(get_file_extension(file.name)):
+                # Get original filename from metadata if available
+                original_name = file.name
+                if file.name in metadata and "original_filename" in metadata[file.name]:
+                    original_name = metadata[file.name]["original_filename"]
+                all_files[original_name.lower()] = file.name
+    
+    # Check for duplicates in current upload batch
+    for file in files:
+        file_lower = file.filename.lower()
+        if file_lower in all_files:
+            # Found a duplicate
+            duplicates.append({
+                "new_file": file.filename,
+                "existing_file": all_files[file_lower],
+                "original_name": file.filename
+            })
+    
+    # If we found duplicates, return them to the frontend for confirmation
+    if duplicates:
+        return {
+            "success": False,
+            "duplicates": duplicates,
+            "message": "Duplicate filenames detected",
+            "action_required": "confirm_replace"
+        }
+    
+    # No duplicates, proceed with upload
+    for file in files:
+        # Check if the file is an image
+        extension = get_file_extension(file.filename)
+        if not is_valid_image(extension):
+            continue  # Skip non-image files
+        
+        # Preserve original filename in metadata but make it safe for filesystem
+        original_filename = file.filename
+        
+        # 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)
-            
-        # Set permissions on the file itself
-        try:
-            os.chmod(file_path, 0o666)  # Read/write for everyone
-        except Exception as e:
-            print(f"Warning: Could not set file permissions: {e}")
-            
-    except Exception as e:
-        raise HTTPException(
-            status_code=500, 
-            detail=f"Failed to save file: {str(e)}"
+        
+        # Save hashtags and original filename
+        add_hashtags_to_image(unique_filename, hashtag_list, original_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')
+        
+        results.append({
+            "success": True,
+            "file_name": unique_filename,
+            "original_filename": original_filename,
+            "file_url": f"/static/uploads/{unique_filename}",
+            "full_url": f"{request.base_url}static/uploads/{unique_filename}",
+            "embed_html": f'<img src="{request.base_url}static/uploads/{unique_filename}" alt="{original_filename}" />',
+            "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="{original_filename}" />',
+            "hashtags": hashtag_list
+        })
+    
+    if len(results) == 1:
+        return results[0]
+    else:
+        return {"success": True, "uploaded_count": len(results), "files": results}
+
+@app.post("/upload-with-replace/")
+async def upload_with_replace(
+    request: Request, 
+    files: List[UploadFile] = File(...),
+    hashtags: str = Form(""),
+    replace_files: str = Form("")
+):
+    """Handle upload with replacement of duplicate files."""
+    # Check if user is authenticated
+    if not authenticate(request):
+        return JSONResponse(
+            status_code=status.HTTP_401_UNAUTHORIZED,
+            content={"detail": "Not authenticated"}
         )
     
-    # 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" />'
-    }
+    # Process hashtags into a list
+    hashtag_list = []
+    if hashtags:
+        # Split by spaces or commas and remove empty strings/whitespace
+        hashtag_list = [tag.strip() for tag in hashtags.replace(',', ' ').split() if tag.strip()]
+    
+    # Parse the replacement files JSON
+    files_to_replace = []
+    if replace_files:
+        try:
+            files_to_replace = json.loads(replace_files)
+        except json.JSONDecodeError:
+            files_to_replace = []
+    
+    # Create a map of original names to replacement decisions
+    replace_map = {item["original_name"].lower(): item["existing_file"] for item in files_to_replace}
+    
+    results = []
+    
+    for file in files:
+        # Check if the file is an image
+        extension = get_file_extension(file.filename)
+        if not is_valid_image(extension):
+            continue  # Skip non-image files
+        
+        # Preserve original filename in metadata
+        original_filename = file.filename
+        file_lower = original_filename.lower()
+        
+        # Check if this file should replace an existing one
+        if file_lower in replace_map:
+            # Delete the old file
+            old_file = UPLOAD_DIR / replace_map[file_lower]
+            if old_file.exists():
+                os.remove(old_file)
+                
+                # Remove from metadata
+                metadata = get_image_metadata()
+                if replace_map[file_lower] in metadata:
+                    del metadata[replace_map[file_lower]]
+                    save_image_metadata(metadata)
+        
+        # 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)
+        
+        # Save hashtags and original filename
+        add_hashtags_to_image(unique_filename, hashtag_list, original_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')
+        
+        results.append({
+            "success": True,
+            "file_name": unique_filename,
+            "original_filename": original_filename,
+            "file_url": f"/static/uploads/{unique_filename}",
+            "full_url": f"{request.base_url}static/uploads/{unique_filename}",
+            "embed_html": f'<img src="{request.base_url}static/uploads/{unique_filename}" alt="{original_filename}" />',
+            "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="{original_filename}" />',
+            "hashtags": hashtag_list
+        })
+    
+    if len(results) == 1:
+        return results[0]
+    else:
+        return {"success": True, "uploaded_count": len(results), "files": results}
 
 @app.get("/view/{file_name}")
 async def view_image(request: Request, file_name: str):
@@ -210,19 +420,59 @@ async def view_image(request: Request, file_name: str):
     if not file_path.exists():
         raise HTTPException(status_code=404, detail="Image not found")
     
+    # Mark image as viewed (not new)
+    mark_image_as_viewed(file_name)
+    
     image_url = f"/static/uploads/{file_name}"
     embed_url = f"{request.base_url}static/uploads/{file_name}"
     
+    # Get metadata
+    metadata = get_image_metadata()
+    hashtags = []
+    original_filename = file_name
+    
+    if file_name in metadata:
+        hashtags = metadata[file_name].get("hashtags", [])
+        original_filename = metadata[file_name].get("original_filename", file_name)
+    
     return templates.TemplateResponse(
         "view.html", 
         {
             "request": request, 
             "image_url": image_url,
             "file_name": file_name,
-            "embed_url": embed_url
+            "original_filename": original_filename,
+            "embed_url": embed_url,
+            "hashtags": hashtags
         }
     )
 
+@app.post("/update-hashtags/{file_name}")
+async def update_hashtags(request: Request, file_name: str, hashtags: str = Form("")):
+    """Update hashtags for an image."""
+    # 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")
+    
+    # Process hashtags
+    hashtag_list = []
+    if hashtags:
+        hashtag_list = [tag.strip() for tag in hashtags.replace(',', ' ').split() if tag.strip()]
+    
+    # Update hashtags in metadata
+    add_hashtags_to_image(file_name, hashtag_list)
+    
+    # Redirect back to the image view
+    return RedirectResponse(url=f"/view/{file_name}", status_code=status.HTTP_303_SEE_OTHER)
+
 @app.delete("/delete/{file_name}")
 async def delete_image(request: Request, file_name: str):
     """Delete an image with authentication check."""
@@ -238,8 +488,15 @@ async def delete_image(request: Request, file_name: str):
     if not file_path.exists():
         raise HTTPException(status_code=404, detail="Image not found")
     
+    # Delete the file
     os.remove(file_path)
     
+    # Remove from metadata
+    metadata = get_image_metadata()
+    if file_name in metadata:
+        del metadata[file_name]
+        save_image_metadata(metadata)
+    
     return {"success": True, "message": f"Image {file_name} has been deleted"}
 
 # Health check endpoint for Hugging Face Spaces
@@ -249,4 +506,7 @@ async def health_check():
 
 if __name__ == "__main__":
     # For local development
-    uvicorn.run("app:app", host="127.0.0.1", port=8000, reload=True)
+    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)

templates/index.html

@@ -6,132 +6,464 @@
     <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">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
+        :root {
+            --primary-color: #4361ee;
+            --secondary-color: #3f37c9;
+            --accent-color: #4cc9f0;
+            --success-color: #22cc88;
+            --light-bg: #f8f9fa;
+            --dark-text: #212529;
+            --card-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
+            --hover-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
+        }
+        
+        body {
+            background-color: #f5f7fa;
+            color: var(--dark-text);
+            font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
+            padding-bottom: 40px;
+        }
+        
+        .navbar {
+            background-color: white;
+            box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
+            padding: 15px 0;
+            margin-bottom: 30px;
+        }
+        
+        .navbar-brand {
+            font-weight: 600;
+            color: var(--primary-color);
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        
+        .navbar-brand i {
+            font-size: 1.5em;
+        }
+        
+        .container {
+            max-width: 1200px;
+        }
+        
+        .card {
+            border: none;
+            border-radius: 12px;
+            box-shadow: var(--card-shadow);
+            transition: all 0.3s ease;
+        }
+        
+        .section-title {
+            margin-bottom: 20px;
+            font-weight: 600;
+            color: var(--dark-text);
+            border-left: 4px solid var(--primary-color);
+            padding-left: 12px;
+        }
+        
         .upload-container {
-            background-color: #f8f9fa;
+            background-color: white;
+            padding: 25px;
+            border-radius: 12px;
+            margin-bottom: 30px;
+            box-shadow: var(--card-shadow);
+        }
+        
+        .gallery-container {
+            background-color: white;
+            padding: 25px;
+            border-radius: 12px;
+            margin-bottom: 30px;
+            box-shadow: var(--card-shadow);
+        }
+        
+        .search-container {
+            background-color: #f5f7fa;
             padding: 20px;
             border-radius: 8px;
-            margin-bottom: 30px;
+            margin-bottom: 20px;
         }
+        
         .image-card {
-            margin-bottom: 20px;
-            transition: transform 0.3s;
+            margin-bottom: 25px;
+            border-radius: 12px;
+            overflow: hidden;
         }
+        
         .image-card:hover {
             transform: translateY(-5px);
-            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
-        }
-        .copy-btn {
-            cursor: pointer;
+            box-shadow: var(--hover-shadow);
         }
+        
         .image-preview {
             max-height: 200px;
             object-fit: cover;
             width: 100%;
+            height: 200px;
         }
-        .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;
+        
+        .card-body {
+            padding: 20px;
+        }
+        
+        .card-title {
+            font-weight: 600;
+            margin-bottom: 15px;
         }
+        
         .hidden {
             display: none;
         }
+        
         #uploadProgress {
-            margin-top: 10px;
-        }
-        .success-message {
-            background-color: #d1e7dd;
-            color: #0f5132;
-            padding: 15px;
-            border-radius: 4px;
             margin-top: 15px;
+            height: 10px;
+            border-radius: 5px;
+        }
+        
+        .progress-bar {
+            background-color: var(--primary-color);
+        }
+        
+        .form-control, .form-select {
+            border-radius: 8px;
+            padding: 10px 15px;
+            border: 1px solid #e0e0e0;
+        }
+        
+        .form-control:focus, .form-select:focus {
+            box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.15);
+            border-color: var(--primary-color);
+        }
+        
+        .btn {
+            border-radius: 8px;
+            padding: 10px 20px;
+            font-weight: 500;
+        }
+        
+        .btn-primary {
+            background-color: var(--primary-color);
+            border-color: var(--primary-color);
+        }
+        
+        .btn-primary:hover, .btn-primary:focus {
+            background-color: var(--secondary-color);
+            border-color: var(--secondary-color);
+        }
+        
+        .btn-outline-primary {
+            color: var(--primary-color);
+            border-color: var(--primary-color);
+        }
+        
+        .btn-outline-primary:hover, .btn-outline-primary:focus,
+        .btn-check:checked + .btn-outline-primary {
+            background-color: var(--primary-color);
+            border-color: var(--primary-color);
+            color: white;
+        }
+        
+        .btn-danger {
+            background-color: #e63946;
+            border-color: #e63946;
+        }
+        
+        .btn-danger:hover, .btn-danger:focus {
+            background-color: #d00000;
+            border-color: #d00000;
+        }
+        
+        .hashtag {
+            display: inline-block;
+            background-color: rgba(67, 97, 238, 0.1);
+            padding: 5px 12px;
+            border-radius: 20px;
+            font-size: 0.8rem;
+            margin-right: 5px;
+            margin-bottom: 5px;
+            color: var(--primary-color);
+            transition: all 0.2s ease;
+            font-weight: 500;
+            text-decoration: none;
+        }
+        
+        .hashtag:hover {
+            background-color: rgba(67, 97, 238, 0.2);
+            color: var(--primary-color);
+            text-decoration: none;
+        }
+        
+        .new-badge {
+            position: absolute;
+            top: 15px;
+            right: 15px;
+            background-color: var(--success-color);
+            color: white;
+            padding: 5px 10px;
+            border-radius: 20px;
+            font-size: 0.7rem;
+            font-weight: 600;
+            z-index: 2;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+        }
+        
+        .layout-controls {
+            margin-bottom: 15px;
+        }
+        
+        /* Custom 5-column layout */
+        .col-5-layout {
+            position: relative;
+            width: 100%;
+            padding-right: 15px;
+            padding-left: 15px;
+        }
+        
+        @media (min-width: 992px) {
+            .col-5-layout {
+                flex: 0 0 20%;
+                max-width: 20%;
+            }
+        }
+        
+        @media (min-width: 768px) and (max-width: 991.98px) {
+            .col-5-layout {
+                flex: 0 0 25%;
+                max-width: 25%;
+            }
+        }
+        
+        @media (max-width: 767.98px) {
+            .col-5-layout {
+                flex: 0 0 50%;
+                max-width: 50%;
+            }
+        }
+        
+        .card-img-overlay {
+            background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 50%);
+            transition: all 0.3s ease;
+        }
+        
+        .toast-container {
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            z-index: 9999;
+        }
+        
+        .toast {
+            min-width: 250px;
+            background-color: white;
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
+            border: none;
+            border-radius: 8px;
+        }
+        
+        .toast-header {
+            border-radius: 8px 8px 0 0;
+        }
+        
+        .action-buttons {
+            display: flex;
+            gap: 8px;
+        }
+        
+        .btn-sm {
+            padding: 5px 10px;
+            font-size: 0.8rem;
+        }
+        
+        .empty-state {
+            text-align: center;
+            padding: 60px 0;
+        }
+        
+        .empty-state i {
+            font-size: 3rem;
+            color: #dee2e6;
+            margin-bottom: 20px;
+        }
+        
+        .empty-state p {
+            color: #6c757d;
+            font-size: 1.1rem;
+        }
+        
+        .gallery-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+        }
+        
+        .site-footer {
+            background-color: white;
+            padding: 20px 0;
+            text-align: center;
+            margin-top: 40px;
+            border-top: 1px solid #eaeaea;
+            color: #6c757d;
+            font-size: 0.9rem;
         }
     </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>
+    <nav class="navbar navbar-expand-lg navbar-light">
+        <div class="container">
+            <a class="navbar-brand" href="/">
+                <i class="fas fa-photo-film"></i>
+                Image Uploader
+            </a>
+            <div class="ms-auto">
+                <a href="/logout" class="btn btn-outline-danger">
+                    <i class="fas fa-sign-out-alt me-2"></i>Logout
+                </a>
+            </div>
         </div>
-        
+    </nav>
+    
+    <div class="container">
+        <!-- Upload Section (Top) -->
         <div class="upload-container">
-            <h2>Upload New Image</h2>
+            <h3 class="section-title">Upload Images</h3>
             <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 class="row">
+                    <div class="col-md-8">
+                        <div class="mb-3">
+                            <label for="files" class="form-label">
+                                <i class="fas fa-images me-2"></i>Select images
+                            </label>
+                            <input class="form-control" type="file" id="files" name="files" accept="image/*" multiple>
+                            <small class="text-muted">You can select multiple images</small>
+                        </div>
+                    </div>
+                    <div class="col-md-4">
+                        <div class="mb-3">
+                            <label for="hashtags" class="form-label">
+                                <i class="fas fa-hashtag me-2"></i>Add hashtags
+                            </label>
+                            <input type="text" class="form-control" id="hashtags" name="hashtags" placeholder="nature travel photography">
+                            <small class="text-muted">Separate with spaces or commas</small>
+                        </div>
+                    </div>
                 </div>
-                <button type="submit" class="btn btn-primary">Upload & Generate Links</button>
+                <button type="submit" class="btn btn-primary">
+                    <i class="fas fa-cloud-upload-alt me-2"></i>Upload Images
+                </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>
+        
+        <!-- Gallery Section (Bottom with integrated search) -->
+        <div class="gallery-container">
+            <div class="gallery-header">
+                <h3 class="section-title mb-0">Your Gallery</h3>
+                <div class="layout-controls btn-group" role="group">
+                    <input type="radio" class="btn-check" name="layout" id="layout3" autocomplete="off" checked>
+                    <label class="btn btn-outline-primary" for="layout3"><i class="fas fa-th-large"></i></label>
+                    
+                    <input type="radio" class="btn-check" name="layout" id="layout4" autocomplete="off">
+                    <label class="btn btn-outline-primary" for="layout4"><i class="fas fa-th"></i></label>
+                    
+                    <input type="radio" class="btn-check" name="layout" id="layout5" autocomplete="off">
+                    <label class="btn btn-outline-primary" for="layout5"><i class="fas fa-grip-horizontal"></i></label>
                 </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>
+            
+            <!-- Search and Filter (Inside Gallery) -->
+            <div class="search-container">
+                <form id="searchForm" method="get" action="/" class="row g-3">
+                    <div class="col-md-6">
+                        <label for="search" class="form-label">
+                            <i class="fas fa-search me-2"></i>Search by name or hashtag
+                        </label>
+                        <input type="text" class="form-control" id="search" name="search" value="{{ current_search or '' }}" placeholder="Search...">
                     </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 class="col-md-6">
+                        <label for="tag" class="form-label">
+                            <i class="fas fa-filter me-2"></i>Filter by hashtag
+                        </label>
+                        <select class="form-select" id="tag" name="tag">
+                            <option value="">All hashtags</option>
+                            {% for tag in all_hashtags %}
+                            <option value="{{ tag }}" {% if current_tag == tag %}selected{% endif %}>{{ tag }}</option>
+                            {% endfor %}
+                        </select>
+                    </div>
+                </form>
             </div>
-        </div>
-        
-        <div class="row">
-            <div class="col-12">
-                <h2 class="mb-4">Your Uploaded Images</h2>
-                
+            
+            <!-- Image Gallery -->
+            <div id="gallery">
                 {% if not uploaded_images %}
-                <div class="alert alert-info">
-                    No images have been uploaded yet. Upload your first image above!
+                <div class="empty-state">
+                    <i class="fas fa-images"></i>
+                    <h4>No images yet</h4>
+                    <p>Upload your first image to get started!</p>
                 </div>
                 {% else %}
-                <div class="row">
+                <div class="row" id="imageGrid">
+                    {# First, render new images #}
                     {% 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>
+                        {% if image.is_new %}
+                        <div class="image-item col-md-4">
+                            <div class="card image-card">
+                                <span class="new-badge">NEW</span>
+                                <img src="{{ image.url }}" class="card-img-top image-preview" alt="{{ image.original_filename }}">
+                                <div class="card-body">
+                                    <h5 class="card-title text-truncate" title="{{ image.original_filename }}">{{ image.original_filename }}</h5>
+                                    <div class="hashtags mb-3">
+                                        {% for tag in image.hashtags %}
+                                        <a href="/?tag={{ tag }}" class="hashtag">#{{ tag }}</a>
+                                        {% endfor %}
+                                    </div>
+                                    <div class="action-buttons d-flex justify-content-between mt-3">
+                                        <a href="/view/{{ image.name }}" class="btn btn-sm btn-primary">
+                                            <i class="fas fa-eye me-1"></i> View
+                                        </a>
+                                        <button class="btn btn-sm btn-danger delete-btn" data-filename="{{ image.name }}">
+                                            <i class="fas fa-trash-alt me-1"></i> Delete
+                                        </button>
+                                    </div>
                                 </div>
                             </div>
                         </div>
-                    </div>
+                        {% endif %}
+                    {% endfor %}
+                    
+                    {# Then, render viewed images #}
+                    {% for image in uploaded_images %}
+                        {% if not image.is_new %}
+                        <div class="image-item col-md-4">
+                            <div class="card image-card">
+                                <img src="{{ image.url }}" class="card-img-top image-preview" alt="{{ image.original_filename }}">
+                                <div class="card-body">
+                                    <h5 class="card-title text-truncate" title="{{ image.original_filename }}">{{ image.original_filename }}</h5>
+                                    <div class="hashtags mb-3">
+                                        {% for tag in image.hashtags %}
+                                        <a href="/?tag={{ tag }}" class="hashtag">#{{ tag }}</a>
+                                        {% endfor %}
+                                    </div>
+                                    <div class="action-buttons d-flex justify-content-between mt-3">
+                                        <a href="/view/{{ image.name }}" class="btn btn-sm btn-primary">
+                                            <i class="fas fa-eye me-1"></i> View
+                                        </a>
+                                        <button class="btn btn-sm btn-danger delete-btn" data-filename="{{ image.name }}">
+                                            <i class="fas fa-trash-alt me-1"></i> Delete
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        {% endif %}
                     {% endfor %}
                 </div>
                 {% endif %}
@@ -139,26 +471,233 @@
         </div>
     </div>
 
+    <!-- Footer -->
+    <footer class="site-footer">
+        <div class="container">
+            <p class="mb-0">©2025 Detomo. All rights reserved</p>
+        </div>
+    </footer>
+
+    <!-- Toast container for notifications -->
+    <div class="toast-container">
+        <div id="uploadSuccessToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
+            <div class="toast-header bg-success text-white">
+                <i class="fas fa-check-circle me-2"></i>
+                <strong class="me-auto">Success</strong>
+                <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+            </div>
+            <div class="toast-body" id="toastMessage">
+                Images uploaded successfully!
+            </div>
+        </div>
+    </div>
+
+    <!-- Modal for Delete Confirmation -->
+    <div class="modal fade" id="deleteConfirmModal" tabindex="-1" aria-labelledby="deleteConfirmModalLabel" aria-hidden="true">
+        <div class="modal-dialog modal-dialog-centered">
+            <div class="modal-content">
+                <div class="modal-header border-0">
+                    <h5 class="modal-title" id="deleteConfirmModalLabel">Confirm Deletion</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body text-center py-4">
+                    <div class="mb-4">
+                        <i class="fas fa-exclamation-triangle text-danger" style="font-size: 3.5rem;"></i>
+                    </div>
+                    <h5 class="mb-3">Are you sure you want to delete this image?</h5>
+                    <p class="text-muted mb-0">This action cannot be undone.</p>
+                </div>
+                <div class="modal-footer border-0 justify-content-center">
+                    <button type="button" class="btn btn-light px-4" data-bs-dismiss="modal">
+                        <i class="fas fa-times me-2"></i>Cancel
+                    </button>
+                    <button type="button" class="btn btn-danger px-4" id="confirmDeleteBtn">
+                        <i class="fas fa-trash-alt me-2"></i>Delete
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <!-- Modal for No Files Selected -->
+    <div class="modal fade" id="noFilesModal" tabindex="-1" aria-labelledby="noFilesModalLabel" aria-hidden="true">
+        <div class="modal-dialog modal-dialog-centered">
+            <div class="modal-content">
+                <div class="modal-header border-0">
+                    <h5 class="modal-title" id="noFilesModalLabel">No Files Selected</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body text-center py-4">
+                    <div class="mb-4">
+                        <i class="fas fa-images text-warning" style="font-size: 3.5rem;"></i>
+                    </div>
+                    <h5 class="mb-2">Please select at least one image file</h5>
+                    <p class="text-muted">You need to browse and select images before uploading.</p>
+                </div>
+                <div class="modal-footer border-0 justify-content-center">
+                    <button type="button" class="btn btn-primary px-4" data-bs-dismiss="modal">
+                        <i class="fas fa-check me-2"></i>OK
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Modal for Duplicate Filename Confirmation -->
+    <div class="modal fade" id="duplicateFilesModal" tabindex="-1" aria-labelledby="duplicateFilesModalLabel" aria-hidden="true">
+        <div class="modal-dialog modal-dialog-centered modal-lg">
+            <div class="modal-content">
+                <div class="modal-header border-0">
+                    <h5 class="modal-title" id="duplicateFilesModalLabel">Duplicate Filenames Detected</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body py-4">
+                    <div class="text-center mb-4">
+                        <i class="fas fa-exclamation-circle text-warning" style="font-size: 3.5rem;"></i>
+                        <h5 class="mt-3 mb-4">Some files have the same names as existing images</h5>
+                        <p class="text-muted mb-4">Please confirm if you want to replace the existing images with the new ones</p>
+                    </div>
+                    
+                    <div class="table-responsive">
+                        <table class="table table-borderless align-middle" id="duplicateFilesTable">
+                            <thead class="table-light">
+                                <tr>
+                                    <th>Replace</th>
+                                    <th>New Image</th>
+                                    <th>Will Replace</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <!-- Populated dynamically -->
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+                <div class="modal-footer border-0 justify-content-center">
+                    <button type="button" class="btn btn-light px-4" data-bs-dismiss="modal">
+                        <i class="fas fa-times me-2"></i>Cancel Upload
+                    </button>
+                    <button type="button" class="btn btn-primary px-4" id="confirmReplaceBtn">
+                        <i class="fas fa-check me-2"></i>Continue With Selected Replacements
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
     <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');
+            const toast = new bootstrap.Toast(document.getElementById('uploadSuccessToast'), {
+                delay: 3000
+            });
+            
+            // Store files and hashtags for potential reuse if duplicates are found
+            let currentFiles = null;
+            let currentHashtags = '';
+            let duplicateFiles = [];
+            
+            // Instant search functionality
+            const searchInput = document.getElementById('search');
+            const tagSelect = document.getElementById('tag');
+            const searchForm = document.getElementById('searchForm');
+            
+            // Handle search input changes
+            searchInput.addEventListener('input', function() {
+                // Add small delay to prevent too many requests while typing
+                clearTimeout(searchInput.timer);
+                searchInput.timer = setTimeout(() => {
+                    searchForm.submit();
+                }, 500); // Wait 500ms after typing stops
+            });
+            
+            // Handle tag selection changes
+            tagSelect.addEventListener('change', function() {
+                searchForm.submit();
+            });
+            
+            // Handle layout controls
+            const layoutControls = document.querySelectorAll('input[name="layout"]');
+            const imageGrid = document.getElementById('imageGrid');
+            const imageItems = document.querySelectorAll('.image-item');
+            
+            function updateLayout(columns) {
+                // First, remove all column classes from all items
+                imageItems.forEach(item => {
+                    item.classList.remove('col-md-3', 'col-md-4', 'col-md-6', 'col-5-layout');
+                });
+                
+                // Then apply the new column class
+                imageItems.forEach(item => {
+                    if (columns === 3) {
+                        item.classList.add('col-md-4'); // 3 per row (4/12 width)
+                    } else if (columns === 4) {
+                        item.classList.add('col-md-3'); // 4 per row (3/12 width)
+                    } else if (columns === 5) {
+                        item.classList.add('col-5-layout'); // Custom 5 per row
+                    }
+                });
+                
+                // Save the preference to localStorage
+                localStorage.setItem('preferredLayout', columns);
+            }
+            
+            // Initialize layout based on localStorage or default to 3 columns
+            const savedLayout = localStorage.getItem('preferredLayout') || '3';
+            const initialLayout = parseInt(savedLayout);
+            
+            // Make sure the correct radio button is checked
+            const layoutButton = document.getElementById(`layout${initialLayout}`);
+            if (layoutButton) {
+                layoutButton.checked = true;
+                updateLayout(initialLayout);
+            } else {
+                // Fallback to layout3 if saved layout is invalid
+                document.getElementById('layout3').checked = true;
+                updateLayout(3);
+            }
+            
+            // Add event listeners to layout controls
+            layoutControls.forEach(control => {
+                control.addEventListener('change', function() {
+                    let columns = 3; // Default
+                    
+                    if (this.id === 'layout3') columns = 3;
+                    else if (this.id === 'layout4') columns = 4;
+                    else if (this.id === 'layout5') columns = 5;
+                    
+                    updateLayout(columns);
+                });
+            });
             
             // 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.');
+                const filesInput = document.getElementById('files');
+                if (!filesInput.files.length) {
+                    // Show the no files modal instead of alert
+                    const noFilesModal = new bootstrap.Modal(document.getElementById('noFilesModal'));
+                    noFilesModal.show();
                     return;
                 }
                 
-                const file = fileInput.files[0];
+                // Store current files and hashtags in case we need to handle duplicates
+                currentFiles = filesInput.files;
+                currentHashtags = document.getElementById('hashtags').value;
+                
                 const formData = new FormData();
-                formData.append('file', file);
+                
+                // Add all files
+                for (let i = 0; i < filesInput.files.length; i++) {
+                    formData.append('files', filesInput.files[i]);
+                }
+                
+                // Add hashtags
+                formData.append('hashtags', currentHashtags);
                 
                 // Show progress
                 uploadProgress.classList.remove('hidden');
@@ -174,36 +713,49 @@
                 });
                 
                 xhr.addEventListener('load', function() {
+                    // Hide progress bar
+                    uploadProgress.classList.add('hidden');
+                    
                     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');
+                        // Check if we need to handle duplicates
+                        if (response.success === false && response.action_required === 'confirm_replace') {
+                            // Store the duplicates
+                            duplicateFiles = response.duplicates;
+                            
+                            // Populate the duplicate files table
+                            const tableBody = document.querySelector('#duplicateFilesTable tbody');
+                            tableBody.innerHTML = '';
+                            
+                            duplicateFiles.forEach(function(file, index) {
+                                const row = document.createElement('tr');
+                                row.innerHTML = `
+                                    <td>
+                                        <div class="form-check">
+                                            <input class="form-check-input replace-checkbox" type="checkbox" 
+                                                   value="${file.existing_file}" 
+                                                   id="replace-check-${index}" 
+                                                   data-original="${file.original_name}" checked>
+                                        </div>
+                                    </td>
+                                    <td><strong>${file.new_file}</strong></td>
+                                    <td>${file.existing_file}</td>
+                                `;
+                                tableBody.appendChild(row);
+                            });
+                            
+                            // Show the duplicate files modal
+                            const duplicateModal = new bootstrap.Modal(document.getElementById('duplicateFilesModal'));
+                            duplicateModal.show();
+                            return;
+                        }
                         
-                        // 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);
+                        // Normal successful upload
+                        handleSuccessfulUpload(response);
                     } else {
                         alert('Upload failed. Please try again.');
                     }
-                    
-                    uploadProgress.classList.add('hidden');
                 });
                 
                 xhr.addEventListener('error', function() {
@@ -215,54 +767,131 @@
                 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);
+            // Handle confirmation of file replacements
+            document.getElementById('confirmReplaceBtn').addEventListener('click', function() {
+                // Get selected replacements
+                const checkboxes = document.querySelectorAll('.replace-checkbox:checked');
+                const filesToReplace = Array.from(checkboxes).map(function(checkbox) {
+                    return {
+                        existing_file: checkbox.value,
+                        original_name: checkbox.dataset.original
+                    };
+                });
+                
+                // Hide the modal
+                const duplicateModal = bootstrap.Modal.getInstance(document.getElementById('duplicateFilesModal'));
+                duplicateModal.hide();
+                
+                // Create a new FormData with the current files
+                const formData = new FormData();
+                
+                // Add current files (those that we stored earlier)
+                for (let i = 0; i < currentFiles.length; i++) {
+                    formData.append('files', currentFiles[i]);
+                }
+                
+                // Add hashtags
+                formData.append('hashtags', currentHashtags);
+                
+                // Add replacement information
+                formData.append('replace_files', JSON.stringify(filesToReplace));
+                
+                // Show progress again
+                uploadProgress.classList.remove('hidden');
+                progressBar.style.width = '0%';
+                
+                // Send the request to the replacement endpoint
+                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() {
+                    // Hide progress bar
+                    uploadProgress.classList.add('hidden');
                     
-                    let textToCopy;
-                    if (targetEl.tagName === 'INPUT') {
-                        textToCopy = targetEl.value;
+                    if (xhr.status === 200) {
+                        const response = JSON.parse(xhr.responseText);
+                        handleSuccessfulUpload(response);
                     } else {
-                        // For base64, we have the full code in the data attribute
-                        textToCopy = targetEl.dataset.fullCode || targetEl.textContent;
+                        alert('Upload failed. Please try again.');
                     }
-                    
-                    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);
-                    });
                 });
+                
+                xhr.addEventListener('error', function() {
+                    alert('Upload failed. Please try again.');
+                    uploadProgress.classList.add('hidden');
+                });
+                
+                xhr.open('POST', '/upload-with-replace/');
+                xhr.send(formData);
             });
             
+            // Function to handle successful upload
+            function handleSuccessfulUpload(response) {
+                // Check if multiple files or single file
+                let uploadCount = 1;
+                if (response.files) {
+                    uploadCount = response.uploaded_count;
+                }
+                
+                // Show success toast
+                document.getElementById('toastMessage').textContent = 
+                    `Successfully uploaded ${uploadCount} image${uploadCount > 1 ? 's' : ''}!`;
+                toast.show();
+                
+                // Reset form for next upload
+                uploadForm.reset();
+                currentFiles = null;
+                currentHashtags = '';
+                
+                // Scroll to gallery section
+                document.getElementById('gallery').scrollIntoView({ behavior: 'smooth' });
+                
+                // Refresh the page after a short delay to show the new images
+                setTimeout(() => {
+                    window.location.reload();
+                }, 1000);
+            }
+            
             // 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.');
-                        });
+                    
+                    // Store the filename for later use
+                    document.getElementById('confirmDeleteBtn').dataset.filename = filename;
+                    
+                    // Show the delete confirmation modal
+                    const deleteModal = new bootstrap.Modal(document.getElementById('deleteConfirmModal'));
+                    deleteModal.show();
+                });
+            });
+            
+            // Handle delete confirmation
+            document.getElementById('confirmDeleteBtn').addEventListener('click', function() {
+                const filename = this.dataset.filename;
+                const deleteModal = bootstrap.Modal.getInstance(document.getElementById('deleteConfirmModal'));
+                
+                fetch(`/delete/${filename}`, {
+                    method: 'DELETE'
+                })
+                .then(response => response.json())
+                .then(data => {
+                    if (data.success) {
+                        deleteModal.hide();
+                        window.location.reload();
+                    } else {
+                        alert('Failed to delete the image.');
                     }
+                })
+                .catch(error => {
+                    console.error('Error:', error);
+                    alert('An error occurred while deleting the image.');
                 });
             });
         });

templates/login.html

@@ -6,70 +6,154 @@
     <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">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
+        :root {
+            --primary-color: #4361ee;
+            --secondary-color: #3f37c9;
+            --accent-color: #4cc9f0;
+            --success-color: #22cc88;
+            --light-bg: #f8f9fa;
+            --dark-text: #212529;
+            --card-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
+            --hover-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
+        }
+        
         body {
-            background-color: #f5f5f5;
-            height: 100vh;
+            background-color: #f5f7fa;
+            color: var(--dark-text);
+            font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
+            min-height: 100vh;
             display: flex;
             align-items: center;
             justify-content: center;
         }
+        
         .login-container {
-            max-width: 400px;
+            max-width: 420px;
+            width: 100%;
             padding: 40px;
-            background: white;
-            border-radius: 10px;
-            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+            background-color: white;
+            border-radius: 12px;
+            box-shadow: var(--card-shadow);
+            margin: 20px;
         }
-        .login-title {
+        
+        .login-header {
             text-align: center;
             margin-bottom: 30px;
-            color: #1565C0;
         }
-        .login-form {
+        
+        .login-logo {
             margin-bottom: 20px;
+            font-size: 3rem;
+            color: var(--primary-color);
+        }
+        
+        .login-title {
+            font-weight: 600;
+            color: var(--dark-text);
+            margin-bottom: 10px;
         }
+        
+        .login-form {
+            margin-bottom: 25px;
+        }
+        
         .error-message {
-            background-color: #f8d7da;
-            color: #721c24;
-            padding: 10px;
-            border-radius: 4px;
+            color: #e63946;
             margin-bottom: 20px;
+            padding: 10px;
+            background-color: rgba(230, 57, 70, 0.1);
+            border-radius: 8px;
+            font-size: 0.9rem;
+        }
+        
+        .form-control {
+            border-radius: 8px;
+            padding: 12px 15px;
+            border: 1px solid #e0e0e0;
+            background-color: #f8f9fa;
+        }
+        
+        .form-control:focus {
+            box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.15);
+            border-color: var(--primary-color);
+        }
+        
+        .btn {
+            border-radius: 8px;
+            padding: 12px 20px;
+            font-weight: 500;
+        }
+        
+        .btn-primary {
+            background-color: var(--primary-color);
+            border-color: var(--primary-color);
+        }
+        
+        .btn-primary:hover, .btn-primary:focus {
+            background-color: var(--secondary-color);
+            border-color: var(--secondary-color);
+        }
+        
+        .form-label {
+            font-weight: 500;
+            margin-bottom: 8px;
+        }
+        
+        .input-group-text {
+            background-color: #f5f7fa;
+            border-color: #e0e0e0;
+            color: #6c757d;
         }
+        
         .login-footer {
             text-align: center;
-            margin-top: 20px;
             color: #6c757d;
-            font-size: 0.9rem;
+            font-size: 0.85rem;
+            margin-top: 20px;
         }
     </style>
 </head>
 <body>
     <div class="login-container">
-        <h2 class="login-title">🖼️ Image Uploader</h2>
+        <div class="login-header">
+            <div class="login-logo">
+                <i class="fas fa-photo-film"></i>
+            </div>
+            <h1 class="login-title">Image Uploader</h1>
+            <p class="text-muted">Sign in to continue</p>
+        </div>
         
         {% if error %}
         <div class="error-message">
-            {{ error }}
+            <i class="fas fa-exclamation-circle me-2"></i>{{ 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 class="input-group">
+                    <span class="input-group-text"><i class="fas fa-user"></i></span>
+                    <input type="text" class="form-control" id="username" name="username" required>
+                </div>
             </div>
-            <div class="mb-3">
+            <div class="mb-4">
                 <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 class="input-group">
+                    <span class="input-group-text"><i class="fas fa-lock"></i></span>
+                    <input type="password" class="form-control" id="password" name="password" required>
+                </div>
             </div>
+            <button type="submit" class="btn btn-primary w-100">
+                <i class="fas fa-sign-in-alt me-2"></i>Login
+            </button>
         </form>
         
         <div class="login-footer">
-            Enter your credentials to access the Image Uploader
+            <small>©2025 Detomo. All rights reserved</small>
         </div>
     </div>
 </body>

templates/view.html

@@ -3,84 +3,327 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>View Image: {{ file_name }}</title>
+    <title>Image Details: {{ original_filename }}</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
+        :root {
+            --primary-color: #4361ee;
+            --secondary-color: #3f37c9;
+            --accent-color: #4cc9f0;
+            --success-color: #22cc88;
+            --light-bg: #f8f9fa;
+            --dark-text: #212529;
+            --card-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
+            --hover-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
+        }
+        
+        body {
+            background-color: #f5f7fa;
+            color: var(--dark-text);
+            font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
+            padding-bottom: 40px;
+        }
+        
+        .navbar {
+            background-color: white;
+            box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
+            padding: 15px 0;
+            margin-bottom: 30px;
+        }
+        
+        .navbar-brand {
+            font-weight: 600;
+            color: var(--primary-color);
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        
+        .navbar-brand i {
+            font-size: 1.5em;
+        }
+        
+        .container {
+            max-width: 1200px;
+        }
+        
+        .card {
+            border: none;
+            border-radius: 12px;
+            box-shadow: var(--card-shadow);
+            transition: all 0.3s ease;
+        }
+        
+        .section-title {
+            margin-bottom: 20px;
+            font-weight: 600;
+            color: var(--dark-text);
+            border-left: 4px solid var(--primary-color);
+            padding-left: 12px;
+        }
+        
         .image-container {
-            background-color: #f8f9fa;
-            padding: 20px;
-            border-radius: 8px;
+            background-color: white;
+            padding: 25px;
+            border-radius: 12px;
             margin-bottom: 30px;
+            box-shadow: var(--card-shadow);
         }
+        
         .embed-options {
-            background-color: #fff;
-            padding: 20px;
-            border-radius: 8px;
-            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+            background-color: white;
+            padding: 25px;
+            border-radius: 12px;
+            box-shadow: var(--card-shadow);
         }
+        
+        .hashtag-edit-container {
+            background-color: white;
+            padding: 25px;
+            border-radius: 12px;
+            box-shadow: var(--card-shadow);
+            margin-bottom: 30px;
+        }
+        
         .code-container {
-            background-color: #f5f5f5;
-            padding: 10px;
-            border-radius: 4px;
+            background-color: #f5f7fa;
+            padding: 15px;
+            border-radius: 8px;
             margin-top: 10px;
             font-family: monospace;
-            font-size: 0.8rem;
+            font-size: 0.9rem;
             overflow-x: auto;
             white-space: nowrap;
+            border: 1px solid #e0e0e0;
         }
+        
         .copy-btn {
             cursor: pointer;
         }
+        
+        .hashtag {
+            display: inline-block;
+            background-color: rgba(67, 97, 238, 0.1);
+            padding: 5px 12px;
+            border-radius: 20px;
+            font-size: 0.8rem;
+            margin-right: 5px;
+            margin-bottom: 5px;
+            color: var(--primary-color);
+            transition: all 0.2s ease;
+            font-weight: 500;
+            text-decoration: none;
+        }
+        
+        .hashtag:hover {
+            background-color: rgba(67, 97, 238, 0.2);
+            color: var(--primary-color);
+            text-decoration: none;
+        }
+        
+        .hashtags-container {
+            margin: 15px 0;
+        }
+        
+        .btn {
+            border-radius: 8px;
+            padding: 10px 20px;
+            font-weight: 500;
+        }
+        
+        .btn-primary {
+            background-color: var(--primary-color);
+            border-color: var(--primary-color);
+        }
+        
+        .btn-primary:hover, .btn-primary:focus {
+            background-color: var(--secondary-color);
+            border-color: var(--secondary-color);
+        }
+        
+        .btn-outline-primary {
+            color: var(--primary-color);
+            border-color: var(--primary-color);
+        }
+        
+        .btn-outline-primary:hover, .btn-outline-primary:focus {
+            background-color: var(--primary-color);
+            border-color: var(--primary-color);
+            color: white;
+        }
+        
+        .btn-danger {
+            background-color: #e63946;
+            border-color: #e63946;
+        }
+        
+        .btn-danger:hover, .btn-danger:focus {
+            background-color: #d00000;
+            border-color: #d00000;
+        }
+        
+        .form-control, .form-select {
+            border-radius: 8px;
+            padding: 10px 15px;
+            border: 1px solid #e0e0e0;
+        }
+        
+        .form-control:focus, .form-select:focus {
+            box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.15);
+            border-color: var(--primary-color);
+        }
+        
+        .btn-sm {
+            padding: 5px 10px;
+            font-size: 0.8rem;
+        }
+        
+        .site-footer {
+            background-color: white;
+            padding: 20px 0;
+            text-align: center;
+            margin-top: 40px;
+            border-top: 1px solid #eaeaea;
+            color: #6c757d;
+            font-size: 0.9rem;
+        }
     </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>
+    <nav class="navbar navbar-expand-lg navbar-light">
+        <div class="container">
+            <a class="navbar-brand" href="/">
+                <i class="fas fa-photo-film"></i>
+                Image Uploader
+            </a>
+            <div class="ms-auto">
+                <a href="/" class="btn btn-outline-primary me-2">
+                    <i class="fas fa-th me-2"></i>Gallery
+                </a>
+                <a href="/logout" class="btn btn-outline-danger">
+                    <i class="fas fa-sign-out-alt me-2"></i>Logout
+                </a>
+            </div>
         </div>
+    </nav>
+
+    <div class="container">
+        <h2 class="section-title mb-4">Image Details</h2>
         
         <div class="row">
-            <div class="col-md-8">
+            <div class="col-lg-8">
                 <div class="image-container">
-                    <img src="{{ image_url }}" class="img-fluid" alt="{{ file_name }}">
+                    <img src="{{ image_url }}" class="img-fluid rounded" alt="{{ original_filename }}">
+                </div>
+                
+                <div class="hashtag-edit-container">
+                    <h3 class="section-title">Filename</h3>
+                        <p class="text-muted">{{ original_filename }}</p>
+                    <h3 class="section-title">Hashtags</h3>
+                    
+                    <div class="hashtags-container">
+                        {% if hashtags %}
+                            {% for tag in hashtags %}
+                            <a href="/?tag={{ tag }}" class="hashtag">#{{ tag }}</a>
+                            {% endfor %}
+                        {% else %}
+                            <p class="text-muted">No hashtags added yet.</p>
+                        {% endif %}
+                    </div>
+                    
+                    <form method="post" action="/update-hashtags/{{ file_name }}">
+                        <div class="mb-3">
+                            <label for="hashtags" class="form-label">
+                                <i class="fas fa-hashtag me-2"></i>Edit Hashtags
+                            </label>
+                            <input type="text" class="form-control" id="hashtags" name="hashtags" 
+                                   value="{{ hashtags|join(' ') }}" placeholder="nature photography art">
+                            <small class="text-muted">Separate hashtags with spaces or commas</small>
+                        </div>
+                        <button type="submit" class="btn btn-primary">
+                            <i class="fas fa-save me-2"></i>Save Hashtags
+                        </button>
+                    </form>
                 </div>
             </div>
             
-            <div class="col-md-4">
+            <div class="col-lg-4">
                 <div class="embed-options">
-                    <h3>Embed Options</h3>
+                    <h3 class="section-title">Embed Options</h3>
                     
-                    <div class="mb-3">
-                        <h5>1. Direct URL</h5>
+                    <div class="mb-4">
+                        <h5><i class="fas fa-link me-2"></i>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>
+                            <button class="btn btn-outline-primary copy-btn" data-target="directUrl">
+                                <i class="fas fa-copy"></i>
+                            </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 class="mb-4">
+                        <h5><i class="fas fa-code me-2"></i>HTML Embed Code</h5>
+                        <div class="code-container" id="htmlEmbed">&lt;img src="{{ embed_url }}" alt="{{ original_filename }}" /&gt;</div>
+                        <button class="btn btn-sm btn-outline-primary mt-2 copy-btn" data-target="htmlEmbed">
+                            <i class="fas fa-copy me-1"></i>Copy HTML
+                        </button>
                     </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 class="mb-4">
+                        <h5><i class="fab fa-markdown me-2"></i>Markdown Embed</h5>
+                        <div class="code-container" id="markdownEmbed">![{{ original_filename }}]({{ embed_url }})</div>
+                        <button class="btn btn-sm btn-outline-primary mt-2 copy-btn" data-target="markdownEmbed">
+                            <i class="fas fa-copy me-1"></i>Copy Markdown
+                        </button>
                     </div>
                     
-                    <div class="mt-4">
-                        <button class="btn btn-danger delete-btn" data-filename="{{ file_name }}">Delete Image</button>
+                    <div class="mt-4 text-center">
+                        <button class="btn btn-danger delete-btn" data-filename="{{ file_name }}">
+                            <i class="fas fa-trash-alt me-2"></i>Delete Image
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Footer -->
+    <footer class="site-footer">
+        <div class="container">
+            <p class="mb-0">©2025 Detomo. All rights reserved</p>
+        </div>
+    </footer>
+    
+    <!-- Modal for Delete Confirmation -->
+    <div class="modal fade" id="deleteConfirmModal" tabindex="-1" aria-labelledby="deleteConfirmModalLabel" aria-hidden="true">
+        <div class="modal-dialog modal-dialog-centered">
+            <div class="modal-content">
+                <div class="modal-header border-0">
+                    <h5 class="modal-title" id="deleteConfirmModalLabel">Confirm Deletion</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body text-center py-4">
+                    <div class="mb-4">
+                        <i class="fas fa-exclamation-triangle text-danger" style="font-size: 3.5rem;"></i>
                     </div>
+                    <h5 class="mb-3">Are you sure you want to delete this image?</h5>
+                    <p class="text-muted mb-0">This action cannot be undone.</p>
+                </div>
+                <div class="modal-footer border-0 justify-content-center">
+                    <button type="button" class="btn btn-light px-4" data-bs-dismiss="modal">
+                        <i class="fas fa-times me-2"></i>Cancel
+                    </button>
+                    <button type="button" class="btn btn-danger px-4" id="confirmDeleteBtn">
+                        <i class="fas fa-trash-alt me-2"></i>Delete
+                    </button>
                 </div>
             </div>
         </div>
     </div>
 
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
     <script>
         document.addEventListener('DOMContentLoaded', function() {
             // Handle copy buttons
@@ -98,10 +341,10 @@
                     
                     navigator.clipboard.writeText(textToCopy).then(() => {
                         // Change button text temporarily
-                        const originalText = this.textContent;
-                        this.textContent = 'Copied!';
+                        const originalText = this.innerHTML;
+                        this.innerHTML = '<i class="fas fa-check me-1"></i> Copied!';
                         setTimeout(() => {
-                            this.textContent = originalText;
+                            this.innerHTML = originalText;
                         }, 1500);
                     }).catch(err => {
                         console.error('Failed to copy text: ', err);
@@ -112,23 +355,36 @@
             // 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.');
-                    });
-                }
+                
+                // Store the filename for later use
+                document.getElementById('confirmDeleteBtn').dataset.filename = filename;
+                
+                // Show the delete confirmation modal
+                const deleteModal = new bootstrap.Modal(document.getElementById('deleteConfirmModal'));
+                deleteModal.show();
+            });
+            
+            // Handle delete confirmation
+            document.getElementById('confirmDeleteBtn').addEventListener('click', function() {
+                const filename = this.dataset.filename;
+                const deleteModal = bootstrap.Modal.getInstance(document.getElementById('deleteConfirmModal'));
+                
+                fetch(`/delete/${filename}`, {
+                    method: 'DELETE'
+                })
+                .then(response => response.json())
+                .then(data => {
+                    if (data.success) {
+                        deleteModal.hide();
+                        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>