From 475534134cbadf05233bd26bdf2c5537b0580520 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Tue, 2 Sep 2025 12:59:45 +0000
Subject: [PATCH] Add AI-powered description generation for video content

Integrates OpenAI API to generate video descriptions using AI, with new API endpoints for single and bulk generation, and a UI button in the admin panel to trigger the process. Includes OpenAI dependency and a new `aiService.ts` file.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 170e18f0-0f13-4eca-8643-546bba1dd8cc
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/170e18f0-0f13-4eca-8643-546bba1dd8cc/td5Y4HG
---
 .replit                    |   1 +
 client/src/pages/admin.tsx |  62 ++++++++++++++++++++++-
 package-lock.json          |  22 ++++++++
 package.json               |   1 +
 server/aiService.ts        | 101 +++++++++++++++++++++++++++++++++++++
 server/routes.ts           |  83 ++++++++++++++++++++++++++++++
 6 files changed, 268 insertions(+), 2 deletions(-)
 create mode 100644 server/aiService.ts

diff --git a/.replit b/.replit
index c806144..63699fb 100644
--- a/.replit
+++ b/.replit
@@ -40,3 +40,4 @@ args = "npm run dev"
 waitForPort = 5000
 
 [agent]
+integrations = ["javascript_openai==1.0.0"]
diff --git a/client/src/pages/admin.tsx b/client/src/pages/admin.tsx
index 5d34dd7..33a1564 100644
--- a/client/src/pages/admin.tsx
+++ b/client/src/pages/admin.tsx
@@ -13,7 +13,7 @@ import { useToast } from "@/hooks/use-toast";
 import { LoadingSpinner } from "@/components/loading-spinner";
 import { apiRequest } from "@/lib/queryClient";
 import type { Video } from "@shared/schema";
