Spaces:

CosmickVisions
/

Tech-Vision

Sleeping

App Files Files Community

CosmickVisions commited on 12 days ago

Commit

ec162f8

verified ·

1 Parent(s): 4c6c992

Update app.py

Browse files

Files changed (1) hide show

app.py +173 -233

app.py CHANGED Viewed

@@ -49,70 +49,151 @@ if not os.path.exists(FAISS_INDEX_DIR):
 # Dictionary to store user-specific vectorstores
 user_vectorstores = {}
-# Custom CSS for Tech theme
-custom_css = """
-:root {
-    --primary-color: #4285F4;
-    --secondary-color: #34A853;
-    --accent-color: #EA4335;
-    --light-background: #F8F9FA;
-    --dark-text: #202124;
-    --white: #FFFFFF;
-    --border-color: #DADCE0;
-    --code-bg: #F1F3F4;
-}
-body {
-    background-color: var(--light-background);
-    font-family: 'Google Sans', 'Roboto', sans-serif;
-}
-.container {
-    max-width: 1200px !important;
-    margin: 0 auto !important;
-    padding: 10px;
-}
-.header {
-    background-color: var(--white);
-    border-bottom: 1px solid var(--border-color);
-    padding: 15px 0;
-    margin-bottom: 20px;
-    border-radius: 12px 12px 0 0;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
-}
-.header-title {
-    color: var(--primary-color);
-    font-size: 1.8rem;
-    font-weight: 700;
-    text-align: center;
-}
-.header-subtitle {
-    color: var(--dark-text);
-    font-size: 1rem;
-    text-align: center;
-    margin-top: 5px;
-}
-.chat-container {
-    border-radius: 12px !important;
-    box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
-    background-color: var(--white) !important;
-    border: 1px solid var(--border-color) !important;
-    min-height: 500px;
-}
-.tool-container {
-    background-color: var(--white);
-    border-radius: 12px;
-    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
-    padding: 15px;
-    margin-bottom: 20px;
-}
-.code-block {
-    background-color: var(--code-bg);
-    padding: 12px;
-    border-radius: 8px;
-    font-family: 'Roboto Mono', monospace;
-    overflow-x: auto;
-    margin: 10px 0;
-    border-left: 3px solid var(--primary-color);
-}
 """
 # Helper functions for code analysis
@@ -584,181 +665,40 @@ def process_code_file(file_obj):
     except Exception as e:
         return None, f"Error processing file: {str(e)}", {}
-# Update the Gradio interface
-with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as demo:
     current_session_id = gr.State(None)
     code_state = gr.State({})
