Add community templates feature with tabs in Models page - includes predefined templates and like functionality

frontend/package-lock.json

@@ -15,6 +15,7 @@
         "@radix-ui/react-slider": "^1.3.6",
         "@radix-ui/react-slot": "^1.2.3",
         "@radix-ui/react-switch": "^1.2.6",
+        "@radix-ui/react-tabs": "^1.1.13",
         "@tailwindcss/typography": "^0.5.16",
         "ai": "^5.0.27",
         "class-variance-authority": "^0.7.1",
@@ -1320,6 +1321,37 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-roving-focus": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.11.tgz",
+      "integrity": "sha512-7A6S9jSgm/S+7MdtNDSb+IU859vQqJ/QAtcYQcfFC6W8RS4IxIZDldLR0xqCFZ6DCyrQLjLPsxtTNch5jVA4lA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-select": {
       "version": "2.2.6",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.2.6.tgz",
@@ -1443,6 +1475,36 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-tabs": {
+      "version": "1.1.13",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.1.13.tgz",
+      "integrity": "sha512-7xdcatg7/U+7+Udyoj2zodtI9H/IIopqo+YOIcZOq1nJwXWBZ9p8xiu5llXlekDbZkca79a/fozEYQXIA4sW6A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-roving-focus": "1.1.11",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-use-callback-ref": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.1.tgz",

frontend/package.json

@@ -17,6 +17,7 @@
     "@radix-ui/react-slider": "^1.3.6",
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-tabs": "^1.1.13",
     "@tailwindcss/typography": "^0.5.16",
     "ai": "^5.0.27",
     "class-variance-authority": "^0.7.1",

frontend/src/components/ui/tabs.tsx

@@ -0,0 +1,53 @@
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "@/lib/utils"
+
+const Tabs = TabsPrimitive.Root
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    )}
+    {...props}
+  />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }

frontend/src/pages/Models.tsx

