Update app.py

app.py

@@ -176,6 +176,56 @@ body {
     padding: 1.5rem;
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
 }
+
+.sidebar {
+    background: var(--surface);
+    border-radius: 12px;
+    box-shadow: var(--shadow-md);
+    padding: 16px;
+    margin-right: 24px;
+}
+
+.main-area {
+    background: var(--surface);
+    border-radius: 12px;
+    padding: 24px;
+    box-shadow: var(--shadow-md);
+}
+
+.tabs {
+    border-bottom: 2px solid var(--border);
+    margin-bottom: 16px;
+}
+
+.tab {
+    padding: 12px 24px;
+    cursor: pointer;
+    transition: all 0.2s;
+    border-bottom: 3px solid transparent;
+}
+
+.tab.active {
+    border-color: var(--primary);
+    color: var(--primary);
+}
+
+.chat-section {
+    margin-top: 24px;
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    overflow: hidden;
+}
+
+.accordion-item {
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    margin-bottom: 12px;
+}
+
+.accordion-content {
+    padding: 12px;
+    background: var(--background);
+}
 """
 
 # Helper functions for code analysis
@@ -652,108 +702,149 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as demo:
     current_session_id = gr.State(None)
     code_state = gr.State({})
     
+    # Header Section
     gr.HTML("""
     <div class="header">
