formatting of chat gpt responses

Question

I am using chat gpt api on my react application. The problem i am facing is how to format the response coming from chat gpt. If is ask it to give me a response in table format it provides weird response I used pre tag to display text and response appear in this way image attached , but I want proper table just like chat gpt, in the same way if i ask for any list of items it display as a form of paragraph not on different line so how to do proper formatting of chat gpt response.

i want proper table and list as chat gpt shows but this is how i am receiving data this is how data is appearing when using pre tag but i want proper table

If that format is not good enough for you write a parser that can parse that format and output it however you want instead. — luk2302, Apr 30 '23 at 17:43

score 4 · Answer 1 · answered May 01 '23 at 01:49

ChatGPT and OpenAI APIs can return the data in a format that works for you. Just add the format instruction in your prompt.

Examples:

Return the answer as a JSON object.

Do you know the 10 most popular books from Stephen King? Return an array of books in a JSON object.

ChatGPT answer:

{
  "books": [
    {
      "title": "The Shining",
      "year": 1977,
      "description": "A horror novel about a family that moves into an isolated hotel with a dark past."
    },
    {
      "title": "It",
      "year": 1986,
      "description": "A story about a group of friends who confront a shape-shifting evil entity in their small town."
    },
    ...
  ]
}

You can then fine-tune the result, with instructions like ordered by {something}, group by {something}

score 3 · Answer 2 · answered Apr 30 '23 at 22:36

The response from OpenAI API is in Markdown syntax. We can use some libraries to convert markdown to html (e.g., showdown).

For React environment, we can also use react-markdown, together with the plugin remark-gfm to render Markdown format with tables (see https://github.com/remarkjs/react-markdown#use-a-plugin for reference).

score 3 · Answer 3 · answered Apr 30 '23 at 22:43

You can tell ChatGPT how you want it to format its response. Try one of these prompts:

what are the top 10 countries in the world in terms of population? format the answer as an HTML table
what are the top 10 countries in the world in terms of population? format the answer as a JSON object with the keys rank, country, and population

score 0 · Answer 4 · answered Aug 13 '23 at 06:44

In addition to the other good answers here, I just wanted to share some thoughts that might help you or others reading this to better control the format of the AI's outputs.

I have seen varying results with the AI sometimes not returning the specified format.

Generally with OpenAi's endpoints I have found myself making small tweaks to the prompts/request, running it, and repeating that process until I get closer to my desired output and format.

Things you can try, that seem to improve the chances of it returning the desired format more consistently:

1. In addition to saying "format as an HTML table" or "return as a JSON array", give it an example of the desired output.

For example:

return as a JSON object in this format:
{
  "country" : "Brazil",
  "population: 213,429,381
}

Or

return the results as an HTML table. Use the following code snippet as an example of the format:
<table>
 <tr>
    <th>Country</th>
    <th>Population</th>
  </tr>
 <tr>
  <td>Brazil</td>
  <td>213,429,381</td>
 </tr>
</table>

2. Try using a different model.

There are definitely differences I have seen between the gpt-3.5-turbo and gpt-4 models.

3. Try setting the 'temperature' property to a lower value.

This should reduce variance of the output (for better or for worse depending on what you are needing).

4. Explore using Functions.

With the chat endpoint, they now have the ability to send up a function for the model to call. You can specify arguments for the functions, where you can say

functions : [{
    name: "make a table",
    description: "creates a table in valid HTML table format, that includes table headers",
    parameters: {
      type: "object",
      properties: {
        nameThisWhateverYouWantRawHTML: {
          type: "string",
          description: "the tabular data in HTML format: <table>...</table>"
        }
      }
    }
  }
]

Then in your prompt or chat messages include some instruction to trigger that function call.

5. Set the n property in the request greater than 1.

This will generate multiple options to choose from in the response. If the first option is in an invalid format, use the next one.

6. Implement a retry strategy in your code.

If a request ever returns an invalid format, run it again.

formatting of chat gpt responses

4 Answers4