working on various image flashcard ideas

1 files changed, 52 insertions, 0 deletions

diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx
index af7a5774d..befbee48b 100644
--- a/src/client/views/pdf/PDFViewer.tsx
+++ b/src/client/views/pdf/PDFViewer.tsx
@@ -32,6 +32,8 @@ import { Annotation } from './Annotation';
 import { GPTPopup } from './GPTPopup/GPTPopup';
 import { Docs } from '../../documents/Documents';
 import './PDFViewer.scss';
+import { GPTCallType, gptAPICall } from '../../apis/gpt/GPT';
+import ReactLoading from 'react-loading';
 
 // pdfjsLib.GlobalWorkerOptions.workerSrc = `/assets/pdf.worker.js`;
 // The workerSrc property shall be specified.
@@ -70,6 +72,7 @@ export class PDFViewer extends ObservableReactComponent<IViewerProps> {
     @observable _textSelecting = true;
     @observable _showWaiting = true;
     @observable Index: number = -1;
+    @observable private _loading = false;
 
     private _pdfViewer: any;
     private _styleRule: any; // stylesheet rule for making hyperlinks clickable
@@ -406,6 +409,49 @@ export class PDFViewer extends ObservableReactComponent<IViewerProps> {
         }
     };
 
+    gptPDFFlashcards = async () => {
+        const queryText = this._selectionText;
+        this._loading = true;
+        try {
+            const res = await gptAPICall(queryText, GPTCallType.FLASHCARD);
+            console.log(res);
+            // GPTPopup.Instance.setText(res || 'Something went wrong.');
+            AnchorMenu.Instance.transferToFlashcard(res || 'Something went wrong');
+            // this.transferToFlashcard(res || 'Something went wrong');
+        } catch (err) {
+            console.error(err);
+        }
+        this._loading = false;
+        // GPTPopup.Instance.setLoading(false);
+    };
+
+    // transferToFlashcard = (text: string) => {
+    //     // put each question generated by GPT on the front of the flashcard
+    //     var senArr = text.trim().split('Question: ');
+    //     var collectionArr: Doc[] = [];
+    //     for (let i = 1; i < senArr.length; i++) {
+    //         console.log('Arr ' + i + ': ' + senArr[i]);
+    //         const newDoc = Docs.Create.ComparisonDocument(senArr[i], { _layout_isFlashcard: true, _width: 300, _height: 300 });
+    //         newDoc.text = senArr[i];
+    //         collectionArr.push(newDoc);
+    //     }
+    //     // create a new carousel collection of these flashcards
+    //     const newCol = Docs.Create.CarouselDocument(collectionArr, {
+    //         _width: 250,
+    //         _height: 200,
+    //         _layout_fitWidth: false,
+    //         _layout_autoHeight: true,
+    //     });
+
+    //     newCol.x = this._props.layoutDoc['x'];
+    //     newCol.y = this._props.layoutDoc['y'];
+    //     newCol.zIndex = 100;
+
+    //     this._props.DocumentView?.()._props.addDocument?.(newCol);
+    //     console.log('HERE');
+    //     this._loading = false;
+    // };
+
     @action
     finishMarquee = (/* x?: number, y?: number */) => {
         this._getAnchor = AnchorMenu.Instance?.GetAnchor;
@@ -437,6 +483,7 @@ export class PDFViewer extends ObservableReactComponent<IViewerProps> {
         GPTPopup.Instance.addDoc = this._props.sidebarAddDoc;
         // allows for creating collection
         AnchorMenu.Instance.addToCollection = this._props.DocumentView?.()._props.addDocument;
+        AnchorMenu.Instance.gptFlashcards = this.gptPDFFlashcards;
     };
 
     @action
@@ -625,6 +672,11 @@ export class PDFViewer extends ObservableReactComponent<IViewerProps> {
                         />
                     )}
                 </div>
+                {this._loading ? (
+                    <div className="loading-spinner" style={{ position: 'absolute' }}>
+                        <ReactLoading type="spin" height={80} width={80} color={'blue'} />
+                    </div>
+                ) : null}
             </div>
         );
     }