dhruv_employee/ai_live_chatbot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
dhruv
2026-05-17 15:30:11 +05:30
commit cae37e5af7
23 changed files with 3607 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
public/1/index.html Normal file
View File

@@ -0,0 +1,80 @@
<!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 >
<div style="display: flex;flex-direction: row;flex-wrap: wrap; justify-content: center; ">
<iframe src="../2/left.html" id="leftmenu" style="background-color: rgb(0, 0, 0);border-color: aqua; margin: 0; padding: 0; box-sizing: border-box; flex-grow: 0.1; "></iframe>
<iframe src="../3/center.html" id="center" class="flex_parent" style="background-color: rgb(0, 0, 0);border-color: aqua; margin: 0; padding: 0; box-sizing: border-box; flex-grow: 2; padding-right: 0px;margin-left: 0px; min-height: 400px;"></iframe>
<iframe src="../4/right.html" id="rightmenu" style="background-color: rgb(0, 0, 0);border-color: aqua; margin: 0; padding: 0; box-sizing: border-box; flex-grow: 0.1; height: 99.6vh;"></iframe>
<script>
// Listen for messages from iframes
window.addEventListener('message', (event) => {
if (event.origin !== window.location.origin) return; // Security check
const { target, message } = event.data;
const id_of_recipant__iframe_element = document.getElementById(target).contentWindow;
id_of_recipant__iframe_element.postMessage(event.data , '*'); // Forward to center.html
});
</script>
<!-- <iframe id="iframe1" src="iframe1.html"></iframe>
<iframe id="iframe2" src="iframe2.html"></iframe> -->
<!-- <script src="./index_JS.js"></script>
<script src="./app.js"></script> -->
</body>
</html>

209
public/2/left.html Normal file
View File

