Spaces:

abdullahalioo
/

try

Running

App Files Files Community

abdullahalioo commited on Mar 28

Commit

dd2acf7

verified ·

1 Parent(s): 458209e

Update index.html

Browse files

Files changed (1) hide show

index.html +108 -38

index.html CHANGED Viewed

@@ -1,61 +1,131 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Text to Speech</title>
     <style>
         body {
             font-family: Arial, sans-serif;
-            text-align: center;
-            padding: 20px;
         }
-        textarea {
             width: 80%;
-            height: 100px;
-            margin-bottom: 10px;
         }
-        select, button {
-            margin: 10px;
             padding: 10px;
         }
     </style>
 </head>
 <body>
-    <h1>Text to Speech</h1>
-    <textarea id="text" placeholder="Enter text to speak..."></textarea>
-    <br>
-    <select id="voiceSelect"></select>
-    <br>
-    <button onclick="speak()">Speak</button>
     <script>
-        const synth = window.speechSynthesis;
-        const voiceSelect = document.getElementById('voiceSelect');
-        function loadVoices() {
-            const voices = synth.getVoices();
-            voiceSelect.innerHTML = '';
-            voices.forEach(voice => {
-                const option = document.createElement('option');
-                option.value = voice.name;
-                option.textContent = `${voice.name} (${voice.lang})`;
-                voiceSelect.appendChild(option);
-            });
         }
-        function speak() {
-            const text = document.getElementById('text').value;
-            const utterance = new SpeechSynthesisUtterance(text);
-            const selectedVoice = voiceSelect.value;
-            utterance.voice = synth.getVoices().find(voice => voice.name === selectedVoice);
-            synth.speak(utterance);
-        }
-        loadVoices();
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = loadVoices;
         }
     </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>AI Chat App</title>
     <style>
         body {
             font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            background-color: #f0f0f0;
+            flex-direction: column;
         }
+        #chat-container {
             width: 80%;
+            max-width: 600px;
+            margin: auto;
+            background: white;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            padding: 20px;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        }
+        #messages {
+            height: 300px;
+            overflow-y: auto;
+            border-bottom: 1px solid #ddd;
+            margin-bottom: 20px;
+            padding: 10px;
+        }
+        .message {
+            padding: 5px;
+            margin: 5px 0;
+            border-radius: 4px;
+            background: #2c7aef;
+            color: white;
+        }
+        .user-message {
+            text-align: right;
+            background: #f9f9f9;
+            color: black;
+        }
+        .user-message .message {
+            background: #e0f7fa;
         }
+        #chat-input {
+            display: flex;
+        }
+        #chat-input input {
+            flex-grow: 1;
             padding: 10px;
+            margin-right: 10px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+        }
+        #chat-input button {
+            padding: 10px 20px;
+            background: #007bff;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+        }
+        #chat-input button:hover {
+            background: #0056b3;
         }
     </style>
+    <script src="https://js.puter.com/v2/"></script>
 </head>
 <body>
+    <div id="chat-container">
+        <div id="messages"></div>
+        <div id="chat-input">
+            <input type="text" id="input-message" placeholder="Type a message...">
+            <button onclick="sendMessage()">Send</button>
+        </div>
+    </div>
+    <p>Created using Puter.JS</p>
     <script>
+        const messages = [];
+        function addMessage(msg, isUser) {
+            const messagesDiv = document.getElementById("messages");
+            const messageDiv = document.createElement("div");
+            messageDiv.classList.add("message");
+            if (isUser) {
+                messageDiv.classList.add("user-message");
+            }
+            messageDiv.textContent = msg;
+            messagesDiv.appendChild(messageDiv);
+            messagesDiv.scrollTop = messagesDiv.scrollHeight;
         }
+        function sendMessage() {
+            const input = document.getElementById("input-message");
+            const message = input.value.trim();
+            if (message) {
+                addMessage(message, true);
+                input.value = '';
+                // Record the message in array of messages
+                messages.push({ content: message, role: 'user' });
+                // Call the AI chat function
+                puter.ai.chat(messages).then(response => {
+                    addMessage(response, false);
+                    messages.push(response.message);
+                }).catch(error => {
+                    console.error("AI response error:", error);
+                });
+            }
         }
     </script>
 </body>
+</html>