koishi-plugin-group-analysis-mx 1.1.0 → 1.2.0

package/lib/config.js

@@ -95,7 +95,15 @@ exports.Config = koishi_1.Schema.intersect([
             koishi_1.Schema.const('anime').description('二次元风格'),
             koishi_1.Schema.const('newspaper').description('报纸风格'),
             koishi_1.Schema.const('art').description('艺术风格'),
-            koishi_1.Schema.const('scrapbook').description('手账风格')
+            koishi_1.Schema.const('scrapbook').description('手账风格'),
+            koishi_1.Schema.const('atri').description('ATRI（原项目皮肤）'),
+            koishi_1.Schema.const('hatsunemiku').description('初音未来（原项目皮肤）'),
+            koishi_1.Schema.const('bluearchive').description('蔚蓝档案（原项目皮肤）'),
+            koishi_1.Schema.const('springfestival').description('新春（原项目皮肤）'),
+            koishi_1.Schema.const('retrofuturism').description('复古未来（原项目皮肤）'),
+            koishi_1.Schema.const('hack').description('黑客终端（原项目皮肤）'),
+            koishi_1.Schema.const('format').description('简约排版（原项目皮肤）'),
+            koishi_1.Schema.const('simple').description('极简（原项目皮肤）')
         ])
             .description('渲染界面皮肤。')
             .default('md3')

package/lib/service/analysis.js

@@ -806,6 +806,24 @@ class AnalysisService extends koishi_1.Service {
         });
         // Final statistics
         const sortedUsers = users.sort((a, b) => b.messageCount - a.messageCount);
