Upload files to "www/html"
This commit is contained in:
parent
ce0ce7c78e
commit
b184c881bd
|
@ -0,0 +1,25 @@
|
|||
<style>
|
||||
.main .pane { border-color: transparent; line-height: 1.5; padding:0}
|
||||
.fa-trash {color:red;}
|
||||
</style>
|
||||
<div class="border-round border">
|
||||
<div align="center">
|
||||
<h4>Vanderbilt University Medical Center</h4>
|
||||
</div>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
</div>
|
||||
<br>
|
||||
<div class="border-round border">
|
||||
<b>{{layout.header.title}}</B>, empowers patients with answers to questions they may have around kidney transplant care and other related conditions.
|
||||
|
||||
<div>
|
||||
Click on the following:
|
||||
<ul class="">
|
||||
<div><i class="fa-solid fa-volume-high" style="margin-right:20px"></i> read response</div>
|
||||
<div><i class="fa-solid fa-file" style="margin-right:20px"></i> supporting documents</div>
|
||||
<div><i class="fa-solid fa-trash" style="margin-right:20px"></i> delete question</div>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
|
@ -0,0 +1,32 @@
|
|||
<style>
|
||||
.alert-pane {
|
||||
display:grid;
|
||||
grid-template-columns: 64px calc(100% - 64px);
|
||||
gap:4px;
|
||||
margin:4px;
|
||||
width:500px;
|
||||
}
|
||||
.alert-controls {
|
||||
display:grid;
|
||||
grid-template-columns: 50% 50%; gap:4px;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="alert-pane">
|
||||
<div class="alert-icon">
|
||||
|
||||
</div>
|
||||
<div class="alert-message"></div>
|
||||
</div>
|
||||
|
||||
<div class="alert-controls">
|
||||
<div class="active">
|
||||
<i class="fa-solid fa-times fa-2x"></i> Cancel
|
||||
</div>
|
||||
<div class="active">
|
||||
<i class="fa-solid fa-check fa-2x"></i> continue
|
||||
</div>
|
||||
|
||||
</div>
|
|
@ -0,0 +1,38 @@
|
|||
<script>
|
||||
var papers = {}
|
||||
papers.render = function (_data){
|
||||
_index = 0
|
||||
_data.documents.forEach(_item => {
|
||||
css = (_index % 2 ==0)?'shadow': ''
|
||||
var _html = (['<div class="cell ',css,'">',_item.name,'</div><div class="cell ',css,'" align="right">',_item.page,'</div>']).join('')
|
||||
_html = $(_html)
|
||||
$('.documents').append(_html)
|
||||
_index += 1
|
||||
|
||||
});
|
||||
}
|
||||
$(document).ready(function(){
|
||||
var _data = JSON.parse(sessionStorage['llm'])
|
||||
papers.render(_data)
|
||||
})
|
||||
</script>
|
||||
<style>
|
||||
.documents {
|
||||
display: grid;
|
||||
grid-template-columns: auto 64px;
|
||||
gap:4px;
|
||||
width:650px;
|
||||
font-weight:lighter;
|
||||
font-size:14px;
|
||||
line-height: 1.5;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
.cell {padding:4px;}
|
||||
.shadow {background-color: #f3f3f3;}
|
||||
</style>
|
||||
<div>
|
||||
<div class="documents">
|
||||
<div class="cell bold border-bottom" >Documents</div><div class="cell bold border-bottom" align="right">Page</div>
|
||||
</div>
|
||||
</div>
|
|
@ -0,0 +1,174 @@
|
|||
<link href="www/html/_assets/themes/common.css" type="text/css" rel="stylesheet">
|
||||
<script src="www/html/_assets/js/assistant.js"></script>
|
||||
<script>
|
||||
var chat = {get:{}}
|
||||
// var _assistant = new Assistant()
|
||||
chat.get.id = function (_index){
|
||||
return (['.llm-pane-',_index,' .answer .llm-answer']).join('')
|
||||
}
|
||||
chat.read = function (_index){
|
||||
var _id = (['.llm-pane-',_index,' .answer .llm-answer']).join('')
|
||||
var text = $(_id).text()
|
||||
// Assistant.speak(text)
|
||||
//
|
||||
// We need to submit the box to retrieve the audio file and transcript
|
||||
//
|
||||
_args = {title:'{{layout.header.title}} Transcript Reader',uri:'www/html/transcript.html',context:'{{system.context}}'}
|
||||
uri = '{{system.context}}/api/medix/audio?token='+$('.chat').attr('token')+'&index='+_index
|
||||
uri = uri.replace(/\/\//g,'/')
|
||||
dialog.show(_args,()=>{
|
||||
|
||||
$('.jxmodal .text').html(text)
|
||||
$('audio').attr('src',uri)
|
||||
$('audio')[0].play()
|
||||
|
||||
// Assistant.speak(text)
|
||||
// $('audio').hide()
|
||||
|
||||
})
|
||||
|
||||
// console.log(uri)
|
||||
|
||||
}
|
||||
chat.print = function (){
|
||||
//
|
||||
// if the log pane is empty then I should throw a message
|
||||
if ($('.logs').children().length > 0){
|
||||
|
||||
// var _html = ['<div class="main">',$('head').html(), ,$('#header').html(), '<br>',$('.logs').html(),'</div></div]
|
||||
style=["<style>",".menu {border:1px solid transparent;}",".content {grid-column:1 / span 2;}","</style>"]
|
||||
_html = [$('head').html(),'<link href="www/html/_assets/themes/common.css" type="text/css" rel="stylesheet">',style.join(' '),'<div class="main {{system.theme}}"><div id="header" class="header">',$('#header').html(),'</div><div class="menu"></div><div class="content"><div class="logs">',$('.logs').html(),'</div></div></div>']
|
||||
_html = _html.join('')
|
||||
var _printer = window.open('','','width=500,height=500')
|
||||
|
||||
_printer.document.open()
|
||||
_printer.document.write(_html)
|
||||
|
||||
}else{
|
||||
//
|
||||
// Throw an error, no printing is needed
|
||||
_args = {uri:'www/html/alert.html',title:'{{layout.header.title}} - Print Error',context:'{{system.context}}'}
|
||||
_args.pointer = function (){$('.alert-controls').hide()}
|
||||
dialog.show(_args)
|
||||
|
||||
|
||||
setTimeout(function(){
|
||||
$('.alert-icon').html('<i class="fa-solid fa-times fa-2x" style="color:maroon"></i>')
|
||||
$('.alert-message').html('There are no conversations to be printed')
|
||||
$('.alert-controls').hide()
|
||||
},50)
|
||||
}
|
||||
}
|
||||
chat.delete = function (_index){
|
||||
var _id = '.llm-pane-'+_index
|
||||
$(_id).remove()
|
||||
if ($(_id).children().length == 0){
|
||||
$('.logs').animate({'height':'42%'})
|
||||
}
|
||||
}
|
||||
chat.support = function(_index){
|
||||
// dialog.show({message:'Work in progress'})
|
||||
var _div = $('.answer')[_index]
|
||||
sessionStorage['llm'] = JSON.stringify(_div.data)
|
||||
_args = {uri:'www/html/documents.html',title:'{{layout.header.title}} ',context:'{{system.context}}'}
|
||||
dialog.show(_args)
|
||||
|
||||
}
|
||||
chat.question = {}
|
||||
chat.question.ask = function (){
|
||||
|
||||
var height = $('.chat').height() - $('.question-input').height() - 16 - 48
|
||||
$('.logs').animate({'height':height})
|
||||
var _index = $('.logs').children().length
|
||||
var _q = $('textarea').val().trim()
|
||||
var uri = '{{system.context}}/api/medix/answer'
|
||||
//
|
||||
// @TODO: perform validation here
|
||||
if (_q.length > 0 ){
|
||||
chat.question.render()
|
||||
chat.answer.render()
|
||||
token = $('.chat').attr('token')
|
||||
var _data = {'question':_q,'index':_index}
|
||||
if (token){
|
||||
_data.token = token
|
||||
}
|
||||
|
||||
_data = JSON.stringify(_data)
|
||||
|
||||
var http = HttpClient.instance()
|
||||
http.setHeader('Content-Type','application/json')
|
||||
http.setData(_data)
|
||||
http.post(uri,function(x){
|
||||
if(x.readyState == 4 && x.status == 200){
|
||||
var _data = JSON.parse(x.responseText)
|
||||
$('.chat').attr('token',_data.token)
|
||||
chat.answer.render(_data)
|
||||
}
|
||||
})
|
||||
}else{
|
||||
//
|
||||
// alert the user something is wrong
|
||||
}
|
||||
}
|
||||
chat.question.render = function (){
|
||||
//
|
||||
// showing a
|
||||
var _index = $('.logs').children().length
|
||||
var _q = $('textarea').val().trim()
|
||||
if (_q.length > 0){
|
||||
//
|
||||
// Add read, documents, delete buttons
|
||||
_delete = ['<div class="active" align="center" title="Delete Question" onclick="chat.delete(',_index,')"><i class="fa-solid fa-trash"></i></div>']
|
||||
var _html = ['<div class="llm-pane-',_index,'"> <div class="border-round border question-frame"><div><i class="fa-solid fa-user fa-2x"></i></div><div class="question">',_q,'</div>',_delete.join(''),'</div> <div class="answer-frame"> </div></div>']
|
||||
_html = _html.join('')
|
||||
|
||||
$('.logs').append(_html)
|
||||
$('textarea').val('')
|
||||
}
|
||||
}
|
||||
chat.answer = {}
|
||||
chat.answer.render = function (_answer){
|
||||
var _index = $('.answer-frame').length - 1
|
||||
if (_answer == null){
|
||||
var _html = ['<div class="answer border-round border"><div class="answer-status"><i class="fa-solid fa-cog fa-spin fa-2x" style="color:gray"></i></div></div>']
|
||||
_html =$( _html.join(''))
|
||||
|
||||
$($('.answer-frame')[_index]).append(_html)
|
||||
}else{
|
||||
_action = ['<div class="active" align="center" title="read out" onclick="chat.read(',_index,')"><i class="fa-solid fa-volume-high"></i></div>']
|
||||
_action.push('<div class="active" align="center" title="supporting documents" onclick="chat.support(',_index,')"><i class="fa-solid fa-file"></i></div>')
|
||||
|
||||
var _div = $('.answer')[_index]
|
||||
|
||||
var _html = ['<div class="llm-answer">',_answer.answer,'</div><div class="border-left">',_action.join(''), '</div>']
|
||||
|
||||
_html = $( _html.join(''))
|
||||
$(_div).append(_html)
|
||||
// $(_div).attr('data',_answer)
|
||||
_div.data = _answer
|
||||
|
||||
$('.answer-status').html('<i class="fa-solid fa-user-doctor fa-2x" style="color:#4682B4"></i>')
|
||||
}
|
||||
//
|
||||
|
||||
|
||||
}
|
||||
$(document).ready(()=>{
|
||||
$('.logs').animate({'height':'42%'})
|
||||
})
|
||||
</script>
|
||||
<div class="chat border-round border">
|
||||
<div align="right" style="background-color: #f3f3f3;" class="border-round-top-left border-round-top-right">
|
||||
<div class="active" onclick="chat.print()" title="Print conversation" style="justify-self: right; width:100px" align="center"><i class="fa-solid fa-print"></i></div>
|
||||
</div>
|
||||
<div class="logs"></div>
|
||||
<div class="question-input border-top">
|
||||
<textarea class="question" placeholder="[Enter your question]"></textarea>
|
||||
<div class="active" onclick="chat.question.ask()">
|
||||
<div align="center" style="display:grid; grid-template-rows:48px auto; gap:4px; align-items:center">
|
||||
<div><i class="fa-solid fa-paper-plane fa-2x"></i></div>
|
||||
<div class="small">Submit</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
|
@ -0,0 +1,14 @@
|
|||
<div class="main {{system.theme}}">
|
||||
<div id="header" class="header" >
|
||||
|
||||
<div class="icon">
|
||||
<img src="{{system.icon}}">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="title">{{layout.header.title}}</div>
|
||||
<div class="subtitle">{{layout.header.subtitle}}</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
Loading…
Reference in New Issue