0

enter image description hereNew to flask. My code is displaying raw HTML code when I run it on local host, however I'd like to render an HTML form. What am I doing wrong?

This is my base directory for my project. /Users/davidooooo/res_recs

This is my HTML which is inside my templates folder.

<!DOCTYPE html>

<html>

<head>

    <title>Restaurant Meal Recommender</title>

</head>

<body>

    <h1>Restaurant Meal Recommender</h1>

    

    <form method="post">

        <label for="likes">Foods you like:</label><br>

        <input type="text" name="likes"><br>

        

        <label for="dislikes">Foods you dislike:</label><br>

        <input type="text" name="dislikes"><br>

        

        <label for="restaurant">Restaurant name:</label><br>

        <input type="text" name="restaurant"><br>

        

        <label for="menu">Menu description:</label><br>

        <input type="text" name="menu"><br>

        

        <input type="submit" value="Get Recommendations">

    </form>

    

    {% if recommendation %}

    <h2>Recommendation:</h2>

    <p>{{ recommendation }}</p>

    {% endif %}

</body>

</html>

This is my app.py (I'm ommitting the long getRecs function (it calls openAI's API))

from flask import Flask, render_template, request, url_for, redirect
import os
import openai
#%%
app = Flask(__name__, template_folder='/Users/davidooooo/res_recs/templates')

#%% Your OpenAI API key
api_key = os.getenv("OPENAI_API_KEY")


@app.route("/", methods=("GET", "POST"))
def index():
    if request.method == "POST":
        likes = request.form.get("likes")
        dislikes = request.form.get("dislikes")
        restaurant = request.form.get("restaurant")
        menu = request.form.get("menu")

        recommendation = getRecs(likes, dislikes, restaurant, menu)
        return redirect(url_for("recommendation_page", recommendation=recommendation))
    
    return render_template("index.html", recommendation=None)
    #return("Hello world")

if __name__ == "__main__":
    app.run(debug=False)

enter image description here

davidocodes
  • 87
  • 1
  • 9
  • What do you mean when you say "displaying raw HTML code?" Does the page drop the form, or does it display the full text including your tags? – AmphotericLewisAcid Aug 20 '23 at 01:02
  • I'm basically just seeing the html code on the screen. There's not an actual form. Just a bunch of html tags – davidocodes Aug 20 '23 at 01:09
  • Could you replace the curl output with the output of `curl --head ..` ? So we can see the raw headers being returned. – pjz Aug 20 '23 at 01:58

3 Answers3

0

I think you forgot to set the Content-type header in your response, which is what your browser looks at to determine how to interpret the body of the response. This SO answer has details on how to do so for flask.

pjz
  • 41,842
  • 6
  • 48
  • 60
  • Thanks, since the content type is html, I don't have to explicitly set it. So it seems like I have a different issue. – davidocodes Aug 20 '23 at 01:09
  • Are you sure? It wouldn't surprise me a lot if either 1. flask's default content-type is text/plain or 2. not specifying a content-type leaves it up to your browser, which again might default to text/plain. setting it just to doublecheck is painless, and then you can add that info to your question. The output of a curl displaying the raw returned headers wouldn't hurt either. – pjz Aug 20 '23 at 01:31
  • Hello, I explicitly set it and still get the same thing. I just posted my curl request above, please take a look. Thanks – davidocodes Aug 20 '23 at 01:48
0

I tried your code on my end and I was able to display the HTML. What I did was remove the template folder parameter in your Flask application object.

Your code before:

app = Flask(__name__, template_folder='/Users/davidooooo/res_recs/templates')

After:

app = Flask(__name__)

And other than that, usually in your HTML form tag, you want to include the ACTION parameter in which FLask app route you want to run. In this case, it is "/".

<form action="/" method="post">

For example, if your flask app route is "/test". Then your form tag in HTML should be like this:

<form action="/test" method="post">

Usually, when I create a Flask project, the HTML file in the templates folder will automatically be located, as long as you have the right naming of the folder. Hope this helps.

Dre1n
  • 11
  • 4
  • Thanks. I only specified the template path since it wasn't working before. However, I've removed the template path and added the action-"/" but it's still not working for me. I'm not sure what I'm doing wrong at this point. – davidocodes Aug 20 '23 at 03:01
0

The issue was that I copied the code from chatgpt and it included a bunch of random tags that I was only able to see in VS Code. I didn't see them in my normal text edit. I removed them in VS Code and my code worked fine.

Someone gave me the idea to format the document and see if everything formats correctly so I used VS Code to do that. That's how I noticed this. Hope this saves you time :)

davidocodes
  • 87
  • 1
  • 9