|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>VarunGPT</title> |
|
|
|
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> |
|
|
|
|
|
<style> |
|
|
* { |
|
|
font-family: 'Poppins', sans-serif; |
|
|
} |
|
|
body { |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
height: 100vh; |
|
|
background: url('hdr.jpg') no-repeat center center/cover; |
|
|
color: white; |
|
|
text-align: center; |
|
|
padding: 20px; |
|
|
} |
|
|
.container { |
|
|
width: 100%; |
|
|
max-width: 600px; |
|
|
background: rgba(255, 255, 255, 0.1); |
|
|
backdrop-filter: blur(10px); |
|
|
padding: 20px; |
|
|
border-radius: 12px; |
|
|
box-shadow: 0 0 20px rgba(255, 255, 255, 0.2); |
|
|
} |
|
|
.profile-img { |
|
|
width: 80px; |
|
|
height: 80px; |
|
|
border-radius: 50%; |
|
|
box-shadow: 0 0 10px rgba(255, 255, 255, 0.3); |
|
|
} |
|
|
.chat-box { |
|
|
height: 300px; |
|
|
overflow-y: auto; |
|
|
padding: 15px; |
|
|
background: rgba(255, 255, 255, 0.2); |
|
|
border-radius: 10px; |
|
|
} |
|
|
.user-message, .bot-message { |
|
|
padding: 12px; |
|
|
border-radius: 10px; |
|
|
margin: 10px 0; |
|
|
max-width: 75%; |
|
|
word-wrap: break-word; |
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); |
|
|
} |
|
|
.user-message { |
|
|
align-self: flex-end; |
|
|
background: linear-gradient(135deg, #ff758c, #ff7eb3); |
|
|
} |
|
|
.bot-message { |
|
|
align-self: flex-start; |
|
|
background: linear-gradient(135deg, #36d1dc, #5b86e5); |
|
|
} |
|
|
.chat-input { |
|
|
display: flex; |
|
|
gap: 10px; |
|
|
margin-top: 15px; |
|
|
} |
|
|
.chat-input input { |
|
|
flex-grow: 1; |
|
|
padding: 12px; |
|
|
border-radius: 8px; |
|
|
border: none; |
|
|
outline: none; |
|
|
background: rgba(255, 255, 255, 0.2); |
|
|
color: white; |
|
|
} |
|
|
.send-btn { |
|
|
padding: 12px 18px; |
|
|
background: linear-gradient(45deg, #6a11cb, #2575fc); |
|
|
color: white; |
|
|
border: none; |
|
|
border-radius: 8px; |
|
|
cursor: pointer; |
|
|
transition: 0.3s; |
|
|
} |
|
|
.send-btn:hover { |
|
|
background: linear-gradient(45deg, #2575fc, #6a11cb); |
|
|
} |
|
|
.image-container img { |
|
|
width: 100%; |
|
|
border-radius: 8px; |
|
|
box-shadow: 0 4px 8px rgba(255, 255, 255, 0.3); |
|
|
} |
|
|
@media (max-width: 768px) { |
|
|
.container { |
|
|
width: 100%; |
|
|
padding: 15px; |
|
|
} |
|
|
.chat-box { |
|
|
height: 250px; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="container"> |
|
|
|
|
|
<img src="profile.jpg" alt="Profile" class="profile-img"> |
|
|
<h2 class="mt-2">Varun-GPT</h2> |
|
|
|
|
|
|
|
|
<input type="text" id="chat-api-key" class="form-control my-2" placeholder="Enter Hugging Face API Key (Chat)"> |
|
|
<input type="text" id="image-api-key" class="form-control mb-3" placeholder="Enter Hugging Face API Key (Image)"> |
|
|
|
|
|
|
|
|
<div class="chat-box" id="chat-box"></div> |
|
|
|
|
|
|
|
|
<div class="chat-input"> |
|
|
<input type="text" id="user-input" class="form-control" placeholder="Type a message..."> |
|
|
<button class="btn btn-primary send-btn" id="send-button">Send</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="image-container mt-3" id="image-container"></div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<script type="module"> |
|
|
import { HfInference } from "https://cdn.jsdelivr.net/npm/@huggingface/inference/+esm"; |
|
|
|
|
|
let chatClient, imageClient; |
|
|
|
|
|
document.getElementById("send-button").addEventListener("click", handleChat); |
|
|
document.getElementById("user-input").addEventListener("keypress", function(event) { |
|
|
if (event.key === "Enter") handleChat(); |
|
|
}); |
|
|
|
|
|
async function handleChat() { |
|
|
const userInput = document.getElementById("user-input").value; |
|
|
const chatApiKey = document.getElementById("chat-api-key").value; |
|
|
const imageApiKey = document.getElementById("image-api-key").value; |
|
|
if (!userInput.trim() || !chatApiKey.trim() || !imageApiKey.trim()) return; |
|
|
|
|
|
if (!chatClient) chatClient = new HfInference(chatApiKey); |
|
|
if (!imageClient) imageClient = new HfInference(imageApiKey); |
|
|
|
|
|
const chatBox = document.getElementById("chat-box"); |
|
|
chatBox.innerHTML += `<div class='user-message'><strong>You:</strong> ${userInput}</div>`; |
|
|
document.getElementById("user-input").value = ""; |
|
|
|
|
|
if (userInput.toLowerCase().startsWith("generate an image of")) { |
|
|
const imagePrompt = userInput.replace("generate an image of", "").trim(); |
|
|
await generateImage(imagePrompt); |
|
|
} else { |
|
|
await fetchChatResponse(userInput); |
|
|
} |
|
|
chatBox.scrollTop = chatBox.scrollHeight; |
|
|
} |
|
|
|
|
|
async function fetchChatResponse(input) { |
|
|
try { |
|
|
const response = await chatClient.chatCompletion({ |
|
|
model: "mistralai/Mistral-7B-Instruct-v0.2", |
|
|
messages: [{ role: "user", content: input }], |
|
|
max_tokens: 500, |
|
|
}); |
|
|
const botMessage = response.choices[0].message.content; |
|
|
document.getElementById("chat-box").innerHTML += `<div class='bot-message'><strong>VarunGPT-3:</strong> ${botMessage}</div>`; |
|
|
} catch (error) { |
|
|
console.error("Error fetching chat response:", error); |
|
|
} |
|
|
} |
|
|
|
|
|
async function generateImage(prompt) { |
|
|
const imageContainer = document.getElementById("image-container"); |
|
|
imageContainer.innerHTML = `<p>Generating image...</p>`; |
|
|
|
|
|
try { |
|
|
const response = await imageClient.textToImage({ |
|
|
model: "stabilityai/stable-diffusion-xl-base-1.0", |
|
|
inputs: prompt, |
|
|
parameters: { num_inference_steps: 50, guidance_scale: 7.5 }, |
|
|
}); |
|
|
|
|
|
if (response instanceof Blob) { |
|
|
const imageUrl = URL.createObjectURL(response); |
|
|
imageContainer.innerHTML = `<img src="${imageUrl}" alt="Generated Image">`; |
|
|
} else { |
|
|
imageContainer.innerHTML = `<p style="color: red;">Error: Invalid API response.</p>`; |
|
|
} |
|
|
} catch (error) { |
|
|
imageContainer.innerHTML = `<p style="color: red;">Error generating image: ${error.message || "Unknown error"}</p>`; |
|
|
} |
|
|
} |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
