From 7793dc88fa6d945c4a39a0bb5e37be152fcb163f Mon Sep 17 00:00:00 2001
From: Normanras <44226464+Normanras@users.noreply.github.com>
Date: Wed, 29 Nov 2023 22:31:24 -0500
Subject: [PATCH] Got modal to open and close successfully without refreshing
 the page, bringing this closer to a SPA. Fixed some small styling on the
 modal.

---
 __pycache__/apicalls.cpython-310.pyc          | Bin 199 -> 200 bytes
 __pycache__/config.cpython-310.pyc            | Bin 409 -> 410 bytes
 .../__pycache__/__init__.cpython-310.pyc      | Bin 339 -> 340 bytes
 .../__pycache__/routes.cpython-310.pyc        | Bin 2551 -> 2795 bytes
 application/routes.py                         |  19 ++-
 application/static/styles.css                 | 101 ++++++++++++++++
 application/templates/modal_results.html      | 111 ++----------------
 gpt4all_tst.py                                |  17 ++-
 8 files changed, 136 insertions(+), 112 deletions(-)

diff --git a/__pycache__/apicalls.cpython-310.pyc b/__pycache__/apicalls.cpython-310.pyc
index 2ef8c5b94e07c7dfb9de7a61b79ee08a53fe33b0..770f67ae80c7ccc0958e6c871dfa31aa51a82358 100644
GIT binary patch
delta 53
zcmX@kc!H5TpO=@50SFA2rcdNfW^|dDFE8nyS>jQeq+gt$m#$k-l%HErqFbJtlvq$O
HahW0jjKL7)

delta 52
zcmX@Xc$|?tpO=@50SNr=q)g;aW^|sIFE0^Ll%JKFTvDu`UQnW2oS&DjTTqmrTTn7_
Gxgr3JmJtX5

diff --git a/__pycache__/config.cpython-310.pyc b/__pycache__/config.cpython-310.pyc
index ffd1d48a9ca8c784158317a14f5fe7bde96943bd..e0f91f74d5786cfe42ed411d262f45cfae1242dd 100644
GIT binary patch
delta 81
zcmbQqJd2q-pO=@50SFA2rcdPlX6d9KTAW%`te=-(lv|WooLgF4oSLWalAm0fo0?Zr
jtnZ##;!&EUU!0$pu3J!)pIcC(Tb`PfSWqz8k}&}QDbE}b

delta 80
zcmbQmJd>F_pO=@50SFxLq)g=gX5pwGTAW%`te=-(lv|WooLgF4oSLWalAm0fo0?Zr
htRGO6pOu;nWTY3A=oaVarRx?H<>wZZOtxZ7001Le93}t&

diff --git a/application/__pycache__/__init__.cpython-310.pyc b/application/__pycache__/__init__.cpython-310.pyc
index 37c43bbc4776893bd7777b3189c141c6d87d4a67..4e5e0f0d6441fbb3aac1b4ebf733cd36743c125d 100644
GIT binary patch
delta 54
zcmcc2bcKmKpO=@50SFA2rcdO)%@{E8xxA!%W{F2>l74Z1Ub=2UQGRYgiEepnQer{D
IWI0At0K(%DiU0rr

delta 53
zcmcb@beV}epO=@50SHX)q)g<#&FDYzxx7R`QGQlxa!Ij%dO?Y9aeiL9Zb4CgZb8Xp
Hc}7zJy|odO

