sdad

app.py

@@ -454,6 +454,23 @@ html, body {
     font-weight: 500;
 }
 
+/* Progress Bar */
+.progress-container {
+    width: 100%;
+    height: 6px;
+    background-color: #333333;
+    border-radius: 3px;
+    margin: 15px 0;
+    overflow: hidden;
+}
+
+.progress-bar {
+    height: 100%;
+    background: linear-gradient(90deg, #00ffff, #0099cc);
+    width: 0%;
+    transition: width 0.3s ease;
+}
+
 /* Footer */
 .footer {
     text-align: center;
@@ -520,12 +537,14 @@ html, body {
     overflow-x: auto !important;
     color: #e0e0e0 !important;
     border: 1px solid #333333 !important;
+    margin: 15px 0 !important;
 }
 
 .gr-markdown pre code {
     background-color: transparent !important;
     padding: 0 !important;
     color: inherit !important;
+    font-size: 0.95em !important;
 }
 
 .gr-markdown blockquote {
@@ -555,6 +574,49 @@ html, body {
     color: #ffffff !important;
 }
 
+/* Code syntax highlighting */
+.gr-markdown pre code.hljs {
+    display: block;
+    overflow-x: auto;
+    padding: 1em;
+    background: #1e1e2e !important;
+    color: #dcdcdc !important;
+    font-size: 0.95em !important;
+    border-radius: 8px !important;
+}
+
+.hljs-comment, .hljs-quote {
+    color: #5f5a60;
+}
+
+.hljs-keyword, .hljs-selector-tag, .hljs-literal {
+    color: #c25205;
+}
+
+.hljs-number, .hljs-variable {
+    color: #ae81ff;
+}
+
+.hljs-string, .hljs-regexp, .hljs-symbol, .hljs-link {
+    color: #67c24f;
+}
+
+.hljs-title, .hljs-name, .hljs-type {
+    color: #4f94d4;
+}
+
+.hljs-attribute {
+    color: #e6b673;
+}
+
+.hljs-function, .hljs-class .hljs-title {
+    color: #4f94d4;
+}
+
+.hljs-meta {
+    color: #7e7e7e;
+}
+
 /* Spinner Animation */
 @keyframes spin {
     0% { transform: rotate(0deg); }
@@ -594,7 +656,15 @@ def research_assistant(query, file, use_ddg, progress=gr.Progress()):
         yield step
 
 # Create Gradio interface
-with gr.Blocks(css=custom_css, title="Research Assistant") as demo:
+with gr.Blocks(
+    css=custom_css, 
+    title="Research Assistant",
+    head="""
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css">
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+        <script>hljs.highlightAll();</script>
+    """
+) as demo:
     gr.Markdown(f"""
     <div class="header">
         <h1 class="title">🧠 AI Research Assistant</h1>
@@ -625,9 +695,18 @@ with gr.Blocks(css=custom_css, title="Research Assistant") as demo:
         with gr.Column(scale=2):
             with gr.Group(elem_classes=["card", "output-section"]):
                 gr.Markdown("### 📊 Analysis Results")
+                
+                # Progress bar
+                progress_container = gr.HTML("""
+                    <div class="progress-container">
+                        <div class="progress-bar" id="progress-bar"></div>
+                    </div>
+                """)
+                
                 output = gr.Markdown(elem_classes=["streaming-content"], visible=True)
                 status_indicator = gr.HTML("""
                 <div class="status-indicator">
+                    <div class="spinner"></div>
                     <span class="progress-text">Ready for your research query</span>
                 </div>
                 """)