معماری و نحوه تولید خودکار تصاویر شاخص وبلاگ با Playwright و پایتون در مستر هرمس

تولید مداوم محتوای متنی غنی برای وبلاگ، بدون داشتن تصاویر شاخص (Featured Image) هماهنگ و چشم‌نواز، اثربخشی انتشارات فنی را تا حد زیادی کاهش می‌دهد. در رسانه‌ها و مقالات فنی مدرن، ساخت دستی کاور در فتوشاپ یا فیگما فرآیندی زمان‌بر، تکراری و پرهزینه است. در این مقاله تخصصی از پایگاه دانش مستر هرمس، معماری کامل خط تولید خودکار تصاویر شاخص وبلاگ را کالبدشکافی می‌کنیم؛ سیستمی که با ترکیب کدهای HTML/CSS، مرورگر Headless کروم، فریم‌ورک اتوماسیون Playwright و پایتون، در کمتر از یک ثانیه تصاویری با رزولوشن بالا و هماهنگ با دیزاین سیستم نوس ریسرچ تولید می‌کند.

۱. چرا رویکرد کد به تصویر (Code-to-Image) انتخاب شد؟

بسیاری از تیم‌های توسعه برای تولید تصویر به ابزارهای هوش مصنوعی مولد (مانند DALL-E یا Stable Diffusion) روی می‌آورند. با وجود جذابیت بصری، این ابزارها برای مقالات تخصصی و برندینگ تجاری با چند چالش جدی روبرو هستند:

• ناسازگاری شدید با متون و تایپوگرافی فارسی: مدل‌های تصویرساز قادر به نگارش صحیح متون فارسی، علائم نگارشی و چیدمان راست‌به‌چپ نیستند و خروجی‌هایی ناخوانا تولید می‌کنند.
• نبود هماهنگی بصری و ناهماهنگی در هویت برند: هر بار رندر تصویری متفاوت با پالت و سبکی غیرقابل پیش‌بینی تولید می‌کند که هویت مینیمال و دارک رسانه را مخدوش می‌سازد.
• سنگینی پردازش و تأخیر بالا: رندر مدل‌های Diffusion نیازمند پردازش سنگین گرافیکی (GPU) بوده و برای اتوماسیون بی‌درنگ مقالات کند است.

رویکرد طراحی بر بستر HTML و CSS و تبدیل آن به تصویر با استفاده از موتور مرورگر، کنترل ۱۰۰ درصدی روی تک‌تک پیکسل‌ها، فونت‌ها، رنگ‌های تم و چیدمان راست‌چین را فراهم می‌آورد و در یک ثانیه روی پردازنده‌های عادی اجرا می‌شود.

۲. دیزاین سیستم و قواعد بصری بنرهای مستر هرمس

تصاویر وبلاگ مستر هرمس بر پایه هویت فناورانه، دارک و الگوهای تیم Nous Research طراحی شده‌اند و استانداردهای زیر را رعایت می‌کنند:

