Upload 2 files

app.py

@@ -0,0 +1,232 @@
+import gradio as gr
+import numpy as np
+import requests
+import os
+# Import CSS and URL File
+css_file_path = os.path.join(os.path.dirname(__file__), "ui.css")
+with open(css_file_path,"r") as f:
+    custom_css = f.read()
+# HTML Design
+html_welcome_page = """
+<div class="container">
+    <div class="inner-container">
+        <h1 class="title-text">Welcome to RemoveWeed Weed Detection System</h1>
+        <img src="https://i.ibb.co/fY1nk315/image-2.png" alt="RemoveWeed Logo" class="logo-container"/>
+        <p class="description-text">
+            Project Aim: This system is designed to optimize rice planting schedules with broad-leaved weed detection using machine learning.
+        </p>
+        <p class="description-text">
+            Designed by: Whitney Lim Wan Yee (TP068221)
+        </p>
+    </div>
+</div>
+"""
+html_system_page ="""
+<div class="container">
+    <img src="https://i.ibb.co/KxMMTmxG/Screenshot-2025-03-28-224907.png" alt="RemoveWeed Logo" class="logo-container-system"/>
+    <h1 class="system-page-title">RemoveWeed System Overview</h1>
+    <p class="system-page-description">
+        This system is designed to help farmers detect broad-leaved weeds in rice fields using machine learning techniques. 
+        The aim is to optimize rice planting schedules and improve crop yield.
+    </p>
+</div>
+"""
+html_project_description = """
+<div class="project-container">
+    <h1 class="project-title">- 🌿 About Project 🌿 -</h1>
+    
+    <div class="upper-content">
+        <div class="left-upper-column">
+            <div class="chart">
+                <img src="https://i.ibb.co/j9Ch3xnC/1312103.png" alt="Agricultural consumption of herbicides worldwide from 1990 to 2022" class="chart-image">
+                <p class="chart-caption">Resource: Statista (2024) - Agricultural consumption of herbicides worldwide from 1990 to 2022 (in 1,000 metric tons)</p>
+            </div>
+        </div>
+        <div class="right-upper-column">
+            <div class="herbicide-description">
+                <h2 class="herbicide-title">Herbicide Use Soars: A Shocking Yearly Increase!</h2>
+                <p class="herbicide-text">
+                    Statista (2024) revealed that global herbicide consumption has reached <span class="bold-red">1.94 million</span> metric tons. To control dock weed in farming fields, the application of herbicides can cause <span class="bold-red">delays</span> in rice planting schedules ranging from <span class="bold-red">7 to 30 days</span>.
+                </p>
+            </div>
+        </div>
+    </div>
+    
+    <div class="middle-content">
+        <div class="left-middle-column">
+            <div class="objective-description">
+                <h2 class="objective-title">Why Choose RemoveWeed?</h2>
+                <p class="objective-text">
+                    RemoveWeed is a system designed to detect broad-leaved dock weed in paddy fields. It uses object detection like <span class="bold-red">Single Shot Detection (SSD)</span> model, along with instance segmentation models like <span class="bold-red">U-Net</span> and <span class="bold-red">Fully Convolutional Neural Network (FCNN</span>, to predict the presence of dock weed.
+                </p>
+            </div>
+        </div>
+        <div class="right-middle-column">
+            <div class="carousel-wrapper">
+                <div class="carousel-container">
+                    <p class="carousel-title">Broad-leaved Dock Weed in Paddy Field</p>
+                    <div class="carousel">
+                        <div class="image-one"></div>
+                        <div class="image-two"></div>
+                        <div class="image-three"></div>
+                    </div>
+                </div>
+            </div>      
+        </div>
+    </div>
+    
+    <div class="bottom-content">
+    <div class="left-bottom-column">
+        <div class="Proceed-To-Detection">
+            <img src="https://i.ibb.co/Txb9LFf5/agriculture-tan.jpg" alt="Model Training" class="model-image">
+        </div>
+    </div>
+    <div class="right-bottom-column">
+         <div class="benefits-description">
+            <h2 class="benefits-title">Potential Benefits</h2>
+            <ul class="benefits-list">
+                <li>Cost Savings 💰</li>
+                <li>Reduce Labor and Manual Monitoring Cost 💹</li>
+                <li>Increase Profitability by Rice Planting Scheduling Advice 📈</li>
+                <li>Provide Sustainable Practices in Agriculture 🧑‍🌾</li>
+                <li>Reduce Herbicide Pollution ☢️</li>
+            </ul>
+        </div>
+    </div>
+</div>
+</div>
+"""
+html_author_review_page = """
+<div class="author-section">
+    <h1 class="author-title">- Project Owner Introduction -</h1>
+    
+    <div class="author-content">
+        <div class="author-image-container">
+            <img src="https://i.ibb.co/4RZW1Pq4/Wanyu.jpg" alt="Whitney Lim Wan Yee" class="author-image">
+        </div>
+        
+        <div class="author-bio">
+            <p class="author-text">
+                Whitney Lim Wan Yee is a student at Asia Pacific University (APU), pursuing Year 3 Computer Science specialization in Data Analytics. She is passionate about machine learning and its applications in agriculture.
+            </p>
+            
+            <div class="social-links">
+                <a href="https://www.linkedin.com/in/whitneylimwanyee/" target="_blank" class="social-link">
+                    <img src="https://images.rawpixel.com/image_png_800/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvbHIvdjk4Mi1kMy0xMC5wbmc.png" alt="LinkedIn" class="social-icon">
+                    <span>LinkedIn Profile</span>
+                </a>
+                
+                <a href="https://www.kaggle.com/whitneylimwanyee" target="_blank" class="social-link">
+                    <img src="https://cdn4.iconfinder.com/data/icons/logos-and-brands/512/189_Kaggle_logo_logos-512.png" alt="Kaggle" class="social-icon">
+                    <span>Kaggle Profile</span>
+                </a>
+                
+                <button onclick="window.location.href='mailto:whitneylim0719@gmail.com'" class="social-link">
+                    <img src="https://static.vecteezy.com/system/resources/previews/016/716/465/non_2x/gmail-icon-free-png.png" alt="Email" class="social-icon">
+                    <span>Email Me</span>
+                </button>
+                <a href="https://drive.google.com/file/d/1SvbvzLpFQJjzX6_VPGS3NddzK0ksXE8r/view" target="_blank" class="social-link">
+                    <img src="https://cdn-icons-png.flaticon.com/512/8347/8347432.png" alt="Kaggle" class="social-icon">
+                    <span>My Resume</span>
+                </a>
+            </div>
+        </div>
+    </div>
+</div>
+"""
+
+
+js_func = """
+function refresh() {
+    const url = new URL(window.location);
+
+    if (url.searchParams.get('__theme') !== 'light') {
+        url.searchParams.set('__theme', 'light');
+        window.location.href = url.href;
+    }
+}
+"""
+
+with gr.Blocks(css=custom_css,js=js_func) as demo:
+    # State to track current page
+    page = gr.State(value="welcome")
+    
+    # Welcome page container
+    with gr.Group(visible=True, elem_classes="gradio-container") as welcome_page:
+         gr.HTML(html_welcome_page)  # Insert HTML structure
+         start_trial_button = gr.Button("Start Trial", variant="primary", elem_classes="trial-button")
+    
+    # System description page container (initially hidden)
+    with gr.Group(visible=False) as system_page:
+        gr.HTML(html_system_page)
+        tabs = gr.Tabs()
+        with tabs:
+            with gr.TabItem("Project Description"):
+                tab_state = gr.State(value=0)
+                gr.HTML(html_project_description) 
+            with gr.TabItem("Model Playground"):
+                gr.Markdown("""
+                ### Model Playground:
+                This section allows users to interact with the model and test its capabilities.
+                """)
+                radio = gr.Radio(choices=["Model 1", "Model 2","Model 3","Model 4","Model 5"], label="Select Model", elem_classes="model-selection")
+                img_input = gr.Image(type="numpy", label="Upload Image", elem_classes="image-input")
+                upload_image_button = gr.Button("Upload Image", variant="primary", elem_classes="upload-button")
+                img_output = gr.Image(label="Predicted Image", elem_classes="image-output")
+            with gr.TabItem("Open Source API Link"):
+                gr.Markdown("""
+                ### Open Source API Link:
+                This section provides access to the open-source API for the weed detection model.
+                """)
+                gr.Markdown("### API Documentation:")
+            with gr.TabItem("Contact and Review"):
+                gr.HTML(html_author_review_page)
+        back_button = gr.Button("Back", variant="secondary",elem_classes="back-button")
+
+
+    # Navigation functions
+    def go_to_system_page():
+        print("Going to system page")
+        return gr.update(visible=False), gr.update(visible=True)
+
+    def go_to_welcome_page():
+        print("Going to welcome page")
+        return gr.update(visible=True), gr.update(visible=False)
+   
+    def process_image(input_img):
+        # Convert image to float for processing
+        input_img = input_img.astype(np.float32)
+        # Normalize image
+        input_img /= 255.0
+        print(input_img.shape)
+        return input_img
+    def choose_model(choice):
+        if choice == "Model 1":
+            return "You have selected Model 1"
+        elif choice == "Model 2":
+            return "You have selected Model 2"
+        else:
+            return "Invalid selection"
+    
+
+    # Connect buttons to navigation functions
+    start_trial_button.click(
+        fn=go_to_system_page,
+        inputs=None,  # Pass the current page state
+        outputs=[welcome_page, system_page]
+    )
+    
+    back_button.click(
+        fn=go_to_welcome_page,
+        inputs=None,  # Pass the current page state
+        outputs=[welcome_page, system_page]
+    )
+    upload_image_button.click(
+        fn=process_image,
+        inputs=img_input,
+        outputs=img_output
+    )
+    
+    
+
+demo.launch(share=True)

