<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hugging Face Network by Bunka</title>
<style>
:root {
--primary-color: #4a4a4a;
--secondary-color: #6c757d;
--background-color: #f8f9fa;
--hover-color: #007bff;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
body {
font-family: 'Arial', sans-serif;
line-height: 1.6;
color: var(--primary-color);
background-color: var(--background-color);
display: flex;
flex-direction: column;
}
header {
background-color: white;
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%;
display: flex;
}
iframe {
flex-grow: 1;
border: none;
}
footer {
background-color: var(--secondary-color);
color: white;
text-align: center;
padding: 10px 0;
}
.social-links {
display: inline-block;
vertical-align: middle;
}
.social-links a {
opacity: 0.7;
transition: opacity 0.3s ease;
margin: 0 5px;
}
.social-links a:hover {
opacity: 1;
}
.social-links img {
width: 20px;
height: 20px;
}
.pagination {
display: flex;
justify-content: center;
align-items: center;
padding: 15px 0;
background-color: white;
box-shadow: 0 -2px 4px rgba(0,0,0,0.1);
}
.pagination button {
background-color: transparent;
border: none;
color: var(--secondary-color);
font-size: 16px;
padding: 5px 10px;
margin: 0 5px;
cursor: pointer;
transition: color 0.3s ease;
}
.pagination button:hover {
color: var(--hover-color);
}
.pagination button.active {
color: var(--primary-color);
font-weight: bold;
}
.pagination .page-numbers {
display: flex;
align-items: center;
}
.pagination .divider {
width: 1px;
height: 20px;
background-color: var(--secondary-color);
margin: 0 10px;
}
</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 analyzed 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
• We then used the Force Atlas and Leiden algorithm to create this network.
Package by github.com/medialab/ipysigma">ⓘ</span>
</div>
</div>
</header>
<div class="graph-container">
<iframe id="graph-frame" src="co_user.html" width="100%" height="100%" frameborder="0"></iframe>
</div>
<div class="pagination">
<button id="prev"><</button>
<div class="page-numbers">
<button id="page1" class="active">1</button>
<div class="divider"></div>
<button id="page2">2</button>
</div>
<button id="next">></button>
</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>
<a href="https://www.linkedin.com/company/85881815" target="_blank"><img src="https://qtyhiurxoicqmxzpktkd.supabase.co/storage/v1/object/sign/email-content/LinkedIn_logo_initials.png?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJlbWFpbC1jb250ZW50L0xpbmtlZEluX2xvZ29faW5pdGlhbHMucG5nIiwiaWF0IjoxNzI0ODQwMDQ1LCJleHAiOjE3ODc5MTIwNDV9.9d6MAK3x9LOmsYyB8KyGk5PPFGkPNoGjsW7wdxiZt3M&t=2024-08-28T10%3A14%3A05.996Z" alt="LinkedIn"></a>
<a href="https://discord.gg/3YRPVqXabQ" target="_blank"><img src="https://qtyhiurxoicqmxzpktkd.supabase.co/storage/v1/object/sign/email-content/discord.png?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJlbWFpbC1jb250ZW50L2Rpc2NvcmQucG5nIiwiaWF0IjoxNzI0ODM5ODc4LCJleHAiOjE3ODc5MTE4Nzh9.w1Ggb_Nh1UnjKeVujp_7ljAW0ZSP3ETNkYJLKuBZ_Zo&t=2024-08-28T10%3A11%3A18.993Z" alt="Discord"></a>
</div>
</footer>
<script>
const graphFrame = document.getElementById('graph-frame');
const prev = document.getElementById('prev');
const next = document.getElementById('next');
const page1 = document.getElementById('page1');
const page2 = document.getElementById('page2');
const mainTitle = document.getElementById('main-title');
const subtitle = document.getElementById('subtitle');
let currentPage = 1;
function updateGraph() {
if (currentPage === 1) {
graphFrame.src = 'co_user.html';
page1.classList.add('active');
page2.classList.remove('active');
mainTitle.textContent = 'Open Source AI Network - Mapping the top 500 HF users';
subtitle.textContent = 'Two users are closer if they are followed by the same people.';
} else {
graphFrame.src = 'co_organization.html';
page2.classList.add('active');
page1.classList.remove('active');
mainTitle.textContent = 'Open Source AI Network - Mapping dataset/model producing organizations';
subtitle.textContent = 'Two organizations are closer if their members have common followers.';
}
}
prev.addEventListener('click', () => {
if (currentPage > 1) {
currentPage--;
updateGraph();
}
});
next.addEventListener('click', () => {
if (currentPage < 2) {
currentPage++;
updateGraph();
}
});
page1.addEventListener('click', () => {
currentPage = 1;
updateGraph();
});
page2.addEventListener('click', () => {
currentPage = 2;
updateGraph();
});
</script>
</body>
</html>