Got modal to open and close successfully without refreshing the page, bringing this closer to a SPA. Fixed some small styling on the modal.

application/routes.py

@@ -48,16 +48,23 @@ def prompt_all():
     WORD_PROMPT = str(requests.get("https://random-word-api.herokuapp.com/word").text)[
         2:-2
     ]
+    SYSTEM_TEMPLATE = 'A single sentence based on a word.'
+    PROMPT_TEMPLATE = '### Instruction: {0} \n### Response: '
     if request.method == "POST":
         message = "Results are here"
         session["output_key"] = random.choice(KEYS) + random.choice(SIGN)
         session["output_signature"] = random.choice(TIME_SIGNATURES)
-        response = MODEL.generate(f"A single sentence about {WORD_PROMPT}", temp=0).splitlines().pop(0)
+        session["word_prompt"] = WORD_PROMPT
-        numresp = len(response)- 1
+        with MODEL.chat_session(SYSTEM_TEMPLATE, PROMPT_TEMPLATE):
-        if numresp <= 1:
+            response = MODEL.generate(f"A single sentence about {WORD_PROMPT}.", temp=0.7)
-            session["output_theme"] = str(response)
+            session["output_theme"] = str(response.splitlines()[0])
-        randresp = random.randrange(0, numresp)
+
-        session["output_theme"] = response
+
+        #  numresp = len(response)- 1
+        # if numresp <= 1:
+        #    session["output_theme"] = str(response)
+        # randresp = random.randrange(0, numresp)
+        # session["output_theme"] = response
         return render_template("single-button.html", title="Results", message=message)
     return render_template("single-button.html", title="Single Option")
 

application/static/styles.css

@@ -73,3 +73,104 @@ header {
   width: 60%;
   text-align: center;
 }
