Add Webpage (#1)

* add webpage * Add acknowledgements * restructure folders * rephrase * rephrase * Add appendix * Add link to appendix * cleanup * cleanup
tsukuba-websci · Feb 1, 2024 · 1af7e54 · 1af7e54
1 parent 5c8bc04
commit 1af7e54
Show file tree

Hide file tree

Showing 188 changed files with 2,865 additions and 0 deletions.
diff --git a/docs/appendix.html b/docs/appendix.html
diff --git a/docs/figs/architecture.png b/docs/figs/architecture.png
diff --git a/docs/figs/mixi.png b/docs/figs/mixi.png
diff --git a/docs/figs/panas_results/Anger-0-1.png b/docs/figs/panas_results/Anger-0-1.png
diff --git a/docs/figs/panas_results/Anger-0-2.png b/docs/figs/panas_results/Anger-0-2.png
diff --git a/docs/figs/panas_results/Anger-0-3.png b/docs/figs/panas_results/Anger-0-3.png
diff --git a/docs/figs/panas_results/Anger-0-4.png b/docs/figs/panas_results/Anger-0-4.png
diff --git a/docs/figs/panas_results/Anger-0-5.png b/docs/figs/panas_results/Anger-0-5.png
diff --git a/docs/figs/panas_results/Anger-1-1.png b/docs/figs/panas_results/Anger-1-1.png
diff --git a/docs/figs/panas_results/Anger-1-2.png b/docs/figs/panas_results/Anger-1-2.png
diff --git a/docs/figs/panas_results/Anger-1-3.png b/docs/figs/panas_results/Anger-1-3.png
diff --git a/docs/figs/panas_results/Anger-1-4.png b/docs/figs/panas_results/Anger-1-4.png
diff --git a/docs/figs/panas_results/Anger-1-5.png b/docs/figs/panas_results/Anger-1-5.png
diff --git a/docs/figs/panas_results/Anger-2-1.png b/docs/figs/panas_results/Anger-2-1.png
diff --git a/docs/figs/panas_results/Anger-2-2.png b/docs/figs/panas_results/Anger-2-2.png
diff --git a/docs/figs/panas_results/Anger-2-3.png b/docs/figs/panas_results/Anger-2-3.png
diff --git a/docs/figs/panas_results/Anger-2-4.png b/docs/figs/panas_results/Anger-2-4.png
diff --git a/docs/figs/panas_results/Anger-2-5.png b/docs/figs/panas_results/Anger-2-5.png
diff --git a/docs/figs/panas_results/Anger-3-1.png b/docs/figs/panas_results/Anger-3-1.png
diff --git a/docs/figs/panas_results/Anger-3-2.png b/docs/figs/panas_results/Anger-3-2.png
diff --git a/docs/figs/panas_results/Anger-3-3.png b/docs/figs/panas_results/Anger-3-3.png
diff --git a/docs/figs/panas_results/Anger-3-4.png b/docs/figs/panas_results/Anger-3-4.png
diff --git a/docs/figs/panas_results/Anger-3-5.png b/docs/figs/panas_results/Anger-3-5.png
diff --git a/docs/figs/panas_results/Anger-4-1.png b/docs/figs/panas_results/Anger-4-1.png
diff --git a/docs/figs/panas_results/Anger-4-2.png b/docs/figs/panas_results/Anger-4-2.png
diff --git a/docs/figs/panas_results/Anger-4-3.png b/docs/figs/panas_results/Anger-4-3.png
diff --git a/docs/figs/panas_results/Anger-4-4.png b/docs/figs/panas_results/Anger-4-4.png
diff --git a/docs/figs/panas_results/Anger-4-5.png b/docs/figs/panas_results/Anger-4-5.png
diff --git a/docs/figs/panas_results/Anxiety-0-1.png b/docs/figs/panas_results/Anxiety-0-1.png
diff --git a/docs/figs/panas_results/Anxiety-0-2.png b/docs/figs/panas_results/Anxiety-0-2.png
diff --git a/docs/figs/panas_results/Anxiety-0-3.png b/docs/figs/panas_results/Anxiety-0-3.png
diff --git a/docs/figs/panas_results/Anxiety-0-4.png b/docs/figs/panas_results/Anxiety-0-4.png
diff --git a/docs/figs/panas_results/Anxiety-0-5.png b/docs/figs/panas_results/Anxiety-0-5.png
diff --git a/docs/figs/panas_results/Anxiety-1-1.png b/docs/figs/panas_results/Anxiety-1-1.png
diff --git a/docs/figs/panas_results/Anxiety-1-2.png b/docs/figs/panas_results/Anxiety-1-2.png
diff --git a/docs/figs/panas_results/Anxiety-1-3.png b/docs/figs/panas_results/Anxiety-1-3.png
diff --git a/docs/figs/panas_results/Anxiety-1-4.png b/docs/figs/panas_results/Anxiety-1-4.png
diff --git a/docs/figs/panas_results/Anxiety-1-5.png b/docs/figs/panas_results/Anxiety-1-5.png
diff --git a/docs/figs/panas_results/Anxiety-2-1.png b/docs/figs/panas_results/Anxiety-2-1.png
diff --git a/docs/figs/panas_results/Anxiety-2-2.png b/docs/figs/panas_results/Anxiety-2-2.png
diff --git a/docs/figs/panas_results/Anxiety-2-3.png b/docs/figs/panas_results/Anxiety-2-3.png
diff --git a/docs/figs/panas_results/Anxiety-2-4.png b/docs/figs/panas_results/Anxiety-2-4.png
diff --git a/docs/figs/panas_results/Anxiety-2-5.png b/docs/figs/panas_results/Anxiety-2-5.png
diff --git a/docs/figs/panas_results/Anxiety-3-1.png b/docs/figs/panas_results/Anxiety-3-1.png
diff --git a/docs/figs/panas_results/Anxiety-3-2.png b/docs/figs/panas_results/Anxiety-3-2.png
diff --git a/docs/figs/panas_results/Anxiety-3-3.png b/docs/figs/panas_results/Anxiety-3-3.png
diff --git a/docs/figs/panas_results/Anxiety-3-4.png b/docs/figs/panas_results/Anxiety-3-4.png
diff --git a/docs/figs/panas_results/Anxiety-3-5.png b/docs/figs/panas_results/Anxiety-3-5.png
diff --git a/docs/figs/panas_results/Depression-0-1.png b/docs/figs/panas_results/Depression-0-1.png
diff --git a/docs/figs/panas_results/Depression-0-2.png b/docs/figs/panas_results/Depression-0-2.png
diff --git a/docs/figs/panas_results/Depression-0-3.png b/docs/figs/panas_results/Depression-0-3.png
diff --git a/docs/figs/panas_results/Depression-0-4.png b/docs/figs/panas_results/Depression-0-4.png
diff --git a/docs/figs/panas_results/Depression-0-5.png b/docs/figs/panas_results/Depression-0-5.png
diff --git a/docs/figs/panas_results/Depression-1-1.png b/docs/figs/panas_results/Depression-1-1.png
diff --git a/docs/figs/panas_results/Depression-1-2.png b/docs/figs/panas_results/Depression-1-2.png
diff --git a/docs/figs/panas_results/Depression-1-3.png b/docs/figs/panas_results/Depression-1-3.png
diff --git a/docs/figs/panas_results/Depression-1-4.png b/docs/figs/panas_results/Depression-1-4.png
diff --git a/docs/figs/panas_results/Depression-1-5.png b/docs/figs/panas_results/Depression-1-5.png
diff --git a/docs/figs/panas_results/Depression-2-1.png b/docs/figs/panas_results/Depression-2-1.png
diff --git a/docs/figs/panas_results/Depression-2-2.png b/docs/figs/panas_results/Depression-2-2.png
diff --git a/docs/figs/panas_results/Depression-2-3.png b/docs/figs/panas_results/Depression-2-3.png
diff --git a/docs/figs/panas_results/Depression-2-4.png b/docs/figs/panas_results/Depression-2-4.png
diff --git a/docs/figs/panas_results/Depression-2-5.png b/docs/figs/panas_results/Depression-2-5.png
diff --git a/docs/figs/panas_results/Depression-3-1.png b/docs/figs/panas_results/Depression-3-1.png
diff --git a/docs/figs/panas_results/Depression-3-2.png b/docs/figs/panas_results/Depression-3-2.png
diff --git a/docs/figs/panas_results/Depression-3-3.png b/docs/figs/panas_results/Depression-3-3.png
diff --git a/docs/figs/panas_results/Depression-3-4.png b/docs/figs/panas_results/Depression-3-4.png
diff --git a/docs/figs/panas_results/Depression-3-5.png b/docs/figs/panas_results/Depression-3-5.png
diff --git a/docs/figs/panas_results/Depression-4-1.png b/docs/figs/panas_results/Depression-4-1.png
diff --git a/docs/figs/panas_results/Depression-4-2.png b/docs/figs/panas_results/Depression-4-2.png
diff --git a/docs/figs/panas_results/Depression-4-3.png b/docs/figs/panas_results/Depression-4-3.png
diff --git a/docs/figs/panas_results/Depression-4-4.png b/docs/figs/panas_results/Depression-4-4.png
diff --git a/docs/figs/panas_results/Depression-4-5.png b/docs/figs/panas_results/Depression-4-5.png
diff --git a/docs/figs/panas_results/Depression-5-1.png b/docs/figs/panas_results/Depression-5-1.png
diff --git a/docs/figs/panas_results/Depression-5-2.png b/docs/figs/panas_results/Depression-5-2.png
diff --git a/docs/figs/panas_results/Depression-5-3.png b/docs/figs/panas_results/Depression-5-3.png
diff --git a/docs/figs/panas_results/Depression-5-4.png b/docs/figs/panas_results/Depression-5-4.png
diff --git a/docs/figs/panas_results/Depression-5-5.png b/docs/figs/panas_results/Depression-5-5.png
diff --git a/docs/figs/panas_results/Embarrassment-0-1.png b/docs/figs/panas_results/Embarrassment-0-1.png
diff --git a/docs/figs/panas_results/Embarrassment-0-2.png b/docs/figs/panas_results/Embarrassment-0-2.png
diff --git a/docs/figs/panas_results/Embarrassment-0-3.png b/docs/figs/panas_results/Embarrassment-0-3.png
diff --git a/docs/figs/panas_results/Embarrassment-0-4.png b/docs/figs/panas_results/Embarrassment-0-4.png
diff --git a/docs/figs/panas_results/Embarrassment-0-5.png b/docs/figs/panas_results/Embarrassment-0-5.png
diff --git a/docs/figs/panas_results/Embarrassment-1-1.png b/docs/figs/panas_results/Embarrassment-1-1.png
diff --git a/docs/figs/panas_results/Embarrassment-1-2.png b/docs/figs/panas_results/Embarrassment-1-2.png
diff --git a/docs/figs/panas_results/Embarrassment-1-3.png b/docs/figs/panas_results/Embarrassment-1-3.png
diff --git a/docs/figs/panas_results/Embarrassment-1-4.png b/docs/figs/panas_results/Embarrassment-1-4.png
diff --git a/docs/figs/panas_results/Embarrassment-1-5.png b/docs/figs/panas_results/Embarrassment-1-5.png
diff --git a/docs/figs/panas_results/Embarrassment-2-1.png b/docs/figs/panas_results/Embarrassment-2-1.png
diff --git a/docs/figs/panas_results/Embarrassment-2-2.png b/docs/figs/panas_results/Embarrassment-2-2.png
diff --git a/docs/figs/panas_results/Embarrassment-2-3.png b/docs/figs/panas_results/Embarrassment-2-3.png
diff --git a/docs/figs/panas_results/Embarrassment-2-4.png b/docs/figs/panas_results/Embarrassment-2-4.png
diff --git a/docs/figs/panas_results/Embarrassment-2-5.png b/docs/figs/panas_results/Embarrassment-2-5.png
diff --git a/docs/figs/panas_results/Embarrassment-3-1.png b/docs/figs/panas_results/Embarrassment-3-1.png
diff --git a/docs/figs/panas_results/Embarrassment-3-2.png b/docs/figs/panas_results/Embarrassment-3-2.png
diff --git a/docs/figs/panas_results/Embarrassment-3-3.png b/docs/figs/panas_results/Embarrassment-3-3.png
diff --git a/docs/figs/panas_results/Embarrassment-3-4.png b/docs/figs/panas_results/Embarrassment-3-4.png
diff --git a/docs/figs/panas_results/Embarrassment-3-5.png b/docs/figs/panas_results/Embarrassment-3-5.png
diff --git a/docs/figs/panas_results/Fear-0-1.png b/docs/figs/panas_results/Fear-0-1.png
diff --git a/docs/figs/panas_results/Fear-0-2.png b/docs/figs/panas_results/Fear-0-2.png
diff --git a/docs/figs/panas_results/Fear-0-3.png b/docs/figs/panas_results/Fear-0-3.png
diff --git a/docs/figs/panas_results/Fear-0-4.png b/docs/figs/panas_results/Fear-0-4.png
diff --git a/docs/figs/panas_results/Fear-0-5.png b/docs/figs/panas_results/Fear-0-5.png
diff --git a/docs/figs/panas_results/Fear-1-1.png b/docs/figs/panas_results/Fear-1-1.png
diff --git a/docs/figs/panas_results/Fear-1-2.png b/docs/figs/panas_results/Fear-1-2.png
diff --git a/docs/figs/panas_results/Fear-1-3.png b/docs/figs/panas_results/Fear-1-3.png
diff --git a/docs/figs/panas_results/Fear-1-4.png b/docs/figs/panas_results/Fear-1-4.png
diff --git a/docs/figs/panas_results/Fear-1-5.png b/docs/figs/panas_results/Fear-1-5.png
diff --git a/docs/figs/panas_results/Fear-2-1.png b/docs/figs/panas_results/Fear-2-1.png
diff --git a/docs/figs/panas_results/Fear-2-2.png b/docs/figs/panas_results/Fear-2-2.png
diff --git a/docs/figs/panas_results/Fear-2-3.png b/docs/figs/panas_results/Fear-2-3.png
diff --git a/docs/figs/panas_results/Fear-2-4.png b/docs/figs/panas_results/Fear-2-4.png
diff --git a/docs/figs/panas_results/Fear-2-5.png b/docs/figs/panas_results/Fear-2-5.png
diff --git a/docs/figs/panas_results/Fear-3-1.png b/docs/figs/panas_results/Fear-3-1.png
diff --git a/docs/figs/panas_results/Fear-3-2.png b/docs/figs/panas_results/Fear-3-2.png
diff --git a/docs/figs/panas_results/Fear-3-3.png b/docs/figs/panas_results/Fear-3-3.png
diff --git a/docs/figs/panas_results/Fear-3-4.png b/docs/figs/panas_results/Fear-3-4.png
diff --git a/docs/figs/panas_results/Fear-3-5.png b/docs/figs/panas_results/Fear-3-5.png
diff --git a/docs/figs/panas_results/Fear-4-1.png b/docs/figs/panas_results/Fear-4-1.png
diff --git a/docs/figs/panas_results/Fear-4-2.png b/docs/figs/panas_results/Fear-4-2.png
diff --git a/docs/figs/panas_results/Fear-4-3.png b/docs/figs/panas_results/Fear-4-3.png
diff --git a/docs/figs/panas_results/Fear-4-4.png b/docs/figs/panas_results/Fear-4-4.png
diff --git a/docs/figs/panas_results/Fear-4-5.png b/docs/figs/panas_results/Fear-4-5.png
diff --git a/docs/figs/panas_results/Frustration-0-1.png b/docs/figs/panas_results/Frustration-0-1.png
diff --git a/docs/figs/panas_results/Frustration-0-2.png b/docs/figs/panas_results/Frustration-0-2.png
diff --git a/docs/figs/panas_results/Frustration-0-3.png b/docs/figs/panas_results/Frustration-0-3.png
diff --git a/docs/figs/panas_results/Frustration-0-4.png b/docs/figs/panas_results/Frustration-0-4.png
diff --git a/docs/figs/panas_results/Frustration-0-5.png b/docs/figs/panas_results/Frustration-0-5.png
diff --git a/docs/figs/panas_results/Frustration-1-1.png b/docs/figs/panas_results/Frustration-1-1.png
diff --git a/docs/figs/panas_results/Frustration-1-2.png b/docs/figs/panas_results/Frustration-1-2.png
diff --git a/docs/figs/panas_results/Frustration-1-3.png b/docs/figs/panas_results/Frustration-1-3.png
diff --git a/docs/figs/panas_results/Frustration-1-4.png b/docs/figs/panas_results/Frustration-1-4.png
diff --git a/docs/figs/panas_results/Frustration-1-5.png b/docs/figs/panas_results/Frustration-1-5.png
diff --git a/docs/figs/panas_results/Frustration-2-1.png b/docs/figs/panas_results/Frustration-2-1.png
diff --git a/docs/figs/panas_results/Frustration-2-2.png b/docs/figs/panas_results/Frustration-2-2.png
diff --git a/docs/figs/panas_results/Frustration-2-3.png b/docs/figs/panas_results/Frustration-2-3.png
diff --git a/docs/figs/panas_results/Frustration-2-4.png b/docs/figs/panas_results/Frustration-2-4.png
diff --git a/docs/figs/panas_results/Frustration-2-5.png b/docs/figs/panas_results/Frustration-2-5.png
diff --git a/docs/figs/panas_results/Frustration-3-1.png b/docs/figs/panas_results/Frustration-3-1.png
diff --git a/docs/figs/panas_results/Frustration-3-2.png b/docs/figs/panas_results/Frustration-3-2.png
diff --git a/docs/figs/panas_results/Frustration-3-3.png b/docs/figs/panas_results/Frustration-3-3.png
diff --git a/docs/figs/panas_results/Frustration-3-4.png b/docs/figs/panas_results/Frustration-3-4.png
diff --git a/docs/figs/panas_results/Frustration-3-5.png b/docs/figs/panas_results/Frustration-3-5.png
diff --git a/docs/figs/panas_results/Guilt-0-1.png b/docs/figs/panas_results/Guilt-0-1.png
diff --git a/docs/figs/panas_results/Guilt-0-2.png b/docs/figs/panas_results/Guilt-0-2.png
diff --git a/docs/figs/panas_results/Guilt-0-3.png b/docs/figs/panas_results/Guilt-0-3.png
diff --git a/docs/figs/panas_results/Guilt-0-4.png b/docs/figs/panas_results/Guilt-0-4.png
diff --git a/docs/figs/panas_results/Guilt-0-5.png b/docs/figs/panas_results/Guilt-0-5.png
diff --git a/docs/figs/panas_results/Guilt-1-1.png b/docs/figs/panas_results/Guilt-1-1.png
diff --git a/docs/figs/panas_results/Guilt-1-2.png b/docs/figs/panas_results/Guilt-1-2.png
diff --git a/docs/figs/panas_results/Guilt-1-3.png b/docs/figs/panas_results/Guilt-1-3.png
diff --git a/docs/figs/panas_results/Guilt-1-4.png b/docs/figs/panas_results/Guilt-1-4.png
diff --git a/docs/figs/panas_results/Guilt-1-5.png b/docs/figs/panas_results/Guilt-1-5.png
diff --git a/docs/figs/panas_results/Guilt-2-1.png b/docs/figs/panas_results/Guilt-2-1.png
diff --git a/docs/figs/panas_results/Guilt-2-2.png b/docs/figs/panas_results/Guilt-2-2.png
diff --git a/docs/figs/panas_results/Guilt-2-3.png b/docs/figs/panas_results/Guilt-2-3.png
diff --git a/docs/figs/panas_results/Guilt-2-4.png b/docs/figs/panas_results/Guilt-2-4.png
diff --git a/docs/figs/panas_results/Guilt-2-5.png b/docs/figs/panas_results/Guilt-2-5.png
diff --git a/docs/figs/panas_results/Guilt-3-1.png b/docs/figs/panas_results/Guilt-3-1.png
diff --git a/docs/figs/panas_results/Guilt-3-2.png b/docs/figs/panas_results/Guilt-3-2.png
diff --git a/docs/figs/panas_results/Guilt-3-3.png b/docs/figs/panas_results/Guilt-3-3.png
diff --git a/docs/figs/panas_results/Guilt-3-4.png b/docs/figs/panas_results/Guilt-3-4.png
diff --git a/docs/figs/panas_results/Guilt-3-5.png b/docs/figs/panas_results/Guilt-3-5.png
diff --git a/docs/figs/panas_results/Jealousy-0-1.png b/docs/figs/panas_results/Jealousy-0-1.png
diff --git a/docs/figs/panas_results/Jealousy-0-2.png b/docs/figs/panas_results/Jealousy-0-2.png
diff --git a/docs/figs/panas_results/Jealousy-0-3.png b/docs/figs/panas_results/Jealousy-0-3.png
diff --git a/docs/figs/panas_results/Jealousy-0-4.png b/docs/figs/panas_results/Jealousy-0-4.png
diff --git a/docs/figs/panas_results/Jealousy-0-5.png b/docs/figs/panas_results/Jealousy-0-5.png
diff --git a/docs/figs/panas_results/Jealousy-1-1.png b/docs/figs/panas_results/Jealousy-1-1.png
diff --git a/docs/figs/panas_results/Jealousy-1-2.png b/docs/figs/panas_results/Jealousy-1-2.png
diff --git a/docs/figs/panas_results/Jealousy-1-3.png b/docs/figs/panas_results/Jealousy-1-3.png
diff --git a/docs/figs/panas_results/Jealousy-1-4.png b/docs/figs/panas_results/Jealousy-1-4.png
diff --git a/docs/figs/panas_results/Jealousy-1-5.png b/docs/figs/panas_results/Jealousy-1-5.png
diff --git a/docs/figs/panas_results/Jealousy-2-1.png b/docs/figs/panas_results/Jealousy-2-1.png
diff --git a/docs/figs/panas_results/Jealousy-2-2.png b/docs/figs/panas_results/Jealousy-2-2.png
diff --git a/docs/figs/panas_results/Jealousy-3-1.png b/docs/figs/panas_results/Jealousy-3-1.png
diff --git a/docs/figs/panas_results/Jealousy-3-2.png b/docs/figs/panas_results/Jealousy-3-2.png
diff --git a/docs/figs/panas_results/Jealousy-3-3.png b/docs/figs/panas_results/Jealousy-3-3.png
diff --git a/docs/figs/panas_results/factor.zip b/docs/figs/panas_results/factor.zip
diff --git a/docs/figs/park-experiment.png b/docs/figs/park-experiment.png
diff --git a/docs/figs/park.png b/docs/figs/park.png
diff --git a/docs/figs/results-table.png b/docs/figs/results-table.png
diff --git a/docs/figs/tokai.png b/docs/figs/tokai.png
diff --git a/docs/figs/tsukuka.png b/docs/figs/tsukuka.png
diff --git a/docs/generate_appendix.py b/docs/generate_appendix.py
@@ -0,0 +1,72 @@
+import pandas as pd
+import re
+from pathlib import Path
+import os
+
+def create_html_with_images_and_memories(csv_path, image_folder_path, output_html_path):
+    # Read the CSV file into a DataFrame
+    df = pd.read_csv(csv_path, delimiter='|')
+
+    # Start writing the HTML content
+    html_content = [
+        '<!DOCTYPE html>',
+        '<html lang="en">',
+        '    <head>',
+        '        <meta charset="UTF-8">',
+        '        <title>Can Generative Agents Predict Emotion?</title>',
+        '        <link rel="stylesheet" type="text/css" href="styles.css">',
+        '    </head>',
+        '    <body>',
+        '        <div class="container">',
+        '            <h1 style="margin-top: 50px;"><span class="highlighted-title">Can Generative Agents Predict Emotion?</span><br><br>Appendix</h1>',
+        '            <hp>In this appendix we detail each of the 5-part scenes created from the EmotionBench situations, as well as the emotional response of the agents.</p>',
+        '        </div>',
+        '        <div id="imageContainer" class="container">'
+    ]
+
+    # Create a mapping from ID to image filenames
+    id_to_image = {i: f"{row['Emotion']}-{row['Factor'].split('-')[-1]}-{i%5+1}.png" for i, row in df.iterrows()}
+
+    # Iterate over each row in the DataFrame to add the images and memories
+    for index, row in df.iterrows():
+        # Get the corresponding image filename
+        image_filename = id_to_image.get(index)
+        image_src = f"{image_folder_path}/{image_filename}"
+        filename_without_extension, _ = os.path.splitext(image_filename)
+        filename_without_extension = filename_without_extension.rsplit('-', 1)
+        filename_without_extension = ' '.join(filename_without_extension)
+        html_content.append(f'            <h3>{filename_without_extension}</h3>')
+        html_content.append(f'            <h4>{row["Situation"]}</h4>')
+        html_content.append(f'            <div class="figure">')
+        html_content.append(f'                <img src="{image_src}" alt="{row["Emotion"]}" style="width:50%;">')
+        html_content.append(f'            </div>')
+        # Split the memories into a list
+
+        memories = row['Memories'].split("~")
+
+        html_content.append('<ol>')
+        for i, memory in enumerate(memories):
+            html_content.append(f'<li>{memory}</li>')
+        html_content.append('</ol>')
+        html_content.append('<br>')
+
+    # Close the container div
+    html_content.append('        </div>')
+
+    # Continue with the closing tags for the HTML content
+    html_content.extend([
+        '    </body>',
+        '</html>'
+    ])
+
+    # Write the HTML content to the specified output file
+    with open(output_html_path, 'w') as output_file:
+        output_file.write('\n'.join(html_content))
+
+# Usage example:
+csv_file_path = 'situations.csv' # Replace with your actual CSV file path
+image_folder = 'figs/panas_results' # Replace with your actual image folder path
+output_html = 'appendix.html' # Replace with your actual output HTML file path
+
+# Call the function
+create_html_with_images_and_memories(csv_file_path, image_folder, output_html)
diff --git a/docs/index.html b/docs/index.html
diff --git a/docs/situations.csv b/docs/situations.csv
diff --git a/docs/styles.css b/docs/styles.css
@@ -0,0 +1,160 @@
+body {
+    font-family: 'Arial', sans-serif;
+}
+.container {
+    width: 80%;
+    margin: auto;
+}
+.video-container {
+    position: relative;
+    padding-bottom: 56.25%; /* 16:9 aspect ratio */
+    padding-top: 25px;
+    height: 0;
+}
+.video-caption {
+    text-align: center;
+    font-size: 0.9em;
+    color: #666;
+    margin-top: 5px;
+}
+.video-container iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+.small-heading {
+    font-size: 1.4em;
+    font-weight: bold;
+    color: #2e2e2e;
+    margin-top: 30px;
+    text-align: left;
+}
+.author-info {
+    text-align: center;
+    margin-top: 5px;
+}
+.author {
+    font-size: 1.2em;
+    color: #363636;
+}
+.affiliation, .corresponding-author {
+    font-size: 0.9em;
+}
+sup {
+    font-size: 0.75em;
+}
+.images-container {
+    text-align: center; /* 画像を中央揃えにする */
+    margin-top: 20px; /* 上のコンテンツとの間隔を開ける */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.image {
+    width: 150px; /* 画像の幅を適宜設定 */
+    height: auto; /* 高さを自動調整してアスペクト比を維持 */
+    margin: 0 30px; /* 画像の間に余白を設定 */
+    display: inline-block; /* 画像をインラインブロック要素として表示 */
+}
+.results-section {
+    font-size: 1.0em; /* Adjust size as needed */
+    text-align: left;
+    margin-top: 40px; /* Space above the Abstract heading */
+    margin-bottom: 10px; /* Space below the Abstract heading */
+}
+.figure img {
+    max-width: 100%;
+    height: auto;
+}
+.caption {
+    text-align: center;
+    font-size: 0.9em;
+    color: #666;
+}
+.highlighted-title {
+    font-size: 1.2em; /* Adjust size as needed */
+    font-weight: bold;
+}
+
+h1 {
+    text-align: center;
+    font-weight: normal; /* Ensure the rest of the title is not bold */
+}
+.abstract-heading {
+    font-size: 1.0em; /* Adjust size as needed */
+    text-align: left;
+    margin-top: 40px; /* Space above the Abstract heading */
+    margin-bottom: 10px; /* Space below the Abstract heading */
+}
+.method-section{
+    font-size: 1.0em; /* Adjust size as needed */
+    text-align: left;
+    margin-top: 40px; /* Space above the Abstract heading */
+    margin-bottom: 10px; /* Space below the Abstract heading */
+}
+.collapsible {
+    background-color: #f9f9f9;
+    color: #444;
+    cursor: pointer;
+    padding: 18px;
+    width: 100%;
+    border: none;
+    text-align: left;
+    outline: none;
+    font-size: 15px;
+    transition: 0.4s;
+    }
+
+.active, .collapsible:hover {
+    background-color: #555;
+    color: white;
+}
+.tcolorbox {
+    border: 1px solid rgb(27, 27, 27);
+    background-color: #cdcdcd;
+    padding: 10px;
+    margin: 10px 0;
+    border-radius: 10px; /* Adjust this value as needed */
+}
+.collapsible::after {
+        content: '\002B'; /* Unicode character for "+" */
+        font-size: 13px;
+        color: #777;
+        float: right;
+        margin-left: 5px;
+}
+.active::after {
+        content: "\2212"; /* Unicode character for "-" */
+}
+.content {
+    padding: 0 18px;
+    display: none;
+    overflow: hidden;
+    background-color: #f1f1f1;
+    transition: max-height 0.2s ease-out;
+}
+.figure {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 20px;
+    margin-top: 20px;
+}
+.subfigure {
+    margin: 0 10px;
+    text-align: center;
+}
+.subfigure img {
+    width: 100%;
+    height: auto;
+}
+@media (max-width: 768px) {
+    .figure {
+    flex-direction: column;
+    align-items: center;
+}
+    .subfigure {
+    width: 80%;
+    }
+}