247 lines
7.8 KiB
HTML
247 lines
7.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Jarvis</title>
|
|
<meta name="description" content="" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<link rel="stylesheet" href="../style/Style.css" />
|
|
|
|
</head>
|
|
<body >
|
|
|
|
<!-- Right Menu -->
|
|
<div class="main_scrollable">
|
|
<p class="title" style="text-align: left; margin-left: 10px">Codes...</p>
|
|
|
|
<div class="note_input" style="overflow: hidden; margin: 0px; padding: 0px; width: 100%; height: 20rem; position: relative; background-color: rgba(135, 167, 235, 0);">
|
|
<div class="ai_face" >
|
|
<iframe src="http://localhost:3000/5/index.html?number1=6&number2=6&show_background=0&display_none=1&move_lipps_randomly=0&move_face_imotions_randomly=1" width="300px" height="400px" style="padding-top: 0px; overflow: hidden; overflow: hidden; border: none;"
|
|
scrolling="no"></iframe>
|
|
<!-- I am 50% of my parent -->
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="temperature">
|
|
<div id="date_time">
|
|
<div id="date" class="semi_arc e4">
|
|
<div class="semi_arc_2 e4_1">
|
|
<div class="counterspin4"></div>
|
|
</div>
|
|
<div
|
|
style="font-size: 34px; margin-top: 25px"
|
|
id="tempValue"
|
|
></div>
|
|
<div style="font-size: 30px"><sup>0</sup>c</div>
|
|
<div style="font-size: 25px">Temp.</div>
|
|
</div>
|
|
|
|
<div id="time" class="arc e1">
|
|
<div
|
|
style="font-size: 23px; margin-right: 8px; margin-top: 23px"
|
|
id="humidityValue"
|
|
></div>
|
|
<div style="font-size: 17px; margin-top: 10px">Humidity</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<script>
|
|
|
|
|
|
|
|
// Function to make the POST request
|
|
async function postData(endpoint_url, data) {
|
|
// const hostname = window.location.hostname;
|
|
// const port = window.location.port;
|
|
const hostname = '192.168.1.2';
|
|
const port = '3000';
|
|
|
|
const base_url = `http://${hostname}:${port}${endpoint_url}`;
|
|
console.log(base_url)
|
|
var response = await fetch(base_url, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(data)
|
|
});
|
|
return await response.json();
|
|
}
|
|
|
|
// 🛠️ User-defined function to extract the text inside the textarea
|
|
function getNoteInputValue(id_) {
|
|
const textarea = document.getElementById(id_);
|
|
if (textarea) {
|
|
return textarea.value;
|
|
} else {
|
|
console.error('Textarea with id "note_input__id" not found.');
|
|
return null;
|
|
}
|
|
}
|
|
|
|
|
|
async function fun1(){
|
|
console.log("moooooooooooooooooooooooooooooooooooo");
|
|
|
|
const chat_input = getNoteInputValue('note_input__id');
|
|
console.log("Extracted Content:", chat_input);
|
|
// let chat_input = textarea.value;
|
|
let result = await postData('/chatBot', { input_prompt: chat_input });
|
|
|
|
console.log(result.message_from_server);
|
|
if(result.message_from_server == "success"){
|
|
console.log("response complete")
|
|
console.log(result.chat);
|
|
}else{
|
|
console.log("request fail")
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
let chat_count = 0;
|
|
function chat(inputId, outputId) {
|
|
chat_count = (chat_count+1);
|
|
document.getElementById('loading_animation').style.display = 'block';// show loading animation
|
|
|
|
const param = document.getElementById(inputId).value;
|
|
const outputEl = document.getElementById(outputId);
|
|
outputEl.textContent = '';
|
|
const origin = window.location.origin; // Protocol + hostname + port example 'http://localhost:3000/stream'
|
|
|
|
fetch(origin, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ param })
|
|
})
|
|
.then(res => {
|
|
if (!res.ok) throw new Error(res.statusText);
|
|
const reader = res.body.getReader();
|
|
const decoder = new TextDecoder();
|
|
let started = false;
|
|
let chunkCount = 0; // ← chunk counter
|
|
|
|
function read() {
|
|
reader.read().then(({ done, value }) => {
|
|
if (done) {
|
|
console.log(`chunk finish (total chunks: ${chunkCount})`);
|
|
|
|
document.getElementById('loading_animation').style.display = 'none';
|
|
// window.parent.postMessage({ target: 'center', message: '' , status: 'ended', chat_id: chat_count },'*'); // clear the fast note menu
|
|
window.parent.postMessage({ target: 'center', message: '' , status: 'ended', question:param , chat_id: chat_count },'*'); // clear the fast note menu
|
|
|
|
return;
|
|
}
|
|
if (!started) {
|
|
console.log('chunk started');
|
|
document.getElementById('loading_animation').style.display = 'block';
|
|
window.parent.postMessage({ target: 'center', message: '' , status: 'started', chat_id: chat_count },'*'); // clear the fast note menu
|
|
started = true;
|
|
}
|
|
chunkCount += 1; // ← increment per chunk
|
|
const text = decoder.decode(value);
|
|
// console.log(`chunk #${chunkCount}:`, text);
|
|
outputEl.textContent += text;
|
|
|
|
window.parent.postMessage({ target: 'center', message: text, status: 'chunk_message___looping' , chat_id: chat_count},'*'); //send the chunked response
|
|
read();
|
|
}).catch(err => {
|
|
console.error('Stream error:', err);
|
|
});
|
|
}
|
|
|
|
read();
|
|
})
|
|
.catch(err => {
|
|
outputEl.textContent = 'Error: ' + err.message;
|
|
});
|
|
}
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<pre id="chunked_output_box"></pre>
|
|
<!-- <div id="weather_Name" style="font-size: 15px; top: 10px;left: 200px;"></div> -->
|
|
<div >
|
|
|
|
<script>
|
|
// Send a message to the parent to forward it to iframe2
|
|
function sendMessageToIframe2() {
|
|
window.parent.postMessage({ target: 'center', message: 'Hello from iframe 1' }, '*');
|
|
}
|
|
</script>
|
|
|
|
|
|
<!-- <button onclick="sendMessageToIframe2()">Send to Iframe 2</button> -->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<button class="arc e1 bgb" onclick="chat('note_input__id','chunked_output_box')" style="color: rgb(33, 245, 156); margin-top: 0px; padding-top: 0px;">Chat AI</button>
|
|
<button class="arc e1 bgb" onclick="fun1()" style="color: rgb(33, 245, 156); margin-top: 0px; padding-top: 0px;">talk AI</button>
|
|
|
|
<!-- <div style="font-size: 23px; margin-left: -10px; margin-top: 23px;">23:41</div>
|
|
<div style="font-size: 15px; margin-left: 40px; margin-top: -30px; display: inline;">31</div>
|
|
<div style="font-size: 17px; margin-top: 10px;">Tuesday</div> -->
|
|
</div>
|
|
|
|
<br>
|
|
|
|
|
|
|
|
<div id="particle10" class="hline"></div>
|
|
<div id="particle11" class="hline"></div>
|
|
<div id="particle12" class="vline"></div>
|
|
|
|
|
|
|
|
|
|
|
|
<div style="position:relative;">
|
|
<!-- Bottom iframe dims in back -->
|
|
<br> <br> <br>
|
|
<iframe
|
|
id="loading_animation"
|
|
src="http://127.0.0.1:5500/4/load.html"
|
|
style="position:absolute;top:20;left:0;border:none;z-index:1;opacity:0.9;pointer-events:none;display: none;">
|
|
</iframe>
|
|
|
|
|
|
|
|
|
|
|
|
<textarea id="note_input__id" class="note_input" rows="12" cols="44" placeholder="hello , how can i assist ?" style="color: aqua; position:absolute;top:0;left:0;border:none;z-index:2;"></textarea>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<br> <br> <br>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</body>
|
|
</html> |