Spaces:

hussein2000
/

xxxxxxx

Running

File size: 12,836 Bytes
<!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>