File size: 1,671 Bytes
307a166
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
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()