fix wrong formattings
This commit is contained in:
Yazan Agha-Schrader
parent
1bc9ca6a9c
commit
09e3b50f62
8 changed files with 95 additions and 95 deletions
|
|
@ -35,4 +35,4 @@
|
|||
"BUTTON_START_INFERENCE": "",
|
||||
"POWERED_BY": "",
|
||||
"AND": ""
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -47,4 +47,4 @@ export const systemPrompts = {
|
|||
synthia: {
|
||||
systemPrompt: "Erarbeite das Thema anhand eines Gedankenbaums und gehe bei Bedarf zurück, um eine klare, zusammenhängende Gedankenkette zu erstellen. Antworte immer ohne zu zögern."
|
||||
},
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -35,4 +35,4 @@
|
|||
"BUTTON_START_INFERENCE": "Senden",
|
||||
"POWERED_BY": "Unterstützt Durch",
|
||||
"AND": "und"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -35,4 +35,4 @@
|
|||
"BUTTON_START_INFERENCE": "Submit",
|
||||
"POWERED_BY": "Powered By",
|
||||
"AND": "and"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<meta name="color-scheme" content="light dark">
|
||||
<title>llama.cpp - chat</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
|
||||
|
||||
<script type="module">
|
||||
import {
|
||||
html, h, signal, effect, computed, render, useSignal, useEffect, useRef, Component
|
||||
|
|
@ -354,7 +354,7 @@
|
|||
</div>
|
||||
|
||||
<div class="right">
|
||||
<button class="button-back" onclick=${reset}>Back</button>
|
||||
<button class="button-back" onclick=${reset}>Back</button>
|
||||
<button onclick=${uploadImage}>Upload Image</button>
|
||||
<button onclick=${stop} disabled=${!generating.value}>Stop</button>
|
||||
<button type="submit" disabled=${generating.value}>Submit</button>
|
||||
|
|
@ -372,7 +372,7 @@
|
|||
<div>
|
||||
<button onclick=${submit} type="button" disabled=${generating.value}>Start</button>
|
||||
<button onclick=${stop} disabled=${!generating.value}>Stop</button>
|
||||
<button onclick=${reset}>Back</button>
|
||||
<button onclick=${reset}>Back</button>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
|
|
@ -532,7 +532,7 @@ async function updateSystemLanguage(event) {
|
|||
// console.error('Fehler beim Laden der UI-Texte:', error);
|
||||
// }
|
||||
// }
|
||||
//
|
||||
//
|
||||
///////////// WORK IN PROGRESS ///////////// MULTILINGUAL UI AND PROMPTS //
|
||||
//
|
||||
///////////////////////////////////////////////////////////////////////////
|
||||
|
|
@ -746,7 +746,7 @@ async function updateSystemLanguage(event) {
|
|||
<details>
|
||||
<summary><span class="summary-title" id="id_grammar-title" id_grammar-title>Grammar</span></summary>
|
||||
${GrammarControl()}
|
||||
</details>
|
||||
</details>
|
||||
</fieldset>
|
||||
`
|
||||
);
|
||||
|
|
@ -768,7 +768,7 @@ async function updateSystemLanguage(event) {
|
|||
</label>
|
||||
<${UserTemplateResetButton}/>
|
||||
</fieldset>
|
||||
|
||||
|
||||
${session.value.type === 'chat' ? ChatConfigForm() : CompletionConfigForm()}
|
||||
|
||||
<fieldset class="two">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
// extended list
|
||||
export const promptFormats = {
|
||||
export const promptFormats = {
|
||||
"airoborosl2": {
|
||||
template: "{{prompt}} {{history}} {{char}}",
|
||||
historyTemplate: "{{name}}: {{message}}",
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
--input-focus-border-color: #11a37f;
|
||||
--loading-color-1: #eeeeee00;
|
||||
--loading-color-2: #eeeeeeff;
|
||||
|
||||
|
||||
/* Dark topic colors (to add/adapt — WIP) */
|
||||
--dark-primary-color: #13b896;
|
||||
--dark-secondary-color: #1a2a33;
|
||||
|
|
@ -23,7 +23,7 @@
|
|||
--dark-loading-color-1: #33333300;
|
||||
--dark-loading-color-2: #333333ff;
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
font-family: 'Arial', sans-serif;
|
||||
font-size: 90%;
|
||||
|
|
@ -35,11 +35,11 @@
|
|||
margin: 0 auto;
|
||||
padding: 0 0.5em;
|
||||
}
|
||||
|
||||
|
||||
code, pre code {
|
||||
font-family: 'Courier New', monospace;
|
||||
}
|
||||
|
||||
|
||||
#container {
|
||||
margin: 0em auto;
|
||||
display: flex;
|
||||
|
|
@ -47,7 +47,7 @@
|
|||
justify-content: space-between;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
main {
|
||||
margin: 3px;
|
||||
display: flex;
|
||||
|
|
@ -60,7 +60,7 @@
|
|||
border-radius: 5px;
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
|
||||
p {
|
||||
overflow-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
|
|
@ -68,7 +68,7 @@
|
|||
margin-top: 0.5em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
|
||||
#write form {
|
||||
margin: 1em 0 0 0;
|
||||
display: flex;
|
||||
|
|
@ -76,34 +76,34 @@
|
|||
gap: 0.5em;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
|
||||
.right {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 0.5em;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
|
||||
.two-columns {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
|
||||
.summary-title {
|
||||
font-weight: 600;
|
||||
font-size: x-small;
|
||||
color: var(--secondary-color);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
|
||||
fieldset {
|
||||
border: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
color: #353740;
|
||||
}
|
||||
|
||||
|
||||
fieldset.two {
|
||||
display: grid;
|
||||
grid-template: "a a";
|
||||
|
|
@ -111,7 +111,7 @@
|
|||
font-size: x-small;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
|
||||
fieldset.three {
|
||||
display: grid;
|
||||
grid-template: "a a a";
|
||||
|
|
@ -119,7 +119,7 @@
|
|||
font-size: x-small;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
|
||||
fieldset.names {
|
||||
display: grid;
|
||||
grid-template: "a a";
|
||||
|
|
@ -131,7 +131,7 @@
|
|||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
||||
fieldset.dropdowns {
|
||||
display: flex;
|
||||
grid-template: "a a";
|
||||
|
|
@ -143,7 +143,7 @@
|
|||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
||||
.names input[type="text"] {
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: medium;
|
||||
|
|
@ -152,45 +152,45 @@
|
|||
padding: 5px;
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
|
||||
.names input[type="text"].special-text-format {
|
||||
font-style: italic;
|
||||
font-weight: bold;
|
||||
color: #FF0000;
|
||||
}
|
||||
|
||||
|
||||
details {
|
||||
border: 1px solid #ececf1;
|
||||
border-radius: 10px;
|
||||
padding: 0.5em 0.5em 0;
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
|
||||
summary {
|
||||
font-weight: bold;
|
||||
margin: -0.5em -0.5em 0;
|
||||
padding: 0.5em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
details[open] {
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
|
||||
textarea-sec, input-sec, button-sec {
|
||||
padding: 10px;
|
||||
height: 40px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
textarea-sec::placeholder, input-sec::placeholder {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
|
||||
.toggleCheckbox {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
.toggleContainer {
|
||||
position: relative;
|
||||
display: grid;
|
||||
|
|
@ -203,7 +203,7 @@
|
|||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
.toggleContainer::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
|
|
@ -214,39 +214,39 @@
|
|||
background: var(--primary-color);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
|
||||
.toggleContainer div {
|
||||
padding: 6px;
|
||||
text-align: center;
|
||||
z-index: 1;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
|
||||
.toggleCheckbox:checked + .toggleContainer::before {
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
|
||||
.toggleCheckbox:checked + .toggleContainer div:first-child {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
|
||||
.toggleCheckbox:checked + .toggleContainer div:last-child {
|
||||
color: var(--background-color);
|
||||
}
|
||||
|
||||
|
||||
.toggleCheckbox + .toggleContainer div:first-child {
|
||||
color: var(--background-color);
|
||||
}
|
||||
|
||||
|
||||
.toggleCheckbox + .toggleContainer div:last-child {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
|
||||
.button-container {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
|
||||
.reset-button {
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
|
|
@ -258,13 +258,13 @@
|
|||
border-radius: 50px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
.reset-button:hover {
|
||||
color: var(--background-color);
|
||||
background-color: var(--button-hover-alert);
|
||||
border: 1px solid var(--button-hover-alert);
|
||||
}
|
||||
|
||||
|
||||
select {
|
||||
padding: 5px;
|
||||
border-radius: 8px;
|
||||
|
|
@ -272,12 +272,12 @@
|
|||
background-color: white;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
select:focus {
|
||||
border: 1px solid var(--input-focus-border-color);
|
||||
box-shadow: 0 0 1px var(--input-focus-border-color);
|
||||
}
|
||||
|
||||
|
||||
button {
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
|
|
@ -294,13 +294,13 @@
|
|||
border-radius: 12px;
|
||||
border: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover-color);
|
||||
font-size: x-small;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
||||
button:disabled {
|
||||
color: #acacbd;
|
||||
background-color: #f7f7f8;
|
||||
|
|
@ -308,7 +308,7 @@
|
|||
font-size: x-small;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
||||
.button-back {
|
||||
background-color: #cccccc;
|
||||
color: #353740;
|
||||
|
|
@ -325,7 +325,7 @@
|
|||
border-radius: 12px;
|
||||
border: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
|
||||
.button-back:hover {
|
||||
background-color: #353740;
|
||||
color: #f0f0f0;
|
||||
|
|
@ -342,7 +342,7 @@
|
|||
border-radius: 12px;
|
||||
border: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
|
||||
.button-grammar {
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
|
|
@ -358,7 +358,7 @@
|
|||
border-radius: 10px;
|
||||
border: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
|
||||
.button-grammar:hover {
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
|
|
@ -374,19 +374,19 @@
|
|||
border-radius: 10px;
|
||||
border: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
|
||||
.prob-set {
|
||||
padding: 0.3em;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
|
||||
.popover-content {
|
||||
position: absolute;
|
||||
background-color: white;
|
||||
padding: 0.2em;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
|
||||
textarea {
|
||||
padding: 5px;
|
||||
flex-grow: 1;
|
||||
|
|
@ -396,24 +396,24 @@
|
|||
resize: none;
|
||||
height: 6em;
|
||||
}
|
||||
|
||||
|
||||
input[type="text"],
|
||||
input[type="range"] {
|
||||
padding: 5px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
|
||||
input[type="text"]:focus {
|
||||
outline: none;
|
||||
border: 1px solid var(--input-focus-border-color);
|
||||
box-shadow: 0 0 1px var(--input-focus-border-color);
|
||||
}
|
||||
|
||||
|
||||
input[type="text"] {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
|
||||
input[type="range"] {
|
||||
-webkit-appearance: none;
|
||||
width: 80%;
|
||||
|
|
@ -426,18 +426,18 @@
|
|||
-webkit-transition: .2s;
|
||||
transition: opacity .2s;
|
||||
}
|
||||
|
||||
|
||||
input[type="range"]:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
input[type="range"]:focus,
|
||||
textarea:focus {
|
||||
outline: none;
|
||||
border: 1px solid var(--primary-color);
|
||||
box-shadow: 0 0 1px var(--input-focus-border-color);
|
||||
}
|
||||
|
||||
|
||||
input[type="range"]::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
|
|
@ -449,7 +449,7 @@
|
|||
background-color: var(--background-color);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
input[type="range"]::-moz-range-thumb {
|
||||
width: 3px;
|
||||
height: 25px;
|
||||
|
|
@ -458,23 +458,23 @@
|
|||
background: var(--background-color);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
input[type="range"]::-webkit-slider-runnable-track {
|
||||
background-size: var(--slider-track-size);
|
||||
}
|
||||
|
||||
|
||||
input[type="range"]:focus {
|
||||
background-size: var(--slider-track-size-focus);
|
||||
}
|
||||
|
||||
|
||||
input[type="radio"] {
|
||||
accent-color: var(--primary-color);
|
||||
}
|
||||
|
||||
|
||||
.chat-input-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
.chat-input-label {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
|
@ -484,17 +484,17 @@
|
|||
margin-left: 5px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
|
||||
textarea#chat-input {
|
||||
padding-top: 10px;
|
||||
padding-left: 10px;
|
||||
font-size: medium;
|
||||
}
|
||||
|
||||
|
||||
.input-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
.input-label {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
|
@ -507,7 +507,7 @@
|
|||
font-weight: 600;
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
|
||||
.input-label-sec {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
|
@ -520,88 +520,88 @@
|
|||
font-weight: 600;
|
||||
font-size: x-small;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
textarea.persistent-input {
|
||||
padding-top: 42px;
|
||||
padding-left: 11px;
|
||||
font-size: medium;
|
||||
}
|
||||
|
||||
|
||||
textarea.persistent-input-sec {
|
||||
padding-top: 42px;
|
||||
padding-left: 11px;
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
|
||||
.persistent-input-sec {
|
||||
height: auto;
|
||||
min-height: 150px;
|
||||
}
|
||||
|
||||
|
||||
.json-schema-controls {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
/*gap: 1em; Fügt einen Abstand zwischen den Elementen hinzu */
|
||||
}
|
||||
|
||||
|
||||
.json-schema-controls > * {
|
||||
flex: 1; /* Teilt den verfügbaren Platz gleichmäßig auf */
|
||||
}
|
||||
|
||||
|
||||
pre code {
|
||||
display: block;
|
||||
background-color: #222;
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
|
||||
code {
|
||||
font-family: monospace;
|
||||
padding: 0.1em 0.3em;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
|
||||
fieldset label {
|
||||
margin: 0.5em 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
fieldset label.slim {
|
||||
margin: 0 0.5em;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
|
||||
header,
|
||||
footer {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
footer {
|
||||
font-size: 80%;
|
||||
color: #888;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
footer a {
|
||||
color: #333; /* Farbe des Links */
|
||||
text-decoration: none; /* Keine Unterstreichung */
|
||||
font-weight: bold; /* Fettgedruckt */
|
||||
}
|
||||
|
||||
|
||||
footer a:hover {
|
||||
color: #555; /* Farbe des Links beim Hovern */
|
||||
text-decoration: underline; /* Unterstreichung beim Hovern */
|
||||
}
|
||||
|
||||
|
||||
.mode-chat textarea[name=prompt] {
|
||||
height: 8.5em;
|
||||
}
|
||||
|
||||
|
||||
.mode-completion textarea[name=prompt] {
|
||||
height: 30em;
|
||||
}
|
||||
|
||||
|
||||
@keyframes loading-bg-wipe {
|
||||
0% {
|
||||
background-position: 0%;
|
||||
|
|
@ -610,13 +610,13 @@
|
|||
background-position: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.loading {
|
||||
background-size: 50% 100%;
|
||||
background-image: linear-gradient(90deg, var(--loading-color-1), var(--loading-color-2), var(--loading-color-1));
|
||||
animation: loading-bg-wipe 2s linear infinite;
|
||||
}
|
||||
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--primary-color: var(--dark-primary-color);
|
||||
|
|
@ -639,4 +639,4 @@
|
|||
.popover-content {
|
||||
background-color: black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -292,4 +292,4 @@ show_main_menu() {
|
|||
|
||||
|
||||
# Show main menu
|
||||
show_main_menu
|
||||
show_main_menu
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue