Upload from GitHub Actions: Merge remote changes with local frontend updates

frontend/src/App.js

@@ -19,6 +19,8 @@ function App () {
   const [error, setError] = useState(null)
   const [selectedLanguages, setSelectedLanguages] = useState([])
   const [dialogVisible, setDialogVisible] = useState(false)
+  const [aboutVisible, setAboutVisible] = useState(false)
+  const [contributeVisible, setContributeVisible] = useState(false)
 
   useEffect(() => {
     fetch('/api/data', {
@@ -54,9 +56,22 @@ function App () {
 
   return (
     <PrimeReactProvider>
-      <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
+      <div style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column', width: '100vw' }}>
         <div style={{backgroundColor: '#fff3cd', color: '#856404', padding: '0.75rem 1.25rem', marginBottom: '1rem', border: '1px solid #ffeeba', borderRadius: '0.25rem', textAlign: 'center'}}>
           <strong>Work in Progress:</strong> This dashboard is currently under active development. Evaluation results are not yet final.
+          <a href="https://github.com/datenlabor-bmz/ai-language-monitor" target="_blank" rel="noopener noreferrer" style={{ 
+            textDecoration: 'none', 
+            color: '#856404', 
+            float: 'right', 
+            fontSize: '1.2rem',
+            fontWeight: 'bold',
+            padding: '0 0.5rem',
+            borderRadius: '3px',
+            backgroundColor: 'rgba(255,255,255,0.3)'
+          }}>
+            <i className="pi pi-github" title="View on GitHub" style={{ marginRight: '0.3rem' }} />
+            GitHub
+          </a>
         </div>
         <header
           style={{
@@ -64,14 +79,17 @@ function App () {
             flexDirection: 'column',
             alignItems: 'center',
             justifyContent: 'center',
-            padding: '5vh 0'
+            padding: '5vh 5vw',
+            width: '100%',
+            maxWidth: '1400px',
+            margin: '0 auto'
           }}
         >
           <div>
             <span
               role='img'
               aria-label='Globe Emoji'
-              style={{ fontSize: '70px' }}
+              style={{ fontSize: '40px' }}
             >
               🌍
             </span>
@@ -79,85 +97,79 @@ function App () {
           <h1 style={{ fontSize: '2.5rem', fontWeight: '700' }}>
               AI Language Proficiency Monitor
           </h1>
-          <p style={{ fontSize: '1.15rem', color: '#555', marginTop: '0' }}>
-            Tracking language proficiency of AI models for every language
+          <p style={{ fontSize: '1.10rem', color: '#555', marginTop: '0', marginBottom: '2rem' }}>
+            Comprehensive multilingual evaluation results for AI language models
           </p>
+          
+          <div style={{ display: 'flex', gap: '1rem', marginBottom: '1.5rem', flexWrap: 'wrap', justifyContent: 'center' }}>
+            <Button 
+              label="📚 About this tool" 
+              className="p-button-text"
+              onClick={() => setAboutVisible(true)}
+              style={{
+                color: '#666',
+                border: '1px solid #ddd',
+                padding: '0.5rem 1rem',
+                borderRadius: '4px',
+                fontSize: '0.9rem'
+              }}
+            />
+            
+            <Button 
+              label="🚀 Add your model" 
+              className="p-button-text"
+              onClick={() => setContributeVisible(true)}
+              style={{
+                color: '#666',
+                border: '1px solid #ddd',
+                padding: '0.5rem 1rem',
+                borderRadius: '4px',
+                fontSize: '0.9rem'
+              }}
+            />
+          </div>
+          
           {data && (
             <AutoComplete
               languages={data?.language_table}
               onComplete={items => setSelectedLanguages(items)}
             />
           )}
-          <div style={{maxWidth: '600px', textAlign: 'center', marginTop: '2rem'}}>
-            <p>The <i>AI Language Proficiency Monitor</i> presents comprehensive multilingual evaluation results of AI language models.</p>
-            <ul style={{textAlign: 'left'}}>
-              <li><b>Practitioners</b> can pick the best model for a given language.</li>
-              <li><b>Policymakers and funders</b> can identify and prioritize neglected languages.</li>
-              <li><b>Model developers</b> can compete on our <i>AI Language Proficiency</i> metric.</li>
-            </ul>
-            <p>We invite the community to <a href="https://forms.gle/ckvY9pS7XLcHYnaV8" target="_blank" rel="noopener noreferrer">submit</a> their custom finetuned models, and to <a href="https://github.com/datenlabor-bmz/ai-language-monitor/blob/main/CONTRIBUTING.md" target="_blank" rel="noopener noreferrer">integrate</a> benchmarks for more languages and tasks.</p>
-            <p>Benchmark results automatically refresh every night and include the most popular models on <a href="https://openrouter.ai" target="_blank" rel="noopener noreferrer">OpenRouter</a>, plus community-listed models.</p>
-            {/* <p>For a detailed methodlogy, see <a href="#">XXX</a>.</p> */}
-            <p>The AI Language Proficiency Monitor is a collaboration between BMZ's <a href="https://www.bmz-digital.global/en/overview-of-initiatives/the-bmz-data-lab/" target="_blank" rel="noopener noreferrer">Data Lab</a>, the BMZ-Initiative <a href="https://www.bmz-digital.global/en/overview-of-initiatives/fair-forward/" target="_blank" rel="noopener noreferrer">Fair Forward</a> (implemented by GIZ), and the <a href="https://www.dfki.de/en/web/research/research-departments/multilinguality-and-language-technology/ee-team" target="_blank" rel="noopener noreferrer">E&E group</a> of DFKI's Multilinguality and Language Technology Lab.</p>
-          </div>
-          <a href="https://github.com/datenlabor-bmz/ai-language-monitor" target="_blank" rel="noopener noreferrer" style={{ textDecoration: 'none', color: 'inherit', marginTop: '2rem' }}>
-            <i className="pi pi-github" style={{ fontSize: '1.5rem' }} />
-          </a>
         </header>
         <main
           style={{
             display: 'flex',
-            flexDirection: 'row',
-            flexWrap: 'wrap',
-            gap: '2rem',
-            alignItems: 'center',
+            flexDirection: 'column',
+            gap: '3rem',
             width: '100%',
-            height: '100%',
-            justifyContent: 'center',
-            paddingBottom: '5vh'
+            paddingBottom: '5vh',
+            padding: '1rem 15vw 5vh 15vw'
           }}
         >
           {loading && (
-            <i className='pi pi-spinner pi-spin' style={{ fontSize: '4rem' }} />
+            <div style={{ width: '100%', textAlign: 'center' }}>
+              <i className='pi pi-spinner pi-spin' style={{ fontSize: '4rem' }} />
+            </div>
           )}
-          {error && <p>Error: {error}</p>}
+          {error && <div style={{ width: '100%', textAlign: 'center' }}><p>Error: {error}</p></div>}
           {data && (
             <>
-              <div
-                style={{
-                  flex: '60vw 100vw 40vw',
-                  maxWidth: 'min(100vw, 800px)'
-                }}
-              >
+              <div style={{ width: '100%' }}>
                 <ModelTable data={data.model_table} />
               </div>
-              <div
-                style={{
-                  flex: '60vw 100vw 40vw',
-                  maxWidth: 'min(100vw, 800px)'
-                }}
-              >
+              <div style={{ width: '100%' }}>
                 <LanguageTable
                   data={data.language_table}
                   selectedLanguages={selectedLanguages}
                   setSelectedLanguages={setSelectedLanguages}
                 />
               </div>
-              <div
-                style={{
-                  flex: '60vw 100vw 40vw',
-                  maxWidth: 'min(100vw, 800px)'
-                }}
-              >
+              <div style={{ width: '100%' }}>
                 <DatasetTable data={data} />
               </div>
               <div
                 id='figure'
                 style={{
-                  flex: '100vw 100vw 100vw',
-                  maxWidth: 'min(100vw, 800px)',
-                  alignItems: 'center',
-                  justifyContent: 'center',
                   width: '100%',
                   position: 'relative'
                 }}
@@ -193,13 +205,74 @@ function App () {
           )}
         </main>
 
+        {/* About Dialog */}
+        <Dialog
+          visible={aboutVisible}
+          onHide={() => setAboutVisible(false)}
+          style={{ width: '600px' }}
+          modal
+          header="About this tool"
+        >
+          <div>
+            <p>The <i>AI Language Proficiency Monitor</i> presents comprehensive multilingual evaluation results of AI language models.</p>
+            <h4>Who is this for?</h4>
+            <ul>
+              <li><b>Practitioners</b> can pick the best model for a given language.</li>
+              <li><b>Policymakers and funders</b> can identify and prioritize neglected languages.</li>
+              <li><b>Model developers</b> can compete on our <i>AI Language Proficiency</i> metric.</li>
+            </ul>
+            <h4>⚡ Live Updates</h4>
+            <p>Benchmark results automatically refresh every night and include the most popular models from <a href="https://openrouter.ai" target="_blank" rel="noopener noreferrer">OpenRouter</a>, plus community-submitted models.</p>
+            <h4>Authors</h4>
+            <p>The AI Language Proficiency Monitor is a collaboration between BMZ's <a href="https://www.bmz-digital.global/en/overview-of-initiatives/the-bmz-data-lab/" target="_blank" rel="noopener noreferrer">Data Lab</a>, the BMZ-Initiative <a href="https://www.bmz-digital.global/en/overview-of-initiatives/fair-forward/" target="_blank" rel="noopener noreferrer">Fair Forward</a> (implemented by GIZ), and the <a href="https://www.dfki.de/en/web/research/research-departments/multilinguality-and-language-technology/ee-team" target="_blank" rel="noopener noreferrer">E&E group</a> of DFKI's Multilinguality and Language Technology Lab.</p>
+            <h4>🔗 Links</h4>
+            <p>
+              <a 
+                href="https://github.com/datenlabor-bmz/ai-language-monitor" 
+                target="_blank" 
+                rel="noopener noreferrer"
+                style={{ 
+                  color: '#666', 
+                  textDecoration: 'none',
+                  display: 'inline-flex',
+                  alignItems: 'center',
+                  gap: '0.5rem'
+                }}
+              >
+                <i className="pi pi-github" style={{ fontSize: '1.2rem' }} />
+                View source code on GitHub
+              </a>
+            </p>
+          </div>
+        </Dialog>
+
+        {/* Contribute Dialog */}
+        <Dialog
+          visible={contributeVisible}
+          onHide={() => setContributeVisible(false)}
+          style={{ width: '600px' }}
+          modal
+          header="Add your model & Contribute"
+        >
+          <div>
+            <h4>🚀 Submit Your Model</h4>
+            <p>Have a custom fine-tuned model you'd like to see on the leaderboard?</p>
+            <p><a href="https://forms.gle/ckvY9pS7XLcHYnaV8" target="_blank" rel="noopener noreferrer" style={{ color: '#28a745', fontWeight: 'bold' }}>→ Submit your model here</a></p>
+            
+            <h4>🔧 Contribute to Development</h4>
+            <p>Help us expand language coverage and add new evaluation tasks:</p>
+            <p><a href="https://github.com/datenlabor-bmz/ai-language-monitor/blob/main/CONTRIBUTING.md" target="_blank" rel="noopener noreferrer" style={{ color: '#007bff', fontWeight: 'bold' }}>→ Contribution guidelines</a></p>
+          </div>
+        </Dialog>
+
+        {/* Full-screen Dialog for Charts */}
         <Dialog
           visible={dialogVisible}
           onHide={() => setDialogVisible(false)}
           style={{ width: '90vw', height: '90vh' }}
           maximizable
           modal
-          header="Charts"
+          header="Interactive Visualizations"
         >
           {data && (
             <div style={{ width: '100%', height: '100%' }}>

frontend/src/components/AutoComplete.js

@@ -4,7 +4,8 @@ const AutoComplete = ({ languages, onComplete }) => {
   const [autoComplete, setAutoComplete] = useState('')
   const [suggestions, setSuggestions] = useState([])
 
-  const exampleCodes = ['de', 'fr', 'ar', 'hi', 'sw', 'fa']
+  const exampleCodes = ['sw','ar', 'hi', 'en']
+//  const exampleCodes = ['ar', 'hi', 'sw', 'fa']
   const exampleLanguages = exampleCodes.map(code =>
     languages?.find(item => item.bcp_47 === code)
   )

frontend/src/components/DatasetTable.js

@@ -111,7 +111,7 @@ const DatasetTable = ({ data }) => {
       scrollable
       scrollHeight='600px'
       id='dataset-table'
-      style={{ width: '800px', minHeight: '650px' }}
+      style={{ width: '100%', minHeight: '650px' }}
     >
       <Column
         field='implemented'

frontend/src/components/LanguageTable.js

@@ -135,7 +135,7 @@ const LanguageTable = ({ data, selectedLanguages, setSelectedLanguages }) => {
       scrollable
       scrollHeight='600px'
       id='language-table'
-      style={{ width: '800px', minHeight: '650px' }}
+      style={{ width: '100%', minHeight: '650px' }}
     >
       <Column selectionMode='multiple' headerStyle={{ width: '3rem' }} />
       <Column

frontend/src/components/ModelTable.js

@@ -161,7 +161,7 @@ const ModelTable = ({ data }) => {
       scrollable
       scrollHeight='600px'
       id='model-table'
-      style={{ width: '800px', minHeight: '650px' }}
+      style={{ width: '100%', minHeight: '650px' }}
       emptyMessage='No models have been evaluated for the selected languages.'
     >
       <Column field='rank' body={rankBodyTemplate} headerTooltip='Rank' />