Spaces:

Dooratre
/

db-test

Running

App Files Files Community

Dooratre commited on Nov 24, 2024

Commit

0a28f3e

verified ·

1 Parent(s): 1aeb88a

Update index.html

Browse files

Files changed (1) hide show

index.html +321 -36

index.html CHANGED Viewed

@@ -1,43 +1,328 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>API Interaction</title>
-    <script>
-        async function callAPI() {
-            const url = "https://huggingface.co/chat/conversation";
-            const headers = {
-                "Content-Type": "application/json",
-                "Cookie": "token=LdeOqPFByfVHXYRcTqdmowtNLCxediADEHZFBibXkaZcHYHtMrYKFEPndUUEyPFTajezjuHTHeStDeabkwbMUoLKzpCFmhmZSIFKvvwWiWHSFdNfoRVKbWuIVTLikIdR; __stripe_mid=06f6506e-e1bc-41c6-88f9-a8b3802c925085fa8e; hf-chat=8881bae7-9647-4cf3-8f8a-59de9f530c82; aws-waf-token=c27f90fe-f8c3-4742-90c7-68e483c93599:DgoAdG6NUVMZAAAA:r3I9urfTNs3M0F/LjKVi3zAL+W3UZ75yLE9SiEnPGsQYZP0qzmo+WNCDXxIacFoPHw5nNHpjZ4dQST/YIFy7vKeVv/fYbrruLJXXYULp2eIxZjmMqmQWZBBqEulrGWvuKpBWymHxyVlJxw6lysVg5ef1amEXPJzaVwdaRiYsNipGTPdiokAbL9k1wunKnirpX3cg3QN9LFeejYP/ZYbiaIciKlxtmnZ+Dlqd5/lh7Uw4jobTLNBRMRN67qZZyooQhmQbW4E=" // Replace with your actual cookie
-            };
-            const payload = {
-                "model": "nvidia/Llama-3.1-Nemotron-70B-Instruct-HF",
-                "preprompt": ""
-            };
-            try {
-                const response = await fetch(url, {
-                    method: 'POST',
-                    headers: headers,
-                    body: JSON.stringify(payload)
-                });
-                if (response.ok) {
-                    const data = await response.json();
-                    document.getElementById("result").innerText = `ID: ${data.id}`; // Adjust based on actual response structure
-                } else {
-                    document.getElementById("result").innerText = `Error: ${response.status}`;
-                }
-            } catch (error) {
-                document.getElementById("result").innerText = `Request failed: ${error.message}`;
-            }
-        }
-    </script>
 </head>
 <body>
