Add minimal custom assistant system - save/load assistants in Playground and Models pages

IMPLEMENTATION_GUIDE.md

@@ -0,0 +1,229 @@
+# 自定义AI助手平台 - 实施指南
+
+## 🎯 核心概念总结
+
+你的想法非常有价值！这个平台结合了：
+- **Prompt Engineering** - 让用户通过调试参数和提示词创造专属AI
+- **社区协作** - 分享和发现优质用例模板  
+- **个性化定制** - 针对特定场景优化AI行为
+- **降低门槛** - 无需编程技能即可创建AI助手
+
+## 🏗️ 技术架构
+
+### 前端架构
+```
+src/
+├── pages/
+│   ├── AssistantBuilder.tsx    # 助手创建器
+│   ├── Community.tsx           # 社区市场
+│   ├── MyAssistants.tsx        # 个人工作台
+│   └── AssistantDetail.tsx     # 助手详情页
+├── components/
+│   ├── ParameterPanel.tsx      # 参数调试面板
+│   ├── PromptEditor.tsx        # Prompt编辑器
+│   ├── TestChat.tsx           # 测试对话
+│   └── AssistantCard.tsx      # 助手卡片
+└── hooks/
+    ├── useAssistant.ts        # 助手管理
+    └── useCommunity.ts        # 社区数据
+```
+
+### 后端架构
+```
+backend/
+├── models_community.py        # 数据模型
+├── api/
+│   ├── community_routes.py    # 社区API
+│   └── assistant_routes.py    # 助手管理API
+├── services/
+│   ├── assistant_service.py   # 助手业务逻辑
+│   └── community_service.py   # 社区功能
+└── storage/
+    ├── assistants.json        # 助手数据
+    └── community.json         # 社区数据
+```
+
+## 🚀 MVP功能优先级
+
+### Phase 1: 核心创建器 (优先级: 高)
+- [ ] **参数调试面板**
+  - Temperature, Max Tokens, Top-P, Frequency Penalty
+  - 实时参数效果预览
+  - 参数说明和建议范围
+
+- [ ] **Prompt工程器**
+  - 系统提示词编辑器
+  - 示例对话管理
+  - 预设模板库
+
+- [ ] **实时测试环境**
+  - 即时对话测试
+  - 参数对比功能
+  - 测试历史记录
+
+### Phase 2: 本地存储 (优先级: 高)
+- [ ] **助手管理**
+  - 本地保存/加载
+  - 版本管理
+  - 导入/导出功能
+
+- [ ] **用户界面优化**
+  - 拖拽式参数调节
+  - 快捷模板选择
+  - 一键Fork功能
+
+### Phase 3: 社区功能 (优先级: 中)
+- [ ] **基础社区**
+  - 助手分享发布
+  - 分类浏览
+  - 搜索和筛选
+
+- [ ] **互动功能**
+  - 点赞和收藏
+  - 下载统计
+  - 简单评价系统
+
+### Phase 4: 高级功能 (优先级: 低)
+- [ ] **用户系统**
+  - 账户注册/登录
+  - 个人主页
+  - 关注功能
+
+- [ ] **社区生态**
+  - 详细评论系统
+  - 付费助手市场
+  - API接口开放
+
+## 💡 关键设计决策
+
+### 1. 参数调试体验
+```typescript
+// 实时参数预览
+const ParameterPanel = () => {
+  const [temperature, setTemperature] = useState(0.7)
+  const [previewText, setPreviewText] = useState('')
+  
+  // 参数变化时实时更新预览
+  useEffect(() => {
+    generatePreview(temperature)
+  }, [temperature])
+  
+  return (
+    <div>
+      <Slider 
+        value={temperature}
+        onChange={setTemperature}
+        hint={getTemperatureHint(temperature)}
+      />
+      <PreviewBox text={previewText} />
+    </div>
+  )
+}
+```
+
+### 2. Prompt工程辅助
+```typescript
+// 智能提示和模板
+const PromptEditor = () => {
+  const [prompt, setPrompt] = useState('')
+  const suggestions = usePromptSuggestions(prompt)
+  
+  return (
+    <div>
+      <Textarea 
+        value={prompt}
+        onChange={setPrompt}
+        placeholder="定义AI的角色和行为..."
+      />
+      <SuggestionPanel suggestions={suggestions} />
+      <TemplateGallery onSelect={setPrompt} />
+    </div>
+  )
+}
+```
+
+### 3. 社区发现算法
+```typescript
+// 个性化推荐
+const getCommunityRecommendations = (user: UserProfile) => {
+  const userInterests = analyzeUserInterests(user)
+  const trendingAssistants = getTrendingAssistants()
+  const personalizedRecs = getPersonalizedRecommendations(userInterests)
+  
+  return {
+    trending: trendingAssistants,
+    forYou: personalizedRecs,
+    newReleases: getNewestAssistants()
+  }
+}
+```
+
+## 🎨 用户体验设计
+
+### 创建流程优化
+1. **零门槛入门**: 提供向导式创建流程
+2. **即时反馈**: 参数调整立即显示效果
+3. **模板起步**: 从预设模板开始，降低创建难度
+4. **渐进增强**: 基础→高级参数，逐步解锁功能
+
+### 社区互动设计
+1. **发现机制**: 个性化推荐 + 分类浏览 + 搜索
+2. **质量保证**: 官方认证 + 社区评价 + 使用统计
+3. **激励体系**: 创作者积分 + 下载排行 + 精选推荐
+
+## 💼 商业模式建议
+
+### 免费版功能
+- 创建最多3个私人助手
+- 使用社区免费助手
+- 基础参数调试
+- 本地存储
+
+### 专业版功能 ($9.99/月)
+- 无限制创建助手
+- 高级参数调试
+- 私有助手分享
+- 云端同步
+- 优先技术支持
+
+### 企业版功能 ($49.99/月)
+- 团队协作功能
+- 私有部署选项
+- API集成���口
+- 企业级安全
+- 定制开发服务
+
+### 社区分成模式
+- 付费助手创作者分成 70%
+- 平台服务费 30%
+- 月度创作者激励计划
+
+## 🎯 成功指标
+
+### 用户参与度
+- 月活跃用户数
+- 助手创建数量
+- 平均使用时长
+- 用户留存率
+
+### 社区健康度
+- 助手分享率
+- 社区互动率
+- 高质量内容比例
+- 用户满意度评分
+
+### 商业指标
+- 付费转化率
+- 月经常性收入 (MRR)
+- 客户生命周期价值 (LTV)
+- 获客成本 (CAC)
+
+## 🚀 下一步行动
+
+1. **立即开始**: 实现基础的参数调试界面
+2. **用户测试**: 找5-10个潜在用户测试MVP
+3. **社区预热**: 准备20-30个高质量预设助手
+4. **技术优化**: 完善实时预览和保存功能
+5. **市场推广**: 制定社区增长策略
+
+这个产品方向非常有潜力，结合了技术创新和用户需求！建议先从MVP开始，快速验证核心价值主张。

