Enhanced UI

gradio_app.py

@@ -23,212 +23,393 @@ atexit.register(stop_api_server, api_process)
 
 custom_css = """
 * {
-    font-family: 'Roboto', sans-serif;
-    transition: all 0.3s ease;
+    font-family: 'Inter', system-ui, sans-serif;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
+
 .gradio-container {
-    background: #121212 !important;
+    background: #0a0a0f !important;
     color: #fff !important;
+    min-height: 100vh;
+    position: relative;
     overflow: hidden;
-    transition: all 0.5s ease;
 }
+
+/* Animated Background */
+.gradio-container::before {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: 
+        linear-gradient(125deg, 
+            #0a0a0f 0%, 
+            rgba(99, 102, 241, 0.05) 30%,
+            rgba(99, 102, 241, 0.1) 50%,
+            rgba(99, 102, 241, 0.05) 70%,
+            #0a0a0f 100%);
+    animation: gradientMove 15s ease infinite;
+    background-size: 400% 400%;
+    z-index: 0;
+}
+
+/* Floating Particles */
+.gradio-container::after {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: radial-gradient(circle at center, transparent 0%, #0a0a0f 70%),
+                url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50' cy='50' r='1' fill='rgba(99, 102, 241, 0.15)'/%3E%3C/svg%3E");
+    opacity: 0.5;
+    animation: floatingParticles 20s linear infinite;
+    z-index: 1;
+}
+
+/* Futuristic Header */
 .treat-title {
     text-align: center;
-    padding: 40px;
-    margin-bottom: 30px;
-    background: rgba(18, 18, 18, 0.85);
-    border-radius: 15px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
-    animation: slideInFromTop 1s ease-out;
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
-}
-.treat-title:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 8px 16px rgba(106, 13, 173);
+    padding: 3rem 1rem;
+    position: relative;
+    overflow: hidden;
+    z-index: 2;
+    background: linear-gradient(180deg, 
+        rgba(99, 102, 241, 0.1),
+        transparent 70%);
+}
+
+.treat-title::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 50%;
+    width: 80%;
+    height: 1px;
+    background: linear-gradient(90deg, 
+        transparent,
+        rgba(99, 102, 241, 0.5),
+        transparent);
+    transform: translateX(-50%);
+    animation: scanline 3s ease-in-out infinite;
 }
+
 .treat-title h1 {
-    font-size: 5em;
-    color: rgb(106, 13, 173);
-    margin-bottom: 10px;
-    font-weight: bold;
-    animation: fadeInText 1.5s ease-out;
-    transition: color 0.3s ease;
+    font-size: 4.5rem;
+    font-weight: 800;
+    background: linear-gradient(135deg, 
+        #2a2b55 0%,
+        #6366f1 50%,
+        #2a2b55 100%);
+    background-size: 200% auto;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    margin-bottom: 0.5rem;
+    letter-spacing: -0.05em;
+    animation: gradientFlow 8s ease infinite;
+    position: relative;
 }
-.treat-title:hover h1 {
-    color: rgb(106, 13, 173);
+
+.treat-title h1::after {
+    content: attr(data-text);
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(135deg, 
+        transparent 0%,
+        rgba(99, 102, 241, 0.4) 50%,
+        transparent 100%);
+    background-size: 200% auto;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    opacity: 0.5;
+    animation: textGlow 4s ease-in-out infinite;
 }
+
 .treat-title p {
-    font-size: 1.3em;
-    color: rgb(106, 13, 173);
-    animation: fadeInText 1.5s ease-out 0.5s;
-}
-.highlight {
-    color: rgb(106, 13, 173);
-    font-weight: bold;
-    transition: color 0.3s ease, transform 0.3s ease;
-    display: inline-block;
+    font-size: 1.1rem;
+    color: rgba(255, 255, 255, 0.7);
+    max-width: 600px;
+    margin: 0 auto;
+    position: relative;
+    animation: fadeInUp 1s ease-out;
 }
-.highlight:hover {
-    color: rgb(106, 13, 173);
-    transform: scale(1.1);
+
+/* Tabs Styling */
+.tabs {
+    background: rgba(17, 17, 27, 0.7);
+    border: 1px solid rgba(99, 102, 241, 0.2);
+    border-radius: 16px;
+    padding: 1rem;
+    margin: 0 1rem 2rem 1rem;
+    position: relative;
+    z-index: 2;
+    backdrop-filter: blur(10px);
+    box-shadow: 0 0 30px rgba(99, 102, 241, 0.1);
+    animation: floatIn 1s ease-out;
 }
-.content-area, .results-area {
-    background: rgba(33, 33, 33, 0.9) !important;
-    border-radius: 15px !important;
-    padding: 30px !important;
-    margin: 20px 0 !important;
-    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5) !important;
-    opacity: 0;
-    animation: fadeInUp 1s forwards;
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
+
+.tabs::before {
+    content: '';
+    position: absolute;
+    top: -1px;
+    left: -1px;
+    right: -1px;
+    bottom: -1px;
+    background: linear-gradient(45deg,
+        rgba(99, 102, 241, 0.1),
+        transparent,
+        rgba(99, 102, 241, 0.1));
+    border-radius: 16px;
+    z-index: -1;
+    animation: borderGlow 4s ease-in-out infinite;
 }
-.content-area:hover, .results-area:hover {
-    transform: translateY(-3px);
-    box-shadow: 0 8px 16px rgb(106, 13, 173) !important;
+
+/* Content Area */
+.content-area {
+    background: rgba(17, 17, 27, 0.7) !important;
+    border: 1px solid rgba(99, 102, 241, 0.2) !important;
+    border-radius: 12px !important;
+    padding: 1.5rem !important;
+    backdrop-filter: blur(10px);
+    position: relative;
+    overflow: hidden;
+    animation: fadeScale 0.5s ease-out;
+}
+
+.content-area::before {
+    content: '';
+    position: absolute;
+    top: -50%;
+    left: -50%;
+    width: 200%;
+    height: 200%;
+    background: radial-gradient(circle at center,
+        rgba(99, 102, 241, 0.1) 0%,
+        transparent 70%);
+    animation: rotateGradient 10s linear infinite;
 }
+
+/* Input Fields */
 .gradio-textbox textarea {
-    background-color: #333 !important;
-    color: #fff !important;
-    border: 1px solid rgb(106, 13, 173) !important;
+    background: rgba(17, 17, 27, 0.6) !important;
+    border: 1px solid rgba(99, 102, 241, 0.3) !important;
     border-radius: 8px !important;
-    padding: 12px !important;
-    font-size: 1.1em !important;
+    color: rgba(255, 255, 255, 0.9) !important;
+    font-size: 0.95rem !important;
+    line-height: 1.6 !important;
+    padding: 1rem !important;
     transition: all 0.3s ease;
+    position: relative;
+    z-index: 2;
 }
-.gradio-textbox textarea:hover {
-    border-color: rgb(106, 13, 173) !important;
-    box-shadow: 0 0 10px rgb(106, 13, 173) !important;
-}
+
 .gradio-textbox textarea:focus {
-    border-color: rgb(106, 13, 173) !important;
-    box-shadow: 0 0 15px rgb(106, 13, 173) !important;
+    border-color: #6366f1 !important;
+    box-shadow: 0 0 20px rgba(99, 102, 241, 0.2) !important;
+    background: rgba(17, 17, 27, 0.8) !important;
     transform: translateY(-2px);
 }
+
+/* Buttons */
 .gradio-button {
-    background-color: rgb(106, 13, 173) !important;
-    color: white !important;
+    background: linear-gradient(45deg, 
+        #6366f1,
+        #818cf8,
+        #6366f1) !important;
+    background-size: 200% auto !important;
     border: none !important;
-    border-radius: 25px !important;
-    padding: 12px 24px !important;
-    font-size: 1.2em !important;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    margin: 20px 0 !important;
+    border-radius: 8px !important;
+    color: white !important;
+    font-weight: 600 !important;
+    font-size: 0.95rem !important;
+    padding: 0.75rem 1.5rem !important;
+    letter-spacing: 0.025em !important;
     position: relative;
     overflow: hidden;
+    transition: all 0.3s ease !important;
+    animation: gradientFlow 3s ease infinite;
 }
+
 .gradio-button::before {
     content: '';
     position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 0;
-    height: 0;
-    background: rgba(255, 255, 255, 0.2);
-    border-radius: 50%;
-    transform: translate(-50%, -50%);
-    transition: width 0.6s ease, height 0.6s ease;
+    top: -50%;
+    left: -50%;
+    width: 200%;
+    height: 200%;
+    background: radial-gradient(circle at center,
+        rgba(255, 255, 255, 0.2) 0%,
+        transparent 70%);
+    transform: scale(0);
+    transition: transform 0.5s ease;
 }
+
 .gradio-button:hover {
-    transform: scale(1.05) translateY(-2px);
-    background-color: rgb(106, 13, 173) !important;
-    box-shadow: 0 6px 15px rgb(106, 13, 173);
+    transform: translateY(-2px);
+    box-shadow: 0 5px 20px rgba(99, 102, 241, 0.4) !important;
 }
+
 .gradio-button:hover::before {
-    width: 300px;
-    height: 300px;
+    transform: scale(1);
 }
-.gradio-button:active {
-    transform: scale(0.98) translateY(1px);
-    background-color: rgb(106, 13, 173) !important;
 
-/* Custom style for the Analyze Content button */
-.gradio-button.primary {
-    background-color: rgb(106, 13, 173) !important;
-    border-color: rgb(106, 13, 173) !important;
+/* Results Area */
+.results-area {
+    background: rgba(17, 17, 27, 0.7) !important;
+    border: 1px solid rgba(99, 102, 241, 0.2) !important;
+    border-radius: 12px !important;
+    margin-top: 2rem !important;
+    backdrop-filter: blur(10px);
+    animation: slideUp 0.5s ease-out;
+    position: relative;
+    overflow: hidden;
 }
 
-}
-label {
-    color: rgb(106, 13, 173) !important;
-    font-weight: 500 !important;
-    margin-bottom: 10px !important;
-    transition: color 0.3s ease;
-}
-label:hover {
-    color: #fff !important;
-}
-.center-row {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
 .footer {
     text-align: center;
-    margin-top: 40px;
-    font-size: 1.2em;
-    color: #bdbdbd;
-    opacity: 0;
-    animation: fadeInUp 1s forwards 1.5s;
-    transition: all 0.3s ease;
-}
-.footer:hover {
-    transform: translateY(-3px);
+    padding: 2rem 0;
+    margin-top: 3rem;
+    font-size: 1.0rem;
+    position: relative;
+    z-index: 2;
 }
+
 .footer p {
-    color: rgb(106, 13, 173);
-    transition: all 0.3s ease;
+    color: rgba(255, 255, 255, 0.8);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
 }
+
 .footer .heart {
+    color: #6366f1;
     display: inline-block;
-    transition: transform 0.3s ease;
-    animation: pulse 1.5s infinite;
+    position: relative;
+    font-size: 1.0rem;
+    transform-origin: center;
+    animation: heartbeat 1.5s ease infinite;
+}
+
+.footer .heart::before,
+.footer .heart::after {
+    content: '✦';
+    position: absolute;
+    opacity: 0;
+    font-size: 0.6rem;
+    animation: sparkle 1.5s ease infinite;
+}
+
+.footer .heart::before {
+    top: -8px;
+    left: -8px;
+    animation-delay: 0.2s;
 }
-.footer:hover .heart {
-    transform: scale(1.3);
+
+.footer .heart::after {
+    top: -8px;
+    right: -8px;
+    animation-delay: 0.4s;
 }
-.footer a {
-    color: rgb(106, 13, 173);
+
+.footer .name {
+    color: #6366f1;
     text-decoration: none;
     position: relative;
     transition: all 0.3s ease;
+    padding: 0 4px;
 }
-.footer a:hover {
-    color: rgb(106, 13, 173);
-}
-.footer a::after {
-    content: '';
-    position: absolute;
-    width: 0;
-    height: 2px;
-    bottom: -2px;
-    left: 0;
-    background-color: rgb(106, 13, 173);
-    transition: width 0.3s ease;
-}
-.footer a:hover::after {
-    width: 100%;
+
+.footer .name:hover {
+    color: #818cf8;
 }
+
 footer {
     visibility: hidden;
-}     
+}
 
-@keyframes slideInFromTop {
-    0% { transform: translateY(-50px); opacity: 0; }
-    100% { transform: translateY(0); opacity: 1; }
+/* Animations */
+@keyframes gradientMove {
+    0% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
+    100% { background-position: 0% 50%; }
 }
-@keyframes fadeInText {
-    0% { opacity: 0; transform: translateY(10px); }
+
+@keyframes floatingParticles {
+    0% { transform: translateY(0); }
+    100% { transform: translateY(-100%); }
+}
+
+@keyframes scanline {
+    0% { transform: translateX(-150%) scaleX(0.5); opacity: 0; }
+    50% { transform: translateX(-50%) scaleX(1); opacity: 1; }
+    100% { transform: translateX(50%) scaleX(0.5); opacity: 0; }
+}
+
+@keyframes gradientFlow {
+    0% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
+    100% { background-position: 0% 50%; }
+}
+
+@keyframes textGlow {
+    0% { opacity: 0.3; transform: scale(1); }
+    50% { opacity: 0.5; transform: scale(1.02); }
+    100% { opacity: 0.3; transform: scale(1); }
+}
+
+@keyframes borderGlow {
+    0% { opacity: 0.5; }
+    50% { opacity: 1; }
+    100% { opacity: 0.5; }
+}
+
+@keyframes rotateGradient {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+@keyframes fadeScale {
+    0% { opacity: 0; transform: scale(0.95); }
+    100% { opacity: 1; transform: scale(1); }
+}
+
+@keyframes slideUp {
+    0% { opacity: 0; transform: translateY(20px); }
+    100% { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes floatIn {
+    0% { opacity: 0; transform: translateY(20px); }
     100% { opacity: 1; transform: translateY(0); }
 }
+
 @keyframes fadeInUp {
-    0% { opacity: 0; transform: translateY(30px); }
+    0% { opacity: 0; transform: translateY(10px); }
     100% { opacity: 1; transform: translateY(0); }
 }
-@keyframes pulse {
+
+@keyframes heartbeat {
     0% { transform: scale(1); }
-    50% { transform: scale(1.2); }
+    10% { transform: scale(1.2); }
+    20% { transform: scale(0.9); }
+    30% { transform: scale(1.1); }
+    40% { transform: scale(0.95); }
+    50% { transform: scale(1); }
     100% { transform: scale(1); }
 }
+
+@keyframes sparkle {
+    0% { transform: scale(0); opacity: 0; }
+    50% { transform: scale(1.2); opacity: 1; }
+    100% { transform: scale(0); opacity: 0; }
+    }
 """
 # Start the API server
 def start_api_server():
