Update app.py

app.py

@@ -1,242 +1,237 @@
 import json
 import gradio as gr
-from fastapi import FastAPI, HTTPException
-from pydantic import BaseModel
-from fastapi.responses import HTMLResponse
+import os
 
 # Store the lists data (in-memory database)
 lists = {}
 
-# Define a model for the incoming request data
-class DataRequest(BaseModel):
-    list_name: str
-    items: list
-
-# For Hugging Face Spaces, we need to define the Gradio app first
-with gr.Blocks() as demo:
-    # Create a simple interface to show the data
-    gr.Markdown("# UniShare Data Viewer")
-    output_text = gr.Textbox(label="Stored Data")
-    
-    def show_data():
-        return json.dumps(lists, indent=4)
-    
-    refresh_btn = gr.Button("Refresh Data")
-    refresh_btn.click(fn=show_data, inputs=[], outputs=[output_text])
-    
-    # Initialize with current data
-    demo.load(fn=show_data, inputs=[], outputs=[output_text])
-
-# Create FastAPI app
-app = FastAPI()
-
-# Endpoint for storing data
-@app.post("/store_data")
-async def store_data(data: DataRequest):
-    list_name = data.list_name
-    items = data.items
+# Define a simple Gradio app for UniShare
+def unishare_app():
+    # Main UI components
+    with gr.Blocks(css="""
+    .list-card {
+        background: white;
+        padding: 16px;
+        border-radius: 10px;
+        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+        margin-bottom: 16px;
+        cursor: pointer;
+    }
+    .list-card:hover {
+        transform: scale(1.02);
+        transition: transform 0.2s;
+    }
+    .item-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+        gap: 16px;
+    }
+    .item-card {
+        background: #f9f9f9;
+        padding: 16px;
+        border-radius: 10px;
+        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
+    }
+    .back-btn {
+        margin-bottom: 16px;
+    }
+    """) as demo:
+        gr.Markdown("# UniShare")
+        
+        # Overview page
+        with gr.Tab("Overview"):
+            overview_container = gr.HTML()
+            
+            def update_overview():
+                html = ""
+                if lists:
+                    for list_name, list_data in lists.items():
+                        html += f"""
+                        <div class="list-card" onclick="switchToList('{list_name}')">
+                            <h3>{list_name}</h3>
+                            <p>{len(list_data)} sections</p>
+                        </div>
+                        """
+                else:
+                    html = "<p>No lists found. Add some data first!</p>"
+                
+                # Add JavaScript to handle navigation
+                html += """
+                <script>
+                function switchToList(name) {
+                    // Using Gradio's built-in tab switching
+                    const tabs = document.querySelectorAll('.tabs > button');
+                    if (tabs.length > 1) {
+                        tabs[1].click();  // Click the "View List" tab
+                        // Set the list name in the dropdown
+                        const listSelect = document.getElementById('list-selector');
+                        for (let i = 0; i < listSelect.options.length; i++) {
+                            if (listSelect.options[i].value === name) {
+                                listSelect.selectedIndex = i;
+                                // Trigger change event
+                                const event = new Event('change');
+                                listSelect.dispatchEvent(event);
+                                break;
+                            }
+                        }
+                    }
+                }
+                </script>
+                """
+                return html
+
+            # Update overview on page load
+            demo.load(update_overview, [], [overview_container])
+        
+        # View list page
+        with gr.Tab("View List"):
+            gr.Markdown("## View List")
+            
+            # List selector dropdown
+            list_selector = gr.Dropdown(
+                label="Select a list",
+                choices=list(lists.keys()) if lists else [],
+                interactive=True,
+                elem_id="list-selector"
+            )
+            
+            # Container for list items
+            list_content = gr.HTML()
+            
+            # Back button (visual only, actual navigation handled by JS)
+            gr.Button("Back to Overview", elem_classes=["back-btn"]).click(
+                lambda: gr.Tabs(selected=0),  # This is a hack to trigger tab switching
+                [],
+                []
+            )
+            
+            # Function to display list items
+            def display_list(list_name):
+                if not list_name or list_name not in lists:
+                    return "<p>Please select a valid list</p>"
+                
+                sections = lists[list_name]
+                html = ""
+                
+                for section in sections:
+                    html += f"<div class='section-card'><h3>{section.get('sectionTitle', 'Untitled Section')}</h3>"
+                    html += "<div class='item-grid'>"
+                    
+                    for item in section.get('items', []):
+                        title = item.get('title', 'Untitled')
+                        link = item.get('link', '#')
+                        
+                        html += f"<div class='item-card'>"
+                        html += f"<strong>{title}</strong><br>"
+                        
+                        if link.lower().endswith(('.jpeg', '.jpg', '.gif', '.png')):
+                            html += f"<img src='{link}' alt='{title}' style='max-width:100%; max-height:150px; margin:10px 0;'><br>"
+                        
+                        html += f"<a href='{link}' download style='color:#3b82f6; text-decoration:none;'>Download</a>"
+                        html += "</div>"
+                    
+                    html += "</div></div>"
+                
+                return html
+            
+            # Update list content when selection changes
+            list_selector.change(
+                display_list,
+                [list_selector],
+                [list_content]
+            )
+        
+        # Admin page for data management
+        with gr.Tab("Admin"):
+            gr.Markdown("## Data Management")
+            
+            with gr.Row():
+                with gr.Column():
+                    gr.Markdown("### Add New List Data")
+                    list_name_input = gr.Textbox(label="List Name")
+                    json_data = gr.Textbox(
+                        label="Section Data (JSON format)",
+                        lines=10,
+                        placeholder='''
+{
+  "sectionTitle": "Sample Section",
+  "items": [
+    {
+      "title": "Sample Item",
+      "link": "https://example.com/sample.jpg"
+    }
+  ]
+}'''
+                    )
+                    
+                    add_button = gr.Button("Add Data")
+                    add_result = gr.Markdown()
+                    
+                    def add_data(list_name, data_json):
+                        if not list_name:
+                            return "Error: List name is required"
+                        
+                        try:
+                            data = json.loads(data_json)
+                            if list_name not in lists:
+                                lists[list_name] = []
+                            
+                            lists[list_name].append(data)
+                            
+                            # Update dropdown choices (will reflect on next page load)
+                            list_selector.choices = list(lists.keys())
+                            
+                            return f"Success: Data added to {list_name}"
+                        except json.JSONDecodeError:
+                            return "Error: Invalid JSON format"
+                        except Exception as e:
+                            return f"Error: {str(e)}"
+                    
+                    add_button.click(
+                        add_data,
+                        [list_name_input, json_data],
+                        [add_result]
+                    )
+                
+                with gr.Column():
+                    gr.Markdown("### View All Data")
+                    view_data_button = gr.Button("View All Data")
+                    data_output = gr.JSON()
+                    
+                    def get_all_data():
+                        return lists
+                    
+                    view_data_button.click(
+                        get_all_data,
+                        [],
+                        [data_output]
+                    )
+                    
+                    # Add button to clear all data
+                    clear_button = gr.Button("Clear All Data", variant="stop")
+                    clear_result = gr.Markdown()
+                    
+                    def clear_data():
+                        lists.clear()
+                        list_selector.choices = []
+                        return "All data cleared"
+                    
+                    clear_button.click(
+                        clear_data,
+                        [],
+                        [clear_result]
+                    )
     
