From 60cbaa2b17e846b89b196cc6c542da9716ac87a4 Mon Sep 17 00:00:00 2001
From: valiantlynx <86688436+valiantlynx@users.noreply.github.com>
Date: Tue, 27 Feb 2024 16:25:20 +0100
Subject: [PATCH] Update index.html

---
 src/index.html | 96 +++++++++++---------------------------------------
 1 file changed, 21 insertions(+), 75 deletions(-)
diff --git a/src/index.html b/src/index.html
index 88ea430..10ea1e4 100644
--- a/src/index.html
+++ b/src/index.html
@@ -9,20 +9,14 @@
   <script src="https://unpkg.com/htmx.org"></script>
   <script src="https://unpkg.com/htmx.org/dist/ext/client-side-templates.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/nunjucks@3.2.4/browser/nunjucks.min.js"></script>
-  <script>
-    // CORS workaround
-    document.addEventListener("htmx:configRequest", (evt) => {
-      evt.detail.headers = [];
-    });
-  </script>
-  <title>Whisper Magic Chat</title>
+  <title>Ollama Docker Compose Setup</title>
 </head>
 
 <body class="bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 font-sans">
 
   <header class="bg-opacity-90 backdrop-filter backdrop-blur-lg py-6">
     <div class="container mx-auto flex justify-between items-center">
-      <h1 class="text-3xl md:text-4xl lg:text-5xl font-extrabold text-white">Whisper Magic Chat</h1>
+      <h1 class="text-3xl md:text-4xl lg:text-5xl font-extrabold text-white">Ollama Docker Compose Setup</h1>
       <nav>
         <ul class="flex space-x-4">
           <li><a href="/" class="hover:text-gray-300 text-white">Home</a></li>
@@ -35,79 +29,31 @@
 
   <section id="hero" class="bg-gray-900 text-white py-16">
     <div class="container mx-auto text-center">
-      <h2 class="text-4xl lg:text-5xl font-semibold mb-4">Unleash the Magic of Your Voice</h2>
-      <p class="text-lg lg:text-xl text-gray-300 leading-7 mb-8">Transform your voice into something enchanting with
-        Whisper Magic API. Experience the future of automatic speech recognition with unparalleled accuracy and speed.</p>
-      <a href="#transcribe"
-        class="bg-blue-500 text-white px-8 py-3 rounded-full hover:bg-blue-700 transition duration-300">Get
-        Started</a>
+      <h2 class="text-4xl lg:text-5xl font-semibold mb-4">Simplify Your Development with Ollama Docker</h2>
+      <p class="text-lg lg:text-xl text-gray-300 leading-7 mb-8">Streamline your Ollama deployments using Docker Compose. Dive into a containerized environment designed for simplicity and efficiency.</p>
+      <div class="space-x-4">
+        <a href="http://localhost:3000" class="bg-blue-500 text-white px-8 py-3 rounded-full hover:bg-blue-700 transition duration-300">Ollama Web UI</a>
+        <a href="http://localhost:11434" class="bg-green-500 text-white px-8 py-3 rounded-full hover:bg-green-700 transition duration-300">Langchain</a>
+        <a href="http://localhost:8000" class="bg-red-500 text-white px-8 py-3 rounded-full hover:bg-red-700 transition duration-300">App Container</a>
+      </div>
     </div>
   </section>
 
-  <section id="transcribe" class="bg-gray-100 py-16" hx-ext="client-side-templates">
+  <section id="features" class="bg-gray-100 py-16">
     <div class="container mx-auto text-center">
