Knowledge to Web - 知識記事ウェブページジェネレーター

知識記事の内容を美しいインタラクティブなウェブページに変換し、画像を自動生成します。歴史、科学、文化など、あらゆる種類の知識テーマに適用できます。

使用シーン

• 授業補助教材の作成
• 知識啓蒙記事の視覚化
• 歴史的事件の詳細な分析
• 科学的概念の図解説明
• 文化知識カードの表示

使用方法

方法1：JSONファイルの提供

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

パラメーターの説明：

• content.json: 記事内容のJSONファイル（assets/example-industrial-revolution.jsonを参照）
• api_key: Google APIキー（オプション、環境変数 GOOGLE_API_KEY が設定されている場合）
• --images N: 生成する画像の数（デフォルト：5）
• --style STYLE: 画像のスタイル（historical/scientific/cultural/nature、デフォルト：historical）
• --no-images: 画像生成をスキップし、HTMLのみを生成します

方法2：Skillによる呼び出し

/knowledge-2-web 産業革命 背景、発展段階、技術革新、社会影響などの内容を含む

JSONコンテンツ形式

{
  "title": "記事タイトル",
  "subtitle": "サブタイトル",
  "coreThesis": "核心命題",
  "primaryColor": "#8B2B24",
  "accentColor": "#B58D59",
  "causes": [
    {
      "title": "原因タイトル",
      "description": "原因説明"
    }
  ],
  "timeline": [
    {
      "time": "時点",
      "title": "イベントタイトル",
      "description": "イベント説明"
    }
  ],
  "impacts": [
    {
      "title": "影響タイトル",
      "description": "影響説明"
    }
  ],
  "perspectives": [
    {
      "title": "視点タイトル",
      "quote": "引用内容"
    }
  ],
  "misconceptions": [
    {
      "misconception": "よくある誤解",
      "fact": "正しい事実"
    }
  ]
}

完全な例については、assets/example-industrial-revolution.json を参照してください。

画像生成

Gemini Image API を使用して、画像を自動生成します。

画像スタイル

• historical: 伝統的な中国画スタイル、歴史テーマに適しています
• scientific: 科学イラストスタイル、科学的概念に適しています
• cultural: 文化芸術スタイル、文化テーマに適しています
• nature: 自然写真スタイル、自然テーマに適しています

API設定

Google API Key の設定が必要です。

# 方法1：環境変数
export GOOGLE_API_KEY="your-api-key"

# 方法2：コマンドライン引数
python scripts/knowledge-to-web.py content.json your-api-key

画像生成サンプルコード

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")

出力

以下の要素を含む完全なHTMLファイルが生成されます。

• レスポンシブデザイン、モバイルとデスクトップに対応
• 美しいカード型レイアウト
• AI生成の画像
• タイムラインの視覚化
• アイコンと視覚要素
• よくある間違いのヒント
• ブラウザで直接開いて閲覧可能

出力ディレクトリ：output/knowledge-web/

デザインスタイル

• Tailwind CSSフレームワークを使用
• 中国語に最適化されたフォント（Noto Sans SC / Noto Serif SC）
• カスタム配色スキーム
• カードのホバー効果
• スクロールタイムライン
• レスポンシブグリッドレイアウト
• 画像とテキストの完璧な融合

スクリプトの説明

knowledge-to-web.py

メインスクリプトで、画像生成とHTML生成機能を含む完全な知識記事ジェネレーターです。

generate-illustrations.py

独立したイラストジェネレーターで、知識記事の画像を単独で生成するために使用できます。

generate-template.js

JavaScriptテンプレートジェネレーターで、フロントエンドでHTMLを動的に生成するために使用されます。

例

# 産業革命の知識ウェブページを生成（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