PRODUCT_ROADMAP.md

@@ -0,0 +1,62 @@
+# Edge LLM 产品路线图 - 自定义AI助手平台
+
+## 🎯 产品愿景
+打造一个让用户能够轻松创建、调试和分享AI助手的平台，通过参数调优和prompt工程实现个性化AI体验。
+
+## 📋 功能模块
+
+### 1. 助手创建器 (Assistant Builder)
+- **参数调试面板**: Temperature, Max Tokens, Top-P, Frequency Penalty
+- **Prompt工程器**: System Prompt编辑器，示例对话管理
+- **实时测试**: 即时对话测试，参数效果预览
+- **版本管理**: 保存多个版本，回滚功能
+
+### 2. 社区市场 (Community Hub)
+- **用例库**: 分类浏览（编程、写作、分析、创意等）
+- **搜索发现**: 按场景、标签、评分搜索
+- **评价系统**: 点赞、评论、收藏、下载统计
+- **精选推荐**: 官方精选、热门趋势
+
+### 3. 个人工作台 (Workspace)
+- **我的助手**: 创建的助手管理
+- **收藏夹**: 喜欢的社区助手
+- **使用历史**: 对话记录、使用统计
+- **分享管理**: 发布状态、反馈管理
+
+## 🚀 分阶段实施计划
+
+### Phase 1: 基础创建器 (4-6周)
+- [ ] 助手创建界面
+- [ ] 基础参数调试
+- [ ] 本地保存功能
+- [ ] 简单测试环境
+
+### Phase 2: 高级功能 (6-8周)
+- [ ] 高级prompt工程
+- [ ] 版本管理系统
+- [ ] 导入/导出功能
+- [ ] 批量测试工具
+
+### Phase 3: 社区功能 (8-10周)
+- [ ] 用户系统
+- [ ] 助手分享发布
+- [ ] 社区浏览界面
+- [ ] 评价和搜索
+
+### Phase 4: 生态完善 (ongoing)
+- [ ] 高级分析工具
+- [ ] API接口开放
+- [ ] 企业版功能
+- [ ] 移动端适配
+
+## 💼 商业模式
+1. **免费版**: 基础创建、有限保存
+2. **专业版**: 无限助手、高级分析、优先支持
+3. **企业版**: 私有部署、团队协作、API集成
+4. **社区分成**: 优质付费助手分成模式
+
+## 🎨 用户体验重点
+- **零门槛创建**: 拖拽式界面，可视化参数调节
+- **即时反馈**: 实时预览参数效果
+- **社区发现**: 个性化推荐算法
+- **协作友好**: 一键fork，版本对比

