Spaces:

hussein2000
/

xxxxxxx

Running

App Files Files Community

hussein2000 commited on 28 days ago

Commit

6605578

•

1 Parent(s): 0aacecd

Update index.html

Browse files

Files changed (1) hide show

index.html +482 -19

index.html CHANGED Viewed

@@ -1,19 +1,482 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</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: 1.2rem; /* Larger font size */
+  font-weight: 700; /* Extra bold */
+  color: #000; /* Black text */
+  display: inline-block; /* Ensure inline styling behaves properly */
+  margin: 5px 0; /* Add some spacing if needed */
+}
+/* Code Block Styling */
+.code-block {
+  position: relative;
+  margin: 10px 0;
+  background: #f5f5f5;
+  border-radius: 5px;
+  padding: 10px;
+  overflow-x: auto;
+}
+.code-block pre {
+  margin: 0;
+  font-family: 'Courier New', Courier, monospace;
+  font-size: 0.9rem;
+}
+/* Copy Button Styling */
+.copy-btn {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  padding: 5px 10px;
+  font-size: 0.8rem;
+  font-family: 'Poppins', sans-serif;
+  background: #6200ea;
+  color: #fff;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background 0.3s ease;
+}
+.copy-btn:hover {
+  background: #3700b3;
+}
+.copy-btn:active {
+  background: #311b92;
+}
+pre {
+  background: #f5f5f5;
+  padding: 10px;
+  border-radius: 5px;
+  font-family: 'Courier New', Courier, monospace;
+  font-size: 0.9rem;
+  overflow-x: auto; /* Enable horizontal scrolling for long code */
+}
+code {
+  background: #f5f5f5;
+  padding: 2px 4px;
+  border-radius: 3px;
+  font-family: 'Courier New', Courier, monospace;
+  font-size: 0.9rem;
+}
+/* Other styles for chat system */
+body {
+  margin: 0;
+  padding: 0;
+  font-family: 'Poppins', sans-serif;
+  background: linear-gradient(135deg, #6E45E2, #88D3CE);
+  min-height: 100vh;
+  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%;
+  max-width: 500px;
+  margin: 0 auto;
+  background: #ffffff;
+  border-radius: 15px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+  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: 20px;
+  text-align: center;
+  font-size: 1.5rem;
+  font-weight: bold;
+  font-family: 'Cairo', sans-serif;
+}
+/* Chat Box */
+.chat-box {
+  flex: 1;
+  padding: 20px;
+  overflow-y: auto; /* Enable vertical scrolling */
+  max-height: 400px; /* Restrict the height to make the scrolling work */
+  border-bottom: 1px solid #ddd;
+  display: flex;
+  flex-direction: column;
+}
+.chat-box .message {
+  margin-bottom: 15px;
+  font-size: 1rem;
+  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: 15px;
+  background: #f9f9f9;
+  border-top: 1px solid #ddd;
+}
+.chat-input input {
+  flex: 1;
+  padding: 15px;
+  border: 1px solid #ddd;
+  border-radius: 30px;
+  margin-right: 10px;
+  font-size: 1rem;
+  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: 12px 18px;
+  background: linear-gradient(135deg, #6200ea, #3700b3);
+  border: none;
+  color: white;
+  border-radius: 20px;
+  cursor: pointer;
+  font-weight: bold;
+  font-size: 1rem;
+  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>
+    <button id="voice-btn">🎤</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 formatResponse(content) {
+  // Replace multi-line code blocks with copy buttons
+  content = content.replace(/```(.*?)\n([\s\S]*?)```/g, (match, lang, code) => {
+    return `
+      <div class="code-block">
+        <button class="copy-btn" onclick="copyToClipboard(this)">Copy</button>
+        <pre><code>${code.trim()}</code></pre>
+      </div>
+    `;
+  });
+  // Replace inline code using ` for single-line code
+  content = content.replace(/`(.*?)`/g, '<code>$1</code>');
+  // Replace \n with <br> for line breaks (outside code blocks)
+  content = content.replace(/\n/g, '<br>');
+  // Replace **{title}** with <strong class="highlight-title">{title}</strong> for bold styled text
+  content = content.replace(/\*\*(.*?)\*\*/g, '<strong class="highlight-title">$1</strong>');
+  return content;
+}
+function copyToClipboard(button) {
+  // Find the <code> block by traversing the DOM
+  const codeBlock = button.parentNode.querySelector("code"); // Get the <code> block inside the same parent
+  const codeText = codeBlock.innerText; // Retrieve the text content of the <code> block
+  // Copy the text to the clipboard using the Clipboard API
+  navigator.clipboard.writeText(codeText).then(() => {
+    // Temporarily show "Copied!" message on the button
+    button.textContent = "Copied!";
+    setTimeout(() => {
+      button.textContent = "Copy"; // Reset button text after 2 seconds
+    }, 2000);
+  }).catch(err => {
+    console.error("Failed to copy the code:", err);
+    alert("Failed to copy the code. Please try again!");
+  });
+}
+    // Function to add a message to the chat box
+    function addMessage(role, content) {
+      const messageDiv = document.createElement("div");
+      messageDiv.classList.add("message", role);
+      // Format content for AI messages
+      if (role === "ai") {
+        content = formatResponse(content);
+      }
+      messageDiv.innerHTML = content; // Use innerHTML to render formatted text
+      chatBox.appendChild(messageDiv);
+      // Ensure smooth scroll to the bottom
+      setTimeout(() => {
+        chatBox.scrollTop = chatBox.scrollHeight; // Auto-scroll to the bottom after rendering
+      }, 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);
+      // Ensure smooth scroll to include typing animation
+      setTimeout(() => {
+        chatBox.scrollTop = chatBox.scrollHeight;
+      }, 100);
+      return typingDiv; // Return the typing div to remove it later
+    }
+    // Function to play TTS for AI response
+    function playTTS(text) {
+      var tts_xhr = new XMLHttpRequest();
+      tts_xhr.open("POST", "https://api.braininc.net/be/vectordb/tts", true);
+      tts_xhr.setRequestHeader("Authorization", "token 72ec00483379076f580eb8126f29da802a5140c3");
+      tts_xhr.setRequestHeader("Content-Type", "application/json");
+      tts_xhr.responseType = 'blob';
+      tts_xhr.onreadystatechange = function() {
+        if (tts_xhr.readyState === 4 && tts_xhr.status === 200) {
+          var blob = tts_xhr.response;
+          var audio_url = URL.createObjectURL(blob);
+          // Create an audio element and play the audio
+          var audio = new Audio(audio_url);
+          audio.play();
+        }
+      };
+      var tts_payload = {
+        "pubsub_topic": "/studios/516104/wsuid_new-edge-67_nodeid_editor-66/customApi/1719909878183",
+        "text": text
+      };
+      tts_xhr.send(JSON.stringify(tts_payload));
+    }
+    // Function to send a message
+    async function sendMessage() {
+      const userMessage = userInput.value.trim();
+      if (!userMessage) return;
+      // Add user's message to the chat UI
+      addMessage("user", userMessage);
+      // Append user message to conversation history
+      conversationHistory.push({ "role": "user", "content": userMessage });
+      // Show typing animation
+      const typingDiv = showTyping();
+      // Prepare data for the API
+      const data = { message: conversationHistory };
+      try {
+        // Send message to AI using fetch
+        const response = await fetch(apiUrl, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json"
+          },
+          body: JSON.stringify(data)
+        });
+        if (response.ok) {
+          const aiResponse = await response.text();
+          // Remove typing animation
+          chatBox.removeChild(typingDiv);
+          // Add AI's response to the chat UI (with line breaks and bold formatting handled)
+          addMessage("ai", aiResponse);
+          // Append AI response to conversation history
+          conversationHistory.push({ "role": "assistant", "content": aiResponse });
+          // Play TTS for AI's response
+          playTTS(aiResponse);
+        } else {
+          throw new Error(`Error: ${response.status}`);
+        }
+      } catch (error) {
+        console.error("Error:", error);
+        chatBox.removeChild(typingDiv); // Remove typing animation
+        addMessage("ai", "AI: Sorry, something went wrong!");
+      }
+      // Clear input field
+      userInput.value = "";
+    }
+    // Attach event listeners
+    sendBtn.addEventListener("click", sendMessage);
+    userInput.addEventListener("keypress", (e) => {
+      if (e.key === "Enter") sendMessage();
+    });
+    // Initialize Speech Recognition
+const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+const recognition = new SpeechRecognition();
+recognition.lang = 'ar-LY'; // Set language to Arabic (Libya)
+recognition.onstart = function() {
+  console.log('Voice recognition started. Speak now.');
+};
+recognition.onresult = function(event) {
+  const transcript = event.results[0][0].transcript; // Get the recognized text
+  userInput.value = transcript; // Set the input field to the recognized text
+  sendMessage(); // Send the message
+};
+recognition.onerror = function(event) {
+  console.error('Error occurred in recognition: ' + event.error);
+};
+// Attach event listener for the voice button
+document.getElementById("voice-btn").addEventListener("click", () => {
+  recognition.start(); // Start voice recognition
+});
+    </script>
+</body>
+</html>