improve frontend

intesys · May 21, 2024 · 2195012 · 2195012
1 parent 56bcf4a
commit 2195012
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 42 deletions.
diff --git a/src/main/kotlin/NoChatClient.kt b/src/main/kotlin/NoChatClient.kt
@@ -2,6 +2,7 @@ package org.example
 
 class NoChatClient: ChatClient {
     override fun chat(prompt: String): String {
+        Thread.sleep(2_000)
         return "Chat client is disabled"
     }
 }
diff --git a/src/main/resources/application.properties b/src/main/resources/application.properties
@@ -1,7 +1,7 @@
 SERVER_PORT=8080
 CUSTOM_MESSAGE="Hello World From Configs"
 
-CHAT_CLIENT=CHATGPT
+CHAT_CLIENT=DUMMY
 MODEL=gpt-3.5-turbo
 CHATGPT_API_KEY=NOT HERE!
 

diff --git a/src/main/resources/public/index.html b/src/main/resources/public/index.html
@@ -1,70 +1,81 @@
-<!DOCTYPE html>
+<!DOCTYPE HTML>
 <html lang="en">
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>AI Proxy</title>
-  <!-- Bootstrap CSS -->
-  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
-  <style>
-    body, html {
-      height: 100%;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      padding: 20px;
-    }
-    .form-control-lg {
-      font-size: 1.25rem;
-      height: calc(1.5em + 1rem + 2px);
-      padding: .5rem 1rem;
-      line-height: 1.5;
-    }
-    .hidden {
-      display: none;
-    }
-  </style>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <title>Movie Rater</title>
+
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
+
 </head>
+
 <body>
+
+<nav>
+  <div class="nav-wrapper">
+    <a href="/" class="brand-logo">&nbsp;AI Proxy</a>
+  </div>
+</nav>
+
 <div class="container">
-  <h1 class="text-center mb-4">AI Proxy</h1>
-  <form id="proxyForm">
-    <input class="form-control form-control-lg" type="text" id="inputData" placeholder="Your AI prompt">
-  </form>
-  <div id="spinner" class="hidden text-center mt-3">
-    <div class="spinner-border" role="status">
-      <span class="sr-only"></span>
+  <div class="row center-align">
+    <h1>&nbsp;</h1>
+    <h4>Enter your prompt!</h4>
+  </div>
+  <div class="row">
+    <form class="col s12" id="proxyForm">
+      <div class="row">
+        <div class="input-field col s12">
+          <input id="inputData" class="materialize-input"></input>
+          <label for="inputData"></label>
+        </div>
+      </div>
+    </form>
+  </div>
+  <div class="center-align">
+    <blockquote id="responseArea">
+    </blockquote>
+    <div class="preloader-wrapper active hide" id="spinner">
+      <div class="spinner-layer spinner-red-only">
+        <div class="circle-clipper left">
+          <div class="circle"></div>
+        </div>
+        <div class="gap-patch">
+          <div class="circle"></div>
+        </div>
+        <div class="circle-clipper right">
+          <div class="circle"></div>
+        </div>
+      </div>
     </div>
   </div>
-  <div id="responseArea" class="mt-3"></div>
 </div>
+</body>
+</html>
+
 
-<!-- Bootstrap Bundle with Popper -->
-<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
-<!-- jQuery (Optional) -->
-<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 <script>
   const form = document.getElementById('proxyForm');
   const spinner = document.getElementById('spinner');
   const responseArea = document.getElementById('responseArea');
 
-  form.addEventListener('submit', function(event) {
+  form.addEventListener('submit', function (event) {
     event.preventDefault();
     const inputData = document.getElementById('inputData').value;
-    spinner.classList.remove('hidden'); // Show spinner
+    spinner.classList.remove('hide'); // Show spinner
     responseArea.textContent = ''; // Clear previous response
 
     fetch('/chat', {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
       },
-      body: JSON.stringify({ prompt: inputData })
+      body: JSON.stringify({prompt: inputData})
     })
     .then(response => response.json())
     .then(data => {
-      spinner.classList.add('hidden'); // Hide spinner
-      responseArea.innerText = 'Response: ' + data['result'];
+      spinner.classList.add('hide'); // Hide spinner
+      responseArea.innerText = data['result'];
     })
     .catch(error => {
       console.error('Error:', error);