Added loading svg, but it needs to by stylized and updated for better placement. Despite some changes to routes.py to improve the gpt4all efficiency, it is still 80-95 seconds before it generates a response. I might have to start generating responses in a DB on the first page load so that the UI/UX is faster.

application/routes.py

@@ -14,14 +14,17 @@ from gpt4all import GPT4All
 from datetime import datetime, timezone, timedelta
 from pathlib import Path
 from application import app
+from werkzeug.middleware.profiler import ProfilerMiddleware
+
+app.wsgi_app = ProfilerMiddleware(app.wsgi_app, profile_dir="/root/flask-profiler/")
 
 app.config.update(SECRET_KEY=os.urandom(24))
 app.permanent_session_lifetime = timedelta(minutes=30)
 
 MODEL = GPT4All(
     model_name="gpt4all-falcon-q4_0.gguf",
-    model_path=(Path.home() / ".cache" / "gpt4all"),
-    allow_download=True,
+#    model_path=(Path.home() / ".cache" / "gpt4all"),
+    allow_download=False,
 )
 TIME_SIGNATURES = ["2/4", "3/4", "4/4", "2/2", "6/8", "9/8", "12/8"]
 
@@ -45,6 +48,7 @@ def main_prompt():
 
 @app.route("/all", methods=["GET", "POST"])
 def prompt_all():
+    print("Running Prompt_all func")
     WORD_PROMPT = str(requests.get("https://random-word-api.herokuapp.com/word").text)[
         2:-2
     ]
@@ -55,10 +59,12 @@ def prompt_all():
         session["output_key"] = random.choice(KEYS) + random.choice(SIGN)
         session["output_signature"] = random.choice(TIME_SIGNATURES)
         session["word_prompt"] = WORD_PROMPT
-        with MODEL.chat_session(SYSTEM_TEMPLATE, PROMPT_TEMPLATE):
-            response = MODEL.generate(f"A single sentence about {WORD_PROMPT}.", temp=0.7)
-            session["output_theme"] = str(response.splitlines()[0])
+        # with MODEL.chat_session(SYSTEM_TEMPLATE, PROMPT_TEMPLATE):
+        #     response = MODEL.generate(f"A single sentence about {WORD_PROMPT}.", temp=0.7)
+        #     session["output_theme"] = str(response.splitlines()[0])
 
+        response = MODEL.generate(f"Tell me about {WORD_PROMPT}.", temp=0.7, callback=stop_on_token_callback)
+        session["output_theme"] = response
 
         #  numresp = len(response)- 1
         # if numresp <= 1:
@@ -68,6 +74,11 @@ def prompt_all():
         return render_template("single-button.html", title="Results", message=message)
     return render_template("single-button.html", title="Single Option")
 
+def stop_on_token_callback(token_id, token_string):
+    if '.' in token_string:
+        return False
+    else:
+        return True
 
 @app.route("/")
 def prompt_instrument():

application/static/styles.css

@@ -174,3 +174,7 @@ header {
     line-height: 40px;
   }
 }
+
+.loading {
+	url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><radialGradient id="a12" cx=".66" fx=".66" cy=".3125" fy=".3125" gradientTransform="scale(1.5)"><stop offset="0" stop-color="%23FF156D"></stop><stop offset=".3" stop-color="%23FF156D" stop-opacity=".9"></stop><stop offset=".6" stop-color="%23FF156D" stop-opacity=".6"></stop><stop offset=".8" stop-color="%23FF156D" stop-opacity=".3"></stop><stop offset="1" stop-color="%23FF156D" stop-opacity="0"></stop></radialGradient><circle transform-origin="center" fill="none" stroke="url(%23a12)" stroke-width="15" stroke-linecap="round" stroke-dasharray="200 1000" stroke-dashoffset="0" cx="100" cy="100" r="70"><animateTransform type="rotate" attributeName="transform" calcMode="spline" dur="2" values="360;0" keyTimes="0;1" keySplines="0 0 1 1" repeatCount="indefinite"></animateTransform></circle><circle transform-origin="center" fill="none" opacity=".2" stroke="%23FF156D" stroke-width="15" stroke-linecap="round" cx="100" cy="100" r="70"></circle></svg>')
+}

application/static/tube-spinner.svg

@@ -0,0 +1 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><radialGradient id='a12' cx='.66' fx='.66' cy='.3125' fy='.3125' gradientTransform='scale(1.5)'><stop offset='0' stop-color='#FF156D'></stop><stop offset='.3' stop-color='#FF156D' stop-opacity='.9'></stop><stop offset='.6' stop-color='#FF156D' stop-opacity='.6'></stop><stop offset='.8' stop-color='#FF156D' stop-opacity='.3'></stop><stop offset='1' stop-color='#FF156D' stop-opacity='0'></stop></radialGradient><circle transform-origin='center' fill='none' stroke='url(#a12)' stroke-width='15' stroke-linecap='round' stroke-dasharray='200 1000' stroke-dashoffset='0' cx='100' cy='100' r='70'><animateTransform type='rotate' attributeName='transform' calcMode='spline' dur='2' values='360;0' keyTimes='0;1' keySplines='0 0 1 1' repeatCount='indefinite'></animateTransform></circle><circle transform-origin='center' fill='none' opacity='.2' stroke='#FF156D' stroke-width='15' stroke-linecap='round' cx='100' cy='100' r='70'></circle></svg>

application/templates/head.html

@@ -12,6 +12,7 @@
     <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap"
 	rel="stylesheet">
     <link rel="stylesheet" href="{{ url_for('static', filename="styles.css") }}" />
+    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
   </head>
 <body>
 {% block content %} {% endblock %}

application/templates/modal_results.html

@@ -28,3 +28,9 @@
 		</div>
 	</section>
 </div>
+<script>
+var elements = $('#firstTimeUsers');
+if (elements.length === 1) {
+    $('#loading').hide();
+}
+</script>

application/templates/single-button.html

@@ -13,8 +13,13 @@
 	      	action="{{ url_for("prompt_all")}}"
 		method="post">
 		<input class="prompt-button"
-		id="fields" type="submit" value="Submit Prompt all Only">
+		id="fields" type="submit" value="Click for Inspiration"
+		onclick="$('#loading').show();">
 	</form>
+	  <div id="loading" style="display:none;">
+	   <img src={{ url_for('static', filename='tube-spinner.svg') }} width="200px">
+	   Please be patient as we load up on inspiration!
+	  </div>
 </div>
   </div>
 

gpt4all_tst.py

@@ -4,7 +4,8 @@ from pathlib import Path
 
 MODEL = GPT4All(
     model_name="gpt4all-falcon-q4_0.gguf",
-    model_path=(Path.home() / ".cache" / "gpt4all"),
+#    model_path=(Path.home() / ".cache" / "gpt4all"),
+# /root/.pyenv/versions/gpt-song-prompt/lib/python3.10/site-packages/gpt4all
     allow_download=True,
 )
 WORD_PROMPT = str(requests.get("https://random-word-api.herokuapp.com/word").text)[2:-2]