audio quiz cards

1 files changed, 370 insertions, 135 deletions

diff --git a/src/client/views/nodes/ComparisonBox.tsx b/src/client/views/nodes/ComparisonBox.tsx
index 3d33ff862..06ecf8893 100644
--- a/src/client/views/nodes/ComparisonBox.tsx
+++ b/src/client/views/nodes/ComparisonBox.tsx
@@ -9,7 +9,7 @@ import { Doc, Opt } from '../../../fields/Doc';
 import { DocData } from '../../../fields/DocSymbols';
 import { RichTextField } from '../../../fields/RichTextField';
 import { DocCast, NumCast, RTFCast, StrCast, toList } from '../../../fields/Types';
-import { GPTCallType, gptAPICall } from '../../apis/gpt/GPT';
+import { GPTCallType, gptAPICall, gptImageLabel } from '../../apis/gpt/GPT';
 import '../pdf/GPTPopup/GPTPopup.scss';
 import { DocUtils } from '../../documents/DocUtils';
 import { DocumentType } from '../../documents/DocumentTypes';
@@ -29,7 +29,12 @@ import { ContextMenu } from '../ContextMenu';
 import { ContextMenuProps } from '../ContextMenuItem';
 import { tickStep } from 'd3';
 import { CollectionCarouselView } from '../collections/CollectionCarouselView';
+import { FollowLinkScript } from '../../documents/DocUtils';
+import { schema } from '../nodes/formattedText/schema_rts';
+import { Id } from '../../../fields/FieldSymbols';
+import axios from 'axios';
 
+const API_URL = 'https://api.unsplash.com/search/photos';
 @observer
 export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     public static LayoutString(fieldKey: string) {
@@ -39,36 +44,110 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
     constructor(props: FieldViewProps) {
         super(props);
         makeObservable(this);
+        this.setListening();
     }
 
     @observable private _inputValue = '';
     @observable private _outputValue = '';
     @observable private _loading = false;
     @observable private _isEmpty = false;
+    @observable childActive = false;
     @observable _yRelativeToTop: boolean = true;
-
-    @action handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-        this._inputValue = e.target.value;
-        console.log(this._inputValue);
-    };
-
     @observable _animating = '';
+    private _ref = React.createRef<HTMLDivElement>();
 
