Spaces:

utkarsh1797
/

ai-chatbot

Running

File size: 7,442 Bytes

<!-- <!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>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      height: 100vh;
      display: flex;
      flex-direction: column;
      background-color: #f4f4f4;
      transition: background-color 0.3s, color 0.3s;
    }

    body.dark-mode {
      background-color: #121212;
      color: white;
    }

    header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 20px;
      background-color: #333;
      color: white;
    }

    header h1 {
      margin: 0;
      font-size: 1.5em;
    }

    .controls {
      display: flex;
      gap: 10px;
    }

    #chat-box {
      flex-grow: 1;
      padding: 20px;
      overflow-y: auto;
      border-top: 1px solid #ccc;
      border-bottom: 1px solid #ccc;
      background-color: #fff;
    }

    body.dark-mode #chat-box {
      background-color: #1e1e1e;
    }

    #input-container {
      display: flex;
      padding: 10px;
      background-color: #f9f9f9;
      border-top: 1px solid #ccc;
    }

    body.dark-mode #input-container {
      background-color: #1a1a1a;
    }

    #user-input {
      flex-grow: 1;
      padding: 10px;
      font-size: 1em;
      border: 1px solid #ccc;
      border-radius: 4px;
    }

    #send-btn {
      margin-left: 10px;
      padding: 10px 15px;
      font-size: 1em;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }

    #send-btn:hover {
      background-color: #45a049;
    }

    .message {
      margin: 10px 0;
    }

    .message strong {
      display: inline-block;
      width: 60px;
    }
  </style>
</head>
<body>

  <header>
    <h1 style="text-align: center; font-family: 'Segoe UI', sans-serif; font-size: 2.5rem;">
      🤖 AI Chatbot <span style="font-size: 2rem;">🧠</span>
    </h1>
    <div class="controls">
      <button onclick="toggleMode()">🌓 Theme</button>
      <button onclick="clearChat()">🗑️ Clear</button>
      <button onclick="exportChat()">📁 Export</button>
    </div>
  </header>

  <div id="chat-box"></div>

  <div id="input-container">
    <input type="text" id="user-input" placeholder="Type a message..." onkeypress="handleEnter(event)">
    <button id="send-btn" onclick="sendMessage()">Send</button>
  </div>

  <script>
    function handleEnter(e) {
      if (e.key === 'Enter') sendMessage();
    }

    async function sendMessage() {
      const userInput = document.getElementById("user-input").value.trim();
      const chatBox = document.getElementById("chat-box");

      if (!userInput) return;

      chatBox.innerHTML += `<div class="message"><strong>You:</strong> ${userInput}</div>`;
      scrollToBottom();

      document.getElementById("user-input").value = "";

      const response = await fetch("/chat", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ message: userInput })
      });

      const data = await response.json();
      const reply = data.reply || "Error in response";

      chatBox.innerHTML += `<div class="message"><strong>Bot:</strong> ${reply}</div>`;
      scrollToBottom();
    }

    function toggleMode() {
      document.body.classList.toggle("dark-mode");
    }

    function clearChat() {
      document.getElementById("chat-box").innerHTML = "";
    }

    function scrollToBottom() {
      const chatBox = document.getElementById("chat-box");
      chatBox.scrollTop = chatBox.scrollHeight;
    }

    function exportChat() {
      const chat = document.getElementById("chat-box").innerText;
      const blob = new Blob([chat], { type: "text/plain" });
      const url = URL.createObjectURL(blob);
      const a = document.createElement("a");
      a.href = url;
      a.download = "chat_history.txt";
      a.click();
      URL.revokeObjectURL(url);
    }
  </script>

</body>
</html> -->


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Apollo Tyres AI Assistant</title>
  <style>
    body {
      font-family: 'Segoe UI', sans-serif;
      background-color: #f2f2f2;
      margin: 0;
      padding: 0;
    }
    header {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 20px;
      background-color: white;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    header img {
      height: 40px;
      margin-right: 10px;
    }
    header h1 {
      font-size: 1.8rem;
      color: #4B0082;
      margin: 0;
    }
    #chat-box {
      width: 90%;
      max-width: 1000px;
      height: 600px;
      margin: 20px auto;
      padding: 15px;
      background: white;
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0,0,0,0.2);
      overflow-y: auto;
    }
    #user-input {
      width: 70%;
      padding: 10px;
      font-size: 1rem;
    }
    button {
      padding: 10px 20px;
      font-size: 1rem;
      background-color: #4B0082;
      color: white;
      border: none;
      cursor: pointer;
      margin-left: 10px;
    }
    #controls {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 20px;
    }
  </style>
</head>
<body>
  <header>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5a/Apollo_Tyres_Logo.svg/512px-Apollo_Tyres_Logo.svg.png" alt="Apollo Tyres Logo">
    <h1>Apollo Tyres AI Assistant 🧠</h1>
  </header>

  <div id="chat-box">
    <p><b>Apollo AI:</b> 👋 Hello! I’m your Apollo Tyres virtual assistant. How can I help you today?</p>
  </div>

  <div id="controls">
    <input type="text" id="user-input" placeholder="Type your message...">
    <button onclick="sendMessage()">Send</button>
    <button onclick="clearChat()">Clear</button>
    <button onclick="exportChat()">Export</button>
  </div>

  <script>
    const chatBox = document.getElementById("chat-box");

    async function sendMessage() {
      let userInput = document.getElementById("user-input").value;
      if (!userInput.trim()) return;

      chatBox.innerHTML += `<p><b>You:</b> ${userInput}</p>`;

      const response = await fetch("/chat", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ message: userInput }),
      });

      const data = await response.json();
      chatBox.innerHTML += `<p><b>Apollo AI:</b> ${data.reply || "Error in response"}</p>`;
      document.getElementById("user-input").value = "";

      // Auto-scroll
      chatBox.scrollTop = chatBox.scrollHeight;
    }

    function clearChat() {
      chatBox.innerHTML = `<p><b>Apollo AI:</b> 👋 Hello! I’m your Apollo Tyres virtual assistant. How can I help you today?</p>`;
    }

    function exportChat() {
      const text = chatBox.innerText;
      const blob = new Blob([text], { type: "text/plain" });
      const a = document.createElement("a");
      a.href = URL.createObjectURL(blob);
      a.download = "apollo_chat_history.txt";
      a.click();
    }

    // Allow Enter key to send message
    document.getElementById("user-input").addEventListener("keydown", function (e) {
      if (e.key === "Enter") sendMessage();
    });
  </script>
</body>
</html>