From e95d25eb8159bb7c753fa27e74e9baa8d3bffea6 Mon Sep 17 00:00:00 2001
From: alyssaf16 <alyssa_feinberg@brown.edu>
Date: Sat, 30 Mar 2024 00:06:27 -0400
Subject: working on making flashcards from pdf with ai

---
 src/client/views/pdf/AnchorMenu.tsx        | 23 ++++++++++++++++++
 src/client/views/pdf/GPTPopup/GPTPopup.tsx | 39 +++++++++++++++++++++++++++++-
 src/client/views/pdf/PDFViewer.tsx         |  4 +++
 3 files changed, 65 insertions(+), 1 deletion(-)

(limited to 'src/client/views/pdf')

diff --git a/src/client/views/pdf/AnchorMenu.tsx b/src/client/views/pdf/AnchorMenu.tsx
index d0688c338..844c1e36d 100644
--- a/src/client/views/pdf/AnchorMenu.tsx
+++ b/src/client/views/pdf/AnchorMenu.tsx
@@ -6,6 +6,7 @@ import * as React from 'react';
 import { ColorResult } from 'react-color';
 import { Utils, returnFalse, setupMoveUpEvents, unimplementedFunction } from '../../../Utils';
 import { Doc, Opt } from '../../../fields/Doc';
+import { DocUtils, Docs } from '../../documents/Documents';
 import { GPTCallType, gptAPICall } from '../../apis/gpt/GPT';
 import { DocumentType } from '../../documents/DocumentTypes';
 import { SelectionManager } from '../../util/SelectionManager';
@@ -87,6 +88,22 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
         GPTPopup.Instance.setLoading(false);
     };
 
+    gptFlashcards = async (e: React.PointerEvent) => {
+        // move this logic to gptpopup, need to implement generate again
+        // GPTPopup.Instance.setVisible(true);
+        // GPTPopup.Instance.setMode(GPTPopupMode.FLASHCARD);
+        // GPTPopup.Instance.setLoading(true);
+
+        try {
+            const res = await gptAPICall(this.selectedText, GPTCallType.FLASHCARD);
+            GPTPopup.Instance.setText(res || 'Something went wrong.');
+            GPTPopup.Instance.transferToFlashcard();
+        } catch (err) {
+            console.error(err);
+        }
+        GPTPopup.Instance.setLoading(false);
+    };
+
     pointerDown = (e: React.PointerEvent) => {
         setupMoveUpEvents(
             this,
@@ -176,6 +193,12 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
                             color={SettingsManager.userColor}
                         />
                     )}
+                    <IconButton
+                        tooltip="Create flashcards" //
+                        onPointerDown={this.gptFlashcards}
+                        icon={<FontAwesomeIcon icon="id-card" size="lg" />}
+                        color={SettingsManager.userColor}
+                    />
                     {AnchorMenu.Instance.OnAudio === unimplementedFunction ? null : (
                         <IconButton
                             tooltip="Click to Record Annotation" //
diff --git a/src/client/views/pdf/GPTPopup/GPTPopup.tsx b/src/client/views/pdf/GPTPopup/GPTPopup.tsx
index da8a88803..dbcdd4e3a 100644
--- a/src/client/views/pdf/GPTPopup/GPTPopup.tsx
+++ b/src/client/views/pdf/GPTPopup/GPTPopup.tsx
@@ -15,11 +15,14 @@ import { DocUtils, Docs } from '../../../documents/Documents';
 import { ObservableReactComponent } from '../../ObservableReactComponent';
 import { AnchorMenu } from '../AnchorMenu';
 import './GPTPopup.scss';
+import { ComparisonBox } from '../../nodes/ComparisonBox';
+import { DashColor, emptyFunction, lightOrDark, returnFalse } from '../../../../Utils';
 
 export enum GPTPopupMode {
     SUMMARY,
     EDIT,
     IMAGE,
+    FLASHCARD,
 }
 
 interface GPTPopupProps {}
@@ -149,6 +152,22 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> {
         }
     };
 
+    transferToFlashcard = () => {
+        const senArr = this.text.split('.');
+        for (var i = 0; i < senArr.length; i += 2) {
+            console.log('SEN: ' + senArr[i]);
+            const newDoc = Docs.Create.ComparisonDocument(senArr[i], { _layout_isFlashcard: true, _width: 300, _height: 300 });
+            newDoc.text = senArr[i];
+            this.addDoc(newDoc, this.sidebarId);
+            const anchor = AnchorMenu.Instance?.GetAnchor(undefined, false);
+            if (anchor) {
+                DocUtils.MakeLink(newDoc, anchor, {
+                    link_relationship: 'GPT Summary',
+                });
+            }
+        }
+    };
+
     /**
      * Transfers the image urls to actual image docs
      */
@@ -213,6 +232,23 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> {
         );
     };
 
