File size: 5,141 Bytes
dc44dbb |
1 |
{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: markdown_with_mermaid"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "\n", "demo = gr.Blocks()\n", "\n", "with demo:\n", " gr.Markdown(\n", " \"\"\"\n", " # Project Documentation with Mermaid Diagrams\n", " \n", " This example demonstrates how to combine regular Markdown with Mermaid diagrams for better visualization.\n", " \n", " ## System Architecture\n", " \n", " Below is an overview of our system's architecture:\n", " \n", " ```mermaid\n", " graph LR\n", " User[User] --> Frontend[Web Frontend]\n", " Frontend --> API[API Gateway]\n", " API --> Auth[Authentication Service]\n", " API --> DataService[Data Processing Service]\n", " DataService --> DB[(Database)]\n", " DataService --> ML[Machine Learning Engine]\n", " ML --> Model[(Model Storage)]\n", " \n", " style User fill:#f9f,stroke:#333,stroke-width:2px\n", " style Frontend fill:#bbf,stroke:#333,stroke-width:2px\n", " style API fill:#bfb,stroke:#333,stroke-width:2px\n", " style DataService fill:#fbb,stroke:#333,stroke-width:2px\n", " ```\n", " \n", " ## Data Processing Workflow\n", " \n", " The data goes through the following steps before reaching the end user:\n", " \n", " 1. Collection from various sources\n", " 2. Cleaning and preprocessing\n", " 3. Feature extraction\n", " 4. Analysis and model application\n", " 5. Results formatting\n", " \n", " ## User Journey\n", " \n", " ```mermaid\n", " sequenceDiagram\n", " participant U as User\n", " participant F as Frontend\n", " participant A as API\n", " participant D as Database\n", " \n", " U->>F: Login Request\n", " F->>A: Authenticate\n", " A->>D: Verify Credentials\n", " D-->>A: User Validated\n", " A-->>F: Auth Token\n", " F-->>U: Login Success\n", " \n", " U->>F: Request Data\n", " F->>A: Get Data (with token)\n", " A->>D: Query Data\n", " D-->>A: Return Results\n", " A-->>F: Formatted Data\n", " F-->>U: Display Results\n", " ```\n", " \n", " ## Decision Process\n", " \n", " When handling requests, our system follows this decision tree:\n", " \n", " ```mermaid\n", " flowchart TD\n", " A[New Request] --> B{Authenticated?}\n", " B -->|Yes| C{Request Type}\n", " B -->|No| D[Return 401]\n", " \n", " C -->|Data Query| E[Process Query]\n", " C -->|Update| F{Has Permission?}\n", " C -->|Delete| G{Is Admin?}\n", " \n", " F -->|Yes| H[Apply Update]\n", " F -->|No| I[Return 403]\n", " \n", " G -->|Yes| J[Execute Delete]\n", " G -->|No| K[Return 403]\n", " \n", " E --> L[Return Data]\n", " H --> M[Return Success]\n", " J --> N[Return Success]\n", " \n", " style A fill:#98fb98,stroke:#333\n", " style D fill:#ff9999,stroke:#333\n", " style I fill:#ff9999,stroke:#333\n", " style K fill:#ff9999,stroke:#333\n", " style M fill:#98fb98,stroke:#333\n", " style N fill:#98fb98,stroke:#333\n", " ```\n", " \n", " ## State Diagram\n", " \n", " Our application transitions through these states:\n", " \n", " ```mermaid\n", " stateDiagram-v2\n", " [*] --> Initialization\n", " Initialization --> Ready\n", " \n", " Ready --> Processing: New Request\n", " Processing --> Error: Exception\n", " Processing --> Complete: Success\n", " \n", " Error --> Ready: Reset\n", " Complete --> Ready: Reset\n", " \n", " Ready --> Shutdown: Exit Command\n", " Shutdown --> [*]\n", " ```\n", " \n", " ## Additional Resources\n", " \n", " For more information about our system, please check:\n", " \n", " - [API Documentation](https://example.com/api-docs)\n", " - [User Guide](https://example.com/user-guide)\n", " - [Admin Dashboard](https://example.com/admin)\n", " \"\"\"\n", " )\n", "\n", "if __name__ == \"__main__\":\n", " demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5} |