Hugging Face's logo

Spaces:
jagriti
/
test_deploy
Running

App Files Community
jagriti commited on
Commit
8f783a9
·
1 Parent(s): de141a5

Upload 2 files

Browse files
Files changed (2) hide show
  1. index.html +83 -0
  2. success.html +75 -0
index.html ADDED
@@ -0,0 +1,83 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="eng">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <link rel="stylesheet" href={{url_for('static' , filename = 'css/normalize.css')}}>
8
+ <link rel="stylesheet" href={{url_for('static' , filename = 'css/grid.css')}}>
9
+ <link rel='stylesheet' href={{url_for('static' , filename = 'css/style.css')}}>
10
+
11
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
12
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
13
+ <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
14
+ <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;1,300&display=swap" rel="stylesheet" type='text/css'>
15
+ <title>Image Classification WebApp</title>
16
+ <meta name="keywords" content="cutom file input, styling, label, cross-browser, accessible, input type file" />
17
+
18
+ <style>
19
+ .content {
20
+ max-width: 500px;
21
+ margin: auto;
22
+ }
23
+ .bg-img{
24
+ width: 100%;
25
+ height: 100vh;
26
+ background-image:linear-gradient(rgba(0, 0, 0, 0.71),rgba(0, 0, 0, 0.7)),url('static/css/b4.jpg');
27
+ background-size: cover;
28
+ background-position: center;
29
+ }
30
+
31
+ </style>
32
+
33
+
34
+ </head>
35
+
36
+ <body>
37
+ <div class="bg-img">
38
+ <div class="content">
39
+ <div class = "index-main">
40
+
41
+ <div style = "width : 100%; padding-top : 5%;">
42
+ <div class = "header-content">
43
+ <h1 style = "text-align: center;color: white"><span class="header-content-text">Image Classification Model</span></h1>
44
+ </div>
45
+ </div>
46
+
47
+ <div class="upload-section">
48
+
49
+ <div class="upload-file">
50
+ <form class = "file-form" action="/success" method="post", enctype="multipart/form-data">
51
+ <input class="file-form-input" type="file" , name = "file"/>
52
+ <button class="btn btn-success btn-lg">Upload</button>
53
+ </form>
54
+ </div>
55
+
56
+ <div class="uploadOR">
57
+ <span>OR</span>
58
+ </div>
59
+
60
+ <div class="upload-link">
61
+ <form class = "link-form" action="/success" method="post", enctype="multipart/form-data">
62
+ <input class="link-form-input" type="text" ,maxlength="1000" , name = "link" placeholder="Paste the image URL"/>
63
+ <button class="btn btn-success btn-lg">Proceed</button>
64
+ </form>
65
+ </div>
66
+ <div class = "header-content-sub">
67
+ <p style = "text-align: center; margin-top: 15px;color: red" class="header-content-info">{{error}}</p>
68
+ </div>
69
+ </div>
70
+
71
+ <div class = "footer">
72
+ <div class = "header-content-sub">
73
+ <p style = "text-align: center;color: white" class="header-content-info">The model was trained on CIFAR-10 dataset and the model only performs better when the following image categories are provided as input</p>
74
+ </div>
75
+ <div class = "header-content-sub">
76
+ <p style = "text-align: center;color:rgb(96, 163, 96)" class="header-content-info">dog , cat , horse , deer , frog , airplane , truck , automobile , ship , bird</p>
77
+ </div>
78
+ </div>
79
+ </div>
80
+ </div>
81
+ </div>
82
+ </body>
83
+ </html>
success.html ADDED
@@ -0,0 +1,75 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="eng">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <link rel="stylesheet" href={{url_for('static' , filename = 'css/normalize.css')}}>
7
+ <link rel="stylesheet" href={{url_for('static' , filename = 'css/grid.css')}}>
8
+ <link rel='stylesheet' href={{url_for('static' , filename = 'css/styleSucc.css')}}>
9
+
10
+ <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;1,300&display=swap" rel="stylesheet" type='text/css'>
11
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
12
+ <title>Results Page</title>
13
+
14
+ <style type="text/css">
15
+ th{
16
+ text-align: center;
17
+ font-size: 20px;
18
+ }
19
+
20
+ td{
21
+ text-align: center;
22
+ font-size: 18px;
23
+ }
24
+ </style>
25
+ </head>
26
+ <body>
27
+ <div class = "second-main" style = "height: 100% , width: 100%;">
28
+ <nav>
29
+ <ul style = "padding-right: 2%;" class = "main-nav">
30
+ <li><a href ="/">HomePage</a></li>
31
+ </ul>
32
+
33
+ </nav>
34
+ <div class = "header">
35
+ <row style = "width: 100% ; display: flex; justify-content: center;">
36
+ <h3 class="header-text">Uploaded Image</h3>
37
+ </row>
38
+ <row style = "width: 100% ; display: flex; justify-content: center;">
39
+ <img class = "result-img" src={{url_for('static', filename = 'images/'+ img)}}>
40
+ </row>
41
+ </div>
42
+
43
+ <div class = "info">
44
+
45
+ <row style = "width: 100% ; display: flex; justify-content: center;">
46
+ <h3 class = "header-text">Model Prediction</h3>
47
+ </row>
48
+ <row style = "width: 100%; display: flex; justify-content: center;">
49
+ <table class="table-bordered text-light table-custom">
50
+ <tr>
51
+ <th>Rank</th>
52
+ <th>Class</th>
53
+ <th>Probability</th>
54
+ </tr>
55
+ <tr>
56
+ <td>1st</td>
57
+ <td>{{ predictions.class1 }}</td>
58
+ <td>{{ predictions.prob1 }} %</td>
59
+ </tr>
60
+ <tr>
61
+ <td>2nd</td>
62
+ <td>{{ predictions.class2 }}</td>
63
+ <td>{{ predictions.prob2 }} %</td>
64
+ </tr>
65
+ <tr>
66
+ <td>3rd</td>
67
+ <td>{{ predictions.class3 }}</td>
68
+ <td>{{ predictions.prob3 }} %</td>
69
+ </tr>
70
+ </table>
71
+ </row>
72
+ </div>
73
+ </div>
74
+ </body>
75
+ </html>