@@ -0,0 +1,209 @@
<!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 >
<div class="main_scrollable " style="background-color: rgba(4, 0, 255, 0);">
<div id="date_time" style="background-color: rgba(0, 255, 21, 0); overflow: hidden; width: fit-content;" >
<div id="date" class="semi_arc e4">
<div class="semi_arc_2 e4_1">
<div class="counterspin4"></div>
</div>
<div style="font-size: 40px; margin-top: 25px" id="dateValue" >12</div>
<div style="font-size: 25px" id="monthValue">february</div>
</div>
<div id="time" class="arc e1">
<div
style="font-size: 23px; margin-left: -10px; margin-top: 23px"
id="timeValue"
>8:03 pm</div>
<div
style="font-size: 17px; margin-top: 10px"
id="weekDayValue"
>Saturday</div>
</div>
</div>
<p class="title">Performance</p>
<div class="hline title_underline"></div>
<span
class=" entypo-gauge "
style="font-size: 30px; padding-left: 10px;"
>
<p id="cpu" class="caption" style="font-size: 20px">CPU Usage: 19%</p>
</span>
<br />
<span
class=" entypo-chart-area "
style="font-size: 30px; padding-left: 10px;"
>
<p id="ram" class="caption" style="font-size: 20px">Battery: 100%</p>
</span>
<br />
<span
class=" entypo-chart-pie "
style="font-size: 30px; padding-left: 10px;"
>
<p id="proc" class="caption" style="font-size: 20px">Processes: 73/500</p>
</span>
<p class="title">Al models</p>
<div class="hline title_underline"></div>
<div class="menu">
<button class="menuitem">
<span class="entypo-right-open entypo__-right-open" />
<p class="caption" onclick="playAudio()">User</p>
</button>
<button class="menuitem">
<span class="entypo-right-open entypo__-right-open" />
<p class="caption" onclick="playAudio()">Documents</p>
</button>
<button class="menuitem">
<span class="entypo-right-open entypo__-right-open" />
<p class="caption" onclick="playAudio()">Computer</p>
</button>
<button class="menuitem">
<span class="entypo-right-open entypo__-right-open" />
<p class="caption">Control Panel</p>
</button>
<hr style="border-color: transparent; margin: 0" />
<div class="hline" style="margin-top: 5px; margin-bottom: 5px"></div>
<button class="menuitem">
<span class="entypo-right-open entypo__-right-open" />
<p class="caption">Custom Path 1</p>
</button>
<button class="menuitem">
<span class="entypo-right-open entypo__-right-open" />
<p class="caption">Custom Path 2</p>
</button>
<button class="menuitem">
<span class="entypo-right-open entypo__-right-open" />
<p class="caption">Custom Path 3</p>
</button>
</div>
<p class="title">Al models</p>
<div class="hline title_underline"></div>
<div class="menu">
<button class="menuitem">
<span class="entypo-right-open entypo__-right-open" />
<p class="caption" onclick="playAudio()">User</p>
</button>
<button class="menuitem">
<span class="entypo-right-open entypo__-right-open" />
<p class="caption" onclick="playAudio()">Documents</p>
</button>
<button class="menuitem">
<span class="entypo-right-open entypo__-right-open" />
<p class="caption" onclick="playAudio()">Computer</p>
</button>
<button class="menuitem">
<span class="entypo-right-open entypo__-right-open" />
<p class="caption">Control Panel</p>
</button>
<hr style="border-color: transparent; margin: 0" />
<div class="hline" style="margin-top: 5px; margin-bottom: 5px"></div>
<button class="menuitem">
<span class="entypo-right-open entypo__-right-open" />
<p class="caption">Custom Path 1</p>
</button>
<button class="menuitem">
<span class="entypo-right-open entypo__-right-open" />
<p class="caption">Custom Path 2</p>
</button>
<button class="menuitem">
<span class="entypo-right-open entypo__-right-open" />
<p class="caption">Custom Path 3</p>
</button>
</div>
<p class="title">Al models last</p>
<div class="hline title_underline"></div>
<div class="menu">
<button class="menuitem">
<span class="entypo-right-open entypo__-right-open" />
<p class="caption" onclick="playAudio()">User</p>
</button>
<button class="menuitem">
<span class="entypo-right-open entypo__-right-open" />
<p class="caption" onclick="playAudio()">Documents</p>
</button>
<button class="menuitem">
<span class="entypo-right-open entypo__-right-open" />
<p class="caption" onclick="playAudio()">Computer</p>
</button>
<button class="menuitem">
<span class="entypo-right-open entypo__-right-open" />
<p class="caption">Control Panel</p>
</button>
<hr style="border-color: transparent; margin: 0" />
<div class="hline" style="margin-top: 5px; margin-bottom: 5px"></div>
<button class="menuitem">
<span class="entypo-right-open entypo__-right-open" />
<p class="caption">Custom Path 1</p>
</button>
<button class="menuitem">
<span class="entypo-right-open entypo__-right-open" />
<p class="caption">Custom Path 2</p>
</button>
<button class="menuitem">
<span class="entypo-right-open entypo__-right-open" />
<p class="caption">Custom Path 3</p>
</button>
</div>
<br>
<br>
<br>
<br>
<div style="background-color: rgb(0, 0, 0);">
<br>
</div>
<!-- <br> -->
<!-- <br> -->
</div>
</body>
</html>

151
public/3/Chat_page.html Normal file
View File