diff --git a/application/__pycache__/routes.cpython-310.pyc b/application/__pycache__/routes.cpython-310.pyc
index 54e660a98fa9feb60e38beb2ec083e6d65f99110..1088fbd74b270277fe9f21e78a7000d4758ab54a 100644
GIT binary patch
delta 938
zcmZut&u<bz6rR~#mSus3s<hU$&BiuHG=QzYYNZmRjWt@^6iicMLYK}+sj$1w%%%|`
z9vUwu)x+q?n84AaNB;+pp77+wi$@RM)EO|12j}JccD`@kdo%lf9{rxOym;IMV$FQ5
z;ez?WdZS*sm%C3fp*hzhP2$jIKq+=}H@)qkiCso>x9V&;sOG5W)-pcvnm)_y;i}{N
z{EPbFSx7W91a1h>Pl6a=u&W^0gS+ZJL<&-$E90O8kk)}H)KQqW8$$Xcg>0d4M`e09
z%#0o!d?P(L2AGMAJQ(Px@J$rSgSK={;l{f0Hf$?B<<%q<YS-FA(KdJsQ0$$G;>bEs
zIvN9Qt()iplo$v5vOzKrHUI*eh<z0T*O&#gv<D%Ou_?fkXapT;tLW%~S{$llD0QF|
zL3)&b)-F4(lh<upcWVu7i`g*jZezRZP>gKPwH<rUBPiRNnVz1uZ@ZL{V4KxFcfo#o
zu49|hUB}e-T#6TLGA%~bN(v)rFlsvl+dG(Go(xUJ%Td{=GMq8bhE6=|!))#0V0|mR
zhh>f7rca>gP>y*4^8;34JGhBkM~08fR0GC5H@m}{jdJ+!9chJ3iHd%>i79nzxD_uB
z|76vduOyS=Fg?;&#k>0k!H)w>8SSez%=-Le=uV{^+um_lg^FsC-ZyI4#l&H_Z&JTe
zXN|gxDN$sTP&vA>x_+~=w!XTuRw^foo5j-7N=0Dp?)B1AIWasqG)P)h@$>qbQ?}Sx
ziVn5knyNt)YVbI;pdm0SV&a!&#vqyJ=fV^GjXob=7U@6am6}4X3U@McMF_GWi1+jp
zd_^~`NBGH#H1m=c|C8j06Vdg<jBETwn8DNhcQ`e6LAn<uU6P~<N<(s)pEYJiHiV$M
zAVslY5|RSnGO~J3=AGrQjhD$m@p-9dCC%}<NG3Hew^t=CO1dVgz*)pijhoQW{(+tp
GL-+%<l<#B!

delta 700
zcmY*WO=}ZD7~Yxv%w~7H7-Cy#swk)t()fj~HMR$H@ladaiVzB+?M#!6yR*y8>?O2#
z5J83ZGI$apIqF6HBmRKkKky_TJnGEWgI#!^eV%8Y_hskZAJyNLAoYD$lh17B0DpGA
z2JiKywdOO1DQl9HCUlo2Ib)bK+v$FuV8U5*gQf$#FG(-s4VIE#Bco}Oaq(T>c?sn#
zL)If%?41OzaWH}ijKM&E1rS8~YdEVNY1|l?$an$iDz`>9cgCQ2m&RaP<1R8=TA|C*
zcabHPH}H{tsD02rLgb**F&qVB?Fbx#(G-&1ig9-yxiT7}GV+jr47U^y(9|ifhho}X
zH0c%jS>lU1FDB-N4h2$u0v&_nB<px-&a<3%c^@Zu=uyn_n6rgGPvVZfd8%klb_~z4
zi1cFI*vmOjNs$=(TZMONJ>yYI#E!MsoH#v9Fx};N;<7A`cpMSTCVG};RPCw`JLTu=
zo9*t#=K9*kwy4=R=FUq$fEF<RxcUqTzzlGKqkF&ubWwb>=fqok$zPSBU&Xc|U6yXm
zT9OXEFMitB%WXv;C}^EMs#Sy2pVj42f?3piTqMOsrz%by)VL;P$B!e%yYlW?N*Jyi
z^tKA!QE*p*E};(SJ@M43Tn_)ui^xHoW3rE*$WvxXfG_|dpetg#v|u$<V_m!{orJ}-
kTS_+-+!R;cMs-oqWd$t-4;8G4zDug1yu9&WS)p9aUtPSh&j0`b

diff --git a/application/routes.py b/application/routes.py
index cba0832..50aa3a2 100644
--- a/application/routes.py
+++ b/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)
-        numresp = len(response)- 1
-        if numresp <= 1:
-            session["output_theme"] = str(response)
-        randresp = random.randrange(0, numresp)
-        session["output_theme"] = response
+        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])
+
+
+        #  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")
 
diff --git a/application/static/styles.css b/application/static/styles.css
index 7297359..c2c8a77 100644
--- a/application/static/styles.css
+++ b/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;
+  }
+}
diff --git a/application/templates/modal_results.html b/application/templates/modal_results.html
index 32c30da..4fdc1b5 100644
--- a/application/templates/modal_results.html
+++ b/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>
-
diff --git a/gpt4all_tst.py b/gpt4all_tst.py
index f2ac44c..4581222 100644
--- a/gpt4all_tst.py
+++ b/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)
-print(WORD_PROMPT)
-resp = response.splitlines().pop(0)
-print(resp)
+SYSTEM_TEMPLATE = 'A single sentence based on a word.'
+PROMPT_TEMPLATE = '### Instruction: {0} \n### Response: '
+with MODEL.chat_session(SYSTEM_TEMPLATE, PROMPT_TEMPLATE):
+    response = MODEL.generate(f"A single sentence about {WORD_PROMPT}.", temp=0.7)
+    print(WORD_PROMPT)
+    resp = str(response.splitlines()[0])
+    print(resp)