Merge pull request #32 from faetalize/dev

v0.6 PR
faetalize · Apr 16, 2024 · 519a46b · 519a46b
2 parents 91ee02a + 1707614
commit 519a46b
Show file tree

Hide file tree

Showing 7 changed files with 153 additions and 18 deletions.
diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
@@ -0,0 +1,14 @@
+# These are supported funding model platforms
+
+github: faetalize # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
+patreon: faetalize # Replace with a single Patreon username
+open_collective: # Replace with a single Open Collective username
+ko_fi: # Replace with a single Ko-fi username
+tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+liberapay: faetalize # Replace with a single Liberapay username
+issuehunt: # Replace with a single IssueHunt username
+lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
+polar: # Replace with a single Polar username
+buy_me_a_coffee: # Replace with a single Buy Me a Coffee username
+custom: https://www.paypal.com/paypalme/alskdjaoiwdawwfq # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']
diff --git a/PayPalSansBig-Medium.ttf b/PayPalSansBig-Medium.ttf
diff --git a/README.md b/README.md
@@ -2,8 +2,10 @@
 A frontend built to interface with Google's Gemini Pro, built with vanilla JS. Get your API key here: [Google AI Suite](https://makersuite.google.com/app/apikey)
 
 ![image](https://github.com/faetalize/zodiac/assets/134988598/914ff978-2611-4e9f-b00f-55966b238dcb)
-
 ## How to use?
-Download `zodiac.html`, and open it in a browser of your choice. **That's it.**
+Download the repo, and open `zodiac.html` in a browser of your choice. **That's it.**
 
 *Alternatively, here's an online version you can try if you would rather not locally run it:* [zodiac online](https://faetalize.github.io/zodiac/zodiac.html)
+## Sponsor my development
+You may support me finantially here: [LiberaPay](https://liberapay.com/faetalize) or [Patreon](https://patreon.com/faetalize)
+I have zero plans to ever monetize my projects, no matter how popular they get. All features will be available to all. Your donations will be used in order to fund my technical needs (IDE subscriptions, testing products for RnD, etc)
diff --git a/gt-america-standard-regular.ttf b/gt-america-standard-regular.ttf
diff --git a/main.js b/main.js
@@ -3,11 +3,12 @@ import { GoogleGenerativeAI } from "https://esm.run/@google/generative-ai";
 import { HarmBlockThreshold, HarmCategory } from "https://esm.run/@google/generative-ai";
 
 
-const version = "0.5";
+const version = "0.6";
 
 //inputs
 const ApiKeyInput = document.querySelector("#apiKeyInput");
 const maxTokensInput = document.querySelector("#maxTokens");
+const temperatureInput = document.querySelector("#temperature");
 const messageInput = document.querySelector("#messageInput");
 
 //forms
@@ -41,15 +42,22 @@ const chatHistorySection = document.querySelector("#chatHistorySection");
 const tabs = document.getElementsByClassName("navbar-tab");
 const tabHighlight = document.querySelector(".navbar-tab-highlight");
 
+//outputs
+const temperatureLabel = document.querySelector("#label-temperature");
+
 //misc
 const badge = document.querySelector("#btn-whatsnew");
 
 //-------------------------------
 
 //load api key from local storage into input field
 ApiKeyInput.value = localStorage.getItem("API_KEY");
-maxTokensInput.value = localStorage.getItem("maxTokens");
-if (maxTokensInput.value == "") maxTokensInput.value = 1000;
+if (!localStorage.getItem("maxTokens")) maxTokensInput.value = 1000;
+
+//set initial temperature
+temperatureInput.value = localStorage.getItem("TEMPERATURE");
+if (!localStorage.getItem("TEMPERATURE")) temperatureInput.value = 70;
+temperatureLabel.textContent = temperatureInput.value/100;
 
 //define AI settings
 const safetySettings = [
@@ -173,6 +181,10 @@ submitNewPersonalityButton.addEventListener("click", submitNewPersonality);
 
 submitPersonalityEditButton.addEventListener("click", () => { submitPersonalityEdit(personalityToEditIndex) });
 
+temperatureInput.addEventListener("input", () => {
+    temperatureLabel.textContent = temperatureInput.value/100;
+});
+
 sendMessageButton.addEventListener("click", async () => {
     try {
         await run();
@@ -325,7 +337,6 @@ async function getAllChatIdentifiers() {
                 identifiers.push({ id: chat.id, title: chat.title });
             }
         )
-        identifiers.reverse();
         return identifiers;
     } catch (error) {
         //to be implemented
@@ -754,7 +765,7 @@ async function run() {
     //model msg handling
     const generationConfig = {
         maxOutputTokens: maxTokensInput.value,
-        temperature: 0.9
+        temperature: temperatureInput.value/100
     };
     const chat = await model.startChat({
         generationConfig, safetySettings,
@@ -781,6 +792,7 @@ async function run() {
     //save api key to local storage
     localStorage.setItem("API_KEY", ApiKeyInput.value);
     localStorage.setItem("maxTokens", maxTokensInput.value);
+    localStorage.setItem("TEMPERATURE", temperatureInput.value);
 }
 
 //-------------------------------
diff --git a/ubuntu-bold-italic-webfont.ttf b/ubuntu-bold-italic-webfont.ttf
diff --git a/zodiac.html b/zodiac.html
@@ -109,6 +109,12 @@
         justify-content: center;
     }
 
+    .slider{
+        margin: 0;
+        padding: 0;
+        flex-grow:1;
+    }
+
     .overlay {
         flex-direction: column;
         display: none;
@@ -216,6 +222,79 @@
         background-color: #00000024;
     }
 
+    @font-face {
+        font-family: 'gt-america';
+        src: url("./gt-america-standard-regular.ttf");
+    }
+
+    @font-face {
+        font-family: 'ubuntu-webfont';
+        src: url("./ubuntu-bold-italic-webfont.ttf");
+    }
+
+    @font-face {
+        font-family: 'paypal-sans';
+        src: url("./PayPalSansBig-Medium.ttf")
+    }
+
+    .card {
+        box-sizing: border-box;
+        border-radius: 0.5rem;
+        text-align: center;
+        text-decoration: none;
+        padding: 1rem;
+        transition: background-color 0.25s ease-out;
+    }
+
+    .card-patreon {
+        background: #f96854;
+        color: #69160b;
+    }
+
+    .card-patreon:hover {
+        background: #d35747;
+    }
+
+    .patreon-logo {
+        font-family: 'gt-america';
+        font-weight: bolder;
+        color: #052d49;
+    }
+
+    .card-paypal {
+        background: white;
+        color: rgb(87, 87, 87);
+    }
+
+    .card-paypal:hover {
+        background: rgb(231, 231, 231);
+    }
+
+    .paypal-logo1 {
+        font-family: 'paypal-sans';
+        font-style: italic;
+        color: #003087;
+    }
+
+    .paypal-logo2 {
+        font-family: 'paypal-sans';
+        font-style: italic;
+        color: #009cde;
+    }
+
+    .card-liberapay {
+        background: #f6c915;
+        color: #816908;
+    }
+
+    .card-liberapay:hover {
+        background: #dab213;
+    }
+
+    .liberapay-logo {
+        font-family: 'ubuntu-webfont';
+        color: #1a171b;
+    }
 
     .card-personality {
         .btn-textual {
@@ -245,6 +324,7 @@
         }
     }
 
+
     .badge {
         justify-self: end;
         padding: 0.5rem;
@@ -256,7 +336,7 @@
     }
 
     .title-chat {
-    flex-grow: 1;
+        flex-grow: 1;
         text-wrap: nowrap;
         overflow-x: hidden;
     }
@@ -276,6 +356,17 @@
         flex: 1;
     }
 
+    .btn-array-vertical {
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+
+        * {
+            flex-grow: 1;
+        }
+    }
+
+
     .personality-prompt {
         display: none;
     }
@@ -300,7 +391,7 @@
     .sidebar {
         position: sticky;
         top: 1rem;
-
+        flex-shrink: 0;
         display: flex;
         flex-direction: column;
         gap: 0.5rem;
@@ -428,6 +519,7 @@
 
     #mainContent {
         display: flex;
+        flex-shrink: 0;
         flex-direction: column;
         padding: 2rem;
         margin-left: auto;
@@ -515,7 +607,7 @@
 
 
 
-    @media (max-width: 768px) {
+    @media (max-width: 1032px) {
         body {
             margin: 0;
             padding: 0;
@@ -755,12 +847,11 @@
                 <div class="navbar-tab">Settings</div>
                 <div class="navbar-tab-highlight"></div>
             </div>
-
             <div id="sidebar-content">
                 <div class="sidebar-section">
                     <div class="btn-array">
-                        <button id="btn-new-chat">New Chat</button>
-                        <button id="btn-reset-chat">Delete All Chats</button>
+                        <button id="btn-new-chat">New</button>
+                        <button id="btn-reset-chat">Clear All</button>
                     </div>
 
 
@@ -790,14 +881,16 @@ <h3 class="personality-title">zodiac</h3>
                     </label>
                     <div id="personalitiesDiv"></div>
                     <div class="btn-array" id="btn-array-personality-section">
-                        <button id="btn-add-personality">Add Personality</button>
+                        <button id="btn-add-personality">Add</button>
                         <button id="btn-import-personality">Import</button>
                         <button id="btn-clearall-personality">Clear All</button>
                     </div>
                 </div>
 
                 <div class="sidebar-section">
-                    <h3>API Key</h3>
+                    <span>
+                        <h3>API Key</h3>
+                    </span>
                     <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>
@@ -808,6 +901,20 @@ <h3>Generation Settings</h3>
                         <option value="moderate">Moderate</option>
                         <option value="risky">Risky</option>
                     </select>
+                    <label for="temperature">Temperature</label>
+                    <div class="btn-array">
+                        <input type="range" min="20" max="200" id="temperature" class="slider">
+                        <label id="label-temperature">0</label>
+                    </div>
+                    <h3>Donate</h3>
+                    <div class="btn-array-vertical">
+                        <a href="https://patreon.com/faetalize" target="_blank" rel="noopener noreferrer" class="card card-patreon">Sponsor me on <span
+                                class="patreon-logo">PATREON</span></a>
+                        <a href="https://liberapay.com/faetalize" target="_blank" rel="noopener noreferrer" class="card card-liberapay">Sponsor me on <span
+                                class="liberapay-logo">liberapay</span></a>
+                        <a href="https://www.paypal.com/paypalme/alskdjaoiwdawwfq" target="_blank" rel="noopener noreferrer" class="card card-paypal">Donate once
+                            on <span class="paypal-logo1">Pay</span><span class="paypal-logo2">Pal</span></a>
+                    </div>
                 </div>
             </div>
 
@@ -871,9 +978,9 @@ <h1>Edit Personality</h1>
         <div id="whats-new">
             <h1 id="header-version">What's New in </h1>
             <ul id="changelog">
-                <li>Fixed Bug where sending two messages in a row leads to crash</li>
-                <li>NEW: chat history feature implementation</li>
-                <li>stability improvements</li>
+                <li>NEW: temperature is now adjustable, can range from 0.1 to 2 (numbers above 1.2 tend to cause incredibly creative hallucinations, use at your own risk)</li>
+                <li>added some links for ppl wishing to financially contribute with donations</li>
+                <li>more stability improvements</li>
             </ul>
         </div>
     </div>