Update app.py

app.py

@@ -111,6 +111,30 @@ def remove_background(image):
 
     return mask_path, reverse_mask_path, foreground_path, background_path
 
+license_text = """
+MIT License
+
+Copyright (c) 2024 ZhengPeng
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+"""
+
 css = """
 body {
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@@ -118,35 +142,126 @@ body {
 .gradio-container {
     background: white;
 }
-.gradio-button {
-    font-family: inherit;
-    font-size: 16px;
-    font-weight: bold;
-    color: #000000;
+#component-0 {
+    max-width: 100% !important;
+}
+.remove-background {
+    font-family: inherit !important;
+    font-size: 16px !important;
+    font-weight: bold !important;
+    color: #000000 !important;
     background: linear-gradient(
         135deg,
         #e0f7fa, #e8f5e9, #fff9c4, #ffebee,
         #f3e5f5, #e1f5fe, #fff3e0, #e8eaf6
-    );
-    background-size: 400% 400%;
-    animation: gradient-animation 15s ease infinite;
-    border: 2px solid black;
-    border-radius: 10px;
+    ) !important;
+    background-size: 400% 400% !important;
+    animation: gradient-animation 15s ease infinite !important;
+    border: 2px solid black !important;
+    border-radius: 10px !important;
 }
-.gradio-button:hover {
+.remove-background:hover {
     background: linear-gradient(
         135deg,
         #b2ebf2, #c8e6c9, #fff176, #ffcdd2,
         #e1bee7, #b3e5fc, #ffe0b2, #c5cae9
-    );
-    background-size: 400% 400%;
-    animation: gradient-animation 15s ease infinite;
+    ) !important;
+    background-size: 400% 400% !important;
+    animation: gradient-animation 15s ease infinite !important;
 }
 @keyframes gradient-animation {
     0% { background-position: 0% 50%; }
     50% { background-position: 100% 50%; }
     100% { background-position: 0% 50%; }
 }
+footer {
+    text-align: center;
+    margin-top: 20px;
+}
+.license-link {
+    color: #007bff;
+    text-decoration: none;
+    cursor: pointer;
+}
+.license-link:hover {
+    text-decoration: underline;
+}
+.modal {
+    display: none;
+    position: fixed;
+    z-index: 1000;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgba(0,0,0,0.4);
+}
+.modal-content {
+    background-color: #fefefe;
+    margin: 15% auto;
+    padding: 20px;
+    border: 1px solid #888;
+    width: 80%;
+    max-width: 600px;
+}
+.close {
+    color: #aaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+}
+.close:hover,
+.close:focus {
+    color: black;
+    text-decoration: none;
+    cursor: pointer;
+}
+"""
+
+js = """
+function setupLicenseModal() {
+    var modal = document.createElement('div');
+    modal.className = 'modal';
+    modal.innerHTML = `
+        <div class="modal-content">
+            <span class="close">&times;</span>
+            <h2>License</h2>
+            <pre>${license_text}</pre>
+        </div>
+    `;
+    document.body.appendChild(modal);
+
+    var link = document.createElement('a');
+    link.href = '#';
+    link.className = 'license-link';
+    link.textContent = 'License';
+    link.onclick = function(e) {
+        e.preventDefault();
+        modal.style.display = 'block';
+    };
+
+    var footer = document.createElement('footer');
+    footer.appendChild(link);
+    document.body.appendChild(footer);
+
+    var span = modal.querySelector('.close');
+    span.onclick = function() {
+        modal.style.display = 'none';
+    };
+
+    window.onclick = function(event) {
+        if (event.target == modal) {
+            modal.style.display = 'none';
+        }
+    };
+}
+
+if (window.gradio_config.version.startsWith('3')) {
+    setupLicenseModal();
+} else {
+    document.addEventListener('DOMContentLoaded', setupLicenseModal);
+}
 """
 
 iface = gr.Interface(
@@ -159,7 +274,9 @@ iface = gr.Interface(
         gr.Image(type="filepath", label="Background")
     ],
     allow_flagging="never",
-    css=css
+    css=css,
+    js=js,
+    elem_classes={"submit": "remove-background"}
 )
 
 if __name__ == "__main__":