Update app.py

app.py

@@ -75,37 +75,53 @@ def anomalies_detector(logs: str) -> str:
     return output
 
 
-# Custom CSS for dark purple and white theme
+# Custom CSS for dark navy blue and electric blue theme
 custom_css = """
 :root {
-    --primary-purple: #6B46C1;
-    --dark-purple: #553C9A;
-    --light-purple: #9F7AEA;
-    --deep-purple: #3C2A5E;
+    --electric-blue: #00D4FF;
+    --bright-blue: #0099FF;
+    --navy-blue: #001F3F;
+    --dark-navy: #001129;
+    --deep-navy: #000814;
     --white: #FFFFFF;
-    --off-white: #F7FAFC;
-    --light-gray: #E2E8F0;
+    --off-white: #F8FCFF;
+    --light-gray: #E8F4F8;
+    --cyber-glow: rgba(0, 212, 255, 0.3);
 }
 
 /* Main background */
 .gradio-container {
-    background: linear-gradient(135deg, var(--deep-purple) 0%, var(--dark-purple) 50%, var(--primary-purple) 100%) !important;
+    background: linear-gradient(135deg, var(--deep-navy) 0%, var(--dark-navy) 50%, var(--navy-blue) 100%) !important;
     font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
+    position: relative !important;
+}
+
+.gradio-container::before {
+    content: '' !important;
+    position: absolute !important;
+    top: 0 !important;
+    left: 0 !important;
+    right: 0 !important;
+    bottom: 0 !important;
+    background: radial-gradient(circle at 20% 50%, rgba(0, 212, 255, 0.08) 0%, transparent 50%),
+                radial-gradient(circle at 80% 80%, rgba(0, 153, 255, 0.06) 0%, transparent 50%) !important;
+    pointer-events: none !important;
 }
 
 /* Header styling */
 .contain {
     background: rgba(255, 255, 255, 0.98) !important;
     border-radius: 20px !important;
-    box-shadow: 0 20px 60px rgba(107, 70, 193, 0.3) !important;
+    box-shadow: 0 20px 60px rgba(0, 212, 255, 0.2), 0 0 40px rgba(0, 153, 255, 0.1) !important;
     padding: 2rem !important;
     margin: 2rem auto !important;
     max-width: 1400px !important;
+    border: 1px solid rgba(0, 212, 255, 0.1) !important;
 }
 
 /* Title styling */
 h1 {
-    background: linear-gradient(135deg, var(--primary-purple), var(--light-purple)) !important;
+    background: linear-gradient(135deg, var(--bright-blue), var(--electric-blue)) !important;
     -webkit-background-clip: text !important;
     -webkit-text-fill-color: transparent !important;
     background-clip: text !important;
@@ -113,11 +129,12 @@ h1 {
     font-size: 2.5rem !important;
     margin-bottom: 0.5rem !important;
     text-align: center !important;
+    filter: drop-shadow(0 0 20px rgba(0, 212, 255, 0.3)) !important;
 }
 
 /* Description text */
 .prose p {
-    color: var(--dark-purple) !important;
+    color: var(--navy-blue) !important;
     font-size: 1.1rem !important;
     text-align: center !important;
     margin-bottom: 1.5rem !important;
@@ -125,23 +142,24 @@ h1 {
 
 /* Input/Output boxes */
 .input-text, .output-text, textarea {
-    border: 2px solid var(--light-purple) !important;
+    border: 2px solid var(--bright-blue) !important;
     border-radius: 12px !important;
     background: var(--white) !important;
     font-family: 'Fira Code', 'Courier New', monospace !important;
     font-size: 0.95rem !important;
     transition: all 0.3s ease !important;
+    box-shadow: 0 2px 10px rgba(0, 153, 255, 0.1) !important;
 }
 
 .input-text:focus, textarea:focus {
-    border-color: var(--primary-purple) !important;
-    box-shadow: 0 0 0 3px rgba(107, 70, 193, 0.1) !important;
+    border-color: var(--electric-blue) !important;
+    box-shadow: 0 0 0 3px var(--cyber-glow), 0 0 20px rgba(0, 212, 255, 0.2) !important;
     outline: none !important;
 }
 
 /* Labels */
 label {
-    color: var(--dark-purple) !important;
+    color: var(--navy-blue) !important;
     font-weight: 600 !important;
     font-size: 1rem !important;
     margin-bottom: 0.5rem !important;
@@ -149,7 +167,7 @@ label {
 
 /* Submit button */
 .submit-button, button[id$="-submit-button"] {
-    background: linear-gradient(135deg, var(--primary-purple), var(--dark-purple)) !important;
+    background: linear-gradient(135deg, var(--bright-blue), var(--electric-blue)) !important;
     color: var(--white) !important;
     border: none !important;
     border-radius: 12px !important;
@@ -158,19 +176,20 @@ label {
     font-size: 1rem !important;
     cursor: pointer !important;
     transition: all 0.3s ease !important;
-    box-shadow: 0 4px 15px rgba(107, 70, 193, 0.3) !important;
+    box-shadow: 0 4px 15px rgba(0, 212, 255, 0.3), 0 0 20px rgba(0, 153, 255, 0.2) !important;
 }
 
 .submit-button:hover, button[id$="-submit-button"]:hover {
     transform: translateY(-2px) !important;
-    box-shadow: 0 6px 20px rgba(107, 70, 193, 0.4) !important;
+    box-shadow: 0 6px 20px rgba(0, 212, 255, 0.4), 0 0 30px rgba(0, 153, 255, 0.3) !important;
+    filter: brightness(1.1) !important;
 }
 
 /* Clear button */
 .clear-button, button.secondary {
     background: var(--white) !important;
-    color: var(--dark-purple) !important;
-    border: 2px solid var(--light-purple) !important;
+    color: var(--navy-blue) !important;
+    border: 2px solid var(--bright-blue) !important;
     border-radius: 12px !important;
     padding: 0.75rem 2rem !important;
     font-weight: 600 !important;
@@ -178,9 +197,10 @@ label {
 }
 
 .clear-button:hover, button.secondary:hover {
-    background: var(--light-purple) !important;
+    background: var(--electric-blue) !important;
     color: var(--white) !important;
     transform: translateY(-2px) !important;
+    box-shadow: 0 4px 15px rgba(0, 212, 255, 0.3) !important;
 }
 
 /* Output markdown styling */
@@ -188,22 +208,24 @@ label {
     background: var(--off-white) !important;
     padding: 1.5rem !important;
     border-radius: 12px !important;
-    border-left: 4px solid var(--primary-purple) !important;
+    border-left: 4px solid var(--electric-blue) !important;
+    box-shadow: 0 2px 10px rgba(0, 153, 255, 0.1) !important;
 }
 
 .markdown-text code {
     background: var(--white) !important;
     padding: 0.2rem 0.4rem !important;
     border-radius: 4px !important;
-    color: var(--dark-purple) !important;
-    border: 1px solid var(--light-purple) !important;
+    color: var(--navy-blue) !important;
+    border: 1px solid var(--bright-blue) !important;
 }
 
 .markdown-text pre {
     background: var(--white) !important;
-    border: 2px solid var(--light-purple) !important;
+    border: 2px solid var(--bright-blue) !important;
     border-radius: 8px !important;
     padding: 1rem !important;
+    box-shadow: inset 0 2px 8px rgba(0, 153, 255, 0.05) !important;
 }
 
 /* Footer */
@@ -212,10 +234,11 @@ footer {
     color: var(--white) !important;
     text-align: center !important;
     padding: 2rem !important;
+    text-shadow: 0 0 10px rgba(0, 212, 255, 0.5) !important;
 }
 
 footer a {
-    color: var(--white) !important;
+    color: var(--electric-blue) !important;
     text-decoration: underline !important;
 }
 
@@ -224,7 +247,8 @@ footer a {
     background: var(--off-white) !important;
     border-radius: 12px !important;
     padding: 1rem !important;
-    border: 2px solid var(--light-purple) !important;
+    border: 2px solid var(--bright-blue) !important;
+    box-shadow: 0 2px 10px rgba(0, 153, 255, 0.1) !important;
 }
 
 /* Scrollbar styling */
@@ -238,12 +262,34 @@ footer a {
 }
 
 ::-webkit-scrollbar-thumb {
-    background: var(--primary-purple) !important;
+    background: linear-gradient(180deg, var(--electric-blue), var(--bright-blue)) !important;
     border-radius: 5px !important;
+    box-shadow: 0 0 10px rgba(0, 212, 255, 0.3) !important;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-    background: var(--dark-purple) !important;
+    background: var(--electric-blue) !important;
+    box-shadow: 0 0 15px rgba(0, 212, 255, 0.5) !important;
+}
+
+/* Cyber glow effects */
+.submit-button::before, button[id$="-submit-button"]::before {
+    content: '' !important;
+    position: absolute !important;
+    top: -2px !important;
+    left: -2px !important;
+    right: -2px !important;
+    bottom: -2px !important;
+    background: linear-gradient(45deg, var(--electric-blue), var(--bright-blue)) !important;
+    border-radius: 12px !important;
+    z-index: -1 !important;
+    opacity: 0 !important;
+    transition: opacity 0.3s ease !important;
+    filter: blur(10px) !important;
+}
+
+.submit-button:hover::before, button[id$="-submit-button"]:hover::before {
+    opacity: 0.7 !important;
 }
 """
 
