Hi! I posted this over at lemmy.world in the technology sublemmy, but I thought maybe some knowledgeable people here could answer the question easier.

Oh and I know it’s not really designed to give out functioning code, but it does look good enough I thought I’d ask.

I have both Vicuna-13B and the preview version of Vicuna-33B running on my desktop and asked both a simple coding question from another user:

“What can I use to draw curved text in an SVG?”

I got these two answers, I am not really a code but, while the code looks like it could work, I don’t think it is correct?

Can someone here tell me if either answer is correct or more correct than the other?

Thanks!

33B:

User: How are you doing today?

Vicky: Today, I’m doing well, thank you for asking! How about you?

User: I am doing great! what can I use to draw curved text in an SVG?

Vicky: To draw curved text in an SVG, you can use the <textPath> element. This allows you to wrap text along a path defined by an SVG path or elliptical arc. First, create the path using the ‘path’ or ‘ellipse’ element, then use the <textPath> element to wrap the text along the path. Here’s an example:

+++

html
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="600" viewBox="0 0 800 600">
  <path id="curve" d="M200,200 Q400,200 400,400" fill="none" stroke="black" stroke-width="2"/>
  <text text-anchor="middle" dominant-baseline="central" x="300" y="300" text-path="url(#curve)">
    The quick brown fox jumps over the lazy dog
  </text>
</svg>

+++

In this example, a quadratic curve is defined using the ‘Q’ command in the ‘path’ element, and the text is wrapped along the curve using the <textPath> element with the ‘url(#curve)’ attribute. You can adjust the ‘d’ attribute of the path and the text’s position to create different curves with the text.

13B:

User: what can I use to draw curved text in an SVG?

Vicky: In SVG, you can use the “textPath” element to create curved text. You can also use the “text” element and position it using “transform” attributes to achieve the same effect.

User:Can you give me a code example for that?

Vicky: Sure! Here’s an example using the “textPath” element:

+++

php
<svg width="100" height="100">
  <text xlink:href="#text1" y="50" text-anchor="middle" font-size="20">
    This text has a curved path.
  </text>
  <rect x="50" y="50" width="30" height="10" fill="#000" />
  <text xlink:href="#text2" x="70" y="50" text-anchor="middle" font-size="20">
    This text has a curved path.
  </text>
</svg>

+++

And here’s an example using the “text” element:

+++

php
<svg width="100" height="100">
  <text xlink:href="#text1" y="50" text-anchor="middle" font-size="20">
    This text has a curved path.
  </text>
  <rect x="50" y="50" width="30" height="10" fill="#000" />
  <text x="70" y="50" text-anchor="middle" font-size="20">
    This text has a curved path.
  </text>
</svg>

+++

*Note that you’ll need to define the curved path for each text element using an SVG path string. In this case, the path strings are #text1 and #text2.

To use the same path for multiple text elements, you can define the path once and then reference it using the xlink:href attribute. The text-anchor attribute determines the point of the text element where the path is anchored.*

(no idea why Lemmy doesn’t italicize that last text part)

13B-Vicky gave more code, no idea which code example is better. 13B runs much faster than 33B, it would be really interesting to know if either or both example codes are valid and if 13B, despite being the simpler model gave a correct answer. 33B is a preview model not the final version.

What I am noticing is that neither has actually used the textPath element, though 33B used text-path, no idea if that exists.

p.s. by offloading 41 of the 63 layers to gpu 33B runs as fast as 13B without offloading but with CUDA on my machine. Very interesting.