commit 09cf23e2e1606ac81e37963b02610604c2ca2f8b Author: Tomas Krejci Date: Fri Jul 14 00:04:10 2023 +0200 deploy public repo diff --git a/src/App.css b/src/App.css new file mode 100644 index 0000000..52d05e1 --- /dev/null +++ b/src/App.css @@ -0,0 +1,80 @@ +html, body { + height: 100%; + margin: 0; +} + +/* Apply to the body element */ +body { + font-family: Arial, sans-serif; + background: linear-gradient(to bottom, #1a1a1a, #2b2b2b); + color: #ccc; + line-height: 1.5; + margin: 0; + padding: 0; +} + +/* Apply to all headings */ +h1, h2, h3, h4, h5, h6 { + margin-top: 0; + margin-bottom: 1rem; + font-weight: bold; + color:rgb(235, 225, 225) +} + +/* Apply to all text inputs */ +input, textarea { + font-family: "Roboto Mono", monospace; + background-color: #ccc; + font-size: 18px; + padding: 10px; + border: 1px solid #ccc; + border-radius: 4px; + margin-right: 10px; + margin-bottom: 10px; + resize: none; +} + +/* Apply to all buttons */ +button { + font-size: 18px; + font-weight: bold; + color: #fff; + background-color: #007bff; + border: none; + border-radius: 4px; + padding: 10px 20px; + cursor: pointer; + transition: background-color 0.2s ease-in-out; +} + +button:hover { + background-color: #0062cc; +} + + +button[disabled] { + opacity: 50%; + background-color: grey; +} + +button[disabled]:hover { + opacity: 50%; + background-color: grey; +} + + + +/* Apply to all paragraphs */ +p { + margin-top: 1rem; + width: 80%; + word-wrap: break-word; + text-align: center; +} + +.container { + display: flex; + flex-direction: column; + align-items: center; + padding: 20px; +} \ No newline at end of file diff --git a/src/App.js b/src/App.js new file mode 100644 index 0000000..af8021b --- /dev/null +++ b/src/App.js @@ -0,0 +1,23 @@ +import logo from "./logo.svg"; +import "./App.css"; +import { ExplainCode } from "./ExplainCode"; + +const title = "AI, Explain this code:"; +const buttonText = "Explain"; +const areaText = "Put your code here"; +const prompt = "Explain this code: "; + +function App() { + return ( +
+ +
+ ); +} + +export default App; diff --git a/src/App.test.js b/src/App.test.js new file mode 100644 index 0000000..1f03afe --- /dev/null +++ b/src/App.test.js @@ -0,0 +1,8 @@ +import { render, screen } from '@testing-library/react'; +import App from './App'; + +test('renders learn react link', () => { + render(); + const linkElement = screen.getByText(/learn react/i); + expect(linkElement).toBeInTheDocument(); +}); diff --git a/src/Button.js b/src/Button.js new file mode 100644 index 0000000..6b68448 --- /dev/null +++ b/src/Button.js @@ -0,0 +1,10 @@ +import React from "react"; +import { useState } from "react"; + +export const Button = ({ children, onClick, isDisabled, className }) => { + return ( + + ); +}; diff --git a/src/ExplainCode.jsx b/src/ExplainCode.jsx new file mode 100644 index 0000000..0529fd5 --- /dev/null +++ b/src/ExplainCode.jsx @@ -0,0 +1,74 @@ +import React from "react"; +import { useState } from "react"; +import { Button } from "./Button"; +import { Input } from "./Input"; + +export const ExplainCode = (props) => { + //const API_KEY = "test_api_key_0001"; + + const [isDisabled, setIsDisabled] = useState(false); + const [value, setValue] = useState(""); + const [explain, setExplain] = useState(""); + const [error, setError] = useState(""); + const [loading, setLoading] = useState(""); + + const handleCallOpenAIAPI = async () => { + console.log(props.prompt + value); + //console.log(process.env.REACT_APP_API_KEY); + setLoading(true); + fetch("https://api.openai.com/v1/completions", { + method: "POST", + headers: { + "Content-Type": "application/json", + Authorization: `Bearer ${process.env.REACT_APP_API_KEY}`, + }, + body: JSON.stringify({ + model: "text-davinci-003", + prompt: + value, + temperature: 0, + max_tokens: 150, + top_p: 1.0, + frequency_penalty: 0.0, + presence_penalty: 0.0, + stop: ['"""'], + }), + }) + .then((response) => { + if (!response.ok) { + throw new Error("Error fetching"); + } + return response.json(); + }) + .then((data) => { + console.log(data.choices[0].text); + setExplain(data.choices[0].text); + }) + .catch((error) => setError(error.message)) + .finally(() => setLoading(false)); + }; + + const handleOnChange = (event) => { + setValue(event.target.value); + }; + + const disabledButton = isDisabled || !value.length; + + return ( +
+

{props.title}

+