-      <h2 class="text-3xl lg:text-4xl font-semibold mb-6 text-gray-800">Whisper Magic Transcription</h2>
-      <p class="text-lg lg:text-xl text-gray-700 mb-6">Upload an audio file to transcribe and experience the magic of
-        Whisper.</p>
-
-      <form hx-post="/transcribe" hx-trigger="submit" hx-swap="outerHTML" enctype="multipart/form-data"
-        class="flex flex-col items-center space-y-4" nunjucks-template="chat" _='on htmx:xhr:progress(loaded, total) set #progress.value to (loaded/total)*100'>
-        <input type="file" name="files" class="p-4 border border-gray-300 rounded">
-        <button type="submit"
-          class="bg-blue-500 text-white px-8 py-3 rounded-full hover:bg-blue-700 transition duration-300">Transcribe</button>
-        <progress id='progress' value='0' max='100' class="w-full h-4 bg-blue-200 rounded-full"></progress>
-        <!-- HTMX and Nunjucks templates -->
-        <template id="chat">
-          <!-- totalItems -->
-          {% if results == 1 %}
-          <i class="text-gray-500 mb-4"> Found {{ results.length }} files.</i>
-          {% endif %}
-          <!-- items -->
-          {% for chat in results %}
-          <div class="block mb-8 mx-auto max-w-md bg-white rounded-lg p-4 shadow-md hover:shadow-lg">
-            <div class="flex items-center">
-              <div class="w-10 h-10 rounded-full overflow-hidden mr-4">
-                <img alt="Whisper Magic transcription icon"
-                  src="https://api.dicebear.com/7.x/adventurer/svg?seed={{ chat.filename }}"
-                  class="object-cover w-full h-full">
-              </div>
-              <div>
-                <span class="text-blue-500 font-bold">Whisper:</span>
-                <time class="text-xs opacity-50 block">{{ chat.filename | truncate(10, true, "")}}</time>
-              </div>
-            </div>
-            <div class="mt-4">{{ chat.transcript }}</div>
-            <div class="mt-4 text-blue-500 hover:underline">
-              <a href="javascript:location.reload(true);" rel="noopener noreferrer">Retry?</a>
-            </div>            
-          </div>
-          {% endfor %}
-        </template>
-      </form>
-    </div>
-  </section>
-
-  <section id="features" class="bg-gray-800 text-white py-16">
-    <div class="container mx-auto text-center">
-      <h2 class="text-3xl lg:text-4xl font-semibold mb-12">Enchanting Features</h2>
+      <h2 class="text-3xl lg:text-4xl font-semibold mb-6 text-gray-800">Key Features</h2>
       <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
-        <!-- Feature 1 -->
-        <div class="p-8 bg-white bg-opacity-70 rounded-lg shadow-md">
-          <h3 class="text-2xl font-semibold mb-4 text-gray-800">Voice Transformation</h3>
-          <p class="text-gray-700">Turn your voice into a symphony of magical sounds. Choose from a variety of
-            enchanting transformations.</p>
+        <div class="p-8 bg-white rounded-lg shadow-md">
+          <h3 class="text-2xl font-semibold mb-4">Easy Setup</h3>
+          <p>Get up and running with Ollama and its dependencies through Docker Compose with minimal setup.</p>
         </div>
-        <!-- Feature 2 -->
-        <div class="p-8 bg-white bg-opacity-70 rounded-lg shadow-md">
-          <h3 class="text-2xl font-semibold mb-4 text-gray-800">Whisper Recognition</h3>
-          <p class="text-gray-700">Whisper Magic recognizes whispers with unparalleled precision, making it perfect for
-            ASMR applications.</p>
+        <div class="p-8 bg-white rounded-lg shadow-md">
+          <h3 class="text-2xl font-semibold mb-4">GPU Support</h3>
+          <p>Leverage GPU acceleration for improved performance in processing tasks, with easy configuration.</p>
         </div>
-        <!-- Feature 3 -->
-        <div class="p-8 bg-white bg-opacity-70 rounded-lg shadow-md">
-          <h3 class="text-2xl font-semibold mb-4 text-gray-800">Real-time Spell Casting</h3>
-          <p class="text-gray-700">Cast spells using your voice in real-time. Experience the magic as your words come to
-            life.</p>
+        <div class="p-8 bg-white rounded-lg shadow-md">
+          <h3 class="text-2xl font-semibold mb-4">Flexible Development</h3>
+          <p>Includes a development container for testing and experimentation, supporting both Docker and virtual environments.</p>
         </div>
       </div>
     </div>
@@ -115,7 +61,7 @@
 
   <footer class="bg-gray-900 text-white py-6">
     <div class="container mx-auto text-center">
-      <p>&copy; 2024 Whisper Magic. All Rights Reserved.</p>
+      <p>&copy; 2024 Ollama Docker. All Rights Reserved.</p>
     </div>
   </footer>
 </body>
