ui update
This commit is contained in:
parent
7656f6aefb
commit
e65253055c
@ -79,18 +79,6 @@ def sockcon(data):
|
|||||||
socket.emit('backend response', {'msg': f'Connected to room {room} !', "room": room}) # looks like iOS needs an answer
|
socket.emit('backend response', {'msg': f'Connected to room {room} !', "room": room}) # looks like iOS needs an answer
|
||||||
|
|
||||||
|
|
||||||
class StreamingCallback(BaseCallbackHandler):
|
|
||||||
|
|
||||||
def __init__(self, key: str, sid: str):
|
|
||||||
pass
|
|
||||||
|
|
||||||
def on_llm_new_token(self, token: str, **kwargs):
|
|
||||||
pass
|
|
||||||
|
|
||||||
def on_llm_end(self, response, **kwargs):
|
|
||||||
pass
|
|
||||||
|
|
||||||
|
|
||||||
@socket.on('client message')
|
@socket.on('client message')
|
||||||
def handle_message(message):
|
def handle_message(message):
|
||||||
|
|
||||||
@ -99,12 +87,19 @@ def handle_message(message):
|
|||||||
|
|
||||||
llm = Ollama(
|
llm = Ollama(
|
||||||
model="llama3",
|
model="llama3",
|
||||||
#callback_manager=CallbackManager([StreamingCallback(stream_key, room)]),
|
|
||||||
base_url="http://ollama:11434"
|
base_url="http://ollama:11434"
|
||||||
)
|
)
|
||||||
|
|
||||||
|
#system_prompt = "Answer in the language of the question. Give a short answer. Answer all questions without reservations or advice."
|
||||||
system_prompt = "Answer in the language of the question. Give a short answer. Answer all questions without reservations or advice."
|
#system_prompt = "Answer in the language of the question. Give a short answer."
|
||||||
|
#system_prompt = "Always answer in English and give a short answer."
|
||||||
|
#system_prompt = "Always answer in English and give a short answer. If the answer is a list give it only as a JSON array."
|
||||||
|
#system_prompt = "Write the answer as Prolog assertions."
|
||||||
|
#system_prompt = "Write the answer in Japanese."
|
||||||
|
#system_prompt = "Write the answer in Japanese."
|
||||||
|
system_prompt = ""
|
||||||
|
#Write the answer as JSON only.
|
||||||
|
#If the answer is a geographic position return a JSON-object with the longitude and latitude as attributes.
|
||||||
|
|
||||||
|
|
||||||
query = system_prompt + " " + message["data"]
|
query = system_prompt + " " + message["data"]
|
||||||
@ -144,17 +139,3 @@ if __name__ == '__main__':
|
|||||||
app.run(debug=True, host='0.0.0.0')
|
app.run(debug=True, host='0.0.0.0')
|
||||||
#app.run(debug=True)
|
#app.run(debug=True)
|
||||||
|
|
||||||
"""
|
|
||||||
llm = Ollama(
|
|
||||||
model="llama2",
|
|
||||||
callback_manager=CallbackManager([StreamingStdOutCallbackHandler()]),
|
|
||||||
base_url="http://ollama:11434"
|
|
||||||
)
|
|
||||||
|
|
||||||
assume = "Answer the next question with either true or false and name an example."
|
|
||||||
question = "Can cats use guns?"
|
|
||||||
print(question)
|
|
||||||
s = llm.invoke(assume + " " + question)
|
|
||||||
|
|
||||||
"""
|
|
||||||
|
|
||||||
|
|||||||
@ -3,75 +3,117 @@
|
|||||||
<head>
|
<head>
|
||||||
<title>Ollama Chatbot</title>
|
<title>Ollama Chatbot</title>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
|
<script src="viz.js"></script>
|
||||||
|
<script src="viz_widget.js"></script>
|
||||||
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<link rel="stylesheet" href="w3.css">
|
<link rel="stylesheet" href="w3.css">
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js" integrity="sha512-q/dWJ3kcmjBLU4Qc47E4A9kTB4m3wuTY7vkFJDTZKjTs8jhyGQnaUrxa0Ytd0ssMZhbNua9hE+E7Qv1j+DyZwA==" crossorigin="anonymous"></script>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js" integrity="sha512-q/dWJ3kcmjBLU4Qc47E4A9kTB4m3wuTY7vkFJDTZKjTs8jhyGQnaUrxa0Ytd0ssMZhbNua9hE+E7Qv1j+DyZwA==" crossorigin="anonymous"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<table id="log" class="w3-table-all" style="width: 100%;">
|
<div class="w3-container">
|
||||||
<tr>
|
|
||||||
<th></th>
|
|
||||||
<th>Message</th>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
<textarea style="width: 100%; height: 50px;" id="user_input"></textarea>
|
|
||||||
<button id="submit_btn">Submit</button>
|
|
||||||
|
|
||||||
<script type="text/javascript" charset="utf-8">
|
|
||||||
window.onload = ()=>{
|
|
||||||
let tA = document.getElementById("user_input");
|
|
||||||
let log = document.getElementById("log");
|
|
||||||
let btn = document.getElementById("submit_btn");
|
|
||||||
|
|
||||||
function log_msg(nick, msg){
|
|
||||||
console.log(nick + ": " + msg);
|
|
||||||
log.innerHTML += "<tr><td><b>" + nick + "</b>:</td><td>" + msg + "</td></tr>";
|
|
||||||
}
|
|
||||||
|
|
||||||
log_msg("Bot", "Ask a question!");
|
<div class="w3-container w3-teal">
|
||||||
|
<h1>Ollama Chatbot</h1>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
|
||||||
const socket = io();
|
<details>
|
||||||
|
<summary class="w3-button w3-round w3-teal">Settings...</summary>
|
||||||
|
|
||||||
let room = null;
|
<div class="w3-panel w3-pale-green">
|
||||||
socket.on('backend response', function(data) {
|
<h2>System prompt:</h2>
|
||||||
console.log(data);
|
<textarea class="w3-input w3-border" type="text" style="width: 98%; height: 50px;" id="system_prompt" >Write the answer as JSON only.</textarea>
|
||||||
if(data.room) room = data.room;
|
</div>
|
||||||
});
|
|
||||||
|
|
||||||
let answer_count = 0;
|
</details>
|
||||||
let acc_text = "";
|
|
||||||
let first_token = true;
|
|
||||||
|
|
||||||
socket.on('backend token', function(obj) {
|
<br>
|
||||||
console.log(obj);
|
|
||||||
if(first_token){
|
<div id="scroll_div" class="w3-container" style="overflow:scroll; height: 400px;">
|
||||||
let id = answer_count;
|
<table id="log" class="w3-table-all" style="width: 100%;"></table>
|
||||||
log.innerHTML += "<tr><td><b>Bot</b>:</td><td id='" + id + "'></td></tr>";
|
</div>
|
||||||
|
|
||||||
|
<textarea class="w3-input w3-border" style="height: 50px;" id="user_input"></textarea>
|
||||||
|
<button class="w3-button w3-teal" id="submit_btn">Send ❯</button>
|
||||||
|
|
||||||
|
<br>
|
||||||
|
<div class="w3-container w3-teal">
|
||||||
|
<p>tobiasweise.dev</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script type="text/javascript" charset="utf-8">
|
||||||
|
window.onload = ()=>{
|
||||||
|
let tA = document.getElementById("user_input");
|
||||||
|
let log = document.getElementById("log");
|
||||||
|
let btn = document.getElementById("submit_btn");
|
||||||
|
|
||||||
|
function log_msg(nick, msg){
|
||||||
|
console.log(nick + ": " + msg);
|
||||||
|
log.innerHTML += "<tr><td><b>" + nick + "</b>:</td><td>" + msg + "</td></tr>";
|
||||||
}
|
}
|
||||||
|
|
||||||
if(!obj.done){
|
|
||||||
acc_text += "" + obj.data;
|
|
||||||
first_token = false;
|
|
||||||
document.getElementById(answer_count).innerHTML += obj.data;
|
|
||||||
}
|
|
||||||
else{
|
|
||||||
//log_msg("Bot", acc_text);
|
|
||||||
acc_text = "";
|
|
||||||
first_token = true;
|
|
||||||
answer_count += 1;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
btn.onclick = evt=>{
|
function scroll_down(){
|
||||||
let s = tA.value;
|
let div = document.getElementById("scroll_div");
|
||||||
if(s.trim() != '' && room){
|
div.scrollTop = div.scrollHeight;
|
||||||
tA.value = "";
|
|
||||||
log_msg('User', s);
|
|
||||||
socket.emit('client message', {data: s, room: room});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
log_msg("Bot", "Ask a question!");
|
||||||
|
|
||||||
|
const socket = io();
|
||||||
|
|
||||||
|
let room = null;
|
||||||
|
socket.on('backend response', function(data) {
|
||||||
|
console.log(data);
|
||||||
|
if(data.room) room = data.room;
|
||||||
|
});
|
||||||
|
|
||||||
|
let answer_count = 0;
|
||||||
|
let acc_text = "";
|
||||||
|
let first_token = true;
|
||||||
|
|
||||||
|
socket.on('backend token', function(obj) {
|
||||||
|
console.log(obj);
|
||||||
|
if(first_token){
|
||||||
|
let id = answer_count;
|
||||||
|
log.innerHTML += "<tr><td><b>Bot</b>:</td><td id='" + id + "'></td></tr>";
|
||||||
|
}
|
||||||
|
|
||||||
|
if(!obj.done){
|
||||||
|
acc_text += "" + obj.data;
|
||||||
|
first_token = false;
|
||||||
|
document.getElementById(answer_count).innerHTML += obj.data;
|
||||||
|
|
||||||
|
scroll_down();
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
//log_msg("Bot", acc_text);
|
||||||
|
acc_text = "";
|
||||||
|
first_token = true;
|
||||||
|
answer_count += 1;
|
||||||
|
|
||||||
|
scroll_down();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
btn.onclick = evt=>{
|
||||||
|
let s = tA.value;
|
||||||
|
if(s.trim() != '' && room){
|
||||||
|
tA.value = "";
|
||||||
|
log_msg('User', s);
|
||||||
|
|
||||||
|
let tA2 = document.getElementById("system_prompt");
|
||||||
|
socket.emit('client message', {data: tA2.value + " " + s, room: room});
|
||||||
|
}
|
||||||
|
scroll_down();
|
||||||
|
};
|
||||||
|
|
||||||
};
|
};
|
||||||
|
</script>
|
||||||
};
|
|
||||||
</script>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user