Update app2.py

app2.py

@@ -496,6 +496,164 @@ def generate_qr_codes(data: Union[str, Dict, List], combined: bool = True) -> Li
         logger.error(f"QR code generation error: {e}")
         return []
 
+def create_modern_interface():
+    """Create a modern and visually appealing Gradio interface"""
+
+    # Modern CSS styling
+    css = """
+    /* Modern color scheme */
+    :root {
+        --primary-color: #1a365d;
+        --secondary-color: #2d3748;
+        --accent-color: #4299e1;
+        --background-color: #f7fafc;
+        --success-color: #48bb78;
+        --error-color: #f56565;
+        --warning-color: #ed8936;
+    }
+    /* Container styling */
+    .container {
+        max-width: 1200px;
+        margin: auto;
+        padding: 2rem;
+        background-color: var(--background-color);
+        border-radius: 1rem;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    }
+    /* Component styling */
+    .input-container {
+        background-color: white;
+        padding: 1.5rem;
+        border-radius: 0.5rem;
+        border: 1px solid #e2e8f0;
+        margin-bottom: 1rem;
+    }
+    /* Button styling */
+    .primary-button {
+        background-color: var(--primary-color);
+        color: white;
+        padding: 0.75rem 1.5rem;
+        border-radius: 0.375rem;
+        border: none;
+        cursor: pointer;
+        transition: all 0.2s;
+    }
+    .primary-button:hover {
+        background-color: var(--accent-color);
+        transform: translateY(-1px);
+    }
+    /* Status messages */
+    .status {
+        padding: 1rem;
+        border-radius: 0.375rem;
+        margin: 1rem 0;
+    }
+    .status.success { background-color: #f0fff4; color: var(--success-color); }
+    .status.error { background-color: #fff5f5; color: var(--error-color); }
+    .status.warning { background-color: #fffaf0; color: var(--warning-color); }
+    /* Gallery styling */
+    .gallery {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+        gap: 1rem;
+        padding: 1rem;
+        background-color: white;
+        border-radius: 0.5rem;
+        border: 1px solid #e2e8f0;
+    }
+    .gallery img {
+        width: 100%;
+        height: auto;
+        border-radius: 0.375rem;
+        transition: transform 0.2s;
+    }
+    .gallery img:hover {
+        transform: scale(1.05);
+    }
+    /* QR Code Viewport Styling */
+    .viewport-container {
+        display: grid;
+        gap: 0.5rem;
+        padding: 1rem;
+        background-color: white;
+        border-radius: 0.5rem;
+        border: 1px solid #e2e8f0;
+        margin-top: 1rem;
+    }
+    .viewport-item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+    .viewport-item img {
+        width: 100%;
+        height: auto;
+        border-radius: 0.375rem;
+        transition: transform 0.2s;
+        max-width: 150px; /* Adjust as needed */
+        max-height: 150px; /* Adjust as needed */
+    }
+    """
+    # Create interface with modern design
+        with gr.Blocks(css=css, title="Advanced Data Processor & QR Generator") as interface:
+        interface.head += """
+        <script>
+        let enabledStates = [];
+
+        function updateEnabledStates(checkbox) {
+            const index = parseInt(checkbox.dataset.index);
+            if (checkbox.checked) {
+                if (!enabledStates.includes(index)) {
+                    enabledStates.push(index);
+                }
+            } else {
+                enabledStates = enabledStates.filter(item => item !== index);
+            }
+            // Send the updated state back to Gradio (you might need to adjust the target component)
+            const enabled_qr_codes_component = document.querySelector('[data-component-type="state"][data-state-name="enabled_qr_codes"]');
+            if (enabled_qr_codes_component) {
+                enabled_qr_codes_component.value = JSON.stringify(enabledStates);
+                enabled_qr_codes_component.dispatchEvent(new Event('input')); // Trigger update
+            }
+            console.log("Enabled QR Code Indices:", enabledStates);
+            // You might want to trigger an update of the viewport here if needed
+        }
+        </script>
+        """
+        qr_code_paths = gr.State([])
+        # ... (rest of the Gradio interface definition) ...
+        with gr.Tab("🖼️ QR Code Viewport") as viewport_tab:
+            viewport_output = gr.HTML(label="QR Code Sequence Viewport")
+            enabled_qr_codes = gr.State([]) # To store the enabled/disabled state
+        # ... (rest of the function) ...
+        viewport_tab.select(update_viewport, inputs=[qr_code_paths, enabled_qr_codes], outputs=[viewport_output])
+        # ... (rest of the function) ...
+Important Considerations and Next Steps:
+
+State Management: The JavaScript code updates a global variable enabledStates. While this works for a basic example, for more complex applications, you might want to manage the state more robustly within Gradio.
+Viewport Update: Currently, the viewport is updated only when you switch to the "QR Code Viewport" tab. If you want the viewport to update immediately after enabling/disabling a QR code, you'll need to trigger the update_viewport function from the JavaScript code. This typically involves using Gradio's Remote Functions or a submit button.
+Visualization of Result: The current implementation visualizes the enabled state with a green border. You might have a different idea for how the "result" of enabling/disabling should be visualized.
+Scalability: For a very large number of QR codes, rendering all of them in HTML might become inefficient. You might need to consider techniques like pagination or virtualization.
+With these changes, the application will now have a basic QR Code Viewport with enable/disable functionality. You can further refine the UI and the interaction based on your specific needs.
+
+
+
+
+
+
+its not letting me add my expected filetypes?
+
+
+
+Show thinking
+You are right to point that out. My apologies for the continued oversight. While the intent with file_types=["*"] was to be open, Gradio's gr.File component might interpret that differently or it might not be the intended way to accept all types.
+
+According to the Gradio documentation, to accept all file types, you should set the file_types parameter to None.
+
+Let's make that change in the create_modern_interface function. Here's the updated section:
+
+Python
+
 def create_modern_interface():
     """Create a modern and visually appealing Gradio interface"""
 
@@ -596,6 +754,30 @@ def create_modern_interface():
     """
     # Create interface with modern design
     with gr.Blocks(css=css, title="Advanced Data Processor & QR Generator") as interface:
+        interface.head += """
+        <script>
+        let enabledStates = [];
+
+        function updateEnabledStates(checkbox) {
+            const index = parseInt(checkbox.dataset.index);
+            if (checkbox.checked) {
+                if (!enabledStates.includes(index)) {
+                    enabledStates.push(index);
+                }
+            } else {
+                enabledStates = enabledStates.filter(item => item !== index);
+            }
+            // Send the updated state back to Gradio (you might need to adjust the target component)
+            const enabled_qr_codes_component = document.querySelector('[data-component-type="state"][data-state-name="enabled_qr_codes"]');
+            if (enabled_qr_codes_component) {
+                enabled_qr_codes_component.value = JSON.stringify(enabledStates);
+                enabled_qr_codes_component.dispatchEvent(new Event('input')); // Trigger update
+            }
+            console.log("Enabled QR Code Indices:", enabledStates);
+            // You might want to trigger an update of the viewport here if needed
+        }
+        </script>
+        """
         qr_code_paths = gr.State([])
         gr.Markdown("""
         # 🌐 Advanced Data Processing & QR Code Generator
@@ -612,7 +794,7 @@ def create_modern_interface():
         with gr.Tab("📁 File Input"):
             file_input = gr.File(
                 label="Upload Files",
-                file_types=["*"],  # Accept all file types
+                file_types=None,  # Accept all file types
                 file_count="multiple"
             )
         with gr.Tab("📋 JSON Input"):