heriniaina/chat.html

## chat.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Chat App</title>
  <style>
    body {
      font-family: 'Arial', sans-serif;
      margin: 20px;
    }
    #chat-container {
      border: 1px solid #ccc;
      padding: 20px;
      max-width: 400px;
      margin: 0 auto;
    }
    .user-message {
      color: blue;
    }
    .bot-message {
      color: green;
    }
  </style>
</head>
<body>
  <div id="chat-container">
    <div class="bot-message">Chat App: Hello! How can I help you today?</div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function () {
      const chatContainer = document.getElementById('chat-container');

      function appendUserMessage(message) {
        const userMessage = document.createElement('div');
        userMessage.classList.add('user-message');
        userMessage.textContent = message;
        chatContainer.appendChild(userMessage);
      }

      function appendBotMessage(message) {
        const botMessage = document.createElement('div');
        botMessage.classList.add('bot-message');
        botMessage.textContent = message;
        chatContainer.appendChild(botMessage);
      }

      function sendPromptToAPI(prompt) {

        // Replace 'YOUR_API_ENDPOINT' with the actual API endpoint
        const apiEndpoint = 'http://localhost/proxy.php?prompt=${encodeURIComponent(prompt)}';

        // Replace 'YOUR_API_KEY' with the actual API key
        const apiKey = 'YOUR_API_KEY';

        // Make a request to the API using fetch
        fetch(apiEndpoint)
        .then(response => {
        	console.log(response);
        })
        .then(response => response.json())
        .then(data => {
          const botResponse = data.answer;
          appendBotMessage(botResponse);
        })
        .catch(error => {
          console.log('Error:', error);
        });
        <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Chat App</title>
  <style>
    body {
      font-family: 'Arial', sans-serif;
      margin: 20px;
    }
    #chat-container {
      border: 1px solid #ccc;
      padding: 20px;
      max-width: 400px;
      margin: 0 auto;
    }
    .user-message {
      color: blue;
    }
    .bot-message {
      color: green;
    }
  </style>
</head>
<body>
  <div id="chat-container">
    <div class="bot-message">Chat App: Hello! How can I help you today?</div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function () {
      const chatContainer = document.getElementById('chat-container');

      function appendUserMessage(message) {
        const userMessage = document.createElement('div');
        userMessage.classList.add('user-message');
        userMessage.textContent = message;
        chatContainer.appendChild(userMessage);
      }

      function appendBotMessage(message) {
        const botMessage = document.createElement('div');
        botMessage.classList.add('bot-message');
        botMessage.textContent = message;
        chatContainer.appendChild(botMessage);
      }

      function sendPromptToAPI(prompt) {

        // Replace 'YOUR_API_ENDPOINT' with the actual API endpoint
        const apiEndpoint = 'https://sandipapi.onrender.com/gpt?prompt=${encodeURIComponent(prompt)}';

        // Replace 'YOUR_API_KEY' with the actual API key
        const apiKey = 'YOUR_API_KEY';

        // Make a request to the API using fetch
        fetch(apiEndpoint)
        .then(response => {
        	console.log(response);
        })
        .then(response => response.json())
        .then(data => {
          const botResponse = data.answer;
          appendBotMessage(botResponse);
        })
        .catch(error => {
          console.log('Error:', error);
        });

      }

      // Example: Send a prompt when the page loads
      sendPromptToAPI('Tell me a joke!');

      // You can call sendPromptToAPI with different prompts based on user input or other triggers
      // For example: sendPromptToAPI('Translate "Hello" to French');
    });
  </script>
