Update index.html

index.html

@@ -5,17 +5,105 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>AI Chatbot</title>
     <script type="module" src="https://cdn.jsdelivr.net/npm/@huggingface/inference"></script>
-    <link rel="stylesheet" href="style.css">
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #121212;
+            color: white;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            margin: 0;
+        }
+        .chat-container {
+            width: 400px;
+            background: #1e1e1e;
+            border-radius: 10px;
+            box-shadow: 0px 0px 15px rgba(255, 255, 255, 0.1);
+            overflow: hidden;
+            display: none;
+        }
+        .api-container {
+            text-align: center;
+            padding: 20px;
+        }
+        .api-container input {
+            padding: 10px;
+            width: 80%;
+            border: none;
+            border-radius: 5px;
+            font-size: 16px;
+        }
+        .api-container button {
+            padding: 10px;
+            margin-top: 10px;
+            background: #4caf50;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+        }
+        .chat-box {
+            height: 400px;
+            overflow-y: auto;
+            padding: 15px;
+        }
+        .user-message, .bot-message {
+            background: #333;
+            padding: 10px;
+            margin: 5px 0;
+            border-radius: 8px;
+            max-width: 80%;
+        }
+        .user-message {
+            align-self: flex-end;
+            background: #4caf50;
+            color: white;
+        }
+        .bot-message {
+            align-self: flex-start;
+        }
+        img {
+            width: 100%;
+            max-width: 250px;
+            border-radius: 10px;
+            margin-top: 5px;
+        }
+        .input-container {
+            display: flex;
+            padding: 10px;
+            background: #282828;
+        }
+        input {
+            flex: 1;
+            padding: 10px;
+            border: none;
+            border-radius: 5px;
+            font-size: 16px;
+        }
+        button {
+            padding: 10px;
+            background: #4caf50;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+        }
+        button:hover {
+            background: #45a049;
+        }
+    </style>
 </head>
 <body>
 
-    <div id="api-key-container" class="api-key-container">
+    <div class="api-container" id="api-container">
         <h2>Enter Your Hugging Face API Key</h2>
-        <input type="text" id="api-key-input" placeholder="hf_xxxxxxxxxxxxxxxxxxxx">
-        <button id="submit-api-key">Submit</button>
+        <input type="text" id="api-key-input" placeholder="Enter API Key...">
+        <button id="api-submit">Submit</button>
     </div>
 
-    <div class="chat-container" id="chat-container" style="display: none;">
+    <div class="chat-container" id="chat-container">
         <div class="chat-box" id="chat-box"></div>
         <div class="input-container">
             <input type="text" id="user-input" placeholder="Type your message...">
@@ -26,25 +114,21 @@
     <script type="module">
         import { HfInference } from "https://cdn.jsdelivr.net/npm/@huggingface/inference";
 
-        let hfApiKey = "";
-
-        document.getElementById("submit-api-key").addEventListener("click", () => {
-    hfApiKey = document.getElementById("api-key-input").value.trim();
-    console.log("API Key Entered:", hfApiKey);  // Debugging log
-
-    if (hfApiKey.startsWith("hf_")) {
-        document.getElementById("api-key-container").style.display = "none";
-        document.getElementById("chat-container").style.display = "flex";
-        console.log("Chat UI should be visible now");
-    } else {
-        alert("Invalid API Key! Please enter a valid Hugging Face API key.");
-    }
-});
+        let client = null;
 
+        document.getElementById("api-submit").addEventListener("click", function () {
+            const apiKey = document.getElementById("api-key-input").value.trim();
+            if (!apiKey) {
+                alert("Please enter a valid API key.");
+                return;
+            }
+            client = new HfInference(apiKey);
+            document.getElementById("api-container").style.display = "none";
+            document.getElementById("chat-container").style.display = "block";
+        });
 
         async function getChatResponse(userMessage) {
             try {
-                const client = new HfInference(hfApiKey);
                 const chatCompletion = await client.chatCompletion({
                     model: "mistralai/Mistral-7B-Instruct-v0.2",
                     messages: [{ role: "user", content: userMessage }],
@@ -81,11 +165,9 @@
             chatBox.innerHTML += `<div class="user-message"><strong>You:</strong> ${userInput}</div>`;
             document.getElementById("user-input").value = "";
 
-            // Get AI response
             const response = await getChatResponse(userInput);
             chatBox.innerHTML += `<div class="bot-message"><strong>AI:</strong> ${response}</div>`;
 
-            // Get Wikipedia image
             const imageUrl = await getWikipediaImage(userInput);
             if (imageUrl) {
                 chatBox.innerHTML += `<div class="bot-message"><strong>Related Image:</strong><br><img src="${imageUrl}" alt="Wikipedia Image"></div>`;