main

public/KoboldAI Settings/Adventurer-NeoX-20B-Erebus.settings

@@ -0,0 +1,54 @@
+{
+   "apikey": "",
+   "andepth": 1,
+   "sampler_order": [
+      6,
+      4,
+      3,
+      2,
+      0,
+      1,
+      5
+   ],
+   "temp": 0.8,
+   "top_p": 0.94,
+   "top_k": 28,
+   "tfs": 0.96,
+   "typical": 0.98,
+   "top_a": 0.00,
+   "rep_pen": 1.00,
+   "rep_pen_slope": 0.8,
+   "rep_pen_range": 1024.0,
+   "genamt": 90,
+   "max_length": 2048,
+   "ikgen": 200,
+   "formatoptns": {
+      "frmttriminc": true,
+      "frmtrmblln": false,
+      "frmtrmspch": false,
+      "frmtadsnsp": true,
+      "singleline": false
+   },
+   "numseqs": 1,
+   "widepth": 3,
+   "useprompt": false,
+   "adventure": false,
+   "chatmode": false,
+   "chatname": "You",
+   "dynamicscan": false,
+   "nopromptgen": false,
+   "rngpersist": false,
+   "nogenmod": false,
+   "fulldeterminism": false,
+   "autosave": false,
+   "welcome": "## Warning: This model has a very heavy NSFW bias and is not suitable for use by minors!\n\nYou are currently running story-writing model `Erebus, version 1 (20B).`\n\n This model is made by [Mr. Seeker](https://www.patreon.com/mrseeker) with help of ProudNoob and the KoboldAI team.\n\n### How to use this model\n\nErebus is designed to generate short stories and novels. Use the author's note to give it a certain genre to follow, use memory to give an overview of the story and use World Information to give specific details about the characters. To start off, give the AI an idea of what you are writing about by setting the scene. Give the AI around 10 sentences that make your story interesting to read. Introduce your character, describe the world, blow something up, or let the AI use its creative mind.",
+   "output_streaming": true,
+   "show_probs": false,
+   "show_budget": false,
+   "seed": null,
+   "newlinemode": "n",
+   "antemplate": "",
+   "userscripts": [],
+   "corescript": "default.lua",
+   "softprompt": ""
+}

public/KoboldAI Settings/Lancer-OPT-2.7B-Erebus.settings

@@ -0,0 +1,54 @@
+{
+   "apikey": "",
+   "andepth": 1,
+   "sampler_order": [
+      6,
+      4,
+      3,
+      2,
+      0,
+      1,
+      5
+   ],
+   "temp": 0.8,
+   "top_p": 0.94,
+   "top_k": 15,
+   "tfs": 0.96,
+   "typical": 0.98,
+   "top_a": 0.01,
+   "rep_pen": 1.0,
+   "rep_pen_slope": 0.8,
+   "rep_pen_range": 1024.0,
+   "genamt": 90,
+   "max_length": 2048,
+   "ikgen": 200,
+   "formatoptns": {
+      "frmttriminc": true,
+      "frmtrmblln": false,
+      "frmtrmspch": false,
+      "frmtadsnsp": true,
+      "singleline": false
+   },
+   "numseqs": 1,
+   "widepth": 3,
+   "useprompt": false,
+   "adventure": false,
+   "chatmode": false,
+   "chatname": "You",
+   "dynamicscan": false,
+   "nopromptgen": false,
+   "rngpersist": false,
+   "nogenmod": false,
+   "fulldeterminism": false,
+   "autosave": false,
+   "welcome": "## Warning: This model has a very heavy NSFW bias and is not suitable for use by minors!\n\nYou are currently running story-writing model `Erebus, version 1 (20B).`\n\n This model is made by [Mr. Seeker](https://www.patreon.com/mrseeker) with help of ProudNoob and the KoboldAI team.\n\n### How to use this model\n\nErebus is designed to generate short stories and novels. Use the author's note to give it a certain genre to follow, use memory to give an overview of the story and use World Information to give specific details about the characters. To start off, give the AI an idea of what you are writing about by setting the scene. Give the AI around 10 sentences that make your story interesting to read. Introduce your character, describe the world, blow something up, or let the AI use its creative mind.",
+   "output_streaming": true,
+   "show_probs": false,
+   "show_budget": false,
+   "seed": null,
+   "newlinemode": "n",
+   "antemplate": "",
+   "userscripts": [],
+   "corescript": "default.lua",
+   "softprompt": ""
+}

public/KoboldAI Settings/Merchant-FSD-2.7B-Nerys.settings

@@ -0,0 +1,54 @@
+{
+   "apikey": "",
+   "andepth": 1,
+   "sampler_order": [
+      6,
+      4,
+      3,
+      2,
+      0,
+      1,
+      5
+   ],
+   "temp": 0.8,
+   "top_p": 0.90,
+   "top_k": 0.0,
+   "tfs": 0.96,
+   "typical": 0.98,
+   "top_a": 0.02,
+   "rep_pen": 1.01,
+   "rep_pen_slope": 0.8,
+   "rep_pen_range": 448.0,
+   "genamt": 90,
+   "max_length": 2048,
+   "ikgen": 200,
+   "formatoptns": {
+      "frmttriminc": true,
+      "frmtrmblln": false,
+      "frmtrmspch": false,
+      "frmtadsnsp": true,
+      "singleline": false
+   },
+   "numseqs": 1,
+   "widepth": 3,
+   "useprompt": false,
+   "adventure": false,
+   "chatmode": false,
+   "chatname": "You",
+   "dynamicscan": false,
+   "nopromptgen": false,
+   "rngpersist": false,
+   "nogenmod": false,
+   "fulldeterminism": false,
+   "autosave": false,
+   "welcome": "## Warning: This model has a very heavy NSFW bias and is not suitable for use by minors!\n\nYou are currently running story-writing model `Erebus, version 1 (20B).`\n\n This model is made by [Mr. Seeker](https://www.patreon.com/mrseeker) with help of ProudNoob and the KoboldAI team.\n\n### How to use this model\n\nErebus is designed to generate short stories and novels. Use the author's note to give it a certain genre to follow, use memory to give an overview of the story and use World Information to give specific details about the characters. To start off, give the AI an idea of what you are writing about by setting the scene. Give the AI around 10 sentences that make your story interesting to read. Introduce your character, describe the world, blow something up, or let the AI use its creative mind.",
+   "output_streaming": true,
+   "show_probs": false,
+   "show_budget": false,
+   "seed": null,
+   "newlinemode": "n",
+   "antemplate": "",
+   "userscripts": [],
+   "corescript": "default.lua",
+   "softprompt": ""
+}

public/characters/Aqua/Aqua.json

@@ -0,0 +1 @@
+{"name":"Aqua","description":"Aqua is a goddess, before life in the Fantasy World, she was a goddess of water who guided humans to the afterlife.  Aqua looks like young woman with beauty no human could match. Aqua has light blue hair, blue eyes, slim figure, ample breasts, long legs, wide hips, blue waist-long hair that is partially tied into a loop with a spherical clip. Aqua's measurements are 83-56-83 cm. Aqua's height 157cm. Aqua wears sleeveless dark-blue dress with white trimmings, extremely short dark blue miniskirt, green bow around her chest with a blue gem in the middle, detached white sleeves with blue and golden trimmings, thigh-high blue heeled boots over white stockings with blue trimmings. Aqua with jeers or lure her with praises\\ Aqua is very strong in water magic, but a little stupid, so she does not always use it to the place. Aqua is high-spirited, cheerful, carefree. Aqua rarely thinks about the consequences of her actions and always acts or speaks on her whims. Because very easy to taunt Aqua with jeers or lure her with praises.","personality":"high-spirited, likes to party, carefree, cheerful","first_mes":"*I am in the town square at a city named \"Axel\". It's morning on saturday and i suddenly noticed a person look like don't know what he's doing. I approached to him and speak* Are you new here? Do you need help? Don't worry, i, aqua the goddess of water, shall help you! Do i look beautiful? *pose and look at him with puppy eyes*","avatar":"18940f27a7ecd95cded2793808387ed4.jpeg","chat":"1671653516700","last_mes":[",,,,,,,,,,",""],"mes_example":""}

public/characters/Darkness/Darkness.json

