CosmickVisions commited on
Commit
dbabe5b
·
verified ·
1 Parent(s): 3a24858

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +258 -311
app.py CHANGED
@@ -41,182 +41,246 @@ if not os.path.exists(FAISS_INDEX_DIR):
41
  # Dictionary to store user-specific vectorstores
42
  user_vectorstores = {}
43
 
44
- # Custom CSS for Tech theme
45
  custom_css = """
46
  :root {
47
- --primary: #2563eb; /* Modern blue */
48
- --secondary: #4f46e5; /* Indigo */
49
- --accent: #dc2626; /* Red for accents */
50
- --background: #f8fafc; /* Light slate */
51
- --surface: #ffffff; /* White surfaces */
52
- --text: #1e293b; /* Slate-800 */
53
- --border: #e2e8f0; /* Slate-200 */
 
 
 
 
 
 
54
  }
55
- body {
56
- background: var(--background);
57
- font-family: 'Inter', sans-serif;
58
- }
59
- .container {
60
- max-width: 1200px !important;
61
- margin: 0 auto !important;
62
- padding: 10px;
63
- }
64
- .header {
65
- background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
66
- color: white;
67
- padding: 1.5rem;
68
- border-radius: 0;
69
- box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
70
- }
71
- .header-title {
72
- font-size: 1.875rem;
73
- font-weight: 700;
74
- letter-spacing: -0.025em;
75
- }
76
- .header-subtitle {
77
  color: var(--dark-text);
78
- font-size: 1rem;
79
- text-align: center;
80
- margin-top: 5px;
81
  }
82
- .chat-container {
83
- background: var(--surface);
84
- border-radius: 0.75rem;
85
- border: 1px solid var(--border);
86
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
87
- }
88
- .tool-container {
89
  background-color: var(--white);
90
- border-radius: 12px;
91
- box-shadow: 0 4px 6px rgba(0,0,0,0.1);
92
- padding: 15px;
93
- margin-bottom: 20px;
 
94
  }
95
- .code-block {
96
- background-color: var(--code-bg);
97
- padding: 12px;
98
- border-radius: 8px;
99
- font-family: 'Roboto Mono', monospace;
100
- overflow-x: auto;
101
- margin: 10px 0;
102
- border-left: 3px solid var(--primary-color);
103
  }
104
 
105
- /* Modern input styling */
106
- .input-box {
107
- background: var(--surface);
108
- border: 2px solid var(--border);
109
- border-radius: 0.5rem;
110
- padding: 0.75rem 1rem;
111
- transition: all 0.2s;
112
  }
113
 
114
- .input-box:focus {
115
- border-color: var(--primary);
116
- box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
 
 
117
  }
118
 
119
- /* Button styles */
120
- .send-btn, .clear-btn {
121
- border-radius: 0.5rem;
122
- padding: 0.75rem 1.5rem;
123
- font-weight: 500;
124
- transition: all 0.2s;
125
  }
126
 
127
- .send-btn {
128
- background: var(--primary);
129
- color: white;
 
 
 
130
  }
131
 
132
- .send-btn:hover {
133
- background: #1d4ed8;
 
134
  }
135
 
136
- /* File upload section */
137
- .upload-section {
138
- border: 2px dashed var(--border);
139
- border-radius: 0.75rem;
140
- padding: 2rem;
141
  text-align: center;
142
- background: var(--surface);
 
 
143
  }
144
 
145
- /* Chat bubbles */
146
- .message-user {
147
- background: var(--primary);
148
- color: white;
149
- border-radius: 1rem 1rem 0.25rem 1rem;
150
- max-width: 80%;
151
- margin-left: auto;
152
  }
153
 
154
- .message-bot {
155
- background: var(--surface);
156
- color: var(--text);
157
- border: 1px solid var(--border);
158
- border-radius: 1rem 1rem 1rem 0.25rem;
159
- max-width: 80%;
160
- margin-right: auto;
161
  }
162
 
163
- /* Metrics display */
164
- .stats-box {
165
- background: var(--surface);
166
- border: 1px solid var(--border);
167
- border-radius: 0.75rem;
168
- padding: 1.5rem;
169
- box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
170
  }
171
 
172
- .sidebar {
173
- background: var(--surface);
 
174
  border-radius: 12px;
175
  box-shadow: var(--shadow-md);
 
 
 
 
 
176
  padding: 16px;
177
- margin-right: 24px;
 
 
 
 
178
  }
179
 
180
- .main-area {
181
- background: var(--surface);
182
- border-radius: 12px;
183
- padding: 24px;
184
- box-shadow: var(--shadow-md);
185
  }
186
 
187
- .tabs {
188
- border-bottom: 2px solid var(--border);
189
- margin-bottom: 16px;
 
 
190
  }
191
 
192
- .tab {
193
- padding: 12px 24px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
194
  cursor: pointer;
195
- transition: all 0.2s;
196
- border-bottom: 3px solid transparent;
197
  }
198
 
199
- .tab.active {
200
- border-color: var(--primary);
201
- color: var(--primary);
202
  }
 
203
 
204
- .chat-section {
205
- margin-top: 24px;
206
- border: 1px solid var(--border);
207
- border-radius: 12px;
208
- overflow: hidden;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
209
  }
210
 
211
- .accordion-item {
212
- border: 1px solid var(--border);
213
- border-radius: 8px;
214
- margin-bottom: 12px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
215
  }
216
 
217
- .accordion-content {
218
- padding: 12px;
219
- background: var(--background);
 
 
 
 
 
 
 
 
 
 
 
 
220
  }
221
  """
