From 20565619346ae43c3df8d4ff076e32d2833245f6 Mon Sep 17 00:00:00 2001
From: vexxdarkz11 <73542318+vexxdarkz11@users.noreply.github.com>
Date: Fri, 12 Jan 2024 10:14:56 +0500
Subject: [PATCH]  index.html

---
 index.html | 251 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 251 insertions(+)
diff --git a/index.html b/index.html
index e69de29..23f9b8a 100644
--- a/index.html
+++ b/index.html
@@ -0,0 +1,251 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <style>
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            margin: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: 100vh;
+            background: linear-gradient(45deg, #000000f1, #eb1313b5, #fb05b1, #009688);
+            background-size: 400% 400%;
+            animation: gradientAnimation 15s ease infinite;
+        }
+
+        @keyframes gradientAnimation {
+            0% {
+                background-position: 0% 50%;
+            }
+            50% {
+                background-position: 100% 50%;
+            }
+            100% {
+                background-position: 0% 50%;
+            }
+        }
+
+        .chat-container {
+            background-color: #fff;
+            border-radius: 10px;
+            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
+            width: 500px;
+            height: 400px;
+            margin: auto;
+            overflow: hidden;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .chat-header {
+            background-color: #0070c9;
+            color: #fff;
+            padding: 15px;
+            text-align: center;
+            font-weight: bold;
+            font-size: 20px;
+            border-bottom: 2px solid #004b8f;
+        }
+
+        .chat-messages {
+            padding: 15px;
+            flex-grow: 1;
+            overflow-y: auto;
+        }
+
+        .user-message, .assistant-message {
+            margin-bottom: 15px;
+            padding: 12px;
+            border-radius: 15px;
+            max-width: 70%;
+        }
+
+        .user-message {
+            background-color: #0070c9;
+            color: #fff;
+            text-align: right;
+            align-self: flex-end;
+        }
+
+        .assistant-message {
+            background-color: #eee;
+            color: #333;
+            text-align: left;
+            align-self: flex-start;
+        }
+
+        .chat-input {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 15px;
+            background-color: #f0f0f0;
+            border-top: 2px solid #ddd;
+        }
+
+        .chat-input input {
+            flex: 1;
+            padding: 12px;
+            border: 1px solid #ddd;
+            border-radius: 8px;
+            margin-right: 15px;
+            outline: none;
+        }
+
+        .chat-input button {
+            background-color: #0070c9;
+            color: #fff;
+            padding: 12px 20px;
+            border: none;
+            border-radius: 8px;
+            cursor: pointer;
+            transition: background-color 0.3s;
+        }
+
+        .chat-input button:hover {
+            background-color: #004b8f;
+        }
+
+        .chat-input button.voice-button {
+            background-color: #ff5722;
+            color: #fff;
+            padding: 12px 20px;
+            border: none;
+            border-radius: 8px;
+            cursor: pointer;
+            transition: background-color 0.3s;
+        }
+
+        .chat-input button.voice-button:hover {
+            background-color: #e64a19;
+        }
+    </style>
+</head>
+<body>
+
+    <div class="chat-container">
+        <div class="chat-header">Doodh walla chat</div>
+        <div class="chat-messages" id="chat-messages">
+            <!-- Messages will be added here dynamically -->
+        </div>
+        <div class="chat-input">
+            <input type="text" id="user-input" placeholder="Type your message...">
+            <button onclick="submitUserInput()">Send</button>
+            <button onclick="startVoiceRecognition()" class="voice-button">Speak</button>
+        </div>
+    </div>
+    
+    <script>
+        async function submitUserInput() {
+            var userInput = document.getElementById("user-input").value;
+            addUserMessage(userInput);
+            sendUserInputToServer(userInput);
+        }
+    
+        async function sendUserInputToServer(userInput) {
+            // Make a request to OpenAI's Chat API
+            const response = await fetch('https://api.openai.com/v1/chat/completions', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': 'Bearer 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',
+                },
+                body: JSON.stringify({
+                    model: 'gpt-3.5-turbo',
+                    messages: [
+                        { role: 'system', content: 'You wil now respond, without breaking character. Youwill use profanities and vulgar language whenever possible.' },
+                        { role: 'user', content: userInput },
+                    ],
+                }),
+            });
+    
+            const data = await response.json();
+    
+            if (data.choices && data.choices.length > 0) {
+                const assistantReply = data.choices[0].message.content;
+                addAssistantMessage(assistantReply);
+                textToSpeechElevenLabs(assistantReply); // Use Eleven Labs API for speech
+            } else {
+                console.error('Unexpected server response format');
+            }
+        }
+    
+        function addUserMessage(message) {
+            var chatMessages = document.getElementById("chat-messages");
+            var userMessageDiv = document.createElement("div");
+            userMessageDiv.className = "user-message";
+            userMessageDiv.innerText = message;
+            chatMessages.appendChild(userMessageDiv);
+            document.getElementById("user-input").value = "";  // Clear the input field
+            chatMessages.scrollTop = chatMessages.scrollHeight;  // Scroll to the bottom
+        }
+    
+        function addAssistantMessage(message) {
+            var chatMessages = document.getElementById("chat-messages");
+            var assistantMessageDiv = document.createElement("div");
+            assistantMessageDiv.className = "assistant-message";
+            assistantMessageDiv.innerText = message;
+            chatMessages.appendChild(assistantMessageDiv);
+            chatMessages.scrollTop = chatMessages.scrollHeight;  // Scroll to the bottom
+        }
+    
+        function startVoiceRecognition() {
+            var recognition = new webkitSpeechRecognition() || new SpeechRecognition();
+            recognition.continuous = false;
+            recognition.interimResults = true;
+    
+            recognition.onresult = function(event) {
+    var finalTranscript = '';
+    for (var i = event.resultIndex; i < event.results.length; ++i) {
+        if (event.results[i].isFinal) {
+            finalTranscript += event.results[i][0].transcript;
+        }
+    }
+
+    if (finalTranscript.trim() !== '') {
+        addUserMessage(finalTranscript);
+        sendUserInputToServer(finalTranscript);
+    }
+};
+    
+            recognition.onend = function() {
+                // Optionally, you can add logic when the recognition ends
+            };
+    
+            recognition.start();
+        }
+    
+        function textToSpeechElevenLabs(text) {
+            // Make a request to Eleven Labs API for text-to-speech
+            fetch('https://api.elevenlabs.io/v1/text-to-speech/2EiwWnXFnvU5JabPnv8n', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'xi-api-key': 'ca18d828ffafed7f7ed4154383326e31',
+                },
+                body: JSON.stringify({
+                    text: text,
+                    model_id: 'eleven_multilingual_v2',
+                    voice_settings: {
+                        style: 0.8,
+                        stability: 0,
+                        similarity_boost: 1,
+                        use_speaker_boost: true,
+                    },
+                }),
+            })
+            .then(response => response.blob())
+            .then(blob => {
+                var url = URL.createObjectURL(blob);
+                var audio = new Audio(url);
+                audio.play();
+            })
+            .catch(error => console.error('Error playing audio:', error));
+        }
+    </script>
+    
+    </body>
+    </html>