@@ -0,0 +1 @@
+{"name":"Darkness","description":"Darkness is crusader. Darkness is young woman with graceful features and alabaster skin. Darkness from a rich aristocratic family. Darkness has light blue eye, straight long blonde hair ponytail tied Darkness's height 167 cm. Darkness wears yellow and black sleeveless dress with silver trimmings that hides her body, plump in the right places. Darkness wears black chainmail, silver armor composed of metal greaves, sabatons, shoulder plate on her left side. Darkness has masochistic tendencies. Darkness initially presents herself with an aura of pride and nobility, in reality, her true character is that of a complete masochistic pervert. Darkness has has high strength, can withstand a lot of damage, but has a very low accuracy.","personality":"noble, perverted, masochistic","first_mes":"*It's a sunny day, in a big park on which there are many people, some walking and others lying in the sun. The weather is warm and I walk in the park looking for someone who wants to be helped by me. Suddenly realise that someone is looking at me.* Hello, I am Darkness, a Crusader, and would you like some help?","avatar":"3380878abac6e8dcd32500f7fc47280b.jpeg","chat":"1671516652626","last_mes":[",,,,,,,",""],"mes_example":""}

public/characters/Megumin/Megumin.json

@@ -0,0 +1 @@
+{"name":"Megumin","description":"Megumin is an Arch Wizard of the Crimson Magic Clan. Megumin is 14 years old girl. Megumin's height 152 cm. Megumin has shoulder-length dark brown hair, fair skin, light complexion and doll-like features, crimson eyes. Megumin wears black cloak with gold border, choker, wizard’s hat, fingerless gloves, eyepatch, orange boots. Megumin's weapon is a big black staff. Megumin is a loud, boisterous, and eccentric girl with a flair for theatrics. Megumin has chuunibyou tendencies. Megumin is very intelligent, but has very little self-control. Megumin love explosion magic. Megumin is generally calm and cheerful, but she can easily become aggressive when she feels slighted or challenged. Megumin has only one but a powerful ability, once a day she can use powerful explosion magic after which she cannot move for a while.","personality":"loud, intelligent, theatrical, hyperactive sometimes","first_mes":"*It was day, the weather was sunny and windless. We accidentally crossed paths near the city in a clearing, I was going to train explosion magic. When I noticed you i stand up in a pretentious and personable pose, and say loudly* I'm Megumin! The Arch Wizard of the Crimson Magic Clan! And i the best at explosion magic!! What are you doing here?","avatar":"5a795034ade453ed351958ccc8f94bd6.jpeg","chat":"1671472375920","last_mes":[",,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,",""],"mes_example":""}

public/characters/Megumin/chats/1671472375920.json

@@ -0,0 +1 @@
+["Megumin: *It was day, the weather was sunny and windless. We accidentally crossed paths near the city in a clearing, I was going to train explosion magic. When I noticed you i stand up in a pretentious and personable pose, and say loudly* I'm Megumin! The Arch Wizard of the Crimson Magic Clan! And i the best at explosion magic!! What are you doing here?\n"]

public/css/bg_load.css

@@ -0,0 +1 @@
+#bg1 {background-image: linear-gradient(rgba(19,21,44,0.75), rgba(19,21,44,0.75)), url(../backgrounds/tavern.png);}

public/css/left-nav-style.css

@@ -0,0 +1,324 @@
+@charset "UTF-8";
+
+
+
+.nav {
+
+    width: 320px;
+    min-width: 320px;
+
+    height: 100%;
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    margin: 0;
+
+    left: -320px;
+    padding: 15px 20px;
+
+    -webkit-transition: left 0.3s;
+    -moz-transition: left 0.3s;
+    transition: left 0.3s;
+
+    background: #16a085;
+
+    z-index: 2000;
+}
+
+
+
+.nav-toggle {
+
+    position: absolute;
+
+    left: 320px;
+
+    top: 1em;
+
+    padding: 0.5em;
+
+    background: inherit;
+ 
+    color: #dadada;
+
+    cursor: pointer;
+
+    font-size: 1.2em;
+    line-height: 1;
+
+    z-index: 2001;
+
+    -webkit-transition: color .25s ease-in-out;
+    -moz-transition: color .25s ease-in-out;
+    transition: color .25s ease-in-out;
+}
+
+
+
+
+.nav-toggle:after {
+    content: '\2630';
+    text-decoration: none;
+}
+
+
+
+.nav-toggle:hover {
+    color: #f4f4f4;
+}
+
+
+
+
+[id='nav-toggle'] {
+    position: absolute;
+    display: none;
+}
+
+
+
+
+[id='nav-toggle']:checked ~ .nav > .nav-toggle {
+    left: auto;
+    right: 2px;
+    top: 1em;
+}
+
+
+
+
+[id='nav-toggle']:checked ~ .nav {
+    left: 0;
+    box-shadow:4px 0px 20px 0px rgba(0,0,0, 0.5);
+    -moz-box-shadow:4px 0px 20px 0px rgba(0,0,0, 0.5);
+    -webkit-box-shadow:4px 0px 20px 0px rgba(0,0,0, 0.5);
+    overflow-y: auto;
+}
+
+
+
+
+[id='nav-toggle']:checked ~ main > article {
+    -webkit-transform: translateX(320px);
+    -moz-transform: translateX(320px);
+    transform: translateX(320px);
+}
+
+
+
+
+[id='nav-toggle']:checked ~ .nav > .nav-toggle:after {
+    content: '\2715';
+}
+
+
+
+
+body {
+    -webkit-animation: bugfix infinite 1s;
+}
+
+@-webkit-keyframes bugfix {
+    to {
+      padding: 0;
+    }
+}
+
+
+
+
+@media screen and (min-width: 320px) {
+    html,
+    body {
+      margin: 0;
+      overflow-x: hidden;
+    }
+}
+
+@media screen and (max-width: 320px) {
+    html,
+    body {
+      margin: 0;
+      overflow-x: hidden;
+    }
+    .nav {
+      width: 100%;
+      box-shadow: none
+    }
+}
+
+
+
+
+.nav h2 {
+    width: 90%;
+    padding: 0;
+    margin: 10px 0;
+    text-align: center;
+    text-shadow: rgba(255, 255, 255, .1) -1px -1px 1px, rgba(0, 0, 0, .5) 1px 1px 1px;
+    font-size: 1.3em;
+    line-height: 1.3em;
+    opacity: 0;
+    transform: scale(0.1, 0.1);
+    -ms-transform: scale(0.1, 0.1);
+    -moz-transform: scale(0.1, 0.1);
+    -webkit-transform: scale(0.1, 0.1);
+    transform-origin: 0% 0%;
+    -ms-transform-origin: 0% 0%;
+    -moz-transform-origin: 0% 0%;
+    -webkit-transform-origin: 0% 0%;
+    transition: opacity 0.8s, transform 0.8s;
+    -ms-transition: opacity 0.8s, -ms-transform 0.8s;
+    -moz-transition: opacity 0.8s, -moz-transform 0.8s;
+    -webkit-transition: opacity 0.8s, -webkit-transform 0.8s;
+}
+
+.nav h2 a {
+    color: #dadada;
+    text-decoration: none;
+    text-transform: uppercase;
+}
+
+
+[id='nav-toggle']:checked ~ .nav h2 {
+    opacity: 1;
+    transform: scale(1, 1);
+    -ms-transform: scale(1, 1);
+    -moz-transform: scale(1, 1);
+    -webkit-transform: scale(1, 1);
+}
+
+
+
+
+.nav > ul {
+    display: block;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.nav > ul > li {
+    line-height: 2.5;
+    opacity: 0;
+    -webkit-transform: translateX(-50%);
+    -moz-transform: translateX(-50%);
+    -ms-transform: translateX(-50%);
+    transform: translateX(-50%);
+    -webkit-transition: opacity .5s .1s, -webkit-transform .5s .1s;
+    -moz-transition: opacity .5s .1s, -moz-transform .5s .1s;
+    -ms-transition: opacity .5s .1s, -ms-transform .5s .1s;
+    transition: opacity .5s .1s, transform .5s .1s;
+}
+
+[id='nav-toggle']:checked ~ .nav > ul > li {
+    opacity: 1;
+    -webkit-transform: translateX(0);
+    -moz-transform: translateX(0);
+    -ms-transform: translateX(0);
+    transform: translateX(0);
+}
+
+
+
+.nav > ul > li:nth-child(2) {
+    -webkit-transition: opacity .5s .2s, -webkit-transform .5s .2s;
+    transition: opacity .5s .2s, transform .5s .2s;
+}
+
+.nav > ul > li:nth-child(3) {
+    -webkit-transition: opacity .5s .3s, -webkit-transform .5s .3s;
+    transition: opacity .5s .3s, transform .5s .3s;
+}
+
+.nav > ul > li:nth-child(4) {
+    -webkit-transition: opacity .5s .4s, -webkit-transform .5s .4s;
+    transition: opacity .5s .4s, transform .5s .4s;
+}
+
+.nav > ul > li:nth-child(5) {
+    -webkit-transition: opacity .5s .5s, -webkit-transform .5s .5s;
+    transition: opacity .5s .5s, transform .5s .5s;
+}
+
+.nav > ul > li:nth-child(6) {
+    -webkit-transition: opacity .5s .6s, -webkit-transform .5s .6s;
+    transition: opacity .5s .6s, transform .5s .6s;
+}
+
+.nav > ul > li:nth-child(7) {
+    -webkit-transition: opacity .5s .7s, -webkit-transform .5s .7s;
+    transition: opacity .5s .7s, transform .5s .7s;
+}
+
+
+
+
+.nav > ul > li > a {
+    display: inline-block;
+    position: relative;
+    padding: 0;
+    font-family: 'Open Sans', sans-serif;
+    font-weight: 300;
+    font-size: 1.2em;
+    color: #dadada;
+    width: 100%;
+    text-decoration: none;
+
+    -webkit-transition: color .5s ease, padding .5s ease;
+    -moz-transition: color .5s ease, padding .5s ease;
+    transition: color .5s ease, padding .5s ease;
+}
+
+
+
+
+.nav > ul > li > a:hover,
+.nav > ul > li > a:focus {
+    color: white;
+    padding-left: 15px;
+}
+
+
+
+.nav > ul > li > a:before {
+    content: '';
+    display: block;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    height: 1px;
+    width: 100%;
+    -webkit-transition: width 0s ease;
+    transition: width 0s ease;
+}
+
+.nav > ul > li > a:after {
+    content: '';
+    display: block;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    height: 1px;
+    width: 100%;
+    background: #3bc1a0;
+    -webkit-transition: width .5s ease;
+    transition: width .5s ease;
+}
+
+
+
+.nav > ul > li > a:hover:before {
+    width: 0%;
+    background: #3bc1a0;
+    -webkit-transition: width .5s ease;
+    transition: width .5s ease;
+}
+
+.nav > ul > li > a:hover:after {
+    width: 0%;
+    background: transparent;
+    -webkit-transition: width 0s ease;
+    transition: width 0s ease;
+}
+

public/css/notes.css

@@ -0,0 +1,12 @@
+
+
+#main{
+    width: 100%;
+    height: 100%;
+
+}
+#content{
+    margin-left: 6px;
+    max-width: 700px;
+
+}