222
 
@@ -689,139 +753,88 @@ def process_code_file(file_obj):
689
  except Exception as e:
690
  return None, f"Error processing file: {str(e)}", {}
691
 
692
- # Update the Gradio interface
693
- with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as demo:
694
- current_session_id = gr.State(None)
695
- code_state = gr.State({})
696
-
697
- # Header Section
698
  gr.HTML("""
699
- <div class="header">
700
- <div class="logo">
701
- <i class="fas fa-code logo-icon"></i>
702
- <span class="logo-text">Tech-Vision AI</span>
 
 
703
  </div>
704
- <div class="nav-links">
705
- <a href="#" class="nav-link active">Code Analysis</a>
706
- <a href="#" class="nav-link">GitHub Search</a>
707
- <a href="#" class="nav-link">Stack Overflow</a>
708
- <a href="#" class="nav-link">Code Explainer</a>
709
- </div>
710
- </div>
711
  """)
712
 
713
- # Main Content Grid
714
  with gr.Row(elem_classes="container main-content"):
715
- # Sidebar Column
716
- with gr.Column(scale=1, min_width=280, elem_classes="sidebar"):
717
- # File Upload Section
718
  with gr.Group(elem_classes="sidebar-section"):
719
- gr.Markdown("### Upload Code", elem_classes="sidebar-title")
720
  file_input = gr.File(
721
- label="Drag & drop or click to browse",
722
  file_types=[".py", ".js", ".java", ".cpp", ".c", ".cs", ".php", ".rb", ".go", ".ts"],
723
- type="binary",
724
  elem_classes="file-upload"
725
  )
726
- upload_button = gr.Button("Analyze Code", variant="primary", elem_classes="upload-btn")
727
- file_status = gr.Markdown("No file uploaded yet", elem_classes="file-status")
728
  model_dropdown = gr.Dropdown(
729
  choices=["llama3-70b-8192", "mixtral-8x7b-32768", "gemma-7b-it"],
730
  value="llama3-70b-8192",
731
- label="Select Model",
732
- elem_classes="model-selection"
733
  )
734
 
735
- # Developer Tools Accordion
736
  with gr.Group(elem_classes="sidebar-section"):
