Added loading check, builded windows wersion, optimized funcs

Avdushin · Jul 6, 2023 · 9197cf7 · 9197cf7
1 parent a3d6a60
commit 9197cf7
Show file tree

Hide file tree

Showing 9 changed files with 83 additions and 51 deletions.
diff --git a/app.go b/app.go
@@ -26,11 +26,6 @@ func (a *App) startup(ctx context.Context) {
 	a.ctx = ctx
 }
 
-// Greet returns a greeting for the given name
-func (a *App) Greet(name string) string {
-	return fmt.Sprintf("Hello %s, It's show time!", name)
-}
-
 func (a *App) ChatGPT(querry string) (string, error) {
 	// Load .env
 	if err := godotenv.Load(); err != nil {
@@ -42,7 +37,7 @@ func (a *App) ChatGPT(querry string) (string, error) {
 	client := openai.NewClient(OpenAIKey)
 
 	req := openai.ChatCompletionRequest{
-		Model: openai.GPT3Dot5Turbo,
+		Model: openai.GPT3Dot5Turbo16K0613,
 		Messages: []openai.ChatCompletionMessage{
 			{
 				Role:    openai.ChatMessageRoleSystem,

diff --git a/frontend/index.html b/frontend/index.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8"/>
     <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
-    <title>gpt-client</title>
+    <title>DOBROAI - клиент ChatGPT</title>
 </head>
 <body>
 <div id="root"></div>

diff --git a/frontend/src/App.css b/frontend/src/App.css
@@ -30,17 +30,33 @@ li {
 
 /* ==== App ==== */
 
-.gpt {
-  height: 100vh;
+#root {
+  flex-grow: 1;
   display: flex;
   flex-direction: column;
+  justify-content: center;
 }
 
-#root {
-  flex-grow: 1;
+#app {
+  height: 100vh;
+  text-align: center;
+}
+
+.gpt {
+  height: 100vh;
   display: flex;
   flex-direction: column;
+}
+/* GPT loading */
+.loading-animation {
+  display: flex;
   justify-content: center;
+  align-items: center;
+  height: 100%;
+}
+
+.loading-animation > div {
+  margin: 0 auto;
 }
 
 .input-box {
@@ -52,21 +68,6 @@ li {
   gap: 5px;
 }
 
-#app {
-  height: 100vh;
-  text-align: center;
-}
-
-#logo {
-  display: block;
-  width: 50%;
-  height: 50%;
-  margin: auto;
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
-  background-origin: content-box;
-}
 
 .brand {
   margin-top: 100px;
@@ -81,7 +82,7 @@ li {
 
 .input-box textarea {
   width: 90%;
-  height: 70px;
+  height: 60px;
 }
 
 .input-box {
@@ -119,6 +120,7 @@ li {
   color: #fff;
 }
 
+/* ==== FAQ ==== */
 .faq-answ {
   color: var(--text);
   padding: 0 15px;
@@ -148,18 +150,15 @@ li {
   height: 30px;
   line-height: 30px;
   padding: 0 10px;
-  background-color: rgba(240, 240, 240, 1);
   -webkit-font-smoothing: antialiased;
 }
 
 .input-box .input:hover {
   border: none;
-  background-color: rgba(255, 255, 255, 1);
 }
 
 .input-box .input:focus {
   border: none;
-  background-color: rgba(255, 255, 255, 1);
 }
 
 .answer {
@@ -173,13 +172,6 @@ li {
   text-align: left;
 }
 
-.input textarea {
-  width: 20px;
-  height: 70px;
-  resize: none;
-  padding: 5px 0px;
-}
-
 /* Settings */
 
 .settings-popup {

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
@@ -1,38 +1,73 @@
 import { useState, useEffect } from "react";
-import { Greet, ChatGPT } from "../wailsjs/go/main/App";
+import { ChatGPT } from "../wailsjs/go/main/App";
 import ReactMarkdown from "react-markdown";
+import { BeatLoader } from "react-spinners";
 import sendBtn from "./assets/icons/send.svg";
 import Header from "./Components/Header/Header";
 import Footer from "./Components/Footer/Footer";
 import { github } from "./vars";
 import "./App.css";
 
 function App() {
-  // gpt
+  // GPT
   const [answerText, setAnswerText] = useState("");
   const [querry, setQuerry] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
   const updateResultQuerry = (e) => setQuerry(e.target.value);
 
+  // Обработка клавиш
+  const handleTextareaKeyPress = (event) => {
+    if (event.key === "Enter" && !event.shiftKey) {
+      event.preventDefault();
+      gpt();
+    }
+  };
+
+  // Update GPT answer
   const updateAnswer = (answer) => {
     setAnswerText(answer);
   };
 
+  // Settings -> FAQ popup
   const [isSettingsOpen, setIsSettingsOpen] = useState(false);
-
   const toggleSettings = () => {
     setIsSettingsOpen(!isSettingsOpen);
   };
 
+  // ChatGPT API call
   function gpt() {
-    ChatGPT(querry).then(updateAnswer).finally(resetQuerry);
+    if (querry.trim() !== "") {
+      startLoading();
+      ChatGPT(querry)
+        .then(updateAnswer)
+        .catch((error) => {
+          console.error(error);
+          updateAnswer("Произошла ошибка при обработке запроса.");
+        })
+        .finally(() => {
+          stopLoading();
+          resetQuerry();
+        });
+    }
   }
 
+  // Reset user's querry
   const resetQuerry = () => {
     setQuerry("");
   };
 
+  // Is loading check
+  const startLoading = () => {
+    setIsLoading(true);
+  };
+
+  const stopLoading = () => {
+    setIsLoading(false);
+  };
+
   return (
     <>
+      {/* FAQ */}
       {isSettingsOpen && (
         <div className="settings-popup">
           <div className="popup-box">
@@ -111,6 +146,7 @@ function App() {
             className="input"
             value={querry}
             onChange={updateResultQuerry}
+            onKeyPress={handleTextareaKeyPress}
             autoComplete="off"
             name="input"
             type="text"
@@ -123,7 +159,11 @@ function App() {
             placeholder="Введите запрос..."
           />
           <div className="btn send-btn" onClick={gpt}>
-            <img src={sendBtn} alt="send-button" />
+            {isLoading ? (
+              <BeatLoader size={8} color={"#ffffff"} loading={isLoading} />
+            ) : (
+              <img src={sendBtn} alt="send-button" />
+            )}
           </div>
         </div>
       </div>

diff --git a/frontend/src/vars.js b/frontend/src/vars.js
@@ -1,4 +1,4 @@
-export let version = "0.0.1";
+export let version = "0.1.1";
 export let github = "https://github.com/Avdushin";
 export let discord = "https://discord.gg/xJ58eVZjxu"
 export let telegram = "https://t.me/itdobr0";
diff --git a/frontend/wailsjs/go/main/App.d.ts b/frontend/wailsjs/go/main/App.d.ts
@@ -2,5 +2,3 @@
 // This file is automatically generated. DO NOT EDIT
 
 export function ChatGPT(arg1:string):Promise<string>;
-
-export function Greet(arg1:string):Promise<string>;
diff --git a/frontend/wailsjs/go/main/App.js b/frontend/wailsjs/go/main/App.js
@@ -5,7 +5,3 @@
 export function ChatGPT(arg1) {
   return window['go']['main']['App']['ChatGPT'](arg1);
 }
-
-export function Greet(arg1) {
-  return window['go']['main']['App']['Greet'](arg1);
-}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,6 +3,7 @@
     "@fortawesome/fontawesome-svg-core": "^6.4.0",
     "font-awesome": "^4.7.0",
     "react-markdown": "^8.0.7",
-    "react-router-dom": "^6.14.1"
+    "react-router-dom": "^6.14.1",
+    "react-spinners": "^0.13.8"
   }
 }
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,5 +2,3 @@
		// This file is automatically generated. DO NOT EDIT

		export function ChatGPT(arg1:string):Promise<string>;

		export function Greet(arg1:string):Promise<string>;