science-content-ppt

科学コンテンツPPTスキル

科学コンテンツのテキストを、ビジュアルなPPTスタイルのウェブページに変換する完全なワークフローです。

---

実際の例（OSI 7層ネットワークモデル）

ユーザー入力テキスト：

異なるコンピュータメーカーが製造したコンピュータ同士が相互に通信でき、より広い範囲でコンピュータネットワークを構築できるようにするため、国際標準化機構（ISO）は1978年に「開放型システム間相互接続参照モデル」を提唱しました……7層は下から順に、物理層、データリンク層、ネットワーク層、トランスポート層、セッション層、プレゼンテーション層、アプリケーション層です。このうち第4層がデータ転送サービスを担い、その上の3層はユーザー向けです。標準のOSI 7層モデルのほか、一般的なネットワーク階層の分類として、TCP/IP 4層プロトコルとTCP/IP 5層プロトコルがあります。

実行フロー：

1. 下記の「Step 1 プロンプトテンプレート」を使ってPPTプロンプトを生成します
2. モデルで完全なHTMLを直接生成します（またはStep 3のテンプレートで再構成します）
3. ユーザーが「フローチャートを生成して」と言ったら、モード二で内容をフラットUIスタイルに変換します

出力結果：

• PPTモード：表紙、概要、7層の詳細、層ごとの役割分担、プロトコル比較を含む13ページのカルーセル
• フローチャートモード：横並びの7層フローカード、緑色のフラットUIスタイル

---

テンプレートファイル（スキルに内蔵）

呼び出し時には、スキルのルートディレクトリからの相対パスを使用します。

PPTカルーセルテンプレート（モード一、デフォルト、Step 3で使用）：

# 优先使用 level2 模板（由当前对话模型根据内容选择最合适的）
assets/templates/PPT Template-level2/   ← 优先选用
assets/templates/PPT/PPT-Generate-3.html
assets/templates/PPT/PPT-Generate-1.html
assets/templates/PPT/PPT-Generate-2.html
assets/templates/PPT/PPT-Generate-4.html
assets/templates/PPT/PPT-Generate-5.html
assets/templates/PPT/PPT-Generate-6.html
assets/templates/PPT/PPT-Generate-7.html

AnimationフラットUIテンプレート（モード二、デフォルト）：

assets/templates/Animation/RNN-3.html  ← 默认
assets/templates/Animation/RNN-2.html
assets/templates/Animation/RNN-4.html
assets/templates/Animation/RNN-5.html
assets/templates/Animation/RNN-6.html
assets/templates/Animation/RNN-7.html
assets/templates/Animation/LSTM-1.html
assets/templates/Animation/Comprehension.html
assets/templates/Animation/GPU.html
assets/templates/Animation/word2vec-1.html
assets/templates/Animation/onehot.html
assets/templates/Animation/onehot-drawback.html
assets/templates/Animation/The fatal flaw of DNN.html
assets/templates/Animation/Cross-modal disentanglement - 2.html

---

モード一：PPTプレゼンテーション用ウェブページの生成（デフォルト）

ユーザーが科学コンテンツのテキストを提供し、プレゼンテーションページの生成を希望する場合は、以下の手順を実行します。

Step 1 — PPTプロンプトの生成

以下のプロンプトテンプレートを、ユーザーが入力した科学コンテンツに適用します。

根据以下内容生成基于纯前端页面单页布局仿PPT换页轮播进行直观图形化可视化的介绍，加大文字大小，并运用加粗、下划线、斜体、文字颜色、文字背景等强调方式方便进行视频演示。添加每次切换页面时页面中的各个元素依次"缓入"出现的动画效果(细化到每行文字)。

---
{用户输入的科普内容文本}
---

Step 2 — AI_Animation.html の生成

Step 1で生成したプロンプトを使って、現在の対話モデルを呼び出し、完全なHTMLページコードを生成します。

⚠️ 重要：生成プロンプトには、以下の2つの制約を必ず追加してください。

将emoji图标换成平面ui库的图标（如Font Awesome或Lucide图标库）。添加完成后检查页面中是否还有残留的emoji字符，如有则全部替换为对应的ui图标。

