Better text

Added buttons in the Enter API page
Changed text in Welcome page

Chat.go

@@ -351,16 +351,55 @@ func generateEnterKeyChatHTML() string {
 	<p>OpenAI and Anthropic offer 5$ of free credits when creating an account. So you can try JADE with their models for free.</p>
 	<h2>Get a key</h2>
 	<p>To get a key and learn more about the different LLM providers and their offerings, check out their websites:</p>
-	<ul>
+	<a
-		<li><a href="https://platform.openai.com/docs/overview" target="https://platform.openai.com/docs/overview">OpenAI</a></li>
+  class="button is-small is-primary is-outlined mt-1"
-		<li><a href="https://console.anthropic.com/" target="https://console.anthropic.com/">Anthropic</a></li>
+  href="https://openai.com/index/openai-api/"
-		<li><a href="https://console.groq.com/login" target="https://console.groq.com/login">Groq</a></li>
+  target="_blank"
-		<li><a href="https://console.mistral.ai/" target="https://console.mistral.ai/">Mistral AI</a></li>
+>
-		<li><a href="https://aistudio.google.com" target="https://aistudio.google.com">Google</a></li>
+  Get OpenAI API key
-		<li><a href="https://www.perplexity.ai/" target="https://www.perplexity.ai/">Perplexity</a></li>
+</a>
-		<li><a href="https://fireworks.ai/" target="https://fireworks.ai/">Fireworks AI</a></li>
+<a
-	</ul>
+  class="button is-small is-primary is-outlined mt-1"
-	`
+  href="https://console.anthropic.com/"
+  target="_blank"
+>
+  Get Anthropic API key
+</a>
+<a
+  class="button is-small is-primary is-outlined mt-1"
+  href="https://console.mistral.ai/"
+  target="_blank"
+>
+  Get Mistral API key
+</a>
+<a
+  class="button is-small is-primary is-outlined mt-1"
+  href="https://console.groq.com/"
+  target="_blank"
+>
+  Get Groq API key
+</a>
+<a
+  class="button is-small is-primary is-outlined mt-1"
+  href="https://aistudio.google.com/app/apikey"
+  target="_blank"
+>
+  Get Google API key
+</a>
+<a
+  class="button is-small is-primary is-outlined mt-1"
+  href="https://docs.perplexity.ai/docs/getting-started"
+  target="_blank"
+>
+  Get Perplexity API key
+</a>
+<a
+  class="button is-small is-primary is-outlined mt-1"
+  href="https://fireworks.ai/login"
+  target="_blank"
+>
+  Get Fireworks API key
+</a>`
 
 	htmlString := "<div class='columns is-centered' id='chat-container'><div class='column is-12-mobile is-8-tablet is-6-desktop' id='chat-messages'>"
 

views/partials/welcome-chat.html

@@ -3,26 +3,16 @@
 <p>
   I often use LLMs and quickly found myself asking GPT4, Gemini and Claude the
   same question. I wanted to be able to ask the same question to multiple
-  models, compare their answers and pick the best one.
+  models, compare their answers and pick the best one. So I did JADE.
 </p>
 
 <p>
-  So I built a simple chatbot that use different LLM APIs. You can create bots
+  JADE is a simple Multi-Model chatbot. The idea is to use multiple models within
-  with a specific model and prompt. You can select as many bots to answer a
-  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>
-
-<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>
   <li>
-    When asking a question, you can query multiple models and compare their
+    When asking a question, you can use multiple models and compare their
     responses to choose the best one.
   </li>
   <li>
@@ -32,13 +22,6 @@
 
 <p>For example, a response from GPT-4 Omni can be used by Claude Haiku.</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">
   Try JADE now for free!
 </a>
@@ -56,6 +39,7 @@
         <span class="icon is-small">
           <i class="fa-solid fa-info"></i>
         </span>
+        Detail
       </button>
     </h3>
     <p id="all-models-details" style="display: none">
@@ -78,6 +62,7 @@
         <span class="icon is-small">
           <i class="fa-solid fa-info"></i>
         </span>
+        Detail
       </button>
     </h3>
     <p id="multi-models-details" style="display: none">
@@ -96,6 +81,7 @@
         <span class="icon is-small">
           <i class="fa-solid fa-info"></i>
         </span>
+        Detail
       </button>
     </h3>
     <p id="same-models-details" style="display: none">
@@ -114,6 +100,7 @@
         <span class="icon is-small">
           <i class="fa-solid fa-info"></i>
         </span>
+        Detail
       </button>
     </h3>
     <p id="reduce-hallucination-details" style="display: none">
@@ -132,6 +119,7 @@
         <span class="icon is-small">
           <i class="fa-solid fa-info"></i>
         </span>
+        Detail
       </button>
     </h3>
     <p id="flexible-pricing-details" style="display: none">
@@ -152,6 +140,7 @@
         <span class="icon is-small">
           <i class="fa-solid fa-info"></i>
         </span>
+        Detail
       </button>
     </h3>
     <div id="provider-details" style="display: none; overflow-x: hidden">