Update app.py

app.py

@@ -15,69 +15,204 @@ from streamlit_drawable_canvas import st_canvas
 
 import streamlit as st
 
-# Set page config for a futuristic look
-st.set_page_config(page_title="NeuraSense AI", page_icon="🧠", layout="wide")
+import streamlit as st
+
+# Set page config
+st.set_page_config(page_title="NeuraSense AI - Cyberpunk Edition", page_icon="🧠", layout="wide")
 
-# Custom CSS for a futuristic look
+# Enhanced Custom CSS for a hyper-cyberpunk realistic look
 custom_css = """
 <style>
-    @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');
+    @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&family=Roboto+Mono:wght@400;700&display=swap');
+
+    :root {
+        --neon-blue: #00FFFF;
+        --neon-pink: #FF00FF;
+        --neon-green: #39FF14;
+        --dark-bg: #0a0a0a;
+        --darker-bg: #050505;
+        --light-text: #E0E0E0;
+    }
 
     body {
-        color: #E0E0E0;
-        background-color: #0E1117;
-        font-family: 'Orbitron', sans-serif;
+        color: var(--light-text);
+        background-color: var(--dark-bg);
+        font-family: 'Roboto Mono', monospace;
+        overflow-x: hidden;
     }
 
     .stApp {
-        background-image: 
-            radial-gradient(circle at 10% 20%, rgba(0, 255, 255, 0.1) 0%, transparent 20%),
-            radial-gradient(circle at 90% 80%, rgba(0, 255, 255, 0.1) 0%, transparent 20%),
-            linear-gradient(135deg, #0E1117 0%, #1A1F2C 100%);
-        animation: pulse 10s infinite alternate;
+        background: 
+            linear-gradient(45deg, var(--darker-bg) 0%, var(--dark-bg) 100%),
+            repeating-linear-gradient(45deg, #000 0%, #000 2%, transparent 2%, transparent 4%),
+            repeating-linear-gradient(-45deg, #111 0%, #111 1%, transparent 1%, transparent 3%);
+        background-blend-mode: overlay;
+        animation: backgroundPulse 20s infinite alternate;
     }
 
-    @keyframes pulse {
+    @keyframes backgroundPulse {
         0% { background-position: 0% 50%; }
         100% { background-position: 100% 50%; }
     }
 
+    h1, h2, h3 {
+        font-family: 'Orbitron', sans-serif;
+        position: relative;
+        text-shadow: 
+            0 0 5px var(--neon-blue),
+            0 0 10px var(--neon-blue),
+            0 0 20px var(--neon-blue),
+            0 0 40px var(--neon-blue);
+        animation: textGlitch 5s infinite alternate;
+    }
+
+    @keyframes textGlitch {
+        0% { transform: skew(0deg); }
+        20% { transform: skew(5deg); text-shadow: 3px 3px 0 var(--neon-pink); }
+        40% { transform: skew(-5deg); text-shadow: -3px -3px 0 var(--neon-green); }
+        60% { transform: skew(3deg); text-shadow: 2px -2px 0 var(--neon-blue); }
+        80% { transform: skew(-3deg); text-shadow: -2px 2px 0 var(--neon-pink); }
+        100% { transform: skew(0deg); }
+    }
+
     .stButton>button {
-        color: #00FFFF;
-        border: 2px solid #00FFFF;
-        border-radius: 30px;
-        background: linear-gradient(45deg, #1A1F2C, #2C3E50);
-        box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
+        color: var(--neon-blue);
+        border: 2px solid var(--neon-blue);
+        border-radius: 5px;
+        background: linear-gradient(45deg, rgba(0,255,255,0.1), rgba(0,255,255,0.3));
+        box-shadow: 0 0 15px var(--neon-blue);
         transition: all 0.3s ease;
+        text-transform: uppercase;
+        letter-spacing: 2px;
+        backdrop-filter: blur(5px);
     }
 
     .stButton>button:hover {
-        transform: scale(1.05);
-        box-shadow: 0 0 25px rgba(0, 255, 255, 0.8);
+        transform: scale(1.05) translateY(-3px);
+        box-shadow: 0 0 30px var(--neon-blue);
+        text-shadow: 0 0 5px var(--neon-blue);
+    }
+
+    .stTextInput>div>div>input, .stTextArea>div>div>textarea, .stSelectbox>div>div>div {
+        background-color: rgba(0, 255, 255, 0.1);
+        border: 1px solid var(--neon-blue);
+        border-radius: 5px;
+        color: var(--neon-blue);
+        backdrop-filter: blur(5px);
+    }
+
+    .stTextInput>div>div>input:focus, .stTextArea>div>div>textarea:focus, .stSelectbox>div>div>div:focus {
+        box-shadow: 0 0 20px var(--neon-blue);
     }
 
     .stSlider>div>div>div>div {
-        background-color: #00FFFF;
-        box-shadow: 0 0 10px #00FFFF;
+        background-color: var(--neon-blue);
     }
 
-    .stTextArea, .stNumberInput, .stSelectbox {
-        background-color: rgba(26, 31, 44, 0.8);
-        color: #00FFFF;
-        border: 2px solid #00FFFF;
-        border-radius: 15px;
-        backdrop-filter: blur(5px);
+    .stSlider>div>div>div>div>div {
+        background-color: var(--neon-pink);
+        box-shadow: 0 0 10px var(--neon-pink);
+    }
+
+    ::-webkit-scrollbar {
+        width: 10px;
+        height: 10px;
+    }
+
+    ::-webkit-scrollbar-track {
+        background: var(--darker-bg);
+        border-radius: 5px;
+    }
+
+    ::-webkit-scrollbar-thumb {
+        background: var(--neon-blue);
+        border-radius: 5px;
+        box-shadow: 0 0 5px var(--neon-blue);
+    }
+
+    ::-webkit-scrollbar-thumb:hover {
+        background: var(--neon-pink);
+        box-shadow: 0 0 5px var(--neon-pink);
+    }
+
+    .stPlot, .stDataFrame {
+        border: 1px solid var(--neon-blue);
+        border-radius: 5px;
+        overflow: hidden;
+        box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
+    }
+
+    .stImage, .stIcon {
+        filter: drop-shadow(0 0 5px var(--neon-blue));
+    }
+
+    .stSidebar, .stContainer {
+        background: 
+            linear-gradient(45deg, var(--darker-bg) 0%, var(--dark-bg) 100%),
+            repeating-linear-gradient(45deg, #000 0%, #000 2%, transparent 2%, transparent 4%);
+        animation: sidebarPulse 10s infinite alternate;
+    }
+
+    @keyframes sidebarPulse {
+        0% { background-position: 0% 50%; }
+        100% { background-position: 100% 50%; }
+    }
+
+    .element-container {
+        position: relative;
+    }
+
+    .element-container::before {
+        content: '';
+        position: absolute;
+        top: -5px;
+        left: -5px;
+        right: -5px;
+        bottom: -5px;
+        border: 1px solid var(--neon-blue);
+        border-radius: 10px;
+        opacity: 0.5;
+        pointer-events: none;
+    }
+
+    .stMarkdown a {
+        color: var(--neon-pink);
+        text-decoration: none;
+        position: relative;
         transition: all 0.3s ease;
     }
 
-    .stTextArea:focus, .stNumberInput:focus, .stSelectbox:focus {
-        box-shadow: 0 0 20px rgba(0, 255, 255, 0.8);
-        transform: translateY(-2px);
+    .stMarkdown a::after {
+        content: '';
+        position: absolute;
+        width: 100%;
+        height: 1px;
+        bottom: -2px;
+        left: 0;
+        background-color: var(--neon-pink);
+        transform: scaleX(0);
+        transform-origin: bottom right;
+        transition: transform 0.3s ease;
     }
 
+    .stMarkdown a:hover::after {
+        transform: scaleX(1);
+        transform-origin: bottom left;
+    }
+
+    /* Cyberpunk-style progress bar */
     .stProgress > div > div {
-        background-color: #00FFFF;
-        background-image: linear-gradient(45deg, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
+        background-color: var(--neon-blue);
+        background-image: linear-gradient(
+            45deg, 
+            var(--neon-pink) 25%, 
+            transparent 25%, 
+            transparent 50%, 
+            var(--neon-pink) 50%, 
+            var(--neon-pink) 75%, 
+            transparent 75%, 
+            transparent
+        );
         background-size: 40px 40px;
         animation: progress-bar-stripes 1s linear infinite;
     }
@@ -87,35 +222,117 @@ custom_css = """
         100% { background-position: 0 0; }
     }
 
