24 | Error: {message}
25 |
26 | );
27 | };
28 |
29 | export default ErrorMessage;
--------------------------------------------------------------------------------
/frontend/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "frontend",
3 | "private": true,
4 | "version": "0.0.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "build": "tsc -b && vite build",
9 | "lint": "eslint .",
10 | "preview": "vite preview"
11 | },
12 | "dependencies": {
13 | "@supabase/supabase-js": "^2.49.4",
14 | "react": "^19.0.0",
15 | "react-dom": "^19.0.0"
16 | },
17 | "devDependencies": {
18 | "@eslint/js": "^9.21.0",
19 | "@types/react": "^19.0.10",
20 | "@types/react-dom": "^19.0.4",
21 | "@vitejs/plugin-react": "^4.3.4",
22 | "eslint": "^9.21.0",
23 | "eslint-plugin-react-hooks": "^5.1.0",
24 | "eslint-plugin-react-refresh": "^0.4.19",
25 | "globals": "^15.15.0",
26 | "typescript": "~5.7.2",
27 | "typescript-eslint": "^8.24.1",
28 | "vite": "^6.2.0"
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/frontend/eslint.config.js:
--------------------------------------------------------------------------------
1 | import js from '@eslint/js'
2 | import globals from 'globals'
3 | import reactHooks from 'eslint-plugin-react-hooks'
4 | import reactRefresh from 'eslint-plugin-react-refresh'
5 | import tseslint from 'typescript-eslint'
6 |
7 | export default tseslint.config(
8 | { ignores: ['dist'] },
9 | {
10 | extends: [js.configs.recommended, ...tseslint.configs.recommended],
11 | files: ['**/*.{ts,tsx}'],
12 | languageOptions: {
13 | ecmaVersion: 2020,
14 | globals: globals.browser,
15 | },
16 | plugins: {
17 | 'react-hooks': reactHooks,
18 | 'react-refresh': reactRefresh,
19 | },
20 | rules: {
21 | ...reactHooks.configs.recommended.rules,
22 | 'react-refresh/only-export-components': [
23 | 'warn',
24 | { allowConstantExport: true },
25 | ],
26 | },
27 | },
28 | )
29 |
--------------------------------------------------------------------------------
/frontend/src/supabaseClient.ts:
--------------------------------------------------------------------------------
1 | import { createClient } from '@supabase/supabase-js'
2 |
3 | // Read environment variables
4 | const supabaseUrl = import.meta.env.VITE_SUPABASE_URL
5 | const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY
6 |
7 | // Check if variables are set
8 | if (!supabaseUrl || !supabaseAnonKey) {
9 | console.error(
10 | 'Supabase environment variables not found. Make sure VITE_SUPABASE_URL and VITE_SUPABASE_ANON_KEY are set in frontend/.env'
11 | )
12 | throw new Error('Supabase URL and Anon Key must be provided in .env')
13 | }
14 |
15 | // Create and export the Supabase client
16 | // We assert non-null here because we logged an error if they are missing.
17 | // In a stricter setup, you might handle the potentially null values differently.
18 | export const supabase = createClient(supabaseUrl!, supabaseAnonKey!)
19 |
20 | console.log('Supabase client initialized.'); // Add a log to confirm initialization
--------------------------------------------------------------------------------
/set_env.sh:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env bash
2 | #
3 | # Load .env (with variable-in-variable expansion) and then exec any command.
4 | # ./set_env.sh bun run dev
5 | # ./set_env.sh bun install
6 | # If no command is given it just exports the vars into your shell.
7 |
8 | ENV_FILE="$(dirname "$0")/.env"
9 |
10 | if [[ ! -f "$ENV_FILE" ]]; then
11 | echo "[set_env] Missing $ENV_FILE (copy from .env.template)" >&2
12 | exit 1
13 | fi
14 |
15 | # ── Reliable exporter ──
16 | set -a # automatically export every variable that gets set
17 | . "$ENV_FILE" # 'source' preserves order, so ${VAR} references work
18 | set +a
19 | # ──────────────────────
20 |
21 | # Jump to repo root so `bun run dev` finds the root package.json
22 | cd "$(dirname "$0")" || { echo "[set_env] Failed to change to repository root directory" >&2; exit 1; }
23 |
24 | # Exec the rest of the CLI line, if any
25 | if [[ $# -gt 0 ]]; then
26 | exec "$@"
27 | fi
28 |
29 |
--------------------------------------------------------------------------------
/frontend/src/interfaces.ts:
--------------------------------------------------------------------------------
1 | // Frontend specific interfaces (can be subset of backend)
2 |
3 | // Structure for displaying speaker WPM data received from backend
4 | export interface SpeakerWPM {
5 | id: string; // e.g., "Speaker_A"
6 | avg_wpm: number;
7 | total_words?: number; // Optional details
8 | total_duration_s?: number; // Optional details
9 | }
10 |
11 | // Structure for sending target WPM data to backend
12 | export interface TargetWPM {
13 | id: string; // Speaker ID matching SpeakerWPM (e.g., "Speaker_A")
14 | target_wpm: number;
15 | }
16 |
17 | // Type for tracking job status in the frontend
18 | export type JobStatus =
19 | | 'IDLE'
20 | | 'UPLOADING'
21 | | 'PROCESSING_UPLOAD_CLOUD' // Or generic PROCESSING if preferred
22 | | 'PROCESSING_CLOUD_ANALYSIS'
23 | | 'PROCESSING_WPM_CALCULATION'
24 | | 'READY_FOR_INPUT'
25 | | 'QUEUED_FOR_ADJUSTMENT'
26 | | 'PROCESSING_ADJUSTMENT'
27 | | 'PROCESSING_RECONSTRUCTION'
28 | | 'COMPLETE'
29 | | 'FAILED';
30 |
31 | export interface PodcastFeed {
32 | id: string;
33 | title: string;
34 | description: string;
35 | image: string;
36 | }
37 |
38 | export interface PodcastEpisode {
39 | id: string;
40 | title: string;
41 | datePublished: number; // Assuming this is a Unix timestamp (number)
42 | datePublishedPretty: string; // Add the human-readable string field
43 | audioUrl: string;
44 | }
45 |
--------------------------------------------------------------------------------
/frontend/public/vite.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/frontend/src/components/DownloadArea.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | interface DownloadAreaProps {
4 | jobId: string;
5 | outputFilename: string;
6 | onDownload: () => void;
7 | }
8 |
9 | const DownloadArea: React.FC
16 |
42 | );
43 | };
44 |
45 | export default DownloadArea;
--------------------------------------------------------------------------------
/backend/middleware/role.ts:
--------------------------------------------------------------------------------
1 | import { createClient, SupabaseClient } from '@supabase/supabase-js';
2 | import type { User } from '@supabase/supabase-js';
3 |
4 | let supabaseAdmin: SupabaseClient | null = null;
5 |
6 | function getSupabaseAdminClient(): SupabaseClient {
7 | if (supabaseAdmin) return supabaseAdmin;
8 | const url = process.env.SUPABASE_URL;
9 | const serviceKey = process.env.SUPABASE_SERVICE_KEY;
10 | if (!url || !serviceKey) {
11 | throw new Error('Missing SUPABASE_URL or SUPABASE_SERVICE_KEY env vars');
12 | }
13 | supabaseAdmin = createClient(url, serviceKey, { auth: { persistSession: false } });
14 | return supabaseAdmin;
15 | }
16 |
17 | export type UserRole = 'VISITOR' | 'FREE' | 'PAID';
18 |
19 | export async function getUserRole(user: User): PromiseProcessing Complete!
17 |Your adjusted audio file is ready for download.
18 | 37 |Filename: {outputFilename}
38 | 39 | {/* Reset button is now handled in App.tsx based on status */} 40 | {/* */} 41 |
19 |
31 |
32 | );
33 | };
34 |
35 | const styles: { [key: string]: React.CSSProperties } = {
36 | searchContainer: {
37 | padding: '1.5rem',
38 | marginBottom: '1.5rem',
39 | background: 'none',
40 | border: 'none',
41 | borderRadius: '8px',
42 | },
43 | form: {
44 | display: 'flex',
45 | gap: '0.5rem',
46 | },
47 | input: {
48 | flexGrow: 1,
49 | padding: '0.75rem 1rem',
50 | borderRadius: '4px',
51 | border: '1px solid var(--border)',
52 | fontSize: '1rem',
53 | background: 'var(--bg-primary)',
54 | color: 'var(--text-primary)'
55 | },
56 | button: {
57 | padding: '0.75rem 1.5rem',
58 | borderRadius: '4px',
59 | border: '1px solid var(--border)',
60 | background: 'var(--accent)',
61 | color: '#fff',
62 | cursor: 'pointer',
63 | fontSize: '1rem',
64 | }
65 | };
66 |
67 | export default SearchBar;
68 |
--------------------------------------------------------------------------------
/frontend/README.md:
--------------------------------------------------------------------------------
1 | # React + TypeScript + Vite
2 |
3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4 |
5 | Currently, two official plugins are available:
6 |
7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9 |
10 | ## Expanding the ESLint configuration
11 |
12 | If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
13 |
14 | ```js
15 | export default tseslint.config({
16 | extends: [
17 | // Remove ...tseslint.configs.recommended and replace with this
18 | ...tseslint.configs.recommendedTypeChecked,
19 | // Alternatively, use this for stricter rules
20 | ...tseslint.configs.strictTypeChecked,
21 | // Optionally, add this for stylistic rules
22 | ...tseslint.configs.stylisticTypeChecked,
23 | ],
24 | languageOptions: {
25 | // other options...
26 | parserOptions: {
27 | project: ['./tsconfig.node.json', './tsconfig.app.json'],
28 | tsconfigRootDir: import.meta.dirname,
29 | },
30 | },
31 | })
32 | ```
33 |
34 | You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
35 |
36 | ```js
37 | // eslint.config.js
38 | import reactX from 'eslint-plugin-react-x'
39 | import reactDom from 'eslint-plugin-react-dom'
40 |
41 | export default tseslint.config({
42 | plugins: {
43 | // Add the react-x and react-dom plugins
44 | 'react-x': reactX,
45 | 'react-dom': reactDom,
46 | },
47 | rules: {
48 | // other rules...
49 | // Enable its recommended typescript rules
50 | ...reactX.configs['recommended-typescript'].rules,
51 | ...reactDom.configs.recommended.rules,
52 | },
53 | })
54 | ```
55 |
--------------------------------------------------------------------------------
/backend/interfaces.ts:
--------------------------------------------------------------------------------
1 | // Shared interfaces for PodPace backend
2 |
3 | // Data structure for AssemblyAI Utterances (subset of fields)
4 | export interface Utterance {
5 | speaker: string | null; // Speaker label (e.g., 'A', 'B') or null
6 | start: number; // Milliseconds
7 | end: number; // Milliseconds
8 | text: string;
9 | words: { start: number; end: number; text: string; speaker: string | null }[];
10 | }
11 |
12 | // Structure for storing calculated speaker WPM data in Redis
13 | export interface SpeakerWPM {
14 | id: string; // e.g., "Speaker_A"
15 | avg_wpm: number;
16 | total_words?: number; // Optional details from calculation
17 | total_duration_s?: number; // Optional details from calculation
18 | }
19 |
20 | // Structure for target WPM input from the user/API
21 | export interface TargetWPM {
22 | id: string; // Speaker ID matching SpeakerWPM (e.g., "Speaker_A")
23 | target_wpm: number;
24 | }
25 |
26 | // Structure for storing diarization segment data needed by adjust worker
27 | export interface Segment {
28 | speaker: string | null; // e.g., "A", "B", or null for silence/noise
29 | start: number; // Milliseconds
30 | end: number; // Milliseconds
31 | }
32 |
33 | // Data passed in the Analyze Queue job
34 | export interface AnalyzeJobData {
35 | jobId: string;
36 | filePath: string;
37 | originalFilename: string;
38 | }
39 |
40 | // Data passed in the Adjust Queue job
41 | export interface AdjustJobData {
42 | jobId: string;
43 | filePath: string; // Path to original audio file
44 | originalFilename: string;
45 | targets: TargetWPM[]; // User-defined targets
46 | // The worker will fetch other needed data (segments, WPMs) from Redis
47 | }
48 |
49 | // Structure for AssemblyAI API responses (basic)
50 | export interface AssemblyAIUploadResponse {
51 | upload_url: string;
52 | }
53 |
54 | export interface AssemblyAISubmitResponse {
55 | id: string;
56 | status: string;
57 | }
58 |
59 | export interface AssemblyAITranscriptResponse {
60 | id: string;
61 | status: 'queued' | 'processing' | 'completed' | 'error';
62 | error?: string;
63 | utterances?: Utterance[];
64 | text?: string;
65 | }
--------------------------------------------------------------------------------
/frontend/src/components/FeedList.tsx:
--------------------------------------------------------------------------------
1 | import { PodcastFeed } from './interfaces';
2 |
3 | interface Props {
4 | feeds: PodcastFeed[];
5 | onSelect: (feed: PodcastFeed) => void;
6 | }
7 |
8 | const truncate = (txt: string, len = 120) =>
9 | txt.length > len ? txt.slice(0, len) + '...' : txt;
10 |
11 | const FeedList: React.FC
23 | {feeds.map((feed) => (
24 |
60 | );
61 | };
62 |
63 | export default FeedList;
64 |
--------------------------------------------------------------------------------
/backend/middleware/auth.ts:
--------------------------------------------------------------------------------
1 | import { createClient, SupabaseClient } from '@supabase/supabase-js';
2 | import type { User } from '@supabase/supabase-js'; // Use type-only import for User
3 |
4 | let supabase: SupabaseClient | null = null;
5 |
6 | // Initialize Supabase client for backend usage
7 | const getSupabaseBackendClient = (): SupabaseClient => {
8 | if (supabase) {
9 | return supabase;
10 | }
11 | const supabaseUrl = process.env.SUPABASE_URL;
12 | const supabaseAnonKey = process.env.SUPABASE_ANON_KEY;
13 |
14 | if (!supabaseUrl || !supabaseAnonKey) {
15 | console.error('[AuthMiddleware] Missing Supabase ENV VARS for backend client!');
16 | // In a real scenario, this might be a fatal error preventing startup
17 | // but for now, we rely on runtime checks.
18 | throw new Error('Supabase backend client configuration missing.');
19 | }
20 |
21 | console.log('[AuthMiddleware] Initializing Supabase backend client.');
22 | supabase = createClient(supabaseUrl, supabaseAnonKey, {
23 | // It's crucial to prevent the backend client from storing sessions
24 | auth: { persistSession: false }
25 | });
26 | return supabase;
27 | };
28 |
29 | /**
30 | * Verifies the JWT from the Authorization header.
31 | * Returns the authenticated User object or null if verification fails.
32 | */
33 | export const verifyAuth = async (req: Request): Promise {
27 | console.log('[FeedList] Feed selected:', feed);
28 | onSelect(feed);
29 | }}
30 | className="show-card"
31 | style={{
32 | cursor: 'pointer',
33 | background: 'var(--bg-secondary, #1e1e1e)',
34 | border: '1px solid var(--border, #333)',
35 | borderRadius: '6px',
36 | padding: '1rem',
37 | display: 'flex',
38 | flexDirection: 'column',
39 | }}
40 | >
41 | 
53 |
58 | ))}
59 | {feed.title}
54 |55 | {truncate(feed.description)} 56 |
57 |