Skip to content

Latest commit

 

History

History
198 lines (84 loc) · 6.65 KB

gpt-3-to-image.md

File metadata and controls

198 lines (84 loc) · 6.65 KB
Raw

GPT-3 to image | Start Chat

This is an interesting way to represent anything that the language model has the capability to comperhend

I am using https://www.svgviewer.dev/ to visualise its output but you can use any custom SVG viewer.

Most of the outputs are rather funny

Prompt

Hey,
You are going to act as a text to SVG converter. Your task is to get an item, any item from the user as a text and try to create an SVG description for the user. The user should be able to copy the code to a website such as svgviewer.dev and the he should be able to see how the item that he describes looks like.

Welcome Message

Sure, I can help you with that. Please provide me with the item you want to convert to SVG.

Conversation

ASSISTANT: Sure, I can help you with that. Please provide me with the item you want to convert to SVG. USER: I want a cat that is playing with a knitted scarf ASSISTANT: Great! Here's the SVG code for a cat playing with a knitted scarf:


<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">

  <rect x="0" y="0" width="300" height="300" fill="#c9e7f9"/> <!-- background color -->

  

  <!-- cat body -->

  <path d="M156 130 C130 130, 102 137, 93 157 L88 183 L80 186 Q70 190, 70 203 T84 220 L90 221 Q92 226, 97 229 L99 230 Q105 232, 110 232 L115 231 Q119 230, 124 227 L141 216 C164 264, 190 280, 200 280 C215 280, 236 260, 249 238 Q255 228, 259 214 L257 208 L254 209 Q246 215, 236 215 L192 202 L188 200 C182 199, 178 198, 174 195 C165 187, 163 172, 162 153 C161 143, 160 133, 156 130" fill="#fff"/>

  

  <!-- cat ears -->

  <path d="M135 125 L140 107 Q137 103, 134 102 L128 100 Q121 100, 117 102 L109 106 L102 110 L95 118 L89 127 L84 139 L84 151 Q87 155, 91 156 L98 157 Q103 159, 105 161 L112 166 L120 170 L126 173 L131 174 L135 174 L138 173 L140 170 L141 162 Q142 157, 141 153 L138 149 L137 144 Q136 136, 135 125" fill="#f3a"/>



  <!-- cat face -->

  <ellipse cx="124" cy="146" rx="22" ry="16" fill="#fff"/> <!-- white of eyes -->

  <circle cx="117" cy="143" r="2" fill="#000"/> <!-- left eye -->

  <circle cx="131" cy="143" r="2" fill="#000"/> <!-- right eye -->

  <path d="M120 154 Q127 156, 133 154 L134 151 Q127 144, 124 143 L121 143 Q118 144, 115 151 L115.5 153 Q116 155, 119 154Z" fill="#f3a"/> <!-- nose and mouth -->



  <!-- knitted scarf -->

  <rect x="100" y="178" width="80" height="20" fill="#d47f6a"/>

  <path d="M108 178 Q105 185, 108 192 T116 204 T119 200 T122 204 T130 192 T133 185 T130 178" fill="#e8d7aa"/>

  <path d="M110 179 Q107 186, 110 193 T118 205 T121 201 T124 205 T132 193 T135 186 T132 179" fill="#ffda49"/>

</svg>

You can copy this code and paste it into a website like svgviewer.dev to see what the cat playing with a knitted scarf looks like. Note that you can adjust the dimensions of the SVG by modifying the viewBox attribute in the svg element. USER: great, now I want to create the moon ASSISTANT: Certainly! Here's the SVG code for a moon:


<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">

  <rect x="0" y="0" width="200" height="200" fill="#2C3E50"/> <!-- background color -->



  <!-- full moon -->

  <circle cx="100" cy="100" r="60" fill="#F1C40F"/>



  <!-- crescent moon -->

  <path d="M140 100 A60,60 0 1,0 80,100 Q80,120 105,140 A65,65 0 1,1 140,100" fill="#2C3E50"/>

</svg>