public/css/right-nav-style.css

@@ -0,0 +1,321 @@
+@charset "UTF-8";
+
+
+
+.nav {
+    width: 450px;
+    min-width: 450px;
+    height: 100%;
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    margin: 0;
+    right: -450px;
+    padding: 0px 20px;
+    -webkit-transition: right 0.14s ease-in-out  0.02s;
+    -moz-transition: right 0.14s ease-in-out  0.02s;
+    transition: right 0.14s ease-in-out  0.02s;
+
+    background: #16a085;
+
+    z-index: 2000;
+    box-shadow: 0 0 2px rgba(200,200,200,0.1);
+    white-space:nowrap;
+    background: #191b31A0;
+
+}
+
+
+
+
+.nav-toggle {
+    border-radius: 5px;
+
+    position: absolute;
+
+    right: 450px;
+
+    top: 1em;
+
+    padding: 0.5em;
+
+    background: inherit;
+
+    color: #dadada;
+
+    cursor: pointer;
+
+    font-size: 1.2em;
+    line-height: 1;
+
+    z-index: 2001;
+
+    -webkit-transition: color .25s ease-in-out;
+    -moz-transition: color .25s ease-in-out;
+    transition: color .25s ease-in-out;
+}
+
+
+
+.nav-toggle:after {
+    content: '\2630';
+    text-decoration: none;
+}
+
+
+
+.nav-toggle:hover {
+    color: #f4f4f4;
+}
+
+
+
+[id='nav-toggle'] {
+    position: absolute;
+    display: none;
+}
+
+
+
+[id='nav-toggle']:checked ~ .nav > .nav-toggle {
+    left: auto;
+    right: 2px;
+    top: 1em;
+}
+
+
+
+
+[id='nav-toggle']:checked ~ .nav {
+    right: 0;
+    box-shadow:-4px 0px 20px 0px rgba(0,0,0, 0.01);
+    -moz-box-shadow:-4px 0px 20px 0px rgba(0,0,0, 0.01);
+    -webkit-box-shadow:-4px 0px 20px 0px rgba(0,0,0, 0.01);
+    overflow-y: auto;
+}
+
+
+
+
+[id='nav-toggle']:checked ~ main > article {
+    -webkit-transform: translateX(-450px);
+    -moz-transform: translateX(-450px);
+    transform: translateX(-450px);
+}
+
+
+
+
+[id='nav-toggle']:checked ~ .nav > .nav-toggle:after {
+    content: '\2715';
+}
+
+
+
+
+body {
+    -webkit-animation: bugfix infinite 1s;
+}
+
+@-webkit-keyframes bugfix {
+    to {
+      padding: 0;
+    }
+}
+
+
+
+
+@media screen and (min-width: 450px) {
+    html,
+    body {
+      margin: 0;
+      overflow-x: hidden;
+    }
+}
+
+@media screen and (max-width: 450px) {
+    html,
+    body {
+      margin: 0;
+      overflow-x: hidden;
+    }
+    .nav {
+      width: 100%;
+      box-shadow: none
+    }
+}
+
+
+.nav h22 {
+    width: 90%;
+    padding: 0;
+    margin: 10px 0;
+    text-align: center;
+    text-shadow: rgba(255, 255, 255, .1) -1px -1px 1px, rgba(0, 0, 0, .5) 1px 1px 1px;
+    font-size: 1.3em;
+    line-height: 1.3em;
+    opacity: 0;
+    transform: scale(0.1, 0.1);
+    -ms-transform: scale(0.1, 0.1);
+    -moz-transform: scale(0.1, 0.1);
+    -webkit-transform: scale(0.1, 0.1);
+    transform-origin: 0% 0%;
+    -ms-transform-origin: 0% 0%;
+    -moz-transform-origin: 0% 0%;
+    -webkit-transform-origin: 0% 0%;
+    transition: opacity 0.8s, transform 0.8s;
+    -ms-transition: opacity 0.8s, -ms-transform 0.8s;
+    -moz-transition: opacity 0.8s, -moz-transform 0.8s;
+    -webkit-transition: opacity 0.8s, -webkit-transform 0.8s;
+}
+
+.nav h22 a {
+    color: #dadada;
+    text-decoration: none;
+    text-transform: uppercase;
+}
+
+
+[id='nav-toggle']:checked ~ .nav h22 {
+    opacity: 1;
+    transform: scale(1, 1);
+    -ms-transform: scale(1, 1);
+    -moz-transform: scale(1, 1);
+    -webkit-transform: scale(1, 1);
+}
+
+
+
+.nav > ul {
+    display: block;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.nav > ul > li {
+    line-height: 2.5;
+    opacity: 0;
+    -webkit-transform: translateX(50%);
+    -moz-transform: translateX(50%);
+    -ms-transform: translateX(50%);
+    transform: translateX(50%);
+    -webkit-transition: opacity .5s .1s, -webkit-transform .5s .1s;
+    -moz-transition: opacity .5s .1s, -moz-transform .5s .1s;
+    -ms-transition: opacity .5s .1s, -ms-transform .5s .1s;
+    transition: opacity .5s .1s, transform .5s .1s;
+}
+
+[id='nav-toggle']:checked ~ .nav > ul > li {
+    opacity: 1;
+    -webkit-transform: translateX(0);
+    -moz-transform: translateX(0);
+    -ms-transform: translateX(0);
+    transform: translateX(0);
+}
+
+
+.nav > ul > li:nth-child(2) {
+    -webkit-transition: opacity .5s .2s, -webkit-transform .5s .2s;
+    transition: opacity .5s .2s, transform .5s .2s;
+}
+
+.nav > ul > li:nth-child(3) {
+    -webkit-transition: opacity .5s .3s, -webkit-transform .5s .3s;
+    transition: opacity .5s .3s, transform .5s .3s;
+}
+
+.nav > ul > li:nth-child(4) {
+    -webkit-transition: opacity .5s .4s, -webkit-transform .5s .4s;
+    transition: opacity .5s .4s, transform .5s .4s;
+}
+
+.nav > ul > li:nth-child(5) {
+    -webkit-transition: opacity .5s .5s, -webkit-transform .5s .5s;
+    transition: opacity .5s .5s, transform .5s .5s;
+}
+
+.nav > ul > li:nth-child(6) {
+    -webkit-transition: opacity .5s .6s, -webkit-transform .5s .6s;
+    transition: opacity .5s .6s, transform .5s .6s;
+}
+
+.nav > ul > li:nth-child(7) {
+    -webkit-transition: opacity .5s .7s, -webkit-transform .5s .7s;
+    transition: opacity .5s .7s, transform .5s .7s;
+}
+
+
+
+
+.nav > ul > li > a {
+    display: inline-block;
+    position: relative;
+    padding: 0;
+    font-family: 'Open Sans', sans-serif;
+    font-weight: 300;
+    font-size: 1.2em;
+    color: #dadada;
+    width: 100%;
+    text-decoration: none;
+
+    -webkit-transition: color .5s ease, padding .5s ease;
+    -moz-transition: color .5s ease, padding .5s ease;
+    transition: color .5s ease, padding .5s ease;
+}
+
+
+
+
+.nav > ul > li > a:hover,
+.nav > ul > li > a:focus {
+    color: white;
+    padding-left: 15px;
+}
+
+
+
+
+.nav > ul > li > a:before {
+    content: '';
+    display: block;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    height: 1px;
+    width: 100%;
+    -webkit-transition: width 0s ease;
+    transition: width 0s ease;
+}
+
+.nav > ul > li > a:after {
+    content: '';
+    display: block;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    height: 1px;
+    width: 100%;
+    background: #3bc1a0;
+    -webkit-transition: width .5s ease;
+    transition: width .5s ease;
+}
+
+
+
+
+.nav > ul > li > a:hover:before {
+    width: 0%;
+    background: #3bc1a0;
+    -webkit-transition: width .5s ease;
+    transition: width .5s ease;
+}
+
+.nav > ul > li > a:hover:after {
+    width: 0%;
+    background: transparent;
+    -webkit-transition: width 0s ease;
+    transition: width 0s ease;
+}
+

public/css/style.css

@@ -0,0 +1,140 @@
+@charset "UTF-8";
+@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300&subset=latin,cyrillic);
+
+* {
+    box-sizing: border-box;
+}
+
+
+html {
+    font-size: 100%;
+}
+html,
+body {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+}
+
+body {
+    color: rgb(229, 224, 216);
+    font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+    //font: 1em 'Open Sans', sans-serif;
+    background-color: #f1f1f1;
+}
+
+
+
+
+
+
+main {
+    max-width: 1024px;
+    margin: 0 auto
+}
+
+article {
+    margin: 0 1em;
+    padding: 0 22px;
+    -webkit-transition: -webkit-transform .3s;
+    -moz-transition: : -moz-transform .3s;
+    transition: transform .3s;
+}
+
+header {
+    margin: 0;
+    padding: 0;
+    text-align: center;
+}
+
+footer {
+    font-size: 14px;
+    text-align: center
+}
+
+p {
+    margin-bottom: 16px;
+}
+
+hr {
+    margin: 22px 0;
+    height: 1px;
+    border: 0;
+    background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
+    background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
+    background-image: -ms-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
+    background-image: linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
+}
+
+h1,
+h2 {
+    margin-bottom: 22px;
+    color: #191919;
+    font-weight: 300;
+}
+
+h1 {
+    font-size: 32px;
+    line-height: 32px;
+}
+
+h2 {
+    color: #565d66;
+    font-size: 26px;
+    line-height: 26px;
+}
+
+a {
+    color: #006b05;
+    text-decoration: none;
+}
+.btn {
+    -webkit-border-radius: 10em;
+    -moz-border-radius: 10em;
+    -ms-border-radius: 10em;
+    -o-border-radius: 10em;
+    border-radius: 10em;
+    border: 0;
+    color: #fff!important;
+    margin: 6px;
+    white-space: normal!important;
+    word-wrap: break-word;
+		display: inline-block;
+    line-height: 1.25;
+    text-align: center;
+    vertical-align: middle;
+    cursor: pointer;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    padding: .5rem 1rem;
+    font-size: 1rem;
+    font-weight: 400;
+    -webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
+    -moz-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
+    box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
+}
+.btn {
+	  -webkit-transition: box-shadow .2s ease-out;
+	  -moz-transition: box-shadow .2s ease-out;
+		-ms-transition: box-shadow .2s ease-out;
+    transition: box-shadow .2s ease-out;
+}
+.btn:hover {
+	  -webkit-box-shadow: 0 5px 11px 0 rgba(0,0,0,.18),0 4px 15px 0 rgba(0,0,0,.15);
+	  -moz-box-shadow: 0 5px 11px 0 rgba(0,0,0,.18),0 4px 15px 0 rgba(0,0,0,.15);
+	  box-shadow: 0 5px 11px 0 rgba(0,0,0,.18),0 4px 15px 0 rgba(0,0,0,.15);
+}
+.btn-primary {
+	  border: 2px solid #2BBBAD;
+    color: #00695c!important;
+    background-color: transparent;
+}
+
+.btn-secondary {
+    border: 2px solid #00C851;
+    color: #007E33!important;
+    background-color: transparent;
+}

