Course Thumbnail Generator — HTML/CSS + Puppeteer

Course Thumbnail Generator — HTML/CSS + Puppeteer

Overview

Generuje vizualne poutave cover image pro e-learning kurzy (slide.channel). Primarni metoda: HTML/CSS design renderovany pres Puppeteer do PNG. Fallback: Gemini Flash AI image generation.

KRITICKE: Kam patri thumbnail

Thumbnail se generuje na KURZ (slide.channel), NE na jednotlive lekce!

• slide.channel.image_1920 = cover obrazek kurzu (videt na /slides)
• slide.slide.image_1920 = thumbnail lekce (volitelne, videt uvnitr kurzu)

Kazdy kurz MUSI mit unikatni cover image aby se odlisil od ostatnich.

Metoda 1: HTML/CSS + Puppeteer (PRIMARNI)

Proc HTML/CSS

• Plna kontrola nad textem, layoutem, barvami
• Konzistentni vizualni styl across kurzu
• Zadne nahodne AI artefakty
• Text se renderuje ostrý a citelny
• Reprodukovatelne — stejny HTML = stejny vysledek

Design principy pro VIZUALNE POUTAVY thumbnail

DULEZITE: Thumbnail NESMI byt vizualne chaby! Uzivatel ho nesmi mit depresi jen z pohledu.

1. Zive, saturovane barvy — pouzivej radial-gradient orby s vysokou opacitou (0.3-0.5), ne tlumene (0.05-0.1)
2. Vice vrstev vizualnich elementu — pozadi + orby + dekorativni elementy + obsah
3. 3D hloubka — perspective transform na editor/card mockupy, box-shadow s blur
4. Kontrast — bily bold text na tmavem pozadi, gradient text pro klicova slova
5. Vizualni metafory — code editor mockup, plovouci karty, workflow pills, badges
6. Sparkle/glow efekty — box-shadow s barvou, filter: blur na orby

Anatomie dobreho thumbnaiilu

+-------------------------------------------------------+
|  [orby + gradient pozadi]                              |
|                                                        |
|  [badge]  E-LEARNING COURSE                           |
|                                          [editor mockup]
|  VELKY TITLE                             |requirements |
|  GRADIENT TEXT                           |  ## Stories  |
|  mensi podtitul                          |  GIVEN/WHEN  |
|                                          |  THEN...     |
|  Subtitle popis kurzu                                  |
|                                          [plovouci     |
|  [pill 1] > [pill 2] > [pill 3]          karty]       |
|                                                        |
+-------------------------------------------------------+

Povinne vizualni elementy

1. Pozadi: Tmave (#0f0f1a) s 3-4 radial-gradient orby (filter: blur(80px))
2. Badge: Pill s "E-LEARNING COURSE" nebo podobne, s glow teckou
3. Title: 2-3 radky, prvni bily (font-weight: 900), druhy gradient (-webkit-background-clip: text)
4. Subtitle: Mensi, rgba(255,255,255,0.55), max 1-2 radky
5. Workflow/feature pills: Barevne pills dole ukazujici klicove koncepty kurzu
6. Vizualni mockup: Editor, terminal, spec dokument — relevantni k tematu kurzu
7. Dekorace: Sparkle dots, connection circles, floating cards

CSS vzory ktere fungují

/* Glowing orb — POUZIVEJ 0.3-0.5 opacitu, ne 0.05! */
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
}
.orb1 { width: 500px; height: 500px; background: rgba(168, 85, 247, 0.5); }

