WordPress and AI

Convert HTML select to list block and sort

Convert HTML select to list block and sort
20240121-111430-convert HTML select to list block and sort
Convert HTML select to list block and sort, post-apocalyptic
Generated by oik-ai using DALL·E 3
1024 x 1024

—

by

herb@bobbingwide.com
in

Component: oik-ai – the new – my AI tool

In this post I tried to convert an HTML select list of Image styles, offered by Imajinn, into a list of styles for a cheat sheet for Dall-E 3.

Spoiler alert: OpenAI didn’t follow my instructions fully. There are several mistakes in the output.

I subsequently discovered a GitHub repository of prompt modifiers. See krea-ai/open-prompts.

I created this list by

  1. Inspecting the <select> list displayed by Imajinn
  2. Copying the HTML to the clipboard
  3. System message “Convert to a Gutenberg list block”
  4. User message – copy/pasted select list
  5. Send
  6. Then I copied the generated list
  7. Pasted it into the User message
  8. Changed the System message to “Sort”
  9. And tried again.

Original HTML select list

<select class="components-select-control__input css-f0d2mi e1mv6sxx2" id="inspector-select-control-3" fdprocessedid="weoet9"><option value=""> </option><option value="painting, digital art, trending on artstation">Painting</option><option value="digital art, trending on artstation, hd">   Digital Art</option><option value="oil painting, award winning">   Oil Painting</option><option value="watercolor painting">   Watercolor</option><option value="acrylic painting, award winning art, trending">   Acrylic</option><option value="airbrush art">   Airbrushed</option><option value="comic, comic book">   Comic Book</option><option value="schematic blueprint">   Blueprint</option><option value="made up of ink dots, artistic drawing, trending on artstation">   Ink Dot</option><option value="artistic drawing, trending on artstation">Drawing</option><option value="illustration, trending on artstation">   Illustration</option><option value="cyberpunk, trending on artstation">   Cyberpunk</option><option value="pencil sketch, drawing, trending on artstation">   Pencil</option><option value="drawn in blue biro pen, artistic drawing, trending on artstation">   Pen</option><option value="Ink dripping drawing, trending on artstation">   Ink</option><option value="caligraphy">   Caligraphy</option><option value="charcoal shaded, artistic drawing, trending on artstation">   Charcoal</option><option value="cartoon">   Cartoon</option><option value="comic, comic book">   Comic Book</option><option value="schematic blueprint">   Blueprint</option><option value="technical sketch">   Technical Sketch</option><option value="made up of ink dots, artistic drawing, trending on artstation">   Ink Dot</option><option value="line art">   Line Art</option><option value="crayon drawing">   Crayon</option><option value="pastel drawing, artistic">   Pastel</option><option value="chalkboard drawing">   Chalkboard</option><option value="animation">Animation</option><option value="vintage disney animation">   Vintage Disney</option><option value="Rendered by octane, disney animation studios">   Disney Animation</option><option value="simpsons style animation">   Simpsons</option><option value="anime style, Studio Ghibli, manga, trending on artstation">   Anime</option><option value="disney pixar style animation, octane render">   Pixar</option><option value="unreal engine, 3d render, Rendered by octane">Screen</option><option value="Unreal Engine, Cinema 4D">   Video Game HD</option><option value="animal crossing, mario, nintendo, pokemon">   Nintendo</option><option value="3D render, composite">   3D Render</option><option value="8bit graphics">   8bit</option><option value="emoji">   Emoji</option><option value="low poly ps1 graphics">   Low Poly</option><option value="pixel art">   Pixel Art</option><option value="ASCII art">   ASCII</option><option value="photograph of, photo, 50mm portrait photograph">Photography</option><option value="realistic photo of, award winning photograph, 50mm">   Realistic</option><option value="Portrait photograph, symmetrical, award winning, bokeh, dof, Annie Leibovitz">   Portrait</option><option value="polaroid photograph, polaroid frame">   Polaroid</option><option value="war photograph, WWI photograph, WWII photograph">   War</option><option value="Wildlife Photograph, national geographic photo, zoom, telephoto">   Wildlife</option><option value="Photojournalism, award winning, photo of, magazine photograph">   Photojournalism</option><option value="macro photograph, close up, zoom, depth of field">   Macro</option><option value="long exposure, photograph, realistic">   Long Exposure</option><option value="photograph, fish eye lense, wide-angle">   Fish Eye</option><option value="realistic">Real Life Materials</option><option value="statue">   Statue</option><option value="marble statue">      Marble</option><option value="stone statue">      stone</option><option value="statue carved from wax">      Wax</option><option value="origami paper folding">   Origami</option><option value="paper mache art">   Paper Mache</option><option value="paper cutout art">   Paper Cutout</option><option value="graffiti street art">   Graffiti</option><option value="halftone print">   Halftone</option><option value="cross stitch art">   Cross Stitch</option><option value="stained glass">   Stained Glass</option><option value="made of crystals">   Crystal</option><option value="made of flowers">   Flowery</option></select>

Results

After my first attempt I tried to perform the task in one step with

You’re a content creator who wants to convert this select list to a Gutenberg list with the items in ascending order

The second attempt returned a numbered list; no HTML. I pasted this into the block editor which created the ordered list for me.

