index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Delta AI Voice & Text Chat</title>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: 'Inter', sans-serif;
    }

    body {
      background: linear-gradient(135deg, #dbeafe, #f0f9ff);
      color: #333;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding: 20px;
    }

    #header {
      width: 100%;
      text-align: center;
      background-color: #3b82f6;
      color: white;
      padding: 15px 0;
      font-size: 24px;
      font-weight: 600;
      border-radius: 12px;
      margin-bottom: 20px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    #chatbox {
      width: 100%;
      max-width: 800px;
      background: #ffffffd4;
      backdrop-filter: blur(8px);
      border-radius: 16px;
      padding: 25px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    }

    #chatbox h1 {
      font-size: 28px;
      margin-bottom: 20px;
      color: #1e3a8a;
    }

    #output {
      height: 300px;
      overflow-y: auto;
      padding: 15px;
      background-color: #f9fafb;
      border-radius: 12px;
      border: 1px solid #e5e7eb;
      margin-bottom: 20px;
    }

    .input-row {
      display: flex;
      gap: 10px;
    }

    #userInput {
      flex: 1;
      padding: 12px 14px;
      border-radius: 10px;
      border: 1px solid #d1d5db;
      font-size: 16px;
      background-color: #fff;
      transition: 0.3s ease;
    }

    #userInput:focus {
      outline: none;
      border-color: #60a5fa;
      box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.3);
    }

    #submitBtn, #micBtn {
      padding: 12px;
      border: none;
      border-radius: 10px;
      background-color: #3b82f6;
      color: white;
      font-size: 18px;
      font-weight: 600;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

    #submitBtn:hover, #micBtn:hover {
      background-color: #2563eb;
    }

    #micBtn {
      font-size: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    p {
      margin: 8px 0;
      line-height: 1.5;
    }
  </style>
</head>
<body>
  <div id="header">
    <div id="clock">Loading time...</div>
  </div>
  <div id="chatbox">
    <h1>Delta AI Voice & Text Chat</h1>
    <div id="output"></div>
    <div class="input-row">
      <input type="text" id="userInput" placeholder="Ask Delta anything...">
      <button id="micBtn">🎤</button>
      <button id="submitBtn">Send</button>
    </div>
  </div>

  <script>
    // Set up the clock
    function updateClock() {
      const now = new Date();
      const hours = String(now.getHours()).padStart(2, '0');
      const minutes = String(now.getMinutes()).padStart(2, '0');
      const seconds = String(now.getSeconds()).padStart(2, '0');
      document.getElementById('clock').textContent = `${hours}:${minutes}:${seconds}`;
    }
    setInterval(updateClock, 1000);
    updateClock();

    // Typewriter effect
    function typeWriter(text, element, delay = 20, callback) {
      let i = 0;
      function type() {
        if (i < text.length) {
          element.innerHTML += text.charAt(i);
          i++;
          setTimeout(type, delay);
        } else if (callback) {
          callback();
        }
      }
      type();
    }

    // Function to speak back the AI response
    function speakText(text) {
      const speech = new SpeechSynthesisUtterance(text);
      speech.lang = 'en-US';
      window.speechSynthesis.speak(speech);
    }

    // Displaying response with typewriter effect
    function displayWithTypewriter(role, message) {
      const output = document.getElementById('output');
      const p = document.createElement('p');
      p.innerHTML = `<strong>${role}:</strong> `;
      output.appendChild(p);
      typeWriter(message, p, 40, () => {
        if (role === 'Delta') {
          speakText(message); // Speak AI response
        }
      });
      output.scrollTop = output.scrollHeight;
    }

    // Voice recognition (Speech Recognition API)
    let recognition;
    if ('webkitSpeechRecognition' in window) {
      recognition = new webkitSpeechRecognition();
      recognition.continuous = false; // Stops after one sentence
      recognition.interimResults = false;
      recognition.lang = 'en-US';

      recognition.onresult = function(event) {
        const userInput = event.results[0][0].transcript;
        document.getElementById('userInput').value = userInput;
        sendMessage(userInput);
      };

      recognition.onerror = function(event) {
        console.error('Speech recognition error', event);
      };
    }

    // Send message function
    async function sendMessage(userInput) {
      if (!userInput) return;

      displayWithTypewriter("You", userInput);

      const response = await fetch('https://api.openai.com/v1/chat/completions', {
        method: 'POST',
        headers: {
          'Authorization': 'Bearer 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',
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          model: "gpt-3.5-turbo",
          messages: [{ role: "user", content: userInput }],
          max_tokens: 150
        })
      });
      const data = await response.json();
      const aiMessage = data.choices[0].message.content;
      displayWithTypewriter("Delta", aiMessage);
    }

    // Button to submit text
    document.getElementById('submitBtn').addEventListener('click', () => {
      const userInput = document.getElementById('userInput').value;
      sendMessage(userInput);
    });

    // Button to start voice recognition
    document.getElementById('micBtn').addEventListener('click', () => {
      recognition.start();
    });
  </script>
</body>
</html>