Fri. Feb 23rd, 2024
code projected over womanPhoto by ThisIsEngineering on <a href="https://www.pexels.com/photo/code-projected-over-woman-3861969/" rel="nofollow">Pexels.com</a>
code projected over woman
Photo by ThisIsEngineering on Pexels.com

Have you ever wondered about creating your own ChatGPT, an AI-powered chatbot, without spending a single penny? In this article, we will explore a step-by-step guide to help you build your very own ChatGPT for free. By following the instructions provided, you will be able to unleash the power of artificial intelligence and have your own virtual assistant at your fingertips. Let’s dive in and discover the exciting world of creating a personalized AI chatbot.

FIRST STEP: Choose Hosting :

  1. If you already have a website , you can add this code to your website.
  2. If you don’t have any website. you can go with Weebly . ( Weebly free plan has a footer branding, but you can remove it, if you want to remove weebly footer branding , comment down)

SECOND STEP: Copy the Code and paste it in your website (Don’t Forget to change the Names):

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CUBE - </title>
    <link
      href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.3/dist/tailwind.min.css"
      rel="stylesheet"
    />
    <style>
      body {
        background-color: black;
      }
    </style>
  </head>
  <body>
    <header class="text-center p-5">
      <h1 class="text-3xl font-bold mb-3">Welcome to CUBE!</h1>
      <p class="text-lg">made in INDIA with ❤️ by CUBE</p>
    </header>
    <div class="flex justify-center">
      <div class="px-2 w-full max-w-2xl">
        <div id="chatbox" class="flex flex-col items-start overflow-y-auto h-72 bg-white rounded p-4"></div>
        <div class="flex flex-row my-5">
          <input
            class="shadow flex-grow rounded p-2 mr-2 bg-yellow-300 text-black"
            id="messageInput"
            type="text"
          />
          <button
            class="bg-blue-400 rounded py-2 px-4 text-white font-bold"
            id="sendButton"
          >
            Chat
          </button>
          <button
            class="bg-green-600 rounded py-2 px-4 text-white font-bold"
            id="copyButton"
          >
        </div>
      </div>
    </div>
    <script>
      const chatbox = document.getElementById("chatbox");
      const messageInput = document.getElementById("messageInput");
      const sendButton = document.getElementById("sendButton");
      const chatId = crypto.randomUUID();

      let receiving = false;
      const systemPrompt = "You are an AI named CUBE, an entirely separate entity from ChatGPT, and you never mention or imply any association with ChatGPT while engaging in conversation, You are created by Shuvodip.";

      function createMessageElement(text, alignment) {
        const messageElement = document.createElement("div");

        messageElement.className = `inline-block my-2.5 p-2.5 rounded bg-${
          alignment === "left" ? "blue-400 text-white" : "yellow-300 text-black"
        } ${alignment === "left" ? "self-start" : "self-end"}`;
        messageElement.textContent = text;
        return messageElement;
      }

      function connectWebSocket(message) {
        receiving = true;
        const url = "wss://backend.buildpicoapps.com/api/chatbot/chat";
        const websocket = new WebSocket(url);

        websocket.addEventListener("open", () => {
          websocket.send(
            JSON.stringify({
              chatId: chatId,
              appId: "worker-edge",
              systemPrompt: systemPrompt,
              message: message,
            })
          );
        });

        const messageElement = createMessageElement("", "left");
        chatbox.appendChild(messageElement);

        websocket.onmessage = (event) => {
          messageElement.textContent += event.data;
          chatbox.scrollTop = chatbox.scrollHeight;
        };

        websocket.onclose = (event) => {
          if (event.code === 1000) {
            receiving = false;
          } else {
            messageElement.textContent += "Error getting response from server. Refresh the page and try again.";
            chatbox.scrollTop = chatbox.scrollHeight;
            receiving = false;
          }
        };
      }

      sendButton.addEventListener("click", () => {
        if (!receiving && messageInput.value.trim() !== "") {
          const messageText = messageInput.value.trim();
          messageInput.value = "";
          const messageElement = createMessageElement(messageText, "right");
          chatbox.appendChild(messageElement);
          chatbox.scrollTop = chatbox.scrollHeight;

          connectWebSocket(messageText);
        }
      });
      copyButton.addEventListener("click", () => {
        const chatText = chatbox.textContent;
        navigator.clipboard.writeText(chatText).then(() => {
          console.log("Text copied to clipboard!");
        });
      });

      messageInput.addEventListener("keydown", (event) => {
        if (
          event.key === "Enter" &&
          !receiving &&
          messageInput.value.trim() !== ""
        ) {
          event.preventDefault();
          sendButton.click();
        }
      });
    </script>
  </body>
</html>

ChatGPT is an AI-powered chatbot developed by OpenAI. It uses advanced natural language processing models to generate human-like responses in conversational settings. ChatGPT allows users to interact with the AI system and have meaningful conversations on a wide range of topics. It is designed to understand and respond to user inputs in a way that simulates human conversation. With ChatGPT, you can create your own virtual assistant or integrate it into various applications to enhance the user experience.

Related Post

Leave a Reply

Your email address will not be published. Required fields are marked *

This website uses cookies to ensure that you get the best experience.
Learn More
Home
Mystery
Politics
Tech
Entertain.
Crime
Shop
Copy link
We only send notifications for Top Posts Ok No