From e30da29f28f6b3ce71928c6c910e2d1a408cd560 Mon Sep 17 00:00:00 2001 From: geireann Date: Wed, 22 Feb 2023 19:04:29 -0500 Subject: added simple AI image generation proof of concept --- src/client/views/MainView.tsx | 1 + .../views/nodes/formattedText/FormattedTextBox.tsx | 46 ++++++++++++++++++++++ 2 files changed, 47 insertions(+) (limited to 'src') diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 68f1bd72b..da64e7c12 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -274,6 +274,7 @@ export class MainView extends React.Component { fa.faHandPointRight, fa.faCompass, fa.faSnowflake, + fa.faStar, fa.faMicrophone, fa.faKeyboard, fa.faQuestion, diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index 619c59f0e..652971298 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -63,6 +63,7 @@ import { schema } from './schema_rts'; import { SummaryView } from './SummaryView'; import applyDevTools = require('prosemirror-dev-tools'); import React = require('react'); +import { Configuration, OpenAIApi } from 'openai'; const translateGoogleApi = require('translate-google-api'); export const GoogleRef = 'googleDocId'; @@ -838,12 +839,57 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent this.generateImage(), icon: 'star' }); optionItems.push({ description: !this.Document._singleLine ? 'Make Single Line' : 'Make Multi Line', event: () => (this.layoutDoc._singleLine = !this.layoutDoc._singleLine), icon: 'expand-arrows-alt' }); optionItems.push({ description: `${this.Document._autoHeight ? 'Lock' : 'Auto'} Height`, event: () => (this.layoutDoc._autoHeight = !this.layoutDoc._autoHeight), icon: 'plus' }); !options && cm.addItem({ description: 'Options...', subitems: optionItems, icon: 'eye' }); this._downX = this._downY = Number.NaN; }; + generateImage = async () => { + console.log("Generate image from text: ", (this.dataDoc.text as RichTextField)?.Text); + const newDoc = Docs.Create.ImageDocument("https://media.tenor.com/ffyK3EANQyYAAAAd/loading-chemical.gif", { + x: NumCast(this.rootDoc.x) + NumCast(this.layoutDoc._width) + 10, + y: NumCast(this.rootDoc.y), + _height: 200, + _width: 200 + }) + try { + const configuration = new Configuration({ + apiKey: process.env.OPENAI_KEY, + }); + const openai = new OpenAIApi(configuration); + const response = await openai.createImage({ + prompt: (this.dataDoc.text as RichTextField)?.Text, + n: 1, + size: "1024x1024", + }); + let image_url = response.data.data[0].url; + console.log(image_url); + if (image_url) { + // const newDoc = Docs.Create.ImageDocument(); + if (DocListCast(Doc.MyOverlayDocs?.data).includes(this.rootDoc)) { + newDoc.overlayX = this.rootDoc.x; + newDoc.overlayY = NumCast(this.rootDoc.y) + NumCast(this.rootDoc._height); + Doc.AddDocToList(Doc.MyOverlayDocs, undefined, newDoc); + } else { + this.props.addDocument?.(newDoc); + } + setTimeout(() => { + newDoc.data = image_url; + newDoc._height = 200; + newDoc._width = 200; + DocUtils.MakeLink({doc: this.rootDoc}, {doc: newDoc}, "Dall-E"); + }, 500) + } + } catch (err) { + console.log(err); + return ''; + } + + } + + breakupDictation = () => { if (this._editorView && this._recording) { this.stopDictation(true); -- cgit v1.2.3-70-g09d2 From fba9b8e68e19e65e9823c5538b7b8b25baeb4670 Mon Sep 17 00:00:00 2001 From: geireann Date: Wed, 22 Feb 2023 19:24:41 -0500 Subject: fixes --- src/client/views/nodes/formattedText/FormattedTextBox.tsx | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) (limited to 'src') diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index 652971298..683ccb9c4 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -848,12 +848,6 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent { console.log("Generate image from text: ", (this.dataDoc.text as RichTextField)?.Text); - const newDoc = Docs.Create.ImageDocument("https://media.tenor.com/ffyK3EANQyYAAAAd/loading-chemical.gif", { - x: NumCast(this.rootDoc.x) + NumCast(this.layoutDoc._width) + 10, - y: NumCast(this.rootDoc.y), - _height: 200, - _width: 200 - }) try { const configuration = new Configuration({ apiKey: process.env.OPENAI_KEY, @@ -867,7 +861,12 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent