diff options
Diffstat (limited to 'src/client/views/pdf')
| -rw-r--r-- | src/client/views/pdf/AnchorMenu.tsx | 47 | ||||
| -rw-r--r-- | src/client/views/pdf/Annotation.scss | 32 | ||||
| -rw-r--r-- | src/client/views/pdf/PDFViewer.scss | 21 | ||||
| -rw-r--r-- | src/client/views/pdf/PDFViewer.tsx | 52 |
4 files changed, 112 insertions, 40 deletions
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<AntimodeMenuProps> { this._y = y; }; + @computed public get selectedText() { + return this._selectedText; + } public onMakeAnchor: () => Opt<Doc> = () => undefined; // Method to get anchor from text search public OnCrop: (e: PointerEvent) => void = unimplementedFunction; @@ -68,6 +71,7 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> { 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<AntimodeMenuProps> { * 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<AntimodeMenuProps> { /> )} {/* Adds a create flashcards option to the anchor menu, which calls the gptFlashcard method. */} - <IconButton - tooltip="Create flashcards" // - onPointerDown={e => this.gptFlashcards(e)} - icon={<FontAwesomeIcon icon="id-card" size="lg" />} - 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" // @@ -267,11 +266,11 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> { /> </div> )} - {this._loading ? ( + {/* {this._loading ? ( <div className="loading-spinner" style={{ position: 'absolute' }}> <ReactLoading type="spin" height={30} width={30} color={'white'} /> </div> - ) : 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<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> ); } |