update
This commit is contained in:
dhruv
60
public/4/4.html
Normal file
60
public/4/4.html
Normal file
@@ -0,0 +1,60 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Live Python Stream</title>
|
||||
<style>
|
||||
body { font-family: sans-serif; padding: 20px; }
|
||||
button { padding: 8px 16px; }
|
||||
pre { background: #f5f5f5; padding: 10px; border: 1px solid #ccc; white-space: pre-wrap; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Python → Client Streaming</h1>
|
||||
<input id="inputParam" placeholder="Enter param" value="Hello" />
|
||||
<button onclick="chat('inputParam','output')">Start Stream</button>
|
||||
<pre id="output"></pre>
|
||||
|
||||
<script>
|
||||
function chat(inputId, outputId) {
|
||||
const param = document.getElementById(inputId).value;
|
||||
const outputEl = document.getElementById(outputId);
|
||||
outputEl.textContent = '';
|
||||
|
||||
fetch('http://localhost:3000/stream', {
|
||||
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; // flag for first chunk
|
||||
|
||||
function read() {
|
||||
reader.read().then(({ done, value }) => {
|
||||
if (done) {
|
||||
console.log('chunk finish'); // All chunks received
|
||||
return;
|
||||
}
|
||||
if (!started) {
|
||||
console.log('chunk started'); // First chunk received
|
||||
started = true;
|
||||
}
|
||||
outputEl.textContent += decoder.decode(value);
|
||||
read();
|
||||
}).catch(err => {
|
||||
console.error('Stream error:', err);
|
||||
});
|
||||
}
|
||||
|
||||
read();
|
||||
})
|
||||
.catch(err => {
|
||||
outputEl.textContent = 'Error: ' + err.message;
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
63
public/4/load.html
Normal file
63
public/4/load.html
Normal file
@@ -0,0 +1,63 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Enable/Disable Element with Loader</title>
|
||||
<style>
|
||||
/* Reset default margins and padding */
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden; /* prevent scrolling */
|
||||
background-color: rgba(0, 0, 255, 0); /* body background */
|
||||
}
|
||||
|
||||
/* Loader container covers full viewport */
|
||||
#loader {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: rgba(127, 255, 212, 0);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 9999;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="loader">
|
||||
<script>
|
||||
function getQueryParam(key, defaultValue = 0) {
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const value = urlParams.get(key);
|
||||
return value !== null ? value : defaultValue;
|
||||
}
|
||||
|
||||
const show_background = getQueryParam('width_height', 0);
|
||||
const loader = document.getElementById('loader');
|
||||
if (show_background != 0) {
|
||||
loader.style.width = show_background + 'px';
|
||||
loader.style.height = show_background + 'px';
|
||||
} else {
|
||||
loader.style.width = '100vw';
|
||||
loader.style.height = '100vh';
|
||||
}
|
||||
</script>
|
||||
|
||||
<script
|
||||
src="https://unpkg.com/@dotlottie/player-component@2.7.12/dist/dotlottie-player.mjs"
|
||||
type="module">
|
||||
</script>
|
||||
<dotlottie-player
|
||||
src="https://lottie.host/1cb2c811-f2b9-4ec8-a92c-e834ad6d2be8/WVsHVPkOXw.lottie"
|
||||
background="transparent"
|
||||
speed="1"
|
||||
loop
|
||||
autoplay>
|
||||
</dotlottie-player>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
247
public/4/right.html
Normal file
247
public/4/right.html
Normal file
@@ -0,0 +1,247 @@
|
||||
<!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>
|
||||
24
public/4/stack_iframe.html
Normal file
24
public/4/stack_iframe.html
Normal file
@@ -0,0 +1,24 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Stacked Iframes - Fullscreen</title>
|
||||
</head>
|
||||
<body style="margin:0;padding:0;width:100%;height:100%;overflow:hidden;">
|
||||
<div style="position:relative;width:100vw;height:100vh;">
|
||||
<!-- Bottom iframe dims in back -->
|
||||
<iframe
|
||||
id="iframe-bottom"
|
||||
src="http://127.0.0.1:5500/4/load.html"
|
||||
style="position:absolute;top:0;left:0;width:100%;height:100%;border:none;z-index:1;opacity:0.3;pointer-events:none;">
|
||||
</iframe>
|
||||
|
||||
<!-- Top iframe interactive in front -->
|
||||
<iframe
|
||||
id="iframe-top"
|
||||
src="https://python.langchain.com/docs/introduction/"
|
||||
style="position:absolute;top:0;left:0;width:100%;height:100%;border:none;z-index:2;">
|
||||
</iframe>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user