所有动画元素的class名统一使用 an 或 anim-item，以便后续动画重置逻辑能正确识别并处理。

⚠️ 重要：アニメーションのリセットを修正 AIモデルが直接生成したHTMLには、アニメーションが一度しか再生されず、ページ切り替え後に再生されないバグがあります。生成後、以下の修正JSをページの末尾（</body> の前）に挿入してください。

(function() {
    // 克隆节点强制重置CSS动画，确保每次切换页面动画重新触发
    document.querySelectorAll('.slide').forEach(function(s) {
        s.querySelectorAll('.an, .anim-item, [style*="animation"]').forEach(function(item) {
            var clone = item.cloneNode(true);
            item.parentNode.replaceChild(clone, item);
        });
    });
})();

出力先：ユーザーが指定します。指定がない場合は、デフォルトでデスクトップの /home/mt/桌面/AI_Animation.html に出力します。

Step 3 — PPTテンプレートスタイルへの再構成（任意）

生成したウェブページをPPTテンプレートに合わせて再構成します。

テンプレートの選択ルール：

1. まず assets/templates/PPT Template-level2/ ディレクトリから選択します（20種類以上のテンプレート）
2. 現在の対話モデルが、科学コンテンツの特徴（テーマ、構成、複雑さ）に基づいて、最適なPPTテンプレートを判断して選択します
3. level2 に適切な選択肢がない場合は、assets/templates/PPT/ ディレクトリに切り替えます

プロンプトテンプレート：

以页面 {模板相对路径} 为模板重构 {用户指定的输出路径}。

请将AI_Animation.html的内容按照指定PPT模板的布局、样式和轮播机制进行重构，保持科普内容不变，优化视觉效果使其更适合视频演示。

テンプレートパスの例：

• Level2 の例：assets/templates/PPT Template-level2/3-1.html
• デフォルトの代替テンプレート：assets/templates/PPT/PPT-Generate-3.html
• ユーザーはほかの内蔵テンプレートを指定できます

テンプレートディレクトリ一覧：

• PPT Template-level2/（優先）：1.html ～ 9-3.html の計25種類のテンプレート。下記のSUMMARYを参照してください
• PPT/（代替）：PPT-Generate-1.html ～ PPT-Generate-7.html

AIによるテンプレート選択の参考資料： assets/templates/PPT Template-level2/SUMMARY.md

Step 3で再構成する前に、AIはまず SUMMARY.md を読み、科学コンテンツの種類に応じて25種類のテンプレートから最適なものを選んでから再構成します。テンプレート選択の主な基準：

• 比較／討論系 → 8-1（12組のVS）、8-3（30組のVS）、6-2（アーキテクチャ比較）
• 手順／プロセス系 → 3-2（SVGフローチャート）、6-1/6-3/6-4（ステップアニメーション）
• 事例／実験系 → 4-2、4-3（コードレインアニメーション）
• 警告／危険系 → 5-4（13ページ＋15種類のアニメーション）、7-3（赤いパルス）
• 軽量／高速 → 3-3（331行）、4-1（315行）、9-3（5ページ）
• 最も強い視覚的インパクト → 2（13種類のアニメーション）、6-2（15種類のアニメーション＋赤と緑のVS比較）

注意：再構成後、選択したテンプレートにアニメーションリセット修正JSが組み込まれているか確認してください。組み込まれていない場合は、手動で追加してください。

---

モード二：フローチャートの生成（ユーザーによる明示的な指示が必要）

ユーザーが「フローチャートを生成して」と言ったら、以下の手順を実行します。

Step 1 — テンプレートの決定とSUMMARYの確認

AIは必ず最初に以下を読みます： assets/templates/Animation/SUMMARY.md

科学コンテンツの種類に応じて、14種類のAnimationテンプレートから最適なものを選択します。

