Restructure features: separate Assistants and Community from Model Catalog

- Add new sidebar navigation items for My Assistants and Community
- Create dedicated Assistants page for personal assistant management
- Create dedicated Community page for template discovery and sharing
- Simplify Model Catalog to focus only on model management
- Update routing to support new independent pages
- Improve feature separation and user experience

frontend/src/App.tsx

@@ -3,6 +3,8 @@ import { Layout } from './components/Layout'
 import { Home } from './pages/Home'
 import { Playground } from './pages/Playground'
 import { Models } from './pages/Models'
+import { Assistants } from './pages/Assistants'
+import { Community } from './pages/Community'
 import { Settings } from './pages/Settings'
 
 function App() {
@@ -13,6 +15,8 @@ function App() {
           <Route index element={<Home />} />
           <Route path="playground" element={<Playground />} />
           <Route path="models" element={<Models />} />
+          <Route path="assistants" element={<Assistants />} />
+          <Route path="community" element={<Community />} />
           <Route path="settings" element={<Settings />} />
         </Route>
       </Routes>

frontend/src/components/Sidebar.tsx

@@ -5,7 +5,9 @@ import {
   BookOpen, 
   MessageSquare, 
   Settings,
-  Brain
+  Brain,
+  Bot,
+  Users
 } from 'lucide-react'
 
 const navigation = [
@@ -25,7 +27,19 @@ const navigation = [
     name: 'Model Catalog',
     href: '/models',
     icon: BookOpen,
-    description: 'Browse and manage models'
+    description: 'Browse and manage AI models'
+  },
+  {
+    name: 'My Assistants',
+    href: '/assistants',
+    icon: Bot,
+    description: 'Manage your custom AI assistants'
+  },
+  {
+    name: 'Community',
+    href: '/community',
+    icon: Users,
+    description: 'Discover and share assistant templates'
   },
   {
     name: 'Settings',

frontend/src/pages/Assistants.tsx

@@ -0,0 +1,261 @@
+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 { 
+  Bot, 
+  MessageSquare,
+  Trash2, 
+  Share,
+  Plus,
+  Sparkles
+} from 'lucide-react'
+
+export function Assistants() {
+  const [savedAssistants, setSavedAssistants] = useState<any[]>([])
+
+  useEffect(() => {
+    loadSavedAssistants()
+  }, [])
+
+  const loadSavedAssistants = () => {
+    try {
+      const assistants = JSON.parse(localStorage.getItem('savedAssistants') || '[]')
+      setSavedAssistants(assistants)
+    } catch (error) {
+      console.error('Failed to load assistants:', error)
+    }
+  }
+
+  const loadAssistant = (assistant: any) => {
+    localStorage.setItem('loadAssistantConfig', JSON.stringify(assistant))
+    window.location.href = '/playground'
+  }
+
+  const deleteAssistant = (assistantId: string) => {
+    const updatedAssistants = savedAssistants.filter(a => a.id !== assistantId)
+    setSavedAssistants(updatedAssistants)
+    localStorage.setItem('savedAssistants', JSON.stringify(updatedAssistants))
+  }
+
+  const shareMyAssistant = (assistant: any) => {
+    alert(`"${assistant.name}" has been shared to the community! (This is a demo - in production, it would be submitted for review.)`)
+  }
+
+  const createNewAssistant = () => {
+    window.location.href = '/playground'
+  }
+
+  return (
+    <div className="min-h-screen bg-background">
+      {/* Header */}
+      <div className="border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+        <div className="max-w-6xl mx-auto p-6">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <div className="w-8 h-8 bg-purple-600 rounded-lg flex items-center justify-center">
+                <Bot className="h-5 w-5 text-white" />
+              </div>
+              <div>
+                <h1 className="text-2xl font-bold">My Assistants</h1>
+                <p className="text-sm text-muted-foreground">
+                  Manage your custom AI assistants and configurations
+                </p>
+              </div>
+            </div>
+            <Button onClick={createNewAssistant} className="flex items-center gap-2">
+              <Plus className="h-4 w-4" />
+              Create New Assistant
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      <div className="flex-1 p-6">
+        <div className="max-w-6xl mx-auto space-y-6">
+          
+          {/* Info Card */}
+          <Card className="bg-purple-50 border-purple-200">
+            <CardContent className="pt-6">
+              <div className="flex items-start gap-3">
+                <Sparkles className="h-5 w-5 text-purple-600 mt-0.5" />
+                <div>
+                  <h3 className="font-medium text-purple-900">Custom AI Assistants</h3>
+                  <p className="text-sm text-purple-700 mt-1">
+                    Create specialized AI assistants by configuring models, prompts, and parameters in the Playground. 
+                    Save different configurations for various tasks and workflows.
+                  </p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Assistants Grid */}
+          {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)}
+                />
+              ))}
+            </div>
+          ) : (
+            <Card className="text-center py-16">
+              <Bot className="h-16 w-16 mx-auto text-muted-foreground mb-6" />
+              <h3 className="text-xl font-medium mb-3">No assistants yet</h3>
+              <p className="text-muted-foreground mb-6 max-w-md mx-auto">
+                Create your first AI assistant by configuring parameters and prompts in the Playground, 
+                then saving your configuration for future use.
+              </p>
+              <Button onClick={createNewAssistant} size="lg" className="flex items-center gap-2 mx-auto">
+                <Plus className="h-5 w-5" />
+                Create Your First Assistant
+              </Button>
+            </Card>
+          )}
+
+          {/* Stats Cards */}
+          {savedAssistants.length > 0 && (
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+              <Card>
+                <CardContent className="pt-6">
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <div className="text-2xl font-bold text-purple-600">
+                        {savedAssistants.length}
+                      </div>
+                      <div className="text-sm text-muted-foreground">Total Assistants</div>
+                    </div>
+                    <Bot className="h-8 w-8 text-purple-600" />
+                  </div>
+                </CardContent>
+              </Card>
+              
+              <Card>
+                <CardContent className="pt-6">
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <div className="text-2xl font-bold text-blue-600">
+                        {new Set(savedAssistants.map(a => a.model)).size}
+                      </div>
+                      <div className="text-sm text-muted-foreground">Models Used</div>
+                    </div>
+                    <MessageSquare className="h-8 w-8 text-blue-600" />
+                  </div>
+                </CardContent>
+              </Card>
+              
+              <Card>
+                <CardContent className="pt-6">
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <div className="text-2xl font-bold text-green-600">
+                        {savedAssistants.filter(a => a.createdAt && 
+                          new Date(a.createdAt) > new Date(Date.now() - 7 * 24 * 60 * 60 * 1000)
+                        ).length}
+                      </div>
+                      <div className="text-sm text-muted-foreground">Created This Week</div>
+                    </div>
+                    <Sparkles className="h-8 w-8 text-green-600" />
+                  </div>
+                </CardContent>
+              </Card>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// Assistant Card Component
+function AssistantCard({ 
+  assistant, 
+  onUse, 
+  onDelete, 
+  onShare
+}: {
+  assistant: any
+  onUse: () => void
+  onDelete: () => void
+  onShare: () => void
+}) {
+  return (
+    <Card className="hover:shadow-lg transition-all duration-200 hover:-translate-y-1">
+      <CardHeader className="pb-3">
+        <div className="flex items-start justify-between">
+          <div className="flex-1">
+            <CardTitle className="text-base flex items-center gap-2">
+              <Bot className="h-4 w-4 text-purple-600" />
+              {assistant.name}
+            </CardTitle>
+            <p className="text-sm text-muted-foreground mt-1">
+              {assistant.description || 'No description provided'}
+            </p>
+          </div>
+          <div className="flex gap-1">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={onShare}
+              className="text-blue-600 hover:text-blue-700 hover:bg-blue-50"
+              title="Share to community"
+            >
+              <Share className="h-4 w-4" />
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={onDelete}
+              className="text-red-500 hover:text-red-600 hover:bg-red-50"
+              title="Delete assistant"
+            >
+              <Trash2 className="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {/* Configuration Details */}
+        <div className="grid grid-cols-2 gap-3 text-xs">
+          <div className="bg-gray-50 rounded p-2">
+            <span className="font-medium text-gray-600">Model:</span>
+            <p className="text-gray-800 truncate">{assistant.model}</p>
+          </div>
+          <div className="bg-gray-50 rounded p-2">
+            <span className="font-medium text-gray-600">Temperature:</span>
+            <p className="text-gray-800">{assistant.temperature}</p>
+          </div>
+          <div className="bg-gray-50 rounded p-2">
+            <span className="font-medium text-gray-600">Max Tokens:</span>
+            <p className="text-gray-800">{assistant.maxTokens}</p>
+          </div>
+          <div className="bg-gray-50 rounded p-2">
+            <span className="font-medium text-gray-600">Created:</span>
+            <p className="text-gray-800">{new Date(assistant.createdAt).toLocaleDateString()}</p>
+          </div>
+        </div>
+        
+        {/* System Prompt Preview */}
+        {assistant.systemPrompt && (
+          <div className="bg-blue-50 rounded p-2">
+            <span className="text-xs font-medium text-blue-700">System Prompt:</span>
+            <p className="text-xs text-blue-600 mt-1 line-clamp-2">
+              {assistant.systemPrompt}
+            </p>
+          </div>
+        )}
+
+        {/* Action Button */}
+        <Button onClick={onUse} className="w-full flex items-center gap-2">
+          <MessageSquare className="h-4 w-4" />
+          Use Assistant
+        </Button>
+      </CardContent>
+    </Card>
+  )
+}

frontend/src/pages/Community.tsx

@@ -0,0 +1,445 @@
+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 { 
+  Users, 
+  Star,
+  Heart,
+  Download,
+  Copy,
+  Sparkles,
+  TrendingUp,
+  Award
+} from 'lucide-react'
+
+// 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 Community() {
+  const [communityTemplates] = useState<CommunityTemplate[]>(getCommunityTemplates())
+  const [likedTemplates, setLikedTemplates] = useState<string[]>([])
+
+  useEffect(() => {
+    loadLikedTemplates()
+  }, [])
+
+  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 featuredTemplates = communityTemplates.filter(t => t.isOfficial || t.likes > 200)
+  const totalLikes = communityTemplates.reduce((sum, t) => sum + t.likes, 0)
+  const totalDownloads = communityTemplates.reduce((sum, t) => sum + t.downloads, 0)
+
+  return (
+    <div className="min-h-screen bg-background">
+      {/* Header */}
+      <div className="border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+        <div className="max-w-6xl mx-auto p-6">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
+                <Users className="h-5 w-5 text-white" />
+              </div>
+              <div>
+                <h1 className="text-2xl font-bold">Community Templates</h1>
+                <p className="text-sm text-muted-foreground">
+                  Discover and share AI assistant templates created by the community
+                </p>
+              </div>
+            </div>
+            <div className="flex items-center gap-4 text-sm text-muted-foreground">
+              <div className="flex items-center gap-1">
+                <Heart className="h-4 w-4" />
+                <span>{totalLikes.toLocaleString()} likes</span>
+              </div>
+              <div className="flex items-center gap-1">
+                <Download className="h-4 w-4" />
+                <span>{totalDownloads.toLocaleString()} downloads</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="flex-1 p-6">
+        <div className="max-w-6xl mx-auto space-y-6">
+          
+          {/* Info Card */}
+          <Card className="bg-blue-50 border-blue-200">
+            <CardContent className="pt-6">
+              <div className="flex items-start gap-3">
+                <Sparkles className="h-5 w-5 text-blue-600 mt-0.5" />
+                <div>
+                  <h3 className="font-medium text-blue-900">Community-Powered AI</h3>
+                  <p className="text-sm text-blue-700 mt-1">
+                    Explore specialized AI assistant templates created by experts and the community. 
+                    Click "Use Template" to load any configuration directly into your Playground.
+                  </p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Tabs */}
+          <Tabs defaultValue="all" className="space-y-6">
+            <TabsList className="grid w-full grid-cols-3">
+              <TabsTrigger value="all" className="flex items-center gap-2">
+                <Users className="h-4 w-4" />
+                All Templates
+              </TabsTrigger>
+              <TabsTrigger value="featured" className="flex items-center gap-2">
+                <Star className="h-4 w-4" />
+                Featured
+              </TabsTrigger>
+              <TabsTrigger value="liked" className="flex items-center gap-2">
+                <Heart className="h-4 w-4" />
+                My Likes
+              </TabsTrigger>
+            </TabsList>
+
+            {/* All Templates Tab */}
+            <TabsContent value="all" className="space-y-6">
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                {communityTemplates.map((template) => (
+                  <CommunityTemplateCard 
+                    key={template.id}
+                    template={template}
+                    isLiked={likedTemplates.includes(template.id)}
+                    onLike={() => toggleLikeTemplate(template.id)}
+                    onUse={() => useTemplate(template)}
+                  />
+                ))}
+              </div>
+            </TabsContent>
+
+            {/* Featured Templates Tab */}
+            <TabsContent value="featured" className="space-y-6">
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                {featuredTemplates.map((template) => (
+                  <CommunityTemplateCard 
+                    key={template.id}
+                    template={template}
+                    isLiked={likedTemplates.includes(template.id)}
+                    onLike={() => toggleLikeTemplate(template.id)}
+                    onUse={() => useTemplate(template)}
+                    featured={true}
+                  />
+                ))}
+              </div>
+            </TabsContent>
+
+            {/* Liked Templates Tab */}
+            <TabsContent value="liked" className="space-y-6">
+              {likedTemplates.length > 0 ? (
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                  {communityTemplates
+                    .filter(t => likedTemplates.includes(t.id))
+                    .map((template) => (
+                      <CommunityTemplateCard 
+                        key={template.id}
+                        template={template}
+                        isLiked={true}
+                        onLike={() => toggleLikeTemplate(template.id)}
+                        onUse={() => useTemplate(template)}
+                      />
+                    ))
+                  }
+                </div>
+              ) : (
+                <Card className="text-center py-16">
+                  <Heart className="h-16 w-16 mx-auto text-muted-foreground mb-6" />
+                  <h3 className="text-xl font-medium mb-3">No liked templates yet</h3>
+                  <p className="text-muted-foreground mb-6 max-w-md mx-auto">
+                    Explore the community templates and click the heart icon to save your favorites for easy access.
+                  </p>
+                </Card>
+              )}
+            </TabsContent>
+          </Tabs>
+
+          {/* Stats Cards */}
+          <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
+            <Card>
+              <CardContent className="pt-6">
+                <div className="flex items-center justify-between">
+                  <div>
+                    <div className="text-2xl font-bold text-blue-600">
+                      {communityTemplates.length}
+                    </div>
+                    <div className="text-sm text-muted-foreground">Templates</div>
+                  </div>
+                  <Copy className="h-8 w-8 text-blue-600" />
+                </div>
+              </CardContent>
+            </Card>
+            
+            <Card>
+              <CardContent className="pt-6">
+                <div className="flex items-center justify-between">
+                  <div>
+                    <div className="text-2xl font-bold text-green-600">
+                      {communityTemplates.filter(t => t.isOfficial).length}
+                    </div>
+                    <div className="text-sm text-muted-foreground">Official</div>
+                  </div>
+                  <Award className="h-8 w-8 text-green-600" />
+                </div>
+              </CardContent>
+            </Card>
+            
+            <Card>
+              <CardContent className="pt-6">
+                <div className="flex items-center justify-between">
+                  <div>
+                    <div className="text-2xl font-bold text-red-500">
+                      {totalLikes.toLocaleString()}
+                    </div>
+                    <div className="text-sm text-muted-foreground">Total Likes</div>
+                  </div>
+                  <Heart className="h-8 w-8 text-red-500" />
+                </div>
+              </CardContent>
+            </Card>
+            
+            <Card>
+              <CardContent className="pt-6">
+                <div className="flex items-center justify-between">
+                  <div>
+                    <div className="text-2xl font-bold text-purple-600">
+                      {totalDownloads.toLocaleString()}
+                    </div>
+                    <div className="text-sm text-muted-foreground">Downloads</div>
+                  </div>
+                  <TrendingUp className="h-8 w-8 text-purple-600" />
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// 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-lg transition-all duration-200 hover:-translate-y-1 ${featured ? 'ring-2 ring-yellow-200 shadow-md' : ''}`}>
+      <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 bg-green-600">
+                  <Award className="h-3 w-3 mr-1" />
+                  Official
+                </Badge>
+              )}
+              {featured && (
+                <Star className="h-4 w-4 text-yellow-500 fill-current" />
+              )}
+            </div>
+            <p className="text-xs text-blue-600 font-medium">by {template.author}</p>
+            <p className="text-sm text-muted-foreground mt-2 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-4">
+        {/* Tags */}
+        <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>
+        
+        {/* Configuration */}
+        <div className="grid grid-cols-2 gap-2 text-xs">
+          <div className="bg-gray-50 rounded p-2">
+            <span className="font-medium text-gray-600">Temperature:</span>
+            <p className="text-gray-800">{template.temperature}</p>
+          </div>
+          <div className="bg-gray-50 rounded p-2">
+            <span className="font-medium text-gray-600">Max Tokens:</span>
+            <p className="text-gray-800">{template.maxTokens}</p>
+          </div>
+        </div>
+        
+        {/* Stats & Action */}
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-4 text-xs text-muted-foreground">
+            <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>
+          <Button size="sm" onClick={onUse} className="flex items-center gap-1">
+            <Copy className="h-3 w-3" />
+            Use
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