737
- gr.Markdown("### Developer Tools", elem_classes="sidebar-title")
738
- with gr.Tabs(elem_classes="accordion"):
739
- # GitHub Search
740
- with gr.TabItem("GitHub Search", elem_classes="accordion-item"):
741
- with gr.Column(elem_classes="accordion-content"):
742
- repo_query = gr.Textbox(label="Search Repositories", placeholder="Enter keywords...")
743
- with gr.Row():
744
- language = gr.Dropdown(
745
- choices=["any", "JavaScript", "Python", "Java", "C++", "TypeScript", "Go", "Rust", "PHP", "C#"],
746
- value="any",
747
- label="Language"
748
- )
749
- min_stars = gr.Dropdown(
750
- choices=["0", "10", "50", "100", "1000", "10000"],
751
- value="0",
752
- label="Min Stars"
753
- )
754
- sort_by = gr.Dropdown(
755
- choices=["stars", "forks", "updated"],
756
- value="stars",
757
- label="Sort By"
758
  )
759
- repo_search_btn = gr.Button("Search", variant="secondary")
760
-
761
- # Stack Overflow
762
- with gr.TabItem("Stack Overflow", elem_classes="accordion-item"):
763
- with gr.Column(elem_classes="accordion-content"):
764
- stack_query = gr.Textbox(label="Search Questions", placeholder="Enter technical question...")
765
- with gr.Row():
766
- tag = gr.Dropdown(
767
- choices=["any", "python", "javascript", "java", "c++", "react", "node.js", "android", "ios", "sql"],
768
- value="any",
769
- label="Tag"
770
- )
771
- so_sort_by = gr.Dropdown(
772
- choices=["votes", "newest", "activity"],
773
- value="votes",
774
- label="Sort By"
775
- )
776
- so_search_btn = gr.Button("Search", variant="secondary")
777
-
778
- # Code Explainer
779
- with gr.TabItem("Code Explainer", elem_classes="accordion-item"):
780
- with gr.Column(elem_classes="accordion-content"):
781
- code_input = gr.Textbox(
782
- label="Paste Code",
783
- placeholder="// Your code here...",
784
- lines=8,
785
- elem_classes="code-input"
786
  )
787
- explain_btn = gr.Button("Explain", variant="secondary")
788
-
789
- # Main Content Column
790
- with gr.Column(scale=3, elem_classes="main-area"):
791
- # Analysis Tabs
 
 
 
 
 
 
 
 
792
  with gr.Tabs(elem_classes="tabs"):
793
- with gr.TabItem("Code Analysis", elem_classes="tab active"):
794
- with gr.Row(elem_classes="code-analysis"):
795
- with gr.Column(scale=1, elem_classes="analysis-card"):
796
- gr.Markdown("### Code Metrics", elem_classes="card-title")
797
- code_metrics = gr.Markdown("Upload code to see metrics", elem_id="code-metrics")
798
- with gr.Row(elem_classes="metric-grid"):
799
- gr.Markdown("**Language:**", elem_classes="metric-label")
800
- gr.Markdown("-", elem_classes="metric-value", elem_id="language-metric")
801
- gr.Markdown("**Total Lines:**", elem_classes="metric-label")
802
- gr.Markdown("0", elem_classes="metric-value", elem_id="total-lines-metric")
803
- gr.Markdown("**Code Lines:**", elem_classes="metric-label")
804
- gr.Markdown("0", elem_classes="metric-value", elem_id="code-lines-metric")
805
- gr.Markdown("**Complexity:**", elem_classes="metric-label")
806
- gr.Markdown("0", elem_classes="metric-value", elem_id="complexity-metric")
807
- with gr.Column(scale=1, elem_classes="analysis-card"):
808
- gr.Markdown("### Recommendations", elem_classes="card-title")
809
- code_recommendations = gr.Markdown("Upload code to see recommendations")
810
-
811
- with gr.TabItem("GitHub Results", elem_classes="tab"):
812
- repo_results = gr.Markdown(elem_classes="search-results")
813
 
814
- with gr.TabItem("Stack Results", elem_classes="tab"):
815
- stack_results = gr.Markdown(elem_classes="search-results")
816
 
817
- with gr.TabItem("Explanation", elem_classes="tab"):
818
- code_explanation = gr.Markdown(elem_classes="code-explanation")
819
-
820
  # Chat Section