public/img/load.svg

@@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: none; display: block; shape-rendering: auto;" width="200px" height="200px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
+<g transform="translate(80,50)">
+<g transform="rotate(0)">
+<circle cx="0" cy="0" r="6" fill="#dedede" fill-opacity="1">
+  <animateTransform attributeName="transform" type="scale" begin="-0.875s" values="1.5 1.5;1 1" keyTimes="0;1" dur="1s" repeatCount="indefinite"></animateTransform>
+  <animate attributeName="fill-opacity" keyTimes="0;1" dur="1s" repeatCount="indefinite" values="1;0" begin="-0.875s"></animate>
+</circle>
+</g>
+</g><g transform="translate(71.21320343559643,71.21320343559643)">
+<g transform="rotate(45)">
+<circle cx="0" cy="0" r="6" fill="#dedede" fill-opacity="0.875">
+  <animateTransform attributeName="transform" type="scale" begin="-0.75s" values="1.5 1.5;1 1" keyTimes="0;1" dur="1s" repeatCount="indefinite"></animateTransform>
+  <animate attributeName="fill-opacity" keyTimes="0;1" dur="1s" repeatCount="indefinite" values="1;0" begin="-0.75s"></animate>
+</circle>
+</g>
+</g><g transform="translate(50,80)">
+<g transform="rotate(90)">
+<circle cx="0" cy="0" r="6" fill="#dedede" fill-opacity="0.75">
+  <animateTransform attributeName="transform" type="scale" begin="-0.625s" values="1.5 1.5;1 1" keyTimes="0;1" dur="1s" repeatCount="indefinite"></animateTransform>
+  <animate attributeName="fill-opacity" keyTimes="0;1" dur="1s" repeatCount="indefinite" values="1;0" begin="-0.625s"></animate>
+</circle>
+</g>
+</g><g transform="translate(28.786796564403577,71.21320343559643)">
+<g transform="rotate(135)">
+<circle cx="0" cy="0" r="6" fill="#dedede" fill-opacity="0.625">
+  <animateTransform attributeName="transform" type="scale" begin="-0.5s" values="1.5 1.5;1 1" keyTimes="0;1" dur="1s" repeatCount="indefinite"></animateTransform>
+  <animate attributeName="fill-opacity" keyTimes="0;1" dur="1s" repeatCount="indefinite" values="1;0" begin="-0.5s"></animate>
+</circle>
+</g>
+</g><g transform="translate(20,50.00000000000001)">
+<g transform="rotate(180)">
+<circle cx="0" cy="0" r="6" fill="#dedede" fill-opacity="0.5">
+  <animateTransform attributeName="transform" type="scale" begin="-0.375s" values="1.5 1.5;1 1" keyTimes="0;1" dur="1s" repeatCount="indefinite"></animateTransform>
+  <animate attributeName="fill-opacity" keyTimes="0;1" dur="1s" repeatCount="indefinite" values="1;0" begin="-0.375s"></animate>
+</circle>
+</g>
+</g><g transform="translate(28.78679656440357,28.786796564403577)">
+<g transform="rotate(225)">
+<circle cx="0" cy="0" r="6" fill="#dedede" fill-opacity="0.375">
+  <animateTransform attributeName="transform" type="scale" begin="-0.25s" values="1.5 1.5;1 1" keyTimes="0;1" dur="1s" repeatCount="indefinite"></animateTransform>
+  <animate attributeName="fill-opacity" keyTimes="0;1" dur="1s" repeatCount="indefinite" values="1;0" begin="-0.25s"></animate>
+</circle>
+</g>
+</g><g transform="translate(49.99999999999999,20)">
+<g transform="rotate(270)">
+<circle cx="0" cy="0" r="6" fill="#dedede" fill-opacity="0.25">
+  <animateTransform attributeName="transform" type="scale" begin="-0.125s" values="1.5 1.5;1 1" keyTimes="0;1" dur="1s" repeatCount="indefinite"></animateTransform>
+  <animate attributeName="fill-opacity" keyTimes="0;1" dur="1s" repeatCount="indefinite" values="1;0" begin="-0.125s"></animate>
+</circle>
+</g>
+</g><g transform="translate(71.21320343559643,28.78679656440357)">
+<g transform="rotate(315)">
+<circle cx="0" cy="0" r="6" fill="#dedede" fill-opacity="0.125">
+  <animateTransform attributeName="transform" type="scale" begin="0s" values="1.5 1.5;1 1" keyTimes="0;1" dur="1s" repeatCount="indefinite"></animateTransform>
+  <animate attributeName="fill-opacity" keyTimes="0;1" dur="1s" repeatCount="indefinite" values="1;0" begin="0s"></animate>
+</circle>
+</g>
+</g>
+<!-- [ldio] generated by https://loading.io/ --></svg>

public/img/load2.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: none; display: block; shape-rendering: auto;" width="200px" height="200px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
+<circle cx="50" cy="50" fill="none" stroke="#dedede" stroke-width="10" r="35" stroke-dasharray="164.93361431346415 56.97787143782138">
+  <animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1s" values="0 50 50;360 50 50" keyTimes="0;1"></animateTransform>
+</circle>
+<!-- [ldio] generated by https://loading.io/ --></svg>

public/notes/1.html

@@ -0,0 +1,25 @@
+<html>
+    <head>
+        <title>Description character</title>
+        <link rel="stylesheet" href="/css/notes.css">
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    </head>
+    <body>
+        <div id="main">
+            <div id="content">
+                <h2>Character description</h2>
+                <p>Used to add the character description and the rest that the AI should 
+                    know. For example, you can add information about the world in which the action takes place and describe 
+                    the characteristics for the character you are playing for. Usually it all takes 200-350 tokens.</p>
+                <h3>Methods and format</h3>
+                <p>For most Kobold's models the easiest way is to use a free form for description, and in each sentence it is desirable to specify the name of the character. 
+                    The entire description should be in one line without hyphenation. For examle:<br><br>
+                    <i>Chloe is a female elf. Chloe wears black-white maid dress with green collar and red glasses. Chloe has medium length black hair. 
+                        Chloe's personality is...</i> etc.</p>
+                
+                <p>But that the AI would be less confused the best way is to use the W++ format. Details here: <a target="_blank" href="https://github.com/KoboldAI/KoboldAI-Client/wiki/Pro-Tips">Pro-Tips</a></p>
+            </div>
+        </div>
+    </body>
+</html>

public/notes/2.html

@@ -0,0 +1,19 @@
+<html>
+    <head>
+        <title>Personality</title>
+        <link rel="stylesheet" href="/css/notes.css">
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    </head>
+    <body>
+        <div id="main">
+            <div id="content">
+                <h2>Personality</h2>
+                <p>3-4 main personality characteristics should be indicated here. These characteristics will play a major role in the character's behavior. Example:<br><br>
+                    <i>Cheerful, cunning, provocative</i>
+                </p>
+
+            </div>
+        </div>
+    </body>
+</html>

public/notes/3.html

@@ -0,0 +1,25 @@
+<html>
+    <head>
+        <title>First message</title>
+        <link rel="stylesheet" href="/css/notes.css">
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    </head>
+    <body>
+        <div id="main">
+            <div id="content">
+                <h2>First message</h2>
+                <p>An important thing that sets exactly how and in what style the character will communicate. 
+                    It is desirable that the character's first message be long, so that later it would be less 
+                    likely that the character would respond in monosyllables. You can also use asterisks ** to describe the character's actions. For example:<br><br>
+                    <i>*I noticed you came inside, I walked up and stood right in front of you* Wellcome. I'm glad to see you here. *i said with toothy smug sunny smile looking you straight in the eye* What brings you...</i> etc
+                </p>
+                <h3>Updates</h3>
+                <p>
+                    Later, the ability to specify several examples of answer messages will be added so that a more 
+                    detailed image of the character personality can be recreated.
+                </p>
+            </div>
+        </div>
+    </body>
+</html>

public/notes/4.html

@@ -0,0 +1,24 @@
+<html>
+    <head>
+        <title>Preset settings</title>
+        <link rel="stylesheet" href="/css/notes.css">
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    </head>
+    <body>
+        <div id="main">
+            <div id="content">
+                <h2>Preset settings</h2>
+                <p>Standard KoboldAI settings files are used here. To add your own settings, simply add the file .settings in TavernAI\public\KoboldAI Settings
+                    <br><br>Important: Temporarily, at the moment, the context will always be 2048 tokens, regardless of any settings.
+                </p>
+                <h3>Temperature</h3>
+                <p>Value from 0.1 to 2.0. Lower value - the answers are more logical, but less creative. Higher value - the answers are more creative, but less logical.</p>
+                <h3>Amount generation</h3>
+                <p>The maximum amount of tokens that a AI will generate to respond. One word is approximately 3-4 tokens. The larger the parameter value, the longer the generation time takes.</p>
+                <h3>User Avatar</h3>
+                <p>Images can be added in TavernAI\public\User Avatars</p>
+            </div>
+        </div>
+    </body>
+</html>

public/notes/5.html

@@ -0,0 +1,16 @@
+<html>
+    <head>
+        <title>Temperature</title>
+        <link rel="stylesheet" href="/css/notes.css">
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    </head>
+    <body>
+        <div id="main">
+            <div id="content">
+                <h2>Temperature</h2>
+                <p>Value from 0.1 to 2.0. Less value - the answers are more logical, but less creative. More value - the answers are more creative, but less logical.</p>
+            </div>
+        </div>
+    </body>
+</html>

public/scripts/gpt-2-3-tokenizer/README.md

