Как использовать изображения, загруженные с веб-страницы HTML, с помощью Python Flask

Содержание

Вопрос или проблема
Ответ или решение
Структура проекта
Код Flask
HTML для результатов (results.html)
HTML для формы загрузки (enter_p.html)
Основные изменения и пояснения

Вопрос или проблема

Я пытаюсь создать программу для распознавания изображений и до сих пор разработал модель и все аспекты ИИ. Однако, когда дело дошло до внедрения этого на веб-сайт, у меня возникло много неожиданных проблем, когда я пытаюсь отобразить предсказание на другой веб-странице, используя Python Flask.

Например, всякий раз, когда я нажимаю на загрузку после выбора изображения, открывается новая веб-страница с каталогом изображения и файлами проекта, где я могу просматривать файлы/папки. Это должно быть просто контейнером с предсказанием и некоторым текстом.

Я довольно нов в этом стиле программирования, поэтому не знаю, как в данный момент решить ошибки, поэтому любая помощь будет очень appreciated. Я прикрепил фотографию текущей структуры каталога проекта.

Вот мой код Python Flask

@app.route("https://stackoverflow.com/")
def index():
    return render_template('html/enter_p.html')

@app.route('/upload', methods=['POST'])
def upload_file():
    if 'file' not in request.files:
        return redirect(request.url)
    file = request.files['file']
    if file.filename == '':
        return redirect(request.url)
    if file:
        # Сохранить файл
        file_path = os.path.join(app.config['UPLOAD_FOLDER'], file.filename)
        file.save(file_path)
        # Перенаправить на страницу предсказания
        return redirect(url_for('predict', filename=file.filename))

@app.route('/predict/<filename>')
def predict(filename):
    # Загрузить вашу модель и сделать предсказание
    result = model.predict(os.path.join(app.config['UPLOAD_FOLDER'], filename))  # Замените своей логикой предсказания
    return render_template('results.html', prediction=result, filename=filename)

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

Вот мой код html для результатов:

    <div class="container">
        <h1>Результат предсказания: {{ prediction }}</h1>
        <img src="{{ url_for('static', filename="uploads/" + filename) }}" alt="Загруженное изображение родинки" width="300px">
        <br>

И если необходимо, вот моя форма загрузки:

            <form action = "../static/uploads/" method = "post" enctype = "multipart/form-data">
                <input type = "file" name = "file" accept = "image/*" required>
                <button type = "submit">Загрузить</button>
            </form>

Ответ или решение

Чтобы использовать изображения, загруженные с помощью HTML-страницы, в приложении на Flask, вам нужно учесть несколько важных аспектов. Давайте рассмотрим полное решение вашей проблемы.

Структура проекта

Убедитесь, что ваша структура проекта выглядит следующим образом:

/project_directory
│
├── app.py
├── static
│   ├── uploads
│   └── ...
└── templates
    ├── enter_p.html
    └── results.html

Код Flask

Вот ваш код Flask с исправлениями и улучшениями:

from flask import Flask, render_template, request, redirect, url_for
import os

app = Flask(__name__)
app.config['UPLOAD_FOLDER'] = 'static/uploads/'
app.config['MAX_CONTENT_LENGTH'] = 16 * 1024 * 1024  # Ограничение на размер файла 16MB

# Замените это на ваш фактический файл модели
# model = load_your_model_function()

@app.route('/')
def index():
    return render_template('enter_p.html')

@app.route('/upload', methods=['POST'])
def upload_file():
    if 'file' not in request.files:
        return redirect(request.url)
    file = request.files['file']
    if file.filename == '':
        return redirect(request.url)
    if file:
        # Сохраните файл
        file_path = os.path.join(app.config['UPLOAD_FOLDER'], file.filename)
        file.save(file_path)
        # Перенаправьте на страницу с предсказанием
        return redirect(url_for('predict', filename=file.filename))

@app.route('/predict/<filename>')
def predict(filename):
    # Загрузите вашу модель и выполните предсказание
    # result = model.predict(os.path.join(app.config['UPLOAD_FOLDER'], filename))  # Укажите вашу логику предсказания
    result = "прогноз"  # Здесь будет ваш результат
    return render_template('results.html', prediction=result, filename=filename)

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

HTML для результатов (results.html)

Обновите ваш HTML-код для отображения результатов предсказания:

<div class="container">
    <h1>Результат предсказания: {{ prediction }}</h1>
    <img src="{{ url_for('static', filename='uploads/' + filename) }}" alt="Загруженное изображение" width="300px">
    <br>
</div>

HTML для формы загрузки (enter_p.html)

Обновите вашу форму следующим образом:

<form action="{{ url_for('upload_file') }}" method="post" enctype="multipart/form-data">
    <input type="file" name="file" accept="image/*" required>
    <button type="submit">Загрузить</button>
</form>

Основные изменения и пояснения

Обновление основного URL: Замените строку @app.route("https://stackoverflow.com/") на @app.route('/'), чтобы указать на корневую страницу вашего приложения.
Обработка загрузки: Убедитесь, что вы сохраняете файл в правильной папке static/uploads/ и корректно перенаправляете пользователя на страницу с предсказанием.
Корректная обработка URL: Используйте url_for('upload_file') для действия формы вместо указания относительного пути.
Общие ошибки: Убедитесь, что ваше приложение не открывает директорию файлов после загрузки. Это часто происходит, когда отсутствует перенаправление.
Логика предсказаний: Не забудьте заменить заглушку результата "прогноз" на вашу фактическую логику предсказания.

Теперь при загрузке изображения ваше приложение должно корректно обрабатывать файл, вызывать предсказание и отображать результат на новой странице.