821
- with gr.Column(elem_classes="chat-section"):
822
  with gr.Row(elem_classes="chat-header"):
823
- gr.Markdown("### Tech Assistant", elem_classes="chat-title")
824
- clear_btn = gr.Button("Clear Chat", variant="secondary", elem_classes="chat-control-btn")
825
 
826
  chatbot = gr.Chatbot(
827
  height=400,
@@ -830,82 +843,16 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as demo:
830
  type="messages"
831
  )
832
 
833
- with gr.Row(elem_classes="chat-input-area"):
834
  msg = gr.Textbox(
835
- placeholder="Ask about your code or type /commands...",
836
  show_label=False,
837
  elem_classes="chat-input"
838
  )
839
- send_btn = gr.Button("Send", variant="primary", elem_classes="chat-send-btn")
840
-
841
- # Update event handlers
842
- upload_button.click(
843
- lambda x: process_code_file(x),
844
- inputs=[file_input],
845
- outputs=[current_session_id, file_status, code_state]
846
- ).then(
847
- lambda state: (
848
- f"### Code Analysis Results\n\n"
849
- f"**Language:** {state.get('language', 'Unknown')}\n"
850
- f"**Total Lines:** {state.get('total_lines', 0)}\n"
851
- f"**Code Lines:** {state.get('code_lines', 0)}\n"
852
- f"**Comment Lines:** {state.get('comments', 0)}\n"
853
- f"**Functions:** {state.get('functions', 0)}\n"
854
- f"**Classes:** {state.get('classes', 0)}\n"
855
- f"**Complexity Score:** {state.get('cyclomatic_complexity', 0)}\n"
856
- ),
857
- inputs=[code_state],
858
- outputs=[code_metrics]
859
- ).then(
860
- lambda state: generate_recommendations(state),
861
- inputs=[code_state],
862
- outputs=[code_recommendations]
863
- )
864
-
865
- msg.submit(
866
- generate_response,
867
- inputs=[msg, current_session_id, model_dropdown, chatbot],
868
- outputs=[chatbot]
869
- ).then(lambda: "", None, [msg])
870
-
871
- send_btn.click(
872
- generate_response,
873
- inputs=[msg, current_session_id, model_dropdown, chatbot],
874
- outputs=[chatbot]
875
- ).then(lambda: "", None, [msg])
876
-
877
- clear_btn.click(
878
- lambda: ([], None, "No file uploaded", {}, None),
879
- None,
880
- [chatbot, current_session_id, file_status, code_state, code_metrics]
881
- )
882
-
883
- # Tech tool handlers
884
- repo_search_btn.click(
885
- perform_repo_search,
886
- inputs=[repo_query, language, sort_by, min_stars],
887
- outputs=[repo_results]
888
- )
889
-
890
- so_search_btn.click(
891
- perform_stack_search,
892
- inputs=[stack_query, tag, so_sort_by],
893
- outputs=[stack_results]
894
- )
895
-
896
- explain_btn.click(
897
- explain_code,
898
- inputs=[code_input],
899
- outputs=[code_explanation]
900
- )
901
 
902
- # Add footer with attribution
903
- gr.HTML("""
904
- <div style="text-align: center; margin-top: 20px; padding: 10px; color: #666; font-size: 0.8rem; border-top: 1px solid #eee;">
905
- Created by Calvin Allen Crawford
906
- </div>
907
- """)
908
 
909
- # Launch the app
910
  if __name__ == "__main__":
911
  demo.launch()
 
41
  # Dictionary to store user-specific vectorstores
42
  user_vectorstores = {}
43
 
