Spaces:

nonamelife
/

garbage-detection-demo

Sleeping

App Files Files Community

nonamelife commited on Jun 1

Commit

939142a

verified ·

1 Parent(s): 89f19dc

Upload 6 files

Browse files

Files changed (6) hide show

template/about.html +49 -0
template/contact.html +221 -0
template/home.html +51 -0
template/index.html +87 -0
template/results.html +54 -0
template/tool.html +87 -0

template/about.html ADDED Viewed

	@@ -0,0 +1,49 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>About - Garbage Detection</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+    <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500&display=swap" rel="stylesheet">
+</head>
+<body>
+    <nav class="navbar">
+        <div class="nav-brand">Garbage Detection</div>
+        <ul class="nav-links">
+            <li><a href="/">Home</a></li>
+            <li><a href="/about" class="active">About</a></li>
+            <li><a href="/contact">Contact</a></li>
+        </ul>
+    </nav>
+    <div class="container">
+        <header>
+            <h1>About</h1>
+            <p class="subtitle">A cleaner future through AI.</p>
+        </header>
+        <section class="about-section">
+            <p>
+                Litter and waste management are critical challenges faced by both urban and rural areas.
+                By optimizing the detection process, we aim to help communities and organizations maintain cleanliness and promote sustainability.
+            </p>
+            <p>
+                At Garbage Detection, our goal is to harness the power of AI to foster healthier and cleaner environments.
+                Our AI-driven system classifies images into “Clean” or “Dirty,” making it easier for municipalities and environmental organizations to monitor and improve public spaces.
+            </p>
+            <p>
+                Using TensorFlow and Flask, our model analyzes images and categorizes them based on cleanliness.
+                With support for bulk uploads, users can efficiently process multiple images at once, making large-scale cleanliness assessments quick and seamless.
+            </p>
+            <p>
+                Join us in building a smarter, cleaner future—one image at a time!
+            </p>
+        </section>
+    </div>
+    <footer class="footer">
+        <p>© 2025 Garbage Detection</p>
+    </footer>
+</body>
+</html>