frontend/src/pages/Models.tsx

@@ -2,7 +2,6 @@ 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, 
@@ -13,21 +12,14 @@ import {
   Info,
   CheckCircle,
   Cloud,
-  HardDrive,
-  Bot,
-  MessageSquare,
-  Users,
-  Star,
-  Heart,
-  Share,
-  Copy
+  HardDrive
 } from 'lucide-react'
 
 interface ModelInfo {
   model_name: string
   name: string
   supports_thinking: boolean
-  description: string
+  ram_required_gb: string
   size_gb: string
   is_loaded: boolean
   type: 'local' | 'api'
@@ -38,251 +30,87 @@ 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 = () => {
-    try {
-      const assistants = JSON.parse(localStorage.getItem('savedAssistants') || '[]')
-      setSavedAssistants(assistants)
-    } catch (error) {
-      console.error('Failed to load saved assistants:', error)
-      setSavedAssistants([])
-    }
-  }
-
-  const loadAssistant = (assistant: any) => {
-    // Store the assistant config in localStorage for the playground to use
-    localStorage.setItem('loadAssistantConfig', JSON.stringify(assistant))
-    // Navigate to playground
-    window.location.href = '/playground'
-  }
-
-  const deleteAssistant = (assistantId: string) => {
-    const updatedAssistants = savedAssistants.filter(a => a.id !== assistantId)
-    setSavedAssistants(updatedAssistants)
-    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}`
       const res = await fetch(`${baseUrl}/models`)
-      if (res.ok) {
-        const data: ModelsResponse = await res.json()
-        setModels(data.models)
+      
+      if (!res.ok) {
+        throw new Error(`Failed to fetch models: ${res.status}`)
       }
-    } catch (err) {
-      console.error('Failed to fetch models:', err)
+      
+      const data: ModelsResponse = await res.json()
+      setModels(data.models)
+    } catch (error) {
+      console.error('Error fetching models:', error)
     } finally {
       setLoading(false)
     }
   }
 
-  const handleLoadModel = async (modelName: string) => {
+  const loadModel = async (modelName: string) => {
     setModelLoading(modelName)
     try {
       const baseUrl = `${window.location.protocol}//${window.location.host}`
       const res = await fetch(`${baseUrl}/load-model`, {
         method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
+        headers: {
+          'Content-Type': 'application/json',
+        },
         body: JSON.stringify({ model_name: modelName }),
       })
-      
-      if (res.ok) {
-        await fetchModels()
+
+      if (!res.ok) {
+        throw new Error(`Failed to load model: ${res.status}`)
       }
-    } catch (err) {
-      console.error('Failed to load model:', err)
+
+      // Refresh models list
+      fetchModels()
+    } catch (error) {
+      console.error('Error loading model:', error)
     } finally {
       setModelLoading(null)
     }
   }
 
