react project started

rebecka-oscarsson · Sep 28, 2021 · f3632e8 · f3632e8
1 parent f2a21db
commit f3632e8
Show file tree

Hide file tree

Showing 12 changed files with 165 additions and 20 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,7 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
+.env
+
 # dependencies
 /node_modules
 /.pnp

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -6,6 +6,8 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
+    "deepai": "^1.0.17",
+    "dotenv": "^10.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",
@@ -34,5 +36,6 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  }
+  },
+  "devDependencies": {}
 }
diff --git a/public/index.html b/public/index.html
@@ -7,10 +7,10 @@
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Web site created using create-react-app"
+      content="Wikipedia articles written by AI"
     />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <title>Encyclopedia</title>
+    <title>Weirdopedia</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.css b/src/App.css
@@ -1,6 +1,21 @@
+html, body {margin:0; padding:0; background-color: floralwhite;}
+
 body {
   font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
 }
-#root {display:grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr;}
-img {grid-area: 2/1/3/2}
-.spinner {grid-area: 2/1/3/2; width: 320px; height:240px;}
+
+#root {display:grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr auto; margin:0; padding:0; min-height:100vh;}
+#root > * {padding: 2rem; margin:auto}
+figure {grid-area: 2/1/3/2}
+
+article {grid-area: 1/2/3/3; max-width: 70%}
+
+h1 {font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;}
+
+form > * {padding:1rem; border-radius:0.5rem; margin: 0.5rem; font-size: large;}
+
+footer {grid-area: 3/1/4/3;}
+
+.spinner {grid-area: 2/1/3/2; background-image: url("./loading.gif"); background-size: 70px; background-position: center; background-repeat: no-repeat; background-color: floralwhite; height: 100%; width: 100%; }
+label {display: block;}
+figcaption {text-align: center; font-style: italic;}
diff --git a/src/App.js b/src/App.js
@@ -1,34 +1,112 @@
 import "./App.css";
-import { useState, useEffect} from "react";
+import { useState, useEffect } from "react";
 import Searchbox from "./components/Searchbox";
 import Image from "./components/Image";
 import Spinner from "./components/Spinner";
+import Fetch from "./components/Fetch";
+import Article from "./components/Article";
+import Footer from "./components/Footer";
+
+require('dotenv').config();
+const deepaiKey = process.env.REACT_APP_API_KEY_DEEPAI;
 
 function App() {
   const [placeholder, setPlaceholder] = useState("type a word");
   const [searchWord, setSearchWord] = useState("");
   const [imageUrl, setImageUrl] = useState("");
-  const [imageLoaded, setImageLoaded]= useState(false);
+  const [imageLoaded, setImageLoaded] = useState(true);
+  const [wiki, setWiki] = useState("");
+  const [articleText, setArticleText] = useState("");
+  const [articleHeadline, setArticleHeadline] = useState("");
+
+  const deepai = require("deepai");
+  deepai.setApiKey(deepaiKey);
 
-useEffect(()=> setImageUrl("https://loremflickr.com/320/240/" + searchWord + "?random=" + Math.floor(Math.random() * 10) + 1), [searchWord])
-// useEffect(()=> showLoadingMessage(imageLoaded), [imageLoaded])
+  useEffect(() => {async function fetchData() {if(articleHeadline){
+    var resp = await deepai.callStandardApi("text2img", {
+            text: articleHeadline,
+    });
+    setImageUrl(resp.output_url)}};
+    fetchData();
+}, [articleHeadline]);
 
+  useEffect(() => {
+    if (searchWord) {
+      Fetch(
+        "https://en.wikipedia.org/api/rest_v1/page/summary/" +
+          searchWord +
+          "?origin=*",
+          //origin här är för att det inte ska bli cors-error
+        (data) => {
+          setWiki(data.extract);
+          setArticleHeadline(data.displaytitle);
+        }
+      );
+    }
+  }, [searchWord]);
 
+  useEffect(() => {
+    if (wiki) {
+      askAI(wiki);
+    }
+  }, [wiki]);
 
+  // useEffect(() => {
+  //   if (imageLoaded) {
+  //     setCaption(getCaption());
+  //   }
+  // }, [imageLoaded]);
 
+  // async function getCaption() {
+  //   let resp = await deepai.callStandardApi("nsfw-detector", {
+  //     image: document.getElementById("image"),
+  //   });
+  //   console.log(resp);
+  //   return resp;
+  // }
+  // här behövs felhantering
 
-// function showLoadingMessage(imageLoaded) {if (!imageLoaded) {setImageUrl("./loading.gif")}}
+  async function askAI(wikiText) {
+    let resp = await deepai.callStandardApi("text-generator", {
+      text: wikiText,
+    });
+    //tar bort wikipedia från början av texten
+    const article = resp.output.substr(
+      wikiText.length,
+      wikiText.length + resp.output.length
+    );
+    console.log("wikipedia:", wikiText);
+    setArticleText(article);
+  }
 
   return (
     <>
       <Searchbox
         setSearchWord={setSearchWord}
         setPlaceholder={setPlaceholder}
         placeholder={placeholder}
-        setImageLoaded ={setImageLoaded}
+        setImageLoaded={setImageLoaded}
       />
-      {searchWord ? <Image imageUrl = {imageUrl} onLoad = {()=>{setImageLoaded(true); setPlaceholder("type a word")}}/> : ""}
+      {searchWord ? (
+        <Image
+          imageUrl={imageUrl}
+          onLoad={() => {
+            setImageLoaded(true);
+            setPlaceholder("type a word");
+          }}
+            caption={articleHeadline}
+        />
+      ) : (
+        ""
+      )}
       {imageLoaded ? "" : <Spinner />}
+      {searchWord ? (
+        <Article articleText={articleText} articleHeadline={articleHeadline} />
+      ) : (
+        ""
+      )}
+      {/* tror jag ska göra articleLoaded istället och en switch för det ska bli spinner först när man sökt */}
+      <Footer />
     </>
   );
 }