コンテンツの種類	推奨テンプレート	理由
RNN/LSTM循環ネットワーク	RNN-3（隠れ状態、デフォルト）> RNN-4（標準プロセス）	ダークグリーンのテーマ、RNNシリーズ
勾配消失／爆発	RNN-6（爆発の警告）> RNN-7（2つの問題）	explode + shake アニメーション
アーキテクチャ／システム／複数モジュール	Comprehension > Cross-modal	アーキテクチャカード＋接続アニメーション
Word2Vec／単語ベクトル	word2vec-1	意味ベクトルの可視化
One-hotエンコーディング	onehot（解説）> onehot-drawback（欠点）	ベクトルの疎性を可視化
DNN／ディープラーニングの欠点	The fatal flaw of DNN	紫色の警告スタイル
GPU／コンピューティングハードウェア	GPU	コンピューティングノードの接続アニメーション
LSTMの3段階	LSTM-1	ゲート構造の3段階

デフォルトテンプレート： assets/templates/Animation/RNN-3.html ユーザーはほかのAnimationテンプレートを指定できます。

Step 2 — フラットUIスタイルへの再構成

プロンプトテンプレート：

将 {用户指定的输出路径} 网页的每相邻的两页的内容合并后按照指定网页的平面UI样式进行视觉重构，保持现有颜色方案不变。

具体实施要求包括：
1. 精确还原模板中的布局结构、元素间距、字体样式、图标设计和视觉层次
2. 确保所有交互元素（按钮、表单、导航等）的视觉表现与参考网页一致
3. 维持原有的颜色值和配色方案
4. 保证修改后的页面在不同设备和浏览器上具有良好的响应式表现
5. 优化DOM结构以匹配UI设计，同时保持原有功能完整性和交互逻辑不变

完成后需进行视觉一致性检查，确保实现效果与参考网页达到95%以上的相似度。

模板路径：{模板相对路径，默认 assets/templates/Animation/RNN-3.html}

---

既知の問題と解決策（実践上のまとめ）

Q1：ページ切り替え後にアニメーションが再実行されない

原因：CSSの animation-fill-mode: forwards によりアニメーションが一度しか実行されず、display:none にしてもアニメーション状態をリセットできません。 解決策：ページ切り替え時にDOMノードを複製します（cloneNode(true) + replaceChild）。これにより、ブラウザーにアニメーションを再レンダリングさせます。これはブラウザーを問わず最も信頼性の高い方法です。 コード：

document.querySelectorAll('.slide').forEach(function(s) {
    s.querySelectorAll('.an, .anim-item').forEach(function(item) {
        var clone = item.cloneNode(true);
        item.parentNode.replaceChild(clone, item);
    });
});

Q2：AIが直接生成したHTMLのコード量が不足している

現象：モデルが生成するHTMLは、ときに200～400行しかなく、内容が薄いことがあります。 解決策：プロンプトで「コードは1000行以上」と明確に指定するか、複数の手順に分けて生成してから内容を結合します。

Q3：フローチャートモードで新しい内容が生成されない

説明：フローチャートモードでは新しい内容を生成しません。生成済みの AI_Animation.html のページ内容を、テンプレートのスタイルに沿って視覚的に再構成するだけです。先にPPT版の内容を用意してから「フローチャートを生成して」と指示してください。

---

パラメーターの説明

パラメーター	デフォルト値	説明
PPTテンプレートパス	assets/templates/PPT Template-level2/（モデルが選択）	モード一で使用するテンプレートです。モデルが内容の特徴に基づいて最適なlevel2テンプレートを選択します
フローチャートテンプレートパス	assets/templates/Animation/RNN-3.html	モード二で使用するテンプレートです
出力先	/home/mt/桌面/AI_Animation.html	生成されたウェブページファイルです。ユーザーが指定しない場合はデフォルト値を使用します
アニメーション修正JS	テンプレートに内蔵	ページ切り替え時にノードを複製してCSSアニメーションをリセットします

---

使用方法

モード一（デフォルトのPPTフロー）：

ユーザーが科学コンテンツを入力 → スキルがプロンプト生成、ウェブページ生成、アニメーション修正の全工程を自動で完了

モード二（フローチャート）：

ユーザーが科学コンテンツを入力した後、「フローチャートを生成して」と指示 → 生成済みのAI_Animation.htmlをAnimationテンプレートに合わせて再構成し、フラットUIスタイルにします

テンプレートの置き換え：

ユーザーは「xxx.htmlをテンプレートにして」と指定することで、ほかの内蔵テンプレートを使って再構成できます