Add load function

Also display flash messages if needed

app.py

@@ -1,5 +1,5 @@
 from flask import ( Flask, render_template, request, abort, redirect,
-    send_from_directory, url_for, session)
+    send_from_directory, url_for, session, flash, get_flashed_messages)
 from flask_session import Session
 import openai
 from dotenv import load_dotenv
@@ -203,14 +203,22 @@ def choices(topic):
 @application.route("/save", methods=['GET', 'POST'])
 def save():
     if request.method=="POST":
-        filename=request.form["filename"].rsplit("/",1)[-1]
+        filename = request.form["filename"].rsplit("/",1)[-1]
         if filename:
+            path = "archive/{}.json"
+            is_overwrite = os.path.isfile(path)
             moment = {
                 key: session.get(key, [])
                 for key in ["messages", "history"]
             }
             print(moment)
-            json.dump(moment, open("archive/{}.json".format(filename),"w"), indent=4)
+            json.dump(moment, open(path,"w"), indent=4)
+            if is_overwrite:
+                flash("Successfully saved to {}.json".format(filename))
+            else:
+                flash("Successfully overwritten {}.json".format(filename))
+        else:
+            flash("Invalid filename. Save aborted.", "error")
         return redirect(url_for("home"))
     else:
         return render_template("save.html",
@@ -218,6 +226,20 @@ def save():
                   "moment-%Y-%m-%d-%H.%M.%S"),
                 files = [os.path.basename(path).rsplit(".",1)[0] for path in glob("archive/*.json")])
 
+@application.route("/load", methods=['GET', 'POST'])
+def load():
+    if request.method=="POST":
+        filename = request.form["filename"]
+        try:
+            moment = json.load(open("archive/{}.json".format(filename)))
+            session["messages"] = moment["messages"]
+            session["history"] = moment["history"]
+        except Exception as e:
+            flash(repr(e))
+        return redirect(url_for("home")+"#/oldest")
+    else:
+        return render_template("load.html",
+                files = [os.path.basename(path).rsplit(".",1)[0] for path in glob("archive/*.json")])
 
 @application.get("/chat-editor")
 def chat_editor():

static/css/style.css

@@ -6,6 +6,12 @@
 	text-transform: none;
 }
 
+
+#custom-nav {
+	background-color: #0000003f;
+        padding: 4px;
+}
+
 #custom-nav a[disabled] {
 	opacity: 0.5;
 }

templates/chat.html

@@ -21,11 +21,23 @@
                 <div id="custom-nav">
                   <!-- the zero-width-space is a tweak against tidy removing empty tags -->
                   <a href="/reset" title="Reset"><i class="fa fa-redo">​</i></a>
+                  <a href="/save" title="Save"><i class="fa fa-file-download">​</i></a>
+                  <a href="/load" title="Load"><i class="fa fa-file-upload">​</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 data-background-size="cover" data-background-video="{{bg_video}}" data-background-opacity="0.75" data-background-video-loop="True" data-background-video-mute="True">
+                                    <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">
                                             {{ content|safe }}
@@ -36,7 +48,7 @@
                                         </form>
                                     </section>
 				    {% for moment in history %}
-				    <section 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">
+				    <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 />

templates/load.html

@@ -0,0 +1,37 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Load a moment</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">
+  </head>
+  <body>
+    <div class="container">
+      <h3 class="text-center">Load a moment</h3>
+      <div class="row mt-4">
+        <div class="col-md-6 offset-md-3">
+          <form "card-text" method="POST" action="">
+    	    <select name="filename" class="form-select">
+    	      {% for file in files %}
+    	        <option value="{{file}}">{{file}}</option>
+    	      {% endfor %}
+    	      </select>
+	   <input type="submit" class="btn btn-success form-control" value="Load">
+          </form>
+        </div>
+      </div>
+      <div class="row mt-1">
+        <div class="col-md-6 offset-md-3">
+        </div>
+      </div>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
+
+  </body>
+</html>

templates/save.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Image generator</title>
+    <title>Save current moment</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"