Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>zodiac, by faetalize</title> | |
| <link rel="shortcut icon" href="https://upload.wikimedia.org/wikipedia/commons/f/f0/Google_Bard_logo.svg" | |
| type="image/x-icon"> | |
| <link rel="stylesheet" | |
| href="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/github-dark.css"> | |
| <script src="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/highlight.min.js"></script> | |
| </head> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,200;0,400;0,800;1,200;1,400;1,800&display=swap'); | |
| @import url('https://fonts.googleapis.com/css2?family=Product+Sans&family=Google+Sans+Display:ital@0;1&family=Google+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=Google+Sans+Text:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=Material+Symbols+Outlined&family=Space+Mono&display=swap'); | |
| @font-face { | |
| font-family: 'Material Symbols Outlined'; | |
| font-style: normal; | |
| font-weight: 400; | |
| src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v154/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHOej.woff2) format('woff2'); | |
| } | |
| .material-symbols-outlined { | |
| font-family: 'Material Symbols Outlined'; | |
| font-weight: normal; | |
| font-style: normal; | |
| font-size: 1.5rem; | |
| line-height: 1; | |
| letter-spacing: normal; | |
| text-transform: none; | |
| display: inline-block; | |
| white-space: nowrap; | |
| word-wrap: normal; | |
| direction: ltr; | |
| -webkit-font-feature-settings: 'liga'; | |
| font-feature-settings: "liga"; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| body { | |
| font-family: 'Noto Sans', sans-serif; | |
| margin: 0; | |
| } | |
| p { | |
| margin: 0; | |
| margin-bottom: 0.5rem; | |
| padding: 0; | |
| font-size: 1rem; | |
| } | |
| h1, | |
| h2, | |
| h3, | |
| ol, | |
| ul { | |
| margin: 0; | |
| } | |
| h1 { | |
| margin-bottom: 0.5rem; | |
| } | |
| a { | |
| color: #3b82f6; | |
| } | |
| input, | |
| textarea, | |
| select { | |
| border: 1px solid; | |
| padding: 0.5rem; | |
| border-radius: 0.5rem; | |
| border: none; | |
| font-family: noto sans, sans-serif; | |
| font-size: 1rem; | |
| } | |
| button:focus { | |
| outline: none; | |
| } | |
| .form { | |
| display: none; | |
| opacity: 0; | |
| flex-direction: column; | |
| width: 32rem; | |
| gap: 0.5rem; | |
| flex-grow: 1; | |
| justify-content: center; | |
| } | |
| .overlay { | |
| flex-direction: column; | |
| display: none; | |
| position: fixed; | |
| opacity: 0; | |
| top: 0; | |
| left: 0; | |
| width: 100dvw; | |
| height: 100dvh; | |
| backdrop-filter: blur(2rem); | |
| z-index: 2; | |
| justify-content: flex-start; | |
| align-items: center; | |
| } | |
| .backButton { | |
| position: absolute; | |
| top: 1rem; | |
| left: 1rem; | |
| border: none; | |
| background-color: transparent; | |
| font-size: 1.5rem; | |
| font-weight: 600; | |
| transition: all 0.2s; | |
| } | |
| #btn-hide-sidebar { | |
| display: none; | |
| } | |
| .message-container { | |
| display: flex; | |
| flex-direction: column-reverse; | |
| overflow-y: auto; | |
| gap: 1rem; | |
| padding-bottom: 2rem; | |
| flex-grow: 1; | |
| } | |
| .message-box { | |
| display: flex; | |
| position: relative; | |
| } | |
| .message { | |
| padding: 1rem; | |
| } | |
| .message-model { | |
| border-radius: 1rem; | |
| } | |
| #messageInput { | |
| height: 2.5rem; | |
| box-sizing: border-box; | |
| text-wrap: wrap; | |
| resize: none; | |
| width: 100%; | |
| padding-right: 2rem; | |
| } | |
| #messageInput::-webkit-scrollbar { | |
| height: 1rem; | |
| width: 0.5rem; | |
| } | |
| .btn-textual { | |
| background: transparent ; | |
| margin: 0; | |
| padding: 0; | |
| border: none; | |
| transition: all 0.2s; | |
| cursor: pointer; | |
| font-size: inherit; | |
| } | |
| #btn-send { | |
| position: absolute; | |
| right: 0.5rem; | |
| bottom: 0.5rem; | |
| font-size: 1.5rem; | |
| } | |
| .btn-array { | |
| display: flex; | |
| flex-direction: row; | |
| gap: 0.5rem; | |
| margin-top: 0.5rem; | |
| } | |
| .btn-array button { | |
| flex-grow: 1; | |
| } | |
| .personality-prompt { | |
| display: none; | |
| } | |
| .prompt-field { | |
| resize: vertical; | |
| height: 7rem; | |
| } | |
| .container { | |
| box-sizing: border-box; | |
| display: flex; | |
| gap: 0.5rem; | |
| padding: 1rem; | |
| width: 100dvw; | |
| height: 100dvh; | |
| } | |
| .sidebar { | |
| position: sticky; | |
| top: 1rem; | |
| display: flex; | |
| flex-direction: column; | |
| overflow-y: auto; | |
| gap: 0.5rem; | |
| padding: 1rem; | |
| width: 25rem; | |
| border-radius: 1rem; | |
| scrollbar-width: thin; | |
| height: calc(100dvh - 4rem); | |
| z-index: 1; | |
| } | |
| .sidebar-section { | |
| margin-bottom: 1rem; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.5rem; | |
| } | |
| #btn-show-sidebar { | |
| display: none; | |
| } | |
| .header { | |
| display: flex; | |
| box-sizing: border-box; | |
| align-items: center; | |
| font-size: 2rem; | |
| font-weight: 800; | |
| gap: 0.5rem; | |
| width: 100%; | |
| } | |
| .navbar { | |
| position: relative; | |
| display: flex; | |
| flex-direction: row; | |
| border-radius: 0.5rem; | |
| justify-content: space-evenly; | |
| margin-bottom: 1rem; | |
| z-index: 0; | |
| } | |
| .navbar-tab { | |
| width: 100%; | |
| padding: 0.5rem; | |
| text-align: center; | |
| z-index: 2; | |
| -webkit-tap-highlight-color: transparent; | |
| cursor: pointer; | |
| } | |
| .navbar-tab-highlight { | |
| padding: 0; | |
| margin: 0; | |
| position: absolute; | |
| border-radius: 0.5rem; | |
| transition: all 0.2s; | |
| height: 100%; | |
| z-index: 1; | |
| /* glow */ | |
| box-shadow: 0 0 1rem 0.05rem #29292a3f; | |
| } | |
| #gemini-pro-branding { | |
| font-family: Google Sans Display, sans-serif; | |
| color: #7c8a9c; | |
| font-size: 1rem; | |
| font-weight: 400; | |
| } | |
| #gemin-pro-logo { | |
| width: 2rem; | |
| height: 2rem; | |
| } | |
| .credits { | |
| margin-top: auto; | |
| display: flex; | |
| padding: 0rem 1rem 0 1rem; | |
| font-size: 0.75rem; | |
| color: #7c8a9c; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| button { | |
| border: none; | |
| background-color: #3b82f6; | |
| color: white; | |
| padding: 0.5rem; | |
| border-radius: 0.5rem; | |
| transition: all 0.2s; | |
| } | |
| #mainContent { | |
| display: flex; | |
| flex-direction: column; | |
| padding: 2rem; | |
| margin-left: auto; | |
| margin-right: auto; | |
| width: 32rem; | |
| text-align: justify; | |
| } | |
| .card-personality { | |
| box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| -webkit-box-sizing: border-box; | |
| color: #e4e4e4; | |
| background-color: black; | |
| background-size: cover; | |
| background-position: center; | |
| position: relative; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: end; | |
| padding: 1rem; | |
| border-radius: 1rem; | |
| height: 10rem; | |
| -webkit-tap-highlight-color: transparent; | |
| cursor: pointer; | |
| text-shadow: 0 0 10px #000000, 0 0 5px #181818; | |
| } | |
| .edit:hover { | |
| text-shadow: 0 0 10px #e4e4e4, 0 0 5px #dfdfdf; | |
| } | |
| .card-personality * { | |
| /* unselectable */ | |
| -webkit-user-select: none; | |
| /* Safari */ | |
| -moz-user-select: none; | |
| /* Firefox */ | |
| -ms-user-select: none; | |
| /* IE10+/Edge */ | |
| user-select: none; | |
| /* Standard */ | |
| } | |
| .card-personality input { | |
| display: none; | |
| } | |
| .btn-edit-card { | |
| /* top right corner */ | |
| position: absolute; | |
| top: 1rem; | |
| right: 1rem; | |
| color: #e4e4e4; | |
| } | |
| .btn-share-card { | |
| /* bottom right corner */ | |
| position: absolute; | |
| top: 1rem; | |
| right: 2.5rem; | |
| font-size: 1rem; | |
| color: #e4e4e4; | |
| } | |
| #btn-hide-overlay { | |
| padding: 2rem; | |
| } | |
| @media (max-width: 768px) { | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .container { | |
| padding: 0; | |
| } | |
| .message-container { | |
| padding-left: 1rem; | |
| padding-right: 1rem; | |
| } | |
| .sidebar { | |
| top: 0; | |
| height: calc(100dvh - 2rem); | |
| margin: 0; | |
| width: calc(100dvw - 2rem); | |
| position: fixed; | |
| border-radius: 0; | |
| display: none; | |
| } | |
| .navbar { | |
| position: relative; | |
| } | |
| #btn-hide-sidebar { | |
| display: block; | |
| } | |
| #mainContent { | |
| padding: 0; | |
| margin: 0; | |
| width: 100%; | |
| } | |
| #mainContent .header { | |
| padding: 2rem; | |
| } | |
| #messageInput { | |
| border-radius: 0; | |
| } | |
| #btn-show-sidebar { | |
| display: block; | |
| } | |
| } | |
| /* Light theme styles */ | |
| @media (prefers-color-scheme: light) { | |
| :focus { | |
| outline: 1px solid #8f9eb3; | |
| } | |
| body { | |
| background-color: #f0f6ff; | |
| color: #0a0a0a; | |
| } | |
| a { | |
| color: #444ed6; | |
| } | |
| .sidebar { | |
| background-color: #d2e2f7; | |
| } | |
| .navbar { | |
| background-color: rgb(176 205 246); | |
| } | |
| .navbar-tab { | |
| color: #0a0a0a; | |
| } | |
| .navbar-tab-highlight { | |
| background-color: #87b0ed; | |
| } | |
| .btn-textual:hover { | |
| text-shadow: 0 0 10px #000000; | |
| } | |
| button { | |
| background-color: #83b5f7; | |
| color: #2b3d59; | |
| } | |
| button:hover { | |
| background-color: rgb(63, 191, 255); | |
| } | |
| input, | |
| textarea, | |
| select { | |
| background-color: #f0f6ff; | |
| outline: 1px solid #8f9eb3; | |
| } | |
| input::placeholder, | |
| textarea::placeholder { | |
| color: #7c8a9c; | |
| } | |
| .message-model { | |
| background-color: #d2e2f7; | |
| } | |
| } | |
| /* Dark theme styles */ | |
| @media (prefers-color-scheme: dark) { | |
| :root { | |
| color-scheme: dark; | |
| } | |
| :focus { | |
| outline: 1px solid #73859e; | |
| } | |
| body { | |
| background-color: #151e24; | |
| color: #e4e4e4; | |
| } | |
| a { | |
| color: #92d9eb; | |
| } | |
| .sidebar { | |
| background-color: #1a2733; | |
| } | |
| .navbar { | |
| background-color: #00000047; | |
| } | |
| .navbar-tab { | |
| color: #e4e4e4; | |
| } | |
| .navbar-tab-highlight { | |
| background-color: #22486b; | |
| box-shadow: 0 0 1rem 0.05rem #29292aac; | |
| } | |
| button { | |
| background-color: #22486b; | |
| color: #c9d3ee; | |
| } | |
| button:hover { | |
| background-color: #31689c; | |
| } | |
| .btn-textual { | |
| color: #e4e4e4; | |
| } | |
| .btn-textual:hover { | |
| text-shadow: 0 0 10px #ffffff, 0 0 5px #dfdfdf; | |
| } | |
| .edit:hover { | |
| text-shadow: 0 0 10px #ffffff, 0 0 5px #dfdfdf; | |
| /* Change #00ff00 to the color you want */ | |
| } | |
| input, | |
| textarea, | |
| select { | |
| background-color: #283542; | |
| color: #e4e4e4; | |
| border: none; | |
| } | |
| input::placeholder, | |
| textarea::placeholder { | |
| color: #849caf; | |
| } | |
| .message-model { | |
| background-color: #1a2733; | |
| } | |
| } | |
| </style> | |
| <body> | |
| <div class="container"> | |
| <div class="sidebar"> | |
| <div class="header"> | |
| <button class="material-symbols-outlined btn-textual" id="btn-hide-sidebar"> | |
| arrow_back_ios_new | |
| </button> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/f/f0/Google_Bard_logo.svg" id="gemin-pro-logo"> | |
| <div id="title-div"> | |
| <div id="zodiac-branding">zodiac </div> | |
| <div id="gemini-pro-branding">powered by Gemini Pro</div> | |
| </div> | |
| </div> | |
| <div class="navbar"> | |
| <div class="navbar-tab">Personalities</div> | |
| <div class="navbar-tab">Settings</div> | |
| <div class="navbar-tab-highlight"></div> | |
| </div> | |
| <div class="sidebar-section" id="personalitySection"> | |
| <label class="card-personality" | |
| style="background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.fonearena.com/blog/wp-content/uploads/2023/12/Google-Gemini-AI-1024x577.jpg')"> | |
| <input type="radio" name="personality" value="zodiac3" checked> | |
| <div> | |
| <h3 class="personality-title">zodiac</h3> | |
| <p class="personality-description">zodiac is a cheerful assistant, always ready to help you with | |
| your tasks.</p> | |
| <p class="personality-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.</p> | |
| </div> | |
| <button class="btn-textual btn-edit-card material-symbols-outlined" | |
| id="btn-edit-personality-default">edit</button> | |
| <button class="btn-textual btn-share-card material-symbols-outlined" | |
| id="btn-share-personality-default">share</button> | |
| </label> | |
| <div class="btn-array" id="btn-array-personality-section"> | |
| <button id="btn-add-personality">Add Personality</button> | |
| <button id="btn-import-personality">Import</button> | |
| </div> | |
| </div> | |
| <div class="sidebar-section"> | |
| <input type="text" placeholder="Paste API key here" id="apiKeyInput" class="input-field"></input> | |
| <h3>Generation Settings:</h3> | |
| <label for="maxTokens">Max Output Tokens:</label> | |
| <input type="number" id="maxTokens" class="input-field" min="1" max="4000" value="1000"></input> | |
| <label for="safetySettings">Safety Settings:</label> | |
| <select id="safetySettings" class="input-field"> | |
| <option value="safe">Safe</option> | |
| <option value="moderate">Moderate</option> | |
| <option value="risky">Risky</option> | |
| </select> | |
| </div> | |
| <div class="credits"> | |
| Made by fætalize | |
| <a href="https://github.com/faetalize/zodiac">Source Code</a> | |
| </div> | |
| </div> | |
| <div id="mainContent"> | |
| <div class="header"> | |
| <button class="material-symbols-outlined btn-textual" id="btn-show-sidebar"> | |
| menu | |
| </button> | |
| </div> | |
| <div class="message-container"></div> | |
| <div class="message-box"> | |
| <textarea type="text" placeholder="Type your message here" id="messageInput" | |
| class="input-field"></textarea> | |
| <button type="submit" class="btn-textual material-symbols-outlined" id="btn-send">send</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="overlay"> | |
| <div class="header"> | |
| <button class="btn-textual" id="btn-hide-overlay">BACK</button> | |
| </div> | |
| <div class="form" id="form-add-personality"> | |
| <h1>Add Personality</h1> | |
| <label for="personalityNameInput">Personality Name:</label> | |
| <input type="text" placeholder="Personality Name" id="personalityNameInput" class="input-field"></input> | |
| <label for="personalityDescriptionInput">Personality Description:</label> | |
| <textarea id="personalityDescriptionInput" placeholder="Personality Description" | |
| class="prompt-field"></textarea> | |
| <label for="personalityImageURLInput">Personality Image URL:</label> | |
| <input type="text" placeholder="Personality Image URL" id="personalityImageURLInput" | |
| class="input-field"></input> | |
| <label for="personalityPromptInput">Prompt:</label> | |
| <textarea id="personalityPromptInput" placeholder="Personality Prompt" class="prompt-field"></textarea> | |
| <button id="btn-submit-personality">Add Personality</button> | |
| </div> | |
| <div class="form" id="form-edit-personality"> | |
| <h1>Edit Personality</h1> | |
| <label for="personalityNameInput">Personality Name:</label> | |
| <input type="text" placeholder="Personality Name" id="personalityNameInput" class="input-field"></input> | |
| <label for="personalityDescriptionInput">Personality Description:</label> | |
| <textarea id="personalityDescriptionInput" placeholder="Personality Description" | |
| class="prompt-field"></textarea> | |
| <label for="personalityImageURLInput">Personality Image URL:</label> | |
| <input type="text" placeholder="Personality Image URL" id="personalityImageURLInput" | |
| class="input-field"></input> | |
| <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> |