Update apps/trend_cat.js

apps/trend_cat.js

@@ -1,258 +1,247 @@
 // apps/viral_cat.js
 import express from 'express';
 import { generateCompletion } from '../ai_engine.js';
-// import { createClient } from '@supabase/supabase-js';
+import { supabase } from '../config/supabaseClient.js';
+import fetch from 'node-fetch'; // Ensure you have node-fetch or use native fetch if Node 18+
 
 const router = express.Router();
-// const supabase = createClient(process.env.SUPABASE_URL, process.env.SUPABASE_SERVICE_ROLE_KEY);
+const FASTAPI_URL = process.env.FASTAPI_SERVER_URL || 'http://localhost:8000';
 
-// ── ADMIN AUTH ──
+// ── ADMIN AUTH MIDDLEWARE ──
 const adminAuth = (req, res, next) => {
     const b64auth = (req.headers.authorization || '').split(' ')[1] || '';
-    const[login, password] = Buffer.from(b64auth, 'base64').toString().split(':');
+    const [login, password] = Buffer.from(b64auth, 'base64').toString().split(':');
     if (login === 'admin' && password === process.env.VIRAL_CAT_ADMIN_PASS) return next();
     res.set('WWW-Authenticate', 'Basic realm="Viral Cat Admin"');
     res.status(401).send('Auth required.');
 };
 
-// ── 1. GET TRENDING FEED ──
+// ── 1. GET TRENDING FEED (Public for App) ──
 router.get('/trending', async (req, res) => {
     try {
-        // const { data } = await supabase.from('viral_cat_trending').select('*').order('created_at', { ascending: false });
-        
-        // Mock data to build the UI today
-        const mockData =[
-            {
-                id: '1',
-                platform: 'tiktok',
-                video_url: 'https://tiktok.com/@user/video/123',
-                thumbnail_url: 'https://images.unsplash.com/photo-1611162617474-5b21e879e113?q=80&w=1000&auto=format&fit=crop',
-                views: 12500000,
-                comments: 45200,
-                shares: 120000,
-                transcript: "Here are 3 secret websites that feel illegal to know...",
-                ai_environment_data: "Dark room, neon LED backlights, creator sitting close to camera.",
-                ai_scene_changes: "Fast jump cuts every 2 seconds. Screen recordings overlayed.",
-            }
-        ];
-        res.json({ success: true, data: mockData });
+        const { data, error } = await supabase
+            .from('viral_cat_trending')
+            .select('*')
+            .order('created_at', { ascending: false });
+
+        if (error) throw error;
+        res.json({ success: true, data });
     } catch (err) {
         res.status(500).json({ success: false, error: err.message });
     }
 });
 
