diff --git a/app.go b/app.go index 9ace00e..1fa9829 100644 --- 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 index 13dad81..42dd659 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -3,7 +3,7 @@ - gpt-client + DOBROAI - клиент ChatGPT
diff --git a/frontend/src/App.css b/frontend/src/App.css index e3ceed2..c984e2b 100644 --- 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 index 346fc02..c600287 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -1,6 +1,7 @@ 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"; @@ -8,31 +9,65 @@ 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 && (
@@ -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="Введите запрос..." />
- send-button + {isLoading ? ( + + ) : ( + send-button + )}
diff --git a/frontend/src/vars.js b/frontend/src/vars.js index affa893..67da43e 100644 --- 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"; \ No newline at end of file diff --git a/frontend/wailsjs/go/main/App.d.ts b/frontend/wailsjs/go/main/App.d.ts index 53604da..44c48da 100644 --- 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; - -export function Greet(arg1:string):Promise; diff --git a/frontend/wailsjs/go/main/App.js b/frontend/wailsjs/go/main/App.js index 2d1a3e9..71092a0 100644 --- 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 index f648f06..38841b1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,7 +8,8 @@ "@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" } }, "node_modules/@fortawesome/fontawesome-common-types": { @@ -881,6 +882,15 @@ "react-dom": ">=16.8" } }, + "node_modules/react-spinners": { + "version": "0.13.8", + "resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.13.8.tgz", + "integrity": "sha512-3e+k56lUkPj0vb5NDXPVFAOkPC//XyhKPJjvcGjyMNPWsBKpplfeyialP74G7H7+It7KzhtET+MvGqbKgAqpZA==", + "peerDependencies": { + "react": "^16.0.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/remark-parse": { "version": "10.0.2", "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-10.0.2.tgz", diff --git a/package.json b/package.json index 81a77ce..7f03382 100644 --- 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" } }