Created two pages - a single click SPA page and then the option to customize each param. Created modal and the data gets loaded into the modal, but styling needs to be updated.

application/routes.py

@@ -4,9 +4,11 @@ Flask app that uses gpt4all to generate random song writing prompt.
 import os
 import string
 import random
+import requests
 from flask import (
     render_template,
     session,
+    request,
 )
 from gpt4all import GPT4All
 from datetime import datetime, timezone, timedelta
@@ -17,11 +19,11 @@ app.config.update(SECRET_KEY=os.urandom(24))
 app.permanent_session_lifetime = timedelta(minutes=30)
 
 MODEL = GPT4All(
-    model_name="orca-mini-3b-gguf2-q4_0.gguf",
+    model_name="gpt4all-falcon-q4_0.gguf",
     model_path=(Path.home() / ".cache" / "gpt4all"),
-    allow_download=False,
+    allow_download=True,
 )
-TIME_SIGNATURES=["2/4", "3/4", "4/4", "2/2", "6/8", "9/8", "12/8"]
+TIME_SIGNATURES = ["2/4", "3/4", "4/4", "2/2", "6/8", "9/8", "12/8"]
 
 # Need to decide between manually entering this list or using ascii_letters, below
 KEYS = ["A", "B", "C", "D", "E", "F", "G"]
@@ -40,21 +42,40 @@ def main_prompt():
     """
     return render_template("index.html", title="Home")
 
+
+@app.route("/all", methods=["GET", "POST"])
+def prompt_all():
+    WORD_PROMPT = str(requests.get("https://random-word-api.herokuapp.com/word").text)[
+        2:-2
+    ]
+    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)
+        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")
+
+
 @app.route("/")
 def prompt_instrument():
     pass
 
+
 @app.route("/")
 def prompt_key():
     pass
 
+
 @app.route("/")
 def prompt_timesig():
     pass
 
-@app.route("/")
-def prompt_all():
-    pass
 
 @app.route("/")
 def prompt_influence():

application/static/styles.css

@@ -47,6 +47,9 @@ html {
   display: flex;
   justify-content: center;
 }
+header {
+  height: 10%;
+}
 
 .prompt-button {
   background-color: rgba(255, 255, 255, 0.5);
@@ -64,3 +67,9 @@ html {
 .prompt {
   padding: 5px;
 }
+
+.results-container {
+  display: inline-block;
+  width: 60%;
+  text-align: center;
+}

application/templates/modal_results.html

@@ -0,0 +1,133 @@
+<script>
+  function showPopup() {
+    var dialogShown = localStorage.getItem('dialogShown')
+    if (!dialogShown) {
+    setTimeout(function() {
+      document.querySelector(".popup-trigger").click()
+      console.log("showing popup")
+      localStorage.setItem('dialogShown', 1)
+    }, 500)}
+  }
+</script>
+
+<div
+	class="first-time-user-popup"
+	id="firstTimeUsers"
+	role="dialog"
+	aria-labelledby="dialogTitle"
+	aria-describedby="dialogContent"
+	aria-hidden="true">
+	<section class="first-time-user-popup-container">
+		<div id="dialogContent" class="first-time-user-popup-content">
+      <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>
+		<h2> Time Signature: </h2>
+		  <h3> {{ session.output_signature }} </h3>
+		<h2> Theme: </h2>
+		  <h3> {{ session.output_theme }} </h3>
+      </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>
+

application/templates/results.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+{% include 'head.html' %}
+{% include 'header.html' %}
+{% block content %}
+  <div class="main-container" style="padding-bottom:10px;">
+	  <h1> Here are your results! </h1>
+  <p></p>
+  <div class="results-container">
+  <h2> Key: </h2>
+	<h3> {{ session.output_key }} </h3>
+  <h2> Time Signature: </h2>
+	<h3> {{ session.output_signature }} </h3>
+  <h2> Theme: </h2>
+	<h3> {{ session.output_theme }} </h3>
+  </div>
+</div>
+
+{% endblock %}

application/templates/single-button.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+{% include 'head.html' %}
+{% include 'header.html' %}
+{% block content %}
+  <div class="main-container">
+	  {% if message %}
+	  {% include 'modal_results.html' %}
+	  {% endif %}
+	  <h1> Get Inspired with a Song Writing Prompt! </h1>
+	<h2> {{ session.list_response }} </strong></h4>
+<div class="prompt-questions">
+	<form class="prompt"
+	      	action="{{ url_for("prompt_all")}}"
+		method="post">
+		<input class="prompt-button"
+		id="fields" type="submit" value="Submit Prompt all Only">
+	</form>
+</div>
+  </div>
+
+{% endblock %}

gpt4all_tst.py

@@ -0,0 +1,10 @@
+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)
+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)
+print(WORD_PROMPT)
+resp = response.splitlines().pop(0)
+print(resp)