Spaces:

imseldrith
/

Gemini-UI

Running

App Files Files Community

imseldrith commited on Dec 27, 2023

Commit

3825b50

1 Parent(s): c79d99a

Update index.html

Browse files

Files changed (1) hide show

index.html +620 -56

index.html CHANGED Viewed

@@ -1,4 +1,3 @@
 <!DOCTYPE html>
 <html lang="en">
@@ -13,9 +12,615 @@
     <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>
-   <link rel="stylesheet" type="text/css" href="style.css">
 </head>
 <body>
     <div class="container">
         <div class="sidebar">
@@ -55,7 +660,6 @@
                 <div class="btn-array" id="btn-array-personality-section">
                     <button id="btn-add-personality">Add Personality</button>
                     <button id="btn-import-personality">Import</button>
-                    <button id="btn-save-personalities">Save</button>
                 </div>
             </div>
@@ -86,6 +690,7 @@
             </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>
@@ -169,7 +774,8 @@
         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
@@ -253,8 +859,9 @@
         const editDefaultPersonalityButton = document.querySelector("#btn-edit-personality-default");
         const submitNewPersonalityButton = document.querySelector("#btn-submit-personality");
         const updatePersonalityButton = document.querySelector("#updatePersonality");
-        const savePersonalitiesButton = document.querySelector("#btn-save-personalities");
         const sendMessageButton = document.querySelector("#btn-send");
@@ -428,48 +1035,9 @@
             closeOverlay();
         }
-        //save personalities to local storage
-        async function savePersonalities() {
-            //get array of personality cards
-            const personalityCards = document.querySelectorAll(".card-personality");
-            //create an array of personality objects
-            const personalityObjects = [];
-            personalityCards.forEach(card => {
-                const personalityObject = {
-                    name: card.querySelector(".personality-title").innerText,
-                    description: card.querySelector(".personality-description").innerText,
-                    prompt: card.querySelector(".personality-prompt").innerText,
-                    image: card.style.backgroundImage.match(/url\((.*?)\)/)[1].replace(/('|")/g, '')
-                }
-                personalityObjects.push(personalityObject);
-            })
-            //stringify the array
-            const personalityJSON = JSON.stringify(personalityObjects);
-            //save to local storage
-            localStorage.setItem("personalities", personalityJSON);
-        }
-        //load personalities from local storage
-        async function loadPersonalities() {
-            //get the json string from local storage
-            const personalityJSON = localStorage.getItem("personalities");
-            //parse the json string into an array
-            const personalityObjects = JSON.parse(personalityJSON);
-            //insert each personality into the DOM
-            personalityObjects.forEach(personalityObject => {
-                insertPersonality(personalityObject);
-            })
-        }
         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;
@@ -478,7 +1046,7 @@
             //chat history
-            const chatHistory = [];
             //get chat history from message container
             const messageElements = messageContainer.querySelectorAll(".message");
             messageElements.forEach(element => {
@@ -564,10 +1132,16 @@
             //save api key to local storage
             localStorage.setItem("API_KEY", API_KEY.value);
-            localStorage.setItem("MAX_TOKENS",maxTokens.value);
         }
         const messageInput = document.querySelector("#messageInput");
@@ -613,16 +1187,6 @@
         sendMessageButton.addEventListener("click", run);
-        //load local storage if available
-        if (localStorage.getItem("personalities")) {
-            loadPersonalities();
-        }
-        //save personalities to local storage when closing the window
-        window.addEventListener("beforeunload", () => {
-            savePersonalities();
-        })
         // ...
     </script>

 <!DOCTYPE html>
 <html lang="en">
     <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;
+    }
+    #messageInput::-webkit-scrollbar {
+    height: 2.5rem !important;
+    width: 0.5rem !important;
+    }
+    .btn-textual {
+        background: transparent !important;
+        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;
+        }
+    }
+    #btn-reset-chat {
+        background-color: #1a2733;
+        color: #e4e4e4;
+        right: 4rem;
+        margin-right: 5px;
+        transition: all 0.2s;
+        cursor: pointer;
+    }
+    #btn-reset-chat:hover {
+        background-color: #313131;
+    }
+</style>
 <body>
     <div class="container">
         <div class="sidebar">
                 <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>
             <div class="message-container"></div>
             <div class="message-box">
+                <button class="material-symbols-outlined" id="btn-reset-chat">rotate_left</button>
                 <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>
         const API_KEY = document.querySelector("#apiKeyInput");
         const maxTokens = document.querySelector("#maxTokens");
         API_KEY.value = localStorage.getItem("API_KEY");
+        maxTokens.value = localStorage.getItem("maxTokens");
+        if (maxTokens.value == "") maxTokens.value = 1000;
         //function to hide element smoothly then setting display none after the transition time elapsed
         const editDefaultPersonalityButton = document.querySelector("#btn-edit-personality-default");
         const submitNewPersonalityButton = document.querySelector("#btn-submit-personality");
         const updatePersonalityButton = document.querySelector("#updatePersonality");
+        const resetChatButton = document.querySelector("#btn-reset-chat");
+        const messageContainer = document.querySelector(".message-container");
         const sendMessageButton = document.querySelector("#btn-send");
             closeOverlay();
         }
         async function run() {
             const msg = document.querySelector("#messageInput");
             const msgText = msg.value;
             const maxTokens = document.querySelector("#maxTokens");
             const API_KEY = document.querySelector("#apiKeyInput");
             const selectedPersonalityTitle = document.querySelector("input[name='personality']:checked + div .personality-title").innerText;
             //chat history
+            let chatHistory = [];
             //get chat history from message container
             const messageElements = messageContainer.querySelectorAll(".message");
             messageElements.forEach(element => {
             //save api key to local storage
             localStorage.setItem("API_KEY", API_KEY.value);
+            localStorage.setItem("maxTokens",maxTokens.value);
         }
+        //reset chat button (async)
+        resetChatButton.addEventListener("click", () => {
+                //remove all messages
+                messageContainer.innerHTML = "";
+        });
         const messageInput = document.querySelector("#messageInput");
         sendMessageButton.addEventListener("click", run);
         // ...
     </script>