-    @computed get clipWidth() {
-        return NumCast(this.layoutDoc[this.clipWidthKey], 50);
+    get revealOp() {
+        return this.layoutDoc[`_${this._props.fieldKey}_revealOp`];
+    }
+    get clipHeightKey() {
+        return '_' + this._props.fieldKey + '_clipHeight';
     }
+
     get clipWidthKey() {
         return '_' + this._props.fieldKey + '_clipWidth';
     }
 
+    @computed get clipWidth() {
+        return NumCast(this.layoutDoc[this.clipWidthKey], 50);
+    }
+
     @computed get clipHeight() {
         return NumCast(this.layoutDoc[this.clipHeightKey], 200);
     }
-    get revealOp() {
-        return this.layoutDoc[`_${this._props.fieldKey}_revealOp`];
+
+    @computed get overlayAlternateIcon() {
+        const usepath = this.layoutDoc[`_${this._props.fieldKey}_usePath`];
+        return (
+            <Tooltip title={<div className="dash-tooltip">flip</div>}>
+                <div
+                    className="formattedTextBox-alternateButton"
+                    onPointerDown={e =>
+                        setupMoveUpEvents(e.target, e, returnFalse, emptyFunction, () => {
+                            if (!this.layoutDoc[`_${this._props.fieldKey}_revealOp`] || this.layoutDoc[`_${this._props.fieldKey}_revealOp`] === 'flip') {
+                                this.flipFlashcard();
+
+                                // console.log('Print Front of cards: ' + (RTFCast(DocCast(this.dataDoc[this.fieldKey + '_0']).text)?.Text ?? ''));
+                                // console.log('Print Back of cards: ' + (RTFCast(DocCast(this.dataDoc[this.fieldKey + '_1']).text)?.Text ?? ''));
+                            }
+                        })
+                    }
+                    style={{
+                        background: this.revealOp === 'hover' ? 'gray' : usepath === 'alternate' ? 'white' : 'black',
+                        color: this.revealOp === 'hover' ? 'black' : usepath === 'alternate' ? 'black' : 'white',
+                        display: 'inline-block',
+                    }}>
+                    <div key="alternate" className="formattedTextBox-flip">
+                        <FontAwesomeIcon icon="turn-up" size="1x" />
+                    </div>
+                </div>
+            </Tooltip>
+        );
     }
-    get clipHeightKey() {
-        return '_' + this._props.fieldKey + '_clipHeight';
+
+    @computed get flashcardMenu() {
+        return (
+            <div>
+                <Tooltip
+                    title={
+                        this.layoutDoc[`_${this._props.fieldKey}_usePath`] === 'alternate' ? (
+                            <div className="dash-tooltip">Flip to front side to use GPT</div>
+                        ) : (
+                            <div className="dash-tooltip">Ask GPT to create an answer on the back side of the flashcard based on your question on the front</div>
+                        )
+                    }>
+                    <div style={{ position: 'absolute', bottom: '3px', right: '50px', cursor: 'pointer' }} onPointerDown={e => (!this.layoutDoc[`_${this._props.fieldKey}_usePath`] ? this.findImageTags() : null)}>
+                        <FontAwesomeIcon icon="lightbulb" size="xl" />
+                    </div>
+                </Tooltip>
+                {DocCast(this.Document.embedContainer).type_collection === 'carousel' ? null : (
+                    <div>
+                        <Tooltip title={<div>Create a flashcard pile</div>}>
+                            <div style={{ position: 'absolute', bottom: '3px', right: '74px', cursor: 'pointer' }} onPointerDown={e => this.createFlashcardPile([this.Document], false)}>
+                                <FontAwesomeIcon icon="folder-plus" size="xl" />
+                            </div>
+                        </Tooltip>
+                        <Tooltip title={<div className="dash-tooltip">Create new flashcard stack based on text</div>}>
+                            <div style={{ position: 'absolute', bottom: '3px', right: '104px', cursor: 'pointer' }} onClick={e => this.gptFlashcardPile()}>
+                                <FontAwesomeIcon icon="layer-group" size="xl" />
+                            </div>
+                        </Tooltip>
+                    </div>
+                )}
+                <Tooltip title={<div className="dash-tooltip">Hover to reveal</div>}>
+                    <div style={{ position: 'absolute', bottom: '3px', right: '25px', cursor: 'pointer' }} onClick={e => this.handleHover()}>
+                        <FontAwesomeIcon color={this.revealOp === 'hover' ? 'blue' : 'black'} icon="hand-point-up" size="xl" />
+                    </div>
+                </Tooltip>
+                {/* <Tooltip title={<div className="dash-tooltip">Remove this side of the flashcard</div>}>
+                    <div
+                        style={{ position: 'absolute', bottom: '3px', right: '80px', cursor: 'pointer' }}
+                        onPointerDown={e => this.closeDown(e, this.layoutDoc[`_${this._props.fieldKey}_usePath`] === 'alternate' ? this._props.fieldKey + '_1' : this._props.fieldKey + '_0')}>
+                        <FontAwesomeIcon color={this.revealOp === 'hover' ? 'blue' : 'black'} icon="trash-can" size="xl" />
+                    </div>
+                </Tooltip> */}
+                {/* {this.overlayAlternateIcon} */}
+            </div>
+        );
     }
 
     componentDidMount() {
@@ -80,6 +159,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
     }
     protected createDropTarget = (ele: HTMLDivElement | null, fieldKey: string, disposerId: number) => {
         this._disposers[disposerId]?.();
+        // this.childActive = true;
         if (ele) {
             this._disposers[disposerId] = DragManager.MakeDropTarget(ele, (e, dropEvent) => this.internalDrop(e, dropEvent, fieldKey), this.layoutDoc);
         }
@@ -147,6 +227,39 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
         return false;
     };
 
+    @action handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+        this._inputValue = e.target.value;
+        console.log(this._inputValue);
+    };
+
+    // this.closeDown(e, this.layoutDoc[`_${this._props.fieldKey}_usePath`] === 'alternate' ? this.fieldKey + '_0' : this.fieldKey + '_1')}
+    @action activateContent = () => {
+        this.childActive = true;
+    };
+
+    @action handleRenderGPTClick = () => {
+        // Call the GPT model and get the output
+        this.layoutDoc[`_${this._props.fieldKey}_usePath`] = 'alternate';
+        this._outputValue = '';
+        if (this._inputValue) this.askGPT(GPTCallType.QUIZ);
+    };
+
+    @action handleHover = () => {
+        if (this.revealOp === 'hover') {
+            this.layoutDoc[`_${this._props.fieldKey}_revealOp`] = 'flip';
+            this.Document.forceActive = false;
+        } else {
+            this.layoutDoc[`_${this._props.fieldKey}_revealOp`] = 'hover';
+            this.Document.forceActive = true;
+        }
+        //this.revealOp === 'hover' ? (this.layoutDoc[`_${this._props.fieldKey}_revealOp`] = 'flip') : (this.layoutDoc[`_${this._props.fieldKey}_revealOp`] = 'hover');
+    };
+
+    @action handleRenderClick = () => {
+        // Call the GPT model and get the output
+        this.layoutDoc[`_${this._props.fieldKey}_usePath`] = undefined;
+    };
+
     getAnchor = (addAsAnnotation: boolean, pinProps?: PinProps) => {
         const anchor = Docs.Create.ConfigDocument({
             title: 'CompareAnchor:' + this.Document.title,
@@ -271,13 +384,29 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
     }
 
     gptFlashcardPile = async () => {
-        var text = await this.askGPT(GPTCallType.FLASHCARD);
+        var text = await this.askGPT(GPTCallType.STACK);
+        console.log(text);
 
         var senArr = text?.split('Question: ');
         var collectionArr: Doc[] = [];
         for (let i = 1; i < senArr?.length!; i++) {
             const newDoc = Docs.Create.ComparisonDocument(senArr![i], { _layout_isFlashcard: true, _width: 300, _height: 300 });
-            newDoc.text = senArr![i];
+            // newDoc.text = senArr![i];
+            // const dataSplit = StrCast(this.dataDoc.data).includes('Keyword: ') ? StrCast(this.dataDoc.data).split('Keyword: ') : StrCast(this.dataDoc.data).split('Answer: ');
+            // newDoc[this.fieldKey + '_0'] = Docs.Create.TextDocument(dataSplit[1]);
+            // newDoc[this.fieldKey + '_1'] = Docs.Create.TextDocument(dataSplit[0]);
+            // newDoc['backgroundColor'] = 'lightgray';
+            // newDoc.image =
+            if (StrCast(senArr![i]).includes('Keyword: ')) {
+                console.log('Here');
+                const img = await this.fetchImages(StrCast(senArr![i]).split('Keyword: ')[1]);
+                console.log(img);
+                DocCast(newDoc).image = img;
+                // DocCast(DocCast(newDoc).dataDoc)['image'] = img;
+                Doc.AddToMyOverlay(img);
+            }
+
+            console.log('ARR' + i + senArr![i]);
             collectionArr.push(newDoc);
         }
         this.createFlashcardPile(collectionArr, true);
@@ -297,110 +426,6 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
     hoverFlip = (side: string | undefined) => {
         if (this.layoutDoc[`_${this._props.fieldKey}_revealOp`] === 'hover') this.layoutDoc[`_${this._props.fieldKey}_usePath`] = side;
     };
-    /**
-     * Creates the button used to flip the flashcards.
-     */
-    @computed get overlayAlternateIcon() {
-        const usepath = this.layoutDoc[`_${this._props.fieldKey}_usePath`];
-        return (
-            <Tooltip title={<div className="dash-tooltip">flip</div>}>
-                <div
-                    className="formattedTextBox-alternateButton"
-                    onPointerDown={e =>
-                        setupMoveUpEvents(e.target, e, returnFalse, emptyFunction, () => {
-                            if (!this.layoutDoc[`_${this._props.fieldKey}_revealOp`] || this.layoutDoc[`_${this._props.fieldKey}_revealOp`] === 'flip') {
-                                this.flipFlashcard();
-
-                                // console.log('Print Front of cards: ' + (RTFCast(DocCast(this.dataDoc[this.fieldKey + '_0']).text)?.Text ?? ''));
-                                // console.log('Print Back of cards: ' + (RTFCast(DocCast(this.dataDoc[this.fieldKey + '_1']).text)?.Text ?? ''));
-                            }
-                        })
-                    }
-                    style={{
-                        background: this.revealOp === 'hover' ? 'gray' : usepath === 'alternate' ? 'white' : 'black',
-                        color: this.revealOp === 'hover' ? 'black' : usepath === 'alternate' ? 'black' : 'white',
-                        display: 'inline-block',
-                    }}>
-                    <div key="alternate" className="formattedTextBox-flip">
-                        <FontAwesomeIcon icon="turn-up" size="1x" />
-                    </div>
-                </div>
-            </Tooltip>
-        );
-    }
-
-    @computed get flashcardMenu() {
-        return (
-            <div>
-                <Tooltip
-                    title={
-                        this.layoutDoc[`_${this._props.fieldKey}_usePath`] === 'alternate' ? (
-                            <div className="dash-tooltip">Flip to front side to use GPT</div>
-                        ) : (
-                            <div className="dash-tooltip">Ask GPT to create an answer on the back side of the flashcard based on your question on the front</div>
-                        )
-                    }>
-                    <div style={{ position: 'absolute', bottom: '3px', right: '50px', cursor: 'pointer' }} onPointerDown={e => (!this.layoutDoc[`_${this._props.fieldKey}_usePath`] ? this.askGPT(GPTCallType.CHATCARD) : null)}>
-                        <FontAwesomeIcon icon="lightbulb" size="xl" />
-                    </div>
-                </Tooltip>
-                {DocCast(this.Document.embedContainer).type_collection === 'carousel' ? null : (
-                    <div>
-                        <Tooltip title={<div>Create a flashcard pile</div>}>
-                            <div style={{ position: 'absolute', bottom: '3px', right: '74px', cursor: 'pointer' }} onPointerDown={e => this.createFlashcardPile([this.Document], false)}>
-                                <FontAwesomeIcon icon="folder-plus" size="xl" />
-                            </div>
-                        </Tooltip>
-                        <Tooltip title={<div className="dash-tooltip">Create new flashcard stack based on text</div>}>
-                            <div style={{ position: 'absolute', bottom: '3px', right: '104px', cursor: 'pointer' }} onClick={e => this.gptFlashcardPile()}>
-                                <FontAwesomeIcon icon="layer-group" size="xl" />
-                            </div>
-                        </Tooltip>
-                    </div>
-                )}
-                <Tooltip title={<div className="dash-tooltip">Hover to reveal</div>}>
-                    <div style={{ position: 'absolute', bottom: '3px', right: '25px', cursor: 'pointer' }} onClick={e => this.handleHover()}>
-                        <FontAwesomeIcon color={this.revealOp === 'hover' ? 'blue' : 'black'} icon="hand-point-up" size="xl" />
-                    </div>
-                </Tooltip>
-                {/* <Tooltip title={<div className="dash-tooltip">Remove this side of the flashcard</div>}>
-                    <div
-                        style={{ position: 'absolute', bottom: '3px', right: '80px', cursor: 'pointer' }}
-                        onPointerDown={e => this.closeDown(e, this.layoutDoc[`_${this._props.fieldKey}_usePath`] === 'alternate' ? this._props.fieldKey + '_1' : this._props.fieldKey + '_0')}>
-                        <FontAwesomeIcon color={this.revealOp === 'hover' ? 'blue' : 'black'} icon="trash-can" size="xl" />
-                    </div>
-                </Tooltip> */}
-                {/* {this.overlayAlternateIcon} */}
-            </div>
-        );
-    }
-    // this.closeDown(e, this.layoutDoc[`_${this._props.fieldKey}_usePath`] === 'alternate' ? this.fieldKey + '_0' : this.fieldKey + '_1')}
-    @action activateContent = () => {
-        this.childActive = true;
-    };
-
-    @action handleRenderGPTClick = () => {
-        // Call the GPT model and get the output
-        this.layoutDoc[`_${this._props.fieldKey}_usePath`] = 'alternate';
-        this._outputValue = '';
-        if (this._inputValue) this.askGPT(GPTCallType.QUIZ);
-    };
-
-    @action handleHover = () => {
-        if (this.revealOp === 'hover') {
-            this.layoutDoc[`_${this._props.fieldKey}_revealOp`] = 'flip';
-            this.Document.forceActive = false;
-        } else {
-            this.layoutDoc[`_${this._props.fieldKey}_revealOp`] = 'hover';
-            this.Document.forceActive = true;
-        }
-        //this.revealOp === 'hover' ? (this.layoutDoc[`_${this._props.fieldKey}_revealOp`] = 'flip') : (this.layoutDoc[`_${this._props.fieldKey}_revealOp`] = 'hover');
-    };
-
-    @action handleRenderClick = () => {
-        // Call the GPT model and get the output
-        this.layoutDoc[`_${this._props.fieldKey}_usePath`] = undefined;
-    };
 
     animateRes = (resIndex: number, newText: string, callType: GPTCallType) => {
         if (resIndex < newText.length) {
@@ -448,15 +473,17 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
             if (callType == GPTCallType.CHATCARD) {
                 DocCast(this.dataDoc[this.props.fieldKey + '_0'])[DocData].text = res;
                 // this.flipFlashcard();
-            }
-            if (callType == GPTCallType.QUIZ) this._outputValue = res;
+            } else if (callType == GPTCallType.QUIZ) this._outputValue = res;
             // DocCast(this.dataDoc[this.props.fieldKey + '_0'])[DocData].text = res;
             // this._outputValue = res;
             else if (callType === GPTCallType.FLASHCARD) {
                 // console.log(res);
                 this._loading = false;
                 return res;
+            } else if (callType === GPTCallType.STACK) {
             }
+            this._loading = false;
+            return res;
             // console.log(res);
         } catch (err) {
             console.error('GPT call failed');
@@ -470,7 +497,160 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
     //     const cm = ContextMenu.Instance;
     //     cm.addItem({ description: 'Create an Answer on the Back', event: () => this.askGPT(GPTCallType.CHATCARD), icon: 'pencil' });
     // };
-    @observable childActive = false;
+
+    findImageTags = async () => {
+        // const d = DocCast(this.dataDoc[this.props.fieldKey + '_0']);
+        // const copy = Doc.MakeCopy(this.Document, true);
+        const c = this.DocumentView?.().ContentDiv!.getElementsByTagName('img');
+        // this.ProseRef?.getElementsByTagName('img');
+        if (c?.length === 0) await this.askGPT(GPTCallType.CHATCARD);
+        if (c) {
+            this._loading = true;
+            for (let i of c) {
+                console.log(i);
+                if (i.className !== 'ProseMirror-separator') await this.getImageDesc(i.src);
+            }
+            this._loading = false;
+            this.flipFlashcard();
+        }
+        // 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) => {
+        try {
+            const hrefBase64 = await ComparisonBox.imageUrlToBase64(u);
+            const response = await gptImageLabel(hrefBase64, 'Answer the following question as a short flashcard response. Do not include a label.' + (this.dataDoc.text as RichTextField)?.Text);
+
+            DocCast(this.dataDoc[this.props.fieldKey + '_0'])[DocData].text = response;
+        } catch (error) {
+            console.log('Error');
+        }
+    };
+
+    fetchImages = async (selection: string) => {
+        try {
+            const { data } = await axios.get(`${API_URL}?query=${selection}&page=1&per_page=${1}&client_id=Q4zruu6k6lum2kExiGhLNBJIgXDxD6NNj0SRHH_XXU0`);
+            console.log(data.results);
+            const imageSnapshot = Docs.Create.ImageDocument(data.results[0].urls.small, {
+                _nativeWidth: Doc.NativeWidth(this.layoutDoc),
+                _nativeHeight: Doc.NativeHeight(this.layoutDoc),
+                x: NumCast(this.layoutDoc.x),
+                y: NumCast(this.layoutDoc.y),
+                onClick: FollowLinkScript(),
+                _width: 150,
+                _height: 150,
+                title: '--snapshot' + NumCast(this.layoutDoc._layout_currentTimecode) + ' image-',
+            });
+            // return imageSnapshot;
+            imageSnapshot['x'] = this.layoutDoc['x'];
+            imageSnapshot['y'] = this.layoutDoc['y'];
+
+            // const newDoc = Docs.Create.TextDocument(selection);
+            // newDoc.text = selection;
+            // newDoc['backgroundColor'] = 'lightgray';
+
+            // Doc.AddToMyOverlay(imageSnapshot);
+            return imageSnapshot;
+            return data.results[0].urls.small;
+            // Doc.AddEmbedding(newDoc, imageSnapshot);
+            // Doc.MakeEmbedding(imageSnapshot);
+            // return imageSnapshot;
+            // imageSnapshot['zIndex'] = 20000;
+            // this._props.DocumentView?.()._props.addDocument?.(newDoc);
+        } catch (error) {
+            console.log(error);
+        }
+    };
+
+    // handleSelection = async (selection: string, newDoc: Doc) => {
+    //     const images = await this.fetchImages(selection);
+    //     return images;
+    // // Doc.AddDocToList(Doc.MyRecentlyClosed, 'data', dashDoc, undefined, true, true);
+    // images!.embedContainer = newDoc;
+    // Doc.AddEmbedding(newDoc, images!);
+    // const c = this.DocumentView?.().ContentDiv!.getElementsByClassName('afterBox-cont');
+    // for (let i in c) {
+    //     console.log('HERE' + i);
+    // }
+    // this.addDoc(images!, this.fieldKey + '_0');
+    // Doc.AddEmbedding(newDoc, images!);
+    // this._props.
+    // Doc.AddToMyOverlay(images!);
+    // const node = schema.nodes.dashDoc.create({
+    //     width: NumCast(images?._width),
+    //     height: NumCast(images?._height),
+    //     title: 'dashDoc',
+    //     docId: images![Id],
+    //     float: 'unset',
+    // });
+    // };
+
+    @observable listening = false;
+    @observable transcriptElement = '';
+    SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+    recognition = new this.SpeechRecognition();
+
+    handleResult = (e: SpeechRecognitionEvent) => {
+        let interimTranscript = '';
+        let finalTranscript = '';
+        for (let i = e.resultIndex; i < e.results.length; i++) {
+            const transcript = e.results[i][0].transcript;
+            if (e.results[i].isFinal) {
+                finalTranscript += transcript;
+            } else {
+                interimTranscript += transcript;
+            }
+        }
+        console.log(interimTranscript);
+        this._inputValue += finalTranscript;
+    };
+
+    setListening = () => {
+        const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+        if (SpeechRecognition) {
+            console.log('here');
+            // const recognition = new SpeechRecognition();
+            this.recognition.continuous = true; // Continue listening even if the user pauses
+            this.recognition.interimResults = true; // Show interim results
+            this.recognition.lang = 'en-US'; // Set language (optional)
+            this.recognition.onresult = this.handleResult.bind(this);
+            // recognition.onend = this.handleEnd.bind(this);
+
+            // this.handleResult;
+            // recognition.stop();
+        }
+    };
+
+    setLanguage = (language: string) => {
+        this.recognition.lang = language;
+    };
+
+    startListening = () => {
+        this.recognition.start();
+        this.listening = true;
+    };
+
+    stopListening = () => {
+        this.recognition.stop();
+        this.listening = false;
+    };
 
     render() {
         const clearButton = (which: string) => (
@@ -542,13 +722,62 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
             // add text box to each side when comparison box is first created
             // (!this.dataDoc[this.fieldKey + '_0'] && this.dataDoc[this._props.fieldKey + '_0'] !== 'empty')
             if (!this.dataDoc[this.fieldKey + '_0'] && !this._isEmpty) {
-                const dataSplit = StrCast(this.dataDoc.data).split('Answer: ');
+                const dataSplit = StrCast(this.dataDoc.data).includes('Keyword: ') ? StrCast(this.dataDoc.data).split('Keyword: ') : StrCast(this.dataDoc.data).split('Answer: ');
                 const newDoc = Docs.Create.TextDocument(dataSplit[1]);
+                if (this.Document.image) DocCast(newDoc).image = DocCast(this.Document.image);
+                console.log('D' + this.Document.image);
+                //if (DocCast(DocCast(newDoc).dataDoc)) DocCast(DocCast(newDoc).dataDoc)['image'] = this.dataDoc['image'];
+
+                // console.log('HI' + this.Document.image);
+                // const imageSnapshot = Docs.Create.ImageDocument(StrCast(this.Document.image), {
+                //     _nativeWidth: Doc.NativeWidth(this.layoutDoc),
+                //     _nativeHeight: Doc.NativeHeight(this.layoutDoc),
+                //     x: NumCast(this.layoutDoc.x),
+                //     y: NumCast(this.layoutDoc.y),
+                //     onClick: FollowLinkScript(),
+                //     _width: 150,
+                //     _height: 150,
+                //     title: '--snapshot' + NumCast(this.layoutDoc._layout_currentTimecode) + ' image-',
+                // });
+                // // return imageSnapshot;
+                // imageSnapshot['x'] = this.layoutDoc['x'];
+                // imageSnapshot['y'] = this.layoutDoc['y'];
+
+                // const newDoc = Docs.Create.TextDocument(selection);
+                // newDoc.text = selection;
+                // newDoc['backgroundColor'] = 'lightgray';
+                // newDoc.data = imageSnapshot;
+                // this.createDropTarget(this., this.fieldKey + '_0', 0)
+                // Doc.AddEmbedding(imageSnapshot, newDoc);
+                // Doc.SetContainer(imageSnapshot, newDoc);
+                // Doc.AddToMyOverlay(imageSnapshot);
+
+                // if (StrCast(this.dataDoc.data).includes('Keyword: ')) {
+                //     console.log('HERE' + this.dataDoc.data);
+                //     this.fetchImages(StrCast(this.dataDoc.data).split('Keyword: ')[1]);
+                // }
+                //     // const node = schema.nodes.dashDoc.create({
+                //     //     width: NumCast(newDoc._width),
+                //     //     height: NumCast(newDoc._height),
+                //     //     title: 'dashDoc',
+                //     //     docId: newDoc[Id],
+                //     //     float: 'unset',
+                //     // });
+                //     // Doc.AddEmbedding(images!, newDoc);
+                //     // Doc.SetContainer(images, this.newDoc);
+                // } else {
+                // newDoc.text = dataSplit[1];
+                // newDoc['backgroundColor'] = 'lightgray';
+                this.addDoc(newDoc, this.fieldKey + '_0');
+                // this.addDoc()
+                // }
+                // newDoc?.addDocument?.(images);
+
                 // if there is text from the pdf ai cards, put the question on the front side.
                 // eslint-disable-next-line prefer-destructuring
                 // newDoc.text = dataSplit[1];
-                newDoc['backgroundColor'] = 'lightgray';
-                this.addDoc(newDoc, this.fieldKey + '_0');
+                // newDoc['backgroundColor'] = 'lightgray';
+                // this.addDoc(newDoc, this.fieldKey + '_0');
                 // DocCast(this.dataDoc[this.fieldKey + '_0'])[DocData].text = dataSplit[1];
                 // DocCast(this.dataDoc[this.fieldKey + '_0']).text = dataSplit[1];
                 // console.log('HI' + DocCast(this.dataDoc[this.fieldKey + '_0']).text);
@@ -556,7 +785,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
             }
 
             if (!this.dataDoc[this.fieldKey + '_1'] && !this._isEmpty) {
-                const dataSplit = StrCast(this.dataDoc.data).split('Answer: ');
+                const dataSplit = StrCast(this.dataDoc.data).includes('Keyword: ') ? StrCast(this.dataDoc.data).split('Keyword: ') : StrCast(this.dataDoc.data).split('Answer: ');
                 const newDoc = Docs.Create.TextDocument(dataSplit[0]);
                 this.addDoc(newDoc, this.fieldKey + '_1');
                 // if there is text from the pdf ai cards, put the answer on the alternate side.
@@ -592,15 +821,21 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
                                 </div>
                             ) : null}
                         </div>
-                        <div className="submit-button" style={{ overflow: 'hidden', display: this.layoutDoc[`_${this._props.fieldKey}_usePath`] === 'alternate' ? 'none' : 'flex' }}>
-                            <button type="button" onClick={this.handleRenderGPTClick} style={{ borderRadius: '2px', marginBottom: '3px' }}>
-                                Submit
-                            </button>
-                        </div>
-                        <div className="submit-button" style={{ overflow: 'hidden', marginBottom: '2px', display: this.layoutDoc[`_${this._props.fieldKey}_usePath`] === 'alternate' ? 'flex' : 'none' }}>
-                            <button type="button" onClick={this.handleRenderClick} style={{ borderRadius: '2px' }}>
-                                Redo the Question
-                            </button>
+                        <div style={{ display: 'inline-block' }}>
+                            <div className="submit-button" style={{ overflow: 'hidden' }}>
+                                <button style={{ width: '10px' }} onClick={this.listening ? this.stopListening : this.startListening}>
+                                    {<FontAwesomeIcon icon="microphone" size="lg" />}
+                                </button>
+                                {this.layoutDoc[`_${this._props.fieldKey}_usePath`] !== 'alternate' ? (
+                                    <button type="button" onClick={this.handleRenderGPTClick} style={{ borderRadius: '2px', marginBottom: '3px' }}>
+                                        Submit
+                                    </button>
+                                ) : (
+                                    <button type="button" onClick={this.handleRenderClick} style={{ borderRadius: '2px' }}>
+                                        Redo the Question
+                                    </button>
+                                )}
+                            </div>
                         </div>
                     </div>
                 );