Removed subscription. Changed the help and welcome page

This commit is contained in:
Adrien Bouvais 2024-07-15 11:54:48 +02:00
parent 0355cf374e
commit 6c595f6b17
5 changed files with 556 additions and 494 deletions

View File

@ -419,6 +419,7 @@ func generateTermAndServiceChatHTML() string {
<h2>7. Data Privacy</h2> <h2>7. Data Privacy</h2>
<p>- We are not responsible for any data leaks or breaches that may occur. Users are advised to use the App at their own risk.</p> <p>- We are not responsible for any data leaks or breaches that may occur. Users are advised to use the App at their own risk.</p>
<p>- We do not store any personal data unless explicitly stated otherwise.</p> <p>- We do not store any personal data unless explicitly stated otherwise.</p>
<p>- Data includes messages, conversations, usage, keys, email, name, avatar.</p>
<h2>8. Changes to the Terms</h2> <h2>8. Changes to the Terms</h2>
<p>We reserve the right to modify these Terms at any time. Any changes will be effective immediately upon posting the updated Terms on our website or within the App. Your continued use of the App after any such changes constitutes your acceptance of the new Terms.</p> <p>We reserve the right to modify these Terms at any time. Any changes will be effective immediately upon posting the updated Terms on our website or within the App. Your continued use of the App after any such changes constitutes your acceptance of the new Terms.</p>

View File

@ -84,6 +84,9 @@ func CreateNewStripeCustomer(name string, email string) string {
} }
func IsCurrentUserSubscribed(c *fiber.Ctx) (bool, bool) { func IsCurrentUserSubscribed(c *fiber.Ctx) (bool, bool) {
// Everybody is premium for now
return true, false
var user User var user User
err := edgeGlobalClient.WithGlobals(map[string]interface{}{"ext::auth::client_token": c.Cookies("jade-edgedb-auth-token")}).QuerySingle(edgeCtx, "SELECT global currentUser { stripe_id } LIMIT 1;", &user) err := edgeGlobalClient.WithGlobals(map[string]interface{}{"ext::auth::client_token": c.Cookies("jade-edgedb-auth-token")}).QuerySingle(edgeCtx, "SELECT global currentUser { stripe_id } LIMIT 1;", &user)
if err != nil { if err != nil {

View File

@ -1,95 +1,99 @@
<h1>JADE: The First Multi-Model Chatbot</h1>
<p>JADE was built with simplicity in mind. The goal is to have a minimalist chatbot that supports all models without
unnecessary features like importing files or images. This focus on simplicity allows us to improve how we use AI
chatbots in other ways.</p>
<p>One of my main concerns was the variety of models available, each excelling in different areas. Using all of them can
be impractical and very expensive.</p>
<h2>Multi-Models</h2>
<p>To address this, I created the first Multi-Model chatbot. The idea is to use multiple models within the same
conversation. Here are the key points:</p>
<ol>
<li>When asking a question, you can query multiple models and compare their responses to choose the best one.</li>
<li>The selected response can be used as the basis for the next message across all models. For example, a response
from GPT-4 can be used by Claude Haiku in the next interaction.</li>
</ol>
<h2>API Keys</h2> <h2>API Keys</h2>
<p>To use JADE, you need to sign up for an API key to providers. There is 5 providers available:</p> <p>
<ul> To use JADE, you need to sign up for an API key. You can enter an API key in
<li>OpenAI</li> the settings menu. Once enter you get access to all models from this provider.
<li>Anthropic</li> </p>
<li>Mistral</li> <a
<li>Groq</li> class="button is-small is-primary"
<li>Google</li> href="https://openai.com/index/openai-api/"
<li>Custom endpoint (premium)</li> target="_blank"
<li>GooseAI (coming soon)</li> >
</ul> Get OpenAI API key
<p>You can enter an API key in the settings menu. One enter you get access to all models from this provider. Check the </a>
appendix for more details about available models.</p> <a
class="button is-small is-primary"
<h2>Bots</h2> href="https://console.anthropic.com/"
<p>Once you enter an API key, you gain access to all models from that provider. In the Bots menu (next to the send target="_blank"
button), you'll find a list of all your Bots.</p> >
<p>To create a new bot, click the "+" button, enter a name and a model, and optionally set a temperature and a system Get Anthropic API key
prompt. Once created, you can select a bot by clicking on it and reorder it by dragging. Hold SHIFT and click to </a>
select multiple bots. You can delete selected bots by clicking the trash can icon.</p> <a
class="button is-small is-primary"
href="https://console.mistral.ai/"
target="_blank"
>
Get Mistral API key
</a>
<a
class="button is-small is-primary"
href="https://console.groq.com/"
target="_blank"
>
Get Groq API key
</a>
<a
class="button is-small is-primary"
href="https://aistudio.google.com/app/apikey"
target="_blank"
>
Get Google API key
</a>
<a
class="button is-small is-primary"
href="https://docs.perplexity.ai/docs/getting-started"
target="_blank"
>
Get Perplexity API key
</a>
<a
class="button is-small is-primary"
href="https://fireworks.ai/login"
target="_blank"
>
Get Fireworks API key
</a>
<h2>Conversations</h2> <h2>Conversations</h2>
<p>A conversation is a list of messages. A Default conversation is created when you first sign in. You can create a new <p>
conversation by clicking the "+" button and delete one by clicking the trash can icon. The Default conversation A conversation is a list of messages. A Default conversation is created when
cannot be deleted but can be renamed.</p> you first sign in. You can create a new conversation by clicking the "+"
button and delete one by clicking the trash can icon. The Default conversation
cannot be deleted but can be renamed.
</p>
<h2>Bots</h2>
<p>
In the Bot menu (next to the send button), you'll find a list of all your
Bots.
</p>
<p>
To create a new bot, click the "+" button, enter a name and a model, and
optionally set a temperature and a system prompt. Once created, you can select
a bot by clicking on it and reorder it by dragging. Hold SHIFT and click to
select multiple bots. You can delete selected bots by clicking the trash can
icon.
</p>
<h2>Multi-Models</h2>
<ol>
<li>
When asking a question, you can query multiple models and compare their
responses to choose the best one.
</li>
<li>
The selected response can be used as the basis for the next message across
all models. For example, a response from GPT-4 can be used by Claude Haiku
in the next interaction.
</li>
</ol>
<h2>Usage</h2> <h2>Usage</h2>
<p>In the Usage menu, you can see the usage of your account, including the number of messages sent and received and the <p>
associated API costs.</p> In the Usage menu, you can see the usage of your account, including the number
of messages sent and received and the associated API costs.
<h2>Appendix</h2> </p>
<p>The following is a list of available models for each provider:</p>
<ul> <p>
<li>OpenAI: You can contact me at adrien.bouvais@bouvai.com if you want to add a new
<ul> provider or if you have any questions.
<li>gpt-3.5-turbo</li>
<li>gpt-4</li>
<li>gpt-4-turbo</li>
<li>gpt-4o</li>
</ul>
</li>
<li>Anthropic:
<ul>
<li>claude-3-haiku-20240307</li>
<li>claude-3-sonnet-20240229</li>
<li>claude-3-opus-20240229</li>
</ul>
</li>
<li>Mistral:
<ul>
<li>open-mistral-7b</li>
<li>open-mixtral-8x7b</li>
<li>open-mixtral-8x22b</li>
<li>mistral-small-latest</li>
<li>mistral-large-latest</li>
<li>codestral-latest</li>
</ul>
</li>
<li>Groq:
<ul>
<li>llama3-8b-8192</li>
<li>llama3-70b-8192</li>
<li>gemma-7b-it</li>
<li>mixtral-8x7b-32768</li>
</ul>
</li>
<li>Google:
<ul>
<li>gemini-1.5-pro</li>
<li>gemini-1.5-flash</li>
<li>gemini-1.0-pro</li>
</ul>
</li>
<li>Inference Endpoints (More custom to come)</li>
</ul>
<p>You can contact me at adrien.bouvais.pro@gmail.com if you want to add a new provider or if you have any questions.
</p> </p>

View File

@ -110,6 +110,7 @@
</form> </form>
<p id="api-keys-status"></p> <p id="api-keys-status"></p>
</div> </div>
<!-- Removed subscribtion for now
{% if isBasic or isPremium %} {% if isBasic or isPremium %}
<a class="button is-small mt-1" href="{{ StripeSubLink }}" target="_blank"> <a class="button is-small mt-1" href="{{ StripeSubLink }}" target="_blank">
<span class="icon is-small" {% if isPremium %}style="color: #b00202" {%else%}style="color: #126d0f" <span class="icon is-small" {% if isPremium %}style="color: #b00202" {%else%}style="color: #126d0f"
@ -127,6 +128,7 @@
<span>Subscribe to JADE</span> <span>Subscribe to JADE</span>
</a> </a>
{% endif %} {% endif %}
-->
<a class="button is-small mt-1" hx-get="/generateTermAndService" hx-target="#chat-container" <a class="button is-small mt-1" hx-get="/generateTermAndService" hx-target="#chat-container"
hx-swap="outerHTML" hx-trigger="click"> hx-swap="outerHTML" hx-trigger="click">
<span class="icon is-small"> <span class="icon is-small">

View File

@ -1,120 +1,165 @@
<h1 class="title is-1">JADE: The First Multi-Model Chatbot</h1> <h1 class="title is-1">JADE: Simple Multi-Model Chatbot</h1>
<br><br> <br /><br />
<p>The world of Large Language Models (LLMs) is vast and exciting, with each model having unique strengths and <p>
weaknesses. However, this variety presents a challenge: using all available LLMs is practically impossible due to I often use LLMs and quickly found myself asking GPT4, Gemini and Claude the
cost and complexity. Wouldn't it be incredible to have an easy way to experiment with different models, compare same question. I wanted to be able to ask the same question to multiple
their responses, and even choose the best model for a specific task?</p> models, compare their answers and pick the best one.
</p>
<p>This is precisely why JADE was built. With a focus on simplicity, JADE eliminates unnecessary features like file or <p>
image uploads, allowing you to interact with a variety of LLMs. This streamlined approach unlocks the So I built a simple chatbot that use different LLM APIs. You can create bots
potential to compare models, leverage their individual strengths, and even mitigate biases through multi-message with a specific model and prompt. You can select as many bots to answer a
conversations.</p> question. You can then compare the answers and choose the best one. You can
continue the conversation with the best answer, meaning using answer from one
model to ask another model.
</p>
<h2>Multi-Models</h2> <h2>Multi-Models</h2>
<p>JADE is the first Multi-Model chatbot. The idea is to use multiple models within the same conversation. Here are the <p>
key points:</p> JADE a simple Multi-Model chatbot. The idea is to use multiple models within
the same conversation. Here are the key points:
</p>
<ol> <ol>
<li>When asking a question, you can query multiple models and compare their responses to choose the best one.</li> <li>
<li>The selected response can be used as the basis for the next message across all models.</li> When asking a question, you can query multiple models and compare their
responses to choose the best one.
</li>
<li>
The selected response can be used for the next message across all models.
</li>
</ol> </ol>
<p>For example, a response from GPT-4 Omni can be used by Claude Haiku in the next interaction.</p> <p>For example, a response from GPT-4 Omni can be used by Claude Haiku.</p>
<p>This approach offers several benefits. First, it ensures you always have access to the best possible response by
leveraging the strengths of different models. Second, it provides a more comprehensive understanding of a topic by
considering various perspectives. Finally, using responses from one model as context for another can lead to more
engaging and insightful conversations.</p>
<p>
I am using the app myself for months now and it's been a great experience at
minimum price (around 4$/month) accross all APIs. The app itself is totally
free to use for now, I may add a paid and free tier with message limits in the
future. But I aim at like 1-3$ per month.
</p>
<a class="button is-primary mt-2 mb-2" href="/signin"> <a class="button is-primary mt-2 mb-2" href="/signin">
Try JADE now for free! Try JADE now for free!
</a> </a>
<br><br> <br /><br />
<h2>More information</h2> <h2>More information</h2>
<ul> <ul>
<li> <li>
<h3>Get access to all models.<button class="button ml-2 is-small is-primary is-outlined" <h3>
onclick="toggleDetails('all-models-details')"> Get access to all models.<button
class="button ml-2 is-small is-primary is-outlined"
onclick="toggleDetails('all-models-details')"
>
<span class="icon is-small"> <span class="icon is-small">
<i class="fa-solid fa-info"></i> <i class="fa-solid fa-info"></i>
</span> </span>
</button></h3> </button>
<p id="all-models-details" style="display:none;">With JADE, you can easily switch between models like GPT 3.5 or </h3>
4o, Gemini, Llama, Mistral, Claude, and more. Even custom endpoint. <p id="all-models-details" style="display: none">
<br><br>This means you can choose the best model for your specific needs, whether it's for general With JADE, you can easily switch between models like GPT 3.5 or 4o,
knowledge, creative writing, or technical expertise. Having access to multiple models allows you to take Gemini, Llama, Mistral, Claude, and more. Even custom endpoint.
advantage of their unique strengths and <br /><br />This means you can choose the best model for your specific
weaknesses, needs, whether it's for general knowledge, creative writing, or technical
ensuring you get the most accurate and relevant responses. (See all models available in the last expertise. Having access to multiple models allows you to take advantage
section)<br><br> of their unique strengths and weaknesses, ensuring you get the most
accurate and relevant responses. (See all models available in the last
section)<br /><br />
</p> </p>
</li> </li>
<li> <li>
<h3>Get the best answer from multiple models.<button class="button ml-2 is-small is-primary is-outlined" <h3>
onclick="toggleDetails('multi-models-details')"> Get the best answer from multiple models.<button
class="button ml-2 is-small is-primary is-outlined"
onclick="toggleDetails('multi-models-details')"
>
<span class="icon is-small"> <span class="icon is-small">
<i class="fa-solid fa-info"></i> <i class="fa-solid fa-info"></i>
</span> </span>
</button></h3> </button>
<p id="multi-models-details" style="display:none;">You can ask a question and receive responses from several </h3>
models at once, enabling <p id="multi-models-details" style="display: none">
you to compare their answers and choose the most suitable one. <br><br>This feature is particularly useful You can ask a question and receive responses from several models at once,
for enabling you to compare their answers and choose the most suitable one.
complex queries where different models might offer unique insights or solutions.<br><br></p> <br /><br />This feature is particularly useful for complex queries where
different models might offer unique insights or solutions.<br /><br />
</p>
</li> </li>
<li> <li>
<h3>Even from the same model.<button class="button ml-2 is-small is-primary is-outlined" <h3>
onclick="toggleDetails('same-models-details')"> Even from the same model.<button
class="button ml-2 is-small is-primary is-outlined"
onclick="toggleDetails('same-models-details')"
>
<span class="icon is-small"> <span class="icon is-small">
<i class="fa-solid fa-info"></i> <i class="fa-solid fa-info"></i>
</span> </span>
</button></h3> </button>
<p id="same-models-details" style="display:none;">The core feature of JADE are the bots. Each bot have </h3>
a name, model, <p id="same-models-details" style="display: none">
temperature and system prompt. <br><br>You can create as many bot as you want and select as many to answer The core feature of JADE are the bots. Each bot have a name, model,
each temperature and system prompt. <br /><br />You can create as many bot as
question. An example is creating the same model that reponse in different language.<br><br></p> you want and select as many to answer each question. An example is
creating the same model that reponse in different language.<br /><br />
</p>
</li> </li>
<li> <li>
<h3>Reduce Hallucination.<button class="button is-small ml-2 is-primary is-outlined" <h3>
onclick="toggleDetails('reduce-hallucination-details')"><span class="icon is-small"> Reduce Hallucination.<button
<i class="fa-solid fa-info"></i> class="button is-small ml-2 is-primary is-outlined"
</span> onclick="toggleDetails('reduce-hallucination-details')"
</button></h3> >
<p id="reduce-hallucination-details" style="display:none;">AI models sometimes generate information that is
inaccurate or misleading, a phenomenon known as "hallucination." <br><br>By using multiple models, JADE
reduces each
model's bias. This ensures that the responses you receive are more reliable and trustworthy.<br><br></p>
</li>
<li>
<h3>Pay only for what you use or not at all.<button class="button ml-2 is-small is-primary is-outlined"
onclick="toggleDetails('flexible-pricing-details')">
<span class="icon is-small"> <span class="icon is-small">
<i class="fa-solid fa-info"></i> <i class="fa-solid fa-info"></i>
</span> </span>
</button></h3> </button>
<p id="flexible-pricing-details" style="display:none;">JADE use API, so you get access to free credits or tiers </h3>
depending of the provider (see next section). This is particularly beneficial for users who may not need to <p id="reduce-hallucination-details" style="display: none">
use the chatbot extensively. Once the free credit use, you pay based on the length of you message and the AI models sometimes generate information that is inaccurate or misleading,
response generated in tokens (a token is around 3 characters). Groq and Google also offer free tiers that a phenomenon known as "hallucination." <br /><br />By using multiple
are enough for conversation. <br><br>JADE starts with a free tier that allows you to send up to 200 messages models, JADE reduces each model's bias. This ensures that the responses
a month. For more intensive use, you can upgrade for just $0.95/month.<br><br></p> you receive are more reliable and trustworthy.<br /><br />
</p>
</li> </li>
<li> <li>
<h3>All providers and models.<button class="button ml-2 is-small is-primary is-outlined" <h3>
onclick="toggleDetails('provider-details')"> Pay only for what you use or not at all.<button
class="button ml-2 is-small is-primary is-outlined"
onclick="toggleDetails('flexible-pricing-details')"
>
<span class="icon is-small"> <span class="icon is-small">
<i class="fa-solid fa-info"></i> <i class="fa-solid fa-info"></i>
</span> </span>
</button></h3> </button>
<div id="provider-details" style="display:none; overflow-x: hidden;"> </h3>
<p id="flexible-pricing-details" style="display: none">
JADE use API, so you get access to free credits or tiers depending of the
provider (see next section). This is particularly beneficial for users who
may not need to use the chatbot extensively. Once the free credit use, you
pay based on the length of you message and the response generated in
tokens (a token is around 3 characters). Groq and Google also offer free
tiers that are enough for conversation.
</p>
</li>
<li>
<h3>
All providers and models.<button
class="button ml-2 is-small is-primary is-outlined"
onclick="toggleDetails('provider-details')"
>
<span class="icon is-small">
<i class="fa-solid fa-info"></i>
</span>
</button>
</h3>
<div id="provider-details" style="display: none; overflow-x: hidden">
<div class="columns"> <div class="columns">
<div class="column is-two-thirds"> <div class="column is-two-thirds">
<strong>OpenAI</strong> - OpenAI offer 5$ credits when creating an API account. <strong>OpenAI</strong> - OpenAI offer 5$ credits when creating an API
Around 10 000 small question to GPT-4 Omni or 100 000 to GPT-3.5 Turbo. account. Around 10 000 small question to GPT-4 Omni or 100 000 to
GPT-3.5 Turbo.
</div> </div>
<div class="column"> <div class="column">
<ul> <ul>
@ -133,11 +178,12 @@
</ul> </ul>
</div> </div>
</div> </div>
<br> <br />
<div class="columns"> <div class="columns">
<div class="column is-two-thirds"> <div class="column is-two-thirds">
<strong>Anthropic</strong> - Anthropic offer 5$ credits when creating an API <strong>Anthropic</strong> - Anthropic offer 5$ credits when creating
account. Around 2 000 small question to Claude 3 Opus or 120 000 to Claude Haiku. an API account. Around 2 000 small question to Claude 3 Opus or 120
000 to Claude Haiku.
</div> </div>
<div class="column"> <div class="column">
<ul> <ul>
@ -145,7 +191,7 @@
<strong>Claude 3 Opus</strong> <strong>Claude 3 Opus</strong>
</li> </li>
<li> <li>
<strong>Claude 3 Sonnet</strong> <strong>Claude 3.5 Sonnet</strong>
</li> </li>
<li> <li>
<strong>Claude 3 Haiku</strong> <strong>Claude 3 Haiku</strong>
@ -153,7 +199,7 @@
</ul> </ul>
</div> </div>
</div> </div>
<br> <br />
<div class="columns"> <div class="columns">
<div class="column is-two-thirds"> <div class="column is-two-thirds">
<strong>Mistral</strong> - Mistral do not offer free credits. <strong>Mistral</strong> - Mistral do not offer free credits.
@ -181,12 +227,13 @@
</ul> </ul>
</div> </div>
</div> </div>
<br> <br />
<div class="columns"> <div class="columns">
<div class="column is-two-thirds"> <div class="column is-two-thirds">
<strong>Groq</strong> - Groq offer a free tier with limit of tokens and request per minutes. <strong>Groq</strong> - Groq offer a free tier with limit of tokens
The rate is plenty for a chatbot. 30 messages and between 6 000 and 30 000 tokens per and request per minutes. The rate is plenty for a chatbot. 30 messages
minute. Per tokens coming soon. and between 6 000 and 30 000 tokens per minute. Per tokens coming
soon.
</div> </div>
<div class="column"> <div class="column">
<ul> <ul>
@ -205,12 +252,13 @@
</ul> </ul>
</div> </div>
</div> </div>
<br> <br />
<div class="columns"> <div class="columns">
<div class="column is-two-thirds"> <div class="column is-two-thirds">
<strong>Google</strong> - Like Groq, Google offer a free tier with limit of tokens and <strong>Google</strong> - Like Groq, Google offer a free tier with
request per minutes. The rate is plenty for a chatbot. 15 messages and 1 000 000 limit of tokens and request per minutes. The rate is plenty for a
tokens per minute. Per tokens also available. chatbot. 15 messages and 1 000 000 tokens per minute. Per tokens also
available.
</div> </div>
<div class="column"> <div class="column">
<ul> <ul>
@ -226,12 +274,13 @@
</ul> </ul>
</div> </div>
</div> </div>
<br> <br />
<div class="columns"> <div class="columns">
<div class="column is-two-thirds"> <div class="column is-two-thirds">
<strong>Perplexity</strong> - Perplexity do not offer a free tier or credits. Perplexity <strong>Perplexity</strong> - Perplexity do not offer a free tier or
offer what they call 'online' models that can search online. So you can ask for the current credits. Perplexity offer what they call 'online' models that can
weather for example. Those models have additional cost of 5$ per 1 000 requests. search online. So you can ask for the current weather for example.
Those models have additional cost of 5$ per 1 000 requests.
</div> </div>
<div class="column"> <div class="column">
<ul> <ul>
@ -259,11 +308,12 @@
</ul> </ul>
</div> </div>
</div> </div>
<br> <br />
<div class="columns"> <div class="columns">
<div class="column is-two-thirds"> <div class="column is-two-thirds">
<strong>Fireworks</strong> - Fireworks AI offer 1$ of free credits when creating an account. <strong>Fireworks</strong> - Fireworks AI offer 1$ of free credits
Firework AI have a lot of open source models. I may add fine tuned models in the future. when creating an account. Firework AI have a lot of open source
models. I may add fine tuned models in the future.
</div> </div>
<div class="column"> <div class="column">
<ul> <ul>
@ -402,13 +452,15 @@
</ul> </ul>
</div> </div>
</div> </div>
<br> <br />
<strong>Hugging face</strong> - You can also use custom endpoints. I only tested hugging face but in <strong>Hugging face</strong> - You can also use custom endpoints. I only
theory, as long as the key is valid and it use the openai api, it should work. This part need some tested hugging face but in theory, as long as the key is valid and it use
testing and improvement. the openai api, it should work. This part need some testing and
<br> improvement.
<br />
<br />
<strong>Goose AI</strong> - Chat API will be available soon. <strong>Goose AI</strong> - Chat API will be available soon.
<br> <br />
</div> </div>
</li> </li>
</ul> </ul>