Added readme file, changed the api endpoint and fixed minor bugs.

Signed-off-by: Sahil Suman <[email protected]>

.env.example

@@ -0,0 +1 @@
+REACT_APP_TOKEN=openai_token

.gitignore

@@ -17,6 +17,7 @@
 .env.development.local
 .env.test.local
 .env.production.local
+.env
 
 npm-debug.log*
 yarn-debug.log*

README.md

@@ -1 +1,37 @@
 # CritiqueCheck
+
+### Code Review Automation
+
+This web application utilizes OpenAI's natural language processing capabilities to automate code reviews. It provides an efficient and comprehensive way to review submitted code, offering valuable comments on coding style, adherence to industry standards, and suggestions for further development.
+
+## Features
+
+- **Automated Code Reviews :** The application employs OpenAI's natural language processing to analyze and review submitted code, saving time and effort in manual code inspections.
+
+- **Style and Standards Feedback :** Receive valuable insights on coding style, ensuring consistency and adherence to best practices. The application highlights areas where improvements can be made to enhance code readability and maintainability.
+
+- **Development Suggestions :** Get suggestions for further development and optimization of the code. The application identifies potential enhancements, potential bugs, or opportunities for increased performance.
+
+- **Customization :** Tailor the code review process to your specific needs by setting preferred style guidelines and rules. Customize the application to align with your team's coding conventions and industry standards.
+
+## How It Works
+
+- **Submit your code :** Upload your code to the web application, providing the necessary details and context for the review.
+
+- **Automated Review :** The application utilizes OpenAI's natural language processing capabilities to analyze the code thoroughly. It examines coding style, industry standards, and potential areas for improvement.
+
+- **Review Report :** Receive a detailed review report highlighting the strengths and weaknesses of your code. The report includes specific comments and suggestions for enhancing code quality and meeting best practices.
+
+- **Iterative Improvement :** Utilize the feedback provided by the application to iterate on your code. Make necessary changes based on the recommendations and submit the updated code for further review, if desired.
+
+## Getting Started
+
+To run this web application locally or deploy it to a server, follow the steps below:
+
+- Clone the repository
+
+- Install dependencies : `npm install`
+
+- Build and run the application : `npm run start`
+
+- Access the application : Open your browser and navigate to your localhost to access the code review automation web application.

package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "openai": "^3.3.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",

src/App.js

@@ -9,6 +9,43 @@ const App = () => {
   const [responseText, setResponseText] = useState("");
   const [isLoading, setIsLoading] = useState(false);
 
+  // Using theb.ai GPT3.5 Model
+  // const handleSubmit = async () => {
+  //   if (isLoading) {
+  //     return;
+  //   }
+
+  //   try {
+  //     setIsLoading(true);
+
+  //     const response = await fetch("https://chatbot.theb.ai/api/chat-process", {
+  //       method: "POST",
+  //       body: JSON.stringify({
+  //         prompt: `Please analyze the following code and provide feedback on style, best practices, and potential improvements:\n${codeSnippet}`,
+  //         options: {},
+  //       }),
+  //       headers: {
+  //         "Content-Type": "application/json",
+  //       },
+  //       timeout: 120000,
+  //     });
+
+  //     const responseData = await response.text();
+  //     const jsonData = JSON.parse(responseData.split("\n").pop());
+  //     console.log(jsonData?.text);
+
+  //     if (jsonData?.status === "Fail") {
+  //       toast.error("OpenAI Server Error.");
+  //     } else {
+  //       setResponseText(jsonData?.text);
+  //     }
+  //   } catch (error) {
+  //     console.log("Error occurred:", error);
+  //     toast.error("An error occurred.");
+  //   } finally {
+  //     setIsLoading(false);
+  //   }
+  // };
   const handleSubmit = async () => {
     if (isLoading) {
       return;
@@ -17,26 +54,39 @@ const App = () => {
     try {
       setIsLoading(true);
 
-      const response = await fetch("https://chatbot.theb.ai/api/chat-process", {
-        method: "POST",
-        body: JSON.stringify({
-          prompt: `Please analyze the following code and provide feedback on style, best practices, and potential improvements:\n${codeSnippet}`,
-          options: {},
-        }),
-        headers: {
-          "Content-Type": "application/json",
-        },
-        timeout: 120000,
-      });
-
-      const responseData = await response.text();
-      const jsonData = JSON.parse(responseData.split("\n").pop());
-      console.log(jsonData?.text);
-
-      if (jsonData?.status === "Fail") {
-        toast.error("OpenAI Server Error.");
+      const response = await fetch(
+        "https://api.openai.com/v1/chat/completions",
+        {
+          method: "POST",
+          body: JSON.stringify({
+            model: "gpt-3.5-turbo",
+            messages: [
+              {
+                role: "system",
+                content: "You are a helpful assistant.",
+              },
+              {
+                role: "user",
+                content: `Please analyze the following code and provide feedback on style, best practices, and potential improvements:\n${codeSnippet}`,
+              },
+            ],
+          }),
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${process.env.REACT_APP_TOKEN}`,
+          },
+          timeout: 120000,
+        }
+      );
+
+      const responseData = await response.json();
+
+      console.log(responseData.choices[0].message.content);
+
+      if (responseData?.error) {
+        toast.error(`Error: ${responseData.error.type}`);
       } else {
-        setResponseText(jsonData?.text);
+        setResponseText(responseData.choices[0].message.content);
       }
     } catch (error) {
       console.log("Error occurred:", error);
@@ -45,7 +95,6 @@ const App = () => {
       setIsLoading(false);
     }
   };
-
   const handleSampleCodeClick = () => {
     setCodeSnippet(`const number = parseInt(prompt('Enter the number of terms: '));
 let n1 = 0, n2 = 1, nextTerm;
@@ -97,7 +146,9 @@ for (let i = 1; i <= number; i++) {
           <p>
             or{" "}
             <span>
-              <label htmlFor="codeFile">Upload your code file</label>
+              <label htmlFor="codeFile" style={{ cursor: "pointer" }}>
+                Upload your code file
+              </label>
             </span>
           </p>
         </div>

src/app.css

@@ -44,6 +44,7 @@ main p {
 main p span {
   color: #475569;
   text-decoration: underline;
+  cursor: pointer;
 }
 
 main button {
@@ -54,6 +55,7 @@ main button {
   border-radius: 6px;
   background: #334155;
   position: relative;
+  cursor: pointer;
 }
 
 main button .spinner {
@@ -69,6 +71,7 @@ main button .spinner {
   border-top-color: #334155;
   animation: spin 1s infinite linear;
   z-index: 1;
+  cursor: pointer;
 }
 
 main button .btn-content {