CodeIgniter实现AI模型响应实时渲染至视图的技术需求

一、核心思路 #

将原有的同步批量调用AI模型逻辑，拆分为异步任务处理+前端实时拉取结果的模式：

1. 控制器接收请求后，为每个选中的AI模型启动独立异步任务
2. 单个任务完成后，将结果存入数据库/缓存
3. 前端通过轮询或Server-Sent Events（SSE）实时获取已完成结果，动态渲染到页面

二、具体代码修改 #

1. 控制器（OptionController.php）调整 #

（1）重构process方法，初始化任务并返回监听页面

<?php namespace App\Controllers;

use App\Models\AiResultModel;
use CodeIgniter\Controller;

class OptionController extends Controller
{
    public function process()
    {
        $selectedModels = $this->request->getPost('selected_models');
        $taskId = uniqid('ai_task_'); // 生成唯一任务标识，用于关联结果

        // 为每个模型启动后台异步任务（CI3用exec，CI4用队列）
        foreach ($selectedModels as $modelName) {
            // CI3 后台执行方式
            $cmd = "php index.php option runAiModel {$modelName} {$taskId} > /dev/null 2>&1 &";
            exec($cmd);

            // CI4 队列执行方式（需先配置队列驱动如Redis）
            // $queue = service('queue');
            // $queue->push('App\Jobs\RunAiModelJob', ['modelName' => $modelName, 'taskId' => $taskId]);
        }

        // 传递任务标识到视图，供前端监听
        return view('response_view', ['taskId' => $taskId]);
    }

    // 异步任务：调用单个AI模型并保存结果
    public function runAiModel($modelName, $taskId)
    {
        // 原有AI模型调用逻辑
        $response = $this->callAiModel($modelName);

        // 保存结果到数据库
        $resultModel = new AiResultModel();
        $resultModel->save([
            'task_id' => $taskId,
            'model_name' => $modelName,
            'response' => $response,
            'is_read' => 0 // 标记未被前端读取
        ]);
    }

    // 前端拉取结果接口
    public function getResults($taskId)
    {
        $resultModel = new AiResultModel();
        // 获取未读取的结果
        $results = $resultModel->where(['task_id' => $taskId, 'is_read' => 0])->findAll();

        // 标记结果为已读取，避免重复返回
        foreach ($results as $item) {
            $resultModel->update($item['id'], ['is_read' => 1]);
        }

        return $this->response->setJSON($results);
    }

    // 抽离原有AI模型调用逻辑
    private function callAiModel($modelName)
    {
        // 此处替换为真实AI模型调用代码
        sleep(rand(2, 5)); // 模拟响应延迟
        return "来自{$modelName}的响应内容：" . uniqid();
    }
}

2. 视图（response_view.php）修改 #

使用AJAX轮询实现动态渲染，无需等待全部任务完成：

<!DOCTYPE html>
<html>
<head>
    <title>AI模型实时响应</title>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <style>
        .result-item { margin: 15px 0; padding: 10px; border: 1px solid #eee; border-radius: 4px; }
        .model-name { font-weight: bold; color: #2c3e50; }
    </style>
</head>
<body>
    <h2>AI模型响应实时展示</h2>
    <div id="results-container"></div>

    <script>
        const taskId = "<?= $taskId ?>";
        let pollTimer = setInterval(fetchNewResults, 1000); // 每秒轮询一次

        function fetchNewResults() {
            $.get(`/option/getResults/${taskId}`, function(data) {
                if (data.length === 0) return;
                
                data.forEach(item => {
                    // 动态生成结果HTML并追加到页面
                    const resultHtml = `
                        <div class="result-item">
                            <div class="model-name">模型：${item.model_name}</div>
                            <p>${item.response}</p>
                        </div>
                    `;
                    $('#results-container').append(resultHtml);
                });
            }).fail(() => {
                console.log("获取结果失败，将停止轮询");
                clearInterval(pollTimer);
            });
        }
    </script>
</body>
</html>

三、生产环境优化建议 #

• 队列替代exec：CI4推荐使用内置队列+Redis驱动管理异步任务，避免exec的进程管理风险
• SSE替代轮询：如果需要更低延迟，可改用SSE（服务器推送事件），前端无需主动轮询
• 任务状态监控：在数据库中增加任务总数量字段，前端拉取结果时判断是否所有模型已完成，完成后停止轮询
• 资源控制：限制异步任务并发数，避免AI模型调用耗尽服务器资源

内容的提问来源于stack exchange，提问作者AlexG