-// ── 2. THE CRAWLER & METADATA EXTRACTOR ──
-router.post('/crawl', adminAuth, async (req, res) => {
-    const { video_url, frames_per_second = 2 } = req.body;
+// ── 2. ADMIN: ADD TEMPLATE (Manual or Crawler) ──
+router.post('/admin/template', adminAuth, async (req, res) => {
+    const { title, video_url, platform, niche, score } = req.body;
     
     try {
-        console.log(`[CRAWLER] Initiating download for ${video_url}`);
-        
-        // TODO: Integrate yt-dlp to download video, Whisper for transcript.
-        // DYNAMIC FRAME MATH LOGIC:
-        // If a video is 10s long, and frames_per_second is 3 (start, middle, end)
-        // We run FFmpeg to extract at timestamps: 0.0, 0.5, 1.0, 1.0, 1.5, 2.0...
+        // Step A: Send to FastAPI to download, extract frames, and transcribe
+        console.log(`[CRAWLER] Sending ${video_url} to FastAPI Worker...`);
+        const mediaRes = await fetch(`${FASTAPI_URL}/process-video`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ url: video_url, platform })
+        });
+        const mediaData = await mediaRes.json();
         
-        /* 
-          const duration = 10; 
-          const timestamps =[];
-          for(let i=0; i<duration; i++) {
-             if (frames_per_second === 2) timestamps.push(i + 0.1, i + 0.9);
-             if (frames_per_second === 3) timestamps.push(i + 0.1, i + 0.5, i + 0.9);
-          }
-          // feed timestamps to FFmpeg
-        */
+        // Expected from FastAPI: { frames: ["base64..."], transcript: "...", thumbnail_url: "..." }
+        const { frames, transcript, thumbnail_url } = mediaData;
+
+        // Step B: Send frames to Llama 4 to analyze pacing and environment
+        const aiPrompt = `Analyze these frames from a viral video. Provide exactly two paragraphs:
+        Environment:[Describe lighting, setting, subjects]
+        Pacing: [Describe cuts, camera movement, visual hooks]`;
+
+        const aiResult = await generateCompletion({
+            model: "maverick", 
+            prompt: aiPrompt,
+            system_prompt: "You are an elite video metadata extractor.",
+            images: frames 
+        });
+
+        // Step C: Save everything to Supabase
+        const { data, error } = await supabase.from('viral_cat_trending').insert([{
+            platform,
+            video_url,
+            thumbnail_url: thumbnail_url || "https://placehold.co/400x600/png",
+            views: Math.floor(Math.random() * 5000000) + 100000, // Mock stats for now
+            comments: Math.floor(Math.random() * 10000),
+            shares: Math.floor(Math.random() * 50000),
+            transcript: transcript || "No transcript available.",
+            ai_environment_data: aiResult.data,
+            ai_scene_changes: "Dynamic framing extracted by AI",
+        }]).select();
+
+        if (error) throw error;
+        res.json({ success: true, data });
 
-        res.json({ success: true, message: "Video crawled, parsed, and added to DB." });
     } catch (err) {
+        console.error(err);
         res.status(500).json({ success: false, error: err.message });
     }
 });
 