-  const handleUnloadModel = async (modelName: string) => {
+  const unloadModel = async (modelName: string) => {
+    setModelLoading(modelName)
     try {
       const baseUrl = `${window.location.protocol}//${window.location.host}`
       const res = await fetch(`${baseUrl}/unload-model`, {
         method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
+        headers: {
+          'Content-Type': 'application/json',
+        },
         body: JSON.stringify({ model_name: modelName }),
       })
-      
-      if (res.ok) {
-        await fetchModels()
+
+      if (!res.ok) {
+        throw new Error(`Failed to unload model: ${res.status}`)
       }
-    } catch (err) {
-      console.error('Failed to unload model:', err)
+
+      // Refresh models list
+      fetchModels()
+    } catch (error) {
+      console.error('Error unloading model:', error)
+    } finally {
+      setModelLoading(null)
     }
   }
 
   if (loading) {
     return (
-      <div className="min-h-screen bg-background">
-        <div className="border-b">
-          <div className="flex h-14 items-center px-6">
-            <div className="flex items-center gap-2">
-              <BookOpen className="h-5 w-5" />
-              <h1 className="text-lg font-semibold">Model Catalog</h1>
-            </div>
-          </div>
-        </div>
-        <div className="flex items-center justify-center h-64">
-          <Loader2 className="h-8 w-8 animate-spin" />
-        </div>
+      <div className="min-h-screen bg-background flex items-center justify-center">
+        <Loader2 className="h-8 w-8 animate-spin" />
       </div>
     )
   }
@@ -290,138 +118,65 @@ export function Models() {
   return (
     <div className="min-h-screen bg-background">
       {/* Header */}
-      <div className="border-b">
-        <div className="flex h-14 items-center px-6">
-          <div className="flex items-center gap-2">
-            <BookOpen className="h-5 w-5" />
-            <h1 className="text-lg font-semibold">Model Catalog</h1>
-          </div>
-          <div className="ml-auto">
-            <Button variant="outline" size="sm" onClick={fetchModels}>
-              Refresh
+      <div className="border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+        <div className="max-w-6xl mx-auto p-6">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
+                <BookOpen className="h-5 w-5 text-white" />
+              </div>
+              <div>
+                <h1 className="text-2xl font-bold">Model Catalog</h1>
+                <p className="text-sm text-muted-foreground">
+                  Browse and manage AI models for your conversations
+                </p>
+              </div>
+            </div>
+            <Button 
+              onClick={() => window.location.href = '/playground'} 
+              className="flex items-center gap-2"
+            >
+              <Zap className="h-4 w-4" />
+              Go to Playground
             </Button>
           </div>
         </div>
       </div>
 
       <div className="flex-1 p-6">
-        <div className="max-w-6xl mx-auto">
+        <div className="max-w-6xl mx-auto space-y-6">
           
           {/* Info Card */}
-          <Card className="bg-blue-50 border-blue-200 mb-6">
+          <Card className="bg-blue-50 border-blue-200">
             <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">Assistant Library</h3>
+                  <h3 className="font-medium text-blue-900">Model Management</h3>
                   <p className="text-sm text-blue-700 mt-1">
-                    Manage your custom assistants and discover community templates. Create specialized AI helpers for different tasks and workflows.
+                    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.
                   </p>
                 </div>
               </div>
             </CardContent>
           </Card>
 
-          {/* 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)}
-                    />
-                  ))}
-                </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">
-                {communityTemplates.map((template) => (
-                  <CommunityTemplateCard 
-                    key={template.id}
-                    template={template}
-                    isLiked={likedTemplates.includes(template.id)}
-                    onLike={() => toggleLikeTemplate(template.id)}
-                    onUse={() => useTemplate(template)}
-                  />
-                ))}
-              </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>
-                <h2 className="text-xl font-semibold mb-4 flex items-center gap-2">
-                  <Cloud className="h-5 w-5" />
+          {/* API Models Section */}
+          <div>
+            <h2 className="text-xl font-semibold mb-4 flex items-center gap-2">
+              <Cloud className="h-5 w-5" />
               API Models
               <Badge variant="outline" className="text-xs">Cloud-Powered</Badge>
             </h2>
             <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
               {models.filter(m => m.type === 'api').map((model) => (
                 <ModelCard 
-                  key={model.model_name} 
-                  model={model} 
+                  key={model.model_name}
+                  model={model}
                   modelLoading={modelLoading}
-                  onLoad={handleLoadModel}
-                  onUnload={handleUnloadModel}
+                  onLoad={loadModel}
+                  onUnload={unloadModel}
                 />
               ))}
             </div>
@@ -432,34 +187,45 @@ export function Models() {
             <h2 className="text-xl font-semibold mb-4 flex items-center gap-2">
               <HardDrive className="h-5 w-5" />
               Local Models
-              <Badge variant="outline" className="text-xs">Privacy-First</Badge>
+              <Badge variant="outline" className="text-xs">Self-Hosted</Badge>
             </h2>
             <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
               {models.filter(m => m.type === 'local').map((model) => (
                 <ModelCard 
-                  key={model.model_name} 
-                  model={model} 
+                  key={model.model_name}
+                  model={model}
                   modelLoading={modelLoading}
-                  onLoad={handleLoadModel}
-                  onUnload={handleUnloadModel}
+                  onLoad={loadModel}
+                  onUnload={unloadModel}
                 />
               ))}
             </div>
           </div>
 
-          {/* Stats Card */}
+          {/* Model Statistics */}
           <Card>
             <CardHeader>
-              <CardTitle>Model Statistics</CardTitle>
+              <CardTitle className="flex items-center gap-2">
+                <Brain className="h-5 w-5" />
+                Model Statistics
+              </CardTitle>
             </CardHeader>
             <CardContent>
-              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+              <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
                 <div className="text-center">
-                  <div className="text-2xl font-bold text-blue-600">{models.length}</div>
-                  <div className="text-sm text-muted-foreground">Available Models</div>
+                  <div className="text-2xl font-bold text-blue-600">
+                    {models.filter(m => m.type === 'api').length}
+                  </div>
+                  <div className="text-sm text-muted-foreground">API Models</div>
                 </div>
                 <div className="text-center">
                   <div className="text-2xl font-bold text-green-600">
+                    {models.filter(m => m.type === 'local').length}
+                  </div>
+                  <div className="text-sm text-muted-foreground">Local Models</div>
+                </div>
+                <div className="text-center">
+                  <div className="text-2xl font-bold text-orange-600">
                     {models.filter(m => m.is_loaded).length}
                   </div>
                   <div className="text-sm text-muted-foreground">Loaded Models</div>
@@ -473,160 +239,12 @@ export function Models() {
               </div>
             </CardContent>
           </Card>
-            </TabsContent>
-          </Tabs>
         </div>
       </div>
     </div>
   )
 }
 
-// Assistant Card Component for personal assistants
-function AssistantCard({ 
-  assistant, 
-  onUse, 
-  onDelete, 
-  onShare
-}: {
-  assistant: any
-  onUse: () => void
-  onDelete: () => void
-  onShare: () => void
-}) {
-  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
@@ -637,113 +255,102 @@ interface ModelCardProps {
 
 function ModelCard({ model, modelLoading, onLoad, onUnload }: ModelCardProps) {
   const isApiModel = model.type === 'api'
-  
+  const isLoading = modelLoading === model.model_name
+  const isLoaded = model.is_loaded
+
   return (
-    <Card className="relative">
-      <CardHeader>
+    <Card className="hover:shadow-md transition-shadow">
+      <CardHeader className="pb-3">
         <div className="flex items-start justify-between">
-          <div className="flex items-center gap-3">
-            {isApiModel ? (
-              <Cloud className="h-6 w-6 text-blue-500" />
-            ) : model.supports_thinking ? (
-              <Brain className="h-6 w-6 text-blue-500" />
-            ) : (
-              <Zap className="h-6 w-6 text-green-500" />
-            )}
-            <div>
-              <CardTitle className="text-lg">{model.name}</CardTitle>
-              <div className="flex items-center gap-2 mt-1 flex-wrap">
-                {isApiModel ? (
-                  <Badge variant="default" className="bg-blue-600">
-                    <Cloud className="h-3 w-3 mr-1" />
-                    API Model
-                  </Badge>
-                ) : (
-                  <Badge variant={model.supports_thinking ? "default" : "secondary"}>
-                    <HardDrive className="h-3 w-3 mr-1" />
-                    {model.supports_thinking ? "Thinking Model" : "Instruction Model"}
-                  </Badge>
-                )}
-                {model.is_loaded && (
-                  <Badge variant="outline" className="text-green-600 border-green-600">
-                    <CheckCircle className="h-3 w-3 mr-1" />
-                    {isApiModel ? "Ready" : "Loaded"}
-                  </Badge>
-                )}
-              </div>
-            </div>
+          <div className="flex-1">
+            <CardTitle className="text-base flex items-center gap-2">
+              {isApiModel ? (
+                <Cloud className="h-4 w-4 text-blue-600" />
+              ) : (
+                <HardDrive className="h-4 w-4 text-green-600" />
+              )}
+              {model.name}
+            </CardTitle>
+            <p className="text-xs text-muted-foreground mt-1">
+              {model.model_name}
+            </p>
           </div>
+          {isLoaded && <CheckCircle className="h-5 w-5 text-green-600" />}
         </div>
       </CardHeader>
-      <CardContent className="space-y-4">
-        <div>
-          <p className="text-sm text-muted-foreground mb-2">{model.description}</p>
-          <div className="flex items-center gap-4 text-xs text-muted-foreground">
-            <span>Size: {model.size_gb}</span>
-            {!isApiModel && <span>Format: Safetensors</span>}
-            {isApiModel && <span>Type: Cloud API</span>}
-          </div>
-        </div>
-
-        <div className="space-y-2">
-          <h4 className="text-sm font-medium">Capabilities</h4>
-          <div className="flex flex-wrap gap-2">
-            <Badge variant="outline" className="text-xs">Text Generation</Badge>
-            <Badge variant="outline" className="text-xs">Conversation</Badge>
-            <Badge variant="outline" className="text-xs">Code</Badge>
-            {model.supports_thinking && (
-              <Badge variant="outline" className="text-xs">Reasoning</Badge>
-            )}
-            {isApiModel && model.model_name.includes('vl') && (
-              <Badge variant="outline" className="text-xs">Vision</Badge>
-            )}
+      
+      <CardContent className="space-y-3">
+        {/* Model Info */}
+        <div className="space-y-2 text-sm">
+          {!isApiModel && (
+            <>
+              <div className="flex justify-between">
+                <span className="text-muted-foreground">Size:</span>
+                <Badge variant="outline" className="text-xs">
+                  {model.size_gb}
+                </Badge>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-muted-foreground">RAM Required:</span>
+                <Badge variant="outline" className="text-xs">
+                  {model.ram_required_gb}
+                </Badge>
+              </div>
+            </>
+          )}
+          
+          <div className="flex justify-between">
+            <span className="text-muted-foreground">Type:</span>
+            <Badge variant={isApiModel ? "default" : "secondary"} className="text-xs">
+              {isApiModel ? 'API' : 'Local'}
+            </Badge>
           </div>
+          
+          {model.supports_thinking && (
+            <div className="flex justify-between">
+              <span className="text-muted-foreground">Features:</span>
+              <Badge variant="outline" className="text-xs">
+                <Brain className="h-3 w-3 mr-1" />
+                Thinking
+              </Badge>
+            </div>
+          )}
         </div>
 
-        <div className="pt-2 border-t">
-          {model.is_loaded ? (
-            <div className="flex gap-2">
-              {!isApiModel && (
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={() => onUnload(model.model_name)}
-                  className="flex-1"
-                >
-                  <Trash2 className="h-4 w-4 mr-2" />
-                  Unload
-                </Button>
+        {/* Action Button */}
+        <div className="pt-2">
+          {isLoaded ? (
+            <Button
+              size="sm"
+              variant="outline"
+              onClick={() => onUnload(model.model_name)}
+              disabled={isLoading}
+              className="w-full"
+            >
+              {isLoading ? (
+                <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+              ) : (
+                <Trash2 className="h-4 w-4 mr-2" />
               )}
-              <Button size="sm" className="flex-1" asChild>
-                <a href="/playground">Use in Playground</a>
-              </Button>
-            </div>
+              {isLoading ? 'Unloading...' : 'Unload Model'}
+            </Button>
           ) : (
             <Button
+              size="sm"
               onClick={() => onLoad(model.model_name)}
-              disabled={modelLoading === model.model_name}
+              disabled={isLoading}
               className="w-full"
-              size="sm"
             >
-              {modelLoading === model.model_name ? (
-                <>
-                  <Loader2 className="h-4 w-4 mr-2 animate-spin" />
-                  {isApiModel ? "Connecting..." : "Loading..."}
-                </>
+              {isLoading ? (
+                <Loader2 className="h-4 w-4 mr-2 animate-spin" />
               ) : (
-                <>
-                  {isApiModel ? (
-                    <Cloud className="h-4 w-4 mr-2" />
-                  ) : (
-                    <Download className="h-4 w-4 mr-2" />
-                  )}
-                  {isApiModel ? "Connect" : "Load Model"}
-                </>
+                <Download className="h-4 w-4 mr-2" />
               )}
+              {isLoading ? 'Loading...' : 'Load Model'}
             </Button>
           )}
         </div>
       </CardContent>
     </Card>
   )
-}
+}