template/contact.html ADDED Viewed

	@@ -0,0 +1,221 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>Contact Us</title>
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500&display=swap" rel="stylesheet" />
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+      font-family: 'Roboto Mono', monospace;
+    }
+    html, body {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      background: linear-gradient(135deg, #1C2526 0%, #252C2D 100%);
+      color: #E0E7E8;
+    }
+    .navbar {
+      background: #2E3536;
+      padding: 15px 30px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    .nav-brand {
+      font-size: 1.5rem;
+      color: #26A69A;
+    }
+    .nav-links {
+      list-style: none;
+      display: flex;
+      gap: 20px;
+    }
+    .nav-links a {
+      text-decoration: none;
+      color: #E0E7E8;
+      font-weight: 500;
+      transition: color 0.3s ease;
+    }
+    .nav-links a:hover,
+    .nav-links .active {
+      color: #26A69A;
+    }
+    .container {
+      flex: 1;
+      max-width: 1000px;
+      margin: auto;
+      padding: 40px 20px;
+      text-align: center;
+    }
+    .contact-header h1 {
+      font-size: 2.5rem;
+    }
+    .contact-header p {
+      font-size: 1.2rem;
+      color: #A0A8A9;
+      margin: 10px auto 30px;
+    }
+    .team-list {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+      gap: 30px;
+      justify-content: center;
+      margin-top: 40px;
+    }
+    .team-card {
+      height: 260px;
+      position: relative;
+      perspective: 1000px;
+    }
+    .card-content {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      transition: transform 0.6s ease-in-out;
+      transform-style: preserve-3d;
+    }
+    .card-front,
+    .card-back {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      border-radius: 12px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+      padding: 15px;
+      text-align: center;
+      font-weight: 600;
+      backface-visibility: hidden;
+    }
+    .card-front {
+      background: #557C8D;
+      color: white;
+    }
+    .card-back {
+      background: #2F4156;
+      color: white;
+      transform: rotateY(180deg);
+    }
+    .team-card:hover .card-content {
+      transform: rotateY(180deg);
+    }
+    .card-front h3 {
+      opacity: 1;
+      transition: opacity 0.3s ease-in-out;
+    }
+    .team-card:hover .card-front h3 {
+      opacity: 0;
+    }
+    .card-back p {
+      opacity: 0;
+      transition: opacity 0.3s ease-in-out;
+    }
+    .team-card:hover .card-back p {
+      opacity: 1;
+    }
+    .footer {
+      background: #2E3536;
+      padding: 15px;
+      text-align: center;
+      color: #A0A8A9;
+      font-size: 0.9rem;
+      margin-top: auto;
+      width: 100%;
+    }
+  </style>
+</head>
+<body>
+  <nav class="navbar">
+    <div class="nav-brand">Garbage Detection</div>
+    <ul class="nav-links">
+      <li><a href="/">Home</a></li>
+      <li><a href="/tool">Tool</a></li>
+      <li><a href="/about">About</a></li>
+      <li><a href="/contact" class="active">Contact</a></li>
+    </ul>
+  </nav>
+  <main class="container">
+    <div class="contact-header">
+      <h1>Meet the Team</h1>
+      <p>Get to know the people behind Garbage Detection</p>
+    </div>
+    <section class="team-list">
+      <div class="team-card">
+        <div class="card-content">
+          <div class="card-front"><h3>Sanjay Murali</h3></div>
+          <div class="card-back"><p>RA2312701010006</p><p>[email protected]</p></div>
+        </div>
+      </div>
+      <div class="team-card">
+        <div class="card-content">
+          <div class="card-front"><h3>Adithyan E</h3></div>
+          <div class="card-back"><p>RA2312701010004</p><p>[email protected]</p></div>
+        </div>
+      </div>
+      <div class="team-card">
+        <div class="card-content">
+          <div class="card-front"><h3>K Athmapriyan</h3></div>
+          <div class="card-back"><p>RA2312701010007</p><p>[email protected]</p></div>
+        </div>
+      </div>
+      <div class="team-card">
+        <div class="card-content">
+          <div class="card-front"><h3>R Supriya Rao</h3></div>
+          <div class="card-back"><p>RA2312701010027</p><p>[email protected]</p></div>
+        </div>
+      </div>
+      <div class="team-card">
+        <div class="card-content">
+          <div class="card-front"><h3>Joel Sheno G</h3></div>
+          <div class="card-back"><p>RA2312701010024</p><p>[email protected]</p></div>
+        </div>
+      </div>
+      <div class="team-card">
+        <div class="card-content">
+          <div class="card-front"><h3>Sriyaraj Kotagond</h3></div>
+          <div class="card-back"><p>RA2312701010026</p><p>[email protected]</p></div>
+        </div>
+      </div>
+    </section>
+  </main>
+  <footer class="footer">
+    <p>© 2025 Garbage Detection</p>
+  </footer>
+</body>
+</html>

template/home.html ADDED Viewed

	@@ -0,0 +1,51 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Garbage Detection</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&family=Roboto+Mono:wght@400;500&display=swap" rel="stylesheet">
+</head>
+<body>
+    <nav class="navbar">
+        <div class="nav-brand">Garbage Detection</div>
+        <ul class="nav-links">
+            <li><a href="/" class="active">Home</a></li>
+            <li><a href="/tool">Tool</a></li>
+            <li><a href="/about">About</a></li>
+            <li><a href="/contact">Contact</a></li>
+        </ul>
+    </nav>
+    <div class="hero">
+        <h1>GARBAGE DETECTION</h1>
+        <p class="hero-subtitle">AI for a Cleaner Tomorrow</p>
+        <a href="/tool" class="cta-btn">Try the Tool</a>
+    </div>
+    <section class="about-section">
+        <h2>About the Tool</h2>
+        <p>Our Garbage Detection tool uses advanced AI technology to classify and analyze the cleanliness of images. Whether it's urban or rural areas, we aim to contribute to a cleaner environment with the help of machine learning.</p>
+        <a href="/tool" class="cta-btn">Start Using the Tool</a>
+    </section>
+    <footer class="footer">
+        <p>© 2025 Garbage Detection</p>
+    </footer>
+    <script>
+        // Optional: Add subtle animation to hero text
+        document.addEventListener('DOMContentLoaded', () => {
+            const heroTitle = document.querySelector('.hero h1');
+            heroTitle.style.opacity = 0;
+            heroTitle.style.transform = 'translateY(20px)';
+            setTimeout(() => {
+                heroTitle.style.transition = 'opacity 1s ease, transform 1s ease';
+                heroTitle.style.opacity = 1;
+                heroTitle.style.transform = 'translateY(0)';
+            }, 100);
+        });
+    </script>
+</body>
+</html>

template/index.html ADDED Viewed

	@@ -0,0 +1,87 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Tool - Garbage Detection</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&family=Roboto+Mono:wght@400;500&display=swap" rel="stylesheet">
+</head>
+<body>
+    <nav class="navbar">
+        <div class="nav-brand">Garbage Detection</div>
+        <ul class="nav-links">
+            <li><a href="/">Home</a></li>
+            <li><a href="/tool" class="active">Tool</a></li>
+            <li><a href="/about">About</a></li>
+            <li><a href="/contact">Contact</a></li>
+        </ul>
+    </nav>
+    <div class="container">
+        <header>
+            <h1>Classification Tool</h1>
+            <p class="subtitle">Analyze cleanliness with AI.</p>
+        </header>
+        <section class="main-content">
+            <form id="upload-form" action="/predict" method="post" enctype="multipart/form-data">
+                <label for="file" class="custom-file-upload">
+                    <div class="icon">
+                        <svg viewBox="0 0 24 24" fill="#26A69A" xmlns="http://www.w3.org/2000/svg">
+                            <path fill-rule="evenodd" clip-rule="evenodd" d="M10 1C9.73478 1 9.48043 1.10536 9.29289 1.29289L3.29289 7.29289C3.10536 7.48043 3 7.73478 3 8V20C3 21.6569 4.34315 23 6 23H7C7.55228 23 8 22.5523 8 22C8 21.4477 7.55228 21 7 21H6C5.44772 21 5 20.5523 5 20V9H10C10.5523 9 11 8.55228 11 8V3H18C18.5523 3 19 3.44772 19 4V9C19 9.55228 19.4477 10 20 10C20.5523 10 21 9.55228 21 9V4C21 2.34315 19.6569 1 18 1H10ZM9 7H6.41421L9 4.41421V7ZM14 15.5C14 14.1193 15.1193 13 16.5 13C17.8807 13 19 14.1193 19 15.5V16V17H20C21.1046 17 22 17.8954 22 19C22 20.1046 21.1046 21 20 21H13C11.8954 21 11 20.1046 11 19C11 17.8954 11 17 13 17H14V16V15.5ZM16.5 11C14.142 11 12.2076 12.8136 12.0156 15.122C10.2825 15.5606 9 17.1305 9 19C9 21.2091 10.7909 23 13 23H20C22.2091 23 24 21.2091 24 19C24 17.1305 22.7175 15.5606 20.9844 15.122C20.7924 12.8136 18.858 11 16.5 11Z" fill=""></path>
+                        </svg>
+                    </div>
+                    <div class="text">
+                        <span>Upload Images</span>
+                    </div>
+                    <input id="file" name="file" type="file" accept="image/*" multiple>
+                </label>
+            </form>
+            <div class="loader" id="loader" style="display: none;">
+                <svg width="150" height="150" viewBox="0 0 150 150" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <circle id="bounce" cx="75" cy="75" r="10" fill="#26A69A"/>
+                    <circle id="bounce2" cx="75" cy="75" r="10" fill="#26A69A"/>
+                    <g id="particles">
+                        <circle cx="75" cy="75" r="5" fill="#A0A8A9"/>
+                        <circle cx="65" cy="65" r="3" fill="#A0A8A9"/>
+                        <circle cx="85" cy="85" r="4" fill="#A0A8A9"/>
+                    </g>
+                    <defs>
+                        <radialGradient id="gradient" cx="0.5" cy="0.5" r="0.5">
+                            <stop offset="0%" style="stop-color: #26A69A;" id="animatedStop"/>
+                            <stop offset="100%" style="stop-color: #1C2526;"/>
+                        </radialGradient>
+                    </defs>
+                </svg>
+            </div>
+        </section>
+        {% if error %}
+            <p class="error">{{ error }}</p>
+        {% endif %}
+    </div>
+    <footer class="footer">
+        <p>© 2025 Garbage Detection</p>
+    </footer>
+    <script>
+        const fileInput = document.getElementById('file');
+        const form = document.getElementById('upload-form');
+        const loader = document.getElementById('loader');
+        fileInput.addEventListener('change', function() {
+            if (this.files && this.files.length > 0) {
+                loader.style.display = 'flex';
+                requestAnimationFrame(() => {
+                    setTimeout(() => {
+                        form.submit();
+                    }, 500);
+                });
+            }
+        });
+    </script>
+</body>
+</html>

template/results.html ADDED Viewed

	@@ -0,0 +1,54 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Results - Garbage Detection</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&family=Roboto+Mono:wght@400;500&display=swap" rel="stylesheet">
+</head>
+<body>
+    <nav class="navbar">
+        <div class="nav-brand">Garbage Detection</div>
+        <ul class="nav-links">
+            <li><a href="/">Home</a></li>
+            <li><a href="/tool">Tool</a></li>
+            <li><a href="/about">About</a></li>
+            <li><a href="/contact">Contact</a></li>
+        </ul>
+    </nav>
+    <div class="container">
+        <header>
+            <h1>Classification Results</h1>
+            <p class="subtitle">Your uploaded images have been analyzed.</p>
+        </header>
+        <section class="results-section">
+            {% if results %}
+                <div class="results-grid">
+                    {% for result in results %}
+                        <div class="result-card">
+                            {% if result.image_url %}
+                                <img src="{{ result.image_url }}" alt="Analyzed Image" class="result-image">
+                                <h3 class="{{ 'dirty' if result.label == 'Dirty' else 'clean' }}">{{ result.label }}</h3>
+                                <p>Confidence: {{ result.confidence }}</p>
+                            {% else %}
+                                <h3 class="error-label">{{ result.label }}</h3>
+                                <p class="error-message">{{ result.error }}</p>
+                            {% endif %}
+                        </div>
+                    {% endfor %}
+                </div>
+            {% else %}
+                <p>No results to display.</p>
+            {% endif %}
+            <a href="/tool" class="back-btn">Upload More</a>
+        </section>
+    </div>
+    <footer class="footer">
+        <p>© 2025 Garbage Detection</p>
+    </footer>
+</body>
+</html>

template/tool.html ADDED Viewed

	@@ -0,0 +1,87 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Garbage Detection - Tool</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&family=Roboto+Mono:wght@400;500&display=swap" rel="stylesheet">
+</head>
+<body>
+    <nav class="navbar">
+        <div class="nav-brand">Garbage Detection</div>
+        <ul class="nav-links">
+            <li><a href="/" >Home</a></li>
+            <li><a href="/tool" class="active">Tool</a></li>
+            <li><a href="/about">About</a></li>
+            <li><a href="/contact">Contact</a></li>
+        </ul>
+    </nav>
+    <div class="container">
+        <header>
+            <h1>Classification Tool</h1>
+            <p class="subtitle">Analyze cleanliness with AI.</p>
+        </header>
+        <section class="main-content">
+            <form id="upload-form" action="/predict" method="post" enctype="multipart/form-data">
+                <label for="file" class="custom-file-upload">
+                    <div class="icon">
+                        <svg viewBox="0 0 24 24" fill="#26A69A" xmlns="http://www.w3.org/2000/svg">
+                            <path fill-rule="evenodd" clip-rule="evenodd" d="M10 1C9.73478 1 9.48043 1.10536 9.29289 1.29289L3.29289 7.29289C3.10536 7.48043 3 7.73478 3 8V20C3 21.6569 4.34315 23 6 23H7C7.55228 23 8 22.5523 8 22C8 21.4477 7.55228 21 7 21H6C5.44772 21 5 20.5523 5 20V9H10C10.5523 9 11 8.55228 11 8V3H18C18.5523 3 19 3.44772 19 4V9C19 9.55228 19.4477 10 20 10C20.5523 10 21 9.55228 21 9V4C21 2.34315 19.6569 1 18 1H10ZM9 7H6.41421L9 4.41421V7ZM14 15.5C14 14.1193 15.1193 13 16.5 13C17.8807 13 19 14.1193 19 15.5V16V17H20C21.1046 17 22 17.8954 22 19C22 20.1046 21.1046 21 20 21H13C11.8954 21 11 20.1046 11 19C11 17.8954 11 17 13 17H14V16V15.5ZM16.5 11C14.142 11 12.2076 12.8136 12.0156 15.122C10.2825 15.5606 9 17.1305 9 19C9 21.2091 10.7909 23 13 23H20C22.2091 23 24 21.2091 24 19C24 17.1305 22.7175 15.5606 20.9844 15.122C20.7924 12.8136 18.858 11 16.5 11Z" fill=""></path>
+                        </svg>
+                    </div>
+                    <div class="text">
+                        <span>Upload Images</span>
+                    </div>
+                    <input id="file" name="file" type="file" accept="image/*" multiple>
+                </label>
+            </form>
+            <div class="loader" id="loader" style="display: none;">
+                <svg width="150" height="150" viewBox="0 0 150 150" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <circle id="bounce" cx="75" cy="75" r="10" fill="#26A69A"/>
+                    <circle id="bounce2" cx="75" cy="75" r="10" fill="#26A69A"/>
+                    <g id="particles">
+                        <circle cx="75" cy="75" r="5" fill="#A0A8A9"/>
+                        <circle cx="65" cy="65" r="3" fill="#A0A8A9"/>
+                        <circle cx="85" cy="85" r="4" fill="#A0A8A9"/>
+                    </g>
+                    <defs>
+                        <radialGradient id="gradient" cx="0.5" cy="0.5" r="0.5">
+                            <stop offset="0%" style="stop-color: #26A69A;" id="animatedStop"/>
+                            <stop offset="100%" style="stop-color: #1C2526;"/>
+                        </radialGradient>
+                    </defs>
+                </svg>
+            </div>
+        </section>
+        {% if error %}
+            <p class="error">{{ error }}</p>
+        {% endif %}
+    </div>
+    <footer class="footer">
+        <p>© 2025 Garbage Detection</p>
+    </footer>
+    <script>
+        const fileInput = document.getElementById('file');
+        const form = document.getElementById('upload-form');
+        const loader = document.getElementById('loader');
+        fileInput.addEventListener('change', function() {
+            if (this.files && this.files.length > 0) {
+                loader.style.display = 'flex';
+                requestAnimationFrame(() => {
+                    setTimeout(() => {
+                        form.submit();
+                    }, 500);
+                });
+            }
+        });
+    </script>
+</body>
+</html>