Step-by-Step Guide: Building an HTML Template for ChatGPT App

Building an HTML Template for ChatGPT App

Creating a smooth, interactive interface is essential for developing an easy-to-use HTML template for your ChatGPT app. This guide will help you understand how to create dynamic templates, integrate the ChatGPT API, and use functionality that improves the user experience.

Objective

The aim of this project is to provide a robust HTML template for the ChatGPT app that allows for a smooth interaction between the user and the AI ​​model. This template serves as a foundation for developers to create multi-purpose applications powered by ChatGPT.

Essential features of the template

The HTML template for the ChatGPT app has several important elements:

  1. User Input Section: A text entry area where users can type questions or prompts.
  2. Submit Button: A button that submits user data for processing by the ChatGPT API.
  3. Response Display Area: A section that displays the AI’s responses to make the conversation flow easily.
  4. Sidebar Navigation: Optional sidebar for additional options, such as toggling functionality. or browsing past interactions

Integrating the API Key

To connect the template with ChatGPT, follow these steps:

  1. Get API Key: Register on the OpenAI platform and get your unique API key in return.
  2. Secure Storage: Store API keys securely, avoiding exposing them in client-side code to prevent unauthorized access.
  3. Backend Integration: Use server-side code to handle API requests, embedding API keys within these requests to keep them secure.
  4. Frontend Communication: Use JavaScript to send user data from the front-end to the back-end. which communicates with the ChatGPT API.
  5. Show Response: When the backend receives a response from ChatGPT, it sends the data back to the frontend. This will be displayed in the response area.

You Can Also Checkout These Projects

Source Code

HTML CODE:

<!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="https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.6.0/remixicon.min.css"
      integrity="sha512-XcIsjKMcuVe0Ucj/xgIXQnytNwBttJbNjltBV18IOnru2lDPe9KRRyvCXw6Y5H415vbBLRm8+q6fmLUU7DfO6Q=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <!-- Sidebar -->
    <div class="sidebar" id="sidebar">
      <div class="sidebar-header">
        <button id="closeSidebar" class="close-btn">
          <i class="ri-menu-line"></i>
        </button>

        <ul class="sidebar-menu">
          <li>
            <button class="menu-item"><i class="ri-search-line"></i></button>
          </li>
          <li>
            <button class="menu-item">
              <i class="ri-edit-box-line"></i>
            </button>
          </li>
        </ul>
      </div>
    </div>

    <!-- Main Content -->
    <div class="main-content">
      <div>
        <!-- Prompt Section -->
        <h2>What can I help with?</h2>
        <div class="prompt-container">
          <input
            type="text"
            id="promptInput"
            class="prompt-input"
            placeholder="Message ChatGPT"
          />
          <div class="prompt-icons-right">
            <button class="submit-btn"><i class="ri-arrow-up-line"></i></button>
          </div>
        </div>

        <!-- Action Buttons -->
        <div class="action-buttons">
          <button class="action-btn">
            <i class="ri-folder-image-line"></i> Create Image
          </button>
          <button class="action-btn">
            <i class="ri-gift-line"></i> Surprise Me
          </button>
          <button class="action-btn">
            <i class="ri-file-text-line"></i> Summarize Text
          </button>
          <button class="action-btn">
            <i class="ri-lightbulb-flash-line"></i> Brainstorm
          </button>
          <button class="action-btn"><i class="ri-add-line"></i> More</button>
        </div>
      </div>
    </div>

    <!-- Sidebar Toggle Button -->
    <button id="toggleSidebar" class="toggle-btn">
      <i class="ri-menu-line"></i>
    </button>

    <!-- Top Bar -->
    <div class="profile">
      <i class="ri-user-line"></i>
    </div>

    <script src="script.js"></script>
  </body>
</html>

CSS CODE:

/* General Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
  list-style: none;
  text-decoration: none;
}

body {
  position: relative;
  background-color: #f5efff;
  min-height: 100vh;
}

/* Sidebar Styles */
.sidebar {
  width: 250px;
  background-color: #fff;
  position: fixed;
  top: 0;
  left: -260px; /* Sidebar initially hidden */
  height: 100%;
  transition: left 0.3s ease; /* Add transition for the 'left' property */
  z-index: 1000;
}

.sidebar-header {
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.close-btn {
  background: none;
  border: none;
  color: #9aa6b2;
  font-size: 24px;
  cursor: pointer;
}

.sidebar-menu {
  list-style: none;
  padding: 10px;
  display: flex;
  gap: 15px;
  align-items: center;
}

.menu-item i {
  font-size: 24px;
  color: #9aa6b2;
  cursor: pointer;
}

/* Main Content */
.main-content {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30px;
  width: 100%;
  height: 100vh;
}

.main-content > div {
  width: 100%;
}

.main-content div h2 {
  text-align: center;
  font-size: 26px;
  margin-bottom: 20px;
}

/* Prompt Section */
.prompt-container {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 auto 20px;
}

#chatResponseContainer {
  width: 50%;
  margin-inline: auto;
  margin-block: 25px;
}

