Spaces:

imseldrith
/

Gemini-UI

Running

App Files Files Community

imseldrith commited on Dec 25, 2023

Commit

0026b70

1 Parent(s): 15286b3

Update index.html

Browse files

Files changed (1) hide show

index.html +398 -426

index.html CHANGED Viewed

@@ -1,3 +1,4 @@
 <!DOCTYPE html>
 <html lang="en">
@@ -712,457 +713,428 @@
             <label for="personalityPromptInput">Prompt:</label>
             <textarea id="personalityPromptInput" placeholder="Personality Prompt" class="prompt-field"></textarea>
             <button id="updatePersonality">Save</button>
-        </div>
     </div>
-    <script type="importmap">
-      {
-        "imports": {
-          "@google/generative-ai": "https://esm.run/@google/generative-ai"
-        }
-      }
-    </script>
-    <script type="module">
-        import { marked } from "https://cdn.jsdelivr.net/npm/marked/lib/marked.esm.js";
-        import { GoogleGenerativeAI } from "@google/generative-ai";
-        import { HarmBlockThreshold, HarmCategory } from "@google/generative-ai";
-        const safetySettings = [
-            {
-                category: HarmCategory.HARM_CATEGORY_HARASSMENT,
-                threshold: HarmBlockThreshold.BLOCK_NONE,
-            },
-            {
-                category: HarmCategory.HARM_CATEGORY_HATE_SPEECH,
-                threshold: HarmBlockThreshold.BLOCK_NONE,
-            },
-            {
-                category: HarmCategory.HARM_CATEGORY_SEXUALLY_EXPLICIT,
-                threshold: HarmBlockThreshold.BLOCK_NONE,
             },
-            {
-                category: HarmCategory.HARM_CATEGORY_DANGEROUS_CONTENT,
-                threshold: HarmBlockThreshold.BLOCK_NONE,
-            }
-        ];
-        const systemPrompt = "If needed, format your answer using markdown." +
-            "Today's date is" + new Date().toDateString() + "." +
-            "End of system prompt.";
-        //load api key from local storage into input field
-        const API_KEY = document.querySelector("#apiKeyInput");
-        const maxTokens = document.querySelector("#maxTokens");
-        API_KEY.value = localStorage.getItem("API_KEY");
-        maxTokens.value = localStorage.getItem("MAX_TOKENS");
-        //function to hide element smoothly then setting display none after the transition time elapsed
-        function hideElement(element) {
-            element.style.transition = 'opacity 0.2s';
-            element.style.opacity = '0';
-            setTimeout(function () {
-                element.style.display = 'none';
-            }, 200);
-        }
-        function showElement(element) {
-            // Wait for other transitions to complete (0.2s delay)
-            setTimeout(function () {
-                // Change display property
-                element.style.display = 'flex';
-                // Wait for next frame for display change to take effect
-                requestAnimationFrame(function () {
-                    // Start opacity transition
-                    element.style.transition = 'opacity 0.2s';
-                    element.style.opacity = '1';
-                });
-            }, 200);
-        }
-        const tabs = document.querySelectorAll(".navbar-tab");
-        const sidebarViews = document.querySelectorAll(".sidebar-section");
-        const highlight = document.querySelector(".navbar-tab-highlight");
-        highlight.style.width = `calc(100% / ${tabs.length})`;
-        let currentTab = undefined;
-        function navigateTo(tab) {
-            if (tab == tabs[currentTab]) {
-                return;
-            }
-            // set the highlight to match the size of the tab element
-            let tabIndex = [...tabs].indexOf(tab);
-            if (tabIndex < 0 || tabIndex >= sidebarViews.length) {
-                console.error("Invalid tab index: " + tabIndex);
-                return;
-            }
-            if (currentTab != undefined) {
-                hideElement(sidebarViews[currentTab]);
             }
-            showElement(sidebarViews[tabIndex]);
-            currentTab = tabIndex;
-            highlight.style.left = `calc(100% / ${tabs.length} * ${tabIndex})`;
-        }
-        tabs.forEach(element => {
-            element.addEventListener("click", () => {
-                navigateTo(element);
-            })
-        });
-        sidebarViews.forEach(view => {
-            hideElement(view);
-        });
-        navigateTo(tabs[0]);
-        const personalityCardsInnerInput = document.querySelectorAll(".card-personality input");
-        let personalityCards = document.querySelectorAll(".card-personality");
-        const formsOverlay = document.querySelector(".overlay");
-        const hideOverlayButton = document.querySelector("#btn-hide-overlay");
-        const addPersonalityForm = document.querySelector("#form-add-personality");
-        const addPersonalityButton = document.querySelector("#btn-add-personality");
-        const editDefaultPersonalityForm = document.querySelector("#form-edit-personality");
-        const editDefaultPersonalityButton = document.querySelector("#btn-edit-personality-default");
-        const submitNewPersonalityButton = document.querySelector("#btn-submit-personality");
-        const updatePersonalityButton = document.querySelector("#updatePersonality");
-        const sendMessageButton = document.querySelector("#btn-send");
-        function darkenBg(element) {
-            let elementBackgroundImageURL = element.style.backgroundImage.match(/url\((.*?)\)/)[1].replace(/('|")/g, '');
-            element.style.backgroundImage = `linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('${elementBackgroundImageURL}')`;
-        }
-        function lightenBg(element) {
-            let elementBackgroundImageURL = element.style.backgroundImage.match(/url\((.*?)\)/)[1].replace(/('|")/g, '');
-            element.style.backgroundImage = `url('${elementBackgroundImageURL}')`;
-        }
-        function sharePersonality(personality) {
-            //export personality to json
-            const personalityJSON = {
-                name: personality.querySelector(".personality-title").innerText,
-                description: personality.querySelector(".personality-description").innerText,
-                prompt: personality.querySelector(".personality-prompt").innerText,
-                //base64 encode image
-                image: personality.style.backgroundImage.match(/url\((.*?)\)/)[1].replace(/('|")/g, '')
             }
-            const personalityJSONString = JSON.stringify(personalityJSON);
-            //download
-            const element = document.createElement('a');
-            element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(personalityJSONString));
-            element.setAttribute('download', `${personalityJSON.name}.json`);
-            element.style.display = 'none';
-            document.body.appendChild(element);
-            element.click();
-            document.body.removeChild(element);
-        }
-        //handle share button click
-        personalityCards.forEach(card => {
-            const shareButton = card.querySelector(".btn-share-card");
-            shareButton.addEventListener("click", () => {
-                sharePersonality(card);
-            })
-        });
-        const importPersonalityButton = document.querySelector("#btn-import-personality");
-        importPersonalityButton.addEventListener("click", () => {
-            const fileInput = document.createElement('input');
-            fileInput.type = 'file';
-            fileInput.addEventListener('change', () => {
-                const file = fileInput.files[0];
-                const reader = new FileReader();
-                reader.onload = function (e) {
-                    const personalityJSON = JSON.parse(e.target.result);
-                    insertPersonality(personalityJSON);
-                };
-                reader.readAsText(file);
-            });
-            fileInput.click();
-        });
-        //handle radio input check change
-        personalityCardsInnerInput.forEach(input => {
-            input.addEventListener("change", () => {
-                // Darken all cards
-                personalityCards.forEach(card => {
-                    const cardBackgroundImageURL = card.style.backgroundImage.match(/url\((.*?)\)/)[1].replace(/('|")/g, '');
-                    card.style.outline = "0px solid rgb(150 203 236)";
-                    darkenBg(card);
-                })
-                // Lighten selected card
-                input.parentElement.style.outline = "3px solid rgb(150 203 236)";
-                lightenBg(input.parentElement);
-            })
-            // Set initial outline
-            if (input.checked) {
-                lightenBg(input.parentElement);
-                input.parentElement.style.outline = "3px solid rgb(150 203 236)";
             }
-        })
-        function showAddPersonalityForm() {
-            showElement(formsOverlay);
-            showElement(addPersonalityForm);
-        }
-        function showEditPersonalityForm() {
-            showElement(formsOverlay);
-            showElement(editDefaultPersonalityForm);
-        }
-        function closeOverlay() {
-            hideElement(formsOverlay);
-            hideElement(addPersonalityForm);
-            hideElement(editDefaultPersonalityForm);
-        }
-        function insertPersonality(personalityJSON){
-            const personalitySection = document.querySelector("#personalitySection");
-            const personalitySectionActions = document.querySelector("#btn-array-personality-section");
-            const personalityCard = document.createElement("label");
-            personalityCard.classList.add("card-personality");
-            personalityCard.style.backgroundImage = `url('${personalityJSON.image}')`;
-            personalityCard.innerHTML = `
-            <input type="radio" name="personality" value="${personalityJSON.name}">
-            <div>
-                <h3 class="personality-title">${personalityJSON.name}</h3>
-                <p class="personality-description">${personalityJSON.description}</p>
-                <p class="personality-prompt">${personalityJSON.prompt}</p>
-            </div>
-            <button class="btn-textual btn-edit-card material-symbols-outlined" id="btn-edit-personality-${personalityJSON.name}">edit</button>
-            <button class="btn-textual btn-share-card material-symbols-outlined" id="btn-share-personality-${personalityJSON.name}">share</button>
-            `;
-            //insert personality card before the button array
-            personalitySection.insertBefore(personalityCard, personalitySectionActions);
-            darkenBg(personalityCard);
-            personalityCards = document.querySelectorAll(".card-personality");
-            //add input event listener
-            personalityCard.querySelector("input").addEventListener("change", () => {
-                // Darken all cards
-                personalityCards.forEach(card => {
-                    const cardBackgroundImageURL = card.style.backgroundImage.match(/url\((.*?)\)/)[1].replace(/('|")/g, '');
-                    card.style.outline = "0px solid rgb(150 203 236)";
-                    darkenBg(card);
-                })
-                // Lighten selected card
-                personalityCard.style.outline = "3px solid rgb(150 203 236)";
-                lightenBg(personalityCard);
-            })
-            const sharebtn = personalityCard.querySelector(".btn-share-card");
-            sharebtn.addEventListener("click", () => {
-                sharePersonality(personalityCard);
             });
-        }
-        function submitNewPersonality() {
-            const personalityName = document.querySelector("#form-add-personality #personalityNameInput");
-            const personalityDescription = document.querySelector("#form-add-personality #personalityDescriptionInput");
-            const personalityImageURL = document.querySelector("#form-add-personality #personalityImageURLInput");
-            const personalityPrompt = document.querySelector("#form-add-personality #personalityPromptInput");
-            const personalitySection = document.querySelector("#personalitySection");
-            if (personalityName.value == "") {
-                alert("Please enter a personality name");
-                return;
-            }
-            if (personalityPrompt.value == "") {
-                alert("Please enter a personality prompt");
-                return;
-            }
-            //to json
-            const personalityJSON = {
-                name: personalityName.value,
-                description: personalityDescription.value,
-                prompt: personalityPrompt.value,
-                image: personalityImageURL.value
-            }
-            insertPersonality(personalityJSON);
-            closeOverlay();
         }
-        async function run() {
-            const msg = document.querySelector("#messageInput");
-            const msgText = msg.value;
-            const messageContainer = document.querySelector(".message-container");
-            const maxTokens = document.querySelector("#maxTokens");
-            const API_KEY = document.querySelector("#apiKeyInput");
-            const selectedPersonalityTitle = document.querySelector("input[name='personality']:checked + div .personality-title").innerText;
-            const selectedPersonalityDescription = document.querySelector("input[name='personality']:checked + div .personality-description").innerText;
-            const selectedPersonalityPrompt = document.querySelector("input[name='personality']:checked + div .personality-prompt").innerText;
-            //chat history
-            const chatHistory = [];
-            //get chat history from message container
-            const messageElements = messageContainer.querySelectorAll(".message");
-            messageElements.forEach(element => {
-                const messageroleapi = element.querySelector(".message-role-api").innerText;
-                const messagetext = element.querySelector(".message-text").innerText;
-                chatHistory.push({
-                    role: messageroleapi,
-                    parts: [{ text: messagetext }]
-                })
-            })
-            //reverse order of chat history
-            chatHistory.reverse();
-            //
-            const toneExamples = [];
-            if (API_KEY.value == "") {
-                alert("Please enter an API key");
-                return;
-            }
-            const generationConfig = {
-                maxOutputTokens: maxTokens.value,
-                temperature: 0.9
-            };
-            const genAI = new GoogleGenerativeAI(API_KEY.value);
-            const model = genAI.getGenerativeModel({ model: "gemini-pro" });
-            const chat = model.startChat({
-                generationConfig, safetySettings,
-                history: [
-                    {
-                        role: "user",
-                        parts: [{ text: `Personality Name: ${selectedPersonalityTitle}, Personality Description: ${selectedPersonalityDescription}, Personality Prompt: ${selectedPersonalityPrompt}. ${systemPrompt}` }]
-                    },
-                    {
-                        role: "model",
-                        parts: [{ text: `Okay. From now on, I shall play the role of ${selectedPersonalityTitle}. Your prompt and described personality will be used for the rest of the conversation.` }]
                     },
-                    ...toneExamples,
-                    ...chatHistory
-                ]
-            })
-            msg.value = "";
-            //create new message div for the user's message then append to message container's top
-            const newMessage = document.createElement("div");
-            newMessage.classList.add("message");
-            newMessage.innerHTML = `
-            <h3 class="message-role">You:</h3>
-            <div class="message-role-api" style="display: none;">user</div>
-            <p class="message-text">${msgText}</p>
-            `;
-            messageContainer.insertBefore(newMessage, messageContainer.firstChild);
-            const result = await chat.sendMessageStream(msgText);
-            //create new message div for the model's reply then append to message container's top
-            const newReply = document.createElement("div");
-            newReply.classList.add("message");
-            newReply.classList.add("message-model");
-            newReply.innerHTML = `
-            <h3 class="message-role">${selectedPersonalityTitle}:</h3>
-            <div class="message-role-api" style="display: none;">model</div>
-            <p class="message-text">`;
-            //get the p element inside the message div
-            const replyText = newReply.querySelector(".message-text");
-            messageContainer.insertBefore(newReply, messageContainer.firstChild);
-            let rawText = "";
-            for await (const chunk of result.stream) {
-                console.log("hello");
-                rawText += chunk.text();
-                replyText.innerHTML = marked(rawText);
-                void replyText.offsetHeight; // Force reflow
-                hljs.highlightAll();
-            }
-            //save api key to local storage
-            localStorage.setItem("API_KEY", API_KEY.value);
-            localStorage.setItem("MAX_TOKENS",maxTokens.value);
-        }
-        const messageInput = document.querySelector("#messageInput");
-        //if more than one line, set height to scrollheight, and revert upon delete
-        messageInput.addEventListener("input", () => {
-            if (messageInput.value.split("\n").length == 1) {
-                messageInput.style.height = "2.5rem";
-            }
-            else {
-                messageInput.style.height = "";
-                messageInput.style.height = messageInput.scrollHeight + "px";
-            }
-        })
-        const sidebarDismissButton = document.querySelector("#btn-hide-sidebar");
-        sidebarDismissButton.addEventListener("click", () => {
-            hideElement(document.querySelector(".sidebar"));
-        })
-        const showSidebarButton = document.querySelector("#btn-show-sidebar");
-        showSidebarButton.addEventListener("click", () => {
-            showElement(document.querySelector(".sidebar"));
-        })
-        //unhide sidebar if width > 768px (event hander)
-        window.addEventListener("resize", () => {
-            if (window.innerWidth > 768) {
-                showElement(document.querySelector(".sidebar"));
-            }
-        })
-        hideOverlayButton.addEventListener("click", closeOverlay);
-        addPersonalityButton.addEventListener("click", showAddPersonalityForm);
-        editDefaultPersonalityButton.addEventListener("click", showEditPersonalityForm);
-        submitNewPersonalityButton.addEventListener("click", submitNewPersonality);
-        sendMessageButton.addEventListener("click", run);
-        // ...
-    </script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
             <label for="personalityPromptInput">Prompt:</label>
             <textarea id="personalityPromptInput" placeholder="Personality Prompt" class="prompt-field"></textarea>
             <button id="updatePersonality">Save</button>
+            <button id="deletePersonality">Delete</button>
     </div>
+</div>
+<script src="https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]/dist/tf.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]/dist/tfjs-vis.umd.min.js"></script>
+<script>
+    const container = document.getElementById('mainContent');
+    const messageContainer = document.querySelector('.message-container');
+    const messageInput = document.getElementById('messageInput');
+    const sendButton = document.getElementById('btn-send');
+    const maxTokens = document.getElementById('maxTokens');
+    const safetySettings = document.getElementById('safetySettings');
+    const apiKeyInput = document.getElementById('apiKeyInput');
+    const sidebar = document.querySelector('.sidebar');
+    const personalitySection = document.getElementById('personalitySection');
+    const addPersonalityButton = document.getElementById('btn-add-personality');
+    const importPersonalityButton = document.getElementById('btn-import-personality');
+    const btnHideSidebar = document.getElementById('btn-hide-sidebar');
+    const btnShowSidebar = document.getElementById('btn-show-sidebar');
+    const personalityForm = document.getElementById('form-add-personality');
+    const editPersonalityForm = document.getElementById('form-edit-personality');
+    const overlay = document.querySelector('.overlay');
+    const personalityNameInput = document.getElementById('personalityNameInput');
+    const personalityDescriptionInput = document.getElementById('personalityDescriptionInput');
+    const personalityImageURLInput = document.getElementById('personalityImageURLInput');
+    const personalityPromptInput = document.getElementById('personalityPromptInput');
+    const btnHideOverlay = document.getElementById('btn-hide-overlay');
+    const btnSubmitPersonality = document.getElementById('btn-submit-personality');
+    const editPersonalityButton = document.querySelectorAll('.btn-edit-card');
+    const sharePersonalityButton = document.querySelectorAll('.btn-share-card');
+    const updatePersonalityButton = document.getElementById('updatePersonality');
+    const deletePersonalityButton = document.getElementById('deletePersonality');
+    const editPersonalityName = document.getElementById('personalityNameInput');
+    const editPersonalityDescription = document.getElementById('personalityDescriptionInput');
+    const editPersonalityImageURL = document.getElementById('personalityImageURLInput');
+    const editPersonalityPrompt = document.getElementById('personalityPromptInput');
+    let currentPersonality = {
+        name: 'zodiac',
+        description: 'zodiac is a cheerful assistant, always ready to help you with your tasks.',
+        image: 'https://images.fonearena.com/blog/wp-content/uploads/2023/12/Google-Gemini-AI-1024x577.jpg',
+        prompt: 'You are zodiac, a helpful assistant created by faetalize, built upon Google\'s Gemini Pro model. Gemini Pro is a new LLM (Large Language Model) release by Google on December 2023. Your purpose is being a helpful assistant to the user.'
+    };
+    let allPersonalities = [{
+        name: 'zodiac',
+        description: 'zodiac is a cheerful assistant, always ready to help you with your tasks.',
+        image: 'https://images.fonearena.com/blog/wp-content/uploads/2023/12/Google-Gemini-AI-1024x577.jpg',
+        prompt: 'You are zodiac, a helpful assistant created by faetalize, built upon Google\'s Gemini Pro model. Gemini Pro is a new LLM (Large Language Model) release by Google on December 2023. Your purpose is being a helpful assistant to the user.'
+    }];
+    let allPromptObjects = [{
+        context: '',
+        examples: [{
+            input: {
+                content: 'What is your purpose?'
             },
+            output: {
+                content: 'I am here to help you with various tasks, such as answering your questions, providing information and assisting you with your writing. Feel free to ask me anything you would like.'
             }
+        }, {
+            input: {
+                content: 'Can you write a poem about love?'
+            },
+            output: {
+                content: 'Within the tapestry of life\'s grand design, Love emerges as a guiding star, so divine. It paints the canvas of our hearts with hues, A symphony of laughter, and the blues.'
             }
+        }, {
+            input: {
+                content: 'What do you know about the history of the internet?'
+            },
+            output: {
+                content: 'The internet, a boundless realm of knowledge untold, Its roots in humble beginnings, stories old. From ARPANET\'s inception, it took flight, A network born to bridge the day and night.'
             }
+        }]
+    }];
+    let model = null;
+    const modelUrl = 'https://storage.googleapis.com/tfjs-models/public/gemini-pro/model.json';
+    // Load the model.
+    tf.loadGraphModel(modelUrl).then((loadedModel) => {
+        console.log('Model loaded.');
+        model = loadedModel;
+    });
+    const generateMessage = (message, mode) => {
+        const messageBox = document.createElement('div');
+        const messageParagraph = document.createElement('p');
+        messageParagraph.classList.add('message');
+        messageParagraph.classList.add(mode);
+        messageParagraph.textContent = message;
+        messageBox.classList.add('message-box');
+        messageBox.appendChild(messageParagraph);
+        return messageBox;
+    };
+    const appendMessage = (messageBox) => {
+        messageContainer.appendChild(messageBox);
+        messageContainer.scrollTop = messageContainer.scrollHeight;
+    };
+    const displayResponse = (message) => {
+        const messageContainer = document.querySelector('.message-container');
+        const messageBox = generateMessage(message, 'message-model');
+        appendMessage(messageBox);
+    };
+    const fetchApi = ({ prompt, maxTokens, safetySettings }) => {
+        const requestBody = {
+            prompt: {
+                text: prompt,
+            },
+            maxTokens: maxTokens,
+            safetySettings: safetySettings,
+        };
+        // Make the API call.
+        const requestOptions = {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(requestBody),
+        };
+        fetch(
+            `https://generativelanguage.googleapis.com/v1beta2/models/text-bison-001:generateText?key=${apiKeyInput.value}`,
+            requestOptions
+        )
+            .then((res) => res.json())
+            .then((data) => displayResponse(data.candidates[0].output))
+            .catch((error) => {
+                console.error('Error querying API: ', error);
+                alert('Sorry, there was an issue with your request. Please try again.');
             });
+    };
+    const checkSyntax = (result) => {
+        if (result.includes('```')) {
+            return result.includes('```json') ? result.slice(7, -3) : result.slice(3, -3)
         }
+        return result;
+    }
+    const generateResponse = (input) => {
+        let promptObject = {
+            context: '',
+            examples: [
+                {
+                    input: {
+                        content: input
                     },
+                    output: {
+                        content: ""
+                    }
+                }
+            ]
+        };
+        allPromptObjects.push(promptObject);
+        const prompt = JSON.stringify({
+            messages: allPromptObjects,
+        });
+        const maxTokensValue = maxTokens.value;
+        const safetySettingsValue = safetySettings.value;
+        fetchApi({ prompt, maxTokensValue, safetySettingsValue });
+    };
+    const sendButtonHandler = () => {
+        if (!messageInput.value) return;
+        const messageBox = generateMessage(messageInput.value, 'message-user');
+        appendMessage(messageBox);
+        generateResponse(messageInput.value);
+        messageInput.value = '';
+    };
+    const addPersonalityButtonHandler = () => {
+        overlay.classList.remove('display', 'opacity');
+        overlay.classList.add('display', 'opacity');
+        personalityForm.classList.remove('display', 'opacity');
+        personalityForm.classList.add('display', 'opacity');
+    };
+    const importPersonalityButtonHandler = () => {
+        alert('Unfortunately, this feature is not yet supported. Please add personalities manually until this feature is added!');
+    };
+    const hideSidebarButtonHandler = () => {
+        sidebar.classList.remove('display', 'opacity');
+        btnShowSidebar.classList.remove('display', 'opacity');
+        btnShowSidebar.classList.add('display', 'opacity');
+    };
+    const showSidebarButtonHandler = () => {
+        sidebar.classList.add('display', 'opacity');
+        btnHideSidebar.classList.remove('display', 'opacity');
+        btnHideSidebar.classList.add('display', 'opacity');
+    };
+    const addPersonalityFormHandler = (e) => {
+        e.preventDefault();
+        if (personalityNameInput.value === '') {
+            alert('Please fill all the fields.');
+            return;
+        }
+        const newPersonality = {
+            name: personalityNameInput.value,
+            description: personalityDescriptionInput.value,
+            image: personalityImageURLInput.value,
+            prompt: personalityPromptInput.value
+        };
+        allPersonalities.push(newPersonality);
+        allPromptObjects = [];
+        createPersonalityCard(newPersonality);
+        resetFormValues();
+        hideForm();
+    };
+    const createPersonalityCard = (personality) => {
+        const personalityCard = document.createElement('label');
+        const personalityCardHeader = document.createElement('div');
+        const personalityCardTitle = document.createElement('h3');
+        const personalityCardDescription = document.createElement('p');
+        const personalityCardPrompt = document.createElement('p');
+        const personalityCardEditButton = document.createElement('button');
+        const personalityCardShareButton = document.createElement('button');
+        const personalityCardRadioInput = document.createElement('input');
+        personalityCard.classList.add('card-personality');
+        personalityCardHeader.classList.add('card-header');
+        personalityCardTitle.classList.add('personality-title');
+        personalityCardDescription.classList.add('personality-description');
+        personalityCardPrompt.classList.add('personality-prompt', 'display');
+        personalityCardEditButton.classList.add('btn-textual', 'btn-edit-card', 'material-symbols-outlined', 'edit');
+        personalityCardShareButton.classList.add('btn-textual', 'btn-share-card', 'material-symbols-outlined');
+        personalityCardRadioInput.classList.add('display');
+        personalityCardRadioInput.type = 'radio';
+        personalityCardRadioInput.name = 'personality';
+        personalityCardRadioInput.value = personality.name;
+        personalityCardTitle.textContent = personality.name;
+        personalityCardDescription.textContent = personality.description;
+        personalityCardPrompt.textContent = personality.prompt;
+        personalityCardEditButton.textContent = 'edit';
+        personalityCardShareButton.textContent = 'share';
+        const backgroundImageStyle = `background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('${personality.image}')`;
+        personalityCard.setAttribute('style', backgroundImageStyle);
+        personalityCardEditButton.addEventListener('click', (e) => editPersonalityHandler(e.target));
+        personalityCardShareButton.addEventListener('click', () => sharePersonalityHandler(personality));
+        personalityCardRadioInput.addEventListener('click', (e) => switchPersonalityHandler(e.target));
+        personalityCardHeader.appendChild(personalityCardTitle);
+        personalityCard.appendChild(personalityCardHeader);
+        personalityCard.appendChild(personalityCardDescription);
+        personalityCard.appendChild(personalityCardPrompt);
+        personalityCard.appendChild(personalityCardEditButton);
+        personalityCard.appendChild(personalityCardShareButton);
+        personalityCard.appendChild(personalityCardRadioInput);
+        const personalitySection = document.getElementById('personalitySection');
+        personalitySection.insertBefore(personalityCard, personalitySection.firstChild);
+    };
+    const resetFormValues = () => {
+        personalityNameInput.value = '';
+        personalityDescriptionInput.value = '';
+        personalityImageURLInput.value = '';
+        personalityPromptInput.value = '';
+    };
+    const hideForm = () => {
+        overlay.classList.remove('display', 'opacity');
+        personalityForm.classList.remove('display', 'opacity');
+    };
+    const editPersonalityHandler = (button) => {
+        const card = button.parentElement;
+        const personalityName = card.querySelector('.personality-title').textContent;
+        const personalityObject = allPersonalities.find((personality) => personality.name === personalityName);
+        showForm(personalityObject);
+        overlay.classList.remove('display', 'opacity');
+        overlay.classList.add('display', 'opacity');
+        personalityForm.classList.remove('display', 'opacity');
+        personalityForm.classList.add('display', 'opacity');
+    };
+    const sharePersonalityHandler = (personality) => {
+        const personalityObject = JSON.stringify(personality);
+        const shareText = `Here's a personality I created using zodiac, a fun assistant that you can talk to: ${personalityObject}`;
+        navigator.clipboard.writeText(shareText);
+        alert(`Successfully copied personality to clipboard!`);
+    };
+    const switchPersonalityHandler = (radioInput) => {
+        const personalityName = radioInput.value;
+        const personalityObject = allPersonalities.find((personality) => personality.name === personalityName);
+        currentPersonality = personalityObject;
+        allPromptObjects = [];
+        messageContainer.textContent = '';
+    };
+    const showForm = (personality) => {
+        personalityNameInput.value = personality.name;
+        personalityDescriptionInput.value = personality.description;
+        personalityImageURLInput.value = personality.image;
+        personalityPromptInput.value = personality.prompt;
+        const updatePersonalityButton = createElement('button');
+        updatePersonalityButton.type = 'submit';
+        updatePersonalityButton.classList.add('btn-textual');
+        updatePersonalityButton.id = 'updatePersonality';
+        updatePersonalityButton.textContent = 'Save';
+        updatePersonalityButton.addEventListener('click', (e) => updatePersonalityHandler(e, personality));
+        const form = document.getElementById('form-edit-personality');
+        const submitButton = document.getElementById('btn-submit-personality');
+        form.replaceChild(updatePersonalityButton, submitButton);
+    };
+    const updatePersonalityHandler = (e, personality) => {
+        e.preventDefault();
+        const personalityObject = {
+            name: personalityNameInput.value,
+            description: personalityDescriptionInput.value,
+            image: personalityImageURLInput.value,
+            prompt: personalityPromptInput.value
+        };
+        const index = allPersonalities.indexOf(personality);
+        allPersonalities[index] = personalityObject;
+        allPromptObjects = [];
+        createPersonalityCard(personalityObject);
+        resetFormValues();
+        hideForm();
+    };
+    const hideOverlayButtonHandler = () => {
+        overlay.classList.remove('display', 'opacity');
+        btnShowSidebar.classList.remove('display', 'opacity');
+        btnShowSidebar.classList.add('display', 'opacity');
+    };
+    const createElement = (element, item) => {
+        const newElement = document.createElement(element);
+        newElement.textContent = item;
+        return newElement;
+    };
+const deletePersonalityButton = document.getElementById('deletePersonality');
+// Add event listener to delete personality button
+deletePersonalityButton.addEventListener('click', (e) => {
+  e.preventDefault();
+  // Get personality name from the form
+  const personalityName = personalityNameInput.value;
+  // Find the personality object in the array of personalities
+  const personalityObject = allPersonalities.find((personality) => personality.name === personalityName);
+  // Check if personality object is found
+  if (!personalityObject) {
+    alert('Personality not found!');
+    return;
+  }
+  // Delete the personality object from the array
+  const index = allPersonalities.indexOf(personalityObject);
+  allPersonalities.splice(index, 1);
+  // Delete the personality card from the HTML
+  const personalityCard = document.querySelector(`label[value="${personalityName}"]`);
+  personalityCard.remove();
+  // Reset the form values
+  resetFormValues();
+  // Hide the form
+  hideForm();
+  // Alert the user that the personality has been deleted
+  alert(`Personality "${personalityName}" has been deleted.`);
+});
+    // Add event listeners
+    document.getElementById('btn-send').addEventListener('click', sendButtonHandler);
+    document.getElementById('btn-add-personality').addEventListener('click', addPersonalityButtonHandler);
+    document.getElementById('btn-import-personality').addEventListener('click', importPersonalityButtonHandler);
+    document.getElementById('btn-hide-sidebar').addEventListener('click', hideSidebarButtonHandler);
+    document.getElementById('btn-show-sidebar').addEventListener('click', showSidebarButtonHandler);
+    document.getElementById('form-add-personality').addEventListener('submit', addPersonalityFormHandler);
+    document.getElementById('form-edit-personality').addEventListener('submit', updatePersonalityHandler);
+    document.getElementById('btn-hide-overlay').addEventListener('click', hideOverlayButtonHandler);
+</script>
 </body>
 </html>