Attempt to build an image generator using OpenAI

bobbingwide commented 5 months ago

Over the past few months I've been using several AI image generators via several methods

Directly in the browser
In an app on my iPhone
As part of a WordPress plugin

I now want to extend the oik-ai functionality to include image generation

Requirement

Image generation using DALL·E 3 and/or DALL·E 3 (HD). DALL·E 2 is not up to it
Automatic saving of images with the required title.
Meta data to indicate the prompt that was used to create the image
Various sizes: 512x512, 1024x1024 and something landscapy
Optionally: 772x250

The images have to be good enough to be published on a website such as wp-secrets.co.uk and, when required, stupidly brilliant enough to be published directly to seriouslybonkers.com

Proposed solution

Extend Oik_AI to include a new method called image, to complement chat
Test initial implementation in oik-batch.
Extend the OIK-AI form in class AI to invoke the image method and display the results.

bobbingwide commented 5 months ago

Image generation was delivered in v0.2.0 but there are problems if you don't set the Prompt to None.

Generate meta description <= 130 chars is no good for a file name.
If you happen to have pasted a post's content into the User Message and you click on an an Image button instead of Send then you get a Fatal Error on the request to generate the image Time: 2024-01-21 05:08:15

Processing: Image: 1024x1024 for Generate meta description <= 130 chars

Fatal error: Uncaught OpenAI\Exceptions\ErrorException: 
'Generate meta description <= 130 chars <!-- wp:paragraph -->\r\n<p>I wanted to convert something that I\'d started writing as a nested list into a table. </p>\r\n<!-- /wp:paragraph -->\r\n\r\n<!-- wp:paragraph -->\r\n<p>System message:</p>\r\n<!-- /wp:paragraph -->\r\n\r\n<!-- wp:paragraph {"className":"is-style-aiprompt"} -->\r\n<p class="is-style-aiprompt">Convert this Gutenberg nested list into a Gutenberg table block with 3 columns: Service,Chat,Image<br>The nested list items are the values for the Chat and Image cells</p>\r\n<!-- /wp:paragraph -->\r\n\r\n<!-- wp:paragraph -->\r\n<p>User message:</p>\r\n<!-- /wp:paragraph -->\r\n\r\n<!-- wp:group {"className":"is-style-aiprompt","layout":{"type":"constrained"}} -->\r\n<div class="wp-block-group is-style-aiprompt"><!-- wp:code -->\r\n<pre class="wp-block-code"><code><!-- wp:list -->\r\n<ul><!-- wp:list-item -->\r\n<li>OpenAI <!-- wp:list -->\r\n<ul><!-- wp:list-item -->\r\n<li>ChatGPT</li>\r\n<!-- /wp:list-item -->\r\n\r\n<!-- wp:list-item -->\r\n<li>DALL<strong>·</strong>E</li>\r\n<!-- /wp:list-item --></ul>\r\n<!-- /wp:list --></li>\r\n<!-- /wp:list-item -->\r\n\r\n<!-- wp:list-item -->\r\n<li>Deepai.org <!-- wp:list -->\r\n<ul><!-- wp:list-item -->\r\n<li>Chat</li>\r\n<!-- /wp:list-item -->\r\n\r\n<!-- wp:list-item -->\r\n<li>Image </li>\r\n<!-- /wp:list-item --></ul>\r\n<!-- /wp:list --></li>\r\n<!-- /wp:list-item -->\r\n\r\n<!-- wp:list-item -->\r\n<li>Google Bard https://bard.google.com/chat</li>\r\n<!-- /wp:list-item -->\r\n\r\n<!-- wp:list-item -->\r\n<li>Bing <!-- wp:list -->\r\n<ul><!-- wp:list-item -->\r\n<li>Chat <a href="https://www.bing.com/?scope=web&cc=GB">Bing</a></li>\r\n<!-- /wp:list-item -->\r\n\r\n<!-- wp:list-item -->\r\n<li><a href="https://www.bing.com/images/create?">Image Creator from Microsoft Designer (bing.com)</a></li>\r\n<!-- /wp:list-item --></ul>\r\n<!-- /wp:list --></li>\r\n<!-- /wp:list-item -->\r\n\r\n<!-- wp:list-item -->\r\n<li>LLaMA</li>\r\n<!-- /wp:list-item -->\r\n\r\n<!-- wp:list-item -->\r\n<li>Imagine with Meta AI - doesn\'t work in the UK yet.</li>\r\n<!-- /wp:list-item --></ul>\r\n<!-- /wp:list --></code></pre>\r\n<!-- /wp:code --></div>\r\n<!-- /wp:group -->\r\n\r\n<!-- wp:paragraph -->\r\n<p>Assistant message ie response.</p>\r\n<!-- /wp:paragraph -->\r\n\r\n<!-- wp:group {"className":"is-style-airesponse","layout":{"type":"constrained"}} -->\r\n<div class="wp-block-group is-style-airesponse"><!-- wp:oik-css/geshi {"lang":"html","content":"\\u003c!\\u002d\\u002d wp:table {\\u0022className\\u0022:\\u0022wp-block-table\\u0022} \\u002d\\u002d\\u003e\\n\\u003ctable class=\\u0022wp-block-table\\u0022\\u003e\\u003cthead\\u003e\\u003ctr\\u003e\\u003cth\\u003eService\\u003c/th\\u003e\\u003cth\\u003eChat\\u003c/th\\u003e\\u003cth\\u003eImage\\u003c/th\\u003e\\u003c/tr\\u003e\\u003c/thead\\u003e\\u003ctbody\\u003e\\u003ctr\\u003e\\u003ctd\\u003eOpenAI\\u003c/td\\u003e\\u003ctd\\u003eChatGPT\\u003c/td\\u003e\\u003ctd\\u003eDALL·E\\u003c/td\\u003e\\u003c/tr\\u003e\\u003ctr\\u003e\\u003ctd\\u003eDeepai.org\\u003c/td\\u003e\\u003ctd\\u003eChat\\u003c/td\\u003e\\u003ctd\\u003eImage\\u003c/td\\u003e\\u003c/tr\\u003e\\u003ctr\\u003e\\u003ctd\\u003eGoogle Bard\\u003c/td\\u003e\\u003ctd\\u003e\\u003ca href=\\u0022https://bard.google.com/chat\\u0022\\u003eChat\\u003c/a\\u003e\\u003c/td\\u003e\\u003ctd\\u003e-\\u003c/td\\u003e\\u003c/tr\\u003e\\u003ctr\\u003e\\u003ctd\\u003eBing\\u003c/td\\u003e\\u003ctd\\u003e\\u003ca href=\\u0022https://www.bing.com/?scope=web\\u0026cc=GB\\u0022\\u003eChat\\u003c/a\\u003e\\u003c/td\\u003e\\u003ctd\\u003e\\u003ca href=\\u0022https://www.bing.com/images/create?\\u0022\\u003eImage Creator from Microsoft Designer (bing.com)\\u003c/a\\u003e\\u003c/td\\u003e\\u003c/tr\\u003e\\u003ctr\\u003e\\u003ctd\\u003eLLaMA\\u003c/td\\u003e\\u003ctd\\u003e-\\u003c/td\\u003e\\u003ctd\\u003e-\\u003c/td\\u003e\\u003c/tr\\u003e\\u003ctr\\u003e\\u003ctd\\u003eImagine with Meta AI\\u003c/td\\u003e\\u003ctd\\u003e-\\u003c/td\\u003e\\u003ctd\\u003eNot working in the UK yet\\u003c/td\\u003e\\u003c/tr\\u003e\\u003c/tbody\\u003e\\u003c/table\\u003e\\n\\u003c!\\u002d\\u002d /wp:table \\u002d\\u002d\\u003e"} /--></div>\r\n<!-- /wp:group -->\r\n\r\n<!-- wp:table {"className":"wp-block-table"} -->\r\n<figure class="wp-block-table"><table><thead><tr><th>Service</th><th>Chat</th><th>Image</th></tr></thead><tbody><tr><td>OpenAI</td><td>ChatGPT</td><td>DALL·E</td></tr><tr><td>Deepai.org</td><td>Chat</td><td>Image</td></tr><tr><td>Google Bard</td><td><a href="https://bard.google.com/chat">Chat</a></td><td>-</td></tr><tr><td>Bing</td><td><a href="https://www.bing.com/?scope=web&cc=GB">Chat</a></td><td><a href="https://www.bing.com/images/create?">Image Creator from Microsoft Designer (bing.com)</a></td></tr><tr><td>LLaMA</td><td>-</td><td>-</td></tr><tr><td>Imagine with Meta AI</td><td>-</td><td>Not working in the UK yet</td></tr></tbody></table></figure>\r\n<!-- /wp:table -->' is too long - 'prompt' in C:\apache\htdocs\wordpress\wp-content\plugins\oik-ai\vendor\openai-php\client\src\Transporters\HttpTransporter.php:131

Stack trace: 
#0 C:\apache\htdocs\wordpress\wp-content\plugins\oik-ai\vendor\openai-php\client\src\Transporters\HttpTransporter.php(57): OpenAI\Transporters\HttpTransporter->throwIfJsonError(Array, '{\n "error": {\n...') 
#1 C:\apache\htdocs\wordpress\wp-content\plugins\oik-ai\vendor\openai-php\client\src\Resources\Images.php(30): OpenAI\Transporters\HttpTransporter->requestObject(Object(OpenAI\ValueObjects\Transporter\Payload)) 
#2 C:\apache\htdocs\wordpress\wp-content\plugins\oik-ai\classes\class-Oik-AI.php(139): OpenAI\Resources\Images->create(Array) 
#3 C:\apache\htdocs\wordpress\wp-content\plugins\oik-ai\classes\class-ai.php(225): Oik_AI->image_data('<!-- wp:paragra...') #4 C:\apache\htdocs\wordpress\wp-content\plugins\oik-ai\classes\class-ai.php(212): AI->get_image('1024x1024') 
#5 C:\apache\htdocs\wordpress\wp-content\plugins\oik-ai\classes\class-ai.php(100): AI->perform_get_image() 
#6 C:\apache\htdocs\wordpress\wp-content\plugins\oik-ai\ai.php(26): AI->process_form() 
#7 {main} thrown in C:\apache\htdocs\wordpress\wp-content\plugins\oik-ai\vendor\openai-php\client\src\Transporters\HttpTransporter.php on line 131

bobbingwide commented 5 months ago

Requirement

to be able to give a base name to the generated file
to see variations for the base name which use different system and user messages

Initial solution

I thought I could generate the file name from the system message
But this was problematic in some instances see above
And wasn't getting the results I was hoping for because the prompts were badly formed.
Proposed solution
A text field for the image_name labelled Image file name
This field is used in preference to the System Message.

bobbingwide / oik-ai