How can I make the API generated text into sentences?

API
, ,
1

Im making a chat bot with the chat gpt api and everything works, except when long paragraphs are generated, none of it is indented or in sentences. How can I do this while using HTML, CSS, and Django?

For example its generated like this:
Question:

How to make pizza?

Response:

Here’s a simple recipe to make pizza from scratch: Ingredients: - 2 ½ cups all-purpose flour - 1 teaspoon salt - 1 teaspoon sugar - 2 ¼ teaspoons active dry yeast - 1 cup warm water - 2 tablespoons olive oil Toppings: - Tomato sauce - Cheese (mozzarella, cheddar, or any preferred cheese) - Sliced vegetables (bell peppers, onions, mushrooms, etc.) - Pepperoni or any desired meat toppings - Herbs and spices (basil, oregano, garlic powder, etc.) Instructions: 1. In a large mixing bowl, combine the flour, salt, and sugar. 2. In a separate small bowl, dissolve the yeast in warm water and let it sit for around 5 minutes until it becomes foamy. 3. Pour the yeast mixture and olive oil into the flour mixture. Stir until a dough starts to form. 4. On a clean surface, knead the dough for about 5-7 minutes until it becomes smooth and elastic. 5. Place the dough in a greased bowl, cover it with a clean kitchen towel, and let it rise in a warm area for about 1-2 hours, or until it doubles in size. 6. Preheat the oven to 475°F (245°C) and place a pizza stone or a baking sheet in the oven to preheat. 7. Once the dough has risen, divide it into two equal parts. Roll out each portion of dough into the desired pizza shape and thickness on a floured surface. 8. Transfer the rolled-out dough onto a piece of parchment paper. 9. Spread tomato sauce evenly onto the dough, leaving a small border around the edges. 10. Add the cheese, desired toppings, herbs, and spices on top. 11. Carefully transfer the pizza (with the parchment paper) onto the preheated pizza stone or baking sheet. 12. Bake for about 12-15 minutes, or until the crust is golden and the cheese is melted and bubbly. 13. Remove the pizza from the oven and let it cool slightly before slicing and serving. Enjoy your homemade pizza!

When it should look like this:

Here's a simple recipe to make pizza from scratch: 
Ingredients:
 - 2 ½ cups all-purpose flour
 - 1 teaspoon salt 
- 1 teaspoon sugar 
- 2 ¼ teaspoons active dry yeast 
- 1 cup warm water 
- 2 tablespoons olive oil Toppings: 
- Tomato sauce 
- Cheese (mozzarella, cheddar, or any preferred cheese) 
- Sliced vegetables (bell peppers, onions, mushrooms, etc.) 
- Pepperoni or any desired meat toppings 
- Herbs and spices (basil, oregano, garlic powder, etc.) 
Instructions:
 1. In a large mixing bowl, combine the flour, salt, and sugar. 
 2. In a separate small bowl, dissolve the yeast in warm water and let it sit for around 5 minutes until it becomes foamy.
 3. Pour the yeast mixture and olive oil into the flour mixture. Stir until a dough starts to form.
 4. On a clean surface, knead the dough for about 5-7 minutes until it becomes smooth and elastic.
 5. Place the dough in a greased bowl, cover it with a clean kitchen towel, and let it rise in a warm area for about 1-2 hours, or until it doubles in size.
 6. Preheat the oven to 475°F (245°C) and place a pizza stone or a baking sheet in the oven to preheat.
 7. Once the dough has risen, divide it into two equal parts. Roll out each portion of dough into the desired pizza shape and thickness on a floured surface.
 8. Transfer the rolled-out dough onto a piece of parchment paper.
 9. Spread tomato sauce evenly onto the dough, leaving a small border around the edges. 10. Add the cheese, desired toppings, herbs, and spices on top.
 11. Carefully transfer the pizza (with the parchment paper) onto the preheated pizza stone or baking sheet. 
12. Bake for about 12-15 minutes, or until the crust is golden and the cheese is melted and bubbly.
 13. Remove the pizza from the oven and let it cool slightly before slicing and serving. Enjoy your homemade pizza!
2

The response contains hidden newline characters (\n), you need to convert them to <br>'s if you are displaying in HTML. PHP has nl2br, something like this for Python may be what you are looking for.

3

How would i do this?
My python code

def ask_openai(message):
    response = openai.ChatCompletion.create(
        model = "gpt-3.5-turbo",
        messages=[
            {"role": "system", "content": "You are an helpful assistant."},
            {"role": "user", "content": message},
        ]
    )
    
    answer = response.choices[0].message.content.strip()
    return answer

HTML and JS:

    fetch('', {
      method: 'POST',
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      body: new URLSearchParams({
        'csrfmiddlewaretoken': document.querySelector('[name=csrfmiddlewaretoken]').value,
        'message': message
      })
    })
      .then(response => response.json())
      .then(data => {
        const response = data.response;
        const messageItem = document.createElement('li');
        messageItem.classList.add('message', 'received');
        messageItem.innerHTML = `
        <div class="message-text" style="border-radius: 0px; color: white; background-color: gray;">
            <div class="message-sender" style="background-color: gray;">
              <b>Chatbot</b>
            </div>
            <div class="message-content" style="background-color: gray;">
                ${response}
            </div>
        </div>
          `;
        messagesList.appendChild(messageItem);
      });
  });

I dont see (\n) anywhere

4

add this css to message-content

white-space: pre-wrap;
2 Likes