Spaces:

bunkalab
/

mapping_the_OS_community

Running

App Files Files Community

Alcime commited on Sep 11, 2024

Commit

64e0cf8

verified ·

1 Parent(s): a551b8e

Update index.html

Browse files

Files changed (1) hide show

index.html +56 -12

index.html CHANGED Viewed

@@ -30,17 +30,57 @@
             box-shadow: 0 2px 4px rgba(0,0,0,0.1);
             padding: 15px 0;
             text-align: center;
         }
         h1 {
             color: var(--primary-color);
             margin: 0 0 10px 0;
             font-size: 1.8em;
         }
         .subtitle {
             font-size: 1em;
             color: var(--secondary-color);
             margin: 0;
         }
         .graph-container {
             flex-grow: 1;
             width: 100%;
@@ -56,12 +96,6 @@
             text-align: center;
             padding: 10px 0;
         }
-        .logo {
-            max-width: 100px;
-            height: auto;
-            vertical-align: middle;
-            margin-right: 10px;
-        }
         .social-links {
             display: inline-block;
             vertical-align: middle;
@@ -78,7 +112,7 @@
             width: 20px;
             height: 20px;
         }
-      .pagination {
             display: flex;
             justify-content: center;
             align-items: center;
@@ -116,9 +150,20 @@
     </style>
 </head>
 <body>
-<header>
-        <h1 id="main-title">Open Source AI Network - Mapping the top 500 HF users</h1>
-        <p id="subtitle" class="subtitle">Two users are closer if they are followed by the same people.</p>
     </header>
     <div class="graph-container">
@@ -136,7 +181,6 @@
     </div>
     <footer>
-        <img src="https://huggingface.co/spaces/bunkalab/README/raw/main/bunka_logo.png" alt="Bunka Logo" class="logo">
         <div class="social-links">
             <a href="https://github.com/charlesdedampierre/BunkaTopics" target="_blank"><img src="https://qtyhiurxoicqmxzpktkd.supabase.co/storage/v1/object/sign/email-content/github-logo.png?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJlbWFpbC1jb250ZW50L2dpdGh1Yi1sb2dvLnBuZyIsImlhdCI6MTcyNDgzOTk3NywiZXhwIjoxNzg3OTExOTc3fQ.qPEnoJOVqTkWdquVPkMWZFYHv29q8pb5mbcVBGFZWTU&t=2024-08-28T10%3A12%3A58.108Z" alt="GitHub"></a>
             <a href="https://huggingface.co/bunkalab" target="_blank"><img src="https://qtyhiurxoicqmxzpktkd.supabase.co/storage/v1/object/sign/email-content/hugging%20face.png?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJlbWFpbC1jb250ZW50L2h1Z2dpbmcgZmFjZS5wbmciLCJpYXQiOjE3MjQ4Mzk4NDAsImV4cCI6MTc4NzkxMTg0MH0.6gOtEK2BXc3kSL3PIswY0LJyvp790580Jm6vxztiFhw&t=2024-08-28T10%3A10%3A40.145Z" alt="Hugging Face"></a>
@@ -145,7 +189,7 @@
         </div>
     </footer>
- <script>
         const graphFrame = document.getElementById('graph-frame');
         const prev = document.getElementById('prev');
         const next = document.getElementById('next');

             box-shadow: 0 2px 4px rgba(0,0,0,0.1);
             padding: 15px 0;
             text-align: center;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .logo-container {
+            padding-left: 20px;
+        }
+        .logo {
+            max-width: 100px;
+            height: auto;
+        }
+        .title-container {
+            flex-grow: 1;
+            text-align: center;
         }
         h1 {
             color: var(--primary-color);
             margin: 0 0 10px 0;
             font-size: 1.8em;
         }
+        .subtitle-container {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
         .subtitle {
             font-size: 1em;
             color: var(--secondary-color);
             margin: 0;
         }
+        .help-icon {
+            margin-left: 10px;
+            cursor: help;
+            position: relative;
+        }
+        .help-icon:hover::after {
+            content: attr(data-tooltip);
+            position: absolute;
+            top: 100%;
+            left: 50%;
+            transform: translateX(-50%);
+            background-color: #333;
+            color: white;
+            padding: 10px;
+            border-radius: 5px;
+            width: 300px;
+            z-index: 1;
+            font-size: 0.9em;
+            line-height: 1.4;
+            text-align: left;
+        }
         .graph-container {
             flex-grow: 1;
             width: 100%;
             text-align: center;
             padding: 10px 0;
         }
         .social-links {
             display: inline-block;
             vertical-align: middle;
             width: 20px;
             height: 20px;
         }
+        .pagination {
             display: flex;
             justify-content: center;
             align-items: center;
     </style>
 </head>
 <body>
+    <header>
+        <div class="logo-container">
+            <img src="https://huggingface.co/spaces/bunkalab/README/raw/main/bunka_logo.png" alt="Bunka Logo" class="logo">
+        </div>
+        <div class="title-container">
+            <h1 id="main-title">Open Source AI Network - Mapping the top 500 HF users</h1>
+            <div class="subtitle-container">
+                <p id="subtitle" class="subtitle">Two users are closer if they are followed by the same people.</p>
+                <span class="help-icon" data-tooltip="• We collected and analyze data about 895,007 models and 204,371 datasets
+• We filtered those into 14,620 content providers
+• 2,615 organizations (not users) were filtered, associated with 15,611 most relevant users
+• Using the Force Atlas and Leidenalg algorithm, we created this network">ⓘ</span>
+            </div>
+        </div>
     </header>
     <div class="graph-container">
     </div>
     <footer>
         <div class="social-links">
             <a href="https://github.com/charlesdedampierre/BunkaTopics" target="_blank"><img src="https://qtyhiurxoicqmxzpktkd.supabase.co/storage/v1/object/sign/email-content/github-logo.png?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJlbWFpbC1jb250ZW50L2dpdGh1Yi1sb2dvLnBuZyIsImlhdCI6MTcyNDgzOTk3NywiZXhwIjoxNzg3OTExOTc3fQ.qPEnoJOVqTkWdquVPkMWZFYHv29q8pb5mbcVBGFZWTU&t=2024-08-28T10%3A12%3A58.108Z" alt="GitHub"></a>
             <a href="https://huggingface.co/bunkalab" target="_blank"><img src="https://qtyhiurxoicqmxzpktkd.supabase.co/storage/v1/object/sign/email-content/hugging%20face.png?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJlbWFpbC1jb250ZW50L2h1Z2dpbmcgZmFjZS5wbmciLCJpYXQiOjE3MjQ4Mzk4NDAsImV4cCI6MTc4NzkxMTg0MH0.6gOtEK2BXc3kSL3PIswY0LJyvp790580Jm6vxztiFhw&t=2024-08-28T10%3A10%3A40.145Z" alt="Hugging Face"></a>
         </div>
     </footer>
+    <script>
         const graphFrame = document.getElementById('graph-frame');
         const prev = document.getElementById('prev');
         const next = document.getElementById('next');