评价事件发送

我们AIAB系统中目前有三种事件，一种是用户请求事件，用来收集如请求响应时间、消耗token数等指标；另一种是用户评价事件，用来收集用户在使用过程中的用户反馈；同时，我们也支持埋点事件，用于收集一些埋点数据，下面介绍评价事件。

用户评价事件

用户评价事件是我们用于收集关于AIAB系统反馈的途径，为后续对大模型多方面进行评估提供依据。

评价样式

AIAB系统中使用的是五星评价的反馈机制，下面代码介绍了前端五星评价的样例

五星评价的整体样式代码如下：

<div class="rating-container">
    <div class="rating-title">请对服务进行评分：</div>
    <div class="star-rating" id="starRating">
        <span class="star" data-value="1"></span>
        <span class="star" data-value="2"></span>
        <span class="star" data-value="3"></span>
        <span class="star" data-value="4"></span>
        <span class="star" data-value="5"></span>
    </div>
    <div class="rating-message" style="margin-top: 10px; font-size: 12px; color: #666; display: none;">
        感谢您的评价！刷新页面可重新评价。
    </div>
</div>

添加星星监听，根据选择星星数量显示对应的效果和点击发送事件

stars.forEach(star => {
    // 鼠标悬停效果
    star.addEventListener('mouseover', function() {
        if(hasRated) return;
        const value = parseInt(this.getAttribute('data-value'));
        highlightStars(value, 'hover');
    });

    // 鼠标离开效果
    star.addEventListener('mouseout', function() {
        if(hasRated) return;
        resetStars();
    });

    // 点击选择评分
    star.addEventListener('click', function() {
        if(hasRated) return;
        selectedRating = parseInt(this.getAttribute('data-value'));
        highlightStars(selectedRating, 'active');
        hasRated = true; // 标记为已评价
        disableRating();
        // 显示感谢信息
        showRatingMessage();
        // 评分提交逻辑
        sendRating(selectedRating)
    });
});

星星状态显示方法：

// 高亮星星
function highlightStars(count, className) {
    stars.forEach(star => {
        star.classList.remove('active', 'hover');
    });
    for (let i = 0; i < count; i++) {
        stars[i].classList.add(className);
    }
}

// 重置星星状态
function resetStars() {
    stars.forEach(star => {
        star.classList.remove('active', 'hover');
    });
    // 如果已有选中评分，保持选中状态
    if (selectedRating > 0) {
        for (let i = 0; i < selectedRating; i++) {
            stars[i].classList.add('active');
        }
    }
}

显示感谢信息

function showRatingMessage() {
    ratingMessage.style.display = 'block';
}

调用后端发送评分事件接口

function sendRating(rating) {
    const data = {
        score: rating,
        userId: getUserId(),
        sdkKey: getQueryParams().sdkKey,
    };
    fetch('./rate', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(data)
    }).catch(error => {
        console.error('评分提交失败:', error)
    })
}

后端发送评分事件

以下是发送用户评价事件的相关代码：

@PostMapping(value = "/aiab/rate")
public void SendRating(@RequestBody RatingMessage ratingMessage) {
    //获取用户评分和重要参数
    String score = ratingMessage.getScore();
    String sdkKey = ratingMessage.getSdkKey();
    String userId = ratingMessage.getUserId();

    Eyeofcloud eyeofcloud = proxyDecisionService.getInstance(sdkKey);
    EyeofcloudUserContext user = eyeofcloud.createUserContext(userId);

    HashMap<String, Object> tags = new HashMap<>();
    tags.put("score", Integer.parseInt(score));
    if(eyeofcloud.getProjectConfig() != null && eyeofcloud.getProjectConfig().getEventNameMapping().containsKey("rating")){
        user.trackEvent("rating", tags);
    }
}

注意：AIAB系统评价事件key固定为rating