Merge pull request #13 from bliutech/jordan

jordan: add summary and captioning frontend

client/src/App.css

@@ -5,7 +5,7 @@
 
 :root {
   /* sizes */
-  --scale: min(max(min(1vw, 1.5vh), 3.6px), 10.8px);
+  --scale: min(max(min(1vw, 1.4vh), 3.6px), 10.8px);
   --bar-ratio: 20;
   --page-width: min(
     calc(125 * var(--scale)),
@@ -107,7 +107,7 @@ img {
 figcaption {
   color: var(--color-text-sub);
   font-style: italic;
-  margin-top: calc(-2 * var(--scale));
+  margin: calc(-2 * var(--scale)) 0 calc(2 * var(--scale)) 0;
 }
 
 table,

client/src/App.js

@@ -7,6 +7,7 @@ import { Article } from "./pages/Article";
 import { Edit } from "./pages/Edit";
 import { New } from "./pages/New";
 import { StableDiffusion } from "./pages/StableDiffusion";
+import { About } from "./pages/About";
 import { SignIn } from "./pages/SignIn";
 import { SignUp } from "./pages/SignUp";
 
@@ -27,6 +28,7 @@ function App() {
                 <Route path="/e/:articleID" element={<Edit />} />
                 <Route path="/new" element={<New />} />
                 <Route path="/stablediffusion" element={<StableDiffusion />} />
+                <Route path="/about" element={<About />} />
                 <Route path="/signin" element={<SignIn />} />
                 <Route path="/signup" element={<SignUp />} />
               </Routes>

client/src/api/articles.js

@@ -39,7 +39,6 @@ async function getArticle(articleID, callback = () => {}) {
     window.alert(message);
     return;
   }
-
   const object = await response.json();
   return object["response"];
 }
@@ -91,27 +90,4 @@ async function deleteArticle(articleID, callback = () => {}) {
   }
 }
 
-function articles(name) {
-  switch (name) {
-    case "ucla":
-      return `
-`;
-
-    case "mit":
-      return `
-      # Massachusetts Institute of Technology
-
-      ![MIT Great Dome](https://news.mit.edu/sites/default/files/download/201810/MIT-Computer-Announce-01-PRESS.jpg)
-      <figcaption> MIT Great Dome, a famous building on campus.</figcaption>
-
-      The Massachusetts Institute of Technology (MIT) is a private land-grant research university in Cambridge, Massachusetts. Established in 1861, MIT has since played a key role in the development of modern technology and science, ranking among the top academic institutions in the world.
-
-      ## Campus
-
-      MIT's 166-acre (67.2 ha) campus in the city of Cambridge spans approximately a mile along the north side of the Charles River basin. The campus is divided roughly in half by Massachusetts Avenue, with most dormitories and student life facilities to the west and most academic buildings to the east. The bridge closest to MIT is the Harvard Bridge, which is known for being marked off in a non-standard unit of length &ndash; the smoot.
-
-`;
-  }
-}
-
 export { createArticle, getArticle, changeArticle, deleteArticle };

client/src/api/ml.js

@@ -1,8 +1,24 @@
 const base = "http://localhost:5000";
 const showError = true;
 
-function getCaption(text) {
-  return;
+async function getCaption(text) {
+  const response = await fetch(`${base}/caption`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({ text: text }),
+  });
+
+  if (!response.ok) {
+    // server connection error
+    const message = `An error has occurred: ${response.statusText}`;
+    window.alert(message);
+    return;
+  }
+
+  const object = await response.json();
+  return object["captioned"];
 }
 
 async function getImage(prompt) {
@@ -22,8 +38,27 @@ async function getImage(prompt) {
   }
 
   const object = await response.json();
-  console.log(object["image_url"]);
   return object["image_url"];
 }
 
-export { getCaption, getImage };
+async function getSummary(text) {
+  const response = await fetch(`${base}/summarize`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({ text: text }),
+  });
+
+  if (!response.ok) {
+    // server connection error
+    const message = `An error has occurred: ${response.statusText}`;
+    window.alert(message);
+    return;
+  }
+
+  const object = await response.json();
+  return object["summary"];
+}
+
+export { getCaption, getImage, getSummary };

client/src/components/Editor.js

@@ -60,7 +60,7 @@ function Editor() {
       <br />
       <div className="editor-button">
         <div>
-          <button className="editor-caption" onClick={{}}>
+          <button className="editor-caption" onClick={handleCaption}>
             Generate Captions
           </button>
         </div>

client/src/pages/About.js

@@ -0,0 +1,25 @@
+function About() {
+  return (
+    <>
+      <h1>What is Wikisafe?</h1>
+      <img src="https://replicate.com/api/models/stability-ai/stable-diffusion/files/3b498104-5ee3-450a-a701-326df34af62f/out-0.png" />
+      <p>
+        <strong>Wikisafe</strong> is a crowdsourced solution utilizing
+        blockchain technology and machine learning to promote the spread of
+        shared knowledge! We seek to provide an enhanced educational experience
+        by leveraging technology such as the ethereum blockchain, computer
+        vision, and natural language processing! Wikisafe seeks to improve upon
+        its predecesors by adding more secure and reliable crowdsourced content.
+        It also seeks to help contributors have a easier experience by adding
+        machine learning models to perform captioning, summarizing, and
+        generation to enhance the fidelity of articles!
+      </p>
+      <p>
+        Start contributing to Wikisafe today by creating an account and editing
+        and adding an article!
+      </p>
+    </>
+  );
+}
+
+export { About };

client/src/pages/Article.js

@@ -12,10 +12,14 @@ import {
   deleteArticle,
 } from "../api/articles";
 
+import { getSummary } from "../api/ml";
+
 function Article(props) {
   const [article, setArticle] = useState("");
   const { articleID } = useParams();
 
+  const [summary, setSummary] = useState("");
+
   function getTitle(text) {
     let start = text.indexOf("#") + 1;
     let end = text.indexOf("\n\n", start);
@@ -29,6 +33,7 @@ function Article(props) {
   function toHTML(text) {
     let textHTML = marked.parse(text);
     textHTML = DOMPurify.sanitize(textHTML); // very important for security!
+    document.title = getTitle(article);
     return textHTML;
   }
 
@@ -38,15 +43,29 @@ function Article(props) {
         setArticle(props.text);
       } else {
         const articlePlain = await getArticle(articleID);
-        console.log(articlePlain);
         setArticle(articlePlain);
       }
     }
     handleArticle();
-    document.title = getTitle(article);
   }, [props.text, articleID]);
 
-  return <div dangerouslySetInnerHTML={{ __html: toHTML(article) }}></div>;
+  async function handleSummary() {
+    const summaryRaw = await getSummary(article);
+    setSummary(summaryRaw);
+  }
+
+  return (
+    <div>
+      <div dangerouslySetInnerHTML={{ __html: toHTML(article) }}></div>
+      <h1>TL;DR</h1>
+      <figcaption>
+        Did not want to read all that? Check out the summary by clicking the
+        button below :)
+      </figcaption>
+      <button onClick={handleSummary}>Summary</button>
+      <div dangerouslySetInnerHTML={{ __html: toHTML(summary) }}></div>
+    </div>
+  );
 }
 
 export { Article };