diff --git a/src/components/Article.js b/src/components/Article.js
@@ -0,0 +1,6 @@
+const Article = ({ articleText, articleHeadline }) => {
+  // let searchWord="";
+  // if(articleHeadline){searchWord=articleHeadline.toLowerCase()}
+  return <article><h2>Let me tell you about the {articleHeadline}:</h2>{articleText}</article>
+}
+export default Article;
diff --git a/src/components/Footer.js b/src/components/Footer.js
@@ -0,0 +1,4 @@
+const Footer = () => {
+  return <footer>Made using <a href="https://deepai.org/machine-learning-model/text-generator">text generator</a> and <a href="https://deepai.org/machine-learning-model/text2img">text to image</a> from DeepAI and <a href = "https://www.mediawiki.org/wiki/API:Main_page">MediaWiki</a></footer>
+}
+export default Footer;
diff --git a/src/components/Image.js b/src/components/Image.js
@@ -1,4 +1,4 @@
-const Image = ({ imageUrl, onLoad }) => {
-  return <img src= {imageUrl} alt="the thing you looked up" onLoad = {onLoad} />
+const Image = ({ imageUrl, onLoad, caption }) => {
+  return <figure><img src={imageUrl} alt={caption} onLoad={onLoad} id="image"/><figcaption>A typical {caption} going about its business</figcaption></figure>;
 }
 export default Image;
diff --git a/src/components/Searchbox.js b/src/components/Searchbox.js
@@ -10,7 +10,8 @@ const Searchbox = ({ setSearchWord , setPlaceholder , placeholder, setImageLoade
 
   return (
     <form onSubmit={search}>
-      <input type="text" maxLength="20" placeholder={placeholder}></input>
+      <label htmlFor="searchword">Ask the AI</label>
+      <input type="text" maxLength="20" placeholder={placeholder} id="searchword"></input>
       <button type="submit">look it up</button>
     </form>
   );

diff --git a/src/components/Spinner.js b/src/components/Spinner.js
@@ -1,4 +1,4 @@
 const Spinner = () => {
-    return <img src= "./loading.gif" alt="loading" className = "spinner"/>
+    return <div className ="spinner"></div>
   }
   export default Spinner;
diff --git a/public/loading.gif → src/loading.gif b/public/loading.gif → src/loading.gif