.prompt-input {
  width: 100%;
  padding: 20px;
  border: 1px solid #fff;
  background-color: #fff;
  border-radius: 5px;
}

.submit-btn {
  background-color: #fff;
  color: #9aa6b2;
  border: none;
  padding: 15px;
  border-radius: 5px;
  cursor: pointer;
}

.submit-btn i {
  font-size: 24px;
}

/* Action Buttons */
.action-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

.action-btn {
  border: 1px solid #fff;
  background-color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

/* Sidebar Toggle Button */
.toggle-btn i {
  position: fixed;
  font-size: 24px;
  top: 20px;
  left: 20px;
  color: #9aa6b2;
  border: none;
  cursor: pointer;
  z-index: 900;
}

/* profile */
.profile {
  position: absolute;
  top: 30px;
  right: 30px;
}

.profile i {
  color: #494c4e;
  font-size: 24px;
}

@media (max-width: 1024px) {
  .prompt-container,
  #chatResponseContainer {
    width: 70%;
    margin-inline: auto;
  }
}
@media (max-width: 767px) {
  .prompt-container,
  #chatResponseContainer {
    width: 98%;
    margin-inline: auto;
  }
}

JAVASCRIPT CODE:

// Sidebar Toggle Functionality
const sidebar = document.getElementById("sidebar");
const toggleBtn = document.getElementById("toggleSidebar");
const closeBtn = document.getElementById("closeSidebar");

// Sidebar starts closed initially
let isSidebarOpen = false;

// Add a slight delay after page load to trigger transition
window.addEventListener("load", () => {
  setTimeout(() => {
    sidebar.style.left = "0";
    isSidebarOpen = true; // Update state
  }, 50); // Delay ensures transition applies
});

// Function to close the sidebar
function closeSidebar() {
  sidebar.style.left = "-260px";
  isSidebarOpen = false;
}

// Function to open the sidebar
function openSidebar() {
  sidebar.style.left = "0";
  isSidebarOpen = true;
}

// Toggle sidebar on toggle button click
toggleBtn.addEventListener("click", () => {
  if (isSidebarOpen) {
    closeSidebar();
  } else {
    openSidebar();
  }
});

// Close sidebar on close button click
closeBtn.addEventListener("click", closeSidebar);

// ChatGPT Integration
const API_URL = "https://api.openai.com/v1/chat/completions";
const API_KEY = "your-api-key-here"; // Replace with your ChatGPT API key

// DOM Elements
const promptInput = document.getElementById("promptInput");
const submitBtn = document.querySelector(".submit-btn");
const chatResponseContainer = document.createElement("div");
chatResponseContainer.id = "chatResponseContainer";
chatResponseContainer.style.marginTop = "20px";

// Append the response container to the main content
const mainContent = document.querySelector(".main-content > div");
mainContent.appendChild(chatResponseContainer);

// Function to fetch ChatGPT response
async function fetchChatGPTResponse(prompt) {
  try {
    const response = await fetch(API_URL, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${API_KEY}`,
      },
      body: JSON.stringify({
        model: "gpt-4", // Ensure the appropriate model is used
        messages: [{ role: "user", content: prompt }],
      }),
    });

    if (!response.ok) {
      throw new Error(`Error: ${response.statusText}`);
    }

    const data = await response.json();
    return data.choices[0].message.content; // Extract ChatGPT response
  } catch (error) {
    console.error("Error fetching ChatGPT response:", error);
    return "Sorry, something went wrong!";
  }
}

// Event listener for the submit button
submitBtn.addEventListener("click", async () => {
  const userPrompt = promptInput.value.trim();

  if (userPrompt) {
    // Clear and disable input temporarily
    promptInput.value = "";
    promptInput.placeholder = "Loading...";
    promptInput.disabled = true;

    // Fetch ChatGPT response
    const chatResponse = await fetchChatGPTResponse(userPrompt);

    // Re-enable the input
    promptInput.placeholder = "Message ChatGPT";
    promptInput.disabled = false;

    // Display the response in the chat container
    const responseElement = document.createElement("div");
    responseElement.className = "chat-response";
    responseElement.style.padding = "10px";
    responseElement.style.border = "1px solid #ddd";
    responseElement.style.borderRadius = "5px";
    responseElement.style.backgroundColor = "#f9f9f9";
    responseElement.textContent = `ChatGPT: ${chatResponse}`;
    chatResponseContainer.appendChild(responseElement);
  }
});

Code & Preview

Conclusion

Creating HTML models for ChatGPT applications involves designing a clean user interface and integrating secure API communications. This model makes development easier and helps you build end-to-end applications with IA technology. Following these guidelines, you’ll build a solid foundation for interactive projects with ChatGPT technology.

Related Posts

Leave a Comment

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

Scroll to Top