Can't get the API to convert to HTML for my front end

[domenicthomas]

I’ve got a chatbot working using Python(Flask), LangChain, ChromaDB and then HTML/CSS/JS front end.

My bot is a retrieval agent with vector embeddings.

My final issue is I cannot figure out how to get the agent’s response to render in a decent formatted manner with bullet points, paragraph spacing, etc.

It’s just a wall of text for the chatbot’s response in my browser, no matter what I seem to do.

I’ve tried converting the output to markdown and then to HTML, but that’s not working either.

I’m either not asking the question right to solve my problem or no one has written much about this because it’s just common knowledge for programmers, I guess, but I’m new and this has been 20 hours now trying to fix this!

Other info. I’m calling the gpt-4-0613 API if that means anything.

Edit: I finally figured out that my problem was I didn’t realize what I needed was a way to convert markdown to HTML.

As a noob I didn’t realize JSON isn’t the “output” format of the chatbot’s response via the API.

JSON is the wrapper that delivers the text and that text can be in markdown if the response calls for numbered lists or bullet points or whatever.

So I needed to convert the markdown to HTML in the browser to get the styling I wanted in terms of formatted blog posts, etc.

At first I created my own function tk try and manually handle the conversions, but that’s a fool’s errand as it’s just too much.

So I ended up using the “showdown” library to handle the conversion and this was all the code I needed:

    <script>
        // Initialize the Showdown converter
        const converter = new showdown.Converter();

        function convertMarkdownToHTML(markdown) {
            return converter.makeHtml(markdown);
        }

So thank you all for the help and encouragement.

I learned a “thousand ways it doesn’t work” by going through the process of trying to figure this out for 3 days though!

[Foxalabs]

Hi and welcome to the Developer Forum!

You are almost there, just need to take a look at “markdown renderer” there are libraries out there that will convert markdown raw text to html markdown for display on a web page. Ask ChatGPT and it should give you working html/js/css code to do this.

[domenicthomas]

I have tried over and over again for three days now. It just won’t work!. I am now trying to convert it to HTML on the back end before delivering it to the front end.

Is that possible?

[PaulBellow]

Can you share your System and User prompt? Could be as simple as asking for Markdown or HTML content.

ETA: Or are you talking about how to code / style the output you get from the LLM? You can check GitHub to see how some other projects are handling styling. IF it’s a chat app, though, you should just get out normal text then style it on your own.

[domenicthomas]

so I’m getting out normal text. How do I add styling to it?

Do I just do that in the JS part of my code?

What I’ve done now is convert the chatbot’s response to HTML on the back end before it gets to the front end, but the front end is still rendering a wall of text in my browser chatbot window, even though I can see the output in my console has styling in it.

[PaulBellow]

@domenicthomas

so I’m getting out normal text. how do i add styling to it?

You can ask for Markdown in the System message… then it should be formatted it you have something to change the Markdown to valid HTML…

    <div class="chat-container">
        <div class="message user-message">
            User message here...
        </div>
        <div class="message bot-message">
            ChatBot response here...
        </div>
    </div>

/* styles.css */

body {
    font-family: 'Arial', sans-serif;
    background-color: #f4f6f9;
    padding: 20px;
}

.chat-container {
    max-width: 600px;
    margin: 0 auto;
    border: 1px solid #e0e0e0;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.message {
    padding: 10px 20px;
    margin-bottom: 10px;
    border-radius: 20px;
    line-height: 1.4;
}

.user-message {
    background-color: #e0f7fa;
    align-self: flex-end;
    order: 1;
}

.bot-message {
    background-color: #e1bee7;
    align-self: flex-start;
    order: 2;
}

[domenicthomas]

That will make it so that the responses in the window will show things like bulleted lists, paragraph spacing and headers/titles in bold?

[domenicthomas]

I couldn’t get the markdown library to load to save my life, link just wouldn’t work even though it was valid. just kept getting an error in chrome.

[PaulBellow]

@domenicthomas

That will make it so that the responses in the window will show things like bulleted lists, paragraph spacing and headers/titles in bold?

Try this… Seems to be working with GPT-4… could probably be coaxed to work with GPT-3.5-turbo…

Markdown - you would have to translate this to HTML…

HTML - or just ask for HTML out…

That’s why I asked what System message you’re using (if any…) Should be a quick fix for ya. Let us know how it goes.

ETA: Note, though, that the HTML tags you’re getting out are tokens themselves, so it could change the output probably…and you’re charged for them. So… if you can take the raw text output and code something to wrap it with HTML tags it would probably be better. Could ask ChatGPT (4) for code maybe…

[domenicthomas]

okay I’m probably not explaining this right. It’s a flask app with langchain retrieval agent and vector embeddings using chromaDB. It’s a content creation chatbot. I’m not using the system prompt because it’s trash and doesn’t seem to work right. I’m using the gpt-4-0613 API.

