Create app.py

app.py

@@ -0,0 +1,251 @@
+import streamlit as st
+from azure.cosmos import CosmosClient, PartitionKey
+import os
+import pandas as pd
+from streamlit.components.v1 import html
+
+# Cosmos DB configuration
+ENDPOINT = "https://acae-afd.documents.azure.com:443/"
+SUBSCRIPTION_ID = "003fba60-5b3f-48f4-ab36-3ed11bc40816"
+DATABASE_NAME = os.environ.get("COSMOS_DATABASE_NAME")
+CONTAINER_NAME = os.environ.get("COSMOS_CONTAINER_NAME")
+Key = os.environ.get("Key")
+
+def insert_record(record):
+    try:
+        response = container.create_item(body=record)
+        return True, response
+    except Exception as e:
+        return False, str(e)
+
+def call_stored_procedure(record):
+    try:
+        response = container.scripts.execute_stored_procedure(
+            sproc="processPrompt",
+            params=[record],
+            partition_key=record['id']
+        )
+        return True, response
+    except Exception as e:
+        error_message = f"Error type: {type(e).__name__}\nError message: {str(e)}"
+        if hasattr(e, 'sub_status'):
+            error_message += f"\nSub-status: {e.sub_status}"
+        if hasattr(e, 'response'):
+            error_message += f"\nResponse: {e.response}"
+        return False, error_message
+
+def fetch_all_records():
+    query = "SELECT * FROM c"
+    items = list(container.query_items(query=query, enable_cross_partition_query=True))
+    return pd.DataFrame(items)
+
+def delete_records(ids):
+    try:
+        for id in ids:
+            container.delete_item(item=id, partition_key=id)
+        return True, f"Successfully deleted {len(ids)} records"
+    except Exception as e:
+        return False, f"Error deleting records: {str(e)}"
+
+def create_html_component(records):
+    html_template = """
+    <style>
+        .song-list {
+            font-family: Arial, sans-serif;
+        }
+        .song-item {
+            display: flex;
+            align-items: center;
+            margin-bottom: 10px;
+            padding: 10px;
+            border: 1px solid #ddd;
+            border-radius: 5px;
+        }
+        .song-image {
+            width: 50px;
+            height: 50px;
+            margin-right: 10px;
+        }
+        .song-details {
+            flex-grow: 1;
+        }
+        .song-title {
+            font-weight: bold;
+        }
+        .song-description {
+            font-style: italic;
+            color: #666;
+        }
+        .song-actions {
+            display: flex;
+            align-items: center;
+        }
+        .song-actions button {
+            margin-left: 5px;
+        }
+    </style>
+    <div class="song-list">
+    """
+    
+    for record in records:
+        html_template += f"""
+        <div class="song-item">
+            <img src="https://via.placeholder.com/50" class="song-image" alt="Song thumbnail">
+            <div class="song-details">
+                <div class="song-title">{record['name']}</div>
+                <div class="song-description">{record['document']}</div>
+            </div>
+            <div class="song-actions">
+                <button onclick="Streamlit.setComponentValue({{action: 'extend', id: '{record['id']}'}})">Extend</button>
+                <label>
+                    Public
+                    <input type="checkbox" onclick="Streamlit.setComponentValue({{action: 'toggle_public', id: '{record['id']}'}})">
+                </label>
+                <button onclick="Streamlit.setComponentValue({{action: 'like', id: '{record['id']}'}})">👍</button>
+                <button onclick="Streamlit.setComponentValue({{action: 'dislike', id: '{record['id']}'}})">👎</button>
+            </div>
+        </div>
+        """
+    
+    html_template += "</div>"
+    return html_template
+
+# Streamlit app
+st.title("🌟 Cosmos DB Record Management")
+
+# Sidebar
+st.sidebar.title("Suno")
+st.sidebar.markdown("### Home")
+st.sidebar.markdown("### Create")
+st.sidebar.markdown("### Library")
+st.sidebar.markdown("### Explore (BETA)")
+st.sidebar.markdown("---")
+st.sidebar.markdown("2360 credits")
+st.sidebar.markdown("### Subscription")
+st.sidebar.markdown("### What's New? 5")
+st.sidebar.markdown("### Community")
+st.sidebar.markdown("### Help")
+st.sidebar.markdown("### About")
+
+# Login section
+if 'logged_in' not in st.session_state:
+    st.session_state.logged_in = False
+
+if not st.session_state.logged_in:
+    st.subheader("🔐 Login")
+    input_key = Key
+    if st.button("🚀 Login"):
+        if input_key:
+            st.session_state.primary_key = input_key
+            st.session_state.logged_in = True
+            st.rerun()
+        else:
+            st.error("Invalid key. Please check your environment variables.")
+else:
+    # Initialize Cosmos DB client
+    client = CosmosClient(ENDPOINT, credential=st.session_state.primary_key)
+    database = client.get_database_client(DATABASE_NAME)
+    container = database.get_container_client(CONTAINER_NAME)
+
+    # Main Content Area
+    st.title("Create")
+    st.checkbox("Custom Mode", key="custom_mode")
+    st.text_area("Song Description", "a futuristic anime song about a literal banana", key="song_description")
+    st.radio("Instrumental", ["Yes", "No"], key="instrumental")
+    st.selectbox("Version", ["v1", "v2", "v3"], key="version")
+    st.button("Create 🎵")
+
+    # Fetch and display all records
+    st.subheader("📊 All Records")
+    records = fetch_all_records().to_dict('records')
+    
+    # Create and render the HTML component
+    html_component = create_html_component(records)
+    component_value = html(html_component, height=400)
+    
+    # Handle component interactions
+    if component_value:
+        action = component_value['action']
+        record_id = component_value['id']
+        if action == 'extend':
+            st.write(f"Extending record {record_id}")
+        elif action == 'toggle_public':
+            st.write(f"Toggling public status for record {record_id}")
+        elif action == 'like':
+            st.write(f"Liked record {record_id}")
+        elif action == 'dislike':
+            st.write(f"Disliked record {record_id}")
+
+    # Add delete and download buttons
+    col1, col2 = st.columns(2)
+    with col1:
+        if st.button("🗑️ Delete Selected"):
+            st.warning("Deletion functionality needs to be implemented for the new component")
+
+    with col2:
+        if st.download_button("📥 Download Data", pd.DataFrame(records).to_csv(index=False), "cosmos_db_data.csv", "text/csv"):
+            st.success("Data downloaded successfully!")
+
+    # Input fields for new record
+    st.subheader("📝 Enter New Record Details")
+    new_id = st.text_input("ID")
+    new_name = st.text_input("Name")
+    new_document = st.text_area("Document")
+    new_evaluation_text = st.text_area("Evaluation Text")
+    new_evaluation_score = st.number_input("Evaluation Score", min_value=0, max_value=100, step=1)
+
+    col1, col2 = st.columns(2)
+    
+    # Insert Record button
+    with col1:
+        if st.button("💾 Insert Record"):
+            record = {
+                "id": new_id,
+                "name": new_name,
+                "document": new_document,
+                "evaluationText": new_evaluation_text,
+                "evaluationScore": new_evaluation_score
+            }
+            
+            success, response = insert_record(record)
+            if success:
+                st.success("✅ Record inserted successfully!")
+                st.json(response)
+            else:
+                st.error(f"❌ Failed to insert record: {response}")
+            st.rerun()
+
+    # Call Procedure button
+    with col2:
+        if st.button("🔧 Call Procedure"):
+            record = {
+                "id": new_id,
+                "name": new_name,
+                "document": new_document,
+                "evaluationText": new_evaluation_text,
+                "evaluationScore": new_evaluation_score
+            }
+            
+            success, response = call_stored_procedure(record)
+            if success:
+                st.success("✅ Stored procedure executed successfully!")
+                st.json(response)
+            else:
+                st.error(f"❌ Failed to execute stored procedure: {response}")
+
+    # Logout button
+    if st.button("🚪 Logout"):
+        st.session_state.logged_in = False
+        st.rerun()
+
+    # Display connection info
+    st.sidebar.markdown("---")
+    st.sidebar.subheader("🔗 Connection Information")
+    st.sidebar.text(f"Endpoint: {ENDPOINT}")
+    st.sidebar.text(f"Subscription ID: {SUBSCRIPTION_ID}")
+    st.sidebar.text(f"Database: {DATABASE_NAME}")
+    st.sidebar.text(f"Container: {CONTAINER_NAME}")
+
+# Preview section
+st.markdown("---")
+st.markdown("### Select a song to preview.")