From dd9ac92afa01cec668a2c31aace3dcb2a91af3ed Mon Sep 17 00:00:00 2001 From: bobzel Date: Tue, 3 Sep 2024 11:36:32 -0400 Subject: removed unused files --- src/server/public/assets/dash-colon-menu 2.gif | Bin 348794 -> 0 bytes src/server/public/assets/dash-create-link-board 2.gif | Bin 167854 -> 0 bytes src/server/public/assets/dash-following-link 2.gif | Bin 181851 -> 0 bytes src/server/public/assets/documentation 2.png | Bin 4526 -> 0 bytes 4 files changed, 0 insertions(+), 0 deletions(-) delete mode 100644 src/server/public/assets/dash-colon-menu 2.gif delete mode 100644 src/server/public/assets/dash-create-link-board 2.gif delete mode 100644 src/server/public/assets/dash-following-link 2.gif delete mode 100644 src/server/public/assets/documentation 2.png (limited to 'src') diff --git a/src/server/public/assets/dash-colon-menu 2.gif b/src/server/public/assets/dash-colon-menu 2.gif deleted file mode 100644 index b5512afb1..000000000 Binary files a/src/server/public/assets/dash-colon-menu 2.gif and /dev/null differ diff --git a/src/server/public/assets/dash-create-link-board 2.gif b/src/server/public/assets/dash-create-link-board 2.gif deleted file mode 100644 index 354188fd9..000000000 Binary files a/src/server/public/assets/dash-create-link-board 2.gif and /dev/null differ diff --git a/src/server/public/assets/dash-following-link 2.gif b/src/server/public/assets/dash-following-link 2.gif deleted file mode 100644 index 9e3e6df82..000000000 Binary files a/src/server/public/assets/dash-following-link 2.gif and /dev/null differ diff --git a/src/server/public/assets/documentation 2.png b/src/server/public/assets/documentation 2.png deleted file mode 100644 index 95c76b198..000000000 Binary files a/src/server/public/assets/documentation 2.png and /dev/null differ -- cgit v1.2.3-70-g09d2 From e8547b9618e5f3d43662e728f4b18e2de9084e47 Mon Sep 17 00:00:00 2001 From: bobzel Date: Tue, 3 Sep 2024 13:32:09 -0400 Subject: fix copmarison box slidebar to work. --- src/client/util/CurrentUserUtils.ts | 1 - src/client/views/nodes/ComparisonBox.tsx | 28 ++++++++++++---------------- 2 files changed, 12 insertions(+), 17 deletions(-) (limited to 'src') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 8a9f20565..14fb65252 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -260,7 +260,6 @@ export class CurrentUserUtils { } return plotly; } - const plotlyView = (opts:DocumentOptions) => { const rtfield = new RichTextField(JSON.stringify( {doc: {type:"doc",content:[ diff --git a/src/client/views/nodes/ComparisonBox.tsx b/src/client/views/nodes/ComparisonBox.tsx index 9e1c1b7be..13eb2bf3f 100644 --- a/src/client/views/nodes/ComparisonBox.tsx +++ b/src/client/views/nodes/ComparisonBox.tsx @@ -56,7 +56,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent() @observable private _loading = false; @observable private _isEmpty = false; @observable private _audio: Doc = Docs.Create.TextDocument(''); - @observable childActive = false; + @observable _childActive = false; // whether pointer events pass through comparison box to its contents or not @observable _yRelativeToTop: boolean = true; @observable _animating = ''; @observable mathJaxConfig = { @@ -160,10 +160,6 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent() console.log(this._inputValue); }; - @action activateContent = () => { - this.childActive = true; - }; - @action handleRenderClick = () => { this.frontSide = !this.frontSide; }; @@ -183,8 +179,8 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent() @action private onPointerMove = ({ movementX }: PointerEvent) => { const width = movementX * this.ScreenToLocalBoxXf().Scale + (this.clipWidth / 100) * this._props.PanelWidth(); - if (width && width > 5 && width < this._props.PanelWidth()) { - this.layoutDoc[this.clipWidthKey] = (width * 100) / this._props.PanelWidth(); + if (width < this._props.PanelWidth()) { + this.layoutDoc[this.clipWidthKey] = (Math.max(0, width) * 100) / this._props.PanelWidth(); } return false; }; @@ -193,7 +189,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent() this._props.setContentViewBox?.(this); reaction( () => this._props.isSelected(), // when this reaction should update - selected => !selected && (this.childActive = false) // what it should update to + selected => !selected && (this._childActive = false) // what it should update to ); } @@ -291,7 +287,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent() emptyFunction, action((moveEv, doubleTap) => { if (doubleTap) { - this.childActive = true; + this._childActive = true; if (!this.dataDoc[this.fieldKey + '_1'] && !this.dataDoc[this.fieldKey]) this.dataDoc[this.fieldKey + '_1'] = DocUtils.copyDragFactory(Doc.UserDoc().emptyNote as Doc); if (!this.dataDoc[this.fieldKey + '_2'] && !this.dataDoc[this.fieldKey + '_alternate']) this.dataDoc[this.fieldKey + '_2'] = DocUtils.copyDragFactory(Doc.UserDoc().emptyNote as Doc); } @@ -299,7 +295,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent() false, undefined, action(() => { - if (this.childActive) return; + if (this._childActive) return; this._animating = 'all 200ms'; // on click, animate slider movement to the targetWidth this.layoutDoc[this.clipWidthKey] = (targetWidth * 100) / this._props.PanelWidth(); @@ -678,13 +674,13 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent() removeDocument={whichSlot.endsWith('1') ? this.remDoc1 : this.remDoc2} NativeWidth={this.layoutWidth} NativeHeight={this.layoutHeight} - isContentActive={() => this.childActive} + isContentActive={() => this._childActive} isDocumentActive={returnFalse} dontSelect={returnTrue} whenChildContentsActiveChanged={this.whenChildContentsActiveChanged} - styleProvider={this.childActive ? this._props.styleProvider : this.docStyleProvider} + styleProvider={this._childActive ? this._props.styleProvider : this.docStyleProvider} hideLinkButton - pointerEvents={this.childActive ? undefined : returnNone} + pointerEvents={this._childActive ? undefined : returnNone} /> {/* */} {/*
{layoutString ? null : clearButton(whichSlot)}
*/} @@ -703,7 +699,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent() style={{ width: this._props.PanelWidth() }} onPointerDown={e => { this.registerSliding(e, cover); - this.activateContent(); + this._childActive = true; }} ref={ele => this.createDropTarget(ele, which, index)}> {!this._isEmpty ? displayDoc(which) : null} @@ -823,10 +819,10 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent()
(this._props.PanelWidth() - 5) / this._props.PanelWidth() ? 'w-resize' : undefined, }} - onPointerDown={e => !this.childActive && this.registerSliding(e, this._props.PanelWidth() / 2)} /* if clicked, return slide-bar to center */ + onPointerDown={e => this.registerSliding(e, this._props.PanelWidth() / 2)} /* if clicked, return slide-bar to center */ >
-- cgit v1.2.3-70-g09d2 From dd5d85e4b388a137651a2ae07c7b9e2d937af591 Mon Sep 17 00:00:00 2001 From: bobzel Date: Tue, 3 Sep 2024 13:35:26 -0400 Subject: from last --- .../collections/collectionFreeForm/MarqueeView.tsx | 31 ++-------------------- 1 file changed, 2 insertions(+), 29 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx index b6e8effa2..10fdbf5d5 100644 --- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx +++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx @@ -2,13 +2,13 @@ import { action, computed, makeObservable, observable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import { ClientUtils, lightOrDark, returnFalse } from '../../../../ClientUtils'; -import { intersectRect, numberRange } from '../../../../Utils'; +import { intersectRect } from '../../../../Utils'; import { Doc, DocListCast, Opt } from '../../../../fields/Doc'; import { AclAdmin, AclAugment, AclEdit, DocData } from '../../../../fields/DocSymbols'; import { Id } from '../../../../fields/FieldSymbols'; import { InkTool } from '../../../../fields/InkField'; import { List } from '../../../../fields/List'; -import { Cast, ImageCast, NumCast, StrCast } from '../../../../fields/Types'; +import { Cast, NumCast, StrCast } from '../../../../fields/Types'; import { ImageField } from '../../../../fields/URLField'; import { GetEffectiveAcl } from '../../../../fields/util'; import { DocUtils } from '../../../documents/DocUtils'; @@ -30,9 +30,6 @@ import { SubCollectionViewProps } from '../CollectionSubView'; import { ImageLabelBoxData } from './ImageLabelBox'; import { MarqueeOptionsMenu } from './MarqueeOptionsMenu'; import './MarqueeView.scss'; -import { ImageLabelHandler } from './ImageLabelHandler'; -import { gptGetEmbedding, gptImageLabel } from '../../../apis/gpt/GPT'; -import { CollectionCardView } from '../CollectionCardDeckView'; interface MarqueeViewProps { getContainerTransform: () => Transform; @@ -437,30 +434,6 @@ export class MarqueeView extends ObservableReactComponent { - // this._selectedDocs = this.marqueeSelect(false, DocumentType.IMG); - - // const imageInfos = this._selectedDocs.map(async doc => { - // const [name, type] = ImageCast(doc[Doc.LayoutFieldKey(doc)]).url.href.split('.'); - // return CollectionCardView.imageUrlToBase64(`${name}_o.${type}`).then(hrefBase64 => - // !hrefBase64 ? undefined : - // gptImageLabel(hrefBase64, 'Give three to five labels to describe this image.').then(labels => - // Promise.all(labels.split('\n').map(label => gptGetEmbedding(label))).then(embeddings => - // ({ doc, embeddings, labels }))) ); // prettier-ignore - // }); - - // (await Promise.all(imageInfos)).forEach(imageInfo => { - // if (imageInfo && Array.isArray(imageInfo.embeddings)) { - // imageInfo.doc[DocData].data_labels = imageInfo.labels; - // numberRange(3).forEach(n => { - // imageInfo.doc[`data_labels_embedding_${n + 1}`] = new List(imageInfo.embeddings[n]); - // }); - // } - // }); - - // if (e) { - // ImageLabelHandler.Instance.displayLabelHandler(e.pageX, e.pageY); - // } - const groupButton = DocListCast(Doc.MyLeftSidebarMenu.data).find(d => d.target === Doc.MyImageGrouper); if (groupButton) { this._selectedDocs = this.marqueeSelect(false, DocumentType.IMG); -- cgit v1.2.3-70-g09d2 From 67965a6c2e8600dc85553d7ee5880298d798650f Mon Sep 17 00:00:00 2001 From: bobzel Date: Tue, 3 Sep 2024 14:40:03 -0400 Subject: start of cleaning comparisonBox code. --- .../collections/collectionFreeForm/MarqueeView.tsx | 4 +- src/client/views/nodes/ComparisonBox.tsx | 240 +++++++++------------ 2 files changed, 107 insertions(+), 137 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx index 10fdbf5d5..917aaaea8 100644 --- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx +++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx @@ -433,14 +433,14 @@ export class MarqueeView extends ObservableReactComponent { + classifyImages = async () => { const groupButton = DocListCast(Doc.MyLeftSidebarMenu.data).find(d => d.target === Doc.MyImageGrouper); if (groupButton) { this._selectedDocs = this.marqueeSelect(false, DocumentType.IMG); ImageLabelBoxData.Instance.setData(this._selectedDocs); MainView.Instance.expandFlyout(groupButton); } - }); + }; /** * Groups images to most similar labels. diff --git a/src/client/views/nodes/ComparisonBox.tsx b/src/client/views/nodes/ComparisonBox.tsx index 13eb2bf3f..cf2cf5e18 100644 --- a/src/client/views/nodes/ComparisonBox.tsx +++ b/src/client/views/nodes/ComparisonBox.tsx @@ -1,41 +1,34 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { MathJax, MathJaxContext } from 'better-react-mathjax'; import { Tooltip } from '@mui/material'; -import { action, computed, makeObservable, observable, reaction } from 'mobx'; +import axios from 'axios'; +import { IReactionDisposer, action, computed, makeObservable, observable, reaction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; +import ReactLoading from 'react-loading'; import { returnFalse, returnNone, returnTrue, setupMoveUpEvents } from '../../../ClientUtils'; import { emptyFunction } from '../../../Utils'; import { Doc, Opt } from '../../../fields/Doc'; import { DocData } from '../../../fields/DocSymbols'; +import { Id } from '../../../fields/FieldSymbols'; import { RichTextField } from '../../../fields/RichTextField'; import { DocCast, NumCast, RTFCast, StrCast, toList } from '../../../fields/Types'; +import { nullAudio } from '../../../fields/URLField'; import { GPTCallType, gptAPICall, gptImageLabel } from '../../apis/gpt/GPT'; -import '../pdf/GPTPopup/GPTPopup.scss'; -import { DocUtils } from '../../documents/DocUtils'; -import { DocumentType } from '../../documents/DocumentTypes'; +import { DocUtils, FollowLinkScript } from '../../documents/DocUtils'; +import { CollectionViewType, DocumentType } from '../../documents/DocumentTypes'; import { Docs } from '../../documents/Documents'; import { DragManager } from '../../util/DragManager'; import { dropActionType } from '../../util/DropActionTypes'; import { undoable } from '../../util/UndoManager'; +import { ContextMenu } from '../ContextMenu'; import { ViewBoxAnnotatableComponent } from '../DocComponent'; import { PinDocView, PinProps } from '../PinFuncs'; import { StyleProp } from '../StyleProp'; +import '../pdf/GPTPopup/GPTPopup.scss'; import './ComparisonBox.scss'; import { DocumentView } from './DocumentView'; import { FieldView, FieldViewProps } from './FieldView'; import { FormattedTextBox } from './formattedText/FormattedTextBox'; -import ReactLoading from 'react-loading'; -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'; -import ReactMarkdown from 'react-markdown'; -import { WebField, nullAudio } from '../../../fields/URLField'; const API_URL = 'https://api.unsplash.com/search/photos'; @@ -44,46 +37,47 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent() public static LayoutString(fieldKey: string) { return FieldView.LayoutString(ComparisonBox, fieldKey); } + private _reactDisposer: IReactionDisposer | undefined; private _disposers: (DragManager.DragDropDisposer | undefined)[] = [undefined, undefined]; + private _closeRef = React.createRef(); + + SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition; + + protected createDropTarget = (ele: HTMLDivElement | null, fieldKey: string, disposerId: number) => { + this._disposers[disposerId]?.(); + if (ele) { + this._disposers[disposerId] = DragManager.MakeDropTarget(ele, (e, dropEvent) => this.internalDrop(e, dropEvent, fieldKey), this.layoutDoc); + } + }; + constructor(props: FieldViewProps) { super(props); makeObservable(this); this.setListening(); } + @observable private _mathJaxConfig = { loader: { load: ['input/asciimath'] } }; // prettier-ignore + @observable private _transcriptElement = ''; @observable private _inputValue = ''; @observable private _outputValue = ''; @observable private _loading = false; @observable private _isEmpty = false; @observable private _audio: Doc = Docs.Create.TextDocument(''); - @observable _childActive = false; // whether pointer events pass through comparison box to its contents or not - @observable _yRelativeToTop: boolean = true; - @observable _animating = ''; - @observable mathJaxConfig = { - loader: { load: ['input/asciimath'] }, - }; + @observable private _childActive = false; // whether pointer events pass through comparison box to its contents or not + @observable private _animating = ''; @observable private _listening = false; - @observable transcriptElement = ''; - @observable private frontSide = false; - SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition; - @observable recognition = new this.SpeechRecognition(); - _closeRef = React.createRef(); + @observable private _frontSide = false; + @observable private _recognition = new this.SpeechRecognition(); - get revealOp() { - return this.layoutDoc[`_${this._props.fieldKey}_revealOp`]; - } - get clipHeightKey() { - return '_' + this._props.fieldKey + '_clipHeight'; + @computed get revealOpKey() { + return `_${this.fieldKey}_revealOp`; } - - get clipWidthKey() { - return '_' + this._props.fieldKey + '_clipWidth'; - } - + @computed get clipHeightKey() { return '_' + this.fieldKey + '_clipHeight'; } // prettier-ignore + @computed get clipWidthKey() { return '_' + this.fieldKey + '_clipWidth'; } // prettier-ignore + @computed get revealOp() { return this.layoutDoc[`_${this.fieldKey}_revealOp`]; } // prettier-ignore @computed get clipWidth() { return NumCast(this.layoutDoc[this.clipWidthKey], 50); } - @computed get clipHeight() { return NumCast(this.layoutDoc[this.clipHeightKey], 200); } @@ -101,8 +95,8 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent() }) } style={{ - background: this.revealOp === 'hover' ? 'gray' : this.frontSide ? 'white' : 'black', - color: this.revealOp === 'hover' ? 'black' : this.frontSide ? 'black' : 'white', + background: this.revealOp === 'hover' ? 'gray' : this._frontSide ? 'white' : 'black', + color: this.revealOp === 'hover' ? 'black' : this._frontSide ? 'black' : 'white', display: 'inline-block', }}>
@@ -117,8 +111,8 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent() return (
Flip to front side to use GPT
:
Ask GPT to create an answer on the back side of the flashcard based on your question on the front
}> -
(!this.frontSide ? this.findImageTags() : null)}> + title={this._frontSide ?
Flip to front side to use GPT
:
Ask GPT to create an answer on the back side of the flashcard based on your question on the front
}> +
(!this._frontSide ? this.findImageTags() : null)}>
@@ -145,26 +139,37 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent() ); } + componentDidMount() { + this._props.setContentViewBox?.(this); + this._reactDisposer = reaction( + () => this._props.isSelected(), // when this reaction should update + selected => !selected && (this._childActive = false) // what it should update to + ); + } + componentWillUnmount() { + this._disposers.forEach(d => d?.()); + this._reactDisposer?.(); + } + @action handleHover = () => { if (this.revealOp === 'hover') { - this.layoutDoc[`_${this._props.fieldKey}_revealOp`] = 'flip'; + this.layoutDoc[this.revealOpKey] = 'flip'; this.Document.forceActive = false; } else { - this.layoutDoc[`_${this._props.fieldKey}_revealOp`] = 'hover'; + this.layoutDoc[this.revealOpKey] = 'hover'; this.Document.forceActive = true; } }; - @action handleInputChange = (e: React.ChangeEvent) => { + handleInputChange = action((e: React.ChangeEvent) => { this._inputValue = e.target.value; - console.log(this._inputValue); - }; + }); - @action handleRenderClick = () => { - this.frontSide = !this.frontSide; - }; + handleRenderClick = action(() => { + this._frontSide = !this._frontSide; + }); - @action handleRenderGPTClick = async () => { + handleRenderGPTClick = action(() => { console.log('Phonetic transcription: ' + DocCast(this.Document.audio).phoneticTranscription); const phonTrans = DocCast(this.Document.audio).phoneticTranscription; if (phonTrans) { @@ -172,12 +177,11 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent() console.log('INPUT:' + this._inputValue); this.askGPTPhonemes(this._inputValue); } else if (this._inputValue) this.askGPT(GPTCallType.QUIZ); - this.frontSide = false; + this._frontSide = false; this._outputValue = ''; - }; + }); - @action - private onPointerMove = ({ movementX }: PointerEvent) => { + onPointerMove = ({ movementX }: PointerEvent) => { const width = movementX * this.ScreenToLocalBoxXf().Scale + (this.clipWidth / 100) * this._props.PanelWidth(); if (width < this._props.PanelWidth()) { this.layoutDoc[this.clipWidthKey] = (Math.max(0, width) * 100) / this._props.PanelWidth(); @@ -185,22 +189,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent() return false; }; - componentDidMount() { - this._props.setContentViewBox?.(this); - reaction( - () => this._props.isSelected(), // when this reaction should update - selected => !selected && (this._childActive = false) // what it should update to - ); - } - - protected createDropTarget = (ele: HTMLDivElement | null, fieldKey: string, disposerId: number) => { - this._disposers[disposerId]?.(); - if (ele) { - this._disposers[disposerId] = DragManager.MakeDropTarget(ele, (e, dropEvent) => this.internalDrop(e, dropEvent, fieldKey), this.layoutDoc); - } - }; - - private internalDrop = undoable((e: Event, dropEvent: DragManager.DropEvent, fieldKey: string) => { + internalDrop = undoable((e: Event, dropEvent: DragManager.DropEvent, fieldKey: string) => { if (dropEvent.complete.docDragData) { const { droppedDocuments } = dropEvent.complete.docDragData; const added = dropEvent.complete.docDragData.moveDocument?.(droppedDocuments, this.Document, (doc: Doc | Doc[]) => this.addDoc(toList(doc).lastElement(), fieldKey)); @@ -244,11 +233,9 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent() if (this.dataDoc[which] === doc) { this._isEmpty = true; // this.dataDoc[which] = 'empty'; - console.log('HEREEEE'); this.dataDoc[which] = undefined; return true; } - console.log('FALSE'); return false; }; @@ -295,18 +282,13 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent() false, undefined, action(() => { - if (this._childActive) return; - this._animating = 'all 200ms'; - // on click, animate slider movement to the targetWidth - this.layoutDoc[this.clipWidthKey] = (targetWidth * 100) / this._props.PanelWidth(); - // this.layoutDoc[this.clipHeightKey] = (targetWidth * 100) / this._props.PanelHeight(); - - setTimeout( - action(() => { - this._animating = ''; - }), - 200 - ); + if (!this._childActive) { + this._animating = 'all 200ms'; + // on click, animate slider movement to the targetWidth + this.layoutDoc[this.clipWidthKey] = (targetWidth * 100) / this._props.PanelWidth(); + // this.layoutDoc[this.clipHeightKey] = (targetWidth * 100) / this._props.PanelHeight(); + setTimeout(action(() => { this._animating = ''; }), 200); // prettier-ignore + } }) ); } @@ -315,31 +297,31 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent() setListening = () => { const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition; if (SpeechRecognition) { - this.recognition.continuous = true; - this.recognition.interimResults = true; - this.recognition.lang = 'en-US'; - this.recognition.onresult = this.handleResult.bind(this); + this._recognition.continuous = true; + this._recognition.interimResults = true; + this._recognition.lang = 'en-US'; + this._recognition.onresult = this.handleResult.bind(this); } ContextMenu.Instance.setLangIndex(0); }; startListening = () => { - this.recognition.start(); + this._recognition.start(); this._listening = true; }; stopListening = () => { - this.recognition.stop(); + this._recognition.stop(); this._listening = false; }; setLanguage = (language: string, ind: number) => { - this.recognition.lang = language; + this._recognition.lang = language; ContextMenu.Instance.setLangIndex(ind); }; convertAbr = () => { - switch (this.recognition.lang) { + switch (this._recognition.lang) { case 'en-US': return 'English'; //prettier-ignore case 'es-ES': return 'Spanish'; //prettier-ignore case 'fr-FR': return 'French'; //prettier-ignore @@ -378,19 +360,18 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent() }, }); this.Document.phoneticTranscription = response.data['transcription']; - console.log('RESPONSE: ' + response.data['transcription']); }; createFlashcardPile(collectionArr: Doc[], gpt: boolean) { const newCol = Docs.Create.CarouselDocument(collectionArr, { - _width: NumCast(this.layoutDoc['_' + this._props.fieldKey + '_width'], 250) + 50, - _height: NumCast(this.layoutDoc['_' + this._props.fieldKey + '_width'], 200) + 50, + _width: NumCast(this.layoutDoc['_' + this.fieldKey + '_width'], 250) + 50, + _height: NumCast(this.layoutDoc['_' + this.fieldKey + '_width'], 200) + 50, _layout_fitWidth: false, _layout_autoHeight: true, }); - newCol['x'] = this.layoutDoc['x']; - newCol['y'] = NumCast(this.layoutDoc['y']) + 50; - newCol.type_collection = 'carousel'; + newCol.x = this.layoutDoc.x; + newCol.y = NumCast(this.layoutDoc.y) + 50; + newCol.type_collection = CollectionViewType.Carousel; if (gpt) { this._props.DocumentView?.()._props.addDocument?.(newCol); @@ -403,9 +384,9 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent() } gptFlashcardPile = async () => { - var text = await this.askGPT(GPTCallType.STACK); - var senArr = text?.split('Question: '); - var collectionArr: Doc[] = []; + let text = await this.askGPT(GPTCallType.STACK); + let senArr = text?.split('Question: '); + let collectionArr: Doc[] = []; for (let i = 1; i < senArr?.length!; i++) { const newDoc = Docs.Create.ComparisonDocument(senArr![i], { _layout_isFlashcard: true, _width: 300, _height: 300 }); @@ -480,6 +461,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent() } this._loading = false; }; + layoutWidth = () => NumCast(this.layoutDoc.width, 200); layoutHeight = () => NumCast(this.layoutDoc.height, 200); @@ -488,8 +470,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent() if (c?.length === 0) await this.askGPT(GPTCallType.CHATCARD); if (c) { this._loading = true; - for (let i of c) { - console.log(i); + for (const i of c) { if (i.className !== 'ProseMirror-separator') await this.getImageDesc(i.src); } this._loading = false; @@ -527,17 +508,11 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent() this.convertAbr() + ' speech and they are not allophones of the same phoneme and they are far away from each on the ipa vowel chat and that pronunciation is not normal for the meaning of the word, note this difference and explain how it is supposed to sound. Just so you know, "i" sounds like "ee" as in "bee", not "ih" as an "lick". Interpret "ɹ" as the same as "r". Interpret "ʌ" as the same as "ə". Do not make "θ" and "f" interchangable. Do not make "n" and "ɲ" interchangable. Do not make "e" and "i" interchangable. If "ɚ", "ɔː", and "ɔ" are options for pronunciation, do not choose "ɚ". Ignore differences with colons. Ignore redundant letters and words and sounds and the splitting of words; do not mention this since there could be repeated words in the sentence. Provide a response like this: "Lets work on improving the pronunciation of "coffee." You said "cawffee," which is close, but we need to adjust the vowel sound. In American English, "coffee" is pronounced /ˈkɔːfi/, with a long "aw" sound. Try saying "kah-fee." Your intonation is good, but try putting a bit more stress on "like" in the sentence "I would like a coffee with milk." This will make your speech sound more natural. Keep practicing, and lets try saying the whole sentence again!"'; - switch (this.recognition.lang) { - case 'en-US': - this._outputValue = await gptAPICall(promptEng, GPTCallType.PRONUNCIATION); - break; - case 'es-ES': - this._outputValue = await gptAPICall(promptSpa, GPTCallType.PRONUNCIATION); - break; - default: - this._outputValue = await gptAPICall(promptAll, GPTCallType.PRONUNCIATION); - break; - } + switch (this._recognition.lang) { + case 'en-US': this._outputValue = await gptAPICall(promptEng, GPTCallType.PRONUNCIATION); break; + case 'es-ES': this._outputValue = await gptAPICall(promptSpa, GPTCallType.PRONUNCIATION); break; + default: this._outputValue = await gptAPICall(promptAll, GPTCallType.PRONUNCIATION); break; + } // prettier-ignore }; handleResult = (e: SpeechRecognitionEvent) => { @@ -568,8 +543,8 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent() _height: 150, title: '--snapshot' + NumCast(this.layoutDoc._layout_currentTimecode) + ' image-', }); - imageSnapshot['x'] = this.layoutDoc['x']; - imageSnapshot['y'] = this.layoutDoc['y']; + imageSnapshot.x = this.layoutDoc.x; + imageSnapshot.y = this.layoutDoc.y; return imageSnapshot; } catch (error) { console.log(error); @@ -578,8 +553,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent() static imageUrlToBase64 = async (imageUrl: string): Promise => { try { - const response = await fetch(imageUrl); - const blob = await response.blob(); + const blob = await fetch(imageUrl).then(response => response.blob()); return new Promise((resolve, reject) => { const reader = new FileReader(); @@ -600,14 +574,13 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent() DocCast(this.dataDoc[this.props.fieldKey + '_0'])[DocData].text = response; } catch (error) { - console.log('Error'); + console.log('Error', error); } }; - @action - flipFlashcard = () => { - this.frontSide = !this.frontSide; - }; + flipFlashcard = action(() => { + this._frontSide = !this._frontSide; + }); hoverFlip = (side: boolean) => { if (this.revealOp === 'hover') this.layoutDoc[`_${this._props.fieldKey}_usePath`] = side; @@ -659,7 +632,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent() // whichDoc['backgroundColor'] = this.layoutDoc['backgroundColor']; return targetDoc || layoutString ? ( - // + // // <> () ); if (this.Document._layout_isFlashcard) { - const side = this.frontSide ? 1 : 0; + const side = this._frontSide ? 1 : 0; // add text box to each side when comparison box is first created // (!this.dataDoc[this.fieldKey + '_0'] && this.dataDoc[this._props.fieldKey + '_0'] !== 'empty') @@ -732,14 +705,14 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent()

Return to all flashcards and add text to both sides.

+ readOnly={this._frontSide}> {this._loading ? (
@@ -771,7 +744,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent() Evaluate Pronunciation - {this.frontSide ? ( + {this._frontSide ? ( @@ -791,12 +764,8 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent()
{ - this.hoverFlip(false); - }} - onMouseLeave={() => { - this.hoverFlip(true); - }}> + onMouseEnter={() => this.hoverFlip(false)} + onMouseLeave={() => this.hoverFlip(true)}> {displayBox(`${this.fieldKey}_${side === 0 ? 1 : 0}`, side, this._props.PanelWidth() - 3)} {this._loading ? (
@@ -820,6 +789,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent() className="slide-bar" style={{ left: `min(100% - 3px, calc(${this.clipWidth + '%'}))`, + transition: this._animating, cursor: this.clipWidth < 5 ? 'e-resize' : this.clipWidth / 100 > (this._props.PanelWidth() - 5) / this._props.PanelWidth() ? 'w-resize' : undefined, }} onPointerDown={e => this.registerSliding(e, this._props.PanelWidth() / 2)} /* if clicked, return slide-bar to center */ -- cgit v1.2.3-70-g09d2