2023-08-19 01:28:40 +02:00
< template >
2023-08-19 19:26:15 +02:00
< div class = "container bg-bg-light dark:bg-bg-dark shadow-lg overflow-y-auto scrollbar-thin scrollbar-track-bg-light-tone scrollbar-thumb-bg-light-tone-panel hover:scrollbar-thumb-primary dark:scrollbar-track-bg-dark-tone dark:scrollbar-thumb-bg-dark-tone-panel dark:hover:scrollbar-thumb-primary active:scrollbar-thumb-secondary" >
2023-08-20 00:12:08 +02:00
< div class = "container flex flex-row m-2" >
2023-08-19 19:26:15 +02:00
< div class = "flex-grow m-2" >
2023-08-27 20:15:31 +02:00
< div class = "flex gap-3 flex-1 items-center flex-grow flex-row m-2 p-2 border border-blue-300 rounded-md border-2 border-blue-300 m-2 p-4" >
2023-08-21 19:29:25 +02:00
< button v-show = "!generating" id="generate-button" @click="generate" class="w-6 ml-2 hover:text-secondary duration-75 active:scale-90 cursor-pointer"><i data-feather="pen-tool" > < / i > < / button >
2023-08-25 02:12:33 +02:00
< button v-show = "!generating" id="generate-next-button" @click="generate_in_placeholder" class="w-6 ml-2 hover:text-secondary duration-75 active:scale-90 cursor-pointer"><i data-feather="archive" > < / i > < / button >
< span class = "w-80" > < / span >
2023-08-21 19:29:25 +02:00
< button v-show = "generating" id="stop-button" @click="stopGeneration" class="w-6 ml-2 hover:text-secondary duration-75 active:scale-90 cursor-pointer"><i data-feather="x" > < / i > < / button >
< button
type = "button"
@ click = "startSpeechRecognition"
: class = "{ 'text-red-500': isLesteningToVoice }"
class = "w-6 hover:text-secondary duration-75 active:scale-90 cursor-pointer"
>
< i data -feather = " mic " > < / i >
< / button >
< button
title = "speak"
@ click . stop = "speak()"
: class = "{ 'text-red-500': isTalking }"
class = "w-6 hover:text-secondary duration-75 active:scale-90 cursor-pointer" >
< i data -feather = " volume -2 " > < / i >
< / button >
2023-12-29 23:38:30 +01:00
< button v-if = "!isSynthesizingVoice"
2023-12-25 01:17:28 +01:00
title = "read"
@ click . stop = "read()"
class = "w-6 hover:text-secondary duration-75 active:scale-90 cursor-pointer" >
< i data -feather = " voicemail " > < / i >
2023-12-29 23:38:30 +01:00
< / button >
< svg v -else aria -hidden = " true " class = "w-6 h-6 animate-spin fill-secondary" viewBox = "0 0 100 101"
fill = "none" xmlns = "http://www.w3.org/2000/svg" >
< path
d = "M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
fill = "currentColor" / >
< path
d = "M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
fill = "currentFill" / >
< / svg >
2023-08-21 19:29:25 +02:00
< button v-show = "!generating" id="export-button" @click="exportText" class="w-6 ml-2 hover:text-secondary duration-75 active:scale-90 cursor-pointer"><i data-feather="upload" > < / i > < / button >
< button v-show = "!generating" id="import-button" @click="importText" class="w-6 ml-2 hover:text-secondary duration-75 active:scale-90 cursor-pointer"><i data-feather="download" > < / i > < / button >
2023-08-27 20:15:31 +02:00
< div class = "flex gap-3 flex-1 items-center flex-grow justify-end" >
< button
class = "border-2 text-blue-600 dark:text-white border-blue-300 p-2 rounded shadow-lg hover:border-gray-600 dark:link-item-dark cursor-pointer"
@ click = "tab_id='source'" : class = "{'bg-blue-200 dark:bg-blue-500':tab_id=='source'}" >
Source
< / button >
< button
class = "border-2 text-blue-600 dark:text-white border-blue-300 p-2 rounded shadow-lg hover:border-gray-600 dark:link-item-dark cursor-pointer"
@ click = "tab_id='render'" : class = "{'bg-blue-200 dark:bg-blue-500':tab_id=='render'}" >
Render
< / button >
< / div >
2023-08-21 01:31:05 +02:00
< input type = "file" id = "import-input" class = "hidden" >
2023-08-27 20:15:31 +02:00
2023-08-19 01:28:40 +02:00
< / div >
2023-09-06 01:15:04 +02:00
< div class = "flex-grow m-2 p-2 border border-blue-300 rounded-md border-2 border-blue-300 m-2 p-4" : class = "{ 'border-red-500': generating }" >
2023-08-26 00:19:57 +02:00
< div v-if = "tab_id === 'source'" >
2023-12-30 17:09:30 +01:00
< div class = "flex flex-row justify-end mx-2" >
< div class = "text-lg hover:text-secondary duration-75 active:scale-90 p-2 cursor-pointer"
title = "Add python block" @ click . stop = "addBlock('python')" >
< img :src = "python_block" width = "25" height = "25" >
< / div >
< div class = "text-lg hover:text-secondary duration-75 active:scale-90 p-2 cursor-pointer"
title = "Add javascript block" @ click . stop = "addBlock('javascript')" >
< img :src = "javascript_block" width = "25" height = "25" >
< / div >
2024-01-02 00:53:49 +01:00
< div class = "text-lg hover:text-secondary duration-75 active:scale-90 p-2 cursor-pointer"
title = "Add json block" @ click . stop = "addBlock('json')" >
< img :src = "json_block" width = "25" height = "25" >
< / div >
2023-12-30 17:09:30 +01:00
< div class = "text-lg hover:text-secondary duration-75 active:scale-90 p-2 cursor-pointer"
title = "Add c++ block" @ click . stop = "addBlock('c++')" >
< img :src = "cpp_block" width = "25" height = "25" >
< / div >
< div class = "text-lg hover:text-secondary duration-75 active:scale-90 p-2 cursor-pointer"
title = "Add html block" @ click . stop = "addBlock('html')" >
< img :src = "html5_block" width = "25" height = "25" >
< / div >
< div class = "text-lg hover:text-secondary duration-75 active:scale-90 p-2 cursor-pointer"
title = "Add LaTex block" @ click . stop = "addBlock('latex')" >
< img :src = "LaTeX_block" width = "25" height = "25" >
< / div >
< div class = "text-lg hover:text-secondary duration-75 active:scale-90 p-2 cursor-pointer"
title = "Add bash block" @ click . stop = "addBlock('bash')" >
< img :src = "bash_block" width = "25" height = "25" >
< / div >
< div class = "text-lg hover:text-secondary duration-75 active:scale-90 p-2 cursor-pointer"
title = "Copy message to clipboard" @ click . stop = "copyContentToClipboard()" >
< i data -feather = " copy " > < / i >
< / div >
< / div >
2023-10-10 01:47:49 +02:00
< textarea ref = "mdTextarea" @keydown.tab.prevent ="insertTab"
class = "block min-h-500 p-2.5 w-full text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 overflow-y-scroll flex flex-col shadow-lg p-10 pt-0 overflow-y-scroll dark:bg-bg-dark scrollbar-thin scrollbar-track-bg-light-tone scrollbar-thumb-bg-light-tone-panel hover:scrollbar-thumb-primary dark:scrollbar-track-bg-dark-tone dark:scrollbar-thumb-bg-dark-tone-panel dark:hover:scrollbar-thumb-primary active:scrollbar-thumb-secondary"
: rows = "4"
: style = "{ minHeight: mdRenderHeight + `px` }" placeholder = "Enter message here..."
2023-12-04 01:40:36 +01:00
v - model = "text"
@ click . prevent = "mdTextarea_clicked"
@ change . prevent = "mdTextarea_changed"
>
2023-10-10 01:47:49 +02:00
< / textarea >
2023-08-25 02:12:33 +02:00
< span > Cursor position { { cursorPosition } } < / span >
< / div >
2023-12-29 23:38:30 +01:00
< audio controls autoplay v-if ="audio_url!=null" :key ="audio_url" >
< source :src = "audio_url" type = "audio/wav" ref = "audio_player" >
2023-12-26 02:46:50 +01:00
Your browser does not support the audio element .
< / audio >
2023-08-26 00:19:57 +02:00
< div v-if = "tab_id === 'render'" >
2023-08-25 02:12:33 +02:00
< MarkdownRenderer ref = "mdRender" :markdown-text = "text" class = "mt-4 p-2 rounded shadow-lg dark:bg-bg-dark" >
< / MarkdownRenderer >
< / div >
2023-08-19 01:28:40 +02:00
< / div >
2023-08-19 19:26:15 +02:00
< / div >
2023-08-25 21:47:28 +02:00
< Card title = "settings" class = "slider-container ml-0 mr-0 max-width" :isHorizontal = "false" :disableHoverAnimation = "true" :disableFocus = "true" >
< Card title = "Model" class = "slider-container ml-0 mr-0" :is_subcard = "true" :isHorizontal = "false" :disableHoverAnimation = "true" :disableFocus = "true" >
2023-08-26 00:19:57 +02:00
< select v-model = "selectedModel" @change="setModel" class="bg-white dark:bg-black m-0 border-2 rounded-md shadow-sm w-full" >
2023-08-25 02:12:33 +02:00
< option v-for ="model in models" :key="model" :value ="model" >
{ { model } }
< / option >
< / select >
< div v-if = "selecting_model" title="Selecting model" class="flex flex-row flex-grow justify-end" >
<!-- SPINNER -- >
< div role = "status" >
< svg aria -hidden = " true " class = "w-6 h-6 animate-spin fill-secondary" viewBox = "0 0 100 101"
fill = "none" xmlns = "http://www.w3.org/2000/svg" >
< path
d = "M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
fill = "currentColor" / >
< path
d = "M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
fill = "currentFill" / >
< / svg >
< span class = "sr-only" > Selecting model ... < / span >
< / div >
< / div >
< / Card >
2023-08-25 21:47:28 +02:00
< Card title = "Presets" class = "slider-container ml-0 mr-0" :is_subcard = "true" :isHorizontal = "false" :disableHoverAnimation = "true" :disableFocus = "true" >
2023-08-26 00:19:57 +02:00
< select v-model = "selectedPreset" class="bg-white dark:bg-black mb-2 border-2 rounded-md shadow-sm w-full" >
2023-08-25 02:12:33 +02:00
< option v-for ="preset in presets" :key="preset" :value ="preset" >
{ { preset . name } }
< / option >
< / select >
< br >
< button class = "w-6 ml-2 hover:text-secondary duration-75 active:scale-90 cursor-pointer" @click ="setPreset" title = "Use preset" > < i data -feather = " check " > < / i > < / button >
< button class = "w-6 ml-2 hover:text-secondary duration-75 active:scale-90 cursor-pointer" @click ="addPreset" title = "Add this text as a preset" > < i data -feather = " plus " > < / i > < / button >
< button class = "w-6 ml-2 hover:text-secondary duration-75 active:scale-90 cursor-pointer" @click ="removePreset" title = "Remove preset" > < i data -feather = " x " > < / i > < / button >
< button class = "w-6 ml-2 hover:text-secondary duration-75 active:scale-90 cursor-pointer" @click ="reloadPresets" title = "Reload presets list" > < i data -feather = " refresh -ccw " > < / i > < / button >
< / Card >
2023-08-25 21:47:28 +02:00
< Card title = "Generation params" class = "slider-container ml-0 mr-0" :is_subcard = "true" :isHorizontal = "false" :disableHoverAnimation = "true" :disableFocus = "true" >
2023-08-25 02:12:33 +02:00
< div class = "slider-container ml-2 mr-2" >
< h3 class = "text-gray-600" > Temperature < / h3 >
< input type = "range" v-model = "temperature" min="0" max="5" step="0.1" class="w-full" >
< span class = "slider-value text-gray-500" > Current value : { { temperature } } < / span >
< / div >
< div class = "slider-container ml-2 mr-2" >
< h3 class = "text-gray-600" > Top K < / h3 >
< input type = "range" v-model = "top_k" min="1" max="100" step="1" class="w-full" >
< span class = "slider-value text-gray-500" > Current value : { { top _k } } < / span >
< / div >
< div class = "slider-container ml-2 mr-2" >
< h3 class = "text-gray-600" > Top P < / h3 >
< input type = "range" v-model = "top_p" min="0" max="1" step="0.1" class="w-full" >
< span class = "slider-value text-gray-500" > Current value : { { top _p } } < / span >
< / div >
< div class = "slider-container ml-2 mr-2" >
< h3 class = "text-gray-600" > Repeat Penalty < / h3 >
2023-08-26 00:19:57 +02:00
< input type = "range" v-model = "repeat_penalty" min="0" max="5" step="0.1" class="bg-white dark:bg-black m-0 border-2 rounded-md shadow-sm w-full" >
2023-08-25 02:12:33 +02:00
< span class = "slider-value text-gray-500" > Current value : { { repeat _penalty } } < / span >
< / div >
< div class = "slider-container ml-2 mr-2" >
< h3 class = "text-gray-600" > Repeat Last N < / h3 >
2023-08-26 00:19:57 +02:00
< input type = "range" v-model = "repeat_last_n" min="0" max="100" step="1" class="bg-white dark:bg-black m-0 border-2 rounded-md shadow-sm w-full" >
2023-08-25 02:12:33 +02:00
< span class = "slider-value text-gray-500" > Current value : { { repeat _last _n } } < / span >
< / div >
< div class = "slider-container ml-2 mr-2" >
< h3 class = "text-gray-600" > Number of tokens to crop the text to < / h3 >
2023-08-26 00:19:57 +02:00
< input type = "number" v-model = "n_crop" class="bg-white dark:bg-black m-0 border-2 rounded-md shadow-sm w-full" >
2023-08-25 02:12:33 +02:00
< span class = "slider-value text-gray-500" > Current value : { { n _crop } } < / span >
< / div >
< div class = "slider-container ml-2 mr-2" >
< h3 class = "text-gray-600" > Number of tokens to generate < / h3 >
2023-08-26 00:19:57 +02:00
< input type = "number" v-model = "n_predicts" class="bg-white dark:bg-black m-0 border-2 rounded-md shadow-sm w-full" >
2023-08-25 02:12:33 +02:00
< span class = "slider-value text-gray-500" > Current value : { { n _predicts } } < / span >
< / div >
< div class = "slider-container ml-2 mr-2" >
< h3 class = "text-gray-600" > Seed < / h3 >
2023-08-26 00:19:57 +02:00
< input type = "number" v-model = "seed" class="bg-white dark:bg-black m-0 border-2 rounded-md shadow-sm w-full" >
2023-08-25 02:12:33 +02:00
< span class = "slider-value text-gray-500" > Current value : { { seed } } < / span >
< / div >
< / Card >
< / Card >
2023-08-19 01:28:40 +02:00
< / div >
< / div >
< Toast ref = "toast" / >
< / template >
< script >
2023-08-19 03:25:36 +02:00
import feather from 'feather-icons'
2023-08-19 01:28:40 +02:00
import axios from "axios" ;
import socket from '@/services/websocket.js'
import Toast from '../components/Toast.vue'
2023-08-19 19:26:15 +02:00
import MarkdownRenderer from '../components/MarkdownRenderer.vue' ;
2023-08-25 02:12:33 +02:00
import ClipBoardTextInput from "@/components/ClipBoardTextInput.vue" ;
import Card from "@/components/Card.vue"
2023-12-29 23:38:30 +01:00
import { nextTick , TransitionGroup } from 'vue'
2023-12-26 02:46:50 +01:00
const bUrl = import . meta . env . VITE _LOLLMS _API _BASEURL
2023-08-23 01:35:22 +02:00
2023-12-30 17:09:30 +01:00
import python _block from '@/assets/python_block.png' ;
import javascript _block from '@/assets/javascript_block.svg' ;
2024-01-02 00:53:49 +01:00
import json _block from '@/assets/json_block.png' ;
2023-12-30 17:09:30 +01:00
import cpp _block from '@/assets/cpp_block.png' ;
import html5 _block from '@/assets/html5_block.png' ;
import LaTeX _block from '@/assets/LaTeX_block.png' ;
import bash _block from '@/assets/bash_block.png' ;
2023-08-23 01:35:22 +02:00
async function showInputPanel ( name , default _value = "" , options = [ ] ) {
return new Promise ( ( resolve , reject ) => {
const panel = document . createElement ( "div" ) ;
panel . className = "fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50" ;
if ( options . length === 0 ) {
panel . innerHTML = `
< div class = "bg-white p-6 rounded-md shadow-md w-80" >
2023-08-23 04:21:58 +02:00
< h2 class = "text-lg font-semibold mb-3" > $ { name } < / h2 >
2023-08-23 01:35:22 +02:00
< textarea id = "replacementInput" class = "w-full h-32 border rounded p-2 mb-3" > $ { default _value } < / textarea >
< div class = "flex justify-end" >
< button id = "cancelButton" class = "mr-2 px-4 py-2 border rounded" > Cancel < / button >
< button id = "okButton" class = "px-4 py-2 bg-blue-500 text-white rounded" > OK < / button >
< / div >
< / div >
` ;
}
else {
panel . innerHTML = `
< div class = "bg-white p-6 rounded-md shadow-md w-80" >
2023-08-23 04:21:58 +02:00
< h2 class = "text-lg font-semibold mb-3" > $ { name } < / h2 >
2023-08-23 01:35:22 +02:00
< select id = "options_selector" class = "form-control w-full h-25 border rounded p-2 mb-3" >
$ { options . map ( option => ` <option value=" ${ option } "> ${ option } </option> ` ) }
< / select >
< div class = "flex justify-end" >
< button id = "cancelButton" class = "mr-2 px-4 py-2 border rounded" > Cancel < / button >
< button id = "okButton" class = "px-4 py-2 bg-blue-500 text-white rounded" > OK < / button >
< / div >
< / div >
` ;
}
document . body . appendChild ( panel ) ;
const cancelButton = panel . querySelector ( "#cancelButton" ) ;
const okButton = panel . querySelector ( "#okButton" ) ;
cancelButton . addEventListener ( "click" , ( ) => {
document . body . removeChild ( panel ) ;
resolve ( null ) ;
} ) ;
okButton . addEventListener ( "click" , ( ) => {
if ( options . length === 0 ) {
const input = panel . querySelector ( "#replacementInput" ) ;
const value = input . value . trim ( ) ;
document . body . removeChild ( panel ) ;
resolve ( value ) ;
}
else {
const input = panel . querySelector ( "#options_selector" ) ;
const value = input . value . trim ( ) ;
document . body . removeChild ( panel ) ;
resolve ( value ) ;
}
} ) ;
} ) ;
}
function replaceInText ( text , callback ) {
console . log ( text )
let replacementDict = { } ;
let delimiterRegex = /@<([^>]+)>@/g ;
let matches = [ ] ;
let match ;
while ( ( match = delimiterRegex . exec ( text ) ) !== null ) {
matches . push ( "@<" + match [ 1 ] + ">@" ) ; // The captured group is at index 1
}
console . log ( "matches" )
console . log ( matches )
matches = [ ... new Set ( matches ) ]
async function handleReplacement ( match ) {
console . log ( match )
let placeholder = match . toLowerCase ( ) . substring ( 2 , match . length - 2 ) ;
if ( placeholder !== "generation_placeholder" ) {
if ( placeholder . includes ( ":" ) ) {
2023-08-23 04:21:58 +02:00
// Special key words
let key _words _dict = {
"all_language_options" : "english:french:german:chinese:japanese:spanish:italian:russian:portuguese:swedish:danish:dutch:norwegian:slovak:czech:hungarian:polish:ukrainian:bulgarian:latvian:lithuanian:estonian:maltese:irish:galician:basque:welsh:breton:georgian:turkmen:kazakh:uzbek:tajik:afghan:sri-lankan:filipino:vietnamese:lao:cambodian:thai:burmese:kenyan:botswanan:zimbabwean:malawian:mozambican:angolan:namibian:south-african:madagascan:seychellois:mauritian:haitian:peruvian:ecuadorian:bolivian:paraguayan:chilean:argentinean:uruguayan:brazilian:colombian:venezuelan:puerto-rican:cuban:dominican:honduran:nicaraguan:salvadorean:guatemalan:el-salvadoran:belizean:panamanian:costa-rican:antiguan:barbudan:dominica's:grenada's:st-lucia's:st-vincent's:gibraltarian:faroe-islander:greenlandic:icelandic:jamaican:trinidadian:tobagonian:barbadian:anguillan:british-virgin-islander:us-virgin-islander:turkish:israeli:palestinian:lebanese:egyptian:libyan:tunisian:algerian:moroccan:bahraini:kuwaiti:saudi-arabian:yemeni:omani:irani:iraqi:afghanistan's:pakistani:indian:nepalese:sri-lankan:maldivan:burmese:thai:lao:vietnamese:kampuchean:malaysian:bruneian:indonesian:australian:new-zealanders:fijians:tongans:samoans:vanuatuans:wallisians:kiribatians:tuvaluans:solomon-islanders:marshallese:micronesians:hawaiians" ,
"all_programming_language_options" : "python:c:c++:java:javascript:php:ruby:go:swift:kotlin:rust:haskell:erlang:lisp:scheme:prolog:cobol:fortran:pascal:delphi:d:eiffel:h:basic:visual_basic:smalltalk:objective-c:html5:node.js:vue.js:svelte:react:angular:ember:clipper:stex:arduino:brainfuck:r:assembly:mason:lepton:seacat:bbc_microbit:raspberry_pi_gpio:raspberry_pi_spi:raspberry_pi_i2c:raspberry_pi_uart:raspberry_pi_adc:raspberry_pi_ddio"
}
Object . entries ( key _words _dict ) . forEach ( ( [ key , value ] ) => {
console . log ( ` Key: ${ key } , Value: ${ value } ` ) ;
function escapeRegExp ( string ) {
return string . replace ( /[.*+?^${}()|[\]\\]/g , '\\$&' ) ; // Escape special characters
}
const escapedKey = escapeRegExp ( key ) ;
const regex = new RegExp ( escapedKey , 'g' ) ;
placeholder = placeholder . replace ( regex , value ) ;
//text = text.replace(new RegExp(key, 'g'), value);
} ) ;
2023-08-23 01:35:22 +02:00
let splitResult = placeholder . split ( ":" ) ;
let name = splitResult [ 0 ] ;
let defaultValue = splitResult [ 1 ] || "" ;
let options = [ ] ;
if ( splitResult . length > 2 ) {
options = splitResult . slice ( 1 ) ;
}
let replacement = await showInputPanel ( name , defaultValue , options ) ;
if ( replacement !== null ) {
replacementDict [ match ] = replacement ;
}
}
else {
let replacement = await showInputPanel ( placeholder ) ;
if ( replacement !== null ) {
replacementDict [ match ] = replacement ;
}
}
} else {
//var result = confirm("generation placeholder found. Do you want to generate?\nIf you skip generation, you still can generate manually after wards");
}
}
let promiseChain = Promise . resolve ( ) ;
matches . forEach ( match => {
promiseChain = promiseChain . then ( ( ) => {
return handleReplacement ( match ) ;
} ) . then ( result => {
console . log ( result ) ;
} ) ;
} ) ;
promiseChain . then ( ( ) => {
Object . entries ( replacementDict ) . forEach ( ( [ key , value ] ) => {
console . log ( ` Key: ${ key } , Value: ${ value } ` ) ;
function escapeRegExp ( string ) {
return string . replace ( /[.*+?^${}()|[\]\\]/g , '\\$&' ) ; // Escape special characters
}
const escapedKey = escapeRegExp ( key ) ;
const regex = new RegExp ( escapedKey , 'g' ) ;
text = text . replace ( regex , value ) ;
//text = text.replace(new RegExp(key, 'g'), value);
} ) ;
callback ( text ) ; // Call the callback after all matches are processed
} ) ;
}
2023-08-19 01:28:40 +02:00
export default {
name : 'PlayGroundView' ,
data ( ) {
return {
2023-12-30 17:09:30 +01:00
cpp _block : cpp _block ,
html5 _block : html5 _block ,
LaTeX _block : LaTeX _block ,
javascript _block : javascript _block ,
2024-01-02 00:53:49 +01:00
json _block : json _block ,
2023-12-30 17:09:30 +01:00
python _block : python _block ,
bash _block : bash _block ,
2023-12-29 23:38:30 +01:00
isSynthesizingVoice : false ,
2023-12-26 02:46:50 +01:00
audio _url : null ,
2023-12-04 01:40:36 +01:00
mdRenderHeight : 300 ,
2023-08-25 02:12:33 +02:00
selecting _model : false ,
tab _id : "source" ,
2023-08-19 01:28:40 +02:00
generating : false ,
2023-08-21 19:29:25 +02:00
isSpeaking : false ,
voices : [ ] ,
isLesteningToVoice : false ,
2023-08-25 02:12:33 +02:00
presets : [ ] ,
selectedPreset : '' ,
2023-08-20 00:12:08 +02:00
cursorPosition : 0 ,
2023-08-19 01:28:40 +02:00
text : "" ,
2023-08-20 00:12:08 +02:00
pre _text : "" ,
post _text : "" ,
2023-08-19 01:28:40 +02:00
temperature : 0.1 ,
top _k : 50 ,
top _p : 0.9 ,
repeat _penalty : 1.3 ,
repeat _last _n : 50 ,
2023-08-19 14:06:24 +02:00
n _crop : - 1 ,
2023-08-19 03:25:36 +02:00
n _predicts : 2000 ,
2023-08-19 01:28:40 +02:00
seed : - 1 ,
2023-08-27 01:16:46 +02:00
silenceTimeout : 5000
2023-08-19 01:28:40 +02:00
} ;
} ,
2023-09-06 00:57:23 +02:00
2023-08-19 01:28:40 +02:00
components : {
Toast ,
2023-08-25 02:12:33 +02:00
MarkdownRenderer ,
ClipBoardTextInput ,
Card
2023-08-19 01:28:40 +02:00
} ,
2023-08-19 03:25:36 +02:00
mounted ( ) {
2023-08-25 02:12:33 +02:00
axios . get ( './get_presets' ) . then ( response => {
2023-08-19 01:28:40 +02:00
console . log ( response . data )
this . presets = response . data
2023-08-25 02:12:33 +02:00
this . selectedPreset = this . presets [ 0 ]
2023-08-19 03:25:36 +02:00
} ) . catch ( ex => {
this . $refs . toast . showToast ( ` Error: ${ ex } ` , 4 , false )
2023-08-19 01:28:40 +02:00
} ) ;
// Event handler for receiving generated text chunks
socket . on ( 'text_chunk' , data => {
this . appendToOutput ( data . chunk ) ;
} ) ;
// Event handler for receiving generated text chunks
socket . on ( 'text_generated' , data => {
// Toggle button visibility
this . generating = false ;
} ) ;
socket . on ( 'generation_error' , data => {
console . log ( 'generation_error:' , data ) ;
this . $refs . toast . showToast ( ` Error: ${ data } ` , 4 , false )
// Toggle button visibility
this . generating = false ;
} ) ;
// Event handler for successful connection
socket . on ( 'connect' , ( ) => {
console . log ( 'Connected to LoLLMs server' ) ;
this . $store . state . isConnected = true ;
this . generating = false
} ) ;
// Event handler for error during text generation
socket . on ( 'buzzy' , error => {
console . error ( 'Server is busy. Wait for your turn' , error ) ;
this . $refs . toast . showToast ( ` Error: ${ error . message } ` , 4 , false )
// Toggle button visibility
this . generating = false
} ) ;
// Event handler for error during text generation
socket . on ( 'generation_canceled' , error => {
// Toggle button visibility
this . generating = false
console . log ( "Generation canceled OK" )
} ) ;
2023-08-20 00:12:08 +02:00
//console.log('chatbox mnt',this.$refs)
this . $nextTick ( ( ) => {
feather . replace ( ) ;
2023-08-21 19:29:25 +02:00
} ) ;
// Speach synthesis
// Check if speech synthesis is supported by the browser
if ( 'speechSynthesis' in window ) {
this . speechSynthesis = window . speechSynthesis ;
// Load the available voices
this . voices = this . speechSynthesis . getVoices ( ) ;
// Make sure the voices are loaded before starting speech synthesis
if ( this . voices . length === 0 ) {
this . speechSynthesis . addEventListener ( 'voiceschanged' , this . onVoicesChanged ) ;
} else {
}
} else {
console . error ( 'Speech synthesis is not supported in this browser.' ) ;
}
2023-08-20 00:12:08 +02:00
} ,
created ( ) {
2023-08-19 01:28:40 +02:00
2023-12-29 23:38:30 +01:00
} ,
watch : {
audio _url ( newUrl ) {
if ( newUrl ) {
console . log ( "Audio changed url to :" , newUrl )
this . $refs . audio _player . src = newUrl ;
}
} ,
2023-08-21 19:29:25 +02:00
} ,
computed : {
2023-09-06 00:57:23 +02:00
selectedModel : {
get ( ) {
return this . $store . state . selectedModel ;
}
} ,
models : {
get ( ) {
return this . $store . state . modelsArr ;
}
} ,
2023-08-21 19:29:25 +02:00
isTalking : {
get ( ) {
return this . isSpeaking
}
} ,
2023-08-19 01:28:40 +02:00
} ,
methods : {
2023-12-30 17:09:30 +01:00
addBlock ( bloc _name ) {
console . log ( "Adding bloc :" , bloc _name )
let p = this . $refs . mdTextarea . selectionStart
if ( p == 0 || this . text [ p - 1 ] == "\n" ) {
this . text = this . text . slice ( 0 , p ) + "```" + bloc _name + "\n\n```\n" + this . text . slice ( p )
p = p + 4 + bloc _name . length
}
else {
this . text = this . text . slice ( 0 , p ) + "\n```" + bloc _name + "\n\n```\n" + this . text . slice ( p )
p = p + 3 + bloc _name . length
}
this . $refs . mdTextarea . focus ( ) ;
this . $refs . mdTextarea . selectionStart = this . $refs . mdTextarea . selectionEnd = p ;
} ,
2023-10-10 01:47:49 +02:00
insertTab ( event ) {
const textarea = event . target ;
const start = textarea . selectionStart ;
const end = textarea . selectionEnd ;
const textBefore = textarea . value . substring ( 0 , start ) ;
const textAfter = textarea . value . substring ( end ) ;
// Insert a tab character (or spaces if you prefer) at the cursor position
const newText = textBefore + ' ' + textAfter ;
// Update the textarea content and cursor position
this . text = newText ;
this . $nextTick ( ( ) => {
textarea . selectionStart = textarea . selectionEnd = start + 4 ;
} ) ;
event . preventDefault ( ) ;
} ,
2023-12-04 01:40:36 +01:00
mdTextarea _changed ( ) {
console . log ( "mdTextarea_changed" )
this . cursorPosition = this . $refs . mdTextarea . selectionStart ;
2023-08-25 21:47:28 +02:00
} ,
2023-12-04 01:40:36 +01:00
mdTextarea _clicked ( ) {
console . log ( ` mdTextarea_clicked: ${ this . $refs . mdTextarea . selectionStart } ` )
this . cursorPosition = this . $refs . mdTextarea . selectionStart ;
2023-08-25 21:47:28 +02:00
} ,
2023-08-25 02:12:33 +02:00
setModel ( ) {
this . selecting _model = true
axios . post ( "/update_setting" , {
setting _name : "model_name" ,
setting _value : this . selectedModel
} ) . then ( ( response ) => {
console . log ( response ) ;
2023-08-27 01:16:46 +02:00
if ( response . status ) {
this . $refs . toast . showToast ( ` Model changed to ${ this . selectedModel } ` , 4 , true )
}
2023-08-25 21:47:28 +02:00
this . selecting _model = false
2023-08-25 02:12:33 +02:00
} ) . catch ( err => {
this . $refs . toast . showToast ( ` Error ${ err } ` , 4 , true )
2023-08-25 21:47:28 +02:00
this . selecting _model = false
2023-08-25 02:12:33 +02:00
} ) ;
} ,
2023-08-21 19:29:25 +02:00
onVoicesChanged ( ) {
// This event will be triggered when the voices are loaded
this . voices = this . speechSynthesis . getVoices ( ) ;
} ,
2023-12-25 01:17:28 +01:00
read ( ) {
2023-12-29 23:38:30 +01:00
this . isSynthesizingVoice = true
2023-12-30 22:39:28 +01:00
axios . post ( "./text2Audio" , { text : this . text } ) . then ( response => {
2023-12-25 01:17:28 +01:00
console . log ( response . data . url )
let url = response . data . url
2023-12-26 02:46:50 +01:00
this . audio _url = bUrl + url
2023-12-29 23:38:30 +01:00
this . isSynthesizingVoice = false
nextTick ( ( ) => {
feather . replace ( )
} )
2023-12-25 01:17:28 +01:00
} ) . catch ( ex => {
this . $refs . toast . showToast ( ` Error: ${ ex } ` , 4 , false )
2023-12-29 23:38:30 +01:00
this . isSynthesizingVoice = false
nextTick ( ( ) => {
feather . replace ( )
} )
2023-12-25 01:17:28 +01:00
} ) ;
} ,
2023-08-21 19:29:25 +02:00
speak ( ) {
if ( this . msg ) {
this . speechSynthesis . cancel ( ) ;
this . msg = null ;
this . isSpeaking = false ;
return ;
}
let startIndex = 0 ;
// Set isSpeaking to true before starting synthesis
console . log ( "voice on" )
this . isSpeaking = true ;
const chunkSize = 200 ; // You can adjust the chunk size as needed
// Create a new SpeechSynthesisUtterance instance
this . msg = new SpeechSynthesisUtterance ( ) ;
this . msg . pitch = this . $store . state . config . audio _pitch ;
// Optionally, set the voice and other parameters as before
if ( this . voices . length > 0 ) {
this . msg . voice = this . voices . filter ( voice => voice . name === this . $store . state . config . audio _out _voice ) [ 0 ] ;
}
// Function to find the index of the last sentence that fits within the chunk size
const findLastSentenceIndex = ( startIndex ) => {
let txt = this . text . substring ( startIndex , startIndex + chunkSize )
// Define an array of characters that represent end of sentence markers.
2023-08-23 01:35:22 +02:00
const endOfSentenceMarkers = [ '.' , '!' , '?' , '\n' ] ;
2023-08-21 19:29:25 +02:00
// Initialize a variable to store the index of the last end of sentence marker.
let lastIndex = - 1 ;
// Iterate through the end of sentence markers and find the last occurrence in the txt string.
endOfSentenceMarkers . forEach ( marker => {
const markerIndex = txt . lastIndexOf ( marker ) ;
if ( markerIndex > lastIndex ) {
lastIndex = markerIndex ;
}
} ) ;
if ( lastIndex == - 1 ) { lastIndex = txt . length }
console . log ( lastIndex )
return lastIndex + startIndex + 1 ;
} ;
// Function to speak a chunk of text
const speakChunk = ( ) => {
const endIndex = findLastSentenceIndex ( startIndex ) ;
const chunk = this . text . substring ( startIndex , endIndex ) ;
this . msg . text = chunk ;
startIndex = endIndex + 1 ;
this . msg . onend = ( event ) => {
if ( startIndex < this . text . length - 2 ) {
// Use setTimeout to add a brief delay before speaking the next chunk
setTimeout ( ( ) => {
speakChunk ( ) ;
} , 1 ) ; // Adjust the delay as needed
} else {
this . isSpeaking = false ;
console . log ( "voice off :" , this . text . length , " " , endIndex )
}
} ;
this . speechSynthesis . speak ( this . msg ) ;
} ;
// Speak the first chunk
speakChunk ( ) ;
} ,
2023-08-20 00:12:08 +02:00
getCursorPosition ( ) {
2023-12-04 01:40:36 +01:00
return this . $refs . mdTextarea . selectionStart ;
2023-08-20 00:12:08 +02:00
} ,
2023-08-19 01:28:40 +02:00
appendToOutput ( chunk ) {
2023-08-20 00:12:08 +02:00
this . pre _text += chunk
this . text = this . pre _text + this . post _text
2023-08-19 01:28:40 +02:00
} ,
2023-08-25 02:12:33 +02:00
generate _in _placeholder ( ) {
console . log ( "Finding cursor position" )
// Find next placeholder @<generation_placeholder>@
let index = this . text . indexOf ( "@<generation_placeholder>@" )
if ( index < 0 ) {
this . $refs . toast . showToast ( ` No generation placeholder found ` , 4 , false )
return
}
this . text = this . text . substring ( 0 , index ) + this . text . substring ( index + "@<generation_placeholder>@" . length , this . text . length )
this . pre _text = this . text . substring ( 0 , index )
this . post _text = this . text . substring ( index , this . text . length )
var prompt = this . text . substring ( 0 , index )
console . log ( prompt )
// Trigger the 'generate_text' event with the prompt
socket . emit ( 'generate_text' , { prompt : prompt , personality : - 1 , n _predicts : this . n _predicts , n _crop : this . n _crop ,
parameters : {
temperature : this . temperature ,
top _k : this . top _k ,
top _p : this . top _p ,
repeat _penalty : this . repeat _penalty , // Update with desired repeat penalty value
repeat _last _n : this . repeat _last _n , // Update with desired repeat_last_n value
seed : parseInt ( this . seed )
} } ) ;
// Toggle button visibility
this . generating = true
} ,
2023-08-19 01:28:40 +02:00
generate ( ) {
2023-08-20 00:12:08 +02:00
console . log ( "Finding cursor position" )
this . pre _text = this . text . substring ( 0 , this . getCursorPosition ( ) )
this . post _text = this . text . substring ( this . getCursorPosition ( ) , this . text . length )
var prompt = this . text . substring ( 0 , this . getCursorPosition ( ) )
2023-12-04 01:40:36 +01:00
console . log ( this . text )
console . log ( ` cursor position : ${ this . getCursorPosition ( ) } ` )
console . log ( ` pretext: ${ this . pre _text } ` )
console . log ( ` post_text: ${ this . post _text } ` )
console . log ( ` prompt: ${ prompt } ` )
2023-08-19 01:28:40 +02:00
// Trigger the 'generate_text' event with the prompt
2023-08-19 14:06:24 +02:00
socket . emit ( 'generate_text' , { prompt : prompt , personality : - 1 , n _predicts : this . n _predicts , n _crop : this . n _crop ,
2023-08-19 01:28:40 +02:00
parameters : {
temperature : this . temperature ,
top _k : this . top _k ,
top _p : this . top _p ,
repeat _penalty : this . repeat _penalty , // Update with desired repeat penalty value
repeat _last _n : this . repeat _last _n , // Update with desired repeat_last_n value
seed : parseInt ( this . seed )
} } ) ;
// Toggle button visibility
this . generating = true
} ,
stopGeneration ( ) {
// Trigger the 'cancel_generation' event
2023-08-19 14:06:24 +02:00
socket . emit ( 'cancel_text_generation' , { } ) ;
2023-08-19 01:28:40 +02:00
} ,
exportText ( ) {
2023-08-19 03:25:36 +02:00
const textToExport = this . text ;
const element = document . createElement ( 'a' ) ;
const file = new Blob ( [ textToExport ] , { type : 'text/plain' } ) ;
element . href = URL . createObjectURL ( file ) ;
element . download = 'exported_text.txt' ;
document . body . appendChild ( element ) ;
element . click ( ) ;
document . body . removeChild ( element ) ;
2023-08-19 01:28:40 +02:00
} ,
2023-08-21 01:31:05 +02:00
importText ( ) {
const inputFile = document . getElementById ( "import-input" ) ;
if ( ! inputFile ) return ; // If the element doesn't exist, do nothing
inputFile . addEventListener ( "change" , event => {
if ( event . target . files && event . target . files [ 0 ] ) {
const reader = new FileReader ( ) ;
reader . onload = ( ) => {
this . text = reader . result ;
} ;
reader . readAsText ( event . target . files [ 0 ] ) ;
} else {
alert ( "Please select a file." ) ;
}
} ) ;
inputFile . click ( ) ;
} ,
2023-08-19 01:28:40 +02:00
setPreset ( ) {
2023-08-25 02:12:33 +02:00
console . log ( "Setting preset" )
console . log ( this . selectedPreset )
2023-08-27 20:15:31 +02:00
this . tab _id = 'render'
2023-08-25 02:12:33 +02:00
this . text = replaceInText ( this . selectedPreset . content , ( text ) => {
2023-08-23 01:35:22 +02:00
console . log ( "Done" )
console . log ( text ) ;
this . text = text
} ) ;
2023-08-19 01:28:40 +02:00
} ,
2023-08-23 01:35:22 +02:00
2023-08-19 01:28:40 +02:00
addPreset ( ) {
let title = prompt ( 'Enter the title of the preset:' ) ;
2023-08-25 02:12:33 +02:00
this . presets [ title ] = {
name : title ,
content : this . text
}
axios . post ( "./add_preset" , this . presets [ title ] ) . then ( response => {
console . log ( response . data )
} ) . catch ( ex => {
this . $refs . toast . showToast ( ` Error: ${ ex } ` , 4 , false )
} ) ;
2023-08-19 01:28:40 +02:00
} ,
removePreset ( ) {
if ( this . selectedPreset ) {
2023-08-25 02:12:33 +02:00
delete this . presets [ this . selectedPreset . name ] ;
2023-08-19 01:28:40 +02:00
}
} ,
2023-08-19 03:25:36 +02:00
reloadPresets ( ) {
2023-08-25 02:12:33 +02:00
axios . get ( './get_presets' ) . then ( response => {
2023-08-19 03:25:36 +02:00
console . log ( response . data )
this . presets = response . data
2023-08-25 02:12:33 +02:00
this . selectedPreset = this . presets [ 0 ]
2023-08-19 03:25:36 +02:00
} ) . catch ( ex => {
this . $refs . toast . showToast ( ` Error: ${ ex } ` , 4 , false )
} ) ;
} ,
2023-08-21 19:29:25 +02:00
startSpeechRecognition ( ) {
if ( 'SpeechRecognition' in window || 'webkitSpeechRecognition' in window ) {
this . recognition = new ( window . SpeechRecognition || window . webkitSpeechRecognition ) ( ) ;
this . recognition . lang = this . $store . state . config . audio _in _language ; // Set the language, adjust as needed
this . recognition . interimResults = true ; // Enable interim results to get real-time updates
this . recognition . onstart = ( ) => {
this . isLesteningToVoice = true ;
this . silenceTimer = setTimeout ( ( ) => {
this . recognition . stop ( ) ;
} , this . silenceTimeout ) ; // Set the silence timeout to stop recognition
} ;
this . pre _text = this . text . substring ( 0 , this . getCursorPosition ( ) )
this . post _text = this . text . substring ( this . getCursorPosition ( ) , this . text . length )
this . recognition . onresult = ( event ) => {
this . generated = '' ;
for ( let i = event . resultIndex ; i < event . results . length ; i ++ ) {
this . generated += event . results [ i ] [ 0 ] . transcript ;
}
this . text = this . pre _text + this . generated + this . post _text ; // Update the textarea with the real-time recognized words
this . cursorPosition = this . pre _text . length + this . generated . length ;
clearTimeout ( this . silenceTimer ) ; // Clear the silence timeout on every recognized result
this . silenceTimer = setTimeout ( ( ) => {
this . recognition . stop ( ) ;
} , this . silenceTimeout ) ; // Set a new silence timeout after every recognized result
} ;
this . recognition . onerror = ( event ) => {
console . error ( 'Speech recognition error:' , event . error ) ;
this . isLesteningToVoice = false ;
clearTimeout ( this . silenceTimer ) ; // Clear the silence timeout on error
} ;
this . recognition . onend = ( ) => {
console . log ( 'Speech recognition ended.' ) ;
this . isLesteningToVoice = false ;
this . pre _text = this . pre _text + this . generated ;
this . cursorPosition = this . pre _text . length ;
clearTimeout ( this . silenceTimer ) ; // Clear the silence timeout when recognition ends normally
} ;
this . recognition . start ( ) ;
} else {
console . error ( 'Speech recognition is not supported in this browser.' ) ;
}
} ,
2023-08-19 01:28:40 +02:00
}
} ;
< / script >
< style >
select {
width : 200 px ;
}
body {
background - color : # fafafa ;
font - family : sans - serif ;
}
. container {
margin : 4 px auto ;
width : 800 px ;
}
. settings {
position : fixed ;
top : 0 ;
right : 0 ;
width : 250 px ;
background - color : # fff ;
z - index : 1000 ;
display : none ;
}
. settings - button {
cursor : pointer ;
padding : 10 px ;
border : 1 px solid # ddd ;
border - radius : 5 px ;
color : # 333 ;
font - size : 14 px ;
}
. settings - button : hover {
background - color : # eee ;
}
. settings - button : active {
background - color : # ddd ;
}
. slider - container {
margin - top : 20 px ;
}
. slider - value {
display : inline - block ;
margin - left : 10 px ;
color : # 6 b7280 ;
font - size : 14 px ;
}
. small - button {
padding : 0.5 rem 0.75 rem ;
font - size : 0.875 rem ;
}
< / style >
