Spaces:
Sleeping
Sleeping
| import os | |
| import asyncio | |
| from textwrap import dedent | |
| from dotenv import load_dotenv | |
| from crewai import Agent, Crew, Process, Task | |
| from langchain_openai import ChatOpenAI | |
| import gradio as gr | |
| # Load the .env file to get the API key | |
| load_dotenv() | |
| # Verify API key exists | |
| if not os.getenv("OPENAI_API_KEY"): | |
| raise ValueError("OPENAI_API_KEY not found in environment variables. Please add it to your .env file.") | |
| # Initialize LLM | |
| llm = ChatOpenAI( | |
| model="gpt-4-turbo-preview", | |
| temperature=0.1, | |
| api_key=os.getenv("OPENAI_API_KEY") | |
| ) | |
| # --- 1. Agent Definitions --- | |
| lead_architect = Agent( | |
| role="Lead Network Architect", | |
| goal=dedent(""" | |
| Translate high-level business and application needs into a detailed list | |
| of specific, actionable technical requirements for a new data center network. | |
| """), | |
| backstory=dedent(""" | |
| You are a seasoned Lead Architect who excels at interfacing with business stakeholders. | |
| Your primary skill is listening to business goals and application needs, then distilling | |
| them into a clear and comprehensive list of technical specifications that engineers can build from. | |
| You think in terms of availability, security, scalability, and performance metrics. | |
| """), | |
| llm=llm, | |
| allow_delegation=False, | |
| verbose=True, | |
| ) | |
| senior_network_architect = Agent( | |
| role="Senior Network Architect", | |
| goal=dedent(""" | |
| Take a detailed list of technical requirements and create three distinct, high-level | |
| data center network designs. Each design must be for a different major vendor | |
| (Cisco, Arista, Juniper) and must meet all specified technical requirements. | |
| """), | |
| backstory=dedent(""" | |
| You are a hands-on Senior Network Architect with deep product knowledge across | |
| Cisco, Arista, and Juniper. You are an expert in creating detailed High-Level Designs (HLDs) | |
| based on a given set of technical specifications. You focus purely on the technical implementation. | |
| """), | |
| llm=llm, | |
| allow_delegation=False, | |
| verbose=True, | |
| ) | |
| peer_review_architect = Agent( | |
| role="Peer Review Architect", | |
| goal=dedent(""" | |
| Critically review three network designs against the original technical requirements | |
| to validate their feasibility, compare their trade-offs, and select the optimal solution. | |
| """), | |
| backstory=dedent(""" | |
| You are an impartial and meticulous architect responsible for quality control. | |
| Your job is to act as a peer reviewer. You take a set of designs and the original | |
| requirements, and your task is to find any gaps, inconsistencies, or trade-offs. | |
| You provide the final validation and reasoned recommendation on which design to proceed with. | |
| """), | |
| llm=llm, | |
| allow_delegation=False, | |
| verbose=True, | |
| ) | |
| # --- 2. Task Definitions --- | |
| def create_tasks(business_requirements, application_requirements): | |
| """Create tasks with proper input context""" | |
| initial_requirements = f"Business Requirements: {business_requirements}\nApplication Requirements: {application_requirements}" | |
| technical_translation_task = Task( | |
| description=dedent(f""" | |
| Analyze the following business and application requirements and translate | |
| them into a detailed list of technical network requirements. | |
| Create a comprehensive table with three columns: 'Category', 'Requirement', and 'Justification'. | |
| Categories should include: Availability, Performance, Security, Scalability, Management, and Budget. | |
| Requirements to analyze: | |
| {initial_requirements} | |
| Focus on creating specific, measurable technical requirements that can guide network design decisions. | |
| """), | |
| expected_output="A detailed markdown table with three columns: 'Category', 'Requirement', and 'Justification'.", | |
| agent=lead_architect, | |
| ) | |
| design_creation_task = Task( | |
| description=dedent(""" | |
| Based on the technical requirements from the Lead Architect, create three distinct | |
| high-level data center designs using a spine-leaf architecture. | |
| **CRITICAL:** Prioritize the original business requirements when making design trade-offs. | |
| If 'Strict Budget' was selected, choose cost-effective hardware even if it means | |
| compromising on supporting requirements. | |
| Create one design for each vendor: | |
| - Cisco design with specific switch models and NX-OS | |
| - Juniper design with specific switch models and Junos | |
| - Arista design with specific switch models and EOS | |
| For each design, specify: | |
| 1. Recommended spine switch models and quantities | |
| 2. Recommended leaf switch models and quantities | |
| 3. Network operating system version | |
| 4. Brief rationale explaining how it meets the technical requirements | |
| 5. Estimated cost range if budget was a consideration | |
| """), | |
| expected_output="Three complete high-level designs, one for each vendor (Cisco, Juniper, Arista).", | |
| agent=senior_network_architect, | |
| context=[technical_translation_task] | |
| ) | |
| validation_task = Task( | |
| description=dedent(""" | |
| Review the technical requirements and the three vendor designs (Cisco, Juniper, Arista) | |
| provided by previous team members. | |
| Create a comprehensive validation report with these sections: | |
| 1. **Requirements Validation**: Check if each vendor design meets all technical requirements | |
| 2. **Comparative Analysis**: Compare pros/cons of Cisco vs Juniper vs Arista solutions | |
| 3. **Trade-off Analysis**: Identify any compromises made in each design | |
| 4. **Final Recommendation**: Select the best vendor solution with clear justification | |
| 5. **Implementation Considerations**: Next steps and potential risks | |
| Base your analysis solely on the specific vendor designs provided, not generic concepts. | |
| """), | |
| expected_output="A comprehensive validation report with requirements check, vendor comparison, and final recommendation.", | |
| agent=peer_review_architect, | |
| context=[technical_translation_task, design_creation_task] | |
| ) | |
| return [technical_translation_task, design_creation_task, validation_task] | |
| # --- 3. CrewAI Execution Function --- | |
| def run_design_crew(business_reqs_list, app_reqs_list, progress=gr.Progress()): | |
| """Run the CrewAI design crew with proper execution flow""" | |
| # Input validation | |
| if not business_reqs_list and not app_reqs_list: | |
| return ( | |
| "❌ **Error**: Please select at least one requirement.", | |
| "", | |
| "" | |
| ) | |
| # Verify API key | |
| if not os.getenv("OPENAI_API_KEY"): | |
| return ( | |
| "❌ **Error**: OPENAI_API_KEY not found. Please add it to your .env file.", | |
| "", | |
| "" | |
| ) | |
| try: | |
| # Prepare requirements strings | |
| business_reqs_str = ", ".join(business_reqs_list) if business_reqs_list else "None specified" | |
| app_reqs_str = ", ".join(app_reqs_list) if app_reqs_list else "None specified" | |
| progress(0.1, desc="Initializing AI agents...") | |
| # Create tasks | |
| tasks = create_tasks(business_reqs_str, app_reqs_str) | |
| # Create crew | |
| crew = Crew( | |
| agents=[lead_architect, senior_network_architect, peer_review_architect], | |
| tasks=tasks, | |
| process=Process.sequential, | |
| verbose=True, | |
| memory=True, # Enable memory for better context retention | |
| ) | |
| progress(0.2, desc="Starting design process...") | |
| # Prepare inputs | |
| inputs = { | |
| 'business_requirements': business_reqs_str, | |
| 'application_requirements': app_reqs_str, | |
| 'requirements_context': f"Business: {business_reqs_str}\nApplications: {app_reqs_str}" | |
| } | |
| progress(0.3, desc="Lead Architect analyzing requirements...") | |
| # Execute crew | |
| result = crew.kickoff(inputs=inputs) | |
| progress(0.9, desc="Finalizing reports...") | |
| # Extract individual task outputs | |
| task_outputs = result.tasks_output if hasattr(result, 'tasks_output') else [] | |
| if len(task_outputs) >= 3: | |
| lead_output = task_outputs[0].raw if hasattr(task_outputs[0], 'raw') else str(task_outputs[0]) | |
| senior_output = task_outputs[1].raw if hasattr(task_outputs[1], 'raw') else str(task_outputs[1]) | |
| peer_output = task_outputs[2].raw if hasattr(task_outputs[2], 'raw') else str(task_outputs[2]) | |
| else: | |
| # Fallback if task outputs aren't properly separated | |
| full_output = str(result) | |
| # Try to split the output into sections | |
| sections = full_output.split("# Task") | |
| if len(sections) >= 3: | |
| lead_output = f"# Technical Requirements\n{sections[1]}" if len(sections) > 1 else "Output processing..." | |
| senior_output = f"# Network Designs\n{sections[2]}" if len(sections) > 2 else "Processing designs..." | |
| peer_output = f"# Validation Report\n{sections[3]}" if len(sections) > 3 else "Finalizing validation..." | |
| else: | |
| lead_output = "✅ Requirements analysis complete" | |
| senior_output = "✅ Designs generated" | |
| peer_output = full_output | |
| progress(1.0, desc="Complete!") | |
| return lead_output, senior_output, peer_output | |
| except Exception as e: | |
| error_msg = f"❌ **Error occurred**: {str(e)}\n\n**Troubleshooting:**\n- Check your OpenAI API key\n- Ensure stable internet connection\n- Try selecting fewer requirements if the request is too complex" | |
| return error_msg, error_msg, error_msg | |
| # --- 4. Enhanced CSS --- | |
| custom_css = """ | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); | |
| /* Hide Gradio footer */ | |
| footer { display: none !important; } | |
| /* Main container styling */ | |
| .gradio-container { | |
| max-width: 1200px !important; | |
| margin: 0 auto !important; | |
| padding: 2rem !important; | |
| background: #ffffff !important; | |
| font-family: 'Inter', system-ui, -apple-system, sans-serif !important; | |
| min-height: 100vh !important; | |
| } | |
| /* Clean container backgrounds */ | |
| .gradio-blocks, .gradio-blocks > div, .gradio-group, .gradio-column, .gradio-row { | |
| background: transparent !important; | |
| border: none !important; | |
| box-shadow: none !important; | |
| } | |
| /* Header styling */ | |
| .main-header { | |
| text-align: left !important; | |
| margin-bottom: 3rem !important; | |
| background: transparent !important; | |
| } | |
| .header-title { | |
| display: flex !important; | |
| align-items: center !important; | |
| gap: 0.75rem !important; | |
| font-size: 1.75rem !important; | |
| font-weight: 600 !important; | |
| color: #1f2937 !important; | |
| margin-bottom: 1rem !important; | |
| font-family: 'Inter', sans-serif !important; | |
| } | |
| .bot-icon { | |
| width: 1.75rem !important; | |
| height: 1.75rem !important; | |
| color: #3b82f6 !important; | |
| } | |
| .header-subtitle { | |
| color: #6b7280 !important; | |
| font-size: 1rem !important; | |
| margin: 0 !important; | |
| font-weight: 400 !important; | |
| font-family: 'Inter', sans-serif !important; | |
| line-height: 1.5 !important; | |
| } | |
| /* Section headers */ | |
| .section-title { | |
| color: #3b82f6 !important; | |
| font-size: 1.125rem !important; | |
| font-weight: 700 !important; | |
| margin-bottom: 1.5rem !important; | |
| margin-top: 2rem !important; | |
| padding: 0 0 0.5rem 0 !important; | |
| background: transparent !important; | |
| font-family: 'Inter', sans-serif !important; | |
| border-bottom: 2px solid #e5e7eb !important; | |
| } | |
| .section-title:first-of-type { | |
| margin-top: 0 !important; | |
| } | |
| /* Checkbox styling */ | |
| .gradio-checkboxgroup { | |
| gap: 0.5rem !important; | |
| background: transparent !important; | |
| border: none !important; | |
| padding: 0 !important; | |
| margin-bottom: 2rem !important; | |
| } | |
| .gradio-checkboxgroup label { | |
| background: #f8fafc !important; | |
| border: 1px solid #e2e8f0 !important; | |
| border-radius: 0.5rem !important; | |
| padding: 0.75rem 1rem !important; | |
| margin: 0 0 0.5rem 0 !important; | |
| transition: all 0.2s ease !important; | |
| cursor: pointer !important; | |
| display: flex !important; | |
| align-items: center !important; | |
| gap: 0.75rem !important; | |
| font-size: 0.9rem !important; | |
| line-height: 1.4 !important; | |
| color: #475569 !important; | |
| font-weight: 400 !important; | |
| font-family: 'Inter', sans-serif !important; | |
| } | |
| .gradio-checkboxgroup label:hover { | |
| background: #f1f5f9 !important; | |
| border-color: #10b981 !important; | |
| color: #1e293b !important; | |
| } | |
| .gradio-checkboxgroup input[type="checkbox"] { | |
| accent-color: #10b981 !important; | |
| width: 1rem !important; | |
| height: 1rem !important; | |
| margin: 0 !important; | |
| flex-shrink: 0 !important; | |
| border-radius: 0.25rem !important; | |
| } | |
| .gradio-checkboxgroup label:has(input[type="checkbox"]:checked) { | |
| background: #ecfdf5 !important; | |
| border-color: #10b981 !important; | |
| color: #065f46 !important; | |
| font-weight: 500 !important; | |
| } | |
| /* Generate button */ | |
| .generate-btn { | |
| background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important; | |
| color: white !important; | |
| border: none !important; | |
| padding: 1rem 1.5rem !important; | |
| border-radius: 0.75rem !important; | |
| font-weight: 600 !important; | |
| font-size: 1rem !important; | |
| width: 100% !important; | |
| margin-top: 2rem !important; | |
| cursor: pointer !important; | |
| transition: all 0.3s ease !important; | |
| font-family: 'Inter', sans-serif !important; | |
| min-height: 3rem !important; | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important; | |
| } | |
| .generate-btn:hover { | |
| background: linear-gradient(135deg, #059669 0%, #047857 100%) !important; | |
| transform: translateY(-2px) !important; | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important; | |
| } | |
| /* Report section titles */ | |
| .report-title { | |
| color: #1f2937 !important; | |
| font-size: 1.125rem !important; | |
| font-weight: 600 !important; | |
| margin-bottom: 1rem !important; | |
| margin-top: 2rem !important; | |
| background: transparent !important; | |
| font-family: 'Inter', sans-serif !important; | |
| padding: 0.5rem 0 !important; | |
| border-bottom: 1px solid #e5e7eb !important; | |
| } | |
| .report-title:first-of-type { | |
| margin-top: 0 !important; | |
| } | |
| /* Markdown output */ | |
| .gradio-markdown { | |
| background: transparent !important; | |
| border: none !important; | |
| padding: 1rem !important; | |
| font-family: 'Inter', sans-serif !important; | |
| line-height: 1.6 !important; | |
| background: #fafafa !important; | |
| border-radius: 0.5rem !important; | |
| border: 1px solid #e5e7eb !important; | |
| } | |
| .gradio-markdown h1, .gradio-markdown h2, .gradio-markdown h3 { | |
| color: #1f2937 !important; | |
| font-weight: 600 !important; | |
| margin-top: 1.5rem !important; | |
| margin-bottom: 0.5rem !important; | |
| } | |
| .gradio-markdown table { | |
| width: 100% !important; | |
| border-collapse: collapse !important; | |
| margin: 1rem 0 !important; | |
| background: white !important; | |
| border-radius: 0.5rem !important; | |
| overflow: hidden !important; | |
| box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important; | |
| } | |
| .gradio-markdown table th, | |
| .gradio-markdown table td { | |
| padding: 0.75rem !important; | |
| border: 1px solid #e5e7eb !important; | |
| text-align: left !important; | |
| vertical-align: top !important; | |
| } | |
| .gradio-markdown table th { | |
| background: #f8fafc !important; | |
| font-weight: 600 !important; | |
| color: #374151 !important; | |
| } | |
| .gradio-markdown table tr:nth-child(even) { | |
| background: #f9fafb !important; | |
| } | |
| /* Placeholder content */ | |
| .placeholder-content { | |
| text-align: center !important; | |
| color: #9ca3af !important; | |
| padding: 4rem 2rem !important; | |
| background: #f8fafc !important; | |
| border: 2px dashed #e5e7eb !important; | |
| border-radius: 0.75rem !important; | |
| font-family: 'Inter', sans-serif !important; | |
| } | |
| .placeholder-icon { | |
| width: 3rem !important; | |
| height: 3rem !important; | |
| margin: 0 auto 1rem auto !important; | |
| opacity: 0.5 !important; | |
| color: #9ca3af !important; | |
| } | |
| .placeholder-content p { | |
| font-size: 0.9rem !important; | |
| color: #6b7280 !important; | |
| margin: 0 !important; | |
| font-weight: 400 !important; | |
| } | |
| /* Layout */ | |
| .gradio-row { | |
| gap: 3rem !important; | |
| align-items: flex-start !important; | |
| } | |
| /* Progress styling */ | |
| .gradio-progress { | |
| background: #f3f4f6 !important; | |
| border-radius: 0.5rem !important; | |
| overflow: hidden !important; | |
| } | |
| .gradio-progress .progress-bar { | |
| background: linear-gradient(90deg, #10b981, #059669) !important; | |
| transition: width 0.3s ease !important; | |
| } | |
| </style> | |
| """ | |
| # --- 5. Gradio Interface --- | |
| with gr.Blocks( | |
| theme="soft", | |
| css=custom_css, | |
| title="AI Co-Designer for Data Center Networks" | |
| ) as demo: | |
| # Header | |
| gr.HTML(""" | |
| <div class="main-header"> | |
| <div class="header-title"> | |
| <svg class="bot-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/> | |
| </svg> | |
| AI Co-Designer for Data Center Networks | |
| </div> | |
| <p class="header-subtitle"> | |
| Select your business and application requirements to generate comprehensive network designs with AI-powered validation. | |
| </p> | |
| </div> | |
| """) | |
| # Main layout | |
| with gr.Row(): | |
| # Left column - Requirements | |
| with gr.Column(scale=1): | |
| # Business Requirements | |
| gr.HTML('<div class="section-title">Business Requirements</div>') | |
| business_checkboxes = gr.CheckboxGroup( | |
| choices=[ | |
| "Strict Budget (CAPEX)", | |
| "High Scalability", | |
| "High Automation (OPEX)", | |
| "High Availability", | |
| "Regulatory Compliance" | |
| ], | |
| value=[], | |
| container=False, | |
| show_label=False | |
| ) | |
| # Application Requirements | |
| gr.HTML('<div class="section-title">Application Requirements</div>') | |
| application_checkboxes = gr.CheckboxGroup( | |
| choices=[ | |
| "Large-Scale Virtualization", | |
| "AI/ML Workloads", | |
| "Low-Latency / Real-time", | |
| "Big Data Clusters", | |
| "High East-West Traffic" | |
| ], | |
| value=[], | |
| container=False, | |
| show_label=False | |
| ) | |
| # Generate Button | |
| submit_button = gr.Button( | |
| "🚀 Generate & Validate Design", | |
| elem_classes=["generate-btn"] | |
| ) | |
| # Right column - Agent outputs | |
| with gr.Column(scale=2): | |
| # Lead Architect Output | |
| gr.HTML('<div class="report-title">💡 Lead Architect: Technical Requirements</div>') | |
| lead_architect_output = gr.Markdown( | |
| value="""<div class="placeholder-content"> | |
| <svg class="placeholder-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/> | |
| </svg> | |
| <p>Requirements analysis will appear here...</p> | |
| </div>""", | |
| container=False, | |
| show_label=False | |
| ) | |
| # Senior Architect Output | |
| gr.HTML('<div class="report-title">🏗️ Senior Architect: Network Designs</div>') | |
| senior_architect_output = gr.Markdown( | |
| value="""<div class="placeholder-content"> | |
| <svg class="placeholder-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/> | |
| </svg> | |
| <p>Network designs will appear here...</p> | |
| </div>""", | |
| container=False, | |
| show_label=False | |
| ) | |
| # Peer Review Output | |
| gr.HTML('<div class="report-title">✅ Peer Review: Validation & Recommendation</div>') | |
| peer_review_output = gr.Markdown( | |
| value="""<div class="placeholder-content"> | |
| <svg class="placeholder-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/> | |
| </svg> | |
| <p>Validation report will appear here...</p> | |
| </div>""", | |
| container=False, | |
| show_label=False | |
| ) | |
| # Connect the functionality | |
| submit_button.click( | |
| fn=run_design_crew, | |
| inputs=[business_checkboxes, application_checkboxes], | |
| outputs=[lead_architect_output, senior_architect_output, peer_review_output], | |
| show_progress=True | |
| ) | |
| # Launch the app | |
| if __name__ == "__main__": | |
| demo.launch( | |
| share=True, | |
| server_name="0.0.0.0", | |
| server_port=7860, | |
| show_error=True | |
| ) |