diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/views/StyleProviderQuiz.tsx | 21 | ||||
| -rw-r--r-- | src/client/views/nodes/ImageBox.tsx | 12 |
2 files changed, 16 insertions, 17 deletions
diff --git a/src/client/views/StyleProviderQuiz.tsx b/src/client/views/StyleProviderQuiz.tsx index 8973ada95..1f2ad1485 100644 --- a/src/client/views/StyleProviderQuiz.tsx +++ b/src/client/views/StyleProviderQuiz.tsx @@ -83,7 +83,7 @@ export namespace styleProviderQuiz { imgBox.Document._quizMode = quiz; const quizBoxes = DocListCast(imgBox.Document.quizBoxes); if (!quizBoxes.length) { - // this._loading = true; + imgBox.Loading = true; const img = { file: i ? i : imgBox.paths[0], @@ -98,7 +98,7 @@ export namespace styleProviderQuiz { if (response.data['boxes'].length != 0) { createBoxes(imgBox, response.data['boxes'], response.data['text']); } else { - // this._loading = false; + imgBox.Loading = false; } } else quizBoxes.forEach(box => (box.hidden = false)); } @@ -121,7 +121,7 @@ export namespace styleProviderQuiz { * Create flashcards from an image. */ async function getImageDesc(img: ImageBox) { - // this._loading = true; + img.Loading = true; try { const hrefBase64 = await createCanvas(img); const response = await gptImageLabel(hrefBase64, 'Make flashcards out of this image with each question and answer labeled as "question" and "answer". Do not label each flashcard and do not include asterisks: '); @@ -129,7 +129,7 @@ export namespace styleProviderQuiz { } catch (error) { console.log('Error', error); } - // this._loading = false; + img.Loading = false; } /** @@ -241,14 +241,21 @@ export namespace styleProviderQuiz { return { error: 'The input string does not match the expected format.' }; } } + function imgQuizBoxes(img: ImageBox) { + return DocListCast(img.Document.quizBoxes); + } + function imgQuizMode(img: ImageBox) { + return StrCast(img.Document._quizMode); + } + /** * Check whether the contents of the label boxes on an image are correct. */ function check(img: ImageBox) { //this._loading = true; - img.quizBoxes.forEach(async doc => { + imgQuizBoxes(img).forEach(async doc => { const input = StrCast(doc[DocData].title); - if (img.quizMode == quizMode.SMART && input) { + if (imgQuizMode(img) == quizMode.SMART && input) { const questionText = 'Question: What was labeled in this image?'; const rubricText = ' Rubric: ' + StrCast(doc.quiz); const queryText = @@ -271,7 +278,7 @@ export namespace styleProviderQuiz { } function redo(img: ImageBox) { - img.quizBoxes.forEach(doc => { + imgQuizBoxes(img).forEach(doc => { doc[DocData].title = ''; doc.backgroundColor = '#e4e4e4'; }); diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx index 0b474076b..0827eb062 100644 --- a/src/client/views/nodes/ImageBox.tsx +++ b/src/client/views/nodes/ImageBox.tsx @@ -80,12 +80,12 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { private _annotationLayer: React.RefObject<HTMLDivElement> = React.createRef(); imageRef: HTMLImageElement | null = null; // <video> ref marqueeref = React.createRef<MarqueeAnnotator>(); + @observable Loading = false; // bcz: this should be migrated into StylProviderQuiz since it's not fundamental to the imageBox @observable private _searchInput = ''; @observable private _savedAnnotations = new ObservableMap<number, (HTMLDivElement & { marqueeing?: boolean })[]>(); @observable private _curSuffix = ''; @observable private _error = ''; - @observable private _loading = false; @observable private _isHovering = false; // flag to switch between primary and alternate images on hover constructor(props: FieldViewProps) { @@ -98,14 +98,6 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { this._dropDisposer?.(); ele && (this._dropDisposer = DragManager.MakeDropTarget(ele, this.drop.bind(this), this.Document)); }; - - @computed get quizBoxes() { - return DocListCast(this.Document.quizBoxes); - } - @computed get quizMode() { - return StrCast(this.Document._quizMode); - } - getAnchor = (addAsAnnotation: boolean, pinProps?: PinProps) => { const visibleAnchor = this._getAnchor?.(this._savedAnnotations, true); // use marquee anchor, otherwise, save zoom/pan as anchor const anchor = @@ -562,7 +554,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { addDocument={this.addDocument}> {this.content} </CollectionFreeFormView> - {this._loading ? ( + {this.Loading ? ( <div className="loading-spinner" style={{ position: 'absolute' }}> <ReactLoading type="spin" height={50} width={50} color={'blue'} /> </div> |