app.py

"""
made with gradio 6 https://github.com/gradio-app/gradio 
QuantumArchitect-MCP: Quantum Circuit Creation & Validation Platform
Main Gradio 6 application with MCP endpoints for HuggingFace Spaces.

Inspired by IBM Quantum Composer - Visual circuit builder with interactive gates.

This app exposes quantum circuit tools via MCP protocol for AI agents.

NOTE: This is the main entry point. All components are modularized in frontend/:
- frontend/mcp_tools.py: MCP protocol wrappers
- frontend/ui_handlers.py: Gradio UI event handlers
- frontend/circuits.py: Predefined test circuits
- frontend/helpers.py: Utility functions
- frontend/visualizations.py: SVG and Plotly visualizations
- frontend/styles.py: CSS styling
- frontend/constants.py: Gate library and templates
"""

import gradio as gr
import json

# Import all frontend components from modular structure
from frontend import (
    # Constants
    GATE_LIBRARY,
    GATE_CATEGORIES,
    TEMPLATE_PARAMS,
    # Styles
    IBM_COMPOSER_CSS,
    # Visualizations
    render_visual_circuit,
    render_qsphere_svg,
    # MCP Tools
    mcp_get_gate_info,
    mcp_get_algorithm_info,
    # UI Handlers
    ui_create_circuit,
    ui_validate_circuit,
    ui_simulate_circuit,
    ui_score_circuit,
    ui_simulate_visual,
    # Circuits
    PREDEFINED_CIRCUITS,
    load_test_circuit,
    # Helpers
    EXAMPLE_QASM,
    get_template_params,
    get_template_info,
    add_gate_to_json,
    clear_gates,
    make_gate_handler,
    clear_circuit_handler,
    undo_handler,
    # Tab modules
    add_circuit_builder_tab,
    add_templates_tab,
    add_validate_tab,
    add_simulate_tab,
    add_score_tab,
    add_getting_started_tab,
    add_bell_state_study_tab,
    add_ghz_state_study_tab,
    add_qft_study_tab,
    add_reference_tab,
    add_mcp_endpoints_tab,
    add_dirac_notation_study_tab,
    add_measurement_study_tab,
    add_grover_study_tab,
    add_vqe_study_tab,
    add_transpilation_study_tab,
)


# =============================================================================
# BUILD GRADIO APP WITH MCP - IBM COMPOSER STYLE (COMPACT)
# =============================================================================

with gr.Blocks(
    title="QuantumArchitect-MCP",
) as demo:
    
    gr.Markdown("""
    <div style="text-align: center; padding: 10px 0;">
        <h1 style="
            font-size: 2em;
            background: linear-gradient(135deg, #4fc3f7 0%, #7c4dff 50%, #ff4081 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 6px;
        ">🔮 QuantumArchitect-MCP</h1>
        <p style="color: #8b949e; font-size: 0.95em; margin: 0;">
            Visual Quantum Circuit Builder • Inspired by IBM Quantum Composer
        </p>
        <div style="display: flex; justify-content: center; gap: 12px; margin-top: 8px;">
            <span style="
                background: #21262d;
                padding: 4px 10px;
                border-radius: 16px;
                font-size: 0.75em;
                color: #58a6ff;
                border: 1px solid #30363d;
            ">🎯 MCP Enabled</span>
            <span style="
                background: #21262d;
                padding: 4px 10px;
                border-radius: 16px;
                font-size: 0.75em;
                color: #3fb950;
                border: 1px solid #30363d;
            ">⚡ Qiskit Backend</span>
            <span style="
                background: #21262d;
                padding: 4px 10px;
                border-radius: 16px;
                font-size: 0.75em;
                color: #d29922;
                border: 1px solid #30363d;
            ">🔬 Real-time Sim</span>
        </div>
    </div>
    """)
    
    with gr.Tabs():
        add_circuit_builder_tab()
        add_templates_tab()
        add_validate_tab()
        add_simulate_tab()
        add_score_tab()
        add_getting_started_tab()
        add_dirac_notation_study_tab()
        add_measurement_study_tab()
        add_grover_study_tab()
        add_vqe_study_tab()
        add_transpilation_study_tab()
        add_bell_state_study_tab()
        add_ghz_state_study_tab()
        add_qft_study_tab()
        add_reference_tab()
        add_mcp_endpoints_tab()
    
    # Quick Gate Reference (compact) - collapsed by default
    with gr.Accordion("🔧 Gate Reference", open=False):
        gr.Markdown(r"""
        | Gate | Qubits | Effect |
        |------|--------|--------|
        | **H** | 1 | Superposition |
        | **X,Y,Z** | 1 | Pauli rotations |
        | **CX** | 2 | CNOT |
        | **Rx,Ry,Rz** | 1 | Parameterized rotations |
        | **CCX** | 3 | Toffoli |
        """)


# Launch the Gradio app     
if __name__ == "__main__":  
    demo.launch(
        server_name="0.0.0.0",
        show_error=True,
        debug=True,
        share=False,
        mcp_server=True,
        css=IBM_COMPOSER_CSS,
        theme=gr.themes.Base(
            primary_hue="blue",
            secondary_hue="green",
            neutral_hue="slate",
        ),
    )