@@ -0,0 +1,151 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Processed Content</title>
<style>
.chat-block {
background-color: #f9f9f9;
border-radius: 8px;
padding: 12px;
margin: 20px auto;
width: 80%;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.chat-block time {
font-size: 12px;
color: #555;
display: block;
margin-bottom: 8px;
}
.question-text {
background-color: lightgrey;
color: black;
border-radius: 5px;
padding: 5px;
margin-bottom: 10px;
}
.normal-text {
background-color: #a1a0a0;
color: black;
border-radius: 5px;
padding: 5px;
margin-bottom: 5px;
}
.code-block {
background-color: black;
color: white;
white-space: pre-wrap;
font-family: monospace;
border-radius: 5px;
padding: 24px 8px 8px 8px;
margin-top: 10px;
position: relative;
}
.copy-btn {
position: absolute;
top: 4px;
right: 8px;
font-size: 12px;
padding: 2px 6px;
cursor: pointer;
border: none;
background: #01e0ce;
color: rgb(0, 0, 0);
border-radius: 3px;
}
</style>
</head>
<body>
<div id="main"></div>
<script>
const inputStrings = [
`
<date_time>07/14/2025, 06:43:02 PM</date_time>
<think>This is my first thought block for the first message.</think>
Here's a regular message.
\`\`\`js
console.log('This is code block 1');
\`\`\``,
`
<date_time>07/14/2025, 07:15:30 PM</date_time>
<think>This is a second thought block for the second message.</think>
This is another message body.
\`\`\`python
def say_hello():
print("Hello from second block")
\`\`\`
More explanation here.`,
`
<date_time>07/14/2025, 06:43:02 PM</date_time>
<think>This is my first thought block for the first message.</think>
Here's a regular message.
\`\`\`js
console.log('This is code block 1');
\`\`\``,
`
<date_time>07/14/2025, 06:43:02 PM</date_time>
<think>This is my first thought block for the first message.</think>
Here's a regular message.
\`\`\`js
console.log('This is code block 1');
\`\`\`
hello`,
];
function processContent(str) {
const timestampMatch = str.match(/<date_time>([\s\S]*?)<\/date_time>/);
const timestamp = timestampMatch ? timestampMatch[1] : 'Unknown time';
let html = `<div class="chat-block"><time>${timestamp}</time>`;
// <think> block
const thinkMatch = str.match(/<think>([\s\S]*?)<\/think>/);
if (thinkMatch) {
html += `<details style="margin-bottom: 10px;"><summary>Think</summary><div>${thinkMatch[1]}</div></details>`;
str = str.replace(/<think>[\s\S]*?<\/think>/, '');
}
// Remove <date_time> tag from remaining string
str = str.replace(/<date_time>[\s\S]*?<\/date_time>/, '');
// Split into code and text
str.split(/\`\`\`/).forEach((part, i) => {
if (i % 2 === 0) {
if (part.trim()) html += `<div class="normal-text">${part}</div>`;
} else {
html += `
<div class="code-block">
<button class="copy-btn" onclick="navigator.clipboard.writeText(this.nextElementSibling.textContent).then(() => this.textContent='Copied!').catch(() => this.textContent='Error'); setTimeout(() => this.textContent='Copy', 1500)">Copy</button>
<code>${part}</code>
</div>
`;
}
});
html += `</div>`;
return html;
}
// Render all messages
const container = document.getElementById('main');
inputStrings.forEach(str => {
container.innerHTML += processContent(str);
});
</script>
<div >
<!-- input -->
</div>
</body>
</html>

102
public/3/arc_reactor.html Normal file
View File

@@ -0,0 +1,102 @@
<!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 >
<div class="flex_parent">
<div id="arc_container">
<!-- <div id="titleBar" style="align-items: center;">
<div id="pointer" style="color: black;font-size: 20px;display: inline;">Hello</div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<div id="pointer" style="color: black;font-size: 30px;display: inline;">Hello</div>
</div> -->
<div class="arc_reactor">
<div class="case_container">
<div class="e7">
<div class="semi_arc_3 e5_1">
<div class="semi_arc_3 e5_2">
<div class="semi_arc_3 e5_3">
<div class="semi_arc_3 e5_4" id="mainCircle"></div>
</div>
</div>
</div>
<div class="core2"></div>
</div>
<ul class="marks">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>

89
public/3/center.html Normal file
View File

@@ -0,0 +1,89 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Stacked Iframes with Opacity & Scrollbar</title>
<style>
/* common full-screen container */
.full-screen {
position: fixed;
top: 0; left: 0;
width: 100vw;
height: 100vh;
margin: 0; padding: 0;
overflow: hidden;
}
/* background layer (fills entire screen again) */
#layer1 {
z-index: 1;
}
/* top layer: semi-transparent + scrollable */
#layer2 {
z-index: 2;
opacity: 0.7;
/* overflow-y: scroll; */
}
/* restore: every full-screen iframe fills its parent */
.full-screen iframe {
display: block;
width: 100%;
height: 100%;
border: none;
}
/* stack two 100vh-high iframes inside layer2 */
#layer2 iframe {
height: 100vh; /* overrides the 100% so each iframe is full viewport */
}
/* custom cyan scrollbar for WebKit */
#layer2::-webkit-scrollbar {
width: 12px;
}
#layer2::-webkit-scrollbar-thumb {
background: cyan;
border-radius: 6px;
}
/* custom scrollbar for Firefox */
#layer2 {
scrollbar-color: cyan transparent;
scrollbar-width: thin;
}
</style>
</head>
<body>
<!-- Background layer, now again truly full-screen -->
<div id="layer1" class="full-screen">
<iframe src="../3/arc_reactor.html"></iframe>
</div>
<!-- Top layer: semi-transparent, scrollable, two iframes -->
<div id="layer2" class="full-screen">
<iframe id="chat" src="../3/Chat_page.html"></iframe>
<!-- <iframe src="../3/Chat_page.html"></iframe> -->
</div>
<script>
// Listen for messages from the parent
window.addEventListener('message', (event) => {
if (event.origin !== window.location.origin) return; // Security check
const message__object = event.data;
const id_of_recipant__iframe_element = document.getElementById('chat').contentWindow;
id_of_recipant__iframe_element.postMessage(message__object, '*'); // Forward to iframe2
});
</script>
<!-- <p id="output">No message yet.</p> -->
</body>
</html>

60
public/4/4.html Normal file
View 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
View 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
View 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
View 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>

1
public/5 Submodule

Submodule public/5 added at 592c762317

39
public/OLD/README.md Normal file
View File

@@ -0,0 +1,39 @@
# Jarvis-in-Javascript🚀🚀
![JARVIS_THUMBNAIL](./Images/Jarvis_Thumbnail.png)
Welcome everyone..🙏🙏
✔️ To get started with project download this repo and follow below steps accordingly:
step 1:
Download repo...
step 2:
Open the folder with vscode code editor...
step 3:
Now visit this website 👉https://openweathermap.org/appid create your account and get api key.
⚠️⚠️ Please get your 👉API_KEY prior otherwise project won't work...
This will help you to get weather details for your area...
step 4:
Now open index.html file in root directory with live server extension in VScode...
Here you go... you have succefully setup your JARVIS 👏👏
**Note:**
✔️ To add additional function:
Create a function in app1.js file which is available at mic/app1.js for example
function createAlarm(){
// Write some code
}
And then call this function in process.json with it's respective command for example...
// In process.json
{
"Jarvis set an alarm" : "createAlarm()"
}
✔️ Please allow the necessary permission required to perform certain task like
camera permission for taking pictures,location for weather details, etc...
✔️ Sometimes JARVIS starting message/sound does not come so click on center so new small JARVIS window will come and then press 'ctrl+s' in
vscode this is quite annoying but this will solve issue...
Hopefully now you will be able to setup your project but still if you face any issue comment down in video section I will be happy to help you...

142
public/OLD/index2.html Normal file
View File

@@ -0,0 +1,142 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Processed Content</title>
<link rel="stylesheet" href="../style/Style.css" />
<style>
/* Styling for the <think> block */
.think {
background-color: grey;
color: white;
padding: 10px;
margin: 10px 0;
}
/* Styling for normal text (outside code blocks) */
.normal-text {
background-color: lightgrey;
color: black;
padding: 10px;
margin: 10px 0;
}
/* Styling for code blocks */
.code-block {
background-color: black;
color: white;
padding: 10px;
margin: 10px 0;
white-space: pre-wrap;
font-family: monospace;
}
</style>
</head>
<body>
<div class="main_scrollable " style="background-color: rgba(4, 0, 255, 0);">
<main id="main"></main>
<!-- <p id="output" style="background-color: rgb(4, 40, 201);">No message yet.</p> -->
<script>
// The input string containing a <think> block, text, and a triple backtick code block.
const inputString = `
<think>
Okay, I need to help the user write a concise PyBullet code to simulate the default humanoid. Let me think about what they're asking for.
First, I remember that PyBullet is a physics simulation library. The user wants to simulate the built-in humanoid model. So, I should start by importing PyBullet and maybe some necessary modules like math.
I'll need to connect to PyBullet's server. Usually, you use bullet.start(). Then, create a physics client using p = bc.connect().
Next, set up the simulation parameters: gravity with bc.setGravity(), and enable real-time stepping for smoother visualization with bc.realTimeSimulation(1).
Loading the humanoid is next. The default model can be loaded with loadURDF. I'll place it at (0, 0, 1) to stand on the ground.
Then, I need a way to reset the simulation each time. Wrapping everything in a while loop that resets and steps the physics makes sense.
Adding a camera for visualization is important too. Set up a camera position and orientation, then enable it with bc.startStateLogging().
Finally, run the simulation until the user presses 'Q' to exit.
I should make sure the code is short and concise, avoiding unnecessary details. Including comments will help explain each part briefly.
</think>
Here's a concise PyBullet code to simulate the default humanoid:
\`\`\`python
import pybullet as p
import time
# Initialize PyBullet
p.connect(p.GUI)
# Set gravity
p.setGravity(0, 0, -10)
# Load the default humanoid (built-in model)
humanoid = p.loadURDF("humanoid.urdf", [0, 0, 1])
# Enable real-time simulation
p.realTimeSimulation(1)
# Simulation loop
while True:
# Step physics
p.stepSimulation()
time.sleep(1/240) # Adjust the timestep as needed
# Check for 'Q' key to exit
if ord(p.readKey()) == ord('Q'):
break
# Cleanup and disconnect
p.disconnect()
\`\`\`
This code will load and simulate the default humanoid model that comes with PyBullet, allowing you to interact with it in the PyBullet GUI. The humanoid will stand upright by default, but you can modify its behavior by adding
additional control code.`;
function processContent(str) {
let processedHTML = '';
// Extract and process the <think> block first.
const thinkRegex = /<think>([\s\S]*?)<\/think>/;
const thinkMatch = str.match(thinkRegex);
if (thinkMatch) {
const thinkContent = thinkMatch[1];
processedHTML += '<div class="think">' + thinkContent + '</div>';
// Remove the <think> block from the string.
str = str.replace(thinkRegex, '');
}
// Process the rest of the string by splitting at triple backticks.
// This will alternate between normal text and code blocks.
const parts = str.split(/```/);
parts.forEach((part, index) => {
if (index % 2 === 0) {
// Normal text outside code blocks.
if (part.trim()) {
processedHTML += '<div class="normal-text">' + part + '</div>';
}
} else {
// Code block content.
processedHTML += '<pre class="code-block">' + part + '</pre>';
}
});
return processedHTML;
}
// Process the input string and update the <main> tag.
document.getElementById('main').innerHTML = processContent(inputString);
</script>
</div>
</body>
</html>

100
public/OLD/index3.html Normal file
View File

@@ -0,0 +1,100 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Realistic Avatar with TTS Sync</title>
<style>
.avatar-container {
position: relative;
width: 300px;
margin: 50px auto;
}
/* The base avatar image */
#avatar {
width: 100%;
display: block;
border-radius: 10px;
border: 5px solid #ccc;
}
/* Overlay for mouth animation (position and size must be adjusted for your image) */
.mouth-overlay {
position: absolute;
bottom: 30px; /* Adjust to position over the mouth */
left: 50%;
width: 60px;
height: 20px;
background: rgba(0, 0, 0, 0.5);
border-radius: 0 0 30px 30px;
transform: translateX(-50%);
opacity: 0;
pointer-events: none;
}
/* Keyframe animation for a more natural mouth movement */
@keyframes speakAnimation {
0% {
opacity: 0;
transform: translateX(-50%) scaleY(0.5);
}
25% {
opacity: 1;
transform: translateX(-50%) scaleY(1.2);
}
50% {
opacity: 0.5;
transform: translateX(-50%) scaleY(0.8);
}
75% {
opacity: 1;
transform: translateX(-50%) scaleY(1.1);
}
100% {
opacity: 0;
transform: translateX(-50%) scaleY(0.5);
}
}
/* Class added to trigger the animation */
.mouth-speaking {
animation: speakAnimation 0.5s infinite;
}
button {
display: block;
margin: 20px auto;
padding: 10px 20px;
font-size: 16px;
}
</style>
</head>
<body>
<div class="avatar-container">
<!-- Replace "avatar.jpg" with the path to your photo -->
<img id="avatar" src="ben_10.jpg" alt="Avatar">
<div class="mouth-overlay" id="mouthOverlay"></div>
</div>
<button id="speakBtn">Speak</button>
<script>
// The sentence to be spoken
const text = "hellow how are you";
const speakBtn = document.getElementById('speakBtn');
const mouthOverlay = document.getElementById('mouthOverlay');
function speakText() {
const utterance = new SpeechSynthesisUtterance(text);
// When speech starts, add the animation class
utterance.onstart = () => {
mouthOverlay.classList.add('mouth-speaking');
};
// When speech ends, remove the animation class
utterance.onend = () => {
mouthOverlay.classList.remove('mouth-speaking');
};
window.speechSynthesis.speak(utterance);
}
speakBtn.addEventListener('click', speakText);
</script>
</body>
</html>

87
public/OLD/index_JS.js Normal file
View File

@@ -0,0 +1,87 @@
const speechRecognition=window.webkitSpeechRecognition //Google Chrome
||
window.SpeechRecognition; //Firefox
//To get a Battery
let batteryPromise = navigator.getBattery();
batteryPromise.then(batteryCallback1);
function batteryCallback1(batteryObject) {
printBatteryStatus(batteryObject);
}
function printBatteryStatus(batteryObject) {
const batteryLevel = batteryObject.level*100;
// console.log("Percentage", batteryLevel+"%");
document.getElementById('ram').innerHTML = "Battery: " + batteryLevel + "%";
}
function getDate1()
{
var d = new Date();
var months = ["January","February","March","April","May","June","July","August","September","October","November","December"];
document.getElementById("monthValue").innerHTML = months[d.getMonth()];
document.getElementById("dateValue").innerHTML = d.getDate();
document.getElementById("timeValue").innerHTML = d.getHours() + ":" + d.getMinutes();
var days = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
document.getElementById("weekDayValue").innerHTML = days[d.getDay()];
}
// jarvisStartingReply();
function startListening()
{
const recong = new speechRecognition();
recong.start();
recong.onresult =function(data)
{
handleResults(data);
}
}
function handleResults(data)
{
let text=data.results[0][0].transcript;
text = text.toLowerCase();
console.log(text);
ProcessCommand(text);
}
function ProcessCommand(UserText)
{
if(UserText.includes("push enable"))
{
// UserText=UserText.slice(16);
// Speak('Searching initiated...'+UserText);
// searchOnGoogle(UserText);
}
else
{
}
}
getDate1();
function getDate1()
{
var d = new Date();
var months = ["January","February","March","April","May","June","July","August","September","October","November","December"];
// document.getElementById("monthValue").innerHTML = months[d.getMonth()];
//document.getElementById("dateValue").innerHTML = d.getDate();
//document.getElementById("timeValue").innerHTML = d.getHours() + ":" + d.getMinutes();
// var days = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
// document.getElementById("weekDayValue").innerHTML = days[d.getDay()];
}
function Speak(TEXT)
{
const utter = new SpeechSynthesisUtterance();
utter.text = TEXT;
utter.voice = window.speechSynthesis.getVoices()[1];
window.speechSynthesis.speak(utter);
window.speechSynthesis.getVoices().forEach(i=>{
console.log(i);
});
}

67
public/OLD/left_design.html Normal file
View File

@@ -0,0 +1,67 @@
<!-- Particles -->
<!-- Left Menu Particles -->
<canvas id="particle1" width="20" height="500"></canvas>
<script>
var canvas = document.getElementById("particle1");
var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(0, 0);
context.lineTo(0, 70);
context.lineTo(10, 85);
context.lineTo(10, 135);
context.lineTo(0, 150);
context.lineTo(0, 480);
context.lineTo(5, 490);
context.lineTo(10, 490);
context.lineTo(20, 490);
context.lineTo(20, 250);
context.lineTo(10, 235);
context.lineTo(10, 185);
context.lineTo(20, 170);
context.lineTo(20, 40);
context.lineTo(10, 30);
context.lineTo(10, 20);
context.closePath();
context.lineWidth = 1;
context.fillStyle = "rgba(2,254,255,0.3)";
context.fill();
context.strokeStyle = "transparent";
context.stroke();
</script>
<canvas id="particle1_1" width="40" height="510"></canvas>
<script>
var canvas = document.getElementById("particle1_1");
var context = canvas.getContext("2d");
context.beginPath();
context.lineTo(0, 0);
context.lineTo(10, 15);
context.lineTo(10, 65);
context.lineTo(0, 80);
context.lineTo(0, 0);
context.closePath();
context.lineWidth = 1;
context.fillStyle = "rgba(2,254,255,0.3)";
context.fill();
context.strokeStyle = "transparent";
context.stroke();
</script>
<canvas id="particle1_2" width="40" height="510"></canvas>
<script>
var canvas = document.getElementById("particle1_2");
var context = canvas.getContext("2d");
context.beginPath();
context.lineTo(10, 80);
context.lineTo(0, 65);
context.lineTo(0, 15);
context.lineTo(10, 0);
context.lineTo(10, 80);
context.closePath();
context.lineWidth = 1;
context.fillStyle = "rgba(2,254,255,0.3)";
context.fill();
context.strokeStyle = "transparent";
context.stroke();
</script>

106
public/OLD/xyz.html Normal file
View File

@@ -0,0 +1,106 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Custom Draggable Items</title>
<style>
/* The container remains the parent element */
draggable-container {
display: block;
position: relative;
width: 100%;
height: 100vh;
background-color: #f0f0f0;
border: 1px solid #ccc;
padding: 10px;
overflow: hidden;
}
/* Each draggable item is an absolutely positioned wrapper */
.draggable {
position: absolute;
cursor: grab;
/* Optional: add a subtle shadow to show the item floating */
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
}
/* Style the iframe as needed */
.draggable iframe {
display: block;
width: 300px;
height: 200px;
border: 2px solid aqua;
background-color: black;
}
</style>
</head>
<body>
<button onclick="document.querySelector('draggable-container').toggleDraggable()">
Enable/Disable Drag
</button>
<draggable-container>
<!-- Wrap each iframe in a .draggable wrapper -->
<div class="draggable" style="top: 50px; left: 50px;">
<iframe src="./main_left_menu.html"></iframe>
</div>
<div class="draggable" style="top: 200px; left: 100px;">
<iframe src="./arc_reactor.html"></iframe>
</div>
<div class="draggable" style="top: 400px; left: 300px;">
<iframe src="./right.html"></iframe>
</div>
</draggable-container>
<script>
class DraggableContainer extends HTMLElement {
constructor() {
super();
this.isDraggable = true;
// Bind our event handler so that it can be removed properly.
this.onMouseDown = this.onMouseDown.bind(this);
}
connectedCallback() {
// Use event delegation: listen for mousedown on the container.
this.addEventListener("mousedown", this.onMouseDown);
}
onMouseDown(e) {
if (!this.isDraggable) return;
// Find the closest draggable wrapper that is a direct child of the container.
let draggableElem = e.target.closest(".draggable");
if (!draggableElem || draggableElem.parentElement !== this) return;
// Calculate the offset between the mouse position and the element's top-left corner.
let offsetX = e.clientX - draggableElem.offsetLeft;
let offsetY = e.clientY - draggableElem.offsetTop;
// Change the cursor to indicate dragging.
draggableElem.style.cursor = "grabbing";
const onMouseMove = (event) => {
draggableElem.style.left = (event.clientX - offsetX) + "px";
draggableElem.style.top = (event.clientY - offsetY) + "px";
};
const onMouseUp = () => {
draggableElem.style.cursor = "grab";
document.removeEventListener("mousemove", onMouseMove);
document.removeEventListener("mouseup", onMouseUp);
};
document.addEventListener("mousemove", onMouseMove);
document.addEventListener("mouseup", onMouseUp);
}
toggleDraggable() {
this.isDraggable = !this.isDraggable;
alert(this.isDraggable ? "Dragging Enabled" : "Dragging Disabled");
}
}
customElements.define("draggable-container", DraggableContainer);
</script>
</body>
</html>

1126
public/style/Style.css Normal file
View File

File diff suppressed because it is too large Load Diff