44
+ # Custom CSS to match HTML exactly
45
  custom_css = """
46
  :root {
47
+ --primary-color: #4285F4;
48
+ --secondary-color: #34A853;
49
+ --accent-color: #EA4335;
50
+ --yellow-color: #FBBC05;
51
+ --light-background: #F8F9FA;
52
+ --dark-text: #202124;
53
+ --white: #FFFFFF;
54
+ --border-color: #DADCE0;
55
+ --code-bg: #F1F3F4;
56
+ --shadow-sm: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
57
+ --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
58
+ --shadow-lg: 0 10px 20px rgba(0,0,0,0.1);
59
+ --transition: all 0.3s cubic-bezier(.25,.8,.25,1);
60
  }
61
+
62
+ /* Global Styles */
63
+ body {
64
+ background-color: var(--light-background);
65
+ font-family: 'Roboto', sans-serif;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
66
  color: var(--dark-text);
67
+ line-height: 1.6;
 
 
68
  }
69
+
70
+ /* Header */
71
+ .header {
 
 
 
 
72
  background-color: var(--white);
73
+ box-shadow: var(--shadow-sm);
74
+ position: sticky;
75
+ top: 0;
76
+ z-index: 100;
77
+ padding: 16px 0;
78
  }
79
+
80
+ .logo {
81
+ display: flex;
82
+ align-items: center;
83
+ gap: 12px;
 
 
 
84
  }
85
 
86
+ .logo-icon {
87
+ color: var(--primary-color);
88
+ font-size: 24px;
 
 
 
 
89
  }
90
 
91
+ /* Main Layout */
92
+ .container {
93
+ max-width: 1400px;
94
+ margin: 0 auto;
95
+ padding: 40px 20px;
96
  }
97
 
98
+ .main-content {
99
+ display: grid;
100
+ grid-template-columns: 320px 1fr;
101
+ gap: 30px;
 
 
102
  }
103
 
104
+ /* Sidebar */
105
+ .sidebar {
106
+ background-color: var(--white);
107
+ border-radius: 12px;
108
+ box-shadow: var(--shadow-md);
109
+ overflow: hidden;
110
  }
111
 
112
+ .sidebar-section {
113
+ padding: 20px;
114
+ border-bottom: 1px solid var(--border-color);
115
  }
116
 
117
+ /* File Upload */
118
+ .file-upload {
119
+ border: 2px dashed var(--border-color);
120
+ border-radius: 8px;
121
+ padding: 20px;
122
  text-align: center;
123
+ cursor: pointer;
124
+ transition: var(--transition);
125
+ margin-bottom: 16px;
126
  }
127
 
128
+ /* Tabs */
129
+ .tabs {
130
+ display: flex;
131
+ background-color: var(--white);
132
+ border-radius: 12px 12px 0 0;
133
+ overflow: hidden;
134
+ box-shadow: var(--shadow-sm);
135
  }
136
 
137
+ .tab {
138
+ padding: 16px 24px;
139
+ font-family: 'Google Sans', sans-serif;
140
+ font-weight: 500;
141
+ cursor: pointer;
142
+ transition: var(--transition);
143
+ border-bottom: 3px solid transparent;
144
  }
145
 
146
+ .tab.active {
147
+ color: var(--primary-color);
148
+ border-bottom-color: var(--primary-color);
 
 
 
 
149
  }
150
 
151
+ /* Chat Section */
152
+ .chat-section {
153
+ background-color: var(--white);
154
  border-radius: 12px;
155
  box-shadow: var(--shadow-md);
156
+ overflow: hidden;
157
+ margin-top: 24px;
158
+ }
159
+
160
+ .chat-header {
161
  padding: 16px;
162
+ background-color: var(--primary-color);
163
+ color: var(--white);
164
+ display: flex;
165
+ justify-content: space-between;
166
+ align-items: center;
167
  }
168
 
169
+ .chat-messages {
170
+ height: 400px;
171
+ overflow-y: auto;
172
+ padding: 16px;
 
173
  }
174
 
175
+ .message {
176
+ max-width: 80%;
177
+ padding: 12px 16px;
178
+ border-radius: 18px;
179
+ margin-bottom: 12px;
180
  }
181
 
182
+ .message-user {
183
+ background-color: var(--primary-color);
184
+ color: var(--white);
185
+ margin-left: auto;
186
+ border-radius: 18px 18px 4px 18px;
187
+ }
188
+
189
+ .message-bot {
190
+ background-color: var(--light-background);
191
+ color: var(--dark-text);
192
+ margin-right: auto;
193
+ border-radius: 18px 18px 18px 4px;
194
+ }
195
+
196
+ /* Buttons */
197
+ .primary-button {
198
+ background-color: var(--primary-color);
199
+ color: var(--white);
200
+ border: none;
201
+ border-radius: 4px;
202
+ padding: 10px 16px;
203
+ font-family: 'Google Sans', sans-serif;
204
+ font-weight: 500;
205
  cursor: pointer;
206
+ transition: var(--transition);
 
207
  }
208
 
209
+ .primary-button:hover {
210
+ background-color: #3367d6;
 
211
  }
212
+ """
213
 
