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

This commit is contained in:
Normanras
2023-11-29 22:31:24 -05:00
parent 74306d606c
commit 7793dc88fa
8 changed files with 136 additions and 112 deletions

Binary file not shown.

Binary file not shown.

View File

@ -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")

View File

@ -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;
}
}

View File

@ -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>

View File

@ -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)