-// ── 3. REMIX SCRIPT GENERATOR ──
-router.post('/remix', async (req, res) => {
-    const { user_input, transcript, ai_environment_data, ai_scene_changes, model } = req.body;
-
-    const systemPrompt = `You are Viral Cat 📈🐈, an elite social media strategist. 
-    The user wants to recreate a viral video for their own niche. 
-    
-    ORIGINAL VIRAL VIDEO DATA:
-    Transcript: ${transcript}
-    Environment: ${ai_environment_data}
-    Pacing/Cuts: ${ai_scene_changes}
-    
-    USER'S NICHE/IDEA: "${user_input}"
-    
-    Task: Write a shot-by-shot script that maps the pacing, hooks, and visual structure of the original viral video onto the user's new niche.
-    Format in clean Markdown:
-    ## 🎬 The Hook (0-3s)
-    ## 📖 The Body
-    ## 💥 The Call to Action`;
-
+// ── 3. ADMIN: DELETE TEMPLATE ──
+router.delete('/admin/template/:id', adminAuth, async (req, res) => {
     try {
-        const result = await generateCompletion({
-            model: model || "maverick", 
-            prompt: "Generate the customized remix script.",
-            system_prompt: systemPrompt,
-            images:[] 
-        });
-        res.json(result);
+        const { error } = await supabase.from('viral_cat_trending').delete().eq('id', req.params.id);
+        if (error) throw error;
+        res.json({ success: true, message: "Deleted successfully" });
     } catch (err) {
         res.status(500).json({ success: false, error: err.message });
     }
 });
 
-// ── 4. RATING ENDPOINT (Returns data for Local Storage) ──
-router.post('/rate', async (req, res) => {
-    const { media_data, model } = req.body;
-    // media_data is an array of base64 frames
-    
-    const systemPrompt = `You are Viral Cat. Analyze these frames.
-    Format STRICTLY:
-    [SCORE: 0-100]
-    ## Vibe Check
-    [Roast/Feedback here]
-    ## Fixes
-    [3 tips]`;
+// ── 4. CUSTOM REMIX (User inputs ANY link -> FastAPI -> Llama 4) ──
+router.post('/custom_remix', async (req, res) => {
+    const { video_url, platform, user_niche, model } = req.body;
 
     try {
+        console.log(`[CUSTOM REMIX] Crawling user requested URL: ${video_url}`);
+        
+        // 1. Call FastAPI Media Server
+        const mediaRes = await fetch(`${FASTAPI_URL}/process-video`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ url: video_url, platform })
+        });
+        const { frames, transcript } = await mediaRes.json();
+
+        // 2. Feed to Llama 4 Maverick to write the script
+        const systemPrompt = `You are Viral Cat 📈🐈. The user wants to remix an external viral video.
+        ORIGINAL TRANSCRIPT: ${transcript}
+        USER'S NEW NICHE: "${user_niche}"
+        
+        Look at the attached frames to understand the visual pacing.
+        Write a highly viral, customized shooting script mapped to the user's niche.
+        Format in Markdown:
+        ## 🎬 The Hook (0-3s)
+        ## 📖 The Body
+        ## 💥 The Call to Action`;
+
         const result = await generateCompletion({
             model: model || "maverick", 
-            prompt: "Rate my content.",
+            prompt: "Write the custom remix script.",
             system_prompt: systemPrompt,
-            images: media_data 
+            images: frames // Pass the dynamic frames straight to the vision model!
         });
-        // Note: We DO NOT save to Supabase here. It goes back to the app to be saved locally.
+
         res.json(result);
     } catch (err) {
         res.status(500).json({ success: false, error: err.message });
     }
 });
 
-
-
-// ── 4. ADMIN DASHBOARD (EMBEDDED HTML) ──
+// ── 5. ADMIN DASHBOARD (Fully Functional) ──
 router.get('/admin', adminAuth, (req, res) => {
-    // A sleek dashboard to upload new viral templates to the DB and view app usage
     const html = `
     <!DOCTYPE html>
     <html lang="en">
     <head>
-        <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Viral Cat | Creator Admin</title>
         <script src="https://cdn.tailwindcss.com"></script>
         <style>
             body { background-color: #090A0F; color: #FFFFFF; font-family: 'Inter', sans-serif; }
             .neon-text { color: #12D8C3; text-shadow: 0 0 10px rgba(18, 216, 195, 0.4); }
-            .glass-card { background: #16181F; border: 1px solid #2D3748; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
-            .btn-cyan { background-color: #12D8C3; color: #000; font-weight: bold; border-radius: 10px; padding: 10px 20px; transition: 0.2s; }
-            .btn-cyan:hover { background-color: #0EBAA8; }
-            input, select { background: #090A0F; border: 1px solid #2D3748; color: white; padding: 10px; border-radius: 10px; width: 100%; margin-top: 5px; }
+            .glass-card { background: #16181F; border: 1px solid #2D3748; border-radius: 20px; padding: 24px; }
+            .btn-cyan { background-color: #12D8C3; color: #000; font-weight: bold; border-radius: 10px; padding: 10px; cursor: pointer; }
+            input, select { background: #090A0F; border: 1px solid #2D3748; color: white; padding: 10px; border-radius: 10px; width: 100%; margin-bottom: 15px; }
         </style>
     </head>
-    <body class="p-8">
-        <div class="max-w-6xl mx-auto">
-            
-            <!-- Header -->
-            <div class="flex items-center justify-between mb-10">
-                <div class="flex items-center gap-4">
-                    <div class="w-12 h-12 rounded-full flex items-center justify-center bg-[#12D8C3] bg-opacity-20">
-                        <span class="text-2xl">📈</span>
-                    </div>
-                    <div>
-                        <h1 class="text-3xl font-bold">Viral Cat <span class="neon-text">Creator Admin</span></h1>
-                        <p class="text-gray-400 text-sm">Manage Templates & View Stats</p>
-                    </div>
-                </div>
+    <body class="p-8 max-w-6xl mx-auto">
+        <h1 class="text-3xl font-bold mb-8">Viral Cat <span class="neon-text">Admin</span></h1>
+        
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+            <!-- UPLOAD FORM -->
+            <div class="glass-card">
+                <h2 class="text-2xl font-bold mb-4 border-b border-gray-700 pb-2">Add Viral Template</h2>
+                <form id="templateForm" onsubmit="addTemplate(event)">
+                    <label>Video Title</label>
+                    <input type="text" id="title" required />
+                    
+                    <label>Video URL (TikTok/IG/YT)</label>
+                    <input type="url" id="video_url" required />
+                    
+                    <label>Platform</label>
+                    <select id="platform">
+                        <option value="tiktok">TikTok</option>
+                        <option value="instagram">Instagram Reels</option>
+                        <option value="youtube">YouTube Shorts</option>
+                    </select>
+
+                    <button type="submit" id="submitBtn" class="btn-cyan w-full mt-4">Crawl & Add to Database</button>
+                </form>
             </div>
 
-            <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
-                <!-- Stats Cards -->
-                <div class="glass-card p-6">
-                    <h3 class="text-gray-400 font-semibold mb-2">Total AI Ratings</h3>
-                    <p class="text-4xl font-bold neon-text">1,204</p>
-                </div>
-                <div class="glass-card p-6">
-                    <h3 class="text-gray-400 font-semibold mb-2">Videos Remixed</h3>
-                    <p class="text-4xl font-bold neon-text">843</p>
-                </div>
-                <div class="glass-card p-6">
-                    <h3 class="text-gray-400 font-semibold mb-2">Active Templates</h3>
-                    <p class="text-4xl font-bold neon-text">42</p>
-                </div>
-            </div>
-
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-                <!-- Add New Viral Template Form -->
-                <div class="glass-card p-8">
-                    <h2 class="text-2xl font-bold mb-6 border-b border-gray-700 pb-4">Add Viral Template</h2>
-                    <form id="templateForm" onsubmit="addTemplate(event)">
-                        <div class="mb-4">
-                            <label class="text-sm text-gray-400">Video Title / Trend Name</label>
-                            <input type="text" id="title" placeholder="e.g., Pedro Pedro Raccoon" required />
-                        </div>
-                        <div class="mb-4">
-                            <label class="text-sm text-gray-400">Video URL (S3, Mux, Cloudinary)</label>
-                            <input type="url" id="video_url" placeholder="https://..." required />
-                        </div>
-                        <div class="grid grid-cols-2 gap-4 mb-4">
-                            <div>
-                                <label class="text-sm text-gray-400">Niche</label>
-                                <select id="niche">
-                                    <option value="meme">Meme / Comedy</option>
-                                    <option value="dance">Dance</option>
-                                    <option value="tech">Tech / Education</option>
-                                    <option value="lifestyle">Lifestyle / Vlog</option>
-                                </select>
-                            </div>
-                            <div>
-                                <label class="text-sm text-gray-400">Virality Score (Base)</label>
-                                <input type="number" id="score" value="95" min="1" max="100" />
-                            </div>
-                        </div>
-                        <button type="submit" class="btn-cyan w-full mt-4">Publish Template to Database</button>
-                    </form>
-                </div>
-
-                <!-- Recent Ratings Feed -->
-                <div class="glass-card p-8">
-                    <h2 class="text-2xl font-bold mb-6 border-b border-gray-700 pb-4">Recent AI Ratings</h2>
-                    <div class="space-y-4 overflow-y-auto h-80">
-                        <!-- Mocked Feed -->
-                        <div class="p-4 bg-gray-800 bg-opacity-50 rounded-xl border border-gray-700">
-                            <div class="flex justify-between items-center mb-2">
-                                <span class="text-xs bg-[#12D8C3] text-black px-2 py-1 rounded font-bold">Video Rated</span>
-                                <span class="text-gray-400 text-xs">2 mins ago</span>
-                            </div>
-                            <p class="text-sm">Score: <span class="neon-text font-bold">88/100</span></p>
-                            <p class="text-xs text-gray-400 mt-1 line-clamp-2">"The hook is incredibly strong, but the lighting drops in frame 3..."</p>
-                        </div>
-                        <div class="p-4 bg-gray-800 bg-opacity-50 rounded-xl border border-gray-700">
-                            <div class="flex justify-between items-center mb-2">
-                                <span class="text-xs bg-blue-500 text-white px-2 py-1 rounded font-bold">Remix Created</span>
-                                <span class="text-gray-400 text-xs">15 mins ago</span>
-                            </div>
-                            <p class="text-sm">Style: <span class="font-bold">Green Screen</span></p>
-                            <p class="text-xs text-gray-400 mt-1">Template: Pedro Pedro Raccoon</p>
-                        </div>
-                    </div>
+            <!-- TEMPLATE LIST -->
+            <div class="glass-card">
+                <h2 class="text-2xl font-bold mb-4 border-b border-gray-700 pb-2">Active Templates</h2>
+                <div id="templateList" class="space-y-4 overflow-y-auto h-96">
+                    <p class="text-gray-400">Loading...</p>
                 </div>
             </div>
         </div>
 
         <script>
-            function addTemplate(e) {
+            // Automatically fetch active templates on load
+            async function loadTemplates() {
+                const res = await fetch('/viral_cat/trending');
+                const json = await res.json();
+                const list = document.getElementById('templateList');
+                list.innerHTML = '';
+                
+                if(json.data.length === 0) list.innerHTML = '<p>No templates found.</p>';
+
+                json.data.forEach(t => {
+                    list.innerHTML += \`
+                    <div class="bg-gray-800 p-4 rounded-xl flex justify-between items-center border border-gray-700">
+                        <div>
+                            <span class="text-xs bg-[#12D8C3] text-black px-2 py-1 rounded font-bold">\${t.platform.toUpperCase()}</span>
+                            <p class="text-sm mt-2 font-bold truncate w-48">\${t.transcript.substring(0, 30)}...</p>
+                        </div>
+                        <button onclick="deleteTemplate('\${t.id}')" class="bg-red-500 hover:bg-red-600 text-white text-xs px-3 py-2 rounded">Delete</button>
+                    </div>\`;
+                });
+            }
+
+            async function addTemplate(e) {
                 e.preventDefault();
-                const btn = e.target.querySelector('button');
-                btn.innerText = "Adding...";
-                // TODO: Make POST request to an /api/admin/template endpoint to save to Supabase
-                setTimeout(() => {
-                    alert("Template added to database!");
-                    btn.innerText = "Publish Template to Database";
+                const btn = document.getElementById('submitBtn');
+                btn.innerText = "Crawling & Processing (Takes 10-20s)...";
+                btn.disabled = true;
+
+                const payload = {
+                    title: document.getElementById('title').value,
+                    video_url: document.getElementById('video_url').value,
+                    platform: document.getElementById('platform').value,
+                };
+
+                const res = await fetch('/viral_cat/admin/template', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(payload)
+                });
+
+                if(res.ok) {
+                    alert("Success! Video processed by FastAPI, analyzed by Llama, and saved to DB.");
                     e.target.reset();
-                }, 1000);
+                    loadTemplates();
+                } else {
+                    alert("Error processing video.");
+                }
+                btn.innerText = "Crawl & Add to Database";
+                btn.disabled = false;
+            }
+
+            async function deleteTemplate(id) {
+                if(!confirm("Are you sure?")) return;
+                await fetch(\`/viral_cat/admin/template/\${id}\`, { method: 'DELETE' });
+                loadTemplates();
             }
+
+            loadTemplates();
         </script>
     </body>
     </html>
@@ -260,5 +249,4 @@ router.get('/admin', adminAuth, (req, res) => {
     res.send(html);
 });
 
-
 export default router;