2024-01-30 18:15:05 +00:00
const char index_html [ ] = R " LITERAL(
< html >
< head >
< meta charset = " UTF-8 " >
< meta name = " viewport " content = " width=device-width, initial-scale=1, maximum-scale=1 " / >
< meta name = " color-scheme " content = " light dark " >
< title > llama . cpp - chat < / title >
< style >
body {
font - family : system - ui ;
font - size : 90 % ;
}
# container {
margin : 0 em auto ;
display : flex ;
flex - direction : column ;
justify - content : space - between ;
height : 100 % ;
}
main {
margin : 3 px ;
display : flex ;
flex - direction : column ;
justify - content : space - between ;
gap : 1 em ;
flex - grow : 1 ;
overflow - y : auto ;
border : 1 px solid # ccc ;
border - radius : 5 px ;
padding : 0.5 em ;
}
body {
max - width : 600 px ;
min - width : 300 px ;
line - height : 1.2 ;
margin : 0 auto ;
padding : 0 0.5 em ;
}
p {
overflow - wrap : break - word ;
word - wrap : break - word ;
hyphens : auto ;
margin - top : 0.5 em ;
margin - bottom : 0.5 em ;
}
# write form {
margin : 1 em 0 0 0 ;
display : flex ;
flex - direction : column ;
gap : 0.5 em ;
align - items : stretch ;
}
. right {
display : flex ;
flex - direction : row ;
gap : 0.5 em ;
justify - content : flex - end ;
}
fieldset {
border : none ;
padding : 0 ;
margin : 0 ;
}
fieldset . two {
display : grid ;
grid - template : " a a " ;
gap : 1 em ;
}
fieldset . three {
display : grid ;
grid - template : " a a a " ;
gap : 1 em ;
}
details {
border : 1 px solid # aaa ;
border - radius : 4 px ;
padding : 0.5 em 0.5 em 0 ;
margin - top : 0.5 em ;
}
summary {
font - weight : bold ;
margin : - 0.5 em - 0.5 em 0 ;
padding : 0.5 em ;
cursor : pointer ;
}
details [ open ] {
padding : 0.5 em ;
}
. prob - set {
padding : 0.3 em ;
border - bottom : 1 px solid # ccc ;
}
. popover - content {
position : absolute ;
background - color : white ;
padding : 0.2 em ;
box - shadow : 0 0 10 px rgba ( 0 , 0 , 0 , 0.1 ) ;
}
textarea {
padding : 5 px ;
flex - grow : 1 ;
width : 100 % ;
}
pre code {
display : block ;
background - color : # 222 ;
color : # ddd ;
}
code {
font - family : monospace ;
padding : 0.1 em 0.3 em ;
border - radius : 3 px ;
}
fieldset label {
margin : 0.5 em 0 ;
display : block ;
}
fieldset label . slim {
margin : 0 0.5 em ;
display : inline ;
}
header ,
footer {
text - align : center ;
}
footer {
font - size : 80 % ;
color : # 888 ;
}
. mode - chat textarea [ name = prompt ] {
height : 4.5 em ;
}
. mode - completion textarea [ name = prompt ] {
height : 10 em ;
}
[ contenteditable ] {
display : inline - block ;
white - space : pre - wrap ;
outline : 0 px solid transparent ;
}
@ keyframes loading - bg - wipe {
0 % {
background - position : 0 % ;
}
100 % {
background - position : 100 % ;
}
}
. loading {
- - loading - color - 1 : # eeeeee00 ;
- - loading - color - 2 : # eeeeeeff ;
background - size : 50 % 100 % ;
background - image : linear - gradient ( 90 deg , var ( - - loading - color - 1 ) , var ( - - loading - color - 2 ) , var ( - - loading - color - 1 ) ) ;
animation : loading - bg - wipe 2 s linear infinite ;
}
@ media ( prefers - color - scheme : dark ) {
. loading {
- - loading - color - 1 : # 22222200 ;
- - loading - color - 2 : # 222222ff ;
}
. popover - content {
background - color : black ;
}
}
< / style >
< script type = " module " >
import {
html , h , signal , effect , computed , render , useSignal , useEffect , useRef , Component
} from ' / index . js ' ;
import { llama } from ' / completion . js ' ;
import { SchemaConverter } from ' / json - schema - to - grammar . mjs ' ;
let selected_image = false ;
var slot_id = - 1 ;
const session = signal ( {
prompt : " This is a conversation between User and Llama, a friendly chatbot. Llama is helpful, kind, honest, good at writing, and never fails to answer any requests immediately and with precision. " ,
template : " {{prompt}} \n \n {{history}} \n {{char}}: " ,
historyTemplate : " {{name}}: {{message}} " ,
transcript : [ ] ,
type : " chat " , // "chat" | "completion"
char : " Llama " ,
user : " User " ,
image_selected : ' '
} )
const params = signal ( {
n_predict : 400 ,
temperature : 0.7 ,
repeat_last_n : 256 , // 0 = disable penalty, -1 = context size
repeat_penalty : 1.18 , // 1.0 = disabled
top_k : 40 , // <= 0 to use vocab size
top_p : 0.95 , // 1.0 = disabled
min_p : 0.05 , // 0 = disabled
tfs_z : 1.0 , // 1.0 = disabled
typical_p : 1.0 , // 1.0 = disabled
presence_penalty : 0.0 , // 0.0 = disabled
frequency_penalty : 0.0 , // 0.0 = disabled
mirostat : 0 , // 0/1/2
mirostat_tau : 5 , // target entropy
mirostat_eta : 0.1 , // learning rate
grammar : ' ' ,
n_probs : 0 , // no completion_probabilities,
image_data : [ ] ,
cache_prompt : true ,
api_key : ' '
} )
/* START: Support for storing prompt templates and parameters in browsers LocalStorage */
const local_storage_storageKey = " llamacpp_server_local_storage " ;
function local_storage_setDataFromObject ( tag , content ) {
localStorage . setItem ( local_storage_storageKey + ' / ' + tag , JSON . stringify ( content ) ) ;
}
function local_storage_setDataFromRawText ( tag , content ) {
localStorage . setItem ( local_storage_storageKey + ' / ' + tag , content ) ;
}
function local_storage_getDataAsObject ( tag ) {
const item = localStorage . getItem ( local_storage_storageKey + ' / ' + tag ) ;
if ( ! item ) {
return null ;
} else {
return JSON . parse ( item ) ;
}
}
function local_storage_getDataAsRawText ( tag ) {
const item = localStorage . getItem ( local_storage_storageKey + ' / ' + tag ) ;
if ( ! item ) {
return null ;
} else {
return item ;
}
}
// create a container for user templates and settings
const savedUserTemplates = signal ( { } )
const selectedUserTemplate = signal ( { name : ' ' , template : { session : { } , params : { } } } )
// let's import locally saved templates and settings if there are any
// user templates and settings are stored in one object
// in form of { "templatename": "templatedata" } and { "settingstemplatename":"settingsdata" }
console . log ( ' Importing saved templates ' )
let importedTemplates = local_storage_getDataAsObject ( ' user_templates ' )
if ( importedTemplates ) {
// saved templates were successfully imported.
console . log ( ' Processing saved templates and updating default template ' )
params . value = { . . . params . value , image_data : [ ] } ;
//console.log(importedTemplates);
savedUserTemplates . value = importedTemplates ;
//override default template
savedUserTemplates . value . default = { session : session . value , params : params . value }
local_storage_setDataFromObject ( ' user_templates ' , savedUserTemplates . value )
} else {
// no saved templates detected.
console . log ( ' Initializing LocalStorage and saving default template ' )
savedUserTemplates . value = { " default " : { session : session . value , params : params . value } }
local_storage_setDataFromObject ( ' user_templates ' , savedUserTemplates . value )
}
function userTemplateResetToDefault ( ) {
console . log ( ' Resetting template to default ' )
selectedUserTemplate . value . name = ' default ' ;
selectedUserTemplate . value . data = savedUserTemplates . value [ ' default ' ] ;
}
function userTemplateApply ( t ) {
session . value = t . data . session ;
session . value = { . . . session . value , image_selected : ' ' } ;
params . value = t . data . params ;
params . value = { . . . params . value , image_data : [ ] } ;
}
function userTemplateResetToDefaultAndApply ( ) {
userTemplateResetToDefault ( )
userTemplateApply ( selectedUserTemplate . value )
}
function userTemplateLoadAndApplyAutosaved ( ) {
// get autosaved last used template
let lastUsedTemplate = local_storage_getDataAsObject ( ' user_templates_last ' )
if ( lastUsedTemplate ) {
console . log ( ' Autosaved template found , restoring ' )
selectedUserTemplate . value = lastUsedTemplate
}
else {
console . log ( ' No autosaved template found , using default template ' )
// no autosaved last used template was found, so load from default.
userTemplateResetToDefault ( )
}
console . log ( ' Applying template ' )
// and update internal data from templates
userTemplateApply ( selectedUserTemplate . value )
}
//console.log(savedUserTemplates.value)
//console.log(selectedUserTemplate.value)
function userTemplateAutosave ( ) {
console . log ( ' Template Autosave . . . ' )
if ( selectedUserTemplate . value . name = = ' default ' ) {
// we don't want to save over default template, so let's create a new one
let newTemplateName = ' UserTemplate - ' + Date . now ( ) . toString ( )
let newTemplate = { ' name ' : newTemplateName , ' data ' : { ' session ' : session . value , ' params ' : params . value } }
console . log ( ' Saving as ' + newTemplateName )
// save in the autosave slot
local_storage_setDataFromObject ( ' user_templates_last ' , newTemplate )
// and load it back and apply
userTemplateLoadAndApplyAutosaved ( )
} else {
local_storage_setDataFromObject ( ' user_templates_last ' , { ' name ' : selectedUserTemplate . value . name , ' data ' : { ' session ' : session . value , ' params ' : params . value } } )
}
}
console . log ( ' Checking for autosaved last used template ' )
userTemplateLoadAndApplyAutosaved ( )
/* END: Support for storing prompt templates and parameters in browsers LocalStorage */
const llamaStats = signal ( null )
const controller = signal ( null )
// currently generating a completion?
const generating = computed ( ( ) = > controller . value ! = null )
// has the user started a chat?
const chatStarted = computed ( ( ) = > session . value . transcript . length > 0 )
const transcriptUpdate = ( transcript ) = > {
session . value = {
. . . session . value ,
transcript
}
}
// simple template replace
const template = ( str , extraSettings ) = > {
let settings = session . value ;
if ( extraSettings ) {
settings = { . . . settings , . . . extraSettings } ;
}
return String ( str ) . replaceAll ( / \ { \ { ( . * ? ) \ } \ } / g , ( _ , key ) = > template ( settings [ key ] ) ) ;
}
async function runLlama ( prompt , llamaParams , char ) {
const currentMessages = [ ] ;
const history = session . value . transcript ;
if ( controller . value ) {
throw new Error ( " already running " ) ;
}
controller . value = new AbortController ( ) ;
for await ( const chunk of llama ( prompt , llamaParams , { controller : controller . value } ) ) {
const data = chunk . data ;
if ( data . stop ) {
while (
currentMessages . length > 0 & &
currentMessages [ currentMessages . length - 1 ] . content . match ( / \ n $ / ) ! = null
) {
currentMessages . pop ( ) ;
}
transcriptUpdate ( [ . . . history , [ char , currentMessages ] ] )
console . log ( " Completion finished: ' " , currentMessages . map ( msg = > msg . content ) . join ( ' ' ) , " ', summary: " , data ) ;
} else {
currentMessages . push ( data ) ;
slot_id = data . slot_id ;
if ( selected_image & & ! data . multimodal ) {
alert ( " The server was not compiled for multimodal or the model projector can't be loaded. " ) ;
return ;
}
transcriptUpdate ( [ . . . history , [ char , currentMessages ] ] )
}
if ( data . timings ) {
llamaStats . value = data ;
}
}
controller . value = null ;
}
// send message to server
const chat = async ( msg ) = > {
if ( controller . value ) {
console . log ( ' already running . . . ' ) ;
return ;
}
transcriptUpdate ( [ . . . session . value . transcript , [ " {{user}} " , msg ] ] )
let prompt = template ( session . value . template , {
message : msg ,
history : session . value . transcript . flatMap (
( [ name , data ] ) = >
template (
session . value . historyTemplate ,
{
name ,
message : Array . isArray ( data ) ?
data . map ( msg = > msg . content ) . join ( ' ' ) . replace ( / ^ \ s / , ' ' ) :
data ,
}
)
) . join ( " \n " ) ,
} ) ;
if ( selected_image ) {
prompt = ` A chat between a curious human and an artificial intelligence assistant . The assistant gives helpful , detailed , and polite answers to the human ' s questions . \ nUSER : [ img - 10 ] $ { msg } \ nASSISTANT : ` ;
}
await runLlama ( prompt , {
. . . params . value ,
slot_id : slot_id ,
stop : [ " </s> " , template ( " {{char}}: " ) , template ( " {{user}}: " ) ] ,
} , " {{char}} " ) ;
}
const runCompletion = ( ) = > {
if ( controller . value ) {
console . log ( ' already running . . . ' ) ;
return ;
}
const { prompt } = session . value ;
transcriptUpdate ( [ . . . session . value . transcript , [ " " , prompt ] ] ) ;
runLlama ( prompt , {
. . . params . value ,
slot_id : slot_id ,
stop : [ ] ,
} , " " ) . finally ( ( ) = > {
session . value . prompt = session . value . transcript . map ( ( [ _ , data ] ) = >
Array . isArray ( data ) ? data . map ( msg = > msg . content ) . join ( ' ' ) : data
) . join ( ' ' ) ;
session . value . transcript = [ ] ;
} )
}
const stop = ( e ) = > {
e . preventDefault ( ) ;
if ( controller . value ) {
controller . value . abort ( ) ;
controller . value = null ;
}
}
const reset = ( e ) = > {
stop ( e ) ;
transcriptUpdate ( [ ] ) ;
}
const uploadImage = ( e ) = > {
e . preventDefault ( ) ;
document . getElementById ( " fileInput " ) . click ( ) ;
document . getElementById ( " fileInput " ) . addEventListener ( " change " , function ( event ) {
const selectedFile = event . target . files [ 0 ] ;
if ( selectedFile ) {
const reader = new FileReader ( ) ;
reader . onload = function ( ) {
const image_data = reader . result ;
session . value = { . . . session . value , image_selected : image_data } ;
params . value = {
. . . params . value , image_data : [
{ data : image_data . replace ( / data : image \ / [ ^ ; ] + ; base64 , / , ' ' ) , id : 10 } ]
}
} ;
selected_image = true ;
reader . readAsDataURL ( selectedFile ) ;
}
} ) ;
}
function MessageInput ( ) {
const message = useSignal ( " " )
const submit = ( e ) = > {
stop ( e ) ;
chat ( message . value ) ;
message . value = " " ;
}
const enterSubmits = ( event ) = > {
if ( event . which = = = 13 & & ! event . shiftKey ) {
submit ( event ) ;
}
}
return html `
< form onsubmit = $ { submit } >
< div >
< textarea
className = $ { generating . value ? " loading " : null }
oninput = $ { ( e ) = > message . value = e . target . value }
onkeypress = $ { enterSubmits }
placeholder = " Say something... "
rows = 2
type = " text "
value = " ${message} "
/ >
< / div >
< div class = " right " >
< button type = " submit " disabled = $ { generating . value } > Send < / button >
< button onclick = $ { uploadImage } > Upload Image < / button >
< button onclick = $ { stop } disabled = $ { ! generating . value } > Stop < / button >
< button onclick = $ { reset } > Reset < / button >
< / div >
< / form >
`
}
function CompletionControls ( ) {
const submit = ( e ) = > {
stop ( e ) ;
runCompletion ( ) ;
}
return html `
< div >
< button onclick = $ { submit } type = " button " disabled = $ { generating . value } > Start < / button >
< button onclick = $ { stop } disabled = $ { ! generating . value } > Stop < / button >
< button onclick = $ { reset } > Reset < / button >
< / div > ` ;
}
const ChatLog = ( props ) = > {
const messages = session . value . transcript ;
const container = useRef ( null )
useEffect ( ( ) = > {
// scroll to bottom (if needed)
const parent = container . current . parentElement ;
if ( parent & & parent . scrollHeight < = parent . scrollTop + parent . offsetHeight + 300 ) {
parent . scrollTo ( 0 , parent . scrollHeight )
}
} , [ messages ] )
const isCompletionMode = session . value . type = = = ' completion '
const chatLine = ( [ user , data ] , index ) = > {
let message
const isArrayMessage = Array . isArray ( data )
if ( params . value . n_probs > 0 & & isArrayMessage ) {
message = html ` < $ { Probabilities } data = $ { data } / > `
} else {
const text = isArrayMessage ?
data . map ( msg = > msg . content ) . join ( ' ' ) . replace ( / ^ \ s + / , ' ' ) :
data ;
message = isCompletionMode ?
text :
html ` < $ { Markdownish } text = $ { template ( text ) } / > `
}
if ( user ) {
return html ` < p key = $ { index } > < strong > $ { template ( user ) } : < / strong > $ { message } < / p > `
} else {
return isCompletionMode ?
html ` < span key = $ { index } > $ { message } < / span > ` :
html ` < p key = $ { index } > $ { message } < / p > `
}
} ;
const handleCompletionEdit = ( e ) = > {
session . value . prompt = e . target . innerText ;
session . value . transcript = [ ] ;
}
return html `
< div id = " chat " ref = $ { container } key = $ { messages . length } >
< img style = " width: 60%;${!session.value.image_selected ? `display: none;` : ``} " src = " ${session.value.image_selected} " / >
< span contenteditable = $ { isCompletionMode } ref = $ { container } oninput = $ { handleCompletionEdit } >
$ { messages . flatMap ( chatLine ) }
< / span >
< / div > ` ;
} ;
const ConfigForm = ( props ) = > {
const updateSession = ( el ) = > session . value = { . . . session . value , [ el . target . name ] : el . target . value }
const updateParams = ( el ) = > params . value = { . . . params . value , [ el . target . name ] : el . target . value }
const updateParamsFloat = ( el ) = > params . value = { . . . params . value , [ el . target . name ] : parseFloat ( el . target . value ) }
const updateParamsInt = ( el ) = > params . value = { . . . params . value , [ el . target . name ] : Math . floor ( parseFloat ( el . target . value ) ) }
const grammarJsonSchemaPropOrder = signal ( ' ' )
const updateGrammarJsonSchemaPropOrder = ( el ) = > grammarJsonSchemaPropOrder . value = el . target . value
const convertJSONSchemaGrammar = ( ) = > {
try {
const schema = JSON . parse ( params . value . grammar )
const converter = new SchemaConverter (
grammarJsonSchemaPropOrder . value
. split ( ' , ' )
. reduce ( ( acc , cur , i ) = > ( { . . . acc , [ cur . trim ( ) ] : i } ) , { } )
)
converter . visit ( schema , ' ' )
params . value = {
. . . params . value ,
grammar : converter . formatGrammar ( ) ,
}
} catch ( e ) {
alert ( ` Convert failed : $ { e . message } ` )
}
}
const FloatField = ( { label , max , min , name , step , value } ) = > {
return html `
< div >
< label for = " ${name} " > $ { label } < / label >
< input type = " range " id = " ${name} " min = " ${min} " max = " ${max} " step = " ${step} " name = " ${name} " value = " ${value} " oninput = $ { updateParamsFloat } / >
< span > $ { value } < / span >
< / div >
`
} ;
const IntField = ( { label , max , min , name , value } ) = > {
return html `
< div >
< label for = " ${name} " > $ { label } < / label >
< input type = " range " id = " ${name} " min = " ${min} " max = " ${max} " name = " ${name} " value = " ${value} " oninput = $ { updateParamsInt } / >
< span > $ { value } < / span >
< / div >
`
} ;
const userTemplateReset = ( e ) = > {
e . preventDefault ( ) ;
userTemplateResetToDefaultAndApply ( )
}
const UserTemplateResetButton = ( ) = > {
if ( selectedUserTemplate . value . name = = ' default ' ) {
return html `
< button disabled > Using default template < / button >
`
}
return html `
< button onclick = $ { userTemplateReset } > Reset all to default < / button >
`
} ;
useEffect ( ( ) = > {
// autosave template on every change
userTemplateAutosave ( )
} , [ session . value , params . value ] )
const GrammarControl = ( ) = > (
html `
< div >
< label for = " template " > Grammar < / label >
< textarea id = " grammar " name = " grammar " placeholder = " Use gbnf or JSON Schema+convert " value = " ${params.value.grammar} " rows = 4 oninput = $ { updateParams } / >
< input type = " text " name = " prop-order " placeholder = " order: prop1,prop2,prop3 " oninput = $ { updateGrammarJsonSchemaPropOrder } / >
< button type = " button " onclick = $ { convertJSONSchemaGrammar } > Convert JSON Schema < / button >
< / div >
`
) ;
const PromptControlFieldSet = ( ) = > (
html `
< fieldset >
< div >
< label htmlFor = " prompt " > Prompt < / label >
< textarea type = " text " name = " prompt " value = " ${session.value.prompt} " oninput = $ { updateSession } / >
< / div >
< / fieldset >
`
) ;
const ChatConfigForm = ( ) = > (
html `
$ { PromptControlFieldSet ( ) }
< fieldset class = " two " >
< div >
< label for = " user " > User name < / label >
< input type = " text " name = " user " value = " ${session.value.user} " oninput = $ { updateSession } / >
< / div >
< div >
< label for = " bot " > Bot name < / label >
< input type = " text " name = " char " value = " ${session.value.char} " oninput = $ { updateSession } / >
< / div >
< / fieldset >
< fieldset >
< div >
< label for = " template " > Prompt template < / label >
< textarea id = " template " name = " template " value = " ${session.value.template} " rows = 4 oninput = $ { updateSession } / >
< / div >
< div >
< label for = " template " > Chat history template < / label >
< textarea id = " template " name = " historyTemplate " value = " ${session.value.historyTemplate} " rows = 1 oninput = $ { updateSession } / >
< / div >
$ { GrammarControl ( ) }
< / fieldset >
`
) ;
const CompletionConfigForm = ( ) = > (
html `
$ { PromptControlFieldSet ( ) }
< fieldset > $ { GrammarControl ( ) } < / fieldset >
`
) ;
return html `
< form >
< fieldset class = " two " >
< $ { UserTemplateResetButton } / >
< div >
< label class = " slim " ><input type= " radio " name= " type " value= " chat " checked=${session.value.type === " chat " } oninput=${updateSession} /> Chat</label>
< label class = " slim " ><input type= " radio " name= " type " value= " completion " checked=${session.value.type === " completion " } oninput=${updateSession} /> Completion</label>
< / div >
< / fieldset >
$ { session . value . type = = = ' chat ' ? ChatConfigForm ( ) : CompletionConfigForm ( ) }
< fieldset class = " two " >
$ { IntField ( { label : " Predictions " , max : 2048 , min : - 1 , name : " n_predict " , value : params . value . n_predict } ) }
$ { FloatField ( { label : " Temperature " , max : 2.0 , min : 0.0 , name : " temperature " , step : 0.01 , value : params . value . temperature } ) }
$ { FloatField ( { label : " Penalize repeat sequence " , max : 2.0 , min : 0.0 , name : " repeat_penalty " , step : 0.01 , value : params . value . repeat_penalty } ) }
$ { IntField ( { label : " Consider N tokens for penalize " , max : 2048 , min : 0 , name : " repeat_last_n " , value : params . value . repeat_last_n } ) }
$ { IntField ( { label : " Top-K sampling " , max : 100 , min : - 1 , name : " top_k " , value : params . value . top_k } ) }
$ { FloatField ( { label : " Top-P sampling " , max : 1.0 , min : 0.0 , name : " top_p " , step : 0.01 , value : params . value . top_p } ) }
$ { FloatField ( { label : " Min-P sampling " , max : 1.0 , min : 0.0 , name : " min_p " , step : 0.01 , value : params . value . min_p } ) }
< / fieldset >
< details >
< summary > More options < / summary >
< fieldset class = " two " >
$ { FloatField ( { label : " TFS-Z " , max : 1.0 , min : 0.0 , name : " tfs_z " , step : 0.01 , value : params . value . tfs_z } ) }
$ { FloatField ( { label : " Typical P " , max : 1.0 , min : 0.0 , name : " typical_p " , step : 0.01 , value : params . value . typical_p } ) }
$ { FloatField ( { label : " Presence penalty " , max : 1.0 , min : 0.0 , name : " presence_penalty " , step : 0.01 , value : params . value . presence_penalty } ) }
$ { FloatField ( { label : " Frequency penalty " , max : 1.0 , min : 0.0 , name : " frequency_penalty " , step : 0.01 , value : params . value . frequency_penalty } ) }
< / fieldset >
< hr / >
< fieldset class = " three " >
< div >
< label > < input type = " radio " name = " mirostat " value = " 0 " checked = $ { params . value . mirostat = = 0 } oninput = $ { updateParamsInt } / > no Mirostat < / label >
< label > < input type = " radio " name = " mirostat " value = " 1 " checked = $ { params . value . mirostat = = 1 } oninput = $ { updateParamsInt } / > Mirostat v1 < / label >
< label > < input type = " radio " name = " mirostat " value = " 2 " checked = $ { params . value . mirostat = = 2 } oninput = $ { updateParamsInt } / > Mirostat v2 < / label >
< / div >
$ { FloatField ( { label : " Mirostat tau " , max : 10.0 , min : 0.0 , name : " mirostat_tau " , step : 0.01 , value : params . value . mirostat_tau } ) }
$ { FloatField ( { label : " Mirostat eta " , max : 1.0 , min : 0.0 , name : " mirostat_eta " , step : 0.01 , value : params . value . mirostat_eta } ) }
< / fieldset >
< fieldset >
$ { IntField ( { label : " Show Probabilities " , max : 10 , min : 0 , name : " n_probs " , value : params . value . n_probs } ) }
< / fieldset >
< fieldset >
< label for = " api_key " > API Key < / label >
< input type = " text " name = " api_key " value = " ${params.value.api_key} " placeholder = " Enter API key " oninput = $ { updateParams } / >
< / fieldset >
< / details >
< / form >
`
}
const probColor = ( p ) = > {
const r = Math . floor ( 192 * ( 1 - p ) ) ;
const g = Math . floor ( 192 * p ) ;
return ` rgba ( $ { r } , $ { g } , 0 , 0.3 ) ` ;
}
const Probabilities = ( params ) = > {
return params . data . map ( msg = > {
const { completion_probabilities } = msg ;
if (
! completion_probabilities | |
completion_probabilities . length = = = 0
) return msg . content
if ( completion_probabilities . length > 1 ) {
// Not for byte pair
if ( completion_probabilities [ 0 ] . content . startsWith ( ' byte : \ \ ' ) ) return msg . content
const splitData = completion_probabilities . map ( prob = > ( {
content : prob . content ,
completion_probabilities : [ prob ]
} ) )
return html ` < $ { Probabilities } data = $ { splitData } / > `
}
const { probs , content } = completion_probabilities [ 0 ]
const found = probs . find ( p = > p . tok_str = = = msg . content )
const pColor = found ? probColor ( found . prob ) : ' transparent '
const popoverChildren = html `
< div class = " prob - set " >
$ { probs . map ( ( p , index ) = > {
return html `
< div
key = $ { index }
title = $ { ` prob : $ { p . prob } ` }
style = $ { {
padding : ' 0.3 em ' ,
backgroundColor : p . tok_str = = = content ? probColor ( p . prob ) : ' transparent '
} }
>
< span > $ { p . tok_str } : < / span >
< span > $ { Math . floor ( p . prob * 100 ) } % < / span >
< / div >
`
} ) }
< / div >
`
return html `
< $ { Popover } style = $ { { backgroundColor : pColor } } popoverChildren = $ { popoverChildren } >
$ { msg . content . match ( / \ n / gim ) ? html ` < br / > ` : msg . content }
< / >
`
} ) ;
}
// poor mans markdown replacement
const Markdownish = ( params ) = > {
const md = params . text
. replace ( / & / g , ' & amp ; ' )
. replace ( / < / g , ' & lt ; ' )
. replace ( / > / g , ' & gt ; ' )
. replace ( / ^ # { 1 , 6 } ( . * ) $ / gim , ' < h3 > $ 1 < / h3 > ' )
. replace ( / \ * \ * ( . * ? ) \ * \ */ g , ' < strong > $ 1 < / strong > ' )
. replace ( / __ ( . * ? ) __ / g , ' < strong > $ 1 < / strong > ' )
. replace ( / \ * ( . * ? ) \ */ g , ' < em > $ 1 < / em > ' )
. replace ( / _ ( . * ? ) _ / g , ' < em > $ 1 < / em > ' )
. replace ( / ` ` ` . * ? \ n ( [ \ s \ S ] * ? ) ` ` ` / g , ' < pre > < code > $ 1 < / code > < / pre > ' )
. replace ( / ` ( . * ? ) ` / g , ' < code > $ 1 < / code > ' )
. replace ( / \ n / gim , ' < br / > ' ) ;
return html ` < span dangerouslySetInnerHTML = $ { { __html : md } } / > ` ;
} ;
const ModelGenerationInfo = ( params ) = > {
if ( ! llamaStats . value ) {
return html ` < span / > `
}
return html `
< span >
$ { llamaStats . value . tokens_predicted } predicted , $ { llamaStats . value . tokens_cached } cached , $ { llamaStats . value . timings . predicted_per_token_ms . toFixed ( ) } ms per token , $ { llamaStats . value . timings . predicted_per_second . toFixed ( 2 ) } tokens per second
< / span >
`
}
// simple popover impl
const Popover = ( props ) = > {
const isOpen = useSignal ( false ) ;
const position = useSignal ( { top : ' 0 px ' , left : ' 0 px ' } ) ;
const buttonRef = useRef ( null ) ;
const popoverRef = useRef ( null ) ;
const togglePopover = ( ) = > {
if ( buttonRef . current ) {
const rect = buttonRef . current . getBoundingClientRect ( ) ;
position . value = {
top : ` $ { rect . bottom + window . scrollY } px ` ,
left : ` $ { rect . left + window . scrollX } px ` ,
} ;
}
isOpen . value = ! isOpen . value ;
} ;
const handleClickOutside = ( event ) = > {
if ( popoverRef . current & & ! popoverRef . current . contains ( event . target ) & & ! buttonRef . current . contains ( event . target ) ) {
isOpen . value = false ;
}
} ;
useEffect ( ( ) = > {
document . addEventListener ( ' mousedown ' , handleClickOutside ) ;
return ( ) = > {
document . removeEventListener ( ' mousedown ' , handleClickOutside ) ;
} ;
} , [ ] ) ;
return html `
< span style = $ { props . style } ref = $ { buttonRef } onClick = $ { togglePopover } > $ { props . children } < / span >
$ { isOpen . value & & html `
< $ { Portal } into = " #portal " >
< div
ref = $ { popoverRef }
class = " popover - content "
style = $ { {
top : position . value . top ,
left : position . value . left ,
} }
>
$ { props . popoverChildren }
< / div >
< / $ { Portal } >
` }
` ;
} ;
// Source: preact-portal (https://github.com/developit/preact-portal/blob/master/src/preact-portal.js)
/** Redirect rendering of descendants into the given CSS selector */
class Portal extends Component {
componentDidUpdate ( props ) {
for ( let i in props ) {
if ( props [ i ] ! = = this . props [ i ] ) {
return setTimeout ( this . renderLayer ) ;
}
}
}
componentDidMount ( ) {
this . isMounted = true ;
this . renderLayer = this . renderLayer . bind ( this ) ;
this . renderLayer ( ) ;
}
componentWillUnmount ( ) {
this . renderLayer ( false ) ;
this . isMounted = false ;
if ( this . remote & & this . remote . parentNode ) this . remote . parentNode . removeChild ( this . remote ) ;
}
findNode ( node ) {
return typeof node = = = ' string ' ? document . querySelector ( node ) : node ;
}
renderLayer ( show = true ) {
if ( ! this . isMounted ) return ;
// clean up old node if moving bases:
if ( this . props . into ! = = this . intoPointer ) {
this . intoPointer = this . props . into ;
if ( this . into & & this . remote ) {
this . remote = render ( html ` < $ { PortalProxy } / > ` , this . into , this . remote ) ;
}
this . into = this . findNode ( this . props . into ) ;
}
this . remote = render ( html `
< $ { PortalProxy } context = $ { this . context } >
$ { show & & this . props . children | | null }
< / $ { PortalProxy } >
` , this . into , this . remote ) ;
}
render ( ) {
return null ;
}
}
// high-order component that renders its first child if it exists.
// used as a conditional rendering proxy.
class PortalProxy extends Component {
getChildContext ( ) {
return this . props . context ;
}
render ( { children } ) {
return children | | null ;
}
}
function App ( props ) {
return html `
< div class = " mode - $ { session . value . type } " >
< header >
< h1 > llama . cpp < / h1 >
< / header >
< main id = " content " >
< $ { chatStarted . value ? ChatLog : ConfigForm } / >
< / main >
< section id = " write " >
< $ { session . value . type = = = ' chat ' ? MessageInput : CompletionControls } / >
< / section >
< footer >
< p > < $ { ModelGenerationInfo } / > < / p >
< p > Powered by < a href = " https://github.com/ggerganov/llama.cpp " > llama . cpp < / a > and < a href = " https://ggml.ai " > ggml . ai < / a > . < / p >
< / footer >
< / div >
` ;
}
render ( h ( App ) , document . querySelector ( ' # container ' ) ) ;
< / script >
< / head >
< body >
< div id = " container " >
< input type = " file " id = " fileInput " accept = " image/* " style = " display: none; " >
< / div >
< div id = " portal " > < / div >
< / body >
< / html >
) LITERAL " ;
unsigned int index_html_len = sizeof ( index_html ) ;