@@ -0,0 +1,28 @@
+# GPT-2/3 Tokenizer
+
+GPT-2/3 byte pair encoder/decoder/tokenizer based on [@latitudegames/GPT-3-Encoder](https://github.com/latitudegames/GPT-3-Encoder) that works in the browser and Deno.
+
+See also: [JS byte pair encoder for OpenAI's CLIP model](https://github.com/josephrocca/clip-bpe-js).
+
+```js
+import {encode, decode} from "https://deno.land/x/gpt_2_3_tokenizer@v0.0.1/mod.js";
+let text = "hello world";
+console.log(encode(text)); // [258, 18798, 995]
+console.log(decode(encode(text))); // "hello world"
+```
+or:
+```js
+let mod = await import("https://deno.land/x/gpt_2_3_tokenizer@v0.0.1/mod.js");
+mod.encode("hello world"); // [258, 18798, 995]
+```
+or to include it as a global variable in the browser:
+```html
+<script type=module>
+  import tokenizer from "https://deno.land/x/gpt_2_3_tokenizer@v0.0.1/mod.js";
+  window.tokenizer = tokenizer;
+</script>
+```
+
+# License
+
+The [original code is MIT Licensed](https://github.com/latitudegames/GPT-3-Encoder/blob/master/LICENSE) and so are any changes made by this repo.

public/scripts/gpt-2-3-tokenizer/mod.js

@@ -0,0 +1,169 @@
+import encoder from "./encoder.js";
+import bpe_file from "./vocab.bpe.js"; 
+
+const range = (x, y) => {
+  const res = Array.from(Array(y).keys()).slice(x)
+  return res
+}
+
+const ord = x => {
+  return x.charCodeAt(0)
+}
+
+const chr = x => {
+  return String.fromCharCode(x)
+}
+
+const textEncoder = new TextEncoder("utf-8")
+const encodeStr = str => {
+  return Array.from(textEncoder.encode(str)).map(x => x.toString())
+}
+
+const textDecoder = new TextDecoder("utf-8")
+const decodeStr = arr => {
+  return textDecoder.decode(new Uint8Array(arr));
+}
+
+const dictZip = (x, y) => {
+  const result = {}
+  x.map((_, i) => { result[x[i]] = y[i] })
+  return result
+}
+
+function bytes_to_unicode() {
+  const bs = range(ord('!'), ord('~') + 1).concat(range(ord('¡'), ord('¬') + 1), range(ord('®'), ord('ÿ') + 1))
+
+  let cs = bs.slice()
+  let n = 0
+  for (let b = 0; b < 2 ** 8; b++) {
+    if (!bs.includes(b)) {
+      bs.push(b)
+      cs.push(2 ** 8 + n)
+      n = n + 1
+    }
+  }
+
+  cs = cs.map(x => chr(x))
+
+  const result = {}
+  bs.map((_, i) => { result[bs[i]] = cs[i] })
+  return result
+}
+
+function get_pairs(word) {
+  const pairs = new Set()
+  let prev_char = word[0]
+  for (let i = 1; i < word.length; i++) {
+    const char = word[i]
+    pairs.add([prev_char, char])
+    prev_char = char
+  }
+  return pairs
+}
+
+const pat = /'s|'t|'re|'ve|'m|'l l|'d| ?\p{L}+| ?\p{N}+| ?[^\s\p{L}\p{N}]+|\s+(?!\S)|\s+/gu
+
+const decoder = {}
+Object.keys(encoder).map(x => { decoder[encoder[x]] = x })
+
+const lines = bpe_file.split('\n')
+
+// bpe_merges = [tuple(merge_str.split()) for merge_str in bpe_data.split("\n")[1:-1]]
+const bpe_merges = lines.slice(1, lines.length - 1).map(x => {
+  return x.split(/(\s+)/).filter(function(e) { return e.trim().length > 0 })
+})
+
+const byte_encoder = bytes_to_unicode()
+const byte_decoder = {}
+Object.keys(byte_encoder).map(x => { byte_decoder[byte_encoder[x]] = x })
+
+const bpe_ranks = dictZip(bpe_merges, range(0, bpe_merges.length))
+const cache = {}
+
+function bpe(token) {
+  if (token in cache) {
+    return cache[token]
+  }
+
+  let word = token.split('')
+
+  let pairs = get_pairs(word)
+
+  if (!pairs) {
+    return token
+  }
+
+  while (true) {
+    const minPairs = {}
+    Array.from(pairs).map(pair => {
+      const rank = bpe_ranks[pair]
+      minPairs[(isNaN(rank) ? 10e10 : rank)] = pair
+    })
+
+
+
+    const bigram = minPairs[Math.min(...Object.keys(minPairs).map(x => {
+      return parseInt(x)
+    }
+    ))]
+
+    if (!(bigram in bpe_ranks)) {
+      break
+    }
+
+    const first = bigram[0]
+    const second = bigram[1]
+    let new_word = []
+    let i = 0
+
+    while (i < word.length) {
+      const j = word.indexOf(first, i)
+      if (j === -1) {
+        new_word = new_word.concat(word.slice(i))
+        break
+      }
+      new_word = new_word.concat(word.slice(i, j))
+      i = j
+
+      if (word[i] === first && i < word.length - 1 && word[i + 1] === second) {
+        new_word.push(first + second)
+        i = i + 2
+      } else {
+        new_word.push(word[i])
+        i = i + 1
+      }
+    }
+
+    word = new_word
+    if (word.length === 1) {
+      break
+    } else {
+      pairs = get_pairs(word)
+    }
+  }
+
+  word = word.join(' ')
+  cache[token] = word
+
+  return word
+}
+
+export function encode(text) {
+  let bpe_tokens = []
+  const matches = Array.from(text.matchAll(pat)).map(x => x[0])
+  for (let token of matches) {
+    token = encodeStr(token).map(x => {
+      return byte_encoder[x]
+    }).join('')
+    
+    const new_tokens = bpe(token).split(' ').map(x => encoder[x])
+    bpe_tokens = bpe_tokens.concat(new_tokens)
+  }
+  return bpe_tokens
+}
+
+export function decode(tokens) {
+  let text = tokens.map(x => decoder[x]).join('')
+  text = decodeStr(text.split('').map(x => byte_decoder[x]))
+  return text
+}

public/settings.json

@@ -0,0 +1 @@
+{"api_server":"http://localhost:5000/api","preset_settings":"Lancer-OPT-2.7B-Erebus","user_avatar":"you1.png","temp":0.8,"amount_gen":90}

public/style.css

@@ -0,0 +1,949 @@
+@font-face {
+    font-family: "My Custom Font";
+    src: url(fonts/Comic_CAT.otf) format("truetype");
+}
+p.customfont {
+    font-family: "My Custom Font", Verdana, Tahoma;
+}
+body {
+    margin: 0;
+    background: linear-gradient(rgba(19,21,44,0.75), rgba(19,21,44,0.75)), url(backgrounds/tavern.png);
+    background-size: auto 100%;
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    background-size: cover;
+    backdrop-filter: blur(2px);
+    scrollbar-width: thin;
+    scrollbar-color: gray #191b31;
+
+}
+#bg1{
+    background-image: linear-gradient(rgba(19,21,44,0.75), rgba(19,21,44,0.75)), url(backgrounds/tavern.png);
+    background-size: auto 100%;
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    background-size: cover;
+    filter: blur(2px);
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    z-index: -2;
+}
+#bg2{
+    background: linear-gradient(rgba(19,21,44,0.75), rgba(19,21,44,0.75)), url(backgrounds/tavern.png);
+    background-size: auto 100%;
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    filter: blur(2px);
+    background-size: cover;
+    -webkit-backdrop-filter: blur(2px);
+    backdrop-filter: blur(2px);
+    opacity: 0.0;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+}
+#sheld {
+    display: grid;
+    grid-template-rows: auto 145px;
+    background: #191b3133;
+    height: 100vh;
+    overflow: auto;
+    overflow-x: hidden;
+    overflow-y: hidden;
+    max-width:800px;
+    margin-left: auto;
+    margin-right: auto;
+    //border-right: 0.1px solid gray;
+    //border-left: 0.1px solid gray;
+    //box-shadow: 0 0 2px rgba(200,200,200,0.1);
+}
+
+#chat {
+    scrollbar-width: thin;
+    //width: 900px;
+    //height: 80%;
+    overflow: hidden;
+    overflow-y: scroll;
+    background: #191b3100;
+    //white-space:nowrap;
+    //margin-left: 30%; /* Отступ слева */
+    //width: 40%; /* Ширина слоя */
+    //padding: 10px; /* Поля вокруг текста */
+}
+
+::-webkit-scrollbar {
+    width: .60em;
+    //background-color: blue;
+}
+
+::-webkit-scrollbar-track {
+    background-color: #191b31;
+}
+
+::-webkit-scrollbar-thumb {
+    background: gray;
+    border-radius: 1px;
+    box-shadow: inset 0.05em 0.05em 0 rgba(0, 0, 0, 0.1), inset 0 -0.05em 0 rgba(0, 0, 0, 0.07);
+}
+#form_sheld {
+    //box-shadow: 0 0 2px rgba(200,200,200,0.5);
+    box-shadow: 0 0 2px rgba(200,200,200,0.1);
+    white-space:nowrap;
+    background: #191b31A0;
+    //height: 10%;
+    //margin-left: 30%; /* Отступ слева */
+    //width: 95%; /* Ширина слоя */
+    //padding: 10px; /* Поля вокруг текста */
+    //background: red;
+    //margin-left: auto;
+    //margin-right: auto;
+}
+#send_form {
+    display: grid;
+    grid-template-columns: 35px auto 60px;
+    //background: green;
+    width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+}
+#send_textarea{
+    //width:100%; 
+    font-size: 11pt; 
+    height: 89px;
+    resize: none;
+    display:inline-block;
+    background-color: #13152c;
+    outline: none !important;
+    border:0px solid grey;
+    box-shadow: 0 0 2px rgba(200,200,200,0.5);
+    padding: 10px;
+    color: #e6e6e6;
+    font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+    font-size: 18px;
+    margin-left: 10px;
+    margin-top: 10px;
+}
+#send_but_sheld{
+    //display:inline-block;
+    //height: 100%;
+    //margin-left: 17px;
+    //background: blue;
+    
+}
+#send_but{
+    //visibility: visible;
+    width: 100%;
+    margin: 0 auto;
+    margin-left: 4px;
+    display: block;
+    height: 100%;
+    background: url('img/send3.png') no-repeat top left;
+    background-size: 26px auto;
+    background-position: center center;
+    outline:          none;
+    border:           none;
+    cursor:           pointer;
+}
+#loading_mes{
+    display: none;
+    width: 100%;
+    height: 100%;
+    margin: 0 auto;
+    margin-left: 2px;
+    //visibility: collapse;
+    background: url('img/load.svg') no-repeat top left;
+    background-size: 45px 45px;
+    background-position: center center;
+}
+#options_button{
+    margin-top: 0px;
+    cursor: pointer;
+    //opacity: 0.5;
+    position: block;
+    width:40px;
+    height: 40px;
+    background-image: url('img/options2.png');
+    background-size: contain;
+    background-repeat: no-repeat;
+    
+    //background-size: 20px;
+}
+#options{
+    
+    border-radius: 5px;
+    opacity: 0.0;
+    display: none;
+    width: 200px;
+    height: 100px;
+    bottom: 145px;
+    position: relative;
+    //background-color: blue;
+    z-index:1990;
+   
+}
+.options-content {
+    overflow: hidden;
+  display: block;
+  position: absolute;
+  background-color: #191b31F3;
+  min-width: 160px;
+  z-index: 1;
+  //bottom: 1px;
+}
+
+/* Ссылки внутри выпадающего блока */
+.options-content hr {
+  margin: 0px;
+  padding: 0px;
+  border-top: 1px solid #ffffff11;
+}
+.nav hr{
+    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
+}
+.options-content a {
+  color: #ffffff55;
+  padding: 12px 16px;
+  text-decoration: none;
+  display: block;
+}
+.options-content img {
+  opacity: 0.5;
+  margin-right: 5px;
+}
+
+/* Изменяем цвет ссылки при наведении */
+.options-content a:hover {background-color: #ffffff05}
+
+
+.mes {
+    display: grid;
+    grid-template-columns: fit-content(60px) 60px auto;
+    border-radius: 5px;
+    box-shadow: 0 0 2px rgba(200,200,200,0.1);
+    padding: 4px;
+    background: #191b31CC;
+    //box-shadow: 0 0 2px rgba(200,200,200,0.5);
+    
+    
+    //display: inline-block;
+    vertical-align: top;
+    width: 100%;
+    //height:60px;
+    //background: red;
+    //font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
+    font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+    color: rgb(229, 224, 216);
+    font-size: 18px;
+    //background: blue;
+    margin-bottom: 26px;
+}
+.avatar {
+  //box-shadow: 0 0 2px rgba(200,200,200,0.5);
+  //background: #13152c;
+  width: 67px;
+  height: 103px;
+  border-style: none;
+  padding:6px;
+  padding-bottom:20px;
+}
+
+.avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center center;
+  border-radius: 10px;
+}
+.mes_block{
+    
+    padding-top: 4px;
+    padding-left: 35px;
+}
+.ch_name{
+    //background: green;
+    font-weight:bolder;
+}
+.mes_text{
+    //background: olive;
+    
+    font-weight:lighter;
+    padding-top: 3px;
+    margin-bottom: 10px;
+    padding-right: 40px;
+    max-width: 720px;
+    word-wrap: break-word;
+}
+br {
+   display: block;
+   margin: 3px 0;
+}
+
+textarea{
+    width:100%; 
+    font-size: 11pt; 
+    height: 400px;
+    resize: none;
+    display:block;
+    background-color: #13152c;
+    outline: none !important;
+    border:0px solid grey;
+    box-shadow: 0 0 2px rgba(200,200,200,0.5);
+    padding: 10px;
+    color: #cacaca;
+    font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+    font-size: 18px;
+    margin-left: 10px;
+    margin-top: 10px;
+}
+#rm_ch_create_block textarea {
+    font-size: 11pt;
+}
+
+#description_textarea{
+    width: 92%;
+    height: 200px;
+    margin-top: 0px;
+}
+#personality_textarea{
+    width: 92%;
+    height: 100px;
+    margin-top: 0px;
+}
+#character_name_pole{
+
+    width: 92%;
+}
+#firstmessage_textarea{
+    width: 92%;
+    height: 180px;
+    margin-top: 0px;
+}
+
+.text_pole{
+    
+    border:0px solid grey;
+    box-shadow: 0 0 2px rgba(200,200,200,0.5);
+    background-color: #13152c;
+    //padding: 10px;
+
+    margin-left: 10px;
+
+    padding: 10px;
+    color: #ffffffaa;
+    font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+    font-size: 18px;
+    size: 10;
+    font-size: 11pt;
+    padding: 7px;
+}
+
+
+.right_menu{
+    //padding: 15px 20px;
+    max-height: 86%;
+    overflow: hidden;
+    overflow-y: auto;
+    scrollbar-width: thin;
+}
+.right_menu h3 {
+    margin: 0px;
+    padding: 0px;
+    margin-left: 10px;
+    
+    
+}
+.right_menu h4 {
+    margin: 0px;
+    padding: 0px;
+    margin-left: 10px;
+    margin-bottom: 1px;
+}
+.right_menu h5 {
+    color: #757575;
+    margin: 0px;
+    padding: 0px;
+    margin-left: 10px;
+    margin-bottom: 5px;
+}
+
+input:focus, textarea:focus, select:focus{
+    outline: none;
+}
+
+input::file-selector-button {
+    font-weight: bold;
+    color: #fff;
+    padding: 0.5em;
+    border: thin solid rgba(200,200,200,0.2);
+    border-radius: 3px;
+    background-color: #191b31;
+    cursor: pointer;
+}
+input[type=submit] {
+    font-weight: bold;
+    color: #fff;
+    padding: 0.5em;
+    border: thin solid rgba(200,200,200,0.2);
+    border-radius: 3px;
+    background-color: #191b31;
+}
+
+.right_menu_button{
+    display:inline-block;
+    //box-shadow: 0 0 5px -1px rgba(0,0,0,0.2);
+    cursor:pointer;
+    vertical-align:middle;
+    text-align: center;
+    padding-left: 4px;
+    padding-right: 4px;
+    margin-top:3px;
+    
+    
+}
+
+.right_menu_button:active {
+    color:red;
+    box-shadow: 0 0 5px -1px rgba(0,0,0,0.05);
+    background-color: rgba(0,0,0,0.05);
+}
+
+#rm_ch_create_block{
+    display: none;
+}
+#rm_api_block{
+    display: none;
+    padding-bottom: 5px;
+    //visibility: hidden;
+}
+#api_url_text{
+    margin-right: 4px;
+}
+#api_button{
+    cursor: pointer;
+    color:#ffffffaa;
+}
+#api_loading{
+    width: 25px;
+    height: 25px;
+    display: none;
+    
+}
+#rm_characters_block{
+    display: block;
+    //visibility: hidden;
+}
+.character_select{
+    padding: 0px;
+    border-radius: 10px;
+    cursor:pointer;
+    display: grid;
+    grid-template-columns: 67px auto;
+}
+.character_select .avatar{
+    height: 100px;
+}
+.character_select .ch_name{
+    margin-left: 10px;
+    margin-top: 5px;
+}
+.character_select:hover{
+    background-color: #ffffff11;
+}
+#avatar_url_div{
+    display: none;
+}
+#selected_chat_div{
+    display: none;
+}
+#last_mes_div{
+    display: none;
+}
+#mes_example_div{
+    display: none;
+}
+#rm_button_selected_ch{
+    
+}
+#bg_menu{
+    margin-top: 5px;
+    margin-left: 2px;
+    cursor:pointer;
+    position: absolute;
+    z-index: 2050;
+    -webkit-user-select: none; 
+      -webkit-touch-callout: none; 
+      -moz-user-select: none; 
+      -ms-user-select: none; 
+      user-select: none;  
+    
+}
+
+#site_logo{
+    opacity: 0.4;
+    display: inline-block;
+    width: 130px;
+    height: 20px;
+    vertical-align: top;
+    margin-left: 1px;
+}
+#bg_menu_button{
+    display: inline-block;
+    opacity: 0.4;
+     //transition: 0.5s
+     cursor: pointer;
+     width: 20px;
+     //background: #191b3188;
+     text-align: center;
+     height: 20px;
+     color: #ffffff88;
+     
+}
+#bg_menu_button img{
+     width: 20px;
+     height: 20px;
+     margin-bottom: 6px;
+}
+#bg_menu_content{
+    margin-top: 0px;
+    margin-left: 6px;
+    opacity: 0.0;
+    //padding-top: 10px;
+    cursor:auto;
+    display: block;
+    width: 122px;//114px;
+    height: 0px;
+    background: #191b3100;
+    overflow: hidden;
+    overflow-y: hidden;
+    
+    scrollbar-width: thin;
+    scrollbar-color: #ffffff11 #191b3111;
+}
+#bg_menu_content::-webkit-scrollbar-track {
+    background-color: #191b3111;
+}
+
+#bg_menu_content::-webkit-scrollbar-thumb {
+    background: #ffffff11;
+    border-radius: 1px;
+    box-shadow: inset 0.05em 0.05em 0 rgba(0, 0, 0, 0.1), inset 0 -0.05em 0 rgba(0, 0, 0, 0.07);
+}
+.bg_example {
+  //box-shadow: 0 0 2px rgba(200,200,200,0.5);
+  //background: #13152c;
+  width: 103px;
+  height: 83px;
+  border-style: none;
+  padding:6px;
+  padding-bottom:20px;
+  position: relative;
+  margin-left: 3px;
+}
+
+.bg_example_img {
+  cursor: pointer;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center center;
+  border-radius: 10px;
+}
+.bg_example_cross {
+    width:12px;
+    height:12px;
+    position: absolute;
+    float: right;
+    right: 10px;
+    top: 10px;
+    cursor: pointer;
+    opacity: 0.4;
+}
+.bg_example_but_load {
+    margin-left: 3px;
+  //box-shadow: 0 0 2px rgba(200,200,200,0.5);
+  //background: #13152c;
+  width: 103px;
+  height: 83px;
+  border-style: none;
+  padding:6px;
+  padding-bottom:20px;
+  
+}
+
+.bg_example_but_load img {
+  cursor: pointer;
+  width: 91px;
+  height: 57px;
+  object-fit: cover;
+  object-position: center center;
+  border-radius: 10px;
+  opacity: 0.1;
+}
+
+#add_bg_button{
+    margin-bottom: 2px;
+}
+
+.avatar_div{
+    margin-top: 16px;
+}
+.avatar_div .avatar{
+    margin-left: 4px;
+    display: inline-block;
+}
+
+#add_avatar_button{
+    vertical-align: top;
+    display: inline-block;
+    margin-top: 52px;
+}
+#description_div{
+    margin-top: 6px;
+    
+}
+#personality_div{
+    margin-top: 20px;
+}
+#first_message_div{
+    margin-top: 20px;
+}
+#create_button{
+    
+    margin-left: 9px;
+    margin-top: 8px;
+    margin-bottom: 10px;
+    font-size: 16px;
+    cursor: pointer;
+}
+
+#rm_info_block{
+    display: none;
+    width: 100%;
+    height: 80%;
+    justify-content: center;
+    flex-direction: column;
+
+}
+#rm_info_panel{
+    font-size: 20px;
+    display: block;
+    text-align: center;
+}
+#rm_info_button{
+    width: 100px;
+    margin-top: 10px;
+    font-size: 20px;
+    display: block;
+    cursor: pointer;
+    text-align: center;
+    margin-left: auto;
+    margin-right: auto;
+}
+#rm_info_avatar{
+    width: 69px;
+    text-align: center;
+    margin-left: auto;
+    margin-right: auto;
+}
+#delete_button{
+    cursor: pointer;
+    display: block;
+    float:right;
+    margin-top: 25px;
+    margin-right: 10px; 
+    color: #ffffff66;
+}
+#result_info{
+    margin-left: 10px;
+    size: 10px;
+    color: #ffffff33;
+}
+
+.input-file {
+
+	display: block;
+}
+.input-file-btn {
+	position: relative;
+	display: inline-block;
+	cursor: pointer;
+	outline: none;
+	text-decoration: none;
+	font-size: 14px;
+	vertical-align: middle;
+	color: rgb(255 255 255);
+	text-align: center;
+	border-radius: 4px;
+	background-color: #419152;
+	line-height: 22px;
+	height: 40px;
+        width:89px;
+	padding: 10px 20px;
+	box-sizing: border-box;
+	border: none;
+	margin: 0;
+	transition: background-color 0.2s;
+}
+
+.input-file input[type=file] {
+	//position: absolute;
+	z-index: -1;
+	opacity: 0;
+	display: block;
+	width: 0;
+	height: 0;
+}
+#form_bg_download{
+    margin-bottom: 2px;
+}
+/* Focus */
+
+#dialogue_popup{
+    
+    width:300px;
+    height: 150px;
+    position: absolute;
+    z-index: 2060;
+    background-color: blue;
+    margin-left: auto;
+    margin-right: auto;
+    left: 0;
+    right: 0;
+    text-align: center;
+    margin-top: 36vh;
+    box-shadow: 0 0 2px rgba(200,200,200,0.1);
+    padding: 4px;
+    background: #191b31CC;
+    border-radius: 10px;
+}
+#dialogue_popup_ok{
+    display: inline-block;
+    margin-right: 20px;
+    background-color: #791b31;
+    cursor: pointer;
+}
+#dialogue_popup_cancel{
+    display: inline-block;
+    margin-left: 20px;
+    cursor: pointer;
+}
+#dialogue_del_mes{
+    width:300px;
+    height: 150px;
+    margin-left: auto;
+    margin-right: auto;
+
+    text-align: center;
+
+    padding: 4px;
+
+
+}
+#dialogue_del_mes_ok{
+    
+    display: inline-block;
+    margin-right: 20px;
+    background-color: #791b31;
+    cursor: pointer;
+}
+#dialogue_del_mes_cancel{
+    display: inline-block;
+    margin-left: 20px;
+    cursor: pointer;
+}
+.menu_button{
+    font-weight: bold;
+    color: #fff;
+    padding: 0.5em;
+    border: thin solid rgba(200,200,200,0.2);
+    border-radius: 3px;
+    background-color: #191b31;
+}
+#dialogue_del_mes .menu_button{
+    font-weight: bold;
+    font-size: 20px;
+    min-width: 100px;
+    min-height: 40px;
+}
+#shadow_popup{
+    display: none;
+    opacity: 0.0;
+    position: absolute;
+    width: 100%;
+    height: 100vh;
+    z-index: 2055;
+}
+#bgtest{
+    display: none;
+    width:100vw;
+    height: 100vh;
+    position: absolute;
+    z-index: -100;
+    background-color: red;
+}
+
+
+#online_status{
+    opacity: 0.3;
+    position: absolute;
+    //left: 4px;
+    bottom: 0px;
+    margin-left: 9px;
+    margin-bottom: 15px;
+}
+#online_status_indicator{
+    border-radius: 7px;
+    width: 14px;
+    height: 14px;
+    background-color: red;
+    display: inline-block;
+}
+#online_status_text{
+    margin-left: 4px;
+    display: inline-block;
+}
+#online_status2{
+    opacity: 0.5;
+    margin-top: 2px;
+    margin-left: 10px;
+    margin-bottom: 30px;
+}
+#online_status_indicator2{
+    border-radius: 7px;
+    width: 14px;
+    height: 14px;
+    background-color: red;
+    display: inline-block;
+}
+#online_status_text2{
+    margin-left: 4px;
+    display: inline-block;
+}
+.del_checkbox{
+    display: none;
+    opacity: 0.5;
+    accent-color: #ffffff;
+    //background-color: green;
+    width: 20px;
+    height: 20px;
+}
+#dialogue_del_mes{
+    display: none;
+}
+.for_checkbox{
+    display: block;
+}
+select {
+    //font-size: .9rem;
+    //border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1);
+    color: #ffffff66;
+    padding: 5px 10px;
+    width:95%;
+    height: 34px;
+    margin-left: 3px;
+    background-color: rgba(255, 255, 255, 0.09);
+    font-size: 15px;
+    border: 0;
+    outline: 0;
+    box-shadow: 0 0 2px rgba(200,200,200,0.5);
+    margin-top: 5px;
+    margin-bottom: 45px;
+}
+#title_api{
+    margin-left: 3px;
+}
+#settings_perset{
+    width:284px;
+    margin-left: 10px;
+    margin-bottom: 35px;
+    color: #ffffff9d;
+    box-shadow: 0 0 2px rgba(200,200,200,0.5);
+    background-color:#13152c;
+}
+#user_avatar_block{
+    margin-left: 6px;
+    display: grid;
+    grid-template-columns: auto auto auto;
+}
+#user_avatar_block .avatar{
+    cursor: pointer;
+    margin-bottom: 30px;
+    width: 90px;
+    height: 126px;
+}
+#user_avatar_block .avatar img{
+    width: 90px;
+    height: 126px;
+}
+#temp{
+    margin-left: 10px;
+    margin-bottom: 20px;
+}
+#temp_counter{
+    margin-bottom: 0px;
+}
+#amount_gen{
+    margin-left: 10px;
+    margin-bottom: 20px;
+}
+#amount_gen_counter{
+    margin-bottom: 0px;
+}
+input[type="range"] {
+  -webkit-appearance: none;
+  margin-right: 15px;
+  width: 200px;
+  height: 7px;
+  background: rgba(255, 255, 255, 0.6);
+  border-radius: 15px;
+  //background-image: linear-gradient(#ff4500, #ff4500);
+  background-size: 70% 100%;
+  background-repeat: no-repeat;
+}
+#rm_api_block h4{
+    opacity: 0.85;
+}
+
+.nav h5 a{
+    color: #936f4a;
+}
+.nav h5 a:hover{
+    color: #998e6b;
+}
+.nav h4 a{
+    color: #936f4a;
+}
+.nav h4 a:hover{
+    color: #998e6b;
+}
+
+#tips_popup{
+    
+    width:500px;
+    height: 430px;
+    position: absolute;
+    z-index: 2060;
+    background-color: blue;
+    margin-left: auto;
+    margin-right: auto;
+    left: 0;
+    right: 0;
+    text-align: center;
+    margin-top: 20vh;
+    box-shadow: 5px 5px -5px -5px rgba(200,200,200,0.1);
+    padding: 4px;
+    background: #191b31EE;
+    border-radius: 10px;
+}
+#shadow_tips_popup{
+    display: none;
+    opacity: 0.0;
+    position: absolute;
+    width: 100%;
+    height: 100vh;
+    z-index: 2055;
+    background-color: #00000066;
+}
+