image creation works but is weird

4 files changed, 61 insertions, 57 deletions

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index 16c016d6c..94a37a19f 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -245,7 +245,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     }
 
     updateIcons = (docs: Doc[]) => {
-        console.log('called')
+        console.log('called');
         docs.map(this.getIcon);
     };
 
@@ -919,17 +919,17 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     @action setExpandedView = (info: { icon: ImageField; doc: Doc } | undefined) => {
         if (info) {
             const doc = info.doc;
-            const wrapper: Doc = Docs.Create.FreeformDocument([info.doc], { _height: NumListCast(doc._height)[0], _width: NumListCast(doc._width)[0], title: ''});
-            const newInfo = {icon: new ImageField(''), doc: wrapper}
+            const wrapper: Doc = Docs.Create.FreeformDocument([info.doc], { _height: NumListCast(doc._height)[0], _width: NumListCast(doc._width)[0], title: '' });
+            const newInfo = { icon: new ImageField(''), doc: wrapper };
             this._expandedPreview = newInfo;
         } else {
             this._expandedPreview = info;
         }
     };
 
-    get editingWindow(){
+    get editingWindow() {
         const doc = this._expandedPreview?.doc ?? new Doc();
-        const rendered = 
+        const rendered = (
             <div className="docCreatorMenu-expanded-template-preview">
                 <CollectionFreeFormView
                     Document={this._expandedPreview!.doc}
@@ -945,7 +945,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                     removeDocument={returnFalse}
                     PanelWidth={() => this._menuDimensions.width - 10}
                     PanelHeight={() => this._menuDimensions.height - 60}
-                    ScreenToLocalTransform={() => new Transform(-this._pageX,-this._pageY, 1)}
+                    ScreenToLocalTransform={() => new Transform(-this._pageX, -this._pageY, 1)}
                     renderDepth={5}
                     whenChildContentsActiveChanged={emptyFunction}
                     focus={emptyFunction}
@@ -961,14 +961,21 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                     yPadding={0}
                 />
             </div>
-
+        );
 
         return (
             <div className="docCreatorMenu-expanded-template-preview">
-                <div className="top-panel"/>
+                <div className="top-panel" />
                 {rendered}
                 <div className="right-buttons-panel">
-                    <button className="docCreatorMenu-menu-button section-reveal-options top-right" onPointerDown={e => this.setUpButtonClick(e, () => {this._expandedPreview && this.updateIcons(this._suggestedTemplates.slice()); this.setExpandedView(undefined)})}>
+                    <button
+                        className="docCreatorMenu-menu-button section-reveal-options top-right"
+                        onPointerDown={e =>
+                            this.setUpButtonClick(e, () => {
+                                this._expandedPreview && this.updateIcons(this._suggestedTemplates.slice());
+                                this.setExpandedView(undefined);
+                            })
+                        }>
                         <FontAwesomeIcon icon="minimize" />
                     </button>
                     <button className="docCreatorMenu-menu-button section-reveal-options top-right-lower" onPointerDown={e => this.setUpButtonClick(e, () => this._expandedPreview && this._templateDocs.push(this._expandedPreview.doc))}>
@@ -976,7 +983,6 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                     </button>
                 </div>
             </div>
-
         );
     }
 
@@ -1639,7 +1645,7 @@ export interface FieldOpts {
     fieldViewType?: 'freeform' | 'stacked';
 }
 
-type Field = {
+export type Field = {
     tl: [number, number];
     br: [number, number];
     opts: FieldOpts;
@@ -2359,4 +2365,3 @@ export class FieldUtils {
 //         }]
 //     };
 //  }
-
diff --git a/src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.tsx b/src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.tsx
index baa4ad521..e5a90ab4a 100644
--- a/src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.tsx
+++ b/src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.tsx
@@ -39,6 +39,7 @@ import { AudioBox } from '../../AudioBox';
 import { DiagramBox } from '../../DiagramBox';
 import { ImageField } from '../../../../../fields/URLField';
 import { DashUploadUtils } from '../../../../../server/DashUploadUtils';
+import { DocCreatorMenu, Field, FieldUtils } from '../../DataVizBox/DocCreatorMenu';
 
 dotenv.config();
 
@@ -398,6 +399,23 @@ export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         this.addCSVForAnalysis(doc, id);
     };
 
+    @action
+    createImageInDash = async (url: string, title: string, id: string, data: string) => {
+        const doc = FieldUtils.ImageField(
+            {
+                tl: [0, 0],
+                br: [300, 300],
+            },
+            300,
+            300,
+            title,
+            url ?? '',
+            {}
+        );
+
+        return doc;
+    };
+
     /**
      * Creates a text document in the dashboard and adds it for analysis.
      * @param title The title of the doc.
@@ -415,8 +433,7 @@ export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                 break;
             case 'image':
                 console.log('imageURL: ' + data);
-                //DashUploadUtils.UploadImage(data!);
-                doc = Docs.Create.ImageDocument(data || '', options);
+                doc = await this.createImageInDash(data || '', options.title as string, '', data || '');
                 break;
             case 'pdf':
                 doc = Docs.Create.PdfDocument(data || '', options);
diff --git a/src/client/views/nodes/chatbot/tools/ImageCreationTool.ts b/src/client/views/nodes/chatbot/tools/ImageCreationTool.ts
index cf9e8cfc8..3db401b14 100644
--- a/src/client/views/nodes/chatbot/tools/ImageCreationTool.ts
+++ b/src/client/views/nodes/chatbot/tools/ImageCreationTool.ts
@@ -4,6 +4,7 @@ import { BaseTool } from './BaseTool';
 import { Observation } from '../types/types';
 import { ParametersType, ToolInfo } from '../types/tool_types';
 import { DocumentOptions } from '../../../../documents/Documents';
+import { ClientUtils } from '../../../../../ClientUtils';
 
 const imageCreationToolParams = [
     {
@@ -36,31 +37,30 @@ export class ImageCreationTool extends BaseTool<ImageCreationToolParamsType> {
         console.log(`Generating image for prompt: ${image_prompt}`);
         // Create an array of promises, each one handling a search for a query
         try {
-            try {
-                const { image_url } = await Networking.PostToServer('/generateImage', {
-                    image_prompt,
-                });
-                if (res) {
-                    const result = await Networking.PostToServer('/uploadRemoteImage', { sources: res });
-                    const source = ClientUtils.prepend(result[0].accessPaths.agnostic.client);
-                    return source;
-                }
-            } catch (e) {
-                console.log(e);
-            }
-
-            const { base64_data, image_path } = await Networking.PostToServer('/generateImage', {
+            const { url } = await Networking.PostToServer('/generateImage', {
                 image_prompt,
             });
-            const id = uuidv4();
+            if (url) {
+                const result = await Networking.PostToServer('/uploadRemoteImage', { sources: [url] });
+                const source = ClientUtils.prepend(result[0].accessPaths.agnostic.client);
 
-            this._addLinkedDoc('image', image_path, {}, id);
-            return [
-                {
-                    type: 'image_url',
-                    image_url: { url: `data:image/jpeg;base64,${base64_data}` },
-                },
-            ];
+                const id = uuidv4();
+
+                this._addLinkedDoc('image', source, {}, id);
+                return [
+                    {
+                        type: 'image_url',
+                        image_url: { url },
+                    },
+                ];
+            } else {
+                return [
+                    {
+                        type: 'text',
+                        text: `An error occurred while generating image.`,
+                    },
+                ];
+            }
         } catch (error) {
             console.log(error);
             return [
diff --git a/src/server/ApiManagers/AssistantManager.ts b/src/server/ApiManagers/AssistantManager.ts
index 83bb1b228..425365348 100644
--- a/src/server/ApiManagers/AssistantManager.ts
+++ b/src/server/ApiManagers/AssistantManager.ts
@@ -426,30 +426,12 @@ export default class AssistantManager extends ApiManager {
                 }
 
                 try {
-                    const image = await openai.images.generate({ model: 'dall-e-3', prompt: image_prompt, response_format: 'b64_json' });
+                    const image = await openai.images.generate({ model: 'dall-e-3', prompt: image_prompt, response_format: 'url' });
                     console.log(image);
 
-                    const base64String = image.data[0].b64_json;
-                    if (!base64String) {
-                        throw new Error('No base64 data received from image generation');
-                    }
-                    // Generate a UUID for the file to ensure unique naming
-                    const uuidv4 = uuid.v4();
-                    const fullFilename = `${uuidv4}.jpg`; // Prefix the file name with the UUID
-
-                    // Get the full server path where the file will be saved
-                    const serverFilePath = serverPathToFile(Directory.images, fullFilename);
-
-                    const binaryData = Buffer.from(base64String, 'base64');
+                    const url = image.data[0].url;
 
-                    // Write the CSV data (which is a raw string) to the file
-                    await writeFileAsync(serverFilePath, binaryData);
-
-                    // Construct the client-accessible URL for the file
-                    const fileUrl = clientPathToFile(Directory.images, fullFilename);
-
-                    // Send the file URL and UUID back to the client
-                    res.send({ base64_data: base64String, image_path: fileUrl });
+                    res.send({ url });
                 } catch (error) {
                     console.error('Error fetching the URL:', error);
                     res.status(500).send({