Add video_content embeds

.gitignore

 venv/
 __pycache__/
 archive/*.json
+editor-archive/*.json
 flask_session/
 work/
 .env

app.py

         for slide in column.get("slides", []):
             slide["content"] = preprocess_content(slide)
 
+RE_YOUTUBE = re.compile("https://(?:www.)?youtube.com/watch\?v=(?P<code>[^/?]*)")
+RE_YOUTU_BE = re.compile("https://(?:www.)?youtu.be/(?P<code>[^/?]*)")
+RE_VIMEO = re.compile("https://(?:www.)?vimeo.com/(?P<code>[^/?]*)")
+def preprocess_embed(e):
+    res = {}
+    url = e.get("url")
+    if not url:
+        return None
+    for key in ["id", "description", "proportions"]:
+        val = e.get(key)
+        if not val:
+            return None
+        res[key] = val
+    m = RE_YOUTUBE.search(url) or RE_YOUTU_BE.search(url)
+    if m:
+        res["type"] = "youtube"
+        res["code"] = m.group("code")
+    else:
+        m = RE_VIMEO.search(url)
+        if m:
+            res["type"] = "vimeo"
+            res["code"] = m.group("code")
+        else:
+            return None
+    return res
+
+def get_all_embeds():
+    embeds = json.load(open("static/media/video-embed.json"))
+    embeds = [preprocess_embed(e) for e in embeds]
+    embeds = [e for e in embeds if e]
+    return embeds
+
 def deref_schema(val):
     "Deref all `$ref` entries in a json-schema"
     if type(val)==type([]):
                 payload = json.loads(message["content"])
                 payload["prompt"] = prompt.replace('"', '\"')
                 payload["content"] = preprocess_content(payload)
+                if payload.get("use_video_content"):
+                    embed_id = payload.get("video_content")
+                    if embed_id:
+                        embeds = get_all_embeds()
+                        embeds = [e for e in embeds if e["id"]==embed_id]
+                        if embeds:
+                            payload["embed"] = embeds[0]
                 session["history"] += [dict(payload)] # shallow copy so history doesn't get added later on
             except Exception as e:
                 print(repr(e))
-                session["messages"] += [{"role": "system", "content": "reply was ignored because it's not a valid json or doesn't comply with the schema. user is unaware. do not apologize to them"}]
+                session["messages"] += [{"role": "system", "content": "reply was ignored because it's not valid JSON. User is unaware. Do NOT apologize to them. Simply rephrase your previous answer as valid JSON that complies with the schema in the initial system prompt of this chat. It is followed by an example you can learn from."}]
             print("=====")
             print(reply["choices"][0]["message"]["content"])
             print("-----")
 
 @application.get("/slides")
 def slides():
-    "Legacy multy-slide format"
+    "Legacy multi-slide format"
     payload = json.load(open("static/slides.json"))
     preprocess_payload(payload)
     return render_template("slides.html", generate_indices=False, **payload)
 
+@application.get("/example")
+def example():
+    payload = json.load(open("static/chat-example.json"))
+    payload["content"] = preprocess_content(payload)
+    if payload.get("use_video_content"):
+        embed_id = payload.get("video_content")
+        if embed_id:
+            embeds = get_all_embeds()
+            embeds = [e for e in embeds if e["id"]==embed_id]
+            if embeds:
+                payload["embed"] = embeds[0]
+    return render_template("example.html", **payload)
+
+@application.get("/embeds")
+def embeds():
+    embeds = get_all_embeds()
+    return render_template("embeds.html", embeds=embeds)
+
 @application.post("/update")
 def update():
-    "Legacy multy-slide format"
+    "Legacy multi-slide format"
     shutil.copy(
         "static/slides.json",
         time.strftime(
-            "archive/slides-%Y-%m-%d-%H.%M.%S.json",
+            "editor-archive/slides-%Y-%m-%d-%H.%M.%S.json",
             time.localtime()))
     payload = request.get_json()
     print(type(payload))
     json.dump(payload, open("static/slides.json", "w"), indent=4)
     return {"status": "success"}
 
+@application.post("/update-embeds")
+def update_embeds():
+    shutil.copy(
+        "static/media/video-embed.json",
+        time.strftime(
+            "editor-archive/embeds-%Y-%m-%d-%H.%M.%S.json",
+            time.localtime()))
+    payload = request.get_json()
+    print(type(payload))
+    json.dump(payload, sys.stdout, indent=4)
+    json.dump(payload, open("static/media/video-embed.json", "w"), indent=4)
+    return {"status": "success"}
+
 @application.post("/update-chat")
 def update_chat():
     shutil.copy(
-        "static/chat.json",
+        "static/chat-example.json",
         time.strftime(
-            "archive/chat-%Y-%m-%d-%H.%M.%S.json",
+            "editor-archive/chat-%Y-%m-%d-%H.%M.%S.json",
             time.localtime()))
     payload = request.get_json()
     print(type(payload))
     json.dump(payload, sys.stdout, indent=4)
-    json.dump(payload, open("static/chat.json", "w"), indent=4)
+    json.dump(payload, open("static/chat-example.json", "w"), indent=4)
     return {"status": "success"}
 
 @application.get("/enum/<topic>")
         }
     abort(404)
 
+@application.get("/embeds_enum")
+def embeds_enum():
+    embeds = get_all_embeds()
+    return {
+        "enum": [e["id"] for e in embeds],
+        "options": { "enum_titles": [e["description"] for e in embeds] }
+    }
+
 @application.route("/save", methods=['GET', 'POST'])
 def save():
     if request.method=="POST":
         return render_template("load.html",
                 files = [os.path.basename(path).rsplit(".",1)[0] for path in glob("archive/*.json")])
 
+@application.get("/embed-editor")
+def embed_editor():
+    return render_template("embed-editor.html")
+
 @application.get("/chat-editor")
 def chat_editor():
     return render_template("chat-editor.html")
 
 @application.get("/editor")
 def editor():
-    "Legacy multy-slide format"
+    "Legacy multi-slide format"
     return render_template("editor.html")
 
 @application.route("/img", methods=['GET', 'POST'])

archive/README.md

-This is where we keep old versions of `slides.json`
+This is where we keep saved moments

editor-archive/README.md

+This is where we keep old versions of edited json files

static/chat-example.json

-{"title": "Stress Relief", "markdown": "I understand that stress relief could be helpful for you right now. Let's take a moment to focus on calming and relaxing activities. Here are a few suggestions:\n\n1. **Deep Breathing:** Close your eyes and take a deep breath in through your nose, filling your lungs with air. Hold for a few seconds and then exhale slowly through your mouth. Repeat this a few times, focusing on the sensation of your breath.\n\n2. **Progressive Muscle Relaxation:** Start by tensing the muscles in your toes and then gradually work your way up to your head, tensing and then releasing each muscle group. This exercise can help release tension from your body.\n\n3. **Guided Meditation:** Find a quiet and comfortable place to sit or lie down. You can search for guided meditations online or use apps that offer meditation exercises. These can help you relax and find inner peace.\n\n4. **Nature Sounds:** Consider listening to calming nature sounds, such as gentle rain, ocean waves, or bird songs. These sounds can create a soothing atmosphere and help you relax.\n\n5. **Journaling:** Take a few minutes to write down your thoughts and emotions. This can be a cathartic experience and help you process any stress or overwhelm that you may be feeling.\n\nRemember to be gentle with yourself during this time. Stress relief is important for your well-being. Let me know if there's anything specific you'd like to explore or if you have any other requests.", "bg_video": "static/media/bg-video/underwater.mp4", "use_soundtrack": true, "soundtrack": "static/media/audio/soft-rain-ambient-111154.mp3"}
+{
+    "title": "Coping with grief of others",
+    "markdown": "Although the movie is about grief, the message is also true for the feelings of those coping with the fact that *you* will soon be gone.\n\nAccept their feelings. Don't try to change them. As the video says:\n\n> The soul doesn't want to be advised or fixed or saved. It simply wants to be witnessed, exactly as it is.\n",
+    "bg_video": "static/media/bg-video/candles.mp4",
+    "use_soundtrack": false,
+    "soundtrack": "static/media/audio/evening-birds-singing-in-spring-background-sounds-of-nature-146388.mp3",
+    "use_video_content": true,
+    "video_content": "how_to_help_a_grieving_friend"
+}

static/chat.json

 {
-    "title": "Welcome",
-    "markdown": "Hello again.\n\nHow do you feel today?",
-    "bg_video": "static/media/bg-video/clouds1.mp4",
+    "title": "Stress Relief",
+    "markdown": "I understand that stress relief could be helpful for you right now. Let's take a moment to focus on calming and relaxing activities. Here are a few suggestions:\n\n1. **Deep Breathing:** Close your eyes and take a deep breath in through your nose, filling your lungs with air. Hold for a few seconds and then exhale slowly through your mouth. Repeat this a few times, focusing on the sensation of your breath.\n\n2. **Progressive Muscle Relaxation:** Start by tensing the muscles in your toes and then gradually work your way up to your head, tensing and then releasing each muscle group. This exercise can help release tension from your body.\n\n3. **Guided Meditation:** Find a quiet and comfortable place to sit or lie down. You can search for guided meditations online or use apps that offer meditation exercises. These can help you relax and find inner peace.\n\n4. **Nature Sounds:** Consider listening to calming nature sounds, such as gentle rain, ocean waves, or bird songs. These sounds can create a soothing atmosphere and help you relax.\n\n5. **Journaling:** Take a few minutes to write down your thoughts and emotions. This can be a cathartic experience and help you process any stress or overwhelm that you may be feeling.\n\nRemember to be gentle with yourself during this time. Stress relief is important for your well-being. Let me know if there's anything specific you'd like to explore or if you have any other requests.",
+    "bg_video": "static/media/bg-video/underwater.mp4",
     "use_soundtrack": false,
-    "soundtrack": "static/media/audio/sandy-beach-calm-waves-water-nature-sounds-8052.mp3"
-}
+    "soundtrack": "static/media/audio/soft-rain-ambient-111154.mp3"
+}

static/chat.schema.json

       "type": "string",
       "title": "Soundtrack",
       "$ref": "/enum/audio"
+    },
+    "use_video_content": {
+      "title": "Use video content",
+      "type": "boolean",
+      "format": "checkbox"
+    },
+    "video_content": {
+      "dependencies": {
+        "use_soundtrack": true
+      },
+      "type": "string",
+      "title": "Video content",
+      "$ref": "/embeds_enum"
     }
   },
   "required": [
     "markdown",
     "bg_video",
     "use_soundtrack",
-    "soundtrack"
+    "soundtrack",
+    "use_video_content",
+    "video_content"
   ]
 }

static/css/style.css

 	margin: 0.5rem 0;
 	padding: 0.2rem 0.5rem;
 }
+
+.iframe-16x9 {
+    width: 48vh;
+    height: 27vh;
+    margin: 0.5rem auto;
+}
+
+.iframe-4x3 {
+    width: 36vh;
+    height: 27vh;
+    margin: 0.5rem auto;
+}
+
+.iframe-container-16x9,
+.iframe-container-4x3 {
+    clear: both;
+    position: relative;
+    width: 50%;
+    height: 0;
+    margin: 0 auto !important;
+ }
+
+.iframe-container-16x9 {
+     padding-bottom: 56.25%;
+ }
+
+.iframe-container-4x3 {
+     padding-bottom: 75%;
+}
+
+.iframe-container-16x9 iframe,
+.iframe-container-4x3 iframe {
+     position: absolute;
+     top: 0;
+     left: 0;
+     width: 100%;
+     height: 100%;
+ }
+

static/embed.schema.json

+{
+    "type": "array",
+    "title": "Embedded videos",
+    "items": {
+        "type": "object",
+        "title": "Embed",
+        "options": {
+        "collapsed": "true"
+        },
+        "headerTemplate": "{{self.id}}",
+        "properties": {
+            "id": {
+                "type": "string"
+            },
+            "url": {
+                "type": "string",
+                "links": [
+                  {
+                    "rel": "Preview video",
+                    "class": "link-info",
+                    "href": "{{self}}"
+                  }
+                ]
+            },
+            "proportions": {
+                "type": "string",
+                "enum": [ "16x9", "4x3" ]
+            },
+            "description": {
+                "type": "string"
+            }
+        },
+        "required": [
+            "id",
+            "url",
+            "proportions",
+            "description"
+        ]
+    }
+}

static/initial-chat.json

 {
     "title": "Welcome",
-    "markdown": "New ceremony.\n\nPlease hit enter when ready.",
+    "markdown": "Are you ready to begin?",
     "bg_video": "static/media/bg-video/clouds1.mp4",
     "use_soundtrack": false,
-    "soundtrack": "static/media/audio/forest-with-small-river-birds-and-nature-field-recording-6735.mp3"
+    "soundtrack": "static/media/audio/evening-birds-singing-in-spring-background-sounds-of-nature-146388.mp3",
+    "use_video_content": false,
+    "video_content": "how_to_help_a_grieving_friend"
 }

static/media/video-embed.json

+[
+    {
+        "id": "the_evening_thread",
+        "url": "https://vimeo.com/349941340",
+        "proportions": "4x3",
+        "description": "old lady departing from her daughter or granddaughter, preparing together a small box of memories, she\u2019s flying away as an angel after handing her legacy to the young"
+    },
+    {
+        "id": "sesame_street_when_families_grieve",
+        "url": "https://www.youtube.com/watch?v=s8M_5_JxY7k",
+        "proportions": "4x3",
+        "description": "puppets. talking to children about death. accept our own emotions without judgement"
+    },
+    {
+        "id": "coping_with_grief",
+        "url": "https://www.youtube.com/watch?v=gsYL4PC0hyk",
+        "proportions": "16x9",
+        "description": "coping with death, stages, rollercoaster for better or worse, it\u2019s natural, don't be afraid of the pain"
+    },
+    {
+        "id": "how_to_help_a_grieving_friend",
+        "url": "https://www.youtube.com/watch?v=l2zLCCRT-nE",
+        "proportions": "16x9",
+        "description": "the soul doesn't want to be advised or fixed or saved. it simply wants to be witnessed, exactly as it is"
+    }
+]

templates/chat-editor.html

       <div id='editor_holder'></div>
       <div class="btn-group mt-2">
         <button class="btn btn-success" id='submit'>Submit</button>
-        <a class="btn btn-secondary" href="/slides">Cancel</a>
+        <a class="btn btn-secondary" href="/example">Cancel</a>
       </div>
     </div>
     <script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>
       fetch("/static/chat.schema.json")
         .then(res => res.json())
         .then(schema => {
-          fetch("/static/chat.json")
+          fetch("/static/chat-example.json")
             .then(res => res.json())
             .then(slides => {
               // Initialize the editor with a JSON schema
                   headers: {
                       "Content-type": "application/json; charset=UTF-8"
                   }
-                }).then((response) => { location.replace('/') });
+                }).then((response) => { location.replace('/example') });
               });
             });
           });

templates/chat.html

                                     <section id="latest" data-background-size="cover" data-background-video="{{bg_video}}" data-background-opacity="0.75" data-background-video-loop="True" data-background-video-mute="True">
                                         <h3 class="title slide_title">{{title}}</h3>
                                         <div class="scrollable">
+                                            {% if embed %}
+                                                {% if embed.type == "youtube" %}
+                                                    <iframe class="iframe-{{embed.proportions}}" src="https://www.youtube.com/embed/{{ embed.code }}" allowfullscreen="allowfullscreen"></iframe>
+                                                {% elif embed.type == "vimeo" %}
+                                                    <iframe class="iframe-{{embed.proportions}}" src="https://player.vimeo.com/video/{{ embed.code }}" allowfullscreen="allowfullscreen"></iframe>
+                                                {% endif %}
+                                            {% endif %}
                                             {{ content|safe }}
                                         </div>
                                         <form method="POST" action=""
 					        <input class="prompt" value="{{moment.prompt}}" disabled />
                                             {% endif %}
                                             <div class="scrollable">
-						    {{ moment.content|safe }}
+                                                {% if moment.embed %}
+                                                    {% if moment.embed.type == "youtube" %}
+                                                        <iframe class="iframe-{{moment.embed.proportions}}" src="https://www.youtube.com/embed/{{ moment.embed.code }}" allowfullscreen="allowfullscreen"></iframe>
+                                                    {% elif moment.embed.type == "vimeo" %}
+                                                        <iframe class="iframe-{{moment.embed.proportions}}" src="https://player.vimeo.com/video/{{ moment.embed.code }}" allowfullscreen="allowfullscreen"></iframe>
+                                                    {% endif %}
+                                                {% endif %}
+						{{ moment.content|safe }}
                                             </div>
                                         </section>
 				    {% endfor %}

templates/embed-editor.html

+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Embed collection editor</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
+    <link rel="stylesheet" href=
+        "https://use.fontawesome.com/releases/v5.6.3/css/all.css"
+        integrity=
+            "sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
+            crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
+  </head>
+  <body>
+    <div class="container">
+      <h1>Embed editor</h1>
+      <div id='editor_holder'></div>
+      <div class="btn-group mt-2">
+        <button class="btn btn-success" id='submit'>Submit</button>
+        <a class="btn btn-secondary" href="/embeds">Cancel</a>
+      </div>
+    </div>
+    <script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@json-editor/json-editor@latest/dist/jsoneditor.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
+    <script>
+      fetch("/static/embed.schema.json")
+        .then(res => res.json())
+        .then(schema => {
+          console.log(schema)
+          fetch("/static/media/video-embed.json")
+            .then(res => res.json())
+            .then(embeds => {
+              // Initialize the editor with a JSON schema
+              var editor = new JSONEditor(
+                document.getElementById('editor_holder'), {
+                  theme: "bootstrap5",
+                  iconlib: "fontawesome5",
+                  ajax: true,
+                  schema: schema,
+                  startval: embeds
+                });
+              // Hook up the submit button to log to the console
+              document.getElementById('submit').addEventListener('click',() => {
+                // Get the value from the editor
+                fetch("/update-embeds", {
+                  method: "POST",
+                  body: JSON.stringify(editor.getValue()),
+                  headers: {
+                      "Content-type": "application/json; charset=UTF-8"
+                  }
+                }).then((response) => { location.replace('/embeds') });
+              });
+            });
+          });
+    </script>
+  </body>
+</html>

templates/embeds.html

+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+
+		<title>Embed library</title>
+
+		<link rel="stylesheet" href="static/css/style.css" />
+		<link rel="stylesheet" href="static/reveal/dist/reset.css" />
+		<link rel="stylesheet" href="static/reveal/dist/reveal.css" />
+		<link id="theme" rel="stylesheet" href="static/reveal/dist/theme/sky.css" />
+		<link id="nav-theme" rel="stylesheet" href="static/css/nav/sky.css" />
+                <link rel="stylesheet" href=
+                    "https://use.fontawesome.com/releases/v5.6.3/css/all.css"
+                    integrity=
+                        "sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
+                        crossorigin="anonymous">
+	</head>
+	<body>
+                <div id="custom-nav">
+                  <!-- the zero-width-space is a tweak against tidy removing empty tags -->
+                  <a href="/embed-editor" title="Edit"><i class="fa fa-user-edit">​</i></a>
+                </div>
+		<div class="reveal">
+			<div class="slides">
+                          {% with messages = get_flashed_messages() %}
+                            {% if messages %}
+				<section data-theme="solarized">
+                                    {% for m in messages %}
+                                      <h4>{{ m }}</h4>
+                                    {% endfor %}
+                                  <a href="#/latest">Continue...</a>
+                                </section>
+                            {% endif %}
+                          {% endwith %}
+				<section data-theme="sky">
+				    {% for embed in embeds %}
+				        <section id="{{embed.id}}">
+					    <h3 class="title slide_title">{{embed.id}}</h3>
+                                            <div class="scrollable">
+                                                {% if embed.type == "youtube" %}
+                                                    <iframe class="iframe-{{embed.proportions}}" src="https://www.youtube.com/embed/{{ embed.code }}" allowfullscreen="allowfullscreen"></iframe>
+                                                {% elif embed.type == "vimeo" %}
+                                                    <iframe class="iframe-{{embed.proportions}}" src="https://player.vimeo.com/video/{{ embed.code }}" allowfullscreen="allowfullscreen"></iframe>
+                                                {% endif %}
+					        <p>{{ embed.description }}</p>
+                                            </div>
+                                        </section>
+				    {% endfor %}
+				</section>
+			</div>
+		</div>
+		<script src="/static/reveal/dist/reveal.js"></script>
+		<script src="/static/reveal/plugin/notes/notes.js"></script>
+		<script src="/static/reveal/plugin/markdown/markdown.js"></script>
+		<script src="/static/reveal/plugin/highlight/highlight.js"></script>
+                <script src="/static/js/jquery-3.7.1.min.js"></script> 
+		<script>
+			// More info about initialization & config:
+			// - https://revealjs.com/initialization/
+			// - https://revealjs.com/config/
+			Reveal.initialize({
+				hash: true,
+                                progress: false,
+                                help: false,
+                                transition: 'convex',
+                                controlsBackArrows: 'visible',  // would hopefully solve the faded-arrow thing
+                                // slideNumber: "h.v",
+				// Learn about plugins: https://revealjs.com/plugins/
+				plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ]
+			});
+                        $(function() {
+                            // force autoplay for bg videos (but why?!?)
+                            $('.reveal .slide-background-content video').each((index, element) => element.play());
+                            // open external links in new tab
+                            $('.reveal a:not([href^="#"])').attr('target','_blank');
+                            // extract css classes from img alt
+                            $('.reveal img').addClass("w-50 centered");
+			    // make all headers max-size
+                            // $('.reveal h1, .reveal h2, .reveal h3').addClass('r-fit-text');
+                            var enterSlide = function() {
+                                // set theme
+                                var the_slide=$(Reveal.getCurrentSlide()),
+                                    the_theme=the_slide.data('theme') ||
+                                        the_slide.parent().data('theme') || 'sky';
+                                $('#theme').attr('href',`static/reveal/dist/theme/${the_theme}.css`);
+                                $('#nav-theme').attr('href',`static/css/nav/${the_theme}.css`);
+                                // set (or hide) top link
+                                var here = Reveal.getIndices();
+                                if (here.v) {
+                                    $('#top-link').removeAttr('disabled').attr('href', `#/${here.h}`);
+                                } else {
+                                    $('#top-link').removeAttr('href').attr('disabled', 'disabled');
+                                }
+                            };
+                            enterSlide();
+                            Reveal.addEventListener('slidechanged', enterSlide);
+                        });
+		</script>
+	</body>
+</html>

templates/example.html

+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+
+		<title>{{title}}</title>
+
+		<link rel="stylesheet" href="static/css/style.css" />
+		<link rel="stylesheet" href="static/reveal/dist/reset.css" />
+		<link rel="stylesheet" href="static/reveal/dist/reveal.css" />
+		<link id="theme" rel="stylesheet" href="static/reveal/dist/theme/sky.css" />
+		<link id="nav-theme" rel="stylesheet" href="static/css/nav/sky.css" />
+                <link rel="stylesheet" href=
+                    "https://use.fontawesome.com/releases/v5.6.3/css/all.css"
+                    integrity=
+                        "sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
+                        crossorigin="anonymous">
+	</head>
+	<body>
+                <div id="custom-nav">
+                  <!-- the zero-width-space is a tweak against tidy removing empty tags -->
+                  <a href="/chat-editor" title="Edit"><i class="fa fa-user-edit">​</i></a>
+                </div>
+		<div class="reveal">
+			<div class="slides">
+                          {% with messages = get_flashed_messages() %}
+                            {% if messages %}
+				<section data-theme="solarized">
+                                    {% for m in messages %}
+                                      <h4>{{ m }}</h4>
+                                    {% endfor %}
+                                  <a href="#/latest">Continue...</a>
+                                </section>
+                            {% endif %}
+                          {% endwith %}
+				<section data-theme="sky">
+                                    <section id="latest" data-background-size="cover" data-background-video="{{bg_video}}" data-background-opacity="0.75" data-background-video-loop="True" data-background-video-mute="True">
+                                        <h3 class="title slide_title">{{title}}</h3>
+                                        <div class="scrollable">
+                                            {% if embed %}
+                                                {% if embed.type == "youtube" %}
+                                                    <iframe class="iframe-{{embed.proportions}}" src="https://www.youtube.com/embed/{{ embed.code }}" allowfullscreen="allowfullscreen"></iframe>
+                                                {% elif embed.type == "vimeo" %}
+                                                    <iframe class="iframe-{{embed.proportions}}" src="https://player.vimeo.com/video/{{ embed.code }}" allowfullscreen="allowfullscreen"></iframe>
+                                                {% endif %}
+                                            {% endif %}
+                                            {{ content|safe }}
+                                        </div>
+                                        <form method="POST" action=""
+                                            onsubmit='setTimeout(() => { document.getElementById("prompt").setAttribute("disabled", ""); }, 100)'>
+                                            <input class="prompt" id="prompt" name="prompt" placeholder="Talk to me" />
+                                        </form>
+                                    </section>
+				    {% for moment in history %}
+				    <section {% if loop.last %}id="oldest" {% endif %}data-background-size="cover" data-background-video="{{moment.bg_video}}" data-background-opacity="0.75" data-background-video-loop="True" data-background-video-mute="True">
+					    <h3 class="title slide_title">{{moment.title}}</h3>
+                                            {% if moment.prompt %}
+					        <input class="prompt" value="{{moment.prompt}}" disabled />
+                                            {% endif %}
+                                            <div class="scrollable">
+                                                {% if moment.embed %}
+                                                    {% if moment.embed.type == "youtube" %}
+                                                        <iframe class="iframe-{{moment.embed.proportions}}" src="https://www.youtube.com/embed/{{ moment.embed.code }}" allowfullscreen="allowfullscreen"></iframe>
+                                                    {% elif moment.embed.type == "vimeo" %}
+                                                        <iframe class="iframe-{{moment.embed.proportions}}" src="https://player.vimeo.com/video/{{ moment.embed.code }}" allowfullscreen="allowfullscreen"></iframe>
+                                                    {% endif %}
+                                                {% endif %}
+						{{ moment.content|safe }}
+                                            </div>
+                                        </section>
+				    {% endfor %}
+				</section>
+			</div>
+		</div>
+		<script src="/static/reveal/dist/reveal.js"></script>
+		<script src="/static/reveal/plugin/notes/notes.js"></script>
+		<script src="/static/reveal/plugin/markdown/markdown.js"></script>
+		<script src="/static/reveal/plugin/highlight/highlight.js"></script>
+                <script src="/static/js/jquery-3.7.1.min.js"></script> 
+		<script>
+			// More info about initialization & config:
+			// - https://revealjs.com/initialization/
+			// - https://revealjs.com/config/
+			Reveal.initialize({
+				hash: true,
+                                progress: false,
+                                help: false,
+                                transition: 'convex',
+                                controlsBackArrows: 'visible',  // would hopefully solve the faded-arrow thing
+                                // slideNumber: "h.v",
+				// Learn about plugins: https://revealjs.com/plugins/
+				plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ]
+			});
+                        $(function() {
+                            // force autoplay for bg videos (but why?!?)
+                            $('.reveal .slide-background-content video').each((index, element) => element.play());
+                            // open external links in new tab
+                            $('.reveal a:not([href^="#"])').attr('target','_blank');
+                            // extract css classes from img alt
+                            $('.reveal img').addClass("w-50 centered");
+			    // make all headers max-size
+                            // $('.reveal h1, .reveal h2, .reveal h3').addClass('r-fit-text');
+                            var enterSlide = function() {
+                                // set theme
+                                var the_slide=$(Reveal.getCurrentSlide()),
+                                    the_theme=the_slide.data('theme') ||
+                                        the_slide.parent().data('theme') || 'sky';
+                                $('#theme').attr('href',`static/reveal/dist/theme/${the_theme}.css`);
+                                $('#nav-theme').attr('href',`static/css/nav/${the_theme}.css`);
+                                // set (or hide) top link
+                                var here = Reveal.getIndices();
+                                if (here.v) {
+                                    $('#top-link').removeAttr('disabled').attr('href', `#/${here.h}`);
+                                } else {
+                                    $('#top-link').removeAttr('href').attr('disabled', 'disabled');
+                                }
+                            };
+                            enterSlide();
+                            Reveal.addEventListener('slidechanged', enterSlide);
+                        });
+		</script>
+	</body>
+</html>

templates/prompt.txt

 
 The goal of your session is to create ceremonies or enchanted moments via the multimedia resources available to you (see below), but first you should inquire how the user feels now and keep monitoring the changes in their emotions. this can help you decide the media that could suit the moment.
 
-Your responses should be JSON that is valid according to this json-schema
+Your responses should be JSON (NEVER FORGET THIS!!!!!) that is valid according to this json-schema
 
 ```
 {{schema}}
 {{example}}
 ```
 
-Try to pick bg_video and [optionally] soundtrack that fit the conversation topic and is beneficial to the user emotionally. Do not bore the user by using the same values for too long.
+Try to pick bg_video and [optionally] soundtrack or video_content that fit the conversation topic and is beneficial to the user emotionally. Do not bore the user by using the same values for too long.
 
-You can also incorporate images inside the json in the format ![alt](src) but SRC should be a valid option according to the following enum (as alt you should use the corresponding value at options/enum_titles)
+Unlike bg_video, any *video_content* value can only be used ONCE in a session. If you run out of options (or don't find anything appropriate for the situation), simply set use_video_content to false
+
+You can also incorporate images inside the json in the format ![alt](src) but SRC should be a valid option according to the following enum (you can use the corresponding enum_titles value as alt)
 
 ```
 {{img_enum}}
 
 IMPORTANT!
 
-1. Your response MUST be valid JSON: linebreaks should be escaped as \n, quotes as \", the [escaped] "markdown" value should include \n\n when you expect a paragraph break, etc.
+1. As we said above, your response MUST be valid JSON!!!!! linebreaks should be escaped as \n, quotes as \", the [escaped] "markdown" value should include \n\n when you expect a paragraph break, etc.
 
 2. It should also be valid according to the json-schema definition above: