hkirat · Ashu104 · May 15, 2023 · May 15, 2023 · May 15, 2023
diff --git a/chat-gpt-pro/README.md b/chat-gpt-pro/README.md
@@ -0,0 +1,71 @@
+# ChatGPT API UI
+
+Welcome to the ChatGPT API UI project! The goal of this project is to create a user-friendly and visually appealing interface on top of the ChatGPT API, providing an enhanced chat experience. Users will be able to have interactive conversations with an AI-powered chatbot using the powerful capabilities of the ChatGPT model.
+
+## Features
+
+- **ChatGPT Clone:** Utilize the ChatGPT APIs to build a functional clone of the ChatGPT model, enabling engaging conversations with the chatbot.
+
+- **Backend Integration:** Implement the ChatGPT APIs on the backend of the application to facilitate seamless communication between the frontend and the ChatGPT model.
+
+- **Enhanced Frontend Experience:** Design an intuitive and captivating user interface on the frontend, offering a superior chat experience compared to the native chat GPT interface.
+
+- **Custom API Keys:** Allow users to input their own ChatGPT API keys, granting them access to the powerful GPT-4 model for chat interactions.
+
+## Contribution
+
+We welcome contributions to improve the project! If you'd like to contribute, please follow these guidelines:
+
+1. Fork the repository.
+
+2. Create a new branch for your feature or bug fix.
+
+3. Make your modifications.
+
+4. Commit your changes and push them to your fork.
+
+5. Submit a pull request describing the changes you made and their benefits.
+
+## Feedback and Support
+
+If you have any feedback, suggestions, or questions regarding the ChatGPT API UI project, please don't hesitate to reach out. We appreciate your involvement and are here to assist you.
+
+Let's create an exceptional chat experience together! 🚀🤖
+
+## Project Development Steps
+
+Follow these steps to create the ChatGPT API UI project:
+
+1. Set up your development environment.
+
+2. Create a new project directory.
+
+3. Initialize a new npm project.
+
+4. Set up the basic project structure.
+
+5. Install required dependencies.
+
+6. Build the UI components using your chosen UI framework/library.
+
+7. Connect to the ChatGPT API by obtaining API keys.
+
+8. Implement API communication to send and receive messages.
+
+9. Integrate the backend and frontend to handle API requests.
+
+10. Test the application thoroughly and gather user feedback.
+
+11. Refine the application based on user feedback and test results.
+
+12. Deploy the application to a hosting platform or server.
+
+13. Perform regular maintenance and updates to keep the application running smoothly.
+
+14. Consider future enhancements and new features based on user needs and technological advancements.
+
+Please refer to the individual steps for detailed instructions on each phase of the project.
+
+If you have any questions or need assistance during the development process, feel free to reach out for support.
+
+Happy coding! 🚀🤖
diff --git a/chat-gpt-pro/index.html b/chat-gpt-pro/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>CHAT GPT</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header>
+      <h1>CHAT GPT PRO</h1>
+    </header>
+    <main>
+      <div id="chat-container">
+        <div class="answer">
+          Hello! How can I assist you?...
+        </div>
+      </div>
+      <div id="form-container">
+        <div id="input-container">
+          <input type="text" id="question-input" placeholder="Type your question here..." />
+          <button id="submit-btn">Ask</button>
+        </div>
+        <button id="clear-btn">Clear chat</button>
+      </div>
+    </main>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/chat-gpt-pro/script.js b/chat-gpt-pro/script.js
@@ -0,0 +1,46 @@
+const chatContainer = document.getElementById('chat-container');
+const questionInput = document.getElementById('question-input');
+const submitBtn = document.getElementById('submit-btn');
+const clearBtn = document.getElementById('clear-btn');
+
+submitBtn.addEventListener('click', (event) => {
+  event.preventDefault();
+
+  const question = questionInput.value;
+
+  const questionElement = document.createElement('div');
+  questionElement.className = 'question';
+  questionElement.innerText = question;
+
+  chatContainer.appendChild(questionElement);
+  fetch('/api/chatbot', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    body: JSON.stringify({ question: question })
+  })
+  .then(response => response.json())
+  .then(data => {
+    const answer = data.answer;
+
+    const answerElement = document.createElement('div');
+    answerElement.className = 'answer';
+    answerElement.innerText = answer;
+
+    chatContainer.appendChild(answerElement);
+  })
+  .catch(error => {
+    console.error(error);
+  });
+
+  questionInput.value = '';
+});
+
+clearBtn.addEventListener('click', (event) => {
+  event.preventDefault();
+
+  while (chatContainer.firstChild) {
+    chatContainer.removeChild(chatContainer.firstChild);
+  }
+});
diff --git a/chat-gpt-pro/styles.css b/chat-gpt-pro/styles.css
@@ -0,0 +1,149 @@
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+  /* Style the page header */
+  header {
+    background-color: #0a1931;
+    color: white;
+    padding: 1rem;
+    text-align: center;
+  }
+
+  /* Style the main section */
+  main {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+  }
+
+  /* Style the chat container */
+  #chat-container {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    background-color: #f0f0f0;
+    padding: 1rem;
+    border-radius: 0.5rem;
+    width: 80%;
+    height: 60%;
+    overflow-y: auto;
+  }
+
+  /* Style the chat messages */
+  .question,
+  .answer {
+    margin: 0.5rem;
+    padding: 0.5rem;
+    border-radius: 0.5rem;
+  }
+
+  .question {
+    background-color: #e6e6e6;
+  }
+
+  .answer {
+    background-color: #d9f1fe;
+  }
+
+  /* Style the input form container */
+  #form-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin-top: 1rem;
+  }
+
+  /* Style the input field */
+  #question-input {
+    padding: 0.5rem;
+    border-radius: 0.5rem;
+    border: none;
+    margin-right: 0.5rem;
+    width: 70%;
+    font-size: 1rem;
+  }
+
+  /* Style the submit button */
+  #submit-btn {
+    padding: 0.5rem 1rem;
+    border-radius: 0.5rem;
+    border: none;
+    background-color: #1c2237;
+    color: white;
+    font-size: 1rem;
+    cursor: pointer;
+  }
+
+   #question-input {
+    width: 80%;
+    height: 2rem;
+    font-size: 1rem;
+    padding: 0.5rem;
+    border-radius: 0.5rem;
+    border: none;
+  }
+
+  /* Style for the submit button */
+  #submit-btn {
+    margin-top: 1rem;
+    padding: 0.5rem 1rem;
+    border-radius: 0.5rem;
+    background-color: #007bff;
+    color: #fff;
+    border: none;
+    cursor: pointer;
+  }
+
+  /* Style for the chat container */
+  #chat-container {
+    margin-top: 1rem;
+  }
+
+  /* Style for the chat answer */
+  .answer {
+    background-color: #e64c4c;
+    padding: 0.5rem;
+    border-radius: 0.5rem;
+    margin-bottom: 0.5rem;
+  }
+
+  /* Style for the clear button */
+  #clear-btn {
+    margin-top: 1rem;
+    padding: 0.5rem 1rem;
+    border-radius: 0.5rem;
+    background-color: #41d36b;
+    color: #fff;
+    border: none;
+    cursor: pointer;
+  }
+
+  /* Style for the chatbot image */
+  #chatbot-image {
+    width: 50%;
+    height: auto;
+    margin: 2rem auto;
+    display: block;
+  }
+
+  /* Style for the chatbot title */
+  #chatbot-title {
+    font-size: 2rem;
+    text-align: center;
+    margin-bottom: 2rem;
+  }
+
+  /* Style for the chatbot container */
+  #chatbot-container {
+    max-width: 800px;
+    margin: auto;
+  }
+