-    <h1>API Interaction</h1>
-    <button onclick="callAPI()">Run API</button>
-    <p id="result"></p>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Modern AI Chat</title>
+<style>
+/* Import Fonts */
+@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600&family=Poppins:wght@400;600&display=swap');
+/* Highlight Title Styling for AI Response */
+.highlight-title {
+  font-size: 1rem; /* Adjust for mobile */
+  font-weight: 700; /* Extra bold */
+  color: #000; /* Black text */
+  display: inline-block;
+  margin: 5px 0; /* Add some spacing if needed */
+}
+/* Fullscreen Responsive Styling */
+body {
+  margin: 0;
+  padding: 0;
+  font-family: 'Poppins', sans-serif;
+  background: linear-gradient(135deg, #6E45E2, #88D3CE);
+  height: 100vh; /* Full height */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+/* Animation Background */
+body::before {
+  content: '';
+  position: absolute;
+  top: -50%;
+  left: -50%;
+  width: 200%;
+  height: 200%;
+  background: radial-gradient(circle, rgba(98, 0, 234, 0.6), transparent);
+  animation: backgroundAnimation 6s infinite linear alternate;
+  z-index: 0;
+}
+@keyframes backgroundAnimation {
+  to {
+    transform: rotate(360deg);
+  }
+}
+.chat-container {
+  position: relative;
+  z-index: 1;
+  width: 100%; /* Full width for mobile */
+  height: 100%; /* Full height for mobile */
+  background: #ffffff;
+  border-radius: 15px 15px 0 0; /* Rounded top corners */
+  box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.2); /* Subtle shadow */
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+/* Header */
+.chat-header {
+  background: linear-gradient(135deg, #6200ea, #3700b3);
+  color: #fff;
+  padding: 15px; /* Adjusted padding for mobile */
+  text-align: center;
+  font-size: 1.2rem; /* Adjusted for mobile */
+  font-weight: bold;
+  font-family: 'Cairo', sans-serif;
+  border-bottom: 1px solid #ddd;
+}
+/* Chat Box */
+.chat-box {
+  flex: 1;
+  padding: 10px 15px; /* Smaller padding for mobile */
+  overflow-y: auto; /* Enable vertical scrolling */
+  max-height: calc(100vh - 140px); /* Dynamic height */
+  display: flex;
+  flex-direction: column;
+  background: #f8f9fa;
+}
+.chat-box .message {
+  margin-bottom: 10px; /* Reduced margin for compact spacing */
+  font-size: 0.9rem; /* Adjusted for mobile */
+  padding: 10px 15px;
+  border-radius: 20px;
+  max-width: 75%;
+  animation: slideIn 0.3s ease-in-out;
+  word-wrap: break-word;
+  font-family: 'Cairo', 'Poppins', sans-serif;
+}
+@keyframes slideIn {
+  from {
+    transform: translateY(10px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+.chat-box .message.user {
+  margin-left: auto;
+  background: #e3f2fd;
+  color: #0D47A1;
+  text-align: right;
+}
+.chat-box .message.ai {
+  margin-right: auto;
+  background: #e8f5e9;
+  color: #1B5E20;
+  text-align: left;
+}
+/* Typing Animation */
+.typing-animation {
+  display: flex;
+  margin: 10px 0;
+  justify-content: left;
+  align-items: center;
+}
+.typing-animation span {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  margin: 0 3px;
+  background: #1B5E20;
+  border-radius: 50%;
+  animation: typing 1.3s infinite;
+}
+.typing-animation span:nth-child(2) {
+  animation-delay: 0.2s;
+}
+.typing-animation span:nth-child(3) {
+  animation-delay: 0.4s;
+}
+@keyframes typing {
+  0%, 80% {
+    transform: scale(0);
+  }
+  40% {
+    transform: scale(1);
+  }
+}
+/* Chat Input */
+.chat-input {
+  display: flex;
+  align-items: center;
+  padding: 10px; /* Reduced padding for mobile */
+  background: #f9f9f9;
+  border-top: 1px solid #ddd;
+}
+.chat-input input {
+  flex: 1;
+  padding: 12px; /* Adjusted for smaller screens */
+  border: 1px solid #ddd;
+  border-radius: 30px;
+  margin-right: 10px;
+  font-size: 0.9rem; /* Smaller size for mobile */
+  font-family: 'Poppins', 'Cairo', sans-serif;
+  outline: none;
+  transition: all 0.3s ease;
+}
+.chat-input input:focus {
+  border-color: #6200ea;
+  box-shadow: 0 0 5px rgba(98, 0, 234, 0.5);
+}
+.chat-input button {
+  padding: 10px 15px; /* Adjusted for mobile */
+  background: linear-gradient(135deg, #6200ea, #3700b3);
+  border: none;
+  color: white;
+  border-radius: 20px;
+  cursor: pointer;
+  font-weight: bold;
+  font-size: 0.9rem; /* Adjusted for mobile */
+  font-family: 'Poppins', 'Cairo', sans-serif;
+  transition: all 0.3s ease;
+}
+.chat-input button:hover {
+  background: #5e35b1;
+  box-shadow: 0 5px 15px rgba(98, 0, 234, 0.4);
+}
+</style>
 </head>
 <body>
+<div class="chat-container">
+  <div class="chat-header">
+    AI Chat with Omar's Smart Model
+  </div>
+  <div class="chat-box" id="chat-box">
+    <!-- Chat messages will populate here -->
+  </div>
+  <div class="chat-input">
+    <input type="text" id="user-input" placeholder="Type a message..." autocomplete="off">
+    <button id="send-btn">Send</button>
+  </div>
+</div>
+<script>
+const apiUrl = "https://dooratre-test-flask-space.hf.space/chat";
+const chatBox = document.getElementById("chat-box");
+const userInput = document.getElementById("user-input");
+const sendBtn = document.getElementById("send-btn");
+// Initialize conversation history
+let conversationHistory = [
+  { "role": "system", "content": "you are AI model created and developed By MR Omar Nuwara In CORVO AI Company you are model name ALEX-9 you can chat and help user you are best model for now\n\n you will chat Omar's Freind Hussein Shkikel He is Libyan So chat with Libyan arabic accent 😂😂😂 make it fun with smart libyan brain 😂 Hussein now in the work he is working in الاستخبارات😂😂" }
+];
+// Function to format AI response
+function formatResponse(content) {
+  content = content.replace(/\n/g, "<br>");
+  content = content.replace(/\*\*(.*?)\*\*/g, '<strong class="highlight-title">$1</strong>');
+  return content;
+}
+// Function to add a message to the chat box
+function addMessage(role, content) {
+  const messageDiv = document.createElement("div");
+  messageDiv.classList.add("message", role);
+  if (role === "ai") {
+    content = formatResponse(content);
+  }
+  messageDiv.innerHTML = content;
+  chatBox.appendChild(messageDiv);
+  setTimeout(() => {
+    chatBox.scrollTop = chatBox.scrollHeight;
+  }, 100);
+}
+// Function to show typing animation
+function showTyping() {
+  const typingDiv = document.createElement("div");
+  typingDiv.classList.add("typing-animation");
+  typingDiv.innerHTML = `
+    <span></span>
+    <span></span>
+    <span></span>
+  `;
+  chatBox.appendChild(typingDiv);
+  setTimeout(() => {
+    chatBox.scrollTop = chatBox.scrollHeight;
+  }, 100);
+  return typingDiv;
+}
+// Function to send a message
+async function sendMessage() {
+  const userMessage = userInput.value.trim();
+  if (!userMessage) return;
+  addMessage("user", userMessage);
+  conversationHistory.push({ "role": "user", "content": userMessage });
+  const typingDiv = showTyping();
+  const data = { message: conversationHistory };
+  try {
+    const response = await fetch(apiUrl, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify(data)
+    });
+    if (response.ok) {
+      const aiResponse = await response.text();
+      chatBox.removeChild(typingDiv);
+      addMessage("ai", aiResponse);
+      conversationHistory.push({ "role": "assistant", "content": aiResponse });
+    } else {
+      throw new Error(`Error: ${response.status}`);
+    }
+  } catch (error) {
+    console.error("Error:", error);
+    chatBox.removeChild(typingDiv);
+    addMessage("ai", "AI: Sorry, something went wrong!");
+  }
+  userInput.value = "";
+}
+// Attach event listeners
+sendBtn.addEventListener("click", sendMessage);
+userInput.addEventListener("keypress", (e) => {
+  if (e.key === "Enter") sendMessage();
+});
+</script>
 </body>
 </html>