fastapi-voyager 0.12.3__tar.gz → 0.12.5__tar.gz

fastapi_voyager-0.12.5/.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,38 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. iOS]
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+**Smartphone (please complete the following information):**
+ - Device: [e.g. iPhone6]
+ - OS: [e.g. iOS8.1]
+ - Browser [e.g. stock browser, safari]
+ - Version [e.g. 22]
+
+**Additional context**
+Add any other context about the problem here.

fastapi_voyager-0.12.5/.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,20 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

fastapi_voyager-0.12.5/CONTRIBUTING.md

@@ -0,0 +1,23 @@
+# How to develop & contribute?
+
+fork, clone.
+
+install uv.
+
+```shell
+uv venv
+source .venv/bin/activate
+uv pip install ".[dev]"
+uvicorn tests.programatic:app  --reload
+```
+
+open `localhost:8000/voyager`
+
+
+frontend: 
+- `src/web/vue-main.js`: main js
+
+backend: 
+- `voyager.py`: main entry
+- `render.py`: generate dot file
+- `server.py`: serve mode

{fastapi_voyager-0.12.3 → fastapi_voyager-0.12.5}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: fastapi-voyager
-Version: 0.12.3
+Version: 0.12.5
 Summary: Visualize FastAPI application's routing tree and dependencies
 Project-URL: Homepage, https://github.com/allmonday/fastapi-voyager
 Project-URL: Source, https://github.com/allmonday/fastapi-voyager