+    /* Glowing checkbox */
     .stCheckbox > label > div {
-        border-color: #00FFFF;
+        border-color: var(--neon-blue);
+        transition: all 0.3s ease;
     }
 
     .stCheckbox > label > div[data-checked="true"] {
-        background-color: #00FFFF;
+        background-color: var(--neon-blue);
+        box-shadow: 0 0 10px var(--neon-blue);
     }
 
-    /* Futuristic scrollbar */
-    ::-webkit-scrollbar {
-        width: 10px;
+    /* Futuristic radio button */
+    .stRadio > div {
+        background-color: rgba(0, 255, 255, 0.1);
+        border-radius: 10px;
+        padding: 10px;
     }
 
-    ::-webkit-scrollbar-track {
-        background: #1A1F2C;
+    .stRadio > div > label > div {
+        border-color: var(--neon-blue);
+        transition: all 0.3s ease;
     }
 
-    ::-webkit-scrollbar-thumb {
-        background: #00FFFF;
+    .stRadio > div > label > div[data-checked="true"] {
+        background-color: var(--neon-blue);
+        box-shadow: 0 0 10px var(--neon-blue);
+    }
+
+    /* Cyberpunk-style tables */
+    .stDataFrame table {
+        border-collapse: separate;
+        border-spacing: 0;
+        border: 1px solid var(--neon-blue);
+        border-radius: 10px;
+        overflow: hidden;
+    }
+
+    .stDataFrame th {
+        background-color: rgba(0, 255, 255, 0.2);
+        color: var(--neon-blue);
+        text-transform: uppercase;
+        letter-spacing: 1px;
+    }
+
+    .stDataFrame td {
+        border-bottom: 1px solid rgba(0, 255, 255, 0.2);
+    }
+
+    .stDataFrame tr:last-child td {
+        border-bottom: none;
+    }
+
+    /* Futuristic file uploader */
+    .stFileUploader > div {
+        border: 2px dashed var(--neon-blue);
+        border-radius: 10px;
+        background-color: rgba(0, 255, 255, 0.05);
+        transition: all 0.3s ease;
+    }
+
+    .stFileUploader > div:hover {
+        background-color: rgba(0, 255, 255, 0.1);
+        box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
+    }
+
+    /* Cyberpunk-style tooltips */
+    .stTooltipIcon {
+        color: var(--neon-pink);
+        transition: all 0.3s ease;
+    }
+
+    .stTooltipIcon:hover {
+        color: var(--neon-blue);
+        text-shadow: 0 0 5px var(--neon-blue);
+    }
+
+    /* Futuristic date input */
+    .stDateInput > div > div > input {
+        background-color: rgba(0, 255, 255, 0.1);
+        border: 1px solid var(--neon-blue);
         border-radius: 5px;
+        color: var(--neon-blue);
+        backdrop-filter: blur(5px);
     }
 
-    ::-webkit-scrollbar-thumb:hover {
-        background: #00CCCC;
+    .stDateInput > div > div > input:focus {
+        box-shadow: 0 0 20px var(--neon-blue);
     }
 
-    /* Glowing text effect for headers */
-    h1, h2, h3 {
-        text-shadow: 0 0 10px #00FFFF, 0 0 20px #00FFFF, 0 0 30px #00FFFF;
+    /* Cyberpunk-style code blocks */
+    .stCodeBlock {
+        background-color: rgba(0, 0, 0, 0.6);
+        border: 1px solid var(--neon-green);
+        border-radius: 5px;
+        color: var(--neon-green);
+        font-family: 'Roboto Mono', monospace;
+        padding: 10px;
+        position: relative;
+        overflow: hidden;
+    }
+
+    .stCodeBlock::before {
+        content: '';
+        position: absolute;
+        top: -10px;
+        left: -10px;
+        right: -10px;
+        bottom: -10px;
+        background: linear-gradient(45deg, var(--neon-green), transparent);
+        opacity: 0.1;
+        z-index: -1;
     }
 </style>
 """
@@ -127,7 +344,8 @@ st.markdown(custom_css, unsafe_allow_html=True)
 AVATAR_WIDTH, AVATAR_HEIGHT = 600, 800
 
 # Your Streamlit app code goes here
-st.title("NeuraSense AI")
+st.title("NeuraSense AI - Cyberpunk Edition")
+
 
 # Set up DialoGPT model
 @st.cache_resource