标签归档:AI

NoCode LowCode的转型

翻之前的电脑,发现20/21年时候,下载的一些No Code/Low Code的行业报告,想起来当年14/15年的时候也做过一些No Code的产品,也给客户用过。

再联想到现在AI编程已经逐渐普及,相比之下,不知道低代码这个行业现在运作得怎么样了。

于是检索了两家榜上的低代码公司,一家22年后已经不再有什么新闻了,另一家则频繁有动作,还把AI编程合进了低代码产品中。

所以,to B的市场一直存在,AI编程并不能直接抛给客户,相反,可以做一些包装,以保证产品继续演进,又有更好的能力应对to B世界里面的无穷定制化的需要。

用deepseek写的第一个web 数字游戏

交互了几次,AI后面就开始顾此失彼了,也许一开始就把完整的游戏说明给它也许会好一点。

游戏就是选择相邻的格子的数字用四则运算生成新的数字,如果匹配到目标数字则消减并目标数字++。

新格子的数字用递增的方式填充。所以目标数字能玩到18、19已经是极限了

贴代码:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>目标挑战数字格子游戏</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }
        
        .container {
            width: 100%;
            max-width: 900px;
            background-color: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
            overflow: hidden;
        }
        
        header {
            background: linear-gradient(90deg, #4b6cb7, #182848);
            color: white;
            text-align: center;
            padding: 25px 20px;
            position: relative;
        }
        
        h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
        }
        
        .subtitle {
            font-size: 1.1rem;
            opacity: 0.9;
            margin-bottom: 10px;
        }
        
        .game-rules {
            background: rgba(255, 255, 255, 0.15);
            border-radius: 10px;
            padding: 10px;
            font-size: 0.9rem;
            max-width: 600px;
            margin: 0 auto;
        }
        
        .main-game-area {
            display: flex;
            flex-direction: column;
            padding: 20px;
        }
        
        .target-area {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #f8f9fa;
            border-radius: 15px;
            padding: 15px;
            margin-bottom: 20px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }
        
        .target-display {
            font-size: 2.2rem;
            color: #e74c3c;
            font-weight: bold;
            text-align: center;
            flex: 1;
        }
        
        .chances {
            display: flex;
            gap: 8px;
        }
        
        .chance {
            width: 25px;
            height: 25px;
            background: #2ecc71;
            border-radius: 50%;
        }
        
        .chance.lost {
            background: #e74c3c;
        }
        
        .game-area {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
        }
        
        .grid-container {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: repeat(3, 1fr);
            gap: 12px;
            flex: 1;
            max-width: 600px;
        }
        
        .cell {
            aspect-ratio: 1/1;
            background: linear-gradient(145deg, #e6e6e6, #ffffff);
            border-radius: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 2.2rem;
            font-weight: bold;
            color: #333;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            border: 3px solid transparent;
            position: relative;
            overflow: hidden;
        }
        
        .cell:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
        }
        
        .cell.selected {
            background: linear-gradient(145deg, #43cea2, #185a9d);
            color: white;
            border-color: #fff;
            box-shadow: 0 0 15px rgba(67, 206, 162, 0.5);
        }
        
        .cell.operator-source {
            background: linear-gradient(145deg, #FFA62B, #EA4C89);
            color: white;
            border-color: #fff;
            box-shadow: 0 0 15px rgba(234, 76, 137, 0.5);
        }
        
        .cell.adjacent {
            background: linear-gradient(145deg, #b5ff7d, #5b8c2a);
            box-shadow: 0 0 12px rgba(91, 140, 42, 0.5);
            animation: pulse 1.5s infinite;
        }
        
        .cell.empty {
            background: linear-gradient(145deg, #d1d1d1, #a0a0a0);
            color: #777;
            cursor: not-allowed;
        }
        
        .cell.new-value {
            animation: newValueHighlight 1s;
        }
        
        .cell.target-match {
            background: linear-gradient(145deg, #ff416c, #ff4b2b);
            color: white;
            box-shadow: 0 0 20px rgba(255, 75, 43, 0.7);
            animation: targetMatch 1s infinite;
        }
        
        .operation-panel {
            width: 120px;
            display: flex;
            flex-direction: column;
            gap: 15px;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 12px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }
        
        .operator-btn {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 2.2rem;
            font-weight: bold;
            background: linear-gradient(145deg, #f5f7fa, #c3cfe2);
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 2px solid transparent;
            color: #4a5568;
        }
        
        .operator-btn:hover {
            transform: scale(1.05);
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
        }
        
        .operator-btn.selected {
            background: linear-gradient(145deg, #FFA62B, #EA4C89);
            color: white;
            border-color: #fff;
            box-shadow: 0 0 15px rgba(234, 76, 137, 0.5);
        }
        
        .stats {
            background-color: #f8f9fa;
            border-radius: 12px;
            padding: 15px;
            margin: 0 20px 15px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }
        
        .stats h2 {
            text-align: center;
            color: #2c3e50;
            margin-bottom: 12px;
            font-size: 1.5rem;
        }
        
        .status-bar {
            background: #e3f2fd;
            border-radius: 8px;
            padding: 12px;
            text-align: center;
            font-size: 1.2rem;
            font-weight: 500;
            color: #1a237e;
            margin-bottom: 12px;
            min-height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .controls {
            display: flex;
            justify-content: center;
            gap: 15px;
            padding: 0 20px 20px;
        }
        
        button {
            padding: 12px 25px;
            font-size: 1rem;
            border: none;
            border-radius: 40px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: bold;
            letter-spacing: 0.5px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
        
        #resetBtn {
            background: linear-gradient(to right, #e74c3c, #c0392b);
            color: white;
        }
        
        #hintBtn {
            background: linear-gradient(to right, #3498db, #2980b9);
            color: white;
        }
        
        #startBtn {
            background: linear-gradient(to right, #2ecc71, #27ae60);
            color: white;
        }
        
        button:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
        }
        
        button:active {
            transform: translateY(1px);
        }
        
        footer {
            text-align: center;
            padding: 15px;
            color: #7f8c8d;
            font-size: 0.9rem;
            background-color: rgba(0, 0, 0, 0.03);
            border-top: 1px solid rgba(0, 0, 0, 0.05);
        }
        
        .score-board {
            display: flex;
            justify-content: space-between;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 10px;
            padding: 10px 15px;
            font-weight: bold;
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
            margin-top: 10px;
        }
        
        .score-item {
            text-align: center;
            flex: 1;
        }
        
        .score-value {
            font-size: 1.5rem;
            font-weight: bold;
            color: #3498db;
        }
        
        @keyframes pulse {
            0% { transform: scale(1); box-shadow: 0 0 10px rgba(91, 140, 42, 0.5); }
            50% { transform: scale(1.03); box-shadow: 0 0 15px rgba(91, 140, 42, 0.7); }
            100% { transform: scale(1); box-shadow: 0 0 10px rgba(91, 140, 42, 0.5); }
        }
        
        @keyframes newValueHighlight {
            0% { transform: scale(1); background: linear-gradient(145deg, #ffeb3b, #ff9800); }
            50% { transform: scale(1.08); box-shadow: 0 0 20px rgba(255, 152, 0, 0.6); }
            100% { transform: scale(1); }
        }
        
        @keyframes fallDown {
            0% { transform: translateY(-80px); opacity: 0; }
            100% { transform: translateY(0); opacity: 1; }
        }
        
        @keyframes targetMatch {
            0% { transform: scale(1); box-shadow: 0 0 12px rgba(255, 75, 43, 0.6); }
            50% { transform: scale(1.08); box-shadow: 0 0 25px rgba(255, 75, 43, 0.8); }
            100% { transform: scale(1); box-shadow: 0 0 12px rgba(255, 75, 43, 0.6); }
        }
        
        @keyframes disappear {
            0% { transform: scale(1); opacity: 1; }
            100% { transform: scale(0); opacity: 0; }
        }
        
        @media (max-width: 768px) {
            .game-area {
                flex-direction: column;
            }
            
            .operation-panel {
                width: 100%;
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: center;
            }
            
            .operator-btn {
                width: 70px;
                height: 70px;
                font-size: 1.8rem;
            }
            
            h1 {
                font-size: 2rem;
            }
            
            .grid-container {
                max-width: 100%;
            }
            
            .target-area {
                flex-direction: column;
                gap: 10px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>目标挑战数字格子游戏</h1>
            <div class="subtitle">达成目标数字,挑战最高得分!</div>
            <div class="game-rules">
                游戏规则:选择数字 → 运算符 → 相邻数字 → 结果替换 → 结算目标数字
            </div>
        </header>
        
        <div class="main-game-area">
            <div class="target-area">
                <div class="target-display">
                    目标数字: <span id="targetDisplay">1</span>
                </div>
                <div class="chances">
                    <span>剩余机会:</span>
                    <div class="chances" id="chancesContainer">
                        <div class="chance"></div>
                        <div class="chance"></div>
                        <div class="chance"></div>
                    </div>
                </div>
            </div>
            
            <div class="game-area">
                <div class="grid-container" id="gridContainer">
                    <!-- 格子将由JavaScript生成 -->
                </div>
                
                <div class="operation-panel">
                    <div class="operator-btn" data-operator="+">+</div>
                    <div class="operator-btn" data-operator="-">-</div>
                    <div class="operator-btn" data-operator="*">×</div>
                    <div class="operator-btn" data-operator="/">÷</div>
                </div>
            </div>
            
            <div class="score-board">
                <div class="score-item">
                    <div>当前得分</div>
                    <div class="score-value" id="currentScore">0</div>
                </div>
                <div class="score-item">
                    <div>最高得分</div>
                    <div class="score-value" id="highScore">0</div>
                </div>
                <div class="score-item">
                    <div>操作次数</div>
                    <div class="score-value" id="moveCount">0</div>
                </div>
            </div>
        </div>
        
        <div class="stats">
            <h2>操作状态</h2>
            <div class="status-bar" id="statusBar">
                请点击"开始游戏"按钮
            </div>
        </div>
        
        <div class="controls">
            <button id="hintBtn">游戏说明</button>
            <button id="startBtn">开始游戏</button>
            <button id="resetBtn">重置游戏</button>
        </div>
        
        <footer>
            <p>目标挑战数字格子游戏 &copy; 2023 | 策略性数学挑战</p>
        </footer>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const gridContainer = document.getElementById('gridContainer');
            const statusBar = document.getElementById('statusBar');
            const resetBtn = document.getElementById('resetBtn');
            const hintBtn = document.getElementById('hintBtn');
            const startBtn = document.getElementById('startBtn');
            const operatorBtns = document.querySelectorAll('.operator-btn');
            const targetDisplay = document.getElementById('targetDisplay');
            const chancesContainer = document.getElementById('chancesContainer');
            const highScoreEl = document.getElementById('highScore');
            const currentScoreEl = document.getElementById('currentScore');
            const moveCountEl = document.getElementById('moveCount');
            
            // 游戏状态
            let gameState = 'idle'; // idle, selectFirst, selectOperator, selectSecond
            let firstCell = null;
            let selectedOperator = null;
            let cells = [];
            let moveCount = 0;
            let nextNewNumber = 13;
            let targetNumber = 1;
            let remainingChances = 3;
            let currentScore = 0;
            let highScore = 0;
            let gameActive = false;
            
            // 创建3x4网格
            function createGrid() {
                gridContainer.innerHTML = '';
                cells = [];
                
                for (let i = 1; i <= 12; i++) {
                    const cell = document.createElement('div');
                    cell.className = 'cell';
                    cell.textContent = i;
                    cell.dataset.value = i;
                    cell.dataset.index = i-1;
                    
                    // 计算行列位置
                    const row = Math.floor((i-1) / 4);
                    const col = (i-1) % 4;
                    cell.dataset.row = row;
                    cell.dataset.col = col;
                    
                    cell.addEventListener('click', () => {
                        if (gameActive) handleCellClick(cell);
                    });
                    
                    gridContainer.appendChild(cell);
                    cells.push(cell);
                }
            }
            
            // 高亮相邻的格子
            function highlightAdjacentCells(cell) {
                // 先清除所有相邻标记
                cells.forEach(c => c.classList.remove('adjacent'));
                
                const row = parseInt(cell.dataset.row);
                const col = parseInt(cell.dataset.col);
                
                // 检查四个方向:上、右、下、左
                const directions = [
                    {r: row-1, c: col}, // 上
                    {r: row, c: col+1}, // 右
                    {r: row+1, c: col}, // 下
                    {r: row, c: col-1}  // 左
                ];
                
                // 标记相邻且非空的格子
                directions.forEach(dir => {
                    if (dir.r >= 0 && dir.r < 3 && dir.c >= 0 && dir.c < 4) {
                        const index = dir.r * 4 + dir.c;
                        const adjacentCell = cells[index];
                        
                        // 只标记非空格子
                        if (adjacentCell.textContent !== '') {
                            adjacentCell.classList.add('adjacent');
                        }
                    }
                });
            }
            
            // 处理格子点击
            function handleCellClick(cell) {
                // 忽略空单元格
                if (cell.textContent === '') return;
                
                switch(gameState) {
                    case 'selectFirst':
                        // 选择第一个数字
                        clearSelections();
                        cell.classList.add('selected');
                        firstCell = cell;
                        gameState = 'selectOperator';
                        highlightAdjacentCells(cell);
                        statusBar.textContent = `已选择: ${cell.textContent} → 请选择运算符`;
                        break;
                        
                    case 'selectOperator':
                        // 在等待选择运算符时点击数字,视为重新选择第一个数字
                        clearSelections();
                        cell.classList.add('selected');
                        firstCell = cell;
                        highlightAdjacentCells(cell);
                        statusBar.textContent = `已选择: ${cell.textContent} → 请选择运算符`;
                        break;
                        
                    case 'selectSecond':
                        // 检查是否相邻
                        const firstRow = parseInt(firstCell.dataset.row);
                        const firstCol = parseInt(firstCell.dataset.col);
                        const secondRow = parseInt(cell.dataset.row);
                        const secondCol = parseInt(cell.dataset.col);
                        
                        const rowDiff = Math.abs(firstRow - secondRow);
                        const colDiff = Math.abs(firstCol - secondCol);
                        
                        // 相邻判断:行或列差1,但不能同时差1(对角线)
                        const isAdjacent = (rowDiff === 1 && colDiff === 0) || 
                                          (rowDiff === 0 && colDiff === 1);
                        
                        if (!isAdjacent) {
                            statusBar.textContent = '错误:只能选择相邻的格子!';
                            return;
                        }
                        
                        // 选择第二个数字
                        if (cell === firstCell) {
                            statusBar.textContent = '不能选择同一个格子!请选择另一个数字';
                            return;
                        }
                        
                        const firstValue = parseFloat(firstCell.textContent);
                        const secondValue = parseFloat(cell.textContent);
                        
                        // 执行运算
                        let result;
                        let operationSymbol;
                        switch(selectedOperator) {
                            case '+':
                                result = firstValue + secondValue;
                                operationSymbol = '+';
                                break;
                            case '-':
                                result = firstValue - secondValue;
                                operationSymbol = '-';
                                break;
                            case '*':
                                result = firstValue * secondValue;
                                operationSymbol = '×';
                                break;
                            case '/':
                                if (secondValue === 0) {
                                    statusBar.textContent = '错误:不能除以零!';
                                    resetOperation();
                                    return;
                                }
                                result = firstValue / secondValue;
                                operationSymbol = '÷';
                                break;
                        }
                        
                        // 检查结果是否为正整数
                        if (result <= 0 || !Number.isInteger(result)) {
                            statusBar.textContent = '错误:结果必须为正整数!';
                            resetOperation();
                            return;
                        }
                        
                        // 保存原始值用于回退
                        const originalFirstValue = firstCell.textContent;
                        const originalSecondValue = cell.textContent;
                        
                        // 更新第一个格子
                        firstCell.textContent = result;
                        firstCell.dataset.value = result;
                        firstCell.classList.add('operator-source');
                        firstCell.classList.remove('selected');
                        firstCell.classList.add('new-value');
                        
                        // 清空第二个格子
                        cell.textContent = '';
                        cell.dataset.value = '';
                        cell.classList.remove('selected');
                        cell.classList.add('empty');
                        
                        // 更新操作次数
                        moveCount++;
                        moveCountEl.textContent = moveCount;
                        
                        // 显示操作结果
                        statusBar.innerHTML = `
                            <span style="color: #43cea2;">${originalFirstValue}</span> 
                            ${operationSymbol} 
                            <span style="color: #43cea2;">${originalSecondValue}</span> 
                            = 
                            <span style="color: #EA4C89; font-weight: bold;">${result}</span>
                        `;
                        
                        // 执行数字下移和填充
                        setTimeout(() => {
                            fillEmptyCells();
                            firstCell.classList.remove('new-value');
                            
                            // 结算目标数字
                            setTimeout(() => {
                                settleTargetNumbers();
                            }, 600);
                        }, 800);
                        break;
                }
            }
            
            // 结算目标数字
            function settleTargetNumbers() {
                let targetCells = [];
                
                // 检查所有格子是否包含目标数字
                cells.forEach(cell => {
                    if (cell.textContent === targetNumber.toString() && 
                        !cell.classList.contains('empty')) {
                        targetCells.push(cell);
                    }
                });
                
                if (targetCells.length > 0) {
                    // 高亮目标格子
                    targetCells.forEach(cell => {
                        cell.classList.add('target-match');
                    });
                    
                    // 清空目标格子
                    setTimeout(() => {
                        targetCells.forEach(cell => {
                            cell.classList.add('disappear');
                            
                            setTimeout(() => {
                                cell.textContent = '';
                                cell.dataset.value = '';
                                cell.classList.add('empty');
                                cell.classList.remove('target-match', 'disappear');
                            }, 400);
                        });
                        
                        // 增加当前分数
                        currentScore = targetNumber;
                        currentScoreEl.textContent = currentScore;
                        
                        // 更新最高分
                        if (currentScore > highScore) {
                            highScore = currentScore;
                            highScoreEl.textContent = highScore;
                            localStorage.setItem('highScore', highScore);
                        }
                        
                        // 目标数字递增
                        targetNumber++;
                        targetDisplay.textContent = targetNumber;
                        
                        // 重置剩余机会
                        remainingChances = 3;
                        updateChancesDisplay();
                        
                        // 状态提示
                        statusBar.innerHTML = `<span style="color: #27ae60;">达成目标 ${targetNumber-1}!新目标: ${targetNumber}</span>`;
                        
                        // 执行数字下移和填充
                        setTimeout(() => {
                            fillEmptyCells();
                            resetOperation();
                        }, 600);
                    }, 800);
                } else {
                    // 未找到目标数字
                    remainingChances--;
                    updateChancesDisplay();
                    
                    if (remainingChances <= 0) {
                        // 游戏结束
                        gameOver();
                    } else {
                        statusBar.innerHTML = `<span style="color: #e67e22;">未找到目标数字 ${targetNumber},剩余机会: ${remainingChances}</span>`;
                    }
                    
                    // 重置所有按钮状态
                    resetOperation();
                }
            }
            
            // 更新机会显示
            function updateChancesDisplay() {
                const chances = chancesContainer.querySelectorAll('.chance');
                chances.forEach((chance, index) => {
                    if (index < remainingChances) {
                        chance.classList.remove('lost');
                    } else {
                        chance.classList.add('lost');
                    }
                });
            }
            
            // 游戏结束
            function gameOver() {
                gameActive = false;
                statusBar.innerHTML = `<span style="color: #e74c3c; font-size: 1.4rem;">游戏结束!最终得分: ${currentScore}</span>`;
                
                // 禁用操作
                cells.forEach(cell => {
                    cell.style.pointerEvents = 'none';
                });
                
                operatorBtns.forEach(btn => {
                    btn.style.pointerEvents = 'none';
                });
            }
            
            // 填充空单元格
            function fillEmptyCells() {
                // 第一步:从上到下,从左到右移动数字填补空白
                // 创建一个二维数组表示当前网格状态
                let grid = [[], [], []];
                for (let row = 0; row < 3; row++) {
                    for (let col = 0; col < 4; col++) {
                        const index = row * 4 + col;
                        grid[row][col] = {
                            element: cells[index],
                            value: cells[index].textContent,
                            row: row,
                            col: col
                        };
                    }
                }
                
                // 移动数字填补空白(重力效果)
                for (let col = 0; col < 4; col++) {
                    for (let row = 2; row >= 0; row--) {
                        if (grid[row][col].value === '') {
                            // 寻找上方第一个非空格子
                            let found = false;
                            for (let above = row - 1; above >= 0; above--) {
                                if (grid[above][col].value !== '') {
                                    // 移动数字
                                    const targetCell = grid[row][col].element;
                                    const sourceCell = grid[above][col].element;
                                    
                                    targetCell.textContent = sourceCell.textContent;
                                    targetCell.dataset.value = sourceCell.dataset.value;
                                    targetCell.classList.remove('empty');
                                    targetCell.classList.add('fall-animation');
                                    
                                    sourceCell.textContent = '';
                                    sourceCell.dataset.value = '';
                                    sourceCell.classList.add('empty');
                                    
                                    // 更新grid状态
                                    grid[row][col].value = targetCell.textContent;
                                    grid[above][col].value = '';
                                    
                                    found = true;
                                    
                                    // 设置动画后移除类
                                    setTimeout(() => {
                                        targetCell.classList.remove('fall-animation');
                                    }, 500);
                                    
                                    break;
                                }
                            }
                        }
                    }
                }
                
                // 第二步:填充第一行的空白
                for (let col = 0; col < 4; col++) {
                    const topCell = grid[0][col].element;
                    if (topCell.textContent === '') {
                        topCell.textContent = nextNewNumber;
                        topCell.dataset.value = nextNewNumber;
                        topCell.classList.remove('empty');
                        topCell.classList.add('new-value');
                        
                        // 设置新数字动画
                        setTimeout(() => {
                            topCell.classList.remove('new-value');
                        }, 800);
                        
                        nextNewNumber++;
                    }
                }
            }
            
            // 处理运算符点击
            operatorBtns.forEach(btn => {
                btn.addEventListener('click', () => {
                    if (!gameActive) return;
                    
                    // 只在选择运算符状态有效
                    if (gameState !== 'selectOperator' && gameState !== 'selectSecond') return;
                    
                    // 清除之前选择的运算符
                    operatorBtns.forEach(b => b.classList.remove('selected'));
                    
                    // 设置当前选择的运算符
                    btn.classList.add('selected');
                    selectedOperator = btn.dataset.operator;
                    gameState = 'selectSecond';
                    
                    // 更新状态栏
                    statusBar.textContent = `已选择: ${firstCell.textContent} ${getOperatorSymbol(selectedOperator)} ? → 请选择相邻的第二个数字`;
                });
            });
            
            // 获取运算符的显示符号
            function getOperatorSymbol(operator) {
                switch(operator) {
                    case '+': return '+';
                    case '-': return '-';
                    case '*': return '×';
                    case '/': return '÷';
                    default: return operator;
                }
            }
            
            // 清除所有选择状态
            function clearSelections() {
                cells.forEach(cell => {
                    cell.classList.remove('selected', 'operator-source', 'adjacent');
                });
                operatorBtns.forEach(btn => {
                    btn.classList.remove('selected');
                });
            }
            
            // 重置操作状态
            function resetOperation() {
                gameState = 'selectFirst';
                firstCell = null;
                selectedOperator = null;
                clearSelections();
            }
            
            // 重置游戏
            resetBtn.addEventListener('click', () => {
                // 重置所有格子
                createGrid();
                
                // 重置状态
                resetOperation();
                moveCount = 0;
                moveCountEl.textContent = moveCount;
                nextNewNumber = 13;
                targetNumber = 1;
                remainingChances = 3;
                currentScore = 0;
                
                targetDisplay.textContent = targetNumber;
                currentScoreEl.textContent = currentScore;
                updateChancesDisplay();
                
                statusBar.textContent = '游戏已重置!请点击"开始游戏"';
                gameActive = false;
                
                // 启用操作
                cells.forEach(cell => {
                    cell.style.pointerEvents = 'auto';
                });
                
                operatorBtns.forEach(btn => {
                    btn.style.pointerEvents = 'auto';
                });
            });
            
            // 开始游戏
            startBtn.addEventListener('click', () => {
                if (!gameActive) {
                    createGrid();
                    gameActive = true;
                    gameState = 'selectFirst';
                    statusBar.textContent = '游戏开始!请选择第一个数字';
                    
                    // 加载最高分
                    const savedHighScore = localStorage.getItem('highScore');
                    if (savedHighScore) {
                        highScore = parseInt(savedHighScore);
                        highScoreEl.textContent = highScore;
                    }
                }
            });
            
            // 提示按钮
            hintBtn.addEventListener('click', () => {
                statusBar.innerHTML = `
                    <div style="text-align: left; padding: 10px;">
                        <h3>游戏说明:</h3>
                        <p>1. 选择相邻数字进行运算,结果必须为正整数</p>
                        <p>2. 目标数字:<span style="color: #e74c3c; font-weight: bold;">${targetNumber}</span></p>
                        <p>3. 达成目标数字可清空格子并提高目标</p>
                        <p>4. 连续三次未达成目标游戏结束</p>
                        <p>5. 空格子会被上方数字或新数字填充</p>
                    </div>
                `;
            });
            
            // 添加CSS动画规则
            const style = document.createElement('style');
            style.textContent = `
                @keyframes pulse {
                    0% { transform: scale(1); }
                    50% { transform: scale(1.03); }
                    100% { transform: scale(1); }
                }
                
                .new-value {
                    animation: newValueHighlight 0.8s ease;
                }
                
                .fall-animation {
                    animation: fallDown 0.5s ease;
                }
                
                .disappear {
                    animation: disappear 0.5s ease forwards;
                }
            `;
            document.head.appendChild(style);
            
            // 初始化游戏
            createGrid();
            updateChancesDisplay();
        });
    </script>
</body>
</html>

AI如何构建一人的__

空格里面,可以填写的是项目、工程、团队、公司。

这几年看这个也看得比较多了,事实上,如果不被营役于杂务,我们确实有这个机会打造这些一人制。

所以,剩下来的事情是,有什么是真实的需求、而又是有趣的事情,还有就是能否逃过AI席卷全球,摧毁一切传统的浪潮。

1.真实的需求,我认为可以多看,甚至可以看app store里面的低分项目,也许它们的初衷就是满足需求,然后投入产出比实在不行,或者说是水平不足。

2.有趣的事情,还是要有些热情和爱好,毕竟引入AI来做的话,如果再不有趣,就变成人给AI打工了。

3.对AI的防御,这个话题比较大,但并非不可能找到,原则上,AI工具不可能全能或者万能,总要有各种各种的tools去拉通最后的一公里。这就是机会。而使用数据库本身也要隐藏起来,AI去调用RAG,而不是把内容都暴露给AI,做好保护吧,维持人类最后的尊严。

超级智能

五一期间把这本书看完了。成书时间应该在AlphaGo之前,主要内容是假设未来能出现一种超级智能,推演出现过程、风险、走向、智能的形式等等。

作者是未来学方面的专家Nick Bostrom,尽管不如KK那么有名,但书的内容基本上是干货。目前大模型的发展,多种势力投入等,都符合书上的推演。比如不存在单一的一家企业或者国家直接垄断最前沿的决定性的超级智能,应该是竞争者本身水平已很高,看到对手的领先后能快速跟上。

相比之下,KK的书则显得水的成分比较多。

后面有对于超级智能与人类之间的关系,如何避免超级智能形成对人类的重大威胁或危机,也有很长的篇幅。大致来说,应考虑亦步亦趋的方式给予智能体不那么终结性的方向或指令,这样可以避免智能体在执行过程中自行挖掘漏洞或者曲解。

也可考虑人类监督智能体,或者智能体监督智能体的方式。

Agentic AI的基础架构

1. 自主智能(Agentic AI)的崛起

  • Agentic AI 指能够自主决策、执行复杂任务的AI系统,超越传统被动响应式AI。
  • 这类AI需要更灵活、安全且可扩展的基础设施支持。

2. 专用服务层的重要性

  • 模块化设计:专用服务层将AI功能分解为独立模块(如数据处理、模型训练、决策执行),提升灵活性和可维护性。
  • 互操作性:标准化接口支持不同AI系统和服务的无缝协作。
  • 资源优化:集中管理计算、存储和网络资源,提高效率并降低成本。

3. 区块链技术的关键作用

  • 安全与透明:区块链的不可篡改性和分布式账本特性保障AI决策过程的透明度和数据完整性。
  • 去中心化信任:通过智能合约自动化执行协议,减少对中心化机构的依赖。
  • 数据隐私:加密技术和零知识证明可在不暴露原始数据的情况下验证AI决策。

4. 结合优势的协同效应

  • 专用服务层提供高效架构,区块链确保安全和信任,二者结合为Agentic AI提供可靠基础。
  • 用例包括供应链管理(自主物流AI)、金融(自动化合规检查)和医疗(安全数据共享)。

5. 未来展望

  • 随着AI系统自主性增强,对专用基础设施的需求将增长。区块链和专用服务层可能成为行业标准。
  • 企业应提前布局,投资相关技术以保持竞争力。

核心结论:

构建Agentic AI需突破传统架构,通过专用服务层实现模块化与协作,并依赖区块链确保安全透明。这一结合为下一代AI应用奠定了可持续、可信的基础。

加密、零知识证明、区块链、模块化设计(哪些可以持续升级)、标准化接口和互操作协议、计算资源管理

AI Agent Harmony: Composing The Future Of AI Collaboration

转载一下Forbes的文章

https://www.forbes.com/councils/forbestechcouncil/2025/02/07/ai-agent-harmony-composing-the-future-of-ai-collaboration/

Daniel Knauf is the Chief Technology Officer, Americas at Merkle.

getty

We are at a turning point in artificial intelligence. While single-function chatbots once sufficed, today’s landscape is dominated by specialized AI agents that can manage travel, process payments or even draft proposals. However, as more brands launch their own AI agents, customers face an overwhelming maze of interfaces and interactions, threatening the very purpose of AI: to simplify lives.

The solution lies in agent-to-agent orchestration, a paradigm where AI agents communicate and collaborate to address complex needs. This approach offers a unified, streamlined experience, eliminating the need for users to manage multiple systems.

The Next Step: Agent-To-Agent Orchestration

Agent orchestration allows personal agents to collaborate with others, even across brands and ecosystems. Instead of managing multiple tools, users interact with a single “conductor” agent, which delegates tasks to specialized agents in the background. This creates a seamless, integrated experience that transforms complex ecosystems into unified workflows.

By enabling agents to interact and share capabilities, organizations can offer efficient and consistent experiences, restoring simplicity and enhancing customer satisfaction.

Scaling Human-Like Intelligence

AI agents must replicate the nuanced decision making of human representatives who blend intuition, domain expertise and guided procedures. Agent orchestration achieves this by dynamically coordinating tasks using a modular architecture. Each specialized service, such as payment processing or troubleshooting, operates as a microservice, while the orchestration layer connects these services logically to resolve complex issues.

This orchestration layer mimics human adaptability, ensuring that AI systems not only automate repetitive tasks but also navigate intricate workflows, addressing user demands without frequent human intervention.

Broadcasting Capabilities: Agent Directories

For agents to collaborate effectively, they must understand each other’s capabilities. Future ecosystems will feature standardized directories that list agent functionalities, required inputs and outputs. These directories allow agents to identify the best collaborators for specific tasks.

By exposing capabilities in machine-readable formats, organizations maintain control while enabling authorized agents to negotiate and delegate. This turns isolated services into interconnected networks of expertise, reducing complexity and enhancing flexibility.

Transforming Customer Experience

Agent orchestration revolutionizes the customer experience. Instead of juggling multiple chatbots or apps, users issue a single, natural language request (a prompt). Their personal agent consults capability directories, identifies appropriate agents and oversees task completion. This unified approach simplifies interactions, saving time and effort.

Brands adopting this model gain a competitive edge by becoming synonymous with efficiency and reliability. Over time, public directories could lead to “Agent Stores,” where brands list agent capabilities for broader collaboration. For instance, an airline’s agent might coordinate with hotel and rideshare agents to deliver a seamless travel experience.

Orchestration also redefines personalization. Beyond remembering purchase histories, advanced systems tailor entire processes to individual needs, proactively assembling agents to meet evolving demands. This creates a level of support that feels intuitive and proactive, driving loyalty and trust.

Proposed Architecture For Orchestration

• User Interaction Layer: A single interface where users submit requests, leaving the complexity to the orchestration system.

• Orchestration Layer: Interprets user intent, consults directories, applies rules and coordinates agents.

• Capability Directory: A registry of agent functionalities, ensuring seamless collaboration.

• Context/Policy Engine: Stores user data, enforces privacy and shapes outcomes based on policies.

• Interoperability Layer: Ensures agents adhere to consistent protocols for compatibility.

• Specialized Agents: Execute domain-specific tasks assigned by the orchestrator.

• Response Aggregation: Combines results into a unified response for the user.

This architecture transforms today’s fragmented systems into integrated solutions, offering simplicity and efficiency.

Preparing For Agent Orchestration

To prepare for agent orchestration, organizations must focus on laying a strong foundation for modularity, integration and interoperability. The first step is to ensure that existing systems and services are modular, with clearly defined inputs, outputs and dependencies. This modular architecture is essential for creating an ecosystem where agents can seamlessly collaborate. Organizations should also begin cataloging the capabilities of their AI agents and microservices in structured directories. These directories should include metadata and access policies, enabling agents to quickly identify and collaborate with the appropriate partners.

In addition to building modular systems and directories, organizations must address interoperability by adopting standardized communication protocols. This ensures that agents across different brands or ecosystems can integrate easily without requiring custom configurations. By focusing on these foundational elements, businesses can position themselves to fully embrace agent-to-agent orchestration and deliver a better customer experience.

Roadblocks To Watch For

While the benefits of agent orchestration are compelling, organizations must address several challenges to unlock its potential. One significant hurdle is ensuring data privacy and compliance. As agents collaborate, they must operate within strict boundaries, accessing only authorized information. Strong governance frameworks and policy enforcement are critical to mitigate risks and maintain trust.

Another challenge is overcoming interoperability gaps. Many organizations operate in siloed environments where systems are not designed to work together. This lack of compatibility can hinder the seamless integration needed for orchestration. Finally, businesses should prepare for the upfront investment required to build orchestration frameworks, including infrastructure upgrades, capability directories and standardized APIs. These efforts, while resource-intensive, will be instrumental in driving long-term success.

The Path Forward

Agent orchestration is the next evolution in AI. By turning complexity into a competitive advantage, it allows organizations to meet customer demands with precision and agility. Users no longer need to navigate tools or interfaces—they can focus on goals, trusting the AI ecosystem to handle the details.

This vision ultimately leads us to “agent harmony,” representing a future where AI agents collaborate dynamically to deliver intuitive and effective results. It is a shift from managing tools to managing outcomes, with technology acting as an invisible helper. As organizations embrace this model, they pave the way for AI systems that are not only efficient but also deeply fulfilling for users.

Daniel Knauf 是 Merkle 美洲区首席技术官。


我们正处于人工智能的转折点。虽然单一功能的聊天机器人曾经足够了,但如今的市场主要由专门的人工智能代理主导,它们可以管理旅行、处理付款甚至起草提案。然而,随着越来越多的品牌推出自己的人工智能代理,客户面临着令人眼花缭乱的界面和交互,威胁到人工智能的真正目的:简化生活。

解决方案在于代理到代理的编排,这是一种人工智能代理沟通和协作以满足复杂需求的范例。这种方法提供了统一、简化的体验,消除了用户管理多个系统的需要。

推广
下一步:代理到代理的编排
代理编排允许个人代理与其他人协作,甚至跨品牌和生态系统。用户无需管理多个工具,而是与单个“指挥”代理交互,该代理将任务委托给后台的专门代理。这创造了一种无缝、集成的体验,将复杂的生态系统转变为统一的工作流程。

通过使代理能够交互和共享功能,组织可以提供高效一致的体验,恢复简单性并提高客户满意度。

扩展类人智能
AI 代理必须复制人类代表的细致入微的决策,这些代表融合了直觉、领域专业知识和指导程序。代理编排通过使用模块化架构动态协调任务来实现这一点。每项专业服务(例如支付处理或故障排除)都作为微服务运行,而编排层将这些服务逻辑地连接起来以解决复杂问题。

该编排层模仿人类的适应性,确保 AI 系统不仅可以自动执行重复任务,还可以导航复杂的工作流程,无需频繁的人工干预即可满足用户需求。

广播功能:代理目录
为了使代理能够有效协作,他们必须了解彼此的能力。未来的生态系统将具有标准化目录,列出代理功能、所需的输入和输出。这些目录允许代理识别特定任务的最佳合作者。


通过以机器可读的格式公开功能,组织可以保持控制,同时使授权代理能够进行协商和委派。这将孤立的服务转变为相互关联的专业知识网络,从而降低复杂性并增强灵活性。

改变客户体验
代理编排彻底改变了客户体验。用户无需同时处理多个聊天机器人或应用程序,只需发出一个自然语言请求(提示)。他们的个人代理会查阅功能目录,确定合适的代理并监督任务完成情况。这种统一的方法简化了交互,节省了时间和精力。

采用这种模式的品牌通过成为效率和可靠性的代名词而获得竞争优势。随着时间的推移,公共目录可能会出现“代理商店”,品牌会在其中列出代理功能以进行更广泛的协作。例如,航空公司的代理可能会与酒店和拼车代理协调,以提供无缝的旅行体验。

编排还重新定义了个性化。除了记住购买历史之外,先进的系统还可以根据个人需求定制整个流程,主动组装代理以满足不断变化的需求。这创造了一种直观且主动的支持水平,从而推动了忠诚度和信任。

建议的编排架构

  • 用户交互层:用户提交请求的单一界面,将复杂性留给编排系统。
  • 编排层:解释用户意图、查阅目录、应用规则和协调代理。
  • 功能目录:代理功能的注册表,确保无缝协作。
  • 上下文/策略引擎:存储用户数据、实施隐私并根据策略塑造结果。
  • 互操作性层:确保代理遵守一致的协议以实现兼容性。
  • 专用代理:执行编排器分配的特定于域的任务。
  • 响应聚合:将结果组合成对用户的统一响应。

这种架构将当今分散的系统转变为集成解决方案,提供简单性和效率。

为代理编排做准备
为了准备代理编排,组织必须专注于为模块化、集成和互操作性奠定坚实的基础。第一步是确保现有系统和服务是模块化的,具有明确定义的输入、输出和依赖关系。这种模块化架构对于创建代理可以无缝协作的生态系统至关重要。组织还应该开始对其 AI 代理和微控制器的功能进行分类服务在结构化目录中。这些目录应包括元数据和访问策略,使代理能够快速识别并与适当的合作伙伴协作。

除了构建模块化系统和目录之外,组织还必须通过采用标准化通信协议来解决互操作性问题。这可确保不同品牌或生态系统中的代理可以轻松集成,而无需自定义配置。通过关注这些基础要素,企业可以定位自己,以完全接受代理到代理的编排并提供更好的客户体验。

需要注意的障碍
虽然代理编排的好处引人注目,但组织必须解决几个挑战才能释放其潜力。一个重大障碍是确保数据隐私和合规性。当代理协作时,他们必须在严格的界限内运作,只能访问授权信息。强大的治理框架和政策执行对于降低风险和保持信任至关重要。

另一个挑战是克服互操作性差距。许多组织在孤立的环境中运营,系统不是为协同工作而设计的。这种缺乏兼容性可能会阻碍编排所需的无缝集成。最后,企业应为构建编排框架所需的前期投资做好准备,包括基础设施升级、功能目录和标准化 API。这些努力虽然耗费大量资源,但将有助于推动长期成功。

前进的道路
代理编排是人工智能的下一个发展方向。通过将复杂性转化为竞争优势,它使组织能够精准而灵活地满足客户需求。用户不再需要浏览工具或界面——他们可以专注于目标,相信人工智能生态系统会处理细节。

这一愿景最终将我们引向“代理和谐”,代表着人工智能代理动态协作以提供直观有效的结果的未来。这是从管理工具到管理结果的转变,技术充当了隐形助手。随着组织采用这种模式,它们为不仅高效而且对用户来说非常令人满意的人工智能系统铺平了道路。

一本书读懂AIGC

2023年出的书,基本上也把疫情期间的AIGC说清楚了,除了ChatGPT至今的一系列LLM的长足发展。

书中也提到各种AIGC app的兴起和消亡,如果放在今年或者明年总结的话,可能清单更为壮观。

但是关注大方向还是有意义的,比如端侧AI的演进,元宇宙的内容生成,AR/VR,AI作为生产力工具的存在,等。

生成式AI的民主化

考虑一下生成式AI不应垄断于大企业、高算力+能源的拥有者手中,我们需要让它更民主化,普惠化。

  • 获取成本低,而且不应因为地缘政治的原因导致墙外或另一边的人用不了
  • 界面、工具简单,学习门槛低
  • 开源,让更多的人可以参与
  • 有相关的教育以及培训,当然,这些也可以成为本地化的一些商业机会
  • 支持多样性,残障人士访问等
  • 可去中心化,不依赖于一个特定的中心,比如算力、能源、政策等
  • 提供全球合作的机会

AI小摘录

AI如果对标人脑的话,可参考人脑的神经元数量:850亿,同样地,GPT3的参数量是175B,两倍于人脑神经元数量。

于是后面再累加参数量意义就不大了。相反,应遵循“小即是大”的原则,针对特点领域做小模型。

目前再吹嘘更大参数可能是资本的炒作需要。

AI落地方面,需要业务专家,他们可以指出问题的关键。

数据的贬值速度相当快,避免持有容易变质的数据而不及时利用。


数字化转型中,AI/算法/软件的战略投入,如果被公司层面认为是IT cost,将是一种失败的信号。

AI的发展趋势:检索–>搜索–>探索

AI的真正意义是释放生产力,让人类不要将时间浪费在重复操作上。

来自参加某商学院的的课程时的一些摘录。