ui.css

@@ -0,0 +1,516 @@
+/* Gradio container - Solid background color */
+@import url('https://fonts.googleapis.com/css2?family=Jacques+Francois&display=swap');
+.gradio-container {
+    background-image: url('https://i.ibb.co/KxBn0Yt5/Bottom-Grass-Image.png') !important;
+    background-size: cover !important;
+    background-position: center!important;
+    background-repeat: no-repeat !important;
+    padding: 60px !important;
+    align-items: center;
+    text-align: center !important;
+    
+}
+.gradio-container, .gr-block, .gr-panel, .gr-box {
+    border: none !important;
+    box-shadow: none !important; /* Remove any shadow effect */
+    color:#000 !important; /* Ensure text is visible */ 
+}
+
+/* Ensure inside container has a solid dark background */
+.inner-container {
+    background-color: #0B0F19;
+    padding: 10px;
+    border-radius: 15px;
+    border: 5px solid rgb(20, 18, 18); 
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+    max-width: 800px;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+
+/* Title and description - ensure visibility */
+.title-text{
+    background-color: transparent !important;
+    color: #fff !important;
+    text-align: center !important;
+}
+.h1, h1 {
+    font-size: 40px !important;
+    font-family:'Jacques Francois', serif;
+    margin: 10px 0 !important;
+}
+.description-text{
+    font-size: 20px !important;
+    font-family:'Jacques Francois', serif;
+    margin: 10px 0 !important;
+    background-color: transparent !important;
+    color: #fff !important;
+    text-align: center !important;
+}
+.jacques-francois-regular {
+    font-family: "Jacques Francois", serif;
+    font-weight: 400;
+    font-style: normal;
+  }
+
+
+/* Logo styling */
+.logo-container {
+    background-color: #0B0F19 !important; /* Background color for the logo container */
+    margin: 10px 0 !important;
+    padding: 30px !important;  /* Adjust padding if necessary */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height:120px !important; 
+    width: 400px !important;
+}
+
+/* Optional: Add some padding around the logo image */
+.logo-container img {
+    object-fit: contain !important;  /* Ensure image scales properly */
+    max-height: 100% !important;  /* Make sure the image fits the container */
+}
+.logo-container-system {
+    background-color: #E4E4E7 !important; /* Background color for the logo container */
+    margin: 10px 10px !important;  
+    text-align: left !important;  
+    height: 80px !important;  
+    width: 200px !important;
+}
+
+/* Optional: Add some padding around the logo image */
+.logo-container-system img {
+    display: inline-block;
+    vertical-align: middle;
+}
+
+/* Button styling */
+.trial-button {
+    background-color: #E67E22 !important;
+    color: white !important;
+    border: none !important;
+    border-radius: 15px !important;
+    padding: 10px 30px !important;
+    font-size: 16px !important;
+    /* Make it center so margin has to be auto*/
+    margin: 20px auto !important;
+    cursor: pointer !important;
+    max-width: 200px !important;  /* Limit the button width */
+    text-align: center !important;
+    display: flex !important;
+    justify-content: center !important;
+}
+
+
+
+.back-button {
+    margin-top: 20px !important;
+    margin: 20px auto !important;
+    padding: 10px 30px !important;
+    font-size: 16px !important;
+    border-radius: 15px !important;
+    background-color: #E67E22  !important;
+    color: white !important;
+    border: none !important;
+    cursor: pointer !important;
+    max-width: 200px !important;
+}
+.system-page-description{
+    font-size: 20px !important;
+    color: #000000 !important;
+    text-align: center !important;
+    margin: 40px 40px!important;
+    /* padding: 40px 40px!important; */
+    background-color: transparent !important;
+}
+
+
+
+
+.project-container {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 20px;
+}
+
+.project-container .project-title {
+    text-align: center;
+    font-size: 30px !important;
+    margin: 0 auto;
+}
+
+.upper-content {
+    display: flex;
+    flex-direction: row;
+    gap: 30px;
+    padding-top: 20px;
+}
+
+.left-upper-column {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+.right-upper-column {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.chart {
+    font-family: 'Jacques Francois', serif;
+    width: 100%;
+    background-color: white;
+    border-radius: 10px;
+    padding: 10px;
+}
+
+.chart-image {
+    width: 100%;
+    height: auto;
+}
+
+.chart-caption {
+    text-align: center;
+    font-size: 12px;
+    margin-top: 10px;
+    color: #333;
+}
+
+.herbicide-description {
+    padding: 20px 0;
+    font-size: 20px;
+    text-align: justify;
+}
+
+.herbicide-title {
+    margin-top: -40px;
+    margin-bottom: 20px;
+    font-size: 50px;
+    text-align: center;
+}
+span.bold-red{
+    font-family: 'Jacques Francois', serif;
+    font-size: 20px;
+    color:red;
+    font-weight: bold;
+}
+
+
+.middle-content {
+    display: flex;
+    flex-direction: row;
+    gap: 30px;
+    padding-top: 20px;
+}
+
+.left-middle-column {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+
+}
+
+.right-middle-column {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.objective-description {
+    padding: 20px;
+
+}
+
+.objective-title {
+    font-size: clamp(30px, 5vw, 50px); /* Responsive font size */
+    white-space: nowrap;
+    margin-bottom: 20px;
+    text-align: left;
+}
+
+.objective-text {
+    font-size: 20px;
+    line-height: 1.6;
+    text-align: justify;
+    color: #333;
+}
+
+:root {
+    --size-width: 400px;
+    --size-height: 250px;
+  }
+  
+  .carousel-wrapper {
+    width: calc(var(--size-width) * 1.3);
+    height: calc(var(--size-height) * 1.4);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    box-shadow: 5px 5px 25px 0px rgba(46, 61, 73, 0.2);
+    border-radius: 15px;
+  }
+  
+  .carousel-container {
+    width: var(--size-width);
+    height: var(--size-height);
+    overflow: hidden;
+    margin: 0 auto;
+    font-size: 16px;
+    font-weight:bold;
+    font-family: 'Jacques Francois', serif;
+  }
+  
+  .carousel {
+    display: flex;
+    width: calc(var(--size-width) * 3);
+    animation: sliding 6s infinite;
+  }
+  
+  
+  .carousel div {
+    width: var(--size-width);
+    height: var(--size-height);
+    background-size: cover;
+    background-position: center;
+  }
+  
+  .carousel:hover {
+    animation-play-state: paused;
+  }
+  
+  .image-one {
+    background-image: url("https://i.ibb.co/0jpWh4CD/Dock-Weed-1.jpg");
+  }
+  
+  .image-two {
+    background-image: url("https://i.ibb.co/1f7zdPMk/Dock-Weed-2.jpg");
+  }
+  
+  .image-three {
+    background-image: url("https://i.ibb.co/4Z1YffPd/Dock-Weed-3.jpg");
+  }
+  
+  @keyframes sliding {
+    30% {
+      transform: translateX(0);
+    }
+    35% {
+      transform: translateX(calc(var(--size-width) * -1));
+    }
+    65% {
+      transform: translateX(calc(var(--size-width) * -1));
+    }
+    70% {
+      transform: translateX(calc(var(--size-width) * -2));
+    }
+    98% {
+      transform: translateX(calc(var(--size-width) * -2));
+    }
+    100% {
+      transform: translateX(0);
+    }
+  }
+  
+  @media screen and (max-width: 768px) {
+    :root {
+      --size-width: 240px;
+      --size-height: 150px;
+    }
+  }
+  .bottom-content {
+    display: flex;
+    flex-direction: row;
+    gap: 30px;
+    padding: 20px 0;
+    background-image: url('path-to-your-green-background.jpg');
+    background-size: cover;
+    background-position: center;
+    color: white;
+    border-radius: 10px;
+    margin-top: 10px;
+}
+
+.left-bottom-column {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    padding: 20px;
+}
+
+.right-bottom-column {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 20px;
+}
+
+.benefits-description {
+    width: 600px;
+    height: 300px;
+    text-align: left;
+    background-color: white;
+    border: 10px;
+    border-radius: 20px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+
+
+}
+
+.benefits-title {
+    font-size: clamp(30px, 5vw, 50px);
+    text-align: center;
+    margin-bottom: 20px;
+    font-weight: bold;
+}
+
+.benefits-text {
+    font-size: 18px;
+    line-height: 1.8;
+    text-align: left;
+    padding-left: 20px;
+}
+
+.benefits-text br {
+    margin-bottom: 10px;
+}
+
+.model-image {
+    margin: 20px auto;
+    width: 100%;
+    height: auto;
+    max-width: 400px; /* Limit the image width */
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+    background-color: #fff;
+}
+
+
+/* For bullet points, you can use this instead of <br> */
+.benefits-list {
+    list-style-type: disc;
+    padding-left: 40px;
+}
+
+.benefits-list li {
+    margin-bottom: 10px;
+    font-size: 18px;
+    font-weight: bold;
+}
+.author-section {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 30px 20px;
+    font-family: 'Jacques Francois', serif;
+}
+
+.author-title {
+    text-align: center;
+    font-size: 40px;
+    margin-bottom: 40px;
+}
+
+.author-content {
+    display: flex;
+    flex-direction: row;
+    gap: 40px;
+    align-items: center;
+}
+
+.author-image-container {
+    flex: 0 0 200px;
+}
+
+.author-image {
+    width: 100%;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+.author-bio {
+    flex: 1;
+}
+
+.author-text {
+    font-size: 18px;
+    line-height: 1.6;
+    margin-bottom: 30px;
+    text-align: justify;
+}
+
+.social-links {
+    display: flex;
+    gap: 20px;
+    margin-top: 20px;
+}
+
+.social-link {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    text-decoration: none;
+    color: #2a6a39;
+    font-weight: bold;
+    padding: 10px 15px;
+    border-radius: 5px;
+    background-color: #f5f5f5;
+    transition: all 0.3s ease;
+}
+
+.social-link:hover {
+    background-color: #e0e0e0;
+    transform: translateY(-2px);
+}
+
+.social-icon {
+    width: 24px;
+    height: 24px;
+}
+
+
+
+
+
+
+@media (max-width: 1200px) {
+    .upper-content {
+        flex-direction: column;
+    }
+    .middle-content {
+        flex-direction: column; /* This would stack elements on small screens */
+    }
+    .bottom-content {
+        flex-direction: column;
+    }
+    .author-content {
+        flex-direction: column;
+        text-align: center;
+    }
+    
+    .author-image-container {
+        max-width: 150px;
+        margin: 0 auto;
+    }
+    
+    .social-links {
+        flex-direction: column;
+        align-items: center;
+    }
+    
+    .social-link {
+        width: 80%;
+        justify-content: center;
+    }
+}