Shock Your System

We created this ad using a small Nuxt.js (vue) app which uses the following tech: 1. The OpenAI GPT 3.5-turbo API First button click in the vue app calls this. It is responsible for responding to the brief with a headline, tagline, call to action, etc., The only additional explanation other than the RAW creative brief as supplied was: Now play the part of a talented advertising copy writer and create a print ad with 1. a headline that's less than 8 words long and does NOT include the brand name 2. One sentences of body copy creatively saying WHAT the product is and what the BENEFIT it offers in under 16 words. 3. a call to action under 5 words 4. a tag line under 5 words without mention of the brand name 5. one sentence under 12 words that is a concise visual description of a key abstract image symbolizing the energy and spirit of the brand, to go with the headline making sure the product is not part of the image. Plus, the request to put the response in a specific json format to be used by the vue app. 2. DeepAI Stable StableDiffusion API After gpt3.5 returns copy and an image description, we use this to generate the key visual. Wish we could have automated Midjourney for this, but SD is as good as we could get and stay as turnkey as possible. The only tampering that is done to the image description as returned in Step 1, was that of simple prompt addition like "dslr, dof, film grain, photorealistic, realism, 4K, 80mm" and an added negative prompt like, "disfigured, ugly, bad, immature, cartoon, anime, 3d, painting." 3. ChatGPT4 We used ChatGPT to build us a .vue page as the output of a lengthy chat which started with: "Please create a vue3 template that has a fullscreen background image using a variable called 'image_url' for the image source and scales to cover the screen" This was followed by a lengthy back & forth where we ask it to use tailwind.css for styling and to use the fonts and images provided in the brief. We asked it to put the logo in the upper-right of the page, set the tagline, center it, and tilt it at a 15 degree angle, etc... Very minor layout tweaks were made by hand and almost exclusively as requested by ChatGPT, when it would respond with something like, "...adjust the padding as needed," or "...you can change the text color this way," etc. 4. After the copy and image are returned, you can click a render button on the app to render the vue template. 5. To make this as automated and robot-run as possible, we employed Playwright, which is typically used for automated testing of websites and webapps. Playwright fires up a headless chromium instance and does the following: 1. Loads the index.vue page in our app 2. Clicls the Start button 3. Waits for the ChatGPT response 4. Clicks the button to request an image from StableDiffusion 5. Waits for the image to be returned 6. Clicks our 'render' button 7. Loads / runs the layout template 8. Resizes the window to the desired height and width 9. Takes a screenshot of the chromium window The beauty of this is that you can run this misappropriated 'test' as many times as you want in automated fashion, so running something like... npx playwright test --repeat-each=500 ...will make you 500 unique ai-generated ads, so long as your api access allows for that much. Which we probably did before selecting one! Note - if we could have used ChatGPT 4.0 and Midjourney 5.1 (or the stock footage API which we originally pulled from at first) results would have been stronger. We'll included a hand assembled one for comparison. Super fun! Ted & Keith