Fix/meme video audio

.aidev

@@ -0,0 +1,21 @@
+# AI Developer Guidelines
+
+## Code Quality Standards
+When a file becomes too long, split it into smaller files. When a function becomes too long, split it into smaller functions.
+
+After writing code, deeply reflect on the scalability and maintainability of the code. Produce a 1-2 paragraph analysis of the code change and based on your reflections - suggest potential improvements or next steps as needed.
+
+## Planning Mode
+When asked to enter "Planner Mode" deeply reflect upon the changes being asked and analyze existing code to map the full scope of changes needed. Before proposing a plan, ask 4-6 clarifying questions based on your findings. Once answered, draft a comprehensive plan of action and ask for approval on that plan. Once approved, implement all steps in that plan. After completing each phase/step, mention what was just completed and what the next steps are + phases remaining after these steps.
+
+## Debugging Mode
+When asked to enter "Debugger Mode" please follow this exact sequence:
+
+1. Reflect on 5-7 different possible sources of the problem
+2. Distill those down to 1-2 most likely sources
+3. Add additional logs to validate your assumptions and track the transformation of data structures throughout the application control flow before we move onto implementing the actual code fix
+4. Use the "getConsoleLogs", "getConsoleErrors", "getNetworkLogs" & "getNetworkErrors" tools to obtain any newly added web browser logs
+5. Obtain the server logs as well if accessible - otherwise, ask me to copy/paste them into the chat
+6. Deeply reflect on what could be wrong + produce a comprehensive analysis of the issue
+7. Suggest additional logs if the issue persists or if the source is not yet clear
+8. Once a fix is implemented, ask for approval to remove the previously added logs 

.cursorrules

@@ -7,16 +7,138 @@ You are an expert in TypeScript, Next.js App Router, React, and Tailwind. Follow
   - src/app/lib has all the other code like helpers, hooks, and contexts
 
 There are some pre-configured APIs in this template that can be used but only if required by the current project. These have already been created:
-- Firebase
-  - In src/lib/firebase there is a firebase.ts configuration file as well as firebaseUtils.ts for various utility functions when interacting with Firebase Database, Storage, and Authencation
-  - In src/lib/contexts there is an AuthContext.tsx file that has user authentication with Firebase set up with the onAuthStateChanged listener.
-  - In src/lib/hooks there is a useAuth.ts hook
+
+- Supabase
+  - src/lib/supabase has client.ts, server.ts, admin.ts, and types.ts for database operations
+  - Used for meme template storage and vector search functionality
+  - Handles all data persistence needs including user data and template management
+
 - OpenAI 
-  - src/app/api/openai has chat/route.ts which is a simple API calling streamText from openai using the Vercel AI library
+  - src/app/api/openai has chat/route.ts which is a simple API calling streamText from OpenAI using the Vercel AI library
+  - Also used for generating embeddings for template search
+
 - Anthropic
   - src/app/api/anthropic has chat/route.ts which is a simple API calling streamText from Anthropic using the Vercel AI library
+
 - Replicate
   - src/app/api/replicate has generate-image/route.ts which is a simple API calling the Stable Diffusion model hosted on Replicate to generate images
+
 - Deepgram
-  - src/app/api/deepgram has transcribe-audio/route.ts which is a simple API that returns the Deepgram API key to be used in the client side to transcribe audio in real-time.
-  - src/lib/contexts has a DeepgramContext.tsx file that has the Deepgram API key set up with the useDeepgram hook to be used in any component.
+  - src/app/api/deepgram has transcribe-audio/route.ts which is a simple API that returns the Deepgram API key to be used in the client side to transcribe audio in real-time
+  - src/lib/contexts has a DeepgramContext.tsx file that has the Deepgram API key set up with the useDeepgram hook to be used in any component
+
+# Project Overview: Full-Stack AI Template
+
+## Project Architecture
+This is a Next.js 14 application with multiple AI integrations, designed as a template for building AI-powered applications.
+
+### Core Technologies
+- Next.js 14 App Router
+- TypeScript
+- TailwindCSS
+- Vercel AI SDK
+- Multiple AI Providers (OpenAI, Anthropic, Replicate)
+- Supabase (for data persistence, template storage and vector search)
+- Deepgram (for voice transcription)
+
+### Directory Structure
+- `/src`
+  - `/app` - Next.js app router pages and API routes
+    - `/api` - API endpoints for AI services
+    - `/components` - React components
+  - `/lib` - Utility functions, hooks, and contexts
+    - `/contexts` - React contexts (Deepgram)
+    - `/supabase` - Supabase client and types
+    - `/utils` - Helper functions
+
+## Current Features
+
+### 1. AI Chat Integration
+- Supports both OpenAI and Anthropic models
+- Streaming responses using Vercel AI SDK
+- Model selection toggle
+- Chat history management
+
+### 2. Image Generation
+- Replicate API integration for Stable Diffusion
+- Image download functionality
+- Gallery of generated images
+- Advanced generation options
+
+### 3. Voice Notes
+- Real-time voice recording with Deepgram
+- Automatic transcription
+- Supabase storage integration
+- Note management system
+
+### 4. Meme Generator
+- AI-powered template selection
+- Caption generation
+- Video processing with canvas
+- Template management system
+
+## Development Guidelines
+
+### 1. API Routes
+- Place in `/src/app/api`
+- Use proper error handling and typing
+- Implement rate limiting where appropriate
+- Return consistent response formats
+
+### 2. Components
+- Keep components focused and modular
+- Use TypeScript interfaces for props
+- Implement proper loading states
+- Handle errors gracefully
+- Use Tailwind for styling
+
+### 3. State Management
+- Use React Context for global state
+- Implement proper TypeScript types
+- Handle loading and error states
+- Use local storage for persistence where appropriate
+
+### 4. AI Integration
+- Use Vercel AI SDK for streaming responses
+- Implement proper error handling
+- Handle rate limits and API failures
+- Cache responses where appropriate
+
+### 5. Database Operations
+- Use Supabase for all data persistence
+- Implement proper error handling
+- Use TypeScript types for data models
+- Utilize vector embeddings for template search
+
+## Testing Guidelines
+- Implement unit tests for utilities
+- Add integration tests for API routes
+- Test error handling
+- Verify AI integration functionality
+
+## Current Focus Areas
+1. Improving meme generator functionality
+2. Enhancing AI template selection
+3. Optimizing video processing
+4. Adding user authentication
+5. Implementing proper error handling
+
+## Known Issues
+1. Video processing performance needs optimization
+2. Template selection accuracy needs improvement
+3. Error handling needs standardization
+4. Loading states need refinement
+
+## Future Enhancements
+1. Add user authentication
+2. Implement template sharing
+3. Add more AI models
+4. Improve performance optimization
+5. Add comprehensive testing
+
+Remember to:
+- Follow TypeScript best practices
+- Implement proper error handling
+- Use consistent code formatting
+- Document new features and changes
+- Test thoroughly before deployment

.env.example

@@ -0,0 +1,3 @@
+ANTHROPIC_API_KEY=your-api-key-here
+NEXT_PUBLIC_SUPABASE_URL=your-project-url
+NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key 

.eslintrc.json

@@ -1,3 +1,6 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": "next/core-web-vitals",
+  "rules": {
+    "react/no-unescaped-entities": "off"
+  }
 }

next.config.mjs

@@ -16,10 +16,6 @@ const nextConfig = {
         protocol: "https",
         hostname: "replicate.delivery",
       },
-      {
-        protocol: "https",
-        hostname: "firebasestorage.googleapis.com",
-      },
     ],
     dangerouslyAllowSVG: true,
     contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;",