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

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.

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

  1. Acrylic
  2. Airbrushed
  3. Animation
  4. Anime
  5. ASCII
  6. Blueprint
  7. Caligraphy
  8. Cartoon
  9. Chalkboard
  10. Charcoal
  11. Comic Book
  12. Crayon
  13. Cross Stitch
  14. Crystal
  15. 3D Render
  16. Digital Art
  17. Disney Animation
  18. Drawing
  19. Emoji
  20. Fish Eye
  21. Flowery
  22. Graffiti
  23. Halftone
  24. Illustration
  25. Ink
  26. Ink Dot
  27. Line Art
  28. Long Exposure
  29. Low Poly
  30. Macro
  31. Marble
  32. Nintendo
  33. Oil Painting
  34. Origami
  35. Painting
  36. Paper Cutout
  37. Paper Mache
  38. Pastel
  39. Pen
  40. Pencil
  41. Photojournalism
  42. Photography
  43. Pixar
  44. Polaroid
  45. Portrait
  46. Real Life Materials
  47. Realistic
  48. Screen
  49. Simpsons
  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. 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.

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