import os
from urllib.request import urlretrieve

import tensorflow as tf

import gradio
import gradio as gr

urlretrieve(
    "https://gr-models.s3-us-west-2.amazonaws.com/mnist-model.h5", "mnist-model.h5"
)
model = tf.keras.models.load_model("mnist-model.h5")


def recognize_digit(image):
    image = image.reshape(1, -1)
    prediction = model.predict(image).tolist()[0]
    return {str(i): prediction[i] for i in range(10)}


im = gradio.inputs.Image(
    shape=(28, 28), image_mode="L", invert_colors=False, source="canvas"
)

iface = gr.Interface(
    recognize_digit,
    im,
    gradio.outputs.Label(num_top_classes=3),
    live=True,
    interpretation="default",
    capture_session=True,
    title="Number Guesser",
    description="""Draw a number. Give it your best shot.""",
    css="""
    .gradio-page {
             background-image : url('https://raw.githubusercontent.com/arielgamino/githubpages/main/top-ranked-program-icon-small.png');
             background-size: contain;
             background-repeat: no-repeat;
             background-position: top left;
             background-size: auto;
             border: 10px solid #102038;
    }
    body {background-color: #102038;}

    p.description {
      font-family: -apple-system, BlinkMacSystemFont, sans-serif;
      font-size: 1.4em;
      padding-top: 17px;
      color: #bf5700;
    }

    h1 {
      font-family: -apple-system, BlinkMacSystemFont, sans-serif;
      color: #bf5700;
    }

    .gradio-page .title {
      font-size: 2.50rem;
      line-height: 2.75rem;
    }
    """
)

iface.test_launch()
iface.launch()