Test docker

.dockerignore

@@ -0,0 +1,66 @@
+# Python
+__pycache__/
+*.py[cod]
+*$py.class
+*.so
+.Python
+env/
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib64/
+parts/
+sdist/
+var/
+*.egg-info/
+.installed.cfg
+*.egg
+
+# Node
+node_modules/
+npm-debug.log
+yarn-debug.log
+yarn-error.log
+frontend/dist/
+frontend/node_modules/
+
+# Virtual environments
+venv/
+ENV/
+env/
+
+# Version control
+.git
+.gitignore
+
+# Docker
+.dockerignore
+docker-compose.yml
+
+# IDE specific files
+.idea/
+.vscode/
+*.swp
+*.swo
+
+# Test files
+test/
+tests/
+
+# Development files
+.env.local
+.env.development
+.env.test
+.env.production
+
+# Logs
+logs/
+*.log
+
+# Documentation
+docs/
+*.md
+!README.md

.env.example

@@ -0,0 +1,14 @@
+# Environment variables for OmniSealBench
+# Copy this file to .env and modify as needed
+
+# Flask settings
+FLASK_APP=app.py
+FLASK_ENV=development  # Change to 'production' for deployment
+
+# Server settings
+PORT=5000
+HOST=0.0.0.0
+
+# Data paths (relative to the backend directory)
+DATA_PATH=../data
+EXAMPLES_PATH=../examples

DEPLOYMENT.md

@@ -0,0 +1,165 @@
+# Deployment Guide for OmniSealBench
+
+This guide provides detailed instructions for deploying OmniSealBench to different environments.
+
+## 1. HuggingFace Spaces Deployment
+
+### Prerequisites
+- A HuggingFace account
+- Git installed on your local machine
+
+### Steps
+
+1. **Prepare your application for deployment**
+   ```bash
+   ./prepare_deploy.sh
+   ```
+   This script will:
+   - Set the environment to production
+   - Test the frontend build
+   - Validate the Docker configuration
+
+2. **Create a new Space on HuggingFace**
+   - Go to https://huggingface.co/spaces
+   - Click "Create new Space"
+   - Set a name for your Space (e.g., "omnisealbench")
+   - Select "Docker" as the SDK
+   - Set the hardware tier according to your needs (CPU recommended)
+   - Click "Create Space"
+
+3. **Clone the HuggingFace repository**
+   ```bash
+   git clone https://huggingface.co/spaces/YOUR_USERNAME/omnisealbench
+   cd omnisealbench
+   ```
+
+4. **Copy your project files to the HuggingFace repository**
+   ```bash
+   # From your project directory
+   cp -R * /path/to/huggingface/repo/
+   ```
+
+5. **Commit and push to HuggingFace**
+   ```bash
+   cd /path/to/huggingface/repo
+   git add .
+   git commit -m "Initial deployment of OmniSealBench"
+   git push
+   ```
+
+6. **Monitor the deployment**
+   - Go to your Space on HuggingFace
+   - Click on the "Settings" tab
+   - Check the "Container logs" to see the build and deployment progress
+
+## 2. Manual Docker Deployment
+
+### Prerequisites
+- Docker installed on the host machine
+
+### Steps
+
+1. **Build the Docker image**
+   ```bash
+   docker build -t omnisealbench:latest .
+   ```
+
+2. **Run the container**
+   ```bash
+   docker run -d --name omnisealbench -p 5000:5000 omnisealbench:latest
+   ```
+
+3. **Access the application**
+   - Open a web browser and navigate to http://localhost:5000
+   - If deploying on a remote server, replace "localhost" with the server's IP or domain
+
+4. **Monitor the application**
+   ```bash
+   # View logs
+   docker logs -f omnisealbench
+   
+   # Check container status
+   docker ps -a | grep omnisealbench
+   ```
+
+## 3. Cloud Deployment Options
+
+### AWS Elastic Container Service (ECS)
+
+1. **Push your Docker image to Amazon ECR**
+   ```bash
+   # Authenticate Docker to your ECR registry
+   aws ecr get-login-password --region your-region | docker login --username AWS --password-stdin your-account-id.dkr.ecr.your-region.amazonaws.com
+   
+   # Create a repository
+   aws ecr create-repository --repository-name omnisealbench
+   
+   # Tag your image
+   docker tag omnisealbench:latest your-account-id.dkr.ecr.your-region.amazonaws.com/omnisealbench:latest
+   
+   # Push the image
+   docker push your-account-id.dkr.ecr.your-region.amazonaws.com/omnisealbench:latest
+   ```
+
+2. **Create an ECS cluster and service** using the AWS Management Console or AWS CLI
+
+### Google Cloud Run
+
+1. **Push your Docker image to Google Container Registry**
+   ```bash
+   # Tag your image for GCR
+   docker tag omnisealbench:latest gcr.io/your-project-id/omnisealbench:latest
+   
+   # Push the image
+   docker push gcr.io/your-project-id/omnisealbench:latest
+   ```
+
+2. **Deploy to Cloud Run** using the Google Cloud Console or gcloud CLI
+   ```bash
+   gcloud run deploy omnisealbench --image gcr.io/your-project-id/omnisealbench:latest --platform managed
+   ```
+
+### Azure Container Instances
+
+1. **Push your Docker image to Azure Container Registry**
+   ```bash
+   # Log in to Azure
+   az login
+   
+   # Create a resource group if needed
+   az group create --name myResourceGroup --location eastus
+   
+   # Create a container registry
+   az acr create --resource-group myResourceGroup --name myacr --sku Basic
+   
+   # Log in to the registry
+   az acr login --name myacr
+   
+   # Tag your image
+   docker tag omnisealbench:latest myacr.azurecr.io/omnisealbench:latest
+   
+   # Push the image
+   docker push myacr.azurecr.io/omnisealbench:latest
+   ```
+
+2. **Deploy to Azure Container Instances** using the Azure Portal or Azure CLI
+
+## Troubleshooting
+
+### Common Issues
+
+1. **Container fails to start**
+   - Check logs: `docker logs omnisealbench`
+   - Verify port mappings: `docker port omnisealbench`
+   - Check if the healthcheck is passing: `docker inspect --format='{{.State.Health.Status}}' omnisealbench`
+
+2. **Application is not accessible**
+   - Check if the container is running: `docker ps | grep omnisealbench`
+   - Verify the host's firewall settings to ensure port 5000 is open
+   - Try accessing the application from inside the container: `docker exec -it omnisealbench curl localhost:5000`
+
+3. **Data or examples not showing up**
+   - Verify the data and examples directories were properly copied into the container
+   - Check file permissions: `docker exec -it omnisealbench ls -la /app/data /app/examples`
+
+For more help, please open an issue on the GitHub repository.

Dockerfile

