Upload folder using huggingface_hub

README.md

@@ -1,12 +1,12 @@
+
 ---
-title: Markdown With Mermaid Main
-emoji: 💻
+title: markdown_with_mermaid_main 
+emoji: 🔥
 colorFrom: indigo
-colorTo: gray
+colorTo: indigo
 sdk: gradio
 sdk_version: 5.22.0
-app_file: app.py
+app_file: run.py
 pinned: false
+hf_oauth: true
 ---
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

requirements.txt

@@ -0,0 +1,2 @@
+gradio-client @ git+https://github.com/gradio-app/gradio@1649b0038482402d7f0ccdbf86ba65d82b4a12c9#subdirectory=client/python
+https://gradio-pypi-previews.s3.amazonaws.com/1649b0038482402d7f0ccdbf86ba65d82b4a12c9/gradio-5.22.0-py3-none-any.whl

run.ipynb

@@ -0,0 +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}

run.py

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