mirror of
https://github.com/ggerganov/llama.cpp.git
synced 2024-09-23 13:36:20 +00:00
2e666832e6
* ic * migrate my eary work * add the belonging stuff: css,favicon etc * de prompts * chore: Update HTML meta tags in index.html file * add api-key css classes * some necessary fixes * Add API key CSS classes and update styling in style.css * clean the code * move API to the top, rearrange param sliders. update css * add tooltips to the parameters with comprehensible explanations * fix FloatField and BoolField tooltips * fix grammar field width * use template literales for promptFormats.js * update const ModelGenerationInfo * remove ms per token, since not relevant for most webui users and use cases * add phi-3 prompt template * add phi3 to dropdown * add css class * update forgotten css theme * add user message suffix * fix chatml & add llama3 format * fix llama3 prompt template * more prompt format fixes * add more comon stop tokens * add missing char * do not separate with new line or comma * move prompt style * add hacky llama2 prompt solution, reduce redundancy in promptFormats.js * fix toggle state localstorage * add cmd-r prompt et reduce redundancy * set default prompt to empty * move files, clean code * fix css path * add a button to the new ui * move new ui to "/public" due to otherwise problematic CORS behaviour * include new ui in cpp * fix wrong link to old ui * renaming to ensure consistency * fix typos "prompt-format" -> "prompt-formats" * use correct indent * add new ui files to makefile * fix typo
403 lines
11 KiB
CSS
Executable File
403 lines
11 KiB
CSS
Executable File
@import url("theme-snowstorm.css");
|
|
@import url("theme-polarnight.css");
|
|
@import url("theme-ketivah.css");
|
|
@import url("theme-mangotango.css");
|
|
@import url("theme-playground.css");
|
|
@import url("theme-beeninorder.css");
|
|
|
|
:root {
|
|
/* ---------- PRIMARY COLORS ----------------- */
|
|
--primary-color-1: hsl(217.5, 26.7%, 94.1%);
|
|
--primary-color-1-hue: 217.5;
|
|
--primary-color-1-saturation: 26.7%;
|
|
--primary-color-1-lightness: 94.1%;
|
|
|
|
--primary-color-2: hsl(218.2, 26.8%, 92.0%);
|
|
--primary-color-2-hue: 218.2;
|
|
--primary-color-2-saturation: 26.8%;
|
|
--primary-color-2-lightness: 92.0%;
|
|
|
|
--primary-color-3: hsl(218.8, 27.9%, 88.0%);
|
|
--primary-color-3-hue: 218.8;
|
|
--primary-color-3-saturation: 27.9%;
|
|
--primary-color-3-lightness: 88.0%;
|
|
|
|
--primary-color-4: hsl(218.8, 18.3%, 81.8%);
|
|
--primary-color-4-hue: 218.8;
|
|
--primary-color-4-saturation: 18.3%;
|
|
--primary-color-4-lightness: 81.8%;
|
|
|
|
|
|
/* ---------- SECONDARY COLORS --------------- */
|
|
--secondary-color-1: hsl(220.0, 16.4%, 21.6%);
|
|
--secondary-color-1-hue: 220.0;
|
|
--secondary-color-1-saturation: 16.4%;
|
|
--secondary-color-1-lightness: 21.6%;
|
|
|
|
--secondary-color-2: hsl(221.7, 16.3%, 27.6%);
|
|
--secondary-color-2-hue: 221.7;
|
|
--secondary-color-2-saturation: 16.3%;
|
|
--secondary-color-2-lightness: 27.6%;
|
|
|
|
--secondary-color-3: hsl(220.0, 16.8%, 31.6%);
|
|
--secondary-color-3-hue: 220.0;
|
|
--secondary-color-3-saturation: 16.8%;
|
|
--secondary-color-3-lightness: 31.6%;
|
|
|
|
--secondary-color-4: hsl(220.0, 16.5%, 35.7%);
|
|
--secondary-color-4-hue: 220.0;
|
|
--secondary-color-4-saturation: 16.5%;
|
|
--secondary-color-4-lightness: 35.7%;
|
|
|
|
|
|
|
|
/* ----------- NUANCES COLORS ---------------- */
|
|
--theme-nuance-color-1: hsl(178.7, 25.1%, 64.9%);
|
|
--theme-nuance-color-1-hue: 178.7;
|
|
--theme-nuance-color-1-saturation: 25.1%;
|
|
--theme-nuance-color-1-lightness: 64.9%;
|
|
|
|
--theme-nuance-color-2: hsl(193.3, 43.4%, 67.5%);
|
|
--theme-nuance-color-2-hue: 193.3;
|
|
--theme-nuance-color-2-saturation: 43.4%;
|
|
--theme-nuance-color-2-lightness: 67.5%;
|
|
|
|
--theme-nuance-color-3: hsl(210.0, 34.0%, 63.1%);
|
|
--theme-nuance-color-3-hue: 210.0;
|
|
--theme-nuance-color-3-saturation: 34.0%;
|
|
--theme-nuance-color-3-lightness: 63.1%;
|
|
|
|
--theme-nuance-color-4: hsl(213.1, 32.0%, 52.2%);
|
|
--theme-nuance-color-4-hue: 213.1;
|
|
--theme-nuance-color-4-saturation: 32.0%;
|
|
--theme-nuance-color-4-lightness: 52.2%;
|
|
|
|
|
|
|
|
/* ----------- ROYGP COLORS ------------------ */
|
|
--theme-red-color: hsl(32.5, 80%, 50%);
|
|
--theme-orange-color: hsl(32.5, 70%, 45%);
|
|
--theme-yellow-color: hsl(40.0, 0.6%, 73.3%);
|
|
--theme-green-color: hsl(92.4, 27.8%, 64.7%);
|
|
--theme-purple-color: hsl(311.1, 20.2%, 63.1%);
|
|
|
|
|
|
|
|
/* ------------------------------------------- */
|
|
--background-color-1: var(--primary-color-1);
|
|
--background-color-2: var(--primary-color-2);
|
|
--background-color-3: var(--primary-color-3);
|
|
--background-color-4: var(--primary-color-4);
|
|
|
|
--border-color-1: var(--primary-color-2);
|
|
--border-color-2: var(--primary-color-3);
|
|
--border-color-3: var(--primary-color-4);
|
|
|
|
--border-focus-color: var(--theme-nuance-color-2);
|
|
--border-focus-shadow: var(--theme-nuance-color-1);
|
|
|
|
--text-color-plain: var(--secondary-color-1);
|
|
--text-color-subtile-1: var(--secondary-color-2);
|
|
--text-color-subtile-2: var(--secondary-color-3);
|
|
|
|
--code-background-color: var(--secondary-color-2);
|
|
--code-text-color: var(--primary-color-2);
|
|
|
|
--ui-range-thumb-color: var(--theme-nuance-color-3);
|
|
--ui-range-thumb-border: var(--ui-ranger-thumb-color);
|
|
|
|
--textarea-border-color: var(--secondary-color-4);
|
|
|
|
--chat-id-color: var(--theme-nuance-color-4);
|
|
|
|
|
|
|
|
/* ------------------------------------------- */
|
|
--button-alert-text-hover: var(--primary-color-1);
|
|
--button-alert-color-hover: var(--theme-orange-color);
|
|
--button-alert-border-hover: var(--theme-orange-color);
|
|
|
|
--button-alert-text-active: var(--primary-color-1);
|
|
--button-alert-color-active: var(--theme-red-color);
|
|
--button-alert-border-active: var(--theme-red-color);
|
|
|
|
|
|
|
|
/* ----------- PRIMARY BUTTONS --------------- */
|
|
/* - button should immediately catch the eye - */
|
|
--button-primary-text: var(--secondary-color-1);
|
|
--button-primary-color: var(--theme-nuance-color-3);
|
|
--button-primary-border: var(--theme-nuance-color-3);
|
|
|
|
|
|
/* ---------hover---------- */
|
|
--button-primary-text-hover:
|
|
hsl(217.5,
|
|
calc(var(--secondary-color-1-saturation) + 35%),
|
|
calc(var(--secondary-color-1-lightness) - 30%));
|
|
|
|
--button-primary-color-hover:
|
|
hsl(210,
|
|
calc(var(--theme-nuance-color-3-saturation) - 2%),
|
|
calc(var(--theme-nuance-color-3-lightness) - 10%));
|
|
|
|
--button-primary-border-hover:
|
|
hsl(210,
|
|
calc(var(--theme-nuance-color-3-saturation) - 2%),
|
|
calc(var(--theme-nuance-color-3-lightness) - 10%));
|
|
|
|
|
|
/* ---------active--------- */
|
|
--button-primary-text-active:
|
|
hsl(210,
|
|
calc(var(--theme-nuance-color-3-saturation) - 20%),
|
|
calc(var(--theme-nuance-color-3-lightness) + 35%));
|
|
|
|
--button-primary-color-active:
|
|
hsl(210,
|
|
calc(var(--theme-nuance-color-3-saturation) - 10%),
|
|
calc(var(--theme-nuance-color-3-lightness) - 25%));
|
|
|
|
--button-primary-border-active:
|
|
hsl(210,
|
|
calc(var(--theme-nuance-color-3-saturation) - 10%),
|
|
calc(var(--theme-nuance-color-3-lightness) - 25%));
|
|
|
|
|
|
|
|
/* ---------- SECONDARY BUTTONS -------------- */
|
|
/* these should NOT immediately catch the eye */
|
|
--button-secondary-text:
|
|
hsl(210,
|
|
calc(var(--theme-nuance-color-3-saturation) - 20%),
|
|
calc(var(--theme-nuance-color-3-lightness) - 50%));
|
|
|
|
--button-secondary-color:
|
|
hsl(210,
|
|
calc(var(--theme-nuance-color-3-saturation) - 20%),
|
|
calc(var(--theme-nuance-color-3-lightness) + 10%));
|
|
|
|
--button-secondary-border:
|
|
hsl(210,
|
|
calc(var(--theme-nuance-color-3-saturation) - 20%),
|
|
calc(var(--theme-nuance-color-3-lightness) + 10%));
|
|
|
|
|
|
/* ---------hover---------- */
|
|
--button-secondary-text-hover:
|
|
hsl(210,
|
|
calc(var(--theme-nuance-color-3-saturation) - 20%),
|
|
calc(var(--theme-nuance-color-3-lightness) - 80%));
|
|
|
|
--button-secondary-color-hover:
|
|
hsl(210,
|
|
calc(var(--theme-nuance-color-3-saturation) - 22%),
|
|
calc(var(--theme-nuance-color-3-lightness) + 1%));
|
|
|
|
--button-secondary-border-hover:
|
|
hsl(210,
|
|
calc(var(--theme-nuance-color-3-saturation) - 22%),
|
|
calc(var(--theme-nuance-color-3-lightness) + 1%));
|
|
|
|
|
|
/* ---------active--------- */
|
|
--button-secondary-text-active:
|
|
hsl(210,
|
|
calc(var(--theme-nuance-color-3-saturation) + 40%),
|
|
calc(var(--theme-nuance-color-3-lightness) - 55%));
|
|
|
|
--button-secondary-color-active:
|
|
hsl(210,
|
|
calc(var(--theme-nuance-color-3-saturation) - 30%),
|
|
calc(var(--theme-nuance-color-3-lightness) - 5%));
|
|
|
|
--button-secondary-border-active:
|
|
hsl(210,
|
|
calc(var(--theme-nuance-color-3-saturation) - 30%),
|
|
calc(var(--theme-nuance-color-3-lightness) - 5%));
|
|
|
|
|
|
|
|
/* ---------- TERTIARY BUTTONS --------------- */
|
|
/* ---------- disabled buttons --------------- */
|
|
--button-tertiary-text:
|
|
hsl(210,
|
|
calc(var(--theme-nuance-color-3-saturation) - 40%),
|
|
calc(var(--theme-nuance-color-3-lightness) - 5%));
|
|
|
|
--button-tertiary-color:
|
|
hsl(210,
|
|
calc(var(--theme-nuance-color-3-saturation) - 40%),
|
|
calc(var(--theme-nuance-color-3-lightness) + 20%));
|
|
|
|
--button-tertiary-border:
|
|
hsl(210,
|
|
calc(var(--theme-nuance-color-3-saturation) - 40%),
|
|
calc(var(--theme-nuance-color-3-lightness) + 20%));
|
|
|
|
/* ---------hover---------- */
|
|
--button-tertiary-text-hover:
|
|
hsl(210,
|
|
calc(var(--theme-nuance-color-3-saturation) - 40%),
|
|
calc(var(--theme-nuance-color-3-lightness) - 5%));
|
|
|
|
--button-tertiary-color-hover:
|
|
hsl(210,
|
|
calc(var(--theme-nuance-color-3-saturation) - 40%),
|
|
calc(var(--theme-nuance-color-3-lightness) + 20%));
|
|
|
|
--button-tertiary-border-hover:
|
|
hsl(210,
|
|
calc(var(--theme-nuance-color-3-saturation) - 40%),
|
|
calc(var(--theme-nuance-color-3-lightness) + 20%));
|
|
}
|
|
|
|
/*
|
|
|
|
.theme-template {
|
|
|
|
|
|
If light theme: should go from bright to darker
|
|
If dark theme: should go from dark to brighter
|
|
ideally this should not be anything but steps of
|
|
gray or slightly variants from it
|
|
|
|
--primary-color-1: #2E3440;
|
|
--primary-color-2: #3B4252;
|
|
--primary-color-3: #434C5E;
|
|
--primary-color-4: #4C566A;
|
|
|
|
|
|
|
|
If light theme: should go from dark to brighter
|
|
If dark theme: should go from bright to darker
|
|
ideally this should not be anything but steps of
|
|
gray or slightly variants from it
|
|
|
|
--secondary-color-1: #ECEFF4;
|
|
--secondary-color-2: #E5E9F0;
|
|
--secondary-color-3: #D8DEE9;
|
|
--secondary-color-4: #C8CED9;
|
|
|
|
|
|
|
|
Choose wisely nuance colors. It is not easy to find
|
|
4 harmonizing nuance colors. But keep in mind, that
|
|
only one accent color could work too.
|
|
|
|
--theme-nuance-color-1: #8FBCBB;
|
|
--theme-nuance-color-2: #88C0D0;
|
|
--theme-nuance-color-3: #81A1C1;
|
|
--theme-nuance-color-4: #5E81AC;
|
|
|
|
|
|
|
|
adapt the color red, orange, yellow, green,
|
|
purple to the 'mood' of your overall design
|
|
e.g is it low-contrast? vibrant? dynamic? etc
|
|
|
|
--theme-red-color: #BF616A;
|
|
--theme-orange-color: #D08770;
|
|
--theme-yellow-color: #EBCB8B;
|
|
--theme-green-color: #A3BE8C;
|
|
--theme-purple-color: #B48EAD;
|
|
|
|
|
|
|
|
NOTE: comment all those line `--- ...` out
|
|
------------------------------------------------
|
|
--background-color-1:
|
|
--background-color-2:
|
|
--background-color-3:
|
|
--background-color-4:
|
|
|
|
--border-color-1:
|
|
--border-color-2:
|
|
--border-color-3:
|
|
|
|
--border-focus-color:
|
|
--border-focus-shadow:
|
|
|
|
--text-color-plain:
|
|
--text-color-subtile-1:
|
|
--text-color-subtile-2:
|
|
|
|
--code-background-color:
|
|
--code-text-color:
|
|
|
|
--ui-range-thumb-color:
|
|
--ui-range-thumb-border:
|
|
|
|
--textarea-border-color:
|
|
|
|
|
|
|
|
-------------------------------------------
|
|
--button-alert-text-hover:
|
|
--button-alert-color-hover:
|
|
--button-alert-border-hover:
|
|
|
|
--button-alert-text-active:
|
|
--button-alert-color-active:
|
|
--button-alert-border-active:
|
|
|
|
|
|
|
|
----------- PRIMARY -----------------------
|
|
--button should immediately catch the eye--
|
|
|
|
--button-primary-text:
|
|
--button-primary-color:
|
|
--button-primary-border:
|
|
|
|
|
|
---------hover----------
|
|
--button-primary-text-hover:
|
|
--button-primary-color-hover:
|
|
--button-primary-border-hover:
|
|
|
|
|
|
---------active---------
|
|
--button-primary-text-active:
|
|
--button-primary-color-active:
|
|
--button-primary-border-active:
|
|
|
|
|
|
|
|
------------ SECONDARY ------------------------
|
|
--button should NOT immediately catch the eye--
|
|
|
|
--button-secondary-text:
|
|
--button-secondary-color:
|
|
--button-secondary-border:
|
|
|
|
|
|
---------hover----------
|
|
--button-secondary-text-hover:
|
|
--button-secondary-color-hover:
|
|
--button-secondary-border-hover:
|
|
|
|
|
|
---------active---------
|
|
--button-secondary-text-active:
|
|
--button-secondary-color-active:
|
|
--button-secondary-border-active:
|
|
|
|
|
|
|
|
---------- TERTIARY -----------------------
|
|
---------- disabled buttons ---------------
|
|
--button-tertiary-text:
|
|
--button-tertiary-color:
|
|
--button-tertiary-border:
|
|
|
|
|
|
---------hover----------
|
|
--button-tertiary-text:
|
|
--button-tertiary-color:
|
|
--button-tertiary-border:
|
|
|
|
}
|
|
|
|
*/
|