+        // 为用户补全真实头像：优先消息记录中的头像，其次按平台生成头像 URL。
+        // 官方 QQ 机器人等平台下 userId 为 openid，不能直接使用 QQ 号头像接口。
+        const botForAvatar = this._getBot(selfId);
+        const avatarMap = new Map();
+        for (const user of sortedUsers) {
+            if (!user.avatar) {
+                user.avatar = (0, utils_1.resolveUserAvatar)(botForAvatar, user.userId) || undefined;
+            }
+            avatarMap.set(String(user.userId), user.avatar || '');
+        }
+        // 用户称号列表同样补全头像（LLM 返回的 id 可能是数字类型）
+        if (Array.isArray(userTitles)) {
+            userTitles.forEach((title) => {
+                if (title && !title.avatar && avatarMap.has(String(title.id))) {
+                    title.avatar = avatarMap.get(String(title.id));
+                }
+            });
+        }
         const overallActiveHours = users.reduce((acc, user) => {
             for (const hour in user.activeHours) {
                 acc[hour] = (acc[hour] || 0) + user.activeHours[hour];

package/lib/service/renderer.js

@@ -7,8 +7,11 @@ exports.RendererService = void 0;
 const koishi_1 = require("koishi");
 const fs_1 = require("fs");
 const path_1 = __importDefault(require("path"));
+const nunjucks = require("nunjucks");
 const utils_1 = require("../utils");
 const skins_1 = require("../skins");
+/** 来自原项目 astrbot_plugin_qq_group_daily_analysis 的皮肤（Jinja2 模板，用 nunjucks 渲染） */
+const ORIGINAL_SKINS = ['atri', 'bluearchive', 'format', 'hack', 'hatsunemiku', 'retrofuturism', 'simple', 'springfestival'];
 class RendererService extends koishi_1.Service {
     config;
     static inject = ['puppeteer'];
@@ -51,23 +54,31 @@ class RendererService extends koishi_1.Service {
         const resourcesDir = __dirname + '/../../resources';
         const templateDir = this.templateDir;
         const skin = this.config.skin || 'md3';
-        // Source: resources/md3 (or other skin)
-        const skinSourceDir = path_1.default.resolve(resourcesDir, skin);
-        // Destination: data/group_analysis/md3
-        const skinDestDir = path_1.default.resolve(templateDir, skin);
-        /* try {
-            await fs.access(skinDestDir)
-        } catch (error) { */
-        await fs_1.promises.mkdir(skinDestDir, { recursive: true });
-        // Copy only the configured skin directory
-        await fs_1.promises.cp(skinSourceDir, skinDestDir, { recursive: true });
-        /*   } */
-        const tempHtmlFiles = await fs_1.promises
-            .readdir(skinDestDir)
-            .then((files) => files.filter((file) => file.endsWith('.html') && !file.startsWith('template')))
-            .catch(() => []);
-        for (const file of tempHtmlFiles) {
-            await fs_1.promises.unlink(path_1.default.resolve(skinDestDir, file));
+        // 拷贝原项目皮肤模板（nunjucks 渲染用）
+        const originalSourceDir = path_1.default.resolve(resourcesDir, 'original');
+        const originalDestDir = path_1.default.resolve(templateDir, 'original');
+        await fs_1.promises.mkdir(originalDestDir, { recursive: true });
+        await fs_1.promises.cp(originalSourceDir, originalDestDir, { recursive: true });
+        // 原项目皮肤模板直接使用 original 目录，无需拷贝到独立目录
+        if (!ORIGINAL_SKINS.includes(skin)) {
+            // Source: resources/md3 (or other skin)
+            const skinSourceDir = path_1.default.resolve(resourcesDir, skin);
+            // Destination: data/group_analysis/md3
+            const skinDestDir = path_1.default.resolve(templateDir, skin);
+            /* try {
+                await fs.access(skinDestDir)
+            } catch (error) { */
+            await fs_1.promises.mkdir(skinDestDir, { recursive: true });
+            // Copy only the configured skin directory
+            await fs_1.promises.cp(skinSourceDir, skinDestDir, { recursive: true });
+            /*   } */
+            const tempHtmlFiles = await fs_1.promises
+                .readdir(skinDestDir)
+                .then((files) => files.filter((file) => file.endsWith('.html') && !file.startsWith('template')))
+                .catch(() => []);
+            for (const file of tempHtmlFiles) {
+                await fs_1.promises.unlink(path_1.default.resolve(skinDestDir, file));
+            }
         }
         const page = await this.ctx.puppeteer.page();
         try {
@@ -105,9 +116,18 @@ class RendererService extends koishi_1.Service {
                 const hour = new Date().getHours();
                 theme = hour >= 19 || hour < 6 ? 'dark' : 'light';
             }
+            const skin = config.skin || 'md3';
+            if (ORIGINAL_SKINS.includes(skin)) {
+                // 原项目皮肤：nunjucks 渲染完整页面后整页截图
+                const page = await this._renderOriginalSkinGroup(data, theme);
+                const imageBuffer = await page.screenshot({ fullPage: true });
+                await page.close();
+                this.ctx.logger.info(`图片渲染成功（原项目皮肤 ${skin}）！`);
+                return imageBuffer;
+            }
             const page = await this._renderGroupAnalysis(data, theme);
             // 找到页面中的 container 元素
-            const renderer = skins_1.skinRegistry.getSafe(config.skin || 'md3');
+            const renderer = skins_1.skinRegistry.getSafe(skin);
             const selector = renderer.containerSelector;
             const element = await page.$(selector);
             if (!element) {
@@ -183,6 +203,157 @@ class RendererService extends koishi_1.Service {
         }, 3 * 60 * 1000); // 3 分钟
         return page;
     }
+    async _renderOriginalSkinGroup(data, theme) {
+        if (!this.ctx.puppeteer) {
+            throw new Error('Puppeteer service is not available.');
+        }
+        const skin = this.config.skin || 'md3';
+        const skinDir = path_1.default.resolve(this.templateDir, 'original', skin);
+        const templatePath = path_1.default.resolve(skinDir, 'html_template.html');
+        if (!fs_1.existsSync(templatePath)) {
+            throw new Error(`原项目皮肤模板不存在: ${templatePath}`);
+        }
+        const env = new nunjucks.Environment(new nunjucks.FileSystemLoader(skinDir), {
+            autoescape: false,
+            throwOnUndefined: false
+        });
+        // 注册 Python 风格的 format 过滤器（模板中使用了 "%02d" | format(...) 等）
+        env.addFilter('format', (fmt, ...args) => {
+            let index = 0;
+            return String(fmt).replace(/%[-+0-9.]*[sdif]/g, (match) => {
+                const arg = args[index++];
+                if (match.endsWith('s'))
+                    return String(arg ?? '');
+                if (match.endsWith('d')) {
+                    const width = parseInt(match.match(/\d+/)?.[0] || '0', 10);
+                    let value = String(Math.trunc(Number(arg) || 0));
+                    if (match.includes('0'))
+                        value = value.padStart(width, '0');
+                    return value;
+                }
+                if (match.endsWith('f')) {
+                    const digits = parseInt(match.match(/\.(\d+)/)?.[1] || '0', 10);
+                    return (Number(arg) || 0).toFixed(digits);
+                }
+                return String(arg ?? '');
+            });
+        });
+        const context = await this.buildOriginalSkinContext(data, env);
+        const html = env.render('html_template.html', context);
+        const randomId = Math.random().toString(36).substring(2, 15);
+        const outTemplateHtmlPath = path_1.default.resolve(skinDir, `${randomId}.html`);
+        await fs_1.promises.writeFile(outTemplateHtmlPath, html);
+        this.ctx.logger.info(`原项目皮肤 ${skin} HTML 生成完成，正在调用 Puppeteer 渲染...`);
+        const page = await this.ctx.puppeteer.page();
+        await page.setViewport({ width: 1080, height: 1920, deviceScaleFactor: 2 });
+        await page.goto('file://' + outTemplateHtmlPath, {
+            waitUntil: 'networkidle0',
+            timeout: 60000
+        }).catch(() => page.goto('file://' + outTemplateHtmlPath, {
+            waitUntil: 'domcontentloaded',
+            timeout: 60000
+        }));
+        try {
+            await page.evaluate(() => document.fonts.ready);
+        }
+        catch (err) {
+            this.ctx.logger.debug(`等待字体加载超时: ${err}`);
+        }
+        // 等待图片加载完成（头像等）
+        await page.evaluate(() => Promise.all(Array.from(document.images)
+            .filter((img) => !img.complete)
+            .map((img) => new Promise((resolve) => {
+            img.onload = img.onerror = resolve;
+        })))).catch(() => { });
+        this.ctx.setTimeout(async () => {
+            try {
+                await fs_1.promises.unlink(outTemplateHtmlPath);
+            }
+            catch (error) {
+                this.ctx.logger.debug(`删除临时文件失败: ${error}`);
+            }
+        }, 3 * 60 * 1000);
+        return page;
+    }
+    async buildOriginalSkinContext(data, env) {
+        // 活跃度图表数据：24 小时数组
+        const activeHoursData = data.activeHoursData || {};
+        const values = Object.values(activeHoursData);
+        const maxCount = values.length > 0 ? Math.max(...values) : 0;
+        const chartData = Array.from({ length: 24 }, (_, hour) => {
+            const count = activeHoursData[hour] || 0;
+            return {
+                hour,
+                count,
+                percentage: maxCount > 0 ? Math.round((count / maxCount) * 100) : 0
+            };
+        });
+        // 话题：原项目子模板使用 topic.index / topic.topic.topic / topic.detail / topic.contributors
+        const topics = (data.topics || []).map((t, index) => ({
+            index: index + 1,
+            topic: { topic: t.topic || '' },
+            detail: t.detail || '',
+            contributors: Array.isArray(t.contributors)
+                ? t.contributors.join('、')
+                : (t.contributors || '')
+        }));
+        // 用户称号：原项目子模板使用 title.avatar_data / title.name / title.title / title.mbti / title.reason
+        const titles = (data.userTitles || []).map((t) => ({
+            name: t.name || '',
+            title: t.title || '',
+            mbti: t.mbti || '',
+            reason: t.reason || '',
+            avatar_data: t.avatar || ''
+        }));
+        // 金句：原项目子模板使用 quote.avatar_url / quote.sender / quote.content / quote.reason
+        const quotes = (data.goldenQuotes || []).map((q) => ({
+            sender: q.sender || '',
+            content: q.content || '',
+            reason: q.reason || '',
+            avatar_url: q.avatar || ''
+        }));
+        // 渲染子模板为 HTML 字符串
+        let topicsHtml = '';
+        let titlesHtml = '';
+        let quotesHtml = '';
+        let hourlyChartHtml = '';
+        try {
+            if (topics.length)
+                topicsHtml = env.render('topic_item.html', { topics });
+            if (titles.length)
+                titlesHtml = env.render('user_title_item.html', { titles });
+            if (quotes.length)
+                quotesHtml = env.render('quote_item.html', { quotes });
+            hourlyChartHtml = env.render('activity_chart.html', { chart_data: chartData });
+        }
+        catch (error) {
+            this.ctx.logger.warn('渲染原项目皮肤子模板时发生错误，将使用空内容:', error);
+        }
+        const now = new Date();
+        return {
+            current_date: data.analysisDate || now.toLocaleDateString('zh-CN'),
+            current_datetime: now.toLocaleString('zh-CN', { hour12: false }),
+            message_count: data.totalMessages,
+            participant_count: data.totalParticipants,
+            total_characters: data.totalChars,
+            emoji_count: data.emojiCount || 0,
+            most_active_period: data.mostActivePeriod || 'N/A',
+            // 字体与渲染环境（与原项目默认值保持一致）
+            t2i_font_source: 'Mainland',
+            t2i_google_fonts_mirror: 'https://fonts.googleapis.com',
+            t2i_gstatic_mirror: 'https://fonts.gstatic.com',
+            // 子模板 HTML
+            topics_html: topicsHtml,
+            titles_html: titlesHtml,
+            quotes_html: quotesHtml,
+            hourly_chart_html: hourlyChartHtml,
+            chat_quality_html: '',
+            // Token 统计（Koishi 版不统计，填 0）
+            total_tokens: 0,
+            prompt_tokens: 0,
+            completion_tokens: 0
+        };
+    }
     async renderUserPersona(data, username, avatar, config) {
         try {
             let theme = config.theme;

package/lib/skins/anime.js

@@ -17,7 +17,7 @@ class AnimeSkinRenderer {
         return userStats
             .map((user) => `
           <div class="char-box">
-            <img src="${(0, types_1.getAvatarUrl)(user.userId)}" alt="avatar" class="char-avatar">
+            <img src="${user.avatar || (0, types_1.getAvatarUrl)(user.userId)}" alt="avatar" class="char-avatar">
             <div class="char-content">
               <div class="char-name">${user.nickname}</div>
               <div class="char-detail">
@@ -53,7 +53,7 @@ class AnimeSkinRenderer {
         return userTitles
             .map((title) => `
           <div class="char-box">
-            <img src="${(0, types_1.getAvatarUrl)(title.id)}" alt="avatar" class="char-avatar">
+            <img src="${title.avatar || (0, types_1.getAvatarUrl)(title.id)}" alt="avatar" class="char-avatar">
             <div class="char-content">
               <div class="char-name">${title.name}</div>
               <div style="margin-bottom: 6px;">

package/lib/skins/art.js

@@ -17,7 +17,7 @@ class ArtSkinRenderer {
         return userStats
             .map((user) => `
       <div class="user-stat-card">
-        <img src="${(0, types_1.getAvatarUrl)(user.userId)}" alt="avatar" class="avatar">
+        <img src="${user.avatar || (0, types_1.getAvatarUrl)(user.userId)}" alt="avatar" class="avatar">
         <div class="user-details">
           <div class="nickname">${user.nickname}</div>
           <div class="stats-grid">
@@ -54,7 +54,7 @@ class ArtSkinRenderer {
         return userTitles
             .map((title) => `
       <div class="title-card">
-        <img src="${(0, types_1.getAvatarUrl)(title.id)}" alt="avatar" class="avatar">
+        <img src="${title.avatar || (0, types_1.getAvatarUrl)(title.id)}" alt="avatar" class="avatar">
         <div class="title-details">
           <div class="nickname">${title.name}</div>
           <div class="title-badge">${title.mbti && title.mbti !== 'N/A' ? `${title.title} | ${title.mbti}` : title.title}</div>

package/lib/skins/md3.js

@@ -17,7 +17,7 @@ class Md3SkinRenderer {
         return userStats
             .map((user) => `
       <div class="user-stat-card">
-        <img src="${(0, types_1.getAvatarUrl)(user.userId)}" alt="avatar" class="avatar">
+        <img src="${user.avatar || (0, types_1.getAvatarUrl)(user.userId)}" alt="avatar" class="avatar">
         <div class="user-details">
           <div class="nickname">${user.nickname}</div>
           <div class="stats-grid">
@@ -54,7 +54,7 @@ class Md3SkinRenderer {
         return userTitles
             .map((title) => `
       <div class="title-card">
-        <img src="${(0, types_1.getAvatarUrl)(title.id)}" alt="avatar" class="avatar">
+        <img src="${title.avatar || (0, types_1.getAvatarUrl)(title.id)}" alt="avatar" class="avatar">
         <div class="title-details">
           <div class="nickname">${title.name}</div>
           <div class="title-badge">${title.mbti && title.mbti !== 'N/A' ? `${title.title} | ${title.mbti}` : title.title}</div>

package/lib/skins/newspaper.js

@@ -19,7 +19,7 @@ class NewspaperSkinRenderer {
           <div class="news-profile">
             <div class="profile-rank">NO.${index + 1}</div>
             <div class="profile-main">
-                <img src="${(0, types_1.getAvatarUrl)(user.userId)}" alt="avatar" class="profile-avatar">
+                <img src="${user.avatar || (0, types_1.getAvatarUrl)(user.userId)}" alt="avatar" class="profile-avatar">
                 <div class="profile-info">
                     <div class="profile-name">${user.nickname}</div>
                     <div class="profile-data">

package/lib/skins/scrapbook.js

@@ -66,7 +66,7 @@ class ScrapbookSkinRenderer {
             <div class="card-tape"></div>
             <div class="user-header">
                 <div class="u-avatar">
-                    <img src="${(0, types_1.getAvatarUrl)(title.id)}" alt="头像" style="width: 100%; height: 100%; object-fit: cover;">
+                    <img src="${title.avatar || (0, types_1.getAvatarUrl)(title.id)}" alt="头像" style="width: 100%; height: 100%; object-fit: cover;">
                 </div>
                 <div class="u-info">
                     <div class="u-name">${title.name}</div>

package/lib/utils.js

@@ -41,6 +41,10 @@ function calculateBasicStats(messages) {
             userStats[userId] = getInitialUserStats(msg);
         }
         const stat = userStats[userId];
+        // 持续更新头像：使用该用户最近一条带头像的消息
+        if (msg.avatarUrl) {
+            stat.avatar = msg.avatarUrl;
+        }
         stat.messageCount++;
         stat.lastActive = new Date(Math.max(stat.lastActive.getTime(), msg.timestamp.getTime()));
         const hour = msg.timestamp.getHours();

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "koishi-plugin-group-analysis-mx",
     "description": "群聊分析插件 - 生成精美群聊统计报告，支持 AI 话题总结（独立版，不依赖 ChatLuna）",
-    "version": "1.1.0",
+    "version": "1.2.0",
     "main": "lib/index.js",
     "module": "lib/index.mjs",
     "typings": "lib/index.d.ts",
@@ -25,7 +25,8 @@
         "chrono-node": "^2.9.0",
         "js-yaml": "^4.1.0",
         "zod": "^3.25.0",
-        "cron-parser": "^5.5.0"
+        "cron-parser": "^5.5.0",
+        "nunjucks": "^3.2.4"
     },
     "devDependencies": {
         "koishi": "^4.18.0",

package/resources/original/atri/activity_chart.html

@@ -0,0 +1,53 @@
+<div class="chart-container">
+    <div style="display: flex; align-items: stretch; height: 220px; gap: 5px; padding: 20px 0 10px;">
+        {% for hour_data in chart_data %}
+        {% set ratio = loop.index0 / ((chart_data|length - 1) if (chart_data|length - 1) > 0 else 1) %}
+        {% if ratio < 0.3333 %}
+            {% set local_ratio = ratio / 0.3333 %}
+            {% set top_red = (210 + local_ratio * 45)|round|int %}
+            {% set top_green = (225 + local_ratio * 15)|round|int %}
+            {% set top_blue = (255 - local_ratio * 25)|round|int %}
+            {% set bottom_red = (170 + local_ratio * 85)|round|int %}
+            {% set bottom_green = (190 - local_ratio * 5)|round|int %}
+            {% set bottom_blue = (255 - local_ratio * 55)|round|int %}
+        {% elif ratio < 0.6666 %}
+            {% set local_ratio = (ratio - 0.3333) / 0.3333 %}
+            {% set top_red = (255 - local_ratio * 20)|round|int %}
+            {% set top_green = (240 + local_ratio * 15)|round|int %}
+            {% set top_blue = (230 + local_ratio * 10)|round|int %}
+            {% set bottom_red = (255 - local_ratio * 105)|round|int %}
+            {% set bottom_green = (185 + local_ratio * 45)|round|int %}
+            {% set bottom_blue = 200 %}
+        {% else %}
+            {% set local_ratio = (ratio - 0.6666) / 0.3334 %}
+            {% set top_red = (235 - local_ratio * 25)|round|int %}
+            {% set top_green = (255 - local_ratio * 30)|round|int %}
+            {% set top_blue = (240 + local_ratio * 15)|round|int %}
+            {% set bottom_red = (150 + local_ratio * 20)|round|int %}
+            {% set bottom_green = (230 - local_ratio * 40)|round|int %}
+            {% set bottom_blue = (200 + local_ratio * 55)|round|int %}
+        {% endif %}
+        {% set count_red = (bottom_red * 0.7)|round|int %}
+        {% set count_green = (bottom_green * 0.7)|round|int %}
+        {% set count_blue = (bottom_blue * 0.7)|round|int %} <div
+            style="flex: 1; display: flex; flex-direction: column; align-items: center; min-width: 0; height: 100%;">
+            <div
+                style="flex: 1; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: end;">
+                <span
+                    style="font-size: 10px; font-weight: 700; color: rgb({{ count_red }}, {{ count_green }}, {{ count_blue }}); margin-bottom: 4px; line-height: 1; white-space: nowrap; text-shadow: 0 1px 0 rgba(255,255,255,0.65);">{{hour_data.count}}</span>
+                <div style="
+                    background: linear-gradient(180deg, rgb({{ top_red }}, {{ top_green }}, {{ top_blue }}) 0%, rgb({{ bottom_red }}, {{ bottom_green }}, {{ bottom_blue }}) 100%);
+                    width: calc(100% - 4px);
+                    height: {{hour_data.percentage}}%;
+                    border-radius: 10px 10px 0 0;
+                    transition: all 0.3s ease;
+                    min-height: 5px;
+                    box-shadow: 0 6px 14px rgba({{ bottom_red }}, {{ bottom_green }}, {{ bottom_blue }}, 0.14);
+                    border: none;
+                " title="{{hour_data.hour}}时 - {{hour_data.count}}条消息"></div>
+            </div>
+            <span style="font-size: 10px; color: #9a8aa3; margin-top: 8px; line-height: 1;">{{hour_data.hour}}</span>
+    </div>
+    {% endfor %}
+</div>
+</div>

package/resources/original/atri/chat_quality_item.html

@@ -0,0 +1,155 @@
+<style>
+    .quality-card {
+        position: relative;
+        padding: 24px 24px 20px;
+        border-radius: 24px;
+        background: linear-gradient(90deg, rgba(255,240,230,0.95) 0%, rgba(255,255,255,0.98) 100%) !important;
+        border: 1px solid rgba(112, 189, 236, 0.22);
+        box-shadow: 0 18px 40px rgba(86, 161, 205, 0.14);
+        overflow: hidden;
+    }
+
+    .quality-card::before {
+        content: "锐评";
+        position: absolute;
+        top: 14px;
+        right: 18px;
+        font-size: 46px;
+        font-weight: 700;
+        color: rgba(83, 171, 219, 0.08);
+        letter-spacing: 4px;
+    }
+
+    .quality-head {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-end;
+        gap: 16px;
+        margin-bottom: 18px;
+        position: relative;
+        z-index: 1;
+    }
+
+    .quality-title {
+        font-size: 28px;
+        font-weight: 700;
+        color: #2a6587;
+        margin-bottom: 4px;
+    }
+
+    .quality-subtitle {
+        display: inline-flex;
+        align-items: center;
+        padding: 7px 12px;
+        border-radius: 999px;
+        background: rgba(117, 203, 244, 0.16);
+        color: #5492b7;
+        font-size: 14px;
+    }
+
+    .quality-bars {
+        display: grid;
+        gap: 12px;
+        margin-bottom: 16px;
+        position: relative;
+        z-index: 1;
+    }
+
+    .quality-bar-row {
+        display: grid;
+        grid-template-columns: 94px 1fr 54px;
+        align-items: center;
+        gap: 12px;
+    }
+
+    .quality-bar-label {
+        font-size: 14px;
+        color: #52768d;
+        font-weight: 600;
+    }
+
+    .quality-bar-track {
+        height: 12px;
+        border-radius: 999px;
+        background: rgba(126, 199, 235, 0.16);
+        overflow: hidden;
+    }
+
+    .quality-bar-fill {
+        height: 100%;
+        border-radius: 999px;
+        box-shadow: 0 6px 12px rgba(100, 167, 209, 0.2);
+    }
+
+    .quality-bar-value {
+        text-align: right;
+        font-size: 13px;
+        color: #5d88a3;
+        font-weight: 700;
+    }
+
+    .quality-comment-grid {
+        display: grid;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        gap: 12px;
+        margin-bottom: 16px;
+        position: relative;
+        z-index: 1;
+    }
+
+    .quality-comment {
+        padding: 14px 14px 12px;
+        border-radius: 16px;
+        background: rgba(255,255,255,0.74);
+        border: 1px dashed rgba(113, 191, 237, 0.34);
+    }
+
+    .quality-comment strong {
+        display: inline-block;
+        margin-bottom: 6px;
+        color: #3f84ad;
+    }
+
+    .quality-summary {
+        position: relative;
+        z-index: 1;
+        padding: 14px 16px;
+        border-radius: 18px;
+        background: rgba(255, 255, 255, 0.65);
+        color: #4f7389;
+        line-height: 1.8;
+        border: 1px solid rgba(112, 189, 236, 0.2);
+    }
+</style>
+
+<div class="quality-card">
+    <div class="quality-head">
+        <div>
+            <div class="quality-title">{{ title }}</div>
+            <div class="quality-subtitle">{{ subtitle }}</div>
+        </div>
+    </div>
+
+    <div class="quality-bars">
+        {% for dim in dimensions %}
+        <div class="quality-bar-row">
+            <div class="quality-bar-label">{{ dim.name }}</div>
+            <div class="quality-bar-track">
+                <div class="quality-bar-fill" style="width: {{ dim.percentage }}%; background: linear-gradient(90deg, {{ dim.color }}, color-mix(in srgb, {{ dim.color }} 65%, white));"></div>
+            </div>
+            <div class="quality-bar-value">{{ dim.percentage }}%</div>
+        </div>
+        {% endfor %}
+    </div>
+
+    <div class="quality-comment-grid">
+        {% for dim in dimensions %}
+        <div class="quality-comment">
+            <strong>{{ dim.name }}</strong>
+            <div>{{ dim.comment }}</div>
+        </div>
+        {% endfor %}
+    </div>
+
+    <div class="quality-summary">{{ summary }}</div>
+</div>