Implements PWA features and adds FFmpeg to the Docker image.

Author: laurentftech

Dockerfile

@@ -1,9 +1,14 @@
 # Use an official Python runtime as a parent image
-FROM python:3.11-slim-buster
+FROM python:3.11-slim-bookworm
 
 # Set the working directory in the container
 WORKDIR /app
 
+# Install FFmpeg (required for audio processing)
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    ffmpeg \
+    && rm -rf /var/lib/apt/lists/*
+
 # Copy the requirements file into the container at /app
 COPY requirements.txt .
 

static/manifest.webmanifest

@@ -0,0 +1,21 @@
+{
+    "name": "Podcast Generator",
+    "short_name": "PodcastGen",
+    "description": "Generate podcasts from text scripts using AI.",
+    "start_url": "/",
+    "display": "standalone",
+    "background_color": "#121212",
+    "theme_color": "#1e1e1e",
+    "icons": [
+        {
+            "src": "/assets/podcast.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/assets/podcast.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ]
+}

static/sw.js

@@ -0,0 +1,33 @@
+const CACHE_NAME = 'podcast-generator-cache-v1';
+const urlsToCache = [
+  '/',
+  '/assets/podcast.png',
+  '/static/manifest.webmanifest'
+];
+
+// Install the service worker and cache the app shell
+self.addEventListener('install', event => {
+  event.waitUntil(
+    caches.open(CACHE_NAME)
+      .then(cache => {
+        console.log('Opened cache');
+        return cache.addAll(urlsToCache);
+      })
+  );
+});
+
+// Serve cached content when offline
+self.addEventListener('fetch', event => {
+  // We only want to cache GET requests.
+  if (event.request.method !== 'GET') {
+    return;
+  }
+
+  event.respondWith(
+    caches.match(event.request)
+      .then(response => {
+        // Cache hit - return response
+        return response || fetch(event.request);
+      })
+  );
+});

templates/index.html

@@ -5,6 +5,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Podcast Generator</title>
     <link rel="icon" href="/assets/podcast.png" type="image/png">
+    <link rel="manifest" href="/static/manifest.webmanifest">
+    <meta name="theme-color" content="#1e1e1e">
+    <!-- iOS support -->
+    <link rel="apple-touch-icon" href="/assets/podcast.png">
     <style>
         :root {
             --bg-color: #f4f4f9;
@@ -682,6 +686,17 @@ <h3>Asset Credits</h3>
                     generateDemoConfirmBtn.textContent = 'Generate';
                 }
             }
+
+            // --- PWA Service Worker Registration ---
+            if ('serviceWorker' in navigator) {
+                window.addEventListener('load', () => {
+                    navigator.serviceWorker.register('/static/sw.js').then(registration => {
+                        console.log('ServiceWorker registration successful with scope: ', registration.scope);
+                    }, err => {
+                        console.log('ServiceWorker registration failed: ', err);
+                    });
+                });
+            }
         });
     </script>
 </body>