-    gr.HTML("""
-    <div class="header">
-        <div class="header-title">Tech-Vision AI</div>
-        <div class="header-subtitle">Advanced Code Analysis & Technical Assistant</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"
-            )
-            # 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"
-                            )
-                        sort_by = gr.Dropdown(
-                            choices=["stars", "forks", "updated"],
-                            value="stars",
-                            label="Sort By"
-                        )
-                        repo_search_btn = gr.Button("Search Repositories")
-                    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"
-                            )
-                        so_search_btn = gr.Button("Search Stack Overflow")
-                    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.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("GitHub Results"):
-                    repo_results = gr.Markdown("Search for repositories to see results here")
-                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
-                )
-                send_btn = gr.Button("Send", scale=1)
-            clear_btn = gr.Button("Clear Conversation")
-    # Update event handlers
-    upload_button.click(
-        lambda x: process_code_file(x),
-        inputs=[file_input],
-        outputs=[current_session_id, file_status, code_state]
-    ).then(
-        lambda state: (
-            f"### Code Analysis Results\n\n"
-            f"**Language:** {state.get('language', 'Unknown')}\n"
-            f"**Total Lines:** {state.get('total_lines', 0)}\n"
-            f"**Code Lines:** {state.get('code_lines', 0)}\n"
-            f"**Comment Lines:** {state.get('comments', 0)}\n"
-            f"**Functions:** {state.get('functions', 0)}\n"
-            f"**Classes:** {state.get('classes', 0)}\n"
-            f"**Complexity Score:** {state.get('cyclomatic_complexity', 0)}\n"
-        ),
-        inputs=[code_state],
-        outputs=[code_metrics]
-    ).then(
-        lambda state: generate_recommendations(state),
-        inputs=[code_state],
-        outputs=[code_recommendations]
-    )
-    msg.submit(
-        generate_response,
-        inputs=[msg, current_session_id, model_dropdown, chatbot],
-        outputs=[chatbot]
-    ).then(lambda: "", None, [msg])
-    send_btn.click(
-        generate_response,
-        inputs=[msg, current_session_id, model_dropdown, chatbot],
-        outputs=[chatbot]
-    ).then(lambda: "", None, [msg])
-    clear_btn.click(
-        lambda: ([], None, "No file uploaded", {}, None),
-        None,
-        [chatbot, current_session_id, file_status, code_state, code_metrics]
-    )
-    # Tech tool handlers
-    repo_search_btn.click(
-        perform_repo_search,
-        inputs=[repo_query, language, sort_by, min_stars],
-        outputs=[repo_results]
-    )
-    so_search_btn.click(
-        perform_stack_search,
-        inputs=[stack_query, tag, so_sort_by],
-        outputs=[stack_results]
-    )
-    explain_btn.click(
-        explain_code,
-        inputs=[code_input],
-        outputs=[code_explanation]
-    )
-# Add footer with attribution
-gr.HTML("""
-<div style="text-align: center; margin-top: 20px; padding: 10px; color: #666; font-size: 0.8rem; border-top: 1px solid #eee;">
-    Created by Calvin Allen Crawford
-</div>
-""")
-# Launch the app
 if __name__ == "__main__":
-    demo.launch()

 # Dictionary to store user-specific vectorstores
 user_vectorstores = {}
+# Modern UI HTML Template
+MODERN_UI = """
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Tech-Vision AI | Advanced Code Analysis</title>
+    <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">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        /* CSS styles from the original HTML file */
+        :root {
+            --primary-color: #4285F4;
+            --secondary-color: #34A853;
+            --accent-color: #EA4335;
+            --yellow-color: #FBBC05;
+            --light-background: #F8F9FA;
+            --dark-text: #202124;
+            --white: #FFFFFF;
+            --border-color: #DADCE0;
+            --code-bg: #F1F3F4;
+            --shadow-sm: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+            --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
+            --shadow-lg: 0 10px 20px rgba(0,0,0,0.1);
+            --transition: all 0.3s cubic-bezier(.25,.8,.25,1);
+        }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            background-color: var(--light-background);
+            font-family: 'Roboto', sans-serif;
+            color: var(--dark-text);
+            line-height: 1.6;
+        }
+        .container {
+            max-width: 1400px;
+            margin: 0 auto;
+            padding: 0 20px;
+        }
+        /* Add all other CSS styles from the HTML file here */
+        /* ... (include all CSS content from the provided HTML file) ... */
+    </style>
+</head>
+<body>
+    <!-- Header Section -->
+    <header>
+        <div class="container">
+            <nav class="navbar">
+                <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" data-tab-trigger="code-analysis">Code Analysis</a>
+                    <a href="#" class="nav-link" data-tab-trigger="github-results">GitHub Search</a>
+                    <a href="#" class="nav-link" data-tab-trigger="stack-results">Stack Overflow</a>
+                    <a href="#" class="nav-link" data-tab-trigger="code-explanation">Code Explainer</a>
+                </div>
+            </nav>
+        </div>
+    </header>
+    <!-- Main Content -->
+    <div class="container">
+        <div class="main-content">
+            <!-- Sidebar Section -->
+            <div class="sidebar">
+                <!-- File Upload Section -->
+                <div class="sidebar-section">
+                    <h2 class="sidebar-title"><i class="fas fa-upload"></i> Upload Code</h2>
+                    <div class="file-upload" id="dropzone">
+                        <input type="file" id="file-input" hidden accept=".py,.js,.java,.cpp,.c,.cs,.php,.rb,.go,.ts">
+                        <i class="fas fa-file-code"></i>
+                        <p>Drag & drop your code file here</p>
+                        <span>or click to browse</span>
+                    </div>
+                    <button class="upload-btn" id="analyze-btn">
+                        <i class="fas fa-search"></i> Analyze Code
+                    </button>
+                    <div class="model-selection">
+                        <select id="model-dropdown">
+                            <option value="llama3-70b-8192">llama3-70b-8192</option>
+                            <option value="mixtral-8x7b-32768">mixtral-8x7b-32768</option>
+                            <option value="gemma-7b-it">gemma-7b-it</option>
+                        </select>
+                    </div>
+                </div>
+                <!-- Tools Section -->
+                <div class="sidebar-section">
+                    <h2 class="sidebar-title"><i class="fas fa-tools"></i> Developer Tools</h2>
+                    <div class="accordion">
+                        <!-- Include all tool sections from the HTML -->
+                        <!-- ... (GitHub Search, Stack Overflow, Code Explainer) ... -->
+                    </div>
+                </div>
+                <!-- Status Section -->
+                <div class="sidebar-section">
+                    <h2 class="sidebar-title"><i class="fas fa-info-circle"></i> Status</h2>
+                    <div id="file-status">No file uploaded yet</div>
+                </div>
+            </div>
+            <!-- Main Area -->
+            <div class="main-area">
+                <!-- Tabs Navigation -->
+                <div class="tabs">
+                    <div class="tab active" data-tab="code-analysis">Code Analysis</div>
+                    <div class="tab" data-tab="github-results">GitHub Results</div>
+                    <div class="tab" data-tab="stack-results">Stack Overflow Results</div>
+                    <div class="tab" data-tab="code-explanation">Code Explanation</div>
+                </div>
+                <!-- Tab Content -->
+                <div class="tab-content">
+                    <!-- Include all tab panes from the HTML -->
+                    <!-- ... (Code Analysis, GitHub Results, etc) ... -->
+                </div>
+                <!-- Chat Section -->
+                <div class="chat-section">
+                    <!-- Chat interface from HTML -->
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+    // JavaScript from the original implementation
+    document.addEventListener('DOMContentLoaded', () => {
+        // All JavaScript functionality
+        // ... (include all JavaScript from previous implementation) ...
+    });
+    </script>
+</body>
+</html>
 """
 # Helper functions for code analysis
     except Exception as e:
         return None, f"Error processing file: {str(e)}", {}
+# Gradio Interface
+with gr.Blocks(css=MODERN_UI, analytics_enabled=False) as demo:
     current_session_id = gr.State(None)
     code_state = gr.State({})
+    # Hidden components for functionality
+    file_input = gr.File(visible=False)
+    chat_history = gr.State([])
+    # Main UI
+    gr.HTML(MODERN_UI)
+    # Event handlers
+    def process_uploaded_file(file):
+        session_id, status_msg, metrics = process_code_file(file)
+        return {
+            "session_id": session_id,
+            "status": status_msg,
+            "metrics": metrics
+        }
+    def handle_chat(message, session_id, model_name, history):
+        updated_history = generate_response(message, session_id, model_name, history)
+        return updated_history[-1]["content"] if updated_history else ""
+    # API endpoints
+    demo.api_endpoints = [
+        ["/api/analyze", process_uploaded_file, "POST"],
+        ["/api/chat", handle_chat, "POST"],
+        ["/api/github_search", search_github_repos, "POST"],
+        ["/api/stack_search", search_stackoverflow, "POST"],
+        ["/api/explain_code", explain_code, "POST"]
+    ]
+# Launch the application
 if __name__ == "__main__":
+    demo.launch()