Hugging Face's logo

Spaces:
sid22669
/
Deployment_check
Sleeping

App Files Community
sid22669 commited on
Commit
eea3f29
·
1 Parent(s): aedbb96

commited

Browse files
Files changed (3) hide show
  1. templates +0 -0
  2. templates/index.html +121 -0
  3. templates/output.html +96 -0
templates DELETED
File without changes
templates/index.html ADDED
@@ -0,0 +1,121 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Prediction Input</title>
7
+ <style>
8
+ /* General body styling */
9
+ body {
10
+ font-family: Arial, sans-serif;
11
+ background-color: #f4f7fc;
12
+ color: #333;
13
+ margin: 0;
14
+ padding: 0;
15
+ display: flex;
16
+ justify-content: center;
17
+ align-items: center;
18
+ height: 100vh;
19
+ flex-direction: column;
20
+ }
21
+
22
+ h1 {
23
+ color: #4e73df;
24
+ text-align: center;
25
+ margin-bottom: 40px;
26
+ }
27
+
28
+ /* Form container styling */
29
+ form {
30
+ background-color: #fff;
31
+ padding: 20px;
32
+ border-radius: 8px;
33
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
34
+ width: 100%;
35
+ max-width: 400px;
36
+ }
37
+
38
+ label {
39
+ display: block;
40
+ margin-bottom: 8px;
41
+ font-size: 1rem;
42
+ font-weight: bold;
43
+ color: #333;
44
+ }
45
+
46
+ input[type="number"] {
47
+ width: 100%;
48
+ padding: 10px;
49
+ margin-bottom: 15px;
50
+ border: 1px solid #ccc;
51
+ border-radius: 4px;
52
+ font-size: 1rem;
53
+ }
54
+
55
+ input[type="submit"] {
56
+ background-color: #4e73df;
57
+ color: white;
58
+ padding: 12px 20px;
59
+ border: none;
60
+ border-radius: 4px;
61
+ font-size: 1.1rem;
62
+ cursor: pointer;
63
+ transition: background-color 0.3s;
64
+ width: 100%;
65
+ }
66
+
67
+ input[type="submit"]:hover {
68
+ background-color: #2e59d9;
69
+ }
70
+
71
+ /* Responsive Design */
72
+ @media (max-width: 600px) {
73
+ h1 {
74
+ font-size: 1.5rem;
75
+ }
76
+
77
+ form {
78
+ padding: 15px;
79
+ width: 90%;
80
+ }
81
+
82
+ input[type="number"] {
83
+ padding: 8px;
84
+ }
85
+
86
+ input[type="submit"] {
87
+ padding: 10px;
88
+ }
89
+ }
90
+ </style>
91
+ </head>
92
+ <body>
93
+
94
+ <h1>Enter the input values for prediction</h1>
95
+ <form action="/predict" method="POST">
96
+ <label for="input1">Input 1:</label>
97
+ <input type="number" id="input1" name="input1" step="any" required>
98
+
99
+ <label for="input2">Input 2:</label>
100
+ <input type="number" id="input2" name="input2" step="any" required>
101
+
102
+ <label for="input3">Input 3:</label>
103
+ <input type="number" id="input3" name="input3" step="any" required>
104
+
105
+ <label for="input4">Input 4:</label>
106
+ <input type="number" id="input4" name="input4" step="any" required>
107
+
108
+ <label for="input5">Input 5:</label>
109
+ <input type="number" id="input5" name="input5" step="any" required>
110
+
111
+ <label for="input6">Input 6:</label>
112
+ <input type="number" id="input6" name="input6" step="any" required>
113
+
114
+ <label for="input7">Input 7:</label>
115
+ <input type="number" id="input7" name="input7" step="any" required>
116
+
117
+ <input type="submit" value="Get Prediction">
118
+ </form>
119
+
120
+ </body>
121
+ </html>
templates/output.html ADDED
@@ -0,0 +1,96 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Prediction Result</title>
7
+ <style>
8
+ /* General body styling */
9
+ body {
10
+ font-family: Arial, sans-serif;
11
+ background-color: #f4f7fc;
12
+ color: #333;
13
+ margin: 0;
14
+ padding: 0;
15
+ display: flex;
16
+ justify-content: center;
17
+ align-items: center;
18
+ height: 100vh;
19
+ flex-direction: column;
20
+ }
21
+
22
+ h1 {
23
+ color: #4e73df;
24
+ text-align: center;
25
+ margin-bottom: 30px;
26
+ font-size: 2rem;
27
+ }
28
+
29
+ /* Container for the prediction result */
30
+ .result-container {
31
+ background-color: #fff;
32
+ padding: 20px;
33
+ border-radius: 8px;
34
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
35
+ width: 100%;
36
+ max-width: 400px;
37
+ text-align: center;
38
+ }
39
+
40
+ p {
41
+ font-size: 1.2rem;
42
+ margin-bottom: 20px;
43
+ }
44
+
45
+ strong {
46
+ color: #333;
47
+ }
48
+
49
+ /* Styling for the "Go Back" link */
50
+ a {
51
+ text-decoration: none;
52
+ font-size: 1rem;
53
+ color: #4e73df;
54
+ border: 1px solid #4e73df;
55
+ padding: 10px 20px;
56
+ border-radius: 4px;
57
+ transition: background-color 0.3s;
58
+ }
59
+
60
+ a:hover {
61
+ background-color: #4e73df;
62
+ color: white;
63
+ }
64
+
65
+ /* Responsive Design */
66
+ @media (max-width: 600px) {
67
+ h1 {
68
+ font-size: 1.5rem;
69
+ }
70
+
71
+ .result-container {
72
+ padding: 15px;
73
+ width: 90%;
74
+ }
75
+
76
+ p {
77
+ font-size: 1rem;
78
+ }
79
+
80
+ a {
81
+ padding: 8px 16px;
82
+ }
83
+ }
84
+ </style>
85
+ </head>
86
+ <body>
87
+
88
+ <h1>Prediction Output</h1>
89
+
90
+ <div class="result-container">
91
+ <p><strong>Prediction:</strong> {{ prediction }}</p>
92
+ <a href="/">Go Back to Input</a>
93
+ </div>
94
+
95
+ </body>
96
+ </html>