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:
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -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")
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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=✖
|
||||
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>
|
||||
|
||||
|
||||
@ -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)
|
||||
|
||||
Reference in New Issue
Block a user