@@ -0,0 +1,57 @@
+# Multi-stage Dockerfile for OmniSealBench
+
+# Stage 1: Build the React frontend
+FROM node:18-alpine AS frontend-builder
+
+WORKDIR /app/frontend
+
+# Copy package.json
+COPY frontend/package.json ./
+
+# Install dependencies
+RUN npm install
+
+# Copy frontend source code
+COPY frontend/ ./
+
+# Build the React app
+RUN npm run build
+
+# Stage 2: Set up the Flask backend and serve the app
+FROM python:3.10-slim
+
+WORKDIR /app
+
+# Copy backend requirements and install dependencies
+COPY backend/requirements.txt ./
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy backend code
+COPY backend/ ./
+
+# Copy built frontend from the frontend-builder stage
+COPY --from=frontend-builder /app/frontend/dist ./static
+
+# Copy data and examples directories
+COPY data/ ./data/
+COPY examples/ ./examples/
+
+# Set environment variables
+ENV FLASK_APP=app.py
+ENV FLASK_ENV=production
+
+# Expose the port the app runs on
+EXPOSE 5000
+
+# Copy startup and healthcheck scripts and make them executable
+COPY backend/start.sh backend/healthcheck.sh ./
+RUN chmod +x ./start.sh ./healthcheck.sh
+
+# Install curl for healthcheck
+RUN apt-get update && apt-get install -y curl && rm -rf /var/lib/apt/lists/*
+
+# Add healthcheck
+HEALTHCHECK --interval=30s --timeout=10s --start-period=30s --retries=3 CMD ["./healthcheck.sh"]
+
+# Command to run the app using the startup script
+CMD ["./start.sh"]

README.md

@@ -1,107 +1,167 @@
 ---
-tags:
-- gradio-custom-component
-title: Gradio Leaderboard Component
-emoji: 💻
-colorFrom: pink
-colorTo: pink
-sdk: gradio
-sdk_version: 5.8.0
-app_file: space.py
+title: OmniSealBench
+emoji: 🔐
+colorFrom: blue
+colorTo: indigo
+sdk: docker
+app_port: 5000
 pinned: false
 license: mit
 ---
 
+# OmniSealBench
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%201.0.0%20-%20blue">
 
-# gradio_leaderboard
-<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20orange">  
+🔐 A comprehensive benchmark for watermarking techniques with a modern web interface.
 
-🔋⚡️🥇 Super fast, batteries included Leaderboards with minimal code.
+## Overview
 
-The `gradio_leaderboard` package helps you build fully functional and performant leaderboard demos with `gradio`.
+OmniSealBench is a benchmarking tool for evaluating various watermarking techniques across different media types including images and audio. This application provides:
 
-Place the `gradio_leaderboard.Leaderboard` component anywhere in your Gradio application (and optionally pass in some configuration). That's it!
+- Interactive leaderboards for comparing watermarking methods
+- Visual examples of various watermark attacks and their effects
+- Easy-to-use interface for exploring benchmark results
 
-For example usage, please see the [Usage](#usage) section.
+## Features
 
-For details on configuration, please see the [Configuration](#configuration) section.
+- **Responsive UI**: Clean, modern interface that works across devices
+- **Sortable Leaderboard**: View and filter benchmark results with advanced sorting
+- **Example Browser**: Visualize examples of watermarking techniques and attacks
+- **Multi-Modal Support**: Support for both image and audio watermarks
 
-For the API reference, see the [Initialization](#initialization) section.
+## Project Structure
 
-## Installation
-
-```bash
-pip install gradio_leaderboard
+```
+omnisealbench/
+├── backend/                 # Flask backend
+│   ├── app.py               # Main Flask application
+│   ├── api.py               # API endpoints
+│   ├── data_processor.py    # Data handling utilities
+│   ├── requirements.txt     # Python dependencies
+│   ├── Dockerfile.dev       # Development Dockerfile
+│   └── start.sh             # Production startup script
+├── frontend/                # React frontend
+│   ├── src/                 # Source code
+│   │   ├── components/      # React components
+│   │   ├── api.js           # API client
+│   │   ├── App.jsx          # Main application component
+│   │   ├── index.jsx        # Entry point
+│   │   └── styles.css       # Application styles
+│   ├── public/              # Static assets
+│   ├── package.json         # Node.js dependencies
+│   ├── vite.config.js       # Vite configuration
+│   └── Dockerfile.dev       # Development Dockerfile
+├── data/                    # Benchmark data files
+│   ├── image_benchmark.csv
+│   ├── audio_benchmark.csv
+│   └── ...
+├── examples/                # Example files for visualization
+│   ├── image/
+│   └── audio/
+├── Dockerfile               # Multi-stage build for production
+├── README.md                # Project documentation
+├── setup_dev.sh             # Development setup script
+├── start_dev.sh             # Start development environment
+├── stop_dev.sh              # Stop development environment
+├── test_build.sh            # Test production build
+├── clean_docker.sh          # Clean up Docker resources
+└── prepare_deploy.sh        # Prepare for deployment
 ```
 
-or add `gradio_leaderboard` to your `requirements.txt`.
+## Prerequisites
 
-## Usage
+- Docker (for containerized deployment and development)
+- Node.js 18+ and npm (for local frontend development)
+- Python 3.10+ (for local backend development)
 
-```python
+## Getting Started
 
-import gradio as gr
-from gradio_leaderboard import Leaderboard
-from pathlib import Path
-import pandas as pd
+### Using Docker (Recommended)
 
-abs_path = Path(__file__).parent
+1. Clone the repository:
+   ```bash
+   git clone https://github.com/yourusername/omnisealbench.git
+   cd omnisealbench
+   ```
 
-# Any pandas-compatible data
-df = pd.read_json(str(abs_path / "leaderboard_data.json"))
+2. Build and run the application with Docker:
+   ```bash
+   ./test_build.sh
+   ```
 
-with gr.Blocks() as demo:
-    gr.Markdown("""
-    # 🥇 Leaderboard Component
-    """)
-    Leaderboard(
-        value=df,
-        select_columns=["T", "Model", "Average ⬆️", "ARC",
-            "HellaSwag", "MMLU", "TruthfulQA",
-            "Winogrande", "GSM8K"],
-        search_columns=["model_name_for_query", "Type"],
-        hide_columns=["model_name_for_query", "Model Size"],
-        filter_columns=["T", "Precision", "Model Size"],
-    )
+3. Access the application at http://localhost:5000
 
-if __name__ == "__main__":
-    demo.launch()
-```
+### Development Environment
 
-## Configuration
+1. Set up the development environment:
+   ```bash
+   ./setup_dev.sh
+   ```
 
-### Selecting
+2. Start the development environment:
+   ```bash
+   ./start_dev.sh
+   ```
 
-When column selection is enabled, a checkboxgroup will be displayed in the top left corner of the leaderboard that lets users
-select which columns are displayed.
+3. Access the frontend at http://localhost:3000 and backend at http://localhost:5000
 
-You can disable/configure the column selection behavior of the `Leaderboard` with the `select_columns` parameter.
-It's value can be:
+4. When finished, stop the development environment:
+   ```bash
+   ./stop_dev.sh
+   ```
 
-* `None`: Column selection is not allowed and all of the columns are displayed when the leaderboard loads.
-* `list of column names`: All columns can be selected and the elements of this list correspond to the initial set of selected columns.
-* `SelectColumns instance`: You can import `SelectColumns` from `gradio_leaderboard` for full control of the column selection behavior as well as the checkboxgroup appearance. See an example below.
+## Deployment
 
-#### Demo
+This application is designed to be deployed using Docker to various platforms.
 
-```python
-import pandas as pd
-import gradio as gr
-from gradio_leaderboard import Leaderboard, SelectColumns
+### Quick Deployment
 
-with gr.Blocks() as demo:
-    Leaderboard(
-        value=pd.DataFrame({"a": [1, 2, 3], "b": [4, 5, 6], "c": [7, 8, 9]}),
-        select_columns=SelectColumns(default_selection=["a", "b"],
-                                    cant_deselect="a",
-                                    label="Select The Columns",
-                                    info="Helpful information")
-    )
+1. Prepare for deployment:
+   ```bash
+   ./prepare_deploy.sh
+   ```
 
-demo.launch()
-```
+2. Test the build locally:
+   ```bash
+   ./test_build.sh
+   ```
+
+3. Follow platform-specific deployment instructions in [DEPLOYMENT.md](DEPLOYMENT.md)
+
+For detailed deployment instructions for HuggingFace Spaces, AWS, Google Cloud, and Azure, please refer to the [Deployment Guide](DEPLOYMENT.md).
+
+## API Documentation
+
+The backend provides the following API endpoints:
+
+- `GET /api/benchmarks` - List available benchmarks
+- `GET /api/leaderboard` - Get leaderboard data
+- `GET /api/columns` - Get available columns for a benchmark
+- `GET /api/examples` - Get examples for a specific model
+- `GET /api/attacks` - Get available attacks for a benchmark
+
+## Converting from Gradio
 
-![](https://github.com/freddyaboulton/gradio-leaderboard/assets/41651716/ea073681-c01e-4d40-814c-1f3cd56ef292)
+This project was converted from a Gradio-based HuggingFace space to a Flask/React application. The key changes included:
+
+- Replacing Gradio UI components with React components
+- Creating a Flask API to serve data previously handled by Gradio backend
+- Implementing a containerized deployment with Docker
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+## License
+
+This project is licensed under the MIT License - see the LICENSE file for details.
+
+## Acknowledgements
+
+- [Flask](https://flask.palletsprojects.com/) - Backend framework
+- [React](https://reactjs.org/) - Frontend library
+- [Vite](https://vitejs.dev/) - Frontend build tool
+- [Pandas](https://pandas.pydata.org/) - Data processing
 
 
 ### Searching
@@ -155,7 +215,7 @@ This parameter must be a `list` but it's elements must be:
 If the `type` of the `ColumnFilter` is not specified, a heuristic will be used to choose the most appropriate type. If the data in the column is numeric, a slider will be used. If not, a `checkboxgroup` will be used.
 
 
-#### Demo 
+#### Demo
 
 ```python
 import pandas as pd

backend/Dockerfile.dev

@@ -0,0 +1,26 @@
+# Development Dockerfile for the backend
+FROM python:3.10-slim@sha256:b85dcf7840589a82e90a07d4cb9e85305eac7a583a28ae629a3718ba05b7bdca
+
+WORKDIR /app
+
+# Install dependencies
+COPY requirements.txt ./
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy the rest of the application
+COPY . .
+
+# Create symbolic links for data and examples directories
+# These will be overridden by volume mounts when running the container
+RUN mkdir -p /app/data /app/examples
+
+# Expose the Flask port
+EXPOSE 5000
+
+# Environment variables
+ENV FLASK_APP=app.py
+ENV FLASK_ENV=development
+ENV PYTHONUNBUFFERED=1
+
+# Command to run the Flask development server
+CMD ["flask", "run", "--host=0.0.0.0"]

backend/api.py

@@ -0,0 +1,155 @@
+from flask import Blueprint, jsonify, request
+import data_processor
+import os
+
+# Create a Blueprint for API routes
+bp = Blueprint("api", __name__, url_prefix="/api")
+
+
+@bp.route("/leaderboard", methods=["GET"])
+def get_leaderboard():
+    """
+    API endpoint to get leaderboard data with optional filtering and searching
+
+    Query parameters:
+    - benchmark: Which benchmark to use (image, audio)
+    - filter_columns: Columns to filter by
+    - search_query: Text to search for
+    - core_columns: Core columns that should always be included
+    """
+    # Get parameters from query string
+    benchmark = request.args.get("benchmark", "image")
+    filter_columns = (
+        request.args.get("filter_columns", "").split(",")
+        if request.args.get("filter_columns")
+        else []
+    )
+    search_query = request.args.get("search_query", "")
+    core_columns = (
+        request.args.get("core_columns", "").split(",")
+        if request.args.get("core_columns")
+        else []
+    )
+
+    # Determine file path based on benchmark
+    file_path = f"./data/{benchmark}_benchmark.csv"
+
+    # Load data
+    try:
+        data = data_processor.load_data(file_path)
+
+        # Apply filters if provided
+        if filter_columns:
+            data = data_processor.filter_data(data, filter_columns)
+
+        # Apply search if provided
+        if search_query:
+            data = data_processor.search_data(data, search_query)
+
+        return jsonify({"success": True, "data": data})
+    except Exception as e:
+        return jsonify({"success": False, "error": str(e)}), 500
+
+
+@bp.route("/columns", methods=["GET"])
+def get_columns():
+    """
+    API endpoint to get all available columns for a benchmark
+
+    Query parameters:
+    - benchmark: Which benchmark to use (image, audio)
+    """
+    benchmark = request.args.get("benchmark", "image")
+    file_path = f"./data/{benchmark}_benchmark.csv"
+
+    try:
+        columns = data_processor.get_columns(file_path)
+        return jsonify({"success": True, "columns": columns})
+    except Exception as e:
+        return jsonify({"success": False, "error": str(e)}), 500
+
+
+@bp.route("/benchmarks", methods=["GET"])
+def get_benchmarks():
+    """API endpoint to get available benchmarks"""
+    try:
+        benchmarks = data_processor.get_available_benchmarks()
+        return jsonify({"success": True, "benchmarks": benchmarks})
+    except Exception as e:
+        return jsonify({"success": False, "error": str(e)}), 500
+
+
+@bp.route("/examples", methods=["GET"])
+def get_examples():
+    """
+    API endpoint to get examples for a specific benchmark and model
+
+    Query parameters:
+    - benchmark: Which benchmark to use (image, audio)
+    - model: Which model to get examples for
+    - attack: Which attack to get examples for (optional)
+    """
+    benchmark = request.args.get("benchmark", "image")
+    model = request.args.get("model", "")
+    attack = request.args.get("attack", "")
+
+    if not model:
+        return jsonify({"success": False, "error": "Model parameter is required"}), 400
+
+    # Construct path to examples
+    base_path = f"./examples/{benchmark}/{model}"
+
+    if attack:
+        base_path = os.path.join(base_path, attack)
+
+    try:
+        # Check if directory exists
+        if not os.path.exists(base_path):
+            return (
+                jsonify({"success": False, "error": f"No examples found for {model}"}),
+                404,
+            )
+
+        # Get list of examples
+        examples = []
+        for root, _, files in os.walk(base_path):
+            for file in files:
+                if file.endswith((".png", ".jpg", ".jpeg", ".wav", ".mp3")):
+                    rel_path = os.path.relpath(os.path.join(root, file), "./examples")
+                    examples.append(
+                        {
+                            "path": f"/examples/{rel_path}",
+                            "name": file,
+                            "attack": attack or os.path.basename(root),
+                        }
+                    )
+
+        return jsonify({"success": True, "examples": examples})
+    except Exception as e:
+        return jsonify({"success": False, "error": str(e)}), 500
+
+
+@bp.route("/attacks", methods=["GET"])
+def get_attacks():
+    """
+    API endpoint to get available attacks for a benchmark
+
+    Query parameters:
+    - benchmark: Which benchmark to use (image, audio)
+    """
+    benchmark = request.args.get("benchmark", "image")
+    file_path = f"./data/{benchmark}_attacks_variations.csv"
+
+    try:
+        if os.path.exists(file_path):
+            data = data_processor.load_data(file_path)
+            return jsonify({"success": True, "attacks": data})
+        else:
+            return (
+                jsonify(
+                    {"success": False, "error": f"No attack data found for {benchmark}"}
+                ),
+                404,
+            )
+    except Exception as e:
+        return jsonify({"success": False, "error": str(e)}), 500

backend/app.py

@@ -0,0 +1,23 @@
+from flask import Flask, send_from_directory, jsonify, request
+from flask_cors import CORS
+import api
+
+# Initialize the Flask app
+app = Flask(__name__, static_folder="static")
+CORS(app)  # Enable CORS for all routes
+
+# Register API routes
+app.register_blueprint(api.bp)
+
+
+# Serve the React app
+@app.route("/", defaults={"path": ""})
+@app.route("/<path:path>")
+def serve(path):
+    if path and path.split("/")[-1].find(".") != -1:
+        return send_from_directory("static", path)
+    return send_from_directory("static", "index.html")
+
+
+if __name__ == "__main__":
+    app.run(host="0.0.0.0", port=5000, debug=True)

backend/data_processor.py

@@ -0,0 +1,156 @@
+import pandas as pd
+import os
+import json
+from typing import List, Dict, Any, Optional
+
+
+def load_data(csv_file_path: str) -> List[Dict[str, Any]]:
+    """
+    Load data from a CSV file and convert to a list of dictionaries
+
+    Args:
+        csv_file_path: Path to the CSV file
+
+    Returns:
+        List of dictionaries representing the data
+    """
+    # Check if file exists
+    if not os.path.exists(csv_file_path):
+        raise FileNotFoundError(f"File not found: {csv_file_path}")
+
+    # Read the CSV file
+    df = pd.read_csv(csv_file_path)
+
+    # Convert to list of dictionaries for JSON serialization
+    return df.to_dict(orient="records")
+
+
+def get_columns(csv_file_path: str) -> List[str]:
+    """
+    Get all column names from the CSV file
+
+    Args:
+        csv_file_path: Path to the CSV file
+
+    Returns:
+        List of column names
+    """
+    # Check if file exists
+    if not os.path.exists(csv_file_path):
+        raise FileNotFoundError(f"File not found: {csv_file_path}")
+
+    # Read the CSV file
+    df = pd.read_csv(csv_file_path)
+
+    # Return column names
+    return df.columns.tolist()
+
+
+def filter_data(
+    data: List[Dict[str, Any]], filter_columns: List[str]
+) -> List[Dict[str, Any]]:
+    """
+    Filter the data to include only specific columns
+
+    Args:
+        data: List of dictionaries representing the data
+        filter_columns: List of column names to include
+
+    Returns:
+        Filtered data
+    """
+    if not filter_columns:
+        return data
+
+    filtered_data = []
+    for item in data:
+        filtered_item = {k: v for k, v in item.items() if k in filter_columns}
+        filtered_data.append(filtered_item)
+
+    return filtered_data
+
+
+def search_data(data: List[Dict[str, Any]], search_query: str) -> List[Dict[str, Any]]:
+    """
+    Search the data for items matching the search query
+
+    Args:
+        data: List of dictionaries representing the data
+        search_query: Search query string
+
+    Returns:
+        Filtered data containing only matching items
+    """
+    if not search_query:
+        return data
+
+    # Convert to lowercase for case-insensitive search
+    search_query = search_query.lower()
+
+    filtered_data = []
+    for item in data:
+        # Check if any value contains the search query
+        for value in item.values():
+            if (
+                isinstance(value, (str, int, float))
+                and str(value).lower().find(search_query) != -1
+            ):
+                filtered_data.append(item)
+                break
+
+    return filtered_data
+
+
+def load_json_data(json_file_path: str) -> Dict[str, Any]:
+    """
+    Load data from a JSON file
+
+    Args:
+        json_file_path: Path to the JSON file
+
+    Returns:
+        Dictionary representing the JSON data
+    """
+    # Check if file exists
+    if not os.path.exists(json_file_path):
+        raise FileNotFoundError(f"File not found: {json_file_path}")
+
+    # Read the JSON file
+    with open(json_file_path, "r") as f:
+        data = json.load(f)
+
+    return data
+
+
+def get_available_benchmarks() -> List[Dict[str, str]]:
+    """
+    Get a list of available benchmarks in the data folder
+
+    Returns:
+        List of dictionaries with benchmark information
+    """
+    benchmarks = []
+
+    # Look for image benchmarks
+    if os.path.exists("./data/image_benchmark.csv"):
+        benchmarks.append(
+            {
+                "id": "image",
+                "name": "Image Watermarks",
+                "description": "Evaluation of image watermarking techniques",
+                "file": "image_benchmark.csv",
+            }
+        )
+
+    # Look for audio benchmarks
+    if os.path.exists("./data/audio_benchmark.csv"):
+        benchmarks.append(
+            {
+                "id": "audio",
+                "name": "Audio Watermarks",
+                "description": "Evaluation of audio watermarking techniques",
+                "file": "audio_benchmark.csv",
+            }
+        )
+
+    return benchmarks

backend/healthcheck.sh

@@ -0,0 +1,14 @@
+#!/bin/bash
+# Healthcheck script for the OmniSealBench container
+# Returns 0 if the app is running, 1 if there's an issue
+
+# Try to access the application's root endpoint
+response=$(curl -s -o /dev/null -w "%{http_code}" http://localhost:5000/)
+
+if [ "$response" = "200" ]; then
+    # Application is responding correctly
+    exit 0
+else
+    # Application is not responding correctly
+    exit 1
+fi

backend/requirements.txt

@@ -0,0 +1,5 @@
+flask==2.3.3
+flask-cors==4.0.0
+pandas==2.1.0
+numpy==1.25.2
+gunicorn==21.2.0

backend/start.sh

@@ -0,0 +1,13 @@
+#!/bin/bash
+# This script runs when the HuggingFace space starts
+
+# Set environment variables
+export FLASK_APP=app.py
+export FLASK_ENV=production
+
+# Start the Flask application with gunicorn
+# - workers: Number of worker processes (2-4 x CPU cores is recommended)
+# - timeout: Worker timeout in seconds
+# - access-logfile: Log access to stdout
+# - error-logfile: Log errors to stderr
+exec gunicorn --workers=2 --timeout=120 --bind 0.0.0.0:5000 --access-logfile=- --error-logfile=- app:app

clean_docker.sh

@@ -0,0 +1,11 @@
+#!/bin/bash
+# Script to clean up Docker resources
+
+echo "Stopping and removing containers..."
+docker stop omnisealbench-test omnisealbench-frontend-dev omnisealbench-backend-dev 2>/dev/null || true
+docker rm omnisealbench-test omnisealbench-frontend-dev omnisealbench-backend-dev 2>/dev/null || true
+
+echo "Removing Docker images..."
+docker rmi omnisealbench-local omnisealbench-frontend-dev omnisealbench-backend-dev 2>/dev/null || true
+
+echo "Cleanup complete!"

frontend/Dockerfile.dev

@@ -0,0 +1,20 @@
+# Development Dockerfile for the frontend
+FROM node:18-alpine@sha256:a020d42b54c53929a8177d8e7aab30de0f4044fa6e25a3e15ecdad32c9075e18
+
+WORKDIR /app
+
+# Copy package.json and install dependencies
+COPY package*.json ./
+RUN npm install
+
+# Copy the rest of the application
+COPY . .
+
+# Set the API URL for development
+ENV VITE_API_URL=http://localhost:5000
+
+# Expose the development server port
+EXPOSE 3000
+
+# Command to run the development server with host set to 0.0.0.0 to allow external connections
+CMD ["npm", "run", "dev", "--", "--host", "0.0.0.0"]

frontend/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="manifest" href="/manifest.json" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="theme-color" content="#2c3e50" />
+    <meta name="description" content="A comprehensive benchmark for watermarking techniques" />
+    <title>OmniSealBench Leaderboard</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.jsx"></script>
+  </body>
+</html>

frontend/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "omnisealbench-frontend",
+  "version": "0.1.0",
+  "description": "Frontend for OmniSealBench",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "axios": "^1.4.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-table": "^7.8.0",
+    "react-router-dom": "^6.16.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.7",
+    "@vitejs/plugin-react": "^4.0.3",
+    "vite": "^4.4.5"
+  }
+}

frontend/public/manifest.json

@@ -0,0 +1,15 @@
+{
+  "short_name": "OmniSealBench",
+  "name": "OmniSealBench - Watermarking Benchmark",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#2c3e50",
+  "background_color": "#f8f9fa"
+}

frontend/src/App.jsx

@@ -0,0 +1,114 @@
+import React, { useState, useEffect } from 'react';
+import { Routes, Route, Link } from 'react-router-dom';
+import Leaderboard from './components/Leaderboard';
+import ExampleViewer from './components/ExampleViewer';
+import api from './api';
+
+function App() {
+  const [benchmarks, setBenchmarks] = useState([]);
+  const [selectedBenchmark, setSelectedBenchmark] = useState('image');
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    // Fetch available benchmarks
+    async function fetchBenchmarks() {
+      try {
+        setLoading(true);
+        const response = await api.getBenchmarks();
+        if (response.success) {
+          setBenchmarks(response.benchmarks);
+          // Set default benchmark if available
+          if (response.benchmarks.length > 0) {
+            setSelectedBenchmark(response.benchmarks[0].id);
+          }
+        } else {
+          setError(response.error || 'Failed to fetch benchmarks');
+        }
+      } catch (err) {
+        setError(err.message || 'An error occurred');
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    fetchBenchmarks();
+  }, []);
+
+  const handleBenchmarkChange = (benchmarkId) => {
+    setSelectedBenchmark(benchmarkId);
+  };
+
+  return (
+    <div className="app">
+      <header className="header">
+        <div className="container">
+          <h1>OmniSealBench</h1>
+          <p>A Comprehensive Benchmark for Watermarking Techniques</p>
+        </div>
+      </header>
+
+      <nav className="nav">
+        <div className="container">
+          <ul className="nav-links">
+            <li>
+              <Link to="/" className="nav-link">Leaderboard</Link>
+            </li>
+            <li>
+              <Link to="/examples" className="nav-link">Examples</Link>
+            </li>
+          </ul>
+
+          {benchmarks.length > 0 && (
+            <div className="benchmark-selector">
+              <label>Benchmark:</label>
+              <select
+                value={selectedBenchmark}
+                onChange={(e) => handleBenchmarkChange(e.target.value)}
+              >
+                {benchmarks.map(benchmark => (
+                  <option key={benchmark.id} value={benchmark.id}>
+                    {benchmark.name}
+                  </option>
+                ))}
+              </select>
+            </div>
+          )}
+        </div>
+      </nav>
+
+      <main className="main">
+        <div className="container">
+          {loading ? (
+            <div className="loading">Loading...</div>
+          ) : error ? (
+            <div className="error">{error}</div>
+          ) : (
+            <Routes>
+              <Route
+                path="/"
+                element={<Leaderboard benchmark={selectedBenchmark} />}
+              />
+              <Route
+                path="/examples"
+                element={<ExampleViewer benchmark={selectedBenchmark} />}
+              />
+              <Route
+                path="*"
+                element={<div>Page not found</div>}
+              />
+            </Routes>
+          )}
+        </div>
+      </main>
+
+      <footer className="footer">
+        <div className="container">
+          <p>&copy; {new Date().getFullYear()} OmniSealBench. All rights reserved.</p>
+        </div>
+      </footer>
+    </div>
+  );
+}
+
+export default App;

frontend/src/api.js

@@ -0,0 +1,87 @@
+import axios from 'axios';
+
+const API_URL = '/api';
+
+const api = {
+  // Get available benchmarks
+  getBenchmarks: async () => {
+    try {
+      const response = await axios.get(`${API_URL}/benchmarks`);
+      return response.data;
+    } catch (error) {
+      console.error('Error fetching benchmarks:', error);
+      return { success: false, error: error.message };
+    }
+  },
+
+  // Get leaderboard data
+  getLeaderboard: async (benchmark, filters = {}) => {
+    try {
+      const { filterColumns, searchQuery, coreColumns } = filters;
+
+      const params = new URLSearchParams();
+      params.append('benchmark', benchmark);
+
+      if (filterColumns && filterColumns.length) {
+        params.append('filter_columns', filterColumns.join(','));
+      }
+
+      if (searchQuery) {
+        params.append('search_query', searchQuery);
+      }
+
+      if (coreColumns && coreColumns.length) {
+        params.append('core_columns', coreColumns.join(','));
+      }
+
+      const response = await axios.get(`${API_URL}/leaderboard?${params.toString()}`);
+      return response.data;
+    } catch (error) {
+      console.error('Error fetching leaderboard:', error);
+      return { success: false, error: error.message };
+    }
+  },
+
+  // Get available columns for a benchmark
+  getColumns: async (benchmark) => {
+    try {
+      const response = await axios.get(`${API_URL}/columns?benchmark=${benchmark}`);
+      return response.data;
+    } catch (error) {
+      console.error('Error fetching columns:', error);
+      return { success: false, error: error.message };
+    }
+  },
+
+  // Get examples for a specific model and benchmark
+  getExamples: async (benchmark, model, attack = '') => {
+    try {
+      const params = new URLSearchParams();
+      params.append('benchmark', benchmark);
+      params.append('model', model);
+
+      if (attack) {
+        params.append('attack', attack);
+      }
+
+      const response = await axios.get(`${API_URL}/examples?${params.toString()}`);
+      return response.data;
+    } catch (error) {
+      console.error('Error fetching examples:', error);
+      return { success: false, error: error.message };
+    }
+  },
+
+  // Get available attacks for a benchmark
+  getAttacks: async (benchmark) => {
+    try {
+      const response = await axios.get(`${API_URL}/attacks?benchmark=${benchmark}`);
+      return response.data;
+    } catch (error) {
+      console.error('Error fetching attacks:', error);
+      return { success: false, error: error.message };
+    }
+  }
+};
+
+export default api;

frontend/src/components/ExampleViewer.jsx

@@ -0,0 +1,166 @@
+import React, { useState, useEffect } from 'react';
+import api from '../api';
+
+function ExampleViewer({ benchmark }) {
+  const [models, setModels] = useState([]);
+  const [selectedModel, setSelectedModel] = useState('');
+  const [attacks, setAttacks] = useState([]);
+  const [selectedAttack, setSelectedAttack] = useState('');
+  const [examples, setExamples] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  // Fetch models when benchmark changes
+  useEffect(() => {
+    async function fetchModels() {
+      try {
+        setLoading(true);
+        const response = await api.getLeaderboard(benchmark);
+
+        if (response.success) {
+          // Extract unique model names
+          const modelNames = [...new Set(response.data.map(item => item.model))];
+          setModels(modelNames);
+
+          // Set first model as default if available
+          if (modelNames.length > 0) {
+            setSelectedModel(modelNames[0]);
+          }
+        } else {
+          setError(response.error || 'Failed to fetch models');
+        }
+      } catch (err) {
+        setError(err.message || 'An error occurred');
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    fetchModels();
+  }, [benchmark]);
+
+  // Fetch attacks when benchmark changes
+  useEffect(() => {
+    async function fetchAttacks() {
+      try {
+        const response = await api.getAttacks(benchmark);
+        if (response.success) {
+          setAttacks(response.attacks);
+        }
+      } catch (err) {
+        console.error('Error fetching attacks:', err);
+        // Not setting error state here as it's not critical
+      }
+    }
+
+    fetchAttacks();
+  }, [benchmark]);
+
+  // Fetch examples when model or attack changes
+  useEffect(() => {
+    if (!selectedModel) return;
+
+    async function fetchExamples() {
+      try {
+        setLoading(true);
+        const response = await api.getExamples(benchmark, selectedModel, selectedAttack);
+
+        if (response.success) {
+          setExamples(response.examples);
+          setError(null);
+        } else {
+          setError(response.error || 'Failed to fetch examples');
+          setExamples([]);
+        }
+      } catch (err) {
+        setError(err.message || 'An error occurred');
+        setExamples([]);
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    fetchExamples();
+  }, [benchmark, selectedModel, selectedAttack]);
+
+  const handleModelChange = (e) => {
+    setSelectedModel(e.target.value);
+  };
+
+  const handleAttackChange = (e) => {
+    setSelectedAttack(e.target.value);
+  };
+
+  const renderExampleContent = (example) => {
+    // Check if it's an image or audio based on file extension
+    const isImage = /\.(jpg|jpeg|png|gif|webp)$/i.test(example.path);
+    const isAudio = /\.(mp3|wav|ogg)$/i.test(example.path);
+
+    if (isImage) {
+      return <img src={example.path} alt={example.name} className="example-image" />;
+    } else if (isAudio) {
+      return <audio controls src={example.path} className="example-audio">Your browser does not support audio.</audio>;
+    } else {
+      return <div className="example-unsupported">Unsupported file type</div>;
+    }
+  };
+
+  return (
+    <div className="example-viewer">
+      <h2>Example Viewer</h2>
+
+      <div className="filters">
+        <div className="filter-group">
+          <label htmlFor="model-select">Model:</label>
+          <select
+            id="model-select"
+            value={selectedModel}
+            onChange={handleModelChange}
+            disabled={loading || models.length === 0}
+          >
+            {models.map(model => (
+              <option key={model} value={model}>{model}</option>
+            ))}
+          </select>
+        </div>
+
+        <div className="filter-group">
+          <label htmlFor="attack-select">Attack:</label>
+          <select
+            id="attack-select"
+            value={selectedAttack}
+            onChange={handleAttackChange}
+            disabled={loading}
+          >
+            <option value="">All Attacks</option>
+            {attacks.map(attack => (
+              <option key={attack.name} value={attack.name}>{attack.name}</option>
+            ))}
+          </select>
+        </div>
+      </div>
+
+      {loading ? (
+        <div className="loading">Loading examples...</div>
+      ) : error ? (
+        <div className="error">Error: {error}</div>
+      ) : examples.length === 0 ? (
+        <div className="no-examples">No examples found for the selected options.</div>
+      ) : (
+        <div className="examples-grid">
+          {examples.map((example, index) => (
+            <div key={index} className="example-card">
+              <h3>{example.name}</h3>
+              {example.attack && <p className="attack-label">Attack: {example.attack}</p>}
+              <div className="example-content">
+                {renderExampleContent(example)}
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default ExampleViewer;

frontend/src/components/Leaderboard.jsx

@@ -0,0 +1,213 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import { useTable, useSortBy, useFilters, usePagination } from 'react-table';
+import api from '../api';
+
+// Default filter UI for columns
+function DefaultColumnFilter({
+  column: { filterValue, preFilteredRows, setFilter },
+}) {
+  const count = preFilteredRows.length;
+
+  return (
+    <input
+      value={filterValue || ''}
+      onChange={e => {
+        setFilter(e.target.value || undefined);
+      }}
+      placeholder={`Search ${count} records...`}
+      className="table-filter"
+    />
+  );
+}
+
+function Leaderboard({ benchmark }) {
+  const [data, setData] = useState([]);
+  const [columns, setColumns] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [searchQuery, setSearchQuery] = useState('');
+
+  useEffect(() => {
+    // Fetch leaderboard data and columns when the benchmark changes
+    async function fetchData() {
+      try {
+        setLoading(true);
+
+        // Fetch available columns first
+        const columnsResponse = await api.getColumns(benchmark);
+        if (!columnsResponse.success) {
+          throw new Error(columnsResponse.error || 'Failed to fetch columns');
+        }
+
+        // Format columns for react-table
+        const tableColumns = columnsResponse.columns.map(column => ({
+          Header: column,
+          accessor: column,
+          Filter: DefaultColumnFilter,
+        }));
+
+        setColumns(tableColumns);
+
+        // Fetch leaderboard data
+        const dataResponse = await api.getLeaderboard(benchmark);
+        if (!dataResponse.success) {
+          throw new Error(dataResponse.error || 'Failed to fetch leaderboard data');
+        }
+
+        setData(dataResponse.data);
+        setError(null);
+      } catch (err) {
+        setError(err.message || 'An error occurred');
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    fetchData();
+  }, [benchmark]);
+
+  // Filter data based on search query
+  const filteredData = useMemo(() => {
+    if (!searchQuery) return data;
+
+    return data.filter(row => {
+      return Object.values(row).some(value =>
+        String(value).toLowerCase().includes(searchQuery.toLowerCase())
+      );
+    });
+  }, [data, searchQuery]);
+
+  // Set up react-table
+  const {
+    getTableProps,
+    getTableBodyProps,
+    headerGroups,
+    page,
+    prepareRow,
+    canPreviousPage,
+    canNextPage,
+    pageOptions,
+    pageCount,
+    gotoPage,
+    nextPage,
+    previousPage,
+    setPageSize,
+    state: { pageIndex, pageSize },
+  } = useTable(
+    {
+      columns,
+      data: filteredData,
+      initialState: { pageIndex: 0, pageSize: 10 },
+    },
+    useFilters,
+    useSortBy,
+    usePagination
+  );
+
+  if (loading) {
+    return <div className="loading">Loading leaderboard data...</div>;
+  }
+
+  if (error) {
+    return <div className="error">Error: {error}</div>;
+  }
+
+  return (
+    <div className="leaderboard">
+      <h2>{benchmark.charAt(0).toUpperCase() + benchmark.slice(1)} Watermark Benchmark</h2>
+
+      <div className="search-container">
+        <input
+          type="text"
+          placeholder="Search across all columns..."
+          value={searchQuery}
+          onChange={e => setSearchQuery(e.target.value)}
+          className="search-input"
+        />
+      </div>
+
+      <div className="table-container">
+        <table {...getTableProps()} className="leaderboard-table">
+          <thead>
+            {headerGroups.map(headerGroup => (
+              <tr {...headerGroup.getHeaderGroupProps()}>
+                {headerGroup.headers.map(column => (
+                  <th {...column.getHeaderProps(column.getSortByToggleProps())}>
+                    {column.render('Header')}
+                    <span>
+                      {column.isSorted
+                        ? column.isSortedDesc
+                          ? ' 🔽'
+                          : ' 🔼'
+                        : ''}
+                    </span>
+                    <div>{column.canFilter ? column.render('Filter') : null}</div>
+                  </th>
+                ))}
+              </tr>
+            ))}
+          </thead>
+          <tbody {...getTableBodyProps()}>
+            {page.map(row => {
+              prepareRow(row);
+              return (
+                <tr {...row.getRowProps()}>
+                  {row.cells.map(cell => (
+                    <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
+                  ))}
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+
+      <div className="pagination">
+        <button onClick={() => gotoPage(0)} disabled={!canPreviousPage}>
+          {'<<'}
+        </button>{' '}
+        <button onClick={() => previousPage()} disabled={!canPreviousPage}>
+          {'<'}
+        </button>{' '}
+        <button onClick={() => nextPage()} disabled={!canNextPage}>
+          {'>'}
+        </button>{' '}
+        <button onClick={() => gotoPage(pageCount - 1)} disabled={!canNextPage}>
+          {'>>'}
+        </button>{' '}
+        <span>
+          Page{' '}
+          <strong>
+            {pageIndex + 1} of {pageOptions.length}
+          </strong>{' '}
+        </span>
+        <span>
+          | Go to page:{' '}
+          <input
+            type="number"
+            defaultValue={pageIndex + 1}
+            onChange={e => {
+              const page = e.target.value ? Number(e.target.value) - 1 : 0;
+              gotoPage(page);
+            }}
+            style={{ width: '100px' }}
+          />
+        </span>{' '}
+        <select
+          value={pageSize}
+          onChange={e => {
+            setPageSize(Number(e.target.value));
+          }}
+        >
+          {[10, 20, 30, 40, 50].map(pageSize => (
+            <option key={pageSize} value={pageSize}>
+              Show {pageSize}
+            </option>
+          ))}
+        </select>
+      </div>
+    </div>
+  );
+}
+
+export default Leaderboard;

frontend/src/index.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+import App from './App';
+import './styles.css';
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </React.StrictMode>
+);

frontend/src/styles.css

@@ -0,0 +1,302 @@
+/* OmniSealBench Styles */
+
+:root {
+  --primary-color: #2c3e50;
+  --secondary-color: #3498db;
+  --accent-color: #e74c3c;
+  --background-color: #f8f9fa;
+  --text-color: #333;
+  --border-color: #ddd;
+  --success-color: #2ecc71;
+  --warning-color: #f39c12;
+  --error-color: #e74c3c;
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  line-height: 1.6;
+  color: var(--text-color);
+  background-color: var(--background-color);
+}
+
+.container {
+  width: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 15px;
+}
+
+/* Header Styles */
+.header {
+  background-color: var(--primary-color);
+  color: white;
+  padding: 1rem 0;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.header h1 {
+  margin-bottom: 0.5rem;
+}
+
+/* Navigation */
+.nav {
+  background-color: white;
+  border-bottom: 1px solid var(--border-color);
+  padding: 0.5rem 0;
+}
+
+.nav-links {
+  display: flex;
+  list-style: none;
+}
+
+.nav-link {
+  color: var(--primary-color);
+  text-decoration: none;
+  padding: 0.5rem 1rem;
+  font-weight: 500;
+  transition: color 0.3s;
+}
+
+.nav-link:hover {
+  color: var(--secondary-color);
+}
+
+.benchmark-selector {
+  margin-top: 1rem;
+}
+
+.benchmark-selector select {
+  padding: 0.5rem;
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+}
+
+/* Main Content */
+.main {
+  padding: 2rem 0;
+  min-height: calc(100vh - 180px);
+}
+
+/* Leaderboard */
+.leaderboard h2 {
+  margin-bottom: 1.5rem;
+  color: var(--primary-color);
+}
+
+.search-container {
+  margin-bottom: 1rem;
+}
+
+.search-input {
+  width: 100%;
+  padding: 0.75rem;
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+}
+
+.table-container {
+  overflow-x: auto;
+}
+
+.leaderboard-table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-bottom: 1rem;
+  background-color: white;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.leaderboard-table th,
+.leaderboard-table td {
+  padding: 0.75rem;
+  text-align: left;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.leaderboard-table th {
+  background-color: var(--primary-color);
+  color: white;
+  position: sticky;
+  top: 0;
+}
+
+.leaderboard-table tr:hover {
+  background-color: rgba(0, 0, 0, 0.02);
+}
+
+.table-filter {
+  width: 100%;
+  padding: 0.3rem;
+  margin-top: 0.5rem;
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  font-size: 0.8rem;
+}
+
+/* Pagination */
+.pagination {
+  display: flex;
+  align-items: center;
+  margin-top: 1rem;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.pagination button {
+  padding: 0.5rem 0.75rem;
+  background-color: white;
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.pagination button:hover:not(:disabled) {
+  background-color: var(--secondary-color);
+  color: white;
+}
+
+.pagination button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.pagination input,
+.pagination select {
+  padding: 0.5rem;
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+}
+
+/* Example Viewer */
+.example-viewer h2 {
+  margin-bottom: 1.5rem;
+  color: var(--primary-color);
+}
+
+.filters {
+  display: flex;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+  flex-wrap: wrap;
+}
+
+.filter-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.filter-group label {
+  font-weight: 500;
+}
+
+.filter-group select {
+  padding: 0.5rem;
+  min-width: 200px;
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+}
+
+.examples-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 1.5rem;
+}
+
+.example-card {
+  background-color: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  transition: transform 0.3s;
+}
+
+.example-card:hover {
+  transform: translateY(-5px);
+}
+
+.example-card h3 {
+  padding: 1rem;
+  background-color: var(--primary-color);
+  color: white;
+  font-size: 1rem;
+}
+
+.attack-label {
+  padding: 0.5rem 1rem;
+  background-color: rgba(0, 0, 0, 0.05);
+  font-size: 0.9rem;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.example-content {
+  padding: 1rem;
+}
+
+.example-image {
+  width: 100%;
+  height: auto;
+  display: block;
+}
+
+.example-audio {
+  width: 100%;
+}
+
+/* Status messages */
+.loading, .error, .no-examples {
+  padding: 1rem;
+  border-radius: 4px;
+  text-align: center;
+  margin: 1rem 0;
+}
+
+.loading {
+  background-color: rgba(52, 152, 219, 0.1);
+  color: var(--secondary-color);
+  border: 1px solid rgba(52, 152, 219, 0.3);
+}
+
+.error {
+  background-color: rgba(231, 76, 60, 0.1);
+  color: var(--error-color);
+  border: 1px solid rgba(231, 76, 60, 0.3);
+}
+
+.no-examples {
+  background-color: rgba(241, 196, 15, 0.1);
+  color: var(--warning-color);
+  border: 1px solid rgba(241, 196, 15, 0.3);
+}
+
+/* Footer */
+.footer {
+  background-color: var(--primary-color);
+  color: white;
+  padding: 1rem 0;
+  text-align: center;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .examples-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .pagination {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .filters {
+    flex-direction: column;
+  }
+}

frontend/vite.config.js

@@ -0,0 +1,24 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  build: {
+    outDir: 'dist',
+    emptyOutDir: true,
+    sourcemap: false
+  },
+  server: {
+    proxy: {
+      '/api': {
+        target: 'http://localhost:5000',
+        changeOrigin: true
+      },
+      '/examples': {
+        target: 'http://localhost:5000',
+        changeOrigin: true
+      }
+    }
+  }
+})

prepare_deploy.sh

@@ -0,0 +1,32 @@
+#!/bin/bash
+# Script to prepare for HuggingFace deployment
+
+# Ensure we're in production mode
+sed -i '' 's/ENV FLASK_ENV=development/ENV FLASK_ENV=production/g' Dockerfile
+
+# Build frontend to verify it works
+echo "Testing frontend build..."
+cd frontend
+npm install
+npm run build
+
+if [ $? -ne 0 ]; then
+  echo "Frontend build failed! Please fix errors before deploying."
+  exit 1
+fi
+cd ..
+
+# Test the Docker build
+echo "Testing Docker build..."
+docker build -t omnisealbench-deploy-test .
+
+if [ $? -ne 0 ]; then
+  echo "Docker build failed! Please fix errors before deploying."
+  exit 1
+fi
+
+echo "=== DEPLOYMENT PREPARATION COMPLETE ==="
+echo "Push your code to HuggingFace with:"
+echo "git add ."
+echo "git commit -m 'Ready for deployment'"
+echo "git push huggingface main"

setup_dev.sh

@@ -0,0 +1,29 @@
+#!/bin/bash
+# Setup script for development environment
+
+# Check for Docker
+if ! command -v docker &> /dev/null; then
+    echo "Docker is not installed. Please install Docker first."
+    exit 1
+fi
+
+# Create virtual environment for backend
+echo "Setting up backend..."
+cd backend
+python -m venv venv
+source venv/bin/activate
+pip install -r requirements.txt
+cd ..
+
+# Install frontend dependencies
+echo "Setting up frontend..."
+cd frontend
+npm install
+cd ..
+
+echo "Setup complete! You can now run the application with:"
+echo "./start_dev.sh"
+echo ""
+echo "This will start both the frontend and backend in Docker containers."
+echo "To stop the development environment, run:"
+echo "./stop_dev.sh"

start_dev.sh

@@ -0,0 +1,43 @@
+#!/bin/bash
+# Script to start the development environment with Docker (no docker-compose)
+
+echo "Starting development environment..."
+
+# Create a Docker network for the containers to communicate
+docker network create omnisealbench-network 2>/dev/null || true
+
+# Clean up any existing containers
+./stop_dev.sh > /dev/null 2>&1
+
+# Build and start the backend container
+echo "Building and starting backend..."
+docker build -t omnisealbench-backend-dev -f backend/Dockerfile.dev ./backend
+docker run -d --name omnisealbench-backend-dev \
+  --network omnisealbench-network \
+  -v "$(pwd)/backend:/app" \
+  -v "$(pwd)/data:/app/data" \
+  -v "$(pwd)/examples:/app/examples" \
+  -p 5000:5000 \
+  -e FLASK_APP=app.py \
+  -e FLASK_ENV=development \
+  -e PYTHONUNBUFFERED=1 \
+  omnisealbench-backend-dev
+
+# Build and start the frontend container
+echo "Building and starting frontend..."
+docker build -t omnisealbench-frontend-dev -f frontend/Dockerfile.dev ./frontend
+docker run -d --name omnisealbench-frontend-dev \
+  --network omnisealbench-network \
+  -v "$(pwd)/frontend:/app" \
+  -v "$(pwd)/frontend/node_modules:/app/node_modules" \
+  -p 3000:3000 \
+  -e NODE_ENV=development \
+  -e VITE_API_URL=http://omnisealbench-backend-dev:5000 \
+  omnisealbench-frontend-dev
+
+echo "Development environment started!"
+echo "Frontend: http://localhost:3000"
+echo "Backend API: http://localhost:5000/api"
+echo ""
+echo "To stop the development environment, run:"
+echo "./stop_dev.sh"

stop_dev.sh

@@ -0,0 +1,13 @@
+#!/bin/bash
+# Script to stop the development environment
+
+echo "Stopping development containers..."
+docker stop omnisealbench-frontend-dev omnisealbench-backend-dev 2>/dev/null || true
+
+echo "Removing development containers..."
+docker rm omnisealbench-frontend-dev omnisealbench-backend-dev 2>/dev/null || true
+
+# Remove the network
+docker network rm omnisealbench-network 2>/dev/null || true
+
+echo "Development environment stopped."

test_build.sh

@@ -0,0 +1,32 @@
+#!/bin/bash
+# Test the complete build process locally
+
+# Clean up any existing test containers
+echo "Cleaning up any existing test containers..."
+docker stop omnisealbench-test 2>/dev/null || true
+docker rm omnisealbench-test 2>/dev/null || true
+
+echo "Building Docker image..."
+docker build -t omnisealbench-local .
+
+if [ $? -ne 0 ]; then
+  echo "Docker build failed!"
+  exit 1
+fi
+
+echo "Running container..."
+docker run -d -p 5002:5000 --name omnisealbench-test omnisealbench-local
+
+if [ $? -ne 0 ]; then
+  echo "Docker run failed!"
+  exit 1
+fi
+
+echo "Container started! Application should be available at:"
+echo "http://localhost:5002"
+echo ""
+echo "To see container logs, run:"
+echo "docker logs -f omnisealbench-test"
+echo ""
+echo "To stop and remove the container, run:"
+echo "docker stop omnisealbench-test && docker rm omnisealbench-test"