Skip to content

Commit

Permalink
index.html
Browse files Browse the repository at this point in the history
  • Loading branch information
@vexxdarkz11
vexxdarkz11 authored Jan 12, 2024
1 parent 16da090 commit 2056561
Showing 1 changed file with 251 additions and 0 deletions.
251 changes: 251 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -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>

0 comments on commit 2056561

Please sign in to comment.