First step to templated html

frontend.html

@@ -39,7 +39,7 @@
         <a href="#" class="chevron right" id="next-btn">&#8250;</a>
     </div>
     <script>
-        let currentData = null;
+        let currentData = { img: '$img_hash', next: '$next_hash', previous: '$prev_hash' };
 
         function loadImageSrc(hash) {
             document.getElementById('img').src = '/' + hash + '/data';

main.py

@@ -4,13 +4,14 @@ import mimetypes
 import os
 import random
 import secrets
+import string
 import zipfile
 from glob import glob
 from io import BytesIO
 from pathlib import Path
 
 from fastapi import FastAPI, HTTPException
-from fastapi.responses import FileResponse, StreamingResponse
+from fastapi.responses import FileResponse, HTMLResponse, StreamingResponse
 
 app = FastAPI()
 file_mapping = {}
@@ -123,11 +124,29 @@ def initialize_server(args: argparse.Namespace):
 
 @app.get("/")
 async def root():
-    """Serve the Frontend app"""
+    """Serve the Frontend app with navigation hashes"""
-    return FileResponse("frontend.html")
+    if not file_mapping:
+        raise HTTPException(status_code=404, detail="No files indexed")
+
+    keys = list(file_mapping.keys())
+    current = keys[0]
+    next_hash = keys[1] if len(keys) > 1 else keys[0]
+    prev_hash = keys[-1] if len(keys) > 1 else keys[0]
+
+    with open("frontend.html", "r") as f:
+        content = f.read()
+
+    template = string.Template(content)
+    content = template.substitute(
+        img_hash=current,
+        next_hash=next_hash,
+        prev_hash=prev_hash,
+    )
+
+    return HTMLResponse(content=content)
 
 
-@app.get("/random")
+@app.get("/api/random")
 async def get_random_file():
     """Get random file hashes from the mapping"""
     if not file_mapping:
@@ -149,7 +168,7 @@ def _find_indexer_for_hash(file_hash: str):
     return None
 
 
-@app.get("/{file_hash}/data")
+@app.get("/api/{file_hash}/data")
 async def get_file_data(file_hash: str):
     """Serve a specific file by its hash"""
     if file_hash not in file_mapping:
@@ -173,7 +192,7 @@ async def get_file_data(file_hash: str):
     )
 
 
-@app.get("/{file_hash}")
+@app.get("/api/{file_hash}")
 async def get_file_info(file_hash: str):
     """Get file info by hash"""
     if file_hash not in file_mapping:
@@ -193,7 +212,7 @@ async def get_file_info(file_hash: str):
 
 
 # Optional: Add a health check endpoint
-@app.get("/health")
+@app.get("/api/health")
 async def health_check():
     return {"status": "healthy", "file_count": len(file_mapping)}