Hugging Face's logo

Spaces:
dilpreet77
/
iris
Sleeping

App Files Community
iris
File size: 6,171 Bytes
8765541
 
 
4beb8c2
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8765541
4beb8c2
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8765541
 
 
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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Iris Predictor</title>
  <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='img/bird.png') }}">

  <!-- Tailwind CSS CDN (for prototyping) -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- Adjust Tailwind config to enable backdrop-filter (if needed) -->
  <style>
    /* Tailwind config for backdrop-filter if required (most new versions support it) */
    @layer utilities {
      .backdrop-blur-3xl { backdrop-filter: blur(40px); }
    }
  </style>

  <!-- Font Awesome Free CDN -->
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
    integrity="sha512-…(use correct integrity)…"
    crossorigin="anonymous"
    referrerpolicy="no-referrer"
  />

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body class="min-h-screen bg-cover bg-center text-white" style="background-image: url('https://cdn-uploads.huggingface.co/production/uploads/68c904e18015407020b54e94/-jH9W0IcdkO3xzcxHuTfS.gif');">

  <div class="flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
    <div class="max-w-md w-full space-y-8">
      <div class="text-center">
        <h2 class="text-3xl font-extrabold">🌸 Iris Flower Predictor</h2>
      </div>
      <form action="/predict" method="post" class="glass bg-white/10 backdrop-blur-3xl rounded-3xl shadow-lg p-8 space-y-6">
        <!-- sepal length -->
        <div>
          <label for="sl" class="block text-sm font-semibold">Sepal Length</label>
          <div class="mt-1 relative">
            <input type="text" name="sl" id="sl" required
              class="appearance-none block w-full px-4 py-3 bg-white/20 placeholder-white/70 rounded-xl text-white focus:outline-none focus:ring-2 focus:ring-indigo-500"
              placeholder="e.g., 5.1">
            <div class="absolute inset-y-0 right-3 flex items-center pointer-events-none">
              <i class="fas fa-ruler-vertical text-white/70"></i>
            </div>
          </div>
        </div>

        <!-- sepal width -->
        <div>
          <label for="sw" class="block text-sm font-semibold">Sepal Width</label>
          <div class="mt-1 relative">
            <input type="text" name="sw" id="sw" required
              class="appearance-none block w-full px-4 py-3 bg-white/20 placeholder-white/70 rounded-xl text-white focus:outline-none focus:ring-2 focus:ring-indigo-500"
              placeholder="e.g., 3.5">
            <div class="absolute inset-y-0 right-3 flex items-center pointer-events-none">
              <i class="fas fa-arrows-alt-h text-white/70"></i>
            </div>
          </div>
        </div>

        <!-- petal length -->
        <div>
          <label for="pl" class="block text-sm font-semibold">Petal Length</label>
          <div class="mt-1 relative">
            <input type="text" name="pl" id="pl" required
              class="appearance-none block w-full px-4 py-3 bg-white/20 placeholder-white/70 rounded-xl text-white focus:outline-none focus:ring-2 focus:ring-indigo-500"
              placeholder="e.g., 1.4">
            <div class="absolute inset-y-0 right-3 flex items-center pointer-events-none">
              <i class="fas fa-long-arrow-alt-down text-white/70"></i>
            </div>
          </div>
        </div>

        <!-- petal width -->
        <div>
          <label for="pw" class="block text-sm font-semibold">Petal Width</label>
          <div class="mt-1 relative">
            <input type="text" name="pw" id="pw" required
              class="appearance-none block w-full px-4 py-3 bg-white/20 placeholder-white/70 rounded-xl text-white focus:outline-none focus:ring-2 focus:ring-indigo-500"
              placeholder="e.g., 0.2">
            <div class="absolute inset-y-0 right-3 flex items-center pointer-events-none">
              <i class="fas fa-arrows-alt-v text-white/70"></i>
            </div>
          </div>
        </div>

        <!-- buttons -->
        <div class="space-y-4">
          <button type="submit"
            class="w-full flex justify-center py-3 px-6 bg-gradient-to-r from-indigo-500 to-purple-500 hover:from-purple-500 hover:to-indigo-500 rounded-xl text-lg font-bold transition transform hover:-translate-y-1 shadow-md">
            <i class="fas fa-magic mr-2"></i> Predict
          </button>
          <button type="button"
            onclick="window.location='/'"
            class="w-full flex justify-center py-3 px-6 bg-gray-700/50 hover:bg-gray-700/70 rounded-xl text-lg font-semibold transition transform hover:-translate-y-1 shadow">
            <i class="fas fa-sync-alt mr-2"></i> Refresh
          </button>
        </div>

      </form>

      {% if data %}
        <div class="glass bg-white/10 backdrop-blur-3xl rounded-3xl shadow-lg p-6 mt-6 text-center animate-fadeIn">
          <p class="text-xl">The predicted flower species is:</p>
          <p class="text-2xl font-bold text-indigo-200 mt-2">{{ data }}</p>
          <div class="mt-4">
            {% if data=="setosa" %}
              <img src="https://cdn-uploads.huggingface.co/production/uploads/6474405f90330355db146c76/iVXMOLPdx1ctqWnvnFED_.png" alt="IRIS SETOSA" class="mx-auto w-40 h-40 rounded-xl shadow-2xl">
            {% elif data=="versicolor" %}
              <img src="https://cdn.glitch.global/8599b2d2-58ab-4d42-98f5-97fa4c6bad04/Iris%20versicolor.png?v=1680866854461" alt="IRIS VERSICOLOR" class="mx-auto w-40 h-40 rounded-xl shadow-2xl">
            {% elif data=="virginica" %}
              <img src="https://cdn.glitch.global/8599b2d2-58ab-4d42-98f5-97fa4c6bad04/Iris%20Virginica.png?v=1680866857022" alt="IRIS VIRGINICA" class="mx-auto w-40 h-40 rounded-xl shadow-2xl">
            {% endif %}
          </div>
        </div>
      {% endif %}

    </div>
  </div>

  <!-- Optional: Animation classes -->
  <style>
    @keyframes fadeIn {
      from { opacity: 0; transform: scale(0.95); }
      to { opacity: 1; transform: scale(1); }
    }
    .animate-fadeIn {
      animation: fadeIn 0.5s ease-in-out;
    }
  </style>

</body>
</html>