faetalize / zodiac

A ⚡lightweight⚡ frontend for Google's Gemini Pro.

!!!! THIS PROJECT IS STILL ACTIVE - I AM JUST TAKING A SMALL BREAK !!!!!

zodiac

A frontend built to interface with Google's Gemini Pro, built with vanilla JS. Get your API key here: Google AI Suite

How to use?

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

Sponsor my development

You may support me finantially here: LiberaPay or Patreon 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)

zodiac's Issues

messages should be sanitized

currently, if you send html tags, they will be rendered and not escaped. that is a problem. one could include <script> tags or other harmful inputs and they will be added to the document

chat input overhaul

Currently, it's hacky and hardcoded. It doesnt increase in height when the text wraps. Setting the height to scrollheight leads to uneven uncentered text.

if the user messages twice then the app crashes

Uncaught (in promise) Error: [400 ] Please ensure that multiturn requests ends with a user role or a function response.
at E (index.mjs:66:1)
at async A (index.mjs:99:1)

Add "clear messages" button

Allow the user to start anew without refreshing the page.

CORS Policy Error When Loading Local JS File in HTML

Description

During local development, when trying to load a JavaScript file from an HTML file, I encountered a CORS policy error. The error message is as follows:

Access to script at 'file:///C:/Users/Administrator/Desktop/zodiac-dev/zodiac-dev/main.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.

This issue prevents the JavaScript file from loading properly, which affects the functionality of the page.

Steps to Reproduce

Place the HTML file and JavaScript file in a local folder.
Open the HTML file by double-clicking it or directly opening the file path file:///C:/Users/Administrator/Desktop/zodiac-dev/zodiac-dev/zodiac.html in the browser.
Observe the browser console to find the aforementioned CORS error.

Expected Behavior

The HTML file should be able to load and execute the local JavaScript file without interference from CORS policies.

Actual Behavior

The browser blocks the loading of the JavaScript file, throwing a CORS policy error.

Possible Solutions

It is recommended to set up a local development server, such as using Python's HTTP server module, or host the files through a web server software like Apache or Nginx. This can prevent CORS issues associated with opening files directly from the file system.

Environment Information

Operating System: Windows 10
Browser: Google Chrome Version 125.0.6422.142
File Path: C:/Users/Administrator/Desktop/zodiac-dev/zodiac-dev

empty inputs are accepted

Implement a check for empty textarea value and trigger an alert, early return

split js from template

This project might benefit from decoupling the markup from the js, it grew too big and is somewhat unreadable.
a one file bundle can still be provided

Should we expand the scope of this project beyond Google's Gemini?

The features of this UI could be used to interact with other LLMs, such as GPT, and self hosted ones.
Is that a feature you'd like to see?

Add a "regenerate reply" button

Markup:

• Add a button in the bottom right or left of the message with a refresh icon

Code:

• Pop the messages starting from the message to regenerate, and call the "run()" function with the last message as a parameter
• add an event listener

Considerations

• a refactoring of the run function will be required, so it can be used on any input

  async function run(input){
  //..
  }
  //..
  //changes to the event handler
  sendMessageButton.addEventListener("click", () => {
      run(...);
  });

That API is real.

add personality overlay not optimized for mobile

Approach to fix:

• Add media query or
• Change the hardcoded values

Personalities Save

Personalities dont save after refresh like api key and token do

You should add internet to it

https://abhaykoul-webscout1.hf.space/search this API URL will search 10 results from web if limit is not set, if you want you can you this API in your code

const https = require('https');
const readline = require('readline').createInterface({
    input: process.stdin,
    output: process.stdout
});

readline.question('Enter your search query: ', (query) => {
    const url = "https://abhaykoul-webscout1.hf.space/search";
    const payload = JSON.stringify({ query: query, limit:  5 }); // Set limit to  5

    const options = {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Content-Length': Buffer.byteLength(payload)
        }
    };

    const req = https.request(url, options, (res) => {
        let data = '';

        res.on('data', (chunk) => {
            data += chunk;
        });

        res.on('end', () => {
            try {
                const parsedData = JSON.parse(data);
                console.log(parsedData);
                // Process the data here
            } catch (e) {
                console.error('Error parsing JSON:', e);
            }
        });
    });

    req.on('error', (e) => {
        console.error('There was a problem with the request:', e.message);
    });

    req.write(payload);
    req.end();

    readline.close();
});