-    if list_name not in lists:
-        lists[list_name] = []
+    # Update UI components when data changes
+    def refresh_ui():
+        list_selector.choices = list(lists.keys())
+        
+    # Set up event handlers to refresh UI
+    add_button.click(lambda: None, [], [], _js="() => {window.location.reload()}")
+    clear_button.click(lambda: None, [], [], _js="() => {window.location.reload()}")
     
-    lists[list_name].append(items)
-    return {"message": f"Data stored successfully for {list_name}"}
-
-# Endpoint to get data
-@app.get("/api/data")
-async def get_data():
-    return lists
-
-# HTML interface endpoint
-@app.get("/app", response_class=HTMLResponse)
-def read_root():
-    return """
-    <!DOCTYPE html>
-    <html lang="en">
-    <head>
-      <meta charset="UTF-8" />
-      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-      <title>UniShare</title>
-      <style>
-        body {
-          font-family: Arial, sans-serif;
-          margin: 0;
-          padding: 0;
-          background: #f0f2f5;
-        }
-        header {
-          background: #3b82f6;
-          color: white;
-          padding: 1em;
-          text-align: center;
-          font-size: 1.8em;
-        }
-        #overview {
-          display: grid;
-          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-          gap: 1em;
-          padding: 1em;
-        }
-        .list-tile {
-          background: white;
-          padding: 1em;
-          border-radius: 10px;
-          box-shadow: 0 2px 5px rgba(0,0,0,0.1);
-          cursor: pointer;
-          transition: transform 0.2s;
-        }
-        .list-tile:hover {
-          transform: scale(1.02);
-        }
-        #list-view {
-          display: none;
-          padding: 1em;
-        }
-        .back-button {
-          background: #3b82f6;
-          color: white;
-          padding: 0.5em 1em;
-          border: none;
-          border-radius: 5px;
-          cursor: pointer;
-          margin-bottom: 1em;
-        }
-        .card {
-          background: white;
-          padding: 1em;
-          border-radius: 10px;
-          box-shadow: 0 2px 5px rgba(0,0,0,0.1);
-          margin-bottom: 1em;
-        }
-        .submenu {
-          margin-top: 1em;
-        }
-        .submenu h4 {
-          margin: 0.5em 0;
-        }
-        .grid {
-          display: grid;
-          grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-          gap: 1em;
-        }
-        .item {
-          background: #f9f9f9;
-          padding: 1em;
-          border-radius: 10px;
-          box-shadow: 0 1px 3px rgba(0,0,0,0.05);
-        }
-        .item img {
-          max-width: 100%;
-          max-height: 150px;
-          object-fit: cover;
-          border-radius: 5px;
-          margin-bottom: 0.5em;
-        }
-        .item a {
-          display: inline-block;
-          margin-top: 0.5em;
-          text-decoration: none;
-          color: #3b82f6;
-        }
-        #toast {
-          position: fixed;
-          bottom: 20px;
-          right: 20px;
-          background: #333;
-          color: white;
-          padding: 1em;
-          border-radius: 5px;
-          display: none;
-          z-index: 1000;
-        }
-      </style>
-    </head>
-    <body>
-      <header>UniShare</header>
-      <div id="overview"></div>
-      <div id="list-view">
-        <button class="back-button" onclick="backToOverview()">← Back to Overview</button>
-        <div id="content"></div>
-      </div>
-      <div id="toast"></div>
-
-      <script>
-        const overviewDiv = document.getElementById('overview');
-        const contentDiv = document.getElementById('content');
-        const listViewDiv = document.getElementById('list-view');
-        const toastDiv = document.getElementById('toast');
-
-        const lists = {}
-
-        function showToast(message) {
-          toastDiv.textContent = message;
-          toastDiv.style.display = 'block';
-          setTimeout(() => {
-            toastDiv.style.display = 'none';
-          }, 3000);
-        }
-
-        function backToOverview() {
-          listViewDiv.style.display = 'none';
-          overviewDiv.style.display = 'grid';
-        }
-
-        function showList(name) {
-          const sections = lists[name];
-          contentDiv.innerHTML = '';
-
-          sections.forEach(section => {
-            const card = document.createElement('div');
-            card.className = 'card';
-            const title = document.createElement('h3');
-            title.textContent = section.sectionTitle;
-            card.appendChild(title);
-
-            const grid = document.createElement('div');
-            grid.className = 'grid';
-
-            section.items.forEach(item => {
-              const div = document.createElement('div');
-              div.className = 'item';
-              let content = `<strong>${item.title}</strong><br>`;
-              if (item.link.match(/\.(jpeg|jpg|gif|png)$/)) {
-                content += `<img src="${item.link}" alt="${item.title}" />`;
-              }
-              content += `<a href="${item.link}" download>Download</a>`;
-              div.innerHTML = content;
-              grid.appendChild(div);
-            });
-
-            card.appendChild(grid);
-            contentDiv.appendChild(card);
-          });
-
-          overviewDiv.style.display = 'none';
-          listViewDiv.style.display = 'block';
-        }
-
-        // Fetch data and populate the lists dynamically
-        fetch('/api/data')
-          .then(response => response.json())
-          .then(data => {
-            if (Object.keys(data).length > 0) {
-              Object.keys(data).forEach((listName, index) => {
-                const list = data[listName];
-                const tile = document.createElement('div');
-                tile.className = 'list-tile';
-                tile.innerHTML = `<strong>${listName}</strong><br>${list.length} sections`;
-                tile.onclick = () => showList(listName);
-                overviewDiv.appendChild(tile);
-                showToast(`Loaded ${listName}`);
-              });
-            } else {
-              overviewDiv.innerHTML = '<p>No lists found</p>';
-            }
-          });
-      </script>
-    </body>
-    </html>
-    """
+    return demo
 
-# This is crucial for Hugging Face Spaces
-app = gr.mount_gradio_app(app, demo, path="/")
+# Create and launch the app
+demo = unishare_app()
+demo.launch()