Skip to content
This repository was archived by the owner on Mar 10, 2025. It is now read-only.

Integrated AI in the chat interface of AIProf! #215

Open
GetSomeSleepBro wants to merge 11 commits into
base: dev
Choose a base branch
from
Open

Integrated AI in the chat interface of AIProf! #215

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
3876eb5
Update askMe.js
GetSomeSleepBro Oct 12, 2024
188c025
Update askMe.js
GetSomeSleepBro Oct 12, 2024
87142aa
Update askMe.js
GetSomeSleepBro Oct 12, 2024
e155f1d
Update askMe.js
GetSomeSleepBro Oct 12, 2024
aa81ba6
Update index.html
GetSomeSleepBro Oct 12, 2024
d82b30a
Update askMe.js
GetSomeSleepBro Oct 12, 2024
840dd4b
Update index.html
GetSomeSleepBro Oct 12, 2024
ad92b02
Update askMe.js
GetSomeSleepBro Oct 12, 2024
6bfd5ad
Update home.css
GetSomeSleepBro Oct 12, 2024
0e5f165
Update askMe.js
GetSomeSleepBro Oct 12, 2024
d8c7bf6
Update askMe.js
GetSomeSleepBro Oct 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 9 additions & 1 deletion css/home.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,8 +43,16 @@
margin-top: 1.5rem;
overflow-y: scroll;
height: 300px;
background-color: #282c34; /* Dark background */
color: #ffffff; /* Light text color */
font-family: 'Courier New', Courier, monospace; /* Monospace font */
padding: 1rem; /* Padding for spacing */
border: 1px solid #444; /* Optional border for definition */
border-radius: 5px; /* Optional rounded corners */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* Optional shadow for depth */
}


#title {
margin-top: 0;
}
Expand Down Expand Up @@ -148,4 +156,4 @@ for mobile responsiveness */
height: auto;
}



76 changes: 38 additions & 38 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,27 +4,27 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AiProf</title>
<title>AICoder</title>
<meta name="description"
content="Unlock the future of learning with AiProf. Elevate your educational experience and discover how AI is reshaping the way you learn and teach" />
content="Unlock the future of learning with AICoder. Elevate your educational experience and discover how AI is reshaping the way you learn and teach" />
<meta name="keywords"
content="Ai, free learning, Artificial Intelligence, education, AI Prof, Meet Your AI, teaching, free lessons, math, history, sports">
content="Ai, free learning, Artificial Intelligence, education, AI Coder, Meet Your AI, teaching, free lessons, math, history, sports">
<meta http-equiv="X-UA-Compatible" content="ie=edge">

<!-- for Facebook -->
<meta property="og:title" content="AI Prof" />
<meta property="og:site_name" content="AIPROF" />
<meta property="og:image" content="https://meetyourai.github.io/AIProf/assets/images/logo/logo.svg" />
<meta property="og:url" content="https://meetyourai.github.io/AIProf/" />
<meta property="og:title" content="AI Coder" />
<meta property="og:site_name" content="AICoder" />
<meta property="og:image" content="https://getsomesleepbro.github.io/AICoder/assets/images/logo/logo.svg" />
<meta property="og:url" content="https://getsomesleepbro.github.io/AICoder/" />
<meta property="og:description"
content="Unlock the future of learning with AiProf. Elevate your educational experience and discover how AI is reshaping the way you learn and teach">
content="Unlock the future of learning with AICoder. Elevate your educational experience and discover how AI is reshaping the way you learn and teach">

<!-- for Twitter -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="AI Prof" />
<meta name="twitter:title" content="AI Coder" />
<meta name="twitter:description"
content="Unlock the future of learning with AiProf. Elevate your educational experience and discover how AI is reshaping the way you learn and teach" />
<meta name="twitter:image" content="https://meetyourai.github.io/AIProf/" />
content="Unlock the future of learning with AICoder. Elevate your educational experience and discover how AI is reshaping the way you learn and teach" />
<meta name="twitter:image" content="https://getsomesleepbro.github.io/AICoder/" />