/* Gradient text — pro zvyrazneni klicoveho slova */
.gradient-text {
  background: linear-gradient(135deg, #c084fc 0%, #22d3ee 50%, #34d399 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 3D editor mockup — perspective transform */
.editor {
  transform: perspective(1200px) rotateY(-8deg) rotateX(3deg);
  box-shadow: 0 0 60px rgba(124, 58, 237, 0.25), 0 25px 80px rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(15, 15, 30, 0.85);
}

/* Glass card */
.card {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 14px;
  backdrop-filter: blur(20px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}

/* Workflow pills — kazdy jina barva */
.pill { padding: 14px 24px; border-radius: 14px; font-weight: 700; }
.pill.p1 { background: rgba(168, 85, 247, 0.25); }
.pill.p2 { background: rgba(59, 130, 246, 0.25); }
.pill.p3 { background: rgba(6, 182, 212, 0.25); }
.pill.p4 { background: rgba(34, 197, 94, 0.25); }

Barevne palety per tema

Tema kurzu	Primarni orby	Gradient text	Pills
AI/Coding	purple + cyan + pink	purple→cyan→green	purple, blue, cyan, green
Business/CRM	blue + amber + green	blue→amber	blue, amber, green, teal
DevOps/Infra	orange + red + blue	orange→red→purple	orange, red, blue, green
Security	red + purple + dark	red→purple	red, purple, slate, emerald
Design/UI	pink + violet + blue	pink→violet→blue	pink, violet, blue, cyan
Data/DB	emerald + cyan + blue	emerald→cyan	emerald, cyan, blue, indigo

Rendering: Puppeteer + Chrome

const puppeteer = require('puppeteer');
const path = require('path');

(async () => {
  const browser = await puppeteer.launch({
    headless: 'new',
    executablePath: '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
  });
  const page = await browser.newPage();
  await page.setViewport({ width: 1920, height: 1080, deviceScaleFactor: 1 });

  const htmlPath = path.resolve(__dirname, 'thumbnail.html');
  await page.goto(`file://${htmlPath}`, { waitUntil: 'networkidle0' });

  const outPath = path.resolve(__dirname, 'thumbnail.png');
  await page.screenshot({ path: outPath, type: 'png' });

  console.log(`Saved: ${outPath}`);
  await browser.close();
})();

Pozadavky:

• Node.js s puppeteer (npm install puppeteer v projektu startbusiness)
• Google Chrome (/Applications/Google Chrome.app/Contents/MacOS/Google Chrome)
• Viewport: 1920x1080 (standard course cover)

Upload do Odoo

import base64
with open('thumbnail.png', 'rb') as f:
    image_b64 = base64.b64encode(f.read()).decode('utf-8')

call('slide.channel', 'write', [[channel_id], {'image_1920': image_b64}])

Soubory na disk

Pro kazdy kurz vytvor adresar kurzy/{course_slug}/ s:

• thumbnail.html — HTML/CSS design
• render_thumbnail.js — Puppeteer renderer
• upload_thumbnail.py — upload do Odoo
• thumbnail.png — renderovany vysledek

Kompletni workflow v exec.py

Thumbnail generovani a upload pridej PRIMO do hlavniho exec.py skriptu kurzu (za vytvoreni channelu, pred finalni summary):

import subprocess
import base64

# ... po vytvoreni channel_id ...

# Generate thumbnail
print("Generating thumbnail...")
thumbnail_dir = os.path.dirname(os.path.abspath(__file__))
subprocess.run(['node', os.path.join(thumbnail_dir, 'render_thumbnail.js')], check=True)

# Upload thumbnail
with open(os.path.join(thumbnail_dir, 'thumbnail.png'), 'rb') as f:
    image_b64 = base64.b64encode(f.read()).decode('utf-8')

call('slide.channel', 'write', [[channel_id], {'image_1920': image_b64}])
print(f"  Thumbnail uploaded to channel {channel_id}")

Metoda 2: Gemini Flash (FALLBACK)

Pouzij kdyz HTML/CSS neni mozne (napr. potrebujes realisticke ilustrace).

Configuration

• GEMINI_API_KEY — Google Gemini API key
• Python SDK: google-genai (NE google-generativeai — deprecated!)

Prompt pravidla

1. VZDY anglicky — Gemini generuje lepsi obrazky s anglickymi prompty
2. NIKDY nepozaduj text/slova — renderuji se spatne
3. Pouzivej vizualni metafory (bridge, shield, rocket, etc.)
4. Kazdy kurz MUSI mit jinou barevnou paletu
5. Prompt pod 200 slov
6. Explicitne rekni "no text, no words, no letters, no numbers"

Prompt template

Create a bold, eye-catching course cover image.
Theme: {course_topic_summary}
Visual: {specific_visual_metaphors_and_icons}
Colors: {unique_gradient_palette} background.
Style: Modern flat illustration, clean vector art, vibrant colors.
Do NOT include any text, words, letters, numbers, or watermarks.

Generate image

from google import genai
from google.genai import types

client = genai.Client(api_key=os.environ.get('GEMINI_API_KEY'))

response = client.models.generate_content(
    model="gemini-2.5-flash-image",
    contents=prompt,
    config=types.GenerateContentConfig(response_modalities=["IMAGE"]),
)

image_data = None
for part in response.candidates[0].content.parts:
    if part.inline_data is not None:
        image_data = part.inline_data.data
        break

image_b64 = base64.b64encode(image_data).decode('utf-8')

Modely (v poradi stability):

1. gemini-2.5-flash-image — osvedceny, stabilni
2. gemini-3.1-flash-image-preview — nejnovejsi
3. gemini-3-pro-image-preview — nejvyssi kvalita

NEFUNGUJE: gemini-2.0-flash-exp-image-generation — 404

Important Rules

1. HTML/CSS je PRIMARNI metoda — Gemini jen jako fallback
2. Thumbnail patri na slide.channel — ne slide.slide
3. Kazdy kurz MUSI mit vizualne UNIKATNI cover
4. Thumbnail NESMI byt vizualne chaby — zive barvy, hloubka, dekorace
5. image_1920 field pro base64 upload
6. Viewport 1920x1080 pro Puppeteer
7. Pouzij executablePath pro lokalniho Chrome
8. Thumbnail se generuje AUTOMATICKY jako soucast kurzu workflow