提示词进化系统：AI驱动的提示词管理与优化平台

开发背景与项目概述

在人工智能快速发展的今天，提示词（Prompt）已成为连接用户与大型语言模型的关键桥梁。然而，提示词的设计与优化一直是AI应用开发的痛点：如何创建高质量的提示词？如何迭代优化？如何管理不同版本的变体？如何追溯提示词的进化历史？ 这些问题困扰着广大AIGC爱好者和开发者。

正是基于这些痛点，liudef开发了提示词进化系统——一个可视化、智能化的提示词管理与进化平台。该系统不仅帮助用户通过AI生成提示词变体，还能以图形化方式展示提示词的进化历程，支持版本回溯、多维度筛选和批量操作，极大提升了提示词工程的效率和效果。

项目地址：https://gitcode.com/Liudef06/liumo-base/blob/master/src/main/resources/static/prompt-evolution.html

核心功能与创新点

1. 可视化提示词进化图谱

系统采用Canvas绘图技术，将提示词的进化过程以树状图形式可视化展示。每个节点代表一个提示词版本，连线表示父子关系，颜色和样式反映评分和质量等级。

2. AI智能生成变体

集成多个AI平台（魔搭社区、DeepSeek官方），支持一键生成提示词变体。用户可自定义生成数量、改写要求、语言风格等参数，系统自动调用AI接口生成多样化变体。

3. 多维度筛选与管理

• 星级筛选：按1-5星评级快速定位高质量提示词
• 关键词搜索：全文检索提示词内容
• 模型适用性标注：标注提示词适用的AI模型
• 批量操作：支持多选、复制、删除等批量处理

4. 高级配置与隐私保护

• 多API密钥管理：支持密钥轮询，提高调用成功率
• 无痕模式：隐私敏感场景下的临时使用模式
• 数据保留策略：灵活设置数据存储时间
• 分享功能：支持项目导出与分享

系统架构与技术栈

技术架构概览

表1：系统技术栈一览

技术类别	具体技术	用途说明
前端框架	原生HTML5 + CSS3 + JavaScript	无需依赖第三方库，轻量高效
图形渲染	HTML5 Canvas	实现可缩放、拖拽的进化图谱
UI设计	CSS Grid + Flexbox + 自定义CSS变量	响应式布局，深色主题
AI集成	Fetch API + RESTful接口	连接魔搭社区、DeepSeek等AI平台
数据存储	Web Storage API (localStorage)	本地持久化存储，支持离线使用
交互特性	拖拽API、剪贴板API、键盘快捷键	提供流畅的用户体验

核心模块设计

系统采用模块化设计，主要包含以下核心模块：

1. 画布渲染模块：负责进化图谱的绘制、缩放、拖拽等交互
2. 节点管理模块：处理节点的创建、选择、删除、移动等操作
3. AI集成模块：封装不同AI平台的API调用逻辑
4. 配置管理模块：管理系统设置、API密钥、外观偏好等
5. 数据持久化模块：处理项目的保存、加载、导入、导出

核心代码详解

1. Canvas渲染引擎

// 画布初始化与渲染循环
function init() {
    canvas = document.getElementById('evolutionCanvas');
    ctx = canvas.getContext('2d');
    resizeCanvas();
    loadConfig();
    loadProject();
    initEventListeners();
    
    if (nodes.length === 0) {
        createInitialNode();
    }
    
    renderCanvas();
    startAutoSave();
    showNotification('加载成功！(*￣︶￣)', 'success');
}

function renderCanvas() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.save();
    ctx.translate(canvasOffset.x * canvasScale, canvasOffset.y * canvasScale);
    ctx.scale(canvasScale, canvasScale);
    
    if (config.appearance.showGrid) drawGrid();
    drawEdges();
    drawNodes();
    ctx.restore();
}

关键技术点：

