aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/nodes')
-rw-r--r--src/client/views/nodes/ImageBox.tsx89
-rw-r--r--src/client/views/nodes/formattedText/FormattedTextBox.tsx55
2 files changed, 67 insertions, 77 deletions
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index ff938df78..a794e213e 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -302,70 +302,20 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
};
createCanvas = async (downX?: number, downY?: number, cb?: (filename: string, x: number | undefined, y: number | undefined) => void) => {
- const width = NumCast(this.layoutDoc._width);
const canvas = document.createElement('canvas');
- // canvas.width = 640;
- // canvas.height = (640 * Doc.NativeHeight(this.layoutDoc)) / (Doc.NativeWidth(this.layoutDoc) || 1);
- canvas.width = NumCast(this.layoutDoc._width);
- canvas.height = NumCast(this.layoutDoc._height);
+ const scaling = 1 / (this._props.NativeDimScaling?.() || 1);
+ const w = AnchorMenu.Instance.marqueeWidth * scaling;
+ const h = AnchorMenu.Instance.marqueeHeight * scaling;
+ canvas.width = w;
+ canvas.height = h;
const ctx = canvas.getContext('2d'); // draw image to canvas. scale to target dimensions
if (ctx) {
- // this._imageRef && ctx.drawImage(this._imageRef, 0, 0, canvas.width, canvas.height);
- this._imageRef && ctx.drawImage(this._imageRef, NumCast(this._marqueeref.current?.left), NumCast(this._marqueeref.current?.top), this._width, this._height, 0, 0, 1000, 1000);
- //this._imageRef && ctx.drawImage(this._imageRef, 0, 0, 2000, 1000, 0, 0, canvas.width, canvas.height);
- // console.log(NumCast(this._marqueeref.current?.left) + 100);
+ 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);
-
- // if (this._imageRef) {
- // const canv = ImageUtility.getCroppedImg(this._imageRef, this._imageRef.width, this._imageRef.height);
- // console.log(this._imageRef.width);
- // if (canv) {
- // const blob = await ImageUtility.canvasToBlob(canv);
- // return ImageBox.selectUrlToBase64(blob);
- // }
- // }
- if (!this._imageRef) {
- const b = Docs.Create.LabelDocument({
- x: NumCast(this.layoutDoc.x) + width,
- y: NumCast(this.layoutDoc.y, 1),
- _width: 150,
- _height: 50,
- // title: (this.layoutDoc._layout_currentTimecode || 0).toString(),
- onClick: FollowLinkScript(),
- });
- this._props.addDocument?.(b);
- DocUtils.MakeLink(b, this.Document, { link_relationship: 'image snapshot' });
- } else {
- // convert to desired file format
- // const dataUrl = canvas.toDataURL('image/png'); // can also use 'image/png'
- // // if you want to preview the captured image,
- // const retitled = StrCast(this.Document.title).replace(/[ -.:]/g, '');
- // const encodedFilename = encodeURIComponent(('snapshot' + retitled + '_' + (this.layoutDoc._layout_currentTimecode || 0).toString()).replace(/[./?=]/g, '_'));
- // const filename = basename(encodedFilename);
- // ClientUtils.convertDataUri(dataUrl, filename).then((returnedFilename: string) => returnedFilename && (cb ?? this.createSnapshotLink)(returnedFilename, downX, downY));
- }
- // convert to desired file format
-
- // const dataUrl = canvas.toDataURL('image/png'); // can also use 'image/png'
- // // if you want to preview the captured image,
- // const retitled = StrCast(this.Document.title).replace(/[ -.:]/g, '');
- // const encodedFilename = encodeURIComponent(('snapshot' + retitled + '_' + (this.layoutDoc._layout_currentTimecode || 0).toString()).replace(/[./?=]/g, '_'));
- // const filename = basename(encodedFilename);
- //ClientUtils.convertDataUri(dataUrl, filename).then((returnedFilename: string) => returnedFilename && (cb ?? this.createSnapshotLink)(returnedFilename, downX, downY));
- // }
- // const docViewContent = this.DocumentView?.().ContentDiv!;
- // if (docViewContent instanceof HTMLCanvasElement) {
- // const canvas = docViewContent;
- // const img = document.createElement('img'); // create a Image Element
- // img.src = canvas.toDataURL(); // image sourcez
- // img.style.width = canvas.style.width;
- // img.style.height = canvas.style.height;
- // const parEle = newCan.parentElement as HTMLElement;
- // parEle.removeChild(newCan);
- // parEle.appendChild(img);
- // }
};
createSnapshotLink = (imagePath: string, downX?: number, downY?: number) => {
@@ -390,21 +340,6 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
setTimeout(() => downX !== undefined && downY !== undefined && DocumentView.getFirstDocumentView(imageSnapshot)?.startDragging(downX, downY, dropActionType.move, true));
};
- /**
- *
- if (oldDiv instanceof HTMLCanvasElement) {
- const canvas = oldDiv;
- const img = document.createElement('img'); // create a Image Element
- img.src = canvas.toDataURL(); // image sourcez
- img.style.width = canvas.style.width;
- img.style.height = canvas.style.height;
- const newCan = newDiv as HTMLCanvasElement;
- const parEle = newCan.parentElement as HTMLElement;
- parEle.removeChild(newCan);
- parEle.appendChild(img);
- }
- */
-
static selectUrlToBase64 = async (blob: Blob): Promise<string> => {
try {
return new Promise((resolve, reject) => {
@@ -445,10 +380,10 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
try {
// const hrefBase64 = await ImageBox.imageUrlToBase64(hrefComplete);
const hrefBase64 = await this.createCanvas();
- const response = await gptImageLabel(hrefBase64, 'Tell me what words you see on this image.');
- //const response = await gptImageLabel(hrefBase64, 'Make flashcards out of this text with each question and answer labeled as question and answer. Do not label each flashcard and do not include asterisks: ');
+ //const response = await gptImageLabel(hrefBase64, 'Tell me what words you see on this image.');
+ const response = await gptImageLabel(hrefBase64, 'Make flashcards out of this text 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);
+ AnchorMenu.Instance.transferToFlashcard(response);
// this.Document[DocData].description = response.trim();
// return response; // Return the response
} catch (error) {
@@ -669,6 +604,8 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
this._getAnchor = AnchorMenu.Instance?.GetAnchor;
AnchorMenu.Instance.gptFlashcards = this.getImageDesc;
AnchorMenu.Instance.addToCollection = this._props.DocumentView?.()._props.addDocument;
+ AnchorMenu.Instance.marqueeWidth = this._marqueeref.current?.Width ?? 0;
+ AnchorMenu.Instance.marqueeHeight = this._marqueeref.current?.Height ?? 0;
this._marqueeref.current?.onTerminateSelection();
this._props.select(false);
};
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index 3e2befb5f..aee885688 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -65,6 +65,8 @@ import { removeMarkWithAttrs } from './prosemirrorPatches';
import { RichTextMenu, RichTextMenuPlugin } from './RichTextMenu';
import { RichTextRules } from './RichTextRules';
import { schema } from './schema_rts';
+import { URLField } from '../../../../fields/URLField';
+import { gptImageLabel } from '../../../apis/gpt/GPT';
// import * as applyDevTools from 'prosemirror-dev-tools';
export interface FormattedTextBoxProps extends FieldViewProps {
@@ -907,7 +909,11 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
);
const appearance = cm.findByDescription('Appearance...');
const appearanceItems: ContextMenuProps[] = appearance && 'subitems' in appearance ? appearance.subitems : [];
-
+ appearanceItems.push({
+ description: 'Find image tags',
+ event: this.findImageTags,
+ icon: !this.Document._layout_noSidebar ? 'eye-slash' : 'eye',
+ });
appearanceItems.push({
description: !this.Document._layout_noSidebar ? 'Hide Sidebar Handle' : 'Show Sidebar Handle',
event: () => {
@@ -995,6 +1001,53 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
!help && cm.addItem({ description: 'Help...', subitems: helpItems, icon: 'eye' });
};
+ findImageTags = () => {
+ const c = this.ProseRef?.getElementsByTagName('img');
+ if (c) {
+ for (let i of c) {
+ this.getImageDesc(i.src);
+ console.log(i);
+ }
+ }
+ // console.log('HI' + this.ProseRef?.getElementsByTagName('img'));
+ };
+
+ static imageUrlToBase64 = async (imageUrl: string): Promise<string> => {
+ try {
+ const response = await fetch(imageUrl);
+ const blob = await response.blob();
+
+ return new Promise((resolve, reject) => {
+ const reader = new FileReader();
+ reader.readAsDataURL(blob);
+ reader.onloadend = () => resolve(reader.result as string);
+ reader.onerror = error => reject(error);
+ });
+ } catch (error) {
+ console.error('Error:', error);
+ throw error;
+ }
+ };
+
+ getImageDesc = async (u: string) => {
+ // if (StrCast(this.dataDoc.description)) return StrCast(this.dataDoc.description); // Return existing description
+ const { href } = (u as URLField).url;
+ const hrefParts = href.split('.');
+ const hrefComplete = `${hrefParts[0]}_o.${hrefParts[1]}`;
+ try {
+ const hrefBase64 = await FormattedTextBox.imageUrlToBase64(hrefComplete);
+ //const response = await gptImageLabel(hrefBase64, 'Tell me what words you see on this image.');
+ const response = await gptImageLabel(hrefBase64, 'Make flashcards out of this text 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);
+ // this.Document[DocData].description = response.trim();
+ // return response; // Return the response
+ } catch (error) {
+ console.log('Error');
+ }
+ // return '';
+ };
+
animateRes = (resIndex: number, newText: string) => {
if (resIndex < newText.length) {
const marks = this._editorView?.state.storedMarks ?? [];
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-12-20 01:20:44 +0000