aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes/ImageBox.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/nodes/ImageBox.tsx')
-rw-r--r--src/client/views/nodes/ImageBox.tsx49
1 files changed, 14 insertions, 35 deletions
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index ed79888ae..45301247b 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -168,11 +168,12 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
Object.values(this._disposers).forEach(disposer => disposer?.());
}
+ /**
+ * Find images from the unsplash api to add to flashcards.
+ */
fetchImages = async () => {
try {
const { data } = await axios.get(`${API_URL}?query=${this._searchInput}&page=1&per_page=${1}&client_id=${process.env.VITE_API_KEY}`);
- console.log('data', data);
- console.log(data.results);
const imageSnapshot = Docs.Create.ImageDocument(data.results[0].urls.small, {
_nativeWidth: Doc.NativeWidth(this.layoutDoc),
_nativeHeight: Doc.NativeHeight(this.layoutDoc),
@@ -326,8 +327,6 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
if (ctx) {
this._imageRef && ctx.drawImage(this._imageRef, NumCast(this._marqueeref.current?.left) * scaling, NumCast(this._marqueeref.current?.top) * scaling, w, h, 0, 0, w, h);
}
- // canvas.style.zIndex = '2000000';
- // document.body.appendChild(canvas);
const blob = await ImageUtility.canvasToBlob(canvas);
return ImageBox.selectUrlToBase64(blob);
};
@@ -350,7 +349,6 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
Doc.SetNativeHeight(imageSnapshot[DocData], Doc.NativeHeight(this.layoutDoc));
this._props.addDocument?.(imageSnapshot);
DocUtils.MakeLink(imageSnapshot, this.getAnchor(true), { link_relationship: 'video snapshot' });
- // link && (DocCast(link.link_anchor_2)[DocData].timecodeToHide = NumCast(DocCast(link.link_anchor_2).timecodeToShow) + 3); // do we need to set an end time? should default to +0.1
setTimeout(() => downX !== undefined && downY !== undefined && DocumentView.getFirstDocumentView(imageSnapshot)?.startDragging(downX, downY, dropActionType.move, true));
};
@@ -371,7 +369,6 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
pushInfo = async (quiz: quizMode, i?: string) => {
this._quizMode = quiz;
this._loading = true;
- console.log('JHSDKFJHKSDJFHKSJDHFKJSDHFKJHSDKF');
const img = {
file: i ? i : this.paths[0],
@@ -383,10 +380,6 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
'Content-Type': 'application/json',
},
});
-
- console.log('RESPONSE:');
- console.log(response.data['boxes']);
- console.log(response.data['text']);
if (response.data['boxes'].length != 0) {
this.createBoxes(response.data['boxes'], response.data['text']);
} else {
@@ -394,6 +387,11 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
}
};
+ /**
+ * Creates label boxes over text on the image to be filled in.
+ * @param boxes
+ * @param texts
+ */
createBoxes = (boxes: [[[number, number]]], texts: [string]) => {
const nscale = NumCast(this._props.PanelWidth()) * NumCast(this.layoutDoc._freeform_scale, 1);
const nw = nscale / NumCast(this.dataDoc[this.fieldKey + '_nativeWidth']);
@@ -405,17 +403,13 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
const newCol = Docs.Create.LabelDocument({
_width: width,
- //width * NumCast(this.dataDoc[this.fieldKey + '_nativeWidth']),
_height: height,
- //height * NumCast(this.dataDoc[this.fieldKey + '_nativeHeight']),
_layout_fitWidth: true,
title: '',
- // _layout_autoHeight: true,
});
const scaling = 1 / (this._props.NativeDimScaling?.() || 1);
newCol.x = coords[0][0] + NumCast(this._marqueeref.current?.left) * scaling;
newCol.y = coords[0][1] + NumCast(this._marqueeref.current?.top) * scaling;
- // newCol[DocData].text_fontSize = height + 'px';
newCol.zIndex = 1000;
newCol.forceActive = true;
@@ -428,12 +422,14 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
}
};
+ /**
+ * Create flashcards from an image.
+ */
getImageDesc = async () => {
this._loading = true;
try {
const hrefBase64 = await this.createCanvas();
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: ');
- console.log(response);
AnchorMenu.Instance.transferToFlashcard(response, NumCast(this.layoutDoc['x']), NumCast(this.layoutDoc['y']));
} catch (error) {
console.log('Error');
@@ -535,15 +531,16 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
}
};
+ /**
+ * Check whether the contents of the label boxes on an image are correct.
+ */
check = () => {
this._loading = true;
this._quizBoxes.forEach(async doc => {
const input = StrCast(doc[DocData].title);
- console.log('INP: ' + StrCast(input) + '; DOC: ' + StrCast(doc.quiz));
if (this._quizMode == quizMode.SMART && input) {
const questionText = 'Question: What was labeled in this image?';
const rubricText = ' Rubric: ' + StrCast(doc.quiz);
- // const queryText = 'RealAnswer: ' + StrCast(doc.quiz) + '. UserAnswer: ' + input + '.';
const queryText =
questionText +
' UserAnswer: ' +
@@ -553,7 +550,6 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
'. One sentence and evaluate based on meaning, not wording. Provide a hex color at the beginning with a period after it on a scale of green (minor details missed) to red (big error) for how correct the answer is. Example: "#FFFFFF. Pasta is delicious."';
const response = await gptAPICall(queryText, GPTCallType.QUIZ);
const hexSent = this.extractHexAndSentences(response);
- console.log(hexSent.hexNumber);
doc.quiz = hexSent.sentences?.replace(/UserAnswer/g, "user's answer").replace(/Rubric/g, 'rubric');
doc.backgroundColor = '#' + hexSent.hexNumber;
} else {
@@ -561,7 +557,6 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
doc.backgroundColor = match ? '#11c249' : '#eb2d2d';
}
doc.showQuiz = true;
- // console.log(this.compareWords(input, StrCast(doc.quiz)) ? 'Match' : 'No Match');
});
this._loading = false;
};
@@ -577,8 +572,6 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
exitQuizMode = () => {
this._quizMode = quizMode.NONE;
this._quizBoxes.forEach(doc => {
- // this._props.removeDocument?.(DocCast(doc));
- // this._props.DocumentView?.()._props.removeDocument?.(doc);
this.removeDocument?.(doc);
});
this._quizBoxes = [];
@@ -595,7 +588,6 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
if (field) {
const funcs: ContextMenuProps[] = [];
const quizes: ContextMenuProps[] = [];
- // funcs.push({ description: 'Create ai flashcards', event: () => this.getImageDesc(), icon: 'id-card' });
quizes.push({
description: 'Smart Check',
event: this._quizMode == quizMode.NONE ? () => this.pushInfo(quizMode.SMART) : this.exitQuizMode,
@@ -606,19 +598,6 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
event: this._quizMode == quizMode.NONE ? () => this.pushInfo(quizMode.NORMAL) : this.exitQuizMode,
icon: 'pencil',
});
- // funcs.push({ description: 'Quiz Mode', subitems: optionItems, icon: 'eye' });
- // funcs.push({
- // description: 'Quiz Mode',
- // event: !this._quizMode
- // ? () => this.pushInfo(false)
- // : () => {
- // this._quizMode = false;
- // },
- // icon: 'redo-alt',
- // });
- // funcs.push({ description: 'Get Text', event: this.check, icon: 'redo-alt' });
- // funcs.push({ description: 'Get Labels2', event: this.getImageLabels2, icon: 'redo-alt' });
- // funcs.push({ description: 'Get Labels', event: this.getImageLabels, icon: 'redo-alt' });
funcs.push({ description: 'Rotate Clockwise 90', event: this.rotate, icon: 'redo-alt' });
funcs.push({ description: `Show ${this.layoutDoc._showFullRes ? 'Dynamic Res' : 'Full Res'}`, event: this.resolution, icon: 'expand' });
funcs.push({ description: 'Set Native Pixel Size', event: this.setNativeSize, icon: 'expand-arrows-alt' });
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 16:29:45 +0000