• 使用Canvas 2D Context进行高性能图形渲染
• 实现坐标系变换，支持平滑缩放和平移
• 分层渲染策略：先绘制网格，再绘制连线，最后绘制节点
• 双缓冲机制：通过保存和恢复画布状态避免闪烁

2. 节点数据结构与生命周期管理

// 节点数据结构定义
const newNode = {
    id: 'node-' + Date.now() + '-' + index,
    parentId: parentNode.id,
    content: variantContent,
    rating: 0,
    position: { x, y },
    size: { width: 260, height: 160 },
    createdAt: Date.now(),
    language: parentNode.language || 'zh',
    modelFor: modelFor || parentNode.modelFor || '',
    generationConfig: { ...parentNode.generationConfig },
    isRootNode: false,
    selected: false,
    highlighted: false  // 用于搜索高亮
};

// 节点创建与布局算法
function createChildNodes(parentNode, variants) {
    const parentX = parentNode.position.x;
    const parentY = parentNode.position.y;
    const nodeWidth = 260;
    const horizontalSpacing = 300;
    
    // 自动计算布局：子节点水平均匀分布
    const startX = parentX - ((variants.length - 1) * horizontalSpacing) / 2;
    
    variants.forEach((variant, index) => {
        const x = startX + index * horizontalSpacing;
        const y = parentY + 200; // 垂直间距
        
        // 动态计算节点高度基于内容长度
        const lines = wrapTextForNode(variant, nodeWidth - 40);
        const nodeHeight = Math.max(160, 40 + lines.length * 20);
        
        // 创建节点对象...
    });
}

设计亮点：

• 自适应的节点高度：根据内容长度动态调整节点尺寸
• 智能布局算法：自动计算子节点的位置，保持树形结构清晰
• 完整的状态管理：每个节点包含内容、评分、生成配置等完整元数据
• 继承机制：子节点自动继承父节点的语言、模型适用性等属性

3. AI变体生成引擎