@@ -317,66 +498,67 @@ def analyze_with_loading(text, progress=gr.Progress()):
         trigger_list = "\n".join([f"• {trigger}" for trigger in triggers])
         return f"⚠ Triggers Detected:\n{trigger_list}"
 
-# Update the Gradio interface
+# Update the Gradio interface with new styling
+import gradio as gr
+from model.analyzer import analyze_content
+import asyncio
+import time
+import httpx
+import subprocess
+import atexit
+
+# Keep your existing CSS and server setup code...
+# [Previous code until the interface definition remains the same]
+
+# Update the Gradio interface with fixed button handling
 with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as iface:
     gr.HTML("""
         <div class="treat-title">
-            <h1>TREAT</h1>
-            <p><span class="highlight">T</span>rigger 
-               <span class="highlight">R</span>ecognition for 
-               <span class="highlight">E</span>njoyable and 
-               <span class="highlight">A</span>ppropriate 
-               <span class="highlight">T</span>elevision</p>
+            <h1 data-text="TREAT">TREAT</h1>
+            <p>Trigger Recognition for Enjoyable and Appropriate Television</p>
         </div>
     """)
     
-    with gr.Row():
-        with gr.Column(elem_classes="content-area"):
-            input_text = gr.Textbox(
-                label="Content to Analyze",
-                placeholder="Paste your content here...",
-                lines=8,
-                interactive=True
-            )
-            with gr.Row():
+    with gr.Tabs() as tabs:
+        with gr.Tab("Content Analysis"):  # Changed from TabItem to Tab
+            with gr.Column():
+                input_text = gr.Textbox(
+                    label="ANALYZE CONTENT",
+                    placeholder="Enter the content you want to analyze...",
+                    lines=8
+                )
+                analyze_btn = gr.Button("✨ Analyze")
+        
+        with gr.Tab("Movie Search"):  # Changed from TabItem to Tab
+            with gr.Column():
                 search_query = gr.Textbox(
-                    label="Search Movie Scripts",
-                    placeholder="Enter movie title...",
-                    lines=1,
-                    interactive=True
+                    label="SEARCH MOVIES",
+                    placeholder="Type a movie title to search...",
+                    lines=1
                 )
