PHP Classes

File: index.php

Recommend this page to a friend!
  Classes of Ahmed Abdulla   PHP ChatGPT Client   index.php   Download  
File: index.php
Role: Application script
Content type: text/plain
Description: Main Page
Class: PHP ChatGPT Client
Use ChatGPT API to interact with ChatGPT
Author: By
Last change:
Date: 9 months ago
Size: 10,088 bytes
 

Contents

Class file image Download
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <?php
        session_start
(); // Add this line to initiate the session
   
        // Retrieve the selected language from the session
       
$selectedLanguage = isset($_SESSION['lang']) ? $_SESSION['lang'] : 'ar';
   
       
// Set the appropriate title based on the selected language
       
if ($selectedLanguage === 'en') {
            echo
'<title>Chatbot for </title>';
        } else {
            echo
'<title>&#1585;&#1608;&#1576;&#1608;&#1578; &#1605;&#1581;&#1575;&#1583;&#1579;&#1577; ......</title>';
        }
   
?>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css">
    <style>
        body {
            font-family: Arial, sans-serif;
        }

        .chat-container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f4f4f4;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .message-container {
            margin-bottom: 10px;
            padding: 10px;
            border-radius: 5px;
        }

        .user-message {
            background-color: #e2f3ff;
        }

        .bot-message {
            background-color: #d3e8d9;
        }

        .message-content {
            margin-top: 5px;
            direction: <?php
           
// Retrieve the selected language from the session
               
$selectedLanguage = isset($_SESSION['lang']) ? $_SESSION['lang'] : 'ar';
           
               
// Set the appropriate title based on the selected language
               
if ($selectedLanguage === 'en') {
                    echo
'ltr';
                } else {
                    echo
'rtl';
                }
               
?>;
            font-family: "Sakkal Majalla", Arial, sans-serif;
        }

        #chat-log {
            max-height: 300px;
            overflow-y: auto;
        }

        #chat-form {
            display: flex;
            margin-top: 20px;
        }

        #user-message {
            flex-grow: 1;
            padding: 5px;
            border: none;
            border-radius: 4px;
            direction: <?php
           
// Retrieve the selected language from the session
               
$selectedLanguage = isset($_SESSION['lang']) ? $_SESSION['lang'] : 'ar';
           
               
// Set the appropriate title based on the selected language
               
if ($selectedLanguage === 'en') {
                    echo
'ltr';
                } else {
                    echo
'rtl';
                }
               
?>;
        }

        #user-message:focus {
            outline: none;
        }

        #user-message::placeholder {
            color: #888;
        }

        #send-button {
            padding: 8px 16px;
            background-color: #4caf50;
            color: white;
            border: none;
            border-radius: 4px;
            margin-left: 10px;
            cursor: pointer;
        }

        #language-select {
            position: absolute;
            top: 20px;
            right: 20px;
        }
    </style>
</head>
<body>
    <div class="container py-5">
        <div class="text-center">
           
          <?php
           
// Retrieve the selected language from the session
               
$selectedLanguage = isset($_SESSION['lang']) ? $_SESSION['lang'] : 'ar';
               
// Set the appropriate title based on the selected language
               
if ($selectedLanguage === 'en') {
                    echo
'<h1>Chatbot for .....</h1>';
                } else {
                    echo
'<h1>&#1585;&#1608;&#1576;&#1608;&#1578; &#1605;&#1581;&#1575;&#1583;&#1579;&#1577; .....</h1>';
                }
         
?>
</div>
        <br>
        <div id="language-select">
            <select onchange="changeLanguage(event)">
                <option value="ar" <?php if($selectedLanguage === 'ar') echo 'selected'; ?>>&#1575;&#1604;&#1593;&#1585;&#1576;&#1610;&#1577;</option>
                <option value="en" <?php if($selectedLanguage === 'en') echo 'selected'; ?>>English</option>
            </select>
        </div>


        <div class="chat-container">
            <div id="chat-log" class="overflow-auto"></div>
            <form id="chat-form" onsubmit="sendMessage(event)" class="mt-4">
                <div class="input-group">
                   <input type="text" id="user-message" class="form-control" placeholder="<?php
           