</body>
</html>

      }

      // Example: Send a prompt when the page loads
      sendPromptToAPI('Tell me a joke!');

      // You can call sendPromptToAPI with different prompts based on user input or other triggers
      // For example: sendPromptToAPI('Translate "Hello" to French');
    });
  </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>Chat App</title>
	<style>
	body {
	font-family: 'Arial', sans-serif;
	margin: 20px;
	}
	#chat-container {
	border: 1px solid #ccc;
	padding: 20px;
	max-width: 400px;
	margin: 0 auto;
	}
	.user-message {
	color: blue;
	}
	.bot-message {
	color: green;
	}
	</style>
	</head>
	<body>
	<div id="chat-container">
	<div class="bot-message">Chat App: Hello! How can I help you today?</div>
	</div>

	<script>
	document.addEventListener('DOMContentLoaded', function () {
	const chatContainer = document.getElementById('chat-container');

	function appendUserMessage(message) {
	const userMessage = document.createElement('div');
	userMessage.classList.add('user-message');
	userMessage.textContent = message;
	chatContainer.appendChild(userMessage);
	}

	function appendBotMessage(message) {
	const botMessage = document.createElement('div');
	botMessage.classList.add('bot-message');
	botMessage.textContent = message;
	chatContainer.appendChild(botMessage);
	}

	function sendPromptToAPI(prompt) {

	// Replace 'YOUR_API_ENDPOINT' with the actual API endpoint
	const apiEndpoint = 'http://localhost/proxy.php?prompt=${encodeURIComponent(prompt)}';

	// Replace 'YOUR_API_KEY' with the actual API key
	const apiKey = 'YOUR_API_KEY';

	// Make a request to the API using fetch
	fetch(apiEndpoint)
	.then(response => {
	console.log(response);
	})
	.then(response => response.json())
	.then(data => {
	const botResponse = data.answer;
	appendBotMessage(botResponse);
	})
	.catch(error => {
	console.log('Error:', error);
	});
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Chat App</title>
	<style>
	body {
	font-family: 'Arial', sans-serif;
	margin: 20px;
	}
	#chat-container {
	border: 1px solid #ccc;
	padding: 20px;
	max-width: 400px;
	margin: 0 auto;
	}
	.user-message {
	color: blue;
	}
	.bot-message {
	color: green;
	}
	</style>
	</head>
	<body>
	<div id="chat-container">
	<div class="bot-message">Chat App: Hello! How can I help you today?</div>
	</div>

	<script>
	document.addEventListener('DOMContentLoaded', function () {
	const chatContainer = document.getElementById('chat-container');

	function appendUserMessage(message) {
	const userMessage = document.createElement('div');
	userMessage.classList.add('user-message');
	userMessage.textContent = message;
	chatContainer.appendChild(userMessage);
	}

	function appendBotMessage(message) {
	const botMessage = document.createElement('div');
	botMessage.classList.add('bot-message');
	botMessage.textContent = message;
	chatContainer.appendChild(botMessage);
	}

	function sendPromptToAPI(prompt) {

	// Replace 'YOUR_API_ENDPOINT' with the actual API endpoint
	const apiEndpoint = 'https://sandipapi.onrender.com/gpt?prompt=${encodeURIComponent(prompt)}';

	// Replace 'YOUR_API_KEY' with the actual API key
	const apiKey = 'YOUR_API_KEY';

	// Make a request to the API using fetch
	fetch(apiEndpoint)
	.then(response => {
	console.log(response);
	})
	.then(response => response.json())
	.then(data => {
	const botResponse = data.answer;
	appendBotMessage(botResponse);
	})
	.catch(error => {
	console.log('Error:', error);
	});

	}

	// Example: Send a prompt when the page loads
	sendPromptToAPI('Tell me a joke!');

	// You can call sendPromptToAPI with different prompts based on user input or other triggers
	// For example: sendPromptToAPI('Translate "Hello" to French');
	});
	</script>
	</body>
	</html>

	}

	// Example: Send a prompt when the page loads
	sendPromptToAPI('Tell me a joke!');

	// You can call sendPromptToAPI with different prompts based on user input or other triggers
	// For example: sendPromptToAPI('Translate "Hello" to French');
	});
	</script>
	</body>
	</html>