PPTX export fixed

app/api/ai-edit-text/route.ts

@@ -1,47 +1,17 @@
 /**
  * AI Text Editing Endpoint
  *
- * Accepts a piece of slide text and an `action` verb, then uses an AI model to
- * transform the text according to the chosen action.  The endpoint first tries
- * the user's HuggingFace API key (if present); if that fails or no key is
- * available it falls back to Google Gemini (free tier).
- *
- * Supported actions:
- *  - `"refine"`  — Improve professionalism and clarity while preserving meaning.
- *  - `"change"`  — Rewrite with different words but identical information.
- *  - `"expand"`  — Elaborate with more detail, examples, and context.
- *
- * Method: POST
- * Body: `{ text: string, action: "refine" | "change" | "expand" }`
- * Returns: `{ text: string }` — the transformed text.
- *
- * Authentication:
- *  HF token is read (in priority order) from:
- *  1. `x-hf-token` request header
- *  2. `hf_api_key` httpOnly cookie
- *  If neither is present Gemini is used automatically.
+ * Uses the approved Llama 3.3 70B model to refine, rewrite, or expand slide text.
  */
 
 import { NextRequest, NextResponse } from 'next/server';
-import { GeminiClient } from '@/lib/gemini-client';
 import { HFClient } from '@/lib/hf-client';
+import { LLAMA_PRESENTATION_MODEL } from '@/lib/ai-models';
 