// Retrieve the selected language from the session
               
$selectedLanguage = isset($_SESSION['lang']) ? $_SESSION['lang'] : 'ar';
           
               
// Set the appropriate title based on the selected language
               
if ($selectedLanguage === 'en') {
                    echo
'Enter your message';
                } else {
                    echo
'&#1571;&#1583;&#1582;&#1604; &#1585;&#1587;&#1575;&#1604;&#1578;&#1603;';
                }
               
?>" maxlength="255" autocomplete="off">
                    <button id="send-button" type="submit" class="btn btn-primary">
                      <?php
           
// Retrieve the selected language from the session
               
$selectedLanguage = isset($_SESSION['lang']) ? $_SESSION['lang'] : 'ar';
           
               
// Set the appropriate title based on the selected language
               
if ($selectedLanguage === 'en') {
                    echo
'Send';
                } else {
                    echo
'&#1575;&#1585;&#1587;&#1575;&#1604;';
                }
               
?></button>
                </div>
            </form>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
    <script>
        function scrollToBottom() {
            var chatLog = document.getElementById("chat-log");
            chatLog.scrollTop = chatLog.scrollHeight;
        }

        function displayMessage(message, isUser) {
            var messageContainer = document.createElement("div");
            messageContainer.className = "message-container";

            var messageElement = document.createElement("div");
            messageElement.className = isUser ? "message user-message" : "message bot-message";

            var messageContent = document.createElement("div");
            messageContent.className = "message-content";

            // Use nl2br to convert newlines to HTML line breaks and remove &zwnj;
            messageContent.innerHTML = message.replace(/\n/g, "<br>").replace(/&zwnj;/g, "");

            messageElement.appendChild(messageContent);
            messageContainer.appendChild(messageElement);

            var chatLog = document.getElementById("chat-log");
            chatLog.appendChild(messageContainer);

            scrollToBottom();
        }

        function showWaitNotification() {
            var waitMessage = "<?php
           
// Retrieve the selected language from the session
               
$selectedLanguage = isset($_SESSION['lang']) ? $_SESSION['lang'] : 'ar';
           
               
// Set the appropriate wait message based on the selected language
               
if ($selectedLanguage === 'en') {
                    echo
'Please wait for the response...';
                } else {
                    echo
'&#1575;&#1604;&#1585;&#1580;&#1575;&#1569; &#1575;&#1604;&#1575;&#1606;&#1578;&#1592;&#1575;&#1585; &#1604;&#1604;&#1581;&#1589;&#1608;&#1604; &#1593;&#1604;&#1609; &#1575;&#1604;&#1585;&#1583;...';
                }
               
?>";
           
            displayMessage(waitMessage, false);
        }

        function sendMessage(event) {
            event.preventDefault();

            var userMessageInput = document.getElementById("user-message");
            var userMessage = userMessageInput.value.trim().slice(0, 255); // Limit to 255 characters

            if (userMessage !== "") {
                displayMessage(userMessage, true);
                userMessageInput.value = "";

                // Show wait notification
                showWaitNotification();

                // Send the user message to the chatbot
                fetch("chatbot.php", {
                    method: "POST",
                    body: new URLSearchParams({
                        "user-message": userMessage
                    })
                })
                .then(response => response.text())
                .then(data => {
                    // Remove the wait notification
                    var chatLog = document.getElementById("chat-log");
                    chatLog.removeChild(chatLog.lastChild);

                    displayMessage(data, false);
                });
            }
        }

        function changeLanguage(event) {
            var selectedLanguage = event.target.value;

            // Save the selected language in the session (assuming you have a backend that handles sessions)
            fetch("save-language.php", {
                method: "POST",
                body: new URLSearchParams({
                    "language": selectedLanguage
                })
            })
            .then(response => {
                if (response.ok) {
                    console.log("Language saved successfully!");
                    location.reload(); // Reload the page to reflect the language change
                } else {
                    console.error("Failed to save language.");
                }
            });
        }
   
        scrollToBottom();
    </script>
    <footer>
        <p style="text-align: center; font-size: small;">Version 1</p>
    </footer>

</body>
</html>