+                search_button = gr.Button("🔍 Search")
     
-    with gr.Row(elem_classes="center-row"):
-        analyze_btn = gr.Button(
-            "✨ Analyze Content",
-            variant="primary"
-        )
-        search_button = gr.Button("🔍 Search and Analyze Script")
+    output_text = gr.Textbox(
+        label="ANALYSIS RESULTS",
+        lines=5,
+        interactive=False
+    )
     
-    with gr.Row():
-        with gr.Column(elem_classes="results-area"):
-            output_text = gr.Textbox(
-                label="Analysis Results",
-                lines=5,
-                interactive=False
-            )
-            status_text = gr.Markdown(
-                label="Status",
-                value=""
-            )
+    status_text = gr.Markdown(
+        value=""
+    )
     
+    # Define click events
     analyze_btn.click(
         fn=analyze_with_loading,
-        inputs=[input_text],
-        outputs=[output_text],
-        api_name="analyze"
+        inputs=input_text,
+        outputs=output_text
     )
     
     search_button.click(
         fn=analyze_with_progress,
-        inputs=[search_query],
-        outputs=[output_text],
-        show_progress=True
+        inputs=search_query,
+        outputs=output_text
     )
 
     gr.HTML("""
@@ -385,8 +567,6 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as iface:
         </div>
     """)
 
-# Launch the Gradio interface
-
 if __name__ == "__main__":
     iface.launch(
         share=False,