+
+/* MODAL POPUP  */
+.first-time-user-popup {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1000;
+  display: flex;
+  padding: 1em;
+  background-color: rgba(0, 0, 0, 0.75);
+  transition: 0.25s ease-out;
+}
+.first-time-user-popup.is-active {
+  visibility: visible;
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.first-time-user-popup-container {
+  width: 100%;
+  max-width: 600px;
+  margin: auto;
+  transform: translateY(-1em) scale(0.95);
+  background-color: white;
+  transition: transform 0.25s ease-out;
+  border-radius: 8px;
+}
+
+.first-time-user-popup.is-active .first-time-user-popup-container {
+  transform: translateY(0) scale(1);
+}
+
+.modal-headline {
+  font-size: 20px;
+  line-height: normal;
+  font-weight: 500;
+  margin-bottom: 32px;
+  text-align: center;
+  color: #F7492D;
+}
+
+.modal-links {
+  display: block;
+}
+
+.modal-x-out {
+  float: left;
+  border: none;
+  background: transparent;
+}
+
+.modal-links a {
+  border: 2px solid #3c228a;
+  background: #F7492D;
+  padding: 8px 16px;
+  text-align: center;
+  width: calc(50% - 8px);
+  margin: 0 8px;
+  border-radius: 30px;
+  color: #fff;
+  text-decoration: none;
+  font-weight: 700;
+  transition: all 0.2s;
+}
+
+.modal-links a.secondary {
+  background: transparent;
+  color: #3c228a;
+}
+
+.modal-links a:hover {
+  border: 2px solid #13014a;
+  background: #13014a;
+}
+
+.modal-links a.secondary:hover {
+  border: 2px solid #13014a;
+  background: #ebe8f3;
+  color: #13014a;
+}
+
+.first-time-user-popup-content {
+  padding: 32px 16px;
+}
+
+@media (min-width: 768px) {
+  .first-time-user-popup-content {
+    padding: 32px;
+  }
+
+  .modal-headline {
+    font-size: 24px;
+  }
+
+  .modal-links a {
+    min-height: 40px;
+    line-height: 40px;
+  }
+}

application/templates/modal_results.html

@@ -7,115 +7,24 @@
 	aria-hidden="true">
 	<section class="first-time-user-popup-container">
 		<div id="dialogContent" class="first-time-user-popup-content">
+		<input
+		  type="button"
+
+		  class="modal-x-out"
+		  value=&#10006
+		  onclick="document.getElementById('firstTimeUsers').remove();">
       <div class="modal-headline">Here you go! Now go write a song!</div>
       <div class="modal-links">
 		<h2> Key: </h2>
 		  <h3> {{ session.output_key }} </h3>
+		<p></p>
 		<h2> Time Signature: </h2>
 		  <h3> {{ session.output_signature }} </h3>
+		<p></p>
 		<h2> Theme: </h2>
-		  <h3> {{ session.output_theme }} </h3>
+		<h3> {{ session.output_theme }} </h3>
+		<p></p>
       </div>
 		</div>
 	</section>
 </div>
-
-<style>
-/* MODAL POPUP  */
-.first-time-user-popup {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 1000;
-  display: flex;
-  padding: 1em;
-  background-color: rgba(0, 0, 0, 0.75);
-  opacity: 0;
-  pointer-events: none;
-  transition: 0.25s ease-out;
-}
-.first-time-user-popup.is-active {
-  visibility: visible;
-  opacity: 1;
-  pointer-events: auto;
-}
-
-.first-time-user-popup-container {
-  width: 100%;
-  max-width: 600px;
-  margin: auto;
-  transform: translateY(-1em) scale(0.95);
-  background-color: white;
-  transition: transform 0.25s ease-out;
-  border-radius: 8px;
-}
-
-.first-time-user-popup.is-active .first-time-user-popup-container {
-  transform: translateY(0) scale(1);
-}
-
-.modal-headline {
-  font-size: 20px;
-  line-height: normal;
-  font-weight: 500;
-  margin-bottom: 32px;
-  text-align: center;
-  color: #F7492D;
-}
-
-.modal-links {
-  display: flex;
-}
-
-.modal-links a {
-  border: 2px solid #3c228a;
-  background: #F7492D;
-  padding: 8px 16px;
-  text-align: center;
-  width: calc(50% - 8px);
-  margin: 0 8px;
-  border-radius: 30px;
-  color: #fff;
-  text-decoration: none;
-  font-weight: 700;
-  transition: all 0.2s;
-}
-
-.modal-links a.secondary {
-  background: transparent;
-  color: #3c228a;
-}
-
-.modal-links a:hover {
-  border: 2px solid #13014a;
-  background: #13014a;
-}
-
-.modal-links a.secondary:hover {
-  border: 2px solid #13014a;
-  background: #ebe8f3;
-  color: #13014a;
-}
-
-.first-time-user-popup-content {
-  padding: 32px 16px;
-}
-
-@media (min-width: 768px) {
-  .first-time-user-popup-content {
-    padding: 32px;
-  }
-
-  .modal-headline {
-    font-size: 24px;
-  }
-
-  .modal-links a {
-    min-height: 40px;
-    line-height: 40px;
-  }
-}
-</style>
-

gpt4all_tst.py

@@ -2,9 +2,16 @@ from gpt4all import GPT4All
 import requests
 from pathlib import Path
 
-MODEL = GPT4All(model_name="gpt4all-falcon-q4_0.gguf", model_path=(Path.home() / ".cache" / "gpt4all"), allow_download=True)
+MODEL = GPT4All(
+    model_name="gpt4all-falcon-q4_0.gguf",
+    model_path=(Path.home() / ".cache" / "gpt4all"),
+    allow_download=True,
+)
 WORD_PROMPT = str(requests.get("https://random-word-api.herokuapp.com/word").text)[2:-2]
-response = MODEL.generate(f"The theme is {WORD_PROMPT} and this song is about", temp=1)
+SYSTEM_TEMPLATE = 'A single sentence based on a word.'
-print(WORD_PROMPT)
+PROMPT_TEMPLATE = '### Instruction: {0} \n### Response: '
-resp = response.splitlines().pop(0)
+with MODEL.chat_session(SYSTEM_TEMPLATE, PROMPT_TEMPLATE):
-print(resp)
+    response = MODEL.generate(f"A single sentence about {WORD_PROMPT}.", temp=0.7)
+    print(WORD_PROMPT)
+    resp = str(response.splitlines()[0])
+    print(resp)