update
This commit is contained in:
dhruv
39
public/OLD/README.md
Normal file
39
public/OLD/README.md
Normal file
@@ -0,0 +1,39 @@
|
||||
# Jarvis-in-Javascript🚀🚀
|
||||
|
||||
|
||||
|
||||
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
142
public/OLD/index2.html
Normal 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
100
public/OLD/index3.html
Normal 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
87
public/OLD/index_JS.js
Normal 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
67
public/OLD/left_design.html
Normal 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
106
public/OLD/xyz.html
Normal 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>
|
||||
Reference in New Issue
Block a user