aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/StyleProviderQuiz.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/StyleProviderQuiz.tsx')
-rw-r--r--src/client/views/StyleProviderQuiz.tsx91
1 files changed, 42 insertions, 49 deletions
diff --git a/src/client/views/StyleProviderQuiz.tsx b/src/client/views/StyleProviderQuiz.tsx
index db9ab831a..fe76bce28 100644
--- a/src/client/views/StyleProviderQuiz.tsx
+++ b/src/client/views/StyleProviderQuiz.tsx
@@ -1,24 +1,25 @@
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Tooltip } from '@mui/material';
-import axios from 'axios';
+import { runInAction } from 'mobx';
import * as React from 'react';
import { returnFalse, setupMoveUpEvents } from '../../ClientUtils';
-import { emptyFunction } from '../../Utils';
+import { emptyFunction, unimplementedFunction } from '../../Utils';
import { Doc, DocListCast, Opt } from '../../fields/Doc';
import { DocData } from '../../fields/DocSymbols';
import { List } from '../../fields/List';
import { NumCast, StrCast } from '../../fields/Types';
-import { GPTCallType, gptAPICall, gptImageLabel } from '../apis/gpt/GPT';
+import { Networking } from '../Network';
+import { GPTCallType, gptAPICall } from '../apis/gpt/GPT';
import { Docs } from '../documents/Documents';
import { ContextMenu } from './ContextMenu';
import { ContextMenuProps } from './ContextMenuItem';
import { StyleProp } from './StyleProp';
-import { AnchorMenu } from './pdf/AnchorMenu';
+import './StyleProviderQuiz.scss';
import { DocumentViewProps } from './nodes/DocumentView';
import { FieldViewProps } from './nodes/FieldView';
import { ImageBox } from './nodes/ImageBox';
import { ImageUtility } from './nodes/imageEditor/imageEditorUtils/ImageHandler';
-import './StyleProviderQuiz.scss';
+import { AnchorMenu } from './pdf/AnchorMenu';
export namespace styleProviderQuiz {
enum quizMode {
@@ -45,8 +46,8 @@ export namespace styleProviderQuiz {
* @param boxes
* @param texts
*/
- async function createBoxes(img: ImageBox, boxes: [[[number, number]]], texts: [string]) {
- img.Document._quizBoxes = new List<Doc>([]);
+ async function createBoxes(img: ImageBox, boxes: number[][][], texts: string[]) {
+ img.Document.quizBoxes = new List<Doc>([]);
for (let i = 0; i < boxes.length; i++) {
const coords = boxes[i] ? boxes[i] : [];
const width = coords[1][0] - coords[0][0];
@@ -66,8 +67,8 @@ export namespace styleProviderQuiz {
newCol.zIndex = 1000;
newCol.forceActive = true;
newCol.quiz = text;
- newCol[DocData][Doc.LayoutFieldKey(newCol) + '_transform'] = 'none';
- Doc.AddDocToList(img.Document, '_quizBoxes', newCol);
+ newCol['$' + Doc.LayoutDataKey(newCol) + '_transform'] = 'none';
+ Doc.AddDocToList(img.Document, 'quizBoxes', newCol);
img.addDocument(newCol);
// img._loading = false;
}
@@ -83,23 +84,15 @@ export namespace styleProviderQuiz {
imgBox.Document._quizMode = quiz;
const quizBoxes = DocListCast(imgBox.Document.quizBoxes);
if (!quizBoxes.length) {
- imgBox.Loading = true;
+ runInAction(() => (imgBox.Loading = true));
- const img = {
- file: i ? i : imgBox.paths[0],
- drag: i ? 'drag' : 'full',
- smart: quiz,
- };
- const response = await axios.post('http://localhost:105/labels/', img, {
- headers: {
- 'Content-Type': 'application/json',
- },
- });
- if (response.data['boxes'].length != 0) {
- createBoxes(imgBox, response.data['boxes'], response.data['text']);
- } else {
- imgBox.Loading = false;
+ const response = (await Networking.PostToServer('/labels', { file: i ? i : imgBox.paths[0], drag: i ? 'drag' : 'full', smart: quiz })) as { result: string };
+ const replacedResponse = response.result.replace(/ '/g, '"').replace(/',/g, '",').replace(/\{'/g, '{"').replace(/':/g, '":').replace(/'\]/g, '"]').replace(/\['/g, '["');
+ const parsedResponse = JSON.parse(replacedResponse) as { boxes: number[][][]; text: string[] };
+ if (parsedResponse.boxes.length != 0) {
+ createBoxes(imgBox, parsedResponse.boxes, parsedResponse.text);
}
+ runInAction(() => (imgBox.Loading = false));
} else quizBoxes.forEach(box => (box.hidden = false));
}
@@ -117,20 +110,21 @@ export namespace styleProviderQuiz {
const blob = await ImageUtility.canvasToBlob(canvas);
return selectUrlToBase64(blob);
}
- /**
- * Create flashcards from an image.
- */
- async function getImageDesc(img: ImageBox) {
- 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: ');
- AnchorMenu.Instance.transferToFlashcard(response, NumCast(img.layoutDoc.x), NumCast(img.layoutDoc.y));
- } catch (error) {
- console.log('Error', error);
- }
- img.Loading = false;
- }
+
+ // /**
+ // * Create flashcards from an image.
+ // */
+ // async function makeFlashcardsForImage(img: ImageBox) {
+ // 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: ');
+ // AnchorMenu.Instance.transferToFlashcard(response, NumCast(img.layoutDoc.x), NumCast(img.layoutDoc.y));
+ // } catch (error) {
+ // console.log('Error', error);
+ // }
+ // img.Loading = false;
+ // }
/**
* Calls the createCanvas and pushInfo methods to convert the
@@ -230,8 +224,8 @@ export namespace styleProviderQuiz {
*/
function extractHexAndSentences(inputString: string) {
// Regular expression to match a hexadecimal number at the beginning followed by a period and sentences
- const regex = /^#([0-9A-Fa-f]+)\.\s*(.+)$/s;
- const match = inputString.match(regex);
+ const regex = /^#([0-9A-Fa-f]+)\.\s*(.+)$/;
+ const match = inputString.replace('\n', ' ').match(regex);
if (match) {
const hexNumber = match[1];
@@ -254,7 +248,7 @@ export namespace styleProviderQuiz {
function check(img: ImageBox) {
//this._loading = true;
imgQuizBoxes(img).forEach(async doc => {
- const input = StrCast(doc[DocData].title);
+ const input = StrCast(doc.$title);
if (imgQuizMode(img) == quizMode.SMART && input) {
const questionText = 'Question: What was labeled in this image?';
const rubricText = ' Rubric: ' + StrCast(doc.quiz);
@@ -271,7 +265,9 @@ export namespace styleProviderQuiz {
doc.backgroundColor = '#' + hexSent.hexNumber;
} else {
const match = compareWords(input, StrCast(doc.quiz).trim());
- doc.backgroundColor = match ? '#11c249' : '#eb2d2d';
+ if (input) {
+ doc.backgroundColor = match ? '#11c249' : '#eb2d2d';
+ }
}
});
//this._loading = false;
@@ -279,8 +275,8 @@ export namespace styleProviderQuiz {
function redo(img: ImageBox) {
imgQuizBoxes(img).forEach(doc => {
- doc[DocData].title = '';
- doc.backgroundColor = '#e4e4e4';
+ doc.$title = '';
+ doc.$backgroundColor = '#e4e4e4';
});
}
@@ -289,7 +285,7 @@ export namespace styleProviderQuiz {
*/
function exitQuizMode(img: ImageBox) {
img.Document._quizMode = quizMode.NONE;
- DocListCast(img.Document._quizBoxes).forEach(box => {
+ DocListCast(img.Document.quizBoxes).forEach(box => {
box.hidden = true;
});
}
@@ -388,10 +384,7 @@ export namespace styleProviderQuiz {
}
break;
case StyleProp.AnchorMenuItems:
- if (imgBox) {
- AnchorMenu.Instance.gptFlashcards = () => getImageDesc(imgBox);
- AnchorMenu.Instance.makeLabels = () => makeLabels(props?.DocumentView?.().ComponentView as ImageBox);
- }
+ AnchorMenu.Instance.makeLabels = imgBox ? () => makeLabels(props?.DocumentView?.().ComponentView as ImageBox) : unimplementedFunction;
}
return undefined;
}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 07:36:29 +0000