Title: How to display content of database without need to refresh (Flask, Sqlite, Python )
Tags: python,sqlite,refresh

Question: I save the output of a llm with the test function which is triggered by a button. When the same is hit, I want not only to save the data but also display them immediately without need to refresh the page – which is necessary right now.
This is the test function (in llm.py)
def test(output):
    data = json.loads(output)
    label = data['label']
    explanation = data['explanation']
    etymology = data['etymology']
    example = data['example']
    connection = sqlite3.connect('database.db')
    cur = connection.cursor()
    cur.execute("INSERT INTO emotions (label, explanation, etymology, example) VALUES (?, ?, ?, ?)",(label, explanation, etymology, example))
    connection.commit()
    connection.close()
    print(data)

This function stores the output of a llm in a database "emotions". And the interface (Gradio) which is displayed on my main page has this routing in my app.py (a Flask app)
@app.route('/')
def index():
    conn = get_db_connection()
    emotions = conn.execute('SELECT * FROM emotions ORDER BY id DESC').fetchall()
    conn.close()
    return render_template('index.tpl', gradioserver_url='http://127.0.0.1:7860', emotions=emotions)

I do not have any idea how to make these data visible on my main page without refreshing them. Even worse: I don't know which further information you need. This is the rendering in index.tpl:
   <iframe
  src="{{ gradioserver_url }}"
  width="100%"
  height="400"
  frameborder="0"
></iframe>
<h2>This is what others feel. And maybe you</h2>
<div class="emotions-container">
  {% for emotion in emotions %}
  <div class='emo'>
    <h2>{{ emotion['label'] }}</h2>
    <p>{{ emotion['example'] }}</p>
    <p>{{ emotion['explanation'] }}</p>
    <p>{{ emotion['etymology'] }}</p>
  </div>
  {% endfor %}

Someone said to me that AJAX could be the solution. I looked up what she meant – but this is actually beyond my scope.
Thank you for your time and help.
EDIT:
As someone kindly commented I tried to start in this "route" but I have at best "quarter knowledge" about the POST / GET part of life. I tried to build an asynchronous function within my index.tpl which is the rendering file for my flask routing:
I did this:
var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://127.0.0.1:5000/', true);
xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
xhr.onload = function() {
    if (xhr.status === 200) {
        console.log(xhr.responseText);
    }
};
xhr.send(JSON.stringify(data));

Console says 'data is not defined'. But data is the JSON format from the output of the llm as defined in the test function. (Above)
This is the part of it:
def test(output):
    data = json.loads(output)

So the problem is, that this data variable is not connected to the AJAX (?) part in index.tpl. But as said I am new to this. Stuff is saved in a database in when refreshing page it is displayed onscreen. But not asynchronous. (I partly understand the AJAX code – so I commented out the xhr.send(JSON.stringify(data));part expecting that the xhr.responseTextwould show up in the console when hitting the save button in my Gradio interface. Which is this part in llm.py:
        btn_save = gr.Button(value="Save Emotion")
        btn_save.click(test, inputs=[emo_out], outputs=emo_out)

But nothing happens.

Answer: In order to display dynamic data on page, consider having a sort of API endpoint that will return the data you want to show.
On the frontend side, it depends on the tech you are using:
A few options are:

Use React.js, which is a fantastic tool for modern UI and write fetch function with it
Use raw Javascript and write a function that fetches data from API every 5 seconds, for example, and then updates it on the web page.
Use AJAX async call (This option is a bit old and I don't recommend it personally)