init

10 files changed, 868 insertions, 0 deletions

diff --git a/.cursor/rules/project.mdc b/.cursor/rules/project.mdc
new file mode 100644
index 0000000..2d0eae9
--- /dev/null
+++ b/.cursor/rules/project.mdc
@@ -0,0 +1,24 @@
+---
+description: 
+globs: 
+alwaysApply: true
+---
+bonsai is a python command line tool used to generate realistic network latency graphs using a yaml config.
+
+The tool is called with
+```
+python -m main --net_config <network-config>.yaml --output_dir <output_dir>
+```
+The network config is a yaml file whose contents don't really matter and the output directory must exist and will be populated with two files `edges.csv` and `nodes.csv`.
+
+The goal of this project, `bonsai-web` is to create a simple web interface for bonsai since it requires a specific version of python and quite a few dependencies.
+You can assume that the bonsai source code is under the directory `/usr/src/bonsai` so you use subprocess in that directory to execute the command above.
+The web page we are trying to create is simple and will contain the following components.
++ single html page using picocss
++ single javascript file for client side logic
++ simple flask backend
+
+The html page should have a header with the name bonsai and an image logo. The logo will be present at `logo.png`. The page should have some description text at the top, followed by a text box for the user to provide a configuration and then a button to generate the output files. When the user clicks that button a POST request with the contents of the config should be made to `/` and the server should execute bonsai and return a json object where the keys are the names of the generated files and the values associated with those keys will be the contents of the files.
+The page should then display, bellow the button, the list of files with a button to download and one to view. The javascript file should contain the code for all this logic.
+
+There should also be a `Containerfile` that creates a container image for this project. Make sure to use python version 3.9 as the base image and leave some space for me to write the code required to setup the bonsai project, you just need to assume that it will be present at the above location.
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..77e4615
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,49 @@
+# Python
+__pycache__/
+*.py[cod]
+*$py.class
+*.so
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+MANIFEST
+
+# Virtual Environment
+venv/
+env/
+ENV/
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Flask
+instance/
+.webassets-cache
+
+# Environment variables
+.env
+.env.local
+
+# Container artifacts
+.buildah/
+.containerignore 
\ No newline at end of file
diff --git a/Containerfile b/Containerfile
new file mode 100644
index 0000000..c8ff201
--- /dev/null
+++ b/Containerfile
@@ -0,0 +1,37 @@
+FROM python:3.9-slim
+
+# Set working directory
+WORKDIR /app
+
+# Install system dependencies
+RUN apt-get update && apt-get install -y \
+    git \
+    && rm -rf /var/lib/apt/lists/*
+
+# Copy requirements and install Python dependencies
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# === BONSAI SETUP SECTION ===
+WORKDIR /usr/src/bonsai
+RUN git clone https://codelab.fct.unl.pt/di/computer-systems/bonsai . && \
+    pip install --no-cache-dir 'torch~=2.0.1' && \
+    pip install --no-cache-dir -r requirements.txt
+# === END BONSAI SETUP SECTION ===
+
+# Copy application files
+COPY app.py .
+COPY index.html .
+COPY script.js .
+COPY logo.png .
+
+# Expose the port
+EXPOSE 5000
+
+# Set environment variables
+ENV FLASK_APP=app.py
+ENV FLASK_ENV=production
+ENV BONSAI_TEST_MODE=false
+
+# Run the application
+CMD ["python", "app.py"] 
\ No newline at end of file
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..1467530
--- /dev/null
+++ b/README.md
@@ -0,0 +1,184 @@
+# Bonsai Web
+
+A simple web interface for the Bonsai network latency graph generator.
+
+## Features
+
+- Clean, modern UI using Pico CSS
+- YAML configuration input
+- Real-time file generation
+- File viewing and downloading capabilities
+- Containerized deployment support
+
+## Local Development
+
+### Prerequisites
+
+- Python 3.9+
+- Flask
+
+### Installation
+
+1. Clone this repository
+2. Install dependencies:
+   ```bash
+   pip install -r requirements.txt
+   ```
+
+### Running Locally
+
+```bash
+python app.py
+```
+
+The application will be available at `http://localhost:5000`
+
+### Environment Configuration
+
+The application behavior can be controlled using the `BONSAI_TEST_MODE` environment variable:
+
+- **Test Mode** (default for local development): `BONSAI_TEST_MODE=true`
+  - If Bonsai fails or is not available, dummy files are generated for testing
+  - Useful for development and testing the web interface
+  
+- **Production Mode**: `BONSAI_TEST_MODE=false`
+  - If Bonsai fails, proper error messages are returned to the user
+  - No dummy files are generated
+
+```bash
+# Run in production mode
+BONSAI_TEST_MODE=false python app.py
+
+# Run in test mode (default)
+BONSAI_TEST_MODE=true python app.py
+# or simply
+python app.py
+```
+
+### Development Mode
+
+For development, the application includes fallback dummy data generation when `BONSAI_TEST_MODE=true` and the actual Bonsai tool is not available. This allows you to test the web interface without having the full Bonsai installation.
+
+**Error Handling**: When Bonsai fails in production mode, detailed error messages are displayed to the user in red text, including:
+- Execution failures with return codes and stderr output
+- Timeout errors (30-second limit)
+- Missing Bonsai installation errors
+
+## Container Deployment
+
+### Building the Container
+
+#### Local Build (for testing)
+```bash
+./build.sh
+```
+
+#### Production Build and Push
+```bash
+PUSH=1 ./build.sh
+```
+
+The build script will:
+- Always build the container image with appropriate tags
+- Only push to `git.d464.sh/diogo464/bonsai-web` when `PUSH=1` is set
+- Use git tags for versioning (or 'latest' if no tag)
+- Check registry authentication only when pushing
+
+#### Manual Build Commands
+
+```bash
+# Local build
+podman build -t bonsai-web -f Containerfile .
+
+# Production build and push
+podman build -t git.d464.sh/diogo464/bonsai-web:latest -f Containerfile .
+podman push git.d464.sh/diogo464/bonsai-web:latest
+```
+
+### Running the Container
+
+#### From Local Build
+```bash
+podman run -p 5000:5000 bonsai-web:local
+```
+
+#### From Registry
+```bash
+podman run -p 5000:5000 git.d464.sh/diogo464/bonsai-web:latest
+```
+
+### Registry Authentication
+
+Before pushing to the registry, authenticate with:
+```bash
+podman login git.d464.sh
+```
+
+### Bonsai Integration
+
+To integrate with the actual Bonsai tool, modify the `Containerfile` in the "BONSAI SETUP SECTION" to:
+
+1. Clone or copy the Bonsai source code to `/usr/src/bonsai`
+2. Install Bonsai's dependencies
+3. Ensure the Bonsai tool is properly configured
+
+Example:
+```dockerfile
+# In the BONSAI SETUP SECTION of Containerfile
+RUN git clone https://github.com/your-org/bonsai.git /usr/src/bonsai
+WORKDIR /usr/src/bonsai
+RUN pip install -r requirements.txt
+WORKDIR /app
+```
+
+## Usage
+
+1. Open the web application in your browser
+2. Enter your network configuration in YAML format in the text area
+3. Click "Generate Network Files"
+4. View or download the generated `edges.csv` and `nodes.csv` files
+
+### Example Configuration
+
+```yaml
+network:
+  nodes: 10
+  density: 0.3
+  latency_range: [1, 100]
+```
+
+## API
+
+### POST /
+
+Generates network files from a YAML configuration.
+
+**Request Body:**
+```json
+{
+  "config": "network:\n  nodes: 10\n  density: 0.3"
+}
+```
+
+**Response:**
+```json
+{
+  "edges.csv": "source,target,weight\nnode1,node2,0.5\n...",
+  "nodes.csv": "id,label,x,y\nnode1,Node 1,0,0\n..."
+}
+```
+
+## Project Structure
+
+```
+.
+├── app.py              # Flask backend
+├── index.html          # Main web page
+├── script.js           # Client-side JavaScript
+├── logo.png            # Bonsai logo
+├── requirements.txt    # Python dependencies
+├── Containerfile       # Container build instructions
+├── build.sh            # Container build script
+├── .gitignore          # Git ignore patterns
+└── README.md          # This file
+``` 
\ No newline at end of file
diff --git a/app.py b/app.py
new file mode 100644
index 0000000..002957a
--- /dev/null
+++ b/app.py
@@ -0,0 +1,154 @@
+import os
+import subprocess
+import tempfile
+import json
+from flask import Flask, request, jsonify, send_from_directory
+
+app = Flask(__name__)
+
+# Check if we're in test environment (defaults to True for local development)
+TEST_ENVIRONMENT = os.getenv("BONSAI_TEST_MODE", "true").lower() == "true"
+
+
+@app.route("/")
+def index():
+    """Serve the main HTML page."""
+    return send_from_directory(".", "index.html")
+
+
+@app.route("/logo.png")
+def logo():
+    """Serve the logo image."""
+    return send_from_directory(".", "logo.png")
+
+
+@app.route("/script.js")
+def script():
+    """Serve the JavaScript file."""
+    return send_from_directory(".", "script.js")
+
+
+@app.route("/", methods=["POST"])
+def generate_files():
+    """Handle configuration submission and execute bonsai."""
+    try:
+        # Get the configuration from the request
+        data = request.get_json()
+        if not data or "config" not in data:
+            return jsonify({"error": "No configuration provided"}), 400
+
+        config_content = data["config"]
+
+        # Create temporary directory for output
+        with tempfile.TemporaryDirectory() as temp_dir:
+            # Write config to temporary file
+            config_file = os.path.join(temp_dir, "config.yaml")
+            with open(config_file, "w") as f:
+                f.write(config_content)
+
+            # Create output directory
+            output_dir = os.path.join(temp_dir, "output")
+            os.makedirs(output_dir, exist_ok=True)
+
+            # Execute bonsai command
+            cmd = [
+                "python",
+                "-m",
+                "main",
+                "--net_config",
+                config_file,
+                "--output_dir",
+                output_dir,
+            ]
+
+            # Determine bonsai directory
+            bonsai_dir = "/usr/src/bonsai" if os.path.exists("/usr/src/bonsai") else "."
+
+            try:
+                result = subprocess.run(
+                    cmd, cwd=bonsai_dir, capture_output=True, text=True, timeout=30
+                )
+
+                if result.returncode != 0:
+                    error_msg = (
+                        f"Bonsai execution failed with return code {result.returncode}"
+                    )
+                    if result.stderr:
+                        error_msg += f": {result.stderr.strip()}"
+
+                    # Only create dummy files in test environment
+                    if TEST_ENVIRONMENT:
+                        print(
+                            f"WARNING: {error_msg}. Creating dummy files for testing."
+                        )
+                        edges_content = (
+                            "source,target,weight\nnode1,node2,0.5\nnode2,node3,0.3\n"
+                        )
+                        nodes_content = "id,label,x,y\nnode1,Node 1,0,0\nnode2,Node 2,1,1\nnode3,Node 3,2,0\n"
+
+                        with open(os.path.join(output_dir, "edges.csv"), "w") as f:
+                            f.write(edges_content)
+                        with open(os.path.join(output_dir, "nodes.csv"), "w") as f:
+                            f.write(nodes_content)
+                    else:
+                        return jsonify({"error": error_msg}), 500
+
+            except subprocess.TimeoutExpired:
+                error_msg = "Bonsai execution timed out after 30 seconds"
+                if TEST_ENVIRONMENT:
+                    print(f"WARNING: {error_msg}. Creating dummy files for testing.")
+                    edges_content = (
+                        "source,target,weight\nnode1,node2,0.5\nnode2,node3,0.3\n"
+                    )
+                    nodes_content = "id,label,x,y\nnode1,Node 1,0,0\nnode2,Node 2,1,1\nnode3,Node 3,2,0\n"
+
+                    with open(os.path.join(output_dir, "edges.csv"), "w") as f:
+                        f.write(edges_content)
+                    with open(os.path.join(output_dir, "nodes.csv"), "w") as f:
+                        f.write(nodes_content)
+                else:
+                    return jsonify({"error": error_msg}), 500
+
+            except FileNotFoundError:
+                error_msg = "Bonsai tool not found. Please ensure Bonsai is installed and available."
+                if TEST_ENVIRONMENT:
+                    print(f"WARNING: {error_msg}. Creating dummy files for testing.")
+                    edges_content = (
+                        "source,target,weight\nnode1,node2,0.5\nnode2,node3,0.3\n"
+                    )
+                    nodes_content = "id,label,x,y\nnode1,Node 1,0,0\nnode2,Node 2,1,1\nnode3,Node 3,2,0\n"
+
+                    with open(os.path.join(output_dir, "edges.csv"), "w") as f:
+                        f.write(edges_content)
+                    with open(os.path.join(output_dir, "nodes.csv"), "w") as f:
+                        f.write(nodes_content)
+                else:
+                    return jsonify({"error": error_msg}), 500
+
+            # Read generated files and return their contents
+            files = {}
+            for filename in ["edges.csv", "nodes.csv"]:
+                filepath = os.path.join(output_dir, filename)
+                if os.path.exists(filepath):
+                    with open(filepath, "r") as f:
+                        files[filename] = f.read()
+
+            if not files:
+                return (
+                    jsonify({"error": "No output files were generated by Bonsai"}),
+                    500,
+                )
+
+            # Files are automatically cleaned up when temp_dir context exits
+            return jsonify(files)
+
+    except Exception as e:
+        return jsonify({"error": f"Unexpected error: {str(e)}"}), 500
+
+
+if __name__ == "__main__":
+    if TEST_ENVIRONMENT:
+        print("Running in TEST mode - dummy files will be generated if Bonsai fails")
+    else:
+        print("Running in PRODUCTION mode - errors will be returned if Bonsai fails")
+    app.run(debug=True, host="0.0.0.0", port=5000)
diff --git a/build.sh b/build.sh
new file mode 100755
index 0000000..df3d28a
--- /dev/null
+++ b/build.sh
@@ -0,0 +1,146 @@
+#!/bin/bash
+
+# Container registry configuration
+REGISTRY="git.d464.sh"
+NAMESPACE="diogo464"
+IMAGE_NAME="bonsai-web"
+FULL_IMAGE_NAME="${REGISTRY}/${NAMESPACE}/${IMAGE_NAME}"
+
+# Get version from git tag or use 'latest'
+VERSION=$(git describe --tags --exact-match 2>/dev/null || echo "latest")
+
+# Check if we should push to registry
+SHOULD_PUSH=${PUSH:-0}
+
+# Colors for output
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+BLUE='\033[0;34m'
+NC='\033[0m' # No Color
+
+# Logging functions
+log_info() {
+    echo -e "${BLUE}[INFO]${NC} $1"
+}
+
+log_success() {
+    echo -e "${GREEN}[SUCCESS]${NC} $1"
+}
+
+log_warning() {
+    echo -e "${YELLOW}[WARNING]${NC} $1"
+}
+
+log_error() {
+    echo -e "${RED}[ERROR]${NC} $1"
+}
+
+# Error handler
+handle_error() {
+    log_error "Script failed at line $1"
+    exit 1
+}
+
+trap 'handle_error $LINENO' ERR
+set -e
+
+if [[ "$SHOULD_PUSH" == "1" ]]; then
+    log_info "Starting container build and push process..."
+    log_info "Registry: ${REGISTRY}"
+    log_info "Image: ${FULL_IMAGE_NAME}"
+else
+    log_info "Starting container build process (local only)..."
+    log_info "Image: ${IMAGE_NAME}"
+fi
+log_info "Version: ${VERSION}"
+
+# Check if podman is available
+if ! command -v podman &> /dev/null; then
+    log_error "podman is not installed or not in PATH"
+    exit 1
+fi
+
+# Check if we're in the right directory
+if [[ ! -f "Containerfile" ]]; then
+    log_error "Containerfile not found. Please run this script from the project root."
+    exit 1
+fi
+
+# Check if we're logged into the registry (only if pushing)
+if [[ "$SHOULD_PUSH" == "1" ]]; then
+    log_info "Checking registry authentication..."
+    if ! podman login --get-login "${REGISTRY}" &> /dev/null; then
+        log_warning "Not logged into ${REGISTRY}. Please login first:"
+        echo "podman login ${REGISTRY}"
+        exit 1
+    fi
+fi
+
+# Build the container image
+log_info "Building container image..."
+if [[ "$SHOULD_PUSH" == "1" ]]; then
+    # Build with registry tags for pushing
+    podman build \
+        -f Containerfile \
+        -t "${FULL_IMAGE_NAME}:${VERSION}" \
+        -t "${FULL_IMAGE_NAME}:latest" \
+        -t "${IMAGE_NAME}:local" \
+        .
+else
+    # Build with local tags only
+    podman build \
+        -f Containerfile \
+        -t "${IMAGE_NAME}:${VERSION}" \
+        -t "${IMAGE_NAME}:latest" \
+        -t "${IMAGE_NAME}:local" \
+        .
+fi
+
+log_success "Container image built successfully"
+
+if [[ "$SHOULD_PUSH" == "1" ]]; then
+    # Push the versioned tag
+    log_info "Pushing ${FULL_IMAGE_NAME}:${VERSION}..."
+    podman push "${FULL_IMAGE_NAME}:${VERSION}"
+    log_success "Pushed ${FULL_IMAGE_NAME}:${VERSION}"
+
+    # Push the latest tag (only if version is not 'latest')
+    if [[ "${VERSION}" != "latest" ]]; then
+        log_info "Pushing ${FULL_IMAGE_NAME}:latest..."
+        podman push "${FULL_IMAGE_NAME}:latest"
+        log_success "Pushed ${FULL_IMAGE_NAME}:latest"
+    fi
+fi
+
+# Display final information
+echo
+if [[ "$SHOULD_PUSH" == "1" ]]; then
+    log_success "Build and push completed successfully!"
+    echo
+    echo "Image details:"
+    echo "  Registry: ${REGISTRY}"
+    echo "  Full name: ${FULL_IMAGE_NAME}"
+    echo "  Version: ${VERSION}"
+    echo
+    echo "To run the container:"
+    echo "  podman run -p 5000:5000 ${FULL_IMAGE_NAME}:${VERSION}"
+    echo
+    echo "To pull on another machine:"
+    echo "  podman pull ${FULL_IMAGE_NAME}:${VERSION}"
+else
+    log_success "Local build completed!"
+    echo
+    echo "Image details:"
+    echo "  Name: ${IMAGE_NAME}"
+    echo "  Version: ${VERSION}"
+    echo
+    echo "To run the container:"
+    echo "  podman run -p 5000:5000 ${IMAGE_NAME}:${VERSION}"
+    echo
+    echo "To test the container:"
+    echo "  podman run --rm -p 5000:5000 ${IMAGE_NAME}:${VERSION}"
+    echo
+    echo "To push to registry:"
+    echo "  PUSH=1 $0"
+fi 
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..fff715a
--- /dev/null
+++ b/index.html
@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Bonsai - Network Latency Graph Generator</title>
+    <link rel="stylesheet" href="https://unpkg.com/@picocss/[email protected]/css/pico.min.css">
+    <style>
+        .logo-container {
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+            margin-bottom: 2rem;
+        }
+
+        .logo {
+            height: 60px;
+            width: auto;
+        }
+
+        .file-item {
+            margin-bottom: 1rem;
+            padding: 1rem;
+            border: 1px solid var(--border-color);
+            border-radius: var(--border-radius);
+        }
+
+        .file-buttons {
+            display: flex;
+            gap: 0.5rem;
+            margin-top: 0.5rem;
+        }
+
+        .file-content {
+            margin-top: 1rem;
+            padding: 1rem;
+            background-color: var(--code-background-color);
+            border-radius: var(--border-radius);
+            white-space: pre;
+            font-family: monospace;
+            font-size: 0.9rem;
+            max-height: 300px;
+            overflow-y: auto;
+            display: none;
+        }
+
+        .error {
+            color: var(--color-red);
+            background-color: var(--color-red-background);
+            padding: 1rem;
+            border-radius: var(--border-radius);
+            margin-top: 1rem;
+        }
+
+        .loading {
+            text-align: center;
+            margin-top: 1rem;
+        }
+    </style>
+</head>
+
+<body>
+    <main class="container">
+        <header>
+            <div class="logo-container">
+                <img src="logo.png" alt="Bonsai Logo" class="logo">
+                <h1>Bonsai</h1>
+            </div>
+        </header>
+
+        <section>
+            <p>
+                Bonsai is a powerful tool for generating realistic network latency graphs.
+                This web interface provides an easy way to use the
+                <a href="https://codelab.fct.unl.pt/di/computer-systems/bonsai" target="_blank">Bonsai project</a>
+                without needing to install its dependencies locally.
+                Simply provide your network configuration in YAML format below, and click
+                "Generate" to create your network topology files.
+            </p>
+
+            <p>
+                The tool will generate two CSV files: <code>edges.csv</code> containing
+                the network connections and weights, and <code>nodes.csv</code> containing
+                the node information and positions.
+            </p>
+        </section>
+
+        <section>
+            <label for="config">Network Configuration (YAML):</label>
+            <textarea id="config" name="config" rows="10">nodes: 15
+continents:
+    EU: 5
+    AS: 5
+countries:
+    DE: 2
+    FR: 2
+    CN: 2
+    JP: 2</textarea>
+
+            <button id="generateBtn" onclick="generateFiles()">Generate Network Files</button>
+
+            <div id="loading" class="loading" style="display: none;">
+                <p aria-busy="true">Generating network files...</p>
+            </div>
+
+            <div id="error" class="error" style="display: none;"></div>
+
+            <div id="results" style="margin-top: 2rem;"></div>
+        </section>
+    </main>
+
+    <script src="script.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/logo.png b/logo.png
new file mode 100644
index 0000000..fb6e55d
--- /dev/null
+++ b/logo.png
diff --git a/requirements.txt b/requirements.txt
new file mode 100644
index 0000000..c4988fb
--- /dev/null
+++ b/requirements.txt
@@ -0,0 +1,2 @@
+Flask==2.3.3
+Werkzeug==2.3.7 
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..5bc60b0
--- /dev/null
+++ b/script.js
@@ -0,0 +1,156 @@
+let generatedFiles = {};
+
+async function generateFiles() {
+    const configTextarea = document.getElementById('config');
+    const generateBtn = document.getElementById('generateBtn');
+    const loadingDiv = document.getElementById('loading');
+    const errorDiv = document.getElementById('error');
+    const resultsDiv = document.getElementById('results');
+
+    const config = configTextarea.value.trim();
+
+    if (!config) {
+        showError('Please enter a configuration before generating files.');
+        return;
+    }
+
+    // Reset UI state
+    hideError();
+    hideResults();
+    showLoading();
+    generateBtn.disabled = true;
+
+    try {
+        const response = await fetch('/', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({ config: config })
+        });
+
+        const data = await response.json();
+
+        if (!response.ok) {
+            throw new Error(data.error || 'Failed to generate files');
+        }
+
+        // Store the generated files
+        generatedFiles = data;
+
+        // Display the results
+        displayResults(data);
+
+    } catch (error) {
+        console.error('Error generating files:', error);
+        showError('Error generating files: ' + error.message);
+    } finally {
+        hideLoading();
+        generateBtn.disabled = false;
+    }
+}
+
+function displayResults(files) {
+    const resultsDiv = document.getElementById('results');
+
+    if (Object.keys(files).length === 0) {
+        showError('No files were generated.');
+        return;
+    }
+
+    let html = '<h3>Generated Files</h3>';
+
+    for (const [filename, content] of Object.entries(files)) {
+        html += `
+            <div class="file-item">
+                <h4>${filename}</h4>
+                <p>Size: ${content.length} characters</p>
+                <div class="file-buttons">
+                    <button onclick="toggleFileContent('${filename}')" id="view-${filename}">
+                        View Content
+                    </button>
+                    <button onclick="downloadFile('${filename}')" class="secondary">
+                        Download
+                    </button>
+                </div>
+                <div id="content-${filename}" class="file-content">${escapeHtml(content)}</div>
+            </div>
+        `;
+    }
+
+    resultsDiv.innerHTML = html;
+    resultsDiv.style.display = 'block';
+}
+
+function toggleFileContent(filename) {
+    const contentDiv = document.getElementById(`content-${filename}`);
+    const viewBtn = document.getElementById(`view-${filename}`);
+
+    if (contentDiv.style.display === 'none' || contentDiv.style.display === '') {
+        contentDiv.style.display = 'block';
+        viewBtn.textContent = 'Hide Content';
+    } else {
+        contentDiv.style.display = 'none';
+        viewBtn.textContent = 'View Content';
+    }
+}
+
+function downloadFile(filename) {
+    if (!generatedFiles[filename]) {
+        showError('File not found: ' + filename);
+        return;
+    }
+
+    const content = generatedFiles[filename];
+    const blob = new Blob([content], { type: 'text/csv' });
+    const url = window.URL.createObjectURL(blob);
+
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = filename;
+    document.body.appendChild(a);
+    a.click();
+
+    // Clean up
+    window.URL.revokeObjectURL(url);
+    document.body.removeChild(a);
+}
+
+function showError(message) {
+    const errorDiv = document.getElementById('error');
+    errorDiv.textContent = message;
+    errorDiv.style.display = 'block';
+}
+
+function hideError() {
+    const errorDiv = document.getElementById('error');
+    errorDiv.style.display = 'none';
+}
+
+function showLoading() {
+    const loadingDiv = document.getElementById('loading');
+    loadingDiv.style.display = 'block';
+}
+
+function hideLoading() {
+    const loadingDiv = document.getElementById('loading');
+    loadingDiv.style.display = 'none';
+}
+
+function hideResults() {
+    const resultsDiv = document.getElementById('results');
+    resultsDiv.style.display = 'none';
+}
+
+function escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+}
+
+// Add Enter key support for the textarea (Ctrl+Enter to generate)
+document.getElementById('config').addEventListener('keydown', function (event) {
+    if (event.ctrlKey && event.key === 'Enter') {
+        generateFiles();
+    }
+}); 
\ No newline at end of file