From ad32c1606395cdc71ba50eb9b51d3a9d3b707ca0 Mon Sep 17 00:00:00 2001 From: alyssaf16 Date: Tue, 18 Jun 2024 15:23:12 -0400 Subject: working on various image flashcard ideas --- src/client/views/pdf/AnchorMenu.tsx | 47 ++++++++++++++++---------------- src/client/views/pdf/Annotation.scss | 32 +++++++++++----------- src/client/views/pdf/PDFViewer.scss | 21 +++++++++++++++ src/client/views/pdf/PDFViewer.tsx | 52 ++++++++++++++++++++++++++++++++++++ 4 files changed, 112 insertions(+), 40 deletions(-) (limited to 'src/client/views/pdf') diff --git a/src/client/views/pdf/AnchorMenu.tsx b/src/client/views/pdf/AnchorMenu.tsx index c1198b4f7..777117f26 100644 --- a/src/client/views/pdf/AnchorMenu.tsx +++ b/src/client/views/pdf/AnchorMenu.tsx @@ -54,6 +54,9 @@ export class AnchorMenu extends AntimodeMenu { this._y = y; }; + @computed public get selectedText() { + return this._selectedText; + } public onMakeAnchor: () => Opt = () => undefined; // Method to get anchor from text search public OnCrop: (e: PointerEvent) => void = unimplementedFunction; @@ -68,6 +71,7 @@ export class AnchorMenu extends AntimodeMenu { public MakeTargetToggle: () => void = unimplementedFunction; public ShowTargetTrail: () => void = unimplementedFunction; public IsTargetToggler: () => boolean = returnFalse; + public gptFlashcards: () => void = unimplementedFunction; public get Active() { return this._left > 0; } @@ -110,23 +114,23 @@ export class AnchorMenu extends AntimodeMenu { * Invokes the API with the selected text and stores it in the selected text. * @param e pointer down event */ - gptFlashcards = async (e: React.PointerEvent) => { - const queryText = this._selectedText; - this._loading = true; - try { - const res = await gptAPICall(queryText, GPTCallType.FLASHCARD); - console.log(res); - // GPTPopup.Instance.setText(res || 'Something went wrong.'); - this.transferToFlashcard(res || 'Something went wrong'); - } catch (err) { - console.error(err); - } - // GPTPopup.Instance.setLoading(false); - }; + // gptPDFFlashcards = async () => { + // const queryText = this._selectedText; + // this._loading = true; + // try { + // const res = await gptAPICall(queryText, GPTCallType.FLASHCARD); + // console.log(res); + // // GPTPopup.Instance.setText(res || 'Something went wrong.'); + // this.transferToFlashcard(res || 'Something went wrong'); + // } catch (err) { + // console.error(err); + // } + // // GPTPopup.Instance.setLoading(false); + // }; - /* - * Transfers the flashcard text generated by GPT on flashcards and creates a collection out them. - */ + // /* + // * Transfers the flashcard text generated by GPT on flashcards and creates a collection out them. + // */ transferToFlashcard = (text: string) => { // put each question generated by GPT on the front of the flashcard var senArr = text.trim().split('Question: '); @@ -236,12 +240,7 @@ export class AnchorMenu extends AntimodeMenu { /> )} {/* Adds a create flashcards option to the anchor menu, which calls the gptFlashcard method. */} - this.gptFlashcards(e)} - icon={} - color={SettingsManager.userColor} - /> + } color={SettingsManager.userColor} /> {AnchorMenu.Instance.OnAudio === unimplementedFunction ? null : ( { /> )} - {this._loading ? ( + {/* {this._loading ? (
- ) : null} + ) : null} */} ) : ( <> diff --git a/src/client/views/pdf/Annotation.scss b/src/client/views/pdf/Annotation.scss index 329819ea2..26856b74e 100644 --- a/src/client/views/pdf/Annotation.scss +++ b/src/client/views/pdf/Annotation.scss @@ -8,20 +8,20 @@ cursor: pointer; } } -.loading-spinner { - display: flex; - justify-content: center; - align-items: center; - height: 90%; - width: 93%; - left: 10; - font-size: 20px; - font-weight: bold; - color: #0b0a0a; -} +// .loading-spinner { +// display: flex; +// justify-content: center; +// align-items: center; +// height: 90%; +// width: 93%; +// left: 10; +// font-size: 20px; +// font-weight: bold; +// color: #0b0a0a; +// } -@keyframes spin { - to { - transform: rotate(360deg); - } -} +// @keyframes spin { +// to { +// transform: rotate(360deg); +// } +// } diff --git a/src/client/views/pdf/PDFViewer.scss b/src/client/views/pdf/PDFViewer.scss index d3dd9f727..e70102ce9 100644 --- a/src/client/views/pdf/PDFViewer.scss +++ b/src/client/views/pdf/PDFViewer.scss @@ -107,3 +107,24 @@ .pdfViewerDash-interactive { pointer-events: all; } + +.loading-spinner { + position: absolute; + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + // left: 50%; + // top: 50%; + z-index: 200; + font-size: 20px; + font-weight: bold; + color: #17175e; +} + +@keyframes spin { + to { + transform: rotate(360deg); + } +} 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 { @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 { } }; + 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 { 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 { /> )} + {this._loading ? ( +
+ +
+ ) : null} ); } -- cgit v1.2.3-70-g09d2