Chatcards with images

4 files changed, 36 insertions, 80 deletions

diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index a794e213e..fde9fe582 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -354,63 +354,39 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         }
     };
 
-    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;
-        }
-    };
+    // 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 () => {
-        // if (StrCast(this.dataDoc.description)) return StrCast(this.dataDoc.description); // Return existing description
-        const { href } = (this.dataDoc.data as URLField).url;
-        const hrefParts = href.split('.');
-        const hrefComplete = `${hrefParts[0]}_o.${hrefParts[1]}`;
         this._loading = true;
         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: ');
             console.log(response);
             AnchorMenu.Instance.transferToFlashcard(response);
-            // this.Document[DocData].description = response.trim();
-            // return response; // Return the response
         } catch (error) {
             console.log('Error');
         }
         this._loading = false;
-        // return '';
     };
 
     @action
     setRef = (iref: HTMLImageElement | null) => {
         this._imageRef = iref;
-        // if (iref) {
-        //     this._videoRef!.ontimeupdate = this.updateTimecode;
-        //     // @ts-ignore
-        //     // vref.onfullscreenchange = action((e) => this._fullScreen = vref.webkitDisplayingFullscreen);
-        //     this._disposers.reactionDisposer?.();
-        //     this._disposers.reactionDisposer = reaction(
-        //         () => NumCast(this.layoutDoc._layout_currentTimecode),
-        //         time => {
-        //             !this._playing && (vref.currentTime = time);
-        //         },
-        //         { fireImmediately: true }
-        //     );
-
-        //     (!this.dataDoc[this.fieldKey + '_thumbnails'] || StrListCast(this.dataDoc[this.fieldKey + '_thumbnails']).length !== VideoThumbnails.DENSE) && this.getVideoThumbnails();
-        // }
     };
 
     specificContextMenu = (): void => {
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index aee885688..2091ee89a 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -1001,12 +1001,16 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
         !help && cm.addItem({ description: 'Help...', subitems: helpItems, icon: 'eye' });
     };
 
-    findImageTags = () => {
+    findImageTags = async () => {
         const c = this.ProseRef?.getElementsByTagName('img');
         if (c) {
             for (let i of c) {
-                this.getImageDesc(i.src);
                 console.log(i);
+
+                // console.log(canvas.toDataURL());
+                // canvas.style.zIndex = '2000000';
+                // document.body.appendChild(canvas);
+                if (i.className !== 'ProseMirror-separator') this.getImageDesc(i.src);
             }
         }
         // console.log('HI' + this.ProseRef?.getElementsByTagName('img'));
@@ -1031,13 +1035,13 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
 
     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 { href } = (u as URLField).url;
+        const hrefParts = u.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: ');
+            const hrefBase64 = await FormattedTextBox.imageUrlToBase64(u);
+            const response = await gptImageLabel(hrefBase64, 'Tell me what you see in this image');
+            //const response = await gptImageLabel(u, '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();
diff --git a/src/client/views/pdf/AnchorMenu.tsx b/src/client/views/pdf/AnchorMenu.tsx
index 6dc41ead2..87031487f 100644
--- a/src/client/views/pdf/AnchorMenu.tsx
+++ b/src/client/views/pdf/AnchorMenu.tsx
@@ -130,9 +130,10 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
     //     // 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: ');
diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx
index befbee48b..27a523465 100644
--- a/src/client/views/pdf/PDFViewer.tsx
+++ b/src/client/views/pdf/PDFViewer.tsx
@@ -413,45 +413,19 @@ export class PDFViewer extends ObservableReactComponent<IViewerProps> {
         const queryText = this._selectionText;
         this._loading = true;
         try {
+            if (this._selectionText === '') {
+            }
             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');
+            this._selectionText = '';
         } 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;
@@ -469,6 +443,7 @@ export class PDFViewer extends ObservableReactComponent<IViewerProps> {
         document.removeEventListener('pointerup', this.onSelectEnd);
 
         const sel = window.getSelection();
+
         if (sel) {
             AnchorMenu.Instance.setSelectedText(sel.toString());
             AnchorMenu.Instance.setLocation(NumCast(this._props.layoutDoc['x']), NumCast(this._props.layoutDoc['y']));