• نسبت ابعاد ۱۶:۹ استاندارد: رندر پایه در ابعاد ۱۶۰۰ در ۹۰۰ پیکسل جهت نمایش ایده‌آل در کارت‌های وبلاگ، توییتر، لینکدین و پیش‌نمایش متادیتاهای Open Graph.
• پالت رنگی دارک و الکتریک: پس‌زمینه تیره عمیق (#05060b)، رنگ آبی هویتی نوس ریسرچ (#0000f2)، رنگ سبز نئونی مکمل (#00ffaa) و آبی فیروزه‌ای متون (#38bdf8).
• شبکه خطی پس‌زمینه (Grid Lines): خطوط نازک و ظریف به اندازه ۵۰ در ۵۰ پیکسل با شفافیت ملایم که فضای مهندسی و پایدار را القا می‌کند.
• هاله‌های نور محیطی (Radial Glow): دو کانون نور ملایم با فیلتر بلر ۸۰ پیکسلی در بالا-راست و پایین-چپ که به لایه‌بندی عمق می‌بخشند.

۳. حل قطعی چالش فونت فارسی با جاسازی مستقیم Base64

بزرگ‌ترین معضل رندر صفحات در مرورگرهای Headless یا سرورهای لینوکسی، عدم شناسایی فونت‌های فارسی و جایگزینی آن‌ها با فونت‌های پیش‌فرض نامناسب سیستمی است. برای حل بنیادین این مشکل، فایل فونت وزیرمتن (در اوزان معمولی، بولد و بلک) خوانده شده و به رشته base64 تبدیل می‌شود. این رشته مستقیماً درون بلوک @font-face قرار می‌گیرد:

import base64
from pathlib import Path

FONTS_DIR = Path("/Library/Fonts")
regular_b64 = base64.b64encode((FONTS_DIR / "Vazirmatn-Regular.ttf").read_bytes()).decode('utf-8')
bold_b64 = base64.b64encode((FONTS_DIR / "Vazirmatn-Bold.ttf").read_bytes()).decode('utf-8')
black_b64 = base64.b64encode((FONTS_DIR / "Vazirmatn-Black.ttf").read_bytes()).decode('utf-8')

# تزریق درون قالب CSS
css_font = f"""
@font-face {{
  font-family: 'Vazirmatn';
  src: url(data:font/truetype;charset=utf-8;base64,{bold_b64}) format('truetype');
  font-weight: 700;
  font-style: normal;
}}
* {{
  letter-spacing: 0 !important;
}}
"""

با این تکنیک، فرآیند رندر هیچ‌گونه وابستگی به دسترسی به اینترنت، کش مرورگر یا فونت‌های نصب‌شده روی سیستم‌عامل سرور ندارد و خروجی در تمام محیط‌ها یکسان و دقیق خواهد بود.

۴. پایپ‌لاین اجرایی با فریم‌ورک Playwright

برای تبدیل کدهای HTML و استایل‌های تزریق‌شده به یک فایل تصویر PNG کریستالی و بدون افت کیفیت، از فریم‌ورک قدرتمند Playwright استفاده می‌شود. این فریم‌ورک یک نمونه مجزا از مرورگر Chromium را اجرا کرده، پس از بارگذاری محتوا، اسکرین‌شات باکیفیت می‌گیرد:

from playwright.sync_api import sync_playwright

def render_banner_to_png(html_markup: str, output_filepath: str):
    with sync_playwright() as p:
        # اجرای هدلس مرورگر کروم
        browser = p.chromium.launch(
            args=["--no-sandbox", "--disable-setuid-sandbox"]
        )
        page = browser.new_page(
            viewport={"width": 1600, "height": 900},
            device_scale_factor=1
        )
        page.set_content(html_markup)
        # مکث کوتاه جهت اطمینان از لود استایل‌ها و گرادیان‌ها
        page.wait_for_timeout(800)
        page.screenshot(path=output_filepath)
        browser.close()

۵. راه‌حل جایگزین: وکتورهای SVG با موتور CairoSVG

برای مواقعی که استفاده از مرورگر کرومیوم مقدور نیست یا تمایل دارید از آیکون‌های وکتور مثل بال‌های چرخان هرمس بدون نیاز به مرورگر استفاده کنید، کتابخانه cairosvg یک جایگزین سبک برداری محسوب می‌شود. در این سناریو، الگو به صورت یک سند SVG طراحی شده و مستقیماً به خروجی پیکسلی تبدیل می‌گردد:

import cairosvg

svg_data = """

  
  
  
    عنوان مقاله وبلاگ مستر هرمس
  

"""

cairosvg.svg2png(bytestring=svg_data.encode('utf-8'), write_to="output.png")

۶. اتوماسیون بارگذاری و اتصال تصویر شاخص در وردپرس

پس از تولید فایل تصویر، مرحله نهایی اتصال آن به عنوان تصویر شاخص (Featured Thumbnail) در ساختار وردپرس است. این کار از طریق توابع رسمی وردپرس با اسکریپت پی‌اچ‌پی یا API انجام می‌پذیرد:

// بررسی وجود پیوست و الصاق به عنوان تصویر شاخص
$image_path = "/var/www/mrhermes.ir/wp-content/uploads/2026/10/banner.png";
$image_url  = "https://mrhermes.ir/wp-content/uploads/2026/10/banner.png";

// ثبت آدرس سفارشی در متادیتای اختصاصی قالب مستر هرمس
update_post_meta($post_id, '_mrhermes_custom_thumb', $image_url);

$filetype = wp_check_filetype(basename($image_path), null);
$attachment = array(
    'guid'           => $image_url,
    'post_mime_type' => $filetype['type'],
    'post_title'     => preg_replace('/.[^.]+$/', '', basename($image_path)),
    'post_content'   => '',
    'post_status'    => 'inherit'
);

$attachment_id = wp_insert_attachment($attachment, $image_path, $post_id);
require_once(ABSPATH . 'wp-admin/includes/image.php');
$attach_data = wp_generate_attachment_metadata($attachment_id, $image_path);
wp_update_attachment_metadata($attachment_id, $attach_data);

// الصاق نهایی به پست
set_post_thumbnail($post_id, $attachment_id);

۷. نیازمندی‌های لینوکس برای رندر بدون خطا در محیط سرور

اگر فرآیند رندر Playwright را مستقیماً روی سرورهای ابری اوبونتو یا دبیان اجرا می‌کنید، هسته مرورگر به پیش‌نیازهای کتابخانه‌های گرافیکی نیاز دارد. در صورت مواجهه با خطاهایی مانند cannot open shared object file، نصب پکیج‌های زیر الزامی است:

apt-get update -y && apt-get install -y 
  libatk1.0-0 libatk-bridge2.0-0 libcups2 libdrm2 libxkbcommon0 
  libxcomposite1 libxdamage1 libxfixes3 libxrandr2 libgbm1 
  libpango-1.0-0 libcairo2 libasound2 libnss3 libnspr4 libxss1

جمع‌بندی و دستاوردها

با پیاده‌سازی این خط تولید خودکار، تیم تحریریه مستر هرمس موفق شده است فرآیند آماده‌سازی بنرهای باکیفیت وبلاگ را از چند ساعت به کسری از ثانیه کاهش دهد. علاوه بر حذف کامل خطاهای متداول در فونت‌های فارسی، تصاویر تولیدشده از نظر ابعاد، کنتراست رنگی و هویت سازمانی در بالاترین سطح پایداری و یکپارچگی بصری باقی می‌مانند.