CosmickVisions commited on
Commit
f65fe10
·
verified ·
1 Parent(s): ec162f8

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +232 -172
app.py CHANGED
@@ -49,151 +49,70 @@ if not os.path.exists(FAISS_INDEX_DIR):
49
  # Dictionary to store user-specific vectorstores
50
  user_vectorstores = {}
51
 
52
- # Modern UI HTML Template
53
- MODERN_UI = """
54
- <!DOCTYPE html>
55
- <html lang="en">
56
- <head>
57
- <meta charset="UTF-8">
58
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
59
- <title>Tech-Vision AI | Advanced Code Analysis</title>
60
- <link href="https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&family=Roboto:wght@300;400;500&family=Roboto+Mono&display=swap" rel="stylesheet">
61
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
62
- <style>
63
- /* CSS styles from the original HTML file */
64
- :root {
65
- --primary-color: #4285F4;
66
- --secondary-color: #34A853;
67
- --accent-color: #EA4335;
68
- --yellow-color: #FBBC05;
69
- --light-background: #F8F9FA;
70
- --dark-text: #202124;
71
- --white: #FFFFFF;
72
- --border-color: #DADCE0;
73
- --code-bg: #F1F3F4;
74
- --shadow-sm: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
75
- --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
76
- --shadow-lg: 0 10px 20px rgba(0,0,0,0.1);
77
- --transition: all 0.3s cubic-bezier(.25,.8,.25,1);
78
- }
79
-
80
- * {
81
- margin: 0;
82
- padding: 0;
83
- box-sizing: border-box;
84
- }
85
-
86
- body {
87
- background-color: var(--light-background);
88
- font-family: 'Roboto', sans-serif;
89
- color: var(--dark-text);
90
- line-height: 1.6;
91
- }
92
-
93
- .container {
94
- max-width: 1400px;
95
- margin: 0 auto;
96
- padding: 0 20px;
97
- }
98
-
99
- /* Add all other CSS styles from the HTML file here */
100
- /* ... (include all CSS content from the provided HTML file) ... */
101
- </style>
102
- </head>
103
- <body>
104
- <!-- Header Section -->
105
- <header>
106
- <div class="container">
107
- <nav class="navbar">
108
- <div class="logo">
109
- <i class="fas fa-code logo-icon"></i>
110
- <span class="logo-text">Tech-Vision AI</span>
111
- </div>
112
- <div class="nav-links">
113
- <a href="#" class="nav-link active" data-tab-trigger="code-analysis">Code Analysis</a>
114
- <a href="#" class="nav-link" data-tab-trigger="github-results">GitHub Search</a>
115
- <a href="#" class="nav-link" data-tab-trigger="stack-results">Stack Overflow</a>
116
- <a href="#" class="nav-link" data-tab-trigger="code-explanation">Code Explainer</a>
117
- </div>
118
- </nav>
119
- </div>
120
- </header>
121
-
122
- <!-- Main Content -->
123
- <div class="container">
124
- <div class="main-content">
125
- <!-- Sidebar Section -->
126
- <div class="sidebar">
127
- <!-- File Upload Section -->
128
- <div class="sidebar-section">
129
- <h2 class="sidebar-title"><i class="fas fa-upload"></i> Upload Code</h2>
130
- <div class="file-upload" id="dropzone">
131
- <input type="file" id="file-input" hidden accept=".py,.js,.java,.cpp,.c,.cs,.php,.rb,.go,.ts">
132
- <i class="fas fa-file-code"></i>
133
- <p>Drag & drop your code file here</p>
134
- <span>or click to browse</span>
135
- </div>
136
- <button class="upload-btn" id="analyze-btn">
137
- <i class="fas fa-search"></i> Analyze Code
138
- </button>
139
- <div class="model-selection">
140
- <select id="model-dropdown">
141
- <option value="llama3-70b-8192">llama3-70b-8192</option>
142
- <option value="mixtral-8x7b-32768">mixtral-8x7b-32768</option>
143
- <option value="gemma-7b-it">gemma-7b-it</option>
144
- </select>
145
- </div>
146
- </div>
147
-
148
- <!-- Tools Section -->
149
- <div class="sidebar-section">
150
- <h2 class="sidebar-title"><i class="fas fa-tools"></i> Developer Tools</h2>
151
- <div class="accordion">
152
- <!-- Include all tool sections from the HTML -->
153
- <!-- ... (GitHub Search, Stack Overflow, Code Explainer) ... -->
154
- </div>
155
- </div>
156
-
157
- <!-- Status Section -->
158
- <div class="sidebar-section">
159
- <h2 class="sidebar-title"><i class="fas fa-info-circle"></i> Status</h2>
160
- <div id="file-status">No file uploaded yet</div>
161
- </div>
162
- </div>
163
-
164
- <!-- Main Area -->
165
- <div class="main-area">
166
- <!-- Tabs Navigation -->
167
- <div class="tabs">
168
- <div class="tab active" data-tab="code-analysis">Code Analysis</div>
169
- <div class="tab" data-tab="github-results">GitHub Results</div>
170
- <div class="tab" data-tab="stack-results">Stack Overflow Results</div>
171
- <div class="tab" data-tab="code-explanation">Code Explanation</div>
172
- </div>
173
-
174
- <!-- Tab Content -->
175
- <div class="tab-content">
176
- <!-- Include all tab panes from the HTML -->
177
- <!-- ... (Code Analysis, GitHub Results, etc) ... -->
178
- </div>
179
-
180
- <!-- Chat Section -->
181
- <div class="chat-section">
182
- <!-- Chat interface from HTML -->
183
- </div>
184
- </div>
185
- </div>
186
- </div>
187
-
188
- <script>
189
- // JavaScript from the original implementation
190
- document.addEventListener('DOMContentLoaded', () => {
191
- // All JavaScript functionality
192
- // ... (include all JavaScript from previous implementation) ...
193
- });
194
- </script>
195
- </body>
196
- </html>
197
  """