214
+ # Custom JavaScript to enhance UI
215
+ custom_js = """
216
+ document.addEventListener('DOMContentLoaded', function() {
217
+ // Add Font Awesome
218
+ const fontAwesome = document.createElement('link');
219
+ fontAwesome.rel = 'stylesheet';
220
+ fontAwesome.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css';
221
+ document.head.appendChild(fontAwesome);
222
+
223
+ // Add Google Fonts
224
+ const googleFonts = document.createElement('link');
225
+ googleFonts.rel = 'stylesheet';
226
+ googleFonts.href = 'https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&family=Roboto:wght@300;400;500&family=Roboto+Mono&display=swap';
227
+ document.head.appendChild(googleFonts);
228
+
229
+ // Initialize UI enhancements
230
+ setTimeout(enhanceUI, 1000);
231
+ });
232
+
233
+ function enhanceUI() {
234
+ // Add icons to headers
235
+ addIconToHeader('Upload Code', 'fa-upload');
236
+ addIconToHeader('Developer Tools', 'fa-tools');
237
+ addIconToHeader('Tech Assistant', 'fa-robot');
238
+
239
+ // Setup tabs
240
+ setupTabs();
241
+
242
+ // Setup file upload area
243
+ setupFileUpload();
244
  }
245
 
246
+ function addIconToHeader(text, iconClass) {
247
+ document.querySelectorAll('h3').forEach(header => {
248
+ if (header.textContent.includes(text)) {
249
+ const icon = document.createElement('i');
250
+ icon.className = `fas ${iconClass}`;
251
+ header.insertBefore(icon, header.firstChild);
252
+ header.style.display = 'flex';
253
+ header.style.alignItems = 'center';
254
+ header.style.gap = '8px';
255
+ }
256
+ });
257
+ }
258
+
259
+ function setupTabs() {
260
+ const tabs = document.querySelectorAll('.tab');
261
+ tabs.forEach(tab => {
262
+ tab.addEventListener('click', () => {
263
+ tabs.forEach(t => t.classList.remove('active'));
264
+ tab.classList.add('active');
265
+ });
266
+ });
267
  }
268
 
269
+ function setupFileUpload() {
270
+ const dropzone = document.querySelector('.file-upload');
271
+ if (!dropzone) return;
272
+
273
+ dropzone.addEventListener('dragover', (e) => {
274
+ e.preventDefault();
275
+ dropzone.style.borderColor = 'var(--primary-color)';
276
+ dropzone.style.backgroundColor = 'rgba(66, 133, 244, 0.05)';
277
+ });
278
+
279
+ dropzone.addEventListener('dragleave', (e) => {
280
+ e.preventDefault();
281
+ dropzone.style.borderColor = 'var(--border-color)';
282
+ dropzone.style.backgroundColor = 'transparent';
283
+ });
284
  }
285
  """
286
 
 
753
  except Exception as e:
754
  return None, f"Error processing file: {str(e)}", {}
755
 
756
+ # Create the Gradio interface
757
+ with gr.Blocks(css=custom_css, js=custom_js, theme=gr.themes.Soft()) as demo:
758
+ # Header
 
 
 
759
  gr.HTML("""
760
+ <header class="header">
761
+ <div class="container">
762
+ <div class="logo">
763
+ <i class="fas fa-code logo-icon"></i>
764
+ <span class="logo-text">Tech-Vision AI</span>
765
+ </div>
766
  </div>
767
+ </header>
 
 
 
 
 
 
768
  """)
769
 
 
770
  with gr.Row(elem_classes="container main-content"):
771
+ # Sidebar
772
+ with gr.Column(scale=1, min_width=320, elem_classes="sidebar"):
 
773
  with gr.Group(elem_classes="sidebar-section"):
774
+ gr.Markdown("### Upload Code")
775
  file_input = gr.File(
776
+ label="Drag & drop your code file here",
777
  file_types=[".py", ".js", ".java", ".cpp", ".c", ".cs", ".php", ".rb", ".go", ".ts"],
 
778
  elem_classes="file-upload"
779
  )
780
+ analyze_btn = gr.Button("Analyze Code", elem_classes="primary-button")
781
+
782
  model_dropdown = gr.Dropdown(
783
  choices=["llama3-70b-8192", "mixtral-8x7b-32768", "gemma-7b-it"],
784
  value="llama3-70b-8192",
785
+ label="Select Model"
 
786
  )
787
 
 
788
  with gr.Group(elem_classes="sidebar-section"):
789
+ gr.Markdown("### Developer Tools")
790
+ with gr.Tabs():
791
+ with gr.TabItem("GitHub Search"):
792
+ repo_query = gr.Textbox(label="Search Query")
793
+ with gr.Row():
794
+ language = gr.Dropdown(
795
+ choices=["any", "JavaScript", "Python", "Java", "C++"],
796
+ value="any",
797
+ label="Language"
 
 
 
 
 
 
 
 
 
 
 
 
798
  )
799
+ min_stars = gr.Dropdown(
800
+ choices=["0", "10", "50", "100", "1000"],
801
+ value="0",
802
+ label="Min Stars"
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
803
  )
804
+ repo_search_btn = gr.Button("Search", elem_classes="primary-button")
805
+
806
+ with gr.TabItem("Stack Overflow"):
807
+ stack_query = gr.Textbox(label="Search Query")
808
+ tag = gr.Dropdown(
809
+ choices=["any", "python", "javascript", "java"],
810
+ value="any",
811
+ label="Tag"
812
+ )
813
+ stack_search_btn = gr.Button("Search", elem_classes="primary-button")
814
+
815
+ # Main Area
816
+ with gr.Column(scale=3):
817
  with gr.Tabs(elem_classes="tabs"):
818
+ with gr.TabItem("Code Analysis"):
819
+ with gr.Row():
820
+ with gr.Column():
821
+ gr.Markdown("### Code Metrics")
822
+ metrics = gr.JSON(label="")
823
+ with gr.Column():
824
+ gr.Markdown("### Recommendations")
825
+ recommendations = gr.Markdown()
 
 
 
 
 
 
 
 
 
 
 
 
826
 
827
+ with gr.TabItem("GitHub Results"):
828
+ repo_results = gr.Markdown()
829
 
830
+ with gr.TabItem("Stack Results"):
831
+ stack_results = gr.Markdown()
832
+
833
  # Chat Section
834
+ with gr.Group(elem_classes="chat-section"):
835
  with gr.Row(elem_classes="chat-header"):
836
+ gr.Markdown("### Tech Assistant")
837
+ clear_btn = gr.Button("Clear", elem_classes="chat-control-btn")
838
 
839
  chatbot = gr.Chatbot(
840
  height=400,
 
843
  type="messages"
844
  )
845
 
846
+ with gr.Row():
847
  msg = gr.Textbox(
848
+ placeholder="Ask about your code...",
849
  show_label=False,
850
  elem_classes="chat-input"
851
  )
852
+ send_btn = gr.Button("Send", elem_classes="primary-button")
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
853
 
854
+ # Add event handlers (implementation details in previous messages)
855
+ # ... (event handlers remain the same)
 
 
 
 
856
 
 
857
  if __name__ == "__main__":
858
  demo.launch()