Merge pull request #20 from varunshenoy/deploy

Merge deploy into main

src/App.css

@@ -17,6 +17,15 @@
   margin: 0 auto;
 }
 
+.opensourceText {
+  font-family: 'Noticia Text';
+  font-weight: 400;
+  font-size: 14px;
+  text-align: center;
+  width: 60%;
+  margin: 10px auto;
+}
+
 .container {
   padding-right: 15px;
   padding-left: 15px;
@@ -83,7 +92,21 @@
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 20px;
+}
 
+.apiKeyTextField {
+  border: 1px solid rgb(0, 0, 0);
+  border-radius: 5px;
+  box-shadow: 0 0 5px rgb(0 0 0 / 10%);
+  display: block;
+  font-size: 16px;
+  height: 50px;
+  outline: none;
+  padding: 0 10px;
+  width: 90%;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 20px;
 }
 
 .generateButton {
@@ -106,7 +129,7 @@
 
 .generateButton:disabled {
   background-color: rgb(0, 0, 0, 0.5);
-  /* cursor: wait; */
+  cursor: wait;
 }
 
 .clearButton {

src/App.js

@@ -2,8 +2,6 @@ import './App.css';
 import Graph from "react-graph-vis";
 import React, { useState } from "react";
 
-const OPENAI_API_KEY = "YOUR OPENAI API KEY";
-
 const DEFAULT_PARAMS = {
   "model": "text-davinci-003",
   "temperature": 0.3,
@@ -43,7 +41,7 @@ function App() {
     })
   }
 
-  const queryPrompt = (prompt) => {
+  const queryPrompt = (prompt, apiKey) => {
     fetch('prompts/main.prompt')
       .then(response => response.text())
       .then(text => text.replace("$prompt", prompt))
@@ -57,15 +55,27 @@ function App() {
           method: 'POST',
           headers: {
             'Content-Type': 'application/json',
-            'Authorization': 'Bearer ' + String(OPENAI_API_KEY)
+            'Authorization': 'Bearer ' + String(apiKey)
           },
           body: JSON.stringify(params)
         };
         fetch('https://api.openai.com/v1/completions', requestOptions)
-          .then(response => response.json())
-          .then(data => {
-            console.log(data);
-            const text = data.choices[0].text;
+          .then(response => {
+            if (!response.ok) {
+              switch (response.status) {
+                case 401: // 401: Unauthorized: API key is wrong
+                  throw new Error('Please double-check your API key.');
+                case 429: // 429: Too Many Requests: Need to pay
+                  throw new Error('You exceeded your current quota, please check your plan and billing details.');
+                default:
+                  throw new Error('Something went wrong with the request, please check the Network log');
+              }
+            }
+            return response.json();
+          })
+          .then((response) => {
+            const { choices } = response;
+            const text = choices[0].text;
             console.log(text);
             const new_graph = JSON.parse(text);
             console.log(new_graph);
@@ -75,8 +85,9 @@ function App() {
             document.body.style.cursor = 'default';
             document.getElementsByClassName("generateButton")[0].disabled = false;
             document.getElementsByClassName("searchBar")[0].value = "";
-          }).catch(error => {
+          }).catch((error) => {
             console.log(error);
+            alert(error);
             document.body.style.cursor = 'default';
             document.getElementsByClassName("generateButton")[0].disabled = false;
           });
@@ -85,22 +96,24 @@ function App() {
 
 
   const createGraph = () => {
-    // document.body.style.cursor = 'wait';
+    document.body.style.cursor = 'wait';
 
     document.getElementsByClassName("generateButton")[0].disabled = true;
     const prompt = document.getElementsByClassName("searchBar")[0].value;
+    const apiKey = document.getElementsByClassName("apiKeyTextField")[0].value;
 
-    queryPrompt(prompt);
+    queryPrompt(prompt, apiKey);
   }
 
   return (
     <div className='container'>
       <h1 className="headerText">GraphGPT 🔎</h1>
       <p className='subheaderText'>Build complex, directed graphs to add structure to your ideas using natural language. Understand the relationships between people, systems, and maybe solve a mystery.</p>
-
+      <p className='opensourceText'><a href="https://github.com/varunshenoy/graphgpt">GraphGPT is open-source</a>&nbsp;🎉</p>
       <center>
         <div className='inputContainer'>
           <input className="searchBar" placeholder="Describe your graph..."></input>
+          <input className="apiKeyTextField" type="password" placeholder="Enter your OpenAI API key..."></input>
           <button className="generateButton" onClick={createGraph}>Generate</button>
           <button className="clearButton" onClick={clearState}>Clear</button>
         </div>