-/**
- * POST /api/ai-edit-text
- *
- * Transforms `text` according to the specified `action`.  The action determines
- * the editing prompt sent to the AI model.
- *
- * @param req - NextRequest with JSON body `{ text: string, action: string }`.
- * @returns 200 `{ text: string }` on success,
- *          400 on missing / invalid inputs,
- *          500 when both AI providers fail.
- */
 export async function POST(req: NextRequest) {
   try {
     const { text, action } = await req.json();
 
-    // Both the original text and the action type are required
     if (!text) {
       return NextResponse.json({ error: 'text required' }, { status: 400 });
     }
@@ -52,12 +22,8 @@ export async function POST(req: NextRequest) {
 
     let prompt = '';
 
-    // Create prompts based on action with enhanced instructions
-    // Each prompt variant includes detailed guidelines to produce consistent,
-    // high-quality slide copy for the three supported editing modes.
     switch (action) {
       case 'refine':
-        // Improve the text's professionalism and impact without changing its meaning
         prompt = `You are an expert presentation copywriter. Refine and improve the following slide text to make it more professional, clear, and impactful.
 
 Guidelines:
@@ -74,7 +40,6 @@ Return ONLY the refined text without any explanations, comments, or additional f
         break;
 
       case 'change':
-        // Rewrite with fresh wording while keeping all information intact
         prompt = `You are an expert presentation copywriter. Rewrite the following slide text with fresh wording while preserving the exact same meaning and all key points.
 
 Guidelines:
@@ -91,7 +56,6 @@ Return ONLY the rewritten text without any explanations, comments, or additional
         break;
 
       case 'expand':
-        // Elaborate on the text with more detail, examples, and context
         prompt = `You are an expert presentation copywriter. Expand the following slide text to be more detailed, comprehensive, and valuable to the audience.
 
 Guidelines:
@@ -109,56 +73,27 @@ Return ONLY the expanded text without any explanations, comments, or additional
         break;
 
       default:
-        // Reject unknown action strings early
         return NextResponse.json({ error: 'invalid action' }, { status: 400 });
     }
 
-    // editedText starts as the original — only replaced when an AI call succeeds
-    let editedText = text; // Default fallback
-
-    // ---------------------------------------------------------------------------
-    // Provider selection: HuggingFace first, Gemini as fallback
-    // ---------------------------------------------------------------------------
-
-    // Get HF token - check header first (user's API key), then cookie
-    // This ensures the user's HuggingFace inference credits are properly deducted
     let hfToken = req.headers.get('x-hf-token');
+    if (!hfToken) hfToken = req.cookies.get('hf_api_key')?.value || null;
     if (!hfToken) {
-      // Fall back to the httpOnly cookie set during HF authentication
-      hfToken = req.cookies.get('hf_api_key')?.value || null;
+      const authHeader = req.headers.get('authorization');
+      if (authHeader?.startsWith('Bearer ')) hfToken = authHeader.slice(7);
     }
+    if (!hfToken) hfToken = process.env.HF_TOKEN || process.env.HF_API_KEY || null;
 
-    if (hfToken) {
-      // Use HuggingFace with user's API key
-      try {
-        // DeepSeek V3.1 is used for editing as it produces clean, well-scoped output
-        const hf = new HFClient({ apiKey: hfToken, model: 'deepseek-ai/DeepSeek-V3.1' });
-        const response = await hf.generateSlideContent(prompt);
-        editedText = response.trim(); // Remove any leading/trailing whitespace
-      } catch (error) {
-        console.error('HF editing error:', error);
-        // HF call failed — fall through to Gemini fallback below
-      }
+    if (!hfToken) {
+      return NextResponse.json({
+        error: 'HuggingFace authentication required for AI text editing'
+      }, { status: 401 });
     }
 
-    // Use Gemini as fallback or if no HF token
-    // Only attempt if editedText has not been updated by the HF call
-    if (editedText === text) {
-      try {
-        const gemini = new GeminiClient();
-        const response = await gemini.generateSlideContent(prompt);
-        editedText = response.trim();
-      } catch (error) {
-        console.error('Gemini editing error:', error);
-        // Both providers failed — return an error to the client
-        return NextResponse.json({
-          error: 'Failed to edit text with AI'
-        }, { status: 500 });
-      }
-    }
+    const hf = new HFClient({ apiKey: hfToken, model: LLAMA_PRESENTATION_MODEL });
+    const response = await hf.generateSlideContent(prompt, LLAMA_PRESENTATION_MODEL);
 
-    // Return the transformed text to the client
-    return NextResponse.json({ text: editedText });
+    return NextResponse.json({ text: response.trim() });
   } catch (e) {
     console.error('API error:', e);
     return NextResponse.json({ error: 'editing failed' }, { status: 500 });

app/api/generate-slides/route.ts

@@ -12,6 +12,7 @@ import { NextRequest, NextResponse } from 'next/server';
 import { fetchImagesForSlides } from '@/lib/imageService';
 import { buildSlidePrompt, normalizeLayout } from '@/lib/slide-prompt';
 import type { GeneratedSlide } from '@/lib/slide-prompt';
+import { LLAMA_PRESENTATION_MODEL, isAllowedPresentationModel } from '@/lib/ai-models';
 
 interface Slide {
   id: string;
@@ -28,13 +29,19 @@ export async function POST(request: NextRequest) {
   try {
     const { prompt, model } = await request.json();
 
-    if (!prompt || !model) {
+    if (!prompt) {
       return NextResponse.json(
-        { error: 'Prompt and model are required' },
+        { error: 'Prompt is required' },
         { status: 400 }
       );
     }
 
+    if (!isAllowedPresentationModel(model)) {
+      console.warn(`Ignoring unsupported presentation model "${model}" and forcing ${LLAMA_PRESENTATION_MODEL}.`);
+    }
+
+    const actualModel = LLAMA_PRESENTATION_MODEL;
+
     // Resolve HF token: header → cookie → Bearer
     let apiToken: string | undefined;
 
@@ -62,10 +69,10 @@ export async function POST(request: NextRequest) {
     const slideGenerationPrompt = buildSlidePrompt(prompt);
 
     try {
-      console.log(`Attempting to use model: ${model}`);
+      console.log(`Attempting to use model: ${actualModel}`);
 
       const response = await hf.textGeneration({
-        model,
+        model: actualModel,
         inputs: slideGenerationPrompt,
         parameters: {
           max_new_tokens: 4000,
@@ -213,7 +220,7 @@ export async function POST(request: NextRequest) {
 
       if (modelError instanceof Error && modelError.message) {
         if (modelError.message.includes('not supported for task') || modelError.message.includes('conversational')) {
-          errorMessage = `Model ${model} does not support text generation with Fireworks AI. Please choose a different model.`;
+          errorMessage = `Model ${actualModel} does not support text generation with Fireworks AI.`;
           statusCode = 400;
         } else if (modelError.message.includes('Rate limit') || modelError.message.includes('quota')) {
           errorMessage = 'Fireworks AI rate limit reached. Please try again in a moment.';
@@ -222,7 +229,7 @@ export async function POST(request: NextRequest) {
           errorMessage = 'Invalid Fireworks AI API token. Please check your API key.';
           statusCode = 401;
         } else if (modelError.message.includes('Model') && (modelError.message.includes('not found') || modelError.message.includes('not available'))) {
-          errorMessage = `Model ${model} not found on Fireworks AI. Please verify the model name.`;
+          errorMessage = `Model ${actualModel} not found on Fireworks AI.`;
           statusCode = 404;
         } else {
           errorMessage = modelError.message;

app/api/presentations/generate/route.ts

@@ -1,6 +1,6 @@
 import { NextRequest, NextResponse } from 'next/server';
-import { GeminiClient } from '@/lib/gemini-client';
 import { HFClient, HFGenerationError } from '@/lib/hf-client';
+import { LLAMA_PRESENTATION_MODEL, isAllowedPresentationModel } from '@/lib/ai-models';
 import { buildSlidePrompt, normalizeLayout } from '@/lib/slide-prompt';
 
 async function fetchImageForSlide(query: string): Promise<string | undefined> {
@@ -97,7 +97,9 @@ export async function POST(req: NextRequest) {
     const { prompt, model } = await req.json();
 
     if (!prompt) return NextResponse.json({ error: 'prompt required' }, { status: 400 });
-    if (!model) return NextResponse.json({ error: 'model required' }, { status: 400 });
+    if (!isAllowedPresentationModel(model)) {
+      console.warn(`Ignoring unsupported presentation model "${model}" and forcing ${LLAMA_PRESENTATION_MODEL}.`);
+    }
 
     // Resolve HF token: header → cookie → Bearer → env
     let hfToken = req.headers.get('x-hf-token');
@@ -113,151 +115,96 @@ export async function POST(req: NextRequest) {
 
     const systemPrompt = buildSlidePrompt(prompt);
 
-    if (model.includes('gemini')) {
-      const gemini = new GeminiClient();
+    if (!hfToken) {
+      return NextResponse.json({
+        error: 'HuggingFace authentication required for this model. Please connect your HuggingFace account.'
+      }, { status: 401 });
+    }
 
-      try {
-        const response = await gemini.generateSlideContent(systemPrompt);
-        const parsed = JSON.parse(response);
+    const hf = new HFClient({ apiKey: hfToken, model: LLAMA_PRESENTATION_MODEL });
 
-        if (parsed.presentationName) {
-          presentationName = parsed.presentationName;
-        }
+    try {
+      let response = '';
 
-        const slidesArray = parsed.slides || (Array.isArray(parsed) ? parsed : []);
-        const total = slidesArray.length;
-
-        slides = slidesArray.map((slide: any, index: number) => {
-          const layout = normalizeLayout(slide.layout || '', index, total);
-          return {
-            id: `slide-${index + 1}`,
-            title: slide.title || `Slide ${index + 1}`,
-            subtitle: slide.subtitle || undefined,
-            layout,
-            content: normalizeSlideContent(slide.content, layout),
-            columns: layout === 'three_columns'
-              ? (normalizeColumns(slide.columns) || deriveColumnsFromContent(slide.content))
-              : undefined,
-            notes: slide.notes || '',
-            imageKeyword: slide.imageKeyword || slide.imageKeywords || '',
-          };
-        });
+      try {
+        response = await hf.generateSlideContent(systemPrompt, LLAMA_PRESENTATION_MODEL);
       } catch (error) {
-        console.error('Gemini generation error:', error);
-        slides = createFallbackSlides(prompt);
-      }
-    } else {
-      if (!hfToken) {
-        return NextResponse.json({
-          error: 'HuggingFace authentication required for this model. Please connect your HuggingFace account.'
-        }, { status: 401 });
-      }
-
-      const hf = new HFClient({ apiKey: hfToken, model });
+        const shouldRetry = error instanceof HFGenerationError
+          ? !error.status || error.status >= 500
+          : true;
 
-      try {
-        const fallbackModels = [
-          'deepseek-ai/DeepSeek-V3.1',
-          'meta-llama/Llama-4-Maverick-17B-128E-Instruct',
-        ].filter((candidate) => candidate !== model);
-
-        let response = '';
-
-        try {
-          response = await hf.generateSlideContent(systemPrompt, model);
-        } catch (error) {
-          const primaryMessage = error instanceof Error ? error.message : 'Unknown provider error';
-          const shouldRetry = error instanceof HFGenerationError
-            ? !error.status || error.status >= 500
-            : true;
-
-          if (!shouldRetry) throw error;
-
-          let recovered = false;
-          for (const fallbackModel of fallbackModels) {
-            try {
-              console.warn(`Primary HF model failed (${primaryMessage}). Retrying with ${fallbackModel}.`);
-              response = await hf.generateSlideContent(systemPrompt, fallbackModel);
-              recovered = true;
-              break;
-            } catch (fallbackError) {
-              const fallbackMessage = fallbackError instanceof Error ? fallbackError.message : 'Unknown provider error';
-              console.warn(`HF fallback model ${fallbackModel} failed: ${fallbackMessage}`);
-            }
-          }
+        if (!shouldRetry) throw error;
 
-          if (!recovered) throw error;
-        }
+        console.warn(`Primary Llama generation failed once. Retrying with ${LLAMA_PRESENTATION_MODEL}.`);
+        response = await hf.generateSlideContent(systemPrompt, LLAMA_PRESENTATION_MODEL);
+      }
 
-        console.log('Raw HF response (first 500 chars):', response.substring(0, 500));
+      console.log('Raw HF response (first 500 chars):', response.substring(0, 500));
 
-        if (!response || response.trim().length === 0) {
-          throw new Error('Empty response from model');
-        }
+      if (!response || response.trim().length === 0) {
+        throw new Error('Empty response from model');
+      }
 
-        let cleanedJson = response.trim();
-        cleanedJson = cleanedJson.replace(/^```(?:json)?\s*\n?/i, '').replace(/\n?```\s*$/i, '');
+      let cleanedJson = response.trim();
+      cleanedJson = cleanedJson.replace(/^```(?:json)?\s*\n?/i, '').replace(/\n?```\s*$/i, '');
 
-        let parsed: any = null;
+      let parsed: any = null;
 
-        // Try object parse first (new format)
-        try {
-          const firstBrace = cleanedJson.indexOf('{');
-          const lastBrace = cleanedJson.lastIndexOf('}');
-          if (firstBrace !== -1 && lastBrace !== -1) {
-            parsed = JSON.parse(cleanedJson.substring(firstBrace, lastBrace + 1));
-          }
-        } catch { /* fall through */ }
-
-        // Fallback to array parse
-        if (!parsed) {
-          let jsonMatch = cleanedJson.match(/\[\s*\{[\s\S]*?\}\s*\]/);
-          if (!jsonMatch) {
-            const firstBracket = cleanedJson.indexOf('[');
-            const lastBracket = cleanedJson.lastIndexOf(']');
-            if (firstBracket !== -1 && lastBracket !== -1 && lastBracket > firstBracket) {
-              jsonMatch = [cleanedJson.substring(firstBracket, lastBracket + 1)];
-            }
-          }
-          if (jsonMatch) {
-            let jsonStr = jsonMatch[0];
-            jsonStr = jsonStr.replace(/,(\s*[}\]])/g, '$1');
-            const arr = JSON.parse(jsonStr);
-            parsed = { slides: Array.isArray(arr) ? arr : [arr] };
+      try {
+        const firstBrace = cleanedJson.indexOf('{');
+        const lastBrace = cleanedJson.lastIndexOf('}');
+        if (firstBrace !== -1 && lastBrace !== -1) {
+          parsed = JSON.parse(cleanedJson.substring(firstBrace, lastBrace + 1));
+        }
+      } catch { /* fall through */ }
+
+      if (!parsed) {
+        let jsonMatch = cleanedJson.match(/\[\s*\{[\s\S]*?\}\s*\]/);
+        if (!jsonMatch) {
+          const firstBracket = cleanedJson.indexOf('[');
+          const lastBracket = cleanedJson.lastIndexOf(']');
+          if (firstBracket !== -1 && lastBracket !== -1 && lastBracket > firstBracket) {
+            jsonMatch = [cleanedJson.substring(firstBracket, lastBracket + 1)];
           }
         }
-
-        if (!parsed) throw new Error('No JSON found in response');
-
-        if (parsed.presentationName) {
-          presentationName = parsed.presentationName;
+        if (jsonMatch) {
+          let jsonStr = jsonMatch[0];
+          jsonStr = jsonStr.replace(/,(\s*[}\]])/g, '$1');
+          const arr = JSON.parse(jsonStr);
+          parsed = { slides: Array.isArray(arr) ? arr : [arr] };
         }
+      }
 
-        const slidesArray = parsed.slides || (Array.isArray(parsed) ? parsed : []);
-        const total = slidesArray.length;
-
-        slides = slidesArray.map((slide: any, index: number) => {
-          const layout = normalizeLayout(slide.layout || '', index, total);
-          return {
-            id: `slide-${index + 1}`,
-            title: slide.title || `Slide ${index + 1}`,
-            subtitle: slide.subtitle || undefined,
-            layout,
-            content: normalizeSlideContent(slide.content, layout),
-            columns: layout === 'three_columns'
-              ? (normalizeColumns(slide.columns) || deriveColumnsFromContent(slide.content))
-              : undefined,
-            notes: slide.notes || '',
-            imageKeyword: slide.imageKeyword || slide.imageKeywords || '',
-          };
-        });
-
-        console.log(`Parsed ${slides.length} slides`);
-      } catch (error) {
-        const message = error instanceof Error ? error.message : 'Unknown provider error';
-        console.warn(`HuggingFace generation failed, using fallback slides: ${message}`);
-        slides = createFallbackSlides(prompt);
+      if (!parsed) throw new Error('No JSON found in response');
+
+      if (parsed.presentationName) {
+        presentationName = parsed.presentationName;
       }
+
+      const slidesArray = parsed.slides || (Array.isArray(parsed) ? parsed : []);
+      const total = slidesArray.length;
+
+      slides = slidesArray.map((slide: any, index: number) => {
+        const layout = normalizeLayout(slide.layout || '', index, total);
+        return {
+          id: `slide-${index + 1}`,
+          title: slide.title || `Slide ${index + 1}`,
+          subtitle: slide.subtitle || undefined,
+          layout,
+          content: normalizeSlideContent(slide.content, layout),
+          columns: layout === 'three_columns'
+            ? (normalizeColumns(slide.columns) || deriveColumnsFromContent(slide.content))
+            : undefined,
+          notes: slide.notes || '',
+          imageKeyword: slide.imageKeyword || slide.imageKeywords || '',
+        };
+      });
+
+      console.log(`Parsed ${slides.length} slides`);
+    } catch (error) {
+      const message = error instanceof Error ? error.message : 'Unknown provider error';
+      console.warn(`HuggingFace generation failed, using fallback slides: ${message}`);
+      slides = createFallbackSlides(prompt);
     }
 
     if (slides.length === 0) slides = createFallbackSlides(prompt);

app/api/presentations/route.ts

@@ -15,8 +15,9 @@
  * Output: { success: boolean, presentation: object, metadata: object }
  */
 
-import { NextRequest, NextResponse } from 'next/server';
-import { generatePresentation, type GenerationRequest, type Provider } from '@/lib/orchestrator';
+import { NextRequest, NextResponse } from 'next/server';
+import { generatePresentation, type GenerationRequest, type Provider } from '@/lib/orchestrator';
+import { LLAMA_PRESENTATION_MODEL, LLAMA_PRESENTATION_PROVIDER, isAllowedPresentationModel } from '@/lib/ai-models';
 
 /**
  * POST handler for presentation generation
@@ -25,7 +26,7 @@ import { generatePresentation, type GenerationRequest, type Provider } from '@/l
 export async function POST(request: NextRequest) {
   try {
     const body = await request.json();
-    const { prompt, model, provider }: { prompt: string; model?: string; provider?: Provider } = body;
+    const { prompt, model, provider }: { prompt: string; model?: string; provider?: Provider } = body;
 
     if (!prompt) {
       return NextResponse.json(
@@ -34,19 +35,21 @@ export async function POST(request: NextRequest) {
       );
     }
 
-    // Determine provider based on model selection
-    let finalProvider: Provider = provider || 'gemini';
-    if (model && model.startsWith('deepseek-ai/') || model?.includes('llama') || model?.includes('qwen') || model?.includes('gpt-oss')) {
-      finalProvider = 'hf';
-    } else if (model === 'gemini-2.5-flash-lite' || model?.startsWith('gemini')) {
-      finalProvider = 'gemini';
-    }
-
-    const generationRequest: GenerationRequest = {
-      prompt,
-      provider: finalProvider,
-      model: model || (finalProvider === 'gemini' ? 'gemini-2.0-flash-exp' : 'deepseek-ai/DeepSeek-V3.1')
-    };
+    if (provider && provider !== LLAMA_PRESENTATION_PROVIDER) {
+      console.warn(`Ignoring unsupported provider "${provider}" and forcing ${LLAMA_PRESENTATION_PROVIDER}.`);
+    }
+
+    if (!isAllowedPresentationModel(model)) {
+      console.warn(`Ignoring unsupported presentation model "${model}" and forcing ${LLAMA_PRESENTATION_MODEL}.`);
+    }
+
+    const finalProvider: Provider = LLAMA_PRESENTATION_PROVIDER;
+
+    const generationRequest: GenerationRequest = {
+      prompt,
+      provider: finalProvider,
+      model: LLAMA_PRESENTATION_MODEL,
+    };
 
     const presentation = await generatePresentation(generationRequest);
 
@@ -73,4 +76,4 @@ export async function POST(request: NextRequest) {
       { status: 500 }
     );
   }
-}
+}

app/api/upload-template/route.ts

@@ -23,6 +23,7 @@
 
 import { NextRequest, NextResponse } from 'next/server';
 import { generatePresentation, type GenerationRequest, type Provider } from '@/lib/orchestrator';
+import { LLAMA_PRESENTATION_MODEL, LLAMA_PRESENTATION_PROVIDER, isAllowedPresentationModel } from '@/lib/ai-models';
 
 /**
  * POST /api/upload-template
@@ -73,15 +74,12 @@ export async function POST(request: NextRequest) {
     const arrayBuffer = await file.arrayBuffer();
     const base64File = Buffer.from(arrayBuffer).toString('base64');
 
-    // Determine provider based on model selection
-    // HF models are identified by organisation prefixes; everything else defaults to Gemini
-    let finalProvider: Provider = 'gemini';
-    if (model && (model.startsWith('deepseek-ai/') || model?.includes('llama') || model?.includes('qwen') || model?.includes('gpt-oss'))) {
-      finalProvider = 'hf';
-    } else if (model === 'gemini-2.5-flash-lite' || model?.startsWith('gemini')) {
-      finalProvider = 'gemini';
+    if (!isAllowedPresentationModel(model)) {
+      console.warn(`Ignoring unsupported presentation model "${model}" and forcing ${LLAMA_PRESENTATION_MODEL}.`);
     }
 
+    const finalProvider: Provider = LLAMA_PRESENTATION_PROVIDER;
+
     // Build an enhanced prompt that instructs the AI to act as a template editor
     // rather than generating a presentation from scratch
     const enhancedPrompt = `
@@ -103,8 +101,7 @@ Generate a complete presentation that reflects both the original template's stre
     const generationRequest: GenerationRequest = {
       prompt: enhancedPrompt,
       provider: finalProvider,
-      // Use the requested model or fall back to the provider's best default
-      model: model || (finalProvider === 'gemini' ? 'gemini-2.0-flash-exp' : 'deepseek-ai/DeepSeek-V3.1'),
+      model: LLAMA_PRESENTATION_MODEL,
       // Add template context - in a real implementation, you'd parse the PowerPoint file
       templateContext: {
         fileName: file.name,

components/UnsplashImageSearch.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import React, { useState, useEffect } from 'react';
-import { Search, Download, X } from 'lucide-react';
+import React, { useEffect, useState } from 'react';
+import { Download, ImageIcon, Loader2, Search, Sparkles, X } from 'lucide-react';
 
 interface UnsplashImage {
   id: string;
@@ -25,8 +25,10 @@ interface UnsplashImageSearchProps {
   onClose: () => void;
 }
 
+const QUICK_SEARCHES = ['Presentation', 'Business', 'Technology', 'Teamwork', 'Marketing', 'Design'];
+
 export default function UnsplashImageSearch({ onImageSelect, onClose }: UnsplashImageSearchProps) {
-  const [query, setQuery] = useState('');
+  const [query, setQuery] = useState('presentation');
   const [images, setImages] = useState<UnsplashImage[]>([]);
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -54,7 +56,7 @@ export default function UnsplashImageSearch({ onImageSelect, onClose }: Unsplash
       if (pageNum === 1) {
         setImages(newImages);
       } else {
-        setImages(prev => [...prev, ...newImages]);
+        setImages((prev) => [...prev, ...newImages]);
       }
 
       setHasMore(newImages.length === 20);
@@ -74,9 +76,14 @@ export default function UnsplashImageSearch({ onImageSelect, onClose }: Unsplash
     }
   };
 
+  const handleQuickSearch = (value: string) => {
+    setQuery(value);
+    searchImages(value, 1);
+  };
+
   const loadMore = () => {
-    if (!isLoading && hasMore && query) {
-      searchImages(query, page + 1);
+    if (!isLoading && hasMore && query.trim()) {
+      searchImages(query.trim(), page + 1);
     }
   };
 
@@ -91,95 +98,218 @@ export default function UnsplashImageSearch({ onImageSelect, onClose }: Unsplash
     searchImages('presentation', 1);
   }, []);
 
+  const showInitialLoading = isLoading && images.length === 0;
+  const normalizedQuery = query.trim();
+
   return (
-    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-[9999]">
-      <div className="bg-white rounded-lg max-w-4xl w-full mx-4 max-h-[90vh] flex flex-col">
-        <div className="p-4 border-b border-gray-200 flex items-center justify-between">
-          <h3 className="text-lg font-semibold text-gray-900">Search Unsplash Images</h3>
-          <button onClick={onClose} className="p-1 text-gray-400 hover:text-gray-600">
-            <X size={20} />
-          </button>
-        </div>
+    <div className="fixed inset-0 z-[9999] flex items-center justify-center bg-slate-950/60 p-4 backdrop-blur-md">
+      <div className="flex h-[min(88vh,820px)] w-full max-w-6xl flex-col overflow-hidden rounded-[28px] border border-white/70 bg-white/95 shadow-[0_32px_120px_rgba(15,23,42,0.32)]">
+        <div className="relative overflow-hidden border-b border-slate-200/80 bg-[radial-gradient(circle_at_top_left,_rgba(96,165,250,0.18),_transparent_32%),radial-gradient(circle_at_top_right,_rgba(14,165,233,0.12),_transparent_28%),linear-gradient(180deg,#ffffff_0%,#f8fafc_100%)] px-6 pb-6 pt-5">
+          <div className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-sky-300/70 to-transparent" />
+
+          <div className="flex items-start justify-between gap-4">
+            <div className="space-y-3">
+              <div className="inline-flex items-center gap-2 rounded-full border border-sky-200 bg-sky-50/80 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-sky-700">
+                <Sparkles className="h-3.5 w-3.5" />
+                Curated Unsplash Search
+              </div>
 
-        <div className="p-4 border-b border-gray-200">
-          <form onSubmit={handleSearch} className="flex gap-2">
-            <div className="relative flex-1">
-              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={16} />
-              <input
-                type="text"
-                value={query}
-                onChange={(e) => setQuery(e.target.value)}
-                placeholder="Search for images..."
-                className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-              />
+              <div>
+                <h3 className="text-[28px] font-semibold tracking-tight text-slate-950">Search Unsplash Images</h3>
+                <p className="mt-1 max-w-2xl text-sm leading-6 text-slate-600">
+                  Find polished, presentation-ready photography and drop it straight into your slide.
+                </p>
+              </div>
             </div>
+
             <button
-              type="submit"
-              disabled={isLoading || !query.trim()}
-              className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
+              onClick={onClose}
+              aria-label="Close Unsplash image search"
+              className="inline-flex h-11 w-11 items-center justify-center rounded-full border border-slate-200 bg-white/80 text-slate-500 shadow-sm transition hover:border-slate-300 hover:bg-white hover:text-slate-900"
             >
-              Search
+              <X size={20} />
             </button>
-          </form>
-        </div>
+          </div>
 
-        <div className="flex-1 overflow-y-auto p-4">
-          {error && (
-            <div className="text-center py-8 text-red-600">{error}</div>
-          )}
+          <div className="mt-5 space-y-4">
+            <form onSubmit={handleSearch} className="flex flex-col gap-3 lg:flex-row">
+              <div className="relative flex-1">
+                <Search className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400" size={18} />
+                <input
+                  type="text"
+                  value={query}
+                  onChange={(e) => setQuery(e.target.value)}
+                  placeholder="Search for images..."
+                  className="h-14 w-full rounded-2xl border border-slate-200 bg-white pl-12 pr-4 text-[15px] text-slate-900 shadow-sm outline-none transition focus:border-sky-400 focus:ring-4 focus:ring-sky-100"
+                />
+              </div>
 
-          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
-            {images.map((image) => (
-              <div
-                key={image.id}
-                className="relative group cursor-pointer rounded-lg overflow-hidden bg-gray-100 aspect-video"
-                onClick={() => handleImageSelect(image)}
+              <button
+                type="submit"
+                disabled={isLoading || !query.trim()}
+                className="inline-flex h-14 items-center justify-center gap-2 rounded-2xl bg-slate-950 px-6 text-sm font-semibold text-white shadow-lg shadow-slate-950/15 transition hover:bg-slate-800 disabled:cursor-not-allowed disabled:bg-slate-300"
               >
-                <img
-                  src={image.urls.small}
-                  alt={image.alt_description || 'Unsplash image'}
-                  loading="lazy"
-                  referrerPolicy="no-referrer"
-                  className="w-full h-full object-cover transition-transform group-hover:scale-105"
-                />
-                <div className="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-30 transition-opacity flex items-center justify-center">
-                  <Download className="text-white opacity-0 group-hover:opacity-100 transition-opacity" size={24} />
+                {isLoading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Search className="h-4 w-4" />}
+                Search
+              </button>
+            </form>
+
+            <div className="flex flex-wrap gap-2">
+              {QUICK_SEARCHES.map((term) => {
+                const active = normalizedQuery.toLowerCase() === term.toLowerCase();
+
+                return (
+                  <button
+                    key={term}
+                    type="button"
+                    onClick={() => handleQuickSearch(term)}
+                    className={`rounded-full border px-3 py-1.5 text-xs font-medium transition ${
+                      active
+                        ? 'border-slate-900 bg-slate-900 text-white shadow-sm'
+                        : 'border-slate-200 bg-white/80 text-slate-600 hover:border-slate-300 hover:bg-white hover:text-slate-900'
+                    }`}
+                  >
+                    {term}
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+
+        <div className="flex items-center justify-between gap-4 border-b border-slate-200/80 bg-white/90 px-6 py-3">
+          <div className="text-sm text-slate-600">
+            {isLoading
+              ? 'Refreshing results...'
+              : `${images.length} ${images.length === 1 ? 'image' : 'images'}${normalizedQuery ? ` for "${normalizedQuery}"` : ''}`}
+          </div>
+          <div className="text-xs font-medium uppercase tracking-[0.16em] text-slate-400">
+            Landscape photography
+          </div>
+        </div>
+
+        <div className="flex-1 overflow-y-auto bg-slate-50/80 px-6 py-6">
+          {error ? (
+            <div className="mb-6 rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700">
+              {error}
+            </div>
+          ) : null}
+
+          {showInitialLoading ? (
+            <div className="grid grid-cols-1 gap-5 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
+              {Array.from({ length: 8 }).map((_, index) => (
+                <div
+                  key={`skeleton-${index}`}
+                  className="overflow-hidden rounded-3xl border border-slate-200 bg-white shadow-sm"
+                >
+                  <div className="aspect-[4/3] animate-pulse bg-[linear-gradient(110deg,#e2e8f0,45%,#f8fafc,55%,#e2e8f0)] bg-[length:200%_100%]" />
+                  <div className="space-y-2 p-4">
+                    <div className="h-3 w-24 animate-pulse rounded-full bg-slate-200" />
+                    <div className="h-4 w-40 animate-pulse rounded-full bg-slate-200" />
+                  </div>
                 </div>
-                <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-2">
-                  <div className="text-white text-xs truncate">Photo by {image.user.name}</div>
+              ))}
+            </div>
+          ) : images.length > 0 ? (
+            <div className="grid grid-cols-1 gap-5 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
+              {images.map((image) => (
+                <button
+                  type="button"
+                  key={image.id}
+                  onClick={() => handleImageSelect(image)}
+                  aria-label={`Select image by ${image.user.name}`}
+                  className="group overflow-hidden rounded-3xl border border-slate-200 bg-white text-left shadow-sm transition duration-300 hover:-translate-y-1 hover:shadow-[0_18px_40px_rgba(15,23,42,0.14)] focus:outline-none focus:ring-4 focus:ring-sky-100"
+                >
+                  <div className="relative aspect-[4/3] overflow-hidden bg-slate-200">
+                    {image.urls.small ? (
+                      <img
+                        src={image.urls.small}
+                        alt={image.alt_description || 'Unsplash image'}
+                        loading="lazy"
+                        referrerPolicy="no-referrer"
+                        className="h-full w-full object-cover transition duration-500 group-hover:scale-105"
+                      />
+                    ) : (
+                      <div className="flex h-full items-center justify-center bg-slate-200 text-slate-500">
+                        <ImageIcon className="h-8 w-8" />
+                      </div>
+                    )}
+
+                    <div className="absolute inset-0 bg-gradient-to-t from-slate-950/85 via-slate-950/5 to-transparent" />
+
+                    <div className="absolute right-3 top-3 inline-flex h-10 w-10 items-center justify-center rounded-full border border-white/70 bg-white/85 text-slate-900 shadow-sm backdrop-blur-sm transition group-hover:scale-105">
+                      <Download className="h-4 w-4" />
+                    </div>
+
+                    <div className="absolute inset-x-0 bottom-0 p-4">
+                      <div className="mb-2 text-[11px] font-semibold uppercase tracking-[0.18em] text-white/70">
+                        Unsplash photo
+                      </div>
+                      <div className="truncate text-sm font-semibold text-white">
+                        {image.alt_description || 'Use this image in your slide'}
+                      </div>
+                      <div className="mt-3 flex items-end justify-between gap-3">
+                        <div className="min-w-0">
+                          <div className="truncate text-xs font-medium text-white">Photo by {image.user.name}</div>
+                          <div className="truncate text-[11px] text-white/65">@{image.user.username}</div>
+                        </div>
+                        <span className="rounded-full bg-white/15 px-3 py-1 text-[11px] font-medium text-white backdrop-blur-sm">
+                          Use image
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                </button>
+              ))}
+            </div>
+          ) : (
+            <div className="flex min-h-[360px] items-center justify-center">
+              <div className="max-w-md rounded-3xl border border-slate-200 bg-white px-8 py-10 text-center shadow-sm">
+                <div className="mx-auto flex h-14 w-14 items-center justify-center rounded-2xl bg-slate-100 text-slate-500">
+                  <ImageIcon className="h-7 w-7" />
                 </div>
+                <h4 className="mt-4 text-lg font-semibold text-slate-900">No images found</h4>
+                <p className="mt-2 text-sm leading-6 text-slate-600">
+                  Try broader search terms like business, technology, teamwork, or product launch.
+                </p>
               </div>
-            ))}
-          </div>
-
-          {isLoading && (
-            <div className="text-center py-8">
-              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto"></div>
-              <div className="text-gray-600 mt-2">Searching images...</div>
             </div>
           )}
 
-          {hasMore && images.length > 0 && !isLoading && (
-            <div className="text-center py-4">
+          {isLoading && images.length > 0 ? (
+            <div className="mt-6 flex items-center justify-center gap-2 text-sm text-slate-500">
+              <Loader2 className="h-4 w-4 animate-spin" />
+              Loading more images...
+            </div>
+          ) : null}
+        </div>
+
+        <div className="border-t border-slate-200/80 bg-white/90 px-6 py-4">
+          <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+            <p className="text-xs leading-5 text-slate-500">
+              Images provided by{' '}
+              <a
+                href="https://unsplash.com"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="font-medium text-sky-600 hover:text-sky-700 hover:underline"
+              >
+                Unsplash
+              </a>
+              . Photographer attribution is preserved in the picker.
+            </p>
+
+            {hasMore && images.length > 0 && !isLoading ? (
               <button
                 onClick={loadMore}
-                className="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300"
+                className="inline-flex items-center justify-center rounded-2xl border border-slate-200 bg-white px-4 py-2 text-sm font-medium text-slate-700 shadow-sm transition hover:border-slate-300 hover:bg-slate-50 hover:text-slate-900"
               >
                 Load More
               </button>
-            </div>
-          )}
-
-          {!hasMore && images.length > 0 && (
-            <div className="text-center py-4 text-gray-500">No more images to load</div>
-          )}
-        </div>
-
-        <div className="p-4 border-t border-gray-200 text-xs text-gray-500 text-center">
-          Images provided by{' '}
-          <a href="https://unsplash.com" target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">
-            Unsplash
-          </a>
+            ) : images.length > 0 ? (
+              <div className="text-xs font-medium uppercase tracking-[0.16em] text-slate-400">End of results</div>
+            ) : null}
+          </div>
         </div>
       </div>
     </div>

components/editor/GoogleSlidesEditor.tsx

@@ -196,13 +196,9 @@ export default function GoogleSlidesEditor() {
             'Content-Type': 'application/json',
           };
 
-          if (!generationModel.includes('gemini')) {
-            // For HF models, get the API key from localStorage (set by HuggingFaceLogin)
-            const hfApiKey = localStorage.getItem('hf_api_key');
-            if (hfApiKey) {
-              // Use x-hf-token header - this is the user's HF API key which will deduct their credits
-              headers['x-hf-token'] = hfApiKey;
-            }
+          const hfApiKey = localStorage.getItem('hf_api_key');
+          if (hfApiKey) {
+            headers['x-hf-token'] = hfApiKey;
           }
 
           const response = await fetch('/api/presentations/generate', {

components/slide-generator.tsx

@@ -1,441 +0,0 @@
-'use client';
-
-import React, { useState, useRef } from 'react';
-import { DeepSeek, OpenAI } from '@lobehub/icons';
-import { HFClient, availableModels } from '@/lib/hf-client';
-import { GeminiClient } from '@/lib/gemini-client';
-import { generatePowerPoint } from '@/lib/ppt-generator';
-
-interface SlideContent {
-  title?: string;
-  subtitle?: string;
-  authorName?: string;
-  authorTitle?: string;
-  date?: string;
-  points?: Array<{ title: string; description: string }>;
-  stats?: Array<{ number: string; label: string }>;
-  highlightText?: string;
-  takeaways?: string[];
-  ctaTitle?: string;
-  ctaText?: string;
-  ctaButtonText?: string;
-  contactInfo?: string;
-}
-
-interface Slide {
-  id: string;
-  type: 'title' | 'content' | 'conclusion';
-  title: string;
-  content: SlideContent;
-  template: string;
-}
-
-interface SlideGeneratorProps {
-  onSlidesGenerated?: (slides: Slide[]) => void;
-}
-
-const ChevronDownIcon = () => (
-  <svg className="w-3.5 h-3.5 text-gray-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-    <path d="M6 9l6 6 6-6" />
-  </svg>
-);
-
-const SendIcon = () => (
-  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-    <path d="M12 19V5" />
-    <path d="M5 12l7-7 7 7" />
-  </svg>
-);
-
-const LoadingIcon = () => (
-  <svg className="animate-spin w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-    <path d="M21 12a9 9 0 1 1-6.219-8.56"/>
-  </svg>
-);
-
-export default function SlideGenerator({ onSlidesGenerated }: SlideGeneratorProps) {
-  const [prompt, setPrompt] = useState('');
-  const [selectedModel, setSelectedModel] = useState(availableModels[0]);
-  const [hfToken, setHfToken] = useState('');
-  const [isGenerating, setIsGenerating] = useState(false);
-  const [generatedSlides, setGeneratedSlides] = useState<Slide[]>([]);
-  const [dropdownOpen, setDropdownOpen] = useState(false);
-  const [currentSlideIndex, setCurrentSlideIndex] = useState(0);
-  const [isDownloading, setIsDownloading] = useState(false);
-  const dropdownRef = useRef<HTMLDivElement>(null);
-
-  const modelIcons = {
-    'gemini-pro': () => (
-      <div className="w-5 h-5 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full flex items-center justify-center text-white text-xs font-bold">
-        G
-      </div>
-    ),
-    'microsoft/DialoGPT-medium': () => <OpenAI.Avatar size={20} />,
-    'microsoft/DialoGPT-large': () => <OpenAI.Avatar size={20} />,
-    'deepseek-ai/DeepSeek-V3-0324': () => <DeepSeek.Color size={20} />,
-  };
-
-  const parseSlideContent = (content: string, slideNumber: number, totalSlides: number) => {
-    const lines = content.split('\n').filter(line => line.trim());
-
-    if (slideNumber === 1) {
-      // Title slide
-      return {
-        type: 'title',
-        title: lines[0] || 'Presentation Title',
-        subtitle: lines[1] || 'Subtitle',
-        authorName: 'Generated by AI',
-        authorTitle: 'AI Assistant',
-        date: new Date().toLocaleDateString(),
-      };
-    } else if (slideNumber === totalSlides) {
-      // Conclusion slide
-      return {
-        type: 'conclusion',
-        title: 'Conclusion',
-        takeaways: lines.slice(0, 3).map(line => line.replace(/^[-•*]\s*/, '')),
-        ctaTitle: 'Next Steps',
-        ctaText: 'Ready to implement these insights?',
-        ctaButtonText: 'Get Started',
-        contactInfo: 'Contact us for more information',
-      };
-    } else {
-      // Content slide
-      const title = lines[0] || `Slide ${slideNumber}`;
-      const points = lines.slice(1).map((line, index) => ({
-        title: line.split(':')[0] || `Point ${index + 1}`,
-        description: line.split(':')[1]?.trim() || line,
-      }));
-
-      return {
-        type: 'content',
-        title,
-        subtitle: `Key insights and information`,
-        points: points.slice(0, 4),
-        stats: [
-          { number: '95%', label: 'Success Rate' },
-          { number: '24/7', label: 'Support' },
-        ],
-        highlightText: 'This information is crucial for understanding the topic.',
-      };
-    }
-  };
-
-  const generateSlides = async () => {
-    // Check if token is required for paid models
-    if (selectedModel.type === 'paid' && !hfToken.trim()) {
-      alert('Please enter your Hugging Face token for paid models');
-      return;
-    }
-
-    if (!prompt.trim()) {
-      alert('Please enter a prompt for your presentation');
-      return;
-    }
-
-    setIsGenerating(true);
-    try {
-      let sections: string[];
-
-      if (selectedModel.provider === 'google') {
-        // Use free Gemini model
-        const geminiClient = new GeminiClient();
-        sections = await geminiClient.generateOutline(prompt);
-      } else {
-        // Use paid Hugging Face models
-        const client = new HFClient({ apiKey: hfToken, model: selectedModel.value });
-        const outlinePrompt = `Create a presentation outline for: "${prompt}".
-        Provide 3-5 main sections/slides. Return only the section titles, one per line.`;
-        const outline = await client.generateSlideContent(outlinePrompt, selectedModel.value);
-        sections = outline.split('\n').filter(line => line.trim());
-      }
-
-      const slides: Slide[] = [];
-
-      // Generate each slide
-      for (let i = 0; i < sections.length + 2; i++) { // +2 for title and conclusion
-        let slideContent;
-        let slideType: 'title' | 'content' | 'conclusion';
-
-        if (selectedModel.provider === 'google') {
-          // Use Gemini client
-          const geminiClient = new GeminiClient();
-
-          if (i === 0) {
-            // Title slide
-            slideType = 'title';
-            const titlePrompt = `Create a compelling title and subtitle for a presentation about: "${prompt}"`;
-            slideContent = await geminiClient.generateSlideContent(titlePrompt);
-          } else if (i === sections.length + 1) {
-            // Conclusion slide
-            slideType = 'conclusion';
-            const conclusionPrompt = `Create 3 key takeaways and a call to action for a presentation about: "${prompt}"`;
-            slideContent = await geminiClient.generateSlideContent(conclusionPrompt);
-          } else {
-            // Content slide
-            slideType = 'content';
-            const contentPrompt = `Create detailed content for this section: "${sections[i - 1]}" in the context of: "${prompt}".
-            Provide 3-4 key points with brief explanations.`;
-            slideContent = await geminiClient.generateSlideContent(contentPrompt);
-          }
-        } else {
-          // Use Hugging Face client
-          const client = new HFClient({ apiKey: hfToken, model: selectedModel.value });
-
-          if (i === 0) {
-            // Title slide
-            slideType = 'title';
-            const titlePrompt = `Create a compelling title and subtitle for a presentation about: "${prompt}"`;
-            slideContent = await client.generateSlideContent(titlePrompt, selectedModel.value);
-          } else if (i === sections.length + 1) {
-            // Conclusion slide
-            slideType = 'conclusion';
-            const conclusionPrompt = `Create 3 key takeaways and a call to action for a presentation about: "${prompt}"`;
-            slideContent = await client.generateSlideContent(conclusionPrompt, selectedModel.value);
-          } else {
-            // Content slide
-            slideType = 'content';
-            const contentPrompt = `Create detailed content for this section: "${sections[i - 1]}" in the context of: "${prompt}".
-            Provide 3-4 key points with brief explanations.`;
-            slideContent = await client.generateSlideContent(contentPrompt, selectedModel.value);
-          }
-        }
-
-        const parsedContent = parseSlideContent(slideContent, i + 1, sections.length + 2);
-
-        slides.push({
-          id: `slide-${i + 1}`,
-          type: slideType,
-          title: slideType === 'title' ? parsedContent.title :
-                 slideType === 'conclusion' ? 'Conclusion' :
-                 sections[i - 1] || `Slide ${i + 1}`,
-          content: parsedContent,
-          template: slideType === 'title' ? 'title-slide' :
-                   slideType === 'conclusion' ? 'conclusion-slide' : 'content-slide',
-        });
-      }
-
-      setGeneratedSlides(slides);
-      onSlidesGenerated?.(slides);
-    } catch (error) {
-      console.error('Error generating slides:', error);
-      alert('Error generating slides. Please check your token and try again.');
-    } finally {
-      setIsGenerating(false);
-    }
-  };
-
-  const nextSlide = () => {
-    setCurrentSlideIndex((prev) => (prev + 1) % generatedSlides.length);
-  };
-
-  const prevSlide = () => {
-    setCurrentSlideIndex((prev) => (prev - 1 + generatedSlides.length) % generatedSlides.length);
-  };
-
-  const handleDownload = async () => {
-    if (generatedSlides.length === 0) return;
-
-    setIsDownloading(true);
-    try {
-      await generatePowerPoint(generatedSlides);
-    } catch (error) {
-      console.error('Error generating PowerPoint:', error);
-      alert('Error generating PowerPoint. Please try again.');
-    } finally {
-      setIsDownloading(false);
-    }
-  };
-
-  const renderSlidePreview = (slide: Slide) => {
-    return (
-      <div className="w-full h-96 bg-white border border-gray-200 rounded-lg overflow-hidden shadow-lg">
-        <div className="h-full flex items-center justify-center bg-gradient-to-br from-blue-500 to-purple-600 text-white p-6">
-          <div className="text-center">
-            <h2 className="text-2xl font-bold mb-4">{slide.title}</h2>
-            {slide.type === 'title' && (
-              <div>
-                <p className="text-lg opacity-90">{slide.content.subtitle}</p>
-                <p className="text-sm opacity-75 mt-4">{slide.content.authorName}</p>
-              </div>
-            )}
-            {slide.type === 'content' && (
-              <div className="text-left">
-                {slide.content.points?.slice(0, 3).map((point, index: number) => (
-                  <div key={index} className="mb-3">
-                    <div className="font-semibold">{point.title}</div>
-                    <div className="text-sm opacity-90">{point.description}</div>
-                  </div>
-                ))}
-              </div>
-            )}
-            {slide.type === 'conclusion' && (
-              <div>
-                <div className="mb-4">
-                  {slide.content.takeaways?.map((takeaway: string, index: number) => (
-                    <div key={index} className="text-sm mb-2">• {takeaway}</div>
-                  ))}
-                </div>
-                <div className="bg-white bg-opacity-20 p-3 rounded">
-                  <div className="font-semibold">{slide.content.ctaTitle}</div>
-                  <div className="text-sm">{slide.content.ctaText}</div>
-                </div>
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-    );
-  };
-
-  return (
-    <div className="w-full max-w-6xl mx-auto p-6">
-      {/* Input Section */}
-      <div className="bg-white rounded-3xl border border-gray-200 shadow-lg p-6 mb-8">
-        {selectedModel.type === 'paid' && (
-          <div className="mb-4">
-            <label className="block text-sm font-medium text-gray-700 mb-2">
-              Hugging Face Token (Required for {selectedModel.name})
-            </label>
-            <input
-              type="password"
-              value={hfToken}
-              onChange={(e) => setHfToken(e.target.value)}
-              placeholder="Enter your Hugging Face token"
-              className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-            />
-          </div>
-        )}
-
-        {selectedModel.type === 'free' && (
-          <div className="mb-4 p-4 bg-green-50 border border-green-200 rounded-lg">
-            <div className="flex items-center gap-2 mb-2">
-              <div className="w-2 h-2 bg-green-500 rounded-full"></div>
-              <span className="text-sm font-medium text-green-800">
-                {selectedModel.name} is free to use!
-              </span>
-            </div>
-            <p className="text-xs text-green-700">
-              Note: You may need a free Google AI Studio API key for full functionality.
-              Get one at <a href="https://aistudio.google.com/app/apikey" target="_blank" rel="noopener noreferrer" className="underline">aistudio.google.com</a>
-            </p>
-          </div>
-        )}
-
-        <textarea
-          rows={3}
-          className="w-full bg-transparent border-0 outline-none text-lg text-slate-900 placeholder:text-gray-400 resize-none px-3 py-3 border border-gray-300 rounded-lg mb-4"
-          placeholder="Describe your presentation topic..."
-          value={prompt}
-          onChange={(e) => setPrompt(e.target.value)}
-        />
-
-        <div className="flex items-center justify-between">
-          <div className="relative" ref={dropdownRef}>
-            <button
-              onClick={() => setDropdownOpen(!dropdownOpen)}
-              className="inline-flex items-center gap-2 rounded-xl border border-gray-200 bg-white px-4 py-2 text-sm text-gray-800 hover:bg-gray-50 transition"
-            >
-              {React.createElement(modelIcons[selectedModel.value as keyof typeof modelIcons])}
-              <span className="font-medium">{selectedModel.name}</span>
-              <ChevronDownIcon />
-            </button>
-
-            {dropdownOpen && (
-              <div className="absolute top-full mt-2 bg-white border border-gray-200 rounded-xl min-w-[220px] p-1.5 shadow-lg z-50">
-                {availableModels.map((model) => (
-                  <button
-                    key={model.value}
-                    onClick={() => {
-                      setSelectedModel(model);
-                      setDropdownOpen(false);
-                    }}
-                    className="w-full text-left p-2.5 rounded-lg text-sm flex gap-3 items-center hover:bg-gray-100"
-                  >
-                    {React.createElement(modelIcons[model.value as keyof typeof modelIcons])}
-                    <div className="flex-grow">
-                      <div className="flex items-center gap-2">
-                        <span>{model.name}</span>
-                        {model.type === 'free' && (
-                          <span className="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">
-                            FREE
-                          </span>
-                        )}
-                        {model.type === 'paid' && (
-                          <span className="text-xs bg-amber-100 text-amber-800 px-2 py-1 rounded-full">
-                            PAID
-                          </span>
-                        )}
-                      </div>
-                    </div>
-                    {selectedModel.value === model.value && <span className="text-green-500">✓</span>}
-                  </button>
-                ))}
-              </div>
-            )}
-          </div>
-
-          <button
-            onClick={generateSlides}
-            disabled={isGenerating || !prompt.trim() || (selectedModel.type === 'paid' && !hfToken.trim())}
-            className="inline-flex items-center gap-2 bg-blue-600 text-white px-6 py-2 rounded-xl hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition"
-          >
-            {isGenerating ? <LoadingIcon /> : <SendIcon />}
-            {isGenerating ? 'Generating...' : 'Generate Slides'}
-          </button>
-        </div>
-      </div>
-
-      {/* Preview Section */}
-      {generatedSlides.length > 0 && (
-        <div className="bg-white rounded-3xl border border-gray-200 shadow-lg p-6">
-          <div className="flex items-center justify-between mb-6">
-            <h2 className="text-2xl font-bold text-gray-800">
-              Slide Preview ({currentSlideIndex + 1} of {generatedSlides.length})
-            </h2>
-            <div className="flex gap-2">
-              <button
-                onClick={prevSlide}
-                className="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition"
-              >
-                Previous
-              </button>
-              <button
-                onClick={nextSlide}
-                className="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition"
-              >
-                Next
-              </button>
-            </div>
-          </div>
-
-          {renderSlidePreview(generatedSlides[currentSlideIndex])}
-
-          <div className="mt-6 flex justify-center">
-            <button
-              onClick={handleDownload}
-              disabled={isDownloading}
-              className="inline-flex items-center gap-2 bg-green-600 text-white px-8 py-3 rounded-xl hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed transition"
-            >
-              {isDownloading ? (
-                <>
-                  <LoadingIcon />
-                  Generating...
-                </>
-              ) : (
-                <>
-                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
-                    <polyline points="7,10 12,15 17,10" />
-                    <line x1="12" y1="15" x2="12" y2="3" />
-                  </svg>
-                  Download PowerPoint
-                </>
-              )}
-            </button>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}

lib/ai-models.ts

@@ -0,0 +1,10 @@
+export const LLAMA_PRESENTATION_MODEL = 'meta-llama/Llama-3.3-70B-Instruct:together';
+export const LLAMA_PRESENTATION_PROVIDER = 'hf' as const;
+
+export function resolvePresentationModel(): string {
+  return LLAMA_PRESENTATION_MODEL;
+}
+
+export function isAllowedPresentationModel(model?: string | null): boolean {
+  return !model || model === LLAMA_PRESENTATION_MODEL;
+}

lib/editable-pptx-export.ts

@@ -96,16 +96,50 @@ function splitAgendaItem(text: string) {
   return { heading: heading || cleanText(text), description };
 }
 
+function parseReferenceItem(text: string, index: number) {
+  const parts = text
+    .split('||')
+    .map((part) => cleanText(part))
+    .filter(Boolean);
+
+  if (parts.length >= 2) {
+    return {
+      label: parts[0],
+      value: parts[1],
+      url: parts[2],
+    };
+  }
+
+  return {
+    label: `REF_${String(index + 1).padStart(2, '0')}`,
+    value: cleanText(text),
+    url: '',
+  };
+}
+
 function formattingOffset(spec: SlideSpec, key: string) {
   const source = spec.formatting?.[key];
   const x = typeof source?.x === 'number' && Number.isFinite(source.x) ? source.x : 0;
   const y = typeof source?.y === 'number' && Number.isFinite(source.y) ? source.y : 0;
-  return { x: pxToIn(x), y: pxToIn(y) };
+  const width =
+    typeof source?.width === 'number' && Number.isFinite(source.width) && source.width > 0
+      ? pxToIn(source.width)
+      : undefined;
+  const height =
+    typeof source?.height === 'number' && Number.isFinite(source.height) && source.height > 0
+      ? pxToIn(source.height)
+      : undefined;
+  return { x: pxToIn(x), y: pxToIn(y), width, height };
 }
 
 function withOffset(spec: SlideSpec, key: string, rect: Rect): Rect {
   const offset = formattingOffset(spec, key);
-  return { x: rect.x + offset.x, y: rect.y + offset.y, w: rect.w, h: rect.h };
+  return {
+    x: rect.x + offset.x,
+    y: rect.y + offset.y,
+    w: offset.width ?? rect.w,
+    h: offset.height ?? rect.h,
+  };
 }
 
 function addTextBox(slide: PptxSlide, text: string, rect: Rect, options: Record<string, unknown> = {}) {
@@ -149,12 +183,16 @@ function getImageSizing(rect: Rect): Pick<ImageProps, 'x' | 'y' | 'w' | 'h' | 's
   };
 }
 
-async function sourceToImageProps(src: string | undefined, rect: Rect): Promise<ImageProps | null> {
+async function sourceToImageProps(
+  src: string | undefined,
+  rect: Rect,
+  extra: Partial<ImageProps> = {}
+): Promise<ImageProps | null> {
   const cleanSrc = cleanText(src);
   if (!cleanSrc) return null;
 
   if (cleanSrc.startsWith('data:')) {
-    return { data: cleanSrc, ...getImageSizing(rect) };
+    return { data: cleanSrc, ...getImageSizing(rect), ...extra };
   }
 
   try {
@@ -167,18 +205,23 @@ async function sourceToImageProps(src: string | undefined, rect: Rect): Promise<
       reader.onerror = () => reject(reader.error || new Error('Failed to read image'));
       reader.readAsDataURL(blob);
     });
-    if (dataUrl) return { data: dataUrl, ...getImageSizing(rect) };
+    if (dataUrl) return { data: dataUrl, ...getImageSizing(rect), ...extra };
   } catch {
     if (/^https?:\/\//i.test(cleanSrc)) {
-      return { path: cleanSrc, ...getImageSizing(rect) };
+      return { path: cleanSrc, ...getImageSizing(rect), ...extra };
     }
   }
 
   return null;
 }
 
-async function addImage(slide: PptxSlide, src: string | undefined, rect: Rect) {
-  const imageProps = await sourceToImageProps(src, rect);
+async function addImage(
+  slide: PptxSlide,
+  src: string | undefined,
+  rect: Rect,
+  extra: Partial<ImageProps> = {}
+) {
+  const imageProps = await sourceToImageProps(src, rect, extra);
   if (imageProps) {
     slide.addImage(imageProps);
     return;
@@ -353,12 +396,19 @@ function addNeoShadowCard(
   slide: PptxSlide,
   rect: Rect,
   fillColor: string,
-  options: { rotate?: number; shadowX?: number; shadowY?: number; lineWidth?: number } = {}
+  options: {
+    rotate?: number;
+    shadowX?: number;
+    shadowY?: number;
+    shadowColor?: string;
+    lineWidth?: number;
+  } = {}
 ) {
   const {
     rotate = 0,
     shadowX = 0.12,
     shadowY = 0.12,
+    shadowColor = '000000',
     lineWidth = 2.25,
   } = options;
 
@@ -368,8 +418,8 @@ function addNeoShadowCard(
     w: rect.w,
     h: rect.h,
     rotate,
-    fill: { color: '000000' },
-    line: { color: '000000', transparency: 100 },
+    fill: { color: normalizeColor(shadowColor) },
+    line: { color: normalizeColor(shadowColor), transparency: 100 },
   });
 
   slide.addShape('rect', {
@@ -432,7 +482,8 @@ function addNeoTitleSubtitle(slide: PptxSlide, spec: SlideSpec) {
 
 function addNeoAgenda(slide: PptxSlide, spec: SlideSpec) {
   addNeoBackground(slide);
-  addTextBox(slide, cleanText(spec.title), withOffset(spec, 'agenda-title', { x: 0.55, y: 0.45, w: 4.2, h: 0.65 }), {
+  addNeoDotPattern(slide);
+  addTextBox(slide, upperText(spec.title), withOffset(spec, 'agenda-title', { x: 0.55, y: 0.45, w: 4.2, h: 0.65 }), {
     fontFace: 'Arial Black',
     fontSize: 25,
     bold: true,
@@ -449,9 +500,13 @@ function addNeoAgenda(slide: PptxSlide, spec: SlideSpec) {
 
   (spec.items || []).slice(0, 5).forEach((item, index) => {
     const rect = withOffset(spec, `agenda-card-${index}`, { x: cards[index]?.x || 0.55, y: cards[index]?.y || 3.28, w: 2.45, h: 1.45 });
-    addRect(slide, rect, 'FFFFFF', '000000', { line: { color: '000000', width: 2.25 } });
-    addTextBox(slide, `${String(index + 1).padStart(2, '0')}`, { x: rect.x + 0.16, y: rect.y + 0.12, w: 0.4, h: 0.2 }, {
-      fontFace: 'Arial',
+    addNeoShadowCard(slide, rect, 'FFFFFF', {
+      shadowX: 0.1,
+      shadowY: 0.1,
+      shadowColor: 'A000A0',
+    });
+    addTextBox(slide, `${String(index + 1).padStart(2, '0')}/`, { x: rect.x + 0.16, y: rect.y + 0.12, w: 0.52, h: 0.2 }, {
+      fontFace: 'Arial Black',
       fontSize: 11,
       bold: true,
       color: 'A000A0',
@@ -461,16 +516,17 @@ function addNeoAgenda(slide: PptxSlide, spec: SlideSpec) {
       fontSize: 18,
       bold: true,
       color: '000000',
-      valign: 'middle',
+      valign: 'top',
     });
   });
 }
 
 function addNeoTitleAndText(slide: PptxSlide, spec: SlideSpec) {
   addNeoBackground(slide);
+  addNeoDotPattern(slide);
   const titleRect = withOffset(spec, 'title-and-text-title', { x: 2.2, y: 1.0, w: 5.6, h: 0.85 });
-  addRect(slide, titleRect, '00FFFF', '000000', { line: { color: '000000', width: 2.25 } });
-  addTextBox(slide, cleanText(spec.title), titleRect, {
+  addNeoShadowCard(slide, titleRect, '00FFFF', { shadowX: 0.1, shadowY: 0.1 });
+  addTextBox(slide, upperText(spec.title), titleRect, {
     fontFace: 'Arial Black',
     fontSize: 26,
     bold: true,
@@ -479,8 +535,8 @@ function addNeoTitleAndText(slide: PptxSlide, spec: SlideSpec) {
   });
 
   const bodyRect = withOffset(spec, 'title-and-text-body', { x: 1.25, y: 2.2, w: 7.5, h: 1.7 });
-  addRect(slide, bodyRect, 'FFFFFF', '000000', { line: { color: '000000', width: 2.25 } });
-  addTextBox(slide, bodyToParagraph(spec.body), bodyRect, {
+  addNeoShadowCard(slide, bodyRect, 'FFFFFF', { shadowX: 0.1, shadowY: 0.1 });
+  addTextBox(slide, bodyToParagraph(spec.body), { x: bodyRect.x + 0.18, y: bodyRect.y + 0.18, w: bodyRect.w - 0.36, h: bodyRect.h - 0.36 }, {
     fontFace: 'Arial',
     fontSize: 18,
     color: '000000',
@@ -491,19 +547,30 @@ function addNeoTitleAndText(slide: PptxSlide, spec: SlideSpec) {
 
 function addNeoThreeColumns(slide: PptxSlide, spec: SlideSpec) {
   addNeoBackground(slide);
+  addNeoDotPattern(slide);
   const titleRect = withOffset(spec, 'columns-title', { x: 0.55, y: 0.45, w: 3.8, h: 0.75 });
-  addRect(slide, titleRect, 'D9FF00', '000000', { line: { color: '000000', width: 2.25 } });
-  addTextBox(slide, cleanText(spec.title), titleRect, {
+  addNeoShadowCard(slide, titleRect, 'D9FF00', { shadowX: 0.1, shadowY: 0.1 });
+  addTextBox(slide, upperText(spec.title), titleRect, {
     fontFace: 'Arial Black',
     fontSize: 22,
     bold: true,
     color: '000000',
   });
 
+  const decorRect = withOffset(spec, 'columns-decor', { x: 8.45, y: 0.42, w: 0.8, h: 0.8 });
+  slide.addShape('rect', {
+    x: decorRect.x,
+    y: decorRect.y,
+    w: decorRect.w,
+    h: decorRect.h,
+    fill: { color: 'FFFFFF', transparency: 75 },
+    line: { color: '000000', width: 2.25, transparency: 75 },
+  });
+
   const columnX = [0.55, 3.35, 6.15];
   (spec.columns || []).slice(0, 3).forEach((column, index) => {
     const rect = withOffset(spec, `column-card-${index}`, { x: columnX[index], y: 1.65, w: 2.55, h: 3.25 });
-    addRect(slide, rect, 'FFFFFF', '000000', { line: { color: '000000', width: 2.25 } });
+    addNeoShadowCard(slide, rect, 'FFFFFF', { shadowX: 0.1, shadowY: 0.1 });
     addRect(slide, { x: rect.x, y: rect.y, w: rect.w, h: 0.65 }, 'D9FF00', '000000', {
       line: { color: '000000', width: 0.75 },
     });
@@ -513,7 +580,7 @@ function addNeoThreeColumns(slide: PptxSlide, spec: SlideSpec) {
       bold: true,
       color: '000000',
     });
-    addTextBox(slide, cleanText(column.heading), { x: rect.x + 0.18, y: rect.y + 0.85, w: rect.w - 0.36, h: 0.65 }, {
+    addTextBox(slide, upperText(column.heading), { x: rect.x + 0.18, y: rect.y + 0.85, w: rect.w - 0.36, h: 0.65 }, {
       fontFace: 'Arial Black',
       fontSize: 16,
       bold: true,
@@ -531,38 +598,55 @@ function addNeoThreeColumns(slide: PptxSlide, spec: SlideSpec) {
 
 async function addNeoImageAndText(slide: PptxSlide, spec: SlideSpec) {
   addNeoBackground(slide);
+  addNeoDotPattern(slide);
   const imageCard = withOffset(spec, 'image-card', { x: 0.6, y: 0.7, w: 4.15, h: 3.45 });
-  addRect(slide, imageCard, 'FFD700', '000000', { line: { color: '000000', width: 2.25 } });
-  await addImage(slide, spec.imageUrl, { x: imageCard.x + 0.18, y: imageCard.y + 0.18, w: imageCard.w - 0.36, h: 2.5 });
-  addTextBox(slide, 'FIG 1. STRUCTURAL HONESTY', { x: imageCard.x + 0.18, y: imageCard.y + 2.82, w: imageCard.w - 0.36, h: 0.32 }, {
+  addNeoShadowCard(slide, imageCard, 'FFD700', { rotate: 2, shadowX: 0.1, shadowY: 0.1 });
+  const imageFrame = {
+    x: imageCard.x + 0.18,
+    y: imageCard.y + 0.18,
+    w: imageCard.w - 0.36,
+    h: Math.max(2.35, imageCard.h - 0.95),
+  };
+  addRect(slide, imageFrame, 'FFFFFF', '000000', { line: { color: '000000', width: 2.25 }, rotate: 2 });
+  await addImage(slide, spec.imageUrl, {
+    x: imageFrame.x + 0.04,
+    y: imageFrame.y + 0.04,
+    w: imageFrame.w - 0.08,
+    h: imageFrame.h - 0.08,
+  }, { rotate: 2 });
+  addTextBox(slide, 'FIG 1. STRUCTURAL HONESTY', { x: imageCard.x + 0.18, y: imageCard.y + imageCard.h - 0.42, w: imageCard.w - 0.36, h: 0.22 }, {
     fontFace: 'Arial Black',
     fontSize: 11,
     bold: true,
     color: '000000',
     align: 'center',
+    rotate: 2,
   });
 
   const textCard = withOffset(spec, 'image-text', { x: 5.3, y: 1.15, w: 4.05, h: 2.65 });
-  addRect(slide, textCard, 'FFFFFF', '000000', { line: { color: '000000', width: 2.25 } });
-  addTextBox(slide, cleanText(spec.title), { x: textCard.x + 0.2, y: textCard.y + 0.2, w: textCard.w - 0.4, h: 0.8 }, {
+  addNeoShadowCard(slide, textCard, 'FFFFFF', { rotate: -1, shadowX: 0.1, shadowY: 0.1 });
+  addTextBox(slide, upperText(spec.title), { x: textCard.x + 0.2, y: textCard.y + 0.2, w: textCard.w - 0.4, h: 0.8 }, {
     fontFace: 'Arial Black',
     fontSize: 24,
     bold: true,
     color: '000000',
+    rotate: -1,
   });
   addTextBox(slide, bodyToParagraph(spec.body), { x: textCard.x + 0.2, y: textCard.y + 1.1, w: textCard.w - 0.4, h: 1.2 }, {
     fontFace: 'Arial',
     fontSize: 12,
     color: '000000',
     valign: 'top',
+    rotate: -1,
   });
 }
 
 function addNeoReferences(slide: PptxSlide, spec: SlideSpec) {
   addNeoBackground(slide);
+  addNeoDotPattern(slide);
   const titleRect = withOffset(spec, 'references-title', { x: 0.55, y: 0.45, w: 4.0, h: 0.65 });
-  addRect(slide, titleRect, '000000', '000000');
-  addTextBox(slide, cleanText(spec.title), titleRect, {
+  addNeoShadowCard(slide, titleRect, '000000', { shadowX: 0.1, shadowY: 0.1 });
+  addTextBox(slide, upperText(spec.title), titleRect, {
     fontFace: 'Arial Black',
     fontSize: 18,
     bold: true,
@@ -571,44 +655,95 @@ function addNeoReferences(slide: PptxSlide, spec: SlideSpec) {
 
   (spec.items || []).slice(0, 6).forEach((item, index) => {
     const row = withOffset(spec, `reference-item-${index}`, { x: 0.7, y: 1.45 + index * 0.62, w: 5.1, h: 0.45 });
-    addTextBox(slide, `[${index + 1}]`, { x: row.x, y: row.y, w: 0.4, h: row.h }, {
+    const parsed = parseReferenceItem(item.text, index);
+    slide.addShape('rect', {
+      x: row.x,
+      y: row.y,
+      w: row.w,
+      h: row.h,
+      fill: { color: 'FFFFFF', transparency: 30 },
+      line: { color: 'FFFFFF', transparency: 100 },
+    });
+    slide.addShape('line', {
+      x: row.x,
+      y: row.y + row.h,
+      w: row.w,
+      h: 0,
+      line: { color: '000000', width: 2.25 },
+    });
+    addTextBox(slide, upperText(parsed.label), { x: row.x + 0.08, y: row.y + 0.05, w: 1.15, h: 0.14 }, {
       fontFace: 'Arial Black',
-      fontSize: 12,
+      fontSize: 8.5,
       color: 'A000A0',
       bold: true,
     });
-    addTextBox(slide, cleanText(item.text), { x: row.x + 0.45, y: row.y, w: row.w - 0.45, h: row.h }, {
+    addTextBox(slide, parsed.value, { x: row.x + 0.08, y: row.y + 0.17, w: row.w - 0.16, h: row.h - 0.16 }, {
       fontFace: 'Arial',
-      fontSize: 12,
+      fontSize: 12.5,
       color: '000000',
+      bold: true,
+      valign: 'top',
     });
   });
 
   const noteRect = withOffset(spec, 'references-note', { x: 6.4, y: 1.55, w: 2.85, h: 2.0 });
-  addRect(slide, noteRect, 'FFD700', '000000', { line: { color: '000000', width: 2.25 } });
-  addTextBox(slide, 'ADD_NEW_SOURCE', { x: noteRect.x + 0.2, y: noteRect.y + 0.22, w: noteRect.w - 0.4, h: 0.3 }, {
+  addNeoShadowCard(slide, noteRect, 'FFD700', { shadowX: 0.1, shadowY: 0.1 });
+  const noteLabelRect = { x: noteRect.x + 0.24, y: noteRect.y + 0.22, w: 1.55, h: 0.34 };
+  slide.addShape('rect', {
+    x: noteLabelRect.x,
+    y: noteLabelRect.y,
+    w: noteLabelRect.w,
+    h: noteLabelRect.h,
+    rotate: -2,
+    fill: { color: '000000' },
+    line: { color: '000000', width: 2.25 },
+  });
+  addTextBox(slide, 'RAW SOURCES', noteLabelRect, {
     fontFace: 'Arial Black',
     fontSize: 14,
+    color: 'FFFFFF',
+    bold: true,
+    align: 'center',
+    rotate: -2,
+  });
+  addTextBox(slide, 'Reference entries stay editable inline. Use label || title || url if you want a tagged source with a clickable link.', {
+    x: noteRect.x + 0.22,
+    y: noteRect.y + 0.72,
+    w: noteRect.w - 0.44,
+    h: noteRect.h - 0.92,
+  }, {
+    fontFace: 'Arial',
+    fontSize: 10.5,
     color: '000000',
     bold: true,
+    valign: 'top',
   });
 }
 
 function addNeoThankYou(slide: PptxSlide, spec: SlideSpec) {
   addNeoBackground(slide);
-  const labelRect = { x: 1.95, y: 0.7, w: 1.3, h: 0.4 };
-  addRect(slide, labelRect, 'A000A0', '000000', { line: { color: '000000', width: 2.25 } });
+  addNeoDotPattern(slide);
+  const titleRect = withOffset(spec, 'thank-you-title', { x: 2.0, y: 1.05, w: 5.9, h: 2.2 });
+  addNeoShadowCard(slide, titleRect, 'D9FF00', { shadowX: 0.1, shadowY: 0.1 });
+  const labelRect = { x: titleRect.x - 0.42, y: titleRect.y - 0.34, w: 1.25, h: 0.42 };
+  slide.addShape('rect', {
+    x: labelRect.x,
+    y: labelRect.y,
+    w: labelRect.w,
+    h: labelRect.h,
+    rotate: 12,
+    fill: { color: 'A000A0' },
+    line: { color: '000000', width: 2.25 },
+  });
   addTextBox(slide, 'THE_END', labelRect, {
     fontFace: 'Arial Black',
     fontSize: 12,
     color: 'FFFFFF',
     bold: true,
     align: 'center',
+    rotate: 12,
   });
-
-  const titleRect = withOffset(spec, 'thank-you-title', { x: 2.0, y: 1.05, w: 5.9, h: 2.2 });
-  addRect(slide, titleRect, 'D9FF00', '000000', { line: { color: '000000', width: 2.25 } });
-  addTextBox(slide, cleanText(spec.title), titleRect, {
+  addTextBox(slide, upperText(spec.title), titleRect, {
     fontFace: 'Arial Black',
     fontSize: 30,
     bold: true,
@@ -617,7 +752,16 @@ function addNeoThankYou(slide: PptxSlide, spec: SlideSpec) {
     valign: 'middle',
   });
 
-  addTextBox(slide, cleanText(spec.subtitle), withOffset(spec, 'thank-you-subtitle', { x: 2.2, y: 4.05, w: 5.6, h: 0.42 }), {
+  const subtitleRect = withOffset(spec, 'thank-you-subtitle', { x: 2.2, y: 4.05, w: 5.6, h: 0.42 });
+  slide.addShape('rect', {
+    x: subtitleRect.x,
+    y: subtitleRect.y,
+    w: subtitleRect.w,
+    h: subtitleRect.h,
+    fill: { color: 'FFFFFF', transparency: 30 },
+    line: { color: 'FFFFFF', transparency: 100 },
+  });
+  addTextBox(slide, upperText(spec.subtitle), subtitleRect, {
     fontFace: 'Arial',
     fontSize: 13,
     bold: true,
@@ -837,16 +981,17 @@ function addGalerynThankYou(slide: PptxSlide, spec: SlideSpec) {
 
 function addNoisyTitleSubtitle(slide: PptxSlide, spec: SlideSpec) {
   addNoisyBackground(slide);
-  addTextBox(slide, cleanText(spec.title), withOffset(spec, 'title', { x: 0.85, y: 1.1, w: 4.8, h: 0.8 }), {
+  addTextBox(slide, cleanText(spec.title), withOffset(spec, 'title', { x: 0.68, y: 0.52, w: 5.0, h: 1.45 }), {
     fontFace: 'Courier New',
-    fontSize: 28,
+    fontSize: 46,
     bold: true,
     color: 'FFFFFF',
     underline: true,
+    valign: 'top',
   });
-  addTextBox(slide, cleanText(spec.subtitle), withOffset(spec, 'subtitle', { x: 0.95, y: 2.15, w: 5.7, h: 1.8 }), {
+  addTextBox(slide, cleanText(spec.subtitle), withOffset(spec, 'subtitle', { x: 0.88, y: 3.18, w: 7.35, h: 1.05 }), {
     fontFace: 'Courier New',
-    fontSize: 16,
+    fontSize: 19,
     color: 'FFFFFF',
     valign: 'top',
   });
@@ -854,9 +999,9 @@ function addNoisyTitleSubtitle(slide: PptxSlide, spec: SlideSpec) {
 
 function addNoisyAgenda(slide: PptxSlide, spec: SlideSpec) {
   addNoisyBackground(slide);
-  addTextBox(slide, cleanText(spec.title), withOffset(spec, 'agenda-title', { x: 0.85, y: 0.72, w: 2.2, h: 0.6 }), {
+  addTextBox(slide, cleanText(spec.title), withOffset(spec, 'agenda-title', { x: 0.68, y: 0.58, w: 2.35, h: 0.6 }), {
     fontFace: 'Courier New',
-    fontSize: 24,
+    fontSize: 32,
     bold: true,
     color: 'FFFFFF',
     underline: true,
@@ -866,25 +1011,26 @@ function addNoisyAgenda(slide: PptxSlide, spec: SlideSpec) {
     const column = index % 3;
     const row = Math.floor(index / 3);
     const rect = withOffset(spec, `agenda-item-${index}`, {
-      x: 1.0 + column * 2.8,
-      y: 1.65 + row * 2.0,
-      w: 2.0,
-      h: 1.6,
+      x: 0.55 + column * 3.06,
+      y: 1.48 + row * 2.3,
+      w: 2.38,
+      h: 1.95,
     });
-    addTextBox(slide, String(index + 1).padStart(2, '0'), { x: rect.x, y: rect.y, w: rect.w, h: 0.7 }, {
+    addTextBox(slide, String(index + 1).padStart(2, '0'), { x: rect.x, y: rect.y, w: rect.w, h: 0.95 }, {
       fontFace: 'Courier New',
-      fontSize: 34,
+      fontSize: 78,
       bold: true,
       color: 'FFFFFF',
       align: 'center',
+      valign: 'middle',
     });
-    addRect(slide, { x: rect.x + 0.2, y: rect.y + 0.84, w: rect.w - 0.4, h: 0.08 }, 'FF7A59', 'FF7A59');
-    addTextBox(slide, cleanText(item.text), { x: rect.x, y: rect.y + 1.0, w: rect.w, h: 0.42 }, {
+    addRect(slide, { x: rect.x + 0.28, y: rect.y + 1.02, w: rect.w - 0.56, h: 0.1 }, 'FF7A59', 'FF7A59');
+    addTextBox(slide, cleanText(item.text), { x: rect.x, y: rect.y + 1.28, w: rect.w, h: 0.7 }, {
       fontFace: 'Courier New',
-      fontSize: 13,
+      fontSize: 23,
       color: 'FFFFFF',
       align: 'center',
-      valign: 'middle',
+      valign: 'top',
     });
   });
 }
@@ -919,16 +1065,16 @@ function addNoisyThreeColumns(slide: PptxSlide, spec: SlideSpec) {
 
 function addNoisyTitleAndText(slide: PptxSlide, spec: SlideSpec) {
   slide.background = { color: 'FFFFFF' };
-  addTextBox(slide, cleanText(spec.title), withOffset(spec, 'title-and-text-title', { x: 0.85, y: 0.75, w: 4.5, h: 0.55 }), {
+  addTextBox(slide, cleanText(spec.title), withOffset(spec, 'title-and-text-title', { x: 0.95, y: 0.72, w: 5.2, h: 0.68 }), {
     fontFace: 'Courier New',
-    fontSize: 22,
+    fontSize: 39,
     bold: true,
     color: '547BEE',
     underline: true,
   });
-  addTextBox(slide, bodyToParagraph(spec.body), withOffset(spec, 'title-and-text-body-0', { x: 0.9, y: 1.7, w: 8.1, h: 2.5 }), {
+  addTextBox(slide, bodyToParagraph(spec.body), withOffset(spec, 'title-and-text-body-0', { x: 1.02, y: 1.72, w: 7.95, h: 2.25 }), {
     fontFace: 'Courier New',
-    fontSize: 16,
+    fontSize: 24,
     color: '1F2937',
     valign: 'top',
   });
@@ -936,18 +1082,18 @@ function addNoisyTitleAndText(slide: PptxSlide, spec: SlideSpec) {
 
 async function addNoisyImageAndText(slide: PptxSlide, spec: SlideSpec) {
   addNoisyBackground(slide, 'F2725C');
-  addTextBox(slide, cleanText(spec.title), withOffset(spec, 'image-title', { x: 0.8, y: 0.75, w: 4.0, h: 0.55 }), {
+  addTextBox(slide, cleanText(spec.title), withOffset(spec, 'image-title', { x: 0.72, y: 0.62, w: 4.2, h: 0.62 }), {
     fontFace: 'Courier New',
-    fontSize: 22,
+    fontSize: 39,
     bold: true,
     color: 'FFFFFF',
     underline: true,
   });
 
-  await addImage(slide, spec.imageUrl, withOffset(spec, 'image-card', { x: 0.9, y: 1.6, w: 4.1, h: 2.7 }));
-  addTextBox(slide, bodyToParagraph(spec.body), withOffset(spec, 'image-body', { x: 5.45, y: 1.65, w: 3.45, h: 2.25 }), {
+  await addImage(slide, spec.imageUrl, withOffset(spec, 'image-card', { x: 0.95, y: 1.48, w: 3.92, h: 2.48 }));
+  addTextBox(slide, bodyToParagraph(spec.body), withOffset(spec, 'image-body', { x: 5.55, y: 1.82, w: 3.05, h: 2.0 }), {
     fontFace: 'Courier New',
-    fontSize: 14,
+    fontSize: 22,
     color: 'FFFFFF',
     valign: 'top',
   });
@@ -975,17 +1121,17 @@ function addNoisyReferences(slide: PptxSlide, spec: SlideSpec) {
 
 function addNoisyThankYou(slide: PptxSlide, spec: SlideSpec) {
   addNoisyBackground(slide);
-  addTextBox(slide, cleanText(spec.title), withOffset(spec, 'thank-you-title', { x: 2.1, y: 1.95, w: 5.8, h: 0.9 }), {
+  addTextBox(slide, cleanText(spec.title), withOffset(spec, 'thank-you-title', { x: 1.8, y: 1.72, w: 6.4, h: 0.95 }), {
     fontFace: 'Courier New',
-    fontSize: 30,
+    fontSize: 63,
     bold: true,
     color: 'FFFFFF',
     align: 'center',
     valign: 'middle',
   });
-  addTextBox(slide, cleanText(spec.subtitle), withOffset(spec, 'thank-you-subtitle', { x: 2.8, y: 3.0, w: 4.4, h: 0.35 }), {
+  addTextBox(slide, cleanText(spec.subtitle), withOffset(spec, 'thank-you-subtitle', { x: 3.0, y: 3.02, w: 4.0, h: 0.42 }), {
     fontFace: 'Courier New',
-    fontSize: 15,
+    fontSize: 27,
     color: 'FFFFFF',
     align: 'center',
   });

lib/gemini-client.ts

@@ -1,150 +0,0 @@
-/**
- * Google Gemini Client
- *
- * Wraps the `@google/generative-ai` SDK and exposes three high-level helpers
- * used by the presentation generation pipeline:
- *
- *  1. `generateSlideContent` — runs the full JSON-generating prompt and returns
- *     the raw model output (expected to be valid JSON).
- *  2. `generateSlideTitle`   — derives a short title from existing slide content.
- *  3. `generateOutline`      — produces a 3-5 item section outline for a topic.
- *
- * The client defaults to `gemini-2.0-flash-exp` which is the fastest model in
- * the Gemini 2 family and supports JSON-constrained output via `responseMimeType`.
- */
-
-import { GoogleGenerativeAI } from '@google/generative-ai';
-
-/** Optional configuration for {@link GeminiClient}. All fields are optional. */
-export interface GeminiClientConfig {
-  /**
-   * Google AI API key.  When omitted, the client falls back to the
-   * `NEXT_PUBLIC_GEMINI_API_KEY` environment variable and finally to a
-   * hard-coded demo key (suitable for development only).
-   */
-  apiKey?: string;
-}
-
-/**
- * Thin wrapper around the Google Generative AI SDK scoped to Gemini models.
- *
- * @example
- * const gemini = new GeminiClient();
- * const json = await gemini.generateSlideContent(myPrompt);
- */
-export class GeminiClient {
-  /** SDK root object that manages authentication and model lookup. */
-  private genAI: GoogleGenerativeAI;
-  /** Pre-configured model instance (gemini-2.0-flash-exp by default). */
-  private model: ReturnType<GoogleGenerativeAI['getGenerativeModel']>;
-
-  /**
-   * Instantiates the client and resolves the API key from (in priority order):
-   * 1. `config.apiKey` — explicitly passed by the caller
-   * 2. `NEXT_PUBLIC_GEMINI_API_KEY` environment variable
-   * 3. Hard-coded demo key (development fallback — should not reach production)
-   *
-   * @param config - Optional configuration; all fields have defaults.
-   */
-  constructor(config: GeminiClientConfig = {}) {
-    // Resolve API key with fallback chain
-    const apiKey = config.apiKey || process.env.NEXT_PUBLIC_GEMINI_API_KEY || 'AIzaSyCfv-5BPXsihzyp-dn4oe5SBBvF1MDd-sE';
-
-    // Initialise the root SDK object with the resolved key
-    this.genAI = new GoogleGenerativeAI(apiKey);
-
-    // Obtain a model instance for gemini-2.0-flash-exp (fast + JSON output)
-    this.model = this.genAI.getGenerativeModel({ model: 'gemini-2.0-flash-exp' }); // Using Gemini 2.0 Flash
-  }
-
-  /**
-   * Generates structured presentation slide content from a fully constructed
-   * prompt (which already includes JSON schema instructions from the orchestrator).
-   *
-   * The response is constrained to `application/json` via `responseMimeType`,
-   * which reduces post-processing and parsing errors.
-   *
-   * @param prompt - The complete generation prompt (system + user combined).
-   * @returns Raw JSON string from the model; falls back to `"{}"` on empty responses.
-   * @throws Error when the Gemini API call itself fails (network, quota, etc.).
-   */
-  async generateSlideContent(prompt: string): Promise<string> {
-    try {
-      // The prompt already contains the JSON schema instructions from orchestrator
-      const result = await this.model.generateContent({
-        contents: [{
-          role: 'user',          // Gemini uses a single user turn for generation
-          parts: [{ text: prompt }]
-        }],
-        generationConfig: {
-          temperature: 0.4,              // Low temperature → consistent, structured output
-          topK: 1,                       // Only consider the single most-likely token
-          topP: 1,                       // No nucleus sampling cutoff
-          maxOutputTokens: 4096,         // Allow long presentations without truncation
-          responseMimeType: 'application/json'  // Force JSON-only output
-        }
-      });
-
-      // Extract the text content from the response object
-      const response = await result.response;
-      // Return the text or an empty object string as a safe default
-      return response.text() || '{}';
-    } catch (error) {
-      console.error('Error generating slide content with Gemini:', error);
-      throw new Error('Failed to generate slide content');
-    }
-  }
-
-  /**
-   * Derives a concise, compelling title for a single slide given its body content.
-   *
-   * This method uses the more lenient `generateContent` overload (plain string)
-   * since title generation does not require JSON output mode.
-   *
-   * @param content - The body text of the slide to title.
-   * @returns A short title string, or `"Untitled Slide"` on failure.
-   */
-  async generateSlideTitle(content: string): Promise<string> {
-    try {
-      // Build a tightly-scoped prompt asking for just the title
-      const prompt = `Generate a concise, compelling title for a presentation slide based on this content: "${content}". Return only the title, nothing else.`;
-
-      const result = await this.model.generateContent(prompt);
-      const response = await result.response;
-      // Return the model's title or a safe fallback string
-      return response.text() || 'Untitled Slide';
-    } catch (error) {
-      console.error('Error generating slide title with Gemini:', error);
-      // Non-fatal — caller can proceed with a placeholder title
-      return 'Untitled Slide';
-    }
-  }
-
-  /**
-   * Generates a high-level presentation outline (section headings) for a topic.
-   *
-   * The output is split on newlines and trimmed so the caller receives a clean
-   * string array.  At most 5 items are returned regardless of model output length.
-   *
-   * @param topic - The subject matter of the presentation (e.g. "Quantum Computing").
-   * @returns An array of 3-5 section title strings.
-   *          Falls back to a generic four-section outline on error.
-   */
-  async generateOutline(topic: string): Promise<string[]> {
-    try {
-      // Ask for numbered section headings only — no bullets, no body text
-      const prompt = `Create a presentation outline for: "${topic}". Provide 3-5 main sections/slides. Return only the section titles, one per line, without numbers or bullets.`;
-
-      const result = await this.model.generateContent(prompt);
-      const response = await result.response;
-      const outline = response.text() || '';
-
-      // Split by newline, discard blank lines, and cap at 5 sections
-      return outline.split('\n').filter(line => line.trim()).slice(0, 5);
-    } catch (error) {
-      console.error('Error generating outline with Gemini:', error);
-      // Return a minimal generic outline so callers never receive an empty array
-      return ['Introduction', 'Main Topic', 'Key Points', 'Conclusion'];
-    }
-  }
-}

lib/hf-client.ts

@@ -1,4 +1,5 @@
 import { InferenceClient } from "@huggingface/inference";
+import { LLAMA_PRESENTATION_MODEL } from "./ai-models";
 
 export interface HFClientConfig {
   apiKey: string;
@@ -33,20 +34,10 @@ export class HFGenerationError extends Error {
 }
 
 const conversationalModels: ConversationalModels = {
-  "meta-llama/Llama-3.3-70B-Instruct:together": {
+  [LLAMA_PRESENTATION_MODEL]: {
     "_id": "llama-33-70b-instruct",
     "status": "live",
-    "providerId": "meta-llama/Llama-3.3-70B-Instruct:together"
-  },
-  "deepseek-ai/DeepSeek-V3.1": {
-    "_id": "68a6d8bf70c5a6b780992d91",
-    "status": "live",
-    "providerId": "accounts/fireworks/models/deepseek-v3p1"
-  },
-  "meta-llama/Llama-4-Maverick-17B-128E-Instruct": {
-    "_id": "67f3f65fc8b8113ab3f7daad",
-    "status": "live",
-    "providerId": "accounts/fireworks/models/llama4-maverick-instruct-basic"
+    "providerId": LLAMA_PRESENTATION_MODEL
   },
 };
 
@@ -56,7 +47,7 @@ export class HFClient {
 
   constructor(config: HFClientConfig) {
     this.client = new InferenceClient(config.apiKey);
-    this.defaultModel = config.model || "meta-llama/Llama-3.3-70B-Instruct:together";
+    this.defaultModel = config.model || LLAMA_PRESENTATION_MODEL;
   }
 
   static getAvailableModels(): string[] {
@@ -162,5 +153,5 @@ export class HFClient {
 }
 
 export const availableModels = [
-  { name: 'Llama-3.3-70B', value: 'meta-llama/Llama-3.3-70B-Instruct:together', type: 'paid', provider: 'together' },
+  { name: 'Llama-3.3-70B', value: LLAMA_PRESENTATION_MODEL, type: 'paid', provider: 'together' },
 ];

lib/orchestrator.ts

@@ -2,53 +2,26 @@
  * Presentation Generation Orchestrator
  *
  * This module is the single entry-point for AI-powered presentation generation.
- * It accepts a {@link GenerationRequest} and routes it to the correct AI backend:
- *
- *  - `"openai"` → OpenAI Chat Completions API (requires `OPENAI_API_KEY`)
- *  - `"gemini"` → Google Gemini via {@link GeminiClient} (free tier available)
- *  - `"hf"`     → Hugging Face Inference (Fireworks AI router) via {@link HFClient}
+ * It uses the approved Hugging Face Llama 3.3 70B model for generation.
  *
  * After content is generated the orchestrator enriches slides that carry image
  * keyword hints by fetching real photos from Unsplash.
  *
- * The function always returns a {@link PresentationJSON} — if the model
+ * The function always returns a {@link PresentationJSON}. If the model
  * produces unparseable output the result defaults to `{ theme: "dark", slides: [] }`.
  */
 
-import OpenAI from 'openai';
-import { GeminiClient } from './gemini-client';
 import { HFClient } from './hf-client';
 import { searchUnsplash } from './unsplash';
 import { buildSlidePrompt, normalizeLayout } from './slide-prompt';
+import { LLAMA_PRESENTATION_MODEL } from './ai-models';
 
-// ---------------------------------------------------------------------------
-// Public Types
-// ---------------------------------------------------------------------------
+export type Provider = 'hf';
 
-/**
- * AI provider to use for generation.
- * - `"openai"` — OpenAI GPT models
- * - `"gemini"` — Google Gemini models
- * - `"hf"`     — Hugging Face / Fireworks AI models
- */
-export type Provider = 'openai' | 'gemini' | 'hf';
-
-/** Parameters for a single generation call. */
 export interface GenerationRequest {
-  /** Natural-language description of the desired presentation. */
   prompt: string;
-  /** Which AI backend to use for generation. */
   provider: Provider;
-  /**
-   * Optional model identifier.  When omitted a sensible default is chosen
-   * per-provider (e.g. `gpt-4o-mini` for OpenAI, `gemini-2.0-flash-exp` for Gemini).
-   */
   model?: string;
-  /**
-   * Optional uploaded PowerPoint template metadata passed from the
-   * upload-template endpoint.  Not used directly in generation but available
-   * for future template-aware prompt engineering.
-   */
   templateContext?: {
     fileName: string;
     fileSize: number;
@@ -57,17 +30,6 @@ export interface GenerationRequest {
   };
 }
 
-/**
- * A single slide within the generated presentation.
- *
- * Layout values use the new LayoutType system:
- *  - `"title_subtitle"` → Opening title slide
- *  - `"agenda"`         → Table of contents
- *  - `"title_and_text"` → Text-heavy content
- *  - `"image_and_text"` → Content with image
- *  - `"references"`     → Citations
- *  - `"thank_you"`      → Closing slide
- */
 export interface SlideJSON {
   id: string;
   layout: string;
@@ -84,85 +46,37 @@ export interface SlideJSON {
   imageKeyword?: string;
 }
 
-/** Top-level presentation object returned to API consumers. */
 export interface PresentationJSON {
   theme: string;
   presentationName?: string;
   slides: SlideJSON[];
 }
 
-// ---------------------------------------------------------------------------
-// System Prompt — built dynamically per-request via buildSlidePrompt()
-// ---------------------------------------------------------------------------
-
-// ---------------------------------------------------------------------------
-// Main Entry Point
-// ---------------------------------------------------------------------------
-
-/**
- * Generates a complete presentation JSON object using the specified AI provider.
- *
- * The function:
- * 1. Constructs the full prompt for the chosen provider.
- * 2. Calls the provider's API and captures the raw text response.
- * 3. Attempts to `JSON.parse` the raw text; falls back to an empty presentation
- *    if parsing fails.
- * 4. Iterates over slides that carry image keywords and replaces them with real
- *    Unsplash photo URLs (up to 3 results per slide).
- *
- * @param req - Generation parameters including prompt, provider, and optional model.
- * @returns A fully-populated {@link PresentationJSON} with Unsplash images injected.
- * @throws Error when `provider === "hf"` and no HF API key is available.
- */
 export async function generatePresentation(req: GenerationRequest): Promise<PresentationJSON> {
-  const userPrompt = req.prompt;
-  const slidePrompt = buildSlidePrompt(userPrompt);
-  let raw: string = '';
-
-  if (req.provider === 'openai') {
-    const client = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });
-
-    const chat = await client.chat.completions.create({
-      model: req.model || 'gpt-4o-mini',
-      temperature: 0.5,
-      messages: [
-        { role: 'system', content: slidePrompt },
-        { role: 'user', content: `Create a professional presentation about: ${userPrompt}` },
-      ],
-      response_format: { type: 'json_object' },
-    });
-
-    raw = chat.choices[0]?.message?.content || '{}';
-
-  } else if (req.provider === 'gemini') {
-    const gemini = new GeminiClient();
-    raw = await gemini.generateSlideContent(slidePrompt);
-
-  } else if (req.provider === 'hf') {
-    const hfApiKey = process.env.HF_API_KEY || process.env.NEXT_PUBLIC_HF_API_KEY;
-
-    if (!hfApiKey) {
-      throw new Error('HF Pro API key required for paid models');
-    }
+  const slidePrompt = buildSlidePrompt(req.prompt);
+  const hfApiKey = process.env.HF_API_KEY || process.env.NEXT_PUBLIC_HF_API_KEY;
 
-    const hf = new HFClient({
-      apiKey: hfApiKey,
-      model: req.model || 'deepseek-ai/DeepSeek-V3.1'
-    });
+  if (!hfApiKey) {
+    throw new Error('HF Pro API key required for Llama 3.3 70B generation');
+  }
 
-    if (req.model && !HFClient.isModelAvailable(req.model)) {
-      console.warn(`Model ${req.model} is not in the predefined list, using anyway`);
-    }
+  if (req.provider && req.provider !== 'hf') {
+    console.warn(`Ignoring unsupported provider "${req.provider}" and forcing hf.`);
+  }
 
-    raw = await hf.generateSlideContent(slidePrompt, req.model || 'deepseek-ai/DeepSeek-V3.1');
+  if (req.model && req.model !== LLAMA_PRESENTATION_MODEL) {
+    console.warn(`Ignoring unsupported presentation model "${req.model}" and forcing ${LLAMA_PRESENTATION_MODEL}.`);
   }
 
-  // Parse the raw model output
+  const raw = await new HFClient({
+    apiKey: hfApiKey,
+    model: LLAMA_PRESENTATION_MODEL,
+  }).generateSlideContent(slidePrompt, LLAMA_PRESENTATION_MODEL);
+
   let parsed: PresentationJSON;
 
   try {
     const rawParsed = JSON.parse(raw);
-    // Handle both new format { presentationName, slides } and old format { theme, slides }
     parsed = {
       theme: rawParsed.theme || 'professional',
       presentationName: rawParsed.presentationName,
@@ -180,11 +94,11 @@ export async function generatePresentation(req: GenerationRequest): Promise<Pres
       body: slide.body,
       columns: Array.isArray(slide.columns)
         ? slide.columns
-          .filter((column: any) => column && typeof column === 'object')
-          .map((column: any, columnIndex: number) => ({
-            heading: String(column.heading || `Column ${columnIndex + 1}`),
-            text: String(column.text || ''),
-          }))
+            .filter((column: any) => column && typeof column === 'object')
+            .map((column: any, columnIndex: number) => ({
+              heading: String(column.heading || `Column ${columnIndex + 1}`),
+              text: String(column.text || ''),
+            }))
         : undefined,
       chart: slide.chart,
       images: slide.images,
@@ -194,17 +108,14 @@ export async function generatePresentation(req: GenerationRequest): Promise<Pres
     parsed = { theme: 'dark', slides: [] };
   }
 
-  // Enrich slides with real Unsplash images
   for (const slide of parsed.slides) {
-    // Try imageKeyword first (new format), then images array (old format)
     const keyword = slide.imageKeyword || (slide.images && slide.images.length ? slide.images[0] : '');
     if (keyword && slide.layout === 'image_and_text') {
       const results = await searchUnsplash(keyword, 3);
-      slide.images = results.map(r => r.urls.regular);
+      slide.images = results.map((result) => result.urls.regular);
     } else if (slide.images && slide.images.length) {
-      const first = slide.images[0];
-      const results = await searchUnsplash(first, 3);
-      slide.images = results.map(r => r.urls.regular);
+      const results = await searchUnsplash(slide.images[0], 3);
+      slide.images = results.map((result) => result.urls.regular);
     }
   }
 

lib/slide-prompt.ts

@@ -29,14 +29,20 @@ export interface GeneratedSlide {
  * @param topic - The user's presentation topic
  */
 export function buildSlidePrompt(topic: string): string {
-  return `You are an expert presentation designer. Create a professional, engaging presentation about: "${topic}"
+  return `You are an expert presentation strategist and slide designer. Your job is to read the user's prompt, infer the likely audience and intent, and turn it into a polished presentation with specific, useful, presentation-ready content.
+
+USER PROMPT:
+"${topic}"
 
 INSTRUCTIONS:
-1. Generate 8-10 slides with detailed, topic-specific content
-2. The first slide title should relate to the topic (NOT "Reuben AI")
-3. All content must be specific and avoid generic placeholders
-4. For "title_and_text" and "image_and_text" slides, write one short paragraph of 30-55 words
-5. Generate relevant imageKeyword for Unsplash (2-4 descriptive terms)
+1. Understand the user prompt before writing anything. Infer the topic, purpose, audience, and tone from the prompt itself.
+2. Generate 8-10 slides with detailed, topic-specific content that feels intentional and professionally written.
+3. The first slide title should clearly relate to the topic (NOT "Reuben AI").
+4. All content must be specific, concrete, and useful. Do not use generic filler, vague business jargon, or placeholder phrasing.
+5. For "title_and_text" and "image_and_text" slides, write one short paragraph of 30-55 words that sounds natural when spoken in a presentation.
+6. Generate relevant imageKeyword for Unsplash using 2-4 descriptive terms.
+7. If the user prompt implies a place, industry, audience, or timeframe, reflect that in the content.
+8. Prefer strong slide titles, clean logic, and audience-friendly wording over flashy but empty language.
 
 OUTPUT FORMAT - Return ONLY valid JSON matching this exact structure:
 {
@@ -110,6 +116,8 @@ CONTENT RULES:
 - "title_and_text" and "image_and_text" should use a single string paragraph, not an array
 - "three_columns" should use a "columns" array with exactly 3 objects, each containing "heading" and "text"
 - Keep paragraphs compact and presentation-friendly, not essay-length
+- Make every slide feel like it belongs to the same presentation, not a random collection of facts
+- Write like a strong human presentation writer, not a template generator
 - Do NOT add a trailing references slide before "thank_you" unless the user explicitly asks for one
 
 VALIDATION: