Upload 4 files

App.py

@@ -0,0 +1,21 @@
+from flask import Flask, render_template, request, jsonify
+
+app = Flask(__name__)
+
+# Store chat history
+chat_history = []
+
+@app.route('/')
+def index():
+    return render_template('index.html', chat_history=chat_history)
+
+@app.route('/send_message', methods=['POST'])
+def send_message():
+    user_message = request.form['message']
+    # Here you can process the user message and generate a response
+    bot_response = f"Echo: {user_message}"
+    chat_history.append({'user': user_message, 'bot': bot_response})
+    return jsonify(chat_history=chat_history)
+
+if __name__ == '__main__':
+    app.run(debug=True)

static/style.css

@@ -0,0 +1,145 @@
+/* Reset some default browser styles */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background-color: #f4f4f9;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+    overflow: hidden;
+}
+
+/* Container for the entire chat application */
+.container {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    background-color: #fff;
+    border-radius: 0;
+    box-shadow: none;
+}
+
+/* Sidebar for chat history */
+.sidebar {
+    width: 30%;
+    padding: 20px;
+    border-right: 0px solid; 
+    overflow-y: auto;
+    background-color:inherit;
+    height: 100%;
+}
+
+.sidebar h2 {
+    margin-bottom: 15px;
+    color: #444;
+    font-size: 20px;
+}
+
+.sidebar ul {
+    list-style: none;
+}
+
+.sidebar ul li {
+    margin-bottom: 10px;
+    padding: 10px;
+    background-color: #e9e9f0;
+    border-radius: 5px;
+    color: black;
+}
+
+/* Chatbox for displaying and sending messages */
+.chatbox {
+    width: 70%;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+.chatbox h2 {
+    margin-bottom: 15px;
+    color: #444;
+    font-size: 20px;
+}
+
+#messages {
+    flex-grow: 1;
+    overflow-y: auto;
+    margin-bottom: 20px;
+}
+
+#messages p {
+    margin-bottom: 10px;
+    padding: 10px;
+    border-radius: 5px;
+    color: black;
+}
+
+#messages p strong {
+    display: block;
+    margin-bottom: 5px;
+
+}
+
+#messages p.user-message {
+    background-color: #d4f4dd;
+}
+
+#messages p.bot-response {
+    background-color: #e0e0e0;
+}
+
+form {
+    display: flex;
+    align-items: center;
+}
+
+input[type="text"] {
+    flex-grow: 1;
+    padding: 10px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    margin-right: 10px;
+    font-size: 16px;
+}
+
+button {
+    padding: 10px 20px;
+    border: none;
+    background-color: #007bff;
+    color: #fff;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 16px;
+    transition: background-color 0.3s ease;
+}
+
+button:hover {
+    background-color: #0056b3;
+}
+
+/* Add a scrollbar style for better look */
+.sidebar, #messages {
+    scrollbar-width: none;
+    scrollbar-color:inherit;
+}
+
+.sidebar::-webkit-scrollbar, #messages::-webkit-scrollbar {
+    width: 8px;
+}
+
+.sidebar::-webkit-scrollbar-track, #messages::-webkit-scrollbar-track {
+    background: #f7f7fa;
+}
+
+.sidebar::-webkit-scrollbar-thumb, #messages::-webkit-scrollbar-thumb {
+    background-color: #bbb;
+    border-radius: 10px;
+}

templates/index.html

@@ -0,0 +1,162 @@
+{% extends 'layout.html' %} {% block content %}
+<div class="container" id="app-ui">
+  <div class="sidebar">
+    <h2 style="color: inherit">Chat History</h2>
+    <ul id="chat-history">
+      {% for chat in chat_history %}
+      <li>User: {{ chat.user }}<br />Bot: {{ chat.bot }}</li>
+      {% endfor %}
+    </ul>
+  </div>
+  <div class="chatbox">
+    <h2 style="color: inherit">Chat</h2>
+    <div id="messages">
+      {% for chat in chat_history %}
+      <p class="user-message"><strong>User:</strong> {{ chat.user }}</p>
+      <p class="bot-response"><strong>Bot:</strong> {{ chat.bot }}</p>
+      {% endfor %}
+    </div>
+    <form id="chat-form">
+      <input
+        type="text"
+        id="message"
+        name="message"
+        placeholder="Type your message..."
+      />
+      <button type="submit">Send</button>
+    </form>
+  </div>
+
+  <!--Theme button-->
+  <div
+    class="dropdown position-fixed top-0 end-0 mb-3 me-3 bd-mode-toggle"
+    style="margin-top: 10px; margin-right: 10px"
+  >
+    <button
+      class="btn py-2 d-flex align-items-center"
+      id="bd-theme"
+      type="button"
+      aria-expanded="false"
+      data-bs-toggle="dropdown"
+      aria-label="Toggle theme (auto)"
+      style="color: inherit"
+    >
+      <!--dropdown-toggle-->
+      Theme
+      <span class="visually-hidden" id="bd-theme-text">Toggle theme</span>
+    </button>
+    <ul
+      class="dropdown-menu dropdown-menu-end shadow"
+      aria-labelledby="bd-theme-text"
+    >
+      <li>
+        <button
+          type="button"
+          class="dropdown-item d-flex align-items-center"
+          data-bs-theme-value="light"
+          aria-pressed="false"
+          id="lt"
+        >
+          Light
+        </button>
+      </li>
+      <li>
+        <button
+          type="button"
+          class="dropdown-item d-flex align-items-center"
+          data-bs-theme-value="dark"
+          aria-pressed="false"
+          id="dt"
+        >
+          Dark
+        </button>
+      </li>
+    </ul>
+  </div>
+</div>
+
+<script>
+  document
+    .getElementById("chat-form")
+    .addEventListener("submit", function (event) {
+      event.preventDefault();
+      const message = document.getElementById("message").value;
+      if (message.trim() == "") {
+        alert(
+          "Prompt cannot be empty. Please enter a prompt to generate a response."
+        );
+      } else {
+        fetch("/send_message", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/x-www-form-urlencoded",
+          },
+          body: `message=${message}`,
+        })
+          .then((response) => response.json())
+          .then((data) => {
+            const chatHistory = document.getElementById("chat-history");
+            chatHistory.innerHTML = "";
+            data.chat_history.forEach((chat) => {
+              const listItem = document.createElement("li");
+              listItem.innerHTML = `User: ${chat.user}<br>Bot: ${chat.bot}`;
+              chatHistory.appendChild(listItem);
+            });
+
+            const messagesDiv = document.getElementById("messages");
+            messagesDiv.innerHTML = "";
+            data.chat_history.forEach((chat) => {
+              const userMessage = document.createElement("p");
+              userMessage.classList.add("user-message");
+              userMessage.innerHTML = `<strong>User:</strong> ${chat.user}`;
+              const botResponse = document.createElement("p");
+              botResponse.classList.add("bot-response");
+              botResponse.innerHTML = `<strong>Bot:</strong> ${chat.bot}`;
+              messagesDiv.appendChild(userMessage);
+              messagesDiv.appendChild(botResponse);
+            });
+
+            document.getElementById("message").value = "";
+          });
+      }
+    });
+
+  function SetDarkTheme() {
+    var body = document.body;
+    body.classList.remove("text-bg-light");
+    body.classList.add("text-bg-dark");
+    var ui = document.getElementById("app-ui");
+    ui.classList.remove("text-bg-light");
+    ui.classList.add("text-bg-dark");
+    // Store the theme preference in Local Storage
+    localStorage.setItem("theme", "dark");
+  }
+
+  function SetLightTheme() {
+    var body = document.body;
+    body.classList.add("text-bg-light");
+    body.classList.remove("text-bg-dark");
+    var ui = document.getElementById("app-ui");
+    ui.classList.add("text-bg-light");
+    ui.classList.remove("text-bg-dark");
+    // Store the theme preference in Local Storage
+    localStorage.setItem("theme", "light");
+  }
+
+  function applyThemePreference() {
+    var themePreference = localStorage.getItem("theme");
+    if (themePreference === "light") {
+      SetLightTheme();
+    } else {
+      SetDarkTheme();
+    }
+  }
+
+  // Add event listeners to the buttons
+  document.getElementById("lt").addEventListener("click", SetLightTheme);
+  document.getElementById("dt").addEventListener("click", SetDarkTheme);
+
+  // Call applyThemePreference on page load
+  applyThemePreference();
+</script>
+{% endblock %}

templates/layout.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>ChatGPT Clone</title>
+    <link rel="stylesheet" href="../static/style.css" />
+    <link
+      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
+      crossorigin="anonymous"
+    />
+  </head>
+  <body class="text-bg-light">
+    {% block content %}{% endblock %}
+    <script
+      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
+      integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
+      crossorigin="anonymous"
+    ></script>
+  </body>
+</html>