+    flashcardBox = () => {
+        // const textArr = this.text.split(".");
+        // textArr.forEach(function(sentence) {
+        //     console.log(sentence);
+
+        // });
+        // const newDoc = Docs.Create.ComparisonDocument();
+        // this.addToCollection?.(newDoc);
+        // // const newDoc = Docs.Create.ComparisonDocument();
+        // DocUtils.copyDragFactory(Doc.UserDoc().emptyFlashcard as Doc);
+        // // this.addToCollection?.(newDoc);
+        // // return newDoc;
+        // <ComparisonBox/>
+        const newDoc = Docs.Create.TextDocument('Hello there');
+        this.addDoc?.(newDoc);
+    };
+
     data = () => {
         return (
             <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
@@ -268,6 +304,7 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> {
                         <>
                             <IconButton tooltip="Generate Again" onClick={this.callSummaryApi} icon={<FontAwesomeIcon icon="redo-alt" size="lg" />} color={StrCast(Doc.UserDoc().userVariantColor)} />
                             <Button tooltip="Transfer to text" text="Transfer To Text" onClick={this.transferToText} color={StrCast(Doc.UserDoc().userVariantColor)} type={Type.TERT} />
+                            {/* <Button tooltip="Transfer to flashcard" text="flashcard" onClick={this.transferToFlashcard} color={StrCast(Doc.UserDoc().userVariantColor)} type={Type.TERT} /> */}
                         </>
                     ) : (
                         <div className="summarizing">
@@ -308,7 +345,7 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> {
     render() {
         return (
             <div className="summary-box" style={{ display: this.visible ? 'flex' : 'none' }}>
-                {this.mode === GPTPopupMode.SUMMARY ? this.summaryBox() : this.mode === GPTPopupMode.IMAGE ? this.imageBox() : <></>}
+                {this.mode === GPTPopupMode.SUMMARY ? this.summaryBox() : this.mode === GPTPopupMode.IMAGE ? this.imageBox() : this.mode == GPTPopupMode.FLASHCARD ? this.summaryBox() : <></>}
             </div>
         );
     }
diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx
index 0d4cfda88..7d8529a1c 100644
--- a/src/client/views/pdf/PDFViewer.tsx
+++ b/src/client/views/pdf/PDFViewer.tsx
@@ -20,11 +20,13 @@ import { MarqueeAnnotator } from '../MarqueeAnnotator';
 import { FocusViewOptions, FieldViewProps } from '../nodes/FieldView';
 import { LinkInfo } from '../nodes/LinkDocPreview';
 import { PDFBox } from '../nodes/PDFBox';
+import { ComparisonBox } from '../nodes/ComparisonBox';
 import { ObservableReactComponent } from '../ObservableReactComponent';
 import { StyleProp } from '../StyleProvider';
 import { AnchorMenu } from './AnchorMenu';
 import { Annotation } from './Annotation';
 import { GPTPopup } from './GPTPopup/GPTPopup';
+import { Docs } from '../../documents/Documents';
 import './PDFViewer.scss';
 const _global = (window /* browser */ || global) /* node */ as any;
 
@@ -415,6 +417,8 @@ export class PDFViewer extends ObservableReactComponent<IViewerProps> {
         // Changing which document to add the annotation to (the currently selected PDF)
         GPTPopup.Instance.setSidebarId('data_sidebar');
         GPTPopup.Instance.addDoc = this._props.sidebarAddDoc;
+        // const newDoc = Docs.Create.ComparisonDocument({ _layout_isFlashcard: true, _width: 300, _height: 300 });
+        // this.props.addDocument?.(newDoc);
     };
 
     @action
-- 
cgit v1.2.3-70-g09d2