// AI变体生成核心逻辑
async function generateVariants() {
    // 参数验证与配置
    const rewriteInstruction = document.getElementById('rewriteInstruction').value;
    let variantCount = parseInt(document.getElementById('variantCount').value);
    
    // 智能提示词组装
    const message = assembleLLMRequest(
        selectedNode.content, 
        rewriteInstruction, 
        variantCount, 
        language, 
        isNatural
    );
    
    // 多平台API适配
    const provider = config.defaults.provider;
    const apiKey = getCurrentApiKey(provider); // 支持密钥轮询
    
    // API调用与错误处理
    try {
        const response = await fetch(providerConfig.endpoint, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${apiKey}`
            },
            body: JSON.stringify({
                model: document.getElementById('llmModel').value,
                messages: [
                    { role: "system", content: "你是一个专业的提示词优化助手..." },
                    { role: "user", content: message }
                ],
                temperature: config.defaults.temperature,
                max_tokens: config.defaults.maxTokens,
                stream: false
            })
        });
        
        // 响应解析与变体提取
        const data = await response.json();
        const content = data.choices[0].message.content;
        const variants = content.split('---').map(v => v.trim()).filter(v => v.length > 0);
        
        // 创建子节点
        createChildNodes(selectedNode, variants);
        
    } catch (error) {
        // 优雅降级：本地模拟生成
        if (window.location.hostname === 'localhost') {
            return generateMockVariants(message, variantCount);
        }
        throw error;
    }
}

创新特性：

• 多平台适配：统一接口支持魔搭社区、DeepSeek等不同AI平台
• 密钥轮询机制：自动切换多个API密钥，提高服务可用性
• 智能提示工程：自动组装系统提示词，优化生成质量
• 优雅降级：本地开发环境下提供模拟数据，不依赖网络

高级功能实现

1. 多选与批量操作系统

// 多选状态管理
let selectedNodes = [];
let isCtrlPressed = false;
let isShiftPressed = false;
let isSelecting = false;

// 框选功能实现
function handleCanvasMouseDown(e) {
    const rect = canvas.getBoundingClientRect();
    const x = (e.clientX - rect.left) / canvasScale - canvasOffset.x;
    const y = (e.clientY - rect.top) / canvasScale - canvasOffset.y;
    
    if (e.button === 0) { // 左键
        if (clickedNode) {
            // 节点选择逻辑
            selectNode(clickedNode, !isCtrlPressed && !isShiftPressed);
        } else if (isCtrlPressed) {
            // 开启框选模式
            isSelecting = true;
            selectionStart = { x, y };
            document.getElementById('selectionBox').style.display = 'block';
        }
    }
}

// 批量操作命令系统
function copySelectedNodesToClipboard() {
    if (selectedNodes.length === 0) return;
    
    // 计算相对位置，保持粘贴时的相对布局
    const rect = canvas.getBoundingClientRect();
    const worldX = (mousePosition.x - rect.left) / canvasScale - canvasOffset.x;
    const worldY = (mousePosition.y - rect.top) / canvasScale - canvasOffset.y;
    
    clipboard.nodes = JSON.parse(JSON.stringify(selectedNodes));
    clipboard.offset = calculateNodesOffset(selectedNodes, worldX, worldY);
    
    showNotification(`已复制${selectedNodes.length}个节点到剪贴板`, 'success');
}

表2：键盘快捷键系统

快捷键	功能	实现机制
Ctrl+点击	多选/取消选择节点	事件监听 + 状态管理
鼠标拖拽	框选多个节点	Canvas选择框 + 碰撞检测
Ctrl+C	复制选中节点	剪贴板API + 深拷贝
Ctrl+V	粘贴节点	相对位置计算 + ID重映射
Delete	删除选中节点	级联检查 + 确认机制
Ctrl+A	全选所有节点	遍历节点数组 + 状态更新
Esc	清除选择	状态重置 + UI更新
鼠标滚轮	画布缩放	变换矩阵计算 + 中心点保持

2. 智能筛选与搜索系统

// 多维度筛选引擎
function applyFilters() {
    const textQuery = currentTextFilter.toLowerCase();
    
    nodes.forEach(node => {
        // 文本匹配：内容和模型适用性字段
        const textMatch = textQuery === '' ||
            node.content.toLowerCase().includes(textQuery) ||
            (node.modelFor && node.modelFor.toLowerCase().includes(textQuery));
        
        // 星级匹配：大于等于指定星级
        const ratingMatch = currentRatingFilter === 0 ||
            (node.rating >= currentRatingFilter);
        
        // 综合评估
        node.highlighted = textMatch && ratingMatch;
    });
    
    // 视觉反馈：高亮匹配节点
    renderCanvas();
    updateFilterStatus();
}

// 星级筛选UI交互
function setRatingFilter(rating) {
    currentRatingFilter = rating;
    
    // 交互反馈：点亮星星
    document.querySelectorAll('.rating-filter-star').forEach((star, index) => {
        if (index < rating) {
            star.classList.add('active');
        } else {
            star.classList.remove('active');
        }
    });
    
    applyFilters();
}

3. 配置管理系统

// 多API密钥管理
function updateKeyUI() {
    const provider = document.getElementById('llmProvider').value;
    
    if (provider === 'modelscope') {
        // 多密钥界面：支持添加、删除、编辑多个密钥
        renderModelscopeKeys();
        updateKeyStats();
    } else {
        // 单密钥界面
        document.getElementById('singleKeyConfig').style.display = 'block';
    }
}

// 密钥轮询算法
function getCurrentApiKey(provider) {
    if (provider === 'modelscope') {
        const validKeys = providerConfig.apiKeys.filter(k => k.trim().length > 0);
        
        if (validKeys.length === 0) {
            throw new Error('未配置有效的API密钥');
        }
        
        // 轮询选择密钥
        const index = providerConfig.currentKeyIndex % validKeys.length;
        const key = validKeys[index];
        
        // 更新索引（为下一次请求准备）
        providerConfig.currentKeyIndex = (index + 1) % validKeys.length;
        
        return key;
    }
}

用户体验设计

界面布局与交互设计

系统采用专业深色主题，降低长时间使用的视觉疲劳。界面分为三个主要区域：

1. 顶部工具栏：项目操作、搜索筛选、项目信息
2. 中央画布区：可视化进化图谱，支持缩放拖拽
3. 右侧侧边栏：提示词编辑、生成配置、操作按钮

响应式设计

/* 响应式布局适配 */
@media (max-width: 1100px) {
    .sidebar { width: 340px; }
    .toolbar-center { flex-direction: column; }
}

@media (max-width: 900px) {
    .main-content { flex-direction: column; }
    .sidebar { width: 100%; height: 340px; }
    .toolbar { flex-wrap: wrap; gap: 12px; }
}

动画与反馈

系统包含丰富的微交互和视觉反馈：

• 平滑过渡动画：按钮悬停、模态框弹出、画布缩放
• 实时状态反馈：保存状态、选中状态、筛选状态
• 智能通知系统：操作成功/失败提示、加载状态指示

数据模型与存储

项目数据结构

表3：核心数据模型

字段名	类型	描述	示例
id	String	项目唯一标识	“project-1640995200000”
name	String	项目名称	“我的提示词进化项目”
description	String	项目描述	“用于优化客服机器人提示词”
createdAt	Number	创建时间戳	1640995200000
nodes	Array	节点数组	[node1, node2, …]
version	String	数据格式版本	“1.0”

节点数据结构

{
    id: "node-1640995200000-1",
    parentId: "node-1640995200000-0", // null表示根节点
    content: "你是一个专业的客服助手...",
    rating: 4, // 1-5星评级
    position: { x: 500, y: 300 },
    size: { width: 260, height: 180 },
    createdAt: 1640995200000,
    language: "zh",
    modelFor: "适用于GPT-4和Claude-2",
    generationConfig: {
        variantCount: 3,
        rewriteInstruction: "更简洁专业",
        language: "zh",
        isNatural: true
    },
    isRootNode: false,
    selected: false,
    highlighted: false
}

数据持久化策略

系统采用分层存储策略：

1. 本地存储：使用localStorage保存项目和配置
2. 导入/导出：JSON格式，支持跨设备迁移
3. 无痕模式：隐私保护，不保存敏感数据
4. 版本控制：数据格式版本化，确保兼容性

性能优化与最佳实践

1. Canvas性能优化

// 渲染优化：减少不必要的重绘
function renderCanvas() {
    // 使用离屏渲染优化复杂图形
    if (!offscreenCanvas) {
        offscreenCanvas = document.createElement('canvas');
        offscreenCtx = offscreenCanvas.getContext('2d');
    }
    
    // 批量绘制操作
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    // 只重绘变化部分
    if (needsFullRedraw) {
        drawEverything();
    } else {
        drawChangedPartsOnly();
    }
}

2. 内存管理

// 避免内存泄漏
function cleanup() {
    // 移除事件监听器
    window.removeEventListener('resize', resizeCanvas);
    document.removeEventListener('keydown', handleKeyDown);
    
    // 清理定时器
    if (autoSaveInterval) {
        clearInterval(autoSaveInterval);
    }
    
    // 释放Canvas资源
    canvas = null;
    ctx = null;
}

3. 网络请求优化

// API请求优化：超时、重试、缓存
async function callLLMAPIWithRetry(message, maxRetries = 3) {
    for (let i = 0; i < maxRetries; i++) {
        try {
            return await callLLMAPI(message);
        } catch (error) {
            if (i === maxRetries - 1) throw error;
            
            // 指数退避重试
            await new Promise(resolve => 
                setTimeout(resolve, 1000 * Math.pow(2, i))
            );
            
            // 切换API密钥（如果支持多密钥）
            rotateApiKey();
        }
    }
}

应用场景与使用案例

1. 提示词工程迭代

• 场景：AI应用开发者需要优化客服机器人提示词
• 流程：
  1. 创建根节点：基础客服提示词
  2. 生成变体：生成3个不同风格的变体
  3. 测试评估：在实际对话中测试效果
  4. 评分筛选：给效果好的变体打4-5星
  5. 进一步优化：基于高分变体生成下一代变体

2. 多模型提示词适配

• 场景：为不同AI模型（GPT-4、Claude、文心一言）准备专用提示词
• 流程：
  1. 创建分支：基于通用提示词创建不同模型分支
  2. 模型特定优化：针对每个模型的特点优化提示词
  3. 标注适用性：使用modelFor字段标注适用模型
  4. 统一管理：在一个项目中管理所有模型变体

3. 团队协作与知识共享

• 场景：AI团队共享和迭代提示词库
• 流程：
  1. 导出项目：将优化后的提示词树导出为JSON
  2. 团队分享：通过分享功能发送给团队成员
  3. 合并优化：团队成员添加新变体或改进
  4. 版本管理：通过导出/导入实现简单版本控制

扩展性与未来发展

1. 待开发功能

• 云端同步：跨设备数据同步
• 团队协作：实时多人协作编辑
• API服务：提供提示词管理API
• 插件系统：支持自定义扩展

2. 技术演进方向

• WebGL渲染：提升大规模图谱渲染性能
• AI评分：自动评估提示词质量
• 智能布局：更美观的自动布局算法
• 模板系统：预置常用提示词模板

部署与使用指南

1. 快速开始

# 1. 克隆项目
git clone https://gitcode.com/Liudef06/liumo-base.git

# 2. 直接打开HTML文件
# 或者部署到Web服务器

2. 配置AI平台

1. 访问魔搭社区获取API密钥
2. 或在DeepSeek平台创建API密钥
3. 在系统设置中配置API密钥

3. 基础操作流程

1. 创建项目：点击"新建项目"按钮
2. 添加根节点：双击画布空白区域
3. 编辑提示词：在侧边栏修改内容
4. 生成变体：配置参数后点击"AI生成变体"
5. 评分筛选：为优质变体评分，使用星级筛选
6. 导出分享：完成优化后导出项目

社区与贡献

项目资源链接

1. 项目主页：GitCode仓库
2. 问题反馈：Issue跟踪
3. 在线演示：可直接运行的HTML

贡献指南

1. 报告问题：使用GitCode的Issue功能
2. 提交改进：通过Pull Request贡献代码
3. 功能建议：在讨论区提出新功能想法
4. 文档改进：帮助完善使用文档

总结

提示词进化系统是一个创新性的可视化提示词管理工具，它成功解决了AIGC领域中的几个核心痛点：

1. 可视化复杂性管理：将抽象的提示词优化过程转化为直观的树状图
2. 智能化迭代加速：通过AI自动生成变体，大幅提升优化效率
3. 系统化知识沉淀：完整记录提示词的进化历史，形成可复用的知识资产
4. 友好的人机交互：精心设计的界面和交互，降低使用门槛

该项目的技术亮点包括：

• 纯前端实现：无需后端服务器，开箱即用
• 跨平台兼容：基于Web标准，支持所有现代浏览器
• 高性能渲染：Canvas优化技术，支持大规模数据
• 模块化架构：清晰的代码结构，易于扩展维护

随着AI技术的普及，提示词工程的重要性日益凸显。提示词进化系统为这一领域提供了一个强大而优雅的解决方案，无论是AI研究者、应用开发者还是普通爱好者，都能从中受益。项目采用开源模式，期待社区的参与和贡献，共同推动提示词工程的发展。

提示词进化，从这里开始。