使用Flask和HTML无法将生成的SMA图表返回至网页的技术问题求助

各位好，我最近在开发一个基于Flask的股票SMA（简单移动平均线）可视化工具，目前卡在了无法把后端生成的SMA图表返回并显示在前端网页这个环节。我已经写了后端的Flask代码和前端的HTML页面，但运行后要么图表没在网页显示，要么流程走不通。下面是我目前的所有代码，麻烦大家帮忙排查一下问题：

Flask后端代码（文件名为html app.py） #

from flask import Flask, render_template, request
import yfinance as yf
import seaborn as sns
import matplotlib.pyplot as plt
import io
import base64

app = Flask(__name__)

@app.route('/')
def welcome():
    return render_template("signInor Login.html")

@app.route('/submit', methods=["POST"] )
def submit():
    username = request.form.get('username')
    password = request.form.get('password')
    if username== "rashmip_21" and password=='fabulousRashmi':
        return render_template("home.html")
    else:
        return "Invalid Credenials"

# @app.route('/goToSMA', methods = ["POST"])
# def gotosma():
#  return render_template("Simple Moving Average.html")

@app.route('/sma', methods=["POST"] )
def sma():
    ticker_symbol = request.form.get('tickersym')
    start_date = request.form.get('start')
    end_date = request.form.get('end')
    wind_td = request.form.get('windtd')
    
    df=yf.download(ticker_symbol)
    df['Simple Moving Average']= df['Close'].rolling(window=wind_td).mean()
    
    sns.lineplot(x='Date',y='Close',data=df.droplevel(1,axis=1),label="Close")
    sns.lineplot(x='Date',y='Simple Moving Average',data=df.droplevel(1,axis=1),label="S.M.A.")
    plt.xlabel("Date")
    plt.ylabel("Average/Close")

app.run(debug=True)

前端页面：home.html #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vizly.welcome</title>
</head>
<link rel="stylesheet" type="text/css" href="{{url_for('static',filename='styles/styleHome.css')}}">
<body id="bodyWelcome" style="background-color: #b8e0fc;">
    <nav class="navbar">
        <ul>
            <img src="{{url_for('static',filename='styles/logo.png')}}" id="logo">
            <li><a href="">About Us</a></li>
            <li><a href="">Sign In / Login</a></li>
            <li>
                <div class="drop">
                    <button class="dropbtn">Stock Data</button>
                    <div class="drop-down">
                        <a href="">Ticker Symbol</a>
                        <a href="">Simple Moving Average</a>
                        <a href="">Exponential Moving Average</a>
                    </div>
                </div>
            </li>
            <li>
                <div class="drop">
                    <button class="dropbtn">Visualize</button>
                    <div class="drop-down">
                        <a href="">Simple Moving Average</a>
                        <a href="">Exponential Moving Average</a>
                        <a href="">Bollinger's Band</a>
                        <a href="">Candlestick Graph</a>
                    </div>
                </div>
            </li>
            <li><a href="">Home</a></li>
        </ul>
    </nav>
    <p>Do you want to calculate the Simple Moving Average or the Exponential moving average for some historical data? All you need to do is enter the Ticker symbol, the start and end dates and the number of trading days.</p>
    <div class="flex-container">
        <div class="flex-box"><a href="">Simple Moving Average</a></div>
        <div class="flex-box"><a href="">Exponential Moving Average</a></div>
    </div>
    <p>Or do you want to visualize the Simple Moving Average, Exponential Moving Average, Bollinger's Band or Candlestick chart? Again all you need to do is enter the Ticker symbol, the start and end dates and the number of trading days.</p>
    <div class="flex-container">
        <div class="flex-box" ><a href="Simple Moving Average.html">SMA Visualizer</a></div>
        <div class="flex-box"><a href="">EMA Visualizer</a></div>
        <div class="flex-box"><a href="">Bollinger's Band Visualizer</a></div>
        <div class="flex-box"><a href="">Candlestick Chart</a></div>
    </div>
</body>
</html>

不完整的welcome.html代码（目前未写完） #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vizly.welcome</title>
</head>
<link rel="stylesheet" type="text/css" href="{{url_for('static',filename='styles/styleWelcome.css')}}">
<body id="bodyWelcome" style="background-color: #b8e0fc;">
    <nav class="navbar"

我目前遇到的具体问题：

1. 后端sma函数生成图表后没有任何返回内容，完全不知道怎么把Seaborn/Matplotlib生成的图表传递给前端网页
2. 测试运行时，图表只会在本地弹出Matplotlib的独立窗口，根本不会嵌入到网页里
3. 前端的SMA可视化入口点击后，还没和后端的sma路由正确关联起来

麻烦各位大佬帮我看看代码里的问题，或者给我一些实现思路，谢谢！

内容来源于stack exchange