I have HTML/JS/CSS front end that is working fine. the chatbot’s response in the window is my issue. no one will want a blog post output to be a wall of text. it looks like crap. I want the output in the window to look like it does in chatgpt for example when it writes something for you.

[domenicthomas]

and I appreciate your help. This is driving me mad. I’ve been using the cursor app that adds gpt-4 to vs code and it’s been great. I just can’t make this last part work!

[PaulBellow]

@domenicthomas

I have HTML/JS/CSS front end that is working fine. the chatbot’s response in the window is my issue. no one will want a blog post output to be a wall of text. it looks like crap. I want the output in the window to look like it does in chatgpt for example when it writes something for you.

Right. As we’ve said, you’ve got a few options…

1. Wrap it in HTML tags yourself after plain text comes out.

2. Ask for Markdown output then translate that to HTML (likely easier)

3. Ask for HTML output, but it will cost more and could affect what you get out (quality)

[domenicthomas]

okay let me scrap the back end code that is trying to transform it to HTML for now and try to do the markdown thing.

[PaulBellow]

No problem. Good luck. Sounds like you’re really close!

There’s likely code examples out there if you Google around or maybe ask GPT-4.

Do you have a sample of the output you’re getting? Does it have subheads, bullets, just paragraphs?

[domenicthomas]

I just get numbers like:

1. hshshs
2. hdhdhd
3. jdshdshd

when I ask for bullet points.

I’m using gpt-4 to help me code the entire time. it’s built into the cursor IDE I’m using

[PaulBellow]

I got this from GPT-4 after some back and forth… you’ll need to flesh it out likely but should be what you want …

def process_gpt_output(gpt_output):
    lines = gpt_output.split("\n")
    
    # Check if it's a numbered list
    if all(line.strip().startswith(("1.", "2.", "3.", "4.", "5.")) for line in lines if line.strip()):
        list_items = []
        for line in lines:
            line = line.strip()
            if line:
                # Extract the item after the number
                _, item = line.split(".", 1)
                list_items.append(f"<li>{item.strip()}</li>")
        if list_items:
            return "<ol>" + "\n".join(list_items) + "</ol>"

    # If the output contains multiple lines:
    elif "\n" in gpt_output:
        paragraphs = gpt_output.split("\n")
        return "".join(f"<p>{para.strip()}</p>" for para in paragraphs if para.strip())

    # Return the output as is if none of the above conditions are met
    return gpt_output

Once you’ve processed the GPT-4 output using this function, you can pass it directly to your Jinja template. In the template, you’ll use the |safe filter to render the HTML without escaping:

{{ gpt_output|safe }}

This is just a basic example based on assumptions. Depending on the exact structure and variability of your GPT-4 outputs, you might need to enhance this function with more rules and processing logic.

… or go the Markdown route…

[domenicthomas]

This is what I get in my IDE console:
Entering new AgentExecutor chain…

{
    "action": "Final Answer",
    "action_input": "1. Healthcare: AI can be used for predicting disease progression, personalizing treatment, and assisting in surgeries.\n2. Transportation: AI is transforming the automotive industry through self-driving cars.\n3. Finance: AI is used for fraud detection, risk assessment, and investment prediction.\n4. Retail: AI is used for personalized recommendations, inventory management, and customer service.\n5. Education: AI can personalize learning experiences, automate grading, and provide tutoring."
}

Finished chain.

Then I get this in my chat window:
YOU: hello

CMP: Hello! How can I assist you today?

YOU: okay please return 5 bullet points about ai use cases

CMP: 1. Healthcare: AI can be used for predicting disease progression, personalizing treatment, and assisting in surgeries.
2. Transportation: AI is transforming the automotive industry through self-driving cars.
3. Finance: AI is used for fraud detection, risk assessment, and investment prediction.
4. Retail: AI is used for personalized recommendations, inventory management, and customer service.
5. Education: AI can personalize learning experiences, automate grading, and provide tutoring.

[domenicthomas]

I’m reverting away from the html conversion stuff. I’ll try your code next

[jahzwolf1955]

The key is for code to print as you want it is to look for the triple quotes and change the css style for output .

I had to work with this to get proper spacing and use another color for the code

For live links I had to build a .lnk file and echo it myself. You can’t get a live link from GPT api

Using Python to render the code works best because it can json decode the content best.

It can also make changes on the fly for identified text like triple quotes

Php can’t decode OpenAI json cannot decode the API response you have to cut it up

Good luck

[vt.tringuyen]

You can using one of these libs

marked-react

marked

Demo:
https://sibiraj-s.github.io/marked-react/?path=/story/marked-react--default
https://marked.js.org/demo/