-
Notifications
You must be signed in to change notification settings - Fork 3
/
main.js
185 lines (156 loc) · 5.46 KB
/
main.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
import { GoogleGenerativeAI } from "@google/generative-ai";
import md from "markdown-it";
import Typed from 'typed.js';
document.addEventListener('DOMContentLoaded', function () {
var typed = new Typed('.text', {
strings: ["Let's create", "Let's brainstorm", "Let's go", "SamarGPT", "Let's explore", "Let's collaborate", "Let's invent", "SamarGPT", "Let's design", "Let's chit-chat", "Let's discover", "SamarGPT"],
typeSpeed: 12,
backSpeed: 12,
backDelay: 1500,
loop: true
});
});
document.getElementById('redirectButton').addEventListener('click', function () {
document.getElementById('first-main').style.display = 'none';
document.getElementById('second-main').style.display = 'flex';
});
// Initialize the model
const genAI = new GoogleGenerativeAI(`${import.meta.env.VITE_API_KEY}`);
const model = genAI.getGenerativeModel({ model: "gemini-pro" });
let history = [];
async function getResponse(prompt) {
try {
const chat = await model.startChat({ history: history });
const result = await chat.sendMessage(prompt);
const response = await result.response;
const text = await response.text();
return text;
} catch (error) {
console.error("Error getting AI response. Please reload page and try again later. Error:", error);
throw new Error("Failed to get response from AI. Please reload page and try again later.");
}
}
// User chat div
export const userDiv = (data) => {
return `
<!-- User Chat -->
<div class="flex items-center gap-2 justify-center fit-content w-auto max-w-full">
<img
src="samarjit.jpeg"
alt="user icon"
class="w-10 h-10 rounded-full"
/>
<p class="text-white p-1"><span class="font-bold">You</span><br>
${data}
</p>
</div>
`;
};
// AI Chat div with id for dynamic updates and cursor
export const aiDiv = (data, id) => {
return `
<!-- AI Chat -->
<div id="ai-response-container-${id}" class="flex gap-2 justify-center items-start w-full overflow-hidden whitespace-normal break-words">
<img src="chatGPT.png" alt="user icon" class="w-10 h-10 rounded-full" />
<div id="ai-response-${id}" class="text-white p-1">
<span class="font-bold">SamarGPT</span><br>
<span id="ai-response-text-${id}">${data}</span>
<span id="cursor-${id}" class="circle-cursor"></span>
</div>
</div>
`;
};
// Function to scroll to the bottom of the chat container
function scrollToBottom() {
const chatArea = document.getElementById("chat-container");
chatArea.scrollTop = chatArea.scrollHeight;
}
// Function to append each character with a delay and update cursor position
function appendCharacterByCharacter(text, id) {
const aiResponseContainer = document.getElementById(`ai-response-text-${id}`);
const cursor = document.getElementById(`cursor-${id}`);
let index = 0;
function appendNextCharacter() {
if (index < text.length) {
aiResponseContainer.innerHTML += text[index];
index++;
scrollToBottom(); // Scroll to bottom as each character is added
setTimeout(appendNextCharacter, 9); // 9ms delay between characters
} else {
// Render markdown after the complete text is displayed
let md_text = md().render(aiResponseContainer.innerHTML);
aiResponseContainer.innerHTML = md_text;
cursor.style.display = 'none'; // Hide the cursor after typing is complete
scrollToBottom(); // Ensure scroll at the end of typing
}
}
appendNextCharacter();
}
async function handleSubmit(event) {
event.preventDefault();
let userMessage = document.getElementById("prompt");
const chatArea = document.getElementById("chat-container");
var prompt = userMessage.value.trim();
if (prompt === "") {
return;
}
console.log("user message", prompt);
// Add the user prompt to the chat area
chatArea.innerHTML += userDiv(prompt);
userMessage.value = "";
// Create a unique ID for the AI response
const uniqueId = history.length;
// Append an empty AI response container with the unique ID and cursor
chatArea.innerHTML += aiDiv("", uniqueId);
// Scroll to the bottom of the chat area
scrollToBottom();
try {
// Fetch the AI response and start appending characters
const aiResponse = await getResponse(prompt);
appendCharacterByCharacter(aiResponse, uniqueId);
// Update chat history with user and AI responses
let newUserRole = {
role: "user",
parts: [{ text: prompt }],
};
let newAIRole = {
role: "model",
parts: [{ text: aiResponse }],
};
history.push(newUserRole);
history.push(newAIRole);
console.log(history);
} catch (error) {
console.error(error);
// Display custom error message in the AI response container character by character
const errorMessage = "An Error occurred. Please reload page and try again later.";
appendCharacterByCharacter(errorMessage, uniqueId);
}
}
// CSS for the circle cursor
const style = document.createElement('style');
style.innerHTML = `
.circle-cursor {
display: inline-block;
width: 10px;
height: 10px;
margin-left: 5px;
border-radius: 50%;
background-color: white;
animation: swell 1s infinite;
}
@keyframes swell {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
}
`;
document.head.appendChild(style);
const chatForm = document.getElementById("chat-form");
chatForm.addEventListener("submit", handleSubmit);
chatForm.addEventListener("keyup", (event) => {
if (event.keyCode === 13) handleSubmit(event);
});