daugaard47's avatar

Add Code Tags to Dynamic Copy

I created a Chatbot for a fun side project using the OpenAI API.

The prompt I'm testing is, "With Laravel, create a custom attribute in the User Model to get the users full name and explain it to me."

The Json from the API gives me sentences and code.

  • I want to convert the sentences to <p> tags
  • Convert code section into code blocks <pre><code>
  • Then render in the view using Tailwind CSS prose class. Pretty much like the Markdown you are currently reading on this question.

I'm using the package: spatie/commonmark-highlighter as it seems like it should be able to handle this, but it's falling short.

Code to get Json to Html:

//API Stuff Above here...
$responseBody = json_decode($response->getBody(), true);
$textForMarkdown = $responseBody['choices'][0]['text'];

dd($textForMarkdown); Outputs:

"""
\n
\n
In your User model, you can create a custom attribute for the fullname by adding the following code:
\n
public function getFullNameAttribute()
{\n
    return $this->first_name . ' ' . $this->last_name;\n
}
"""

Then I pass through CommonMark:

$environment = new Environment();

$environment->addExtension(new CommonMarkCoreExtension());

$environment->addRenderer(FencedCode::class, new FencedCodeRenderer(['html', 'php', 'js']));

$environment->addRenderer(IndentedCode::class, new IndentedCodeRenderer(['html', 'php', 'js']));

$markdownConverter = new MarkdownConverter($environment);

$this->generatedText = (string) $markdownConverter->convert($textForMarkdown);

dd($this->generatedText); Outputs:

"""
<p>In your User model, you can create a custom attribute for the fullname by adding the following code:</p>
<p>public function getFullNameAttribute()\n
{\n
return $this-&gt;first_name . ' ' . $this-&gt;last_name;\n
}</p>\n
""" 

How could I get it to output like this? Note the <pre><code> tags:

<p>In your User model, you can create a custom attribute for the fullname by adding the following code:</p>
<pre><code>public function getFullNameAttribute()\n
{\n
return $this-&gt;first_name . ' ' . $this-&gt;last_name;\n
}</code</pre>\n

Would I need to use another package to recognize the php code?

If so what package would do the trick?

0 likes
6 replies
SteamDiesel's avatar

I'd be looking for patterns in the way the AI structures the sentences. for example; if it always writes the words "following code:" before a code block, then I'd match and split the string or start a block there. Then, in the following text, you increment up all the open curly braces and decrement the closed curly braces. once that counter hits zero again, then the function is closed and it's most likely that the code snippet is over.

You could also use "public function" as a way to start a code block, too.

https://www.php.net/manual/en/function.str-contains.php

daugaard47's avatar

@SteamDiesel I was thinking about that, but there are so many variables the code could start with. Was hoping there would be a better way. I wish the API would output the three back tics ```. Would make things so much easier.

1 like
daugaard47's avatar
daugaard47
OP
Best Answer
Level 7

This actually fixed the issue. So simple...

'json' => [
                'model'             => config('app.openai.model'),
                'prompt'            => 'Format output with Markdown including format code with Markdown triple backticks. '.$this->prompt,
1 like

Please or to participate in this conversation.