frontend/src/pages/Models.tsx

@@ -12,7 +12,9 @@ import {
   Info,
   CheckCircle,
   Cloud,
-  HardDrive
+  HardDrive,
+  Bot,
+  MessageSquare
 } from 'lucide-react'
 
 interface ModelInfo {
@@ -34,11 +36,36 @@ 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[]>([])
 
   useEffect(() => {
     fetchModels()
+    loadSavedAssistants()
   }, [])
 
+  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 fetchModels = async () => {
     try {
       const baseUrl = `${window.location.protocol}//${window.location.host}`
@@ -145,6 +172,54 @@ export function Models() {
             </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>
+              <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>
+                ))}
+              </div>
+            </div>
+          )}
+
           {/* API Models Section */}
           <div>
             <h2 className="text-xl font-semibold mb-4 flex items-center gap-2">

frontend/src/pages/Playground.tsx

@@ -4,6 +4,8 @@ import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card'
 import { Slider } from '@/components/ui/slider'
 import { Label } from '@/components/ui/label'
 import { Badge } from '@/components/ui/badge'
+import { Input } from '@/components/ui/input'
+import { Textarea } from '@/components/ui/textarea'
 import { 
   Select,
   SelectContent,
@@ -49,7 +51,9 @@ import {
   Download,
   AlertTriangle,
   Plus,
-  Trash2
+  Trash2,
+  Save,
+  Bot
 } from 'lucide-react'
 
 interface ModelInfo {
@@ -100,9 +104,42 @@ export function Playground() {
   const [showLoadConfirm, setShowLoadConfirm] = useState(false)
   const [pendingModelToLoad, setPendingModelToLoad] = useState<ModelInfo | null>(null)
   
+  // Assistant saving
+  const [showSaveAssistant, setShowSaveAssistant] = useState(false)
+  const [assistantName, setAssistantName] = useState('')
+  const [assistantDescription, setAssistantDescription] = useState('')
+  
   // Model management state
   const [models, setModels] = useState<ModelInfo[]>([])
 
+  // Assistant management
+  const saveAssistant = () => {
+    if (!assistantName.trim()) return
+    
+    const assistant = {
+      id: Date.now().toString(),
+      name: assistantName,
+      description: assistantDescription,
+      model: selectedModel,
+      systemPrompt: systemPrompt,
+      temperature: temperature,
+      maxTokens: maxTokens,
+      createdAt: new Date().toISOString()
+    }
+    
+    // Save to localStorage
+    const savedAssistants = JSON.parse(localStorage.getItem('savedAssistants') || '[]')
+    savedAssistants.push(assistant)
+    localStorage.setItem('savedAssistants', JSON.stringify(savedAssistants))
+    
+    // Reset form
+    setAssistantName('')
+    setAssistantDescription('')
+    setShowSaveAssistant(false)
+    
+    alert('助手保存成功！可在模型目录中查看。')
+  }
+
   // Preset system prompts
   const systemPromptPresets = [
     {
@@ -158,8 +195,34 @@ export function Playground() {
   // Load available models on startup
   useEffect(() => {
     fetchModels()
+    // Check if we need to load an assistant configuration
+    loadAssistantIfNeeded()
   }, [])
 
+  const loadAssistantIfNeeded = () => {
+    try {
+      const assistantConfig = localStorage.getItem('loadAssistantConfig')
+      if (assistantConfig) {
+        const assistant = JSON.parse(assistantConfig)
+        // Load the assistant configuration
+        setSelectedModel(assistant.model)
+        setSystemPrompt(assistant.systemPrompt || '')
+        setTemperature(assistant.temperature || 0.7)
+        setMaxTokens(assistant.maxTokens || 1024)
+        
+        // Clear the load flag
+        localStorage.removeItem('loadAssistantConfig')
+        
+        // Show a success message
+        setTimeout(() => {
+          alert(`Assistant "${assistant.name}" loaded successfully!`)
+        }, 500)
+      }
+    } catch (error) {
+      console.error('Failed to load assistant configuration:', error)
+    }
+  }
+
   // Update selected model when models change
   useEffect(() => {
     // Only reset if the selected model no longer exists in the models list
@@ -425,6 +488,15 @@ export function Playground() {
                 <Upload className="h-4 w-4 mr-2" />
                 <span className="hidden sm:inline">Import</span>
               </Button>
+              <Button 
+                variant="outline" 
+                size="sm" 
+                className="flex-shrink-0"
+                onClick={() => setShowSaveAssistant(true)}
+              >
+                <Save className="h-4 w-4 mr-2" />
+                <span className="hidden sm:inline">Save Assistant</span>
+              </Button>
               <Button variant="outline" size="sm" className="flex-shrink-0">
                 <Share className="h-4 w-4 mr-2" />
                 <span className="hidden sm:inline">Export</span>
@@ -765,6 +837,61 @@ export function Playground() {
           </AlertDialogFooter>
         </AlertDialogContent>
       </AlertDialog>
+
+      {/* Save Assistant Dialog */}
+      <AlertDialog open={showSaveAssistant} onOpenChange={setShowSaveAssistant}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle className="flex items-center gap-2">
+              <Bot className="h-5 w-5 text-blue-500" />
+              Save Current Configuration as Assistant
+            </AlertDialogTitle>
+            <AlertDialogDescription>
+              Save your current model settings and system prompt as a reusable assistant.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <div className="space-y-4 py-4">
+            <div>
+              <Label htmlFor="assistant-name">Assistant Name</Label>
+              <Input
+                id="assistant-name"
+                value={assistantName}
+                onChange={(e) => setAssistantName(e.target.value)}
+                placeholder="e.g., Code Review Expert"
+                className="mt-1"
+              />
+            </div>
+            <div>
+              <Label htmlFor="assistant-description">Description</Label>
+              <Textarea
+                id="assistant-description"
+                value={assistantDescription}
+                onChange={(e) => setAssistantDescription(e.target.value)}
+                placeholder="Describe what this assistant is good at..."
+                rows={3}
+                className="mt-1"
+              />
+            </div>
+            <div className="bg-muted p-3 rounded-md text-sm">
+              <div className="font-medium mb-2">Current Configuration:</div>
+              <div className="space-y-1 text-muted-foreground">
+                <div>Model: {selectedModel}</div>
+                <div>Temperature: {temperature}</div>
+                <div>Max Tokens: {maxTokens}</div>
+                <div>System Prompt: {systemPrompt ? systemPrompt.slice(0, 50) + '...' : 'None'}</div>
+              </div>
+            </div>
+          </div>
+          <AlertDialogFooter>
+            <AlertDialogCancel onClick={() => setShowSaveAssistant(false)}>
+              Cancel
+            </AlertDialogCancel>
+            <AlertDialogAction onClick={saveAssistant} disabled={!assistantName.trim()}>
+              Save Assistant
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
     </div>
   )
 }