-        <div class="header-title">Tech-Vision AI</div>
-        <div class="header-subtitle">Advanced Code Analysis & Technical Assistant</div>
+        <div class="logo">
+            <i class="fas fa-code logo-icon"></i>
+            <span class="logo-text">Tech-Vision AI</span>
+        </div>
+        <div class="nav-links">
+            <a href="#" class="nav-link active">Code Analysis</a>
+            <a href="#" class="nav-link">GitHub Search</a>
+            <a href="#" class="nav-link">Stack Overflow</a>
+            <a href="#" class="nav-link">Code Explainer</a>
+        </div>
     </div>
     """)
     
-    with gr.Row(elem_classes="container"):
-        with gr.Column(scale=1, min_width=300):
-            file_input = gr.File(
-                label="Upload Code File",
-                file_types=[".py", ".js", ".java", ".cpp", ".c", ".cs", ".php", ".rb", ".go", ".ts"],
-                type="binary"
-            )
-            upload_button = gr.Button("Analyze Code", variant="primary")
-            file_status = gr.Markdown("No file uploaded yet")
-            model_dropdown = gr.Dropdown(
-                choices=["llama3-70b-8192", "mixtral-8x7b-32768", "gemma-7b-it"],
-                value="llama3-70b-8192",
-                label="Select Model"
-            )
+    # Main Content Grid
+    with gr.Row(elem_classes="container main-content"):
+        # Sidebar Column
+        with gr.Column(scale=1, min_width=280, elem_classes="sidebar"):
+            # File Upload Section
+            with gr.Group(elem_classes="sidebar-section"):
+                gr.Markdown("### Upload Code", elem_classes="sidebar-title")
+                file_input = gr.File(
+                    label="Drag & drop or click to browse",
+                    file_types=[".py", ".js", ".java", ".cpp", ".c", ".cs", ".php", ".rb", ".go", ".ts"],
+                    type="binary",
+                    elem_classes="file-upload"
+                )
+                upload_button = gr.Button("Analyze Code", variant="primary", elem_classes="upload-btn")
+                file_status = gr.Markdown("No file uploaded yet", elem_classes="file-status")
+                model_dropdown = gr.Dropdown(
+                    choices=["llama3-70b-8192", "mixtral-8x7b-32768", "gemma-7b-it"],
+                    value="llama3-70b-8192",
+                    label="Select Model",
+                    elem_classes="model-selection"
+                )
             
-            # Developer Tools Section
-            gr.Markdown("### Developer Tools", elem_classes="tool-title")
-            with gr.Group(elem_classes="tool-container"):  # Replace Box with Group
-                with gr.Tabs():
-                    with gr.TabItem("GitHub Search"):
-                        repo_query = gr.Textbox(label="Search Query", placeholder="Enter keywords to search for repositories")
-                        with gr.Row():
-                            language = gr.Dropdown(
-                                choices=["any", "JavaScript", "Python", "Java", "C++", "TypeScript", "Go", "Rust", "PHP", "C#"],
-                                value="any",
-                                label="Language"
-                            )
-                            min_stars = gr.Dropdown(
-                                choices=["0", "10", "50", "100", "1000", "10000"],
-                                value="0",
-                                label="Min Stars"
+            # Developer Tools Accordion
+            with gr.Group(elem_classes="sidebar-section"):
+                gr.Markdown("### Developer Tools", elem_classes="sidebar-title")
+                with gr.Tabs(elem_classes="accordion"):
+                    # GitHub Search
+                    with gr.TabItem("GitHub Search", elem_classes="accordion-item"):
+                        with gr.Column(elem_classes="accordion-content"):
+                            repo_query = gr.Textbox(label="Search Repositories", placeholder="Enter keywords...")
+                            with gr.Row():
+                                language = gr.Dropdown(
+                                    choices=["any", "JavaScript", "Python", "Java", "C++", "TypeScript", "Go", "Rust", "PHP", "C#"],
+                                    value="any",
+                                    label="Language"
+                                )
+                                min_stars = gr.Dropdown(
+                                    choices=["0", "10", "50", "100", "1000", "10000"],
+                                    value="0",
+                                    label="Min Stars"
+                                )
+                            sort_by = gr.Dropdown(
+                                choices=["stars", "forks", "updated"],
+                                value="stars",
+                                label="Sort By"
                             )
-                        sort_by = gr.Dropdown(
-                            choices=["stars", "forks", "updated"],
-                            value="stars",
-                            label="Sort By"
-                        )
-                        repo_search_btn = gr.Button("Search Repositories")
+                            repo_search_btn = gr.Button("Search", variant="secondary")
                     
-                    with gr.TabItem("Stack Overflow"):
-                        stack_query = gr.Textbox(label="Search Query", placeholder="Enter your technical question")
-                        with gr.Row():
-                            tag = gr.Dropdown(
-                                choices=["any", "python", "javascript", "java", "c++", "react", "node.js", "android", "ios", "sql"],
-                                value="any",
-                                label="Tag"
-                            )
-                            so_sort_by = gr.Dropdown(
-                                choices=["votes", "newest", "activity"],
-                                value="votes",
-                                label="Sort By"
+                    # Stack Overflow
+                    with gr.TabItem("Stack Overflow", elem_classes="accordion-item"):
+                        with gr.Column(elem_classes="accordion-content"):
+                            stack_query = gr.Textbox(label="Search Questions", placeholder="Enter technical question...")
+                            with gr.Row():
+                                tag = gr.Dropdown(
+                                    choices=["any", "python", "javascript", "java", "c++", "react", "node.js", "android", "ios", "sql"],
+                                    value="any",
+                                    label="Tag"
+                                )
+                                so_sort_by = gr.Dropdown(
+                                    choices=["votes", "newest", "activity"],
+                                    value="votes",
+                                    label="Sort By"
+                                )
+                            so_search_btn = gr.Button("Search", variant="secondary")
+                    
+                    # Code Explainer
+                    with gr.TabItem("Code Explainer", elem_classes="accordion-item"):
+                        with gr.Column(elem_classes="accordion-content"):
+                            code_input = gr.Textbox(
+                                label="Paste Code", 
+                                placeholder="// Your code here...",
+                                lines=8,
+                                elem_classes="code-input"
                             )
-                        so_search_btn = gr.Button("Search Stack Overflow")
+                            explain_btn = gr.Button("Explain", variant="secondary")
+
+        # Main Content Column
+        with gr.Column(scale=3, elem_classes="main-area"):
+            # Analysis Tabs
+            with gr.Tabs(elem_classes="tabs"):
+                with gr.TabItem("Code Analysis", elem_classes="tab active"):
+                    with gr.Row(elem_classes="code-analysis"):
+                        with gr.Column(scale=1, elem_classes="analysis-card"):
+                            gr.Markdown("### Code Metrics", elem_classes="card-title")
+                            with gr.Row(elem_classes="metric-grid"):
+                                gr.Markdown("**Language:**", elem_classes="metric-label")
+                                gr.Markdown("-", elem_classes="metric-value", elem_id="language-metric")
+                                gr.Markdown("**Total Lines:**", elem_classes="metric-label")
+                                gr.Markdown("0", elem_classes="metric-value", elem_id="total-lines-metric")
+                                gr.Markdown("**Code Lines:**", elem_classes="metric-label")
+                                gr.Markdown("0", elem_classes="metric-value", elem_id="code-lines-metric")
+                                gr.Markdown("**Complexity:**", elem_classes="metric-label")
+                                gr.Markdown("0", elem_classes="metric-value", elem_id="complexity-metric")
+                        with gr.Column(scale=1, elem_classes="analysis-card"):
+                            gr.Markdown("### Recommendations", elem_classes="card-title")
+                            code_recommendations = gr.Markdown("Upload code to see recommendations")
                 
-                    with gr.TabItem("Code Explainer"):
-                        code_input = gr.Textbox(
-                            label="Code to Explain", 
-                            placeholder="Paste your code here...",
-                            lines=10
-                        )
-                        explain_btn = gr.Button("Explain Code")
+                with gr.TabItem("GitHub Results", elem_classes="tab"):
+                    repo_results = gr.Markdown(elem_classes="search-results")
                 
-        with gr.Column(scale=2, min_width=600):
-            with gr.Tabs():
-                with gr.TabItem("Code Analysis"):
-                    with gr.Column(elem_classes="code-viewer-container"):
-                        code_metrics = gr.Markdown("No code analyzed yet", elem_classes="stats-box")
-                        code_recommendations = gr.Markdown("", elem_classes="recommendations-box")
+                with gr.TabItem("Stack Results", elem_classes="tab"):
+                    stack_results = gr.Markdown(elem_classes="search-results")
                 
-                with gr.TabItem("GitHub Results"):
-                    repo_results = gr.Markdown("Search for repositories to see results here")
+                with gr.TabItem("Explanation", elem_classes="tab"):
+                    code_explanation = gr.Markdown(elem_classes="code-explanation")
+
+            # Chat Section
+            with gr.Column(elem_classes="chat-section"):
+                with gr.Row(elem_classes="chat-header"):
+                    gr.Markdown("### Tech Assistant", elem_classes="chat-title")
+                    clear_btn = gr.Button("Clear Chat", variant="secondary", elem_classes="chat-control-btn")
                 
-                with gr.TabItem("Stack Overflow Results"):
-                    stack_results = gr.Markdown("Search for questions to see results here")
-                    
-                with gr.TabItem("Code Explanation"):
-                    code_explanation = gr.Markdown("Paste your code and click 'Explain Code' to see an explanation here")
-    
-    with gr.Row(elem_classes="container"):
-        with gr.Column(scale=2, min_width=600):
-            chatbot = gr.Chatbot(
-                height=500, 
-                show_copy_button=True, 
-                elem_classes="chat-container",
-                type="messages"
-            )
-            with gr.Row():
-                msg = gr.Textbox(
-                    show_label=False, 
-                    placeholder="Ask about your code, type /github to search repos, or /stack to search Stack Overflow...", 
-                    scale=5
+                chatbot = gr.Chatbot(
+                    height=400,
+                    elem_classes="chat-messages",
+                    bubble_full_width=False,
+                    show_copy_button=True
                 )
-                send_btn = gr.Button("Send", scale=1)
-            clear_btn = gr.Button("Clear Conversation")
-    
+                
+                with gr.Row(elem_classes="chat-input-area"):
+                    msg = gr.Textbox(
+                        placeholder="Ask about your code or type /commands...",
+                        show_label=False,
+                        elem_classes="chat-input"
+                    )
+                    send_btn = gr.Button("Send", variant="primary", elem_classes="chat-send-btn")
+
     # Update event handlers
     upload_button.click(
         lambda x: process_code_file(x),