Отображать URL изображения в вопросах о стилях Flask и html

Question

Что он делает в настоящее время: загруженное изображение проходит через модель классификации, отображает загруженное изображение и дает прогноз (метка A, B или C). Загруженный CSV-файл (df_re c) содержит строки этих ярлыков с соответствующей информацией о продукте, такой как названия продуктов, ссылки на продукты и ссылки на изображения. Я просто пытаюсь выполнить очень простое сопоставление между сгенерированной меткой и меткой в ​​csv и произвольно выбрать один экземпляр из тех, что в CSV, и вернуть имя продукта, ссылку и изображение, связанные с этим экземпляром.

1. Первый вопрос относительно загрузки URL-адресов изображений:

Я только начал использовать flask на прошлой неделе и много читал, но до сих пор не знаю, как отобразить изображение из ссылка на изображение из этого CSV-файла. И поскольку каждый раз, когда я не могу контролировать, какое изображение будет сгенерировано, я угадываю Мне не нужно dl изображения из csv и помещать в папку, чтобы каким-то образом их загрузить?

model = tf.keras.models.load_model('..models/d_model.h5')

UPLOAD_FOLDER = '../uploads'
ALLOWED_EXTENSIONS = {'jpg', 'jpeg', 'png'}

df_rec = pd.read_csv('../data2/df_new_rec.csv')

def get_as_base64(url):
    return base64.b64encode(requests.get(url).content)

def predict(file):
    x = load_img(file, target_size=(224, 224))
    x = img_to_array(x)
    x = np.expand_dims(x, axis=0)
    array = model.predict(x)
    result = array[0]
    answer = np.argmax(result)
    if answer == 0:
        print("Label: A")
    elif answer == 1:
        print("Label: B")
    elif answer == 2:
        print("Label: C")
    return answer

def my_random_string(string_length=10):
    """Returns a random string of length string_length."""
    random = str(uuid.uuid4())  # Convert UUID format to a Python string.
    random = random.upper()  # Make all characters uppercase.
    random = random.replace("-", "")  # Remove the UUID '-'.
    return random[0:string_length]  # Return the random string.

def allowed_file(filename):
    return '.' in filename and \
           filename.rsplit('.', 1)[1] in ALLOWED_EXTENSIONS

app = Flask(__name__)
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER

@app.route("/")
def template_test():
    return render_template('template.html', label='',
                           imagesource=' ', product='', productl='',product_image='')

@app.route('/', methods=['GET', 'POST'])
def upload_file():
    if request.method == 'POST':
        import time
        start_time = time.time()
        file = request.files['file']

        if file and allowed_file(file.filename):
            filename = secure_filename(file.filename)

            file_path = os.path.join(app.config['UPLOAD_FOLDER'], filename)
            file.save(file_path)
            result = predict(file_path)
            class = []

            if result == 0:
                label = 'A'
                class += ['A']
            elif result == 1:
                label = 'B'
                class += ['B']
            elif result == 2:
                label = 'C'
                class += ['C']

            # select list of products that are with the classified label
            df_target = df_rec[df_rec['skin_type'] == class[0]]
            #random sample one row
            product_list = df_target.sample(n=1)
            #get product info
            product_name = product_list['product_name'].tolist()[0]
            product_link = product_list['link'].tolist()[0]
            ######DISPLAY IMAGE??###########
            product_img = product_list['product_img'].tolist()[0]
            response = requests.get(product_img)
            img = Image.open(BytesIO(response.content))

            filename = my_random_string(6) + filename

            os.rename(file_path, os.path.join(app.config['UPLOAD_FOLDER'], filename))
            print("--- %s seconds ---" % str(time.time() - start_time))


        return render_template('template.html', label=label, imagesource='../uploads/' + filename, product=product_name, productl=product_link) ###AND DISPLAY IMAGE??###

from flask import send_from_directory

@app.route('/uploads/<filename>')
def uploaded_file(filename):
    return send_from_directory(app.config['UPLOAD_FOLDER'],
                               filename)

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

Второй вопрос о html и кодировании в целом:

У меня много проблем с настройкой макета - я надеюсь, что рекомендации могут быть отображены в новом блоке, который находится ниже загруженное изображение и прогноз, а не то, что сейчас. Я думаю, мне нужно изменить оба файла html (которые почти не имеют кода ...), а также этот файл app.py. Но, честно говоря, я потратил так много времени и все еще очень застрял. Кроме того, я считаю, что то, что я закодировал, неэффективно, так как я не смогу отображать несколько продуктов. Извините за так много вопросов. любые советы по любым частям или даже просто направление к другим потокам / учебникам были бы очень признательны! ссылка

#template.html
{% extends "index.html" %}
{% block content %}

<th>
<img width="400px" height="300px" src="{{imagesource}}" />
</th>
<th>
{{label}}
</th>
<br>
<th>
{{product}}
</th>
<th>
{{productl}}
</th>
{% endblock %}

#index.html
<html>
<!-- stylesheets -->
<link href="//maxcdn.bootstrapcdn.com/bootswatch/3.2.0/yeti/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="{{ url_for('static', filename='main.css') }}" rel="stylesheet">
<div class="row">
  <div class="col-md-7">
    <h1 style="color: #3d85c6;">Classification and production recommendation</h1>
    <h3>Upload an image</h3>
    <br>
    <form action="" method=post enctype=multipart/form-data>
      <input type=file name=file>
      <input type=submit value=Upload>
    </form>
    <h2>Results</h2>
    <br>
    <table class="table" id="results-table">
        <tr>
          <th>Image</th>
          <th>Prediction</th>
          <th>Recommendation</th>
        </tr>
    {% block content %}{% endblock %}
  </div>
        </tr>
</div>
</html>