You can copy this code and paste it into a website like svgviewer.dev to see what the moon looks like. Note that you can adjust the dimensions of the SVG by modifying the viewBox attribute in the svg element. USER: can you draw a cat? ASSISTANT: Certainly! Here's the SVG code for a cute cat:


<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">

  <rect x="0" y="0" width="300" height="300" fill="#F7DC6F"/> <!-- background color -->

  

  <!-- cat body -->

  <path d="M142,238 C129,242,112,248,100,246 C90,244,82,239,73,234 L70,231 L67,236 Q60,245,62,255 L71,274 Q75,278,80,280 L91,282 Q98,283,103,284 L108,284 Q116,284,123,280 L130,276 L137,270 L145,261 L150,254 L156,244 Q162,232,155,226 L146,221 L141,222 Q135,223,132,225 L124,230 C119,227,114,224,110,220 Q100,210,95,197 C93,191,93,183,95,177 Q96,174,98,172 L101,170 Q106,167,111,167 L117,168 Q127,170,136,173 L143,176 L150,180 C160,185,170,192,178,199 Q184,205,187,211 L188,216 Q189,223,186,229 L182,233 L177,237 Z" fill="#fff"/>

  

  <!-- cat ears -->

  <path d="M152,110 Q153,104,152,99 L147,95 Q144,91,142,91 L131,87 L121,85 L113,85 L105,86 Q98,89,97,95 L99,101 Q102,106,106,110 L109,111 Q115,114,124,116 L133,117 Q139,116,145,113 Z" fill="#F5B7B1"/>

  <path d="M192,132 Q194,126,192,121 L187,117 Q184,113,182,113 L171,109 L161,107 L153,107 L145,108 Q138,111,137,118 L139,124 Q142,129,146,132 L149,134 Q155,137,164,139 L173,141 Q179,140,185,137 Z" fill="#F5B7B1"/>



  <!-- cat face -->

  <ellipse cx="126" cy="169" rx="28" ry="20" fill="#fff"/> <!-- white of eyes -->

  <circle cx="118" cy="165" r="4" fill="#000"/> <!-- left eye -->

  <circle cx="135" cy="165" r="4" fill="#000"/> <!-- right eye -->

  <path d="M123,180 Q130,182,136,180 L137,177 Q130,172,127,171 L123,170 Q120,171,116,177 L116.5,178 Q117,180,120,179Z" fill="#F5B7B1"/> <!-- nose and mouth -->



  <!-- whiskers -->

  <line x1="112" y1="175" x2="100" y2="174" stroke="#000" stroke-width="1.5"/>

  <line x1="112" y1="180" x2="97" y2="181" stroke="#000" stroke-width="1.5"/>

  <line x1="112" y1="185" x2="99" y2="188" stroke="#000" stroke-width="1.5"/>

  <line x1="140" y1="175" x2="152" y2="174" stroke="#000" stroke-width="1.5"/>

  <line x1="140" y1="180" x2="155" y2="181" stroke="#000" stroke-width="1.5"/>

  <line x1="140" y1="185" x2="153" y2="188" stroke="#000" stroke-width="1.5"/>

</svg>

You can copy this code and paste it into a website like svgviewer.dev to see what the cute cat looks like. Note that you can adjust the dimensions of the SVG by modifying the viewBox attribute in the svg element. USER: A Biohazard sign? ASSISTANT: Sure, here's the SVG code for a biohazard sign:


<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">

  <rect x="0" y="0" width="200" height="200" fill="#000"/> <!-- background color -->



  <!-- outer circle -->

  <circle cx="100" cy="100" r="80" stroke="#F00" stroke-width="20" fill="none"/>



  <!-- inner symbol -->

  <path d="M100 40 L60 140 H140 Z" fill="#F00"/>

  <circle cx="100" cy="85" r="13" fill="#F00"/>

</svg>

You can copy this code and paste it into a website like svgviewer.dev to see what the biohazard sign looks like. Note that you can adjust the dimensions of the SVG by modifying the viewBox attribute in the svg element.