<meta http-equiv="Access-Control-Allow-Origin" content="*" />
<!-- fav icon -->
Expand Down Expand Up @@ -97,7 +97,7 @@
<li class="nav-item menu-item"><a class="nav-link menu-link " href="#about">about </a></li>
<li class="nav-item menu-item"><a class="nav-link menu-link " href="#pricing">pricing </a></li>
<li class="nav-item menu-item"><a class="nav-link menu-link "
href="https://meetyourai.github.io/AIProf/blog/BlogIndex">Blog </a></li>
href="https://getsomesleepbro.github.io/AICoder/blog/BlogIndex">Blog </a></li>
<li class="nav-item menu-item"><a class="nav-link menu-link " href="#faq">FAQ </a></li>
<li class="nav-item menu-item"><a class="nav-link menu-link " href="#contact-us">contact us
</a></li>
Expand Down Expand Up @@ -125,7 +125,7 @@
<div id="title" class="hero-text-area mt-2">
<div class="row">
<div class="col-12 text-center">
<h1 class="hero-title">Ai Prof The Most <br><span class="featured-text">Helpful Teacher<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 150"
<h1 class="hero-title">AI Coder The Most <br><span class="featured-text">Helpful Teacher<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 150"
preserveAspectRatio="none">
<path
d="M7.7,145.6C109,125,299.9,116.2,401,121.3c42.1,2.2,87.6,11.8,87.3,25.7">
Expand Down Expand Up @@ -291,7 +291,7 @@ <h2 class="title wow fadeInUp" data-wow-delay=".2s">Our Services</h2>
</p>
</div>
<div class="cta-links-area wow fadeInUp " data-wow-delay=".4s justify-content-center">
<a id="toggleButton2" class="btn-outline cta-link cta-link-primary" href="https://www.youtube.com/watch?v=VbZe2mliU5w" target="_blank" alt="what is AI Prof video">
<a id="toggleButton2" class="btn-outline cta-link cta-link-primary" href="https://www.youtube.com/watch?v=VbZe2mliU5w" target="_blank" alt="what is AI Coder video">
Demo Video <i class="bi bi-arrow-right icon "></i>
</a>
</div>
Expand Down Expand Up @@ -380,7 +380,7 @@ <h3 class="service-title">Increased Productivity</h3>
<div class="sec-heading light-title mb-5">
<div class="content-area">
<h2 class="title wow fadeInUp text-center" data-wow-delay=".4s"> <span class='featured-text'>
About AIProf <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 150"
About AICoder <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 150"
preserveAspectRatio="none">
<path
d="M7.7,145.6C109,125,299.9,116.2,401,121.3c42.1,2.2,87.6,11.8,87.3,25.7">
Expand Down Expand Up @@ -509,7 +509,7 @@ <h2 class="text-center text-light mb-5">Our Progress so far</h2>
<div class="content-area">
<h2 class=" title wow fadeInUp" data-wow-delay=".4s">
How <span class='hollow-text'> To</span> Use <span
class='featured-text'>AIProf
class='featured-text'>AICoder
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 150"
preserveAspectRatio="none">
<path
Expand Down Expand Up @@ -546,13 +546,13 @@ <h5 class="info-title">Book Your Teacher With A Group</h5>
<div class="col-12 ">
<div class="info-item"><span class="info-number ">04.</span>
<div class="info-content">
<h5 class="info-title">Book Your Own AiProf</h5>
<h5 class="info-title">Book Your Own AICoder</h5>
</div>
</div>
</div>
<div class="cta-links-area d-flex justify-content-center">
<a id="toggleButton3" class=" btn-outline cta-link cta-link-primary" href="https://www.youtube.com/watch?v=ZRTOWPQkT8g"
target="_blank" alt="video about AI Prof pricing information">
target="_blank" alt="video about AI Coder pricing information">
Demo Video <i class="bi bi-arrow-right icon "></i>
</a>
</div>
Expand Down Expand Up @@ -803,13 +803,13 @@ <h2 class="title wow fadeInUp text-center" data-wow-delay=".2s"><span class='hol
<h5 class="mb-0 faq-title">
<button class="btn btn-link faq-btn collapsed" data-bs-toggle="collapse"
data-bs-target="#collapse-1" aria-expanded="true"
aria-controls="collapse-1">What is AI Prof?</button>
aria-controls="collapse-1">What is AI Coder?</button>
</h5>
</div>
<div class="collapse " id="collapse-1" aria-labelledby="collapse-1"
data-bs-parent="#accordion">
<div class="card-body">
<p class="faq-answer">AiProf transforms education
<p class="faq-answer">AICoder transforms education
by revolutionizing learning experiences,
improving knowledge retention, and offering instant support,
enhancing students' educational journeys.
Expand All @@ -822,14 +822,14 @@ <h5 class="mb-0 faq-title">
<h5 class="mb-0 faq-title">
<button class="btn btn-link faq-btn collapsed " data-bs-toggle="collapse"
data-bs-target="#collapse-2" aria-expanded="true" aria-controls="collapse-2">Is
AI Prof free?</button>
AI Coder free?</button>
</h5>
</div>
<div class="collapse " id="collapse-2" aria-labelledby="collapse-2"
data-bs-parent="#accordion">
<div class="card-body">
<p class="faq-answer">
We offer a free version with the Meet Your AI Prof chatbot for quick answers,
We offer a free version with the Meet Your AI Coder chatbot for quick answers,
along with two subscription plans for personalized solutions that cater to your specific needs.
</p>
</div>
Expand All @@ -840,14 +840,14 @@ <h5 class="mb-0 faq-title">
<h5 class="mb-0 faq-title">
<button class="btn btn-link faq-btn collapsed " data-bs-toggle="collapse"
data-bs-target="#collapse-3" aria-expanded="true" aria-controls="collapse-3">
Is AiProf for Charity?</button>
Is AICoder for Charity?</button>
</h5>
</div>
<div class="collapse " id="collapse-3" aria-labelledby="collapse-3"
data-bs-parent="#accordion">
<div class="card-body">
<p class="faq-answer">
Yes, AiProf also operates as a charity,
Yes, AICoder also operates as a charity,
dedicated to providing free educational resources and support to students.
</p>
</div>
Expand All @@ -858,13 +858,13 @@ <h5 class="mb-0 faq-title">
<h5 class="mb-0 faq-title">
<button class="btn btn-link faq-btn collapsed " data-bs-toggle="collapse"
data-bs-target="#collapse-4" aria-expanded="true" aria-controls="collapse-4">Is
AIProf Safe?</button>
AICoder Safe?</button>
</h5>
</div>
<div class="collapse " id="collapse-4" aria-labelledby="collapse-4"
data-bs-parent="#accordion">
<div class="card-body">
<p class="faq-answer">AIProf is committed to data security, employing stringent measures to safeguard
<p class="faq-answer">AICoder is committed to data security, employing stringent measures to safeguard
your personal and business information, guaranteeing its protection.
</p>
</div>
Expand Down Expand Up @@ -899,7 +899,7 @@ <h6 class="content-title">email:</h6><a class="email link"
<div class="location-card"><i class="flaticon-Social Icons"></i>
<div class="card-content">
<h6 class="content-title">Support:</h6><a class="sc-link"
href="https://www.facebook.com/AIPROF2BC?mibextid=ZbWKwL"
href="https://www.facebook.com/AICoder2BC?mibextid=ZbWKwL"
title="social media icon" target="_blank">
<i class="fab fa-facebook-f sc-icon"></i>
</a>
Expand Down Expand Up @@ -945,7 +945,7 @@ <h6 class="content-title">Partners:</h6><a class="sc-link"
<div class="location-card"><i class="flaticon-Social Icons"></i>
<div class="card-content">
<h6 class="content-title">Influencers:</h6><a class="sc-link"
href="https://instagram.com/aiprof2023?igshid=MzNlNGNkZWQ4Mg=="
href="https://instagram.com/AICoder2023?igshid=MzNlNGNkZWQ4Mg=="
title="social media icon" target="_blank">
<i class="fab fa-instagram sc-icon"></i>
</a>
Expand All @@ -966,7 +966,7 @@ <h6 class="content-title">Influencers:</h6><a class="sc-link"
<img class="img-fluid footer-logo" loading="lazy" src="assets/images/logo/logo.svg" alt="logo" />
<div class="footer-col-content-wrapper">
<p class="footer-text-about-us">
AiProf Your Most Helpful Teacher Ever!
AICoder Your Most Helpful Teacher Ever!
</p>
</div>
</div>
Expand All @@ -977,14 +977,14 @@ <h6 class="content-title">Influencers:</h6><a class="sc-link"
class="footer-menu-link" href="#page-hero" alt="Starting page">Home</a>
</li>
<li class="footer-menu-item"><i class="bi bi-arrow-right icon "></i><a
class="footer-menu-link" href="#about" alt="about AI Prof Section">About Us</a>
class="footer-menu-link" href="#about" alt="about AI Coder Section">About Us</a>
</li>
<li class="footer-menu-item"><i class="bi bi-arrow-right icon "></i><a
class="footer-menu-link" href="#services" alt="services provided by AI Prof">Services</a>
class="footer-menu-link" href="#services" alt="services provided by AI Coder">Services</a>
</li>
<li class="footer-menu-item"><i class="bi bi-arrow-right icon "></i>
<a class="footer-menu-link" href="https://meetyourai.github.io/AIProf/blog/BlogIndex"
alt="AI Prof Blog page" target="_blank">Our Blog</a>
<a class="footer-menu-link" href="https://getsomesleepbro.github.io/AICoder/blog/BlogIndex"
alt="AI Coder Blog page" target="_blank">Our Blog</a>
</li>
</ul>
</div>
Expand All @@ -993,18 +993,18 @@ <h6 class="content-title">Influencers:</h6><a class="sc-link"
<div class="footer-col-content-wrapper">
<ul class="footer-menu">
<li class="footer-menu-item"><i class="bi bi-arrow-right icon "></i>
<a class="footer-menu-link" href="#pricing" alt="AI Prof pricing section">Pricing</a>
<a class="footer-menu-link" href="#pricing" alt="AI Coder pricing section">Pricing</a>
</li>
<li class="footer-menu-item"><i class="bi bi-arrow-right icon "></i>
<a class="footer-menu-link" href="#faq" alt="section about frequently asked Questions">Faqs</a>
</li>
<li class="footer-menu-item"><i class="bi bi-arrow-right icon "></i>
<a class="footer-menu-link" href="#why" alt="section why choose AI Prof">How it works</a>
<a class="footer-menu-link" href="#why" alt="section why choose AI Coder">How it works</a>
</li>
<li class="footer-menu-item"><i class="bi bi-arrow-right icon "></i><a
class="footer-menu-link"
href="https://github.com/MeetYourAI/AIProf/tree/dev/assets"
alt="AI Prof brand assets" target="_blank">Brand Assets</a>
href="https://github.com/MeetYourAI/AICoder/tree/dev/assets"
alt="AI Coder brand assets" target="_blank">Brand Assets</a>
</li>
</ul>
</div>
Expand All @@ -1027,7 +1027,7 @@ <h2 class=" footer-col-title">contact information</h2>
<ul class="sc-list">
<li class="sc-item " title="Facebook">
<a class="sc-link"
href=" https://www.facebook.com/AIPROF2BC?mibextid=ZbWKwL"
href=" https://www.facebook.com/AICoder2BC?mibextid=ZbWKwL"
title="social media icon" target="_blank">
<i class="fab fa-facebook-f sc-icon"></i>
</a>
Expand Down
99 changes: 56 additions & 43 deletions js/askMe.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,52 +10,65 @@ document.addEventListener("DOMContentLoaded", () => {
let access_token = null;
let refresh_token = null;
responseDiv.style.display = "none";

const handleAsk = () => {
const question = questionInput.value;
questionInput.innerHTML = " "
questionInput.innerHTML = " ";
if (question) {
askButton.innerHTML = '<img id="loading-img" src="assets/images/loading2.svg" width="110" height="20" alt="Loading" />';
setResponse('Please wait! Response is coming....')
setIsLoading(true)
askButton.innerHTML = '<img id="loading-img" src="assets/images/loading2.svg" width="110" height="20" alt="Loading" />';
setResponse('Please wait! Response is coming....');
setIsLoading(true);

// if (access_token) {
const headers = {
'Content-Type': 'application/json',
// 'Authorization': `Bearer ${access_token}`,
};
const api_url = "https://awesome-terra-400014.lm.r.appspot.com/chat/";
const data = { "user_input": question };

fetch(api_url, {
method: "POST",
headers: headers,
body: JSON.stringify(data),
})
.then((response) => {
if (response.status === 401) {
refreshAccessToken(refresh_token, makeApiRequest);
} else {
console.log("I'm not in response mode", response);
return response.json();
}
})
.then((result) => {
forVoice = result.chatbot_response;
const ans = result.chatbot_response;
setResponse(ans);
setIsLoading(false)
// toogle()
})
.catch((error) => {
responseDiv.textContent = "Request failed with an error.";
setIsLoading(false)
setResponse('Something went wrong. Please try again')
});
// } else {
// setIsLoading(false)
// setResponse('No access token found.')
// }
}};
// OpenAI API integration
const apiKey = prompt("Please enter your OpenAI API key:");
if (!apiKey) {
alert("API key is required to proceed.");
return;
}
console.log(apiKey);

const headers = {
'Content-Type': 'application/json',
'Authorization': `Bearer ${apiKey}`
};

const data = {
model: "gpt-4",
messages: [
{ role: "system", content: "You are the best coder, writing clean, efficient code in a user-friendly manner. Write only code and avoid providing extra text. Include comments wherever necessary to explain key steps and logic." },
{ role: "user", content: "just output the code and don't output any support text at start or end, just the code without '```' at start and end; now the question is -> "+question }
]
};

const api_url = "https://api.openai.com/v1/chat/completions";

console.log(api_url, data, headers);

fetch(api_url, {
method: "POST",
headers: headers,
body: JSON.stringify(data),
})
.then((response) => {
if (response.ok) {
return response.json();
} else {
throw new Error("Request failed!");
}
})
.then((result) => {
const ans = result.choices[0].message.content; // Extract OpenAI's response
forVoice = ans;
setResponse(ans);
setIsLoading(false);
})
.catch((error) => {
responseDiv.textContent = "Request failed with an error.";
setIsLoading(false);
setResponse('Something went wrong. Please try again');
});
}
};

// const refreshAccessToken = (refreshToken, onSuccess) => {
// console.log('Refresh token')
Expand Down Expand Up @@ -294,4 +307,4 @@ const toogle = () => {
}
}
speaker.addEventListener('click', toogle)
});
});