|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>ChhayaGPT</title> |
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> |
|
|
<style> |
|
|
* { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
box-sizing: border-box; |
|
|
font-family: 'Poppins', sans-serif; |
|
|
} |
|
|
|
|
|
body { |
|
|
background: linear-gradient( |
|
|
to right, |
|
|
#E0EAFC, |
|
|
#CFDEF3, |
|
|
#A6E6FF |
|
|
); |
|
|
height: 100vh; |
|
|
color: black; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
flex-direction: column; |
|
|
padding: 20px; |
|
|
} |
|
|
|
|
|
.container { |
|
|
width: 90%; |
|
|
max-width: 600px; |
|
|
background: rgba(255, 255, 255, 0.8); |
|
|
backdrop-filter: blur(15px); |
|
|
padding: 20px; |
|
|
border-radius: 12px; |
|
|
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.chat-box { |
|
|
height: 300px; |
|
|
overflow-y: auto; |
|
|
padding: 10px; |
|
|
border-radius: 10px; |
|
|
background: rgba(255, 255, 255, 0.6); |
|
|
} |
|
|
|
|
|
.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; |
|
|
margin-top: 15px; |
|
|
} |
|
|
|
|
|
.chat-input input { |
|
|
flex-grow: 1; |
|
|
padding: 12px; |
|
|
border-radius: 8px; |
|
|
border: none; |
|
|
outline: none; |
|
|
background: rgba(255, 255, 255, 0.6); |
|
|
color: black; |
|
|
} |
|
|
|
|
|
.send-btn { |
|
|
padding: 12px 18px; |
|
|
margin-left: 10px; |
|
|
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(0, 0, 0, 0.3); |
|
|
} |
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.container { |
|
|
width: 100%; |
|
|
padding: 15px; |
|
|
} |
|
|
.chat-box { |
|
|
height: 250px; |
|
|
} |
|
|
} |
|
|
|
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="container"> |
|
|
<h2>ChhayaGPT</h2> |
|
|
<input type="text" id="chat-api-key" placeholder="Enter Hugging Face API Key (Chat)" style="width: 100%; padding: 10px; margin-bottom: 10px; border-radius: 5px;"> |
|
|
<input type="text" id="image-api-key" placeholder="Enter Hugging Face API Key (Image)" style="width: 100%; padding: 10px; margin-bottom: 10px; border-radius: 5px;"> |
|
|
|
|
|
<div class="chat-box" id="chat-box"></div> |
|
|
|
|
|
<div class="chat-input"> |
|
|
<input type="text" id="user-input" placeholder="Type a message..."> |
|
|
<button class="send-btn" id="send-button">Send</button> |
|
|
</div> |
|
|
|
|
|
<div class="image-container" id="image-container"></div> |
|
|
|
|
|
|
|
|
<div class="slider"> |
|
|
<div class="slide active" style="background-image: url('https://example.com/image1.jpg');"></div> |
|
|
<div class="slide inactive" style="background-image: url('https://example.com/image2.jpg');"></div> |
|
|
</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>ChhayaGPT:</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 { |
|
|
if (!imageClient) { |
|
|
console.error("Hugging Face Image API key is missing."); |
|
|
imageContainer.innerHTML = `<p style="color: red;">Error: Missing API Key.</p>`; |
|
|
return; |
|
|
} |
|
|
|
|
|
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 imageBlob = response; |
|
|
const imageUrl = URL.createObjectURL(imageBlob); |
|
|
imageContainer.innerHTML = `<img src="${imageUrl}" alt="Generated Image">`; |
|
|
} else { |
|
|
console.error("Unexpected response format:", response); |
|
|
imageContainer.innerHTML = `<p style="color: red;">Error: Invalid API response.</p>`; |
|
|
} |
|
|
|
|
|
} catch (error) { |
|
|
console.error("Error generating image:", error.message || error); |
|
|
imageContainer.innerHTML = `<p style="color: red;">Error generating image: ${error.message || "Unknown error"}</p>`; |
|
|
} |
|
|
} |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
