From e30da29f28f6b3ce71928c6c910e2d1a408cd560 Mon Sep 17 00:00:00 2001
From: geireann <geireann.lindfield@gmail.com>
Date: Wed, 22 Feb 2023 19:04:29 -0500
Subject: added simple AI image generation proof of concept

---
 .../views/nodes/formattedText/FormattedTextBox.tsx | 46 ++++++++++++++++++++++
 1 file changed, 46 insertions(+)

(limited to 'src/client/views/nodes/formattedText/FormattedTextBox.tsx')

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<FieldViewProps
 
         const options = cm.findByDescription('Options...');
         const optionItems = options && 'subitems' in options ? options.subitems : [];
+        optionItems.push({ description: `Generate Dall-E Image`, event: () => 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 <geireann.lindfield@gmail.com>
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/client/views/nodes/formattedText/FormattedTextBox.tsx')

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<FieldViewProps
 
     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,
@@ -867,7 +861,12 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
             let image_url = response.data.data[0].url;
             console.log(image_url);
             if (image_url) {
-                // const newDoc = Docs.Create.ImageDocument();
+                const newDoc = Docs.Create.ImageDocument(image_url, {
+                    x: NumCast(this.rootDoc.x) + NumCast(this.layoutDoc._width) + 10, 
+                    y: NumCast(this.rootDoc.y),
+                    _height: 200,
+                    _width: 200
+                })
                 if (DocListCast(Doc.MyOverlayDocs?.data).includes(this.rootDoc)) {
                     newDoc.overlayX = this.rootDoc.x;
                     newDoc.overlayY = NumCast(this.rootDoc.y) + NumCast(this.rootDoc._height);
-- 
cgit v1.2.3-70-g09d2

