Make an AI app: experience report
Last week (May 5), I started on a small AI demo app that you can find at imagemachine.io. I’ll first talk about what the app does, then about the code and the development process. My goal, apart was having some fun, was to learn how to talk to OpenAI.com’s API so as to do simple AI tasks such as generating images from a text prompt.
What the app does
The app takes text prompts, sends them to OpenAI, and displays the results:
The above image was generated with the prompt abstract painting with three large shapes and many overlapping small ones. Cool colors, mostly blues and cool shades of cyan, blended in parts, high key, but with some dark values. Use a mixture of geometric and organic shapes. Overlap them.
You can generate multiple images in one go and step through them using the “Next” and “Previous” buttons. The app saves your prompts. Pushing the “Use” button next to a prompt loads it so that you
can edit it if desired, then ask for images. The user can also rate images with the thumbs up/down buttons and sort prompts by rating, creation date, and modification date. This is useful for weeding out prompts that give poor results (note the delete button).
I use the app for experimenting with ideas for paintings, but of course it can be used to generate any kind of image. The image above doesn’t thrill me — not sure why — so I changed the prompt to abstract painting in the style of Georges Braque. Use a combination of muted earth tones and warm grays, with reds, oranges, and yellows. I like this one better — but results for this or any kind of image depend on the details of the prompt and also on luck. Experimentation is required to get satisfaction.
Development process and code
May 5, 06:27. I begin with a starter app that I keep around for new lamdera projects (1763 loc). It could use some attention, but instead I forged ahead, building the new app on top of it,
May 5, 13:28. First working version. Now up to 1881 loc. The key ingredient is Choonkeat’s OpenAI library. How it is wired into the code for the app is explained in this Gist. The thing to note is that with @choonkeat 's library in hand, it doesn’t take much work to get interesting and useful AI results.
May 5-May 10. Various UI enhancements, e.g., retain a searchable and sortable list of prompts made, add a spinner to look at while waiting for OpenAI to reply, and add a rudimentary admin system for monitoring usage and adding to a user’s allocation of images. The code is now at 3041 lines although AI functionality is unchanged.
The code is not open source, but everything that I know that is of value for creating apps like these is contained in this post and the Gist mentioned previously,
Remarks
I appreciate the help and comments from folks on Slack and Discord, with special thanks to @supermario and Lamdera.
I welcome further suggestions and comments. The starter app could, as I mentioned, use some attention, particularly the authentication part. Also: remove all unneeded code.
Unsolved Problem
In addition to the foregoing, there is one feature that I have been unsuccessful in implementing: save images generated by OpenAI to a searchable library which stores Cloudflare image urls. This should be done with the click of a button. The issue here is in transforming the image url received from OpenAI to a url stored in my Cloudflare account. The foundation for such things is laid in imagelibrary.lamdera.app. he app can handle images on disk, in the clipboard, or available on the web via a url. Alas, OpenAI is tricky about how it handles requests for its image urls. Help on this would be much appreciated
Addendum
(May 12, 2023.) I’ve added a new feature to imagemachine.io. Users can save images that they generate to a private image library. Directions for mac: control-click on the image generated, select “copy image”, then press cmd-V. The image will be saved to the user’s image library, along with the prompt used to make the image. That library is searchable. The query “red” will bring up any image the word “red” in the prompt, while “-red” will bring up images without “red” in the prompt. The query “braque red” will bring up images where the artist’s name “braque” appears as well as the word “red.”
Images are uploaded by the app to Cloudflare, which returns a public URL for the image. To access that URL, press the button “Copy image address.” The Cloudflare URL will be copied to the clipboard.
Also worth noting: images in a user’s can be displayed as a gallery. If the user makes the gallery publicly accessible, it can be viewed without sign-in via url. My gallery is available as magemachine.io/gallery/jxxcarlson. Here is another: imagemachine.io/gallery/zeno. And here is a screenshot of zeno’s gallery:
Addendum May 26, 2023
I’ve added an “Exhibit Space” where users can display selected images that they have generated. Below is a sample. You can access the Exhibit Space without signing in via imagemachine.io/exhibit. I’ll make a short video soon to demonstrate how one uses the app and adds images to the Exhibit Space. (I’m currently running low on image credits for the app at OpenAI, but should have a good new supply as of June 1).
