Spaces:

imseldrith
/

Gemini-UI

Running

App Files Files Community

imseldrith commited on Dec 28, 2023

Commit

aadecf2

1 Parent(s): 6802808

Update index.html

Browse files

Files changed (1) hide show

index.html +58 -656

index.html CHANGED Viewed

@@ -1,7 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -11,616 +10,12 @@
     <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">
@@ -640,41 +35,44 @@
                 <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
@@ -805,10 +203,10 @@
         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]) {
@@ -963,7 +361,7 @@
         }
-        function insertPersonality(personalityJSON){
             const personalitySection = document.querySelector("#personalitySection");
             const personalitySectionActions = document.querySelector("#btn-array-personality-section");
@@ -1035,17 +433,24 @@
             closeOverlay();
         }
         async function run() {
-            document.getElementById('messageInput').style.height = "2.5rem";
             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;
             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
             let chatHistory = [];
             //get chat history from message container
@@ -1091,10 +496,7 @@
                     ...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");
@@ -1124,23 +526,23 @@
             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("maxTokens",maxTokens.value);
         }
         //reset chat button (async)
         resetChatButton.addEventListener("click", () => {
-                //remove all messages
-                messageContainer.innerHTML = "";
         });

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet"
         href="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/github-dark.css">
+    <link rel="stylesheet" href="style.css">
     <script src="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/highlight.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/3.0.6/purify.min.js"></script>
 </head>
 <body>
     <div class="container">
         <div class="sidebar">
                 <div class="navbar-tab-highlight"></div>
             </div>
+            <div id="sidebar-content">
+                <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>
             <div class="credits">
                 Made by fætalize
         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]) {
         }
+        function insertPersonality(personalityJSON) {
             const personalitySection = document.querySelector("#personalitySection");
             const personalitySectionActions = document.querySelector("#btn-array-personality-section");
             closeOverlay();
         }
+        function getSanitized(string){
+            return DOMPurify.sanitize(string.replace(/</g, "&lt;").replace(/>/g, "&gt;").trim());
+        }
         async function run() {
             const msg = document.querySelector("#messageInput");
+            let msgText = getSanitized(msg.value);
+            msg.value = "";
+            document.getElementById('messageInput').style.height = "2.5rem"; //This will reset messageInput box to its normal size.
+            if (msgText == "") {
+                return;
+            }
             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
             let chatHistory = [];
             //get chat history from message container
                     ...chatHistory
                 ]
             })
             //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");
             let rawText = "";
             for await (const chunk of result.stream) {
                 rawText += chunk.text();
+                replyText.innerHTML = DOMPurify.sanitize(marked.parse(rawText));
                 void replyText.offsetHeight; // Force reflow
                 hljs.highlightAll();
             }
             //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 = "";
         });