import os
import process_image
from flask import Flask, flash, request, redirect, url_for
from werkzeug.utils import secure_filename
from werkzeug.middleware.shared_data import SharedDataMiddleware


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

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


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


@app.route('/', methods=['GET', 'POST'])
def upload_file():
    if request.method == 'POST':
        # check if the post request has the file part
        if 'file' not in request.files:
            flash('No file part')
            return redirect(request.url)
        file = request.files['file']
        # if user does not select file, browser also
        # submit an empty part without filename
        if file.filename == '':
            flash('No selected file')
            return redirect(request.url)
        if file and allowed_file(file.filename):
            filename = secure_filename(file.filename)
            file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
            print(filename)
            predictions = process_image.analyze(filename)
            filename = "./processed" + filename
            return redirect(url_for('uploaded_file', filename=filename))

    return '''
    <!doctype html>
    <title>Explainable Object Detection</title>

    <!-- Latest compiled and minified CSS -->
        <!-- CSS only -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="<KEY>" crossorigin="anonymous">

        <!-- JS, Popper.js, and jQuery -->
        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="<KEY>" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="<KEY>" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="<KEY>" crossorigin="anonymous"></script>


        <nav class="navbar navbar-dark bg-dark">
            <a class="navbar-brand" href="#">Xplainable AI</a>
        </nav>

        <br/>
        <br/>
        <div class="container p-6 my-6 border">
            <div class="jumbotron">
              <h1 class="display-4">Explainable Image Recognition</h1>
              <p class="lead">An API that does image predictions, and explains what parts of the image contributed to the assessment.</p>
              <a class="btn btn-dark btn-lg" href="#" role="button">Check Source</a>
            </div>
        </div>

    <br/>
    <br/>

    <Container align="center">
        <div>
            <form method=post enctype=multipart/form-data>
              <input type=file name=file >
              <input type=submit value=Upload>
            </form>
        </div>
    </Container>

    '''


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


app.add_url_rule('/uploads/<filename>', 'uploaded_file', build_only=True)
app.wsgi_app = SharedDataMiddleware(
    app.wsgi_app, {'/uploads':  app.config['UPLOAD_FOLDER']})

import os
import process_image
from flask import Flask, flash, request, redirect, url_for
from werkzeug.utils import secure_filename
from werkzeug.middleware.shared_data import SharedDataMiddleware


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

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


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


@app.route('/', methods=['GET', 'POST'])
def upload_file():
    if request.method == 'POST':
        # check if the post request has the file part
        if 'file' not in request.files:
            flash('No file part')
            return redirect(request.url)
        file = request.files['file']
        # if user does not select file, browser also
        # submit an empty part without filename
        if file.filename == '':
            flash('No selected file')
            return redirect(request.url)
        if file and allowed_file(file.filename):
            filename = secure_filename(file.filename)
            file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
            print(filename)
            predictions = process_image.analyze(filename)
            filename = "./processed" + filename
            return redirect(url_for('uploaded_file', filename=filename))

    return '''
    <!doctype html>
    <title>Explainable Object Detection</title>

    <!-- Latest compiled and minified CSS -->
        <!-- CSS only -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="<KEY>" crossorigin="anonymous">

        <!-- JS, Popper.js, and jQuery -->
        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="<KEY>" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="<KEY>" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="<KEY>" crossorigin="anonymous"></script>


        <nav class="navbar navbar-dark bg-dark">
            <a class="navbar-brand" href="#">Xplainable AI</a>
        </nav>

        <br/>
        <br/>
        <div class="container p-6 my-6 border">
            <div class="jumbotron">
              <h1 class="display-4">Explainable Image Recognition</h1>
              <p class="lead">An API that does image predictions, and explains what parts of the image contributed to the assessment.</p>
              <a class="btn btn-dark btn-lg" href="#" role="button">Check Source</a>
            </div>
        </div>

    <br/>
    <br/>

    <Container align="center">
        <div>
            <form method=post enctype=multipart/form-data>
              <input type=file name=file >
              <input type=submit value=Upload>
            </form>
        </div>
    </Container>

    '''


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


app.add_url_rule('/uploads/<filename>', 'uploaded_file', build_only=True)
app.wsgi_app = SharedDataMiddleware(
    app.wsgi_app, {'/uploads':  app.config['UPLOAD_FOLDER']})

# check if the post request has the file part # if user does not select file, browser also # submit an empty part without filename <!doctype html>     <title>Explainable Object Detection</title>      <!-- Latest compiled and minified CSS -->         <!-- CSS only -->         <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="<KEY>" crossorigin="anonymous">          <!-- JS, Popper.js, and jQuery -->         <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="<KEY>" crossorigin="anonymous"></script>         <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="<KEY>" crossorigin="anonymous"></script>         <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="<KEY>" crossorigin="anonymous"></script>           <nav class="navbar navbar-dark bg-dark">             <a class="navbar-brand" href="#">Xplainable AI</a>         </nav>          <br/>         <br/>         <div class="container p-6 my-6 border">             <div class="jumbotron">               <h1 class="display-4">Explainable Image Recognition</h1>               <p class="lead">An API that does image predictions, and explains what parts of the image contributed to the assessment.</p>               <a class="btn btn-dark btn-lg" href="#" role="button">Check Source</a>             </div>         </div>      <br/>     <br/>      <Container align="center">         <div>             <form method=post enctype=multipart/form-data>               <input type=file name=file >               <input type=submit value=Upload>             </form>         </div>     </Container>