Update index.html

index.html

@@ -5,6 +5,26 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Openness Leaderboard</title>
     <style>
+        /* Add some basic styling for the tabs and tables */
+      .tabs {
+            margin-bottom: 20px;
+        }
+      .tabs ul {
+            list-style: none;
+            padding: 0;
+            margin: 0;
+        }
+      .tabs li {
+            display: inline-block;
+            margin-right: 10px;
+        }
+      .tabs a {
+            text-decoration: none;
+            color: #337ab7;
+        }
+      .tabs a.active {
+            color: #23527c;
+        }
         table {
             width: 50%;
             border-collapse: collapse;
@@ -28,18 +48,28 @@
 
 <h2>Openness Leaderboard</h2>
 
-<table>
-    <thead>
-        <tr>
-            <th>Rank</th>
-            <th>Model</th>
-            <th>weights</th>
-            <th>data</th>
-            <th>open source license</th>
-            <th>Organization</th>
-        </tr>
-    </thead>
-    <tbody>       
+<div class="tabs">
+    <ul>
+        <li><a href="#" class="active" data-tab="language-models">Language Models</a></li>
+        <li><a href="#" data-tab="text-to-image-models">Text-to-Image Models</a></li>
+        <li><a href="#" data-tab="text-to-speech-models">Text-to-Speech Models</a></li>
+    </ul>
+</div>
+
+<div id="leaderboard">
+    <!-- Language Models leaderboard will be displayed here by default -->
+    <table id="language-models">
+        <thead>
+            <tr>
+                <th>Rank</th>
+                <th>Model</th>
+                <th>weights</th>
+                <th>data</th>
+                <th>open source license</th>
+                <th>Organization</th>
+            </tr>
+        </thead>
+        <tbody>
         <tr>
             <td>1</td>
             <td>K2-65B</td>
@@ -121,14 +151,193 @@
             <td>❌</td>
             <td>Deepseek</td>
         </tr>
-        
-    </tbody>
-</table>
-<div class="image-container">
+        </tbody>
+    </table>
+
+    <!-- Text-to-Image Models leaderboard will be displayed when the tab is clicked -->
+    <table id="text-to-image-models" style="display: none;">
+        <thead>
+            <tr>
+                <th>Rank</th>
+                <th>Model</th>
+                <th>weights</th>
+                <th>data</th>
+                <th>open source license</th>
+                <th>Organization</th>
+            </tr>
+        </thead>
+        <tbody>
+            <!--  text-to-image model data  -->
+          <tr>
+                <td>1</td>
+                <td>flux-schnell</td>
+                <td>✅</td>
+                <td>❌</td>
+                <td>✅</td>
+                <td>blackforestlabs</td>
+            </tr>
+          <tr>
+                <td>2</td>
+                <td>Aura-flow 0.3</td>
+                <td>✅</td>
+                <td>❌</td>
+                <td>✅</td>
+                <td>falai</td>
+           </tr>
+          <tr>
+                <td>3</td>
+                <td>flux-dev</td>
+                <td>✅</td>
+                <td>❌</td>
+                <td>❌</td>
+                <td>blackforestlabs</td>
+           </tr>
+           <tr>
+                <td>4</td>
+                <td>StableDiffusion medium 3</td>
+                <td>✅</td>
+                <td>❌</td>
+                <td>❌</td>
+                <td>StabilityAI</td>
+            </tr>
+          <tr>
+                <td>5</td>
+                <td>flux-pro</td>
+                <td>❌</td>
+                <td>❌</td>
+                <td>❌</td>
+                <td>blackforestlabs</td>
+           </tr>
+          <tr>
+                <td>6</td>
+                <td>Midjourney v6.1</td>
+                <td>❌</td>
+                <td>❌</td>
+                <td>❌</td>
+                <td>Midjourney</td>
+           </tr>
+          <tr>
+                <td>7</td>
+                <td>Dalle 3</td>
+                <td>❌</td>
+                <td>❌</td>
+                <td>❌</td>
+                <td>OpenAI</td>
+           </tr>          
+        </tbody>
+    </table>
+
+    <!-- Text-to-Speech Models leaderboard will be displayed when the tab is clicked -->
+    <table id="text-to-speech-models" style="display: none;">
+        <thead>
+            <tr>
+                <th>Rank</th>
+                <th>Model</th>
+                <th>weights</th>
+                <th>data</th>
+                <th>open source license</th>
+                <th>Organization</th>
+            </tr>
+        </thead>
+        <tbody>
+            <!--  text-to-speech model data  -->
+          <tr>
+                <td>1</td>
+                <td>Parler-TTS</td>
+                <td>✅</td>
+                <td>✅</td>
+                <td>✅</td>
+                <td>huggingface</td>
+            </tr>
+           <tr>
+                <td>2</td>
+                <td>metavoice</td>
+                <td>✅</td>
+                <td>❌</td>
+                <td>✅</td>
+                <td>metavoiceio</td>
+            </tr>        
+           <tr>
+                <td>3</td>
+                <td>openvoicev2</td>
+                <td>✅</td>
+                <td>❌</td>
+                <td>✅</td>
+                <td>myshell-ai</td>
+            </tr>
+           <tr>
+                <td>4</td>
+                <td>styletts2</td>
+                <td>✅</td>
+                <td>❌</td>
+                <td>✅</td>
+                <td>styletts2</td>
+            </tr>
+           <tr>
+                <td>5</td>
+                <td>melo-tts</td>
+                <td>✅</td>
+                <td>❌</td>
+                <td>✅</td>
+                <td>myshell-ai</td>
+            </tr>
+           <tr>
+                <td>6</td>
+                <td>fish-speech 1.4</td>
+                <td>✅</td>
+                <td>❌</td>
+                <td>❌</td>
+                <td>fish-audio</td>
+            </tr>
+           <tr>
+                <td>7</td>
+                <td>Elevenlabs</td>
+                <td>❌</td>
+                <td>❌</td>
+                <td>❌</td>
+                <td>Elevenlabs</td>
+            </tr>          
+        </tbody>
+    </table>
+</div>
+
+<script>
+    const tabs = document.querySelectorAll('.tabs li a');
+    const leaderboard = document.getElementById('leaderboard');
+    const languageModelsTable = document.getElementById('language-models');
+    const textToImageModelsTable = document.getElementById('text-to-image-models');
+    const textToSpeechModelsTable = document.getElementById('text-to-speech-models');
+    tabs.forEach((tab, index) => {
+        tab.addEventListener('click', (e) => {
+            e.preventDefault();
+            const tabId = tab.getAttribute('data-tab');
+            if (tabId === 'language-models') {
+                languageModelsTable.style.display = 'table';
+                textToImageModelsTable.style.display = 'none';
+                textToSpeechModelsTable.style.display = 'none';
+                tabs.forEach((t) => t.classList.remove('active'));
+                tab.classList.add('active');
+            } else if (tabId === 'text-to-image-models') {
+                languageModelsTable.style.display = 'none';
+                textToImageModelsTable.style.display = 'table';
+                textToSpeechModelsTable.style.display = 'none';
+                tabs.forEach((t) => t.classList.remove('active'));
+                tab.classList.add('active');
+            } else if (tabId === 'text-to-speech-models') {
+                languageModelsTable.style.display = 'none';
+                textToImageModelsTable.style.display = 'none';
+                textToSpeechModelsTable.style.display = 'table';
+                tabs.forEach((t) => t.classList.remove('active'));
+                tab.classList.add('active');
+            }
+        });
+    });
+</script>
+  <div class="image-container">
     <img src="https://blog.mozilla.org/wp-content/blogs.dir/278/files/2024/05/columbia-convening.png" alt="Image" style="width: 500px; height: auto;"> <!-- Resize the image to 300px wide -->
 </div>
 
-<p style="clear: both;"><strong>🚨:</strong> This is an oversimplified leaderboard, there are so much more other than the weights, training data and license for a large language model such as the code to train the model, the model architecture, data preprocessing code etc. Please refer to the <a href="https://arxiv.org/abs/2403.13784" target="_blank">MOF paper</a> to learn more. Future updates will include a more detailed leaderboard with more models and components added. The purpose of this leaderboard is to let the world know that there are certain models claiming to be "open" despite falling short of openness standards (also known as open washing) due to restricted access to training data, training code, the use of custom licenses etc. Transparency and accurate representation of AI models openness are crucial.</p>
+<p style="clear: both;"><strong>🚨:</strong> This is an oversimplified leaderboard, there are so much more other than the weights, training data and license for a model such as the code to train the model, the model architecture, data preprocessing code etc. Please refer to the <a href="https://arxiv.org/abs/2403.13784" target="_blank">MOF paper</a> to learn more. Future updates will include a more detailed leaderboard with more models and components added. The purpose of this leaderboard is to let the world know that there are certain models claiming to be "open" despite falling short of openness standards (also known as open washing) due to restricted access to training data, training code, the use of custom licenses etc. Transparency and accurate representation of AI models openness are crucial.</p>
 <p style="clear: both;">image source: <a href="https://arxiv.org/abs/2405.15802" target="_blank">https://arxiv.org/abs/2405.15802</a></p>
 </body>
 </html>