@@ -285,8 +331,8 @@ demo = gr.Interface(
     examples=example_logs,
     css=custom_css,
     theme=gr.themes.Soft(
-        primary_hue="purple",
-        secondary_hue="purple",
+        primary_hue="blue",
+        secondary_hue="cyan",
     ),
     allow_flagging="never",
     analytics_enabled=False
@@ -299,62 +345,4 @@ if __name__ == "__main__":
         server_port=7860,
         share=True,
         show_error=True
-    )
-
-
-
-# import gradio as gr
-# from transformers import pipeline
-# import re
-
-# def anomalies_detector(logs: str) -> list[str]:
-#     """
-#     Detect anomalies in software logs using a Hugging Face transformer model.
-#     This function uses a specialized model trained to identify unusual patterns
-#     in system logs, such as:
-#     - Error messages
-#     - Unusual system states
-#     - Security-related events
-#     - Performance anomalies
-#     - Unexpected behavior patterns
-
-#     Args:
-#         logs (str): The input text containing log entries
-
-#     Returns:
-#         list[tuple[int, str]]: List of tuples containing (line_number, anomalous_text)
-#     """
-#     # Initialize the text classification pipeline with a proper classification model
-#     classifier = pipeline("text-classification",
-#                           model="distilbert/distilbert-base-uncased-finetuned-sst-2-english")
-
-    
-#     # Split logs into lines
-#     log_lines = logs.split('\n')
-#     anomalies = []
-    
-#     # Process each line
-#     for line_num, line in enumerate(log_lines, 1):
-#         if not line.strip():  # Skip empty lines
-#             continue
-            
-#         # Get classification result
-#         results = classifier(line)
-        
-        
-#         for log, res in zip(logs, results):
-#             anomalies.append(f"{log} => {res}")
-#     return anomalies
-
-# # Create a standard Gradio interface
-# demo = gr.Interface(
-#     fn=anomalies_detector,
-#     inputs="textbox",
-#     outputs="text",
-#     title="Log Anomaly Detector",
-#     description="Enter log entries to detect anomalous patterns using BERT Model. The system will identify unusual patterns, errors, and potential issues in your logs."
-# )
-
-# # Launch both the Gradio web interface and the MCP server
-# if __name__ == "__main__":
-#     demo.launch(mcp_server=True, share=True)
+    )