198
 
199
  # Helper functions for code analysis
@@ -665,40 +584,181 @@ def process_code_file(file_obj):
665
  except Exception as e:
666
  return None, f"Error processing file: {str(e)}", {}
667
 
668
- # Gradio Interface
669
- with gr.Blocks(css=MODERN_UI, analytics_enabled=False) as demo:
670
  current_session_id = gr.State(None)
671
  code_state = gr.State({})
672
 
673
- # Hidden components for functionality
674
- file_input = gr.File(visible=False)
675
- chat_history = gr.State([])
 
 
 
676
 
677
- # Main UI
678
- gr.HTML(MODERN_UI)
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
679
 
680
- # Event handlers
681
- def process_uploaded_file(file):
682
- session_id, status_msg, metrics = process_code_file(file)
683
- return {
684
- "session_id": session_id,
685
- "status": status_msg,
686
- "metrics": metrics
687
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
688
 
689
- def handle_chat(message, session_id, model_name, history):
690
- updated_history = generate_response(message, session_id, model_name, history)
691
- return updated_history[-1]["content"] if updated_history else ""
 
 
692
 
693
- # API endpoints
694
- demo.api_endpoints = [
695
- ["/api/analyze", process_uploaded_file, "POST"],
696
- ["/api/chat", handle_chat, "POST"],
697
- ["/api/github_search", search_github_repos, "POST"],
698
- ["/api/stack_search", search_stackoverflow, "POST"],
699
- ["/api/explain_code", explain_code, "POST"]
700
- ]
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
701
 
702
- # Launch the application
703
  if __name__ == "__main__":
704
  demo.launch()
 
49
  # Dictionary to store user-specific vectorstores
50
  user_vectorstores = {}
51
 
52
+ # Custom CSS for Tech theme
53
+ custom_css = """
54
+ :root {
55
+ --primary-color: #4285F4;
56
+ --secondary-color: #34A853;
57
+ --accent-color: #EA4335;
58
+ --light-background: #F8F9FA;
59
+ --dark-text: #202124;
60
+ --white: #FFFFFF;
61
+ --border-color: #DADCE0;
62
+ --code-bg: #F1F3F4;
63
+ }
64
+ body {
65
+ background-color: var(--light-background);
66
+ font-family: 'Google Sans', 'Roboto', sans-serif;
67
+ }
68
+ .container {
69
+ max-width: 1200px !important;
70
+ margin: 0 auto !important;
71
+ padding: 10px;
72
+ }
73
+ .header {
74
+ background-color: var(--white);
75
+ border-bottom: 1px solid var(--border-color);
76
+ padding: 15px 0;
77
+ margin-bottom: 20px;
78
+ border-radius: 12px 12px 0 0;
79
+ box-shadow: 0 2px 4px rgba(0,0,0,0.05);
80
+ }
81
+ .header-title {
82
+ color: var(--primary-color);
83
+ font-size: 1.8rem;
84
+ font-weight: 700;
85
+ text-align: center;
86
+ }
87
+ .header-subtitle {
88
+ color: var(--dark-text);
89
+ font-size: 1rem;
90
+ text-align: center;
91
+ margin-top: 5px;
92
+ }
93
+ .chat-container {
94
+ border-radius: 12px !important;
95
+ box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
96
+ background-color: var(--white) !important;
97
+ border: 1px solid var(--border-color) !important;
98
+ min-height: 500px;
99
+ }
100
+ .tool-container {
101
+ background-color: var(--white);
102
+ border-radius: 12px;
103
+ box-shadow: 0 4px 6px rgba(0,0,0,0.1);
104
+ padding: 15px;
105
+ margin-bottom: 20px;
106
+ }
107
+ .code-block {
108
+ background-color: var(--code-bg);
109
+ padding: 12px;
110
+ border-radius: 8px;
111
+ font-family: 'Roboto Mono', monospace;
112
+ overflow-x: auto;
113
+ margin: 10px 0;
114
+ border-left: 3px solid var(--primary-color);
115
+ }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
116
  """
117
 
118
  # Helper functions for code analysis
 
584
  except Exception as e:
585
  return None, f"Error processing file: {str(e)}", {}
586
 
587
+ # Update the Gradio interface
588
+ with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as demo:
589
  current_session_id = gr.State(None)
590
  code_state = gr.State({})
591
 
592
+ gr.HTML("""
593
+ <div class="header">
594
+ <div class="header-title">Tech-Vision AI</div>
595
+ <div class="header-subtitle">Advanced Code Analysis & Technical Assistant</div>
596
+ </div>
597
+ """)
598
 
599
+ with gr.Row(elem_classes="container"):
600
+ with gr.Column(scale=1, min_width=300):
601
+ file_input = gr.File(
602
+ label="Upload Code File",
603
+ file_types=[".py", ".js", ".java", ".cpp", ".c", ".cs", ".php", ".rb", ".go", ".ts"],
604
+ type="binary"
605
+ )
606
+ upload_button = gr.Button("Analyze Code", variant="primary")
607
+ file_status = gr.Markdown("No file uploaded yet")
608
+ model_dropdown = gr.Dropdown(
609
+ choices=["llama3-70b-8192", "mixtral-8x7b-32768", "gemma-7b-it"],
610
+ value="llama3-70b-8192",
611
+ label="Select Model"
612
+ )
613
+
614
+ # Developer Tools Section
615
+ gr.Markdown("### Developer Tools", elem_classes="tool-title")
616
+ with gr.Group(elem_classes="tool-container"): # Replace Box with Group
617
+ with gr.Tabs():
618
+ with gr.TabItem("GitHub Search"):
619
+ repo_query = gr.Textbox(label="Search Query", placeholder="Enter keywords to search for repositories")
620
+ with gr.Row():
621
+ language = gr.Dropdown(
622
+ choices=["any", "JavaScript", "Python", "Java", "C++", "TypeScript", "Go", "Rust", "PHP", "C#"],
623
+ value="any",
624
+ label="Language"
625
+ )
626
+ min_stars = gr.Dropdown(
627
+ choices=["0", "10", "50", "100", "1000", "10000"],
628
+ value="0",
629
+ label="Min Stars"
630
+ )
631
+ sort_by = gr.Dropdown(
632
+ choices=["stars", "forks", "updated"],
633
+ value="stars",
634
+ label="Sort By"
635
+ )
636
+ repo_search_btn = gr.Button("Search Repositories")
637
+
638
+ with gr.TabItem("Stack Overflow"):
639
+ stack_query = gr.Textbox(label="Search Query", placeholder="Enter your technical question")
640
+ with gr.Row():
641
+ tag = gr.Dropdown(
642
+ choices=["any", "python", "javascript", "java", "c++", "react", "node.js", "android", "ios", "sql"],
643
+ value="any",
644
+ label="Tag"
645
+ )
646
+ so_sort_by = gr.Dropdown(
647
+ choices=["votes", "newest", "activity"],
648
+ value="votes",
649
+ label="Sort By"
650
+ )
651
+ so_search_btn = gr.Button("Search Stack Overflow")
652
+
653
+ with gr.TabItem("Code Explainer"):
654
+ code_input = gr.Textbox(
655
+ label="Code to Explain",
656
+ placeholder="Paste your code here...",
657
+ lines=10
658
+ )
659
+ explain_btn = gr.Button("Explain Code")
660
+
661
+ with gr.Column(scale=2, min_width=600):
662
+ with gr.Tabs():
663
+ with gr.TabItem("Code Analysis"):
664
+ with gr.Column(elem_classes="code-viewer-container"):
665
+ code_metrics = gr.Markdown("No code analyzed yet", elem_classes="stats-box")
666
+ code_recommendations = gr.Markdown("", elem_classes="recommendations-box")
667
+
668
+ with gr.TabItem("GitHub Results"):
669
+ repo_results = gr.Markdown("Search for repositories to see results here")
670
+
671
+ with gr.TabItem("Stack Overflow Results"):
672
+ stack_results = gr.Markdown("Search for questions to see results here")
673
+
674
+ with gr.TabItem("Code Explanation"):
675
+ code_explanation = gr.Markdown("Paste your code and click 'Explain Code' to see an explanation here")
676
 
677
+ with gr.Row(elem_classes="container"):
678
+ with gr.Column(scale=2, min_width=600):
679
+ chatbot = gr.Chatbot(
680
+ height=500,
681
+ show_copy_button=True,
682
+ elem_classes="chat-container",
683
+ type="messages"
684
+ )
685
+ with gr.Row():
686
+ msg = gr.Textbox(
687
+ show_label=False,
688
+ placeholder="Ask about your code, type /github to search repos, or /stack to search Stack Overflow...",
689
+ scale=5
690
+ )
691
+ send_btn = gr.Button("Send", scale=1)
692
+ clear_btn = gr.Button("Clear Conversation")
693
+
694
+ # Update event handlers
695
+ upload_button.click(
696
+ lambda x: process_code_file(x),
697
+ inputs=[file_input],
698
+ outputs=[current_session_id, file_status, code_state]
699
+ ).then(
700
+ lambda state: (
701
+ f"### Code Analysis Results\n\n"
702
+ f"**Language:** {state.get('language', 'Unknown')}\n"
703
+ f"**Total Lines:** {state.get('total_lines', 0)}\n"
704
+ f"**Code Lines:** {state.get('code_lines', 0)}\n"
705
+ f"**Comment Lines:** {state.get('comments', 0)}\n"
706
+ f"**Functions:** {state.get('functions', 0)}\n"
707
+ f"**Classes:** {state.get('classes', 0)}\n"
708
+ f"**Complexity Score:** {state.get('cyclomatic_complexity', 0)}\n"
709
+ ),
710
+ inputs=[code_state],
711
+ outputs=[code_metrics]
712
+ ).then(
713
+ lambda state: generate_recommendations(state),
714
+ inputs=[code_state],
715
+ outputs=[code_recommendations]
716
+ )
717
 
718
+ msg.submit(
719
+ generate_response,
720
+ inputs=[msg, current_session_id, model_dropdown, chatbot],
721
+ outputs=[chatbot]
722
+ ).then(lambda: "", None, [msg])
723
 
724
+ send_btn.click(
725
+ generate_response,
726
+ inputs=[msg, current_session_id, model_dropdown, chatbot],
727
+ outputs=[chatbot]
728
+ ).then(lambda: "", None, [msg])
729
+
730
+ clear_btn.click(
731
+ lambda: ([], None, "No file uploaded", {}, None),
732
+ None,
733
+ [chatbot, current_session_id, file_status, code_state, code_metrics]
734
+ )
735
+
736
+ # Tech tool handlers
737
+ repo_search_btn.click(
738
+ perform_repo_search,
739
+ inputs=[repo_query, language, sort_by, min_stars],
740
+ outputs=[repo_results]
741
+ )
742
+
743
+ so_search_btn.click(
744
+ perform_stack_search,
745
+ inputs=[stack_query, tag, so_sort_by],
746
+ outputs=[stack_results]
747
+ )
748
+
749
+ explain_btn.click(
750
+ explain_code,
751
+ inputs=[code_input],
752
+ outputs=[code_explanation]
753
+ )
754
+
755
+ # Add footer with attribution
756
+ gr.HTML("""
757
+ <div style="text-align: center; margin-top: 20px; padding: 10px; color: #666; font-size: 0.8rem; border-top: 1px solid #eee;">
758
+ Created by Calvin Allen Crawford
759
+ </div>
760
+ """)
761
 
762
+ # Launch the app
763
  if __name__ == "__main__":
764
  demo.launch()