| <!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> |
|
|