@@ -31,14 +31,31 @@ Description-Content-Type: text/markdown
 [![PyPI Downloads](https://static.pepy.tech/badge/fastapi-voyager/month)](https://pepy.tech/projects/fastapi-voyager)
 
 
-> This repo is still in early stage, it supports pydantic v2 only
 
 Visualize your FastAPI endpoints, and explore them interactively.
 
-[visit online demo](https://www.newsyeah.fun/voyager/) of project: [composition oriented development pattern](https://github.com/allmonday/composition-oriented-development-pattern)
+> This repo is still in early stage, it supports pydantic v2 only
+
+[live demo](https://www.newsyeah.fun/voyager/) of project: [composition oriented development pattern](https://github.com/allmonday/composition-oriented-development-pattern)
 
 <img width="1600" height="986" alt="image" src="https://github.com/user-attachments/assets/8829cda0-f42d-4c84-be2f-b019bb5fe7e1" />
 
+with configuration:
+
+```python
+app.mount('/voyager', 
+          create_voyager(
+            app, 
+            module_color={'src.services': 'tomato'}, 
+            module_prefix='src.services', 
+            swagger_url="/docs",
+            ga_id="G-R64S7Q49VL",
+            initial_page_policy='first',
+            online_repo_url='https://github.com/allmonday/composition-oriented-development-pattern/blob/master'))
+```
+
+https://github.com/allmonday/composition-oriented-development-pattern/blob/master/src/main.py#L48
+
 ## Plan & Raodmap
 - [ideas](./docs/idea.md)
 - [changelog & roadmap](./docs/changelog.md)

{fastapi_voyager-0.12.3 → fastapi_voyager-0.12.5}/README.md

@@ -3,14 +3,31 @@
 [![PyPI Downloads](https://static.pepy.tech/badge/fastapi-voyager/month)](https://pepy.tech/projects/fastapi-voyager)
 
 
-> This repo is still in early stage, it supports pydantic v2 only
 
 Visualize your FastAPI endpoints, and explore them interactively.
 
-[visit online demo](https://www.newsyeah.fun/voyager/) of project: [composition oriented development pattern](https://github.com/allmonday/composition-oriented-development-pattern)
+> This repo is still in early stage, it supports pydantic v2 only
+
+[live demo](https://www.newsyeah.fun/voyager/) of project: [composition oriented development pattern](https://github.com/allmonday/composition-oriented-development-pattern)
 
 <img width="1600" height="986" alt="image" src="https://github.com/user-attachments/assets/8829cda0-f42d-4c84-be2f-b019bb5fe7e1" />
 
+with configuration:
+
+```python
+app.mount('/voyager', 
+          create_voyager(
+            app, 
+            module_color={'src.services': 'tomato'}, 
+            module_prefix='src.services', 
+            swagger_url="/docs",
+            ga_id="G-R64S7Q49VL",
+            initial_page_policy='first',
+            online_repo_url='https://github.com/allmonday/composition-oriented-development-pattern/blob/master'))
+```
+
+https://github.com/allmonday/composition-oriented-development-pattern/blob/master/src/main.py#L48
+
 ## Plan & Raodmap
 - [ideas](./docs/idea.md)
 - [changelog & roadmap](./docs/changelog.md)

{fastapi_voyager-0.12.3 → fastapi_voyager-0.12.5}/docs/changelog.md

@@ -1,4 +1,4 @@
-# Changelog & roadmap
+# Changelog & plan
 
 ## <0.9:
 - [x] group schemas by module hierarchy
@@ -110,17 +110,23 @@
 - 0.12.3
     - [x] fix bug in `update_forward_refs`, class should not be skipped if it's parent class has been visited.
 - 0.12.4
-    - [ ] search tag/ route
+    - [x] fix logger exception 
+- 0.12.5
+    - [x] fix nested cluster with same color
+    - [x] refactor fe with store based on reactive
+    - [x] fix duplicated focus toggle
+- 0.12.6
     - [ ] refactor render.py
-    - [ ] reorg: move variable into reactive in vue-main.js
+    - [ ] remove search component, integrated into main page
+    - [ ] click link to highlight related nodes
 
 ## 0.13
-- 0.12.0
+- 0.13.2
+    - [ ] if er diagram is provided, show it first.
+- 0.13.1
     - [ ] integration with pydantic-resolve
         - [ ] show hint for resolve, post fields
         - [ ] display loader as edges
     - [ ] add tests
 
-## 0.13
-todo
 

{fastapi_voyager-0.12.3 → fastapi_voyager-0.12.5}/docs/idea.md

@@ -9,16 +9,19 @@
     - [ ] add route/tag list
 - [ ] type alias should not be kept as node instead of compiling to original type
 - [ ] how to correctly handle the generic type ?
-- [ ] support Google analysis config
-- [ ] sort field name in nodes (only table inside right panel), pending
-- [ ] set max limit for fields in nodes
-- [ ] minimap
+    - for example `Page[Student]` of `Page[T]` will be marked in `Page[T]`'s module
+- [ ] sort field name in nodes (only table inside right panel)
+- [ ] set max limit for fields in nodes (? need further thinking)
+- [ ] minimap (good to have)
     - ref: https://observablehq.com/@rabelais/d3-js-zoom-minimap
+- [ ] debug mode
+    - [ ] export dot content, load dot content
+
 
 ## in analysis
-- [ ] upgrade network algorithm (optional)
-- [ ] click field to highlight links
+- [ ] upgrade network algorithm (optional, for example networkx)
+- [ ] click field to highlight links or click link to highlight related nodes
 - [ ] animation effect for edges
 - [ ] display standard ER diagram spec. `hard but important`
     - [ ] display potential invalid links
-    - [ ] highlight relationship belongs to ER diagram
+    - [ ] highlight relationship belongs to ER diagram

{fastapi_voyager-0.12.3 → fastapi_voyager-0.12.5}/src/fastapi_voyager/render.py

@@ -93,6 +93,8 @@ class Renderer:
 
         def render_module_schema(mod: ModuleNode, inherit_color: str | None=None, show_cluster:bool=True) -> str:
             color: str | None = inherit_color
+            cluster_color: str | None = None
+
 
             # recursively vist module from short to long:  'a', 'a.b', 'a.b.c'
             # color_flag: {'a', 'a.b.c'}
@@ -103,6 +105,7 @@ class Renderer:
                 if mod.fullname.startswith(k):  
                     module_color_flag.remove(k)
                     color = self.module_color[k]
+                    cluster_color = color if color != inherit_color else None
                     break
 
             inner_nodes = [ render_node(node, color) for node in mod.schema_nodes ]
@@ -117,7 +120,7 @@ class Renderer:
                         style="rounded"
                         label = "  {mod.name}"
                         labeljust = "l"
-                        {(f'pencolor = "{color}"' if color else 'pencolor="#ccc"')}
+                        {(f'pencolor = "{cluster_color}"' if cluster_color else 'pencolor="#ccc"')}
                         {('penwidth = 3' if color else 'penwidth=""')}
                         {inner_nodes_str}
                         {child_str}

{fastapi_voyager-0.12.3 → fastapi_voyager-0.12.5}/src/fastapi_voyager/type_helper.py

@@ -260,7 +260,7 @@ def update_forward_refs(kls):
 
         local_attrs = getattr(shelled_type, '__dict__', {})
         if local_attrs.get(const.PYDANTIC_FORWARD_REF_UPDATED, False):
-            logger.debug(shelled_type.__qualname__, 'visited')
+            logger.debug("%s visited", shelled_type.__qualname__)
             continue
         if safe_issubclass(shelled_type, BaseModel):
             update_pydantic_forward_refs(shelled_type)

{fastapi_voyager-0.12.3 → fastapi_voyager-0.12.5}/src/fastapi_voyager/version.py

@@ -1,2 +1,2 @@
 __all__ = ["__version__"]
-__version__ = "0.12.3"
+__version__ = "0.12.5"

fastapi_voyager-0.12.5/src/fastapi_voyager/web/component/demo.js

@@ -0,0 +1,17 @@
+const { defineComponent, computed } = window.Vue;
+
+import { store } from '../store.js'
+
+export default defineComponent({
+  name: "Demo",
+  emits: ["close"],
+  setup() {
+    return { store };
+  },
+  template: `
+    <div>
+      <p>Count: {{ store.state.item.count }}</p>
+      <button @click="store.mutations.increment()">Add</button>
+    </div>
+  `
+});

{fastapi_voyager-0.12.3 → fastapi_voyager-0.12.5}/src/fastapi_voyager/web/component/schema-field-filter.js

@@ -14,7 +14,6 @@ export default defineComponent({
   name: "SchemaFieldFilter",
   props: {
     schemaName: { type: String, default: null }, // external injection triggers auto-query
-    // externally provided schemas dict (state.rawSchemasFull): { [id]: schema }
     schemas: { type: Object, default: () => ({}) },
   },
   emits: ["queried", "close"],

{fastapi_voyager-0.12.3 → fastapi_voyager-0.12.5}/src/fastapi_voyager/web/graph-ui.js

@@ -82,9 +82,7 @@ export class GraphUI {
           }
           const set = $();
           set.push(this);
-          // const obj = { set, direction: "bidirectional" };
           const schemaName = event.currentTarget.dataset.name;
-          // self.currentSelection = [obj];
           if (schemaName) {
             try {
               self.options.onSchemaClick(schemaName);
@@ -93,6 +91,17 @@ export class GraphUI {
             }
           }
         });
+
+        self.gv.edges().click(function (event) {
+          // const set = $();
+          // const downStreamNode = event.currentTarget.dataset.name.split("->")[1];
+          // const nodes = self.gv.nodesByName();
+          // set.push(nodes[downStreamNode]);
+          // const obj = { set, direction: "single" };
+          // self.currentSelection = [obj];
+          // todo highlight edge and downstream node
+        })
+
         self.gv.nodes().click(function (event) {
           const set = $();
           set.push(this);
@@ -100,7 +109,6 @@ export class GraphUI {
 
           const schemaName = event.currentTarget.dataset.name;
           if (event.shiftKey && self.options.onSchemaClick) {
-            // try data-name or title text
             if (schemaName) {
               try {
                 self.options.onSchemaShiftClick(schemaName);
@@ -123,20 +131,15 @@ export class GraphUI {
           const set = $();
           set.push(this);
           const obj = { set, direction: "single" };
-          if (event.ctrlKey || event.metaKey || event.shiftKey) {
-            self.currentSelection.push(obj);
-          } else {
-            self.currentSelection = [obj];
-          }
+          self.currentSelection = [obj];
           self._highlight();
         });
 
-        // svg 背景点击高亮清空
-
+        // click background to reset highlight 
         $(document)
           .off("click.graphui")
           .on("click.graphui", function (evt) {
-            // 如果点击目标不在 graph 容器内，直接退出
+            // if outside container, do nothing
             const graphContainer = $(self.selector)[0];
             if (
               !graphContainer ||

{fastapi_voyager-0.12.3 → fastapi_voyager-0.12.5}/src/fastapi_voyager/web/index.html

@@ -105,13 +105,13 @@
             >
               <q-icon class="q-mr-sm" name="satellite_alt"></q-icon>
               <span> FastAPI Voyager </span>
-              <span v-if="state.version" style="font-size: 12px; margin-left: 8px; font-weight: normal;">{{ state.version }}</span>
+              <span v-if="store.state.version" style="font-size: 12px; margin-left: 8px; font-weight: normal;">{{ store.state.version }}</span>
             </div>
             <div class="col-auto" style="font-size: 16px">
               <q-option-group
                 style="margin-left: 80px"
-                v-model="state.showFields"
-                :options="state.fieldOptions"
+                v-model="store.state.filter.showFields"
+                :options="store.state.fieldOptions"
                 @update:model-value="(val) => toggleShowField(val)"
                 color="primary"
                 type="radio"
@@ -137,7 +137,7 @@
                 flat
                 label="Search"
                 class="q-mr-md"
-                @click="showDialog()"
+                @click="showSearchDialog()"
               />
             </div>
             <div class="col-auto">
@@ -176,8 +176,8 @@
         </q-header>
 
         <q-drawer
-          v-model="state.detailDrawer"
-          :width="state.drawerWidth"
+          v-model="store.state.rightDrawer.drawer"
+          :width="store.state.rightDrawer.width"
           side="right"
           style="border-left: 1px solid #888;"
           bordered
@@ -201,7 +201,7 @@
           
           <div style="z-index: 11; position: absolute; left: -17px; top: 9px">
             <q-btn
-              @click="state.detailDrawer = !state.detailDrawer"
+              @click="store.state.rightDrawer.drawer = !store.state.rightDrawer.drawer"
               round
               unelevated
               color="primary"
@@ -210,14 +210,14 @@
             />
           </div>
           <schema-code-display
-            :schema-name="schemaCodeName"
-            :schemas="state.rawSchemasFull"
+            :schema-name="store.state.schemaDetail.schemaCodeName"
+            :schemas="store.state.graph.schemaMap"
           />
         </q-drawer>
 
         <q-page-container>
           <q-splitter
-            v-model="state.splitter"
+            v-model="store.state.leftPanel.width"
             unit="px"
             :limits="[200, 800]"
             class="adjust-fit"
@@ -236,12 +236,12 @@
                 <q-scroll-area class="fit">
                   <q-list dense separator>
                     <q-expansion-item
-                      v-for="tag in state.rawTags"
+                      v-for="tag in store.state.leftPanel.tags"
                       :key="tag.name"
                       expand-separator
-                      :model-value="state._tag === tag.name"
+                      :model-value="store.state.leftPanel._tag === tag.name"
                       @update:model-value="(val) => toggleTag(tag.name, val)"
-                      :header-class="state.tag === tag.name ? 'text-primary text-bold' : ''"
+                      :header-class="store.state.leftPanel.tag === tag.name ? 'text-primary text-bold' : ''"
                       content-class="q-pa-none"
                     >
                       <template #header>
@@ -249,21 +249,21 @@
                             <q-icon
                               style="vertical-align: top;"
                               class="q-mr-sm"
-                              :name="state.tag == tag.name ? 'folder' : 'folder_open'"
+                              :name="store.state.leftPanel.tag == tag.name ? 'folder' : 'folder_open'"
                             ></q-icon>
                             <span>{{ tag.name }} <q-chip style="position:relative; top: -1px;" class="q-ml-md" dense>{{ tag.routes.length }}</q-chip></span>
-                            <a v-if="state._tag == tag.name" target="_blank" class="q-ml-sm" v-if="state.swaggerUrl" :href="state.swaggerUrl + '#/' + tag.name">
+                            <a v-if="store.state.leftPanel._tag == tag.name" target="_blank" class="q-ml-sm" v-if="store.state.swagger.url" :href="store.state.swagger.url + '#/' + tag.name">
                               <q-icon color="primary" size="" name="link" title="open in swagger"></q-icon>
                             </a>
                         </div>
                       </template>
                         <q-list separator style="overflow: auto; max-height: 60vh;">
                           <q-item
-                            v-for="route in (state.hidePrimitiveRoute ? tag.routes.filter(r => !r.is_primitive) :tag.routes || [])"
+                            v-for="route in (store.state.filter.hidePrimitiveRoute ? tag.routes.filter(r => !r.is_primitive) :tag.routes || [])"
                             :key="route.id"
                             clickable
                             v-ripple
-                            :active="state.routeId === route.id"
+                            :active="store.state.leftPanel.routeId === route.id"
                             active-class=""
                             @click="selectRoute(route.id)"
                           >
@@ -274,7 +274,7 @@
                                   name="data_object"
                                 ></q-icon>
                                 {{ route.name }}
-                                <a v-if="state.routeId == route.id" target="_blank" class="q-ml-md" v-if="state.swaggerUrl" :href="state.swaggerUrl + '#/' + tag.name + '/' + route.unique_id">
+                                <a v-if="store.state.leftPanel.routeId == route.id" target="_blank" class="q-ml-md" v-if="store.state.swagger.url" :href="store.state.swagger.url + '#/' + tag.name + '/' + route.unique_id">
                                   <q-icon color="primary" size="" name="link" title="open in swagger"></q-icon>
                                 </a>
                               </span>
@@ -298,22 +298,12 @@
             <template #after>
               <div style="position: relative; width: 100%; height: 100%;">
                 <div id="graph" class="adjust-fit"></div>
-                <div style="position: absolute; left: 8px; bottom: 8px; z-index: 10; background: rgba(255,255,255,0.85); border-radius: 4px; padding: 2px 8px;">
+                <div style="position: absolute; left: 8px; top: 8px; z-index: 10; background: rgba(255,255,255,0.85); border-radius: 4px; padding: 2px 8px;">
                   <div class="q-mt-sm">
                     <q-toggle
-                      v-model="state.focus"
-                      v-show="schemaCodeName"
-                      @update:model-value="val => onFocusChange(val)"
-                      label="Focus"
-                      dense
-                      title="pick a schema and toggle focus on to display related nodes only"
-                    />
-                  </div>
-                  <div class="q-mt-sm">
-                    <q-toggle
-                      v-if="state.enableBriefMode"
+                      v-if="store.state.modeControl.briefModeEnabled"
                       dense
-                      v-model="state.brief"
+                      v-model="store.state.filter.brief"
                       label="Brief Mode"
                       @update:model-value="(val) => toggleBrief(val)"
                       title="skip middle classes, config module_prefix to enable it"
@@ -321,7 +311,7 @@
                   </div>
                   <div class="q-mt-sm">
                     <q-toggle
-                      v-model="state.hidePrimitiveRoute"
+                      v-model="store.state.filter.hidePrimitiveRoute"
                       @update:model-value="(val) => toggleHidePrimitiveRoute(val)"
                       label="Hide Primitive"
                       dense
@@ -330,120 +320,53 @@
                   </div>
                   <div class="q-mt-sm">
                     <q-toggle
-                      v-model="state.showModule"
+                      v-model="store.state.filter.showModule"
                       @update:model-value="(val) => toggleShowModule(val)"
                       label="Show Module Cluster"
                       dense
                       title="show module cluster"
                     />
                   </div>
+                  <div class="q-mt-sm">
+                    <q-toggle
+                      v-model="store.state.modeControl.focus"
+                      v-show="store.state.schemaDetail.schemaCodeName"
+                      @update:model-value="val => onFocusChange(val)"
+                      label="Focus"
+                      dense
+                      title="pick a schema and toggle focus on to display related nodes only"
+                    />
                 </div>
               </div>
             </template>
           </q-splitter>
         </q-page-container>
       </q-layout>
-      <!-- Detail Dialog -->
-      <q-dialog v-model="showDetail" :persistent="true" :maximized="true">
-        <detail-dialog
-          :schema-name="schemaName"
-          :show-fields="state.showFields"
-          :model-value="showDetail"
-          @close="closeDetail"
-        />
-      </q-dialog>
 
       <!-- Schema Field Filter Dialog -->
       <q-dialog
-        v-model="showSchemaFieldFilter"
+        v-model="store.state.searchDialog.show"
         :persistent="true"
         :maximized="true"
       >
         <schema-field-filter
-          :schemas="state.rawSchemasFull"
-          :schema-name="schemaFieldFilterSchema"
-          @close="showSchemaFieldFilter = false"
+          :schemas="store.state.graph.schemaMap"
+          :schema-name="store.state.searchDialog.schema"
+          @close="store.state.searchDialog.show = false"
         />
       </q-dialog>
 
-      <q-dialog v-model="showRouteDetail" seamless position="bottom">
+      <q-dialog v-model="store.state.routeDetail.show" seamless position="bottom">
         <q-card style="width: 1100px; max-width: 1100px; max-height: 40vh">
           <route-code-display
-            :route-id="routeCodeId"
-            @close="showRouteDetail=false"
+            :route-id="store.state.routeDetail.routeCodeId"
+            @close="store.state.routeDetail.show = false"
           />
         </q-card>
       </q-dialog>
 
-      <!-- Dump Core Data Dialog -->
-      <q-dialog v-model="showDumpDialog" :maximized="true" :persistent="false">
-        <div style="height: 100%; position: relative; background: #fff">
-          <q-btn
-            flat
-            dense
-            round
-            icon="content_copy"
-            aria-label="Copy"
-            @click="copyDumpJson"
-            style="
-              position: absolute;
-              top: 6px;
-              right: 62px;
-              z-index: 11;
-              background: rgba(255, 255, 255, 0.85);
-            "
-          ></q-btn>
-          <q-btn
-            flat
-            dense
-            round
-            icon="close"
-            aria-label="Close"
-            @click="showDumpDialog = false"
-            style="
-              position: absolute;
-              top: 6px;
-              right: 6px;
-              z-index: 11;
-              background: rgba(255, 255, 255, 0.85);
-            "
-          ></q-btn>
-          <div>
-            <pre
-              style="padding: 20px; overflow: auto"
-            ><code>{{ dumpJson }}</code></pre>
-          </div>
-        </div>
-      </q-dialog>
-
-      <!-- Import Core Data Dialog -->
-      <q-dialog v-model="showImportDialog" :persistent="true">
-        <q-card style="min-width: 70vw; max-width: 90vw">
-          <q-card-section class="text-h6">Import core data JSON</q-card-section>
-          <q-card-section>
-            <q-btn color="primary" label="Render" @click="onImportConfirm" />
-          </q-card-section>
-          <q-card-section>
-            <q-input
-              v-model="importJsonText"
-              type="textarea"
-              autogrow
-              filled
-              label="Paste JSON here"
-            />
-          </q-card-section>
-        </q-card>
-      </q-dialog>
-
-      <!-- Render Graph Dialog (from imported core data) -->
-      <q-dialog v-model="showRenderGraph" :maximized="true" :persistent="false">
-        <render-graph
-          :core-data="renderCoreData"
-          @close="showRenderGraph = false"
-        />
-      </q-dialog>
     </div>
-    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+    <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
     <script src="fastapi-voyager-static/quasar.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" integrity="sha512-egJ/Y+22P9NQ9aIyVCh0VCOsfydyn8eNmqBy+y2CnJG+fpRIxXMS6jbWP8tVKp0jp+NO5n8WtMUAnNnGoJKi4w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <script