html
html
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
<! credits to chatgpt for helping fixing errors in this code(people got mad) HTML completely made by me along with CSS. Java script made with help from chatgpt!></!>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ChatGPT</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="chat-container">
<!-- Restart Button Above the ChatGPT Text -->
<button id="restartButton" onclick="restartChat()">Restart Chat</button>
<!-- Chat Header Section with Logo and Text -->
<div class="chat-header">
<img src="https://i.postimg.cc/prDLPtvB/IMG-4246.png" alt="ChatGPT Logo" id="chatLogo" />
<h1>CHATGPT</h1>
</div>
<!-- Chat Box -->
<div class="chat-box" id="chatBox"></div>
<!-- Input Field for Messages -->
Enter to Rename, Shift+Enter to Preview
css
css
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
/* General Styles */
body, html {
height: 100%;
margin: 0;
font-family: Arial, sans-serif;
background-color: #f7f7f7;
display: flex;
justify-content: center;
align-items: center;
}
.chat-container {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
width: 100%;
max-width: 600px;
height: 90%;
background-color: #fff;
border-radius: 10px;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
padding: 20px;
}
/* Restart Button Style */
#restartButton {
padding: 8px 15px;
Enter to Rename, Shift+Enter to Preview
js
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
// Define the function to handle sending the message
function sendMessage() {
const userMessage = document.getElementById("userInput").value;
if (!userMessage) return; // Don't send empty messages
// Create a new chat message element for the user's message
const chatBox = document.getElementById("chatBox");
const userMessageElement = document.createElement("div");
userMessageElement.classList.add("user-msg");
userMessageElement.innerHTML = userMessage;
chatBox.appendChild(userMessageElement);
// Clear the input field after sending
document.getElementById("userInput").value = '';
// Fetch the AI response
fetchGroqData(userMessage);
}
// Define the function to handle AI response
async function fetchGroqData(prompt) {
const apiKey = "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"; // Your API key
const url = "https://api.groq.com/openai/v1/chat/completions"; // Groq API endpoint
const requestBody = {
model: "llama3-8b-8192", // Using the model from the API documentation
messages: [
{
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run