-import { Shield, Edit, Upload, Search, Filter, Save, X } from "lucide-react";
+import { Shield, Edit, Upload, Search, Filter, Save, X, Sparkles, Loader2 } from "lucide-react";
 
 export default function AdminPage() {
   const { user, isLoading: authLoading, isAuthenticated, isAdmin } = useAuth();
@@ -216,6 +216,7 @@ function EditVideoDialog({
     genre: video.genre,
     customThumbnailUrl: video.customThumbnailUrl || "",
   });
+  const [isGeneratingAI, setIsGeneratingAI] = useState(false);
 
   const updateMutation = useMutation({
     mutationFn: (data: any) => apiRequest("PATCH", `/api/admin/videos/${video.id}`, data),
@@ -240,6 +241,42 @@ function EditVideoDialog({
     updateMutation.mutate(formData);
   };
 
+  const generateAIDescription = async () => {
+    if (!formData.title.trim()) {
+      toast({
+        title: "Error",
+        description: "Please enter a title first",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    setIsGeneratingAI(true);
+    try {
+      const response = await apiRequest("POST", `/api/admin/videos/${video.id}/generate-description`, {
+        maxCharacters: 500,
+        includeArtistInfo: true,
+        includeLabelInfo: true
+      });
+
+      if (response.description) {
+        setFormData(prev => ({ ...prev, description: response.description }));
+        toast({
+          title: "Success",
+          description: `AI description generated (${response.characterCount}/${response.maxCharacters} characters)`,
+        });
+      }
+    } catch (error: any) {
+      toast({
+        title: "Error",
+        description: error.message || "Failed to generate AI description",
+        variant: "destructive",
+      });
+    } finally {
+      setIsGeneratingAI(false);
+    }
+  };
+
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="max-w-2xl bg-[#2D1B69] border-white/20 text-white">
@@ -263,13 +300,34 @@ function EditVideoDialog({
             </div>
 
             <div className="md:col-span-2">
-              <Label className="text-white/90">Description</Label>
+              <div className="flex items-center justify-between mb-2">
+                <Label className="text-white/90">Description</Label>
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  onClick={generateAIDescription}
+                  disabled={isGeneratingAI || !formData.title.trim()}
+                  className="border-white/20 text-white hover:bg-white/10 disabled:opacity-50"
+                >
+                  {isGeneratingAI ? (
+                    <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                  ) : (
+                    <Sparkles className="w-4 h-4 mr-2" />
+                  )}
+                  {isGeneratingAI ? "Generating..." : "Generate AI Description"}
+                </Button>
+              </div>
               <Textarea
                 value={formData.description}
                 onChange={(e) => setFormData({ ...formData, description: e.target.value })}
                 className="bg-white/10 border-white/20 text-white min-h-[100px]"
                 rows={3}
+                placeholder="Enter description or use AI to generate one from the title..."
               />
+              <div className="text-xs text-white/60 mt-1">
+                {formData.description.length}/500 characters
+              </div>
             </div>
 
             <div>
diff --git a/package-lock.json b/package-lock.json
index 6056915..88b1964 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -80,6 +80,7 @@
         "next-themes": "^0.4.6",
         "node-fetch": "^2.0.0",
         "nodemon": "^3.1.10",
+        "openai": "^5.16.0",
         "openid-client": "^6.7.1",
         "passport": "^0.7.0",
         "passport-local": "^1.0.0",
@@ -9481,6 +9482,27 @@
         "wrappy": "1"
       }
     },
+    "node_modules/openai": {
+      "version": "5.16.0",
+      "resolved": "https://registry.npmjs.org/openai/-/openai-5.16.0.tgz",
+      "integrity": "sha512-hoEH8ZNvg1HXjU9mp88L/ZH8O082Z8r6FHCXGiWAzVRrEv443aI57qhch4snu07yQydj+AUAWLenAiBXhu89Tw==",
+      "license": "Apache-2.0",
+      "bin": {
+        "openai": "bin/cli"
+      },
+      "peerDependencies": {
+        "ws": "^8.18.0",
+        "zod": "^3.23.8"
+      },
+      "peerDependenciesMeta": {
+        "ws": {
+          "optional": true
+        },
+        "zod": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/openid-client": {
       "version": "6.7.1",
       "resolved": "https://registry.npmjs.org/openid-client/-/openid-client-6.7.1.tgz",
diff --git a/package.json b/package.json
index 5630449..fa83fb0 100644
--- a/package.json
+++ b/package.json
@@ -82,6 +82,7 @@
     "next-themes": "^0.4.6",
     "node-fetch": "^2.0.0",
     "nodemon": "^3.1.10",
+    "openai": "^5.16.0",
     "openid-client": "^6.7.1",
     "passport": "^0.7.0",
     "passport-local": "^1.0.0",
diff --git a/server/aiService.ts b/server/aiService.ts
new file mode 100644
index 0000000..df7c63b
--- /dev/null
+++ b/server/aiService.ts
@@ -0,0 +1,101 @@
+import OpenAI from "openai";
+
+// the newest OpenAI model is "gpt-5" which was released August 7, 2025. do not change this unless explicitly requested by the user
+const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });
+
+export interface DescriptionGenerationOptions {
+  maxCharacters?: number;
+  language?: string;
+  includeArtistInfo?: boolean;
+  includeLabelInfo?: boolean;
+}
+
+export async function generateVideoDescription(
+  title: string, 
+  options: DescriptionGenerationOptions = {}
+): Promise<string> {
+  const {
+    maxCharacters = 500,
+    language = "slovenian",
+    includeArtistInfo = true,
+    includeLabelInfo = true
+  } = options;
+
+  try {
+    const prompt = `Analiziraj naslov videoisranja: "${title}"
+
+Nalogo izvršit v slovenskem jeziku.
+
+Iz naslova izvleci:
+- Ime izvajalca/umetnika
+- Naslov skladbe/komada 
+- Tip vsebine (pesem, instrumental, live nastop, itd.)
+
+Ustvari informativen opis, ki vključuje:
+${includeArtistInfo ? '- Informacije o izvajalcu (stil glasbe, kratka zgodovina, znani komadi)' : ''}
+${includeLabelInfo ? '- Informacije o založbi ali labelu, če je znan' : ''}
+- Opis stila glasbe in žanra
+- Kratko ozadje o komadu, če je znan
+- Čemu je namenjen (ples, poslušanje, koncert, itd.)
+
+Opis naj bo dolg maksimalno ${maxCharacters} znakov.
+Opis naj bo napisan v prijaznem, informativnem tonu.
+Ne uporabljaj besed "video" ali "posnetek" - piši o glasbi sami.
+
+Odgovori samo z opisom, brez dodatnih pojasnil.`;
+
+    const response = await openai.chat.completions.create({
+      model: "gpt-5", // the newest OpenAI model is "gpt-5" which was released August 7, 2025
+      messages: [
+        {
+          role: "system",
+          content: "Si strokovnjak za glasbo in pomagaš ustvarjati kakovostne opise za glasbene vsebine. Odgovarjaš vedno v slovenskem jeziku."
+        },
+        {
+          role: "user", 
+          content: prompt
+        }
+      ],
+      max_tokens: Math.ceil(maxCharacters / 2), // Rough estimate: 2 characters per token
+      temperature: 0.7,
+    });
+
+    const description = response.choices[0].message.content?.trim() || "";
+    
+    // Ensure we don't exceed character limit
+    if (description.length > maxCharacters) {
+      return description.substring(0, maxCharacters - 3) + "...";
+    }
+    
+    return description;
+    
+  } catch (error) {
+    console.error("Error generating video description:", error);
+    throw new Error("Napaka pri generiranju opisa s strani AI");
+  }
+}
+
+export async function generateBulkDescriptions(
+  videos: Array<{ id: string; title: string }>,
+  options: DescriptionGenerationOptions = {}
+): Promise<Array<{ id: string; description: string; error?: string }>> {
+  const results = [];
+  
+  for (const video of videos) {
+    try {
+      const description = await generateVideoDescription(video.title, options);
+      results.push({ id: video.id, description });
+      
+      // Add small delay to respect API rate limits
+      await new Promise(resolve => setTimeout(resolve, 100));
+    } catch (error) {
+      results.push({ 
+        id: video.id, 
+        description: "", 
+        error: error instanceof Error ? error.message : "Unknown error"
+      });
+    }
+  }
+  
+  return results;
+}
\ No newline at end of file
diff --git a/server/routes.ts b/server/routes.ts
index 35c0a59..50c5e4e 100644
--- a/server/routes.ts
+++ b/server/routes.ts
@@ -18,6 +18,7 @@ import sharp from "sharp";
 import fetch from "node-fetch";
 import { setupAuth, isAuthenticated, isAdmin } from "./replitAuth";
 import { ObjectStorageService, ObjectNotFoundError } from "./objectStorage";
+import { generateVideoDescription, generateBulkDescriptions } from "./aiService";
 
 // Extend express session
 declare module "express-session" {
@@ -1080,6 +1081,88 @@ export async function registerRoutes(app: Express): Promise<Server> {
     }
   });
 
+  // ===== AI DESCRIPTION ROUTES =====
+
+  // Generate AI description for single video (admin only)
+  app.post('/api/admin/videos/:id/generate-description', isAdmin, async (req, res) => {
+    try {
+      const videoId = req.params.id;
+      const { maxCharacters = 500, includeArtistInfo = true, includeLabelInfo = true } = req.body;
+      
+      // Get video details
+      const video = await storage.getVideo(videoId);
+      if (!video) {
+        return res.status(404).json({ message: "Video not found" });
+      }
+      
+      // Generate description using AI
+      const description = await generateVideoDescription(video.title, {
+        maxCharacters,
+        language: "slovenian",
+        includeArtistInfo,
+        includeLabelInfo
+      });
+      
+      res.json({ 
+        description,
+        title: video.title,
+        characterCount: description.length,
+        maxCharacters
+      });
+      
+    } catch (error) {
+      console.error("Error generating AI description:", error);
+      res.status(500).json({ 
+        message: error instanceof Error ? error.message : "Failed to generate description" 
+      });
+    }
+  });
+
+  // Generate AI descriptions for multiple videos (admin only)
+  app.post('/api/admin/videos/generate-descriptions-bulk', isAdmin, async (req, res) => {
+    try {
+      const { videoIds, maxCharacters = 500, includeArtistInfo = true, includeLabelInfo = true } = req.body;
+      
+      if (!Array.isArray(videoIds) || videoIds.length === 0) {
+        return res.status(400).json({ message: "Video IDs array is required" });
+      }
+      
+      if (videoIds.length > 50) {
+        return res.status(400).json({ message: "Maximum 50 videos can be processed at once" });
+      }
+      
+      // Get video details for all requested videos
+      const videos = [];
+      for (const id of videoIds) {
+        const video = await storage.getVideo(id);
+        if (video) {
+          videos.push({ id: video.id, title: video.title });
+        }
+      }
+      
+      // Generate descriptions using AI
+      const results = await generateBulkDescriptions(videos, {
+        maxCharacters,
+        language: "slovenian", 
+        includeArtistInfo,
+        includeLabelInfo
+      });
+      
+      res.json({
+        results,
+        processed: results.length,
+        successful: results.filter(r => !r.error).length,
+        failed: results.filter(r => r.error).length
+      });
+      
+    } catch (error) {
+      console.error("Error generating bulk AI descriptions:", error);
+      res.status(500).json({ 
+        message: error instanceof Error ? error.message : "Failed to generate descriptions" 
+      });
+    }
+  });
+
   const httpServer = createServer(app);
   return httpServer;
 }