Spaces:

Intercept-Intelligence
/

DeltaChat

Running

App Files Files Community

Intercept-Intelligence commited on 26 days ago

Commit

50f29d0

verified ·

1 Parent(s): fcb17f7

Update index.html

Browse files

Files changed (1) hide show

index.html +232 -19

index.html CHANGED Viewed

@@ -1,19 +1,232 @@
-<!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>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>