@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react'
 import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card'
 import { Button } from '@/components/ui/button'
 import { Badge } from '@/components/ui/badge'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import { 
   BookOpen, 
   Brain, 
@@ -14,7 +15,12 @@ import {
   Cloud,
   HardDrive,
   Bot,
-  MessageSquare
+  MessageSquare,
+  Users,
+  Star,
+  Heart,
+  Share,
+  Copy
 } from 'lucide-react'
 
 interface ModelInfo {
@@ -32,15 +38,122 @@ interface ModelsResponse {
   current_model: string
 }
 
+// Community template interface
+interface CommunityTemplate {
+  id: string
+  name: string
+  description: string
+  author: string
+  category: string
+  tags: string[]
+  model: string
+  systemPrompt: string
+  temperature: number
+  maxTokens: number
+  likes: number
+  downloads: number
+  isOfficial: boolean
+  createdAt: string
+}
+
+// Get predefined community templates
+function getCommunityTemplates(): CommunityTemplate[] {
+  return [
+    {
+      id: 'code-reviewer',
+      name: 'Code Review Expert',
+      description: 'Professional code reviewer that provides detailed analysis, suggests improvements, and identifies potential issues.',
+      author: 'EdgeLLM Team',
+      category: 'coding',
+      tags: ['code review', 'programming', 'best practices'],
+      model: 'Qwen/Qwen3-30B-A3B',
+      systemPrompt: 'You are a senior software engineer specializing in code review. Analyze the provided code for:\n\n1. **Code Quality**: Structure, readability, maintainability\n2. **Best Practices**: Following language conventions and patterns\n3. **Performance**: Potential optimizations and bottlenecks\n4. **Security**: Common vulnerabilities and security issues\n5. **Testing**: Testability and edge cases\n\nProvide constructive feedback with specific examples and actionable suggestions.',
+      temperature: 0.3,
+      maxTokens: 1500,
+      likes: 245,
+      downloads: 1200,
+      isOfficial: true,
+      createdAt: '2024-01-15'
+    },
+    {
+      id: 'writing-tutor',
+      name: 'Academic Writing Tutor',
+      description: 'Helps improve academic writing with structure suggestions, grammar corrections, and clarity enhancements.',
+      author: 'Academic Guild',
+      category: 'writing',
+      tags: ['academic writing', 'essay', 'research'],
+      model: 'Qwen/Qwen3-30B-A3B',
+      systemPrompt: 'You are an experienced academic writing tutor. Help users improve their writing by:\n\n1. **Structure & Organization**: Clear thesis, logical flow, proper transitions\n2. **Clarity & Precision**: Eliminate ambiguity, improve word choice\n3. **Academic Style**: Formal tone, appropriate citations, scholarly voice\n4. **Grammar & Mechanics**: Correct errors, improve sentence variety\n5. **Argument Development**: Strengthen evidence, address counterarguments\n\nProvide specific feedback with examples and rewrite suggestions where helpful.',
+      temperature: 0.4,
+      maxTokens: 1200,
+      likes: 189,
+      downloads: 856,
+      isOfficial: false,
+      createdAt: '2024-01-20'
+    },
+    {
+      id: 'data-analyst',
+      name: 'Data Analysis Assistant',
+      description: 'Helps analyze data, create visualizations, and explain statistical concepts in simple terms.',
+      author: 'DataPro',
+      category: 'analysis',
+      tags: ['data science', 'statistics', 'visualization'],
+      model: 'Qwen/Qwen3-30B-A3B',
+      systemPrompt: 'You are a data analysis expert. Help users understand and analyze data by:\n\n1. **Data Exploration**: Identify patterns, outliers, relationships\n2. **Statistical Analysis**: Apply appropriate tests, interpret results\n3. **Visualization**: Suggest effective charts and graphs\n4. **Insights**: Draw meaningful conclusions from data\n5. **Communication**: Explain complex concepts simply\n\nProvide step-by-step analysis and practical recommendations.',
+      temperature: 0.2,
+      maxTokens: 1000,
+      likes: 156,
+      downloads: 643,
+      isOfficial: false,
+      createdAt: '2024-01-25'
+    },
+    {
+      id: 'creative-writer',
+      name: 'Creative Writing Coach',
+      description: 'Inspires creativity and helps develop compelling stories, characters, and narrative techniques.',
+      author: 'StoryMaster',
+      category: 'creative',
+      tags: ['creative writing', 'storytelling', 'fiction'],
+      model: 'Qwen/Qwen3-30B-A3B',
+      systemPrompt: 'You are a creative writing coach with expertise in storytelling. Help writers by:\n\n1. **Story Development**: Plot structure, pacing, conflict resolution\n2. **Character Creation**: Compelling personalities, realistic dialogue, character arcs\n3. **World Building**: Consistent settings, atmosphere, details\n4. **Writing Techniques**: Show vs tell, point of view, voice\n5. **Inspiration**: Creative prompts, overcoming writer\'s block\n\nProvide encouraging feedback and concrete suggestions to enhance creativity.',
+      temperature: 0.8,
+      maxTokens: 1200,
+      likes: 312,
+      downloads: 987,
+      isOfficial: false,
+      createdAt: '2024-01-30'
+    },
+    {
+      id: 'interview-prep',
+      name: 'Interview Preparation Coach',
+      description: 'Helps prepare for job interviews with practice questions, answer strategies, and confidence building.',
+      author: 'CareerBoost',
+      category: 'career',
+      tags: ['interview', 'job search', 'career'],
+      model: 'Qwen/Qwen3-30B-A3B',
+      systemPrompt: 'You are a professional career coach specializing in interview preparation. Help candidates by:\n\n1. **Question Practice**: Common and behavioral interview questions\n2. **Answer Framework**: STAR method, structured responses\n3. **Company Research**: Industry insights, company-specific preparation\n4. **Confidence Building**: Reducing anxiety, improving presentation\n5. **Follow-up**: Thank you notes, next steps\n\nProvide personalized advice and realistic practice scenarios.',
+      temperature: 0.5,
+      maxTokens: 1000,
+      likes: 278,
+      downloads: 1456,
+      isOfficial: true,
+      createdAt: '2024-02-05'
+    }
+  ]
+}
+
 export function Models() {
   const [models, setModels] = useState<ModelInfo[]>([])
   const [loading, setLoading] = useState(true)
   const [modelLoading, setModelLoading] = useState<string | null>(null)
   const [savedAssistants, setSavedAssistants] = useState<any[]>([])
+  const [communityTemplates] = useState<CommunityTemplate[]>(getCommunityTemplates())
+  const [likedTemplates, setLikedTemplates] = useState<string[]>([])
 
   useEffect(() => {
     fetchModels()
     loadSavedAssistants()
+    loadLikedTemplates()
   }, [])
 
   const loadSavedAssistants = () => {
@@ -66,6 +179,44 @@ export function Models() {
     localStorage.setItem('savedAssistants', JSON.stringify(updatedAssistants))
   }
 
+  const loadLikedTemplates = () => {
+    try {
+      const liked = JSON.parse(localStorage.getItem('likedTemplates') || '[]')
+      setLikedTemplates(liked)
+    } catch (error) {
+      console.error('Failed to load liked templates:', error)
+    }
+  }
+
+  const toggleLikeTemplate = (templateId: string) => {
+    const updatedLiked = likedTemplates.includes(templateId)
+      ? likedTemplates.filter(id => id !== templateId)
+      : [...likedTemplates, templateId]
+    
+    setLikedTemplates(updatedLiked)
+    localStorage.setItem('likedTemplates', JSON.stringify(updatedLiked))
+  }
+
+  const useTemplate = (template: CommunityTemplate) => {
+    const assistantConfig = {
+      name: template.name,
+      description: template.description,
+      model: template.model,
+      systemPrompt: template.systemPrompt,
+      temperature: template.temperature,
+      maxTokens: template.maxTokens
+    }
+    
+    localStorage.setItem('loadAssistantConfig', JSON.stringify(assistantConfig))
+    window.location.href = '/playground'
+  }
+
+  const shareMyAssistant = (assistant: any) => {
+    // In a real implementation, this would submit to a backend
+    // For now, we'll just show a success message
+    alert(`"${assistant.name}" has been shared to the community! (This is a demo - in production, it would be submitted for review.)`)
+  }
+
   const fetchModels = async () => {
     try {
       const baseUrl = `${window.location.protocol}//${window.location.host}`
@@ -154,71 +305,109 @@ export function Models() {
       </div>
 
       <div className="flex-1 p-6">
-        <div className="max-w-4xl mx-auto space-y-6">
+        <div className="max-w-6xl mx-auto">
           
           {/* Info Card */}
-          <Card className="bg-blue-50 border-blue-200">
+          <Card className="bg-blue-50 border-blue-200 mb-6">
             <CardContent className="pt-6">
               <div className="flex items-start gap-3">
                 <Info className="h-5 w-5 text-blue-600 mt-0.5" />
                 <div>
-                  <h3 className="font-medium text-blue-900">Model Management</h3>
+                  <h3 className="font-medium text-blue-900">Assistant Library</h3>
                   <p className="text-sm text-blue-700 mt-1">
-                    Load models to use them in the playground. Models are cached locally for faster access.
-                    Each model requires significant storage space and initial download time.
+                    Manage your custom assistants and discover community templates. Create specialized AI helpers for different tasks and workflows.
                   </p>
                 </div>
               </div>
             </CardContent>
           </Card>
 
-          {/* Custom Assistants */}
-          {savedAssistants.length > 0 && (
-            <div>
-              <h2 className="text-xl font-semibold mb-4 flex items-center gap-2">
-                <Bot className="h-5 w-5" />
-                My Custom Assistants
-              </h2>
+          {/* Tabs */}
+          <Tabs defaultValue="my-assistants" className="space-y-6">
+            <TabsList className="grid w-full grid-cols-4">
+              <TabsTrigger value="my-assistants" className="flex items-center gap-2">
+                <Bot className="h-4 w-4" />
+                My Assistants
+              </TabsTrigger>
+              <TabsTrigger value="community" className="flex items-center gap-2">
+                <Users className="h-4 w-4" />
+                Community
+              </TabsTrigger>
+              <TabsTrigger value="featured" className="flex items-center gap-2">
+                <Star className="h-4 w-4" />
+                Featured
+              </TabsTrigger>
+              <TabsTrigger value="models" className="flex items-center gap-2">
+                <Brain className="h-4 w-4" />
+                Models
+              </TabsTrigger>
+            </TabsList>
+
+            {/* My Assistants Tab */}
+            <TabsContent value="my-assistants" className="space-y-6">
+              {savedAssistants.length > 0 ? (
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                  {savedAssistants.map((assistant) => (
+                    <AssistantCard 
+                      key={assistant.id}
+                      assistant={assistant}
+                      onUse={() => loadAssistant(assistant)}
+                      onDelete={() => deleteAssistant(assistant.id)}
+                      onShare={() => shareMyAssistant(assistant)}
+                      type="personal"
+                    />
+                  ))}
+                </div>
+              ) : (
+                <Card className="text-center p-8">
+                  <Bot className="h-12 w-12 mx-auto text-muted-foreground mb-4" />
+                  <h3 className="text-lg font-medium mb-2">No assistants yet</h3>
+                  <p className="text-muted-foreground mb-4">
+                    Create your first assistant by configuring parameters in the Playground and saving it.
+                  </p>
+                  <Button onClick={() => window.location.href = '/playground'}>
+                    Go to Playground
+                  </Button>
+                </Card>
+              )}
+            </TabsContent>
+
+            {/* Community Templates Tab */}
+            <TabsContent value="community" className="space-y-6">
               <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-                {savedAssistants.map((assistant) => (
-                  <Card key={assistant.id} className="hover:shadow-md transition-shadow">
-                    <CardHeader className="pb-3">
-                      <div className="flex items-start justify-between">
-                        <div className="flex-1">
-                          <CardTitle className="text-base">{assistant.name}</CardTitle>
-                          <p className="text-sm text-muted-foreground mt-1">
-                            {assistant.description || 'No description'}
-                          </p>
-                        </div>
-                        <Button
-                          variant="ghost"
-                          size="sm"
-                          onClick={() => deleteAssistant(assistant.id)}
-                          className="text-destructive hover:text-destructive"
-                        >
-                          <Trash2 className="h-4 w-4" />
-                        </Button>
-                      </div>
-                    </CardHeader>
-                    <CardContent className="space-y-3">
-                      <div className="text-xs space-y-1 text-muted-foreground">
-                        <div><span className="font-medium">Model:</span> {assistant.model}</div>
-                        <div><span className="font-medium">Temperature:</span> {assistant.temperature}</div>
-                        <div><span className="font-medium">Max Tokens:</span> {assistant.maxTokens}</div>
-                        <div><span className="font-medium">Created:</span> {new Date(assistant.createdAt).toLocaleDateString()}</div>
-                      </div>
-                      <div className="flex gap-2">
-                        <Button size="sm" onClick={() => loadAssistant(assistant)} className="flex-1">
-                          <MessageSquare className="h-4 w-4 mr-1" />
-                          Use
-                        </Button>
-                      </div>
-                    </CardContent>
-                  </Card>
+                {communityTemplates.map((template) => (
+                  <CommunityTemplateCard 
+                    key={template.id}
+                    template={template}
+                    isLiked={likedTemplates.includes(template.id)}
+                    onLike={() => toggleLikeTemplate(template.id)}
+                    onUse={() => useTemplate(template)}
+                  />
                 ))}
               </div>
-            </div>
-          )}
+            </TabsContent>
+
+            {/* Featured Tab */}
+            <TabsContent value="featured" className="space-y-6">
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                {communityTemplates
+                  .filter(t => t.isOfficial || t.likes > 200)
+                  .map((template) => (
+                    <CommunityTemplateCard 
+                      key={template.id}
+                      template={template}
+                      isLiked={likedTemplates.includes(template.id)}
+                      onLike={() => toggleLikeTemplate(template.id)}
+                      onUse={() => useTemplate(template)}
+                      featured={true}
+                    />
+                  ))
+                }
+              </div>
+            </TabsContent>
+
+            {/* Models Tab */}
+            <TabsContent value="models" className="space-y-6">
 
           {/* API Models Section */}
           <div>
@@ -292,6 +481,154 @@ export function Models() {
   )
 }
 
+// Assistant Card Component for personal assistants
+function AssistantCard({ 
+  assistant, 
+  onUse, 
+  onDelete, 
+  onShare, 
+  type = "personal" 
+}: {
+  assistant: any
+  onUse: () => void
+  onDelete: () => void
+  onShare: () => void
+  type?: "personal" | "community"
+}) {
+  return (
+    <Card className="hover:shadow-md transition-shadow">
+      <CardHeader className="pb-3">
+        <div className="flex items-start justify-between">
+          <div className="flex-1">
+            <CardTitle className="text-base">{assistant.name}</CardTitle>
+            <p className="text-sm text-muted-foreground mt-1">
+              {assistant.description || 'No description'}
+            </p>
+          </div>
+          <div className="flex gap-1">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={onShare}
+              className="text-blue-600 hover:text-blue-700"
+              title="Share to community"
+            >
+              <Share className="h-4 w-4" />
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={onDelete}
+              className="text-destructive hover:text-destructive"
+              title="Delete assistant"
+            >
+              <Trash2 className="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-3">
+        <div className="text-xs space-y-1 text-muted-foreground">
+          <div><span className="font-medium">Model:</span> {assistant.model}</div>
+          <div><span className="font-medium">Temperature:</span> {assistant.temperature}</div>
+          <div><span className="font-medium">Max Tokens:</span> {assistant.maxTokens}</div>
+          <div><span className="font-medium">Created:</span> {new Date(assistant.createdAt).toLocaleDateString()}</div>
+        </div>
+        <Button size="sm" onClick={onUse} className="w-full">
+          <MessageSquare className="h-4 w-4 mr-2" />
+          Use Assistant
+        </Button>
+      </CardContent>
+    </Card>
+  )
+}
+
+// Community Template Card Component
+function CommunityTemplateCard({ 
+  template, 
+  isLiked, 
+  onLike, 
+  onUse,
+  featured = false
+}: {
+  template: CommunityTemplate
+  isLiked: boolean
+  onLike: () => void
+  onUse: () => void
+  featured?: boolean
+}) {
+  return (
+    <Card className={`hover:shadow-md transition-shadow ${featured ? 'ring-2 ring-yellow-200' : ''}`}>
+      <CardHeader className="pb-3">
+        <div className="flex items-start justify-between">
+          <div className="flex-1">
+            <div className="flex items-center gap-2 mb-1">
+              <CardTitle className="text-base">{template.name}</CardTitle>
+              {template.isOfficial && (
+                <Badge variant="default" className="text-xs px-2 py-0">
+                  Official
+                </Badge>
+              )}
+              {featured && (
+                <Star className="h-4 w-4 text-yellow-500 fill-current" />
+              )}
+            </div>
+            <p className="text-xs text-muted-foreground">by {template.author}</p>
+            <p className="text-sm text-muted-foreground mt-1 line-clamp-2">
+              {template.description}
+            </p>
+          </div>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={onLike}
+            className={isLiked ? "text-red-500" : "text-muted-foreground hover:text-red-500"}
+            title={isLiked ? "Unlike" : "Like"}
+          >
+            <Heart className={`h-4 w-4 ${isLiked ? 'fill-current' : ''}`} />
+          </Button>
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-3">
+        <div className="flex flex-wrap gap-1">
+          {template.tags.slice(0, 3).map((tag) => (
+            <Badge key={tag} variant="secondary" className="text-xs">
+              {tag}
+            </Badge>
+          ))}
+        </div>
+        
+        <div className="text-xs space-y-1 text-muted-foreground">
+          <div><span className="font-medium">Model:</span> {template.model}</div>
+          <div><span className="font-medium">Temperature:</span> {template.temperature}</div>
+          <div><span className="font-medium">Max Tokens:</span> {template.maxTokens}</div>
+        </div>
+        
+        <div className="flex items-center justify-between text-xs text-muted-foreground">
+          <div className="flex items-center gap-3">
+            <div className="flex items-center gap-1">
+              <Heart className="h-3 w-3" />
+              <span>{template.likes}</span>
+            </div>
+            <div className="flex items-center gap-1">
+              <Download className="h-3 w-3" />
+              <span>{template.downloads}</span>
+            </div>
+          </div>
+          <span>{template.createdAt}</span>
+        </div>
+        
+        <div className="flex gap-2">
+          <Button size="sm" onClick={onUse} className="flex-1">
+            <Copy className="h-4 w-4 mr-1" />
+            Use Template
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
 // ModelCard component for reusability
 interface ModelCardProps {
   model: ModelInfo