<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" /> lin
<title>Jarvis</title>
</head>
<style>
<style>@import url("https://fonts.googleapis.com/css2?family=Harmattan&display=swap");
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap');
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: "Harmattan", sans-serif;
background: url("jarvis.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-color: black;
}
#welcome {
text-align: center;
margin-top: 110px;
color: rgb(0, 183, 255);
font-family: 'IBM Plex Mono', monospace;
font-weight: bolder;
font-size: 30px;
display: none;
}
#box {
position: absolute;
width: 100%;
text-align: center;
padding: 20px;
bottom: 50px;
color: rgb(0, 183, 255);
font-family: 'IBM Plex Mono', monospace;
font-weight: bolder;
font-size: 20px;
}
</style>
<body id="body">
<button class="btn btn-primary" id="start">Start</button>
<!--<button class="btn btn-danger" id="stop">Stop</button>
<button class="btn btn-success" id="speak">Speakout</button>
<!-- Option 1: Bootstrap Bundle with Popper -->
<p id="welcome" class="animate__animated animate__flash">Welcome</p>
<div id="box">
<p id="text" class="animate__animated animate__flash animate__infinite animate__slow"></p>
</div>
<script>
// elements
const startBtn = document.querySelector("#start");
const stopBtn = document.querySelector("#stop");
const speakBtn = document.querySelector("#speak");
const body = document.querySelector("#body");
const welcome = document.getElementById("welcome");
const text = document.getElementById("text");
// speech setup
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
const recognition = new SpeechRecognition();
// speech active always
recognition.continuous = true;
// speech start code
recognition.onstart = function() {
console.log("voice active");
}
// result
recognition.onresult = function(event) {
let current = event.resultIndex;
let transcript = event.results[current][0].transcript;
//console.log(transcript);
transcript = transcript.toLowerCase();
console.log(`Me : ${transcript}`);
if (transcript.includes("activate now")) {
readOut("activation processing start");
const myTimeout = setTimeout(myGreeting, 500);
function myGreeting() {
body.style.backgroundColor = "black";
body.style.backgroundImage = "url(init.gif)";
readOut("please wait");
clearTimeout(myTimeout);
}
const myTimeout1 = setTimeout(myGreeting1, 5000);
function myGreeting1() {
body.style.backgroundColor = "black";
body.style.backgroundImage = "url(jarvis.gif)";
welcome.style.display = "block";
readOut("welcome, i am on");
clearTimeout(myTimeout1);
}
const myTimeout2 = setTimeout(myGreeting2, 7000);
function myGreeting2() {
welcome.style.display = "none";
clearTimeout(myTimeout2);
}
}
if (transcript.includes("hello mr.robot")) {
text.innerHTML = "Hello Mr.vishal verma How are you ?";
readOut("Hello, mr. vishal verma How are you ?");
}
if (transcript.includes("i am fine")) {
text.innerHTML = "";
text.innerHTML = "Good";
readOut("Good");
}
if (transcript.includes("how are you") || transcript.includes("and how are you mr.robot")) {
text.innerHTML = "";
text.innerHTML = "i am also fine, thank you Vishal sir";
readOut("i am fine, thank you Vishal sir");
}
if (transcript.includes("open youtube") || transcript.includes("hey robat open youtube")) {
window.open("https://www.youtube.com");
text.innerHTML = "";
text.innerHTML = "ok sir, opening youtube, Here you can watch any video and enjoy";
readOut("ok sir, opening youtube, Here you can watch any video and enjoy");
}
if (transcript.includes("mai kaha hu abhi") || transcript.includes("mai kaha hu abhi") || transcript.includes("mai kaha hu abhi")) {
text.innerHTML = "";
text.innerHTML = "aap bangloru me hai";
readOut("aap bangloru me hai sir");
}
if (transcript.includes("thank you")) {
text.innerHTML = "";
text.innerHTML = "welcome sir";
readOut("welcome sir");
}
if (transcript.includes("open google") || transcript.includes("hey jarvis open google")) {
window.open("https://www.google.com");
text.innerHTML = "";
text.innerHTML = "opening google sir";
readOut("opening google sir");
}
if (transcript.includes("search for")) {
text.innerHTML = "";
text.innerHTML = "here's the result";
readOut("here's the result");
let input = transcript.split("");
input.splice(0, 11);
input = input.join("").split(" ").join("+");
open("https://www.google.com/search?q=" + input);
console.log(input);
}
if (transcript.includes("play")) {
text.innerHTML = "";
text.innerHTML = "here's the result";
readOut("here's the result");
let input = transcript.split("");
input.splice(0, 5);
input = input.join("").split(" ").join("+");
open("https://www.youtube.com/results?search_query=" + input);
console.log(input);
}
if (transcript.includes("open facebook") || transcript.includes("hey jarvis open facebook") || transcript.includes("open fb")) {
window.open("https://www.facebook.com");
text.innerHTML = "";
text.innerHTML = "opening facebook sir, this is social networking site";
readOut("opening facebook sir, this is social networking site");
}
if (transcript.includes("open whatsapp") || transcript.includes("hey jarvis open whatsapp")) {
window.open("https://www.whatsapp.com");
text.innerHTML = "";
text.innerHTML = "opening whatsapp sir";
readOut("opening whatsapp sir");
}
if (transcript.includes("open instagram") || transcript.includes("hey jarvis open instagram") || transcript.includes("hey jarvis open insta")) {
window.open("https://www.instagram.com");
text.innerHTML = "";
text.innerHTML = "opening instagram sir";
readOut("opening instagram sir");
}
if (transcript.includes("open prompt")) {
text.innerHTML = "";
text.innerHTML = "ok sir";
readOut("ok sir");
var x = window.prompt();
document.write(x);
}
if (transcript.includes("my best friends name") || transcript.includes("my best friends name jarvis") || transcript.includes("my best friends name jarvis")) {
text.innerHTML = "vishal's best friend's name is Gurudev mishira Akash kumar dinesh kumar yadav and saurbh kumar";
readOut("vishal's best friend's name is Gurudev mishira Akash kumar dinesh kumar yadav and saurbh kumar");
}
};
// speech end code
recognition.onend = function() {
console.log("voice deactive");
}
startBtn.addEventListener('click', () => {
recognition.start();
});
stopBtn.addEventListener('click', () => {
recognition.stop();
});
// jarvis speech
function readOut(message) {
console.log(`Jarvis : ${message}`);
const allVoices = speechSynthesis.getVoices();
const speech = new SpeechSynthesisUtterance();
speech.text = message;
speech.voice = allVoices[0];
speech.volume = 1;
window.speechSynthesis.speak(speech);
//console.log("speaking out");
}
/*
// example
speakBtn.addEventListener('click',()=>{
readOut("Hi Mr.Arsil , welcome to this new world");
});
// onload...fun()
*/
window.onload = function() {
readOut(" ");
}
</script>
</body>
</html>