First attempt

  1. 8bit
  2. Acrylic
  3. Airbrushed
  4. Animation
  5. Anime
  6. ASCII
  7. Blueprint
  8. Calkboard
  9. Caligraphy
  10. Cartoon
  11. Charcoal
  12. Comic Book
  13. Crystal
  14. Crayon
  15. Cross Stitch
  16. Cyberpunk
  17. Digital Art
  18. Disney Animation
  19. Drawing
  20. Emoji
  21. Fish Eye
  22. Flowery
  23. Graffiti
  24. Halftone
  25. Illustration
  26. Ink
  27. Ink Dot
  28. Line Art
  29. Long Exposure
  30. Low Poly
  31. Macro
  32. Marble
  33. Nintendo
  34. Oil Painting
  35. Origami
  36. Paper Cutout
  37. Paper Mache
  38. Painting
  39. Pastel
  40. Pen
  41. Pencil
  42. Photography
  43. Photojournalism
  44. Pixel Art
  45. Polaroid
  46. Portrait
  47. Realistic
  48. Real Life Materials
  49. Screen
  50. Stained Glass
  51. Statue
  52. Stone
  53. Technical Sketch
  54. Video Game HD
  55. Vintage Disney
  56. War
  57. Watercolor
  58. Wax
  59. Wildlife
  60. 3D Render

Second attempt

  2. Acrylic
  3. Airbrushed
  4. Animation
  5. Anime
  6. ASCII
  7. Blueprint
  8. Caligraphy
  9. Cartoon
  10. Chalkboard
  11. Charcoal
  12. Comic Book
  13. Crayon
  14. Cross Stitch
  15. Crystal
  16. 3D Render
  17. Digital Art
  18. Disney Animation
  19. Drawing
  20. Emoji
  21. Fish Eye
  22. Flowery
  23. Graffiti
  24. Halftone
  25. Illustration
  26. Ink
  27. Ink Dot
  28. Line Art
  29. Long Exposure
  30. Low Poly
  31. Macro
  32. Marble
  33. Nintendo
  34. Oil Painting
  35. Origami
  36. Painting
  37. Paper Cutout
  38. Paper Mache
  39. Pastel
  40. Pen
  41. Pencil
  42. Photojournalism
  43. Photography
  44. Pixar
  45. Polaroid
  46. Portrait
  47. Real Life Materials
  48. Realistic
  49. Screen
  50. Simpsons
  51. Stained Glass
  52. Statue
  53. stone
  54. Technical Sketch
  55. Video Game HD
  56. Vintage Disney
  57. War
  58. Watercolor
  59. Wax
  60. Wildlife
  61. 8bit.

Comments

  • The two lists are different
  • 8bit is at the end now, so I’ve added a blank item at the start, item 0.
  • And 3D Render has been sorted as a D in the second list.
  • Chalkboard changed to Calkboard by the sort.
  • And where’s Cyberpunk gone?

Third attempt

I then realised that what I actually needed was the option values not the option labels!

Please count the number of option tags in this HTML select list and tell me how many there are?

There are 76 option tags in this HTML select list.

Please count the number of option tags in this HTML select list and tell me how many there are?
Then extract all of the value attributes into a numbered list.

There are 70 option tags in the HTML select list.

Here are the values of these tags extracted into a numbered list:

1. 
2. painting, digital art, trending on artstation
3. digital art, trending on artstation, hd
4. oil painting, award winning
5. watercolor painting
6. acrylic painting, award winning art, trending
7. airbrush art
8. comic, comic book
9. schematic blueprint
10. made up of ink dots, artistic drawing, trending on artstation
11. artistic drawing, trending on artstation
12. illustration, trending on artstation
13. cyberpunk, trending on artstation
14. pencil sketch, drawing, trending on artstation
15. drawn in blue biro pen, artistic drawing, trending on artstation
16. Ink dripping drawing, trending on artstation
17. caligraphy
18. charcoal shaded, artistic drawing, trending on artstation
19. cartoon
20. comic, comic book
21. schematic blueprint
22. technical sketch
23. made up of ink dots, artistic drawing, trending on artstation
24. line art
25. crayon drawing
26. pastel drawing, artistic
27. chalkboard drawing
28. animation
29. vintage disney animation
30. Rendered by octane, disney animation studios
31. simpsons style animation
32. anime style, Studio Ghibli, manga, trending on artstation
33. disney pixar style animation, octane render
34. unreal engine, 3d render, Rendered by octane
35. Unreal Engine, Cinema 4D
36. animal crossing, mario, nintendo, pokemon
37. 3D render, composite
38. 8bit graphics
39. emoji
40. low poly ps1 graphics
41. pixel art
42. ASCII art
43. photograph of, photo, 50mm portrait photograph
44. realistic photo of, award winning photograph, 50mm
45. Portrait photograph, symmetrical, award winning, bokeh, dof, Annie Leibovitz
46. polaroid photograph, polaroid frame
47. war photograph, WWI photograph, WWII photograph
48. Wildlife Photograph, national geographic photo, zoom, telephoto
49. Photojournalism, award winning, photo of, magazine photograph
50. macro photograph, close up, zoom, depth of field
51. long exposure, photograph, realistic
52. photograph, fish eye lense, wide-angle
53. realistic
54. statue
55. marble statue
56. stone statue
57. statue carved from wax
58. origami paper folding
59. paper mache art
60. paper cutout art
61. graffiti street art
62. halftone print
63. cross stitch art
64. stained glass
65. made of crystals
66. made of flowers
67. 
68. 
69. 
70.

Conclusion: Don’t forget to check the output of the AI tool.

Excerpt

The author attempts to convert an HTML select list into an ordered list for a cheat sheet, utilizing AI to generate the list. The first attempt produces satisfactory results, but the second attempt shows clear discrepancies. Finally, they realize that the option values, not labels, were necessary for their intended task. Their concluding advice: ‘Don’t…

64 words

SEO info

Meta Description: Discover how to convert an HTML select list into a Gutenberg list, explore errors made by OpenAI, and learn from the step-by-step experiment documented in this post.165 chars
Focus keyphrase: Converting HTML Image Styles into Gutenberg List