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:
@@ -79,17 +113,25 @@ Deployed on [Coolify](https://coolify.io) using Nixpacks. See [docs/deployment/c
 ```txt
 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
+    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/
+    __init__.py          Package initialization
+    main.py              Flask application entrypoint
     templates/           Jinja2 HTML templates
     static/              CSS, JS, images
-  tests/
+  tests/                  Frontend test suite
-data/             DuckDB database files (gitignored)
+data/                     DuckDB database files, uploaded media, and generated content
-docs/             Architecture documentation
+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,5 +1,10 @@
 {% extends "base.html" %} {% block title %}My Gallery{% endblock %} {% block
 content %}
+<div
+  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>
 
@@ -55,7 +60,13 @@ content %}
             class="w-full h-48 object-cover"
           />
           <div class="p-4">
-          <p class="text-sm truncate">{{ image.prompt }}</p>
+            <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 %}
@@ -86,6 +97,13 @@ content %}
           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"
@@ -108,8 +126,15 @@ content %}
               ></path>
             </svg>
           </div>
+          {% endif %}
           <div class="p-4">
-          <p class="text-sm truncate">{{ video.prompt }}</p>
+            <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 %}
@@ -146,7 +171,13 @@ content %}
             class="w-full h-48 object-cover"
           />
           <div class="p-4">
-          <p class="text-sm truncate">{{ image.filename }}</p>
+            <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 %}
@@ -156,4 +187,50 @@ content %}
       {% endif %}
     </div>
   </div>
+
+  <!-- Infinite Scroll Loading Indicator -->
+  <div id="loading-indicator" class="flex justify-center py-8 hidden">
+    <div class="spinner"></div>
+  </div>
+
+  {% block scripts %}
+  <script>
+    document.addEventListener("DOMContentLoaded", function () {
+      const galleryContainers = document.querySelectorAll(".grid[data-grid]");
+      const loadingIndicator = document.getElementById("loading-indicator");
+      const container = document.querySelector(".container[data-current-page]");
+      const currentPage = parseInt(container.dataset.currentPage);
+      const perPage = parseInt(container.dataset.perPage);
+      let isLoading = false;
+      let hasMore = true;
+
+      // Add data-grid attribute to all gallery grids
+      document
+        .querySelectorAll(".grid")
+        .forEach((grid) => grid.setAttribute("data-grid", ""));
+
+      // Infinite scroll handler
+      window.addEventListener("scroll", async function () {
+        if (!hasMore || isLoading) return;
+
+        const scrollPosition = window.innerHeight + window.scrollY;
+        const bottomThreshold = document.body.offsetHeight - 1000;
+
+        if (scrollPosition >= bottomThreshold) {
+          isLoading = true;
+          loadingIndicator.classList.remove("hidden");
+
+          // Simulate API call for next page
+          // 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>