A few days ago I saw a Lobsters item about an LLM generated image gallery. After the initial shock seeing the code I went deeper into the rabbit hole and found the original code and article.
This are the image gallery requirements from the original author:
- find all jpgs in the folder
- copy them into the output folder
- generate a thumbnail (for use in the list)
- generate a preview (for use in the detail page)
- generate a HTML overview page
- generate a HTML detail page for each image, linked to the next/prev image
- generate a zip archive of the images
- EXIF rotation hints are used to properly orient the previews
- images are sorted by the EXIF timestamp (per default, you could also use mtime)
I have a few remarks about these requirements:
Why copy the files?
The idea is to upload the output folder to a server. Why not generate the extra files in the folder. This also removes the need for a output argument.
Why do you want a detail page?
The generation is meant to be simple so why not take benefit of the dialog html tag. This removes the need to maintain a detail page template and the additional processing.
So my requirements are:
- find all jpgs in the folder
- create a web folder in jpg folder to store the thumbnails and previews
- create a index template that shows the thumbnails, and by clicking on then it shows the preview.
- generate a zip archive
- EXIF rotation hints are used to properly orient the previews
- images are sorted by the EXIF timestamp
To generate the image gallery as fast as possible I see the flow as follows.
step 1:
- get the jpgs
- get the EXIF information
step 2:
- create the web folder
- create the webpage
step 3:
- create web images
- create zip file
step 4:
- verify successful creation, rollback when needed.
Step 3 is going to consume the most time because it contains the most intensive processes, so it would be good to let those run in parallel.
First prompt
Create a CLI command image-gallery, that runs PHP code, that accepts a directory as an argument.
The command searches for all jpegs in the directory and extracts the EXIF information.
Once that is done it creates a child directory named web, and an index.html page from a template.
The template contains the images that are sorted by the timestamp in the EXIF information. The images are tumbnails and by clicking on them a dialog should open to see a preview image. The template should also contain a link to a zip file with the name of the directory that is stored in the web directory.
After creating the index.html file create the tumbnail and preview images base on the aspect ratio that is found in de EXIF information. The thumbnails should be maximum 200 pixels in height and the preview images should be maximum 1000 pixels in height.
In a parallel proces create the zip file with the name of the directory in the web directory.
When something goes wrong with the creation of the directory or files rollback the changes. When everything is successful show a thumbs up emoji.
Only generate the code and template.
And this got me gist.
The flaws I see in the code at first sight:
- the use of globals. The safer option is to pass the variables a function argument.
- The images and zip file creation does not run in parallel. That is probably my fault adding too little specificity to the prompt.
- The rollback function is created, but never executed
- not using the dialog tag
The things I like:
- The use of the Symfony Process library. This library makes it safer to run system commands.
- The use of the ufo operator. That is just for the PHP nerd in me.
Second prompt
Create a CLI command image-gallery, that runs PHP code, that accepts a directory as an argument.
The command searches for all jpegs in the directory and extracts the EXIF information.
Once that is done it creates a child directory named web, and an index.html page from a template.
The template contains the images that are sorted by the timestamp in the EXIF information. The images are tumbnails and by clicking on them a dialog, use the dialog tag, should open to see a preview image. The template should also contain a link to a zip file with the name of the directory that is stored in the web directory.
After creating the index.html file create the tumbnail and preview images base on the aspect ratio that is found in de EXIF information. The thumbnails should be maximum 200 pixels in height and the preview images should be maximum 1000 pixels in height.
Also create the zip file with the name of the directory in the web directory.
The creating of the images and zip file should be done in parallel.
When something goes wrong with the creation of the directory or files rollback the changes and show a thumbs down emoji. When everything is successful show a thumbs up emoji.
Use best practices like not using globals.
Only generate the code and template.
At first it generated classes. Classes are too much abstraction for a standalone command, I want an easy way to follow the flow. So I added; don't use classes.
And this got me this code
Having a succes function is a bit overkill.
I find it a bit strange that the code uses pcntl_fork for the image and zip creation.
In the previous version the code used the Process->start method.
So the best solution would be to fill an array with commands. Execute array_map to instantiate the process and start it. And then loop the process array to execute the wait method.
$commands = [
array_merge(['zip', '-j', $zipPath], array_column($images, 'path')),
]
foreach($images as $idx => $img) {
$imgPath = $webDir . DIRECTORY_SEPARATOR . $img['base'];
$commands[] = ['convert', $img['path'], '-auto-orient', '-resize', 'x200', $imgPath . '_thumb.jpg'];
$commands[] = ['convert', $img['path'], '-auto-orient', '-resize', 'x1000', $imgPath . '_preview.jpg']
}
$processes = array_map(function(array $command) {
$p = new Process($command);
$p->start();
return $p;
}, $commands);
// create index.html
foreach ($processes as $process) {
$process->wait();
if (!$process->isSuccessful()) {
fail('file creation failed')
}
}
While I was writing above code I realized passing the created files and directories make no sense. Just execute new Process(['rm' '-rf', $webDir])->run().
Conclusion
After I saw the Lobsters item I wanted to write how bad the PHP code was. But after seeing the original code I concluded the vibecode prompt was something along the lines of make this Perl code work in PHP.
That is when I decided to check if I could make a better generator by using no example code, some thinking and a technical prompt.
I guess I keep sixty procent of the generated code. So it is a tool that can improve your productivity. The other side is that you still need a lot of knowledge and critical thinking to get to a good result.
The original author refuses to use AI and Github. And on the other side there is the vibecoder. I think the sweet spot is using AI responsibly.
Top comments (2)
I asked my "blind spot chatbot" (chatgpt.com/g/g-6816771cf34c8191bf...) for a review of your prompt and that it should create a specification instead of just a prompt for it.
Then, I pasted the full spec into a new chat and got this:
chatgpt.com/s/t_68ea5bae61c881919d...
I have no doubt there are better ways to use AI than my baby prompts. I'm more leaning to the original author's than the vibecoder in terms of AI use. So I do need to up my AI game.
That code output looks bombproof, it is miles away from the simple, stupid code.
The only remark I have is that the CSS, Javascript and HTML should be assets instead of living in the class. You don't want to scare away frontend specialists by needing to scroll through all that weird PHP code.