Spaces:

jake2004
/

VarunGPT_3

Running

App Files Files Community

jake2004 commited on Feb 28, 2025

Commit

3daaf19

verified ·

1 Parent(s): 34b86e5

Delete index.html

Browse files

Files changed (1) hide show

index.html +0 -195

index.html DELETED Viewed

@@ -1,195 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>AI Chatbot</title>
-    <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-            font-family: 'Poppins', sans-serif;
-        }
-        body {
-            display: flex;
-            background: linear-gradient(135deg, #141e30, #243b55);
-            height: 100vh;
-            color: white;
-            justify-content: center;
-            align-items: center;
-            flex-direction: column;
-            padding: 20px;
-        }
-        .container {
-            width: 90%;
-            max-width: 600px;
-            background: rgba(255, 255, 255, 0.1);
-            backdrop-filter: blur(15px);
-            padding: 20px;
-            border-radius: 12px;
-            box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
-            text-align: center;
-        }
-        .chat-box {
-            height: 300px;
-            overflow-y: auto;
-            padding: 10px;
-            border-radius: 10px;
-            background: rgba(255, 255, 255, 0.2);
-        }
-        .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.2);
-            color: white;
-        }
-        .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(255, 255, 255, 0.3);
-        }
-        @media (max-width: 768px) {
-            .container {
-                width: 100%;
-                padding: 15px;
-            }
-            .chat-box {
-                height: 250px;
-            }
-        }
-    </style>
-</head>
-<body>
-    <div class="container">
-        <h2>AI Chatbot</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>
-    <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 {
-                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 },
-                });
-                // Check if the response is a Blob
-                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>