client/src/pages/Home.js

@@ -1,11 +1,11 @@
 import { Link } from "react-router-dom";
 
 function Home() {
-  document.title = "WikiSafe";
+  document.title = "Wikisafe";
 
   return (
     <div>
-      <h1>WikiSafe</h1>
+      <h1>Wikisafe</h1>
 
       <figcaption>
         A crowdsourced knowledge database powered by ML and blockchain.

client/src/pages/New.js

@@ -12,6 +12,8 @@ import {
 } from "../api/articles";
 
 function New() {
+  document.title = "New Article";
+
   const [cookies, setCookie, removeCookie] = useCookies(["username"]);
   const username = cookies.username;
 

client/src/pages/StableDiffusion.js

@@ -5,6 +5,8 @@ import { Form } from "../components/Form";
 import { getImage } from "../api/ml";
 
 function StableDiffusion() {
+  document.title = "Stable Diffusion";
+
   /* default to transparent image */
   const [imageURL, setImageURL] = useState(
     "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"

server/app.py

@@ -1,4 +1,4 @@
-from regex import R
+import re
 from flask import Flask, request, Response
 from flask_sqlalchemy import SQLAlchemy
 from flask_cors import CORS
@@ -203,7 +203,7 @@ def summarize():
     )
     summary = resp.json()["summary"]
 
-    return summary
+    return json.dumps({"summary": summary}), 200
 
 
 # stable diffusion (image generation)
@@ -218,44 +218,73 @@ def stable_diffusion():
     return json.dumps({"image_url": image_url}), 200
 
 
-@app.post("/caption_image")
-def CLIP():
-    image_link = request.json.get("image_link")
-
+def CLIP(image_link):
     # Get caption for image
     os.environ["REPLICATE_API_TOKEN"] = "6cdf7546f955d96f4db3508022a5f126022fc105"
     model = replicate.models.get("rmokady/clip_prefix_caption")
-    res = {"response": model.predict(image=image_link)}
-    return json.dumps(res)
+    return model.predict(image=image_link)
+
+
+def add_captions(md):
+    # Returns markdown string md with added captions for all the images where captions where missing
+    return re.sub(
+        r"\!\[(.*)\]\((.*)\)(?!\s*<figcaption>.*</figcaption>)",
+        lambda x: "!["
+        + x.group(1)
+        + "]("
+        + x.group(2)
+        + ")<figcaption>"
+        + CLIP(x.group(2))
+        + "</figcaption>",
+        re.sub(
+            r"\!\[(.*)\]\((.*)\)\s*<figcaption>\s*</figcaption>",
+            lambda x: "!["
+            + x.group(1)
+            + "]("
+            + x.group(2)
+            + ")<figcaption>"
+            + CLIP(x.group(2))
+            + "</figcaption>",
+            md,
+        ),
+    )
+
+
+@app.route("/caption", methods=["POST"])
+def caption():
+    request_dict = request.json
+    text = request_dict["text"]
+    text_captioned = add_captions(text)
+    return json.dumps({"captioned": text_captioned}), 200
 
 
 # sentiment analysis func
-def Sincere(revision):
-    class FullyConnected(nn.Module):
-        def __init__(self, vocab_size, hidden1, hidden2, hidden3):
-            super(FullyConnected, self).__init__()
-            self.fc1 = nn.Linear(vocab_size, hidden1)
-            self.fc2 = nn.Linear(hidden1, hidden2)
-            self.fc3 = nn.Linear(hidden2, hidden3)
-            self.fc4 = nn.Linear(hidden3, 1)
-
-        def forward(self, inputs):
-            x = F.relu(self.fc1(inputs.squeeze(1).float()))
-            x = F.relu(self.fc2(x))
-            x = F.relu(self.fc3(x))
-            return self.fc4(x)
-
-    BERT = SentenceTransformer("bert-base-nli-mean-tokens")
-    revision = BERT.encode(revision)
-    model = FullyConnected(768, 128, 64, 8)
-    model.load_state_dict(
-        torch.load(
-            r"C:\Users\email\OneDrive\Documents\Python\quora_classifier\BERT_wikipedia_file",
-            map_location=torch.device("cpu"),
-        )
-    )
-    model = model.to("cpu")
-    return round(torch.sigmoid(model(torch.tensor(revision).reshape([768, 1]))).item())
+# def Sincere(revision):
+#     class FullyConnected(nn.Module):
+#         def __init__(self, vocab_size, hidden1, hidden2, hidden3):
+#             super(FullyConnected, self).__init__()
+#             self.fc1 = nn.Linear(vocab_size, hidden1)
+#             self.fc2 = nn.Linear(hidden1, hidden2)
+#             self.fc3 = nn.Linear(hidden2, hidden3)
+#             self.fc4 = nn.Linear(hidden3, 1)
+
+#         def forward(self, inputs):
+#             x = F.relu(self.fc1(inputs.squeeze(1).float()))
+#             x = F.relu(self.fc2(x))
+#             x = F.relu(self.fc3(x))
+#             return self.fc4(x)
+
+#     BERT = SentenceTransformer("bert-base-nli-mean-tokens")
+#     revision = BERT.encode(revision)
+#     model = FullyConnected(768, 128, 64, 8)
+#     model.load_state_dict(
+#         torch.load(
+#             r"C:\Users\email\OneDrive\Documents\Python\quora_classifier\BERT_wikipedia_file",
+#             map_location=torch.device("cpu"),
+#         )
+#     )
+#     model = model.to("cpu")
+#     return round(torch.sigmoid(model(torch.tensor(revision).reshape([768, 1]))).item())
 
 
 if __name__ == "__main__":