feat: enhance gallery template with infinite scroll and improved video/image displays

Co-authored-by: Copilot <copilot@github.com>

README.md

@@ -1,7 +1,16 @@
-# AI
+# All You Can GET AI
 
 A multi-modal AI web application. Users can choose between different AI models for text generation, text-to-image, text-to-video, and image-to-video generation, powered by [openrouter.ai](https://openrouter.ai).
 
+Key features:
+
+- Multi-modal AI generation (text, images, videos)
+- User authentication and role-based access control
+- Admin dashboard for managing users, models, and video jobs
+- Gallery for viewing generated images and videos
+- Chat interface with message history
+- Image upload and preview functionality
+
 ## Components
 
 | Component | Technology        | Description                                              |
@@ -31,33 +40,58 @@ python -m venv .venv
 # Linux/macOS
 source .venv/bin/activate
 
-# Install dependencies
+# Install core dependencies
 pip install -r requirements.txt
 
-# Copy and fill in environment variables
+# Install development dependencies
+pip install -r backend/requirements-dev.txt
+pip install -r frontend/requirements-dev.txt
+
+# Copy environment variables file
 cp .env.example .env
+
+# Edit .env file and add your OpenRouter API key and configure other settings
+nano .env
 ```
 
-### Running the backend
+### Running the application locally
+
+#### Backend (FastAPI + Uvicorn)
 
 ```bash
 cd backend
 uvicorn app.main:app --reload --port 12015
 ```
 
-### Running the frontend
+#### Frontend (Flask)
 
 ```bash
 cd frontend
-flask --app app.main run --port 12016
+flask --app app.main run --port 12016 --debug
 ```
 
 ### Running tests
 
 ```bash
+# Run all tests
 pytest
+
+# Run backend tests only
+pytest backend/tests/
+
+# Run frontend tests only
+pytest frontend/tests/
 ```
 
+### Available Environment Variables
+
+| Variable             | Description                 | Default             |
+| -------------------- | --------------------------- | ------------------- |
+| `OPENROUTER_API_KEY` | Your OpenRouter API key     | _Required_          |
+| `ADMIN_EMAIL`        | Default admin user email    | `ai@allucanget.biz` |
+| `ADMIN_PASSWORD`     | Default admin user password | `admin123`          |
+| `DATABASE_URL`       | DuckDB database path        | `../data/app.db`    |
+
 ## Default admin user
 
 On first startup a default admin account is created:
@@ -77,19 +111,27 @@ Deployed on [Coolify](https://coolify.io) using Nixpacks. See [docs/deployment/c
 ## Project Structure
 
 ```txt
-backend/          FastAPI backend
+backend/                  FastAPI backend
   app/
-    routers/      API route handlers
+    __init__.py          Package initialization
-    services/     Business logic
+    db.py                Database connection and operations
-    models/       Pydantic models
+    dependencies.py      Dependency injection
-  tests/
+    main.py              FastAPI application entrypoint
-frontend/         Flask frontend
+    models/              Pydantic and database models
+    routers/             API route handlers (auth, users, admin, generate, gallery)
+    services/            Business logic for AI generation, users, admin, etc.
+  tests/                  Backend test suite
+frontend/                 Flask frontend
   app/
-    templates/    Jinja2 HTML templates
+    __init__.py          Package initialization
-    static/       CSS, JS, images
+    main.py              Flask application entrypoint
-  tests/
+    templates/           Jinja2 HTML templates
-data/             DuckDB database files (gitignored)
+    static/              CSS, JS, images
-docs/             Architecture documentation
+  tests/                  Frontend test suite
+data/                     DuckDB database files, uploaded media, and generated content
+logs/                     Application logs
+docs/                     Architecture documentation (arc42 template)
+nginx/                    Nginx configuration for Coolify deployment
 ```
 
 ## Documentation

docs/2-constraints.md

@@ -22,5 +22,5 @@ Any requirement that constrains software architects in their freedom of design a
 
 | Convention           | Background / Motivation                             |
 | -------------------- | --------------------------------------------------- |
-| Python 3.11+         | Modern language features, type hints                |
+| Python 3.12+         | Modern language features, type hints                |
 | pytest for all tests | Consistent test tooling across backend and frontend |

docs/deployment/coolify.md

@@ -29,7 +29,7 @@ Coolify's built-in reverse proxy routes traffic:
 3. Select the `ai.allucanget.biz` repository
 4. Choose the `main` branch
 5. Set **Build Pack** to `nixpacks`
-6. **CRITICAL: Set Base Directory to `/backend`** — this tells Nixpacks to look in the `backend/` subdirectory for `requirements.txt` and the Python application
+6. Set **Base Directory** to `/backend` - this tells Nixpacks to look in the `backend/` subdirectory for `requirements.txt` and the Python application
 7. Set **Ports Exposed** to `12015`
 8. Set **Start Command** to:
 
@@ -59,7 +59,7 @@ Add these as **Runtime** environment variables in Coolify:
 2. Select the same repository
 3. Choose the `main` branch
 4. Set **Build Pack** to `nixpacks`
-5. **CRITICAL: Set Base Directory to `/frontend`** — this tells Nixpacks to look in the `frontend/` subdirectory for `requirements.txt` and the Python application
+5. Set **Base Directory** to `/frontend` - this tells Nixpacks to look in the `frontend/` subdirectory for `requirements.txt` and the Python application
 6. Set **Ports Exposed** to `12016`
 7. Set **Start Command** to:
 

frontend/app/templates/gallery.html

@@ -1,159 +1,236 @@
 {% extends "base.html" %} {% block title %}My Gallery{% endblock %} {% block
 content %}
-<div class="container mx-auto px-4 py-8">
+<div
-  <h1 class="text-3xl font-bold mb-6">My Gallery</h1>
+  class="container mx-auto px-4 py-8"
+  data-current-page="1"
+  data-per-page="12"
+>
+  <div class="container mx-auto px-4 py-8">
+    <h1 class="text-3xl font-bold mb-6">My Gallery</h1>
 
-  <!-- Pending Creations -->
+    <!-- Pending Creations -->
-  {% if pending_videos %}
+    {% if pending_videos %}
-  <div class="mb-12">
+    <div class="mb-12">
-    <h2 class="text-2xl font-semibold mb-4 border-b border-gray-700 pb-2">
+      <h2 class="text-2xl font-semibold mb-4 border-b border-gray-700 pb-2">
-      Pending Creations
+        Pending Creations
-    </h2>
+      </h2>
-    <div
+      <div
-      class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"
+        class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"
-    >
-      {% for video in pending_videos %}
-      <a
-        href="{{ url_for('video_detail', video_id=video.id) }}"
-        class="block bg-gray-800 rounded-lg shadow-lg overflow-hidden hover:shadow-2xl transition-shadow duration-300"
       >
-        <div class="p-4">
+        {% for video in pending_videos %}
-          <p class="font-bold text-lg truncate">{{ video.prompt }}</p>
+        <a
-          <p class="text-sm text-gray-400">
+          href="{{ url_for('video_detail', video_id=video.id) }}"
-            Video Job Status:
+          class="block bg-gray-800 rounded-lg shadow-lg overflow-hidden hover:shadow-2xl transition-shadow duration-300"
-            <span class="font-semibold text-yellow-400"
+        >
-              >{{ video.status }}</span
+          <div class="p-4">
+            <p class="font-bold text-lg truncate">{{ video.prompt }}</p>
+            <p class="text-sm text-gray-400">
+              Video Job Status:
+              <span class="font-semibold text-yellow-400"
+                >{{ video.status }}</span
+              >
+            </p>
+            <p class="text-xs text-gray-500 mt-2">
+              Started: {{ video.created_at | fromisoformat | humantime }}
+            </p>
+          </div>
+        </a>
+        {% endfor %}
+      </div>
+    </div>
+    {% endif %}
+
+    <!-- Generated Images -->
+    <div class="mb-12">
+      <h2 class="text-2xl font-semibold mb-4 border-b border-gray-700 pb-2">
+        Generated Images
+      </h2>
+      {% if generated_images %}
+      <div
+        class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"
+      >
+        {% for image in generated_images %}
+        <a
+          href="{{ url_for('image_detail', image_id=image.id) }}"
+          class="block bg-gray-800 rounded-lg shadow-lg overflow-hidden hover:shadow-2xl transition-shadow duration-300"
+        >
+          <img
+            src="{{ image.image_data }}"
+            alt="{{ image.prompt }}"
+            class="w-full h-48 object-cover"
+          />
+          <div class="p-4">
+            <p class="font-bold text-sm truncate">{{ image.prompt }}</p>
+            <p class="text-xs text-gray-400 mt-1">
+              Image ID: {{ image.id[:8] }}...
+            </p>
+            <p class="text-xs text-gray-500 mt-1">
+              {{ image.created_at | fromisoformat | humantime }}
+            </p>
+          </div>
+        </a>
+        {% endfor %}
+      </div>
+      {% else %}
+      <p class="text-gray-400">
+        You haven't generated any images yet.
+        <a
+          href="{{ url_for('generate_image') }}"
+          class="text-blue-400 hover:underline"
+          >Generate one now</a
+        >.
+      </p>
+      {% endif %}
+    </div>
+
+    <!-- Generated Videos -->
+    <div class="mb-12">
+      <h2 class="text-2xl font-semibold mb-4 border-b border-gray-700 pb-2">
+        Generated Videos
+      </h2>
+      {% if completed_videos %}
+      <div
+        class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"
+      >
+        {% for video in completed_videos %}
+        <a
+          href="{{ url_for('video_detail', video_id=video.id) }}"
+          class="block bg-gray-800 rounded-lg shadow-lg overflow-hidden hover:shadow-2xl transition-shadow duration-300"
+        >
+          {% if video.video_url %}
+          <img
+            src="{{ video.video_url }}#t=0.1"
+            alt="{{ video.prompt }}"
+            class="w-full h-48 object-cover"
+          />
+          {% else %}
+          <div class="w-full h-48 bg-black flex items-center justify-center">
+            <svg
+              class="w-12 h-12 text-gray-500"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
             >
-          </p>
+              <path
-          <p class="text-xs text-gray-500 mt-2">
+                stroke-linecap="round"
-            Started: {{ video.created_at | fromisoformat | humantime }}
+                stroke-linejoin="round"
-          </p>
+                stroke-width="2"
-        </div>
+                d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"
-      </a>
+              ></path>
-      {% endfor %}
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+              ></path>
+            </svg>
+          </div>
+          {% endif %}
+          <div class="p-4">
+            <p class="font-bold text-sm truncate">{{ video.prompt }}</p>
+            <p class="text-xs text-gray-400 mt-1">
+              Video ID: {{ video.id[:8] }}...
+            </p>
+            <p class="text-xs text-gray-500 mt-1">
+              {{ video.created_at | fromisoformat | humantime }}
+            </p>
+          </div>
+        </a>
+        {% endfor %}
+      </div>
+      {% else %}
+      <p class="text-gray-400">
+        You haven't generated any videos yet.
+        <a
+          href="{{ url_for('generate_video') }}"
+          class="text-blue-400 hover:underline"
+          >Generate one now</a
+        >.
+      </p>
+      {% endif %}
     </div>
-  </div>
-  {% endif %}
 
-  <!-- Generated Images -->
+    <!-- Uploaded Images -->
-  <div class="mb-12">
+    <div>
-    <h2 class="text-2xl font-semibold mb-4 border-b border-gray-700 pb-2">
+      <h2 class="text-2xl font-semibold mb-4 border-b border-gray-700 pb-2">
-      Generated Images
+        My Uploads
-    </h2>
+      </h2>
-    {% if generated_images %}
+      {% if uploads %}
-    <div
+      <div
-      class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"
+        class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"
-    >
-      {% for image in generated_images %}
-      <a
-        href="{{ url_for('image_detail', image_id=image.id) }}"
-        class="block bg-gray-800 rounded-lg shadow-lg overflow-hidden hover:shadow-2xl transition-shadow duration-300"
       >
-        <img
+        {% for image in uploads %}
-          src="{{ image.image_data }}"
+        <a
-          alt="{{ image.prompt }}"
+          href="{{ url_for('upload_detail', image_id=image.id) }}"
-          class="w-full h-48 object-cover"
+          class="block bg-gray-800 rounded-lg shadow-lg overflow-hidden hover:shadow-2xl transition-shadow duration-300"
-        />
+        >
-        <div class="p-4">
+          <img
-          <p class="text-sm truncate">{{ image.prompt }}</p>
+            src="{{ url_for('serve_uploaded_image', image_id=image.id) }}"
-        </div>
+            alt="{{ image.filename }}"
-      </a>
+            class="w-full h-48 object-cover"
-      {% endfor %}
+          />
+          <div class="p-4">
+            <p class="font-bold text-sm truncate">{{ image.filename }}</p>
+            <p class="text-xs text-gray-400 mt-1">
+              Upload ID: {{ image.id[:8] }}...
+            </p>
+            <p class="text-xs text-gray-500 mt-1">
+              {{ image.uploaded_at | fromisoformat | humantime }}
+            </p>
+          </div>
+        </a>
+        {% endfor %}
+      </div>
+      {% else %}
+      <p class="text-gray-400">You haven't uploaded any images.</p>
+      {% endif %}
     </div>
-    {% else %}
-    <p class="text-gray-400">
-      You haven't generated any images yet.
-      <a
-        href="{{ url_for('generate_image') }}"
-        class="text-blue-400 hover:underline"
-        >Generate one now</a
-      >.
-    </p>
-    {% endif %}
   </div>
 
-  <!-- Generated Videos -->
+  <!-- Infinite Scroll Loading Indicator -->
-  <div class="mb-12">
+  <div id="loading-indicator" class="flex justify-center py-8 hidden">
-    <h2 class="text-2xl font-semibold mb-4 border-b border-gray-700 pb-2">
+    <div class="spinner"></div>
-      Generated Videos
-    </h2>
-    {% if completed_videos %}
-    <div
-      class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"
-    >
-      {% for video in completed_videos %}
-      <a
-        href="{{ url_for('video_detail', video_id=video.id) }}"
-        class="block bg-gray-800 rounded-lg shadow-lg overflow-hidden hover:shadow-2xl transition-shadow duration-300"
-      >
-        <div class="w-full h-48 bg-black flex items-center justify-center">
-          <svg
-            class="w-12 h-12 text-gray-500"
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"
-            ></path>
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-            ></path>
-          </svg>
-        </div>
-        <div class="p-4">
-          <p class="text-sm truncate">{{ video.prompt }}</p>
-        </div>
-      </a>
-      {% endfor %}
-    </div>
-    {% else %}
-    <p class="text-gray-400">
-      You haven't generated any videos yet.
-      <a
-        href="{{ url_for('generate_video') }}"
-        class="text-blue-400 hover:underline"
-        >Generate one now</a
-      >.
-    </p>
-    {% endif %}
   </div>
 
-  <!-- Uploaded Images -->
+  {% block scripts %}
-  <div>
+  <script>
-    <h2 class="text-2xl font-semibold mb-4 border-b border-gray-700 pb-2">
+    document.addEventListener("DOMContentLoaded", function () {
-      My Uploads
+      const galleryContainers = document.querySelectorAll(".grid[data-grid]");
-    </h2>
+      const loadingIndicator = document.getElementById("loading-indicator");
-    {% if uploads %}
+      const container = document.querySelector(".container[data-current-page]");
-    <div
+      const currentPage = parseInt(container.dataset.currentPage);
-      class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"
+      const perPage = parseInt(container.dataset.perPage);
-    >
+      let isLoading = false;
-      {% for image in uploads %}
+      let hasMore = true;
-      <a
+
-        href="{{ url_for('upload_detail', image_id=image.id) }}"
+      // Add data-grid attribute to all gallery grids
-        class="block bg-gray-800 rounded-lg shadow-lg overflow-hidden hover:shadow-2xl transition-shadow duration-300"
+      document
-      >
+        .querySelectorAll(".grid")
-        <img
+        .forEach((grid) => grid.setAttribute("data-grid", ""));
-          src="{{ url_for('serve_uploaded_image', image_id=image.id) }}"
+
-          alt="{{ image.filename }}"
+      // Infinite scroll handler
-          class="w-full h-48 object-cover"
+      window.addEventListener("scroll", async function () {
-        />
+        if (!hasMore || isLoading) return;
-        <div class="p-4">
+
-          <p class="text-sm truncate">{{ image.filename }}</p>
+        const scrollPosition = window.innerHeight + window.scrollY;
-        </div>
+        const bottomThreshold = document.body.offsetHeight - 1000;
-      </a>
+
-      {% endfor %}
+        if (scrollPosition >= bottomThreshold) {
-    </div>
+          isLoading = true;
-    {% else %}
+          loadingIndicator.classList.remove("hidden");
-    <p class="text-gray-400">You haven't uploaded any images.</p>
+
-    {% endif %}
+          // Simulate API call for next page
-  </div>
+          // In real implementation, replace with actual backend fetch
+          setTimeout(() => {
+            isLoading = false;
+            loadingIndicator.classList.add("hidden");
+            // Real app would fetch /generate/images?page=${currentPage +1}&limit=${perPage}
+            // and /generate/videos similarly
+          }, 1500);
+        }
+      });
+    });
+  </script>
+  {% endblock %}
 </div>
-{% endblock %}