From fb4304c0e02aef4a0cedabfdc23ef39c4ca0eca8 Mon Sep 17 00:00:00 2001
From: Sophie Zhang <sophie_zhang@brown.edu>
Date: Thu, 23 Feb 2023 13:00:18 -0500
Subject: text

---
 src/client/apis/gpt/Summarization.ts | 18 +++------------
 src/client/views/pdf/AnchorMenu.tsx  | 22 ++++++++++++++----
 src/client/views/pdf/GPTPopup.scss   | 45 +++++++++++++++++++++++++++++++++++-
 src/client/views/pdf/GPTPopup.tsx    | 15 +++++++++++-
 4 files changed, 79 insertions(+), 21 deletions(-)

(limited to 'src')

diff --git a/src/client/apis/gpt/Summarization.ts b/src/client/apis/gpt/Summarization.ts
index 3706c7a5b..931e0e48f 100644
--- a/src/client/apis/gpt/Summarization.ts
+++ b/src/client/apis/gpt/Summarization.ts
@@ -1,13 +1,14 @@
 import { Configuration, OpenAIApi } from 'openai';
 
 const gptSummarize = async (text: string) => {
+    text += '.';
     try {
         const configuration = new Configuration({
             apiKey: process.env.OPENAI_KEY,
         });
         const openai = new OpenAIApi(configuration);
         const response = await openai.createCompletion({
-            model: 'text-davinci-003',
+            model: 'text-curie-001',
             max_tokens: 256,
             temperature: 0.7,
             prompt: `Summarize this text in one sentence: ${text}`,
@@ -19,17 +20,4 @@ const gptSummarize = async (text: string) => {
     }
 };
 
-// Summarizing with the MeaningCloud API
-const fetchSummary = async (text: string, numSentences?: number) => {
-    const key = '0b41c071f838e573847f477e8f69e9d9';
-    const queryURL = '';
-    const sentences = numSentences ? numSentences : 3;
-    const URL = `https://api.meaningcloud.com/summarization-1.0?key=${key}&txt=${text}&sentences=${sentences}`;
-
-    const res = await fetch(URL);
-    const data = await res.json();
-    console.log(data.summary);
-    return data.summary;
-};
-
-export { fetchSummary, gptSummarize };
+export { gptSummarize };
diff --git a/src/client/views/pdf/AnchorMenu.tsx b/src/client/views/pdf/AnchorMenu.tsx
index 63c8f9145..6bcfbe4c2 100644
--- a/src/client/views/pdf/AnchorMenu.tsx
+++ b/src/client/views/pdf/AnchorMenu.tsx
@@ -47,6 +47,7 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
 
     // GPT additions (flow 2)
     @observable private summarizedText: string = '';
+    @observable private loadingSummary: boolean = false;
     @observable private showGPTPopup: boolean = false;
     @action
     setGPTPopupVis = (vis: boolean) => {
@@ -56,6 +57,10 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
     setSummarizedText = (txt: string) => {
         this.summarizedText = txt;
     };
+    @action
+    setLoading = (loading: boolean) => {
+        this.loadingSummary = loading;
+    };
 
     private selectedText: string = '';
     setSelectedText = (txt: string) => {
@@ -98,7 +103,13 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
     componentDidMount() {
         this._disposer2 = reaction(
             () => this._opacity,
-            opacity => !opacity && (this._showLinkPopup = false),
+            opacity => {
+                if (!opacity) {
+                    this._showLinkPopup = false;
+                    this.setGPTPopupVis(false);
+                    this.setSummarizedText('');
+                }
+            },
             { fireImmediately: true }
         );
         this._disposer = reaction(
@@ -106,6 +117,7 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
             selected => {
                 this._showLinkPopup = false;
                 this.setGPTPopupVis(false);
+                this.setSummarizedText('');
                 AnchorMenu.Instance.fadeOut(true);
             }
         );
@@ -117,12 +129,14 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
 
     invokeGPT = async (e: React.PointerEvent) => {
         this.setGPTPopupVis(true);
+        this.setLoading(true);
         const res = await gptSummarize(this.selectedText);
         if (res) {
             this.setSummarizedText(res);
         } else {
             this.setSummarizedText('Something went wrong.');
         }
+        this.setLoading(false);
     };
 
     pointerDown = (e: React.PointerEvent) => {
@@ -229,12 +243,12 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
                             <FontAwesomeIcon icon="comment-alt" size="lg" />
                         </button>
                     </Tooltip>
-                    <Tooltip key="gpt" title={<div className="dash-tooltip">Summarize with GPT-3</div>}>
-                        <button className="antimodeMenu-button annotate" onPointerDown={this.getGPTSummary} style={{ cursor: 'grab' }}>
+                    <Tooltip key="gpt" title={<div className="dash-tooltip">Summarize with AI</div>}>
+                        <button className="antimodeMenu-button annotate" onPointerDown={this.invokeGPT} style={{ cursor: 'grab' }}>
                             <FontAwesomeIcon icon="comment-dots" size="lg" />
                         </button>
                     </Tooltip>
-                    <GPTPopup key="gptpopup" visible={this.showGPTPopup} text={this.summarizedText} />
+                    <GPTPopup key="gptpopup" visible={this.showGPTPopup} text={this.summarizedText} loadingSummary={this.loadingSummary} />
                     {AnchorMenu.Instance.OnAudio === unimplementedFunction ? null : (
                         <Tooltip key="annoaudiotate" title={<div className="dash-tooltip">Click to Record Annotation</div>}>
                             <button className="antimodeMenu-button annotate" onPointerDown={this.audioDown} style={{ cursor: 'grab' }}>
diff --git a/src/client/views/pdf/GPTPopup.scss b/src/client/views/pdf/GPTPopup.scss
index 6f2e39b7e..9605cfd07 100644
--- a/src/client/views/pdf/GPTPopup.scss
+++ b/src/client/views/pdf/GPTPopup.scss
@@ -1,9 +1,52 @@
+$textgrey: #707070;
+$bordergrey: #d3d3d3;
+
 .summary-box {
     background-color: #ffffff;
+    box-shadow: 0 2px 5px #7474748d;
+    color: $textgrey;
     position: absolute;
-    top: 0;
+    bottom: 40px;
     width: 200px;
     height: 200px;
+    border-radius: 15px;
     padding: 20px;
     overflow: auto;
+
+    .summary-heading {
+        display: flex;
+        align-items: center;
+        border-bottom: 1px solid $bordergrey;
+        margin-bottom: 10px;
+        padding-bottom: 5px;
+
+        .summary-text {
+            font-size: 12px;
+            font-weight: 500;
+            letter-spacing: 1px;
+            margin: 0;
+            padding-right: 10px;
+        }
+    }
+}
+
+// Typist CSS
+.Typist .Cursor {
+    display: inline-block;
+}
+.Typist .Cursor--blinking {
+    opacity: 1;
+    animation: blink 1s linear infinite;
+}
+
+@keyframes blink {
+    0% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
 }
diff --git a/src/client/views/pdf/GPTPopup.tsx b/src/client/views/pdf/GPTPopup.tsx
index 110351126..76f3c8187 100644
--- a/src/client/views/pdf/GPTPopup.tsx
+++ b/src/client/views/pdf/GPTPopup.tsx
@@ -1,10 +1,13 @@
 import { observer } from 'mobx-react';
 import React = require('react');
+import ReactLoading from 'react-loading';
+import Typist from 'react-typist';
 import './GPTPopup.scss';
 
 interface GPTPopupProps {
     visible: boolean;
     text: string;
+    loadingSummary: boolean;
 }
 
 @observer
@@ -12,7 +15,17 @@ export class GPTPopup extends React.Component<GPTPopupProps> {
     render() {
         return (
             <div className="summary-box" style={{ display: this.props.visible ? 'block' : 'none' }}>
-                {`Summary: ${this.props.text}`}
+                <div className="summary-heading">
+                    <label className="summary-text">SUMMARY</label>
+                    {this.props.loadingSummary ? <ReactLoading type="spin" color="#bcbcbc" width={14} height={14} /> : <></>}
+                </div>
+                {!this.props.loadingSummary ? (
+                    <Typist key={this.props.text} avgTypingDelay={20} cursor={{ hideWhenDone: true }}>
+                        {this.props.text}
+                    </Typist>
+                ) : (
+                    <></>
+                )}
             </div>
         );
     }
-- 
cgit v1.2.3-70-g09d2