My page won't load despite routes on Flask pointing to the right .html code

I have been bashing my head for a while here...


I am trying to make my index open a page (lessonplan.html) after hitting a button.


`This is the captions route on my deployed website:
@app.route('/captions', methods=['GET']) def captions(): global transcript_text, lesson # Declare transcript_text as a global variable youtube_link = request.args.get('youtube_link')
if youtube_link:
transcript_list = get_youtube_transcript(youtube_link)
transcript_text = ' '.join([item['text'] for item in transcript_list])

try:
openai.api_key = os.getenv("sk-xxx")
lesson_title, lesson = generate_lesson(transcript_text)
except Exception as e:
lesson_title = "Lesson Title Generation Error"
lesson = f"Error generating lesson: {str(e)}"

qr_code_filename = generate_qr_code(youtube_link)
return render_template('lessonplan.html', youtube_link=youtube_link, lesson_title=lesson_title, lesson=lesson, qr_code=qr_code_filename)



Now, this is my index:

Guide Maker body { font-family: 'Arial', sans-serif; background-color: #f4f4f4; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; }
.container {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: center;
}

h1 {
color: #333;
}

form {
display: flex;
flex-direction: column;
align-items: center;
}

label {
margin-top: 10px;
font-weight: bold;
color: #555;
}

input, select {
width: 100%;
padding: 8px;
margin-top: 5px;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 4px;
}

button {
background-color: #007bff;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
margin-top: 15px;
}

button:hover {
background-color: #0056b3;
}

Welcome to the Guide Maker
Enter YouTube Link: Get Captions







And my lessonpage.html whch should open up as I hit the button





Lesson Generated






{{ lesson_title }}




Watch the video here:





{{ lesson | safe }}








Send




function sendMessage() {
// Your JavaScript code for sendMessage
}

// Rest of your JavaScript code...


Download PDF

Go Back









Instead of opening up, I just get:



http://website.xyz/%7B%7B%20url_for('captions')%20%7D%7D 404 (Not Found).


My folder structure is correct. When I deploy this locally, I have no problem whatsoever.