knowledge-2-web

Knowledge to Web - Knowledge Article Web Page Generator

Convert knowledge article content into beautiful interactive web pages, automatically generate illustrations, suitable for various knowledge topics such as history, science, culture, etc.

Use Cases

• Production of teaching aid materials
• Visualization of popular science knowledge articles
• In-depth analysis of historical events
• Illustrated explanation of scientific concepts
• Display of cultural knowledge cards

How to Use

Method 1: Provide a JSON file

python scripts/knowledge-to-web.py <content.json> [api_key] [--images N] [--style STYLE]

Parameter Description:

• content.json: JSON file of the article content (refer to assets/example-industrial-revolution.json)
• api_key: Google API key (optional, if the GOOGLE_API_KEY environment variable is already set)
• --images N: Number of images to generate (default: 5)
• --style STYLE: Image style (historical/scientific/cultural/nature, default: historical)
• --no-images: Skip image generation, only generate HTML

Method 2: Call via Skill

/knowledge-2-web 工业革命 包括背景、发展阶段、技术创新、社会影响等内容

JSON Content Format

{
  "title": "文章标题",
  "subtitle": "副标题",
  "coreThesis": "核心命题",
  "primaryColor": "#8B2B24",
  "accentColor": "#B58D59",
  "causes": [
    {
      "title": "原因标题",
      "description": "原因描述"
    }
  ],
  "timeline": [
    {
      "time": "时间点",
      "title": "事件标题",
      "description": "事件描述"
    }
  ],
  "impacts": [
    {
      "title": "影响标题",
      "description": "影响描述"
    }
  ],
  "perspectives": [
    {
      "title": "视角标题",
      "quote": "引用内容"
    }
  ],
  "misconceptions": [
    {
      "misconception": "常见误区",
      "fact": "正确事实"
    }
  ]
}

For a complete example, please refer to:assets/example-industrial-revolution.json

Image Generation

Automatically generate illustrations using the Gemini Image API:

Image Styles

• historical: Traditional Chinese painting style, suitable for historical themes
• scientific: Scientific illustration style, suitable for scientific concepts
• cultural: Cultural art style, suitable for cultural themes
• nature: Nature photography style, suitable for nature themes

API Configuration

A Google API Key needs to be configured:

# 方式1：环境变量
export GOOGLE_API_KEY="your-api-key"

# 方式2：命令行参数
python scripts/knowledge-to-web.py content.json your-api-key

Image Generation Example Code

from google import genai
from google.genai import types
from PIL import Image

client = genai.Client(api_key="your-api-key")

prompt = "A historical scene of the Industrial Revolution, traditional painting style"
response = client.models.generate_content(
    model="gemini-2.5-flash-image",
    contents=[prompt],
    config=types.GenerateContentConfig(
        response_modalities=['IMAGE'],
        image_config=types.ImageConfig(aspect_ratio="16:9")
    )
)

for part in response.candidates[0].content.parts:
    if part.inline_data:
        image = Image.open(io.BytesIO(part.inline_data.data))
        image.save("generated_image.png")

Output

Generate a complete HTML file, including:

• Responsive design, adaptable to mobile and desktop
• Beautiful card-based layout
• AI-generated illustrations
• Timeline visualization
• Icons and visual elements
• Common mistake tips
• Can be opened and viewed directly in the browser

Output directory:output/knowledge-web/

Design Style

• Uses the Tailwind CSS framework
• Chinese-optimized fonts (Noto Sans SC / Noto Serif SC)
• Custom color scheme
• Card hover effects
• Scrolling timeline
• Responsive grid layout
• Perfect integration of images and text

Script Description

knowledge-to-web.py

Main script, a complete knowledge article generator, including image generation and HTML generation functions.

generate-illustrations.py

Standalone illustration generator, which can be used separately to generate illustrations for knowledge articles.

generate-template.js

JavaScript template generator, used for dynamically generating HTML on the front end.

Example

# 生成工业革命知识网页（含5张插图）
python scripts/knowledge-to-web.py assets/example-industrial-revolution.json --images 5 --style historical

# 仅生成HTML，不生成图片
python scripts/knowledge-to-web.py assets/example-industrial-revolution.json --no-images

# 使用科学风格生成3张插图
python scripts/knowledge-to-web.py content.json --images 3 --style scientific