rixty/KoboldAI-Client
1
1
Fork 0
mirror of https://github.com/KoboldAI/KoboldAI-Client.git synced 2025-06-05 21:59:24 +02:00
Code Issues Projects Releases Wiki Activity

Start work on prompt config ui

Browse Source
This commit is contained in:
somebody
2022-09-15 19:28:08 -05:00
parent 98105c729b
commit 111fa70a20
2 changed files with 94 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
static/koboldai.css
View File

@@ -1854,7 +1854,8 @@ body {
/* Finder */
#finder-container,
#debug-file-container {
#debug-file-container,
#prompt-config-container {
display: flex;
justify-content: center;
align-items: center;
@@ -2060,6 +2061,66 @@ body {
background-color: rgb(158, 2, 2);
}
/* Prompt Config */
#prompt-config {
display: flex;
flex-direction: column;
position: relative;
background-color: var(--popup_background_color);
width: 25%;
height: 75%;
}
#prompt-config-header {
/* HACK: Need to add (or use) a theme color for this! */
background-color: #212a33;
padding: 7px;
}
#prompt-config-header > h3 {
margin-top: 5px;
margin-bottom: 5px;
}
#prompt-config-placeholders {
display: flex;
flex-direction: column;
row-gap: 16px;
overflow-y: scroll;
padding: 7px;
padding-left: 14px
}
.prompt-config-title {
display: block;
font-size: 20px;
font-weight: bold;
}
.prompt-config-value {
padding: 7px;
}
#prompt-config-done {
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 32px;
position: absolute;
right: 10px;
bottom: 10px;
cursor: pointer;
color: var(--button_text);
background-color: var(--button_background);
border-radius: var(--radius_settings_button);
}
/*---------------------------------- Global ------------------------------------------------*/
.hidden {
display: none;

33
templates/popups.html
View File

@@ -192,4 +192,35 @@
</span>
</div>
</div>
</div>
</div>
<!---------------- Prompt Config ------------------->
<div id="prompt-config-container">
<div id="prompt-config">
<div id="prompt-config-header">
<h3 class="noselect">Prompt Configuration</h3>
<span class="help_text">This prompt has placeholders you need to fill in before starting.</span>
</div>
<!-- Order, default, title, description -->
<div id="prompt-config-placeholders">
<div class="prompt-config-ph">
<span class="prompt-config-title">Name</span>
<span class="help_text prompt-config-desc">What is your name?</span>
<input class="prompt-config-value" value="Mark"></input>
</div>
</div>
<div id="prompt-config-done">Done</div>
</div>
</div>
<script>
const c = document.querySelector(".prompt-config-ph");
const cont = document.querySelector("#prompt-config-placeholders");
for (let i=0;i<30;i++) {
let j = c.cloneNode(true);
cont.appendChild(j);
}
</script>