Update app.py

app.py

@@ -36,85 +36,58 @@ def read_qr(img):
     # Initialize OpenCV QR code detector
     detector = cv2.QRCodeDetector()
     data, _, _ = detector.detectAndDecode(img)
-    
     return data if data else "No QR code found."
 
-# Custom CSS styling as HTML for dark mode
-custom_css = """
-<style>
-    body {background-color: #1e1e2f; font-family: 'Arial', sans-serif; color: #e0e0e0;}
-    .gradio-container {max-width: 700px; margin: auto; padding: 25px; background-color: #2c2c3e; 
-                       border-radius: 15px; box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);}
-    h1, h2 {text-align: center; color: #ffffff; font-weight: bold; margin-bottom: 15px;}
-    .gr-button {background-color: #4a4a6a; color: #ffffff; padding: 10px 25px; border-radius: 8px; 
-                font-size: 16px; border: none; transition: 0.3s;}
-    .gr-button:hover {background-color: #6a6a8a; transform: scale(1.05);}
-    input, textarea, .gr-box {background-color: #3a3a4f; border: 1px solid #555; border-radius: 10px; 
-                              padding: 10px; font-size: 14px; color: #e0e0e0;}
-    .gr-box:hover, input:hover, textarea:hover {border-color: #777;}
-    .tab {margin-top: 20px;}
-</style>
-"""
-
-# Add download and copy-to-clipboard functionality
+# Gradio interface with functional buttons
 def create_gradio_interface():
-    # QR Code Generator Interface
+    # QR Code Generator with Downloadable File
     def generate_qr_with_download(data):
-        qr_file = generate_qr(data)
-        return qr_file, f"Download your QR code: [Download QR Code]({qr_file})"
+        qr_file = generate_qr(data)  # Generate QR code file
+        return qr_file  # Return file directly as downloadable output
+
+    # QR Code Reader with Copy-to-Clipboard functionality
+    def read_qr_with_copy(img):
+        decoded_data = read_qr(img)  # Decode QR code
+        return decoded_data, decoded_data  # Return decoded text for display and copy
 
+    # Generator Interface
     generate_interface = gr.Interface(
         fn=generate_qr_with_download,
         inputs=gr.Textbox(placeholder="Enter text or URL here...", label="Data to Encode"),
-        outputs=[
-            gr.Image(label="Generated QR Code"), 
-            gr.HTML(label="Download")
-        ],
+        outputs=gr.File(label="Download Generated QR Code"),  # File download
         title="Generate QR Code",
         description="Quickly create a QR code from any text or URL.",
-        theme="compact",
     )
 
-    # QR Code Reader Interface
-    def read_qr_with_copy(img):
-        decoded_data = read_qr(img)
-        clipboard_script = f"""
-            <script>
-                function copyToClipboard(text) {{
-                    navigator.clipboard.writeText(text).then(function() {{
-                        alert("Copied to clipboard: " + text);
-                    }}, function(err) {{
-                        alert("Failed to copy: ", err);
-                    }});
-                }}
-            </script>
-            <button onclick="copyToClipboard('{decoded_data}')">Copy to Clipboard</button>
-        """
-        return decoded_data, clipboard_script
-
+    # Reader Interface
     read_interface = gr.Interface(
         fn=read_qr_with_copy,
         inputs=gr.Image(type="pil", label="Upload QR Code Image"),
         outputs=[
-            gr.Textbox(label="Decoded Data"), 
-            gr.HTML(label="Copy to Clipboard")
+            gr.Textbox(label="Decoded Data"),  # Decoded QR code text
+            gr.Textbox(visible=False),  # Invisible output for clipboard content
         ],
         title="Read QR Code",
         description="Upload an image with a QR code to decode the embedded data.",
-        theme="compact",
+        live=False,
     )
 
-    # Combine interfaces into a single tabbed layout
-    interface = gr.TabbedInterface(
-        [generate_interface, read_interface],
-        ["Generate QR Code", "Read QR Code"]
-    )
+    # Add clipboard copy functionality using Gradio button callbacks
+    def on_copy(decoded_text):
+        return gr.Textbox.update(value=decoded_text)  # Update clipboard content
 
-    # Launch interface with custom HTML for CSS styling
+    # Custom UI with clipboard copy button
     with gr.Blocks() as demo:
-        gr.HTML(custom_css)  # Embed the custom CSS
-        gr.Markdown("# QR Code Tool\nEasily generate and decode QR codes.")
-        interface.render()
+        gr.Markdown("## QR Code Tool: Generate and Decode with Ease")
+        with gr.Tab("Generate QR Code"):
+            generate_interface.render()
+        with gr.Tab("Read QR Code"):
+            with gr.Row():
+                qr_text = gr.Textbox(label="Decoded Data")
+                qr_clipboard = gr.Textbox(visible=False)  # Clipboard value
+            copy_button = gr.Button("Copy to Clipboard")
+            read_interface.render()
+            copy_button.click(on_copy, qr_text, qr_clipboard)
 
     demo.launch(share=True)