Information retaining in Flask

Question

I'm trying to display both the contents of two different div blocks. But after I click on "Show Text" the other div block content disappears. (See images for reference)

I want to make it function such that if I click on either 'Analyze' or 'Show Text', the contain must be retained for either of the two respectively.

Backend code:

@app.route('/predict', methods=['POST', 'GET'])
def predict():
    email = request.form.get('email', '')
    
    if request.method == 'POST':
        if not email:
            return render_template('testing.html', error_message='Please enter an email.', email=email)
        else:
            count_of_words = len(email.split())

            # Perform Emotional Analysis
            result = emotion(email)  # Emotional Analysis Labels
            sorted_labels = sort_emo(result)  # Sorting in Descending order; extracts top 5 labels

            # Clean the text
            clean_text = clean_html(email)
            processed_text = clean_string(clean_text)

            # Perform Spam Detection prediction
            string_vectorized = vectorizer.transform([processed_text])
            my_prediction = model.predict(string_vectorized)
            probability = model.predict_proba(string_vectorized)[0][1]
            percentage = round(probability * 100, 2)

            # Capitalize emotion labels
            capitalized_labels = []
            scores = []

            # For extracting top 5 labels
            for res in sorted_labels:
                label = res['label']
                capitalized_label = label.capitalize()
                score = round(res['score'] * 100, 2)
                capitalized_labels.append(capitalized_label)
                scores.append(score)

            # Zipping the lists together
            emo_data = zip(capitalized_labels, scores)
            
            return render_template('testing.html', prediction=my_prediction, percentage=percentage, result=count_of_words, email=email, emo_data=emo_data)

    # For GET request or if no form submission has occurred
    return render_template('testing.html', email=email)

@app.route('/highlight_text', methods=['POST'])
def highlight_text():
    email = request.form.get('email', '')

    if not email:
        return render_template('testing.html', error_message='Please enter an email.', email=email)

    # Perform necessary processing to generate highlighted text
    processed_text = clean_string(clean_html(email))
    emotion_lists = process_text_emotions(processed_text)
    reduced_emotions = create_reduced_emotions(emotion_lists)
    highlighted_text = generate_html_with_highlights(email, reduced_emotions)

    # Fetch the relevant variables for rendering the template
    prediction = request.form.get('prediction')
    percentage = request.form.get('percentage')
    result = request.form.get('result')
    emo_data = request.form.getlist('emo_data')

    return render_template('testing.html', highlighted_text=highlighted_text, email=email, prediction=prediction, percentage=percentage, result=result, emo_data=emo_data)

Frontend:

<div class="right-element">
    {% if prediction is defined %}
    <div class="result box">
        <h5>Prediction {% if prediction == 1 %}<span style="color: red;">Spam</span>{% elif prediction == 0 %}
            <span style="color: green;">Not Spam</span>{% endif %}</h5>
        <h5>Spam Probability {{ percentage }} %</h5>
        <h5>Word Count {{ result }}</h5>
        <br>
        <h5>Emotional Analysis:</h5>
        <table class="table">
            <thead>
                <tr>
                    <th>Emotion Label</th>
                    <th>Score</th>
                </tr>
            </thead>
            <tbody>
                {% for label, score in emo_data %}
                <tr>
                    <td>{{ label }}</td>
                    <td>{{ score }}%</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% endif %}
</div>

        <div class="highlighted-text">
    <h3>Highlighted text for Emotions</h3>
    <p>{{ highlighted_text | safe }}</p>

    <form action="{{ url_for('highlight_text') }}" method="post" id="highlight-form">
        <input type="hidden" name="email" value="{{ email }}">
        <button type="submit" id="highlight-btn" name="highlight-btn">Show Text</button>
    </form>
</div>

Images:

Answer 1

1. Show Text submits your form.

2. The only field in that form is a hidden field for email. The form doesn't contain the fields for percentage, result which means that the following lines will return None

    prediction = request.form.get('prediction')
    percentage = request.form.get('percentage')

3. To achieve your requirement, you need to place percentage, result in the form too or keep your design as is, and submit your form via Javascript and Ajax call. If you do an Ajax call, it means your html page won't be reloaded. You can then simply append the result of the form call (the one you did via Javascript and Ajax) to the places you want. A quick search on Stackoverflow will show you how to submit a form via Javascript and Ajax call